/* ---------- Produktansicht ---------- */
.ansicht{margin:0;background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--sch)}
.ansicht img{display:block;width:100%;height:auto;background:#F7FAFD}
.ansicht figcaption{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px;
  padding:clamp(20px,2.4vw,28px);border-top:1px solid var(--linie)}
@media(max-width:760px){.ansicht figcaption{grid-template-columns:1fr}}
.an-punkt{display:block;font-size:.87rem;font-weight:300;color:var(--grau);line-height:1.6}
.an-punkt b{display:block;font-size:.9rem;font-weight:700;color:var(--navy);margin-bottom:3px}

/* ---------- Hero: erst das Problem ----------
   Marcos Einwand war richtig: Die Seite verkaufte die Lösung, bevor das
   Problem sitzt. Deshalb steht oben die heutige Lage, darunter die Folgen
   als Aufzählung, und erst dann die Brücke zu HR-Autopilot. */
.h-folge{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:clamp(16px,2.2vw,22px) 0}
.h-folge span{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.82);
  background:rgba(227,26,62,.16);border:1px solid rgba(227,26,62,.32);
  border-radius:100px;padding:6px 15px;white-space:nowrap}
@media(max-width:560px){.h-folge span{font-size:.74rem;padding:5px 12px}}

.h-bruecke{max-width:62ch;margin:clamp(14px,2vw,20px) auto 0!important;
  padding-top:clamp(14px,2vw,20px);border-top:1px solid rgba(255,255,255,.16)}
.h-bruecke b{color:#fff;font-weight:700}

/* ---------- Produktkategorie ---------- */
.kat{padding:clamp(50px,7vw,100px) 0}
.kat-zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px)}
@media(max-width:820px){.kat-zwei{grid-template-columns:1fr}}
.kat-k{border-radius:var(--r-l);padding:clamp(24px,3vw,32px);border:1px solid var(--linie)}
.kat-nein{background:var(--flaeche)}
.kat-ja{background:var(--navy);border-color:transparent}
.kat-lab{display:inline-block;font-size:.64rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;border-radius:100px;padding:5px 13px;margin-bottom:16px}
.kat-nein .kat-lab{color:var(--grau);background:#fff;border:1px solid var(--linie)}
.kat-ja .kat-lab{color:#fff;background:var(--rot)}
.kat-k ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:11px}
.kat-k li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:.94rem;
  font-weight:300;line-height:1.6}
.kat-nein li{color:var(--grau)}
.kat-ja li{color:rgba(255,255,255,.84)}
.kat-k li::before{content:'';width:19px;height:19px;border-radius:50%;margin-top:2px;
  background-repeat:no-repeat;background-position:center;background-size:11px}
.kat-nein li::before{background-color:#D8DEE8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.kat-ja li::before{background-color:var(--rot);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.4l2.4 2.4L9.6 3.8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}


/* ---------- Die Funktionsweise als Formel ----------
   Statt drei ausführlicher Karten eine Rechnung: zwei Schritte machen wir,
   einen machen Sie, daraus folgt das Ergebnis. Die Plus- und Gleichzeichen
   machen den Zusammenhang sichtbar, den drei nebeneinanderstehende Karten
   nur andeuten. Ausführlich steht es auf der Produktseite. */
.formel{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1.15fr;
  gap:clamp(8px,1.2vw,16px);align-items:stretch}
@media(max-width:1060px){
  .formel{grid-template-columns:1fr auto 1fr;gap:12px}
  .formel .fo-gleich{grid-column:1 / -1;justify-self:center;padding:4px 0}
  .formel .fo-erg{grid-column:1 / -1}
}
@media(max-width:620px){
  .formel{grid-template-columns:1fr}
  .formel .fo-op{justify-self:center;padding:2px 0}
  .formel .fo-gleich,.formel .fo-erg{grid-column:auto}
}

.fo-t{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);
  padding:clamp(18px,2.2vw,24px);display:flex;flex-direction:column;
  transition:transform .24s var(--e),box-shadow .24s var(--e)}
.fo-t:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(8,31,68,.09)}

.fo-wer{display:inline-block;align-self:flex-start;font-size:.6rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;border-radius:100px;padding:4px 11px;
  margin-bottom:12px;color:var(--navy);background:var(--hellblau)}
.fo-sie .fo-wer{color:var(--rot);background:rgba(227,26,62,.1)}
.fo-erg .fo-wer{color:#fff;background:var(--rot)}

.fo-t b{display:block;font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:700;
  color:var(--navy);letter-spacing:-.028em;line-height:1.25;margin-bottom:8px}
.fo-t small{display:block;font-size:.85rem;font-weight:300;color:var(--grau);
  line-height:1.55}

.fo-erg{background:var(--navy);border-color:transparent}
.fo-erg b{color:#fff}
.fo-erg small{color:rgba(255,255,255,.72)}

.fo-op{display:grid;place-items:center;font-size:clamp(1.3rem,2.2vw,1.8rem);
  font-weight:300;color:var(--grau-h);line-height:1;user-select:none}
.fo-gleich{color:var(--rot);font-weight:400}

.fo-fuss{text-align:center;margin:clamp(20px,2.6vw,28px) 0 0;
  font-size:clamp(.95rem,1.4vw,1.08rem);font-weight:300;color:var(--grau)}
.fo-fuss b{font-weight:700;color:var(--rot)}
.fo-cta{display:flex;justify-content:center;margin-top:clamp(16px,2vw,22px)}

/* ---------- Einsatzgebiete ----------
   Vorher drei knappe Karten mit Aufzählungen. Jetzt je Gebiet die Anzahl
   der Abläufe und drei konkrete Beispiele: Wer nicht weiß, was ein
   Anwendungsfall ist, versteht "Eintritt in Personio, DATEV und die
   Zugänge, aus einer Eingabe" sofort. */
.eg-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px)}
@media(max-width:1000px){.eg-drei{grid-template-columns:1fr}}

.eg-k{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie);
  border-radius:var(--r-l);padding:clamp(22px,2.6vw,30px);text-decoration:none;
  transition:transform .24s var(--e),box-shadow .24s var(--e),border-color .24s var(--e)}
.eg-k:hover{transform:translateY(-4px);border-color:transparent;
  box-shadow:0 20px 46px rgba(8,31,68,.11)}

.eg-sym{font-size:1.5rem;line-height:1;margin-bottom:14px;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.eg-zahl{display:inline-block;align-self:flex-start;font-size:.62rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--rot);
  background:rgba(227,26,62,.1);border-radius:100px;padding:4px 12px;margin-bottom:12px}
.eg-k b{display:block;font-size:clamp(1.06rem,1.5vw,1.22rem);font-weight:700;
  color:var(--navy);letter-spacing:-.028em;line-height:1.28;margin-bottom:8px}
.eg-k > small{display:block;font-size:.89rem;font-weight:300;color:var(--grau);
  line-height:1.6;margin-bottom:16px}

.eg-bsp{display:flex;flex-direction:column;gap:9px;margin-top:auto;
  padding-top:15px;border-top:1px solid var(--linie)}
.eg-bsp em{display:grid;grid-template-columns:15px 1fr;gap:10px;font-style:normal;
  font-size:.84rem;font-weight:300;color:var(--grau);line-height:1.5}
.eg-bsp em::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--rot);margin-top:7px;opacity:.5}
.eg-k:hover .eg-bsp em::before{opacity:1}

/* ---------- Wirkung, einfach erzählt ----------
   Vorher ein Balkendiagramm mit vier Zahlen: 19, 4, 6, 17 Stunden. Wer das
   verstehen will, muss rechnen. Jetzt zwei Spalten mit demselben Satzbau,
   nur der Inhalt ändert sich. Den Vergleich macht das Auge, nicht der Kopf. */
.wirkung{padding:clamp(50px,7vw,100px) 0;background:var(--flaeche)}
.wk-zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px)}
@media(max-width:820px){.wk-zwei{grid-template-columns:1fr}}

.wk{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);
  padding:clamp(22px,2.8vw,32px)}
.wk-danach{background:var(--navy);border-color:transparent}

.wk-lab{display:inline-block;font-size:.63rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;border-radius:100px;padding:5px 13px;margin-bottom:14px;
  color:var(--grau);background:var(--flaeche)}
.wk-danach .wk-lab{color:#fff;background:var(--rot)}

.wk b{display:block;font-size:clamp(1.1rem,1.7vw,1.32rem);font-weight:700;
  color:var(--navy);letter-spacing:-.03em;line-height:1.3;margin-bottom:16px}
.wk-danach b{color:#fff}

.wk ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:11px}
.wk li{display:grid;grid-template-columns:19px 1fr;gap:12px;font-size:.93rem;
  font-weight:300;line-height:1.6;color:var(--grau)}
.wk-danach li{color:rgba(255,255,255,.82)}
.wk li::before{content:'';width:18px;height:18px;border-radius:50%;margin-top:3px;
  background-repeat:no-repeat;background-position:center;background-size:10px}
.wk li::before{background-color:#D8DEE8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.wk-danach li::before{background-color:var(--rot);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.4l2.4 2.4L9.6 3.8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

.wk-fazit{text-align:center;margin:clamp(20px,2.6vw,28px) 0 0;
  font-size:clamp(1rem,1.5vw,1.14rem);font-weight:300;color:var(--text)}
.wk-fazit b{font-weight:800;color:var(--rot)}
.wk-fazit span{display:block;font-size:.83rem;color:var(--grau-h);margin-top:6px}

/* Abschlusssatz der zusammengefassten Kategoriesektion */
.kat-satz{text-align:center;margin:clamp(20px,2.6vw,28px) 0 0;
  font-size:clamp(.98rem,1.5vw,1.14rem);font-weight:300;color:var(--grau)}
.kat-satz b{font-weight:700;color:var(--navy)}

/* ---------- Beweis direkt unter dem Hero ----------
   Sozialer Beweis gehört in die ersten zwei Scrollvorgänge. Zahlen mit
   Namen wirken dabei deutlich stärker als Logos allein, deshalb stehen
   sie darüber. */
.beweis{padding:clamp(34px,4.4vw,54px) 0;background:#fff;
  border-bottom:1px solid var(--linie)}
.bw-zahlen{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2.4vw,28px);margin-bottom:clamp(24px,3vw,34px)}
@media(max-width:820px){.bw-zahlen{grid-template-columns:1fr 1fr;gap:20px}}
.bw-zahlen > div{text-align:center}
.bw-zahlen b{display:block;font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800;
  color:var(--navy);letter-spacing:-.042em;line-height:1}
.bw-zahlen span{display:block;font-size:.83rem;font-weight:300;color:var(--grau);
  margin-top:7px;line-height:1.45}
.bw-zahlen em{display:block;font-style:normal;font-size:.66rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--rot);margin-top:7px}

/* ================= Die drei Werkzeuge als Säulen =================
   Vorher drei knappe Kacheln mit Textlinks. Jetzt drei gleich hohe Säulen,
   jede mit einer großen Zahl als Blickfang. Die Zahl ist das Versprechen:
   Man sieht sofort, was man bekommt, bevor man klickt. */
.saeulen{padding:clamp(50px,7vw,100px) 0;background:var(--flaeche)}
.sae{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);
  align-items:stretch}
@media(max-width:1000px){.sae{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

.sa{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--linie);border-radius:var(--r-l);
  padding:clamp(26px,3vw,36px);text-decoration:none;overflow:hidden;
  transition:transform .26s var(--e),box-shadow .26s var(--e),border-color .26s var(--e)}
.sa::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--verlauf-w);transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--e)}
.sa:hover{transform:translateY(-6px);border-color:transparent;
  box-shadow:0 26px 56px rgba(8,31,68,.14)}
.sa:hover::before{transform:scaleX(1)}

/* Die mittlere Säule steht hervor: sie ist der häufigste Einstieg */
.sa-mitte{background:var(--navy);border-color:transparent;
  box-shadow:0 20px 46px rgba(8,31,68,.18)}
.sa-mitte:hover{box-shadow:0 30px 62px rgba(8,31,68,.26)}

.sa-zeit{position:absolute;right:clamp(22px,2.6vw,30px);top:clamp(24px,2.8vw,32px);
  font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rot);background:rgba(227,26,62,.1);border-radius:100px;padding:5px 12px}
.sa-mitte .sa-zeit{color:#fff;background:rgba(255,255,255,.16)}

.sa-sym{font-size:1.7rem;line-height:1;margin-bottom:18px;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}

.sa-t{display:block;font-size:clamp(1.16rem,1.8vw,1.4rem);font-weight:700;
  color:var(--navy);letter-spacing:-.032em;line-height:1.22;margin-bottom:20px}
.sa-mitte .sa-t{color:#fff}

/* Die große Zahl ist der Blickfang */
.sa-gross{display:block;font-size:clamp(2.1rem,4vw,2.9rem);font-weight:800;
  letter-spacing:-.045em;line-height:1;color:var(--rot);margin-bottom:8px}
.sa-mitte .sa-gross{color:#fff}
.sa-unter{display:block;font-size:.79rem;font-weight:300;color:var(--grau-h);
  line-height:1.45;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--linie)}
.sa-mitte .sa-unter{color:rgba(255,255,255,.55);border-bottom-color:rgba(255,255,255,.18)}

.sa p{font-size:.9rem;font-weight:300;color:var(--grau);line-height:1.65;
  margin:0 0 22px;flex:1}
.sa-mitte p{color:rgba(255,255,255,.78)}

.sa-los{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-size:.92rem;font-weight:700;color:#fff;background:var(--rot);
  border-radius:100px;padding:12px 24px;
  transition:gap .22s var(--e),box-shadow .22s var(--e)}
.sa:hover .sa-los{gap:14px;box-shadow:0 8px 22px rgba(227,26,62,.34)}
.sa-los i{font-style:normal}

.sae-fuss{text-align:center;margin:clamp(24px,3vw,34px) 0 0;
  font-size:clamp(.95rem,1.4vw,1.08rem);font-weight:300;color:var(--grau)}
.sae-fuss b{font-weight:700;color:var(--navy)}

/* Der Kennzahlenstreifen hatte den oberen Abstand fest auf null gesetzt
   und klebte dadurch an der Sektion darüber. */
.kz-abschnitt{padding-top:clamp(46px,6vw,86px)!important}

/* Kundenstimmen mit Firmenlogo: Das Logo schafft mehr Vertrauen als der
   Firmenname im Fließtext, weil es sofort wiedererkannt wird. */
.st-wer{display:flex;align-items:center;gap:14px}
.st-logo{height:30px;width:auto;max-width:100px;object-fit:contain;
  flex:0 0 auto;opacity:.85}
.st-p{display:flex;flex-direction:column;min-width:0}
.st-p b{font-size:.92rem;font-weight:700;color:var(--navy);line-height:1.3}
.st-p > span{font-size:.8rem;font-weight:300;color:var(--grau);line-height:1.35}

/* Die Einsatzgebiete tragen jetzt ihren Fachnamen, darunter die
   Umschreibung für alle, die den Begriff nicht täglich benutzen. */
.eg-was{display:block;font-size:.86rem;font-weight:500;color:var(--grau-h);
  margin:-4px 0 8px}

/* ---------- KI-Verweis: beides zusammen ----------
   Die Rechnung macht sichtbar, dass es kein Entweder-oder ist:
   feste Regel plus Agent ergibt den Ablauf. */
.kt-rechts{display:flex;flex-direction:column;gap:10px}
.kt-k{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);
  padding:clamp(16px,2vw,22px)}
.kt-mit{background:var(--hellblau);border-color:transparent}
.kt-erg{background:var(--navy);border-color:transparent}
.kt-k > span{display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grau);background:var(--flaeche);
  border-radius:100px;padding:4px 11px;margin-bottom:10px}
.kt-mit > span{color:var(--navy);background:#fff}
.kt-erg > span{color:#fff;background:var(--rot)}
.kt-k b{display:block;font-size:1rem;font-weight:700;color:var(--navy);
  letter-spacing:-.024em;margin-bottom:5px;line-height:1.3}
.kt-erg b{color:#fff}
.kt-k small{display:block;font-size:.84rem;font-weight:300;color:var(--grau);line-height:1.5}
.kt-erg small{color:rgba(255,255,255,.72)}
.kt-plus,.kt-gleich{text-align:center;font-size:1.5rem;font-weight:300;
  color:var(--grau-h);line-height:1}
.kt-gleich{color:var(--rot)}

/* ---------- KI-Verweis: das Raster ----------
   Links die Aussage, rechts die Rechnung. Die Regel für .kt fehlte, dadurch
   standen die Karten unter dem Text statt daneben. */
.ki-teaser{padding:clamp(50px,7vw,100px) 0}
.kt{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4vw,56px);align-items:center;max-width:1120px;margin:0 auto}
@media(max-width:960px){.kt{grid-template-columns:1fr;gap:28px}}
.kt-links h2{font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.04em;
  line-height:1.14;margin:12px 0 16px}
.kt-links p{font-size:.96rem;font-weight:300;color:var(--grau);line-height:1.75;
  margin:0 0 14px;max-width:56ch}
.kt-links p b{font-weight:700;color:var(--navy)}
.kt-links .btn{margin-top:8px}















/* ================= Die Schichten als laufende Animation =================
   Alle drei Schichten sind gleich behandelt: gleiche Kartenfarbe, gleiche
   rote Nummer, gleiches rotes Kennzeichen. Vorher stach der Kern hervor
   und wirkte dadurch wichtiger als die anderen beiden.

   Die Tiefe entsteht über weiche Schlagschatten und einen Lichtverlauf
   von oben links. Nur so viel, dass die Schalen wie übereinanderliegende
   Scheiben wirken, ohne dass man den Effekt bewusst wahrnimmt. */
/* Der Wind verlässt die Grafik nach oben und läuft in das Ergebnisband
   hinein. Damit er nicht abgeschnitten wird, darf keine Ebene dazwischen
   beschneiden. Das SVG steht im Dokument nach dem Band, liegt also
   darüber. */
.kr-abschnitt{padding:clamp(50px,7vw,100px) 0;overflow:visible}
.kr-abschnitt .wrap{overflow:visible}
.kr-bild{overflow:visible;position:relative;z-index:2}
.kr-ergebnis{position:relative;z-index:1}
.kr-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,54px);align-items:center;max-width:1180px;margin:0 auto;
  overflow:visible}
@media(max-width:940px){
  .kr-raster{grid-template-columns:1fr;gap:26px}
  .kr-bild{max-width:460px;margin:0 auto}
}
.kr-svg{width:100%;height:auto;display:block;overflow:visible}

/* ---------- Die Schalen ---------- */
.kr-g{transition:opacity .3s var(--e),transform .3s var(--e)}
.kr-schale{stroke:rgba(8,31,68,.07);stroke-width:1}
.kr-glanz{fill:none;stroke:rgba(255,255,255,.9);stroke-width:2;
  stroke-linecap:round;opacity:.85}

.kr-dreh{fill:none;stroke:rgba(227,26,62,.22);stroke-width:1.5;
  stroke-dasharray:4 14;transform-origin:330px 330px;
  animation:krdreh 52s linear infinite}
@keyframes krdreh{to{transform:rotate(360deg)}}

/* ---------- Nummern und Beschriftung im Bild ---------- */
.kr-b{pointer-events:none;transition:opacity .3s var(--e)}
.kr-nr-k{fill:var(--rot)}
.kr-nr-t{text-anchor:middle;font-size:15px;font-weight:800;fill:#fff}
.kr-b-t{text-anchor:middle;font-size:15px;font-weight:700;fill:var(--navy);
  letter-spacing:-.2px}
.kr-b-z{text-anchor:middle;font-size:12px;font-weight:300;fill:var(--grau-h)}

.kr-sortier{fill:#6B93CC;pointer-events:none}
/* Der Wind fließt in das Ergebnis. Bewusst weicher und heller als die
   Datenpunkte hinein: Es ist kein Strom mehr, sondern etwas, das sich
   verteilt. */
.kr-dat{filter:drop-shadow(0 0 7px rgba(227,26,62,.4));pointer-events:none}
.kr-wind{fill:#0F7B4F;pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(15,123,79,.5))}

/* ---------- Die Programme ---------- */
.kr-werkz{pointer-events:none}
.kr-w-k{fill:url(#werkz);stroke:rgba(8,31,68,.10);stroke-width:1}
.kr-w-t{text-anchor:middle;font-size:13px;font-weight:600;fill:var(--navy)}

/* ---------- Hervorheben, in beide Richtungen ---------- */
.kr-raster.hebt .kr-g:not(.hell),
.kr-raster.hebt .kr-b:not(.hell){opacity:.3}
.kr-raster.hebt .kr-werkz,
.kr-raster.hebt .kr-sortier{opacity:.3}
.kr-g.hell .kr-schale{stroke:var(--rot);stroke-width:2}
.kr-g{cursor:pointer}

/* ---------- Die Erläuterungen ---------- */
.kr-text{display:flex;flex-direction:column;gap:clamp(11px,1.5vw,15px)}
.krz{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;
  background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);
  padding:clamp(16px,2vw,22px);cursor:default;
  transition:box-shadow .25s var(--e),border-color .25s var(--e),
             transform .25s var(--e),opacity .25s var(--e)}
.krz-nr{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--rot);color:#fff;font-size:.9rem;font-weight:800}
.krz b{display:block;font-size:1.06rem;font-weight:700;color:var(--navy);
  letter-spacing:-.026em;margin-bottom:6px}
.krz p{font-size:.88rem;font-weight:300;color:var(--grau);line-height:1.62;margin:0}
.krz em{display:inline-block;font-style:normal;font-size:.6rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:var(--rot);border-radius:100px;padding:4px 11px;margin-top:11px}

.krz.hell{border-color:var(--rot);transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(227,26,62,.16)}
.kr-raster.hebt .krz:not(.hell){opacity:.4}

/* Das Ergebnis steht über die volle Breite ganz oben: Es ist das, was
   der Besucher will. Der Weg dorthin folgt darunter. */
.kr-ergebnis{background:var(--navy);border-radius:var(--r-l);
  padding:clamp(26px,3.4vw,40px);text-align:center;
  margin-bottom:clamp(26px,3.4vw,44px);
  box-shadow:0 24px 60px rgba(8,31,68,.20)}
.kr-erg-vier{display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(14px,2vw,26px);margin-top:clamp(18px,2.4vw,26px)}
@media(max-width:1100px){.kr-erg-vier{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.kr-erg-vier{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.kr-erg-vier{grid-template-columns:1fr}}
.kr-erg-vier i{display:block;font-style:normal;font-size:1.5rem;line-height:1;
  margin-bottom:10px;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.kr-erg-vier b{display:block;font-size:clamp(1rem,1.5vw,1.16rem);font-weight:800;
  color:#fff;letter-spacing:-.03em;line-height:1.2;margin-bottom:6px}
.kr-erg-vier span{display:block;font-size:.84rem;font-weight:300;
  color:rgba(255,255,255,.66);line-height:1.5}
.kr-erg-fuss{margin:clamp(20px,2.6vw,28px) 0 0;font-size:.86rem;font-weight:300;
  font-style:italic;color:rgba(255,255,255,.5)}
.kr-erg-lab{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--rot);border-radius:100px;
  padding:5px 13px;margin-bottom:14px}
.kr-erg-liste{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:560px){.kr-erg-liste{grid-template-columns:1fr}}
/* Zwei Ebenen: außen das Raster aus Zeichen und Text, innen der Text
   selbst. Ohne die innere Ebene wird jedes Wort zu einer eigenen
   Rasterzelle und der Satz bricht nach jedem Wort um. */
.kr-erg-liste > span{display:grid;grid-template-columns:22px 1fr;gap:10px;
  align-items:start}
.kr-erg-liste > span > span{display:block;font-size:.82rem;font-weight:300;
  color:rgba(255,255,255,.7);line-height:1.45}
.kr-erg-liste i{font-style:normal;font-size:1rem;line-height:1.2;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.kr-erg-liste b{display:block;font-size:.94rem;font-weight:700;color:#fff;
  letter-spacing:-.018em;margin-bottom:2px}

.kr-hinweis{font-size:.78rem;font-weight:300;font-style:italic;color:var(--grau-h);
  margin:4px 0 0;text-align:center}
@media(max-width:940px){.kr-hinweis{display:none}}

.kr-fuss{text-align:center;margin:clamp(24px,3vw,34px) 0 0;
  font-size:clamp(.96rem,1.4vw,1.1rem);font-weight:300;color:var(--grau)}
.kr-fuss b{font-weight:700;color:var(--navy)}

@media(prefers-reduced-motion:reduce){
  .kr-dreh,.kr-sortier{animation:none}
  .kr-dat{display:none}
}