/* Kontakt — „Werkhalle live".
   Direkter Draht als Karte, Anfrage als Schriftfeld (E-Mail-Entwurf, siehe site.js),
   Zeichnung, Vorlagen, Anfahrt. Bewegung nur in erzeugten Linien (Zeichenblatt im
   Kopf, Blechteil-Zeichnung) und Typografie. Fotos stehen still. */

.seite-kontakt main {
  --w-grund: var(--grund, #eceeec);
  --w-flaeche: var(--flaeche, #e1e5e5);
  --w-text: var(--text, #15191c);
  --w-leise: var(--text-leise, #56616a);
  --w-linie: var(--linie, rgba(21, 25, 28, .14));
  --w-mulde: var(--mulde, rgba(21, 25, 28, .05));
  --w-rot: var(--rot, #e2231a);
  --w-blau: var(--blau, #1f7fd0);
  --w-stahl: var(--stahl, #aeb7bd);
  --w-anzeige: var(--schrift-anzeige, 'Barlow Semi Condensed', 'Arial Narrow', sans-serif);
  --w-schrift: var(--schrift-text, 'Barlow', system-ui, sans-serif);
  --w-mono: var(--schrift-mono, 'Martian Mono', ui-monospace, monospace);
  --w-geist: color-mix(in srgb, var(--w-text) 15%, transparent);
  --w-feldrand: color-mix(in srgb, var(--w-text) 30%, transparent);
  --w-fehler: color-mix(in srgb, var(--w-rot) 78%, var(--w-text));
}

/* --- Kopf: Zeichenblatt im Bühnen-Slot (erzeugt, nie über dem Foto) -------- */
.seite-kontakt .buehne-klein__feld > .kt-blatt-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
  color: color-mix(in srgb, var(--w-text) 26%, transparent);
}
.kt-blatt-svg .kt-l { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.kt-blatt-svg .kt-l--fein { opacity: .55; }
.kt-blatt-svg .kt-l--rot { stroke: var(--w-rot); opacity: .8; }
.kt-blatt-svg text { fill: currentColor; font: 500 11px var(--w-mono); letter-spacing: .08em; }
.kt-blatt-svg .kt-zug { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .kt-blatt-svg:not(.ist-gezeichnet) .kt-zug { stroke-dashoffset: 1; }
.kt-blatt-svg .kt-zug { transition: stroke-dashoffset 2.2s cubic-bezier(.3, .6, .2, 1); }

/* --- Gemeinsame Abschnittsform --------------------------------------------- */
.kt-abschnitt {
  position: relative; overflow: clip; padding: clamp(64px, 9vw, 128px) 0;
  background: var(--w-grund); color: var(--w-text); font-family: var(--w-schrift);
}
.kt-marke {
  display: flex; align-items: center; gap: 14px; margin: 0 0 20px;
  font: 500 12px/1.4 var(--w-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--w-leise);
}
.kt-marke__nr { color: var(--w-text); display: inline-flex; align-items: center; gap: 14px; }
.kt-marke__nr::after { content: ""; width: 36px; height: 2px; background: var(--w-rot); }
.kt-abschnitt h2 {
  font: 600 clamp(38px, 4.6vw, 68px)/1.02 var(--w-anzeige); margin: 0 0 22px; color: var(--w-text);
  text-wrap: balance; overflow-wrap: anywhere; hyphens: auto;
}
.kt-geist {
  position: absolute; z-index: 0; right: 0; top: -.3em;
  font: 700 clamp(140px, 20vw, 320px)/.8 var(--w-anzeige); color: transparent;
  -webkit-text-stroke: 1.2px var(--w-geist); transform: translate3d(0, var(--drift, 0px), 0);
  pointer-events: none; user-select: none;
}

/* --- 01/02 Karte + Anfrage -------------------------------------------------- */
.kt-blatt { padding-top: clamp(56px, 7vw, 104px); }
.kt-blatt .kt-duo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 88px); align-items: start;
}
.kt-blatt .kt-duo.duo--getauscht .kt-karte { order: 2; }

.kt-karte {
  position: sticky; top: 96px;
  padding: clamp(26px, 3vw, 40px); border: 1px solid var(--w-linie); border-radius: 6px;
  background: var(--w-flaeche); color: var(--w-text);
}
.kontaktkarte__name { font: 600 clamp(24px, 2vw, 30px)/1.15 var(--w-anzeige) !important; margin: 0 0 26px !important; }
.kt-daten { margin: 0; }
.kt-daten__zeile { padding: 18px 0; border-top: 1px solid var(--w-linie); }
.kt-daten dt { font: 500 11px/1.4 var(--w-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--w-leise); margin: 0 0 8px; }
.kt-daten dd { margin: 0; font-size: 17px; line-height: 1.55; }
.kt-daten__zeile--gross dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.kt-daten__wert {
  font: 600 clamp(26px, 2.5vw, 38px)/1.1 var(--w-anzeige); color: var(--w-text);
  text-decoration: none; user-select: text; -webkit-user-select: text; overflow-wrap: anywhere;
  background: linear-gradient(var(--w-rot), var(--w-rot)) 0 100% / 0 2px no-repeat;
  transition: background-size .3s ease;
}
.kt-daten__wert:hover, .kt-daten__wert:focus-visible { background-size: 100% 2px; }
.kt-karte .kopieren {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 12px;
  font: 500 12px/1 var(--w-mono); color: var(--w-text); background: var(--w-grund);
  border: 1px solid var(--w-linie); border-radius: 4px; cursor: pointer;
}
.kt-karte .kopieren:hover { border-color: var(--w-text); }
.kt-karte .kopieren svg, .kt-vorlagen .kopieren svg { width: 16px; height: 16px; flex: none; }
.kt-karte .kopieren[data-fertig="true"] { border-color: var(--w-text); }
.kt-adresse { font-style: normal; font-size: 18px; line-height: 1.5; }
.kt-route { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 15px; color: var(--w-text); text-underline-offset: 5px; }
.kt-route:hover { color: var(--w-fehler); }
.kt-fax dd { font: 400 14px/1.5 var(--w-mono); color: var(--w-leise); }

.kt-anfrage { scroll-margin-top: 96px; min-width: 0; }
.kt-einleitung { max-width: 60ch; margin: 0 0 28px; font-size: 18px; line-height: 1.6; color: var(--w-leise); }
.kt-ohnejs { padding: 20px; border: 1px solid var(--w-linie); border-radius: 6px; font-size: 17px; }

.kt-schriftfeld {
  position: relative; padding: clamp(20px, 3.4vw, 44px); border: 1px solid var(--w-linie); border-radius: 6px;
  background: var(--w-flaeche);
}
.kt-schriftfeld .formular__hinweis {
  margin: 0 0 22px; padding: 14px 16px; border-left: 3px solid var(--w-stahl); border-radius: 0 4px 4px 0;
  background: var(--w-mulde); font-size: 14px; line-height: 1.6; color: var(--w-leise);
}
.kt-fuellstand { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 26px; font: 500 12px/1.3 var(--w-mono); color: var(--w-leise); }
.kt-fuellstand b { color: var(--w-text); font-weight: 500; }
.kt-fuellstand__leiste { display: flex; gap: 4px; }
.kt-fuellstand__leiste i { width: 26px; height: 6px; border-radius: 1px; background: color-mix(in srgb, var(--w-text) 14%, transparent); transition: background-color .3s ease; }
.kt-fuellstand__leiste i.ist-voll { background: var(--w-rot); }

.kt-schriftfeld .feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.kt-schriftfeld .feld { position: relative; margin: 0 0 22px; min-width: 0; }
.kt-schriftfeld .feld > label { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; font: 600 15px/1.35 var(--w-schrift); letter-spacing: 0; text-transform: none; color: var(--w-text); }
.kt-schriftfeld .pflicht { color: var(--w-rot); font-weight: 700; }
.feld__optional { margin-left: auto; font: 400 11px/1 var(--w-mono); letter-spacing: .06em; color: var(--w-leise); }
.kt-schriftfeld input:not([type=checkbox]), .kt-schriftfeld select, .kt-schriftfeld textarea {
  box-sizing: border-box; width: 100%; min-height: 52px; margin: 0; padding: 13px 15px;
  font: 400 16px/1.45 var(--w-schrift); color: var(--w-text); background: var(--w-grund);
  border: 1.5px solid var(--w-feldrand); border-radius: 4px; box-shadow: none;
  transition: border-color .2s ease, background-color .2s ease;
  -webkit-appearance: none; appearance: none;
}
.kt-schriftfeld textarea { min-height: 176px; resize: vertical; }
.kt-schriftfeld input::placeholder, .kt-schriftfeld textarea::placeholder { color: color-mix(in srgb, var(--w-leise) 85%, transparent); font-size: 15px; }
.kt-schriftfeld input:hover:not(:focus), .kt-schriftfeld select:hover:not(:focus), .kt-schriftfeld textarea:hover:not(:focus) { border-color: color-mix(in srgb, var(--w-text) 55%, transparent); }
.kt-schriftfeld input:focus-visible, .kt-schriftfeld select:focus-visible, .kt-schriftfeld textarea:focus-visible,
.kt-schriftfeld input:focus, .kt-schriftfeld select:focus, .kt-schriftfeld textarea:focus {
  outline: 3px solid color-mix(in srgb, var(--w-rot) 45%, transparent); outline-offset: 1px; border-color: var(--w-text);
}
.feld__wahl { position: relative; }
.feld__wahl select { padding-right: 48px; cursor: pointer; }
.kt-winkel { position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--w-text); border-bottom: 2px solid var(--w-text); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

.kt-schriftfeld .feld[data-stand=ok] > input, .kt-schriftfeld .feld[data-stand=ok] textarea, .kt-schriftfeld .feld[data-stand=ok] select { border-color: color-mix(in srgb, var(--w-text) 62%, transparent); }
.kt-schriftfeld .feld[data-stand=ok]:not(.feld--haken) > label::after {
  content: ""; width: 10px; height: 5px; margin-left: 4px; border-left: 2px solid var(--w-text); border-bottom: 2px solid var(--w-text);
  transform: translateY(-3px) rotate(-45deg);
}
.kt-schriftfeld .feld[data-stand=fehlt] input, .kt-schriftfeld .feld[data-stand=fehlt] select, .kt-schriftfeld .feld[data-stand=fehlt] textarea,
.kt-schriftfeld .feld[data-stand=pruefen] input, .kt-schriftfeld .feld[data-stand=pruefen] select, .kt-schriftfeld .feld[data-stand=pruefen] textarea { border-color: var(--w-rot); }
.feld__meldung { margin: 8px 0 0; font: 500 14px/1.4 var(--w-schrift); color: var(--w-fehler); display: flex; gap: 8px; align-items: flex-start; }
.feld__meldung:empty { display: none; }
.feld__meldung::before {
  content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font: 700 12px/1 var(--w-schrift); color: #fff; background: var(--w-rot); margin-top: 1px;
}
.kt-schriftfeld .feld[data-uebernommen] textarea { animation: kt-uebernommen 1.2s ease; }
@keyframes kt-uebernommen { 0% { background: color-mix(in srgb, var(--w-rot) 12%, var(--w-grund)); } 100% { background: var(--w-grund); } }

.kt-schriftfeld .feld--haken { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; align-items: start; margin-top: 6px; }
.kt-schriftfeld .feld--haken input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--w-rot); cursor: pointer; }
.kt-schriftfeld .feld--haken input:focus-visible { outline: 3px solid color-mix(in srgb, var(--w-rot) 45%, transparent); outline-offset: 2px; }
.kt-schriftfeld .feld--haken > label { display: block; margin: 0; font: 400 14px/1.6 var(--w-schrift); color: var(--w-leise); cursor: pointer; }
.kt-schriftfeld .feld--haken a { color: var(--w-text); }
.kt-schriftfeld .feld--haken .feld__meldung { grid-column: 2; margin-top: 2px; }

.kt-aktion { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--w-linie); }
.kt-aktion .knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; }
.kt-aktion .knopf { min-height: 52px; }
.kt-aktion .formular__status { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--w-text); }
.kt-aktion .formular__status:empty { display: none; }
.kt-entwurf { margin-top: 16px; }
.kt-entwurf label { display: block; font: 600 14px/1.4 var(--w-schrift); margin-bottom: 8px; }
.kt-entwurf .formular__entwurf {
  box-sizing: border-box; width: 100%; min-height: 200px; padding: 14px 16px;
  font: 400 13px/1.7 var(--w-mono); color: var(--w-text); background: var(--w-grund);
  border: 1px solid var(--w-linie); border-radius: 4px;
}
.kt-direkt { margin: 20px 0 0; font-size: 15px; color: var(--w-leise); }
.kt-direkt a { color: var(--w-text); font-weight: 600; white-space: nowrap; }

/* Zeichnung: Blechteil mit Bemaßung zieht sich beim ersten Sichtkontakt auf. */
.kt-zeichnung {
  display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 56px); align-items: center;
  margin-top: clamp(48px, 7vw, 96px); padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--w-linie); border-radius: 6px;
  background-color: var(--w-grund);
  background-image: linear-gradient(var(--w-mulde) 1px, transparent 1px), linear-gradient(90deg, var(--w-mulde) 1px, transparent 1px);
  background-size: 24px 24px;
}
.kt-zeichnung h2 { font-size: clamp(28px, 2.6vw, 38px); margin-bottom: 10px; }
.kt-zeichnung p { margin: 0; max-width: 62ch; font-size: 17px; line-height: 1.6; color: var(--w-leise); }
.kt-zeichnung p strong { color: var(--w-text); }
.kt-blechteil { display: block; width: 100%; height: auto; overflow: visible; }
.kt-blechteil path { stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.6s cubic-bezier(.3, .6, .2, 1); }
.kt-blechteil__teil { stroke: var(--w-text); stroke-width: 1.6; }
.kt-blechteil__mass { stroke: var(--w-rot); stroke-width: 1; }
.kt-blechteil__mass path { transition-delay: .6s; }
.kt-blechteil__text text { fill: var(--w-leise); font: 500 9px var(--w-mono); text-anchor: middle; transition: opacity .6s ease 1.4s; }
.kt-blechteil__punkt { fill: var(--w-rot); }
.js .kt-zeichnung:not(.ist-gezeichnet) .kt-blechteil path { stroke-dashoffset: 1; }
.js .kt-zeichnung:not(.ist-gezeichnet) .kt-blechteil text { opacity: 0; }
.kt-zeichnung__knopf { white-space: nowrap; }

/* --- 03 Vorlagen ------------------------------------------------------------ */
.kt-vorlagen { background: var(--w-flaeche); }
.kt-vorlagen__gitter { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.kt-vorlagen__kopf { position: relative; }
.kt-vorlagen__kopf > :not(.kt-geist) { position: relative; z-index: 1; }
.kt-vorlagen__kopf .kt-geist { right: auto; left: -.04em; top: -.42em; }
.kt-vorlagen__kopf > p:last-child { max-width: 46ch; margin: 0; font-size: 17px; line-height: 1.65; color: var(--w-leise); }
.kt-vorlagen__blatt { min-width: 0; }
.kt-vorlagen .reiter__knopf { min-height: 48px; }
.kt-vorlagen .reiter__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; }
.kt-vorlagen .reiter__fuss small { flex: 1 1 260px; font-size: 14px; line-height: 1.55; color: var(--w-leise); }
.kt-vorlagen__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.kt-vorlagen .kt-uebernehmen, .kt-vorlagen .kopieren {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; min-width: 44px; padding: 10px 16px;
  font: 600 14px/1.2 var(--w-schrift); color: var(--w-text); background: var(--w-grund);
  border: 1.5px solid var(--w-feldrand); border-radius: 4px; cursor: pointer;
}
.kt-vorlagen .kt-uebernehmen { background: var(--w-text); color: var(--w-grund); border-color: var(--w-text); }
.kt-vorlagen .kt-uebernehmen svg { width: 18px; height: 18px; }
.kt-vorlagen .kopieren:hover { border-color: var(--w-text); }

/* --- 04 Anfahrt ------------------------------------------------------------- */
.kt-anfahrt__ort {
  position: absolute; left: -.04em; bottom: -.18em; z-index: 0;
  font: 700 clamp(120px, 21vw, 330px)/.8 var(--w-anzeige); color: transparent; white-space: nowrap;
  -webkit-text-stroke: 1.2px var(--w-geist); transform: translate3d(var(--drift, 0px), 0, 0);
  pointer-events: none; user-select: none;
}
.kt-anfahrt__gitter { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.kt-anfahrt__text p { max-width: 50ch; margin: 0 0 28px; font-size: 18px; line-height: 1.65; color: var(--w-leise); }
.kt-foto { margin: 0; }
.kt-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.kt-foto figcaption { display: flex; gap: 12px; align-items: center; margin-top: 14px; font: 400 12px/1.5 var(--w-mono); color: var(--w-leise); }
.kt-foto figcaption::before { content: ""; width: 24px; height: 2px; background: var(--w-rot); flex: none; }

/* --- Breiten --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .kt-zeichnung { grid-template-columns: 180px minmax(0, 1fr); }
  .kt-zeichnung__knopf { grid-column: 2; justify-self: start; }
}
@media (max-width: 900px) {
  .kt-blatt .kt-duo, .kt-vorlagen__gitter, .kt-anfahrt__gitter { grid-template-columns: minmax(0, 1fr); }
  .kt-blatt .kt-duo.duo--getauscht .kt-karte { order: 0; }
  .kt-karte { position: static; }
}
@media (max-width: 640px) {
  .kt-schriftfeld .feld-paar { grid-template-columns: minmax(0, 1fr); }
  .kt-schriftfeld { padding: 18px 16px; }
  .kt-karte { padding: 22px 18px; }
  .kt-fuellstand { flex-direction: column; align-items: flex-start; gap: 8px; }
  .kt-aktion .knopf-reihe .knopf { width: 100%; justify-content: center; }
  .kt-zeichnung { grid-template-columns: minmax(0, 1fr); }
  .kt-zeichnung__bild { max-width: 220px; }
  .kt-zeichnung__knopf { grid-column: 1; }
  .kt-einleitung, .kt-anfahrt__text p { font-size: 17px; }
}

/* --- Reduzierte Bewegung: fertiges Standbild ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kt-geist, .kt-anfahrt__ort { transform: none; }
  .kt-blatt-svg .kt-zug, .kt-blechteil path, .kt-blechteil__text text, .kt-fuellstand__leiste i,
  .kt-daten__wert, .kt-schriftfeld input, .kt-schriftfeld select, .kt-schriftfeld textarea { transition: none; }
  .kt-schriftfeld .feld[data-uebernommen] textarea { animation: none; }
}

/* Ohne JavaScript gibt es keinen Entwurf: dann gelten die direkten Links in <noscript>. */
.kt-anfrage .formular { display: none; }
.js .kt-anfrage .formular { display: block; }