/* Flash-Portale 03.11.2026 (Noli: "bau bitte alle Portale in Flash"). Muster: gilt nur mit Cookie ms_flash=1 (Caddy liefert dann
   flash-portale-seiten/<portal>/index.html = Live-Seite + diese Datei). Regel Flash: hell, Weiss mit Orange, keine dunklen Flaechen.
   Hero/Buehne: Groesse und Abstaende unveraendert (eiserne Regel), nur Farben und Schrift. */
@import url("schriften/schriften.css");
:root{--f-creme:#fff7f0;--f-tinte:#2a2118;--f-grau:#7a6a5c;--f-linie:#ffe1c7;--f-orange:#f8821f;--f-tief:#c45c00;--f-hell:#fff1e4;--f-gold:#ffc54d;
 --f-display:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;--f-text:"Figtree","Segoe UI",Roboto,Arial,sans-serif}
body.msFlashPortal{background:#fff;font-family:var(--f-text)!important;color:var(--f-tinte)}
body.msFlashPortal::before{content:"";position:absolute;left:0;right:0;top:0;height:1100px;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at 50% 0,rgba(255,197,77,.22),transparent 60%),repeating-conic-gradient(from 0deg at 50% -10%,rgba(248,130,31,.07) 0 6deg,transparent 6deg 12deg);
 -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
body.msFlashPortal :is(h1,h2,h3,.card-title,.sec-kopf h2){font-family:var(--f-display)!important;letter-spacing:-.02em}
/* Kopf */
body.msFlashPortal header{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(8px);box-shadow:none!important;border-bottom:3px solid var(--f-orange)!important}
body.msFlashPortal header .logo{font-family:var(--f-display)!important;font-weight:800}
body.msFlashPortal .nav-actions .btn{border-radius:99px!important;font-weight:800}
body.msFlashPortal .nav-actions .btn-ghost{border:2px solid var(--f-orange)!important;color:var(--f-tinte)!important;background:#fff!important}
/* Knoepfe */
body.msFlashPortal :is(.btn-accent,.btn-primary,#searchBtn,#suchenBtn,#kisBtn,.btn-accent2){border-radius:99px!important;border:0!important;color:#fff!important;font-weight:800!important;
 background:linear-gradient(180deg,#ff9a3c,var(--f-orange))!important;box-shadow:0 5px 0 var(--f-tief),0 12px 24px rgba(248,130,31,.28)!important;transition:transform .15s,box-shadow .15s!important}
body.msFlashPortal :is(.btn-accent,.btn-primary,#searchBtn,#suchenBtn,#kisBtn,.btn-accent2):hover{transform:translateY(-2px)}
body.msFlashPortal :is(.btn-accent,.btn-primary,#searchBtn,#suchenBtn,#kisBtn,.btn-accent2):active{transform:translateY(3px);box-shadow:0 2px 0 var(--f-tief)!important}
body.msFlashPortal .btn-ghost{border-radius:99px!important}
/* Hero: nur Schrift und Farben */
body.msFlashPortal .hero h1{font-weight:800!important;letter-spacing:-.03em}
body.msFlashPortal .hero h1 em,body.msFlashPortal .hero h1 b{color:var(--f-orange);font-style:normal}
/* Suche */
body.msFlashPortal :is(.search-card,.kis-card){border:2px solid var(--f-linie)!important;border-radius:28px!important;box-shadow:0 18px 40px rgba(248,130,31,.13)!important;background:#fff!important}
body.msFlashPortal .kis-card{background:linear-gradient(180deg,#fff,var(--f-creme))!important}
body.msFlashPortal :is(.search-card,.kis-card) :is(input,select,button.feld-btn,.field,.fg>button,.picker){border-radius:16px!important}
body.msFlashPortal :is(.search-card,.kis-card) :is(input,select,.feld-btn,.field):focus{outline:3px solid rgba(248,130,31,.35)!important;border-color:var(--f-orange)!important}
body.msFlashPortal :is(.cat-tab,.ac-tab){border-radius:99px!important;font-weight:700}
body.msFlashPortal :is(.cat-tab,.ac-tab):is(.active,.aktiv,[aria-selected=true]){background:var(--f-hell)!important;color:var(--f-tief)!important;box-shadow:inset 0 0 0 2px var(--f-orange)}
body.msFlashPortal .kis-bsp,body.msFlashPortal .chip{border-radius:99px!important;border:1.5px solid var(--f-linie)!important;background:#fff!important;color:var(--f-tinte)!important}
body.msFlashPortal .kis-bsp:hover{border-color:var(--f-orange)!important;color:var(--f-tief)!important}
/* Abschnittskoepfe */
body.msFlashPortal .sec-kopf h2,body.msFlashPortal .listings>.wrap>h2,body.msFlashPortal section>.wrap>h2{font-weight:800!important;font-size:clamp(28px,3.2vw,44px)!important}
body.msFlashPortal :is(.sec-kopf h2,.listings h2){background:linear-gradient(transparent 70%,rgba(255,197,77,.55) 70%,rgba(255,197,77,.55) 92%,transparent 92%) no-repeat;background-size:100% 100%;display:inline;padding:0 4px}
@keyframes msfpZucken{0%,88%,100%{transform:none}91%{transform:rotate(-12deg) scale(1.15)}94%{transform:rotate(10deg) scale(1.1)}}
/* Karten */
body.msFlashPortal .card{border:2px solid var(--f-linie)!important;border-radius:24px!important;box-shadow:0 6px 18px rgba(248,130,31,.08)!important;overflow:hidden;
 transition:transform .3s cubic-bezier(.2,1.5,.4,1),border-color .2s,box-shadow .2s!important}
body.msFlashPortal .card:hover{transform:translateY(-8px) rotate(-.8deg);border-color:var(--f-orange)!important;box-shadow:0 18px 36px rgba(248,130,31,.2)!important}
body.msFlashPortal .card .card-title{font-weight:700!important}
body.msFlashPortal .card :is(.price,.card-lohn,.pk-preis){font-family:var(--f-display)!important;color:var(--f-orange)!important;font-weight:800!important}
body.msFlashPortal .card .specs{border-color:var(--f-linie)!important}
body.msFlashPortal .card .material-symbols-outlined{color:var(--f-orange)!important}
body.msFlashPortal .card :is(a.btn,.btn,button.zum){border-radius:99px!important;background:var(--f-hell)!important;color:var(--f-tief)!important;font-weight:800}
body.msFlashPortal .card :is(a.btn,.btn):hover{background:var(--f-orange)!important;color:#fff!important}
body.msFlashPortal .sa-badge,body.msFlashPortal .badge-top,body.msFlashPortal [class*=top-badge]{background:var(--f-orange)!important;color:#fff!important;border-radius:99px!important}
/* dunkle Flaechen -> hell (Flash-Regel) */
body.msFlashPortal :is(.mw-card,#kiWertSec [style*=gradient],[class*=topplatz],[class*=top-platz],.topfrei){background:linear-gradient(135deg,var(--f-creme),#ffe3c8)!important;color:var(--f-tinte)!important;border:2px solid var(--f-linie)!important}
body.msFlashPortal .mw-card :is(h2,h3,p,label,small,span,b){color:var(--f-tinte)!important}
body.msFlashPortal :is(.msfpHell,#kiWertSec [style*=gradient],#msfpNie),body.msFlashPortal :is(.msfpHell,#kiWertSec [style*=gradient],#msfpNie) :not(.msfpKnopf):not(.msfpKnopf *):not(input):not(select){color:var(--f-tinte)!important;text-shadow:none!important}
body.msFlashPortal :is(.msfpHell,#kiWertSec [style*=gradient],#msfpNie) :is(input,select,textarea){color:var(--f-tinte)!important;background:#fff!important;border:1.5px solid var(--f-linie)!important}
body.msFlashPortal :is(.msfpKnopf,#msfpNie){background:linear-gradient(180deg,#ff9a3c,var(--f-orange))!important;color:#fff!important;border:0!important;border-radius:99px!important;box-shadow:0 5px 0 var(--f-tief),0 12px 24px rgba(248,130,31,.28)!important}
body.msFlashPortal .msfpHell{background:linear-gradient(135deg,var(--f-creme),#ffe3c8)!important;border:2px dashed var(--f-orange)!important}
/* Laufband (flash-portale.js) */
.msfpBand{overflow:hidden;background:var(--f-orange);color:#fff;transform:rotate(-1.2deg) scale(1.02);margin:26px 0 30px;box-shadow:0 10px 30px rgba(248,130,31,.3);position:relative;z-index:2}
.msfpBand>div{display:flex;gap:34px;width:max-content;padding:12px 0;animation:msfpLauf 40s linear infinite;font:800 18px/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.msfpBand i{font-style:normal;color:var(--f-gold)}
@keyframes msfpLauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.msfpBand>div{animation:none}}
/* Fuss */
body.msFlashPortal footer{background:var(--f-creme)!important;color:var(--f-tinte)!important;border-top:4px solid var(--f-orange)!important}
body.msFlashPortal :is(footer,#msfpNie) :not(img):not(svg){color:var(--f-tinte)!important;opacity:1}
body.msFlashPortal :is(footer,#msfpNie) :is(small,p){color:var(--f-grau)!important}
body.msFlashPortal footer a:hover{color:var(--f-tief)!important}
body.msFlashPortal footer :is(h3,h4,b,strong){font-family:var(--f-display)!important}
/* Fenster (Detailseite, Anmelden, Inserieren) */
body.msFlashPortal :is(.modal,.modal-overlay>div,.modal-hg>div){border-radius:28px!important}
body.msFlashPortal :is(.modal-head,.modal-kopf){border-bottom:2px solid var(--f-linie)!important}
body.msFlashPortal :is(.modal-head,.modal-kopf) :is(h2,h3){font-family:var(--f-display)!important}
/* Muster-Hinweis */
.msfpHinweis{--f-orange:#f8821f;--f-tief:#c45c00;--f-tinte:#2a2118;position:fixed;left:14px;bottom:96px;z-index:2147483000;background:#fff;border:2px solid var(--f-orange);border-radius:99px;padding:8px 14px;font:700 13px var(--f-text);color:var(--f-tinte);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.msfpHinweis a{color:var(--f-tief);margin-left:8px}
@media (max-width:760px){.msfpBand>div{font-size:15px}.msfpHinweis{bottom:84px;font-size:12px}}

/* Karten-Platzhalter (ohne Bild, z. B. "Top-Platz frei") hell statt Dunkelblau/Gruen */
body.msFlashPortal .card .card-media.msfpOhneBild{background-image:linear-gradient(135deg,#fff3e6,#ffdcbc)!important}
body.msFlashPortal .card .card-media.msfpOhneBild :is(h3,h4,b,strong,span,p,div,small){color:var(--f-tinte)!important;text-shadow:none!important}
body.msFlashPortal .card .card-media.msfpOhneBild{border-bottom:2px dashed var(--f-orange)}
/* lila Knoepfe (Wert-Rechner) -> Flash-Orange */
body.msFlashPortal .mw-knopf{background:linear-gradient(180deg,#ff9a3c,var(--f-orange))!important;border-radius:99px!important;box-shadow:0 5px 0 var(--f-tief),0 12px 24px rgba(248,130,31,.28)!important;color:#fff!important;border:0!important}
body.msFlashPortal .msfpBand{margin:34px 0 46px}
@media (max-width:760px){.msfpHinweis{left:auto;right:10px;padding:5px 10px}.msfpHinweis b{display:none}}

/* 03.11.2026 Shop-Logo auf den Portalen (wie .msfLogo im Shop) */
body.msFlashPortal a.logo.msfpLogo{display:inline-flex!important;align-items:center;gap:10px;font-family:var(--f-display)!important;font-weight:800;letter-spacing:.22em;font-size:21px;color:var(--f-tinte)!important;text-decoration:none!important;white-space:nowrap}
body.msFlashPortal a.logo.msfpLogo svg{width:38px;height:38px;flex:none;transition:transform .4s cubic-bezier(.2,1.8,.4,1)}
body.msFlashPortal a.logo.msfpLogo:hover svg{transform:rotate(-14deg) scale(1.12)}
body.msFlashPortal a.logo.msfpLogo b{font-weight:800}
body.msFlashPortal footer a.logo.msfpLogo,body.msFlashPortal footer a.logo.msfpLogo b{color:var(--f-tinte)!important}
@media (max-width:760px){body.msFlashPortal a.logo.msfpLogo{font-size:17px;letter-spacing:.16em;gap:8px}body.msFlashPortal a.logo.msfpLogo svg{width:32px;height:32px}}
@media (max-width:380px){body.msFlashPortal a.logo.msfpLogo{font-size:14px;letter-spacing:.1em;gap:6px}body.msFlashPortal a.logo.msfpLogo svg{width:28px;height:28px}}
body.msFlashPortal a.logo.msfpLogo{flex-direction:row!important;flex-wrap:nowrap!important;width:auto!important;max-width:none!important;height:auto!important;line-height:1!important}
body.msFlashPortal a.logo.msfpLogo svg,body.msFlashPortal a.logo.msfpLogo b{display:block!important;margin:0!important}

/* 03.11.2026 (Noli Screenshot App Store: "bau mir die Portale und die Erde wie im Apple App Store nach"): schwebende Milchglas-Leiste,
   rund, Abstand zum Rand, aktiver Bereich als eigene Pille, Erde als runder Knopf in der Mitte */
body.msFlashPortal :is(#msLeiste,#mobNav){left:50%!important;right:auto!important;transform:translateX(-50%)!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;top:auto!important;width:min(calc(100% - 20px),780px)!important;max-width:none!important;height:64px!important;min-height:0!important;padding:6px!important;margin:0!important;border:1px solid rgba(255,255,255,.75)!important;border-radius:999px!important;background:rgba(255,255,255,.74)!important;-webkit-backdrop-filter:blur(22px) saturate(180%)!important;backdrop-filter:blur(22px) saturate(180%)!important;box-shadow:0 12px 36px rgba(42,33,24,.24),0 2px 6px rgba(42,33,24,.08),inset 0 1px 0 rgba(255,255,255,.9)!important;display:flex!important;align-items:center!important;box-sizing:border-box!important;overflow:visible!important}
body.msFlashPortal #mobNav .mn-reihe{display:flex!important;align-items:center!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;gap:0!important;background:none!important;border:0!important}
body.msFlashPortal :is(#msLeiste>button,#msLeiste>a,#mobNav .mn-reihe>a){flex:1 1 0!important;height:52px!important;min-width:0!important;margin:0!important;padding:0 2px!important;border-radius:999px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important;color:#3a3330!important;font:700 10.5px/1.1 "Figtree","Segoe UI",Arial,sans-serif!important;text-decoration:none!important;background:transparent!important;transition:background .2s,transform .15s}
body.msFlashPortal :is(#msLeiste>button,#msLeiste>a,#mobNav .mn-reihe>a) .material-symbols-outlined{color:#3a3330!important;font-size:24px!important;line-height:1!important}
body.msFlashPortal :is(#msLeiste>button,#msLeiste>a,#mobNav .mn-reihe>a):active{transform:scale(.94)}
body.msFlashPortal :is(#msLeiste>button.aktiv,#msLeiste>a.aktiv,#mobNav .mn-reihe>a.ms-aktiv){background:rgba(248,130,31,.16)!important;color:#c45c00!important}
body.msFlashPortal :is(#msLeiste>button.aktiv,#msLeiste>a.aktiv,#mobNav .mn-reihe>a.ms-aktiv) .material-symbols-outlined{color:#f8821f!important;font-variation-settings:'FILL' 1}
@media (hover:hover){body.msFlashPortal :is(#msLeiste>button,#msLeiste>a,#mobNav .mn-reihe>a):not(.aktiv):not(.ms-aktiv):hover{background:rgba(42,33,24,.06)!important}}
body.msFlashPortal :is(#msLeiste .ms-reihe,#mobNav #msErdeLuecke){flex:0 0 70px!important;height:52px!important;display:flex!important;align-items:center!important;justify-content:center!important;position:relative!important;margin:0!important}
body.msFlashPortal :is(#msAiKnopf,#msDialogKnopf){position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-58%)!important;width:66px!important;height:66px!important;margin:0!important;padding:0!important;border-radius:50%!important;border:3px solid rgba(255,255,255,.95)!important;box-shadow:0 8px 20px rgba(42,33,24,.3),0 0 0 1px rgba(248,130,31,.25)!important;background:#fff!important;overflow:hidden!important}
body.msFlashPortal :is(#msAiKnopf,#msDialogKnopf) :is(.msKugel,span:not(.ende),canvas,img){width:100%!important;height:100%!important;border-radius:50%!important}
@media (max-width:760px){body.msFlashPortal :is(#msLeiste,#mobNav){height:60px!important;width:calc(100% - 16px)!important;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important}
 body.msFlashPortal :is(#msLeiste>button,#msLeiste>a,#mobNav .mn-reihe>a){height:48px!important;font-size:10px!important}
 body.msFlashPortal :is(#msLeiste .ms-reihe,#mobNav #msErdeLuecke){flex-basis:62px!important}
 body.msFlashPortal :is(#msAiKnopf,#msDialogKnopf){width:58px!important;height:58px!important}}
/* App-Store-Leiste: Portal-Regeln mit #msErdeLuecke #msDialogKnopf sind staerker -> gleiche Spezifitaet + body */
body.msFlashPortal #mobNav #msErdeLuecke #msDialogKnopf{position:absolute!important;inset:50% auto auto 50%!important;bottom:auto!important;transform:translate(-50%,-58%)!important;width:66px!important;height:66px!important;margin:0!important;padding:0!important;border-radius:50%!important;border:3px solid rgba(255,255,255,.95)!important;box-shadow:0 8px 20px rgba(42,33,24,.3),0 0 0 1px rgba(248,130,31,.25)!important;background:#fff!important;overflow:hidden!important;z-index:2}
body.msFlashPortal #mobNav #msErdeLuecke #msDialogKnopf .msKugel,body.msFlashPortal #mobNav #msErdeLuecke #msDialogKnopf canvas{width:100%!important;height:100%!important;display:block!important;border-radius:50%!important}
body.msFlashPortal #mobNav .mn-reihe>a :is(.ms-kurz,.ms-lang){color:#3a3330!important}
body.msFlashPortal #mobNav .mn-reihe>a.ms-aktiv :is(.ms-kurz,.ms-lang){color:#c45c00!important}
@media (max-width:760px){body.msFlashPortal #mobNav #msErdeLuecke #msDialogKnopf{width:58px!important;height:58px!important}}
/* 03.11.2026 23:50 (Noli Screenshot App: "bei den Portalen ist es nicht richtig, miss die Pixel im Shop und uebernimm sie"): in der App
   schob die alte Regel html.ms-einheit.ms-app #mobNav{bottom:-15px!important} (einheit.css, fuer den alten Balken) die Pille unter den Rand.
   Gleicher Abstand wie im Shop: 8 px Handy / 10 px PC ueber dem sicheren Bereich. */
html.ms-einheit.ms-app body.msFlashPortal #mobNav,html body.msFlashPortal #mobNav#mobNav{bottom:calc(10px + env(safe-area-inset-bottom,0px))!important}
@media (max-width:760px){html.ms-einheit.ms-app body.msFlashPortal #mobNav,html body.msFlashPortal #mobNav#mobNav{bottom:calc(8px + env(safe-area-inset-bottom,0px))!important}}
html body.msFlashPortal #mobNav #msErdeLuecke{width:70px!important;min-width:70px!important;max-width:70px!important;flex:0 0 70px!important;padding:0!important}
@media (max-width:760px){html body.msFlashPortal #mobNav #msErdeLuecke{width:62px!important;min-width:62px!important;max-width:62px!important;flex:0 0 62px!important}}
/* 03.11.2026: Erde-Knopf weiss statt dunkelblau */
html body.msFlashPortal #mobNav #msErdeLuecke #msDialogKnopf{background:#fff!important}
html body.msFlashPortal #mobNav #msErdeLuecke #msDialogKnopf .msKugel{transform:scale(1.04)}
html body.msFlashPortal #mobNav #msErdeLuecke #msDialogKnopf .msKugel{position:absolute!important;inset:0!important;margin:auto!important;width:100%!important;height:100%!important;transform:scale(1.16)!important;transform-origin:50% 50%!important}
/* 03.11.2026: Erde ohne Rand */
html body.msFlashPortal #mobNav #msErdeLuecke #msDialogKnopf{border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;filter:drop-shadow(0 6px 10px rgba(42,33,24,.28))}
html body.msFlashPortal #mobNav #msErdeLuecke #msDialogKnopf .msKugel{transform:scale(1.12)!important}

/* 03.11.2026 (Noli: "beim Apple Store ist der Balken wie ein Milchglas, bei uns ist er fast weiss"): durchsichtiger, staerkere Unschaerfe, Glanzkante */
html body.msFlashPortal #mobNav#mobNav,html.ms-einheit.ms-app body.msFlashPortal #mobNav{background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.26))!important;-webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.04)!important;backdrop-filter:blur(26px) saturate(190%) brightness(1.04)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 14px 40px rgba(42,33,24,.22),0 1px 3px rgba(42,33,24,.08),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.25)!important}

/* 03.11.2026 23:55 (Noli: "noch nicht ganz perfekt, es muss durchsichtiger sein"): Weiss 22 -> 12 %, Unschaerfe 18 px */
html body.msFlashPortal #mobNav#mobNav,html.ms-einheit.ms-app body.msFlashPortal #mobNav{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.12))!important;-webkit-backdrop-filter:blur(18px) saturate(200%)!important;backdrop-filter:blur(18px) saturate(200%)!important;border:1px solid rgba(255,255,255,.5)!important}

/* 03.11.2026 23:58 (Noli: "noch durchsichtiger, wie ein Glas, nur etwas milchig"): Weiss 10 -> 5 %, Unschaerfe nur 6 px, Glanzkante bleibt */
html body.msFlashPortal #mobNav#mobNav,html.ms-einheit.ms-app body.msFlashPortal #mobNav{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05))!important;-webkit-backdrop-filter:blur(6px) saturate(170%)!important;backdrop-filter:blur(6px) saturate(170%)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 10px 30px rgba(42,33,24,.16),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.3)!important}

/* 04.11.2026 00:00 (Noli: "noch mehr glasig, minimum 50 % mehr"): Weiss halbiert 5/2.5 %, Unschaerfe halbiert 3 px */
html body.msFlashPortal #mobNav#mobNav,html.ms-einheit.ms-app body.msFlashPortal #mobNav{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025))!important;-webkit-backdrop-filter:blur(3px) saturate(160%)!important;backdrop-filter:blur(3px) saturate(160%)!important}

/* 04.11.2026 (Noli: "bei der Erde ist ein Kreis, wenn ich mit Leandra rede"): das x-Abzeichen .ende (Gespraech beenden) wurde von der Regel oben auf volle Knopfgroesse gezogen und lag als weisser Kreis ueber der Erde. Jetzt wieder klein oben rechts. */
body.msFlashPortal #msAiKnopf .ende{position:absolute!important;top:-4px!important;right:-6px!important;left:auto!important;bottom:auto!important;width:22px!important;height:22px!important;border-radius:99px!important;background:#fff!important;color:#d63b2f!important;border:1.5px solid #f0d4d1!important;font:800 13px/19px Inter,Arial,sans-serif!important;text-align:center!important;transform:none!important;z-index:3!important;box-shadow:0 2px 6px rgba(42,33,24,.18)!important;cursor:pointer}

/* 04.11.2026 18:30 (Noli: "bau mir bitte voruebergehend A"): Variante wie App Store. Leiste wieder 3 + Erde + 3, Chat als eigene runde Glas-Taste rechts daneben.
   Leiste und Taste zusammen mittig: Leistenbreite --msPw, 8 px Abstand, Taste 60 px (PC 64 px). */
#msChatKnopf{display:none}
body.msFlashPortal{--msPw:min(calc(100vw - 84px),780px);--msPl:calc(50% - (var(--msPw) + 68px) / 2)}
body.msFlashPortal #mobNav{width:var(--msPw)!important;left:var(--msPl)!important;transform:none!important}
body.msFlashPortal #msChatKnopf{display:flex;position:fixed;z-index:2147481400;left:calc(var(--msPl) + var(--msPw) + 8px);bottom:calc(10px + env(safe-area-inset-bottom,0px));width:64px;height:64px;padding:0;border-radius:50%;align-items:center;justify-content:center;cursor:pointer;color:#3a3330;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));-webkit-backdrop-filter:blur(3px) saturate(160%);backdrop-filter:blur(3px) saturate(160%);border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 24px rgba(42,33,24,.16),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.25);transition:transform .15s}
body.msFlashPortal #msChatKnopf:active{transform:scale(.94)}
body.msFlashPortal #msChatKnopf .material-symbols-outlined{font-size:27px;line-height:1;display:flex}
body.msFlashPortal #msChatKnopf .msChatZahl{position:absolute;top:2px;right:2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#f8821f;color:#fff;font:800 11px/16px Inter,Arial,sans-serif;border:2px solid #fff;box-sizing:border-box;text-align:center}
body.msFlashPortal #msChatKnopf .msChatZahl[hidden]{display:none}
@media (max-width:760px){body.msFlashPortal{--msPw:calc(100vw - 84px)}body.msFlashPortal #msChatKnopf{width:60px;height:60px;bottom:calc(8px + env(safe-area-inset-bottom,0px))}}
html.ms-app body.msFlashPortal #msChatKnopf,html.ms-einheit.ms-app body.msFlashPortal #msChatKnopf{bottom:calc(10px + env(safe-area-inset-bottom,0px))!important}
@media (max-width:760px){html.ms-app body.msFlashPortal #msChatKnopf,html.ms-einheit.ms-app body.msFlashPortal #msChatKnopf{bottom:calc(8px + env(safe-area-inset-bottom,0px))!important}}
/* schmale Handys (iPhone SE): mit der Chat-Taste ist die Leiste schmaler -> Beschriftung kleiner, unter 340 px nur Symbole (aktives Portal mit Namen) */
@media (max-width:380px){body.msFlashPortal #mobNav .mn-reihe>a :is(.ms-kurz,.ms-lang){font-size:9px!important;letter-spacing:-.2px!important}}
@media (max-width:340px){body.msFlashPortal #mobNav .mn-reihe>a:not(.aktiv):not(.ms-aktiv) :is(.ms-kurz,.ms-lang){display:none!important}body.msFlashPortal #mobNav .mn-reihe>a :is(.ms-kurz,.ms-lang){font-size:8.5px!important}}
/* 04.11.2026 18:35 (Noli: "wir muessen jetzt oben im Menue die Nachrichten rausnehmen, die Kunden sollen ueber den Chat schreiben"): Reiter "Nachrichten" im Konto-Menue aller 5 Portale ausgeblendet (Automobile data-tab=chat, die anderen data-ktab=post). Die Inserate-Gespraeche stehen im MineShop Chat unter "Inserate-Chats". */
body.msFlashPortal .ac-tabs .ac-tab:is([data-tab="chat"],[data-ktab="post"]){display:none!important}
/* 04.11.2026 Noli: "bitte hier noch schreiben Chat wie bei den anderen Portalen": Wort unter der Sprechblase, gleiche Schrift wie die Leiste */
body.msFlashPortal #msChatKnopf{flex-direction:column;gap:1px}
body.msFlashPortal #msChatKnopf .material-symbols-outlined{font-size:24px}
body.msFlashPortal #msChatKnopf::after{content:"Chat";display:block;font:700 10.5px/1.1 Figtree,"Segoe UI",Arial,sans-serif;color:#3a3330}
@media (max-width:760px){body.msFlashPortal #msChatKnopf::after{font-size:10px}}
