/* ══════════════════════════════════════════════════════════════════════════
   MH Build — Stil der Erstellungsstrecke
   ══════════════════════════════════════════════════════════════════════════
   EIGENE Datei mit eigenem Präfix (k- für Konfigurator).

   Warum getrennt von stil.css: Die Strecke wurde schon einmal unbrauchbar,
   weil beim Umbau der Startseite Klassen verschwanden, die nur hier benutzt
   wurden. Zwei Flächen, die sich nichts teilen, können sich auch nicht
   gegenseitig zerlegen. Geteilt sind nur die Schrift und die Farbwerte.

   Grundton hell. Die Startseite darf ein Sternenfeld sein — wer ein System
   einrichtet, arbeitet, und Arbeit findet auf Papier statt.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --k-grund:#FBFAF9;      /* warmes Fastweiss, kein kaltes #FFF */
  --k-flaeche:#FFFFFF;
  --k-tinte:#12121A;
  --k-tinte-2:#585866;
  --k-tinte-3:#8E8E9C;
  --k-linie:rgba(18,18,26,.10);
  --k-linie-2:rgba(18,18,26,.06);
  --k-akzent:#6D4AFF;
  --k-akzent-tief:#5636E0;
  --k-akzent-hauch:rgba(109,74,255,.09);
  --k-cyan:#0EA5E9;
  --k-gruen:#0E9F6E;
  --k-r:14px;
  --k-r-l:20px;
  --k-schatten:0 1px 2px rgba(18,18,26,.05), 0 18px 44px -22px rgba(18,18,26,.24);
  --k-weich:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.k{
  margin:0; background:var(--k-grund); color:var(--k-tinte);
  font:400 16px/1.55 'Instrument', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden;                     /* die Bühne scrollt, nicht die Seite */
}
/* ⚠️ stil.css färbt html dunkel für die Startseite. Die Bühne ist fest
   positioniert, der body-Kasten also 0 hoch — er malt nichts, und durch käme
   das Schwarz von html. Deshalb tragen die Flächen ihren Grund selbst. */
html:has(body.k),html:has(body.z){background:#FBFAF9}
.k-buehne,.k-links{background:var(--k-grund)}
body.k h1,body.k h2,body.k h3{margin:0; font-weight:520; letter-spacing:-.028em;
  line-height:1.1; text-wrap:balance}
body.k h1{font-size:clamp(30px,3.4vw,44px)}
body.k h2{font-size:clamp(24px,2.5vw,33px)}
body.k p{margin:0; color:var(--k-tinte-2)}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
input{font:inherit}

/* ── Kopfleiste ─────────────────────────────────────────────────────────── */
.k-leiste{
  position:fixed; inset:0 0 auto 0; height:64px; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(18px,3vw,32px);
  background:rgba(251,250,249,.82); backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid var(--k-linie-2);
}
.k-marke{display:flex; align-items:center; gap:9px; font-size:15px;
  font-weight:560; letter-spacing:-.02em; color:var(--k-tinte); text-decoration:none}
.k-marke::before{
  content:''; width:11px; height:11px; border-radius:3.5px;
  background:linear-gradient(140deg,var(--k-akzent),var(--k-cyan));
  box-shadow:0 0 12px rgba(109,74,255,.5);
}
/* Schrittanzeige: Punkte, keine Prozentzahl. Ein Balken behauptet eine
   Genauigkeit, die es nicht gibt — vier Punkte sagen schlicht, wo man ist. */
.k-punkte{display:flex; gap:7px; align-items:center}
.k-punkte i{width:6px; height:6px; border-radius:50%; background:var(--k-linie);
  transition:.4s var(--k-weich)}
.k-punkte i.an{background:var(--k-akzent); width:22px; border-radius:3px}
.k-punkte i.durch{background:rgba(109,74,255,.38)}
.k-raus{font-size:14px; color:var(--k-tinte-3); text-decoration:none}
.k-raus:hover{color:var(--k-tinte)}

/* ── Bühne: links Entscheidung, rechts Vorschau ─────────────────────────── */
.k-buehne{
  position:fixed; inset:64px 0 0 0;
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
}
.k-links{
  overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(30px,4.4vh,54px) clamp(22px,4vw,60px) 120px;
}
.k-rechts{
  position:relative; overflow:hidden;
  background:
    radial-gradient(70% 60% at 60% 8%, rgba(109,74,255,.10), transparent 70%),
    linear-gradient(180deg,#F4F3F6,#EFEEF2);
  border-left:1px solid var(--k-linie-2);
  display:grid; place-items:center; padding:clamp(24px,3vw,46px);
}
@media(max-width:980px){
  body.k{overflow:auto}
  .k-buehne{position:static; display:block; margin-top:64px}
  .k-links{overflow:visible; padding:26px 20px 40px}
  .k-rechts{padding:22px 20px 44px; border-left:0; border-top:1px solid var(--k-linie-2)}
}

/* ── Stufen ─────────────────────────────────────────────────────────────── */
.k-stufe{display:none}
.k-stufe.an{display:block; animation:k-rein .5s var(--k-weich) both}
@keyframes k-rein{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.k-braue{
  margin:0 0 12px; font-size:11.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--k-akzent);
}
.k-unter{margin-top:12px; font-size:15.5px; color:var(--k-tinte-2); max-width:44ch}

/* ── Suchfeld ───────────────────────────────────────────────────────────── */
.k-suchbox{position:relative; margin:26px 0 18px}
.k-suchbox svg{position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--k-tinte-3); pointer-events:none}
.k-suche{
  width:100%; padding:15px 16px 15px 44px; border-radius:var(--k-r);
  border:1px solid var(--k-linie); background:var(--k-flaeche);
  font-size:15.5px; color:var(--k-tinte); outline:none;
  transition:.25s var(--k-weich);
}
.k-suche::placeholder{color:var(--k-tinte-3)}
.k-suche:focus{border-color:var(--k-akzent);
  box-shadow:0 0 0 4px var(--k-akzent-hauch)}

/* ── Gewerbe-Kacheln ────────────────────────────────────────────────────── */
.k-gruppe{margin:30px 0 9px; font-size:11.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--k-tinte-3)}
.k-gewerbe{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:9px}
.k-kachel{
  position:relative; text-align:left; padding:14px 15px;
  border-radius:var(--k-r); background:var(--k-flaeche);
  box-shadow:inset 0 0 0 1px var(--k-linie); overflow:hidden;
  transition:.24s var(--k-weich);
}
.k-kachel:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(109,74,255,.3), 0 10px 24px -12px rgba(18,18,26,.26)}
.k-kachel b{display:block; font-size:14.5px; font-weight:540; letter-spacing:-.012em}
.k-kachel span{display:block; margin-top:3px; font-size:12.5px; color:var(--k-tinte-3)}
.k-kachel.gewaehlt{box-shadow:inset 0 0 0 1.5px var(--k-akzent),
  0 10px 26px -14px rgba(109,74,255,.6)}
/* Der Haken erscheint erst bei Wahl — ein leerer Kasten auf jeder Kachel
   sieht aus wie eine Aufgabenliste, die man abarbeiten muss. */
.k-kachel::after{
  content:''; position:absolute; top:12px; right:12px; width:17px; height:17px;
  border-radius:50%; background:var(--k-akzent); opacity:0; transform:scale(.5);
  transition:.3s var(--k-weich);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px; background-position:center; background-repeat:no-repeat;
}
.k-kachel.gewaehlt::after{opacity:1; transform:scale(1)}
.k-leer{padding:26px 2px; color:var(--k-tinte-3); font-size:14.5px}

/* ── Bausteine ──────────────────────────────────────────────────────────── */
.k-bausteine{display:grid; gap:8px; margin-top:16px}
.k-baustein{
  display:grid; grid-template-columns:1fr auto; gap:3px 16px; align-items:center;
  text-align:left; padding:13px 15px; border-radius:var(--k-r);
  background:var(--k-flaeche); box-shadow:inset 0 0 0 1px var(--k-linie);
  transition:.22s var(--k-weich);
}
.k-baustein:hover{box-shadow:inset 0 0 0 1px rgba(109,74,255,.28)}
.k-baustein b{font-size:14.5px; font-weight:520; letter-spacing:-.01em}
.k-baustein span{grid-column:1; font-size:12.5px; color:var(--k-tinte-3); line-height:1.45}
.k-baustein .k-schalter{grid-row:1/3; grid-column:2}
.k-baustein.aus b,.k-baustein.aus span{opacity:.55}
.k-baustein.fest{background:#F4F3F6; box-shadow:inset 0 0 0 1px var(--k-linie-2)}
.k-baustein .k-fest-hinweis{grid-row:1/3; grid-column:2; font-size:11px;
  font-weight:560; letter-spacing:.06em; text-transform:uppercase;
  color:var(--k-tinte-3)}
.k-schalter{
  position:relative; width:40px; height:23px; border-radius:999px;
  background:rgba(18,18,26,.14); transition:.26s var(--k-weich); flex:none;
}
.k-schalter::after{content:''; position:absolute; top:3px; left:3px;
  width:17px; height:17px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(18,18,26,.28); transition:.26s var(--k-weich)}
.k-baustein.an-b .k-schalter{background:var(--k-akzent)}
.k-baustein.an-b .k-schalter::after{transform:translateX(17px)}

/* ── Pakete ─────────────────────────────────────────────────────────────── */
.k-pakete{display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:20px}
@media(max-width:640px){.k-pakete{grid-template-columns:1fr}}
.k-paket{
  position:relative; text-align:left; padding:19px 17px 17px;
  border-radius:var(--k-r-l); background:var(--k-flaeche);
  box-shadow:inset 0 0 0 1px var(--k-linie); transition:.24s var(--k-weich);
}
.k-paket:hover{transform:translateY(-2px)}
.k-paket.gewaehlt{box-shadow:inset 0 0 0 1.5px var(--k-akzent),
  0 14px 34px -16px rgba(109,74,255,.55)}
.k-paket .n{font-size:11.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--k-tinte-3)}
.k-paket .pr{margin:9px 0 2px; font-size:29px; font-weight:520; letter-spacing:-.035em}
.k-paket .pr small{font-size:13px; font-weight:400; color:var(--k-tinte-3);
  letter-spacing:0; margin-left:3px}
.k-paket ul{margin:13px 0 0; padding:0; list-style:none; display:grid; gap:7px}
.k-paket li{font-size:13px; color:var(--k-tinte-2); padding-left:17px; position:relative}
.k-paket li::before{content:''; position:absolute; left:0; top:7px; width:5px; height:5px;
  border-radius:50%; background:var(--k-akzent)}
.k-tipp{position:absolute; top:-9px; right:14px; font-size:10.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--k-akzent);
  padding:4px 9px; border-radius:999px}

/* ── Knöpfe ─────────────────────────────────────────────────────────────── */
.k-fuss{display:flex; gap:11px; align-items:center; margin-top:28px; flex-wrap:wrap}
.k-knopf{
  display:inline-flex; align-items:center; gap:9px; padding:13px 22px;
  border-radius:12px; background:var(--k-tinte); color:#fff;
  font-size:15px; font-weight:520; letter-spacing:-.01em; text-decoration:none;
  transition:.22s var(--k-weich);
}
.k-knopf:hover{transform:translateY(-1px); background:#000}
.k-knopf:disabled{opacity:.32; pointer-events:none}
.k-knopf.still{background:transparent; color:var(--k-tinte-2);
  box-shadow:inset 0 0 0 1px var(--k-linie)}
.k-knopf.still:hover{background:rgba(18,18,26,.04); color:var(--k-tinte)}
.k-zurueck{font-size:14.5px; color:var(--k-tinte-3)}
.k-zurueck:hover{color:var(--k-tinte)}

/* ── Anmeldung: Apple / Google ──────────────────────────────────────────── */
.k-anmeldung{display:grid; gap:10px; margin-top:24px; max-width:400px}
.k-oauth{
  display:flex; align-items:center; justify-content:center; gap:11px;
  width:100%; padding:15px 18px; border-radius:13px;
  font-size:15.5px; font-weight:520; letter-spacing:-.01em;
  transition:.2s var(--k-weich);
}
.k-oauth svg{width:19px; height:19px; flex:none}
.k-oauth.apple{background:#000; color:#fff}
.k-oauth.apple:hover{background:#1A1A1A; transform:translateY(-1px)}
.k-oauth.google{background:#fff; color:#1F1F27;
  box-shadow:inset 0 0 0 1px var(--k-linie), 0 1px 2px rgba(18,18,26,.05)}
.k-oauth.google:hover{background:#FAFAFB; transform:translateY(-1px)}
.k-oauth:disabled{opacity:.5; pointer-events:none}
.k-klein{font-size:12.5px; color:var(--k-tinte-3); line-height:1.6; max-width:42ch}
.k-klein a{color:var(--k-tinte-2)}
.k-fehler{margin-top:14px; font-size:14px; color:#C2321B; display:none}

/* ── Bau-Anzeige ────────────────────────────────────────────────────────── */
.k-bau{display:grid; gap:11px; margin-top:26px; max-width:420px}
.k-bau-z{display:flex; align-items:center; gap:11px; font-size:14.5px;
  color:var(--k-tinte-3); opacity:.4; transition:.4s var(--k-weich)}
.k-bau-z.laeuft{opacity:1; color:var(--k-tinte-2)}
.k-bau-z.fertig{opacity:1; color:var(--k-tinte)}
.k-bau-z i{width:17px; height:17px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1.5px var(--k-linie); transition:.3s var(--k-weich)}
.k-bau-z.laeuft i{box-shadow:inset 0 0 0 1.5px var(--k-akzent);
  animation:k-puls 1.1s ease-in-out infinite}
.k-bau-z.fertig i{background:var(--k-akzent); box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px; background-position:center; background-repeat:no-repeat}
@keyframes k-puls{0%,100%{transform:scale(1)}50%{transform:scale(.8)}}

/* ══ Live-Vorschau: das eigene System, während es entsteht ════════════════
   Der Kern der Strecke. Wer eine Liste von Häkchen abarbeitet, weiss am Ende
   nicht, was er bekommt. Wer daneben sein System wachsen sieht, schon. */
.k-rahmen{
  width:100%; max-width:660px; border-radius:16px; overflow:hidden;
  background:var(--k-flaeche); box-shadow:var(--k-schatten);
  transform:perspective(1600px) rotateY(-2.4deg) rotateX(1deg);
  transition:.7s var(--k-weich);
}
.k-rahmen.flach{transform:none}
.k-fenster{display:flex; align-items:center; gap:7px; padding:11px 14px;
  border-bottom:1px solid var(--k-linie-2); background:#FCFCFD}
.k-fenster i{width:9px; height:9px; border-radius:50%; background:rgba(18,18,26,.12)}
.k-fenster b{margin-left:7px; font-size:12px; font-weight:520; color:var(--k-tinte-3)}
.k-app{display:grid; grid-template-columns:158px 1fr; min-height:398px}
@media(max-width:560px){.k-app{grid-template-columns:1fr}
  .k-seite{display:none}}
.k-seite{border-right:1px solid var(--k-linie-2); padding:13px 10px; background:#FCFCFD}
.k-seite-kopf{display:flex; align-items:center; gap:8px; padding:0 6px 12px;
  font-size:12.5px; font-weight:560; letter-spacing:-.01em}
.k-seite-kopf em{width:20px; height:20px; border-radius:6px; font-style:normal;
  display:grid; place-items:center; font-size:10.5px; font-weight:640; color:#fff;
  background:linear-gradient(140deg,var(--k-akzent),var(--k-cyan))}
.k-tab{
  display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px;
  font-size:12.5px; color:var(--k-tinte-2); margin-bottom:1px;
  animation:k-tab-rein .42s var(--k-weich) both;
}
.k-tab.an{background:var(--k-akzent-hauch); color:var(--k-akzent-tief); font-weight:540}
.k-tab s{width:5px; height:5px; border-radius:50%; background:currentColor;
  opacity:.42; flex:none}
@keyframes k-tab-rein{from{opacity:0; transform:translateX(-8px)} to{opacity:1; transform:none}}
.k-leib{padding:15px 16px; overflow:hidden}
.k-leib-kopf{display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:13px}
.k-leib-kopf b{font-size:15px; font-weight:540; letter-spacing:-.015em}
.k-leib-kopf span{font-size:11.5px; color:var(--k-tinte-3)}
.k-bahnen{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:7px}
.k-bahn{background:#F6F5F8; border-radius:10px; padding:9px 8px; min-height:112px}
.k-bahn b{display:block; font-size:10px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--k-tinte-3); margin-bottom:7px}
.k-karte{background:#fff; border-radius:8px; padding:8px 9px; margin-bottom:5px;
  box-shadow:0 1px 2px rgba(18,18,26,.07);
  animation:k-tab-rein .4s var(--k-weich) both}
.k-karte u{display:block; text-decoration:none; font-size:11.5px; font-weight:520;
  letter-spacing:-.01em; color:var(--k-tinte)}
.k-karte span{display:block; font-size:10.5px; color:var(--k-tinte-3); margin-top:2px}
.k-bahn.gewonnen b{color:var(--k-gruen)}

.k-morgen{margin-top:13px; border-radius:11px; padding:11px 12px;
  background:linear-gradient(180deg,rgba(109,74,255,.07),rgba(109,74,255,.03));
  box-shadow:inset 0 0 0 1px rgba(109,74,255,.14)}
.k-morgen b{display:block; font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--k-akzent-tief); margin-bottom:7px}
.k-morgen div div{font-size:11.5px; color:var(--k-tinte-2); padding:4px 0 4px 13px;
  position:relative; line-height:1.45}
.k-morgen div div::before{content:''; position:absolute; left:0; top:10px; width:5px;
  height:5px; border-radius:50%; background:var(--k-akzent); opacity:.6}
.k-vorschau-fuss{margin-top:14px; text-align:center; font-size:12px;
  color:var(--k-tinte-3)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .k-rahmen{transform:none}
}