/* ============================================================
   GROWIT — Management-Cockpit (eigene Produktseite)
   Laedt nach grund.css und besitzt alles mit dem Praefix .ck-.
   Grundstimmung hell. Dunkel gibt es nur als vollbreites Band
   mit Farbverlauf, nie als Kaestchen auf hellem Grund.
   ============================================================ */

.ck-page {
  --ck-navy: #280F91;
  --ck-deep: #150A52;
  --ck-royal: #5271FF;
  --ck-cyan: #27E6FF;
  --ck-ease: cubic-bezier(.32, .72, 0, 1);
}

/* ---------- Bewegung beim Scrollen ---------- */
.ck-page .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ck-ease), transform .9s var(--ck-ease);
}
.ck-page .reveal.in { opacity: 1; transform: none; }
.ck-page .reveal[data-d="1"] { transition-delay: .08s; }
.ck-page .reveal[data-d="2"] { transition-delay: .16s; }
.ck-page .reveal[data-d="3"] { transition-delay: .24s; }
.ck-page .reveal[data-d="4"] { transition-delay: .32s; }
.ck-page .reveal[data-d="5"] { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  .ck-page .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Baender ---------- */
.ck-band { position: relative; padding: clamp(72px, 9vw, 132px) 0; }
.ck-band--weiss { background: #fff; }
.ck-band--dunkel {
  background:
    radial-gradient(58% 70% at 82% 8%, rgba(39, 230, 255, .16), rgba(39, 230, 255, 0) 62%),
    linear-gradient(132deg, #150A52 0%, #280F91 40%, #3348D9 78%, #2F5FC4 100%);
  color: #fff;
  overflow: hidden;
}
/* Feine Rasterlinien im dunklen Band - Architektur, kein Leuchten */
.ck-band--dunkel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(72% 82% at 50% 20%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 82% at 50% 20%, #000 0%, transparent 78%);
}
.ck-band > .shell { position: relative; z-index: 2; }

/* ---------- Kopfzeilen ---------- */
.ck-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em; color: var(--royal-text, #3348D9);
  margin: 0 0 18px;
}
.ck-band--dunkel .ck-eyebrow { color: #8FE9F8; }
.ck-h2 {
  margin: 0; color: var(--ck-navy);
  font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700;
  line-height: 1.08; letter-spacing: -.03em; max-width: 20ch;
}
.ck-band--dunkel .ck-h2 { color: #fff; }
.ck-lead {
  margin: 20px 0 0; color: var(--muted, #4F5872);
  font-size: clamp(1rem, 1.3vw, 1.12rem); font-weight: 300;
  line-height: 1.72; max-width: 62ch;
}
/* .88 statt .82: der Verlauf hellt nach rechts unten bis #2F5FC4 auf, dort
   ergab .82 nur 4,4:1 statt der geforderten 4,5:1 fuer Fliesstext. */
.ck-band--dunkel .ck-lead { color: rgba(255,255,255,.88); }
.ck-head--mitte { text-align: center; }
.ck-head--mitte .ck-h2 { margin-inline: auto; }
.ck-head--mitte .ck-lead { margin-inline: auto; }

/* ============================================================
   1 · Hero
   ============================================================ */
.ck-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(132px, 15vw, 190px) 0 clamp(76px, 9vw, 118px);
  background:
    radial-gradient(52% 62% at 84% 4%, rgba(39, 230, 255, .2), rgba(39, 230, 255, 0) 64%),
    radial-gradient(48% 58% at 6% 92%, rgba(82, 113, 255, .3), rgba(82, 113, 255, 0) 66%),
    linear-gradient(128deg, #120847 0%, #280F91 44%, #3646CE 76%, #2C5FC0 100%);
}
.ck-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(80% 90% at 30% 30%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(80% 90% at 30% 30%, #000 0%, transparent 76%);
}
.ck-hero > .shell { position: relative; z-index: 2; }
.ck-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(34px, 5vw, 68px); align-items: center;
}
.ck-hero__mark {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: #8FE9F8; margin-bottom: 22px;
}
.ck-hero h1 {
  margin: 0; font-size: clamp(2.2rem, 4.8vw, 3.9rem); font-weight: 700;
  line-height: 1.02; letter-spacing: -.035em; color: #fff;
}
.ck-hero h1 span { display: block; }
.ck-hero h1 .ck-hell { color: #9FEEFB; }
.ck-hero__sub {
  margin: 24px 0 0; color: rgba(255,255,255,.84); font-weight: 300;
  font-size: clamp(1rem, 1.35vw, 1.14rem); line-height: 1.75; max-width: 50ch;
}
.ck-hero__tun { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.ck-hero__tun .btn svg { width: 18px; height: 18px; }
.btn--rand {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  color: #fff; border: 1.5px solid rgba(255,255,255,.34); background: transparent;
  white-space: nowrap;
  transition: background .4s var(--ck-ease), border-color .4s var(--ck-ease), transform .4s var(--ck-ease);
}
.btn--rand svg { width: 18px; height: 18px; flex: 0 0 18px; }
.btn--rand:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); transform: translateY(-2px); }

/* Vier stille Aussagen unter dem Hero - Text mit Haarlinien, keine Chips */
.ck-hero__fakten {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin-top: clamp(48px, 6vw, 78px);
  border-top: 1px solid rgba(255,255,255,.16); padding-top: 26px;
}
.ck-hero__fakten div { padding: 0 22px; border-left: 1px solid rgba(255,255,255,.14); }
.ck-hero__fakten div:first-child { padding-left: 0; border-left: 0; }
.ck-hero__fakten b { display: block; color: #fff; font-size: 1rem; font-weight: 600; }
/* .82 statt .62: die Zeile steht mit .84rem als Kleintext und braucht darum
   dieselben 4,5:1 wie Fließtext. Über der hellsten Stelle des Heroverlaufs
   (#2C5FC0) waren es bei .62 nur 3,3:1, bei .82 sind es 4,6:1. */
.ck-hero__fakten span { display: block; margin-top: 5px; color: rgba(255,255,255,.82); font-size: .84rem; font-weight: 300; line-height: 1.5; }

/* ---------- Bewegte Programmansicht ---------- */
.ck-app {
  position: relative; border-radius: 18px; overflow: hidden;
  background: #0C0533; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 60px 120px -60px rgba(0,0,0,.85);
  animation: ckSchweben 9s ease-in-out infinite;
}
@keyframes ckSchweben {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .ck-app { animation: none; } }
.ck-app__leiste {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
}
.ck-app__leiste i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.ck-app__titel { margin-left: 10px; color: rgba(255,255,255,.55); font-size: .74rem; letter-spacing: .04em; }
.ck-app__koerper { display: grid; grid-template-columns: 152px minmax(0, 1fr); min-height: 328px; }
.ck-app__seite { border-right: 1px solid rgba(255,255,255,.08); padding: 16px 12px; background: rgba(255,255,255,.02); }
.ck-app__seite button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: 12px; margin-bottom: 4px;
  color: rgba(255,255,255,.6); font-size: .78rem; font-weight: 500; text-align: left;
  transition: background .35s var(--ck-ease), color .35s var(--ck-ease);
}
.ck-app__seite button svg { width: 15px; height: 15px; flex: 0 0 15px; }
.ck-app__seite button:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.05); }
.ck-app__seite button[aria-selected="true"] { background: rgba(82,113,255,.26); color: #fff; }
.ck-app__buehne { position: relative; padding: 20px; }
.ck-app__blatt {
  position: absolute; inset: 20px; opacity: 0; transform: translateY(12px);
  transition: opacity .6s var(--ck-ease), transform .6s var(--ck-ease);
  pointer-events: none;
}
.ck-app__blatt[data-an="1"] { opacity: 1; transform: none; pointer-events: auto; }
.ck-app__ueber { color: rgba(255,255,255,.5); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.ck-zeile {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,.055);
}
.ck-zeile b { flex: 0 0 auto; color: rgba(255,255,255,.88); font-size: .78rem; font-weight: 500; }
.ck-zeile span.ck-frei { flex: 1; }
.ck-zeile em {
  font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 6px;
  background: rgba(39,230,255,.14); color: #9FEEFB;
}
.ck-zeile em.ck-warte { background: rgba(255,255,255,.1); color: rgba(255,255,255,.66); }
.ck-balken { position: relative; flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.ck-balken i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #5271FF, #27E6FF); width: 0; transition: width 1.1s var(--ck-ease); }
.ck-app__blatt[data-an="1"] .ck-balken i { width: var(--w, 60%); }
.ck-app__fuss {
  position: absolute; left: 20px; right: 20px; bottom: 0;
  color: rgba(255,255,255,.4); font-size: .68rem; text-align: center;
}

/* ============================================================
   2 · Heute / mit Cockpit
   ============================================================ */
.ck-gegen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px); margin-top: clamp(38px, 5vw, 62px);
}
.ck-gegen__spalte { padding-top: 26px; border-top: 2px solid rgba(40,15,145,.12); }
.ck-gegen__spalte--gut { border-top-color: var(--ck-royal); }
.ck-gegen__spalte h3 {
  margin: 0 0 4px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--light, #5C6580);
}
.ck-gegen__spalte--gut h3 { color: var(--ck-navy); }
.ck-gegen__spalte p { margin: 0 0 22px; font-size: .9rem; color: var(--light, #5C6580); font-weight: 300; }
.ck-gegen ul { margin: 0; padding: 0; list-style: none; }
.ck-gegen li {
  position: relative; padding: 13px 0 13px 34px;
  border-bottom: 1px solid rgba(40,15,145,.07);
  font-size: .97rem; line-height: 1.6; font-weight: 300; color: var(--muted, #4F5872);
}
.ck-gegen li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 18px; height: 18px; border-radius: 50%;
}
.ck-gegen__spalte--alt li::before { background: rgba(40,15,145,.06); box-shadow: inset 0 0 0 1.5px rgba(40,15,145,.18); }
.ck-gegen__spalte--alt li::after {
  content: ""; position: absolute; left: 5.4px; top: 24px; width: 7.2px; height: 7.2px;
  background:
    linear-gradient(currentColor, currentColor) center/7.2px 1.5px no-repeat;
  color: rgba(40,15,145,.32); transform: rotate(0deg);
}
.ck-gegen__spalte--gut li { color: var(--ink, #141A33); }
.ck-gegen__spalte--gut li::before { background: rgba(82,113,255,.12); box-shadow: inset 0 0 0 1.5px var(--ck-royal); }
.ck-gegen__spalte--gut li::after {
  content: ""; position: absolute; left: 5.2px; top: 24.6px;
  width: 7.4px; height: 4px; border-left: 1.8px solid var(--ck-royal); border-bottom: 1.8px solid var(--ck-royal);
  transform: rotate(-45deg);
}
.ck-gegen li b { font-weight: 600; color: var(--ck-navy); }

/* ============================================================
   3 · Module - haftender Bildschirm, laufender Text
   ============================================================ */
.ck-mod { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(30px, 5vw, 78px); align-items: start; margin-top: clamp(40px, 5vw, 66px); }
.ck-mod__stapel { position: sticky; top: 112px; }
/* Der Bildschirm ist hell wie die Seite. Ein dunkles Kaestchen auf weissem
   Grund wollen wir nirgends - dunkel gibt es nur als vollbreites Band. */
.ck-mod__rahmen {
  position: relative; border-radius: 26px; overflow: hidden;
  background: #fff;
  border: 1px solid rgba(40,15,145,.12);
  box-shadow: 0 40px 90px -56px rgba(40,15,145,.42);
  aspect-ratio: 4 / 3.35;
}
/* Fensterleiste oben - macht aus dem Kasten eine Programmansicht */
.ck-mod__rahmen::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 42px;
  background: #F6F9FF; border-bottom: 1px solid rgba(40,15,145,.08);
}
.ck-mod__rahmen::after {
  content: ""; position: absolute; top: 17px; left: 18px;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(40,15,145,.16);
  box-shadow: 14px 0 0 rgba(40,15,145,.16), 28px 0 0 rgba(40,15,145,.16);
}
/* Helle Fassung der Programmzeilen innerhalb des Rahmens */
.ck-mod__rahmen .ck-app__ueber { color: var(--royal-text, #3348D9); }
.ck-mod__rahmen .ck-zeile { background: #F4F7FF; border: 1px solid rgba(40,15,145,.06); }
.ck-mod__rahmen .ck-zeile b { color: var(--ck-navy); }
.ck-mod__rahmen .ck-zeile em { background: rgba(82,113,255,.12); color: var(--royal-text, #3348D9); }
.ck-mod__rahmen .ck-zeile em.ck-warte { background: rgba(40,15,145,.06); color: var(--muted, #4F5872); }
.ck-mod__rahmen .ck-balken { background: rgba(40,15,145,.09); }
.ck-mod__szene {
  position: absolute; inset: 42px 0 0; padding: clamp(20px, 2.6vw, 32px);
  opacity: 0; transform: scale(.97) translateY(10px);
  transition: opacity .55s var(--ck-ease), transform .65s var(--ck-ease);
  display: flex; flex-direction: column; justify-content: center; gap: 11px;
}
.ck-mod__szene[data-an="1"] { opacity: 1; transform: none; }
.ck-mod__szene .ck-app__ueber { margin-bottom: 4px; }

.ck-mod__liste { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); }
.ck-mod__punkt {
  padding: clamp(22px, 2.6vw, 30px) 0 clamp(22px, 2.6vw, 30px) clamp(22px, 2.4vw, 30px);
  border-left: 2px solid rgba(40,15,145,.1);
  transition: border-color .5s var(--ck-ease), opacity .5s var(--ck-ease);
  opacity: .5;
}
.ck-mod__punkt.ist { border-left-color: var(--ck-royal); opacity: 1; }
.ck-mod__nr {
  display: block; font-size: .74rem; font-weight: 600; letter-spacing: .18em;
  color: var(--royal-text, #3348D9); margin-bottom: 10px;
}
.ck-mod__punkt h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.72rem); color: var(--ck-navy); font-weight: 700; line-height: 1.16; letter-spacing: -.02em; }
.ck-mod__punkt p { margin: 12px 0 0; color: var(--muted, #4F5872); font-weight: 300; line-height: 1.72; font-size: 1rem; max-width: 52ch; }
.ck-mod__punkt ul { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.ck-mod__punkt li { position: relative; padding-left: 18px; font-size: .9rem; font-weight: 400; color: var(--ink, #141A33); }
.ck-mod__punkt li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--ck-royal); }

/* ============================================================
   4 · Cockpit zum Anfassen (bedienbare Programmansicht)

   Das frühere Funktionsraster aus sechzehn gleich aussehenden Kacheln ist
   ersetzt. Wer wissen will, was ein Cockpit tut, will es tun sehen, nicht
   sechzehnmal dieselbe Kachel lesen. Der Rahmen hier ist hell gehalten wie
   .ck-mod__rahmen — dunkle Kästchen auf weißem Grund gibt es auf der Seite
   nirgends, dunkel ist nur das vollbreite Band.
   ============================================================ */
.ck-demo { margin-top: clamp(40px, 5vw, 62px); }
.ck-demo__rahmen {
  position: relative; border-radius: 26px; overflow: hidden;
  background: #fff;
  border: 1px solid rgba(40,15,145,.12);
  box-shadow: 0 44px 96px -58px rgba(40,15,145,.44);
}
.ck-demo__leiste {
  display: flex; align-items: center; gap: 7px;
  padding: 0 20px; height: 44px;
  background: #F6F9FF; border-bottom: 1px solid rgba(40,15,145,.08);
}
.ck-demo__leiste i { width: 8px; height: 8px; border-radius: 50%; background: rgba(40,15,145,.16); }
.ck-demo__titel { margin-left: 10px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ck-navy); font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
.ck-demo__marke { margin-left: auto; color: var(--muted, #4F5872); font-size: .72rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }

.ck-demo__koerper { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 452px; }

/* Reiterspalte */
.ck-demo__seite {
  border-right: 1px solid rgba(40,15,145,.08);
  background: #FBFCFF; padding: 14px 12px;
}
.ck-demo__seite [role="tab"] {
  position: relative; display: flex; align-items: center; gap: 11px;
  width: 100%; margin-bottom: 3px; padding: 11px 13px;
  border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 500; text-align: left;
  color: var(--muted, #4F5872);
  transition: background .4s var(--ck-ease), color .4s var(--ck-ease);
}
.ck-demo__seite [role="tab"] svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .7; transition: opacity .4s var(--ck-ease); }
.ck-demo__seite [role="tab"]:hover { background: var(--akz-hauch, rgba(82,113,255,.07)); color: var(--ck-navy); }
.ck-demo__seite [role="tab"][aria-selected="true"] {
  background: var(--akz-flach, rgba(82,113,255,.12)); color: var(--ck-navy); font-weight: 600;
}
.ck-demo__seite [role="tab"][aria-selected="true"] svg { opacity: 1; }
/* Der senkrechte Strich links markiert den offenen Reiter, ohne dass die
   Schrift springt. Er wächst aus der Mitte heraus statt einzublenden. */
.ck-demo__seite [role="tab"]::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 2.5px; height: 0;
  border-radius: 999px; background: var(--akz, var(--ck-royal));
  transform: translateY(-50%);
  transition: height .45s var(--ck-ease);
}
.ck-demo__seite [role="tab"][aria-selected="true"]::before { height: 22px; }

/* Bühne */
.ck-demo__buehne { position: relative; padding: clamp(22px, 2.6vw, 34px); }
.ck-tafel {
  display: flex; flex-direction: column; gap: 14px;
  animation: ckTafelAuf .5s var(--ck-ease) both;
}
.ck-tafel[data-an="0"] { display: none; }
.ck-tafel:focus-visible { outline: 2px solid var(--ck-royal); outline-offset: 6px; border-radius: 12px; }
@keyframes ckTafelAuf {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.ck-tafel__kopf { display: flex; align-items: baseline; gap: 14px; }
.ck-demo__rahmen .ck-app__ueber { color: var(--akz-text, #3348D9); }
.ck-tafel__zahl {
  margin-left: auto; font-size: .78rem; font-weight: 500; color: var(--muted, #4F5872);
  font-variant-numeric: tabular-nums;
}
.ck-tafel__hin { margin: -4px 0 2px; font-size: .84rem; font-weight: 300; color: var(--light, #5C6580); }
.ck-tafel__liste { display: flex; flex-direction: column; gap: 9px; }
.ck-tafel__tun { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.ck-tafel__ergebnis { font-size: .84rem; font-weight: 400; color: var(--akz-text, #3348D9); }

/* Helle Fassung der Programmzeilen, gleich gehalten wie im Modulbereich */
.ck-demo__rahmen .ck-zeile { background: #F4F7FF; border: 1px solid rgba(40,15,145,.06); }
.ck-demo__rahmen .ck-zeile b { color: var(--ck-navy); }
.ck-demo__rahmen .ck-zeile em { background: var(--akz-flach, rgba(82,113,255,.12)); color: var(--akz-text, #3348D9); }
.ck-demo__rahmen .ck-zeile em.ck-warte { background: rgba(40,15,145,.06); color: var(--muted, #4F5872); }
.ck-demo__rahmen .ck-zeile em.ck-fertig { background: rgba(40,15,145,.1); color: var(--ck-navy); font-weight: 600; }
.ck-demo__rahmen .ck-zeile em.ck-mangel { background: rgba(40,15,145,.06); color: var(--ck-navy); box-shadow: inset 0 0 0 1px rgba(40,15,145,.22); }
.ck-demo__rahmen .ck-balken { background: rgba(40,15,145,.09); }
.ck-zeile--tun {
  width: 100%; cursor: pointer; font: inherit; text-align: left;
  transition: background .35s var(--ck-ease), border-color .35s var(--ck-ease), transform .35s var(--ck-ease);
}
.ck-zeile--tun:hover { background: #EDF2FF; border-color: rgba(82,113,255,.28); }
.ck-zeile--tun:active { transform: scale(.994); }
.ck-zeile--tun:focus-visible { outline: 2px solid var(--ck-royal); outline-offset: 3px; }
/* Umsätze fliegen erst ein, wenn abgerufen wurde */
.ck-zeile--kommt { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ck-ease), transform .5s var(--ck-ease); }
.ck-zeile--kommt.da { opacity: 1; transform: none; }

/* Knöpfe innerhalb der Programmansicht */
.ck-knopf {
  border: 0; border-radius: 999px; cursor: pointer; font: inherit;
  padding: 11px 22px; font-size: .86rem; font-weight: 600;
  background: var(--akz, var(--ck-royal)); color: #fff;
  transition: transform .35s var(--ck-ease), box-shadow .35s var(--ck-ease), background .35s var(--ck-ease);
  box-shadow: 0 12px 26px -14px var(--akz-schatten, rgba(82,113,255,.9));
}
.ck-knopf:hover { transform: translateY(-1.5px); box-shadow: 0 18px 32px -14px var(--akz-schatten, rgba(82,113,255,.95)); }
.ck-knopf:active { transform: scale(.978); }
.ck-knopf:focus-visible { outline: 2px solid var(--ck-navy); outline-offset: 3px; }
.ck-knopf--still { background: rgba(40,15,145,.07); color: var(--ck-navy); box-shadow: none; }
.ck-knopf--still:hover { background: rgba(40,15,145,.11); box-shadow: none; }
.ck-knopf[disabled] { opacity: .42; cursor: default; transform: none; box-shadow: none; }
.ck-knopf[disabled]:hover { transform: none; }

/* Felderpaare (Belegscan, Zähler) */
.ck-feld {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(40,15,145,.08);
}
.ck-feld span { flex: 0 0 40%; font-size: .78rem; font-weight: 300; color: var(--light, #5C6580); }
.ck-feld b {
  font-size: .88rem; font-weight: 600; color: var(--ck-navy);
  font-variant-numeric: tabular-nums;
  transition: opacity .4s var(--ck-ease), transform .4s var(--ck-ease);
}
/* Der Strich steht fuer „noch nichts gelesen“. Als sehr blasses Navy kam er auf
   1,9:1 und war damit kaum zu sehen. Der Grauton der Seite bringt ihn auf 6,4:1
   und bleibt durch das leichtere Gewicht trotzdem klar hinter dem gefuellten
   Wert zurueck. */
.ck-feld b.leer { color: var(--light, #5C6580); font-weight: 400; }
.ck-feld b.frisch { animation: ckFeldAuf .5s var(--ck-ease) both; }
@keyframes ckFeldAuf {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* Belegscan */
.ck-scan { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(18px, 2.4vw, 30px); align-items: start; }
.ck-scan__blatt {
  position: relative; overflow: hidden;
  border-radius: 12px; background: #F4F7FF;
  border: 1px solid rgba(40,15,145,.09);
  padding: 20px 18px; min-height: 168px;
  display: flex; flex-direction: column; gap: 11px;
}
.ck-scan__strich { display: block; height: 7px; border-radius: 999px; background: rgba(40,15,145,.11); }
.ck-scan__strich--stark { height: 11px; background: rgba(40,15,145,.2); margin-top: 6px; }
.ck-scan__linie {
  position: absolute; left: 0; right: 0; top: 0; height: 44px; opacity: 0;
  background: linear-gradient(180deg, rgba(39,230,255,0), rgba(82,113,255,.26));
  border-bottom: 1.5px solid var(--akz, var(--ck-royal));
  transform: translateY(-44px);
}
.ck-scan__blatt.laeuft .ck-scan__linie { animation: ckScan 1.5s var(--ck-ease) 1 forwards; }
@keyframes ckScan {
  0%   { opacity: 0; transform: translateY(-44px); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(210px); }
}
.ck-scan__daten { display: flex; flex-direction: column; }

/* Kameraansicht Zählerstand */
.ck-kam { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(18px, 2.4vw, 30px); align-items: start; }
.ck-kam__bild {
  position: relative; border-radius: 12px; min-height: 168px;
  background: #F4F7FF; border: 1px solid rgba(40,15,145,.09);
  display: grid; place-items: center;
}
.ck-kam__ecke {
  position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--akz-rand, rgba(82,113,255,.34)); border-radius: 3px;
  transition: border-color .5s var(--ck-ease), transform .5s var(--ck-ease);
}
.ck-kam__ecke--lo { top: 34px; left: 26px; border-right: 0; border-bottom: 0; }
.ck-kam__ecke--ro { top: 34px; right: 26px; border-left: 0; border-bottom: 0; }
.ck-kam__ecke--lu { bottom: 34px; left: 26px; border-right: 0; border-top: 0; }
.ck-kam__ecke--ru { bottom: 34px; right: 26px; border-left: 0; border-top: 0; }
.ck-kam__bild.scharf .ck-kam__ecke { border-color: var(--ck-royal); }
.ck-kam__bild.scharf .ck-kam__ecke--lo { transform: translate(4px, 4px); }
.ck-kam__bild.scharf .ck-kam__ecke--ro { transform: translate(-4px, 4px); }
.ck-kam__bild.scharf .ck-kam__ecke--lu { transform: translate(4px, -4px); }
.ck-kam__bild.scharf .ck-kam__ecke--ru { transform: translate(-4px, -4px); }
/* Der Ruhezustand der Anzeige war mit .3 nur 1,9:1 und damit unter der Grenze
   von 3:1, die auch fuer grosse fette Schrift gilt. .55 bringt 3,6:1 und laesst
   den scharfen Zustand trotzdem deutlich hervortreten. */
.ck-kam__ziffern {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: .1em;
  color: rgba(40,15,145,.55); font-variant-numeric: tabular-nums;
  transition: color .5s var(--ck-ease);
}
.ck-kam__bild.scharf .ck-kam__ziffern { color: var(--ck-navy); }
.ck-kam__daten { display: flex; flex-direction: column; }

/* Ablauf Betriebskostenabrechnung */
.ck-lauf { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
.ck-lauf li {
  display: grid; grid-template-columns: minmax(0, 1fr) 128px; align-items: center; gap: 16px;
  padding: 11px 14px; border-radius: 12px;
  background: #F4F7FF; border: 1px solid rgba(40,15,145,.06);
  /* .72 statt .5: die Beschriftung des noch nicht erreichten Schritts ist
     Fliesstext in .86rem und kam bei .5 auf 3,1:1. Bei .72 sind es 5,8:1, und
     der Unterschied zum laufenden Schritt bleibt sichtbar. */
  opacity: .72; transition: opacity .45s var(--ck-ease), border-color .45s var(--ck-ease);
}
.ck-lauf li.laeuft, .ck-lauf li.fertig { opacity: 1; }
.ck-lauf li.laeuft { border-color: var(--akz-rand, rgba(82,113,255,.3)); }
.ck-lauf__text { font-size: .86rem; font-weight: 500; color: var(--ck-navy); }
.ck-lauf .ck-balken i { transition: width 1s var(--ck-ease); }
.ck-lauf li.laeuft .ck-balken i, .ck-lauf li.fertig .ck-balken i { width: var(--w, 100%); }

/* Vorlagenwahl Mietvertrag */
.ck-wahl { display: flex; flex-direction: column; gap: 9px; }
.ck-wahl__titel { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--light, #5C6580); margin-top: 6px; }
.ck-wahl__reihe { display: flex; flex-wrap: wrap; gap: 8px; }
/* Mindesthoehe 44px, damit die Pille auf dem Telefon sicher zu treffen ist.
   Die Polsterung allein ergab 39px. */
.ck-pille {
  display: inline-flex; align-items: center; min-height: 44px;
  border: 1px solid rgba(40,15,145,.14); border-radius: 999px; cursor: pointer; font: inherit;
  padding: 8px 18px; font-size: .82rem; font-weight: 500;
  background: #fff; color: var(--muted, #4F5872);
  transition: background .35s var(--ck-ease), color .35s var(--ck-ease), border-color .35s var(--ck-ease), transform .35s var(--ck-ease);
}
.ck-pille:hover { border-color: var(--akz-rand, rgba(82,113,255,.4)); color: var(--ck-navy); }
.ck-pille:active { transform: scale(.97); }
.ck-pille[aria-pressed="true"] { background: var(--akz-flach, rgba(82,113,255,.12)); border-color: var(--akz-rand, rgba(82,113,255,.42)); color: var(--ck-navy); font-weight: 600; }
.ck-pille:focus-visible { outline: 2px solid var(--ck-royal); outline-offset: 2px; }

/* Zeiterfassung */
.ck-uhr { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 2px; }
.ck-uhr__zahl {
  font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 700; letter-spacing: -.03em;
  color: var(--ck-navy); font-variant-numeric: tabular-nums; line-height: 1;
}
.ck-uhr__wo { font-size: .84rem; font-weight: 300; color: var(--light, #5C6580); }

/* Fußzeile der Programmansicht */
.ck-demo__fuss {
  margin: 0; padding: 13px 20px;
  border-top: 1px solid rgba(40,15,145,.08); background: #FBFCFF;
  font-size: .78rem; font-weight: 300; color: var(--muted, #4F5872);
}
.ck-demo__lauf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }

/* Was nicht bedienbar ist, steht als Liste darunter statt als Kachelwand */
.ck-mehr { margin-top: clamp(38px, 4.6vw, 58px); }
.ck-mehr__titel { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--royal-text, #3348D9); }
.ck-mehr__liste {
  margin: 18px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(30px, 5vw, 72px);
}
.ck-mehr__liste li {
  padding: 15px 0; border-bottom: 1px solid rgba(40,15,145,.09);
  font-size: .92rem; font-weight: 300; line-height: 1.6; color: var(--muted, #4F5872);
}
.ck-mehr__liste b { display: inline; font-weight: 600; color: var(--ck-navy); margin-right: 8px; }

@media (prefers-reduced-motion: reduce) {
  .ck-tafel { animation: none; }
  .ck-scan__blatt.laeuft .ck-scan__linie { animation: none; }
  .ck-feld b.frisch { animation: none; }
  .ck-zeile--kommt { opacity: 1; transform: none; }
}

/* ============================================================
   5 · KI-Band (dunkles Vollbild-Band)
   ============================================================ */
.ck-ki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px); margin-top: clamp(40px, 5vw, 60px); }
.ck-ki__karte { padding-top: 28px; border-top: 1px solid rgba(255,255,255,.2); }
.ck-ki__zeichen { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #9FEEFB; margin-bottom: 20px; }
.ck-ki__zeichen svg { width: 22px; height: 22px; }
.ck-ki__karte h3 { margin: 0; color: #fff; font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; }
/* .88 statt .8 — .8 ergab am hellen Verlaufsende nur 4,4:1. */
.ck-ki__karte p { margin: 12px 0 0; color: rgba(255,255,255,.88); font-weight: 300; line-height: 1.74; font-size: .98rem; }
.ck-schritte { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: s; }
.ck-schritte li {
  counter-increment: s; position: relative; padding: 9px 0 9px 38px;
  color: rgba(255,255,255,.88); font-size: .92rem; font-weight: 300; line-height: 1.6;
}
.ck-schritte li::before {
  content: counter(s); position: absolute; left: 0; top: 8px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: #fff; font-size: .72rem; font-weight: 600;
}

/* ============================================================
   6 · Schnittstellen + Betrieb
   ============================================================ */
.ck-schnitt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); margin-top: clamp(38px, 5vw, 58px); }
.ck-schnitt__block { padding-top: 24px; border-top: 2px solid rgba(40,15,145,.12); }
.ck-schnitt__block h3 { margin: 0 0 12px; font-size: 1.08rem; font-weight: 700; color: var(--ck-navy); letter-spacing: -.01em; }
.ck-schnitt__block p { margin: 0; font-size: .94rem; line-height: 1.7; font-weight: 300; color: var(--muted, #4F5872); }
.ck-schnitt__block ul { margin: 14px 0 0; padding: 0; list-style: none; }
.ck-schnitt__block li { position: relative; padding: 7px 0 7px 20px; font-size: .92rem; font-weight: 300; color: var(--muted, #4F5872); }
.ck-schnitt__block li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 1.5px; background: var(--ck-royal); }

/* ============================================================
   7 · Abschluss
   ============================================================ */
.ck-cta { text-align: center; }
.ck-cta h2 { margin: 0 auto; max-width: 22ch; color: #fff; font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; }
.ck-cta p { margin: 20px auto 0; max-width: 56ch; color: rgba(255,255,255,.88); font-weight: 300; line-height: 1.74; }
.ck-cta__tun { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }
/* Der Hinweis stand als sehr blasse Randnotiz da (.55 = 2,9:1). Er nennt aber
   Preis und Dauer des Erstgesprächs und ist damit ein Argument, kein Beiwerk.
   .82 bringt ihn auf 4,6:1 und lässt ihn durch die kleinere Schrift trotzdem
   dem Absatz darüber untergeordnet.

   Der Selektor trägt .ck-cta mit, weil sonst .ck-cta p (eine Klasse plus ein
   Element) die einzelne Klasse hier überstimmt und der Hinweis unbeabsichtigt
   die .88 des Absatzes erbt. */
.ck-cta p.ck-cta__hin { margin: 22px auto 0; color: rgba(255,255,255,.82); font-size: .84rem; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .ck-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .ck-app { max-width: 620px; }
  .ck-demo__koerper { grid-template-columns: 190px minmax(0, 1fr); }
  .ck-mod { grid-template-columns: minmax(0, 1fr); }
  .ck-mod__stapel { position: static; }
  .ck-mod__rahmen { max-width: 560px; }
  .ck-mod__punkt { opacity: 1; }
  .ck-schnitt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .ck-hero__fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .ck-hero__fakten div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ck-gegen { grid-template-columns: minmax(0, 1fr); }
  .ck-ki { grid-template-columns: minmax(0, 1fr); }

  /* Die Reiter wandern über die Bühne und laufen waagerecht. Anders als in der
     dunklen Hero-Attrappe bleibt die Beschriftung stehen: hier soll man lesen
     können, in welchen Bereich man klickt. */
  .ck-demo__koerper { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ck-demo__seite {
    display: flex; gap: 6px; overflow-x: auto; padding: 10px;
    border-right: 0; border-bottom: 1px solid rgba(40,15,145,.08);
    scrollbar-width: none;
  }
  .ck-demo__seite::-webkit-scrollbar { display: none; }
  /* 12px statt 9px oben und unten: der Reiter kam sonst auf 41px und lag damit
     unter dem, was sich mit dem Daumen sicher treffen laesst. */
  .ck-demo__seite [role="tab"] { width: auto; margin: 0; white-space: nowrap; padding: 12px 14px; min-height: 44px; }
  .ck-demo__seite [role="tab"]::before { top: auto; bottom: 0; left: 14px; right: 14px; width: auto; height: 2.5px; transform: none; transition: opacity .4s var(--ck-ease); opacity: 0; }
  .ck-demo__seite [role="tab"][aria-selected="true"]::before { height: 2.5px; opacity: 1; }
  .ck-demo__buehne { min-height: 400px; }
  .ck-scan, .ck-kam { grid-template-columns: minmax(0, 1fr); }
  .ck-mehr__liste { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .ck-lauf li { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .ck-demo__buehne { min-height: 0; }
  .ck-uhr__zahl { font-size: 2.6rem; }
  .ck-app__koerper { grid-template-columns: minmax(0, 1fr); }
  .ck-app__seite { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding: 10px; }
  .ck-app__seite button { width: auto; white-space: nowrap; margin: 0; }
  .ck-app__seite button span { display: none; }
  .ck-app__seite button svg { width: 17px; height: 17px; }
  .ck-app__koerper { min-height: 300px; }
  .ck-hero__tun .btn, .ck-hero__tun .btn--rand { width: 100%; justify-content: center; }
  .ck-hero__fakten { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 6px; }
  .ck-hero__fakten div {
    padding: 18px 0; border-left: 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .ck-hero__fakten div:last-child { border-bottom: 0; }
  .ck-mod__punkt { padding-left: 18px; }
}

/* ============================================================
   v2 - Symmetrie, Beispieldaten, Bandtoenung
   ============================================================ */

/* v2-1 Getoente Baender: weiche Uebergaenge im Weiss, keine Kaesten.
   #module haengt per padding-top:0 an #warum und #funktionen haengt an
   #module - der Verlauf muss deshalb bei Weiss beginnen und enden. */
#module.ck-band--weiss {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FF 16%, #F2F6FF 84%, #FFFFFF 100%);
}
/* #betrieb liegt zwischen zwei dunklen Baendern und darf voll getoent sein. */
#betrieb.ck-band--weiss {
  background: linear-gradient(180deg, #F7FAFF 0%, #F2F6FF 55%, #EDF3FF 100%);
}

/* v2-2 Ticketzeilen mit Metazeile (Objekt - Zustaendigkeit) */
.ck-zeile__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.ck-zeile em { white-space: nowrap; }
.ck-zeile__txt b { display: block; }
.ck-zeile__txt small {
  font-size: .7rem; font-weight: 400; letter-spacing: .01em;
  color: var(--light, #5C6580);
}

/* v2-3 Zeiterfassung: statischer Tagesblock ueber der Live-Liste */
.ck-zeitheute { display: flex; flex-direction: column; margin-bottom: 2px; }
.ck-zeitheute .ck-zeile em {
  background: rgba(40,15,145,.06); color: var(--ck-navy);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   v3 - Live-Zahlen und Beispiel-Brandings
   ============================================================ */

/* v3-1 Zahlwerte in der Hero-Programmansicht (dunkler Grund) */
.ck-zahlwert {
  flex: 0 0 auto; min-width: 40px; text-align: right;
  font-style: normal; font-size: .74rem; font-weight: 600;
  color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums;
}

/* v3-2 Farbsaetze: die bedienbare Ansicht kann die Hausfarben eines
   Traegers annehmen. Drei Beispielsaetze, die Seite selbst bleibt bei
   den Growit-Farben. Ohne Wahl gilt Royal. */
[data-ck-demo] {
  --akz: #5271FF; --akz-text: #3348D9; --akz-hell: #27E6FF;
  --akz-flach: rgba(82,113,255,.12); --akz-hauch: rgba(82,113,255,.07);
  --akz-rand: rgba(82,113,255,.4); --akz-schatten: rgba(82,113,255,.9);
}
[data-ck-demo][data-marke="kommunal"] {
  --akz: #1E7A46; --akz-text: #17603A; --akz-hell: #5FBF8B;
  --akz-flach: rgba(30,122,70,.12); --akz-hauch: rgba(30,122,70,.07);
  --akz-rand: rgba(30,122,70,.42); --akz-schatten: rgba(30,122,70,.55);
}
[data-ck-demo][data-marke="hv"] {
  --akz: #A8541C; --akz-text: #8A4416; --akz-hell: #D98A4C;
  --akz-flach: rgba(168,84,28,.12); --akz-hauch: rgba(168,84,28,.07);
  --akz-rand: rgba(168,84,28,.42); --akz-schatten: rgba(168,84,28,.5);
}
.ck-demo__rahmen .ck-balken i {
  background: linear-gradient(90deg, var(--akz, #5271FF), var(--akz-hell, #27E6FF));
}
/* Weiche Ueberblendung beim Wechsel des Farbsatzes */
.ck-demo__seite [role="tab"]::before,
.ck-demo__rahmen .ck-app__ueber,
.ck-demo__rahmen .ck-zeile em,
.ck-knopf { transition-property: background, color, border-color, box-shadow, transform, height, opacity; }

/* v3-3 Umschalter ueber der Ansicht */
.ck-marken { text-align: center; margin-top: clamp(30px, 3.4vw, 44px); }
.ck-marken__titel {
  margin: 0 auto 14px; max-width: 560px;
  font-size: .92rem; font-weight: 300; color: var(--muted, #4F5872);
}
.ck-marken__reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* v3-4 Kopfzeile mit laufenden Werten in der bedienbaren Ansicht */
.ck-puls {
  display: flex; flex-wrap: wrap; gap: 6px 32px;
  padding: 11px 20px;
  background: #FBFCFF; border-bottom: 1px solid rgba(40,15,145,.08);
}
.ck-puls__feld { display: flex; align-items: baseline; gap: 8px; }
.ck-puls__feld span {
  font-size: .66rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--light, #5C6580);
}
.ck-puls__feld b {
  font-size: .82rem; font-weight: 600; color: var(--ck-navy);
  font-variant-numeric: tabular-nums;
}
.ck-puls__feld b.tickt { animation: ckWertNeu .55s var(--ck-ease); }
@keyframes ckWertNeu {
  from { opacity: .2; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-puls__feld b.tickt { animation: none; }
}
@media (max-width: 620px) {
  .ck-puls { gap: 5px 20px; padding: 10px 16px; }
  .ck-puls__feld--still620 { display: none; }
}