/* Matrix Marketing – /kontakt als Geschichte (Prototyp 12.10.2026)
   Ergänzt main.css und seiten.css. Aufbau: Seitenkopf mit Titel und einem Satz, direkt darunter die drei Wege (WhatsApp,
   Telefon, E-Mail) als ein Band aus drei gleich hohen, bündigen Feldern mit Haarlinien; dann «Schnell zur Offerte» mit dem
   Formular links und der Vorschau der Nachricht in einem Handy-Rahmen rechts (am Handy darunter); dann Adresse, Öffnungszeiten
   und Ansprechperson als zweites Band; zuletzt «Lieber zuerst stöbern?».
   Gleiche Regeln wie überall: Schwarz, Gold, Elfenbein, Haarlinien, keine Schatten, keine runden Ecken – ausser am Handy-Rahmen,
   weil es ein Gerät ist. Bewegung nur mit transform, opacity und clip-path; bei «weniger Bewegung» nur Einblenden und Linien;
   ohne JavaScript steht alles fertig da (die Vorschau ist dann ausgeblendet, sie spiegelt nur das Formular). */

/* ------------------------------------------------------------------ Seitenkopf: Kicker, Titel, ein Satz */
.kt-kopf { padding-bottom: 0; }
.kt-kopf .seitenkopf__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.kt-kopf .seitenkopf__titel { max-width: 11.5em; }
.kt-kopf .seitenkopf__lead { max-width: 36em; }

/* Ansprechperson (Runde 3): am Computer rechts neben Titel und Lead, unten bündig mit dem Lead; am Handy eine kompakte Zeile
   unter dem Lead (Porträt links, Angaben daneben). Dasselbe Porträt wie auf /ueberuns, im Adress-Band steht sie nicht mehr. */
.kt-person { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 18px; align-items: center; margin: 30px 0 0; max-width: 30em; }
.kt-person img { width: 72px; height: 96px; object-fit: cover; background: #1a1a1a; }
.kt-person figcaption { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.kt-person__kopf { font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.kt-person__name { margin-top: 3px; font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; color: var(--elfenbein); }
.kt-person__rolle { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.kt-person__antwort { font-size: 14px; line-height: 1.45; color: var(--grau); text-wrap: pretty; }
.kt-person .textlink { margin-top: 4px; }
@media (max-width: 359px) {
  .kt-person { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; }
  .kt-person img { width: 56px; height: 75px; }
  .kt-person__kopf { letter-spacing: .02em; }           /* «Ihre Ansprechperson» bleibt einzeilig (Schrift bleibt 12 px) */
}
@media (min-width: 1024px) {
  .kt-kopf .seitenkopf__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: end; }
  .kt-kopf .seitenkopf__text { grid-column: 1 / span 7; }
  .kt-person { grid-column: 8 / -1; grid-template-columns: 112px minmax(0, 1fr); column-gap: 20px; margin: 0; max-width: none; align-self: end; }
  .kt-person img { width: 112px; height: 149px; }
  .kt-person figcaption { gap: 4px; }
  .kt-person__kopf { letter-spacing: .08em; }           /* 1024–1279 px: Dachzeile einzeilig in der schmalen Spalte */
  .kt-person__name { font-size: 20px; }
  .kt-person__rolle, .kt-person__antwort { font-size: 15px; }
  .kt-kopf .kt-wege { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .kt-person { grid-template-columns: 168px minmax(0, 1fr); column-gap: 28px; }
  .kt-person img { width: 168px; height: 224px; }
  .kt-person__kopf { letter-spacing: .14em; }
}

/* Der Kopf baut sich beim Laden auf (wie der Kopf der Startseite): Zeile für Zeile, danach das Band mit den drei Wegen */
.js .kt-kopf .seitenkopf__text > * { animation: auftritt 1.1s var(--ease) both; }
.js .kt-kopf .seitenkopf__text > :nth-child(1) { animation-delay: .05s; }
.js .kt-kopf .seitenkopf__text > :nth-child(2) { animation-delay: .22s; }
.js .kt-kopf .seitenkopf__text > :nth-child(3) { animation-delay: .38s; }
.js .kt-kopf .kt-person { animation: auftritt 1.1s var(--ease) .5s both; }
@media (prefers-reduced-motion: reduce) {
  .js .kt-kopf .seitenkopf__text > *, .js .kt-kopf .kt-person { animation-name: auftritt-sanft; }
}

/* ------------------------------------------------------------------ Band: drei gleich hohe, bündige Felder mit Haarlinien
   Jedes Feld zeichnet seine eigene Linie oben (am Computer ergeben die drei Stücke eine durchgehende Linie, die von links
   nach rechts entsteht), ab 1024 px zusätzlich eine senkrechte Linie links vom zweiten und dritten Feld; unten schliesst das
   Band mit einer Linie. Keine Karten, keine Flächen – nur Linien und Luft. */
.kt-band { --kt-spalt: clamp(36px, 5vw, 80px); position: relative; display: grid; border-bottom: 1px solid var(--linie); }
.kt-feld {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 24px 0 28px; container-type: inline-size;
}
.kt-feld::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linie); transform-origin: left center; }
.kt-feld::after { content: ""; position: absolute; display: none; left: calc(var(--kt-spalt) / -2); top: 0; bottom: 0; width: 1px; background: var(--linie); transform-origin: center top; }
.kt-feld:nth-child(2) { --n: 1; }
.kt-feld:nth-child(3) { --n: 2; }
.kt-feld__art {
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600;
  font-size: 12px; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.kt-feld__wert {
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600;
  font-size: clamp(1.35rem, 8.6cqi, 2.1rem); line-height: 1.15; letter-spacing: -.02em; color: var(--elfenbein);
  font-variant-numeric: lining-nums; white-space: nowrap;
}
.kt-feld__wert--mail { font-size: clamp(1.05rem, 6.2cqi, 1.6rem); letter-spacing: -.015em; }
.kt-feld__wert--adresse { white-space: normal; font-size: clamp(18px, .85rem + .55vw, 23px); line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; }
.kt-feld__text { font-size: 15px; line-height: 1.55; color: var(--grau); max-width: 26em; text-wrap: pretty; }
.kt-feld__aktion { margin-top: auto; padding-top: 18px; display: flex; }
.kt-feld__aktion .knopf { width: 100%; padding-inline: 22px; }
.kt-feld__aktion .textlink { min-height: 44px; }

/* Tablet und grosse Handys quer: jedes Feld eine Zeile – Angaben links, Knopf rechts */
@media (min-width: 600px) and (max-width: 1023px) {
  .kt-feld { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
  .kt-feld > .kt-feld__art, .kt-feld > .kt-feld__wert, .kt-feld > .kt-feld__text { grid-column: 1; }
  .kt-feld > .kt-feld__aktion { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding-top: 0; }
  .kt-feld .kt-feld__aktion .knopf { width: auto; min-width: 250px; }
}
/* Computer: drei Spalten nebeneinander, Knöpfe unten auf einer Linie */
@media (min-width: 1024px) {
  .kt-band { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--kt-spalt); }
  .kt-feld { padding: 32px 0 36px; }
  .kt-feld + .kt-feld::after { display: block; }
  .kt-feld__aktion .knopf { max-width: 320px; }
}

/* Seitenkopf-Band: Linien zeichnen sich beim Laden, die Felder blenden nacheinander ein (CSS-Animationen, kein Warten auf JS) */
@keyframes kt-zieh-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kt-zieh-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes kt-linie-unten { from { border-bottom-color: transparent; } to { border-bottom-color: var(--linie); } }
.kt-wege { margin-top: clamp(44px, 6vw, 88px); }
.js .kt-wege { animation: kt-linie-unten .8s var(--ease) 1.1s both; }
.js .kt-wege .kt-feld::before { animation: kt-zieh-x 1.1s var(--ease) both; animation-delay: calc(.35s + var(--n, 0) * .25s); }
.js .kt-wege .kt-feld::after { animation: kt-zieh-y .9s var(--ease) both; animation-delay: calc(.5s + var(--n, 0) * .25s); }
.js .kt-wege .kt-feld > * { animation: auftritt 1s var(--ease) both; animation-delay: calc(.5s + var(--n, 0) * .16s); }
@media (prefers-reduced-motion: reduce) {
  .js .kt-wege .kt-feld > * { animation-name: auftritt-sanft; }
}

/* Zweites Band (Adresse): zeichnet sich beim Hineinscrollen – main.js setzt .is-sichtbar auf das Band, der Rest läuft hier.
   Das Band selbst bleibt stehen (kein Verschieben der Linien), die Inhalte der Felder blenden nacheinander ein. */
.js .kt-ort[data-reveal] { opacity: 1; transform: none; border-bottom-color: transparent; transition: border-color .8s var(--ease) .9s; }
.js .kt-ort[data-reveal].is-sichtbar { border-bottom-color: var(--linie); }
.js .kt-ort[data-reveal] .kt-feld::before { transform: scaleX(0); transition: transform 1.1s var(--ease) calc(var(--n, 0) * .25s); }
.js .kt-ort[data-reveal].is-sichtbar .kt-feld::before { transform: scaleX(1); }
.js .kt-ort[data-reveal] .kt-feld::after { transform: scaleY(0); transition: transform .9s var(--ease) calc(.15s + var(--n, 0) * .25s); }
.js .kt-ort[data-reveal].is-sichtbar .kt-feld::after { transform: scaleY(1); }
.js .kt-ort[data-reveal] .kt-feld > * {
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(.15s + var(--n, 0) * .16s);
}
.js .kt-ort[data-reveal].is-sichtbar .kt-feld > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .kt-ort[data-reveal] .kt-feld > * { transform: none; transition: opacity .9s var(--ease); }
}

/* ------------------------------------------------------------------ «Schnell zur Offerte»: Formular links, Vorschau rechts */
.kt-anfrage { margin-top: clamp(44px, 5vw, 80px); display: grid; row-gap: clamp(48px, 6vw, 72px); }
.kt-anfrage .anfrage--seite { margin-top: 0; max-width: none; }
.kt-vorschau { display: none; }                       /* nur mit JavaScript: die Vorschau spiegelt das Formular */
.js .kt-vorschau { display: grid; justify-items: center; gap: 22px; }
.kt-vorschau__kicker { text-align: center; }
.kt-vorschau__hinweis { margin-top: 22px; max-width: 24em; font-size: 13.5px; line-height: 1.55; color: var(--grau); text-align: center; text-wrap: pretty; }
.kt-vorschau__hinweis a { color: var(--text-2); transition: color .3s var(--ease); }
.kt-vorschau__hinweis a:hover { color: var(--gold); }
@media (pointer: coarse) { .kt-vorschau__hinweis a { display: inline-block; padding-block: 12px; margin-block: -12px; } }
@media (min-width: 1024px) {
  .kt-anfrage { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; }
  .kt-anfrage .anfrage { grid-column: 1 / span 8; }      /* bis 1279 px: die zwei Sendeknöpfe bleiben einzeilig nebeneinander */
  .kt-vorschau { grid-column: 9 / -1; position: sticky; top: calc(var(--kopf-h) + 24px); }
}
@media (min-width: 1280px) {
  .kt-anfrage .anfrage { grid-column: 1 / span 7; }
}
/* 1024–1279 px: «Offerte per WhatsApp» bleibt in der schmalen Spalte einzeilig (enger gesperrt, weniger Rand) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .kt-feld__aktion .knopf { padding-inline: 14px; letter-spacing: .12em; }
}

/* Handy-Rahmen: dunkel, runde Ecken (ein Gerät), feiner Lichtschein am Boden wie bei den Heften. Höhe nach dem Bildschirm,
   damit die Vorschau am Computer beim Ausfüllen stehen bleibt und ganz im Bild ist. */
.kt-handy {
  --h: clamp(440px, 100svh - 230px, 600px);
  position: relative; width: calc(var(--h) * .486); max-width: 100%; height: var(--h);
  padding: 10px; border: 1px solid var(--linie-stark); border-radius: 44px; background: #141414;
}
@media (max-width: 1023px) { .kt-handy { --h: 560px; } }
.kt-handy::after {
  content: ""; position: absolute; left: 4%; right: 4%; top: calc(100% + 8px); height: 28px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(194, 181, 155, .18), rgba(194, 181, 155, 0));
}
.kt-handy__schirm {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--linie); border-radius: 34px; background: #0D0D0D;
}
.kt-handy__kopf {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 11px; align-items: center;
  padding: 24px 16px 14px; border-bottom: 1px solid var(--linie);
}
.kt-handy__kopf img { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linie); }
.kt-handy__name { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--elfenbein); }
.kt-handy__ziel { font-size: 12px; line-height: 1.3; color: var(--grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kt-handy__chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; padding: 16px 14px 18px; }
.kt-handy__chat::-webkit-scrollbar { display: none; }
/* Sprechblase (ausgehend, rechts): wächst mit dem Text; feste Mindesthöhe, damit nichts springt, sobald das erste Zeichen steht */
.kt-blase {
  margin-top: auto; align-self: flex-end; width: 92%; min-height: 13.75em;   /* so hoch wie die kürzeste echte Nachricht: beim ersten Zeichen wächst nichts */
  padding: 10px 12px 11px; border: 1px solid rgba(194, 181, 155, .14); border-radius: 14px 14px 3px 14px;
  background: rgba(194, 181, 155, .13); font-size: 13.5px; line-height: 1.5; color: var(--elfenbein);
}
.kt-blase__betreff { display: none; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--linie); font-size: 12px; color: var(--gold); overflow-wrap: anywhere; }
.kt-blase__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.kt-blase.is-leer .kt-blase__text { color: var(--grau); }
/* Schreibmarke, solange ein Feld des Formulars den Fokus hat */
.kt-blase__text::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: var(--gold); opacity: 0; }
.kt-handy.is-aktiv .kt-blase__text::after { opacity: 1; animation: kt-marke 1.1s steps(2, start) infinite; }
@keyframes kt-marke { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kt-handy.is-aktiv .kt-blase__text::after { animation: none; } }
/* Maus oder Fokus auf «Per E-Mail senden»: dieselbe Nachricht als E-Mail (Betreff, Empfänger, gerade Kanten) */
.kt-handy.is-mail .kt-blase { width: 100%; border-radius: 3px; background: rgba(194, 181, 155, .07); }
.kt-handy.is-mail .kt-blase__betreff { display: block; }

/* Runde 2 (Gutachten): unter 1024 px steht die Vorschau im Formular – seit Runde 5 (14.10.2026) nach den Sendeknöpfen und
   ihrem Hinweis, abgesetzt mit einer Haarlinie (kontakt-story.js verschiebt sie dorthin). Kompakter Rahmen: höchstens 60 % der
   Breite, Blase 12 px. Tablet: Rahmen links, Text daneben. */
@media (max-width: 1023px) {
  .js .kt-vorschau { gap: 14px; }
  .anfrage > .kt-vorschau { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--linie); }
  .kt-handy { width: min(60%, 250px); height: auto; aspect-ratio: 486 / 1000; padding: 8px; border-radius: 34px; }
  .kt-handy__schirm { border-radius: 26px; }
  .kt-handy__kopf { grid-template-columns: 28px minmax(0, 1fr); column-gap: 9px; padding: 14px 12px 10px; }
  .kt-handy__kopf img { width: 28px; height: 28px; }
  .kt-handy__name { font-size: 13px; }
  .kt-handy__chat { padding: 12px 10px 14px; }
  .kt-blase { font-size: 12px; padding: 8px 10px 9px; border-radius: 12px 12px 3px 12px; }
  .kt-blase__betreff { margin-bottom: 6px; padding-bottom: 6px; }
  .kt-vorschau__hinweis { margin-top: 18px; font-size: 13px; }
}
@media (max-width: 359px) {                                      /* 320 px: sonst zu schmal zum Lesen; «Matrix Marketing» bleibt einzeilig */
  .kt-handy { width: 66%; }
  .kt-handy__kopf { padding: 12px 10px 10px; column-gap: 8px; }
  .kt-handy__name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .js .kt-vorschau { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(28px, 4vw, 48px); row-gap: 10px; align-items: center; justify-items: start; }
  .kt-handy { grid-column: 1; grid-row: 1 / span 2; }
  .kt-vorschau__kicker { grid-column: 2; grid-row: 1; align-self: end; text-align: left; }
  .kt-vorschau__hinweis { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; text-align: left; font-size: 14px; }
}

/* Runde 6 (14.10.2026), Handy: Die Seite hat die drei Wege selbst – keine feste Leiste «Anrufen | WhatsApp» unten */
.schnellkontakt { display: none !important; }
/* Handy (unter 768 px): keine Vorschau «So kommt Ihre Anfrage an» – sie war rund eine Bildschirmhöhe hoch und meist leer */
@media (max-width: 767px) {
  .js .kt-vorschau { display: none; }
}
/* Unter 1024 px: Zwischen «E-Mail schreiben» und «Ihre Anfrage» standen zwei Linien mit rund 75 px Leere dazwischen (Linie
   unter dem Band und Kolumnenlinie des Abschnitts) – es bleibt die Kolumnenlinie. Im Adress-Band zeichnen sich die Linien
   nicht mehr gestaffelt (sie wirkten unterschiedlich lang), sie stehen gleich lang über die ganze Spalte. */
@media (max-width: 1023px) {
  .kt-wege { border-bottom-width: 0; }
  #anfrage { padding-top: clamp(56px, 9vw, 88px); }
  .js .kt-ort[data-reveal] { border-bottom-color: var(--linie); transition: none; }
  .js .kt-ort[data-reveal] .kt-feld::before { transform: none; transition: none; }
}

@media print {
  .kt-vorschau { display: none !important; }
  /* 13.10.2026: Adresse, Anfahrt und Öffnungszeiten blendet main.js erst beim Hineinscrollen ein – gedruckt fehlten sie ganz */
  .js .kt-ort[data-reveal] .kt-feld > * { opacity: 1 !important; transform: none !important; }
  .js .kt-ort[data-reveal] .kt-feld::before, .js .kt-ort[data-reveal] .kt-feld::after { transform: none !important; }
}

/* 13.10.2026: «Was planen Sie?» – passen die fünf Knöpfe nicht in eine Zeile (1100–1280 px, englisch auch 1440 px), stehen sie
   3 + 2 in Spalten statt «Logo & CI» allein in der zweiten Zeile */
.kt-anfrage .anfrage { container-type: inline-size; }
@container (min-width: 500px) and (max-width: 735px) {
  .kt-anfrage .wahl__liste { display: grid; grid-template-columns: repeat(3, max-content); }
  .kt-anfrage .wahl__option span { flex: 1; }
}
@container (min-width: 500px) and (max-width: 759px) {   /* englisch sind die Knöpfe rund 16 px breiter */
  :lang(en) .kt-anfrage .wahl__liste { display: grid; grid-template-columns: repeat(3, max-content); }
  :lang(en) .kt-anfrage .wahl__option span { flex: 1; }
}

/* Letzte Zeile der Nachricht nie am Rand (Kundentest 13.10.: «Freundliche Grüsse» sass an der Kante) */
.kt-handy__chat { padding-bottom: 28px; }
.kt-blase { margin-bottom: 4px; }
/* 13.10.2026 (Runde 2): Bei langer Nachricht lief der Text unten aus der Sprechblase – die Blase schrumpfte als Flex-Element auf
   die Höhe des Chats. Jetzt wächst sie mit dem Text, der Chat scrollt (das Ende bleibt im Bild, kontakt-story.js). */
.kt-blase { flex-shrink: 0; }