/* Guides und Glossar. Hero: Guides-Seite eines Hubs im Browser (Bausteine aus sc-widgets.css).
   Der Bereich bekommt seinen Namen, ein neuer Guide kommt dazu, das Glossar klappt auf,
   dann nennt ein KI-Assistent den Hub als Quelle. Takt 14 s. Hub-Attrappen bleiben hell wie der echte Hub. */
.wb-seite{--m:#9A4A24;aspect-ratio:16/8.6;background:#F3F1EE}
.wb-seite .ww-karte,.wb-seite .ww-karte p{animation:none}
.wb-seite .ww-karte{background:#fff}
.wb-seite .ww-karte p{color:#1B1B1B}
.wb-szene{padding-bottom:clamp(110px,13vw,160px)}
.wb-seite .ww-karte.ww-neu{animation:ww-neu 14s infinite}
.wb-seite .ww-karte:last-child{animation:ww-raus 14s infinite}
.wb-seite .ww-karte u{color:var(--m)}
.wb-seite .ww-karten{margin:0 calc(var(--e)*3)}
.wb-tabs{display:flex;gap:calc(var(--e)*.7);padding:calc(var(--e)*1.8) calc(var(--e)*3) 0}
.wb-tabs > span{padding:calc(var(--e)*.5) calc(var(--e)*1.2);border-radius:999px;background:#fff;font-size:calc(var(--e)*1.15);font-weight:600;white-space:nowrap}
.wb-tabs > span.an{background:var(--m);color:#fff}
.wb-name{display:inline-grid;vertical-align:top}
.wb-name i{grid-area:1/1;font-style:normal}
.wb-name i:first-child{animation:wb-n1 14s infinite}
.wb-name i:last-child{animation:wb-n2 14s infinite}
@keyframes wb-n1{0%,10%{opacity:1;transform:none}14%,96%{opacity:0;transform:translateY(-40%)}100%{opacity:1;transform:none}}
@keyframes wb-n2{0%,11%{opacity:0;transform:translateY(40%)}15%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
.wb-kopf{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--e)*1.4);padding:calc(var(--e)*2) calc(var(--e)*3) 0}
.wb-kopf b{font-family:var(--f-display,inherit);font-size:calc(var(--e)*2.6);letter-spacing:-.02em;color:#1B1B1B}
.wb-glk{padding:calc(var(--e)*.6) calc(var(--e)*1.2);border-radius:calc(var(--e)*.8);background:#fff;box-shadow:inset 0 0 0 1px rgba(22,23,26,.14);font-size:calc(var(--e)*1.1);font-weight:700;color:#1B1B1B;animation:wb-glk 14s infinite}
@keyframes wb-glk{0%,30%,40%,100%{transform:none;background:#fff;color:#1B1B1B}33%,36%{transform:scale(.94);background:var(--m);color:#fff}}
.wb-thema{margin:calc(var(--e)*1.6) calc(var(--e)*3) calc(var(--e)*1);font-size:calc(var(--e)*1.35);font-weight:800;color:#1B1B1B}

/* Glossar faehrt von rechts herein */
.wb-glossar{position:absolute;top:0;right:0;bottom:0;width:36%;padding:calc(var(--e)*2.2);background:#fff;box-shadow:calc(var(--e)*-1) 0 calc(var(--e)*4) rgba(40,25,15,.18);transform:translateX(105%);animation:wb-glossar 14s infinite}
@keyframes wb-glossar{0%,35%{transform:translateX(105%)}40%,62%{transform:none}67%,100%{transform:translateX(105%)}}
.wb-gk{margin:0 0 calc(var(--e)*1.2);font-family:var(--f-display,inherit);font-size:calc(var(--e)*2.2);font-weight:800;color:#1B1B1B}
.wb-abc{display:flex;flex-wrap:wrap;gap:calc(var(--e)*.5);margin-bottom:calc(var(--e)*1.4)}
.wb-abc span{display:grid;place-items:center;width:calc(var(--e)*2.4);aspect-ratio:1;border-radius:calc(var(--e)*.5);background:#F3F1EE;font-size:calc(var(--e)*1.05);font-weight:700;color:var(--m)}
.wb-abc span.an{background:var(--m);color:#fff}
.wb-glossar dl{margin:0;display:grid;gap:calc(var(--e)*.8)}
.wb-glossar dl div{padding:calc(var(--e)*1) calc(var(--e)*1.2);border-radius:calc(var(--e)*.8);background:#F7F5F2}
.wb-glossar dl div.an{background:#FBF1EA;box-shadow:inset 3px 0 0 var(--m)}
.wb-glossar dt{font-size:calc(var(--e)*1.25);font-weight:800;color:#1B1B1B}
.wb-glossar dd{margin:calc(var(--e)*.3) 0 0;font-size:calc(var(--e)*1.05);line-height:1.4;color:#5E5A55}
.wb-glossar a{display:block;margin-top:calc(var(--e)*.6);font-size:calc(var(--e)*1.05);font-weight:700;color:var(--m)}

/* KI-Antwort mit Quelle, links unten neben dem Browser */
.wb-ki{width:clamp(220px,30%,300px);animation:wb-ki 14s infinite}
@keyframes wb-ki{0%,64%{opacity:0;transform:translateY(16px)}69%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
.wb-frage{margin:0 0 10px auto;width:fit-content;max-width:90%;padding:8px 12px;border-radius:14px 14px 4px 14px;background:#2E2E2E;font-size:13px;color:#F2F2F2}
.wb-antw{margin:0 0 10px;font-size:13px;line-height:1.5;color:#D4D4D4}
.wb-quelle{display:flex;align-items:center;gap:7px;margin:0;width:fit-content;padding:4px 10px 4px 4px;border-radius:999px;background:#0E0E0E;box-shadow:inset 0 0 0 1px #333;font-size:12px;color:#A3A3A3}
.wb-quelle i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#9A4A24;color:#fff;font-style:normal;font-size:10px;font-weight:800}

@media (max-width:860px){
  .wb-szene{padding-bottom:0}
  .wb-seite{aspect-ratio:auto;padding-bottom:calc(var(--e)*3)}
  .wb-tabs > span:nth-child(n+4){display:none}
  .wb-glossar{width:78%}
  .wb-ki{width:min(300px,86%)}
}

/* Anatomie eines Guides: helle Hub-Seite, dunkle Legende */
.wd-anat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;max-width:1000px;margin:40px auto 0}
.wd-seite{--m:#9A4A24;background:#fff;color:#1B1B1B;border-radius:14px;padding:22px 24px;box-shadow:0 0 0 1px #2A2A2A,0 40px 80px -40px rgba(0,0,0,.9);text-align:left;font-size:13.5px;line-height:1.55}
.wd-seite .pfad{font-size:12px;color:#7A756F;text-align:center;margin:0 0 10px}
.wd-seite .pfad a{color:var(--m);font-weight:600}
.wd-seite h4{font-family:var(--f-display,inherit);font-size:20px;line-height:1.15;letter-spacing:-.02em;margin:0 0 4px;color:#1B1B1B}
.wd-seite .datum{font-size:12px;color:#7A756F;margin:0 0 12px}
.wd-inhalt{background:#FBF4EF;border-radius:10px;padding:10px 14px;margin-bottom:12px}
.wd-inhalt b{font-size:12.5px}
.wd-inhalt ol{margin:4px 0 0;padding-left:18px;color:var(--m);font-size:12.5px}
.wd-seite p{color:#3A3D42;margin:0 0 10px}
.wd-seite .zw{font-weight:700;color:#1B1B1B;margin:6px 0 4px}
.wd-link{color:var(--m);font-weight:600;background-image:linear-gradient(var(--m),var(--m));background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;animation:unterstreichen 5s ease-in-out infinite}
@keyframes unterstreichen{0%,15%{background-size:0 2px}35%,85%{background-size:100% 2px}100%{background-size:0 2px}}
.wd-faq{border-top:1px solid #E6E2DD;margin-top:6px}
.wd-faq div{border-bottom:1px solid #E6E2DD;padding:7px 0;font-weight:600;font-size:12.5px;display:flex;justify-content:space-between;gap:10px}
.wd-faq div::after{content:"+";color:var(--m)}
.wd-verw{margin-top:12px;font-size:12.5px}
.wd-verw b{display:block;margin-bottom:4px}
.wd-verw span{display:block;color:var(--m);font-weight:600}
.wd-verw span small{color:#7A756F;font-weight:400;margin-left:6px}
.wd-nr{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:700;font-style:normal;margin-right:6px;vertical-align:1px;flex:none}
.wd-legende{list-style:none;margin:0;padding:0;display:grid;gap:12px;text-align:left}
.wd-legende li{display:flex;gap:12px;background:#161616;border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.5;color:#A3A3A3;box-shadow:0 0 0 1px #242424}
.wd-legende li b{color:#fff}
html.ani .wd-legende li{opacity:0;transform:translateX(16px);transition:opacity .5s,transform .5s}
html.ani .da .wd-legende li{opacity:1;transform:none}
html.ani .da .wd-legende li:nth-child(2){transition-delay:.1s}html.ani .da .wd-legende li:nth-child(3){transition-delay:.2s}html.ani .da .wd-legende li:nth-child(4){transition-delay:.3s}html.ani .da .wd-legende li:nth-child(5){transition-delay:.4s}

/* Glossar: Vorschlag in der App (dunkel wie die App) und Ergebnis im Hub (hell) */
.wd-gloss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;max-width:1000px;margin:40px auto 10px}
.wd-gloss figure{margin:0}
.wd-gloss figcaption{margin-top:12px;font-size:14px;color:#A3A3A3;text-align:center}
.wd-app{background:#161616;border-radius:14px;padding:18px 20px;text-align:left;box-shadow:0 0 0 1px #2A2A2A,0 40px 80px -40px rgba(224,36,107,.3)}
.wd-app .kopf{font-size:13px;color:#A3A3A3;margin:0 0 10px}
.wd-app .kopf b{color:#fff}
.wd-app .status{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);margin:14px 0 8px}
.wd-zeile{border-radius:10px;padding:11px 13px;margin-bottom:8px;font-size:13px;background:#1F1F1F;box-shadow:inset 0 0 0 1px #2E2E2E}
.wd-zeile b{display:block;color:#fff}
.wd-zeile span{color:#A3A3A3;font-size:12.5px}
.wd-zeile .kn{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.wd-zeile .kn i{font-style:normal;font-size:12px;font-weight:600;color:#D4D4D4;border-radius:7px;padding:4px 10px;box-shadow:inset 0 0 0 1px #3A3A3A}
.wd-zeile .kn i.ja{animation:druecken 6s infinite}
.wd-zeile.wandert{animation:wandern 6s infinite}
@keyframes druecken{0%,30%{background:transparent;color:#D4D4D4}36%,100%{background:var(--accent);color:#fff;box-shadow:none}}
@keyframes wandern{0%,40%{box-shadow:inset 0 0 0 1px #2E2E2E;background:#1F1F1F}50%,100%{box-shadow:inset 0 0 0 1px #4E9A6E;background:#16241B}}
.wd-lex{--m:#9A4A24;background:#F3F1EE;color:#1B1B1B;border-radius:14px;padding:18px 20px;text-align:left;box-shadow:0 0 0 1px #2A2A2A,0 40px 80px -40px rgba(0,0,0,.9)}
.wd-abc{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.wd-abc span{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;font-weight:700;font-size:12.5px;color:var(--m)}
.wd-lex h5{font-family:var(--f-display,inherit);font-size:15px;margin:8px 0 6px;color:#1B1B1B}
.wd-lex dl{margin:0;display:grid;gap:8px}
.wd-lex dl div{background:#fff;border-radius:10px;padding:10px 12px}
.wd-lex dt{font-weight:700;font-size:13.5px}
.wd-lex dd{margin:2px 0 0;font-size:12.5px;color:#5E5A55;line-height:1.45}
.wd-lex dd a{color:var(--m);font-weight:600}

/* Wechselnder Bereichsname, Tabs wie im Hub */
.wd-name{--m:#9A4A24;max-width:600px;margin:36px auto 0;background:#F3F1EE;border-radius:14px;padding:22px 18px;text-align:center;box-shadow:0 0 0 1px #2A2A2A,0 40px 80px -40px rgba(0,0,0,.9)}
.wd-name .reihe{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.wd-name .reihe span{background:#fff;color:#1B1B1B;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}
.wd-name .reihe .wd-wechsel{position:relative;display:inline-block;width:150px;height:31px;padding:0;vertical-align:middle;background:var(--m);border-radius:999px;overflow:hidden}
.wd-wechsel i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-style:normal;font-size:13px;font-weight:600;opacity:0;animation:namen 12s infinite}
.wd-wechsel i:nth-child(2){animation-delay:3s}.wd-wechsel i:nth-child(3){animation-delay:6s}.wd-wechsel i:nth-child(4){animation-delay:9s}
@keyframes namen{0%{opacity:0;transform:translateY(10px)}4%,22%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-10px)}}
.wd-name .adresse{margin:14px 0 0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;color:#7A756F}
.wd-name .adresse b{color:#1B1B1B}
#name .ww-hinweis code,#ablauf code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.92em;padding:1px 5px;border-radius:4px;background:#242424;color:#F2F2F2}

/* JSON-LD-Auszug */
.wd-code{max-width:820px;margin:40px auto 0;background:#0B0B0B;color:#D6D8DC;border-radius:12px;padding:20px 22px;text-align:left;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 0 0 1px #262626,0 40px 80px -40px rgba(224,36,107,.3)}
.wd-code b{color:#FF7AA8;font-weight:600}
.wd-code em{color:#C7F59B;font-style:normal}
.wd-code .gr{color:#7A7A7A}

@media (max-width:860px){.wd-anat{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.wd-gloss{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
  .wd-link,.wd-zeile .kn i.ja,.wd-zeile.wandert,.wd-wechsel i{animation:none}
  .wd-link{background-size:100% 2px}.wd-wechsel i:first-child{opacity:1}
  html.ani .wd-legende li{opacity:1;transform:none}
  .wb-name i:first-child{opacity:0}.wb-name i:last-child{opacity:1}
  .wb-ki{opacity:1}
}
#name .ww-hinweis{text-align:center!important}
.wd-inhalt ol li{color:var(--m)}