/* kv-stadt-kosten.css — Städteseiten (Muster P67, Fabio 01.11.), Abschnitt 2 „Was kostet …“: Tafel mit Rechner darauf.
   Lädt nach kv.css, kv-knopf.css, kv-netz.css, kv-kostenrechner.css und kv-stadt-hitze.css (Kennzeile .wa-kenn, Größen --ts*).
   Tafel (Weiß, Haarlinie, Radius 24/20, Rand 20/12, Schatten 0 22 44 −18 .12), Kopf 5 : 6 unten bündig.

   Fabio 01.11.: Die Tafel steht ruhig und fertig da — kein Öffnen, kein Einblenden von Überschrift, Lede oder Rechner
   (Seite soll seriös wirken). --t/--r bleiben fest auf 1; die Formeln unten ergeben damit den Endzustand. */

@property --t{syntax:'<number>';inherits:true;initial-value:1}
@property --r{syntax:'<number>';inherits:true;initial-value:1}

.k1{
  --k1-rand:var(--s-5);                                   /* Tafel → Viewport (Rand 20) */
  --k1-py:var(--s-24);                                    /* innen oben/unten 96 */
  /* Start: knapp innerhalb der Kante der Ansichtskarte (Kartenkante + 5 vw, 16 … 96 px) */
  --k1-start:calc(max(calc((100% - var(--max-w)) / 2), var(--section-px)) + clamp(16px, 5vw, 96px));
  /* Phasen aus --t */
  --k1-l:clamp(0,calc(var(--t) / .08),1);                 /* Haarlinie des Abdrucks 0 → .08 */
  --k1-a:clamp(0,calc(var(--t) / .7),1);                  /* Öffnen (Breite, Hinlegen) 0 → .7 */
  --k1-w:calc(var(--k1-a) * var(--k1-a) * (3 - 2 * var(--k1-a))); /* dasselbe, weich an beiden Enden */
  --k1-f:clamp(0,calc((var(--t) - .05) / .5),1);          /* Weiß .05 → .55 */
  --k1-s:clamp(0,calc((var(--t) - .5) / .45),1);          /* Schatten .5 → .95 */
  --k1-h1:clamp(0,calc((var(--t) - .3) / .3),1);          /* H2 Zeile 1 + Kennzeile .3 → .6 */
  --k1-h2:clamp(0,calc((var(--t) - .38) / .3),1);         /* H2 Zeile 2 .38 → .68 */
  --k1-le:clamp(0,calc((var(--t) - .46) / .3),1);         /* Lede .46 → .76 */
  position:relative;z-index:1;margin:var(--s-8) 0;
  /* Innenkante = Kante der übrigen Abschnitte (Fabio 01.11.: bei 1024 stand die Tafel innen bei 60, der Rest bei 40);
     ab 1400 steht der Inhalt ohnehin mittig auf 1320 */
  padding:var(--k1-py) var(--section-px)
}

/* Die Tafel */
.k1::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;
  left:calc(var(--k1-rand) + (var(--k1-start) - var(--k1-rand)) * (1 - var(--k1-w)));
  right:calc(var(--k1-rand) + (var(--k1-start) - var(--k1-rand)) * (1 - var(--k1-w)));
  border-radius:var(--r-5);
  background:rgb(255 255 255 / var(--k1-f));
  border:1px solid rgb(224 223 217 / var(--k1-l));
  box-shadow:0 22px 44px -18px rgb(28 43 58 / calc(.12 * var(--k1-s)));
  transform:translateY(calc((1 - var(--k1-w)) * 40px))}

.k1-in{max-width:var(--max-w);margin:0 auto;position:relative}

/* Kopf (st-kopf): H2 links, Lede rechts unten bündig */
.k1-kopf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-6) var(--s-16);align-items:end;margin-bottom:var(--s-12)}
.k1-kopf .wa-kenn{opacity:var(--k1-h1);transform:translateY(calc((1 - var(--k1-h1)) * 8px))}
.k1-h2{margin:0;font-size:clamp(28px,3.4vw,46px);font-weight:500;line-height:1.12;letter-spacing:-.028em;color:var(--ink)}
/* Maske je Zeile: die Zeile steigt hinter ihrer Unterkante herauf (Muster „mask“, kv-reveal.css) */
.k1-z{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.k1-z>span{display:block;transform:translateY(calc((1 - var(--k1-h1)) * 110%))}
.k1-z+.k1-z>span{transform:translateY(calc((1 - var(--k1-h2)) * 110%))}
.k1-lede{margin:0;padding-bottom:4px;font-size:var(--ts3);line-height:1.55;color:var(--muted);max-width:52ch;text-wrap:pretty;
  opacity:var(--k1-le);transform:translateY(calc((1 - var(--k1-le)) * 24px))}

/* Der Rechner: auf Seitenbreite, flach auf der Tafel (kein Kasten im Kasten) — dieselben Regeln wie die Startseite
   (index.html, Block kv-kc-vermerk); sonst nichts am Rechner geändert. */
.k1-werk{transform:translateY(calc((1 - var(--r)) * 56px));opacity:clamp(0,calc(var(--r) * 1.6),1)}
.k1 .kc-card{max-width:none;border:0;border-radius:var(--r-4);box-shadow:none;overflow:visible}
.k1 .kc-plan{border-right:0;border-radius:var(--r-4)}
.k1 .kc-side{padding-right:0}

/* Annahmen (einmal je Seite, rules/preise.md) — Haarlinie statt Kasten */
.k1-annahme{margin:var(--s-8) 0 0;padding-top:var(--s-6);border-top:1px solid var(--border);
  font-size:var(--ts5);line-height:1.6;color:var(--muted);max-width:none}
.k1-annahme span{display:block;max-width:92ch}

/* ── Tablet / Handy ────────────────────────────────────────────────────── */
@media (max-width:1040px){
  .k1 .kc-plan{border-bottom:0}
  .k1 .kc-side{padding:var(--s-5) 0 0}
}
@media (max-width:900px){
  .k1-kopf{grid-template-columns:minmax(0,1fr);gap:var(--s-4);margin-bottom:var(--s-8)}
}
@media (max-width:640px){
  .k1{--k1-rand:var(--s-3);--k1-py:var(--s-16);margin:var(--s-3) 0;padding-inline:calc(var(--k1-rand) + var(--s-4))}
  .k1::before{border-radius:var(--r-4)}
  .k1-kopf .wa-kenn{margin-bottom:var(--s-4)}
  .k1-lede{font-size:var(--ts4)}
  .k1 .kc-plan{border-radius:var(--r-3)}
  .k1-annahme{margin-top:var(--s-6);padding-top:var(--s-4)}
}