/* ProzessX Look fuer die XOS Website: Tokens, Schriften und Komponenten wie prozessx.com (Design System, Stand 03.11.2026).
   Wird nach site.css geladen und ueberschreibt nur Darstellung. Standard ist dunkel, hell per Umschalter (html[data-theme]).
   Keine Gedankenstriche, keine neuen Farben ausserhalb der Tokens. */
@font-face{font-family:Raleway;font-style:normal;font-weight:200 700;font-display:swap;src:url(/rb/fonts/630c17af355fa44e-s.p.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Raleway;font-style:normal;font-weight:200 700;font-display:swap;src:url(/rb/fonts/95d1875af7c44e92-s.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:300 500;font-display:swap;src:url(/rb/fonts/1e41be92c43b3255-s.p.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:300 500;font-display:swap;src:url(/rb/fonts/1a634e73dfeff02c-s.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Ebene 1: Primitive */
:root{--px-black:#000;--px-white:#fff;--px-grey-50:#F4F4F5;--px-grey-300:#A3A3A3;--px-grey-600:#4D4D4D;--px-grey-800:#2A2A2A;--px-grey-900:#121212;
--px-pink-500:#FF0393;--px-pink-700:#D6007B;--px-cyan-500:#00D1FF;--px-cyan-700:#0090B0;
--px-font-heading:Raleway,"Space Grotesk",system-ui,sans-serif;--px-font-text:Roboto,system-ui,sans-serif;--px-ease:cubic-bezier(.32,.72,0,1)}
/* Ebene 2: Semantik, hell */
:root,:root[data-theme="light"]{--surface:var(--px-white);--surface-raised:var(--px-grey-50);--ink:var(--px-black);--ink-muted:var(--px-grey-600);--hairline:rgba(0,0,0,.08);--shell:rgba(0,0,0,.025);--accent:var(--px-pink-700);--signal:var(--px-cyan-700);--glass:rgba(255,255,255,.72);
--paper:#fff;--bg:var(--px-grey-50);--text:#111;--mute:var(--px-grey-600);--line:rgba(0,0,0,.1);--color-accent:var(--px-black)}
/* Ebene 2: Semantik, dunkel (Standard) */
:root[data-theme="dark"]{color-scheme:dark;--surface:var(--px-black);--surface-raised:var(--px-grey-900);--ink:var(--px-white);--ink-muted:var(--px-grey-300);--hairline:rgba(255,255,255,.12);--shell:rgba(255,255,255,.04);--accent:var(--px-pink-500);--signal:var(--px-cyan-500);--glass:rgba(10,10,10,.6);
--paper:#000;--bg:var(--px-grey-900);--text:#EDEDED;--mute:var(--px-grey-300);--line:rgba(255,255,255,.12);--color-accent:var(--px-white)}

body.rb{font-family:var(--px-font-text);font-weight:300;background:var(--surface);color:var(--text)}
html{background:var(--surface)}
.rb h1,.rb h2,.rb h3,.rb h4{font-family:var(--px-font-heading);color:var(--ink);font-weight:600;letter-spacing:-.02em}
.rb-hero h1,.rb-phero h1{font-weight:200;letter-spacing:-.03em;line-height:1;font-size:clamp(38px,4.6vw,64px);max-width:none;hyphens:manual}
/* Zweiteilig: Kopf leicht, letzte Zeile fett und pink (nur Display, ab 24 px) */
.rb-hero h1 span:last-child em,.rb-phero h1 span:last-child em{font-weight:700;color:var(--accent)}
.rb-sec h2{font-weight:300;letter-spacing:-.02em}
.rb-sec h2 b,.rb-sec h2 strong{font-weight:700}
.rb-hero .lead,.rb-phero .lead,.rb-sec .sub{color:var(--ink-muted);font-weight:300}
.rb-label,.rb-eyebrow{color:var(--ink-muted);font-weight:500;letter-spacing:.2em}
.rb-label b{color:var(--ink)}
button,input,select,textarea{font-family:var(--px-font-text)}

/* Buttons: Pillen, Primaer = Ink auf Surface */
.rb-btn{font-family:var(--px-font-text);font-weight:500;background:var(--ink);color:var(--surface)!important;border-color:var(--ink)}
.rb-btn--out{background:transparent;color:var(--ink)!important;border-color:var(--hairline)}
.rb-btn--out:hover{background:transparent;border-color:var(--ink);color:var(--ink)!important}
.rb-btn--white{background:var(--px-white);color:var(--px-black)!important;border-color:var(--px-white)}
.rb-link{border-bottom-color:var(--hairline)}
.rb a:focus-visible,.rb button:focus-visible{outline:2px solid var(--signal);outline-offset:4px}

/* Infoleiste und schwebende Kopfzeile */
.rb-banner{background:var(--surface);color:var(--ink-muted);border-bottom:1px solid var(--hairline);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.rb-banner a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.rb-head{background:transparent;border:0;backdrop-filter:none;height:0;overflow:visible}
.rb-head .rb-wrap{max-width:calc(var(--max) - 48px);margin:14px auto 0;height:60px;padding:8px 8px 8px 24px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--hairline);box-shadow:0 12px 40px -16px rgba(0,0,0,.25);width:calc(100% - 32px)}
.rb-head img{filter:brightness(0)}
:root[data-theme="dark"] .rb-head img{filter:brightness(0) invert(1)}
.rb-nav>a,.rb-dd>button{font-family:var(--px-font-text);font-weight:400;font-size:15px;color:var(--ink)}
.rb-nav>a:hover,.rb-dd>button:hover{background:var(--shell)}
.rb-mega,.rb-dd-menu{background:var(--surface);border:1px solid var(--hairline);border-radius:28px;box-shadow:0 24px 64px -24px rgba(0,0,0,.45)}
.rb-mega a b,.rb-dd-menu a{color:var(--ink)}
.rb-mega a:hover,.rb-dd-menu a:hover{background:var(--shell)}
.rb-ask{background:var(--px-grey-900);color:var(--px-white)}
.rb-ask button{background:var(--px-white);color:var(--px-black);border-color:var(--px-white)}
.rb-hero{padding-top:150px}

/* Umschalter hell/dunkel */
.rb-theme{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:0;background:transparent;color:var(--ink);cursor:pointer;transition:background .25s var(--px-ease)}
.rb-theme:hover{background:var(--shell)}
.rb-theme svg{width:18px;height:18px}
.rb-theme .i-sun{display:none}
:root[data-theme="dark"] .rb-theme .i-sun{display:block}
:root[data-theme="dark"] .rb-theme .i-moon{display:none}

/* Sektionen */
.rb-sec{border-top:1px solid var(--hairline)}
.rb-sec--g{background:var(--surface-raised)}
.rb-sec--k{background:var(--px-black);color:var(--px-white)}
:root[data-theme="dark"] .rb-sec--k{background:var(--px-grey-900)}
.rb-story2,.rb-marq{background:var(--surface)}
.rb-marq{border-color:var(--hairline)}
.rb-marq div{color:var(--ink-muted);font-family:var(--px-font-heading);font-weight:300}
.rb-marq span:hover{color:var(--ink)}
.rb-st span{color:var(--ink)}

/* Karten: 24 px, Haarlinie, Glas im Dunkel */
.rb-panel,.rb-tier,.rb-rev,.rb-pk-i,.cat-c,.hl-card,.rb-allin,.rb-rolep,.rb-ui,.an-box,.fnd,.fp,.mod-rel a,.rb-loopbox{background:var(--surface);border:1px solid var(--hairline);border-radius:24px;color:var(--ink)}
:root[data-theme="dark"] .rb-panel,:root[data-theme="dark"] .rb-tier,:root[data-theme="dark"] .rb-rev,:root[data-theme="dark"] .rb-pk-i,:root[data-theme="dark"] .cat-c,:root[data-theme="dark"] .hl-card,:root[data-theme="dark"] .rb-allin,:root[data-theme="dark"] .rb-rolep,:root[data-theme="dark"] .mod-rel a{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:none}
.rb-panel.on{box-shadow:0 0 0 1px var(--signal)}
.rb-tier.feat{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.rb-tier.feat h3,.rb-tier.feat .pr b,.rb-tier.feat .rb-plus{color:var(--surface)}
.rb-rev blockquote,.rb-tier h3,.rb-tier .pr b,.rb-pk-i b,.rb-pk-i .p,.cat-c b{color:inherit}
.rb-panel p,.rb-split p,.rb-pk-i .t,.hl-card li a,.hl-grp a{color:var(--ink-muted)}
.rb-panel .n{color:var(--ink-muted)}
.cat-bar button,.rb-rolebtns button,.rb-bill{background:var(--surface);color:var(--ink);border-color:var(--hairline);font-family:var(--px-font-text)}
.cat-bar button.on,.rb-rolebtns button.on,.rb-bill button[aria-pressed="true"],.rb-jump a[aria-current="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.rb-table td,.rb-table th{color:var(--ink);border-color:var(--hairline)}
.rb-table td:first-child,.rb-table th:first-child,.rb-table thead th{background:var(--surface)}
.rb-sec--g .rb-table thead th{background:var(--surface-raised)}
.rb-calc select,.rb-calc input[type=number],.fmt textarea,.hl-search input{background:var(--surface);color:var(--ink);border-color:var(--hairline)}
.rb-calc label,.fmt-in,.hl-main strong,.hl-crumb a,.hl-main a:not(.rb-btn){color:var(--ink)}
.rb-calc .out{background:var(--px-grey-900);border:1px solid var(--hairline)}
.hl-note{background:var(--surface-raised);color:var(--ink-muted)}
.rb-skip{background:var(--ink);color:var(--surface)}

/* Abbildungen mit Fest-Weiss bleiben als helle Produktansicht stehen, damit Beschriftungen lesbar sind */
.rb-ui,.an-box,.fnd,.rb-loopbox{background:#fff;color:#111;border-color:var(--hairline)}

/* Fussleiste */
.rb-foot{background:var(--px-black);color:var(--px-white);border-top:1px solid var(--hairline)}
.rb-foot .big{font-family:var(--px-font-heading);font-weight:200}

/* Weniger Bewegung */
@media (prefers-reduced-motion:reduce){.rb *,.rb *:before,.rb *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Helle Inseln: Produktansichten, Zeichnungen und das Assistenten-Fenster behalten feste Weiss/Schwarz-Werte.
   Die Token werden dort lokal auf Hell gesetzt, damit alles darin lesbar bleibt, auch im dunklen Theme. */
.rb-vis,.rb-ui,.an-box,.fnd,.rb-loopbox,.xa-chat,.xa-tip,.rb-kc,.rb-audit,.rb-kan,.rb-cal,.rb-lead,.rb-tb{--ink:#000;--ink-muted:#4D4D4D;--surface:#fff;--hairline:rgba(0,0,0,.1);--line:rgba(0,0,0,.1);--mute:#6B6B6B;--text:#111;--paper:#fff;--bg:#F4F4F5;--accent:#D6007B;color:#111}
.rb-vis{background:#F4F4F5}
.rb-core3 li,.rb-core3 b,.rb-core3 svg{color:var(--ink)}
.rb-core3 li span{color:var(--ink-muted)}
.rb-core3 li{border-top-color:var(--hairline)}

/* "RB Inter" steht noch in vielen Regeln (Zeichnungen, Tabellen, Formulare): der Name zeigt jetzt auf Roboto, ein Austausch Regel fuer Regel entfaellt */
@font-face{font-family:"RB Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/rb/fonts/1e41be92c43b3255-s.p.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"RB Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/rb/fonts/1a634e73dfeff02c-s.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Story-Zeichnung: helle Insel */
.rb-story2 .stage>div:last-child{--ink:#000;--ink-muted:#4D4D4D;--surface:#fff;--hairline:rgba(0,0,0,.1);--line:rgba(0,0,0,.1);--mute:#6B6B6B;--text:#111;background:#fff;border:1px solid var(--hairline);border-radius:28px;padding:28px;color:#111}
.rb-story2{background:var(--surface);border-top:1px solid var(--hairline)}
.rb-story2 .tx p{color:var(--ink-muted)}
.rb-story2 .tx .n{color:var(--ink-muted);font-weight:500}
.rb-story2 .tx h3{font-family:var(--px-font-heading);font-weight:300;letter-spacing:-.025em}

/* Tarife und Sprungleiste im Dunkel */
:root[data-theme="dark"] .rb-tier.feat{background:var(--px-grey-900);color:var(--px-white);border-color:var(--signal);box-shadow:0 0 0 1px var(--signal)}
:root[data-theme="dark"] .rb-tier.feat h3,:root[data-theme="dark"] .rb-tier.feat .pr b,:root[data-theme="dark"] .rb-tier.feat .rb-plus{color:var(--px-white)}
:root[data-theme="dark"] .rb-tier.feat .pr,:root[data-theme="dark"] .rb-tier.feat .tg{color:var(--px-grey-300)}
.rb-tier .pr b{font-family:var(--px-font-heading);font-weight:600}
.rb-jump{background:var(--glass);border-bottom:1px solid var(--hairline)}
.rb-jump a{color:var(--ink-muted)}
.rb-jump a:hover{background:var(--shell);color:var(--ink)}
.rb-jump{top:84px}
.rb-badge,.rb-chips li,.rb-allin li{border-color:var(--hairline);color:var(--ink)}
.rb-allin li{background:var(--shell)}
.rb-tier .pr{color:var(--ink-muted)}
.rb-tier:not(.feat) .pr b{color:var(--ink)}

/* Dunkle Inseln: Sektionen und Karten mit festem Schwarz bekommen die dunklen Token, auch im hellen Theme */
.rb-sec--k,.rb-book,.rb-ag,.rb-foot,.rb-audit,.rb-calc .out,.rb-cta-band,.rb-ask{--ink:#fff;--ink-muted:#A3A3A3;--surface:#000;--hairline:rgba(255,255,255,.12);--line:rgba(255,255,255,.12);--mute:#A3A3A3;--text:#EDEDED;--paper:#000;--bg:#121212;--accent:#FF0393;--signal:#00D1FF;--glass:rgba(10,10,10,.6);color:#fff}
:root[data-theme="light"] .rb-tier.feat{--ink:#fff;--ink-muted:#A3A3A3;--surface:#000}

/* Korrekturen nach Kontrastpruefung */
.rb-badge{background:transparent;color:var(--ink-muted);border-color:var(--hairline)}
.rb-tier li .rb-badge{border-color:var(--hairline)}
:root[data-theme="light"] .rb-tier.feat{background:#000;border-color:#000;color:#fff}
:root[data-theme="light"] .rb-tier.feat .tg,:root[data-theme="light"] .rb-tier.feat .pr,:root[data-theme="light"] .rb-tier.feat li span:not(.rb-badge){color:#B8B8B8}
:root[data-theme="light"] .rb-tier.feat h3,:root[data-theme="light"] .rb-tier.feat .pr b,:root[data-theme="light"] .rb-tier.feat .rb-plus{color:#fff}

/* Hero wie prozessx.com: Verlaufsflaechen und Glaskarten rechts */
.rb-hero--b{position:relative;isolation:isolate}
:root[data-theme="dark"] .rb-hero--b:before{content:"";position:absolute;inset:-10% -10% 0 30%;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent);background:radial-gradient(60% 55% at 85% 12%,rgba(0,144,176,.38),transparent 70%),radial-gradient(55% 50% at 95% 95%,rgba(255,3,147,.28),transparent 70%)}
.rb-hero--b{padding-top:150px}
.rb-hero--b .rb-hero2{align-items:center}
.rb-hcards{display:grid;gap:14px}
.rb-hcard{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:24px;background:var(--surface-raised);border:1px solid var(--hairline);color:var(--ink);text-decoration:none;transition:transform .25s var(--px-ease),border-color .25s var(--px-ease)}
:root[data-theme="dark"] .rb-hcard{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.rb-hcard:hover{transform:translateY(-3px);border-color:var(--ink)}
.rb-hcard.on{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal)}
.rb-hcard i{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--hairline);color:var(--ink)}
.rb-hcard span{flex:1;display:grid;gap:2px}
.rb-hcard b{font:500 18px var(--px-font-heading);color:var(--ink)}
.rb-hcard small{font-size:14px;line-height:1.4;color:var(--ink-muted)}
.rb-hcard em{font-style:normal;color:var(--ink-muted);transition:transform .25s var(--px-ease)}
.rb-hcard:hover em{transform:translateX(4px)}
.rb-shotsec{border-top:0;padding:40px 0 90px}
:root[data-theme="dark"] .rb-shotsec .an-box{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 120px -40px rgba(255,3,147,.35)}

/* Terminbuchung und Kontakt (Vollseiten): Widget bleibt helle Insel, Textspalte folgt dem Theme */
.tb{background:none}
:root[data-theme="dark"] .tb{background:radial-gradient(900px 420px at 30% 0,rgba(0,144,176,.22),transparent 70%)}
.tb .lead,.tb .steps li span,.tb .steps li p,.tb .facts small{color:var(--ink-muted)}
.tb .karte,.tb #inhalt{--ink:#000;--ink-muted:#4D4D4D;--surface:#fff;--hairline:rgba(0,0,0,.1);--line:rgba(0,0,0,.1);--mute:#6B6B6B;--text:#111;--bg:#F4F4F5;color:#111}
.tb .facts>*{background:var(--surface-raised);border-color:var(--hairline);color:var(--ink)}
.tb{padding-top:150px}
.tb .steps i{background:var(--ink);color:var(--surface)}
.tb .steps span,.tb .facts span{color:var(--ink-muted)}
.tb .facts div{background:var(--surface-raised);border-color:var(--hairline)}
.tb .facts b{color:var(--ink)}
:root[data-theme="dark"] .tb .facts div{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))}
/* Die Vorlage setzt ihre Werte in einem spaeteren style Block: hoehere Spezifitaet noetig */
main.tb{padding-top:170px}
main.tb .steps li i{background:var(--ink);color:var(--surface)}
main.tb .steps li span,main.tb .facts div span{color:var(--ink-muted)}

/* Laufband oben wie prozessx.com: dunkle Zeile, laeuft von rechts nach links, haelt bei Hover und Fokus an */
.rb-ann{--ink:#fff;--ink-muted:#A3A3A3;--surface:#000;--hairline:rgba(255,255,255,.12);--signal:#00D1FF;background:#000;color:#fff;padding:0;overflow:hidden;text-align:left;border-bottom:1px solid rgba(255,255,255,.12)}
.ann-track{display:flex;width:max-content;animation:px-ann-run 44s linear infinite;will-change:transform}
.rb-ann:hover .ann-track,.rb-ann:focus-within .ann-track{animation-play-state:paused}
.ann-set{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex:none}
.ann-item{display:inline-flex;align-items:center;gap:14px;padding:0 28px;height:40px;white-space:nowrap;position:relative}
.ann-item:after{content:"";position:absolute;right:-1px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:var(--signal)}
.ann-label{font:400 11px/16px var(--px-font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.rb-ann .ann-link{display:inline-flex;align-items:center;gap:6px;font:500 12px/16px var(--px-font-text);letter-spacing:.02em;color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.3);margin:0}
.rb-ann .ann-link:hover{text-decoration-color:#fff}
.ann-link span{color:var(--signal)}
@keyframes px-ann-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ann-track{animation:none;width:auto;justify-content:center;flex-wrap:wrap}.ann-dup{display:none}}
@media (max-width:620px){.ann-item{padding:0 20px;gap:12px}.ann-track{animation-duration:36s}}

/* Launch Code als Kopierknopf (Laufband, Hero, Fussband) wie auf prozessx.com */
.ann-code{display:inline-flex;align-items:center;gap:10px;margin:0 4px;padding:3px 4px 3px 14px;border:1px dashed var(--accent);border-radius:999px;background:rgba(255,255,255,.06);color:var(--ink);font:inherit;cursor:pointer;vertical-align:middle}
.ann-code strong{font-weight:700;letter-spacing:.08em;color:var(--accent);font-size:13px}
.ann-code span{padding:3px 10px;border-radius:999px;background:var(--px-white);color:var(--px-black);font-size:12px;line-height:18px;font-weight:500}
:root[data-theme="light"] .ann-code span{background:var(--px-black);color:var(--px-white)}
.ann-code:hover{border-style:solid}
.rb-ann .ann-code{--accent:#FF0393;--ink:#fff}
.rb-ann .ann-code span{background:#fff;color:#000}
.rb-hcode{margin:22px 0 0;font-size:14px;color:var(--ink-muted);display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.rb-hcode .ann-code{margin:0}
/* Fussband mit Code auf allen Seiten */
.rb-codeband{background:#000;color:#fff;border-top:1px solid rgba(255,255,255,.12);padding:56px 0;--ink:#fff;--ink-muted:#A3A3A3;--accent:#FF0393;--surface:#000}
.rb-codeband .rb-wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.rb-codeband h2{font:300 clamp(26px,3vw,40px)/1.1 var(--px-font-heading);color:#fff;margin:0;max-width:none}
.rb-codeband p{margin:10px 0 0;color:#A3A3A3;font-size:16px}
.rb-codeband .a{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rb-codeband .ann-code{margin:0}
.rb-codeband .ann-code span{background:#fff;color:#000}
body.embed .rb-codeband{display:none}
/* Kopfzeile: nichts darf umbrechen, die Pille bleibt einzeilig */
.rb-head .rb-nav>a,.rb-head .rb-dd>button,.rb-head .rb-btn{white-space:nowrap}
.rb-head .rb-nav>a,.rb-head .rb-dd>button{padding:8px 10px}
.rb-head .rb-cta{gap:6px;flex:none}
.rb-head .rb-nav{gap:0}
/* Kopfzeile: Testen Knopf ist die Hauptaktion */
.rb-cta-code{background:var(--ink);color:var(--surface)!important;border-color:var(--ink)}
.rb-cta-code .rb-short{display:none}
/* Fussleiste: sechs Spalten (Marke, Plattform, Module, Ressourcen, Von ProzessX, Rechtliches) */
@media (min-width:1100px){.rb-foot .cols{grid-template-columns:1.3fr repeat(5,1fr);gap:28px}}
.rb-foot .bar a.rb-cr{display:inline;padding:0;color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:4px}
.rb-foot .bar a.rb-cr:hover{color:#fff;text-decoration-color:#fff}
/* Weiches Scrollen (smooth) stoert das Pinnen und Scrubben der Story Szene (Ruckeln, Sprung): aus */
html{scroll-behavior:auto}
@media (max-width:760px){.rb-cta-code .rb-long{display:none}.rb-cta-code .rb-short{display:inline}}
/* Sprachumschalter DE/EN im Kopf (12.11.2026), gleiche Fläche wie der Darstellungsknopf */
.rb-lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 8px;border-radius:999px;color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.04em;text-decoration:none;transition:background .25s var(--px-ease)}
.rb-lang:hover{background:var(--shell)}
.rb-lang:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rb-lang-nav{display:none}
/* Kopf auf schmalen Bildschirmen: Beratung (rb-hide-s) wie in site.css vorgesehen ausblenden (rb-btn hat es überschrieben), Sprachwahl ins Menü */
@media(max-width:1100px){.rb-cta .rb-hide-s{display:none}}
@media(max-width:760px){.rb-cta .rb-lang{display:none}.rb-nav.open>a.rb-lang-nav{display:flex;justify-content:flex-start;min-width:0;height:auto;padding:8px 14px;font:500 14.5px "RB Inter";letter-spacing:0}}
/* Mobiles Menü: site.css setzt einen festen weißen Grund, im dunklen Theme stand weiße Schrift auf Weiß. Flächen aus den Tokens. */
@media(max-width:900px){.rb-nav.open{background:var(--surface);border-bottom-color:var(--line);max-height:calc(100vh - 120px);overflow-y:auto}}
/* Englisch: keine automatische Silbentrennung in Überschriften (gedacht für lange deutsche Wörter, trennte z. B. "chan-nel") */
html[lang="en"] .rb h1,html[lang="en"] .rb h2,html[lang="en"] .rb h3{hyphens:manual;-webkit-hyphens:manual}