/* ═══════════════════════════════════════════════════════════════════
   Jump House Bremen · Essenszettel — gemeinsames Design (Linear-Stil)

   Wird auf jeder Seite NACH deren eigenem <style> geladen und legt sich
   darüber: fast schwarze Flächen, Haarlinien statt Schatten, ruhige
   Schrift (max. 600), ein einziger Akzent (Acid Lime), Uhrzeiten in
   Monospace. Die Seiten-Logik bleibt unberührt — hier steht nur Optik.

   Akzentfarbe ändern: --jump in den :root-Blöcken der Seiten und
   --jump-ink (Schrift AUF dem Akzent) unten anpassen.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --jump-ink:#08090a;
  --l-void:#08090a; --l-carbon:#0f1011; --l-obsidian:#161718;
  --l-graphite:#23252a; --l-smoke:#383b3f; --l-ash:#62666d; --l-fog:#8a8f98;
  --l-mist:#d0d6e0; --l-text:#f7f8f8;
  --l-green:#4cc38a; --l-amber:#f2c94c; --l-red:#eb5757; --l-teal:#02b8cc; --l-indigo:#5e6ad2;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* --gantt-lab (Breite der Namensspalte im Gantt) setzt die Seite selbst,
     sonst gilt 160px — siehe .gantt-achse unten */
}

/* ── Grundlagen ───────────────────────────────────────────────── */
body{
  font-family:Inter,-apple-system,'Segoe UI Variable','Segoe UI',Roboto,sans-serif;
  font-feature-settings:"cv01","ss03";letter-spacing:-.006em;
}
::selection{background:rgba(228,242,34,.28);color:#fff}
*{scrollbar-color:var(--l-smoke) transparent}

/* Linear schreibt Labels normal statt in gesperrten Großbuchstaben */
.tag,.stat span,.abschnitt,.netz,.knopf,.k-phase,.gtab th,.agruppe,.dgruppe,.chart-eyebrow,
.kpi .l,.eyebrow,h2.section,.bdevice,.status-chip,.feld span,.zeit small,.nk-titel,
.gkasten .eyebrow,.pos span,.fertig,.quittiert,.zinfo,#ndlg .gruppe,.gantt-legende span,
.k-putzBtn,.uhrzeit .rest,.tagkopf,.import-th,table th,.top .date,.kommtnicht,.klein .art,
.holen,.zurueck,.bahn.absage .uhrzeit .rest,.stat b + span{
  text-transform:none!important;letter-spacing:-.003em!important;
}
.abschnitt,h2.section,.agruppe,.dgruppe,#ndlg .gruppe{font-size:13px!important;font-weight:500!important;color:var(--l-fog)!important}
.abschnitt::after{height:1px;background:var(--l-graphite)!important}
.tag{font-size:13px!important;font-weight:500!important;color:var(--l-fog)!important}
.stat span{font-size:12.5px!important;font-weight:500!important;color:var(--l-fog)!important}
.stat span,.knopf,.tag,.netz,.netzpill{white-space:nowrap}

/* Uhrzeiten und Zahlen in Monospace — Gewicht ausdrücklich ≤ 500,
   sonst würde der Browser eine künstlich fette Mono-Schrift erzeugen */
.uhr,.zeit,.gzeit,.uhrzeit .t,.gantt-bar,.gantt-achse span,.k-zeile b,.pz-zahl,.klein .t,
#zEssen,.zfeld input,.gantt-anzahl,.chart-y span,.pos b,.gbis,.step .n,.zinfo b,
.dzeile .da,.karte .zahl,.gnum,.bestand-zahl,.liefermenge,.pill.time,.k-box,.kennung,.gkennung,.gbox,.box{
  font-family:var(--mono)!important;font-weight:500!important;letter-spacing:-.02em;
}
.k-box,.kennung,.gkennung,.gbox,.box{letter-spacing:-.01em}

/* ── Kopfleisten ──────────────────────────────────────────────── */
body > header,.screen > .top{background:rgba(15,16,17,.86)!important;border-bottom:1px solid var(--l-graphite)!important;
  -webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px)}
body > header{flex-wrap:wrap;row-gap:10px}
.header-logo,.top-logo{border-radius:10px!important;box-shadow:0 0 0 1px var(--l-graphite)!important}
.uhr{letter-spacing:-.04em!important}
.trenner{background:var(--l-graphite)!important}
.stat b{font-weight:600!important}

/* Knöpfe: Linear-Ghost, Druck-Feedback */
button{transition:transform .14s var(--ease),background-color .16s,border-color .16s,color .16s,box-shadow .16s,filter .16s,opacity .16s}
button:active:not(:disabled){transform:scale(.97)}
.knopf{border-radius:8px!important;font-size:13px!important;font-weight:500!important;
  border:1px solid var(--l-graphite)!important}
.knopf:hover{border-color:var(--l-smoke)!important;background:var(--l-obsidian)}
.knopf.an{border-color:transparent!important}
input[type=date],select,input[type=search],input[type=text],input[type=number],textarea{
  border-radius:8px!important;border-width:1px!important;transition:border-color .16s,box-shadow .16s}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--l-mist)!important;
  box-shadow:0 0 0 3px rgba(208,214,224,.08)!important}
.netz,.netzpill{font-weight:500!important}
.punkt,.dot{box-shadow:0 0 0 0 currentColor}
.punkt:not(.weg):not(.warten),.dot:not(.weg):not(.warten){animation:jhLive 2.2s ease-out infinite}
@keyframes jhLive{0%{box-shadow:0 0 0 0 rgba(76,195,138,.55)}80%,100%{box-shadow:0 0 0 6px rgba(76,195,138,0)}}

/* Primäre Knöpfe auf dem Akzent: dunkle Schrift, Linear-Innenschatten */
.senden,.plusBtn,.primary,.dja,#adlg .ja,#ndlg .ja,#zeitdlg .ja,.gja{
  border-radius:8px!important;font-weight:600!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.16)!important}
.senden:hover:not(:disabled),.plusBtn:hover,.primary:hover:not(:disabled){filter:brightness(1.06)}
#bestandBtn{background:transparent!important;color:var(--l-mist)!important;
  box-shadow:inset 0 0 0 1px var(--l-graphite)!important}
#bestandBtn:hover{background:var(--l-obsidian)!important;box-shadow:inset 0 0 0 1px var(--l-smoke)!important}

/* ── Segment-Umschalter (Kasse/Gastro) ────────────────────────── */
.reiter,.greiter{border-radius:10px!important;background:var(--l-carbon)!important;
  border:1px solid var(--l-graphite)!important;padding:3px!important;position:relative}
.rchip,.grchip{border-radius:7px!important;font-weight:500!important;position:relative;z-index:1}
.rchip.an,.grchip.an{background:var(--l-obsidian)!important;color:#fff!important;
  box-shadow:inset 0 0 0 1px var(--l-smoke),0 2px 4px rgba(0,0,0,.4)!important}
.fchip{border-radius:999px!important;border-width:1px!important;font-weight:500!important}
.fchip.an{background:var(--l-obsidian)!important;border-color:var(--l-smoke)!important;color:#fff!important}

/* ── Karten & Flächen: 12px Radius, Haarlinie, kein Schlagschatten ── */
.karte,.bahn,.zeile,.akarte,.panel,.card,#drop,.warnkarte,.chart-card,.kpi-row,.gantt-wrap,
.dkasten,.gkasten,.kasten,.unten-liste .unten-zeile,.hinweis{border-radius:12px!important}
.zeile,.karte,.bahn{border-width:1px!important}
.card,.akarte,.panel,.chart-card{box-shadow:none!important}
.card{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--l-carbon)!important}
.bg-blobs{display:none!important}
.dkasten,.gkasten,.kasten{border:1px solid var(--l-smoke)!important;
  box-shadow:0 4px 32px rgba(8,9,10,.6),0 24px 60px rgba(0,0,0,.35)!important;
  animation:jhPop .34s var(--ease)}
@keyframes jhPop{from{opacity:0;transform:translateY(10px) scale(.975)}}
#gdlg,#detail,#zeitdlg,#adlg,#bdlg,#ndlg,#sdlg,#frage,#ldlg,#fotodlg{
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:jhFade .2s ease}
@keyframes jhFade{from{opacity:0}}
.dkasten h2,.gkasten h2,.kasten h2,#sdlg h2,#adlg h2,#bdlg h2,#ndlg h2,#zeitdlg h2,#frage h2{font-weight:600!important;letter-spacing:-.015em!important}
.dknoepfe button,.gknoepfe button,#adlg button,#ndlg .knoepfe button,#zeitdlg button,#frage button,
#sdlg .nein,#bdlg button.nein,.bwahl,.keins{border-radius:8px!important;font-weight:600!important}
.nein,.gnein,.dnein{border-width:1px!important}
.bwahl,.keins,.step button,.back,.lock,.haken,#notiz,.suchzeile input,.zfeld input,.datzeile input{border-width:1px!important}
.back,.lock{border-radius:8px!important}
.step button{border-radius:8px!important}
.bwahl.an,.lock.an{background:var(--l-indigo)!important;border-color:var(--l-indigo)!important}

/* Linker Statusstreifen: schmal wie bei Linear */
.bahn::before,.karte::before{width:3px!important}
.bahn{padding-left:24px!important}

/* Hover: Rahmen hellt auf, Fläche hebt sich leicht */
.zeile,.bahn,.karte,.akarte,.lieferzeile,.klein{transition:border-color .2s,background-color .2s,transform .2s var(--ease),box-shadow .2s}
.zeile:hover,.akarte:hover{border-color:var(--l-smoke)!important}
.karte:not(.leer):hover{border-color:var(--l-smoke)}
.lieferzeile:hover{background:rgba(255,255,255,.015)}

/* Mausfolgendes Licht (Koordinaten setzt design.js) */
.jh-spot{position:relative;isolation:isolate}
.jh-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  opacity:0;transition:opacity .3s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.045),transparent 70%)}
.jh-spot:hover::after{opacity:1}

/* Chips/Badges: 4–6px Radius wie Linear-Tags */
.chip,.apill,.gextra,.gda,.pill,.status-chip,.quelle,.gnotiz{font-weight:500!important}
.k-box,.kennung,.gkennung,.gbox,.box{border-radius:6px!important}

/* ── Gastro ───────────────────────────────────────────────────── */
.pos{border-radius:10px!important;background:var(--l-obsidian)!important;border-color:var(--l-graphite)!important;
  transition:transform .25s var(--ease),border-color .2s}
.bahn:hover .pos:not(.aus){border-color:var(--l-smoke)!important}
.pos span{font-weight:500!important;color:var(--l-mist)!important}
.fertig,.quittiert{border-radius:10px!important;font-weight:600!important;border-width:1px!important}
.fertig:hover{box-shadow:0 0 0 4px rgba(76,195,138,.12)}
.bahn.jetzt{border-color:rgba(228,242,34,.35)!important;background:linear-gradient(90deg,rgba(228,242,34,.05),transparent 40%),var(--l-obsidian)!important}
.bahn.jetzt::before{animation:jhStreifen 1.8s ease-in-out infinite}
@keyframes jhStreifen{50%{opacity:.35}}
.hinweis{border-radius:8px!important;font-weight:600!important}
.zusatz span{border-radius:6px!important;font-weight:500!important}
.klein{border-radius:8px!important}
.dzu{border-radius:8px!important;border-width:1px!important}
.zschritt{border-radius:8px!important}

/* ── Partyhost ────────────────────────────────────────────────── */
.putzblock,.k-naechste{border-radius:8px!important}
.k-putzBtn,.k-gutschein{border-radius:8px!important;border-width:1px!important;font-weight:600!important}
.k-name{font-weight:600!important}
.karte.pulse::before{animation:pochen 1.4s ease-in-out infinite}
.gsmileys button{border-width:1px!important;border-radius:10px!important;transition:transform .2s var(--ease),border-color .2s,background-color .2s}
.gsmileys button:hover{transform:translateY(-2px)}
.gsmileys button span{text-transform:none!important;letter-spacing:0!important;font-weight:500!important}
.gspaeter{border:none!important;text-decoration:none!important}
.gspaeter:hover{color:var(--l-mist)!important;text-decoration:underline!important}
.gsmileys button:active{transform:scale(.95)}

/* ── Kasse ────────────────────────────────────────────────────── */
.karte .zahl{box-shadow:0 0 0 3px var(--l-void)!important;border-radius:999px!important}
.karte.hat{border-color:var(--jump)!important;box-shadow:0 0 0 1px var(--jump),0 0 0 5px rgba(228,242,34,.1)!important}
.karte .name{font-weight:600!important}
.balken{background:var(--l-graphite)!important}
.balken i{box-shadow:0 0 12px rgba(76,195,138,.35)}
.gtab td{font-weight:500}
.gtab .klick:hover{background:rgba(255,255,255,.025)!important}
#toast{border-radius:10px!important;background:var(--l-obsidian)!important;color:var(--l-text)!important;
  box-shadow:inset 0 0 0 1px var(--l-smoke),0 4px 32px rgba(8,9,10,.6)!important;font-weight:500!important}
#toast.fehler{background:#2e1517!important;color:#f29b9b!important;box-shadow:inset 0 0 0 1px #6b2a2e,0 4px 32px rgba(8,9,10,.6)!important}

/* ── Inventur ─────────────────────────────────────────────────── */
.akarte .balken i{transform-origin:left;animation:jhWachsen 1.1s var(--ease) .15s both}
@keyframes jhWachsen{from{transform:scaleX(0)}}
.bestand-zahl{font-size:44px}

/* ── Import ───────────────────────────────────────────────────── */
#drop{border-width:1px!important;transition:border-color .2s,background-color .2s,transform .25s var(--ease)}
#drop:hover{border-color:var(--l-smoke)!important;background:rgba(255,255,255,.015)!important}
#drop.hot{border-color:var(--jump)!important;background:rgba(228,242,34,.05)!important}
#drop svg{transition:transform .35s var(--ease)}
#drop:hover svg{transform:translateY(-3px)}
h1{font-weight:600!important;letter-spacing:-.022em!important}

/* ═══ Graphen ═════════════════════════════════════════════════════
   Gantt-Balken (Kasse, Gastro, Partyhost): getönte Fläche, Haarlinie
   in Statusfarbe, Monospace-Zeit — wie die Linear-Vorschau.          */
.gantt-wrap{background:var(--l-carbon)!important}
.gantt-titel{font-weight:600!important;font-size:15px!important;color:#fff}
.gantt-hint{font-weight:500!important;color:var(--l-fog)!important}
.gantt-scroll{position:relative}
.gantt-row{position:relative}
.gantt-row + .gantt-row::before{content:"";position:absolute;left:0;right:0;top:-3px;height:1px;background:rgba(35,37,42,.55)}
.gantt-label{font-weight:500!important;color:var(--l-fog)!important}
.gantt-label b{font-weight:600!important;color:var(--l-text)!important}
.gantt-track{background:rgba(255,255,255,.018)!important;border-radius:5px!important}
/* Rasterlinien an den Achsen-Uhrzeiten (design.js) */
.jh-raster{position:absolute;top:0;width:0;border-left:1px dashed rgba(56,59,63,.55);pointer-events:none;z-index:0}
.gantt-bar{z-index:1}
.gantt-bar{border-radius:5px!important;box-shadow:none;color:var(--l-mist)!important;font-size:12px!important;
  transition:filter .15s,transform .18s var(--ease),box-shadow .2s!important}
.gantt-bar:hover{filter:brightness(1.3);transform:translateY(-1px)}
.gantt-bar:active{transform:scale(.97)}
.gantt-bar.st-offen,.gantt-bar.st-wartet{background:rgba(255,255,255,.05)!important;color:var(--l-mist)!important;box-shadow:inset 0 0 0 1px var(--l-smoke)!important}
.gantt-bar.st-offen{background:rgba(242,201,76,.13)!important;color:var(--l-amber)!important;box-shadow:inset 0 0 0 1px rgba(242,201,76,.42)!important}
.gantt-bar.st-faellig{background:rgba(242,201,76,.16)!important;color:var(--l-amber)!important;box-shadow:inset 0 0 0 1px rgba(242,201,76,.5)!important}
.gantt-bar.st-erfasst{background:rgba(2,184,204,.14)!important;color:#4fd6e6!important;box-shadow:inset 0 0 0 1px rgba(2,184,204,.42)!important}
.gantt-bar.st-ausgegeben,.gantt-bar.st-erledigt{background:rgba(76,195,138,.15)!important;color:#6fd69b!important;box-shadow:inset 0 0 0 1px rgba(76,195,138,.42)!important}
.gantt-bar.st-kein{background:rgba(255,255,255,.04)!important;color:var(--l-fog)!important;box-shadow:inset 0 0 0 1px var(--l-graphite)!important}
.gantt-bar.st-weg{background:rgba(235,87,87,.1)!important;color:#f28a8a!important;box-shadow:inset 0 0 0 1px rgba(235,87,87,.35)!important;opacity:.7!important}
.gantt-bar.st-ueberfaellig{background:rgba(235,87,87,.18)!important;color:#ff8a8a!important;
  box-shadow:inset 0 0 0 1px rgba(235,87,87,.6)!important;animation:jhGlut 2s ease-in-out infinite}
@keyframes jhGlut{50%{box-shadow:inset 0 0 0 1px rgba(235,87,87,.95),0 0 14px rgba(235,87,87,.4)}}
.gantt-legende span:nth-child(1) i{background:var(--l-amber)!important}
.gantt-legende span:nth-child(2) i{background:var(--l-teal)!important}
.gantt-legende span:nth-child(3) i{background:var(--l-green)!important}
.gantt-legende span:nth-child(4) i{background:var(--l-smoke)!important}
.gantt-legende span:nth-child(5) i{background:var(--l-red)!important}
.gantt-legende i{border-radius:2px!important}
.gantt-achse{margin-left:var(--gantt-lab,160px)!important}
.gantt-achse span{font-size:11px!important;color:var(--l-ash)!important;font-weight:400!important}
.gantt-anzahl{border-radius:5px!important;background:rgba(255,255,255,.04)!important;border-color:var(--l-graphite)!important}

/* Einlauf-Animation (design.js setzt .jh-gantt-neu + --i je Zeile) */
.jh-gantt-neu .gantt-bar{animation:jhBalken .75s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms + 60ms)}
.jh-gantt-neu .gantt-bar.st-ueberfaellig{animation:jhBalken .75s var(--ease) both,jhGlut 2s ease-in-out 1s infinite;
  animation-delay:calc(var(--i,0) * 45ms + 60ms),1s}
@keyframes jhBalken{from{clip-path:inset(0 100% 0 0 round 5px);opacity:.2}to{clip-path:inset(0 0 0 0 round 5px);opacity:1}}
.jh-gantt-neu .gantt-label,.jh-gantt-neu .gantt-anzahl{animation:jhAuf .5s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
.jh-gantt-neu .gantt-achse span{animation:jhAuf .5s var(--ease) both .35s}

/* „Jetzt"-Linie im Gantt (design.js positioniert sie aus der Zeitachse) */
.jh-jetzt{position:absolute;top:-6px;width:1px;background:var(--jump);pointer-events:none;z-index:2;
  transform-origin:top;animation:jhLinie .7s var(--ease) .5s both;transition:left .8s var(--ease)}
.jh-jetzt::before{content:attr(data-t);position:absolute;top:-17px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10.5px;font-weight:500;padding:1px 6px;border-radius:4px;
  background:var(--jump);color:var(--jump-ink);white-space:nowrap}
.jh-jetzt::after{content:"";position:absolute;bottom:-3px;left:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--jump);animation:jhPuls 2s ease-out 1.2s infinite}
@keyframes jhLinie{from{transform:scaleY(0);opacity:0}}
@keyframes jhPuls{0%{box-shadow:0 0 0 0 rgba(228,242,34,.6)}100%{box-shadow:0 0 0 9px rgba(228,242,34,0)}}

/* ── Startseite ───────────────────────────────────────────────── */
.top-name{font-weight:600!important}
.chart-card{background:var(--l-carbon)!important;border-color:var(--l-graphite)!important}
.chart-title{font-weight:600!important;font-size:20px!important;color:#fff}
.chart-eyebrow{font-weight:500!important;font-size:12.5px!important}
.chart-headline .v{font-weight:500!important;font-size:44px!important;letter-spacing:-.03em!important}
.chart-headline .jetzt{color:var(--l-text)!important;font-weight:500!important;padding:2px 8px;border-radius:4px;background:rgba(228,242,34,.1)}
.chart-headline .jetzt .d2{background:var(--jump)!important}
.chart-tip{border-radius:6px!important;background:var(--l-obsidian)!important;border-color:var(--l-smoke)!important;
  transition:opacity .15s,left .09s linear,top .09s linear!important}
.chart-tip b{font-weight:600!important}
.chart-y span{font-weight:400!important;color:var(--l-ash)!important}
.chart-y span{animation:jhAuf .5s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms + .2s)}
.kpi-row{background:var(--l-graphite)!important;border-color:var(--l-graphite)!important}
.kpi{background:var(--l-carbon)!important}
.kpi .l{font-weight:500!important;font-size:12.5px!important}
.kpi .v{font-weight:500!important;font-size:28px!important;letter-spacing:-.025em!important}
.kpi .l .ic{border-radius:2px}
.pill{font-weight:500!important}

/* Bereichs-Karten als schlanke Linear-Liste */
.bereich-grid{gap:0!important;background:var(--l-carbon);border:1px solid var(--l-graphite);border-radius:12px;overflow:hidden}
a.bcard{min-height:0!important;border:none!important;border-top:1px solid var(--l-graphite)!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;align-items:center!important}
a.bcard:first-child{border-top:none!important}
a.bcard:hover{transform:none!important;background:rgba(255,255,255,.018)!important}
a.bcard:active{transform:none!important;background:rgba(255,255,255,.03)!important}
a.bcard::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:var(--accent);transform:scaleY(0);transition:transform .3s var(--ease)}
a.bcard:hover::before{transform:scaleY(1)}
.bcard-banner{width:auto!important;background:none!important;padding:16px 0 16px 20px;overflow:visible!important}
.bcard-banner .glyph-big{display:none!important}
.bcard-banner .glyph{width:44px!important;height:44px!important;padding:11px;border-radius:10px;filter:none!important;
  background:color-mix(in srgb,var(--accent) 10%,var(--l-obsidian));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,var(--l-graphite));
  transition:transform .3s var(--ease),box-shadow .3s}
a.bcard:hover .glyph{transform:scale(1.06) rotate(-3deg);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,var(--l-graphite)),0 0 22px color-mix(in srgb,var(--accent) 22%,transparent)}
.bcard-body{display:grid!important;grid-template-columns:30px 1fr auto 22px;
  grid-template-areas:"num titel geraet pfeil" "num text geraet pfeil";column-gap:16px;row-gap:2px;
  align-items:center;padding:16px 20px 16px 16px!important}
.bcard-top{display:contents!important}
.bnum-badge{grid-area:num;font-family:var(--mono);font-weight:400!important;color:var(--l-ash)!important;font-size:12px!important}
.bdevice{grid-area:geraet;border:none!important;border-radius:4px!important;background:rgba(255,255,255,.05)!important;
  color:var(--l-fog)!important;font-weight:500!important;font-size:12px!important;padding:2px 8px!important}
.bcard h3{grid-area:titel;font-weight:600!important;font-size:15px!important;letter-spacing:-.011em!important;color:#fff}
.bcard p.bdesc{grid-area:text;font-weight:400!important;font-size:13px!important;color:var(--l-fog)!important}
.bcard-foot{grid-area:pfeil;font-size:0!important;margin:0!important;color:var(--l-ash)!important;justify-self:end}
.bcard-foot svg{transition:transform .25s var(--ease),color .25s}
a.bcard:hover .bcard-foot{color:#fff!important}

/* ── Allgemeine Einlauf-Animationen ───────────────────────────── */
@keyframes jhAuf{from{opacity:0;transform:translateY(8px)}}
@keyframes jhAufWeich{from{opacity:0;transform:translateY(10px);filter:blur(5px)}}
.jh-einlauf > *{animation:jhAufWeich .55s var(--ease) both;animation-delay:calc(var(--i,0) * 38ms)}
.jh-zaehlt{display:inline-block}

@media (max-width:760px){
  .bcard-body{grid-template-columns:1fr 18px;grid-template-areas:"titel pfeil" "text pfeil"}
  .bnum-badge,.bdevice{display:none!important}
  .bcard-banner{padding:14px 0 14px 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}