/* Brand Hub (Booster): Feed im Browserrahmen */
.bh-rahmen{max-width:980px;margin:28px auto 0;border:1px solid #2A2A2A;border-radius:20px;overflow:hidden;background:#161616}
.bh-rahmen .bh-leiste{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#1E1E1E;border-bottom:1px solid #2A2A2A}
.bh-rahmen .bh-leiste i{width:9px;height:9px;border-radius:50%;background:#3A3A3A}
.bh-rahmen .bh-url{margin-left:10px;font:500 12.5px var(--f-mono);color:#9A9A9A;background:#121212;border-radius:999px;padding:4px 12px}
.bh-rahmen .bh-url b{color:#F2F2F2;font-weight:600}
.bh-rahmen .fd{margin:0;border:0;border-radius:0}
/* Push-Meldung: Grundstil fehlt auf dieser Seite (steht sonst inline in den Branchenseiten) */
.bh-rahmen .np-push{display:flex;gap:10px;align-items:center;border:1px solid #333;border-radius:16px;padding:10px 12px;box-shadow:0 18px 36px -22px rgba(0,0,0,.7);font-size:13px;animation:bh-push .7s 1.4s cubic-bezier(.2,.8,.2,1) both}
.bh-rahmen .np-push i{width:30px;height:30px;border-radius:8px;color:#fff;font-style:normal;font-weight:800;font-size:11px;display:grid;place-items:center;flex:none}
.bh-rahmen .np-push span{color:#A3A3A3}
@keyframes bh-push{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bh-rahmen .np-push{animation:none}}
@media (min-width:761px){.bh-rahmen .fd-push{top:56px;right:14px}}
@media (max-width:760px){.bh-rahmen .fd-push{margin:12px}}

/* === Grafiken dunkel (erzeugt 29.10.2026 aus den Regeln in brand-hub-sc.html: helle Flaechen, dunkle Schrift und
   Animationsfarben gespiegelt; Linien und Grundwerte ueber Variablen in den Buehnen) === */
.buehne,.am,.vier,.zyklus,.schritte,.chips-zeile,.wk-balken{--bg:#161616;--card:#1E1E1E;--karte2:#1A1A1A;--soft:#262626;--fg:#F2F2F2;--muted:#A3A3A3;--faint:#7A7A7A;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.15);--accent-soft:rgba(224,36,107,.2);--accent-text:#FF6E9E;color:var(--fg)}
html .chips-zeile span{background:#1E1E1E}
html .bh-browser{background:#1E1E1E}
html .bh-url{background:#1E1E1E}
html .bh-profil{background:#1E1E1E}
html .bh-k{background:#1E1E1E}
html .bh-tabs span{background:#1E1E1E}
html .bh-karte{background:#1E1E1E}
html .bh-reihe span{background:#1E1E1E}
@keyframes tabAn-d{0%,9%{background:var(--m);border-color:var(--m);color:#fff}10.5%,100%{background:#1E1E1E;border-color:var(--line2);color:var(--fg)}}
html .bh-tel{background:#2E2E2E}
html .bh-schirm .in{background:#1E1E1E}
html .bh-knopf.hell{background:#1E1E1E}
html .bh-themen span{background:#1E1E1E}
html .bh-dateien{background:#2E2E2E}
html .bh-schema span{background:#1E1E1E}
html .bh-schalter i::after{background:#1E1E1E}
html .bh-reihe span{animation:tabAn-d 20s infinite}
@media (prefers-reduced-motion:reduce){html .bh-reihe span{animation:none}}
/* === Ende Grafiken dunkel === */

/* Feature-Seite: in welchen Boostern der Brand Hub steckt */
.bh-booster{list-style:none;padding:0;margin:28px auto 0;max-width:980px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bh-booster a{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 20px;border-radius:16px;background:#1E1E1E;color:#F2F2F2;text-decoration:none;transition:background .2s}
.bh-booster a:hover{background:#262626}
.bh-booster b{font-weight:800;font-size:16px}
.bh-booster span{font-size:14px;line-height:1.45;color:#A3A3A3}
@media (max-width:760px){.bh-booster{grid-template-columns:1fr}}

/* Abstrakter Brand Hub (29.10.2026): Formen im Stil der Feature-Kacheln, dunkel, ohne Boxen und Texte */
.gh-rahmen{max-width:980px}
.gh{--pk:#E0246B;--rosa:#F49AB8;--pflaume:#7A1840;--tief:#4A0E26;--koralle:#FF6E4A;--pfirsich:#FFB08F;--weiss:#F2F2F2;
  position:relative;padding:22px 26px 30px;display:flex;flex-direction:column;gap:18px}
html.ani .gh .g{opacity:0;transform:translateY(18px) scale(.7) rotate(-4deg);transition:opacity .45s ease,transform .7s cubic-bezier(.3,1.5,.5,1)}
html.ani .gh .g.da{opacity:1;transform:none}
:where(.gh) i,:where(.gh) span{display:block}
/* Kopf: Titelbild, Logo, Name, Folgen */
.g-kopf{position:relative;height:150px}
.g-cover{position:absolute;inset:0 0 40px;border-radius:18px;background:linear-gradient(120deg,var(--tief),var(--pflaume) 55%,var(--pk));overflow:hidden}
.g-cover::after{content:"";position:absolute;right:-40px;top:-60px;width:260px;height:200px;border-radius:40px;background:rgba(255,255,255,.08);transform:rotate(-24deg)}
.g-logo{position:absolute;left:22px;bottom:0;width:72px;height:72px;border-radius:18px;background:var(--pk);box-shadow:0 0 0 5px #161616}
.g-name{position:absolute;left:112px;bottom:8px;display:flex;flex-direction:column;gap:8px}
.g-name i{height:12px;width:170px;border-radius:6px;background:var(--weiss)}.g-name i+i{height:8px;width:240px;background:#4A4A4A}
.g-folgen{position:absolute;right:16px;bottom:10px;width:92px;height:32px;border-radius:999px;background:var(--weiss)}
/* Tabs */
.g-tabs{display:flex;gap:8px}.g-tabs i{width:70px;height:28px;border-radius:999px;border:1.5px solid #3A3A3A}.g-tabs i.an{background:var(--pk);border-color:var(--pk);width:58px}
/* Posts wie im Feed, abstrakt: Bildflaeche mit Form, Balken statt Text, Funktion als Form */
.g-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-top:4px}
.g-post{position:relative;display:flex;flex-direction:column;border-radius:16px;background:#1E1E1E;overflow:hidden}
.g-high{grid-column:1/-1;flex-direction:row;min-height:220px}
.g-bild{position:relative;height:130px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.g-high .g-bild{height:auto;flex:0 0 46%}
.g-bild::after{content:"";position:absolute;right:-30px;top:-50px;width:150px;height:130px;border-radius:30px;background:rgba(255,255,255,.08);transform:rotate(-24deg)}
.g-bild.b1{background:linear-gradient(135deg,var(--pk),var(--pflaume))}.g-bild.b2{background:linear-gradient(135deg,#3A2430,#2A2A2A)}
.g-bild.b3{background:linear-gradient(135deg,var(--tief),#3A1A26)}.g-bild.b4{background:linear-gradient(135deg,#2C2C2C,#3B2B30)}
.g-txt{position:relative;flex:1;display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px}
.g-high .g-txt{padding:22px 24px;justify-content:center}
.g-zl{display:flex;flex-direction:column;gap:8px}
.g-zl i{height:8px;border-radius:4px;background:#3A3A3A}.g-zl i.k{height:6px;background:var(--pk)}.g-zl i.t{height:13px;background:var(--weiss)}
.g-high .g-zl i.t{height:18px}
.g-fuss{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:4px}
.g-fuss i{width:64px;height:8px;border-radius:4px;background:#4A4A4A}.g-fuss em{width:96px;height:30px;border-radius:999px;background:var(--pk)}
.g-werte{display:flex;gap:10px}.g-werte i{width:70px;height:9px;border-radius:5px;background:#4A4A4A}.g-werte i+i{width:54px;background:var(--weiss)}
/* Formen in den Posts */
.g-kacheln{position:relative;z-index:1;display:flex;gap:8px}.g-kacheln i{width:52px;height:68px;border-radius:11px;background:var(--weiss);box-shadow:inset 0 0 0 7px var(--weiss),inset 0 0 0 40px var(--rosa)}
.g-ticket{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1.5px dashed var(--pk);border-radius:12px;background:#2A1520}
.g-ticket b{font:700 13px var(--f-mono);letter-spacing:.1em;color:#FF6E9E}.g-ticket em{width:86px;height:28px;border-radius:999px;background:var(--pk)}
.g-stempel{position:absolute;right:30px;top:calc(50% - 4px);padding:2px 9px;border:2px solid var(--weiss);border-radius:8px;background:var(--tief);color:var(--weiss);font:700 10px var(--f-mono);transform:rotate(12deg);z-index:2}
html.ani .g-high .g-stempel{opacity:0;transform:rotate(12deg) scale(1.8);transition:opacity .3s .7s,transform .4s .7s cubic-bezier(.3,1.6,.5,1)}
html.ani .g-high.da .g-stempel{opacity:1;transform:rotate(12deg) scale(1)}
.g-datum{position:absolute!important;left:12px;top:12px;z-index:1;display:flex!important;flex-direction:column;align-items:center;justify-content:center;width:50px;height:50px;border-radius:12px;background:var(--pk);color:#fff;font:800 9px var(--f-mono);letter-spacing:.06em}
.g-datum b{display:block;font-size:19px;line-height:1;letter-spacing:0}
.g-balken{height:8px;border-radius:4px;background:#333;overflow:hidden}.g-balken i{height:100%;width:72%;border-radius:4px;background:var(--pk);transition:width 1.2s .4s ease}
html.ani .g-post:not(.da) .g-balken i{width:0}
.g-play{position:relative;z-index:1;display:flex;gap:7px}.g-play i{position:relative;width:36px;height:52px;border-radius:9px;background:var(--pk)}.g-play i:nth-child(2){background:var(--pflaume)}.g-play i:nth-child(3){background:var(--koralle);transform:translateY(-8px)}
.g-play i::after{content:"";position:absolute;left:13px;top:19px;border-left:12px solid var(--weiss);border-top:7px solid transparent;border-bottom:7px solid transparent}
.g-blatt{position:relative;z-index:1;width:112px;padding:13px;border-radius:12px;background:var(--weiss);display:flex!important;flex-direction:column;gap:7px}
.g-blatt i{height:7px;border-radius:4px;background:#2A0A18}.g-blatt i+i{background:var(--rosa);width:80%}.g-blatt i+i+i{width:60%}
.g-plus{position:absolute;z-index:2;top:22px;left:calc(50% + 40px);width:28px;height:28px;border-radius:50%;background:var(--pfirsich);color:#4A0E26;font:800 11px/28px inherit;text-align:center}
.g-chips{display:flex;gap:6px}.g-chips i{width:52px;height:22px;border-radius:999px;background:#2E2E2E}
.g-sterne{font-size:22px;letter-spacing:3px;color:var(--pfirsich);line-height:1}
.g-crew{position:relative;display:flex;gap:7px;padding:4px 0}.g-crew i{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;background:var(--weiss)}
.g-ring{position:absolute;left:62px;top:-8px;width:58px;height:58px;border-radius:50%;border:2px solid var(--koralle);opacity:.7}
.g-stufen{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.g-stufen i{height:8px;border-radius:4px;background:#333}.g-stufen i.an{background:var(--pk)}
.g-presse{display:flex;flex-direction:column;gap:6px}.g-presse i{position:relative;height:22px;border-radius:7px;background:#E9DCE1}
.g-presse i::after{content:"";position:absolute;left:10px;right:34%;top:8px;height:6px;border-radius:3px;background:#B9A5AD}
/* Push schwebt oben rechts */
.g-push{position:absolute;top:30px;right:40px;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#262626;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.g-logo.klein{position:static;width:30px;height:30px;border-radius:8px;box-shadow:none}
.g-push .g-name{position:static;gap:6px}.g-push .g-name i{width:110px;height:8px}.g-push .g-name i+i{width:150px;height:7px}
/* Nach dem Aufbau leise Bewegung */
.gh.fertig .g-push{animation:gh-schweb 5s ease-in-out 1s infinite}
@keyframes gh-schweb{50%{transform:translateY(-5px)}}
@media (max-width:760px){.gh{padding:16px 14px 22px}.g-posts{grid-template-columns:1fr 1fr;gap:10px}.g-high{flex-direction:column}.g-high .g-bild{flex:none;height:140px}
  .g-post:nth-child(n+6){display:none!important}.g-fuss em{width:64px;height:24px}.g-txt{padding:12px 12px 14px;gap:10px}.g-stempel{right:14px;top:auto;bottom:62px}
  .g-push{top:16px;right:14px;padding:10px 12px}.g-push .g-name i{width:70px}.g-push .g-name i+i{width:96px}
  .g-name i{width:110px}.g-name i+i{width:150px}.g-kopf{height:130px}.g-folgen{display:none}.g-tabs i{width:46px}}
  .g-name i{width:110px}.g-name i+i{width:150px}.g-kopf{height:130px}.g-folgen{display:none}.g-tabs i{width:46px}}
@media (prefers-reduced-motion:reduce){html.ani .gh .g{opacity:1;transform:none;transition:none}.gh .g{animation:none!important}}

/* Fertiger Hub dunkel: das Hub-Bild der alten Seite, Flaechen in Grautoenen, Markenfarbe der Roesterei bleibt */
.bh-fertig .bh-browser{background:#161616;border-color:#2A2A2A;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.bh-fertig .bh-leiste{background:#1E1E1E;border-color:#2A2A2A}.bh-fertig .bh-leiste i{background:#3A3A3A}
.bh-fertig .bh-url{background:#121212;border-color:#2A2A2A;color:#9A9A9A}.bh-fertig .bh-url b{color:#F2F2F2}
.bh-fertig .bh-hub{--m:#C8693A;--m2:#E8A272;background:#121212}
.bh-fertig .bh-profil,.bh-fertig .bh-karte{background:#1E1E1E}
.bh-fertig .bh-logo{border-color:#1E1E1E}
.bh-fertig .bh-profil h3,.bh-fertig .bh-txt h4,.bh-fertig .bh-zahlen b{color:#F2F2F2}
.bh-fertig .bh-ort,.bh-fertig .bh-bio,.bh-fertig .bh-zahlen,.bh-fertig .bh-txt p,.bh-fertig .bh-txt .unten,.bh-fertig .bh-ring{color:#9A9A9A}
.bh-fertig .bh-k{background:#1E1E1E;border-color:#3A3A3A;color:#F2F2F2}.bh-fertig .bh-k.voll{background:var(--m);border-color:var(--m);color:#fff}
.bh-fertig .bh-tabs span{background:#1E1E1E;color:#E6E6E6}.bh-fertig .bh-tabs span.an{background:var(--m);color:#fff}
.bh-fertig .bh-ring b i{border-color:#121212}
.bh-fertig .bh-bild{background:linear-gradient(135deg,#A8643C,#5A2810)}.bh-fertig .bh-bild.wv{background:#8E3E1A}
.bh-fertig .bh-txt .unten b,.bh-fertig .bh-art{color:#E8A272}

/* Drei Schritte ohne Boxen: je eine abstrakte Grafik, laeuft, sobald der Abschnitt im Bild ist */
.st-reihe{list-style:none;margin:40px auto 0;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;position:relative}
.st-reihe::before{content:"";position:absolute;top:60px;left:16%;right:16%;border-top:2px dotted #3A3A3A}
.st{position:relative;text-align:center}
.st .n{display:block;font:700 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#FF6E9E;margin-top:22px}
.st h3{font-size:22px;margin:8px 0 10px}
.st p{color:#A3A3A3;line-height:1.6;max-width:30em;margin:0 auto}
.st-bild{position:relative;z-index:1;height:120px;display:flex;align-items:center;justify-content:center;background:#121212;margin:0 auto;width:min(260px,100%)}
/* 01 Adresse: Name tippt sich in die Adresszeile, dann der Haken */
.st-url{display:flex;align-items:center;padding:12px 18px;border-radius:999px;background:#F2F2F2;font:600 14px var(--f-mono);color:#7A6A70}
.st-tipp{display:inline-block;overflow:hidden;white-space:nowrap;color:#2A0A18;border-right:2px solid #E0246B;width:5ch}
.st-ok{position:absolute;right:calc(50% - 128px);top:22px;width:26px;height:26px;border-radius:50%;background:#E0246B}
.st-ok::after{content:"";position:absolute;left:8px;top:6px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
#ablauf.da .st-tipp{animation:st-tipp 6s steps(5) infinite,st-cursor .7s step-end infinite}
#ablauf.da .st-ok{animation:st-ok 6s ease infinite}
@keyframes st-tipp{0%{width:0}40%,100%{width:5ch}}
@keyframes st-cursor{50%{border-color:transparent}}
@keyframes st-ok{0%,42%{opacity:0;transform:scale(.3)}50%,90%{opacity:1;transform:scale(1)}100%{opacity:0}}
/* 02 Profil: Logo, Balken fuellen sich, ein Funke fuer die KI */
.st-profil{display:flex;align-items:center;gap:14px}
.st-logo{width:58px;height:58px;border-radius:16px;background:#E0246B}
.st-zl{display:flex;flex-direction:column;gap:8px;width:120px}.st-zl i{display:block;height:10px;border-radius:5px;background:#F2F2F2}
.st-zl i:nth-child(2){background:#F49AB8;width:84%}.st-zl i:nth-child(3){background:#4A4A4A;width:62%}
.st-funke{position:absolute;right:calc(50% - 104px);top:14px;width:22px;height:22px;background:#FFB08F;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
#ablauf.da .st-zl i{animation:st-fuell 6s ease infinite;transform-origin:left}
#ablauf.da .st-zl i:nth-child(2){animation-delay:.25s}#ablauf.da .st-zl i:nth-child(3){animation-delay:.5s}
#ablauf.da .st-funke{animation:st-funke 6s ease infinite}
@keyframes st-fuell{0%,8%{transform:scaleX(0)}30%,100%{transform:scaleX(1)}}
@keyframes st-funke{0%,30%{opacity:0;transform:scale(.2) rotate(0)}40%,80%{opacity:1;transform:scale(1) rotate(90deg)}100%{opacity:0}}
/* 03 Drops: drei Tropfen fallen in ihre Tabs */
.st-drops{position:absolute;top:6px;left:50%;translate:-50% 0;display:flex;gap:34px}
.st-drops i{display:block;width:18px;height:18px;border-radius:0 50% 50% 50%;transform:rotate(45deg);background:#E0246B}
.st-drops i:nth-child(2){background:#F49AB8}.st-drops i:nth-child(3){background:#FF6E4A}
.st-tabs{position:absolute;bottom:18px;left:50%;translate:-50% 0;display:flex;gap:10px}
.st-tabs i{display:block;width:42px;height:24px;border-radius:999px;border:2px solid #3A3A3A}
#ablauf.da .st-drops i{animation:st-fall 6s cubic-bezier(.5,0,.8,.4) infinite}
#ablauf.da .st-drops i:nth-child(2){animation-delay:.5s}#ablauf.da .st-drops i:nth-child(3){animation-delay:1s}
#ablauf.da .st-tabs i{animation:st-tab 6s ease infinite}
#ablauf.da .st-tabs i:nth-child(2){animation-delay:.5s}#ablauf.da .st-tabs i:nth-child(3){animation-delay:1s}
@keyframes st-fall{0%{opacity:0;transform:translateY(-10px) rotate(45deg)}8%{opacity:1}22%{opacity:1;transform:translateY(62px) rotate(45deg) scale(.9)}26%,100%{opacity:0;transform:translateY(66px) rotate(45deg) scale(.3)}}
@keyframes st-tab{0%,22%{background:transparent;border-color:#3A3A3A}26%,85%{background:#E0246B;border-color:#E0246B}100%{background:transparent;border-color:#3A3A3A}}
#ablauf .st2 .st-tabs i{border-color:#3A3A3A}
#ablauf.da .st3 .st-tabs i:nth-child(2){animation-name:st-tab2}
@keyframes st-tab2{0%,22%{background:transparent;border-color:#3A3A3A}26%,85%{background:#F49AB8;border-color:#F49AB8}100%{background:transparent;border-color:#3A3A3A}}
#ablauf.da .st3 .st-tabs i:nth-child(3){animation-name:st-tab3}
@keyframes st-tab3{0%,22%{background:transparent;border-color:#3A3A3A}26%,85%{background:#FF6E4A;border-color:#FF6E4A}100%{background:transparent;border-color:#3A3A3A}}
@media (max-width:760px){.st-reihe{grid-template-columns:1fr;gap:44px}.st-reihe::before{display:none}}
@media (prefers-reduced-motion:reduce){#ablauf .st-bild *{animation:none!important}.st-tipp{width:5ch}.st-zl i{transform:none}}

/* Datenschutz-Abschnitt (Link in Bio, Brand Hub) */
#datenschutz{padding-top:56px!important}
.dsg-liste{list-style:none;padding:0;margin:-6px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.dsg-liste li{font-size:13.5px;font-weight:700;color:#F2F2F2;background:#1E1E1E;border-radius:999px;padding:7px 14px}
.dsg-liste li::before{content:"";display:inline-block;width:7px;height:12px;margin-right:9px;border:solid #FF6E9E;border-width:0 2.5px 2.5px 0;transform:translateY(-2px) rotate(45deg)}
.sc-k-bild .mini.m-dsg{display:flex;align-items:center;gap:14px;padding:16px 18px;height:auto}
.dsg-schild{flex:none;width:44px;height:52px;background:#E0246B;clip-path:polygon(50% 0,100% 16%,100% 52%,50% 100%,0 52%,0 16%);position:relative}
.dsg-schild::after{content:"";position:absolute;left:16px;top:14px;width:9px;height:17px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.dsg-z{display:flex;flex-direction:column;font-size:12px;color:var(--muted)}.dsg-z b{font-size:17px;color:var(--fg)}
/* SEO-Text am Ende linksbuendig (die Regel fuer schmale Abschnitte zentriert sonst) */
.lb-seo .wrap.schmal h2,.lb-seo .wrap.schmal h3{text-align:left!important;margin-left:0!important}