/* ============================================================
   KONTAKT — eigene Seite (Fassung K4: Mischung aus K1 und K2)
   Der blaue Kontaktblock (.quoteform) steckt schon auf jeder
   anderen Seite. Hier wäre er doppelt — deshalb liegt das Blau
   bei dieser Seite oben statt unten, und das Formular steht auf
   hellem Grund mit eigenen Feldstilen.

   Aus K1 kommt die Rangfolge: der Anruf ist bei diesem Betrieb
   die Anfrage, also ist die Nummer das größte Element der Seite
   und das Formular ausdrücklich der zweite Weg.
   Aus K2 kommt der aktive Einstieg: vier Kacheln, die das
   Vorhaben setzen. Sie liegen bewusst auf der Kante zwischen
   dem blauen Block und dem Papier — sie gehören zu beidem und
   verbinden die zwei Hälften der Seite.

   Reihenfolge: Anruf → Vorhaben wählen → die drei Zahlen →
   Formular → was nach dem Anruf passiert.

   Lädt nach style-hell.css + miller-hell.css.
   Keine Filter und keine Verläufe über Fotos.
   ============================================================ */

.kt{background:var(--paper)}

.kt-eyebrow{font-family:"Urbanist",system-ui,sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-logo);display:block}
.kt-eyebrow.on-blue{color:rgba(255,255,255,.72)}
.kt-crumb{font-size:13px;color:var(--ink-soft);margin-bottom:18px}
.kt-crumb a{color:var(--blue-logo)}

/* ---- 01 · Der Anruf ---------------------------------------- */
/* Die untere Polsterung ist absichtlich groß: darauf legen sich
   die Kacheln, ohne den Satz darüber zu bedrängen. */
.kt-top{background:var(--navy);color:var(--white);text-align:center;
  padding-block:clamp(96px,11vw,148px) clamp(92px,10vw,132px)}
.kt-top .kt-crumb{color:rgba(255,255,255,.6)}
.kt-top .kt-crumb a{color:rgba(255,255,255,.85)}
.kt-top h1{margin-top:14px;font-size:clamp(25px,3vw,38px);line-height:1.18;
  letter-spacing:-.02em;max-width:20ch;margin-inline:auto;text-wrap:balance}
.kt-top>.container>p{margin-top:14px;font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.7;
  color:rgba(255,255,255,.8);max-width:52ch;margin-inline:auto}

/* Das größte Element der Seite — und ein Link, kein Text. */
.kt-num{display:inline-block;margin-top:clamp(28px,3.4vw,44px);
  font-family:"Urbanist",system-ui,sans-serif;font-weight:700;
  font-size:clamp(38px,7vw,92px);line-height:1;letter-spacing:-.035em;color:var(--white);
  font-variant-numeric:tabular-nums;
  border-bottom:3px solid rgba(255,255,255,.34);padding-bottom:.06em;
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.kt-num:hover{transform:translateY(-2px);border-bottom-color:rgba(255,255,255,.9)}
.kt-num:active{transform:scale(.98)}
.kt-num-sub{margin-top:clamp(16px,2vw,24px);font-size:14.5px;color:rgba(255,255,255,.75)}
.kt-alt{margin-top:clamp(22px,2.8vw,32px);display:flex;flex-wrap:wrap;gap:12px;
  justify-content:center}
.kt-alt a{display:inline-flex;align-items:center;gap:9px;
  font-family:"Urbanist",system-ui,sans-serif;font-weight:600;font-size:15px;color:var(--white);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);border-radius:999px;
  padding:12px 22px;transition:background .3s var(--ease),transform .3s var(--ease)}
.kt-alt a:hover{background:rgba(255,255,255,.3);transform:translateY(-2px)}
.kt-alt a:active{transform:scale(.98)}
.kt-alt svg{width:15px;height:15px}

/* ---- 02 · Vorhaben wählen: die Kacheln auf der Kante -------- */
.kt-pick-sec{position:relative;z-index:1;
  margin-top:calc(-1 * clamp(54px,6vw,84px))}
.kt-pick-lbl{text-align:center;margin-bottom:clamp(16px,2vw,22px);
  font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.82)}
.kt-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px)}
.kt-pick button{text-align:left;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(18px,2vw,24px);cursor:pointer;font:inherit;
  box-shadow:0 22px 46px -30px rgba(2,82,166,.6);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),
    background .3s var(--ease)}
.kt-pick button:hover{transform:translateY(-2px);border-color:rgba(2,82,166,.32);
  box-shadow:0 24px 50px -26px rgba(2,82,166,.7)}
.kt-pick button:active{transform:scale(.98)}
.kt-pick b{display:block;font-size:16.5px;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.kt-pick small{display:block;margin-top:8px;font-size:13px;line-height:1.6;color:var(--ink-soft)}
.kt-pick .tick{display:block;margin-top:14px;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--line);color:transparent;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.kt-pick .tick svg{width:11px;height:11px;margin:3.5px}
/* Die gewählte Kachel bleibt weiß. Eine blau gefüllte Kachel läge
   hier zur Hälfte auf dem blauen Block und verschwände darin —
   die Markierung trägt deshalb der Rand und der gefüllte Haken. */
.kt-pick button[aria-pressed="true"]{border-color:var(--navy);
  box-shadow:inset 0 0 0 1px var(--navy),0 22px 46px -28px rgba(2,82,166,.7)}
.kt-pick button[aria-pressed="true"] b{color:var(--navy)}
.kt-pick button[aria-pressed="true"] .tick{background:var(--navy);border-color:var(--navy);
  color:var(--white)}

/* ---- 03 · Die drei Zahlen ---------------------------------- */
.kt-facts-sec{padding-block:clamp(44px,5.5vw,72px) 0}
.kt-facts{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kt-facts div{padding:clamp(20px,2.4vw,28px) 0;padding-right:24px}
.kt-facts div+div{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,40px)}
.kt-facts b{display:block;font-family:"Urbanist",system-ui,sans-serif;font-weight:600;
  font-size:clamp(26px,3.2vw,42px);line-height:1;color:var(--navy);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kt-facts span{display:block;margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}

/* ---- 04 · Formular: schmal, mittig, zweiter Weg ------------- */
.kt-form-sec{padding-block:clamp(44px,5.5vw,72px) clamp(48px,6vw,80px)}
/* Die fixierte Kopfleiste liegt sonst über der Überschrift, wenn
   die Kachelauswahl zum Formular springt. */
.kt-form,.kt-pick{scroll-margin-top:104px}
.kt-form{max-width:780px;margin:0 auto;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(24px,3.2vw,40px);
  box-shadow:0 24px 60px -40px rgba(2,82,166,.55)}
.kt-form-head{text-align:center;padding-bottom:clamp(18px,2.2vw,24px)}
.kt-form-head h2{margin-top:12px;font-size:clamp(21px,2.3vw,28px);line-height:1.22;
  letter-spacing:-.018em}
.kt-form-head p{margin-top:10px;font-size:14.5px;line-height:1.7;color:var(--ink-soft);
  max-width:46ch;margin-inline:auto}

/* Das oben gewählte Vorhaben steht als Zeile, nicht als
   Auswahlfeld — es ist ja schon beantwortet. */
.kt-chosen{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;
  padding:14px 18px;margin-bottom:20px;border:1px dashed rgba(2,82,166,.34);border-radius:10px;
  background:rgba(2,82,166,.045)}
.kt-chosen .lbl{font-family:"Urbanist",system-ui,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-logo)}
.kt-chosen b{font-size:16px;color:var(--ink)}
.kt-chosen a{margin-left:auto;font-size:13px;color:var(--blue-logo);
  text-decoration:underline;text-underline-offset:3px}

.kt-fields{display:grid;gap:18px}
.kt-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kt-form label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px}
.kt-form input,.kt-form select,.kt-form textarea{width:100%;font-family:inherit;font-size:15px;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:0 15px;height:50px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.kt-form select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230252a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:15px;
  padding-right:40px}
.kt-form textarea{height:auto;padding:14px 15px;line-height:1.65;resize:vertical}
.kt-form input::placeholder,.kt-form textarea::placeholder{color:var(--ink-faint)}
.kt-form input:focus,.kt-form select:focus,.kt-form textarea:focus{outline:none;
  background:var(--white);border-color:var(--blue-logo);box-shadow:0 0 0 3px rgba(2,82,166,.12)}
.kt-consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.6;
  color:var(--ink-soft)}
.kt-consent input{width:17px;height:17px;flex:none;margin-top:2px;padding:0;
  accent-color:var(--blue-logo)}
.kt-consent a{color:var(--blue-logo);text-decoration:underline;text-underline-offset:3px}
.kt-send{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:4px}
.kt-send .btn{flex:none}
.kt-send small{flex:1 1 240px;font-size:12.5px;line-height:1.6;color:var(--ink-soft)}
.kt-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.65;color:var(--ink-soft);text-align:center}

/* ---- 05 · Was nach dem Anruf passiert ---------------------- */
.kt-steps-sec{padding-bottom:clamp(56px,7vw,96px)}
.kt-steps-head{display:flex;flex-wrap:wrap;gap:12px 40px;align-items:baseline;
  justify-content:space-between;margin-bottom:clamp(18px,2.2vw,26px)}
.kt-steps-head h2{font-size:clamp(21px,2.4vw,28px);line-height:1.25;letter-spacing:-.016em}
.kt-steps-head p{font-size:14px;line-height:1.7;color:var(--ink-soft);max-width:36ch}
/* style-hell.css setzt nur ul zurück, nicht ol */
.kt-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(28px,4vw,56px);
  list-style:none;padding:0}
.kt-steps li{padding:20px 0 24px;border-top:1px solid var(--line)}
.kt-steps .no{display:block;font-family:"Urbanist",system-ui,sans-serif;font-weight:600;
  font-size:12.5px;letter-spacing:.12em;color:var(--blue-logo);margin-bottom:11px;
  font-variant-numeric:tabular-nums}
.kt-steps b{display:block;font-size:16.5px;line-height:1.3;color:var(--ink)}
.kt-steps small{display:block;margin-top:8px;font-size:14px;line-height:1.7;color:var(--ink-soft);
  max-width:34ch}
.kt-area{margin-top:clamp(28px,3.4vw,40px);padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.kt-area .lbl{font-family:"Urbanist",system-ui,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-logo)}
.kt-area span:not(.lbl){font-size:12.5px;font-weight:500;color:var(--navy);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px}

/* ---- Mobil -------------------------------------------------- */
@media(max-width:900px){
  .kt-top{padding-block:clamp(92px,22vw,112px) clamp(72px,14vw,96px)}
  .kt-top h1{font-size:clamp(23px,6.4vw,30px)}
  .kt-num{font-size:clamp(31px,10vw,44px)}
  .kt-alt{flex-direction:column}
  .kt-alt a{justify-content:center}

  .kt-pick-sec{margin-top:calc(-1 * clamp(44px,10vw,64px))}
  .kt-pick{grid-template-columns:1fr 1fr;gap:10px}
  .kt-pick button{padding:16px}
  .kt-pick small{display:none}
  .kt-pick .tick{margin-top:12px}

  .kt-facts{grid-template-columns:1fr}
  .kt-facts div{padding:18px 0}
  .kt-facts div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .kt-facts b{font-size:30px}

  .kt-form{padding:22px 20px}
  .kt-row{grid-template-columns:1fr}

  .kt-steps-head h2{font-size:clamp(21px,6.2vw,26px)}
  .kt-steps-head p{max-width:none}
  .kt-steps{grid-template-columns:1fr;gap:0}
  .kt-steps small{max-width:none}
}