/* ============================================================
   YOUNIQUEHORNS – Website
   Schriften lokal aus assets/fonts/
   ============================================================ */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/Montserrat-Light.ttf") format("truetype")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Montserrat-Regular.ttf") format("truetype")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/Montserrat-Medium.ttf") format("truetype")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/Montserrat-Bold.ttf") format("truetype")}

:root{
  --violett:#27166F;
  --violett-tief:#1B0F4D;
  --cyan:#27BCD5;
  --pink:#FB70A3;
  --gelb:#FFD066;
  --gruen:#D2EED2;
  --weiss:#FEFCFC;
  --text-leise:rgba(254,252,252,.78);
  --text-sehr-leise:rgba(254,252,252,.55);
  --linie:rgba(254,252,252,.14);
  --flaeche:rgba(254,252,252,.05);
  --max:1180px;

  /* ---------- Abstands-System ----------
     Alle Abstände leiten sich aus diesen beiden Werten ab.
     Fluid per clamp() auf Basis der Fensterbreite (vw, nicht vh),
     damit es beim Verkleinern stufenlos mitwächst und auch bei
     flachen/quadratischen Fenstern (Tablet) nicht zusammenfällt.
     Breakpoints im Dokument: 900px (Layout 2-spaltig -> 1-spaltig,
     Navigation wird Burger) und 640px (Feinheiten fürs Handy). */
  --rand:clamp(28px,5vw,44px);        /* Seitenrand links/rechts */
  --abschnitt:clamp(48px,7vw,96px);   /* vertikaler Abstand zwischen Abschnitten */
}

/* ---------- Seitenübergänge (View Transitions) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{
    navigation:auto;
  }
  ::view-transition-old(root){
    animation:yh-vt-aus .5s cubic-bezier(.4,0,.2,1) both;
  }
  ::view-transition-new(root){
    animation:yh-vt-ein .5s cubic-bezier(.4,0,.2,1) both;
  }
  @keyframes yh-vt-aus{to{opacity:0;transform:scale(.98)}}
  @keyframes yh-vt-ein{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
}

/* Fallback-Überblendung für Browser ohne View-Transitions-API */
.yh-fade body{opacity:0;transition:opacity .32s ease}
.yh-fade body.yh-faded-ein{opacity:1}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  background:var(--violett);
  color:var(--weiss);
  font-family:"Montserrat",Arial,sans-serif;
  font-weight:300;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}

/* Wichtig: Langform (padding-left/right) statt Kurzform.
   .yh-wrap und .yh-section sitzen oft am selben Element; mit der
   Kurzform würden sie sich gegenseitig die jeweils andere Achse
   auf 0 setzen. */
.yh-wrap{
  position:relative;z-index:1;max-width:var(--max);margin:0 auto;
  padding-left:var(--rand);padding-right:var(--rand);
}
.yh-eng{max-width:70ch}

/* ---------- Hintergrundverläufe ---------- */
.yh-glow{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0;opacity:.75}
.yh-glow--pink{width:44vw;height:44vw;top:-14vw;left:38vw;background:radial-gradient(circle,rgba(251,112,163,.8) 0%,rgba(251,112,163,.12) 55%,transparent 72%)}
.yh-glow--tief{width:72vw;height:72vw;bottom:-40vw;left:2vw;background:radial-gradient(circle,rgba(27,15,77,.95) 0%,rgba(27,15,77,.4) 55%,transparent 74%)}
.yh-glow--cyan{width:32vw;height:32vw;top:58vh;right:-12vw;background:radial-gradient(circle,rgba(39,188,213,.4) 0%,transparent 70%)}

/* ---------- Glitzereffekt (Menü-Navigation) ---------- */
.yh-glitzer{
  position:fixed;z-index:9999;pointer-events:none;
  width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  opacity:0;animation:yh-glitzer-pop .55s ease-out forwards;
}
@keyframes yh-glitzer-pop{
  0%{opacity:1;transform:translate(0,0) scale(.4)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1)}
}

/* ---------- Scroll-Fortschritt ---------- */
.yh-scrollbar{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:var(--cyan);z-index:200;
  transition:width .1s linear;
}

/* ---------- Kopfbereich / Navigation ---------- */
.yh-top{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  backdrop-filter:blur(28px) saturate(160%);
  box-shadow:0 8px 32px rgba(10,4,40,.28),inset 0 1px 0 rgba(255,255,255,.10);
  transition:background .3s ease,transform .3s ease;
}
.yh-top--versteckt{transform:translateY(-100%)}
.yh-top__inner{
  max-width:var(--max);margin:0 auto;padding:12px var(--rand);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.yh-logo img{height:72px;width:auto;display:block;margin-left:-18px}
.yh-nav{
  display:flex;align-items:center;gap:2px;
  padding:5px;border-radius:999px;
  background:rgba(254,252,252,.05);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.yh-nav a{
  text-decoration:none;font-size:.9rem;font-weight:400;white-space:nowrap;
  color:var(--text-leise);transition:color .2s ease,background .2s ease,transform .2s ease;
  padding:8px 12px;border-radius:999px;
}
.yh-nav a:hover{color:var(--weiss);background:rgba(254,252,252,.08)}
.yh-nav a[aria-current="page"]{color:var(--cyan);background:rgba(39,188,213,.14);font-weight:500}
.yh-nav > a[href="kontakt.html"]{color:var(--violett);background:var(--cyan);font-weight:600}
.yh-nav > a[href="kontakt.html"]:hover{background:var(--pink);color:var(--weiss)}
.yh-nav__item{display:flex;align-items:center}
.yh-nav__item > a::after{content:"▾";display:inline-block;margin-left:5px;font-size:.7em;opacity:.7}
.yh-nav__dropdown{
  position:absolute;top:100%;left:0;right:0;padding-top:0;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
  z-index:70;
}
.yh-nav__item:hover .yh-nav__dropdown,
.yh-nav__item:focus-within .yh-nav__dropdown{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .2s ease,transform .2s ease;
}
.yh-nav__dropdown__inner{
  max-width:var(--max);margin:0 auto;padding:28px var(--rand);
  background:var(--violett-tief);
  border-radius:0 0 22px 22px;
  box-shadow:0 20px 40px rgba(10,4,40,.4);
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
/* Favicon links, Text rechts: zwei Spalten, das Bild über beide Zeilen */
.yh-nav a.yh-nav__mega{
  --mega-icon:52px;
  display:grid;grid-template-columns:var(--mega-icon) minmax(0,1fr);grid-template-rows:auto 1fr;
  column-gap:16px;row-gap:4px;align-items:start;align-content:start;
  padding:18px 20px;border-radius:16px;
  border:1px solid transparent;
  text-decoration:none;transition:background .2s ease,border-color .2s ease;
}
.yh-nav a.yh-nav__mega:hover{color:var(--text-leise);background:rgba(254,252,252,.06);border-color:var(--linie)}
.yh-nav__mega__icon{
  grid-column:1;grid-row:1 / span 2;
  box-sizing:border-box;
  width:var(--mega-icon);height:var(--mega-icon);min-width:var(--mega-icon);max-width:none;
  align-self:start;justify-self:start;
  padding:5px;border-radius:4px;object-fit:contain;
  background:linear-gradient(145deg,rgba(39,188,213,.22),rgba(251,112,163,.16));
  box-shadow:inset 0 0 0 1px rgba(254,252,252,.16),0 8px 20px rgba(10,4,40,.35);
  transition:transform .25s ease,box-shadow .25s ease;
}
.yh-nav a.yh-nav__mega:hover .yh-nav__mega__icon{
  transform:translateY(-2px) scale(1.05);
  box-shadow:inset 0 0 0 1px rgba(39,188,213,.6),0 10px 26px rgba(39,188,213,.28);
}
.yh-nav__mega strong{grid-column:2;margin-top:4px;color:var(--weiss);font-size:1rem;font-weight:600;line-height:1.3}
.yh-nav__mega span{grid-column:2;font-size:.85rem;line-height:1.5;color:var(--text-leise);white-space:normal}
.yh-nav a.yh-nav__mega[aria-current="page"]{color:var(--text-leise);background:rgba(39,188,213,.14);font-weight:400}
.yh-nav a.yh-nav__mega[aria-current="page"] strong{color:var(--cyan)}
@media (max-width:640px){
  .yh-nav__dropdown__inner{grid-template-columns:1fr}
}
.yh-burger{
  display:none;background:rgba(254,252,252,.06);border:none;border-radius:12px;
  width:44px;height:40px;color:var(--weiss);font-size:1.1rem;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .2s ease,transform .2s ease;
}
.yh-burger:hover{background:rgba(254,252,252,.14)}
.yh-burger:active{transform:scale(.94)}

/* ---------- Buttons ---------- */
.yh-btn{
  display:inline-block;background:var(--cyan);color:var(--weiss);
  font-family:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  text-decoration:none;border:none;border-radius:12px;padding:.8em 1.3em;
  font-size:.92rem;cursor:pointer;transition:background .2s ease,transform .2s ease;
}
.yh-btn:hover{background:var(--pink);transform:translateY(-2px)}
.yh-btn--ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--cyan)}
.yh-btn--ghost:hover{background:var(--pink);box-shadow:inset 0 0 0 2px var(--pink)}
.yh-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
a:focus-visible,button:focus-visible{outline:2px solid var(--gelb);outline-offset:3px}

/* ---------- Abschnitte ---------- */
.yh-section{padding-top:var(--abschnitt);padding-bottom:var(--abschnitt)}
.yh-section--linie{border-top:1px solid var(--linie)}
.yh-label{
  display:inline-block;font-size:.75rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px;
}
h1,h2,h3{font-weight:400;letter-spacing:.01em;line-height:1.12}
h1,h2,h3,h4,p,li{text-wrap:pretty}
.yh-h1{font-size:clamp(2.8rem,6.6vw,4.8rem);text-transform:uppercase}
.yh-h2{font-size:clamp(1.7rem,3.4vw,2.5rem);text-transform:uppercase}
.yh-h3{font-size:1.2rem;font-weight:500}
.yh-lead{margin-top:20px;font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--text-leise)}
.yh-text{margin-top:14px;color:var(--text-leise)}
/* Einleitungsabsatz im ersten Abschnitt nach dem Seitenkopf: etwas größer */
.yh-kopf + .yh-section p.yh-text,
.yh-kopf + .yh-section p.yh-lead{font-size:clamp(1.12rem,1.8vw,1.45rem)}
.yh-text + .yh-text{margin-top:12px}

/* ---------- Hero ---------- */
.yh-hero{padding-top:calc(var(--abschnitt) * 1.3);padding-bottom:var(--abschnitt)}
.yh-hero__claim{margin-top:26px;max-width:58ch}

/* ---------- Großer Schriftzug (z. B. „Unique like you“ auf Karriere) ---------- */
.yh-gross{
  text-align:center;text-transform:uppercase;
  font-size:clamp(2.6rem,10vw,8rem);font-weight:700;
  line-height:1;letter-spacing:.01em;color:var(--weiss);
}
.yh-gross span{color:var(--pink)}

/* ---------- Seitenkopf mit Bild (z. B. Kontakt) ---------- */
.yh-kopf{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  min-height:min(620px,72vh);
}
.yh-kopf__inner{
  display:flex;align-items:center;
  padding:var(--abschnitt) var(--rand) var(--abschnitt) max(var(--rand),calc((100vw - var(--max)) / 2));
}
.yh-kopf__text{max-width:520px}
.yh-kopf__text h1{
  font-weight:400;letter-spacing:.01em;line-height:1.08;text-transform:uppercase;
  font-size:clamp(2.4rem,5vw,3.6rem);
}
.yh-kopf__z1,.yh-kopf__z2{display:block}
.yh-kopf__z2{color:var(--cyan)}

/* ---------- Funkelnde Headline (Startseite) ---------- */
.yh-funkeltitel{position:relative}
.yh-funkeltitel__pink,.yh-funkeltitel__weiss{
  background-size:250% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:yh-funkeltitel-glanz 5s ease-in-out infinite;
}
.yh-funkeltitel__pink{background-image:linear-gradient(100deg,var(--pink) 40%,#fff 50%,var(--pink) 60%)}
.yh-funkeltitel__weiss{background-image:linear-gradient(100deg,var(--weiss) 40%,var(--cyan) 50%,var(--weiss) 60%);animation-delay:.35s}
.yh-funkeltitel__stern{
  position:absolute;pointer-events:none;
  font-size:.42em;line-height:1;color:var(--gelb);
  text-shadow:0 0 12px rgba(255,208,102,.8);
  opacity:0;animation:yh-funkeltitel-stern 3.2s ease-in-out infinite;
}
.yh-funkeltitel__stern--klein{font-size:.26em;color:var(--weiss);text-shadow:0 0 10px rgba(39,188,213,.9)}
@keyframes yh-funkeltitel-glanz{0%,15%{background-position:120% 0}60%,100%{background-position:-20% 0}}
@keyframes yh-funkeltitel-stern{
  0%,100%{opacity:0;transform:scale(.3) rotate(0)}
  40%{opacity:1;transform:scale(1.1) rotate(45deg)}
  60%{opacity:.9;transform:scale(.9) rotate(70deg)}
}
@media (prefers-reduced-motion:reduce){
  .yh-funkeltitel__pink,.yh-funkeltitel__weiss{animation:none;background-position:0 0}
  .yh-funkeltitel__stern{animation:none;opacity:.8}
}
.yh-kopf__text p{margin-top:24px;color:var(--text-leise);font-size:clamp(1.02rem,1.5vw,1.15rem);max-width:48ch}
.yh-kopf__bild{
  position:relative;overflow:hidden;background:rgba(0,0,0,.2);
  clip-path:polygon(10% 0,100% 0,100% 100%,0 100%);
}
.yh-kopf__bild img{width:100%;height:100%;object-fit:cover;display:block}
/* Wiederverwendbares Modul: Header-Layout, seitenverkehrt (Bild links, Text rechts) */
.yh-kopf--um .yh-kopf__inner{
  order:2;
  padding-left:var(--rand);
  padding-right:max(var(--rand),calc((100vw - var(--max)) / 2));
}
.yh-kopf--um .yh-kopf__bild{order:1;clip-path:polygon(0 0,90% 0,100% 100%,0 100%)}
.yh-kopf--voll{height:100vh}
/* Feine Linie direkt unter dem Kopfbild */
.yh-kopf--linie-unten{border-bottom:1px solid var(--linie)}

/* Ab hier wird aus dem zweispaltigen Kopfbereich ein gestapelter */
@media (max-width:900px){
  .yh-kopf{grid-template-columns:1fr}
  .yh-kopf__inner{padding:var(--abschnitt) var(--rand)}
  .yh-kopf__bild{aspect-ratio:4/3;min-height:0}
  .yh-kopf--um .yh-kopf__inner,
  .yh-kopf--um .yh-kopf__bild{order:initial}
  .yh-kopf--um .yh-kopf__inner{padding-left:var(--rand);padding-right:var(--rand)}
  .yh-kopf--um .yh-kopf__bild{clip-path:none}
  .yh-kopf--voll{height:auto}
}

/* ---------- BotBucket-Begrüßung ---------- */
.bb-hello{
  --bb-ink:var(--violett);--bb-cta:var(--cyan);--bb-cta-hover:var(--pink);
  --bb-cta-text:var(--weiss);--bb-surface:var(--weiss);--bb-line:rgba(39,22,111,.14);
  position:relative;z-index:1;background:transparent;
  padding:var(--abschnitt) var(--rand);color:var(--bb-ink);
}
.bb-hello__inner{
  max-width:68rem;width:100%;margin:0 auto;display:grid;
  grid-template-columns:minmax(220px,360px) 1fr;align-items:center;
  gap:clamp(1.75rem,5vw,4rem);
}
.bb-hello__bubble{
  position:relative;background:var(--bb-surface);border:1px solid var(--bb-line);
  border-radius:28px;max-width:min(36rem,100%);justify-self:start;
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1.5rem,3vw,2.5rem);
  box-shadow:0 18px 40px -26px rgba(27,5,99,.35);
  animation:bb-bubble-float 4.4s ease-in-out infinite;
}
.bb-hello__bubble::before,.bb-hello__bubble::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:14px;height:30px;clip-path:polygon(100% 0,100% 100%,0 50%);
}
.bb-hello__bubble::before{left:-14px;background:var(--bb-line)}
.bb-hello__bubble::after{left:-13px;background:var(--bb-surface)}
.bb-hello__text{margin:0;font-size:1.3em;font-weight:600;line-height:1.4}
.bb-hello__text + .bb-hello__text{margin-top:.9em;font-size:1.05em;font-weight:400}
.bb-hello__cta{
  display:inline-block;margin-top:1.6rem;padding:.8em 1.3em;border:0;border-radius:12px;
  background:var(--bb-cta);color:var(--bb-cta-text);font:inherit;font-size:1em;font-weight:700;
  line-height:1.2;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;
  cursor:pointer;transition:background-color .2s ease;
}
.bb-hello__cta:hover{background:var(--bb-cta-hover)}
.bb-hello__cta:focus-visible{outline:3px solid var(--bb-ink);outline-offset:3px}
.bb-hello__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.6rem}
.bb-hello__actions .bb-hello__cta{margin-top:0}
.bb-hello__cta--ghost{background:transparent;border:2px solid var(--bb-cta);color:var(--bb-ink)}
.bb-hello__cta--ghost:hover{background:var(--bb-cta);color:var(--bb-cta-text)}
.bb-hello__figure{margin:0;justify-self:center}
.bb-hello__svg{width:100%;height:auto;display:block;overflow:visible}
@media (max-width:900px){
  .bb-hello__inner{grid-template-columns:1fr;justify-items:center;text-align:center}
  .bb-hello__figure{max-width:240px}
  .bb-hello__bubble{justify-self:center}
  .bb-hello__bubble::before,.bb-hello__bubble::after{
    left:50%;width:30px;height:14px;transform:translateX(-50%);
    clip-path:polygon(0 100%,100% 100%,50% 0);
  }
  .bb-hello__bubble::before{top:-14px}
  .bb-hello__bubble::after{top:-13px}
}
#bb-bot,#bb-upper,#bb-arm-right,.bb-eye,.bb-dot{transform-box:view-box;will-change:transform}
#bb-bot{transform-origin:130px 150px;animation:bb-float 3.6s ease-in-out infinite alternate}
#bb-upper{transform-origin:130px 146px;animation:bb-sway 5.2s ease-in-out infinite alternate}
#bb-arm-right{transform-origin:168px 164px;animation:bb-wave 5s ease-in-out infinite}
.bb-eye{animation:bb-blink 6.5s ease-in-out infinite}
.bb-eye-l{transform-origin:104px 105px}
.bb-eye-r{transform-origin:156px 105px}
.bb-dot{animation:bb-typing 1.4s ease-in-out infinite}
.bb-dot1{transform-origin:119px 175px}
.bb-dot2{transform-origin:129px 175px;animation-delay:.18s}
.bb-dot3{transform-origin:139px 175px;animation-delay:.36s}
@keyframes bb-float{from{transform:translateY(2px)}to{transform:translateY(-4px)}}
@keyframes bb-sway{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
@keyframes bb-wave{
  0%,55%,100%{transform:rotate(0deg)}
  62%{transform:rotate(-24deg)}
  70%{transform:rotate(-8deg)}
  78%{transform:rotate(-24deg)}
  86%{transform:rotate(-8deg)}
  94%{transform:rotate(-2deg)}
}
@keyframes bb-blink{
  0%,90%,100%{transform:scaleY(1)}
  93%{transform:scaleY(.08)}
  96%{transform:scaleY(1)}
}
@keyframes bb-typing{
  0%,60%,100%{transform:translateY(0);opacity:.8}
  30%{transform:translateY(-3px);opacity:1}
}
@keyframes bb-bubble-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-6px) rotate(-.6deg)}
}

/* ---------- Transformationsgrafik (Heute -> YOUniquehorns) ---------- */
.yh-trafo{
  position:relative;z-index:1;padding:var(--abschnitt) var(--rand);
  background:transparent;
}
.yh-trafo__svg{display:block;width:100%;max-width:1040px;height:auto;margin:0 auto}
.yh-trafo__label{fill:var(--weiss);font-size:17px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.yh-trafo__h{fill:var(--weiss);font-size:19px;font-weight:700}
.yh-trafo__sub{fill:var(--weiss);font-size:13px;opacity:.72}

/* ---------- YOUnique Power: gestapelte Mobil-Ansicht ---------- */
.yh-trafo__mobil{display:none;flex-direction:column;align-items:center;gap:18px;max-width:400px;margin:0 auto}
.yh-trafo__mobil-block{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;width:100%}
.yh-trafo__mobil-icon{
  width:64px;height:64px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:rgba(254,252,252,.06);border:1px solid var(--linie);
}
.yh-trafo__mobil-icon img{width:36px;height:36px;object-fit:contain}
.yh-trafo__mobil-icon svg{width:28px;height:28px}
.yh-trafo__mobil-bild{width:150px;height:auto;display:block}
.yh-trafo__mobil-block h3{font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.yh-trafo__mobil-arrow{color:var(--gelb);font-size:1.3rem;line-height:1}
.yh-trafo__mobil-werte{display:flex;flex-direction:column;gap:22px;width:100%}
.yh-trafo__mobil-werte h4{font-size:.98rem;font-weight:700}
.yh-trafo__mobil-werte p{margin-top:4px;font-size:.85rem;color:var(--text-leise)}

.yh-trafo--anim .yh-trafo__before{opacity:0;transform:translateX(-18px);transition:opacity .6s ease,transform .6s ease}
.yh-trafo--anim .yh-trafo__scribble{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.2s ease-out .3s}
.yh-trafo--anim .yh-trafo__arrow{stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset .7s ease-out .6s}
.yh-trafo--anim .yh-trafo__arrow--2{transition-delay:1.5s}
.yh-trafo--anim .yh-trafo__head{opacity:0;transition:opacity .3s ease 1.2s}
.yh-trafo--anim .yh-trafo__head--2{transition-delay:2.1s}
.yh-trafo--anim .yh-trafo__horn{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom center;transition:transform .8s cubic-bezier(.34,1.4,.64,1) .95s}
.yh-trafo--anim .yh-trafo__rays{opacity:0;transition:opacity .5s ease 1.6s}
.yh-trafo--anim .yh-trafo__badge{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.yh-trafo--anim .yh-trafo__badge--1{transition-delay:2.2s}
.yh-trafo--anim .yh-trafo__badge--2{transition-delay:2.4s}
.yh-trafo--anim .yh-trafo__badge--3{transition-delay:2.6s}

.yh-trafo--anim.is-in .yh-trafo__before{opacity:1;transform:none}
.yh-trafo--anim.is-in .yh-trafo__scribble{stroke-dashoffset:0}
.yh-trafo--anim.is-in .yh-trafo__arrow{stroke-dashoffset:0}
.yh-trafo--anim.is-in .yh-trafo__head{opacity:1}
.yh-trafo--anim.is-in .yh-trafo__horn{transform:scaleY(1)}
.yh-trafo--anim.is-in .yh-trafo__rays{opacity:.7}
.yh-trafo--anim.is-in .yh-trafo__badge{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .yh-trafo--anim .yh-trafo__before,
  .yh-trafo--anim .yh-trafo__head,
  .yh-trafo--anim .yh-trafo__rays,
  .yh-trafo--anim .yh-trafo__badge{opacity:1;transform:none}
  .yh-trafo--anim .yh-trafo__scribble,
  .yh-trafo--anim .yh-trafo__arrow{stroke-dashoffset:0}
  .yh-trafo--anim .yh-trafo__horn{transform:none}
}

/* ---------- Use-Case-Referenz mit Foto ---------- */
.yh-usecase__foto{border-radius:20px;overflow:hidden;border:1px solid var(--linie);aspect-ratio:4/5}
.yh-usecase__foto img{width:100%;height:100%;object-fit:cover;display:block}
.yh-usecase__foto--breit{aspect-ratio:16/9}
/* Linie direkt unter dem Foto: kein Innenabstand nach unten,
   die Trennlinie sitzt bündig an der Bildunterkante. */
.yh-benni-abschnitt{padding-bottom:0;border-bottom:1px solid var(--linie)}
.yh-benni{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.yh-benni__text{flex:1 1 360px;padding-bottom:var(--abschnitt);order:1}
.yh-benni__bild{flex:0 0 auto;width:min(260px,42%);align-self:flex-end;line-height:0;order:2}
.yh-benni__bild img{width:100%;height:auto;display:block}
@media (max-width:640px){
  .yh-benni{justify-content:center;text-align:center}
  .yh-benni__text{padding-bottom:0;order:1}
  .yh-benni__bild{width:min(260px,60%);align-self:center;order:2}
}
.yh-usecase--center{text-align:center}
.yh-usecase--center .yh-text{margin-left:auto;margin-right:auto}
.yh-usecase__autor{display:flex;align-items:center;gap:16px;margin-top:24px}
.yh-usecase--center .yh-usecase__autor{justify-content:center}
.yh-usecase__avatar{
  width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid rgba(254,252,252,.2);
}
.yh-usecase__autor strong{display:block;font-weight:500;color:var(--weiss)}
.yh-usecase__autor span{display:block;font-size:.85rem;color:var(--text-sehr-leise)}

/* ---------- Schaubild (BotBucket, Skills, Module) ---------- */
.yh-schaubild{max-width:640px;margin:44px auto 0}
.yh-schaubild__svg{display:block;width:100%;height:auto}
.yh-schaubild__speiche line{stroke:rgba(254,252,252,.16);stroke-width:1.5}
.yh-schaubild__chip rect{transition:transform .3s ease}
.yh-schaubild__chip text{
  text-anchor:middle;dominant-baseline:middle;font-size:15px;font-weight:600;
  font-family:"Montserrat",Arial,sans-serif;
}
.yh-schaubild__chip--skill rect{fill:var(--pink)}
.yh-schaubild__chip--skill text{fill:var(--weiss)}
.yh-schaubild__chip--modul rect{fill:var(--weiss)}
.yh-schaubild__chip--modul text{fill:var(--violett);font-size:13px}
.yh-schaubild__zentrum{
  text-anchor:middle;dominant-baseline:middle;font-size:22px;font-weight:700;
  fill:var(--weiss);font-family:"Montserrat",Arial,sans-serif;
}

/* ---------- Touchpoints (Termin / Logo / Mail) ---------- */
.yh-touchpoints{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.yh-touchpoint{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none}
.yh-touchpoint__icon{
  position:relative;width:76px;height:76px;border-radius:50%;
  background:#FEFCFC;display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease;
}
.yh-touchpoint__icon img{width:42px;height:42px;object-fit:contain}
.yh-touchpoint:hover .yh-touchpoint__icon{transform:translateY(-4px)}
.yh-touchpoint__ping{
  position:absolute;inset:0;border-radius:50%;border:2px solid var(--cyan);
  animation:yh-ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
.yh-touchpoint:last-child .yh-touchpoint__ping{animation-delay:1.2s}
.yh-touchpoint__label{font-size:.85rem;font-weight:500;color:var(--text-leise)}
@keyframes yh-ping{
  0%{transform:scale(1);opacity:.6}
  75%,100%{transform:scale(1.8);opacity:0}
}
.yh-touchpoints__mitte{display:flex;align-items:center}
.yh-touchpoints__linie{width:clamp(32px,7vw,100px);height:2px;background:linear-gradient(90deg,rgba(39,188,213,.5),rgba(39,188,213,.05))}
.yh-touchpoints__mitte .yh-touchpoints__linie:last-child{transform:scaleX(-1)}
.yh-touchpoints__logo{
  width:104px;height:104px;border-radius:50%;flex:0 0 auto;
  background:rgba(254,252,252,.06);border:1px solid var(--linie);
  display:flex;align-items:center;justify-content:center;margin:0 6px;
}
.yh-touchpoints__logo img{width:58px;height:auto}
@media (max-width:640px){
  .yh-touchpoints__linie{display:none}
  .yh-touchpoints{gap:26px}
}

/* Größere Variante, z. B. ganz oben auf der Kontaktseite */
.yh-touchpoints--gross .yh-touchpoint__icon{width:104px;height:104px}
.yh-touchpoints--gross .yh-touchpoint__icon img{width:58px;height:58px}
.yh-touchpoints--gross .yh-touchpoint__label{font-size:1rem}
.yh-touchpoints--gross .yh-touchpoints__logo{width:150px;height:150px}
.yh-touchpoints--gross .yh-touchpoints__logo img{width:86px}
.yh-touchpoints--gross .yh-touchpoints__linie{width:clamp(48px,10vw,140px)}

/* ---------- Raster und Karten ---------- */
.yh-grid{display:grid;gap:18px;margin-top:40px}
.yh-grid--1{grid-template-columns:1fr;max-width:640px;margin-left:auto;margin-right:auto}
.yh-grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.yh-grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.yh-grid--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
/* Karten enden auf gleicher Höhe: Buttons werden nach unten geschoben */
.yh-grid--gleich .yh-card{display:flex;flex-direction:column}
/* Buttons auf gleiche Höhe ziehen, sonst klafft nach dem Ausklappen eine Lücke */
.yh-grid--gleich .yh-card > .yh-actions{margin-top:auto;padding-top:34px}
/* Kästen nur so hoch wie ihr Inhalt, dazu leicht versetzt */
.yh-grid--versetzt{align-items:start}
.yh-grid--versetzt > *:nth-child(even){margin-top:38px}
@media (max-width:900px){
  .yh-grid--versetzt > *:nth-child(even){margin-top:0}
}
.yh-grid--gleich .yh-card .yh-actions{margin-top:auto}

.yh-card{
  display:block;
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:16px;
  padding:26px 24px;
  text-decoration:none;
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.yh-card:hover{transform:translateY(-6px);border-color:rgba(39,188,213,.5);background:rgba(254,252,252,.08)}
.yh-card__title{font-size:1.12rem;font-weight:500;color:var(--cyan);margin-bottom:9px}
.yh-card__text{color:var(--text-leise);font-size:.96rem}
.yh-card__meta{display:block;margin-top:14px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-sehr-leise)}
.yh-card--gross{padding:34px 32px;border-color:rgba(39,188,213,.4);background:rgba(254,252,252,.07)}
.yh-card--gross .yh-card__title{font-size:1.7rem}
.yh-card--pink{background:rgba(251,112,163,.07);border-color:rgba(251,112,163,.3)}
.yh-card--pink:hover{background:rgba(251,112,163,.13);border-color:rgba(251,112,163,.5)}
.yh-card--arrow{position:relative;padding-right:56px}
.yh-card--arrow::after{
  content:"→";position:absolute;right:24px;top:26px;
  font-size:1.3rem;color:var(--cyan);opacity:0;transform:translateX(-6px);
  transition:opacity .25s ease,transform .25s ease;
}
.yh-card--arrow:hover::after{opacity:1;transform:translateX(0)}
.yh-card--gelb{background:rgba(255,208,102,.09);border-color:rgba(255,208,102,.35)}
.yh-card--gelb:hover{transform:none;background:rgba(255,208,102,.09);border-color:rgba(255,208,102,.35)}
.yh-card--bubble{position:relative}
.yh-card--bubble::before{
  content:"";position:absolute;left:32px;bottom:-15px;
  width:0;height:0;border-style:solid;
  border-width:15px 12px 0 12px;
  border-color:var(--linie) transparent transparent transparent;
}
.yh-card--bubble::after{
  content:"";position:absolute;left:32px;bottom:-13px;
  width:0;height:0;border-style:solid;
  border-width:13px 11px 0 11px;
  border-color:var(--flaeche) transparent transparent transparent;
}
.yh-card--hell{background:#FEFCFC;border-color:rgba(43,27,107,.08)}
.yh-card--hell:hover{background:#FEFCFC;border-color:rgba(39,188,213,.5)}
.yh-card--hell .yh-card__title{color:var(--violett)}
.yh-card--hell .yh-card__text{color:rgba(43,27,107,.72)}
.yh-card--hell .yh-liste li{color:rgba(43,27,107,.72)}
.yh-card__icon{width:56px;height:56px;object-fit:contain;display:block;margin-bottom:18px}
.yh-card__icon--gross{width:120px;height:120px}
.yh-card__icon--badge{width:80px;height:80px;border-radius:50%}

.yh-iconlist{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px}
.yh-iconlist__item{display:flex;align-items:flex-start;gap:24px}
.yh-iconlist__icon{flex:0 0 auto;width:56px;height:56px}
@media (max-width:640px){
  .yh-iconlist{grid-template-columns:1fr}
  .yh-iconlist__item{gap:16px}
  .yh-iconlist__icon{width:44px;height:44px}
}
.yh-card__badge{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--violett);background:var(--cyan);border-radius:6px;padding:4px 10px;margin-bottom:14px;
}
.yh-card__img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block;transition:transform .4s ease}
.yh-card__imgwrap{overflow:hidden;border-radius:12px;margin-bottom:18px}
.yh-card:hover .yh-card__img{transform:scale(1.05)}
.yh-card--bot{text-align:center;padding:20px 18px 26px}
.yh-card--bot .yh-card__title{text-transform:uppercase;font-weight:700;font-size:1.02rem;margin-bottom:5px}
.yh-card--bot .yh-card__text{font-size:.88rem;color:var(--text-sehr-leise)}

/* ---------- Anschrägungen statt runder Ecken ---------- */
.yh-card--eck-or{
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 36px) 0,100% 36px,100% 100%,0 100%);
}
.yh-card--eck-ul{
  border-radius:0;
  clip-path:polygon(0 0,100% 0,100% 100%,36px 100%,0 calc(100% - 36px));
}

.yh-branch{height:44px;width:1px;margin:0 auto;background:linear-gradient(to bottom,rgba(39,188,213,.7),rgba(39,188,213,.12))}
/* ---------- PDF-Liste (z. B. Newsletter-Archiv) ---------- */
.yh-pdfliste{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:32px}
.yh-pdf{
  display:flex;align-items:center;gap:18px;
  padding:18px 22px;border-radius:16px;text-decoration:none;
  background:var(--flaeche);border:1px solid var(--linie);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.yh-pdf:hover{transform:translateY(-3px);border-color:rgba(39,188,213,.5);background:rgba(254,252,252,.09)}
.yh-pdf__icon{
  flex:0 0 44px;width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(39,188,213,.12);color:var(--cyan);
}
.yh-pdf__icon svg{width:24px;height:24px}
.yh-pdf__text{flex:1 1 auto;min-width:0}
.yh-pdf__text strong{display:block;color:var(--weiss);font-weight:500}
.yh-pdf__text span{display:block;margin-top:3px;font-size:.85rem;color:var(--text-sehr-leise)}
.yh-pdf__pfeil{flex:0 0 auto;color:var(--cyan);font-size:1.2rem;transition:transform .2s ease}
.yh-pdf:hover .yh-pdf__pfeil{transform:translateX(4px)}

/* Balken quer über die volle Breite, unter einem Kartenraster */
.yh-balken{
  margin-top:18px;padding:26px 28px;border-radius:18px;
  background:var(--flaeche);border:1px solid var(--linie);
}

/* Zwischenüberschrift im Schaubild: größer und in Gelb */
.yh-zwischen{
  display:block;text-align:center;color:var(--gelb);
  font-size:1.15rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
/* Karten mit mittig ausgerichtetem Inhalt inkl. Icon */
.yh-grid--mittig .yh-card{text-align:center}
.yh-grid--mittig .yh-card__icon{margin-left:auto;margin-right:auto}

/* ---------- Unterreiter (Sprungmarken) ---------- */
.yh-subtabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.yh-subtabs__item{
  display:inline-block;padding:.7em 1.4em;border-radius:999px;
  background:rgba(254,252,252,.06);border:1px solid var(--linie);
  color:var(--weiss);text-decoration:none;font-weight:500;font-size:.92rem;
  transition:background .2s ease,border-color .2s ease;
}
.yh-subtabs__item:hover{background:var(--cyan);border-color:var(--cyan);color:var(--violett)}

/* ---------- Unterreiter (Produkt-Tabs) ---------- */
.yh-subnav{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.yh-subnav__btn{
  font-family:inherit;font-size:.95rem;font-weight:500;cursor:pointer;
  padding:12px 28px;border-radius:999px;
  border:1px solid rgba(254,252,252,.16);
  background:rgba(254,252,252,.05);color:var(--text-leise);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.yh-subnav__btn:hover{color:var(--weiss);background:rgba(254,252,252,.10)}
.yh-subnav__btn.is-aktiv{background:var(--cyan);color:var(--violett);border-color:var(--cyan);font-weight:700}

/* ---------- Funkeln-Merkmale ---------- */
.yh-funkeln{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;list-style:none}
.yh-funkeln li{
  display:flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:999px;
  background:rgba(254,252,252,.05);border:1px solid rgba(254,252,252,.14);
  font-size:.92rem;font-weight:500;color:var(--weiss);
}
.yh-funkeln li::before{content:"✨";font-size:.85rem}

/* ---------- Listen ---------- */
.yh-liste{margin-top:20px;list-style:none}
.yh-liste li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--text-leise)}
/* Liste mittig, z. B. in zentrierten Abschnitten */
.yh-liste--mittig{display:inline-block;text-align:left;margin-left:auto;margin-right:auto}
.yh-liste li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--cyan);
}

/* Überschrift, die beim Darüberfahren funkelt (Effekt in site.js) */
.yh-funkel{cursor:default}

/* ---------- Karten-Reihe mit Akzentfarben ----------
   Früher klappte hier beim Hovern eine Karte auf und schob die anderen
   zur Seite. Das liess die Felder zu stark springen, deshalb steht der
   Text jetzt dauerhaft da und es bleibt nur ein dezenter Hover-Effekt. */
.yh-faecher{display:flex;flex-wrap:wrap;gap:18px;margin-top:32px;align-items:stretch}
.yh-faecher > .yh-card{flex:1 1 240px;min-width:0}
.yh-faecher > .yh-card .yh-card__text{margin-top:10px}
@media (hover:hover) and (min-width:901px){
  .yh-faecher > .yh-card{transition:transform .25s ease,background .25s ease,border-color .25s ease}
  .yh-faecher > .yh-card:hover{transform:translateY(-4px)}
}
/* Damit die eingeklappten Karten nicht als leere Kästen dastehen:
   eigene Akzentfarbe, Balken oben und ein großes Icon als Wasserzeichen. */
.yh-faecher > .yh-card{position:relative;overflow:hidden;--akzent:var(--cyan)}
.yh-faecher > .yh-card:nth-child(1){--akzent:var(--cyan)}
.yh-faecher > .yh-card:nth-child(2){--akzent:var(--pink)}
.yh-faecher > .yh-card:nth-child(3){--akzent:var(--gelb)}
.yh-faecher > .yh-card:nth-child(4){--akzent:var(--gruen)}
.yh-faecher > .yh-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--akzent);opacity:.8;
}
.yh-faecher .yh-card__icon{width:44px;height:44px}
.yh-faecher .yh-card__icon [stroke]{stroke:var(--akzent)}
.yh-faecher .yh-card__title{color:var(--akzent)}
.yh-faecher__deko{
  position:absolute;right:-30px;bottom:-26px;
  width:180px;height:180px;pointer-events:none;
  opacity:.08;transition:opacity .4s ease,transform .4s ease;
}
.yh-faecher__deko [stroke]{stroke:var(--akzent)}
.yh-faecher > .yh-card:hover .yh-faecher__deko,
.yh-faecher > .yh-card:focus-within .yh-faecher__deko{
  opacity:.14;transform:scale(1.08) rotate(-6deg);
}

/* ---------- Ausklappbarer Weiterlesen-Block ---------- */
.yh-mehr{margin-top:14px}
.yh-mehr > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-size:.92rem;font-weight:500;color:var(--cyan);
  transition:color .2s ease;
}
.yh-mehr > summary::-webkit-details-marker{display:none}
.yh-mehr > summary::after{
  content:"+";font-size:1.2rem;font-weight:300;line-height:1;
  transition:transform .2s ease;
}
.yh-mehr[open] > summary::after{transform:rotate(45deg)}
.yh-mehr > summary:hover{color:var(--weiss)}
.yh-mehr[open] > summary{margin-bottom:4px}

/* ---------- Zweispalter ---------- */
.yh-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:44px;align-items:center;margin-top:30px}
.yh-faq{margin-top:32px;display:flex;flex-direction:column}
.yh-faq__item{border-top:1px solid var(--linie);padding:20px 0}
.yh-faq__item:last-child{border-bottom:1px solid var(--linie)}
.yh-faq__item summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:1.05rem;font-weight:500;color:var(--weiss);
}
.yh-faq__item summary::-webkit-details-marker{display:none}
.yh-faq__item summary::after{content:"+";font-size:1.4rem;font-weight:300;color:var(--cyan);flex:0 0 auto;transition:transform .2s ease}
.yh-faq__item[open] summary::after{transform:rotate(45deg)}
.yh-faq__item p{margin-top:14px}
.yh-universe{position:relative;max-width:620px;margin:48px auto 0;aspect-ratio:1/1}
.yh-universe__svg{position:absolute;inset:0;width:100%;height:100%}
.yh-universe__ring{fill:none;stroke:rgba(255,208,102,.28);stroke-dasharray:3 7;transform-origin:300px 300px}
.yh-universe__ring--1{animation:yh-universe-spin 90s linear infinite}
.yh-universe__ring--2{stroke:rgba(39,188,213,.26);animation:yh-universe-spin 60s linear infinite reverse}
.yh-universe__ring--3{stroke:rgba(251,112,163,.32);animation:yh-universe-spin 40s linear infinite}
@keyframes yh-universe-spin{to{transform:rotate(360deg)}}
.yh-universe__logo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;object-fit:contain;pointer-events:none;
}
.yh-universe__node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:96px;text-align:center;
}
.yh-universe__node-icon{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  background:rgba(254,252,252,.06);border:1px solid var(--linie);
  display:flex;align-items:center;justify-content:center;
}
.yh-universe__node-icon svg{width:22px;height:22px}
.yh-universe__node-icon img{width:24px;height:24px;object-fit:contain}
.yh-universe__node span:last-child{font-size:.78rem;font-weight:500;color:var(--text-leise);line-height:1.2}
.yh-universe__legende{
  display:flex;flex-wrap:wrap;justify-content:center;gap:24px;
  margin-top:32px;
}
.yh-universe__legende span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.85rem;color:var(--text-leise);
}
.yh-universe__legende i{
  width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto;
}
@media (prefers-reduced-motion:reduce){
  .yh-universe__ring{animation:none}
}
@media (max-width:640px){
  .yh-universe{max-width:100%}
  .yh-universe__logo{width:40px;height:40px}
  .yh-universe__node{width:74px}
  .yh-universe__node-icon{width:36px;height:36px}
  .yh-universe__node-icon svg{width:18px;height:18px}
  .yh-universe__node span:last-child{font-size:.66rem}
}

.yh-bildplatzhalter{
  aspect-ratio:4/3;border-radius:20px;border:1px dashed var(--linie);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
  color:var(--text-sehr-leise);font-size:.85rem;
}

/* ---------- Siegel ---------- */
.yh-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center}
.yh-badge{
  background:none;border:none;padding:0;margin:0;width:100%;font:inherit;color:inherit;
  cursor:pointer;transition:transform .3s ease;
}
.yh-badge:hover{transform:translateY(-6px)}
.yh-badge__img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;transition:transform .4s ease}
.yh-badge:hover .yh-badge__img{transform:scale(1.08)}
.yh-badge__label{display:block;margin-top:10px;font-size:.78rem;color:var(--text-sehr-leise);transition:color .3s ease}
.yh-badge:hover .yh-badge__label{color:var(--cyan)}

/* ---------- Modal (Siegel-Infos) ---------- */
.yh-modal{
  position:relative;border:1px solid var(--linie);border-radius:18px;
  padding:34px 32px;background:var(--violett-tief);color:var(--weiss);
  max-width:440px;width:calc(100% - 48px);
  box-shadow:0 24px 60px rgba(10,4,40,.5);
}
.yh-modal::backdrop{background:rgba(10,4,40,.6);backdrop-filter:blur(4px)}
.yh-modal__close{
  position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--linie);background:rgba(254,252,252,.06);color:var(--weiss);
  font-size:1.2rem;line-height:1;cursor:pointer;
}
.yh-modal__close:hover{background:var(--pink);border-color:var(--pink)}
.yh-modal__titel{font-size:1.3rem;font-weight:500;color:var(--cyan);margin-bottom:14px;padding-right:24px}
.yh-modal__text{color:var(--text-leise);line-height:1.6}

/* ---------- Logo-Marquee ---------- */
.yh-marquee{
  overflow:hidden;position:relative;z-index:1;padding:var(--abschnitt) 0;
  background:#eef1f7;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.yh-marquee__track{display:flex;align-items:stretch;gap:24px;width:max-content;animation:yh-marquee-scroll 34s linear infinite}
.yh-marquee:hover .yh-marquee__track{animation-play-state:paused}
.yh-marquee__card{
  flex:0 0 auto;width:230px;
  background:var(--weiss);border-radius:14px;box-shadow:0 10px 30px rgba(10,4,40,.08);
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;
  align-items:center;column-gap:14px;padding:22px;
}
.yh-marquee__typ{grid-column:1;grid-row:1;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#8a8fa3}
.yh-marquee__name{grid-column:1;grid-row:2;align-self:start;margin-top:4px;font-size:1.05rem;font-weight:700;color:#181433;line-height:1.25}
.yh-marquee__land{grid-column:1;grid-row:3;align-self:end;font-size:.8rem;font-weight:600;color:var(--cyan)}
.yh-marquee__wappen{grid-column:2;grid-row:1 / 4;width:52px;height:52px;object-fit:contain;justify-self:end}
@keyframes yh-marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .yh-marquee__track{animation:none}
}
/* ---------- Fundament (Sicherheit: Datenschutz-Philosophie) ---------- */
.yh-fundament{
  position:relative;overflow:hidden;
  padding:clamp(32px,5vw,64px) clamp(22px,5vw,64px) calc(clamp(32px,5vw,64px) + 42px);
  border-radius:28px;
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(39,188,213,.18),transparent 60%),
    radial-gradient(90% 70% at 100% 0%,rgba(251,112,163,.14),transparent 60%),
    rgba(254,252,252,.04);
  box-shadow:inset 0 0 0 1px rgba(39,188,213,.35),0 30px 60px rgba(10,4,40,.35);
}
.yh-fundament .yh-h2{margin-top:10px}
.yh-fundament__zitat{
  margin:26px 0 0;padding-left:22px;max-width:40ch;
  border-left:3px solid var(--gelb);
  font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.4;font-weight:300;color:var(--weiss);
}
.yh-fundament__pfeiler{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 26px}
.yh-fundament__pfeiler__item{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:999px;
  background:rgba(39,188,213,.14);box-shadow:inset 0 0 0 1px rgba(39,188,213,.55);
  color:var(--weiss);font-weight:600;font-size:.95rem;
}
.yh-fundament__pfeiler__item svg{width:20px;height:20px;color:var(--cyan)}
.yh-fundament .yh-text{max-width:70ch}
.yh-fundament .yh-text + .yh-text{margin-top:14px}
/* Drei Schichten am unteren Rand: das Fundament */
.yh-fundament__schichten{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column}
.yh-fundament__schichten span{display:block;height:10px}
.yh-fundament__schichten span:nth-child(1){margin:0 12%;background:rgba(255,208,102,.55)}
.yh-fundament__schichten span:nth-child(2){margin:0 6%;background:rgba(251,112,163,.6)}
.yh-fundament__schichten span:nth-child(3){background:var(--cyan)}
@media (prefers-reduced-motion:no-preference){
  .yh-js .yh-fundament__schichten span{transform:scaleX(0);transform-origin:center;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
  .yh-js .yh-fundament__schichten span:nth-child(3){transition-delay:.1s}
  .yh-js .yh-fundament__schichten span:nth-child(2){transition-delay:.3s}
  .yh-js .yh-fundament__schichten span:nth-child(1){transition-delay:.5s}
  .yh-js .yh-fundament.is-visible .yh-fundament__schichten span{transform:none}
}

/* ---------- Galaktisch – für alle Verwaltungen: Städte-Kreise (Startseite, Referenzen) ----------
   Positionen so gewählt, dass die Kreise inkl. Aufploppen und Schweben
   mit Abstand innerhalb der Fläche bleiben. */
.yh-cities__stage{
  --k:1;       /* Größenfaktor der Sterne, auf dem Handy größer */
  --rand:6cqw; /* Mindestabstand der Sterne zum Rand */
  position:relative;container-type:inline-size;
  /* volle Fensterbreite, ohne Kasten: die Galaxie läuft bis an den Bildschirmrand */
  width:100vw;margin:24px 0 0 calc(50% - 50vw);
  height:clamp(500px,54vw,880px);
  /* bewusst kein overflow:hidden: das Leuchten läuft weich aus statt an einer Kante zu enden */
  /* randlos: nur weich auslaufende Nebel, kein Kasten */
  background:
    radial-gradient(ellipse 40% 55% at 72% 40%,rgba(39,188,213,.16),transparent 70%),
    radial-gradient(ellipse 38% 50% at 20% 72%,rgba(251,112,163,.13),transparent 70%),
    radial-gradient(ellipse 30% 40% at 50% 55%,rgba(255,208,102,.06),transparent 70%);
}
/* Seite darf durch die volle Breite nicht seitlich scrollen */
main:has(.yh-cities__stage){overflow-x:clip}
/* Sternenhimmel ragt oben und unten über die Fläche hinaus und blendet weich aus */
.yh-cities__stars{
  position:absolute;inset:-14% 0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
.yh-cities__stars i{
  position:absolute;width:var(--z);height:var(--z);border-radius:50%;background:var(--weiss);
  opacity:.25;animation:yh-ci-twinkle var(--tl,3s) ease-in-out infinite;animation-delay:var(--td);
}
@keyframes yh-ci-twinkle{0%,100%{opacity:.15}50%{opacity:.8}}
/* Einzelne Sterne leuchten farbig auf, mit kurzem Lichtkreuz */
.yh-cities__stars i.is-hell{
  background:var(--sc);
  box-shadow:0 0 6px 1px var(--sc),0 0 16px 3px color-mix(in srgb,var(--sc) 45%,transparent);
  animation-name:yh-ci-aufleuchten;
}
.yh-cities__stars i.is-hell::before{
  content:"";position:absolute;left:50%;top:50%;width:900%;height:900%;transform:translate(-50%,-50%);
  background:
    linear-gradient(90deg,transparent,var(--sc),transparent) center/100% 1px no-repeat,
    linear-gradient(0deg,transparent,var(--sc),transparent) center/1px 100% no-repeat;
}
@keyframes yh-ci-aufleuchten{
  0%,100%{opacity:0;transform:scale(.4)}
  45%{opacity:1;transform:scale(1.2)}
  60%{opacity:.85;transform:scale(1)}
}
/* --l/--t: Wunschposition in %, --s: Durchmesser in % der Breite (ohne Einheit).
   clamp() hält jeden Stern samt Leuchten bei jeder Breite mit Abstand im Bild. */
.yh-cities__bubble{
  /* wächst mit der Breite, aber nicht über die Größe bei ca. 1300px hinaus */
  --r:min(calc(var(--s) * var(--k) * .5cqw),calc(var(--s) * var(--k) * 6.5px));
  position:absolute;
  left:clamp(calc(var(--r) + var(--rand)),calc(var(--l) * 1cqw),calc(100cqw - var(--r) - var(--rand)));
  top:clamp(calc(var(--r) + 5cqw),calc(var(--t) * 1%),calc(100% - var(--r) - 5cqw));
  width:calc(var(--r) * 2);aspect-ratio:1;
  margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;
  transform:translate(-50%,-50%);opacity:0;z-index:1;
  animation:yh-ci-pop .6s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(.6s + var(--d));
}
/* Stern: heller Kern, farbiger Körper, weicher Halo */
.yh-cities__bubble span{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#fff 0%,color-mix(in srgb,var(--c) 55%,#fff) 28%,var(--c) 62%,color-mix(in srgb,var(--c) 70%,var(--violett)) 100%);
  color:var(--violett);
  display:grid;place-items:center;
  font-weight:700;font-size:clamp(.62rem,2cqw,1.35rem);
  box-shadow:0 0 18px 2px color-mix(in srgb,var(--c) 75%,transparent),0 0 60px 12px color-mix(in srgb,var(--c) 30%,transparent);
  animation:yh-ci-float var(--f) ease-in-out infinite,yh-ci-leuchten 3.6s ease-in-out infinite;
  animation-delay:var(--d);
  transition:box-shadow .25s ease,filter .25s ease;
}
/* Lichtstrahlen: vierzackiges Funkeln hinter dem Stern */
.yh-cities__bubble::before{
  content:"";position:absolute;left:50%;top:50%;width:160%;height:160%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--c) 70%,#fff) 50%,transparent 100%) center/100% 2px no-repeat,
    linear-gradient(0deg,transparent 0%,color-mix(in srgb,var(--c) 70%,#fff) 50%,transparent 100%) center/2px 100% no-repeat;
  opacity:.55;
  animation:yh-ci-strahlen 4s ease-in-out infinite;animation-delay:var(--d);
}
button.yh-cities__bubble{cursor:pointer}
button.yh-cities__bubble:hover span,
button.yh-cities__bubble:focus-visible span,
button.yh-cities__bubble.is-aktiv span{
  box-shadow:0 0 0 3px rgba(254,252,252,.9),0 0 30px 6px var(--c),0 0 90px 24px color-mix(in srgb,var(--c) 40%,transparent);
  filter:brightness(1.08);
}
/* Stern zur gerade gezeigten Referenz in der Mitte */
.yh-cities__bubble.is-genannt span{
  box-shadow:0 0 0 3px rgba(254,252,252,.9),0 0 30px 6px var(--c),0 0 90px 24px color-mix(in srgb,var(--c) 40%,transparent);
  filter:brightness(1.08);
}
.yh-cities__bubble.is-genannt::before,
button.yh-cities__bubble:hover::before,
button.yh-cities__bubble.is-aktiv::before{opacity:1}
button.yh-cities__bubble:focus-visible{outline:none}
@keyframes yh-ci-leuchten{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
@keyframes yh-ci-strahlen{0%,100%{transform:translate(-50%,-50%) rotate(0) scale(.85);opacity:.35}50%{transform:translate(-50%,-50%) rotate(20deg) scale(1.05);opacity:.7}}
@keyframes yh-ci-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes yh-ci-float{0%,100%{transform:translate(0,0)}33%{transform:translate(1.5%,-4%)}66%{transform:translate(-2%,2.5%)}}
.yh-cities__center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;
  text-align:center;color:var(--weiss);z-index:2;pointer-events:none;
}
.yh-cities__center > *{grid-area:1/1}
/* Rund 90 Sterne als Zeichen für die vielen Verwaltungen: sie poppen
   immer schneller nacheinander auf und funkeln dann weiter – bewusst ohne Zahl */
.yh-cities__neunzig{position:absolute;inset:0;pointer-events:none;z-index:0}
.yh-cities__neunzig i{
  position:absolute;width:var(--z);aspect-ratio:1;transform:translate(-50%,-50%);
  background:var(--sc);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 3px var(--sc)) drop-shadow(0 0 8px color-mix(in srgb,var(--sc) 60%,transparent));
  opacity:0;
  animation:yh-ci-stern-pop .7s cubic-bezier(.3,1.6,.5,1) var(--sd) both,yh-ci-stern-funkeln var(--tl) ease-in-out calc(var(--sd) + .7s) infinite;
}
@keyframes yh-ci-stern-pop{
  from{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(-45deg)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
}
@keyframes yh-ci-stern-funkeln{
  0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.45;transform:translate(-50%,-50%) scale(.75)}
}
/* Botschaft, die aus dem Glitzern auftaucht */
.yh-cities__claim{display:block;animation:yh-ci-auftauchen 1.1s cubic-bezier(.2,.8,.2,1) 2.9s both}
.yh-cities__wort{
  display:block;font-weight:700;font-size:clamp(2rem,8.5cqw,5rem);line-height:1.05;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--gelb),#fff,var(--cyan));
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--pink) 45%,transparent));
  animation:yh-grow-schimmer 6s linear infinite;
}
@keyframes yh-ci-auftauchen{
  from{opacity:0;transform:scale(1.4);filter:blur(14px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.yh-cities__label{display:block;margin-top:.45em;font-weight:400;letter-spacing:.08em;font-size:clamp(.9rem,3.2cqw,2rem);line-height:1.1;text-transform:uppercase}
/* Nach "Galaktisch" wechseln kurze Sätze aus den Referenzen in der Mitte.
   Alles liegt übereinander im selben Rasterfeld und wird nur überblendet. */
.yh-cities__center{width:min(64cqw,720px);transition:opacity .4s ease}
.yh-cities__claim{display:grid;place-items:center}
.yh-cities__galaktisch,.yh-cities__satz{grid-area:1/1;transition:opacity .7s ease,transform .7s ease,filter .7s ease}
.yh-cities__saetze{display:grid;grid-area:1/1;place-items:center}
.yh-cities__satz{display:block;opacity:0;transform:scale(.92);filter:blur(8px)}
.yh-cities__satz.is-aktiv{opacity:1;transform:none;filter:none}
.yh-cities__center.is-satz .yh-cities__galaktisch{opacity:0;transform:scale(1.15);filter:blur(10px)}
.yh-cities__satz q{
  display:block;quotes:"„" "“";font-weight:300;line-height:1.25;
  font-size:clamp(1.15rem,3cqw,2.2rem);text-wrap:balance;
  text-shadow:0 2px 24px rgba(27,15,77,.8);
}
.yh-cities__satz q::before,.yh-cities__satz q::after{color:var(--cyan)}
.yh-cities__satz cite{
  display:block;margin-top:1.2em;font-style:normal;font-weight:400;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
}
.yh-cities__stage.has-zitat .yh-cities__center{opacity:0}
/* Milchstraße unter der Maus und Einladung am unteren Rand */
.yh-cities__stage{margin-bottom:clamp(110px,10vw,150px)}
.yh-cities__milchstrasse{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.yh-cities__einladung{
  position:absolute;left:0;right:0;top:calc(100% + clamp(28px,3vw,44px));z-index:2;margin:0;padding:0 var(--rand);text-align:center;pointer-events:none;
  font-weight:300;font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.35;letter-spacing:.01em;text-wrap:balance;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--gelb),var(--cyan));background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease;
  animation:yh-grow-schimmer 8s linear infinite;
}
.yh-cities__stage.is-hover .yh-cities__einladung{opacity:1;transform:none}
/* Animationen starten erst, wenn die Fläche ins Bild scrollt */
.yh-js .yh-cities__stage:not(.is-visible) *,
.yh-js .yh-cities__stage:not(.is-visible) *::before,
.yh-js .yh-cities__stage:not(.is-visible) *::after{animation-play-state:paused}
/* Referenz beim Hover über eine Stadt: Karte mittig, Sterne bleiben sichtbar */
.yh-cities__zitat{
  position:absolute;inset:0;z-index:3;
  display:flex;justify-content:center;align-items:center;padding:4cqw;
  background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(27,15,77,.7),transparent 75%);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.yh-cities__zitat.is-offen{opacity:1;visibility:visible;transition:opacity .3s ease}
.yh-cities__zitatkarte{
  width:min(660px,82cqw);max-height:100%;overflow-y:auto;
  padding:clamp(18px,3.4cqw,36px) clamp(18px,4cqw,44px);border-radius:20px;text-align:center;
  background:rgba(27,15,77,.94);
  border:1px solid color-mix(in srgb,var(--zc,var(--cyan)) 60%,transparent);
  box-shadow:0 0 40px color-mix(in srgb,var(--zc,var(--cyan)) 30%,transparent),0 20px 50px rgba(10,4,40,.5);
  transform:scale(.96);transition:transform .3s ease;
}
.yh-cities__zitat.is-offen .yh-cities__zitatkarte{transform:none}
.yh-cities__zitat .yh-testi__quote{font-size:clamp(.85rem,1.8cqw,1.08rem);line-height:1.55}
.yh-cities__zitat .yh-testi__fuss{margin-top:18px;justify-content:center;text-align:left}
.yh-cities__zitat .yh-testi__autor{margin-top:16px}
.yh-cities__zitat .yh-testi__fuss .yh-testi__autor{margin-top:0}
/* Touch: antippen öffnet, erneutes Antippen der Fläche schließt */
@media (hover:none){
  .yh-cities__zitat.is-offen{pointer-events:auto}
}
@media (max-width:640px){
  .yh-cities__stage{height:auto;aspect-ratio:3/4;--k:1.75;--rand:9cqw}
}
@media (prefers-reduced-motion:reduce){
  .yh-cities__stars i,.yh-cities__bubble,.yh-cities__bubble span,.yh-cities__bubble::before,.yh-cities__claim,.yh-cities__wort{animation:none;opacity:1}
  .yh-cities__neunzig i{animation:none;opacity:.9}
  .yh-cities__bubble::before{opacity:.55}
  .yh-cities__stars i{opacity:.4}
}

/* ---------- Laufband "Let's Grow Together" ---------- */
.yh-grow{
  overflow:hidden;position:relative;z-index:1;
  padding:clamp(28px,4vw,48px) 0;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.yh-grow__track{
  display:flex;align-items:center;gap:clamp(24px,3vw,44px);width:max-content;
  font-size:clamp(2.2rem,6vw,4.6rem);font-weight:700;line-height:1.1;white-space:nowrap;
  animation:yh-marquee-scroll 30s linear infinite;
}
.yh-grow__track span:not(.yh-grow__stern){
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--gelb),var(--cyan));
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:yh-grow-schimmer 8s linear infinite;
}
.yh-grow__stern{color:var(--gelb);font-size:.55em;animation:yh-grow-funkeln 2.4s ease-in-out infinite}
.yh-grow:hover .yh-grow__track{animation-play-state:paused}
@keyframes yh-grow-schimmer{to{background-position:300% 0}}
@keyframes yh-grow-funkeln{0%,100%{opacity:.45;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){
  .yh-grow__track,.yh-grow__track span,.yh-grow__stern{animation:none}
}

@media (max-width:640px){
  .yh-marquee__card{width:190px;padding:16px}
  .yh-marquee__wappen{width:40px;height:40px}
}

/* ---------- Schrittfolge ---------- */
.yh-steps{margin-top:44px}
.yh-step{position:relative;display:grid;grid-template-columns:68px 1fr;gap:0 24px;padding-bottom:40px}
.yh-step:last-child{padding-bottom:0}
.yh-step::before{content:"";position:absolute;left:33px;top:68px;bottom:0;width:1px;background:linear-gradient(to bottom,rgba(39,188,213,.5),rgba(39,188,213,.05))}
.yh-step:last-child::before{display:none}
.yh-step__num{
  width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:700;background:rgba(254,252,252,.06);box-shadow:inset 0 0 0 2px var(--cyan);
}
.yh-step:nth-child(2) .yh-step__num{box-shadow:inset 0 0 0 2px var(--pink)}
.yh-step:nth-child(3) .yh-step__num{box-shadow:inset 0 0 0 2px var(--gelb)}
.yh-step:nth-child(4) .yh-step__num{box-shadow:inset 0 0 0 2px var(--gruen)}
.yh-step__body{padding-top:10px}

.yh-steps--row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.yh-steps--row .yh-step{
  grid-template-columns:1fr;text-align:center;padding:0 24px;
  border-left:1px solid var(--linie);
}
.yh-steps--row .yh-step:first-child{border-left:none}
/* Waagerechte Linie, die die Nummernkreise verbindet */
.yh-steps--row .yh-step::before{
  content:"";display:block;position:absolute;top:34px;left:0;right:0;height:1px;
  background:rgba(39,188,213,.45);z-index:0;
}
.yh-steps--row .yh-step:first-child::before{left:50%}
.yh-steps--row .yh-step:last-child::before{right:50%}
.yh-steps--row .yh-step__num{
  margin:0 auto;position:relative;z-index:1;
  /* deckend, damit die Verbindungslinie nicht durch den Kreis läuft */
  background:linear-gradient(rgba(254,252,252,.06),rgba(254,252,252,.06)),var(--violett);
}
.yh-steps--row .yh-step__body{padding-top:18px}
/* Platz für zwei Zeilen, damit alle Überschriften gleich hoch sind
   und die Texte darunter auf einer Linie beginnen. */
.yh-steps--row .yh-step__body .yh-h3{min-height:2.7em}
/* Mittlere Breite: 2 × 2 statt 3 + 1, Linie jeweils innerhalb einer Reihe */
@media (max-width:1024px) and (min-width:641px){
  .yh-steps--row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .yh-steps--row .yh-step:nth-child(odd){border-left:none}
  .yh-steps--row .yh-step:nth-child(odd)::before{left:50%;right:0}
  .yh-steps--row .yh-step:nth-child(even)::before{left:0;right:50%}
}

/* ---------- Kennzahlen ---------- */
.yh-zahl{font-size:clamp(2rem,4vw,2.9rem);font-weight:700;color:var(--cyan);line-height:1}
.yh-zahl + p{margin-top:10px;color:var(--text-leise);font-size:.95rem}

/* ---------- Slider ---------- */
.yh-slider__frame{position:relative;border-radius:18px;overflow:hidden;background:rgba(0,0,0,.25)}
.yh-slider__track{display:flex;transition:transform .5s ease}
.yh-slide{position:relative;min-width:100%;aspect-ratio:16/8}
.yh-slide img{width:100%;height:100%;object-fit:cover;display:block}
/* Slider-Variante für Text-Karten statt Bilder */
.yh-slider--karten .yh-slider__frame{background:var(--flaeche);border:1px solid var(--linie)}
.yh-slider--karten .yh-slide{aspect-ratio:auto;display:flex}
.yh-merkmal{padding:40px clamp(44px,6vw,72px);width:100%}
.yh-merkmal .yh-h3{margin-top:14px}
.yh-merkmal .yh-liste{margin-top:16px}
.yh-slide__caption{
  position:absolute;left:0;right:0;bottom:0;padding:24px 26px;
  background:linear-gradient(to top,rgba(0,0,0,.8),transparent);
  font-size:.98rem;font-weight:500;letter-spacing:.02em;
}
.yh-slider__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid var(--linie);color:var(--weiss);font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.yh-slider__nav:hover{background:var(--pink);border-color:var(--pink)}
.yh-slider__nav--prev{left:14px}
.yh-slider__nav--next{right:14px}
.yh-slider__dots{display:flex;gap:9px;justify-content:center;margin-top:20px}
.yh-slider__dot{width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;background:rgba(254,252,252,.3)}
.yh-slider__dot[aria-current="true"]{background:var(--cyan)}

/* ---------- Abschluss-Bildstrecke (mit Anschrägung) ---------- */
.yh-abschluss{position:relative;z-index:1;margin-top:20px}
.yh-abschluss__bild{
  border-radius:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - clamp(40px,6vw,90px)),0 100%);
}
.yh-abschluss .yh-slider__dots{margin-top:24px}

/* ---------- Referenzen-Slider (Karten mit Peek-Effekt) ---------- */
/* Referenzen als gestapelte Liste (alle untereinander) */
.yh-testi-liste{display:flex;flex-direction:column;gap:20px;margin-top:40px}
.yh-testi-liste .yh-testi__card{
  flex:none;opacity:1;transform:none;cursor:default;
  scroll-snap-align:none;transition:border-color .3s ease;
}
.yh-testi-liste .yh-testi__card:hover{border-color:rgba(39,188,213,.45)}

/* Referenzen als Chatverlauf: Sprechblasen abwechselnd links/rechts,
   max. 3/4 breit, gleiten beim Scrollen von ihrer Seite herein */
.yh-testi-liste--chat{gap:26px;overflow-x:clip;padding:4px 10px}
.yh-testi-liste--chat .yh-testi__card{
  position:relative;width:fit-content;max-width:75%;
  align-self:flex-start;border-radius:24px 24px 24px 6px;
}
.yh-testi-liste--chat .yh-testi__card:nth-child(even),
.yh-testi-liste--chat .yh-testi__card--rechts{
  align-self:flex-end;border-radius:24px 24px 6px 24px;
  background:rgba(39,188,213,.12);border-color:rgba(39,188,213,.35);
}
.yh-testi-liste--chat .yh-testi__card:nth-child(even) .yh-testi__fuss,
.yh-testi-liste--chat .yh-testi__card--rechts .yh-testi__fuss{flex-direction:row-reverse;text-align:right}
.yh-js .yh-testi-liste--chat .yh-testi__card.yh-reveal{
  opacity:0;transform:translateX(-70px) scale(.96);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),border-color .3s ease;
}
.yh-js .yh-testi-liste--chat .yh-testi__card.yh-reveal:nth-child(even),
.yh-js .yh-testi-liste--chat .yh-testi__card--rechts.yh-reveal{transform:translateX(70px) scale(.96)}
.yh-js .yh-testi-liste--chat .yh-testi__card.yh-reveal.is-visible{opacity:1;transform:none}
/* Einzelne Stimmen verteilt zwischen den Abschnitten der Startseite */
.yh-testi-einzel{padding-top:clamp(8px,2vw,24px);padding-bottom:clamp(32px,5vw,64px)}
.yh-testi-einzel .yh-testi-liste{margin-top:0}
@media (max-width:640px){
  .yh-testi-liste--chat .yh-testi__card{max-width:92%}
}
@media (prefers-reduced-motion:reduce){
  .yh-js .yh-testi-liste--chat .yh-testi__card.yh-reveal,
  .yh-js .yh-testi-liste--chat .yh-testi__card.yh-reveal:nth-child(even),
  .yh-js .yh-testi-liste--chat .yh-testi__card--rechts.yh-reveal{opacity:1;transform:none}
}

.yh-testi{margin-top:40px}
.yh-testi__frame{position:relative}
.yh-testi__track{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px var(--rand) 26px;scroll-behavior:smooth;
  -ms-overflow-style:none;scrollbar-width:none;
}
.yh-testi__track::-webkit-scrollbar{display:none}
.yh-testi__card{
  scroll-snap-align:center;flex:0 0 84%;cursor:pointer;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:20px;
  padding:32px 30px;
  opacity:.4;transform:scale(.94);
  transition:opacity .35s ease,transform .35s ease,border-color .35s ease;
}
.yh-testi__card.is-aktiv{opacity:1;transform:scale(1);border-color:rgba(39,188,213,.45);cursor:default}
.yh-testi__quote{font-size:1.02rem;line-height:1.6;color:var(--weiss)}
.yh-testi__quote::before{content:"“";color:var(--cyan)}
.yh-testi__quote::after{content:"”";color:var(--cyan)}
.yh-testi__autor{margin-top:22px;font-weight:500;color:var(--cyan);font-size:.95rem}
.yh-testi__autor span{display:block;margin-top:3px;font-weight:400;font-size:.82rem;color:var(--text-sehr-leise)}
.yh-testi__fuss{display:flex;align-items:center;gap:14px;margin-top:22px}
.yh-testi__fuss .yh-testi__autor{margin-top:0}
/* Stadtwappen rund gerahmt */
.yh-testi__logo{
  width:48px;height:48px;flex:0 0 auto;border-radius:50%;
  object-fit:contain;background:var(--weiss);padding:5px;
}
.yh-testi__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid var(--linie);color:var(--weiss);font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.yh-testi__nav:hover{background:var(--pink);border-color:var(--pink)}
.yh-testi__nav--prev{left:-4px}
.yh-testi__nav--next{right:-4px}
.yh-testi__dots{display:flex;gap:9px;justify-content:center;margin-top:8px}
.yh-testi__dot{width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;background:rgba(254,252,252,.3)}
.yh-testi__dot[aria-current="true"]{background:var(--cyan)}
@media (min-width:900px){
  .yh-testi__track{padding-left:16%;padding-right:16%}
  .yh-testi__card{flex:0 0 68%}
  .yh-testi__nav--prev{left:16px}
  .yh-testi__nav--next{right:16px}
}

/* ---------- Abschluss-Aufruf ---------- */
.yh-cta{
  margin:0 auto;max-width:var(--max);
  background:linear-gradient(120deg,rgba(39,188,213,.16),rgba(251,112,163,.14));
  border:1px solid rgba(39,188,213,.35);
  border-radius:22px;padding:52px 40px;text-align:center;
  /* Lange Wörter (z. B. WISSENSMANAGEMENT) dürfen auf schmalen Displays umbrechen */
  overflow-wrap:break-word;hyphens:auto;
}
.yh-cta .yh-actions{justify-content:center}

/* ---------- Newsletter ---------- */
.yh-newsletter{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  margin-top:30px;
}
.yh-newsletter__reihe{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  width:100%;
}
.yh-newsletter__input{
  flex:1 1 280px;max-width:360px;
  padding:.8em 1.1em;border-radius:12px;
  border:1px solid var(--linie);background:rgba(254,252,252,.06);
  color:var(--weiss);font-family:inherit;font-size:.95rem;
}
.yh-newsletter__input::placeholder{color:var(--text-sehr-leise)}
.yh-newsletter__input:focus-visible{outline:none;border-color:var(--cyan)}
/* Zustimmung zum Datenschutz */
.yh-newsletter__zustimmung{
  display:flex;align-items:flex-start;gap:12px;
  max-width:62ch;text-align:left;cursor:pointer;
}
.yh-newsletter__haken{
  flex:0 0 auto;width:20px;height:20px;margin-top:2px;
  accent-color:var(--cyan);cursor:pointer;
}
.yh-newsletter__zustimmung span{
  font-size:.84rem;line-height:1.6;color:var(--text-sehr-leise);
}
.yh-newsletter__zustimmung a{color:var(--cyan);text-decoration:underline}
/* Rückmeldung nach dem Absenden */
.yh-newsletter__meldung{
  margin:0;min-height:1.2em;
  font-size:.9rem;line-height:1.5;font-weight:500;
  text-align:center;max-width:56ch;
}
.yh-newsletter__meldung:empty{display:none}
.yh-newsletter__meldung--fehler{color:var(--pink)}
.yh-newsletter__meldung--ok{color:var(--cyan)}
/* Feld, das der Prüfung nicht standgehalten hat */
.yh-newsletter.ist-fehlerhaft .yh-newsletter__input:invalid,
.yh-newsletter__input.ist-fehlerhaft{border-color:var(--pink)}
.yh-newsletter__zustimmung.ist-fehlerhaft span{color:var(--pink)}

/* ---------- Rechtstexte ---------- */
.yh-legal{padding-top:var(--abschnitt);padding-bottom:var(--abschnitt);max-width:70ch}
.yh-legal h2{font-size:1.15rem;font-weight:700;margin:36px 0 10px}
.yh-legal p,.yh-legal li{color:var(--text-leise)}
.yh-legal p{margin-bottom:12px}
.yh-legal ul{margin:0 0 12px 20px}
.yh-legal a{color:var(--cyan)}
.yh-legal a.yh-btn{color:var(--weiss)}
.yh-legal .yh-back{margin-top:40px}

/* ---------- Fußbereich ---------- */
.yh-footer{border-top:1px solid var(--linie);padding:var(--abschnitt) 0 40px;margin-top:var(--abschnitt)}
.yh-footer__claim{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:500;color:var(--weiss);max-width:36ch;margin-bottom:38px}
.yh-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px}
.yh-footer h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-sehr-leise);margin-bottom:12px;font-weight:700}
.yh-footer a{display:block;text-decoration:none;color:var(--text-leise);font-size:.92rem;margin-bottom:8px}
.yh-footer a:hover{color:var(--cyan)}
.yh-footer__adresse{color:var(--text-leise);font-size:.92rem;line-height:1.7}
.yh-footer__social{display:flex;gap:10px;margin-top:16px}
.yh-footer__social a{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;margin-bottom:0;
  background:rgba(254,252,252,.06);border:1px solid rgba(254,252,252,.14);
  color:var(--text-leise);transition:background .2s ease,color .2s ease;
}
.yh-footer__social a:hover{background:var(--cyan);color:var(--violett)}
.yh-footer__social svg{width:18px;height:18px}
.yh-footer__siegel{list-style:none}
.yh-footer__siegel li{display:flex;align-items:center;gap:10px;color:var(--text-leise);font-size:.92rem;margin-bottom:12px}
.yh-footer__siegel svg{flex:0 0 auto;color:var(--cyan)}
.yh-footer__unten{margin-top:34px;padding-top:20px;border-top:1px solid var(--linie);font-size:.84rem;color:var(--text-sehr-leise)}
.yh-footer__unten a{display:inline;margin-bottom:0;color:var(--text-sehr-leise)}
.yh-footer__unten a:hover{color:var(--cyan)}

/* ---------- Vorstellung: das Produkt spricht selbst ---------- */
.yh-hallo{
  display:flex;align-items:flex-start;gap:20px;
  margin-top:26px;
  padding:24px 26px;
  background:rgba(254,252,252,.06);
  border:1px solid var(--linie);
  border-radius:24px 24px 24px 6px;
}
.yh-hallo__avatar{
  flex:0 0 62px;width:62px;height:62px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(254,252,252,.08);
  box-shadow:inset 0 0 0 2px var(--cyan);
}
.yh-hallo__avatar img{width:38px;height:38px;object-fit:contain}
.yh-hallo__text{margin:0;font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.65;font-weight:300}
.yh-hallo__text strong{font-weight:600;color:var(--cyan)}
.yh-hallo--pink .yh-hallo__avatar{box-shadow:inset 0 0 0 2px var(--pink)}
.yh-hallo--pink .yh-hallo__text strong{color:var(--pink)}
/* Variante für Favicons: das Bild füllt den Kreis, der Ring liegt außen.
   Muss nach den --pink-Regeln stehen, sonst gewinnt deren inset-Ring. */
.yh-hallo__avatar--voll,
.yh-hallo--pink .yh-hallo__avatar--voll{
  background:none;overflow:hidden;
  box-shadow:0 0 0 2px var(--cyan);
}
.yh-hallo--pink .yh-hallo__avatar--voll{box-shadow:0 0 0 2px var(--pink)}
.yh-hallo__avatar--voll img{width:100%;height:100%;object-fit:cover}

/* ---------- Prozesskreis: fünf Stationen auf einer Kreisbahn ---------- */
.yh-kreis{
  position:relative;
  width:min(100%,780px);aspect-ratio:1;
  margin:40px auto 0;
}
.yh-kreis__bahn{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.yh-kreis__mitte{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:32%;text-align:center;
  margin:0;font-size:.92rem;line-height:1.55;color:var(--text-sehr-leise);
}
.yh-kreis__schritt{
  position:absolute;transform:translate(-50%,-50%);
  width:27%;min-width:150px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.yh-kreis__ring{
  position:relative;
  width:92px;height:92px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--pink);
}
.yh-kreis__ring svg{
  width:46px;height:46px;fill:none;
  stroke:var(--weiss);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.yh-kreis__nr{
  position:absolute;right:-2px;top:-2px;
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--violett-tief);box-shadow:0 0 0 2px var(--gelb);
  color:var(--gelb);font-size:.76rem;font-weight:700;
}
.yh-kreis__titel{
  margin:16px 0 5px;font-size:1rem;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;
}
.yh-kreis__text{margin:0;font-size:.88rem;line-height:1.5;color:var(--text-leise)}
/* Fünf Stationen im 72-Grad-Abstand, Radius 36 % des Containers */
.yh-kreis__schritt--s1{left:50%;top:14%}
.yh-kreis__schritt--s2{left:84.24%;top:38.88%}
.yh-kreis__schritt--s3{left:71.16%;top:79.12%}
.yh-kreis__schritt--s4{left:28.84%;top:79.12%}
.yh-kreis__schritt--s5{left:15.76%;top:38.88%}
.yh-kreis__schritt--s2 .yh-kreis__ring,
.yh-kreis__schritt--s4 .yh-kreis__ring{background:var(--cyan)}

@media (prefers-reduced-motion:no-preference){
  .yh-kreis__ring{animation:yh-kreis-puls 10s infinite}
  .yh-kreis__ring::after{
    content:"";position:absolute;inset:-9px;border-radius:50%;
    border:3px solid var(--gelb);opacity:0;transform:scale(.85);
    animation:yh-kreis-welle 10s infinite;
  }
  .yh-kreis__schritt--s1 .yh-kreis__ring,.yh-kreis__schritt--s1 .yh-kreis__ring::after{animation-delay:0s}
  .yh-kreis__schritt--s2 .yh-kreis__ring,.yh-kreis__schritt--s2 .yh-kreis__ring::after{animation-delay:2s}
  .yh-kreis__schritt--s3 .yh-kreis__ring,.yh-kreis__schritt--s3 .yh-kreis__ring::after{animation-delay:4s}
  .yh-kreis__schritt--s4 .yh-kreis__ring,.yh-kreis__schritt--s4 .yh-kreis__ring::after{animation-delay:6s}
  .yh-kreis__schritt--s5 .yh-kreis__ring,.yh-kreis__schritt--s5 .yh-kreis__ring::after{animation-delay:8s}
  .yh-kreis__fluss{animation:yh-kreis-fluss 1s linear infinite}
}
@keyframes yh-kreis-puls{
  0%,20%,100%{transform:scale(1)}
  6%,14%{transform:scale(1.08)}
}
@keyframes yh-kreis-welle{
  0%{opacity:0;transform:scale(.85)}
  6%,14%{opacity:1;transform:scale(1)}
  20%,100%{opacity:0;transform:scale(1.15)}
}
@keyframes yh-kreis-fluss{to{stroke-dashoffset:-14}}

/* Mobil wird aus dem Kreis eine gerade Kette */
@media (max-width:760px){
  .yh-kreis{
    aspect-ratio:auto;width:100%;margin-top:32px;
    display:flex;flex-direction:column;align-items:center;
  }
  .yh-kreis__bahn{display:none}
  .yh-kreis__mitte{
    position:static;transform:none;
    width:auto;max-width:46ch;margin-bottom:28px;
  }
  .yh-kreis__schritt{position:static;transform:none;width:100%;max-width:340px;min-width:0}
  .yh-kreis__schritt:not(:last-child)::after{
    content:"";width:2px;height:36px;margin:18px 0;
    background:linear-gradient(var(--linie),var(--cyan));
  }
}

/* ---------- Orchidee: BotBucket in der Mitte, Module drumherum ---------- */
.yh-orchidee{position:relative;width:min(100%,820px);aspect-ratio:1;margin:44px auto 0}
.yh-orchidee__linien{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.yh-orchidee__mitte{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:28%;aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:16px;text-align:center;
  background:rgba(251,112,163,.12);
  box-shadow:0 0 0 2px var(--pink),0 0 56px rgba(251,112,163,.22);
}
.yh-orchidee__mitte img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.yh-orchidee__mitte strong{font-size:clamp(.92rem,1.5vw,1.08rem);font-weight:600;letter-spacing:.02em}
.yh-orchidee__blatt{
  position:absolute;transform:translate(-50%,-50%);
  width:29%;min-width:142px;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:16px 12px;text-align:center;text-decoration:none;color:inherit;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:18px;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.yh-orchidee__blatt:hover,.yh-orchidee__blatt:focus-visible{
  transform:translate(-50%,-50%) scale(1.06);
  border-color:rgba(39,188,213,.55);background:rgba(254,252,252,.09);
}
.yh-orchidee__blatt svg{width:30px;height:30px}
.yh-orchidee__blatt span{font-size:.92rem;font-weight:500;line-height:1.35}
/* Sechs Blätter im 60-Grad-Abstand, Radius 38 % des Containers */
.yh-orchidee__blatt--p1{left:50%;top:12%}
.yh-orchidee__blatt--p2{left:82.9%;top:31%}
.yh-orchidee__blatt--p3{left:82.9%;top:69%}
.yh-orchidee__blatt--p4{left:50%;top:88%}
.yh-orchidee__blatt--p5{left:17.1%;top:69%}
.yh-orchidee__blatt--p6{left:17.1%;top:31%}
/* Gestapelt: aus dem Kranz wird ein Raster */
@media (max-width:900px){
  .yh-orchidee{
    aspect-ratio:auto;width:100%;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px;
  }
  .yh-orchidee__linien{display:none}
  .yh-orchidee__mitte{
    position:static;transform:none;
    width:auto;aspect-ratio:auto;grid-column:1/-1;
    border-radius:20px;padding:24px;
  }
  .yh-orchidee__blatt{position:static;transform:none;width:auto;min-width:0}
  .yh-orchidee__blatt:hover,.yh-orchidee__blatt:focus-visible{transform:translateY(-4px)}
}

/* ---------- Platzhalter für ein großes Video ---------- */
.yh-video{
  position:relative;
  margin-top:32px;
  aspect-ratio:16/9;
  border-radius:24px;
  overflow:hidden;
  background:rgba(254,252,252,.05);
  border:1px solid var(--linie);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  text-align:center;padding:24px;
}
.yh-video video,.yh-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.yh-video__play{
  width:82px;height:82px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(39,188,213,.16);box-shadow:inset 0 0 0 2px var(--cyan);
}
.yh-video__play svg{width:34px;height:34px;margin-left:5px}
.yh-video__hinweis{margin:0;color:var(--text-sehr-leise);font-size:.88rem;max-width:44ch}

/* ---------- BETA-Hinweis ---------- */
.yh-beta{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px;border-radius:999px;
  background:rgba(255,208,102,.16);
  box-shadow:inset 0 0 0 1px rgba(255,208,102,.55);
  color:var(--gelb);
  font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.yh-beta::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gelb)}

@media (max-width:640px){
  .yh-hallo{flex-direction:column;gap:14px;padding:20px;border-radius:20px 20px 20px 6px}
  .yh-hallo__avatar{flex-basis:52px;width:52px;height:52px}
  .yh-hallo__avatar img{width:32px;height:32px}
  .yh-video{aspect-ratio:4/3;border-radius:18px}
  .yh-video__play{width:64px;height:64px}
  .yh-video__play svg{width:26px;height:26px}
}

/* ---------- Einblenden beim Scrollen ---------- */
.yh-js .yh-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.yh-js .yh-reveal.is-visible{opacity:1;transform:none}
.yh-js .yh-grid .yh-reveal:nth-child(2){transition-delay:.1s}
.yh-js .yh-grid .yh-reveal:nth-child(3){transition-delay:.2s}
.yh-js .yh-grid .yh-reveal:nth-child(4){transition-delay:.3s}
.yh-js .yh-badges .yh-reveal:nth-child(2){transition-delay:.12s}
.yh-js .yh-badges .yh-reveal:nth-child(3){transition-delay:.24s}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .yh-split{grid-template-columns:1fr;gap:32px}
  .yh-burger{display:block}
  .yh-nav{
    position:absolute;top:calc(100% + 10px);left:16px;right:16px;z-index:60;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--violett-tief);
    border-radius:18px;
    box-shadow:0 20px 50px rgba(10,4,40,.45);
    padding:12px;
    max-height:calc(100vh - 100px);overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);
    /* opacity:0 allein fängt keine Klicks ab, deshalb zusätzlich pointer-events */
    pointer-events:none;
    transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;
  }
  .yh-nav.is-offen{
    opacity:1;visibility:visible;transform:none;
    pointer-events:auto;
    transition:opacity .25s ease,transform .25s ease;
  }
  .yh-nav a{padding:13px 14px;width:100%;border-radius:12px}
  .yh-nav a:hover{background:rgba(254,252,252,.08)}
  .yh-nav a[aria-current="page"]{background:rgba(39,188,213,.16);color:var(--cyan)}
  .yh-nav__item{flex-direction:column;align-items:stretch;width:100%}
  .yh-nav__dropdown{
    position:static;opacity:1;transform:none;
    /* inherit statt visible: sonst macht sich das Untermenü wieder sichtbar,
       obwohl das geschlossene Menü darüber visibility:hidden gesetzt hat,
       und fängt als unsichtbare Fläche Klicks auf dem Seiteninhalt ab. */
    visibility:inherit;
    background:none;border-top:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    padding:0;margin-top:0;transition:none;min-width:0;
  }
  .yh-nav__dropdown__inner{
    display:flex;flex-direction:column;gap:2px;
    padding:0 0 6px 14px;max-width:none;
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    border-radius:0;box-shadow:none;
  }
  .yh-nav a.yh-nav__mega{--mega-icon:42px;padding:10px 14px;border-radius:12px}
  .yh-nav__mega__icon{padding:4px}
  .yh-nav__mega span{font-size:.8rem}
}
@media (max-width:640px){
  .yh-logo img{height:54px;margin-left:-12px}
  .yh-slide{aspect-ratio:4/3}
  .yh-cta{padding:36px 20px;border-radius:18px}
  .yh-cta .yh-h2{font-size:1.45rem}
  .yh-step{grid-template-columns:50px 1fr;gap:0 16px;padding-bottom:30px}
  .yh-step__num{width:50px;height:50px;font-size:1.1rem}
  .yh-step::before{left:24px;top:50px}
  /* Gestapelt: keine waagerechte Verbindungslinie, keine Trennstriche */
  .yh-steps--row{grid-template-columns:1fr;gap:32px}
  .yh-steps--row .yh-step{border-left:none;padding:0}
  .yh-steps--row .yh-step::before{display:none}
  .yh-steps--row .yh-step__body .yh-h3{min-height:0}
  .yh-actions .yh-btn{flex:0 1 auto}
  .yh-trafo__svg{display:none}
  .yh-trafo__mobil{display:flex}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto}
  .yh-js .yh-reveal{opacity:1;transform:none}
}

/* ============================================================
   KI-Führerschein: Kursseite (ki-fuehrerschein-kurs.html)
   ============================================================ */
.yh-kurs__hinweis{font-size:.9rem;color:var(--text-sehr-leise)}
/* Fortschrittsstrecke mit Stationen */
.yh-kurs__strecke{position:relative;margin-top:40px}
.yh-kurs__balken{position:absolute;left:calc(100% / 16);right:calc(100% / 16);top:13px;height:4px;border-radius:4px;background:var(--linie)}
.yh-kurs__balken span{
  display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--gelb));
  box-shadow:0 0 12px rgba(251,112,163,.6);
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}
.yh-kurs__stationen{position:relative;list-style:none;display:grid;grid-template-columns:repeat(8,1fr)}
.yh-kurs__stationen a{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--text-sehr-leise);font-size:.78rem;font-weight:500}
.yh-kurs__punkt{
  width:30px;height:30px;border-radius:50%;background:var(--violett-tief);box-shadow:inset 0 0 0 2px var(--linie);
  display:grid;place-items:center;transition:background .3s ease,box-shadow .3s ease,transform .3s ease;
}
.yh-kurs__stationen .is-aktuell a{color:var(--weiss)}
.yh-kurs__stationen .is-aktuell .yh-kurs__punkt{box-shadow:inset 0 0 0 2px var(--cyan),0 0 0 6px rgba(39,188,213,.18);animation:yh-kurs-puls 2s ease-in-out infinite}
.yh-kurs__stationen .is-fertig a{color:var(--gelb)}
.yh-kurs__stationen .is-fertig .yh-kurs__punkt{background:var(--gelb);box-shadow:0 0 14px rgba(255,208,102,.7)}
.yh-kurs__stationen .is-fertig .yh-kurs__punkt::after{content:"\2605";color:var(--violett);font-size:.9rem;line-height:1}
@keyframes yh-kurs-puls{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.yh-kurs__stand{margin-top:18px;text-align:center;font-weight:500}
@media (max-width:640px){
  .yh-kurs__stationname{display:none}
  .yh-kurs__punkt{width:24px;height:24px}
  .yh-kurs__balken{top:10px}
}

/* Etappen: nur die geöffnete ist groß und farbig, die anderen ausgegraut */
.yh-kurs__etappen{display:grid;gap:12px}
.yh-etappe{
  border:1px solid var(--linie);border-radius:16px;background:var(--flaeche);
  scroll-margin-top:100px;opacity:.5;filter:grayscale(.8);
  transition:opacity .3s ease,filter .3s ease,border-color .3s ease,background .3s ease;
}
.yh-etappe:hover,.yh-etappe:focus-within{opacity:.85;filter:none}
.yh-etappe.is-auf{opacity:1;filter:none;border-color:color-mix(in srgb,var(--ef) 55%,transparent);background:rgba(254,252,252,.07)}
.yh-etappe__kopf{
  width:100%;display:flex;align-items:center;gap:18px;padding:14px 22px;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:16px;
}
.yh-etappe.is-auf .yh-etappe__kopf{padding-top:20px;padding-bottom:18px}
.yh-etappe__nr{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;box-shadow:inset 0 0 0 2px var(--ef);
}
.yh-etappe.is-fertig .yh-etappe__nr{background:var(--gelb);color:var(--violett);box-shadow:none}
.yh-etappe__titel{flex:1 1 auto;font-weight:500;font-size:1rem;line-height:1.3}
.yh-etappe.is-auf .yh-etappe__titel{font-size:clamp(1.1rem,2vw,1.4rem)}
.yh-etappe__titel small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ef);font-weight:400}
.yh-etappe__status{flex:0 0 auto;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-sehr-leise)}
.yh-etappe.is-fertig .yh-etappe__status{color:var(--gelb)}
.yh-etappe__inhalt{padding:0 22px 24px}
.yh-etappe.is-auf .yh-etappe__inhalt{animation:yh-kurs-ein .45s ease both}
@keyframes yh-kurs-ein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.yh-etappe__buehne{position:relative;border-radius:12px;overflow:hidden;background:#000}
.yh-etappe__video{display:block;width:100%;aspect-ratio:16/9}
.yh-etappe__leiste{display:flex;justify-content:flex-end;margin-top:12px}
.yh-etappe__download{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;
  font-size:.85rem;font-weight:500;color:var(--weiss);text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--linie);transition:background .2s ease,box-shadow .2s ease;
}
.yh-etappe__download svg{width:18px;height:18px;color:var(--ef)}
.yh-etappe__download small{color:var(--text-sehr-leise);font-size:.78rem}
.yh-etappe__download:hover{background:rgba(254,252,252,.08);box-shadow:inset 0 0 0 1px var(--ef)}

/* Startbild: gestaltetes Titelbild über dem Video */
.yh-startbild{
  position:absolute;inset:0;width:100%;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:clamp(18px,4vw,44px);border:0;cursor:pointer;text-align:left;
  font:inherit;color:var(--weiss);overflow:hidden;
  background:
    radial-gradient(ellipse 55% 70% at 85% 20%,color-mix(in srgb,var(--ef) 55%,transparent),transparent 70%),
    radial-gradient(ellipse 45% 60% at 10% 100%,rgba(251,112,163,.35),transparent 70%),
    linear-gradient(135deg,var(--violett-tief),var(--violett));
}
.yh-startbild[hidden]{display:none}
/* Mit eigenem Foto: Bild dahinter, unten abgedunkelt, damit der Text lesbar bleibt */
.yh-startbild--foto{background-size:cover;background-position:center}
.yh-startbild--foto::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(27,15,77,.92),rgba(27,15,77,.15) 65%)}
.yh-startbild > *{position:relative}
.yh-startbild__sterne{
  position:absolute !important;inset:0;pointer-events:none;opacity:.8;
  background:
    radial-gradient(circle at 12% 18%,#fff 0 1px,transparent 2px),
    radial-gradient(circle at 28% 42%,#fff 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 46% 12%,var(--gelb) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 63% 34%,#fff 0 1px,transparent 2px),
    radial-gradient(circle at 78% 62%,var(--cyan) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 92% 14%,#fff 0 1px,transparent 2px),
    radial-gradient(circle at 88% 86%,#fff 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 54% 70%,var(--pink) 0 1px,transparent 2px),
    radial-gradient(circle at 36% 80%,#fff 0 1px,transparent 2px),
    radial-gradient(circle at 6% 60%,var(--gelb) 0 1px,transparent 2px);
  animation:yh-startbild-funkeln 4s ease-in-out infinite;
}
.yh-startbild--foto .yh-startbild__sterne{display:none}
@keyframes yh-startbild-funkeln{0%,100%{opacity:.5}50%{opacity:1}}
.yh-startbild__teil{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--violett);background:var(--ef);border-radius:6px;padding:4px 10px;margin-bottom:12px;
}
.yh-startbild__titel{
  max-width:20ch;font-size:clamp(1.3rem,3.6vw,2.6rem);font-weight:700;line-height:1.1;text-transform:uppercase;
  text-shadow:0 2px 20px rgba(27,15,77,.6);
}
.yh-startbild__play{
  position:absolute !important;right:clamp(18px,4vw,44px);bottom:clamp(18px,4vw,44px);
  width:clamp(56px,9vw,88px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:var(--weiss);color:var(--violett);
  box-shadow:0 0 0 8px rgba(254,252,252,.15),0 0 40px color-mix(in srgb,var(--ef) 70%,transparent);
  transition:transform .25s ease,background .25s ease;
}
.yh-startbild__play svg{width:42%;height:42%;margin-left:8%}
.yh-startbild:hover .yh-startbild__play,
.yh-startbild:focus-visible .yh-startbild__play{transform:scale(1.08);background:var(--gelb)}
.yh-startbild__hinweis{margin-top:12px;font-size:.85rem;font-weight:500;color:var(--text-leise)}
.yh-startbild:focus-visible{outline:2px solid var(--gelb);outline-offset:-4px}

.yh-startbild__titel,.yh-startbild__hinweis{margin-right:clamp(70px,12vw,110px)}

@media (max-width:640px){
  .yh-etappe__kopf{gap:12px;padding:14px 16px}
  .yh-etappe__status{display:none}
  .yh-etappe__inhalt{padding:0 16px 20px}
}

/* ============================================================
   KI-Führerschein: Roadmap "Was Sie lernen" (ki-fuehrerschein.html)
   Straße in der Mitte, Etappen abwechselnd links und rechts;
   auf dem Handy Straße links, Etappen rechts daneben.
   ============================================================ */
.yh-roadmap{position:relative;list-style:none;margin:48px 0 170px;display:grid;gap:14px}
/* Straße mit gestrichelter Mittellinie */
.yh-roadmap::before{
  content:"";position:absolute;left:50%;top:0;bottom:36px;width:16px;transform:translateX(-50%);
  border-radius:8px;background:var(--violett-tief);
  box-shadow:0 0 0 1px rgba(254,252,252,.1),0 0 24px rgba(39,188,213,.25);
}
.yh-roadmap::after{
  content:"";position:absolute;left:50%;top:10px;bottom:46px;width:2px;transform:translateX(-50%);
  background:repeating-linear-gradient(to bottom,var(--gelb) 0 12px,transparent 12px 24px);
  opacity:.7;
}
.yh-roadmap li{position:relative;z-index:1}
.yh-roadmap a{
  display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;gap:18px;
  text-decoration:none;color:inherit;
}
.yh-roadmap__nr{
  grid-column:2;grid-row:1;justify-self:center;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:1.05rem;color:var(--violett);background:var(--rc,var(--cyan));
  box-shadow:0 0 0 5px var(--violett),0 0 22px color-mix(in srgb,var(--rc,var(--cyan)) 70%,transparent);
  transition:transform .3s ease;
}
.yh-roadmap__karte{
  grid-row:1;grid-column:1;text-align:right;position:relative;
  padding:16px 20px;border-radius:14px;
  background:var(--flaeche);border:1px solid var(--linie);
  transition:border-color .3s ease,background .3s ease,transform .3s ease;
}
.yh-roadmap__stopp:nth-child(even) .yh-roadmap__karte{grid-column:3;text-align:left}
/* Kleiner Abzweig von der Straße zur Karte */
.yh-roadmap__karte::after{
  content:"";position:absolute;top:50%;right:-19px;width:18px;height:2px;
  background:color-mix(in srgb,var(--rc,var(--cyan)) 60%,transparent);
}
.yh-roadmap__stopp:nth-child(even) .yh-roadmap__karte::after{right:auto;left:-19px}
.yh-roadmap small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rc,var(--cyan));margin-bottom:4px}
.yh-roadmap strong{font-weight:500;font-size:1.02rem;line-height:1.3}
.yh-roadmap a:hover .yh-roadmap__karte,
.yh-roadmap a:focus-visible .yh-roadmap__karte{border-color:color-mix(in srgb,var(--rc,var(--cyan)) 60%,transparent);background:rgba(254,252,252,.08)}
.yh-roadmap a:hover .yh-roadmap__nr{transform:scale(1.1)}
/* Ziel: unter der Straße, mittig */
.yh-roadmap__ziel{margin-top:10px}
.yh-roadmap__ziel a{grid-template-columns:1fr;justify-items:center;text-align:center}
/* Text unter dem Stern, außerhalb der Straße: die Straße endet in der Sternmitte */
.yh-roadmap__zieltext{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);width:max-content;max-width:100%}
.yh-roadmap__ziel .yh-roadmap__nr{
  grid-column:1;width:72px;height:72px;font-size:1.8rem;
  background:linear-gradient(135deg,var(--cyan),var(--pink),var(--gelb));color:var(--weiss);
  box-shadow:0 0 0 5px var(--violett),0 0 40px rgba(251,112,163,.6);
}
.yh-roadmap__zieltext small{color:var(--gelb);margin-bottom:8px}
.yh-roadmap__zieltext strong{font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:700;text-transform:uppercase}
/* Einfliegen beim Scrollen: von der jeweiligen Seite */
@media (prefers-reduced-motion:no-preference){
  .yh-js .yh-roadmap .yh-reveal{opacity:0;transform:translateX(-30px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
  .yh-js .yh-roadmap .yh-roadmap__stopp:nth-child(even).yh-reveal{transform:translateX(30px)}
  .yh-js .yh-roadmap .yh-roadmap__ziel.yh-reveal{transform:scale(.8)}
  .yh-js .yh-roadmap .yh-reveal.yh-reveal.is-visible:nth-child(n){opacity:1;transform:none}
}
@media (max-width:640px){
  .yh-roadmap::before{left:26px;bottom:26px}
  .yh-roadmap::after{left:26px;bottom:36px}
  .yh-roadmap a{grid-template-columns:52px 1fr;gap:16px}
  .yh-roadmap__nr{grid-column:1}
  .yh-roadmap__karte,
  .yh-roadmap__stopp:nth-child(even) .yh-roadmap__karte{grid-column:2;text-align:left}
  .yh-roadmap__karte::after,
  .yh-roadmap__stopp:nth-child(even) .yh-roadmap__karte::after{right:auto;left:-17px;width:16px}
  .yh-roadmap__ziel a{grid-template-columns:52px 1fr;justify-items:start;text-align:left}
  .yh-roadmap__ziel .yh-roadmap__nr{width:52px;height:52px;font-size:1.3rem}
  .yh-roadmap{margin-bottom:40px}
  .yh-roadmap__ziel .yh-roadmap__zieltext{grid-column:2;grid-row:1;position:static;transform:none;width:auto}
  .yh-js .yh-roadmap .yh-roadmap__stopp:nth-child(even).yh-reveal{transform:translateX(-30px)}
}

/* ---------- Startseite: "Referenzen auf einen Blick" (aufklappbar) ---------- */
.yh-referenzen{margin-top:8px;text-align:center}
.yh-referenzen > summary{display:inline-flex;align-items:center;gap:10px;list-style:none}
.yh-referenzen > summary::-webkit-details-marker{display:none}
.yh-referenzen > summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s ease}
.yh-referenzen[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.yh-referenzen .yh-testi-liste{text-align:left}

/* ---------- Testbot-Seiten: Vorteile, Datenschutz, Stimmen, VoiceBot ---------- */
.yh-testbot__block{margin-top:clamp(56px,8vw,96px)}
.yh-testbot__block > .yh-lead{max-width:60ch}
.yh-testbot__vorteile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.yh-testbot__vorteil{padding:22px 20px;border-radius:16px;background:var(--flaeche);border:1px solid var(--linie)}
.yh-testbot__vorteil .yh-h3{color:var(--cyan)}
.yh-testbot__vorteil .yh-text{font-size:.94rem}
.yh-testbot__siegel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:18px}
.yh-testbot__siegel > div{display:grid;grid-template-columns:64px 1fr;column-gap:16px;align-items:center;padding:16px 20px;border-radius:16px;border:1px solid rgba(39,188,213,.3);background:rgba(39,188,213,.06)}
.yh-testbot__siegel img{grid-row:span 2;width:64px;height:64px;object-fit:contain}
.yh-testbot__siegel strong{font-weight:500;align-self:end}
.yh-testbot__siegel span{font-size:.84rem;color:var(--text-leise);align-self:start}
.yh-testbot__block .yh-testi-liste{margin-top:28px}
.yh-voiceteaser{display:grid;grid-template-columns:clamp(96px,14vw,160px) 1fr;gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(24px,4vw,44px);border-radius:22px;background:linear-gradient(120deg,rgba(39,188,213,.16),rgba(251,112,163,.14));border:1px solid rgba(39,188,213,.35)}
.yh-voiceteaser__icon{display:grid;place-items:center;aspect-ratio:1/1;border-radius:50%;color:var(--cyan);background:radial-gradient(circle at 50% 40%,rgba(39,188,213,.35),rgba(39,188,213,.08) 70%);box-shadow:inset 0 0 0 1px rgba(39,188,213,.35),0 0 40px rgba(39,188,213,.25)}
.yh-voiceteaser__icon svg{width:42%;height:42%}
.yh-voiceteaser .yh-actions{margin-top:24px}
@media (max-width:1024px){.yh-testbot__vorteile{grid-template-columns:repeat(2,minmax(0,1fr))}.yh-testbot__siegel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.yh-testbot__vorteile{grid-template-columns:1fr}.yh-testbot__siegel{grid-template-columns:1fr}.yh-voiceteaser{grid-template-columns:1fr}.yh-voiceteaser__icon{width:88px}}
/* Hinweis: Was, wenn der Bot etwas nicht weiß */
.yh-testbot__wissen{max-width:760px;padding:24px 28px;border-radius:16px;background:rgba(251,112,163,.07);border:1px solid rgba(251,112,163,.3);border-left:4px solid var(--pink)}
.yh-testbot__wissen .yh-h3{color:var(--pink)}
.yh-testbot__wissen .yh-text{margin-top:10px}
/* Anwendungen verlinken auf die Produktseite */
a.yh-card--bot{color:inherit}
.yh-testbot__apps a.yh-card--bot::after{content:"Zur Produktseite \2192";display:block;margin-top:14px;font-size:.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.yh-testbot__apps a.yh-card--bot:hover::after{color:var(--pink)}
.yh-testbot__siegel .yh-testbot__flagge,.yh-testbot__siegel .yh-testbot__siegelicon{grid-row:span 2;align-self:center;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(254,252,252,.08)}
.yh-testbot__flagge svg,.yh-testbot__siegelicon svg{width:34px;height:34px}
.yh-testbot__mehr{display:inline-block;margin-top:12px;font-size:.85rem;font-weight:500;color:var(--cyan);text-decoration:none}
.yh-testbot__mehr:hover{color:var(--pink)}
.yh-testbot__siegel + .yh-actions{margin-top:22px}

/* ============================================================
   VoiceBot-Seite (voicebot.html): Illustrationen und Animationen
   Alles in HTML/CSS/SVG gezeichnet, keine Bilddateien.
   ============================================================ */

/* ---------- Kopf: Telefon mit Sprachwelle ---------- */
.yh-vb-hero{
  background:
    radial-gradient(ellipse 60% 55% at 60% 45%,rgba(39,188,213,.28),transparent 70%),
    radial-gradient(ellipse 45% 40% at 85% 85%,rgba(251,112,163,.25),transparent 70%),
    linear-gradient(160deg,var(--violett-tief),var(--violett));
}
.yh-vb-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;
  background:
    radial-gradient(1.5px 1.5px at 22% 18%,#fff,transparent 60%),
    radial-gradient(1px 1px at 38% 78%,#fff,transparent 60%),
    radial-gradient(2px 2px at 82% 14%,rgba(255,208,102,.9),transparent 60%),
    radial-gradient(1px 1px at 92% 52%,#fff,transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 90%,rgba(39,188,213,.9),transparent 60%),
    radial-gradient(1px 1px at 18% 60%,#fff,transparent 60%);
  animation:yh-vb-funkeln 5s ease-in-out infinite alternate;
}
@keyframes yh-vb-funkeln{from{opacity:.45}to{opacity:1}}
.yh-vb-hero__buehne{
  position:absolute;inset:0;padding-left:10%;
  display:grid;place-items:center;container-type:size;
}
.yh-vb-ring{
  position:absolute;left:55%;top:50%;width:min(62cqw,62cqh);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(39,188,213,.5);transform:translate(-50%,-50%) scale(.6);opacity:0;
  animation:yh-vb-ring 4.5s ease-out infinite;animation-delay:calc(var(--i,0) * 1.5s);
}
@keyframes yh-vb-ring{0%{opacity:.8;transform:translate(-50%,-50%) scale(.55)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
.yh-vb-phone{
  position:relative;z-index:1;
  width:min(36cqw,34cqh);aspect-ratio:9/17;border-radius:min(5cqw,5cqh);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:9% 8% 10%;
  background:linear-gradient(170deg,#2b1a7a,var(--violett-tief) 70%);
  box-shadow:0 0 0 2px rgba(254,252,252,.16),0 30px 60px rgba(10,4,40,.6),0 0 60px rgba(39,188,213,.25);
  animation:yh-vb-schweben 6s ease-in-out infinite;
}
@keyframes yh-vb-schweben{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(1deg)}}
.yh-vb-phone__notch{position:absolute;top:3.5%;left:50%;width:28%;height:2.4%;border-radius:99px;background:rgba(0,0,0,.45);transform:translateX(-50%)}
.yh-vb-phone__label{margin-top:6%;font-size:min(2.2cqw,2.2cqh);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.yh-vb-phone__name{font-size:min(3cqw,3cqh);font-weight:500;text-align:center;line-height:1.2}
.yh-vb-orb{
  width:72%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(39,188,213,.55),rgba(251,112,163,.25) 60%,transparent 72%);
  box-shadow:0 0 40px rgba(39,188,213,.35);
}
.yh-vb-wave{display:flex;align-items:center;gap:7%;height:46%;width:62%}
.yh-vb-wave i{
  flex:1;height:100%;border-radius:99px;
  background:linear-gradient(to top,var(--cyan),var(--pink));
  transform:scaleY(.25);animation:yh-vb-welle 1.2s ease-in-out infinite;
  animation-delay:calc(var(--n) * -.17s);
}
@keyframes yh-vb-welle{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.yh-vb-phone__status{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:min(2.4cqw,2.4cqh);color:var(--text-leise)}
.yh-vb-phone__status b,.yh-vb-status b{
  width:8px;height:8px;border-radius:50%;background:#5ee68f;box-shadow:0 0 0 0 rgba(94,230,143,.6);
  animation:yh-vb-puls 1.8s ease-out infinite;
}
@keyframes yh-vb-puls{0%{box-shadow:0 0 0 0 rgba(94,230,143,.6)}100%{box-shadow:0 0 0 10px rgba(94,230,143,0)}}
.yh-vb-phone__tasten{display:flex;gap:10%;width:100%;justify-content:center}
.yh-vb-phone__tasten span{
  width:24%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:rgba(254,252,252,.1);color:var(--weiss);
}
.yh-vb-phone__tasten span.is-rot{background:#e5484d}
.yh-vb-phone__tasten svg{width:52%;height:52%}
/* Sprechblasen im Kopf */
.yh-vb-blase{
  position:absolute;z-index:2;max-width:min(36cqw,260px);margin:0;
  padding:12px 16px;font-size:clamp(.78rem,2.3cqw,.98rem);line-height:1.35;font-weight:400;
  border-radius:18px;box-shadow:0 12px 30px rgba(10,4,40,.4);
  opacity:0;animation:yh-vb-blase 9s ease-in-out infinite;
}
.yh-vb-blase--frage{left:6%;top:10%;background:var(--weiss);color:var(--violett);border-bottom-left-radius:6px}
.yh-vb-blase--antwort{right:8%;bottom:14%;background:linear-gradient(120deg,var(--cyan),#3fa9d6);color:var(--weiss);border-bottom-right-radius:6px;animation-delay:1.6s}
@keyframes yh-vb-blase{
  0%{opacity:0;transform:translateY(10px) scale(.9)}
  6%,72%{opacity:1;transform:none}
  80%,100%{opacity:0;transform:translateY(-6px)}
}
.yh-vb-chip{
  position:absolute;z-index:2;padding:6px 12px;border-radius:99px;
  font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(27,15,77,.75);box-shadow:inset 0 0 0 1px rgba(255,208,102,.5);color:var(--gelb);
  animation:yh-vb-schweben 7s ease-in-out infinite;
}
.yh-vb-hero .yh-vb-chip--a{left:16%;bottom:18%}
.yh-vb-hero .yh-vb-chip--b{right:8%;top:16%;animation-delay:-3s;color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(39,188,213,.5)}

/* ---------- Gemeinsame Bühne der Illustrationen ---------- */
.yh-vb-ill{
  position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;container-type:inline-size;
  background:
    radial-gradient(ellipse 70% 60% at 70% 20%,rgba(39,188,213,.18),transparent 70%),
    radial-gradient(ellipse 60% 50% at 15% 90%,rgba(251,112,163,.16),transparent 70%),
    rgba(27,15,77,.55);
  box-shadow:inset 0 0 0 1px var(--linie),0 20px 50px rgba(10,4,40,.35);
}
.yh-vb-ill__kopf{
  position:absolute;left:6%;right:6%;top:7%;display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:clamp(.66rem,2.6cqw,.82rem);letter-spacing:.12em;text-transform:uppercase;color:var(--text-sehr-leise);
}
.yh-vb-ill__kopf strong{font-weight:500;color:var(--gelb)}
.yh-vb-status{
  position:absolute;left:50%;bottom:7%;transform:translateX(-50%);white-space:nowrap;
  display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;
  font-size:clamp(.68rem,2.8cqw,.85rem);background:rgba(27,15,77,.8);box-shadow:inset 0 0 0 1px var(--linie);
}

/* 24/7: Sonne und Mond kreisen um das Ziffernblatt */
.yh-vb-uhr{display:grid;place-items:center}
.yh-vb-uhr__blatt{
  position:relative;width:48%;aspect-ratio:1;margin-top:-12%;border-radius:50%;
  background:repeating-conic-gradient(from -1deg,rgba(254,252,252,.5) 0 2deg,transparent 2deg 15deg);
  box-shadow:0 0 0 1px rgba(254,252,252,.15),0 0 50px rgba(39,188,213,.2);
}
.yh-vb-uhr__blatt::after{content:"";position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2b1a7a,var(--violett-tief))}
.yh-vb-uhr__bahn{position:absolute;inset:-11%;z-index:1;animation:yh-vb-drehen 14s linear infinite}
@keyframes yh-vb-drehen{to{transform:rotate(360deg)}}
.yh-vb-uhr__sonne,.yh-vb-uhr__mond{position:absolute;left:50%;width:18%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%)}
.yh-vb-uhr__sonne{top:0;background:radial-gradient(circle,#fff3c4,var(--gelb) 60%);box-shadow:0 0 24px 6px rgba(255,208,102,.6)}
.yh-vb-uhr__mond{bottom:0;background:transparent;box-shadow:inset -7px 3px 0 0 #dfe8ff;filter:drop-shadow(0 0 10px rgba(223,232,255,.6))}
.yh-vb-uhr__mitte{position:absolute;inset:0;z-index:2;display:grid;place-content:center;text-align:center}
.yh-vb-uhr__mitte strong{
  font-weight:700;font-size:clamp(1.6rem,11cqw,3.2rem);line-height:1;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--gelb),var(--cyan));background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:yh-grow-schimmer 6s linear infinite;
}
.yh-vb-uhr__mitte span{margin-top:4px;font-size:clamp(.66rem,2.6cqw,.82rem);letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise)}

/* Soforthilfe: mehrere Anrufe gleichzeitig verbunden */
.yh-vb-parallel ul{position:absolute;left:6%;right:6%;top:20%;list-style:none;display:grid;gap:2.4cqw}
.yh-vb-parallel li{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:4cqw;
  padding:2cqw 3cqw;border-radius:14px;background:rgba(254,252,252,.06);box-shadow:inset 0 0 0 1px var(--linie);
  opacity:0;animation:yh-vb-anruf 10s ease-in-out infinite;animation-delay:calc(var(--i) * .7s);
}
@keyframes yh-vb-anruf{
  0%{opacity:0;transform:translateX(30px)}
  6%,82%{opacity:1;transform:none}
  90%,100%{opacity:0;transform:translateX(-20px)}
}
.yh-vb-avatar{width:7cqw;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c)}
.yh-vb-avatar svg{width:58%;height:58%}
.yh-vb-anliegen{font-size:clamp(.72rem,3.2cqw,.95rem);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yh-vb-miniwave{display:flex;align-items:center;gap:3px;height:5cqw}
.yh-vb-miniwave i{width:3px;height:100%;border-radius:3px;background:var(--c);animation:yh-vb-welle 1s ease-in-out infinite}
.yh-vb-miniwave i:nth-child(2){animation-delay:-.2s}
.yh-vb-miniwave i:nth-child(3){animation-delay:-.4s}
.yh-vb-miniwave i:nth-child(4){animation-delay:-.6s}
.yh-vb-miniwave i:nth-child(5){animation-delay:-.8s}
.yh-vb-parallel li b{font-weight:500;font-size:clamp(.6rem,2.4cqw,.75rem);letter-spacing:.08em;text-transform:uppercase;color:#5ee68f}

/* Entlastung: Balken füllen sich mit dem Anteil des VoiceBots */
.yh-vb-balken{position:absolute;left:8%;right:8%;top:20%;bottom:24%;display:grid;grid-template-columns:repeat(5,1fr);gap:5%;align-items:end}
.yh-vb-balken > div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.yh-vb-balken span{
  position:relative;width:100%;height:var(--h);border-radius:10px 10px 4px 4px;overflow:hidden;
  background:rgba(251,112,163,.35);box-shadow:inset 0 0 0 1px rgba(251,112,163,.5);
}
.yh-vb-balken span i{
  position:absolute;left:0;right:0;bottom:0;height:var(--v);
  background:linear-gradient(to top,var(--cyan),#6fd6e8);box-shadow:0 0 20px rgba(39,188,213,.5);
  transform-origin:bottom;transform:scaleY(1);
  animation:yh-vb-fuellen 7s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--i) * .15s);
}
@keyframes yh-vb-fuellen{0%{transform:scaleY(0)}25%,85%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.yh-vb-balken em{font-style:normal;font-size:clamp(.66rem,2.6cqw,.82rem);color:var(--text-sehr-leise)}
.yh-vb-legende{position:absolute;left:6%;right:6%;bottom:7%;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:clamp(.66rem,2.6cqw,.82rem);color:var(--text-leise)}
.yh-vb-legende span{display:flex;align-items:center;gap:7px}
.yh-vb-legende span::before{content:"";width:10px;height:10px;border-radius:3px}
.yh-vb-legende .is-bot::before{background:var(--cyan)}
.yh-vb-legende .is-team::before{background:rgba(251,112,163,.6)}

/* Weiterleitung: Anruf läuft über den VoiceBot zur richtigen Stelle */
.yh-vb-weiter svg{position:absolute;left:4%;top:4%;width:92%;height:78%}
.yh-vb-weiter__linie{stroke:rgba(254,252,252,.18);stroke-width:2}
.yh-vb-weiter__fluss{
  stroke:var(--cyan);stroke-width:3;stroke-linecap:round;stroke-dasharray:18 400;stroke-dashoffset:18;opacity:0;
  animation:yh-vb-fluss 9s linear infinite;animation-delay:calc(var(--p,0) * 3s);
  filter:drop-shadow(0 0 6px var(--cyan));
}
.yh-vb-weiter__fluss--rein{stroke:var(--pink);filter:drop-shadow(0 0 6px var(--pink));animation:yh-vb-rein 3s linear infinite}
@keyframes yh-vb-fluss{0%{opacity:1;stroke-dashoffset:18}25%{opacity:1;stroke-dashoffset:-150}26%,100%{opacity:0;stroke-dashoffset:-150}}
@keyframes yh-vb-rein{0%{stroke-dashoffset:18}60%,100%{stroke-dashoffset:-110}}
.yh-vb-weiter__anrufer circle{fill:rgba(251,112,163,.18);stroke:var(--pink);stroke-width:2}
.yh-vb-weiter__anrufer path{stroke:var(--pink);fill:none}
.yh-vb-weiter__bot circle{fill:rgba(39,188,213,.18);stroke:var(--cyan);stroke-width:2;animation:yh-vb-botpuls 3s ease-in-out infinite}
.yh-vb-weiter__bot path{stroke:var(--cyan);stroke-width:3}
@keyframes yh-vb-botpuls{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 12px var(--cyan))}}
.yh-vb-weiter__ziel rect{fill:rgba(254,252,252,.06);stroke:rgba(254,252,252,.25);stroke-width:1.5;animation:yh-vb-ziel 9s linear infinite;animation-delay:calc(var(--p) * 3s)}
.yh-vb-weiter__ziel text,.yh-vb-weiter__klein{fill:var(--weiss);font-family:inherit;font-size:12px;font-weight:500;text-anchor:middle}
.yh-vb-weiter__klein{fill:var(--text-sehr-leise);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
@keyframes yh-vb-ziel{
  0%,20%{fill:rgba(254,252,252,.06);stroke:rgba(254,252,252,.25)}
  24%,32%{fill:rgba(39,188,213,.3);stroke:var(--cyan)}
  36%,100%{fill:rgba(254,252,252,.06);stroke:rgba(254,252,252,.25)}
}

/* Mehrsprachig: Globus und wechselnde Begrüßungen */
.yh-vb-sprachen{display:grid;place-items:center}
.yh-vb-globus{position:absolute;width:56%;left:22%;top:16%;opacity:.9}
.yh-vb-globus circle,.yh-vb-globus path{stroke:rgba(39,188,213,.55);stroke-width:1.5}
.yh-vb-globus__meridian{stroke:rgba(39,188,213,.4);stroke-width:1.5;transform-origin:100px 100px;animation:yh-vb-meridian 6s linear infinite}
@keyframes yh-vb-meridian{0%{transform:scaleX(1)}50%{transform:scaleX(0)}100%{transform:scaleX(-1)}}
.yh-vb-sprachen__blase{
  position:relative;z-index:1;display:grid;place-items:center;
  min-width:52%;padding:5cqw 7cqw;border-radius:24px 24px 24px 8px;
  background:var(--weiss);color:var(--violett);box-shadow:0 18px 40px rgba(10,4,40,.45);
  animation:yh-vb-schweben 6s ease-in-out infinite;
}
.yh-vb-sprachen__blase span{
  grid-area:1/1;font-weight:700;font-size:clamp(1.1rem,6cqw,1.9rem);white-space:nowrap;
  opacity:0;animation:yh-vb-gruss 16s ease-in-out infinite;animation-delay:calc(var(--i) * 2s);
}
.yh-vb-sprachen__blase span:first-child{opacity:1}
@keyframes yh-vb-gruss{
  0%{opacity:0;transform:translateY(10px)}
  2%,11%{opacity:1;transform:none}
  13%,100%{opacity:0;transform:translateY(-10px)}
}
.yh-vb-sprachen .yh-vb-chip--a{left:7%;bottom:10%}
.yh-vb-sprachen .yh-vb-chip--b{right:7%;top:10%;animation-delay:-3s;color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(39,188,213,.5)}

/* Typische Bürgeranfragen als Sprechblasen */
.yh-vb-fragen{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.yh-vb-fragen li{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  border-radius:18px 18px 18px 6px;background:rgba(254,252,252,.06);box-shadow:inset 0 0 0 1px var(--linie);
  transition:background .25s ease,box-shadow .25s ease,transform .25s ease;
}
.yh-vb-fragen li:nth-child(even){border-radius:18px 18px 6px 18px}
.yh-vb-fragen li:hover{background:rgba(39,188,213,.12);box-shadow:inset 0 0 0 1px rgba(39,188,213,.5);transform:translateY(-3px)}
.yh-vb-fragen svg{flex:0 0 auto;width:22px;height:22px;color:var(--cyan)}
.yh-vb-fragen li:hover svg{animation:yh-vb-klingeln .5s ease-in-out 2}
@keyframes yh-vb-klingeln{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.yh-js .yh-vb-fragen .yh-reveal{transition-delay:calc(var(--i) * .08s)}

@media (max-width:900px){
  .yh-vb-fragen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yh-vb-hero__buehne{padding-left:6%}
}
@media (max-width:560px){
  .yh-vb-fragen{grid-template-columns:1fr}
  .yh-vb-blase{max-width:46cqw}
}
@media (prefers-reduced-motion:reduce){
  .yh-vb-blase,.yh-vb-parallel li{opacity:1}
}

/* Neun Module im Kranz (BotBucket-Seite), Blätter etwas schmaler */
.yh-orchidee--neun .yh-orchidee__blatt{width:22%;min-width:128px;padding:14px 10px}
.yh-orchidee--neun .yh-orchidee__blatt span{font-size:.86rem}
.yh-orchidee--neun .yh-orchidee__blatt--p1{left:50.0%;top:11.0%}
.yh-orchidee--neun .yh-orchidee__blatt--p2{left:75.1%;top:20.1%}
.yh-orchidee--neun .yh-orchidee__blatt--p3{left:88.4%;top:43.2%}
.yh-orchidee--neun .yh-orchidee__blatt--p4{left:83.8%;top:69.5%}
.yh-orchidee--neun .yh-orchidee__blatt--p5{left:63.3%;top:86.6%}
.yh-orchidee--neun .yh-orchidee__blatt--p6{left:36.7%;top:86.6%}
.yh-orchidee--neun .yh-orchidee__blatt--p7{left:16.2%;top:69.5%}
.yh-orchidee--neun .yh-orchidee__blatt--p8{left:11.6%;top:43.2%}
.yh-orchidee--neun .yh-orchidee__blatt--p9{left:24.9%;top:20.1%}
.yh-orchidee__extra{margin-top:28px;text-align:center}
.yh-orchidee__extra a{display:inline-flex;align-items:center;gap:12px;padding:12px 22px;border-radius:999px;text-decoration:none;color:var(--weiss);font-weight:500;background:linear-gradient(120deg,rgba(39,188,213,.16),rgba(251,112,163,.14));box-shadow:inset 0 0 0 1px rgba(39,188,213,.4);transition:box-shadow .25s ease,transform .25s ease}
.yh-orchidee__extra a:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--pink)}
.yh-orchidee__extra span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--weiss);color:var(--violett);font-weight:700}
@media (max-width:900px){.yh-orchidee--neun .yh-orchidee__blatt{width:auto;min-width:0}}

/* ============================================================
   Process Engine (process-engine.html): animierter Ablauf
   Vom Antrag bis zum Bescheid, eine Akte läuft durch die Stationen.
   Zyklus 12 s: Station 1 bei 5 %, 2 bei 28 %, 3 bei 52 % (mit Halt
   am manuellen Berührungspunkt), 4 bei 80 %.
   ============================================================ */
.yh-pe-fluss{
  position:relative;margin-top:40px;padding:72px 28px 28px;border-radius:22px;
  background:
    radial-gradient(ellipse 50% 70% at 80% 10%,rgba(39,188,213,.16),transparent 70%),
    radial-gradient(ellipse 45% 60% at 10% 100%,rgba(251,112,163,.14),transparent 70%),
    rgba(27,15,77,.55);
  box-shadow:inset 0 0 0 1px var(--linie),0 20px 50px rgba(10,4,40,.35);
}
.yh-pe-fluss__bahn{
  position:absolute;left:12.5%;right:12.5%;top:118px;height:4px;border-radius:4px;
  background:rgba(254,252,252,.12);overflow:hidden;
}
.yh-pe-fluss__licht{
  position:absolute;inset:0;transform-origin:left;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--gelb));
  box-shadow:0 0 14px rgba(251,112,163,.6);
  animation:yh-pe-licht 12s linear infinite;
}
@keyframes yh-pe-licht{
  0%,5%{transform:scaleX(0)}
  28%{transform:scaleX(.333)}
  52%,62%{transform:scaleX(.667)}
  80%,94%{transform:scaleX(1)}
  100%{transform:scaleX(1);opacity:0}
}
.yh-pe-fluss__akte{
  position:absolute;top:96px;left:12.5%;z-index:2;width:30px;height:38px;margin-left:-15px;
  filter:drop-shadow(0 6px 14px rgba(10,4,40,.6)) drop-shadow(0 0 10px rgba(254,252,252,.35));
  animation:yh-pe-akte 12s ease-in-out infinite;
}
.yh-pe-fluss__akte svg{width:100%;height:100%}
@keyframes yh-pe-akte{
  0%{left:12.5%;opacity:0;transform:translateY(-14px)}
  5%{left:12.5%;opacity:1;transform:none}
  12%{left:12.5%}
  28%{left:37.5%}
  36%{left:37.5%}
  52%{left:62.5%}
  62%{left:62.5%}
  80%{left:87.5%;transform:none}
  90%{left:87.5%;opacity:1;transform:scale(1.15)}
  97%,100%{left:87.5%;opacity:0;transform:scale(.6)}
}
.yh-pe-fluss__stationen{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.yh-pe-station{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.yh-pe-station__punkt{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  color:var(--text-sehr-leise);background:var(--violett-tief);
  box-shadow:inset 0 0 0 2px rgba(254,252,252,.18);
  animation:12s ease-in-out infinite;
}
.yh-pe-station__punkt svg{width:28px;height:28px}
.yh-pe-station strong{font-weight:500;font-size:.98rem;line-height:1.3;color:var(--text-leise);animation:12s ease-in-out infinite}
.yh-pe-station__log{
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#5ee68f;
  opacity:0;animation:12s ease-in-out infinite;
}
.yh-pe-station--1 .yh-pe-station__punkt{animation-name:yh-pe-an1}
.yh-pe-station--2 .yh-pe-station__punkt{animation-name:yh-pe-an2}
.yh-pe-station--3 .yh-pe-station__punkt{animation-name:yh-pe-an3}
.yh-pe-station--4 .yh-pe-station__punkt{animation-name:yh-pe-an4}
.yh-pe-station--1 strong{animation-name:yh-pe-text1}
.yh-pe-station--2 strong{animation-name:yh-pe-text2}
.yh-pe-station--3 strong{animation-name:yh-pe-text3}
.yh-pe-station--4 strong{animation-name:yh-pe-text4}
.yh-pe-station--1 .yh-pe-station__log{animation-name:yh-pe-log1}
.yh-pe-station--2 .yh-pe-station__log{animation-name:yh-pe-log2}
.yh-pe-station--3 .yh-pe-station__log{animation-name:yh-pe-log3}
.yh-pe-station--4 .yh-pe-station__log{animation-name:yh-pe-log4}
@keyframes yh-pe-log1{0%,8%,97%,100%{opacity:0}11%,94%{opacity:1}}
@keyframes yh-pe-log2{0%,31%,97%,100%{opacity:0}34%,94%{opacity:1}}
@keyframes yh-pe-log3{0%,62%,97%,100%{opacity:0}65%,94%{opacity:1}}
@keyframes yh-pe-log4{0%,85%,97%,100%{opacity:0}88%,94%{opacity:1}}
@keyframes yh-pe-an1{0%,4%,97%,100%{color:var(--text-sehr-leise);box-shadow:inset 0 0 0 2px rgba(254,252,252,.18)}6%,94%{color:var(--weiss);box-shadow:inset 0 0 0 2px var(--cyan),0 0 26px rgba(39,188,213,.55)}}
@keyframes yh-pe-an2{0%,27%,97%,100%{color:var(--text-sehr-leise);box-shadow:inset 0 0 0 2px rgba(254,252,252,.18)}29%,94%{color:var(--weiss);box-shadow:inset 0 0 0 2px var(--cyan),0 0 26px rgba(39,188,213,.55)}}
@keyframes yh-pe-an3{0%,51%,97%,100%{color:var(--text-sehr-leise);box-shadow:inset 0 0 0 2px rgba(254,252,252,.18)}53%,94%{color:var(--weiss);box-shadow:inset 0 0 0 2px var(--pink),0 0 26px rgba(251,112,163,.55)}}
@keyframes yh-pe-an4{0%,79%,97%,100%{color:var(--text-sehr-leise);background:var(--violett-tief);box-shadow:inset 0 0 0 2px rgba(254,252,252,.18)}81%,94%{color:var(--violett);background:var(--gelb);box-shadow:0 0 30px rgba(255,208,102,.7)}}
@keyframes yh-pe-text1{0%,4%,97%,100%{opacity:.45}8%,94%{opacity:1}}
@keyframes yh-pe-text2{0%,27%,97%,100%{opacity:.45}31%,94%{opacity:1}}
@keyframes yh-pe-text3{0%,51%,97%,100%{opacity:.45}55%,94%{opacity:1}}
@keyframes yh-pe-text4{0%,79%,97%,100%{opacity:.45}83%,94%{opacity:1}}
/* KI-Fachagenten über den Stationen */
.yh-pe-agent{
  position:absolute;top:-40px;padding:4px 10px;border-radius:99px;white-space:nowrap;
  font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan);background:rgba(27,15,77,.85);box-shadow:inset 0 0 0 1px rgba(39,188,213,.45);
  animation:yh-vb-schweben 6s ease-in-out infinite;
}
.yh-pe-station--3 .yh-pe-agent{animation-delay:-2s}
.yh-pe-station--4 .yh-pe-agent{animation-delay:-4s}
/* Manueller Berührungspunkt: hier hält die Akte kurz an */
.yh-pe-mensch{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  font-size:.74rem;font-weight:500;color:var(--pink);background:rgba(251,112,163,.12);box-shadow:inset 0 0 0 1px rgba(251,112,163,.45);
  animation:yh-pe-mensch 12s ease-in-out infinite;
}
.yh-pe-mensch svg{width:15px;height:15px}
@keyframes yh-pe-mensch{0%,51%,64%,100%{transform:none;box-shadow:inset 0 0 0 1px rgba(251,112,163,.45)}55%,60%{transform:scale(1.08);box-shadow:inset 0 0 0 1px var(--pink),0 0 22px rgba(251,112,163,.6)}}
.yh-pe-fluss__fuss{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:30px 0 0;padding-top:20px;
  border-top:1px solid var(--linie);font-size:.85rem;color:var(--text-leise);
}
.yh-pe-fluss__fuss span{display:inline-flex;align-items:center;gap:8px}
.yh-pe-fluss__fuss span::before{content:"";width:8px;height:8px;border-radius:50%;background:#5ee68f;box-shadow:0 0 10px rgba(94,230,143,.7)}
/* Vorteile: Symbole leuchten beim Darüberfahren */
#vorteile .yh-card__icon{transition:transform .3s ease,filter .3s ease}
#vorteile .yh-card:hover .yh-card__icon{transform:scale(1.1) rotate(-4deg);filter:drop-shadow(0 0 10px rgba(39,188,213,.6))}
/* Handy: Stationen untereinander, ohne wandernde Akte */
@media (max-width:760px){
  .yh-pe-fluss{padding:28px 20px}
  .yh-pe-fluss__bahn,.yh-pe-fluss__akte{display:none}
  .yh-pe-fluss__stationen{grid-template-columns:1fr;gap:22px}
  .yh-pe-station{display:grid;grid-template-columns:64px 1fr;align-items:center;text-align:left;column-gap:16px;row-gap:6px}
  .yh-pe-station__punkt{grid-row:span 3}
  .yh-pe-agent{position:static;justify-self:start;animation:none}
  .yh-pe-station .yh-pe-mensch{justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .yh-pe-station__log{opacity:1}
  .yh-pe-fluss__akte{display:none}
}

/* ============================================================
   Modulseite (module.html): Illustrationen je Modul
   Baut auf der Bühne .yh-vb-ill der VoiceBot-Seite auf.
   ============================================================ */

/* Mit Dateien arbeiten: Dokumentstapel, Scanlinie, wechselnde Tätigkeit */
.yh-mod-dateien{display:grid;place-items:center}
.yh-mod-dateien__stapel{position:relative;width:34%;aspect-ratio:3/4;margin-top:-10%}
.yh-mod-blatt{position:absolute;inset:0;border-radius:10px;background:var(--weiss);box-shadow:0 14px 30px rgba(10,4,40,.45)}
.yh-mod-blatt--hinten{background:rgba(254,252,252,.35);transform:rotate(-12deg) translate(-18%,4%);animation:yh-mod-faecher 6s ease-in-out infinite}
.yh-mod-blatt--mitte{background:rgba(254,252,252,.6);transform:rotate(9deg) translate(16%,2%);animation:yh-mod-faecher 6s ease-in-out infinite reverse}
@keyframes yh-mod-faecher{0%,100%{rotate:0deg}50%{rotate:4deg}}
.yh-mod-blatt--vorn{display:flex;flex-direction:column;gap:9%;padding:16% 14%;overflow:hidden}
.yh-mod-blatt--vorn i{display:block;height:6%;border-radius:3px;background:rgba(39,22,111,.25)}
.yh-mod-blatt--vorn i:nth-child(1){width:60%;background:rgba(39,22,111,.55)}
.yh-mod-blatt--vorn i:nth-child(3){width:80%}
.yh-mod-blatt--vorn i:nth-child(5){width:50%}
.yh-mod-scan{
  position:absolute;left:0;right:0;top:0;height:22%;
  background:linear-gradient(to bottom,transparent,rgba(39,188,213,.45),transparent);
  border-bottom:2px solid var(--cyan);animation:yh-mod-scan 2.6s ease-in-out infinite alternate;
}
@keyframes yh-mod-scan{from{transform:translateY(-30%)}to{transform:translateY(390%)}}
.yh-mod-wechsel{position:absolute;left:0;right:0;bottom:9%;display:grid;place-items:center}
.yh-mod-wechsel span{
  grid-area:1/1;padding:7px 16px;border-radius:99px;font-weight:500;font-size:clamp(.8rem,3.4cqw,1rem);
  color:var(--violett);background:var(--gelb);box-shadow:0 0 24px rgba(255,208,102,.5);
  opacity:0;animation:yh-mod-wort 10s ease-in-out infinite;animation-delay:calc(var(--i) * 2s);
}
.yh-mod-wechsel span:first-child{opacity:1}
@keyframes yh-mod-wort{0%{opacity:0;transform:translateY(8px)}3%,17%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateY(-8px)}}

/* Pseudonymisierer: Fundstellen werden markiert und geschwärzt */
.yh-mod-pseudo__schritte{position:absolute;left:6%;right:6%;top:7%;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.yh-mod-pseudo__schritte span{
  padding:5px 11px;border-radius:99px;font-size:clamp(.62rem,2.5cqw,.78rem);font-weight:500;
  color:var(--text-sehr-leise);box-shadow:inset 0 0 0 1px var(--linie);
  animation:yh-mod-schritt 9s ease-in-out infinite;animation-delay:calc(var(--i) * 3s);
}
@keyframes yh-mod-schritt{0%,30%,100%{color:var(--text-sehr-leise);background:transparent;box-shadow:inset 0 0 0 1px var(--linie)}3%,27%{color:var(--violett);background:var(--cyan);box-shadow:0 0 18px rgba(39,188,213,.5)}}
.yh-mod-pseudo__blatt{
  position:absolute;left:16%;right:16%;top:24%;bottom:20%;padding:7% 8%;border-radius:12px;
  display:flex;flex-direction:column;justify-content:space-between;background:var(--weiss);box-shadow:0 14px 30px rgba(10,4,40,.45);
}
.yh-mod-pseudo__blatt p{display:flex;gap:4%;margin:0;height:9%}
.yh-mod-pseudo__blatt i{display:block;width:var(--w);border-radius:3px;background:rgba(39,22,111,.22)}
.yh-mod-pseudo__blatt em{
  display:block;width:20%;border-radius:3px;background:rgba(39,22,111,.22);
  animation:yh-mod-schwaerzen 9s ease-in-out infinite;animation-delay:calc(var(--i) * .25s);
}
@keyframes yh-mod-schwaerzen{
  0%,33%{background:rgba(39,22,111,.22);box-shadow:none}
  38%,63%{background:rgba(255,208,102,.9);box-shadow:0 0 0 2px var(--gelb)}
  70%,94%{background:var(--violett);box-shadow:none}
  100%{background:rgba(39,22,111,.22)}
}

/* Avatar: ein Gesicht, das blinzelt und spricht */
.yh-mod-avatar{display:grid;place-items:center}
.yh-mod-avatar__schirm{
  width:44%;aspect-ratio:3/4;margin-top:-12%;border-radius:18px;padding:6% 8%;
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10%;
  background:linear-gradient(170deg,#2b1a7a,var(--violett-tief));
  box-shadow:0 0 0 2px rgba(254,252,252,.16),0 20px 40px rgba(10,4,40,.5),0 0 40px rgba(251,112,163,.2);
}
.yh-mod-avatar__einhorn{position:relative;align-self:stretch;width:auto;margin:-4% -6% 0;transform-origin:50% 90%;animation:yh-mod-nicken 2.8s ease-in-out infinite}
.yh-mod-avatar__einhorn img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 18px rgba(251,112,163,.45))}
@keyframes yh-mod-nicken{0%,100%{transform:rotate(0)}20%{transform:rotate(-3deg) translateY(-2%)}40%{transform:rotate(1.5deg)}60%{transform:rotate(-2deg) translateY(-1%)}80%{transform:rotate(1deg)}}
/* Funken an der Hornspitze */
.yh-mod-avatar__funke{
  position:absolute;left:24%;top:4%;width:9%;aspect-ratio:1;background:var(--gelb);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  opacity:0;animation:yh-mod-funke 2.4s ease-out infinite;animation-delay:calc(var(--i) * .8s);
}
.yh-mod-avatar__funke:nth-of-type(2){background:var(--weiss)}
.yh-mod-avatar__funke:nth-of-type(3){background:var(--cyan)}
@keyframes yh-mod-funke{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}20%{opacity:1;transform:translate(-40%,-60%) scale(1) rotate(45deg)}100%{opacity:0;transform:translate(-120%,-200%) scale(.4) rotate(120deg)}}
/* Sprechblase mit tippenden Punkten */
.yh-mod-avatar__blase{
  position:absolute;right:-26%;top:10%;display:flex;gap:4px;padding:8px 11px;border-radius:14px 14px 14px 4px;
  background:var(--weiss);box-shadow:0 10px 24px rgba(10,4,40,.4);animation:yh-vb-schweben 5s ease-in-out infinite;
}
.yh-mod-avatar__blase i{width:6px;height:6px;border-radius:50%;background:var(--pink);animation:yh-mod-tipp 1.2s ease-in-out infinite}
.yh-mod-avatar__blase i:nth-child(2){animation-delay:.15s;background:var(--cyan)}
.yh-mod-avatar__blase i:nth-child(3){animation-delay:.3s;background:var(--gelb)}
@keyframes yh-mod-tipp{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.yh-mod-avatar__welle{height:12%;width:56%}
.yh-mod-orte{position:absolute;left:0;right:0;bottom:7%;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.yh-mod-orte span{
  padding:5px 12px;border-radius:99px;font-size:clamp(.62rem,2.6cqw,.78rem);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gelb);background:rgba(27,15,77,.75);box-shadow:inset 0 0 0 1px rgba(255,208,102,.5);
  animation:yh-vb-schweben 6s ease-in-out infinite;
}
.yh-mod-orte span:nth-child(2){animation-delay:-2s}
.yh-mod-orte span:nth-child(3){animation-delay:-4s}

/* VoiceBot: Sprachwelle mit Schallringen */
.yh-mod-voice{display:grid;place-items:center}
.yh-mod-voice .yh-vb-ring{left:50%;width:62cqw}
.yh-mod-voice__orb{width:38%;position:relative;z-index:1}
.yh-mod-voice .yh-vb-chip--a{left:8%;bottom:10%}
.yh-mod-voice .yh-vb-chip--b{right:8%;top:10%;animation-delay:-3s;color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(39,188,213,.5)}

/* Wissensmanagement: Interview, Antworten wandern in die Wissensbasis */
.yh-mod-wissen__chat{position:absolute;left:8%;right:8%;top:20%;display:flex;flex-direction:column;gap:5cqw}
.yh-mod-wissen__chat > span{
  display:flex;flex-direction:column;gap:6px;padding:3cqw 4cqw;max-width:62%;
  opacity:0;animation:yh-mod-chat 9s ease-in-out infinite;animation-delay:calc(var(--i) * .9s);
}
.yh-mod-wissen__chat i{display:block;height:6px;border-radius:3px;background:currentColor;opacity:.5}
.yh-mod-wissen__chat i:nth-child(2){width:70%}
.yh-mod-wissen__frage{align-self:flex-start;color:var(--violett);background:var(--weiss);border-radius:16px 16px 16px 4px}
.yh-mod-wissen__antwort{align-self:flex-end;width:56%;color:var(--weiss);background:var(--pink);border-radius:16px 16px 4px 16px}
@keyframes yh-mod-chat{
  0%{opacity:0;transform:translateY(10px)}
  6%,55%{opacity:1;transform:none}
  70%,100%{opacity:0;transform:translate(0,40px) scale(.6)}
}
.yh-mod-wissen__basis{position:absolute;left:50%;bottom:8%;width:40%;transform:translateX(-50%);display:flex;flex-direction:column-reverse;gap:4px}
.yh-mod-wissen__basis span{
  height:9px;border-radius:4px;background:linear-gradient(90deg,var(--cyan),#6fd6e8);box-shadow:0 0 12px rgba(39,188,213,.45);
  transform-origin:center;animation:yh-mod-ablegen 9s ease-in-out infinite;animation-delay:calc(var(--i) * .5s + 4.5s);
}
@keyframes yh-mod-ablegen{0%{transform:scaleX(0);opacity:0}8%,85%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* 1st Level Support: Updates hin, Feedback zurück */
.yh-mod-support{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:3cqw;padding:0 7% 10%}
.yh-mod-support__seite{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:clamp(.62rem,2.6cqw,.8rem);color:var(--text-leise)}
.yh-mod-support__seite small{font-size:inherit}
.yh-mod-support__punkt{
  width:18cqw;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:rgba(251,112,163,.15);box-shadow:inset 0 0 0 2px var(--pink),0 0 30px rgba(251,112,163,.35);
}
.yh-mod-support__punkt img{width:62%;height:62%;object-fit:contain}
.yh-mod-support__punkt--sie{color:var(--cyan);background:rgba(39,188,213,.15);box-shadow:inset 0 0 0 2px var(--cyan),0 0 30px rgba(39,188,213,.35)}
.yh-mod-support__punkt--sie svg{width:50%;height:50%}
.yh-mod-support__mitte{display:flex;flex-direction:column;gap:5cqw}
.yh-mod-support__pfeil{
  position:relative;padding:7px 10px;text-align:center;border-radius:99px;font-size:clamp(.6rem,2.4cqw,.76rem);font-weight:500;
  background:rgba(254,252,252,.06);box-shadow:inset 0 0 0 1px var(--linie);overflow:hidden;
}
.yh-mod-support__pfeil::after{
  content:"";position:absolute;top:0;bottom:0;width:30%;
  background:linear-gradient(90deg,transparent,rgba(254,252,252,.35),transparent);
  animation:yh-mod-hin 2.4s linear infinite;
}
.yh-mod-support__pfeil--hin{color:var(--pink)}
.yh-mod-support__pfeil--her{color:var(--cyan)}
.yh-mod-support__pfeil--her::after{animation-name:yh-mod-her;animation-delay:-1.2s}
@keyframes yh-mod-hin{from{left:-30%}to{left:100%}}
@keyframes yh-mod-her{from{left:100%}to{left:-30%}}

/* MIM: Alarm wird zum Schutzschild */
.yh-mod-mim{display:grid;place-items:center}
.yh-mod-mim__radar{
  position:absolute;left:50%;top:44%;width:60cqw;aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(251,112,163,.6);transform:translate(-50%,-50%) scale(.4);opacity:0;
  animation:yh-mod-radar 8s ease-out infinite;animation-delay:calc(var(--i) * .8s);
}
@keyframes yh-mod-radar{0%{opacity:.9;transform:translate(-50%,-50%) scale(.35)}25%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}
.yh-mod-mim__symbol{position:relative;width:30%;aspect-ratio:1;margin-top:-12%;display:grid}
.yh-mod-mim__symbol svg{grid-area:1/1;width:100%;height:100%}
.yh-mod-mim__alarm{color:var(--pink);filter:drop-shadow(0 0 14px rgba(251,112,163,.8));animation:yh-mod-alarm 8s ease-in-out infinite}
.yh-mod-mim__schild{color:#5ee68f;filter:drop-shadow(0 0 14px rgba(94,230,143,.7));animation:yh-mod-schild 8s ease-in-out infinite}
@keyframes yh-mod-alarm{0%,40%{opacity:1;transform:none}5%,15%,25%,35%{transform:scale(1.08)}10%,20%,30%{transform:scale(.96)}48%,100%{opacity:0;transform:scale(.6)}}
@keyframes yh-mod-schild{0%,44%{opacity:0;transform:scale(.6)}54%,94%{opacity:1;transform:none}100%{opacity:0}}
.yh-mod-mim__text{position:absolute;left:0;right:0;bottom:10%;display:grid;place-items:center}
.yh-mod-mim__text span{grid-area:1/1;padding:7px 14px;border-radius:99px;font-size:clamp(.7rem,2.8cqw,.88rem);font-weight:500;background:rgba(27,15,77,.8)}
.yh-mod-mim__text .is-alarm{color:var(--pink);box-shadow:inset 0 0 0 1px rgba(251,112,163,.6);animation:yh-mod-alarm-text 8s ease-in-out infinite}
.yh-mod-mim__text .is-ok{color:#5ee68f;box-shadow:inset 0 0 0 1px rgba(94,230,143,.6);opacity:0;animation:yh-mod-ok-text 8s ease-in-out infinite}
@keyframes yh-mod-alarm-text{0%,42%{opacity:1}48%,100%{opacity:0}}
@keyframes yh-mod-ok-text{0%,46%{opacity:0}54%,94%{opacity:1}100%{opacity:0}}

/* Outlook: E-Mails kommen an und werden bearbeitet */
.yh-mod-outlook__mails{position:absolute;left:8%;right:8%;top:22%;list-style:none;display:grid;gap:3cqw}
.yh-mod-outlook__mails li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4cqw;padding:3.4cqw 4cqw;border-radius:14px;
  background:rgba(254,252,252,.06);box-shadow:inset 0 0 0 1px var(--linie);
  opacity:0;animation:yh-vb-anruf 9s ease-in-out infinite;animation-delay:calc(var(--i) * .8s);
}
.yh-mod-outlook__icon{
  width:8cqw;aspect-ratio:4/3;border-radius:4px;border:2px solid var(--c);position:relative;
}
.yh-mod-outlook__icon::after{content:"";position:absolute;left:10%;right:10%;top:-10%;height:70%;border-right:2px solid var(--c);border-bottom:2px solid var(--c);transform:rotate(45deg) scale(.6);transform-origin:center}
.yh-mod-outlook__mails i{display:block;height:7px;border-radius:4px;background:rgba(254,252,252,.25)}
.yh-mod-outlook__mails b{
  font-weight:500;font-size:clamp(.6rem,2.5cqw,.76rem);letter-spacing:.08em;text-transform:uppercase;color:var(--c);
  opacity:0;animation:yh-mod-stempel 9s ease-in-out infinite;animation-delay:calc(var(--i) * .8s + 1.4s);
}
@keyframes yh-mod-stempel{0%{opacity:0;transform:scale(1.6)}5%,70%{opacity:1;transform:none}80%,100%{opacity:0}}

/* Meeting Recorder: Aufnahme, Transkript, fertiges PDF */
.yh-mod-recorder__rec{display:inline-flex;align-items:center;gap:7px}
.yh-mod-recorder__rec b{width:9px;height:9px;border-radius:50%;background:#e5484d;animation:yh-mod-rec 1.2s ease-in-out infinite}
@keyframes yh-mod-rec{0%,100%{opacity:1}50%{opacity:.25}}
.yh-mod-recorder__welle{position:absolute;left:8%;width:46%;top:22%;height:16%;display:flex;align-items:center;gap:3%}
.yh-mod-recorder__welle i{flex:1;height:100%;border-radius:3px;background:linear-gradient(to top,var(--pink),var(--gelb));animation:yh-vb-welle 1.1s ease-in-out infinite}
.yh-mod-recorder__welle i:nth-child(3n){animation-delay:-.3s}
.yh-mod-recorder__welle i:nth-child(3n+1){animation-delay:-.6s}
.yh-mod-recorder__welle i:nth-child(4n){animation-delay:-.9s}
.yh-mod-recorder__zeilen{position:absolute;left:8%;width:46%;top:46%;display:flex;flex-direction:column;gap:3cqw}
.yh-mod-recorder__zeilen i{
  display:block;height:7px;width:var(--w);border-radius:4px;background:rgba(254,252,252,.4);
  transform-origin:left;animation:yh-mod-tippen 8s steps(12) infinite;animation-delay:calc(var(--i) * .9s);
}
@keyframes yh-mod-tippen{0%{transform:scaleX(0)}20%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.yh-mod-recorder__pdf{
  position:absolute;right:8%;top:22%;bottom:12%;width:32%;padding:4cqw 3cqw;border-radius:10px;
  display:flex;flex-direction:column;gap:2.4cqw;background:var(--weiss);color:var(--violett);
  font-size:clamp(.56rem,2.3cqw,.74rem);font-weight:500;box-shadow:0 14px 30px rgba(10,4,40,.45);
  animation:yh-mod-pdf 8s ease-in-out infinite;
}
.yh-mod-recorder__pdf span:not(.yh-mod-recorder__pdfkopf){display:flex;align-items:center;gap:6px}
.yh-mod-recorder__pdf span:not(.yh-mod-recorder__pdfkopf)::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--cyan);flex:0 0 auto}
.yh-mod-recorder__pdfkopf{align-self:flex-start;padding:2px 8px;border-radius:4px;background:#e5484d;color:#fff;font-weight:700;letter-spacing:.08em}
@keyframes yh-mod-pdf{0%,35%{opacity:0;transform:translateY(16px) rotate(4deg)}45%,90%{opacity:1;transform:none}100%{opacity:0}}

/* 90+ Fähigkeiten: große Zahl, aufpoppende Beispiele */
.yh-mod-faehig{display:grid;place-items:center}
.yh-mod-faehig__zahl{
  margin-top:-6%;font-weight:700;font-size:clamp(3rem,22cqw,6.5rem);line-height:1;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--gelb),var(--cyan));background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:yh-grow-schimmer 6s linear infinite;
  filter:drop-shadow(0 0 20px rgba(251,112,163,.4));
}
.yh-mod-faehig__chip{
  position:absolute;left:var(--x);top:var(--y);padding:6px 12px;border-radius:99px;white-space:nowrap;
  font-size:clamp(.62rem,2.6cqw,.8rem);font-weight:500;color:var(--weiss);
  background:rgba(27,15,77,.8);box-shadow:inset 0 0 0 1px rgba(39,188,213,.5);
  opacity:0;animation:yh-mod-pop 9s ease-in-out infinite;animation-delay:calc(var(--i) * 1.2s);
}
@keyframes yh-mod-pop{0%{opacity:0;transform:scale(.5)}6%,60%{opacity:1;transform:none}70%,100%{opacity:0;transform:scale(.9)}}
.yh-mod-faehig__stern{
  position:absolute;left:var(--x);top:var(--y);width:10px;height:10px;background:var(--gelb);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:yh-funkeltitel-stern 3s ease-in-out infinite;animation-delay:calc(var(--i) * .6s);
}

/* Überblick: Symbole leuchten beim Darüberfahren */
.yh-mod-uebersicht .yh-card__icon{transition:transform .3s ease,filter .3s ease}
.yh-mod-uebersicht .yh-card:hover .yh-card__icon{transform:scale(1.1) rotate(-4deg);filter:drop-shadow(0 0 10px rgba(39,188,213,.6))}

@media (prefers-reduced-motion:reduce){
  .yh-mod-pseudo__blatt em{background:var(--violett)}
  .yh-mod-wissen__chat > span,.yh-mod-outlook__mails li,.yh-mod-outlook__mails b,.yh-mod-faehig__chip,.yh-mod-recorder__pdf{opacity:1}
  .yh-mod-mim__alarm,.yh-mod-mim__text .is-alarm{opacity:0}
  .yh-mod-mim__text .is-ok{opacity:1}
}

/* Mitlaufende Skill-Übersicht (Modulseite): bleibt beim Scrollen oben stehen,
   rutscht unter den Kopf, solange dieser sichtbar ist */
.yh-mod-agenda{position:sticky;top:0;z-index:40;padding:10px var(--rand);transition:top .3s ease}
body:has(.yh-top:not(.yh-top--versteckt)) .yh-mod-agenda{top:var(--yh-kopfhoehe,96px)}
.yh-mod-agenda__inner{
  max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;
  padding:6px;border-radius:999px;
  background:rgba(27,15,77,.78);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 0 0 1px var(--linie),0 10px 30px rgba(10,4,40,.35);
}
.yh-mod-agenda__inner::-webkit-scrollbar{display:none}
.yh-mod-agenda__titel{flex:0 0 auto;padding:0 10px 0 14px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.yh-mod-agenda a{
  flex:0 0 auto;white-space:nowrap;padding:8px 13px;border-radius:999px;
  font-size:.85rem;color:var(--text-leise);text-decoration:none;transition:background .25s ease,color .25s ease
}
.yh-mod-agenda a:hover{background:rgba(254,252,252,.08);color:var(--weiss)}
.yh-mod-agenda a.is-aktiv{background:var(--cyan);color:var(--violett);font-weight:500;box-shadow:0 0 18px rgba(39,188,213,.45)}
.yh-mod-bereich section[id]{scroll-margin-top:80px}
@media (max-width:900px){.yh-mod-agenda__titel{display:none}}

/* Modulseite: "Welche magischen Fähigkeiten brauchen Sie noch?" */
.yh-mod-wunsch{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center;text-align:left}
.yh-mod-wunsch .yh-actions{justify-content:flex-start}
.yh-mod-wunsch__tel{display:inline-flex;align-items:center;gap:9px}
.yh-mod-wunsch__bild{position:relative;aspect-ratio:1;display:grid;place-items:center}
.yh-mod-wunsch__ring{
  position:absolute;inset:14%;border-radius:50%;
  background:radial-gradient(circle,rgba(251,112,163,.35),rgba(39,188,213,.12) 60%,transparent 72%);
  box-shadow:0 0 0 2px rgba(251,112,163,.5),0 0 60px rgba(251,112,163,.35);
  animation:yh-mod-wunschring 4s ease-in-out infinite;
}
@keyframes yh-mod-wunschring{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.yh-mod-wunsch__bot{position:relative;width:74%;height:auto;animation:yh-vb-schweben 5s ease-in-out infinite;filter:drop-shadow(0 16px 30px rgba(10,4,40,.5))}
/* Gedankenblase mit Fragezeichen */
.yh-mod-wunsch__gedanke{position:absolute;right:4%;top:4%;width:30%;aspect-ratio:1}
.yh-mod-wunsch__gedanke b{
  position:absolute;right:0;top:0;width:70%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:var(--weiss);color:var(--pink);font-weight:700;font-size:clamp(1.4rem,3vw,2.2rem);
  box-shadow:0 10px 24px rgba(10,4,40,.4);animation:yh-mod-gedanke 3s ease-in-out infinite;
}
.yh-mod-wunsch__gedanke i{position:absolute;border-radius:50%;background:var(--weiss)}
.yh-mod-wunsch__gedanke i:nth-child(1){left:0;bottom:0;width:14%;aspect-ratio:1}
.yh-mod-wunsch__gedanke i:nth-child(2){left:16%;bottom:16%;width:22%;aspect-ratio:1}
@keyframes yh-mod-gedanke{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.08)}}
.yh-mod-wunsch__funke{
  position:absolute;left:var(--x);top:var(--y);width:16px;height:16px;background:var(--gelb);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:yh-funkeltitel-stern 3s ease-in-out infinite;animation-delay:calc(var(--i) * .7s);
}
.yh-mod-wunsch__funke:nth-of-type(odd){background:var(--cyan)}
.yh-mod-wunsch__plus{
  position:absolute;left:var(--x);top:var(--y);padding:5px 11px;border-radius:99px;white-space:nowrap;
  font-size:.74rem;font-weight:500;color:var(--violett);background:var(--gelb);box-shadow:0 0 18px rgba(255,208,102,.5);
  opacity:0;animation:yh-mod-pop 7s ease-in-out infinite;animation-delay:calc(var(--i) * 3.5s);
}
@media (max-width:900px){
  .yh-mod-wunsch{grid-template-columns:1fr;text-align:center}
  .yh-mod-wunsch__bild{width:min(320px,80%);margin:0 auto}
  .yh-mod-wunsch .yh-actions{justify-content:center}
}
@media (prefers-reduced-motion:reduce){.yh-mod-wunsch__plus{opacity:1}}

/* ============================================================
   SVG-Illustrationen im Website-Stil (BotBucket, VoiceBot, Sicherheit)
   Dunkle Glasflächen, Montserrat, Markenfarben.
   ============================================================ */
.yh-ill{
  position:relative;border-radius:22px;padding:clamp(14px,2.4vw,28px);
  background:
    radial-gradient(ellipse 60% 60% at 80% 10%,rgba(39,188,213,.16),transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 95%,rgba(251,112,163,.14),transparent 70%),
    rgba(27,15,77,.55);
  box-shadow:inset 0 0 0 1px var(--linie),0 20px 50px rgba(10,4,40,.35);
}
.yh-ill svg{display:block;width:100%;height:auto;overflow:visible}
.yh-ill text{font-family:"Montserrat",Arial,sans-serif}
.yh-ill .p{fill:rgba(254,252,252,.06);stroke:rgba(254,252,252,.16);stroke-width:1.5}
.yh-ill .p-gelb{fill:rgba(255,208,102,.14);stroke:rgba(255,208,102,.55);stroke-width:1.5}
.yh-ill .t{fill:var(--weiss);font-size:14px;font-weight:400}
.yh-ill .t-h{fill:var(--weiss);font-size:18px;font-weight:700}
.yh-ill .t-s{fill:var(--weiss);font-size:14px;font-weight:500}
.yh-ill .t-m{fill:var(--weiss);fill-opacity:.62;font-size:12.5px;font-weight:400}
.yh-ill .t-k{fill:var(--weiss);fill-opacity:.9;font-size:13px;font-weight:500}
.yh-ill .t-z{fill:var(--weiss);font-size:32px;font-weight:700}
.yh-ill .t-dunkel{fill:var(--violett);font-size:14px;font-weight:500}
.yh-ill .t-chip{fill:var(--gelb);font-size:12px;font-weight:500;letter-spacing:.04em}
.yh-ill rect[fill="#D2EED2"] + .t-chip,.yh-ill-gespraech .t-chip{fill:var(--violett)}
.yh-ill .t-chip-w{fill:var(--weiss);font-size:12px;font-weight:500}
.yh-ill .t-btn{fill:var(--weiss);font-size:14px;font-weight:700;letter-spacing:.04em}
.yh-ill .t-ziffer text{fill:var(--weiss);font-size:24px;font-weight:700}
.yh-ill .t-codezahl{fill:var(--violett);font-size:28px;font-weight:700;letter-spacing:4px}

/* Statistiken: Balken wachsen, Linie zeichnet sich, Themen füllen sich */
.yh-ill-stats .s-bar{transform-box:fill-box;transform-origin:bottom;animation:yh-ill-bar 8s infinite}
.yh-ill-stats .s-bar:nth-child(2){animation-delay:.12s}.yh-ill-stats .s-bar:nth-child(3){animation-delay:.24s}
.yh-ill-stats .s-bar:nth-child(4){animation-delay:.36s}.yh-ill-stats .s-bar:nth-child(5){animation-delay:.48s}
.yh-ill-stats .s-bar:nth-child(6){animation-delay:.6s}.yh-ill-stats .s-bar:nth-child(7){animation-delay:.72s}
@keyframes yh-ill-bar{0%{transform:scaleY(0)}14%,90%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.yh-ill-stats .s-linie{stroke-dasharray:560;stroke-dashoffset:560;animation:yh-ill-linie 8s infinite}
@keyframes yh-ill-linie{0%,8%{stroke-dashoffset:560}30%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:560}}
.yh-ill-stats .s-thema{transform-box:fill-box;transform-origin:left;animation:yh-ill-thema 8s infinite}
@keyframes yh-ill-thema{0%,10%{transform:scaleX(0)}26%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.yh-ill .s-fade{opacity:0;animation:yh-ill-fade 8s infinite}
@keyframes yh-ill-fade{0%,26%{opacity:0}32%,90%{opacity:1}100%{opacity:0}}

/* Feedback: Daumen hoch, Kommentar, Brief fliegt ins Postfach */
.yh-ill-feedback .f-gewaehlt{opacity:0;animation:yh-ill-f-wahl 10s infinite}
@keyframes yh-ill-f-wahl{0%,20%{opacity:0}23%,94%{opacity:1}100%{opacity:0}}
.yh-ill-feedback .f-icon{animation:yh-ill-f-icon 10s infinite}
@keyframes yh-ill-f-icon{0%,20%{stroke:#FEFCFC}23%,94%{stroke:#27166F}100%{stroke:#FEFCFC}}
.yh-ill-feedback .f-klick{transform-box:fill-box;transform-origin:center;opacity:0;animation:yh-ill-f-klick 10s infinite}
@keyframes yh-ill-f-klick{0%,16%{opacity:0;transform:scale(.4)}19%{opacity:1;transform:scale(1)}24%,100%{opacity:0;transform:scale(1.6)}}
.yh-ill-feedback .f-kommentar{opacity:0;animation:yh-ill-f-erscheinen 10s infinite}
@keyframes yh-ill-f-erscheinen{0%,28%{opacity:0;transform:translateY(8px)}34%,94%{opacity:1;transform:none}100%{opacity:0}}
.yh-ill-feedback .f-senden{opacity:.45;animation:yh-ill-f-senden 10s infinite}
@keyframes yh-ill-f-senden{0%,38%{opacity:.45}42%,94%{opacity:1}100%{opacity:.45}}
.yh-ill-feedback .f-brief{
  offset-path:path("M524 300C600 300 620 250 676 250");offset-rotate:0deg;
  opacity:0;animation:yh-ill-f-brief 10s ease-in-out infinite;
}
@keyframes yh-ill-f-brief{0%,46%{offset-distance:0%;opacity:0}49%{opacity:1}62%{offset-distance:100%;opacity:1}66%,100%{offset-distance:100%;opacity:0}}
.yh-ill-feedback .f-neu{opacity:0;animation:yh-ill-f-neu 10s infinite}
@keyframes yh-ill-f-neu{0%,64%{opacity:0;transform:translateY(-10px)}70%,94%{opacity:1;transform:none}100%{opacity:0}}

/* Zwei-Faktor: Code kommt per E-Mail und wird eingetragen */
.yh-ill-2fa .z-code{opacity:0;animation:yh-ill-z-code 8s infinite}
@keyframes yh-ill-z-code{0%,12%{opacity:0}20%,94%{opacity:1}100%{opacity:0}}
.yh-ill-2fa .z-fluss{stroke-dasharray:6 9;animation:yh-ill-z-fluss 1s linear infinite}
@keyframes yh-ill-z-fluss{to{stroke-dashoffset:-15}}
.yh-ill-2fa .z-ziffer{opacity:0;animation:yh-ill-z-ziffer 8s infinite}
@keyframes yh-ill-z-ziffer{0%,30%{opacity:0}36%,94%{opacity:1}100%{opacity:0}}
.yh-ill-2fa .z-ok{transform-box:fill-box;transform-origin:center;opacity:0;animation:yh-ill-z-ok 8s infinite}
@keyframes yh-ill-z-ok{0%,58%{opacity:0;transform:scale(.6)}64%{opacity:1;transform:scale(1.1)}68%,94%{opacity:1;transform:scale(1)}100%{opacity:0}}
.yh-ill-2fa .z-glow{animation:yh-ill-z-glow 3s ease-in-out infinite}
@keyframes yh-ill-z-glow{0%,100%{opacity:.25}50%{opacity:.9}}

/* VoiceBot-Gespräch */
.yh-ill-gespraech .g-bar{transform-box:fill-box;transform-origin:center;animation:yh-ill-g-bar 1.1s ease-in-out infinite}
@keyframes yh-ill-g-bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.yh-ill-gespraech .g-ring{transform-box:fill-box;transform-origin:center;animation:yh-ill-g-ring 2.4s ease-out infinite}
@keyframes yh-ill-g-ring{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.3)}}
.yh-ill-gespraech .g-msg{opacity:0;animation:yh-ill-g-msg 9s infinite}
@keyframes yh-ill-g-msg{0%,4%{opacity:0;transform:translateY(8px)}10%,88%{opacity:1;transform:none}100%{opacity:0}}
.yh-ill-gespraech .g-live{animation:yh-mod-rec 1.6s ease-in-out infinite}

/* Quellen fließen zu BotBucket, Antwort entsteht */
.yh-ill-quellen .q-dot{animation:yh-ill-q-move 3s linear infinite;offset-rotate:0deg}
.yh-ill-quellen .q-dot--1{offset-path:path("M250 120C330 120 330 270 410 270")}
.yh-ill-quellen .q-dot--2{offset-path:path("M250 220C330 220 330 270 410 270");animation-delay:.6s}
.yh-ill-quellen .q-dot--3{offset-path:path("M250 320C330 320 330 270 410 270");animation-delay:1.2s}
.yh-ill-quellen .q-dot--4{offset-path:path("M250 420C330 420 330 270 410 270");animation-delay:1.8s}
.yh-ill-quellen .q-dot--5{offset-path:path("M590 270H650");animation-duration:1.5s}
@keyframes yh-ill-q-move{0%{offset-distance:0%;opacity:0}10%,90%{opacity:1}100%{offset-distance:100%;opacity:0}}
.yh-ill-quellen .q-puls{transform-box:fill-box;transform-origin:center;animation:yh-ill-q-puls 2.4s ease-out infinite}
@keyframes yh-ill-q-puls{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.4)}}
.yh-ill-quellen .q-zeile{transform-box:fill-box;transform-origin:left center;animation:yh-ill-q-zeile 7s infinite}
@keyframes yh-ill-q-zeile{0%,10%{transform:scaleX(0)}22%,100%{transform:scaleX(1)}}
.yh-ill-quellen .q-basis{opacity:0;animation:yh-ill-q-basis 7s infinite}
@keyframes yh-ill-q-basis{0%,26%{opacity:0}32%,92%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .yh-ill .s-fade,.yh-ill-feedback .f-gewaehlt,.yh-ill-feedback .f-kommentar,.yh-ill-feedback .f-neu,.yh-ill-feedback .f-senden,
  .yh-ill-2fa .z-code,.yh-ill-2fa .z-ziffer,.yh-ill-2fa .z-ok,.yh-ill-gespraech .g-msg,.yh-ill-quellen .q-basis{opacity:1}
  .yh-ill-feedback .f-brief,.yh-ill-quellen .q-dot,.yh-ill-feedback .f-klick{display:none}
  .yh-ill-stats .s-linie{stroke-dashoffset:0}
}
.yh-ill-block{margin-top:44px}
.yh-ill-block > .yh-h3{color:var(--cyan)}
.yh-ill-block > .yh-ill{margin-top:22px;max-width:1040px}
.yh-ill-block--eng{margin-top:32px}

/* ---------- Highlights-Seite (highlights.html) ---------- */
.yh-hl-titel span{display:inline-block}
.yh-hl-magic{
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--gelb),var(--cyan));background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:yh-grow-schimmer 6s linear infinite;
}
.yh-hl-sprung{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.yh-hl-sprung a{padding:9px 16px;border-radius:999px;font-size:.88rem;text-decoration:none;color:var(--text-leise);box-shadow:inset 0 0 0 1px var(--linie);transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.yh-hl-sprung a:hover{color:var(--weiss);background:rgba(39,188,213,.12);box-shadow:inset 0 0 0 1px var(--cyan)}
.yh-hl{scroll-margin-top:90px}
.yh-hl .yh-card__badge{margin-bottom:16px}
.yh-hl:nth-of-type(odd) .yh-split > :first-child{order:2}
.yh-hl-bild{border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px var(--linie),0 24px 60px rgba(10,4,40,.45)}
.yh-hl-bild img{display:block;width:100%;height:auto;transition:transform .6s ease}
.yh-hl-bild:hover img{transform:scale(1.04)}
/* Process Engine als kleiner Ablauf */
.yh-hl-pe{
  display:flex;flex-direction:column;gap:14px;padding:clamp(22px,4vw,40px);border-radius:22px;text-decoration:none;color:var(--weiss);
  background:radial-gradient(ellipse 60% 60% at 80% 10%,rgba(39,188,213,.18),transparent 70%),radial-gradient(ellipse 50% 50% at 10% 95%,rgba(251,112,163,.16),transparent 70%),rgba(27,15,77,.55);
  box-shadow:inset 0 0 0 1px var(--linie),0 20px 50px rgba(10,4,40,.35);transition:box-shadow .3s ease
}
.yh-hl-pe:hover{box-shadow:inset 0 0 0 1px var(--cyan),0 20px 50px rgba(10,4,40,.35)}
.yh-hl-pe__schritt{
  position:relative;padding:14px 18px 14px 52px;border-radius:14px;font-weight:500;
  background:rgba(254,252,252,.06);box-shadow:inset 0 0 0 1px var(--linie);
  animation:yh-hl-schritt 6s ease-in-out infinite;animation-delay:calc(var(--i) * 1.2s)
}
.yh-hl-pe__schritt::before{content:"";position:absolute;left:18px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--cyan)}
.yh-hl-pe__schritt--ziel::before{background:var(--gelb);box-shadow:0 0 14px rgba(255,208,102,.7)}
@keyframes yh-hl-schritt{0%,100%{background:rgba(254,252,252,.06);transform:none}10%,22%{background:rgba(39,188,213,.22);transform:translateX(8px)}}
@media (max-width:900px){.yh-hl:nth-of-type(odd) .yh-split > :first-child{order:0}}
/* Highlights: KI-Führerschein als Startbild */
.yh-hl-fs{position:relative;display:block;aspect-ratio:16/9}
.yh-hl-fs .yh-startbild{pointer-events:none}
.yh-hl-fs:hover .yh-startbild__play{transform:scale(1.08);background:var(--gelb)}

/* ---------- KI-Führerschein: Zertifikat zum Screenshotten (Kursseite) ---------- */
.yh-zert__form[hidden],.yh-zert__tipp[hidden]{display:none !important}
.yh-zert__form{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;max-width:620px}
.yh-zert__form .yh-newsletter__input{flex:1 1 260px}
.yh-zert{position:relative;max-width:640px;margin-top:36px}
.yh-zert__karte{
  position:relative;overflow:hidden;border-radius:20px;color:var(--violett);
  background:
    radial-gradient(circle at 88% 12%,rgba(255,208,102,.55),transparent 42%),
    radial-gradient(circle at 8% 92%,rgba(39,188,213,.38),transparent 48%),
    linear-gradient(135deg,#fff 0%,#fde7f0 52%,#e3f6fa 100%);
  box-shadow:0 24px 60px rgba(10,4,40,.5),0 0 0 1px rgba(255,255,255,.6) inset;
  transition:filter .6s ease,opacity .6s ease;
}
/* Holografischer Schimmer */
.yh-zert__karte::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.7) 45%,rgba(251,112,163,.25) 50%,transparent 62%);
  background-size:250% 100%;animation:yh-zert-schimmer 5s ease-in-out infinite;
}
@keyframes yh-zert-schimmer{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
.yh-zert__kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 26px 12px 14px;background:var(--violett);color:var(--weiss)}
.yh-zert__kopf img{height:52px;width:auto}
.yh-zert__kopf span{font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.yh-zert__inhalt{padding:26px 30px 24px;text-align:center}
.yh-zert__klein{margin:0;font-size:.86rem;color:rgba(39,22,111,.7)}
.yh-zert__name{margin:8px 0 10px;font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700;line-height:1.15;color:var(--violett)}
.yh-zert__titel{margin:10px 0 6px;font-size:clamp(1.05rem,2.2vw,1.3rem);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.yh-zert__titel span{display:block;margin-top:2px;font-size:.78rem;font-weight:500;letter-spacing:.14em;color:#1a8aa0}
.yh-zert__stempel{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:18px 0 0;padding:0}
.yh-zert__stempel li{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;text-align:center;
  font-size:.56rem;font-weight:700;line-height:1;text-transform:uppercase;
  color:var(--pink);border:2px solid var(--pink);transform:rotate(-10deg);
}
.yh-zert__stempel li:nth-child(3n+2){color:#1a8aa0;border-color:#1a8aa0;transform:rotate(8deg)}
.yh-zert__stempel li:nth-child(3n){color:#b8860b;border-color:#b8860b;transform:rotate(-4deg)}
.yh-zert__fuss{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(39,22,111,.15);font-size:.74rem;color:rgba(39,22,111,.65)}
.yh-zert__fuss span:first-child{text-align:left}
.yh-zert__fuss span:last-child{text-align:right}
.yh-zert__fuss b{display:block;margin-top:2px;font-size:.92rem;color:var(--violett)}
.yh-zert__siegel{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;color:var(--weiss);
  background:linear-gradient(135deg,var(--cyan),var(--pink),var(--gelb));box-shadow:0 0 0 4px rgba(255,255,255,.8),0 0 20px rgba(251,112,163,.5);
}
/* Gesperrt: verschwommene Vorschau mit Schloss */
.yh-zert__schloss{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  border-radius:20px;color:var(--weiss);background:rgba(27,15,77,.45);
}
.yh-zert__schloss svg{width:44px;height:44px;color:var(--gelb);filter:drop-shadow(0 0 12px rgba(255,208,102,.6))}
.yh-zert__schloss strong{font-size:1.3rem;font-weight:700}
.yh-zert__schloss span{font-size:.9rem;color:var(--text-leise)}
.yh-zert.is-gesperrt .yh-zert__karte{filter:blur(5px) saturate(.6);opacity:.75}
.yh-zert.is-gesperrt .yh-zert__schloss{display:flex}
.yh-zert.is-leer .yh-zert__karte{filter:saturate(.8);opacity:.85}
.yh-zert.is-neu .yh-zert__karte{animation:yh-zert-ein .9s cubic-bezier(.2,1.4,.4,1) both}
@keyframes yh-zert-ein{from{opacity:0;transform:perspective(800px) rotateX(30deg) scale(.85)}to{opacity:1;transform:none}}
.yh-zert__tipp{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;max-width:640px;margin-top:26px}
.yh-zert__tipp .yh-btn[disabled]{opacity:.6;cursor:wait;transform:none}
.yh-zert__link{background:none;border:0;padding:0;font:inherit;font-size:.9rem;color:var(--cyan);text-decoration:underline;cursor:pointer}
.yh-zert.is-export .yh-zert__karte{animation:none;box-shadow:none}
.yh-zert.is-export .yh-zert__karte::after{display:none}
/* Zertifikat: Zierrahmen und Umfang */
.yh-zert__inhalt{position:relative}
.yh-zert__inhalt::before{content:"";position:absolute;inset:10px;border:1px solid rgba(39,22,111,.14);border-radius:12px;pointer-events:none}
.yh-zert__umfang{display:inline-block;margin:14px 0 0;padding:4px 12px;border-radius:999px;font-size:.72rem;font-weight:500;letter-spacing:.04em;color:var(--violett);background:rgba(39,22,111,.07)}
/* Druck / PDF: nur das Zertifikat, farbecht, ohne Animationen */
@media print{
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff !important}
  body *{visibility:hidden}
  .yh-zert,.yh-zert *{visibility:visible}
  .yh-zert{position:absolute;left:0;top:0;width:100%;max-width:none;margin:0}
  .yh-zert__karte{box-shadow:none;border:1px solid rgba(39,22,111,.2);-webkit-print-color-adjust:exact;print-color-adjust:exact;animation:none !important}
  .yh-zert__karte::after,.yh-zert__schloss{display:none !important}
  .yh-zert__kopf,.yh-zert__siegel,.yh-zert__umfang{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .yh-zert__inhalt{padding:40px 60px 34px}
  .yh-zert__name{font-size:2.4rem}
}
.yh-zert__extra[hidden]{display:none !important}
.yh-zert__extra{max-width:640px;margin-top:40px}
.yh-zert__extra .yh-actions{margin-top:16px;margin-bottom:24px}
.yh-zert__extra .yh-text a{color:var(--cyan)}
.yh-kurs__zielhinweis{
  display:flex;align-items:center;gap:18px;margin-top:32px;padding:18px 24px;
  border:1px solid var(--linie);border-radius:16px;background:var(--flaeche);
  text-decoration:none;color:inherit;transition:border-color .2s ease,transform .2s ease;
}
.yh-kurs__zielhinweis:hover{border-color:var(--gelb);transform:translateY(-2px)}
.yh-kurs__zielicon{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  color:var(--violett);background:var(--gelb);box-shadow:0 0 18px rgba(255,208,102,.35);
}
.yh-kurs__zielicon svg{width:28px;height:28px}
.yh-kurs__zieltext{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;line-height:1.45}
.yh-kurs__zieltext strong{font-weight:700;font-size:1rem}
.yh-kurs__zieltext span{font-size:.9rem;color:var(--text-leise)}
.yh-kurs__zielpfeil{flex:0 0 auto;font-size:1.2rem;color:var(--gelb)}
@media (max-width:560px){
  .yh-kurs__zielhinweis{gap:14px;padding:16px}
  .yh-kurs__zielicon{width:44px;height:44px}
  .yh-kurs__zielpfeil{display:none}
}
@media (max-width:560px){
  .yh-zert__inhalt{padding:22px 18px}
  .yh-zert__stempel li{width:38px;height:38px;font-size:.5rem}
  .yh-zert__kopf img{height:40px}
}
.yh-roadmap__zieltext em{display:block;margin-top:10px;font-style:normal;font-size:.9rem;color:var(--gelb)}

/* ============================================================
   Karriere: "Unique like you" und wechselnde Suchbegriffe
   ============================================================ */
.yh-uly{text-align:center}
.yh-uly__titel{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .28em}
.yh-js .yh-uly__titel.yh-reveal{opacity:1;transform:none}
.yh-gross .yh-uly__wort{display:inline-flex;color:var(--weiss)}
.yh-uly__wort i{font-style:normal;display:inline-block}
/* Buchstaben fallen leicht gedreht nacheinander herein */
.yh-js .yh-uly__wort i{opacity:0}
.yh-js .yh-uly__titel.is-visible .yh-uly__wort i{animation:yh-uly-fallen .7s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * .07s) both}
@keyframes yh-uly-fallen{
  from{opacity:0;transform:translateY(-1.1em) rotate(var(--r))}
  to{opacity:1;transform:none}
}
/* "you" ploppt danach auf, schimmert und funkelt */
.yh-gross .yh-uly__you{
  position:relative;display:inline-block;color:transparent;
  background:linear-gradient(90deg,var(--pink),var(--gelb),var(--cyan),var(--pink));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 18px color-mix(in srgb,var(--pink) 45%,transparent));
}
.yh-uly__you::before,.yh-uly__you::after{
  content:"";position:absolute;width:.32em;aspect-ratio:1;background:var(--gelb);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  animation:yh-grow-funkeln 2.4s ease-in-out infinite;
}
.yh-uly__you::before{right:-.22em;top:-.12em}
.yh-uly__you::after{left:-.18em;bottom:.02em;width:.2em;background:var(--cyan);animation-delay:1.2s}
.yh-js .yh-uly__you{opacity:0}
.yh-js .yh-uly__titel.is-visible .yh-uly__you{
  animation:yh-uly-you .9s cubic-bezier(.3,1.7,.5,1) .85s both,yh-grow-schimmer 6s linear 1.8s infinite;
}
@keyframes yh-uly-you{
  from{opacity:0;transform:scale(.2) rotate(-14deg)}
  to{opacity:1;transform:none}
}
/* "Bewirb dich, wie du bist." erscheint danach, die Unterstreichung zieht sich durch */
.yh-uly__sub{margin-top:.7em;font-size:clamp(1.3rem,3.4vw,2.4rem);font-weight:300;color:var(--weiss)}
.yh-js .yh-uly__sub.yh-reveal{transition-delay:1.4s}
.yh-uly__mark{position:relative;display:inline-block;font-weight:600}
.yh-uly__mark::after{
  content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.12em;border-radius:1em;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--gelb));
  transform-origin:left;transform:scaleX(1);
}
.yh-js .yh-uly__mark::after{transform:scaleX(0);transition:transform .8s cubic-bezier(.6,0,.2,1) 2.1s}
.yh-js .yh-uly__sub.is-visible .yh-uly__mark::after{transform:scaleX(1)}

/* Wechselnde Begriffe: "Immer auf der Suche nach …" */
.yh-wechsel__vor{display:block}
.yh-wechsel__woerter{display:inline-grid;margin-top:.1em}
.yh-wechsel__woerter span{grid-area:1/1;color:var(--pink)}
.yh-wechsel__woerter span:nth-child(2){color:var(--cyan)}
.yh-wechsel__woerter span:nth-child(3){color:var(--gelb)}
.yh-js .yh-wechsel__woerter span{opacity:0;animation:yh-wechsel 10.4s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 2.6s) infinite backwards}
@keyframes yh-wechsel{
  0%{opacity:0;transform:translateY(.5em);filter:blur(6px)}
  4%,21%{opacity:1;transform:none;filter:blur(0)}
  25%,100%{opacity:0;transform:translateY(-.5em);filter:blur(6px)}
}


@media (prefers-reduced-motion:reduce){
  .yh-js .yh-uly__wort i,.yh-js .yh-uly__you{opacity:1}
  .yh-js .yh-uly__mark::after{transform:scaleX(1)}
  .yh-js .yh-wechsel__woerter span{opacity:0}
  .yh-js .yh-wechsel__woerter span:first-child{opacity:1}
}