/* =========================================================================
   PREISKALKULATOR  –  /preiskalkulator
   1:1 aus den 21 Figma-Frames (210:68165 Basis, 233:88994 / 250:136265 /
   278:17810 / 278:35656 Hover, 238:89050 … 244:125379 UntRei,
   250:139833 … 277:86 UmzRei, 278:21364 / 278:28495 FenRei, 278:39208 GruRei).

   ABSTANDSMODELL (an allen 21 Frames nachgerechnet, stimmt auf 0 px):
     Label  -> 21 px -> Bedienelement -> 89 px -> naechster Block
     Bedienelement -> 55 px -> Primaerbutton (weiter / absenden)
     Label 1-zeilig 18 px hoch  => Blockabstand 183
     Label 2-zeilig 34 px hoch  => Blockabstand 199
   Damit ergibt sich JEDE Framehoehe automatisch aus dem Inhalt:
     Frame = 609 (Kopf) + Flusshoehe + 377 (Luft) + 497 (CTA-Band + Footer),
     mindestens aber Preisblock-Unterkante + 377 + 497.
   ========================================================================= */

/* PK1: Den einen Schatten (--pk-shadow) definiert base.css site-weit.
   Er liegt NUR auf Hover- und Auswahlzustaenden sowie Eingabefeldern;
   die weissen Grundbalken der Auswahlreihen bleiben schattenlos. */

main.pk {
  position: relative;
  background: var(--color-gray-100);          /* Figma "Rechteck 4247" #FAFAFA */
}

.pk-stage {
  position: relative;
  width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  /* 609 = Oberkante des ersten Frageblocks, 377 = Luft bis zum CTA-Band */
  padding: 609px 0 377px;
  /* Untergrenze aus dem Preisblock: 654 + 144 + 377 */
  min-height: 1175px;
}
/* Zwei Preise (Stundenansatz + Fixpreis): 654 + 244 + 377 */
.pk-stage.is-two-prices { min-height: 1275px; }

/* ---------------------------------------------------------------- Kopf -- */
.pk-h1 {
  position: absolute; left: 144px; top: 233px; width: 689px;
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 400; font-size: 55px; line-height: 60.5px;
  letter-spacing: var(--font-headline-tracking);
  color: var(--color-navy);
  z-index: 3;
}
.pk-intro {
  position: absolute; left: 144px; top: 371px; width: 610px;
  margin: 0;
  font-weight: 300; font-size: 15px; line-height: 30px;
  color: var(--color-black);
  z-index: 3;
}
/* Bestaetigungsseite (Step UntRei10) – gleiche Koordinaten, kuerzerer Text.
   Das !important ist noetig, weil .kf-submit sonst das hidden-Attribut
   ueberschreibt (Autorenregel schlaegt UA-Regel). */
.pk-home-link {
  position: absolute; left: 521px; top: 455px;
  width: 233px; height: 55px;
  z-index: 3;
}
.pk-home-link[hidden] { display: none !important; }

/* ------------------------------------------------------ Rechte Spalte --
   PK3: Die Spalte (cremefarbenes Feld + Preisblock) steht beim Scrollen
   still, solange der Kalkulator laeuft - der Preis soll waehrend des
   ganzen Ausfuellens sichtbar bleiben, ohne dass jemand scrollen muss.

   .pk-rail spannt vom Beginn des Kalkulators bis zu seinem Ende (377 px
   vor dem CTA-Band) und ist der Bezugsrahmen; .pk-rail-inner klebt darin.

   Ist das Fenster niedriger als die Spalte, wird nicht die Spalte
   verschoben, sondern das cremefarbene Feld VERKUERZT (--pk-side-h, in
   preiskalkulator.js berechnet): dort ist unter der Zusammenfassung ohnehin
   viel Leerraum. Der Preisblock bleibt dadurch immer vollstaendig sichtbar. */
.pk-rail {
  position: absolute; left: 1096px; top: 0; bottom: 377px;
  width: 344px;
  z-index: 2;
  pointer-events: none;
}
.pk-rail-inner {
  position: sticky;
  top: var(--pk-rail-top, 0px);
  width: 344px;
  pointer-events: auto;
}

.pk-side {
  position: relative; width: 344px;
  height: var(--pk-side-h, 654px);
  background: var(--color-cream);
  transition: height 220ms ease;
}
.pk-summary { position: absolute; left: 0; top: 0; width: 344px; }
.pk-sum-row { position: absolute; left: 0; width: 344px; height: 11px; }
.pk-sum-key {
  position: absolute; left: 34px; top: 0; width: 111px;
  font-weight: 300; font-size: 10px; line-height: 11px;
  color: var(--color-black);
}
/* Wert rechtsbuendig; die Box ist vertikal auf dem Label zentriert, damit
   ein zweizeiliger Wert (z. B. "Regelmässige Unterhaltsreinigung") oben und
   unten gleich viel ueberhaengt – exakt wie im Figma (Label y144 / Wert y138). */
.pk-sum-val {
  position: absolute; left: 145px; top: 50%; width: 144px;
  transform: translateY(-50%);
  text-align: right;
  font-weight: 600; font-size: 10px; line-height: 11px;
  color: var(--color-black);
}

/* --------------------------------------------------------- Preisblock -- */
.pk-price {
  position: relative; width: 344px;
}
.pk-price-box {
  position: relative;
  width: 344px; height: 144px;
  background: var(--color-gold);
}
.pk-price.is-split .pk-price-box { height: 122px; }
.pk-price-key {
  position: absolute; left: 34px; top: 42px;
  font-family: var(--font-label);
  font-weight: 500; font-size: 15px; line-height: 16.5px;
  letter-spacing: 0.089em;
  color: var(--color-gray-200);
  white-space: nowrap;
}
.pk-price.is-split .pk-price-box + .pk-price-box .pk-price-key { top: 21px; }
.pk-price-val {
  position: absolute; left: 34px; top: 60px;
  font-weight: 500; font-size: 34px; line-height: 37.4px;
  color: var(--color-white);
  white-space: nowrap;
}
.pk-price.is-split .pk-price-box + .pk-price-box .pk-price-val { top: 39px; }
/* Trenner "ODER" auf der Fuge zwischen den beiden Goldflaechen (Figma y776.5) */
.pk-price-or {
  position: absolute; left: 0; top: 122px; width: 344px; height: 0;
  z-index: 1;
  pointer-events: none;
}
.pk-price-or::before,
.pk-price-or::after {
  content: ""; position: absolute; top: 0; width: 89px; height: 1px;
  background: var(--color-gray-200);
}
.pk-price-or::before { left: 53px; }   /* 1149 - 1096 */
.pk-price-or::after  { left: 201px; }  /* 1297 - 1096 */
.pk-price-or span {
  position: absolute; left: 155px; top: -8.5px;   /* 1251-1096 ; 768-776.5 */
  width: 33px; text-align: center;
  font-family: var(--font-label);
  font-weight: 500; font-size: 15px; line-height: 17px;
  letter-spacing: 0.089em;
  color: var(--color-gray-200);
}
.pk-price:not(.is-split) .pk-price-or { display: none; }

/* Der Preis wechselt weich, wenn eine Auswahl ihn veraendert. */
.pk-price-val { transition: opacity 200ms ease; }
.pk-price-val.is-changing { opacity: 0; }

/* ============================== FLUSS ==================================== */
.pk-flow {
  position: relative;
  margin-left: 144px;
  width: 808px;
  z-index: 3;
}
.pk-block { position: relative; margin-bottom: 89px; }
.pk-block:last-child { margin-bottom: 0; }

/* Einblenden neuer Bloecke */
.pk-block.is-entering {
  animation: pkIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pkIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-block.is-entering { animation: none; }
}

/* --------------------------------------------------------- Frage-Label -- */
.pk-q {
  position: relative;
  margin: 0 0 21px;
  min-height: 18px;
  font-weight: 500; font-size: 15px; line-height: 16.5px;
  color: var(--color-black);
}
.pk-q.is-two-line { min-height: 34px; }

/* Info-Punkt hinter dem Fragetext */
/* PK2: Der Punkt sitzt exakt mittig auf SEINER Zeile – bei mehrzeiligen
   Fragen also automatisch mittig auf der untersten.
   Bewusst NICHT ueber vertical-align:middle geloest: das richtet an
   "Grundlinie + halbe x-Hoehe" aus und haengt damit von den Metriken der
   gerade geladenen Schrift ab (solange Montserrat noch nachlaedt, sitzt der
   Punkt sonst sichtbar anders). Stattdessen ist die Schaltflaeche genau so
   hoch wie die Zeile (16.5) und oben buendig; der 13-px-Kreis wird darin
   zentriert. Das ist unabhaengig von der Schrift immer die Zeilenmitte. */
.pk-info {
  display: inline-block; vertical-align: top;
  position: relative;
  width: 13px; height: 16.5px; margin-left: 8px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
}
.pk-q.is-two-line .pk-info { height: 16.5px; }
.pk-info-dot {
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  display: grid; place-items: center;
  width: 13px; height: 13px;
  border: 1px solid var(--color-black); border-radius: 50%;
  font-family: var(--font-body); font-weight: 700; font-size: 8px; line-height: 1;
  color: var(--color-black);
  transition: border-color 240ms ease, color 240ms ease;
}
/* Runde 10: Der 0.5-px-Versatz nach rechts war eine unbegruendete Korrektur
   von mir - das "i" steht in Montserrat bereits mittig in seiner Vorbreite.
   Jetzt zentriert nur noch das Raster, ohne Zusatzversatz. */
.pk-info-dot > span { display: block; }
.pk-info:hover .pk-info-dot,
.pk-info[aria-expanded="true"] .pk-info-dot {
  border-color: var(--color-gold); color: var(--color-gold);
}
.pk-info:focus-visible .pk-info-dot { outline: 2px solid var(--color-navy); outline-offset: 2px; }

/* -------------------------------------------------------- Auswahlreihe -- */
.pk-row {
  position: relative;
  display: flex;
  width: 808px; height: 55px;
  background: var(--color-white);
  border-radius: 5px;
}
.pk-opt {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 0; min-width: 0; height: 55px; padding: 0 6px;
  box-sizing: border-box;
  border: 0; border-radius: 5px; background: transparent;
  font-family: var(--font-body);
  font-weight: 500; font-size: 15px; line-height: 21px;
  color: var(--color-gray-600);
  text-align: center; cursor: pointer;
  transition: color 260ms ease, background-color 260ms ease, box-shadow 260ms ease;
}
/* Zahlenreihen setzt Figma eine Stufe kleiner (13 px) als Wortreihen (15 px) */
.pk-row.is-numeric .pk-opt { font-size: 13px; }
.pk-opt span { position: relative; z-index: 1; white-space: pre-line; }

/* Sobald IRGENDEINE Option der Reihe gewaehlt ist, treten die uebrigen zurueck */
.pk-row.has-choice .pk-opt { color: var(--color-gray-300); }

/* Hover: weisse Karte + Gold (Figma "Step *Rei1") */
.pk-opt:hover {
  background: var(--color-white);
  box-shadow: var(--pk-shadow);
  color: var(--color-gold); font-weight: 600;
}
/* Gewaehlt: goldene Karte + Weiss */
.pk-row .pk-opt.is-on,
.pk-row.has-choice .pk-opt.is-on,
.pk-row .pk-opt.is-on:hover {
  background: var(--color-gold);
  box-shadow: var(--pk-shadow);
  color: var(--color-white); font-weight: 600;
}
.pk-opt:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }

/* ------------------------------------------------------- Kollaps-Leiste -- */
/* PK5: gleiche Masse wie die Auswahlbalken (808 x 55, Radius 5, kein
   Schatten). Pfeil und Text stehen linksbuendig auf den Figma-Positionen
   (Pfeil x21, Text x79) und vertikal mittig im 55-px-Balken. */
.pk-collapse {
  position: relative;
  display: flex; align-items: center; justify-content: flex-start; gap: 29px;
  width: 808px; height: 55px; padding: 0 0 0 21px;
  box-sizing: border-box;
  border: 0; border-radius: 5px;
  background: var(--color-white);
  font-family: var(--font-body);
  font-weight: 500; font-size: 15px; line-height: 21px;
  color: var(--color-gray-600);
  cursor: pointer;
  transition: color 240ms ease, box-shadow 260ms ease;
}
.pk-collapse:hover { color: var(--color-gold); box-shadow: var(--pk-shadow); }
.pk-collapse-icon {
  display: block; width: 29px; height: 15px;
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pk-collapse[aria-expanded="true"] .pk-collapse-icon { transform: rotate(180deg); }
.pk-collapse-icon svg { display: block; width: 29px; height: 15px; }
.pk-collapse-label { display: block; }
.pk-collapse:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }

/* ----------------------------------------------------------- Kalender -- */
.pk-cal { position: relative; width: 808px; }
.pk-cal-head { position: relative; height: 38px; }
/* PK6: Monatsname mittig ueber dem Kalender (Figma: Box 288-521 bei 808
   Breite, Mitte 404). Links dazu spiegelbildlich Balken + Pfeil zurueck. */
.pk-cal-month {
  position: absolute; left: 288px; top: 0; width: 233px;
  font-family: var(--font-headline);
  font-weight: 400; font-size: 34px; line-height: 37.4px;
  letter-spacing: var(--font-headline-tracking);
  color: var(--color-navy);
  text-align: center;
  white-space: nowrap;
}
.pk-cal-rule {
  position: absolute; top: 17px; width: 241px; height: 1px;
  background: var(--color-navy);
}
.pk-cal-rule-next { left: 521px; }   /* Figma: 665 - 144 */
.pk-cal-rule-prev { left: 46px; }    /* Spiegelung: 808 - 46 - 241 = 521 */
.pk-cal-nav {
  position: absolute; top: 4px;
  width: 25px; height: 25px; padding: 0;
  border: 1px solid var(--color-navy); border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: background-color 240ms ease;
}
.pk-cal-nav svg { display: block; margin: 0 auto; width: 8px; height: 13px; }
.pk-cal-nav svg path { stroke: var(--color-navy); transition: stroke 240ms ease; }
.pk-cal-nav:hover { background: var(--color-navy); }
.pk-cal-nav:hover svg path { stroke: var(--color-white); }
.pk-cal-next { left: 783px; }        /* Figma: 927 - 144 */
.pk-cal-prev { left: 0; }
.pk-cal-prev svg { transform: rotate(180deg); }
.pk-cal-nav[disabled] { opacity: 0.3; cursor: default; }
.pk-cal-nav[disabled]:hover { background: transparent; }
.pk-cal-nav[disabled]:hover svg path { stroke: var(--color-navy); }

.pk-cal-week {
  display: grid;
  grid-template-columns: 116px 115px 115px 115px 115px 115px 117px;
  margin-top: 34px;
}
.pk-cal-week span {
  font-weight: 500; font-size: 13px; line-height: 14.3px;
  color: var(--color-gray-400);
  text-align: center;
}
/* Kurzform nur in schmalen Fenstern, siehe responsive.css */
.pk-cal-wd-short { display: none; }
.pk-cal-grid {
  display: grid;
  grid-template-columns: 116px 115px 115px 115px 115px 115px 117px;
  grid-auto-rows: 75px;
  margin-top: 13px;
  width: 808px;
  background: var(--color-white);
  border-radius: 5px;
  box-shadow: var(--pk-shadow);
}
.pk-day {
  display: flex; align-items: center; justify-content: center;
  height: 75px; padding: 0;
  border: 0; background: transparent;
  font-family: var(--font-body);
  font-weight: 400; font-size: 13px; line-height: 21px;
  color: var(--color-gray-400);
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease;
}
.pk-day.is-out   { font-weight: 300; color: var(--color-gray-200); cursor: default; }
.pk-day.is-past  { font-weight: 400; color: var(--color-gray-400); cursor: default; }
.pk-day.is-free  { font-weight: 500; color: var(--color-black); }
.pk-day.is-today { background: var(--color-cream); }
.pk-day.is-free:hover { background: var(--color-cream); color: var(--color-gold); }
.pk-day.is-on {
  background: var(--color-gold); color: var(--color-white); font-weight: 600;
  box-shadow: var(--pk-shadow);
  border-radius: 5px;
}
.pk-day:focus-visible { outline: 2px solid var(--color-navy); outline-offset: -2px; }
/* Ecken der Karte sauber runden */
.pk-cal-grid > :nth-child(1)  { border-top-left-radius: 5px; }
.pk-cal-grid > :nth-child(7)  { border-top-right-radius: 5px; }
.pk-cal-grid > :nth-last-child(7) { border-bottom-left-radius: 5px; }
.pk-cal-grid > :nth-last-child(1) { border-bottom-right-radius: 5px; }

/* -------------------------------------------------------------- Zeiten -- */
/* Spaltenweise gefuellt: links 07.00-12.00, rechts 13.00-18.00 (Figma).
   Die Zeilen MUESSEN dafuer explizit sein – mit grid-auto-rows wuerde
   column-flow eine einzige Zeile erzeugen. */
.pk-times {
  display: grid;
  grid-template-columns: 404px 404px;
  grid-template-rows: repeat(6, 55px);
  grid-auto-flow: column;
  width: 808px; height: 330px;
  background: var(--color-white);
  border-radius: 5px;
  box-shadow: var(--pk-shadow);
}
.pk-time {
  display: flex; align-items: center; justify-content: center;
  height: 55px; padding: 0;
  border: 0; border-radius: 5px; background: transparent;
  font-family: var(--font-body);
  font-weight: 500; font-size: 13px; line-height: 21px;
  color: var(--color-black);
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease;
}
.pk-time:hover { background: var(--color-cream); color: var(--color-gold); }
.pk-time.is-on {
  background: var(--color-gold); color: var(--color-white); font-weight: 600;
  box-shadow: var(--pk-shadow);
}
.pk-time:focus-visible { outline: 2px solid var(--color-navy); outline-offset: -2px; }

/* ------------------------------------------------- Fensterzaehler-Gitter -- */
/* Zeilenraster: Zelle 305 hoch (Titel bis Unterkante Zaehlerfeld) plus
   55 Zeilenabstand ergibt den Figma-Zeilenversatz von 360 – und die
   Gesamthoehe bleibt 305 + 55 + 305 = 665 (Figma: 831 bis 1496). */
.pk-win {
  position: relative;
  display: grid;
  grid-template-columns: 200px 200px 200px;
  column-gap: 83px;
  row-gap: 55px;
  grid-auto-rows: 305px;
  width: 766px;
}
.pk-win-cell { position: relative; height: 305px; }
.pk-win-title {
  position: absolute; left: 0; top: 0; width: 200px; height: 18px;
  font-weight: 500; font-size: 15px; line-height: 16.5px;
  color: var(--color-gray-600);
  text-align: center;
}
.pk-win-rail {
  position: absolute; left: 0; width: 200px; height: 1px;
  background: #000000;
}
.pk-win-rail-a { top: 27px; }
.pk-win-rail-b { top: 229px; }
.pk-win-pic {
  /* top wird je Fenstertyp gesetzt (48 bzw. 35, siehe FEN_TYPES) */
  position: absolute; left: 50%;
  transform: translateX(-50%);
}
.pk-win-pic svg { display: block; }
/* Runde 11, Punkt 1: Plus und Minus neben dem Zahlenfeld.
   Gestalt wie das Zahlenfeld daneben - abgerundetes Quadrat, weiss, feine
   Kontur, KEIN Schatten im Ruhezustand. Beim Ueberfahren und Druecken
   goldene Kontur mit cremefarbener Fuellung (dieselbe Sprache wie die
   uebrigen Bedienelemente der Seite).
   Raster in der 200-px-Zelle: Minus 8.5, Feld 55.5-144.5, Plus 157.5. */
.pk-win-step {
  position: absolute; top: 260.5px;        /* 250 + (55-34)/2 */
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-200);
  border-radius: 5px;
  background: var(--color-white);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease,
              transform 140ms ease, opacity 200ms ease;
}
/* Runde 12: Strichstaerke 1 auf 1:1 gezeichnetem Feld (viewBox 11 = 11 px
   Anzeige) - dieselbe Strichstaerke wie die uebrigen Linien-Icons des
   Kalkulators (Monatspfeile, Schliess-Kreuz). Vorher 1.4 auf 13 px
   hochskaliert, also effektiv 1.65 px und damit deutlich zu fett. */
.pk-win-step svg { display: block; width: 11px; height: 11px; }
.pk-win-step svg path {
  stroke: var(--color-black); stroke-width: 1; stroke-linecap: round;
  transition: stroke 200ms ease;
}
.pk-win-step:hover {
  border-color: var(--color-gold);
  background: var(--color-cream);
}
.pk-win-step:active { transform: scale(0.94); }
.pk-win-step:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.pk-win-step[disabled] { cursor: default; }
.pk-win-step[disabled] svg path { stroke: var(--color-gray-300); }
.pk-win-step[disabled]:hover {
  border-color: var(--color-gray-200); background: var(--color-white);
}
.pk-win-step[disabled]:active { transform: none; }
.pk-win-minus { left: 8.5px; }
.pk-win-plus  { left: 157.5px; }

.pk-win-count {
  position: absolute; left: 50%; top: 250px;
  transform: translateX(-50%);
  width: 89px; height: 55px; padding: 0;
  box-sizing: border-box;
  border: 1px solid transparent; border-radius: 5px;
  background: var(--color-white);
  font-family: var(--font-body);
  font-weight: 500; font-size: 15px; line-height: 21px;
  color: var(--color-gray-600);
  text-align: center;
  -moz-appearance: textfield;
  transition: border-color 240ms ease, color 240ms ease, box-shadow 240ms ease;
}
.pk-win-count::-webkit-outer-spin-button,
.pk-win-count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Runde 12: Eingabefelder tragen im Ruhezustand KEINEN Schatten - genau wie
   im Kontaktformular (PK1). Er erscheint beim Ueberfahren und beim Tippen. */
.pk-win-count:hover { border-color: var(--color-gold); box-shadow: var(--pk-shadow); }
.pk-win-count:focus {
  outline: none; border-color: var(--color-gold); color: var(--color-black);
  box-shadow: var(--pk-shadow);
}
.pk-win-count.has-value { color: var(--color-gold); font-weight: 600; }

/* -------------------------------------------------------- Storen-Bilder -- */
.pk-storen {
  position: relative;
  display: flex;
  width: 808px; height: 153px;
  margin-bottom: 21px;
}
.pk-storen-cell {
  position: relative;
  flex: 0 0 202px; width: 202px; height: 153px;
}
.pk-storen-cell svg {
  display: block;
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: 168px; height: 153px;
}
.pk-storen-cell svg path,
.pk-storen-cell svg circle { transition: stroke 240ms ease; }
.pk-storen-cell.is-on svg path[stroke],
.pk-storen-cell.is-on svg circle[stroke] { stroke: var(--color-gold); }

/* ------------------------------------------------------------ Textarea -- */
.pk-textarea {
  display: block;
  width: 808px; height: 144px; padding: 17px 21px;
  box-sizing: border-box;
  border: 1px solid transparent; border-radius: 5px;
  background: var(--color-white);
  font-family: var(--font-body);
  font-weight: 500; font-size: 13px; line-height: 21px;
  color: var(--color-black);
  resize: none;
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.pk-textarea::placeholder { color: var(--color-gray-400); }
/* Runde 12: wie das Zahlenfeld und das Kontaktformular - im Ruhezustand flach,
   Schatten nur beim Ueberfahren und beim Schreiben. */
.pk-textarea:hover { box-shadow: var(--pk-shadow); }
.pk-textarea:focus {
  outline: none; border-color: var(--color-gold); box-shadow: var(--pk-shadow);
}

/* -------------------------------------------------------- weiter-Button -- */
.pk-next-wrap { position: relative; height: 55px; margin-top: 55px; }
/* Runde 37: "button" steht mit im Wahlpfad, sonst gewinnt ".kf-submit"
   aus form.css (dieselbe Spezifitaet, aber spaeter geladen) mit seinem
   "position: relative". Die Schaltflaeche stand dadurch nicht am rechten
   Rand der Spalte, sondern an ihrem linken - auf /fensterreinigung sogar
   42 px links DANEBEN, weil die Regel darunter sie von dort aus noch
   einmal verschob. Aufgefallen beim Zentrieren fuer Mobile (Punkt 8.1). */
.pk-next,
button.pk-next {
  position: absolute; right: 0; top: 0;
  width: 233px; height: 55px;
}
.pk-win + .pk-next-wrap .pk-next { right: 42px; }   /* Figma: Fensterraster endet auf 910 */
.pk-next[disabled] { opacity: 0.4; cursor: default; }
.pk-next[disabled] .btn-fill { transform: scaleX(0) !important; }

/* -------------------------------------------------- Kontaktformular-Teil -- */
.pk-formtitle {
  margin: 0 0 21px;
  min-height: 18px;
  font-weight: 500; font-size: 15px; line-height: 16.5px;
  color: var(--color-black);
}
/* Das Formular selbst nutzt die .kf-*-Klassen aus subpage.css unveraendert,
   steht hier aber im Fluss statt absolut auf der Seite. */
.pk-block .kf { position: relative; left: auto; top: auto; height: 1089px; }

/* -------------------------------------------------------- Bildupload -----
   In der Figma-Vorlage nicht vorgesehen (ausdrueckliche Anforderung
   Punkt 10). Bewusst so eingepasst, dass die Seite dadurch KEINEN Millimeter
   hoeher wird: die Schaltflaeche sitzt rechtsbuendig auf der Zeile des
   Labels "Nachricht", die Vorschaubilder im ohnehin vorhandenen Abstand
   zwischen Nachrichtenfeld (endet 892) und erster Checkbox (beginnt 935).  */
.pk-upload { position: absolute; left: 0; top: 718px; width: 610px; height: 21px; }
.pk-upload-btn {
  position: absolute; right: 0; top: 0;
  display: inline-flex; align-items: center; gap: 9px;
  height: 21px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500; font-size: 13px; line-height: 21px;
  color: var(--color-gray-600);
  white-space: nowrap;
  transition: color 240ms ease;
}
.pk-upload-btn:hover { color: var(--color-gold); }
.pk-upload-btn svg { display: block; width: 13px; height: 13px; flex: 0 0 13px; }
.pk-upload-btn svg path { stroke: currentColor; }
.pk-upload-btn[disabled] { color: var(--color-gray-300); cursor: default; }
.pk-upload input[type="file"] { display: none; }
.pk-upload-list {
  position: absolute; left: 0; top: 183px;    /* 901 - 718 */
  margin: 0; padding: 0; list-style: none;
  display: flex; gap: 9px; height: 34px;
}
.pk-upload-item {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 3px; overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--pk-shadow);
}
.pk-upload-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-upload-drop {
  position: absolute; right: 0; top: 0;
  width: 15px; height: 15px; padding: 0;
  border: 0; border-bottom-left-radius: 3px;
  background: rgba(21, 21, 21, 0.62);
  color: var(--color-white); cursor: pointer;
  font-size: 11px; line-height: 15px; text-align: center;
}
.pk-upload-drop:hover { background: #FF0000; }
.pk-upload-note {
  position: absolute; right: 0; top: 183px;
  margin: 0; max-width: 420px;
  font-weight: 300; font-size: 10px; line-height: 14px;
  color: var(--color-gray-400);
  text-align: right;
}
.pk-upload-note.is-error { color: #FF0000; }

/* Sendestatus – sitzt links neben der Absenden-Schaltflaeche, damit die
   Seitenhoehe auch hier unveraendert bleibt. */
.pk-sendstate {
  position: absolute; left: 0; width: 360px;
  font-weight: 500; font-size: 13px; line-height: 18px;
  color: var(--color-gray-600);
}
.pk-sendstate.is-error { color: #FF0000; }

/* ------------------------------------------------------------- Tooltip -- */
.pk-tip {
  position: absolute; z-index: 30;
  width: 377px;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 260ms;
}
.pk-tip.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s, 0s, 0s;
}
/* Schwanz: im Figma ein um -45 Grad gedrehtes Quadrat mit 38.8x38.8
   Hüllbox, also 27.4 Seitenlänge. Sein Mittelpunkt liegt exakt auf der
   Panel-Unterkante, die Spitze damit 19.4 px darunter – genau auf der
   Oberkante des Info-Punkts (Figma: Panel endet 592, Icon beginnt 611.5). */
.pk-tip-tail {
  position: absolute; left: 93.8px; bottom: -13.7px;
  width: 27.4px; height: 27.4px;
  background: var(--color-white);
  transform: rotate(45deg);
  box-shadow: var(--pk-shadow);
  z-index: 0;
}
.pk-tip-inner {
  position: relative; z-index: 1;
  padding: 55px 34px;
  background: var(--color-white);
  border-radius: 5px;
  box-shadow: var(--pk-shadow);
}
.pk-tip-close {
  position: absolute; right: 21px; top: 21px;
  width: 21px; height: 21px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
}
.pk-tip-close svg { display: block; width: 21px; height: 21px; }
.pk-tip-close svg path { stroke: var(--color-gray-300); transition: stroke 240ms ease; }
.pk-tip-close:hover svg path { stroke: var(--color-black); }
.pk-tip dl { margin: 0; }
.pk-tip dt {
  margin: 0;
  font-weight: 500; font-size: 13px; line-height: 14.3px;
  color: var(--color-black);
}
.pk-tip dd {
  margin: 19px 0 0;
  font-weight: 300; font-size: 13px; line-height: 19.5px;
  color: var(--color-black);
}
.pk-tip dd + dt { margin-top: 21px; }

/* ------------------------------------------------------------ Reduziert -- */
@media (prefers-reduced-motion: reduce) {
  .pk-tip { transition-duration: 1ms; }
  .pk-collapse-icon { transition-duration: 1ms; }
}

/* =========================================================================
   PK7 – EINGEBETTETER KALKULATOR
   Auf Startseite und Unterseiten sitzt derselbe Kalkulator in der bereits
   bestehenden absoluten Buehne der jeweiligen Seite. Er uebernimmt dort die
   Koordinaten, die im Figma-Frame DIESER Seite stehen (die weichen leicht
   voneinander ab), und waechst nach unten, indem die Buehnenhoehe mitwaechst.
   Kopfzeile, Einleitungstext und cremefarbenes Feld bleiben Bestandteil der
   Seite; der Kalkulator liefert nur Fragefluss, Zusammenfassung und Preis.
   ========================================================================= */
.pk-embed {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none;
}
.pk-embed > * { pointer-events: auto; }

.pk-embed .pk-flow {
  position: absolute; left: 144px; width: 808px;
  margin-left: 0;
  z-index: 3;
}
.pk-embed .pk-rail {
  position: absolute; left: 1096px; width: 344px;
  z-index: 2;
  /* Hoehe setzt preiskalkulator.js: sie reicht exakt bis zum Ende des
     Kalkulators - auf der Startseite also bis zum Ende des Cremebandes,
     auf den Unterseiten bis 377 px vor dem CTA-Band. */
}
/* Auf Seiten mit hellem Cremehintergrund (Startseite) darf das Feld nicht
   doppelt gezeichnet werden – dort liefert die Seite die Flaeche selbst. */
.pk-embed.has-own-panel .pk-side { background: transparent; }

/* Bestaetigung im eingebetteten Kalkulator (dort gibt es keine eigene
   Seitenueberschrift, die sich austauschen liesse). */
.pk-thanks-title {
  margin: 0 0 21px;
  font-family: var(--font-headline);
  font-weight: 400; font-size: 34px; line-height: 37.4px;
  letter-spacing: var(--font-headline-tracking);
  color: var(--color-navy);
}
.pk-thanks-text {
  margin: 0; width: 610px;
  font-weight: 300; font-size: 15px; line-height: 30px;
  color: var(--color-black);
}

/* ---------------------------------------------------------------------
   Blasse Ziffer "03" + Rasterlinien (Runde 18, Punkt 3.2a)

   Der Auftraggeber hat die fehlende "03" als SVG nachgeliefert. Sie wird
   damit genau wie auf jeder anderen Seite behandelt: als .sub-numeral mit
   Vorlagen-Koordinaten im Quelltext (subpage.css ist hier mit eingebunden),
   links angeschnitten, Zeichenhoehe 377 px.

   Die beiden Rasterlinien fehlten auf dieser Seite bisher ganz. Sie folgen
   derselben Logik wie ueberall:
     waagrecht  durch die MITTE der Ziffer          (144 + 377/2 = 332.5)
     senkrecht  an derselben Stelle im "0" wie auf
                /jobs und /ueber-uns/preisliste (x97)
   Die "0" dieser Datei ist mit jener der beiden Seiten deckungsgleich
   (Stamm x51-104 gegenueber x52-106), die Linie liegt also im selben
   Buchstabenteil.

   Die senkrechte Linie bekommt KEINE feste Hoehe: die Buehne waechst und
   schrumpft hier mit dem Kalkulator. top/bottom statt height laesst sie
   immer bis zum Buehnenfuss laufen.
   --------------------------------------------------------------------- */
.pk-stage > .sub-line-v { top: 0; bottom: 0; height: auto; }