/* ============================ UNTERSEITE KONTAKT (12.10., seit 14.10. Variante C) ============================
   Gewaehlt am 14.10. aus drei Varianten: Lebendige Kontaktseite. Links eine feste Spalte mit Kristin, Simon und dem Buero,
   rechts laufen die drei Wege vorbei (Anrufen, Rueckruf, Vorbeikommen). Der Weg in der Bildmitte ist aktiv, eine rote Linie
   waechst beim Scrollen mit. Nach Leitdatei: Telefon zuerst, kein Kalender, Felder 56 px, sichtbare Beschriftungen,
   Fehler als Symbol plus ganzer Satz. Bildverlaeufe in Anthrazit. */

.kt-text{font-size:clamp(18px,1.25vw,22px);line-height:1.5;letter-spacing:-.02em;max-width:32em}
.kt-rot{color:var(--rot)}
.kt-titel{font-family:var(--schrift-hl);margin-top:var(--r-24)}
.kt-gross{font-family:var(--schrift-hl);font-size:var(--h-gross);font-weight:var(--h-schnitt);
  letter-spacing:var(--h-laufweite);line-height:1;margin-top:var(--r-24)}
/* die grossen Woerter haben Unterlaengen, die Maske braucht dafuer Luft */
.kt-zeile{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.kt-zeile > span{display:block}

/* Telefonzeilen */
.kt-wege{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie-stark)}
.kt-weg{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--r-24);row-gap:var(--r-4);
  min-height:96px;padding:var(--r-16) 0;border-bottom:1px solid var(--linie-stark);
  transition:color var(--dauer-ui) var(--kurve)}
/* zwei Klassen: die Inter-Fassung setzt sonst alles auf Gemischtschreibung (html.schrift-inter *) */
.kt-wege .kt-weg-fuer{grid-column:1 / -1;font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.14em;
  text-transform:uppercase;line-height:1.2;color:var(--text-2)}
.kt-weg-nr{font-family:var(--schrift-label);font-size:clamp(26px,2.7vw,44px);font-weight:400;letter-spacing:0;line-height:1.1;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kt-weg-tun{display:inline-flex;align-items:center;gap:var(--r-12);font-family:var(--schrift-hl);font-weight:500;
  font-size:var(--t-18);letter-spacing:.06em;line-height:1.2}
.kt-weg-tun svg{flex:none;transition:transform var(--dauer-ui) var(--kurve)}
.kt-weg:hover,.kt-weg:focus-visible{color:var(--rot)}
.kt-weg:hover .kt-weg-tun svg,.kt-weg:focus-visible .kt-weg-tun svg{transform:translate(3px,-3px)}
.kt-weg--post .kt-weg-nr{font-size:clamp(20px,1.9vw,30px)}

@media(max-width:519px){
  .kt-weg{grid-template-columns:minmax(0,1fr)}
}

/* Formular */
.kt-form{display:flex;flex-direction:column;gap:clamp(22px,2.2vw,34px)}
.kt-feld{display:flex;flex-direction:column;gap:var(--r-8)}
.kt-feld > label,.kt-anliegen legend{font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.14em;
  text-transform:uppercase;line-height:1.3;color:var(--text-2)}
.kt-frei{letter-spacing:.04em;text-transform:none}
.kt-feld input,.kt-feld textarea{width:100%;min-height:var(--feld-hoehe);padding:var(--r-12) 0;
  border:0;border-bottom:1px solid var(--linie-stark);border-radius:0;background:transparent;
  font-family:var(--schrift);font-size:var(--t-20);line-height:1.3;letter-spacing:-.02em;color:var(--tinte)}
.kt-feld textarea{min-height:120px;resize:vertical}
.kt-feld input::placeholder,.kt-feld textarea::placeholder{color:var(--text-2);opacity:1}
.kt-feld input:focus,.kt-feld textarea:focus{border-bottom-color:var(--rot);box-shadow:0 1px 0 var(--rot)}
.kt-feld [aria-invalid="true"]{border-bottom-color:var(--rot-fehler);box-shadow:0 1px 0 var(--rot-fehler)}

/* Anliegen: drei eckige Rahmenfelder wie die Filter der Kundenstimmen, gewaehlt ist Rot.
   Das Quadrat davor fuellt sich, damit die Wahl nicht allein an der Farbe haengt. */
.kt-anliegen{border:0;margin:0;padding:0;min-width:0}
.kt-anliegen legend{padding:0;margin-bottom:var(--r-12)}
.kt-wahl{display:flex;flex-wrap:wrap;gap:var(--r-8)}
.kt-wahl-feld{position:relative;display:block;flex:1 1 auto;cursor:pointer}
.kt-wahl-feld input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.kt-wahl-feld span{display:flex;align-items:center;gap:var(--r-12);min-height:var(--ziel-min);padding:0 var(--r-24);
  border:1px solid var(--linie-stark);font-family:var(--schrift-hl);font-weight:500;font-size:var(--t-18);
  letter-spacing:.02em;line-height:1.2;color:var(--tinte);
  transition:background var(--dauer-ui) var(--kurve),color var(--dauer-ui) var(--kurve),border-color var(--dauer-ui) var(--kurve)}
.kt-wahl-feld span::before{content:"";flex:none;width:10px;height:10px;border:1px solid currentColor}
.kt-wahl-feld:hover span{border-color:var(--rot);color:var(--rot)}
.kt-wahl-feld input:checked + span{background:var(--rot);border-color:var(--rot);color:var(--weiss)}
.kt-wahl-feld input:checked + span::before{background:currentColor}
.kt-wahl-feld input:focus-visible + span{outline:3px solid var(--rot);outline-offset:2px}

.kt-fehler{display:flex;align-items:flex-start;gap:var(--r-8);font-family:var(--schrift-label);font-size:16px;
  letter-spacing:0;line-height:1.35;color:var(--rot-fehler)}
.kt-fehler[hidden]{display:none}
.kt-fehler::before{content:"!";flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  background:var(--rot-fehler);color:var(--weiss);font-weight:700;font-size:14px;line-height:1}
.kt-ende{display:flex;flex-direction:column;align-items:flex-start;gap:var(--r-16)}
.kt-klein{font-family:var(--schrift-label);font-size:16px;letter-spacing:0;line-height:1.45;color:var(--text-2);max-width:34em}
.kt-klein a{color:var(--tinte);text-decoration:underline;text-underline-offset:3px}
.kt-klein a:hover{color:var(--rot)}
/* Erfolg ohne Farbe: Haken plus Klartext in Tinte (Leitdatei, Abschnitt 5) */
.kt-status{font-family:var(--schrift-label);font-size:var(--t-18);letter-spacing:0;line-height:1.35;color:var(--tinte)}
.kt-status:empty{display:none}
.kt-status::before{content:"\2713";margin-right:var(--r-8)}

@media(max-width:519px){
  .kt-wahl{flex-direction:column}
}

/* Adresse und Links beim Weg Vorbeikommen */
.kt-adresse{margin-top:var(--r-32);font-style:normal;font-family:var(--schrift-label);
  font-size:clamp(20px,1.5vw,28px);letter-spacing:0;line-height:1.3}
.kt-buero-links{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,34px);margin-top:clamp(26px,3vw,40px)}

/* ---------- C · Lebendige Kontaktseite ---------- */
.kt-c{background:var(--papier);padding:clamp(48px,6vw,110px) 0 clamp(72px,9vw,150px)}
.kt-c-raster{display:grid;gap:clamp(40px,5vw,88px);margin-top:clamp(40px,5vw,72px)}
.kt-c-spalte{display:none}
@media(min-width:1000px){
  .kt-c-raster{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:start}
  .kt-c-spalte{display:block;position:sticky;top:calc(var(--kopf-hoehe) + var(--r-32))}
  .kt-c-weg-bild{display:none}
}
.kt-c-bilder{position:relative;margin:0;aspect-ratio:3/4;max-height:calc(100vh - var(--kopf-hoehe) - 140px);overflow:hidden;
  border-radius:var(--rund-medien);box-shadow:var(--schatten-medien);background:var(--stein)}
.kt-c-bilder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:0;
  transition:opacity .45s var(--kurve)}
.kt-c-bilder[data-aktiv="0"] img[data-i="0"],.kt-c-bilder[data-aktiv="1"] img[data-i="1"],.kt-c-bilder[data-aktiv="2"] img[data-i="2"]{opacity:1}
.kt-c-bilder figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--r-24);
  background:linear-gradient(transparent,rgba(20,19,17,.78));color:var(--weiss)}  /* Anthrazit wie alle Bildverlaeufe (grund-anthrazit) */
.kt-c-bilder figcaption span{display:none;flex-direction:column;gap:2px;font-family:var(--schrift-label);font-size:var(--t-15);letter-spacing:.06em}
.kt-c-bilder figcaption b{font-family:var(--schrift-hl);font-weight:600;font-size:var(--h-karte);letter-spacing:-.015em}
.kt-c-bilder[data-aktiv="0"] figcaption [data-i="0"],.kt-c-bilder[data-aktiv="1"] figcaption [data-i="1"],.kt-c-bilder[data-aktiv="2"] figcaption [data-i="2"]{display:flex}
.kt-c-wege{display:grid;gap:clamp(48px,6vw,96px)}
.kt-c-weg{position:relative;padding-left:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;gap:var(--r-24)}
.kt-c-weg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--linie)}
.kt-c-linie{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--rot);transform-origin:top;transform:scaleY(1)}
.kt-c-nr{font-family:var(--schrift-label);font-size:var(--t-18);letter-spacing:.06em;color:var(--rot)}
.kt-c-weg .kt-titel{margin-top:0}
.kt-c-weg-bild{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rund-medien);box-shadow:var(--schatten-medien)}
.kt-c-weg .kt-adresse{margin-top:0}
.kt-c-weg .kt-buero-links{margin-top:0}
.kt-c-form{max-width:36em}
/* mit Skript: der Weg in der Bildmitte ist voll, die anderen treten zurueck (Text bleibt ueber 4,5:1) */
.kt-c--js .kt-c-weg .kt-titel,.kt-c--js .kt-c-weg .kt-c-nr{transition:color var(--dauer-ui) var(--kurve)}
.kt-c--js .kt-c-weg:not(.ist-aktiv) .kt-titel,.kt-c--js .kt-c-weg:not(.ist-aktiv) .kt-titel .kt-rot{color:var(--text-2)}
.kt-c--js .kt-c-weg:not(.ist-aktiv) .kt-c-nr{color:var(--text-2)}

@media (prefers-reduced-motion:reduce){
  .kt-weg,.kt-weg-tun svg,.kt-wahl-feld span,.kt-c-bilder img{transition:none}
}