@font-face{font-family:"Cinzel";src:url(/assets/schriften/cinzel-700.woff2);font-weight:700;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/assets/schriften/source-sans-3-400-latin.woff2);font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/assets/schriften/source-sans-3-600-latin.woff2);font-weight:600;font-display:swap}
@font-face{font-family:"Anton";src:url(/assets/schriften/anton-400-latin-ext.woff2) format("woff2");font-weight:400;font-display:swap;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:"Anton";src:url(/assets/schriften/anton-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";src:url(/assets/schriften/barlow-400-latin-ext.woff2) format("woff2");font-weight:400;font-display:swap;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:"Barlow";src:url(/assets/schriften/barlow-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";src:url(/assets/schriften/barlow-500-latin-ext.woff2) format("woff2");font-weight:500;font-display:swap;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:"Barlow";src:url(/assets/schriften/barlow-500-latin.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";src:url(/assets/schriften/barlow-600-latin-ext.woff2) format("woff2");font-weight:600;font-display:swap;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:"Barlow";src:url(/assets/schriften/barlow-600-latin.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";src:url(/assets/schriften/barlow-700-latin-ext.woff2) format("woff2");font-weight:700;font-display:swap;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:"Barlow";src:url(/assets/schriften/barlow-700-latin.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow Condensed";src:url(/assets/schriften/barlow-condensed-500-latin-ext.woff2) format("woff2");font-weight:500;font-display:swap;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:"Barlow Condensed";src:url(/assets/schriften/barlow-condensed-500-latin.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow Condensed";src:url(/assets/schriften/barlow-condensed-600-latin-ext.woff2) format("woff2");font-weight:600;font-display:swap;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:"Barlow Condensed";src:url(/assets/schriften/barlow-condensed-600-latin.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow Condensed";src:url(/assets/schriften/barlow-condensed-700-latin-ext.woff2) format("woff2");font-weight:700;font-display:swap;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:"Barlow Condensed";src:url(/assets/schriften/barlow-condensed-700-latin.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* BRAND, mobile/src/theme/brand.ts */
  --ink:#17130f; --parchment:#ead9b5; --paper:#f0e3c6;
  --gold:#b89452; --gold-deep:#705327; --line:#ad905f; --danger:#9c352d;
  /* Atlas night, mobile/src/utils/atlasStyle.ts */
  --nacht:#211e18;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--k-bg-211e18);color:var(--k-text-f0e3c6);
  font-family:Barlow,system-ui,sans-serif;-webkit-text-size-adjust:100%}
body{overflow:hidden;overscroll-behavior:none}
h1,h2,h3,.zier{font-family:var(--cond);font-weight:700;letter-spacing:.01em}

/* ---------- shared plate look ---------- */
.platte{background:var(--k-bg-17130fe0);border:1px solid var(--k-line-b89452);padding:10px 12px}
/* The plates are the app's own button artwork, not a gradient standing in for it:
   BrandButton draws mobile/assets/brand/button-{dark,light}.png as a nine-slice with
   a constant gold edge, and the same two files already serve the v3 pages as
   /assets/buehne/mapraiders-knopf-dunkel.webp and -hell.webp. Slice, press travel and shadow
   are copied from docs/design/v3-startseite.css, which in turn copies BrandButton
   (2 px down, scale .988, shadow collapses). One difference on purpose: no uppercase
   and no wide letter-spacing, because this is the game HUD, where the app sets its
   labels plainly, and not a page call to action. */
.knopf{font:inherit;font-family:var(--cond);font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:50px;padding:6px 14px;color:var(--k-text-f0e3c6);background:none;border-radius:0;
  border:12px solid transparent;
  border-image:url(/assets/buehne/mapraiders-knopf-dunkel.webp) 44 fill / 12px stretch;
  filter:drop-shadow(0 4px 6px var(--k-shadow-rgba0005));
  transition:transform .18s cubic-bezier(.3,1.6,.5,1),filter .18s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.knopf:hover{filter:drop-shadow(0 7px 10px var(--k-shadow-rgba00058)) brightness(1.07)}
.knopf:active{transform:translateY(2px) scale(.988);transition-duration:.05s;
  filter:drop-shadow(0 1px 1px var(--k-shadow-rgba0005)) brightness(.9) saturate(.85)}
/* One rule for every focusable thing on the page. A sibling demo was reviewed the
   same night and the finding was that a keyboard user could not see where the focus
   was anywhere; naming each control separately is how that happens, so this names
   the class of them instead. */
.knopf:focus-visible,#hilfe:focus-visible,.sprachwahl button:focus-visible,
#tempo button:focus-visible,#stick:focus-visible,#dreh-zu:focus-visible,#runner-schliessen:focus-visible,
#km-schliessen:focus-visible,#km-zoom button:focus-visible,a:focus-visible{
  outline:2px solid var(--k-line-b89452);outline-offset:2px}
.knopf.stark{border-image-source:url(/assets/buehne/mapraiders-knopf-hell.webp);color:var(--k-text-17130f)}
.knopf.klein{min-height:38px;padding:4px 12px;font-size:13px;border-width:9px;border-image-width:9px}
/* .48, the app's own disabled opacity (styles.disabled in components/brand). */
.knopf[disabled]{opacity:.48;cursor:default;transform:none;filter:none}
/* A display rule beats the hidden attribute. The start screen already learned this
   the hard way; giving .knopf a display value brought the same bug back on the
   claim button, which stood there before there was a route to claim. */
.knopf[hidden]{display:none}

/* ---------- start screen ---------- */
#start{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--k-bg-211e18);overflow:auto}
/* A display rule beats the hidden attribute, so the start screen has to say so
   itself. Without this line the overlay stays on top of a game that is already
   running underneath it, which looks exactly like a dead button. */
#start[hidden]{display:none}
#start .karte{max-width:560px;width:100%;border:1px solid var(--k-line-705327);padding:22px;
  background:radial-gradient(120% 90% at 50% 0%,var(--k-bg-2b2519),var(--k-bg-1b1712) 70%)}
#start h1{margin:0 0 4px;font-size:clamp(23px,6vw,31px);color:var(--k-text-ead9b5)}
#start .unter{margin:0 0 18px;color:var(--k-text-c9b58b);font-size:14px;letter-spacing:.14em;text-transform:uppercase}
#start ol{margin:0 0 18px;padding-left:22px;line-height:1.65;font-size:15.5px}
#start ol strong{color:var(--k-text-ead9b5)}
#start .tasten{margin:0 0 18px;font-size:13.5px;color:var(--k-text-c4b189);line-height:1.6}
kbd{display:inline-block;min-width:22px;text-align:center;padding:1px 5px;margin:0 1px;
  font:600 12px/1.5 Barlow,monospace;color:var(--k-text-f0e3c6);
  background:var(--k-bg-2a241b);border:1px solid var(--k-line-705327);border-bottom-width:2px}
#start .reihe{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sprachwahl{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px}
.sprachwahl button{font:600 13px/1 Barlow,sans-serif;min-height:34px;padding:7px 11px;
  cursor:pointer;color:var(--k-text-c4b189);background:transparent;border:1px solid var(--k-line-4a3d29)}
.sprachwahl button[aria-pressed=true]{color:var(--k-text-17130f);background:var(--k-bg-b89452);border-color:var(--k-line-b89452)}

/* ---------- playfield ---------- */
#spiel{position:fixed;inset:0;display:none}
#spiel.an{display:block}
#karte{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

#minikarte-knopf{position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;
  width:132px;height:132px;padding:0;border:0;background:none;border-radius:50%;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
#minikarte-knopf:focus-visible{outline:2px solid var(--k-line-b89452);outline-offset:3px}
/* where the figure is, under the minimap; a tap opens every spawn point to jump to (Owner 30.09.2026 abends) */
#wo-knopf{position:absolute;left:12px;top:calc(152px + env(safe-area-inset-top));max-width:min(46vw,300px);
  display:flex;align-items:center;gap:5px;padding:4px 10px 4px 7px;font:600 12.5px/1.3 Barlow,sans-serif;color:var(--k-text-ead9b5);
  background:var(--k-bg-17130fd6);border:1px solid var(--k-line-b8945266);border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent}
#wo-knopf[hidden]{display:none}
#wo-knopf svg{flex:none;width:15px;height:15px;fill:none;stroke:#ffd08a;stroke-width:2;filter:drop-shadow(0 0 4px rgba(255,208,138,.8))}
#wo-knopf span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#wo-knopf:focus-visible{outline:2px solid var(--k-line-b89452);outline-offset:2px}
/* the spawn point the figure stands at glows in the list */
.orte .knopf.hier{border-color:#ff7a2e;box-shadow:0 0 0 2px #ff7a2e,0 0 20px -2px rgba(255,122,46,.8);animation:hier-glimmt 1.8s ease-in-out infinite}
.orte .knopf.hier small::after{content:" · " attr(data-hier);color:#e0541a;font-weight:800}
.orte .knopf .monster-wach{display:block;margin-top:2px;font:800 12.5px/1.25 var(--cond);font-style:normal;color:#e0541a}
@keyframes hier-glimmt{50%{box-shadow:0 0 0 2px #ff7a2e,0 0 30px 4px rgba(255,122,46,.95)}}
@media (prefers-reduced-motion:reduce){.orte .knopf.hier{animation:none}}
#minikarte{display:block;width:100%;height:100%;pointer-events:none}

/* The travel switch, measured off RpgModeSwitch.tsx: plates 56 wide and 50 high,
   6 px apart, unfolding to the LEFT (the app uses flexDirection row-reverse), icon
   19 px, label 9 px bold at .85 opacity, and a 2 px gold edge on the active plate.
   It sits under the help button the way the app puts it under its camera column. */
#hud-rechts{position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top));z-index:6;
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;pointer-events:none}
#hud-rechts>*{pointer-events:auto}
#hud-oben{order:1;display:flex;align-items:center;gap:7px}#tempo{order:2}#gps,#spur{order:3}#farbe{order:4}#sammlung-knopf,#figur-knopf,#haltung-knopf,#sprache-knopf{order:5}
.hud-umbruch{display:none}
#hud-musik:empty{display:none}
/* the menu behind the colour button (Owner 04.10.2026): a panel under the top row, over the column, never pushing it */
#hud-menue{position:absolute;right:0;top:52px;z-index:2;display:flex;flex-direction:column;align-items:stretch;gap:6px;
  min-width:196px;max-width:min(260px,calc(100vw - 24px));padding:8px;border-radius:20px;background:rgba(17,14,15,.92);
  box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
#hud-menue[hidden]{display:none}
#hud-menue>.knopf{width:100%;height:auto;min-height:44px;justify-content:flex-start;padding:6px 12px;gap:9px;border-radius:999px!important;font-size:13px}
#hud-menue>.knopf[hidden]{display:none}
#hud-menue>#sammlung-knopf::after,#hud-menue>#haltung-knopf::after{content:attr(aria-label);font:700 13px var(--cond);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud-menue>#hud-musik{display:flex;align-items:center}
#hud-profil i{width:14px;height:14px;border-radius:50%;display:block;flex:none;border:1px solid var(--k-line-0008)}
#hud-profil span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#farbe .hm-pfeil{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
#farbe[aria-expanded=true] .hm-pfeil{transform:rotate(180deg)}
/* in the top row left of Zurück; the column orders below are for the old place */
#hud-oben>#farbe{order:-1}
#hud-musik .mr-musik{width:44px;height:44px}
/* in the game dark like the buttons beside it (critic 03.10.2026: light grey it looked switched off) */
#spiel #hud-musik .mr-musik{background:var(--rauch);box-shadow:var(--rauch-schatten);border-color:transparent;color:#ff9a6e}
#spiel #hud-musik .mr-musik[aria-pressed=false]{color:rgba(255,255,255,.55)}
#tempo{display:flex;flex-direction:row-reverse;flex-wrap:wrap;justify-content:flex-start;gap:6px;align-items:flex-start;max-width:242px}
.knopf.modus{width:56px;min-height:50px;padding:0;gap:1px;flex-direction:column;
  border-width:8px;border-image-width:8px;font-weight:400}
.knopf svg{width:17px;height:17px;flex:none;fill:currentColor}
.knopf.modus svg{width:19px;height:19px}
#hilfe svg{width:20px;height:20px}
.knopf.modus span{font:700 9px/1.2 Barlow,sans-serif;opacity:.85;
  max-width:100%;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a long name ("Sportwagen", "Avion de chasse") gets two short lines instead of an ellipsis */
.knopf.modus.lang span{font-size:8px;line-height:1.05;white-space:normal;text-overflow:clip}
.knopf.modus[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--k-shadow-b89452)}
.knopf.modus[aria-pressed=true] span{opacity:1}

/* The status line sits between the minimap and the travel buttons. It used to be
   one clipped line, and on a 390 px screen "Fundstück 45 m" lost its unit. It wraps
   now and carries a plate, the same answer the app found for its route text. */
#stand{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(12px + env(safe-area-inset-top));text-align:center;font-size:12.5px;line-height:1.45;
  pointer-events:none;max-width:min(50vw,430px);
  background:var(--k-bg-17130fd6);border:1px solid var(--k-line-b8945266);padding:4px 9px}
#stand b{font-family:var(--cond);color:var(--k-text-ead9b5)}
#stand .zurueck{color:var(--k-text-e8c873)}

/* The app keeps its rules one tap away ("So spielst du"). Without it the only
   explanation is the start screen, which is gone for good once play begins. */
/* 44x44 with the same plate as every icon button in the app (styles.iconButton). */
/* Portrait stacks #tempo under #hilfe (comment above), so GPS and the colour
   button move down to clear it; without this GPS sat right on top of #tempo and
   hid it completely, painted later in the same DOM stacking context (bug of
   23.09.: the travel switch "disappears" in portrait). Landscape's short-height
   query below moves #tempo beside #hilfe instead, so GPS keeps its own slot there. */
#gps,#spur{padding:6px 10px;font-size:13px;gap:5px}
#gps svg{width:16px;height:16px}
/* Own colour and name (Owner 23.09.): one tap under GPS, the dot shows the colour in use. */
#farbe{padding:6px 10px;font-size:13px;gap:6px;max-width:150px;min-height:44px}
#farbe i,#start-konto i{width:14px;height:14px;border-radius:50%;display:block;flex:none;border:1px solid var(--k-line-0008)}
#farbe span,#start-konto span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sammlung-knopf,#figur-knopf{width:44px;height:44px;min-height:0;padding:0}
#sammlung-knopf svg,#figur-knopf svg{width:19px;height:19px}
#figur-knopf{border-radius:50%!important}
/* fights in the world (Owner 29.09.2026): the stance and the attack, the attack with its cooldown as a closing shade */
#haltung-knopf{width:44px;height:44px;min-height:0;padding:0;border-radius:50%!important}
#sprache-knopf{width:44px;height:44px;min-height:0;padding:0;border-radius:50%!important}
#sprache-knopf svg,#sprechen-knopf svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#sprache-knopf[aria-pressed="true"]{color:#7fe0a0;border-color:#3fae6a}
#sprechen-knopf{width:64px;height:64px;min-height:0;padding:0;border-radius:50%!important;flex-direction:column;justify-content:center;gap:2px;font:700 10px/1 var(--cond);letter-spacing:.03em;text-transform:uppercase;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#sprechen-knopf[aria-pressed="true"]{background:#2f8f55;border-color:#7fe0a0;box-shadow:0 0 0 4px rgba(127,224,160,.35)}
#sd-laut-reihe{display:flex;align-items:center;gap:10px;font-size:14px;margin:4px 0 8px}
#sd-laut{flex:1;accent-color:#e8c873}
#haltung-knopf svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#haltung-knopf[data-h="kampf"]{color:#ff8a6a;border-color:#e0584a}
#haltung-knopf[data-h="inkognito"]{color:#9fb3c8}
#angriff-knopf{position:relative;overflow:hidden}
/* the action arc for the right thumb (René 03.10.2026, after the skill tree's sketch): every button sits on its own
   point of a 236 x 204 box, the big blow low right, the roll low left, the block above it, the two places of the
   arc above for the super and the skills to come */
#aktionen{position:relative;width:236px;height:204px}
#taten #aktionen .knopf{position:absolute;transform:translate(-50%,-50%)}
#taten #aktionen .knopf{width:58px;height:58px;min-height:0;padding:0;border-radius:50%!important;flex-direction:column;justify-content:center;gap:2px;font:700 10px/1 var(--cond);letter-spacing:.03em;text-transform:uppercase;touch-action:none;-webkit-tap-highlight-color:transparent}
#taten #aktionen .knopf svg{width:22px;height:22px}
#huepf-knopf{left:32px;top:170px}
#block-knopf{left:58px;top:88px;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
#taten #aktionen #block-knopf svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
#spiel #block-knopf[aria-pressed="true"]{background:#2f6f9f;border-color:#9fd8ff;box-shadow:0 0 0 4px rgba(159,216,255,.35)}
#taten #aktionen #angriff-knopf{left:150px;top:150px;width:92px;height:92px;padding:0 4px;white-space:normal;text-align:center;font-size:10.5px}
#taten #aktionen #angriff-knopf svg{width:30px;height:30px}
#angriff-knopf::after{content:'';position:absolute;inset:0;border-radius:32px;pointer-events:none;background:conic-gradient(rgba(8,6,4,.62) calc(var(--cd,0) * 1turn),transparent 0)}
#taten #aktionen #angriff-knopf{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
#spiel #taten #aktionen #angriff-knopf[data-lad]{box-shadow:0 0 0 calc(var(--lad,0) * 7px) rgba(255,208,138,.55),0 0 calc(var(--lad,0) * 22px) rgba(255,190,90,.75)}
#spiel #taten #aktionen #angriff-knopf[data-lad="voll"]{border-color:#ffe0a0}
/* the super (skill tree step 2): red, a ring fills with the own damage, full it glows */
/* the two places for the learned forces (Owner 05.10.2026): the fill round them is the cooldown */
#platz-0{left:196px;top:36px}
#platz-1{left:214px;top:100px}
#spiel #taten #aktionen #platz-0,#spiel #taten #aktionen #platz-1{color:#d7f0ff;border-color:#2c6f8f;background:conic-gradient(#2a8fc0 calc(var(--zb,1) * 1turn),rgba(42,143,192,.18) 0)}
#spiel #taten #aktionen #platz-0[data-leer],#spiel #taten #aktionen #platz-1[data-leer]{background:rgba(17,14,15,.55);border:2px dashed rgba(255,255,255,.55);color:#fff}
#spiel #taten #aktionen #platz-0[data-bereit],#spiel #taten #aktionen #platz-1[data-bereit]{border-color:#9fe0ff;box-shadow:0 0 14px rgba(120,210,255,.6)}
#platz-0 b,#platz-1 b{font-size:19px;line-height:1}
/* none learned yet (René 05.10.2026): there, but greyed; a tap shows what opens them */
#spiel #taten #aktionen #platz-0[data-gesperrt],#spiel #taten #aktionen #platz-1[data-gesperrt]{filter:grayscale(1);opacity:.6;border-style:dashed}
#zb-liste .knopf small{display:block;margin-top:3px;font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.3;opacity:.85}
#zb-liste .knopf:disabled{filter:grayscale(1);opacity:.6}
#platz-0,#platz-1{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
#super-knopf{left:126px;top:32px;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
#spiel #taten #aktionen #super-knopf{position:absolute;color:#f3c2b9;border-color:#8f2a22;background:conic-gradient(#e0392b calc(var(--sv,0) * 1turn),rgba(224,57,43,.16) 0)}
#super-knopf::before{content:'';position:absolute;inset:4px;border-radius:50%;background:#1b1410;pointer-events:none}
#super-knopf > *{position:relative}
#spiel #taten #aktionen #super-knopf[data-voll]{color:#fff;border-color:#ffb3a8;background:#d8322a;animation:super-puls 1.1s ease-in-out infinite}
#spiel #super-knopf[data-voll]::before{display:none}
@keyframes super-puls{0%,100%{box-shadow:0 0 0 3px rgba(255,90,70,.45),0 0 14px rgba(255,60,40,.6)}50%{box-shadow:0 0 0 7px rgba(255,90,70,.22),0 0 28px rgba(255,60,40,.95)}}
@media (prefers-reduced-motion:reduce){#spiel #taten #aktionen #super-knopf[data-voll]{animation:none;box-shadow:0 0 0 4px rgba(255,90,70,.5)}}
/* a small phone: the arc a little smaller, the roll further in, clear of the joystick */
@media (max-width:360px){#platz-0{left:157px;top:29px}#platz-1{left:171px;top:80px}#aktionen{width:189px;height:164px}#taten #aktionen > .knopf{scale:.8}#huepf-knopf{left:37px;top:141px}#block-knopf{left:47px;top:70px}#super-knopf{left:101px;top:26px}#taten #aktionen #angriff-knopf{left:120px;top:120px}}
#spiel #helfen-knopf[data-laeuft]{background:linear-gradient(90deg,#2f8f55 calc(var(--hilfe,0) * 100%),#17130f 0)}
#haltung{position:fixed;inset:0;z-index:62;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(11,9,6,.72)}
#haltung.an{display:flex}
#haltung .gf-box{position:relative;width:min(460px,100%);max-height:86vh;overflow:auto;padding:20px 18px 10px;border:1px solid #b89452;border-radius:18px;background:#17130f;color:#f0e3c6}
#haltung h2{margin:0 40px 6px 0;font:700 22px/1.15 var(--cond);letter-spacing:.02em;color:#f3da92}
#haltung .gf-zu{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:50%;background:#2a241b;color:#f0e3c6;cursor:pointer}
#haltung .gf-zu svg{width:18px;height:18px}
#haltung .ko-klein{color:#c9b58b;margin:0 0 12px}
.hg-opt{display:flex;gap:12px;align-items:center;width:100%;margin:0 0 8px;padding:12px;border:1px solid #4a3f2c;border-radius:12px;background:#221c14;color:#f0e3c6;text-align:left;cursor:pointer;font:inherit}
.hg-opt svg{flex:none;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hg-opt b{display:block;font:700 17px/1.2 var(--cond)}
.hg-opt small{display:block;color:#c9b58b;font-size:13px;line-height:1.35}
.hg-opt[aria-pressed="true"]{border-color:#e0584a;box-shadow:0 0 0 1px #e0584a inset}
.hg-opt[aria-disabled="true"]{opacity:.45;cursor:default}
#grundform{position:fixed;inset:0;z-index:62;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(11,9,6,.72)}
#grundform.an{display:flex}
#grundform .gf-box{position:relative;width:min(620px,100%);max-height:86vh;overflow:auto;padding:20px 18px 6px;border:1px solid #b89452;border-radius:18px;background:#17130f;color:#f0e3c6}
#grundform h2{margin:0 40px 6px 0;font:700 22px/1.15 var(--cond);letter-spacing:.02em;color:#f3da92}
#grundform .gf-zu{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:50%;background:#2a241b;color:#f0e3c6;cursor:pointer}
#grundform .gf-zu svg{width:18px;height:18px}
#grundform .ko-klein{color:#c9b58b;margin:0 0 14px}
.skin-bild.figur{aspect-ratio:auto;height:150px;align-self:center;border:0;background-color:transparent}
/* Fixed, not tied to #start or #spiel, so it is never itself something that
   has to be shown or hidden by a screen transition, only by JS when #spiel
   takes over the identical job through #farbe (Owner 23.09., "oben rechts"). */
/* #start is itself a fixed, full-viewport overlay at z-index:40 (its own
   background covers the corner this sits in), so this needs to clear that,
   not just an ordinary button's stacking. */
#start-konto{position:fixed;z-index:45;right:12px;top:calc(12px + env(safe-area-inset-top));padding:6px 10px;font-size:13px;gap:6px;max-width:180px}
#start-konto i{display:none}
#profil .farben{margin:6px 0 12px}
/* compact (Owner 05.10.2026, "von den Farben erschlagen"): one row per palette that scrolls sideways */
#profil .farben-name{display:block;font-size:11px;color:var(--tinte2);margin:6px 0 3px}
#profil .farben-reihe{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding:4px 4px 6px;margin:0 -4px;scrollbar-width:none}
#profil .farben-reihe::-webkit-scrollbar{display:none}
#profil .farben button{width:28px;height:28px;flex:none;border-radius:50%;border:2px solid var(--k-line-0009);cursor:pointer;padding:0}
#profil .farben button[aria-pressed=true]{outline:3px solid var(--k-line-ead9b5);outline-offset:2px}
/* SPIELERKARTE-V1 (Owner 28.09.2026): the player card, coloured by the player's land colour --spk */
#spieler{z-index:55}
.nur-leser{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* SPIELERKARTE-V2: flex column over the figure, plates for the small texts */
.spk{--ink:#fff;--platte:rgba(0,0,0,.36);position:relative;width:min(360px,100%,calc((100dvh - 190px) * 5 / 7.4));min-width:250px;aspect-ratio:5/7.4;margin:4px auto 14px;
  border-radius:20px;overflow:hidden;color:var(--ink);background:var(--spk,#e8c873);isolation:isolate;text-align:left;container-type:inline-size;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.12)}
.spk.hell{--ink:#15110e;--platte:rgba(255,255,255,.5)}
.spk::before{content:"";position:absolute;inset:0;z-index:0;
  background:repeating-linear-gradient(115deg,transparent 0 14px,rgba(255,255,255,.07) 14px 15px),
    radial-gradient(120% 80% at 80% 30%,rgba(255,255,255,.28),transparent 55%),linear-gradient(180deg,transparent 55%,rgba(0,0,0,.22))}
.spk-rahmen{position:absolute;inset:9px;z-index:1;border:1.5px solid var(--ink);opacity:.45;border-radius:14px}
/* wide figures (wings) may reach behind the plates, so they keep the height of the others */
.spk-figur{position:absolute;right:10px;bottom:10px;z-index:2;width:68%;height:80%;max-width:none;object-fit:contain;object-position:right bottom;
  pointer-events:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
/* the 3D avatar's canvas spans the whole card, so a thrown weapon can fly over it; the figure stands where the picture stood */
.spk-3d{inset:0;width:100%;height:100%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.spk-gross{position:absolute;right:22px;bottom:52px;z-index:2;width:46%;aspect-ratio:63/88;object-fit:cover;border-radius:10px;border:3px solid var(--ink);
  transform:rotate(4deg);box-shadow:0 18px 30px -12px rgba(0,0,0,.6)}
.spk-inhalt{position:absolute;inset:18px 20px 16px;z-index:3;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.spk-kopf{display:flex;justify-content:space-between;align-items:center;font:700 10px/1 var(--cond);letter-spacing:.24em;text-transform:uppercase}
.spk-stufe{padding:5px 9px;border-radius:999px;background:var(--ink);color:var(--spk,#e8c873);letter-spacing:.14em}
.spk-name{margin:0;font-family:var(--anton);font-weight:400;line-height:1.05;text-transform:none;letter-spacing:.01em;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-shadow:0 2px 0 rgba(0,0,0,.12)}
.spk-links{flex:1;min-height:0;width:51%;display:flex;flex-direction:column;gap:8px}
.spk-cmd-bild{flex:1 1 auto;min-height:0}
.spk-cmd-bild img{height:100%;max-width:100%;aspect-ratio:63/88;object-fit:cover;border-radius:7px;border:2px solid var(--ink);box-shadow:0 10px 18px -8px rgba(0,0,0,.6);background:rgba(0,0,0,.2)}
.spk-platte{background:var(--platte);border-radius:10px;padding:6px 8px}
.spk-platte small{display:block;font:700 clamp(9px,3cqw,11px)/1.2 var(--cond);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spk-platte b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:700 13px/1.15 var(--cond);text-transform:uppercase;overflow-wrap:break-word}
.spk-werte{list-style:none;margin:0;display:flex;flex-direction:column;gap:6px}
.spk-werte li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:7px;align-items:center}
.spk-werte svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.spk-werte b{font:400 clamp(13px,5.2cqw,19px)/1 var(--anton);letter-spacing:.01em;text-transform:none;text-overflow:clip}
.spk-fuss{display:flex;align-items:center;gap:10px;font:700 10px/1 var(--cond);letter-spacing:.2em}
.spk-fuss i{width:54px;height:14px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px)}
.spk.ohne .spk-links{width:44%}
.spk-laedt{display:grid;place-items:center;font:600 12px var(--cond);letter-spacing:.2em;text-transform:uppercase}
[data-spk]{cursor:pointer;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px}
[data-spk]:hover{text-decoration-style:solid}
#spk-meine .spk{scroll-margin-top:96px}
#spk-meine .reihe{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
/* SPIELERKARTE-GALERIE */
.spk-galerie{margin:4px 0 12px;scroll-margin-top:96px}
.spk-galerie h4,.spk-galerie button{scroll-margin-top:96px}
.spk-galerie h4{margin:14px 0 6px;font:600 11px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--tinte2)}
.spk-galerie .raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.spk-galerie button{position:relative;height:118px;padding:4px 0 0;border-radius:14px;border:1px solid rgba(0,0,0,.1);cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(0,0,0,.12)),var(--spk,#e8c873);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden}
.spk-galerie button img{height:92px;width:auto;flex:none}
.spk-galerie button span{width:100%;padding:3px 2px;font:600 10px/1.1 var(--cond);letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.82);color:#15110e;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spk-galerie .spk-info{margin:6px 0 0}.spk-galerie .spk-info:empty{display:none}
.spk-galerie .spk-alt{margin-top:16px}.spk-galerie .spk-alt summary{cursor:pointer;font:600 11px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--tinte2)}
.spk-galerie .spk-alt button:disabled{cursor:default;filter:grayscale(1) opacity(.5)}.spk-galerie .spk-alt button[aria-pressed=true]:disabled{filter:grayscale(.6) opacity(.8)}
.spk-galerie button.zu img{filter:grayscale(1) brightness(.7) contrast(1.15);opacity:.85}
.spk-galerie button.zu{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.3)),#77706a}
.spk-galerie button[aria-pressed=true]{outline:3px solid var(--k-line-ead9b5,#f2461b);outline-offset:2px}
.spk-galerie button:focus-visible{outline:3px solid var(--k-line-b89452,#b89452);outline-offset:2px}
#spk-meine select{min-height:40px;border-radius:12px;padding:0 10px;max-width:100%}
#profil .farben button:focus-visible{outline:3px solid var(--k-line-b89452);outline-offset:2px}
#profil label{display:block;font-size:13px;color:var(--k-text-c4b189);margin:0 0 6px}
#profil input{width:100%;box-sizing:border-box;background:var(--k-bg-0c0a07);border:1px solid var(--k-line-b89452);color:var(--k-text-ead9b5);
  padding:10px;font:16px Barlow,sans-serif}
#profil input:focus-visible{outline:2px solid var(--k-line-b89452)}
#hilfe{height:44px;min-height:0;padding:0 14px;gap:8px;font:700 14px/1 var(--cond);letter-spacing:.06em}
#regeln .karte{max-width:560px}
#regeln li{margin-bottom:9px;line-height:1.6}
/* The menu as its own pages (Owner 24.09.2026): one header for every menu page, the page
   itself fills the screen, nothing of the map shows through. z-index 51/52: above the
   ordinary dialogs (50), under the account gate (55), which can open on top of a page. */
#menue-kopf{position:fixed;top:0;left:0;right:0;z-index:52;display:flex;align-items:center;gap:10px;
  padding:calc(6px + env(safe-area-inset-top)) 12px 6px;background:var(--k-bg-0d0b08);border-bottom:1px solid var(--k-line-705327)}
#menue-kopf[hidden]{display:none}
#menue-kopf{gap:18px;padding:calc(8px + env(safe-area-inset-top)) 16px 8px;
  background:linear-gradient(180deg,var(--k-bg-0b0906),var(--k-bg-0d0b08));border-bottom:1px solid var(--k-line-705327);box-shadow:0 8px 24px -12px var(--k-shadow-000)}
#menue-kopf .knopf{min-height:44px;padding:2px 10px}
#menue-kopf .knopf[hidden]{display:none}
#menue-zurueck{flex:none;background:none;border:0;padding:0;cursor:pointer;line-height:0}
#menue-zurueck img{height:40px;width:auto}
.kopf-nav{flex:1;min-width:0;display:flex;justify-content:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.kopf-nav::-webkit-scrollbar{display:none}
.kopf-nav button{flex:none;background:none;border:0;border-bottom:2px solid transparent;padding:12px 11px 10px;cursor:pointer;
  font:700 13.5px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--k-text-e9dcc0);white-space:nowrap}
.kopf-nav button:hover,.kopf-nav button:focus-visible{color:var(--k-text-f3da92)}
.kopf-nav button[aria-current=page]{color:var(--k-text-f3da92);border-bottom-color:var(--k-line-d2a44f);text-shadow:0 0 12px var(--k-shadow-e8c36a88)}
.kopf-nav button[hidden]{display:none}
/* the rail in groups (René 03.10.2026): the head leads back to the groups */
.kopf-nav button.weg{display:none}
#kopf-gruppe{margin-bottom:6px}

#kopf-profil{flex:none;display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;color:inherit;text-align:left}
#kopf-profil img{width:40px;height:40px;border-radius:50%;border:2px solid var(--k-line-d2a44f)}
#kopf-profil b{display:block;font:700 14px/1.2 var(--cond);color:var(--k-text-ead9b5);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#kopf-profil small{display:block;font-size:11.5px;color:var(--k-text-d2a44f);letter-spacing:.06em}
/* The deck builder is a full-screen frame: the header stays above it, the frame starts below. */
body.kopf-ueber-duell #menue-kopf{z-index:61}
body.kopf-ueber-duell #duell{top:var(--kopf-h,64px)}
@media (max-width:1100px){ #kopf-profil span{display:none} .kopf-nav button{padding:12px 8px 10px;font-size:12.5px} }
@media (max-width:760px){
  #menue-kopf{flex-wrap:wrap;gap:6px 10px;padding-bottom:0}
  #menue-zurueck{margin-right:auto}
  #menue-zurueck img{height:32px}
  .kopf-nav{order:5;flex:1 0 100%;justify-content:flex-start;margin:0 -16px;padding:0 10px}
}
.schleier.seite{z-index:51;padding:calc(var(--kopf-h,64px) + 16px) 16px 24px;
  background:radial-gradient(120% 80% at 50% 0%,var(--k-bg-2b2519),var(--k-bg-0d0b08) 70%)}
.schleier.seite .karte,#sammlung.seite .karte,#regeln.seite .karte{max-width:900px;border:0;background:none;padding:0;margin:0 auto}
#profil.seite .karte{max-width:1320px}
#profil.seite{background:linear-gradient(180deg,var(--k-bg-00000030),var(--k-bg-00000080) 30%,var(--k-bg-000000d8) 55%),url(/assets/hintergrund/mapraiders-tcg-hintergrund-menue-weltenschichten-quer.webp) center top/cover var(--k-bg-0d0b08)}
#profil svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ko{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px}
.ko-seiten{display:flex;flex-direction:column;gap:6px;padding:14px 0;border-right:1px solid var(--k-line-3d321d)}
.ko-seiten button{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid transparent;background:none;cursor:pointer;
  color:var(--k-text-e9dcc0);font:600 14px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;text-align:left}
.ko-seiten button svg{width:22px;height:22px;flex:none}
.ko-seiten button:hover{color:var(--k-text-f3da92)}
.ko-seiten button[aria-selected=true]{color:var(--k-text-f3da92);border-color:var(--k-line-d2a44f);background:linear-gradient(90deg,var(--k-bg-2a2217),var(--k-bg-15110b));box-shadow:0 0 22px -8px var(--k-shadow-e8c36acc)}
.ko-ecke{margin:auto 0 0;padding-top:40px;text-align:center;font:600 12px/1.6 var(--cond);letter-spacing:.3em;text-transform:uppercase;color:var(--k-text-bfa46a)}
#profil .ko-titel{margin:0;font:700 clamp(30px,4vw,50px)/1.05 var(--cond);color:var(--k-text-f6e7c1);text-shadow:0 2px 18px var(--k-shadow-000)}
#profil .ko-titel-klein{font-size:clamp(22px,2.6vw,32px);margin-bottom:14px}
.ko-motto{margin:6px 0 18px;font:600 13px/1 var(--cond);letter-spacing:.28em;text-transform:uppercase;color:var(--k-text-e0cfaa)}
.ko-ich{display:flex;gap:22px;align-items:center}
.ko-bild{flex:none;width:150px;height:170px;padding:4px;border:2px solid var(--k-line-d2a44f);background:var(--k-bg-0b0906);box-shadow:0 0 0 1px var(--k-shadow-000),0 0 30px -6px var(--k-shadow-e8c36acc)}
.ko-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
button.ko-bild{position:relative;cursor:pointer;color:inherit;font:inherit}
.ko-bild span{position:absolute;left:4px;right:4px;bottom:4px;padding:5px 2px;background:var(--k-bg-0b0906d8);font:600 11px/1.2 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--k-text-f3da92);opacity:0;transition:opacity .15s}
button.ko-bild:hover span,button.ko-bild:focus-visible span{opacity:1}
@media (hover:none){ .ko-bild span{opacity:1} }
.ko-bildwahl{margin-top:16px}
.ko-bildwahl-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;max-height:360px;overflow:auto;padding:2px}
.ko-bildwahl-raster button{padding:0;border:2px solid var(--k-line-4a3c22);background:var(--k-bg-0b0906);cursor:pointer;line-height:0}
.ko-bildwahl-raster button[aria-pressed=true]{border-color:var(--k-line-f3da92);box-shadow:0 0 18px -4px var(--k-shadow-e8c36acc)}
.ko-bildwahl-raster img{width:100%;aspect-ratio:5/7;object-fit:cover}
#kopf-profil img,#menue-profil img{object-fit:cover;object-position:50% 18%}
.ko-daten{min-width:0;flex:1;max-width:520px}
.ko-name{display:flex;align-items:center;gap:12px;margin:0}
.ko-name b{font:700 clamp(24px,2.6vw,34px)/1.1 var(--cond);color:var(--k-text-f6e7c1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ko-bearbeiten{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--k-line-d2a44f);background:var(--k-bg-0b0906c0);color:var(--k-text-ecd494);cursor:pointer}
#ko-bearbeiten svg{width:18px;height:18px}
.ko-stufe{margin:6px 0 8px;font:600 14px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--k-text-e0cfaa)}
.ko-balkenzeile{display:flex;align-items:center;gap:12px}
.ko-balken{flex:1;height:9px;border:1px solid var(--k-line-8c6f3a);background:var(--k-bg-0c0a07)}
.ko-balken i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--k-bg-b98f47),var(--k-bg-ecd494))}
.ko-balkenzeile span{font-size:13.5px;color:var(--k-text-eadcbd);white-space:nowrap}
.ko-seit{margin:14px 0 4px;font:600 12px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--k-text-d2a44f)}
.ko-cmd{display:flex;align-items:center;gap:8px;margin:0;font:600 13px/1.2 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--k-text-e0cfaa)}
.ko-cmd svg{width:18px;height:18px;color:var(--k-text-d2a44f)}
.ko-zahlen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:22px 0 14px}
.ko-zahl{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--k-line-4a3c22);background:var(--k-bg-0b0906d8)}
.ko-zahl svg{width:36px;height:36px;flex:none;color:var(--k-text-ecd494)}
.ko-zahl b{display:block;font:700 22px/1.1 var(--cond);color:var(--k-text-f6e7c1)}
.ko-zahl span{display:block;font:600 12px/1.2 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--k-text-e0cfaa)}
.ko-zahl small{display:block;font-size:12px;color:var(--k-text-a8977a)}
.ko-box{border:1px solid var(--k-line-4a3c22);background:var(--k-bg-0b0906e0);padding:14px 16px}
/* the clan's income as a live counter (René 06.10.2026) */
.clan .clan-uhr{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 14px;margin:12px 0 0;padding:16px;text-align:left}
.clan-uhr-ic{display:flex}
.clan .clan-uhr{cursor:pointer}
.clan .clan-tipp{grid-column:1/-1;display:block;margin-top:6px;font-size:12px;opacity:.7}
.clan-zahlen > div + div,.clan-zahlen > .clan-uhr{margin-top:12px}
.clan .clan-reihe .ko-zahl.klick{cursor:pointer}
.clan .clan-reihe .ko-zahl.offen{outline:2px solid #d9a441;outline-offset:-2px}
.clan .clan-rang{margin:12px 2px 0;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.55);border:1px solid rgba(127,127,127,.2)}
.clan .clan-zahlen > .clan-tipp{text-align:center}
.clan .clan-uhr-ic svg{width:40px;height:40px}
.clan .clan-uhr > div > b{font:800 clamp(30px,8vw,46px)/1.05 var(--cond);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.clan .clan-uhr > div > b.steigt{color:#2fbf71;transition:color .2s}
.clan .clan-uhr > div > span{display:flex;align-items:center;gap:8px;font-size:12px}
.clan-uhr > div > span i{width:9px;height:9px;border-radius:50%;background:#2fbf71;box-shadow:0 0 0 0 rgba(47,191,113,.6);animation:clanUhrPuls 1.6s infinite}
.clan-uhr-wer{grid-column:1/-1;margin:8px 0 0;font:700 12px/1.2 var(--cond);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.clan-uhr-liste{grid-column:1/-1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.clan-uhr-liste li{display:grid;grid-template-columns:minmax(64px,30%) 1fr auto;align-items:center;gap:10px;font-size:13px}
.clan-uhr-liste li b{font:700 14px/1.2 var(--cond);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clan-uhr-liste li small{font-variant-numeric:tabular-nums;white-space:nowrap}
.clan-uhr-liste .balken{display:block;height:8px;border-radius:4px;background:rgba(127,127,127,.22);overflow:hidden}
.clan-uhr-liste .balken span{display:block;height:100%;border-radius:4px;background:#d9a441}
.clan-auf{width:100%;border-collapse:collapse;margin:8px 0;font-size:14px}
.clan-auf td{padding:6px 4px;border-bottom:1px solid rgba(127,127,127,.18)}
.clan-auf td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.clan-auf tr.ok td:first-child::before{content:'✓ ';color:#2fbf71;font-weight:800}
.clan-auf tr.nein td:first-child::before{content:'✗ ';color:#d9534f;font-weight:800}
.clan-auf tr.nein td{color:#d9534f}
.clan-auf small{display:block;opacity:.7;font-size:12px}
.clan-auf input.feld{width:7.5em;text-align:right;padding:4px 6px}
.clan-bew li small.nein{color:#d9534f}
.clan .clan-uhr.mit-satz{grid-template-columns:auto 1fr auto}
.clan-satz{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;padding:8px 12px;border-radius:14px;background:rgba(217,164,65,.14);text-align:center}
.clan-satz b{font:800 clamp(24px,6vw,34px)/1 var(--cond);font-variant-numeric:tabular-nums}
.clan-satz small{margin-top:3px;font:700 11px/1.2 var(--cond);letter-spacing:.08em;text-transform:uppercase}
.clan-satz-auf{grid-column:1/-1;margin:0;font-size:12px;opacity:.75}
.clan-satz-stellen{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:4px;font:700 12px/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase}
.clan-satz-stellen input{width:100%;accent-color:#d9a441}
.clan-fordern{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.clan-fordern small{font-size:12px;opacity:.8;font-variant-numeric:tabular-nums}
.clan-satz-stellen output{font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}
@keyframes clanUhrPuls{70%{box-shadow:0 0 0 9px rgba(47,191,113,0)}100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}}
.ko-box h3{margin:0;font:700 19px/1.2 var(--cond);letter-spacing:.04em;color:var(--k-text-f3da92)}
.ko-klein{margin:4px 0 8px;font-size:13px;color:var(--k-text-c9b58b)}
.skin-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px;margin:0 0 22px}
.skin{display:flex;flex-direction:column;gap:6px;padding:6px;border:1px solid var(--k-line-4a3c22);background:var(--k-bg-0f0c08);color:var(--k-text-efe0bb);font:inherit;text-align:left;cursor:pointer}
.skin[aria-pressed=true]{border-color:var(--k-line-f3da92);box-shadow:0 0 18px -4px var(--k-shadow-e8c36acc)}
.skin[aria-disabled=true]{cursor:default}
.skin[aria-disabled=true] .skin-bild{filter:grayscale(.85) brightness(.45)}
.skin b{font:700 13px/1.2 var(--cond);color:var(--k-text-f3da92)}
.skin small{display:flex;align-items:center;gap:5px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--k-text-bfa77a)}
.skin[aria-pressed=true] small{color:var(--k-text-8fd49a)}
.skin small svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.skin-bild{aspect-ratio:16/10;border:1px solid var(--k-line-2c2416);background-size:cover;background-position:center}
.mi-champion .skin-bild{width:150px;border-color:var(--k-line-d2a44f);box-shadow:0 6px 14px var(--k-shadow-000)}
.ko-mitte{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
.ko-welt-kopf{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.ko-welt-kopf p{margin:4px 0 0;font-size:13.5px;color:var(--k-text-e0cfaa)}
.ko-welt-reiter{display:flex;border:1px solid var(--k-line-6b5630)}
.ko-welt-reiter button{padding:9px 12px;border:0;border-right:1px solid var(--k-line-3d321d);background:none;color:var(--k-text-c9b58b);cursor:pointer;font:600 11px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ko-welt-reiter button:last-child{border-right:0}
.ko-welt-reiter button[aria-pressed=true]{color:var(--k-text-f3da92);background:var(--k-bg-2a2217);box-shadow:inset 0 0 0 1px var(--k-shadow-d2a44f)}
.ko-karte{position:relative}
#ko-karte{display:block;width:100%;aspect-ratio:2/1;background:var(--k-bg-070605);touch-action:pan-y;cursor:grab}
.ko-legende{position:absolute;left:10px;bottom:10px;margin:0;padding:8px 10px;list-style:none;background:var(--k-bg-0b0906c8);font-size:12px;color:var(--k-text-e0cfaa)}
.ko-legende li{display:flex;align-items:center;gap:8px;margin:3px 0}
.ko-legende i{width:10px;height:10px;border-radius:50%}
.ko-karte .ko-knopf{position:absolute;right:10px;bottom:10px}
.ko-knopf{display:inline-block;margin-top:10px;padding:10px 18px;border:1px solid var(--k-line-d2a44f);background:var(--k-bg-0b0906e0);color:var(--k-text-f1dfae);cursor:pointer;font:600 12.5px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase}
.ko-knopf:hover{background:var(--k-bg-2a2217)}
.ko-log h3{margin-bottom:8px}
.ko-log ol{list-style:none;margin:0;padding:0}
.ko-log li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--k-line-2a2214)}
.ko-log li svg{width:28px;height:28px;padding:4px;border:1px solid var(--k-line-6b5630);color:var(--k-text-ecd494)}
.ko-log li b{display:block;font-weight:600;font-size:14px;color:var(--k-text-f1dfae)}
.ko-log li small{display:block;font-size:12px;color:var(--k-text-a8977a)}
.ko-log li time{font-size:12px;color:var(--k-text-a8977a);white-space:nowrap}
.ko-log .leer{display:block;color:var(--k-text-a8977a);font-size:13.5px;border:0}
.ko-unten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.ko-bilder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0 4px}
.ko-bilder img{width:100%;aspect-ratio:5/7;object-fit:cover;display:block;border:1px solid var(--k-line-6b5630)}
.ko-bilder img.zu{filter:grayscale(1) brightness(.35)}
.ko-kreis{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--k-line-d2a44f);font:700 17px/1 var(--cond);color:var(--k-text-f3da92)}
.ko-naechste{display:grid;grid-template-columns:56px minmax(0,1fr) auto 14px;gap:12px;align-items:center;width:100%;margin-top:4px;padding:10px;border:1px solid var(--k-line-6b5630);background:var(--k-bg-120e09);color:var(--k-text-f1dfae);cursor:pointer;text-align:left}
.ko-naechste-bild img,.ko-naechste-bild svg{width:48px;height:auto;max-height:64px;display:block;color:var(--k-text-ecd494)}
.ko-naechste b{font-weight:600;font-size:14px}
.ko-naechste small{font-size:13px;color:var(--k-text-c9b58b);white-space:nowrap}
.ko-stat{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.ko-stat div{padding:14px;border:1px solid var(--k-line-4a3c22);background:var(--k-bg-0b0906d8)}
.ko-stat span{display:block;font-size:12.5px;color:var(--k-text-c9b58b)}
.ko-stat b{font:700 24px/1.3 var(--cond);color:var(--k-text-f6e7c1)}
.ko-feld[data-feld=profil],.ko-feld[data-feld=sicherheit],.ko-feld[data-feld=einstellungen]{max-width:560px}
/* the review tab (René 16.10.2026): five star buttons, the text, the consent */
.ko-feld[data-feld=bewerten]{max-width:560px}
.bw-wahl{display:flex;gap:6px;margin:6px 0 14px}
.bw-wahl button{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;color:var(--k-line-4a3c22);font-size:34px;line-height:1}
.bw-wahl button.voll,.bw-wahl button.an{color:var(--o2,#f2461b)}
.bw-wahl button:focus-visible{outline:2px solid var(--k-line-b89452);outline-offset:2px;border-radius:8px}
#bw-text{width:100%;box-sizing:border-box;min-height:110px;resize:vertical;font:inherit;padding:10px 12px;border-radius:12px;border:1px solid rgba(20,18,19,.16);background:rgba(255,255,255,.8);color:var(--tinte)}
.bw-zust{display:flex!important;gap:10px;align-items:flex-start;margin:12px 0 4px!important;font-size:13.5px;line-height:1.45}
#profil .bw-zust input{width:auto;flex:none;margin-top:2px}
#bw-alle{margin-inline-start:auto}
.bw-v{border:1px solid rgba(20,18,19,.14);border-radius:12px;padding:10px 12px;margin:0 0 12px;background:rgba(255,255,255,.55)}
.bw-v.weg{opacity:.6}
.ko-feld[data-feld=bewerten] [hidden]{display:none!important}
.bw-v-kopf{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:13.5px}
.bw-v-kopf b{font-size:14.5px}.bw-v-kopf span{color:var(--o2,#f2461b);letter-spacing:.06em}
.bw-v p{margin:6px 0 8px;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.bw-v textarea{width:100%;box-sizing:border-box;min-height:70px;resize:vertical;font:inherit;padding:8px 10px;border-radius:10px;border:1px solid rgba(20,18,19,.16);background:rgba(255,255,255,.85);color:var(--tinte)}
.bw-v .reihe{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:6px}
.ko-feld h3{margin:0 0 10px;font:700 18px/1.2 var(--cond);color:var(--k-text-f3da92)}
/* In-game the colour pill opens this as a small dialog: only profile and security. */
#profil:not(.seite) .karte{max-width:560px}
#profil:not(.seite) .ko{display:block}
#profil:not(.seite) .ko-seiten,#profil:not(.seite) .ko-feld[data-feld=uebersicht],#profil:not(.seite) .ko-feld[data-feld=statistik],#profil:not(.seite) .ko-feld[data-feld=einstellungen],#profil:not(.seite) .ko-feld[data-feld=nachrichten]{display:none}
#profil:not(.seite) .ko-feld[data-feld=profil],#profil:not(.seite) .ko-feld[data-feld=sicherheit]{display:block}
@media (max-width:1100px){
  .ko-zahlen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ko-mitte,.ko-unten{grid-template-columns:1fr}
}
@media (max-width:800px){
  .ko{grid-template-columns:1fr;gap:14px}
  .ko-seiten{flex-direction:row;overflow-x:auto;padding:0 0 8px;border-right:0;border-bottom:1px solid var(--k-line-3d321d)}
  .ko-seiten button{flex:none;padding:10px 12px;font-size:12px}
  .ko-seiten button svg{width:18px;height:18px}
  .ko-ecke{display:none}
  .ko-ich{gap:14px}
  .ko-ich{align-items:flex-start}
  .ko-bild{width:96px;height:112px}
  .ko-balkenzeile{flex-wrap:wrap}
  .ko-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ko-zahl{padding:10px}
  .ko-zahl svg{width:28px;height:28px}
  .ko-welt-kopf{flex-direction:column}
  .ko-welt-reiter{max-width:100%;overflow-x:auto}
  .ko-karte .ko-knopf{position:static}
  .ko-legende{position:static;margin-top:8px;display:flex;gap:14px;background:none;padding:0}
}
#sammlung.seite h2,#sammlung.seite #sammlung-zu,#season.seite #season-zu,#profil.seite #profil-zu{display:none}
#sammlung.seite #sammlung-raster{max-height:none;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.seite .orte{max-height:none}
/* Every menu page stands in the cathedral (the owner's drafts, 24.09.2026); the sub pages darker, so text reads. */
.schleier.seite{background:linear-gradient(var(--k-bg-000000c8),var(--k-bg-000000d8)),url(/assets/hintergrund/mapraiders-tcg-hintergrund-menue-weltenschichten-quer.webp) center/cover var(--k-bg-0d0b08)}
#menue.seite{padding:0;background:linear-gradient(180deg,var(--k-bg-00000070),var(--k-bg-00000030) 45%,var(--k-bg-000000a0)),url(/assets/hintergrund/mapraiders-tcg-hintergrund-menue-weltenschichten-quer.webp) center/cover var(--k-bg-0d0b08)}
@media (max-aspect-ratio:1/1){
  .schleier.seite{background-image:linear-gradient(var(--k-bg-000000c8),var(--k-bg-000000d8)),url(/assets/hintergrund/mapraiders-tcg-hintergrund-menue-weltenschichten-hoch.webp)}
  #menue.seite{background-image:linear-gradient(180deg,var(--k-bg-00000060),var(--k-bg-00000020) 40%,var(--k-bg-000000a0)),url(/assets/hintergrund/mapraiders-tcg-hintergrund-menue-weltenschichten-hoch.webp);background-position:center top}
}
#menue.seite .karte{max-width:none;min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;
  padding:calc(14px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom))}
.menue-oben{align-self:stretch;display:flex;align-items:center;gap:12px}
.menue-rahmen{border:2px solid var(--k-line-b08a47);box-shadow:inset 0 0 0 3px var(--k-shadow-0b0906),inset 0 0 0 4px var(--k-shadow-6b5530),0 10px 26px -8px var(--k-shadow-000);background:var(--k-bg-0b0906e0);color:var(--k-text-f3e7c9);cursor:pointer}
.menue-rahmen:hover,.menue-rahmen:focus-visible{box-shadow:inset 0 0 0 3px var(--k-shadow-0b0906),inset 0 0 0 4px var(--k-shadow-c9a55a),0 0 22px -4px var(--k-shadow-c9a55a99);filter:brightness(1.1)}
.menue-rahmen:focus-visible{outline:2px solid var(--k-line-b89452);outline-offset:3px}
#menue-spiel{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:6px 16px;font:700 14px/1 var(--cond);letter-spacing:.04em}
#menue-spiel svg,.menue-knopf svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menue-profil{margin-left:auto;display:flex;align-items:center;gap:6px}
#menue-profil{display:flex;align-items:center;gap:10px;padding:0;background:none;border:0;color:var(--k-text-f3e7c9);cursor:pointer;text-align:left}
#menue-profil img{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid var(--k-line-b08a47);box-shadow:0 0 0 2px var(--k-shadow-0b0906),0 4px 12px var(--k-shadow-000)}
#menue-profil b{display:block;font:700 16px/1.1 var(--cond)}
#menue-profil small{display:block;font:600 11px/1.3 var(--cond);letter-spacing:.08em;color:var(--k-text-d8c69b)}
#menue-profil .balken{display:block;width:120px;height:4px;margin-top:4px;background:var(--k-bg-ffffff26)}
#menue-profil .balken i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--k-bg-b98f47),var(--k-bg-ecd494))}
#menue-profil:focus-visible,#menue-einstellungen:focus-visible{outline:2px solid var(--k-line-b89452);outline-offset:3px}
#menue-einstellungen{width:46px;height:46px;display:grid;place-items:center;padding:0;background:none;border:0;color:var(--k-text-e1c27b);cursor:pointer}
#menue-einstellungen svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.menue-logo{display:block;width:min(540px,66vw);height:auto;margin:0 auto;filter:drop-shadow(0 6px 18px var(--k-shadow-000))}
.menue-motto{margin:6px 0 24px;font:600 clamp(11px,1.4vw,17px)/1.2 var(--cond);letter-spacing:.34em;color:var(--k-text-ece1c6);text-align:center;text-shadow:0 2px 8px var(--k-shadow-000)}
.menue-luft{display:none}
.kacheln{width:100%;max-width:1180px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 0 18px}
.kacheln.klein{max-width:1160px;grid-template-columns:repeat(4,1fr);margin-bottom:28px}
.mkachel{position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden;font:inherit;text-align:center;
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.mkachel::after{content:"";position:absolute;inset:4px;border:1px solid var(--k-line-6b553080);pointer-events:none}
.mkachel img{display:block;width:100%;height:auto;aspect-ratio:358/162;object-fit:cover}
.kacheln.klein img{aspect-ratio:265/62}
.mkachel span{position:relative;display:block;margin-top:-22px;padding:20px 8px 13px;background:linear-gradient(var(--k-bg-0b090600),var(--k-bg-0b0906) 22px)}
.mkachel b{display:block;font:700 clamp(17px,1.75vw,25px)/1.1 var(--cond);letter-spacing:.03em;color:var(--k-text-f6ebcd);text-shadow:0 2px 8px var(--k-shadow-000)}
.kacheln.klein b{font-size:clamp(16px,1.6vw,22px)}
.mkachel small{display:block;margin-top:6px;font:600 11px/1.35 var(--cond);letter-spacing:.05em;color:var(--k-text-dccb9f)}
.mkachel:active{transform:translateY(2px)}
.menue-fuss{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
#ortwechsel.menue-held{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:min(640px,100%);min-height:88px;margin:0 0 26px;padding:12px 28px;font:inherit;color:var(--k-text-1a130a);
  background:linear-gradient(180deg,var(--k-bg-f3da92),var(--k-bg-d2a44f) 55%,var(--k-bg-a97b30));border-color:var(--k-line-f6e2a6);
  box-shadow:inset 0 0 0 3px var(--k-shadow-0b090638),0 0 0 1px var(--k-shadow-0b0906),0 0 40px -6px var(--k-shadow-e8c36acc),0 14px 30px -10px var(--k-shadow-000);
  animation:held-glanz 2.8s ease-in-out infinite}
#ortwechsel.menue-held:hover,#ortwechsel.menue-held:focus-visible{filter:brightness(1.08)}
.menue-held b{display:flex;align-items:center;gap:14px;font:700 clamp(22px,2.4vw,32px)/1 var(--cond);letter-spacing:.08em;text-transform:uppercase}
.menue-held svg{width:30px;height:30px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menue-held small{font:600 13px/1.2 var(--cond);letter-spacing:.12em;color:var(--k-text-3b2b12)}
@keyframes held-glanz{50%{box-shadow:inset 0 0 0 3px var(--k-shadow-0b090638),0 0 0 1px var(--k-shadow-0b0906),0 0 64px 2px var(--k-shadow-e8c36aee),0 14px 30px -10px var(--k-shadow-000)}}
@media (prefers-reduced-motion:reduce){#ortwechsel.menue-held{animation:none}}
/* Wide screens: the block stands in the middle of the picture instead of hanging from the top edge. */
@media (min-width:701px){ .menue-logo{margin-top:auto} .menue-fuss{margin-bottom:auto} }
.menue-knopf{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:8px 22px;font:700 15px/1.1 var(--cond);letter-spacing:.03em;text-decoration:none}
/* the owner-only Kontrollraum button carries [hidden]; display:inline-flex above used to override it */
.menue-knopf[hidden]{display:none}
.menue-knopf svg{width:26px;height:26px;color:var(--k-text-e1c27b)}
#menue .sprachwahl{margin:0;gap:4px}
#menue .sprachwahl button{min-height:42px;padding:8px 14px;font-size:14px;color:var(--k-text-ece1c6);background:var(--k-bg-0b0906cc);border:1px solid var(--k-line-6b5530)}
#menue .sprachwahl button[aria-pressed=true]{color:var(--k-text-17130f);background:var(--k-bg-e1c27b);border-color:var(--k-line-e1c27b)}
#menue #mr-musik{width:50px;height:50px}
.menue-ecke{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));margin:0;font:600 13px/1.35 var(--cond);letter-spacing:.32em;color:var(--k-text-ece1c6b8);text-transform:uppercase;pointer-events:none}
.menue-ecke.links{left:24px}
.menue-ecke.rechts{right:24px;text-align:right}
.menue-ecke i{font-style:normal;display:none}
@media (max-width:1180px){ .menue-ecke{display:none} }
/* The phone draft: the angel stays visible between the wordmark and the tiles, 2 + 2 large tiles,
   3 small ones, the two buttons side by side, languages and music below, the motto at the foot. */
@media (max-width:700px){
  #menue-spiel{padding:6px 10px}
  #menue-spiel span{display:none}
  #menue-profil img{width:44px;height:44px}
  #menue-profil .balken{width:96px}
  .menue-logo{width:84vw;margin-top:4px}
  .menue-motto{margin-bottom:0;font-size:10.5px;letter-spacing:.18em;white-space:nowrap}
  .menue-luft{display:block;height:max(120px,24vh)}
  #ortwechsel.menue-held{min-height:74px;margin-bottom:14px;padding:10px 14px}
  .menue-held b{font-size:21px;gap:10px}
  .menue-held svg{width:24px;height:24px}
  .menue-held small{font-size:11.5px}
  .kacheln{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:10px}
  .kacheln.klein{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:16px}
  .kacheln.klein img{aspect-ratio:2/1}
  .mkachel b{font-size:17px}
  .mkachel small{font-size:9px;letter-spacing:.02em}
  .kacheln.klein span{margin-top:-20px;padding:14px 3px 8px}
  .kacheln.klein b{font-size:13.5px}
  .kacheln.klein small{font-size:7.5px}
  .menue-fuss{gap:10px 8px;width:100%}
  #menue-musik{order:5}
  .menue-knopf{flex:1 1 calc(50% - 4px);justify-content:center;padding:8px 10px;font-size:12.5px;gap:8px}
  .menue-knopf svg{width:22px;height:22px}
  #menue .sprachwahl{flex-wrap:wrap}
  #menue .sprachwahl button{min-height:40px;padding:6px 7px;font-size:12px}
  #menue #mr-musik{width:44px;height:44px}
  .menue-ecke br{display:none}
  .menue-ecke i{display:inline}
  .menue-ecke{display:block;position:static;margin:22px 0 0;text-align:center;font-size:11px;letter-spacing:.3em}
  .menue-ecke.links{margin-top:28px}
  .menue-ecke.rechts{margin-top:4px;text-align:center}
}
#regeln ol{margin:0 0 14px;padding-left:20px}
/* territories (Owner 24.09.2026): the tile map left, the own land right, a tap flies there */
#territorien.seite .karte{max-width:1260px}
.tk{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}
.tk-karte{position:relative;border:1px solid var(--k-line-6b5530);background:var(--k-bg-0b0906);height:calc(100dvh - var(--kopf-h,70px) - 64px);min-height:460px;max-height:780px}
#tk-leinwand{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.tk-zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}
.tk-zoom button{min-width:42px;height:42px;padding:0 8px;background:var(--k-bg-17130fe6);color:var(--k-text-f3da92);border:1px solid var(--k-line-b89452);font:700 20px/1 Barlow,sans-serif;cursor:pointer}
.tk-zoom button.text{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.tk-naeher{position:absolute;left:10px;bottom:10px;margin:0;padding:8px 12px;max-width:calc(100% - 20px);box-sizing:border-box;background:var(--k-bg-17130fe6);border:1px solid var(--k-line-6b5530);color:var(--k-text-e0cfaa);font-size:13px}
.tk-seite{display:flex;flex-direction:column;gap:12px;min-height:0;max-height:calc(100dvh - var(--kopf-h,70px) - 64px);overflow:auto;padding-right:2px}
.tk-seite h3{margin:4px 0 0;font:700 18px/1.2 var(--cond);color:var(--k-text-f3da92)}
.tk-seite #land-leer{margin:0;color:var(--k-text-c9b58b)}
.tk-seite .ko-zahlen{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.tk-seite .ko-zahl{padding:10px;gap:8px;min-width:0}
.tk-seite .ko-zahl span{font-size:10.5px;letter-spacing:.02em}
.tk-seite .ko-zahl svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tk-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tk-liste button{display:block;width:100%;padding:10px 12px;text-align:left;background:var(--k-bg-120f0b);border:1px solid var(--k-line-4a3c22);border-left:4px solid var(--c,var(--k-line-b89452));color:var(--k-text-efe0bb);font:inherit;cursor:pointer}
.tk-liste button[aria-pressed=true]{border-color:var(--k-line-f3da92);border-left-color:var(--c,var(--k-line-b89452));background:var(--k-bg-1d1810)}
.tk-liste b{display:block;font:700 15px/1.3 var(--cond);color:var(--k-text-f3da92)}
.tk-liste small{display:block;margin-top:3px;font-size:12.5px;color:var(--k-text-bfa77a)}
.tk-liste .tk-gruppe{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 2px 0;border-bottom:1px solid var(--k-line-4a3c22);font:700 13px/1.4 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--k-text-f3da92)}
.tk-liste .tk-gruppe:first-child{padding-top:0}
.tk-liste .tk-gruppe small,.tk-liste .tk-ort small{margin:0;font:600 12px/1.4 Barlow,sans-serif;letter-spacing:0;text-transform:none;color:var(--k-text-bfa77a)}
.tk-liste .tk-ort{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 2px 0 6px;font:700 14px/1.3 var(--cond);color:var(--k-text-efe0bb)}
.meldungen{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px;max-height:55vh;overflow:auto}
.meldungen li{padding:10px 12px;background:var(--k-bg-120f0b);border:1px solid var(--k-line-4a3c22);border-left:4px solid var(--k-line-b89452)}
.meldungen b{display:block;font-size:14.5px;line-height:1.4;color:var(--k-text-efe0bb)}
.meldungen small{display:block;margin:4px 0 8px;font-size:12.5px;color:var(--k-text-bfa77a)}
.meldungen .reihe{margin:0;gap:8px}
.chat-verlauf{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px;max-height:45vh;overflow:auto}
.chat-verlauf li{max-width:85%;align-self:flex-start;padding:8px 11px;background:var(--k-bg-120f0b);border:1px solid var(--k-line-4a3c22);color:var(--k-text-efe0bb);font-size:14px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-verlauf li.eigen{align-self:flex-end;background:var(--k-bg-1d1810);border-color:var(--k-line-8a7040)}
.chat-verlauf li.leer{max-width:none;align-self:stretch;background:none;border:0;color:var(--k-text-bfa77a);padding:0}
.chat-verlauf small{display:block;margin-top:3px;font-size:11.5px;color:var(--k-text-bfa77a)}
#chat{z-index:54}   /* above the account page (#profil, 51), where the settings open it */
#liveduell{z-index:56}   /* a challenge over land and its answer sit above every other dialog */
.chat-liste{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.einst-reihe{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:0 0 10px}
.einst-reihe small{display:block;font-size:12px;color:var(--k-text-c9b58b);margin-top:2px}
.einst-reihe .knopf{flex:none;min-width:88px}
.einst-reihe .knopf[aria-pressed="false"]{opacity:.62}
#wants{margin:0 0 14px}
#wants .ko-klein{margin:0 0 8px}
.want{display:flex;gap:10px;align-items:center}
.want img{width:42px;height:58px;object-fit:cover;border-radius:4px;flex:none}
.want .text{flex:1;min-width:0}
.want small{display:block;font-size:12px;color:var(--k-text-c9b58b)}
.sammlung-karte.verdeckt:not(:disabled){cursor:pointer}
#sammlung-gross.fehlt #sammlung-gross-bild{filter:grayscale(1) brightness(.55)}
.chat-liste li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;background:var(--k-bg-120f0b);border:1px solid var(--k-line-4a3c22)}
.chat-liste .text{flex:1 1 160px;min-width:0}
.chat-liste b{display:block;color:var(--k-text-f3da92)}
.chat-liste small{display:block;color:var(--k-text-bfa77a);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-liste i{font-style:normal;background:var(--k-bg-b89452);color:var(--k-text-120f0b);border-radius:9px;padding:0 6px;font-size:12px;margin-left:6px}
/* Clan page (Owner 24.09.2026) */
#clanseite.seite .karte{max-width:1180px}
.clan{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.clan-block{padding:18px;border:1px solid var(--k-line-4a3c22);background:var(--k-bg-0b0906d8);margin:0 0 16px}
.clan-block h3{margin:0 0 12px;font:700 18px/1.2 var(--cond);color:var(--k-text-f3da92)}
.clan-block p{margin:0 0 12px;color:var(--k-text-dccb9f);font-size:15px;line-height:1.5}
.clan .clan-leise{color:var(--k-text-bfa77a);font-size:14px}
.clan-intro h2{margin:0;font:700 clamp(26px,3vw,36px)/1.1 var(--cond);color:var(--k-text-f6ebcd)}
.clan-intro .clan-motto{margin:6px 0 0;font:600 13px/1.3 var(--cond);letter-spacing:.08em;color:var(--k-text-c9b58b)}
.clan-kopf{display:flex;align-items:center;gap:14px;padding-left:12px;border-left:6px solid var(--c,var(--k-line-e8c873));margin:0 0 16px}
.clan-tag{flex:none;font:700 15px/1 var(--cond);letter-spacing:.08em;padding:8px 10px;border:1px solid var(--c,var(--k-line-e8c873));color:var(--c,var(--k-text-e8c873));background:var(--k-bg-000a)}
.clan-kopf h2{margin:0;font:700 clamp(22px,2.4vw,30px)/1.15 var(--cond);color:var(--k-text-f6ebcd);overflow-wrap:anywhere}
.clan-kopf p{margin:4px 0 0;color:var(--k-text-c9b58b);font-size:14px}
.clan .ko-zahlen{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.clan svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.clan span.klein{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--k-text-c9b58b)}
.clan-regeln{margin:0;padding-left:20px;color:var(--k-text-dccb9f);font-size:14.5px;line-height:1.5}
.clan-regeln li+li{margin-top:7px}
.clan-mitglieder{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.clan-mitglieder li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;background:var(--k-bg-120f0b);border:1px solid var(--k-line-3a2f1b)}
.clan-mitglieder b{display:block;color:var(--k-text-f3da92);font:700 15px/1.3 var(--cond);overflow-wrap:anywhere}
.clan-mitglieder small{display:block;color:var(--k-text-bfa77a);font-size:12.5px}
.clan-mitglieder .r{text-align:right;flex:none}
.clan-link{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.clan-link .feld,.clan-link label{flex:1 1 220px;margin:0}
.clan-link label .feld{margin:4px 0 0}
.clan-farben{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.clan-farben button{width:36px;height:36px;padding:0;border:2px solid var(--k-line-0b0906);box-shadow:0 0 0 1px var(--k-shadow-4a3c22);background:var(--c);cursor:pointer}
.clan-farben button[aria-pressed=true]{box-shadow:0 0 0 2px var(--k-shadow-f6ebcd)}
.clan-frage{padding:12px;border:1px solid var(--k-line-6b5530);background:var(--k-bg-1d1810)}
.clan-wa{text-decoration:none;align-items:center;justify-content:center}
.clan-treffer{margin:10px 0 0}
.clan-treffer .knopf{min-height:36px;padding:3px 12px;font-size:13px}
.clan-treffer .leer{color:var(--k-text-bfa77a);font-style:italic}
.clan-block h4{margin:14px 0 8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--k-text-c9b58b)}
.clan-mitglieder .t{font:700 12px var(--cond);color:var(--c,var(--k-text-e8c873));margin-right:6px}
.clan-mitglieder .reihe{display:flex;gap:6px;flex:none}
/* the clan online and its lobby (Owner 03.10.2026) */
.clan-online b[data-spk]::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#2fb36b;box-shadow:0 0 0 3px rgba(47,179,107,.2);vertical-align:middle}
.clan-online li>.knopf,#clan-lobby .reihe .knopf{min-height:34px;padding:3px 12px;font-size:13px}
#clan-lobby .reihe,.clan-online li>.reihe{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.clan-online li>.reihe .knopf{min-height:34px;padding:3px 12px;font-size:13px}
@media (max-width:520px){.clan-online li{flex-wrap:wrap}.clan-online li>.reihe{flex:1 1 100%}}
#clan-meldung,#lobby-leiste{position:fixed;left:50%;transform:translateX(-50%);z-index:56;width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;
  display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:14px;background:rgba(255,255,255,.94);color:var(--tinte);
  box-shadow:0 10px 30px -8px rgba(40,22,12,.45),0 0 0 1px rgba(20,18,19,.1);font:600 14px/1.35 Barlow,sans-serif}
#clan-meldung{top:calc(env(safe-area-inset-top,0px) + 64px)}
#clan-meldung{z-index:80}
#lobby-leiste{top:calc(env(safe-area-inset-top,0px) + 10px)}
/* on a phone below the head row with its round buttons */
@media (max-width:700px){#lobby-leiste{top:calc(env(safe-area-inset-top,0px) + 84px)}#clan-meldung{top:calc(env(safe-area-inset-top,0px) + 142px)}}
#clan-meldung[hidden],#lobby-leiste[hidden]{display:none}
#clan-meldung p{margin:0;min-width:0}
#clan-meldung .knopf,#lobby-leiste .knopf{min-height:32px;padding:2px 12px;font-size:13px;flex:none}
#cm-zu{width:32px;padding:0!important}
#cm-zu svg,#lobby-leiste .lob-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#lobby-leiste .lob-ic{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#2fb36b;color:#fff}
#lobby-leiste .lob-text{min-width:0;display:flex;flex-direction:column}
#lobby-leiste .lob-text b{font:700 12px/1.1 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--tinte3)}
#lobby-leiste .lob-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lob-mikro[aria-pressed="true"]{background:#d9534f;border-color:#d9534f;color:#fff}
#lobby-leiste .lob-ic{border:0;padding:0;cursor:default}
/* the world event's subtitles: film style above the controls, the title card higher (Owner 05.10.2026) */
#ereignis-text{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(262px + env(safe-area-inset-bottom));z-index:21;width:min(560px,calc(100vw - 32px));
  text-align:center;pointer-events:none;color:#fff;transition:opacity .5s}
#ereignis-text[hidden]{display:none}
#ereignis-text.weg{opacity:0}
#ereignis-text.titel{bottom:auto;top:30%}
#ereignis-text b{display:block;margin-bottom:8px;font:800 32px/1.02 var(--cond);letter-spacing:.03em;text-transform:uppercase;color:#ffb38f;text-shadow:0 2px 14px rgba(0,0,0,.85)}
#ereignis-text b:empty{display:none}
#ereignis-text span{display:inline-block;padding:8px 14px;border-radius:12px;background:rgba(5,4,3,.72);font-size:15.5px;line-height:1.4;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#ereignis-text span:empty{display:none}
/* the build sheet (Owner 05.10.2026): at the bottom over the controls while something is picked, a small line otherwise */
#bau-leiste{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:22;max-height:54vh;overflow:auto;
  padding:10px 12px 12px;border-radius:18px;background:rgba(17,14,15,.93);box-shadow:0 12px 30px rgba(0,0,0,.5);color:#fff;max-width:620px;margin:0 auto}
#bau-leiste[hidden]{display:none}
#bau-leiste.klein{left:50%;right:auto;transform:translateX(-50%);width:min(440px,calc(100vw - 24px));bottom:calc(214px + env(safe-area-inset-bottom))}
#bau-leiste .bl-kopf{display:flex;align-items:center;gap:8px}
#bau-leiste .bl-kopf b{flex:1;font:800 18px/1.1 var(--cond);letter-spacing:.02em;text-transform:uppercase;color:#ffb38f}
#bl-fertig{min-height:34px;padding:4px 12px;font-size:13px}
#bl-fertig[hidden]{display:none}
#bau-leiste p{margin:4px 0 8px;font-size:13px;line-height:1.4;color:rgba(255,255,255,.82)}
#bau-leiste .fehler{color:#ff9a8a;margin:6px 0 0}
#bau-leiste .fehler:empty{display:none}
.bl-zeile{margin:8px 0 0}
.bl-zeile>span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 4px}
.bl-zeile>span:empty{display:none}
.bl-reihe{display:flex;flex-wrap:wrap;gap:6px}
.bl-reihe button{min-height:38px;padding:6px 12px;border:0;border-radius:999px;background:rgba(255,255,255,.13);color:#fff;font:600 13.5px var(--cond);cursor:pointer}
.bl-reihe button[aria-pressed=true]{background:var(--orange);box-shadow:var(--orange-schatten)}
.bl-reihe .bl-farbe{width:32px;min-height:32px;height:32px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.35)}
.bl-reihe .bl-farbe[aria-pressed=true]{outline:3px solid #ff7a2a;outline-offset:2px;box-shadow:none}
.bl-reihe .bl-gefahr{background:#a8321f}
.gw-liste{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 14px}
.gw-liste .knopf{min-height:52px;justify-content:center;text-align:center;white-space:normal}
.gw-liste .gw-h3{grid-column:1/-1;margin:10px 0 0;font:800 18px var(--cond);text-transform:uppercase}
.gw-liste>p{grid-column:1/-1;margin:0}
.gw-helfer{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.gw-helfer button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border:0;border-radius:12px;background:rgba(255,255,255,.6);cursor:pointer;font:600 12px var(--cond);color:var(--tinte)}
.gw-helfer img{width:100%;aspect-ratio:3/4;object-fit:contain}
/* the notice column at the top left (Owner 05.10.2026): small, glassy, never over the controls */
#oben-meldungen{position:fixed;left:12px;top:calc(196px + env(safe-area-inset-top));z-index:20;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  max-width:calc(100vw - 120px);pointer-events:none}
#oben-meldungen>*{pointer-events:auto}
#oben-meldungen #dreh-hinweis{position:static;max-width:100%}
#fl-meldung,#monster-meldung,#fokus-meldung{display:flex;align-items:center;gap:8px;max-width:100%;padding:6px 6px 6px 8px;border-radius:14px;
  background:var(--rauch);box-shadow:var(--rauch-schatten);color:#fff;font-size:12.5px;line-height:1.35;transition:opacity .4s}
#fl-meldung[hidden],#monster-meldung[hidden],#fokus-meldung[hidden]{display:none}
.fokus-ring{width:14px;height:14px;flex:none;border:2px dashed #ff6b5a;border-radius:50%}
#fl-meldung.weg{opacity:0}
#fl-meldung b{font-family:var(--cond);letter-spacing:.02em;color:#ffb38f}
.fl-achtung{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;background:#ff5a1f;color:#fff}
.fl-achtung svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.om-zu{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:17px;line-height:1;cursor:pointer}
#monster-meldung{padding:2px 4px 2px 2px}
#konto-sichern{display:grid;gap:4px;margin:10px 0 4px;padding:12px 14px;border-radius:12px;border:1px solid rgba(232,200,115,.7);background:rgba(232,200,115,.12);font-size:14px;line-height:1.4}
#konto-sichern[hidden]{display:none}
#konto-sichern b{font-family:"Barlow Condensed",sans-serif;font-size:18px;letter-spacing:.02em}
#monster-meldung #monster-knopf{min-height:36px;padding:4px 10px;font-size:12.5px;background:none;box-shadow:none;border:0;color:#fff;text-align:left;white-space:normal}
#monster-meldung #monster-knopf svg{color:#ff9a6e}
/* in the world a small pill at the left under the compass, the rest behind a tap on the phone (Owner 04.10.2026: the bar
   covered the screen and its buttons) */
#lobby-leiste.klein{left:154px;transform:none;top:calc(env(safe-area-inset-top,0px) + 72px);padding:5px 6px 5px 5px;gap:8px;border-radius:22px;max-width:calc(100vw - 154px - 84px)}
/* in the dark band above the map, right of the compass (Owner 04.10.2026: the pill still lay over the hints) */
@media (max-width:700px){#lobby-leiste.klein{left:124px;max-width:calc(100vw - 124px - 84px)}}
#lobby-leiste.klein .lob-ic{cursor:pointer;width:32px;height:32px}
#lobby-leiste.klein:not(.offen) .lob-text b,#lobby-leiste.klein:not(.offen) #lob-rufen,#lobby-leiste.klein:not(.offen) #lob-auf{display:none}
#lobby-leiste.klein:not(.offen) .lob-text span{max-width:8em;font-size:12px}
#lobby-leiste.klein.offen{flex-wrap:wrap}
.lobby-liste li{justify-content:flex-start}
.lobby-liste b::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#2fb36b;box-shadow:0 0 0 3px rgba(47,179,107,.2);vertical-align:middle}
.lobby-liste li.stumm b::before{background:#9a948c;box-shadow:none}
.clan-mitglieder li.offen{flex-wrap:wrap}
.clan-neues li.neu{border-color:#f2461b;box-shadow:inset 3px 0 0 #f2461b}
.clan-neues .r small{white-space:nowrap}
.clan-mitglieder li.offen .clan-frage{flex:1 0 100%;margin:0}
.clan-mitglieder .clan-frage p{margin:0 0 8px;font-size:14px}
.clan-mitglieder .reihe .knopf,.clan-mitglieder li>.knopf{min-height:34px;padding:3px 10px;font-size:13px}
.mkachel.hinweis::before,.kopf-nav button.hinweis::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--k-bg-e0463c);box-shadow:0 0 0 2px var(--k-shadow-0b0906);z-index:2}
.mkachel.hinweis::before{top:10px;right:10px}
.kopf-nav button.hinweis{position:relative}
.kopf-nav button.hinweis::after{top:4px;right:-2px;width:9px;height:9px}
.clan-rang{width:100%;border-collapse:collapse;font-size:14px}
.clan-rang td{padding:8px 6px;border-bottom:1px solid var(--k-line-2e2616);color:var(--k-text-efe0bb);vertical-align:middle}
.clan-rang td:first-child{width:28px;font:700 14px var(--cond);color:var(--k-text-e8c873)}
.clan-rang td.a{text-align:right;white-space:nowrap;color:var(--k-text-f3da92);font-weight:700}
.clan-rang tr.ich{background:var(--k-bg-b8945226)}
.clan-rang .t{font:700 12px var(--cond);color:var(--c);margin-right:6px}
.clan-rang small{display:block;color:var(--k-text-a8977a);font-size:12px}
.clan-rang .knopf{min-height:32px;padding:3px 10px;font-size:13px}
/* crests (Owner 24.09.2026): drawn ones take the clan colour, own images sit in a frame of it */
.clan-wappen{flex:none;display:inline-block;width:56px;height:56px;color:var(--c,var(--k-text-e8c873))}
.clan-wappen svg,.clan-wappen img{display:block;width:100%;height:100%}
.clan-wappen img{box-sizing:border-box;border:2px solid var(--c,var(--k-line-e8c873));border-radius:6px;object-fit:cover;background:var(--k-bg-000)}
.clan-rang .clan-wappen{width:24px;height:24px;margin-right:6px;vertical-align:middle}
.clan-rang .clan-wappen img{border-width:1px;border-radius:3px}
.clan-wappen-wahl{display:grid;grid-template-columns:repeat(7,minmax(0,64px));gap:8px;margin:0 0 14px}
@media (max-width:560px){.clan-wappen-wahl{grid-template-columns:repeat(5,minmax(0,1fr))}}
#wappen>.reihe+input+.clan-leise,#wappen>.clan-bild+input+.clan-leise{margin-top:10px}
.clan-wappen-wahl button{aspect-ratio:1;padding:6px;border:1px solid var(--k-line-3a2f1b);background:var(--k-bg-120f0b);color:var(--c,var(--k-text-e8c873));cursor:pointer;display:flex;align-items:center;justify-content:center}
.clan-wappen-wahl button[aria-pressed=true]{border-color:var(--k-line-f6ebcd);box-shadow:0 0 0 1px var(--k-shadow-f6ebcd);background:var(--k-bg-1d1810)}
.clan-wappen-wahl button:hover{border-color:var(--k-line-6b5530)}
.clan-wappen-wahl button svg{width:100%;height:100%}
.clan-wappen-wahl .keins{font-size:11px;line-height:1.2;color:var(--k-text-bfa77a);text-align:center}
.clan-bild{display:flex;gap:14px;align-items:flex-start;padding:12px;border:1px solid var(--k-line-3a2f1b);background:var(--k-bg-120f0b);margin:0 0 10px}
.clan-bild p{margin:0 0 10px;font-size:14px}
.clan-bild p.frei{color:var(--k-text-9fe39a)}
.clan-bild p.abgelehnt{color:var(--k-text-f08a78)}
.clan-bild .clan-wappen{width:72px;height:72px}
@media (max-width:900px){.clan{grid-template-columns:1fr}}
@media (max-width:560px){
  .clan-block{padding:14px}
  .clan .ko-zahlen{gap:6px}
  .clan .ko-zahl:not(.clan-uhr){flex-direction:column;text-align:center;gap:4px;padding:10px 4px}
  .clan .ko-zahl:not(.clan-uhr) b{font-size:18px}
  .clan .ko-zahl span{font-size:10px;letter-spacing:.04em}
}
.tk-info{padding:14px;border:1px solid var(--k-line-b89452);background:linear-gradient(var(--k-bg-1d1810),var(--k-bg-120f0b))}
.tk-spawn{padding:14px;border:1px solid var(--k-line-b89452);background:linear-gradient(var(--k-bg-1d1810),var(--k-bg-120f0b))}
.tk-spawn h4{margin:0 0 8px;font:700 18px/1.2 var(--cond);color:var(--k-text-f3da92)}
.tk-spawn p{margin:0 0 12px;font-size:14px;color:var(--k-text-efe0bb)}
.tk-spawn p:empty{display:none}
.tk-spawn .knopf{width:100%;justify-content:center}
.tk-spawn .fehler.ok{color:var(--k-text-f3da92)}
.tk-karte.setzen canvas{cursor:crosshair}
.tk-info h4{margin:0 0 10px;font:700 20px/1.2 var(--cond);color:var(--k-text-f3da92)}
.tk-info dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 14px;font-size:14px}
.tk-info dt{color:var(--k-text-bfa77a)}
.tk-info dd{margin:0;color:var(--k-text-efe0bb)}
.tk-info .knopf{width:100%;justify-content:center}
.tk-umbenennen{margin:-4px 0 12px;padding:6px 0;background:none;border:0;color:var(--k-text-bfa77a);font:600 13px/1.2 Barlow,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tk-umbenennen:hover,.tk-umbenennen:focus-visible{color:var(--k-text-f3da92)}
.tk-name{display:grid;gap:6px;margin:0 0 14px}
.tk-name[hidden],.tk-umbenennen[hidden]{display:none}
.tk-name label{font-size:13px;color:var(--k-text-bfa77a)}
.tk-name input{min-height:44px;padding:8px 10px;background:var(--k-bg-0b0907);border:1px solid var(--k-line-b89452);color:var(--k-text-efe0bb);font:inherit;font-size:16px}
.tk-name small{font-size:12.5px;color:var(--k-text-bfa77a)}
.tk-name div{display:flex;gap:8px}
.tk-name .fehler:empty{display:none}
@media (max-width:899px){
  .tk{grid-template-columns:1fr}
  .tk-karte{height:56dvh;min-height:300px}
  .tk-seite{max-height:none;overflow:visible}
}
/* all effects (Owner 24.09.2026): parchment rows, the mechanic's colour as the left edge and on its symbol */
#regeln:not(.seite) .effekte{display:none}
.effekte{margin-top:26px}
.eff-titel{margin:0 0 8px;font:700 22px/1.2 var(--cond);color:var(--k-text-f3da92)}
.eff-text{margin:0 0 18px;padding:14px 16px;background:var(--k-bg-efe3c6);color:var(--k-text-2b2115);border:1px solid var(--k-line-b89452);font-size:15px;line-height:1.55}
.eff-familie{margin:20px 0 8px;font:700 12px/1 Barlow,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--k-text-c9b58b)}
.eff-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.eff-liste li{display:flex;gap:12px;align-items:flex-start;margin:0;padding:10px 14px;background:var(--k-bg-efe3c6);border:1px solid var(--k-line-b89452);border-left:4px solid var(--c);line-height:1.4}
.eff-liste svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--c);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.eff-liste b{display:block;font:700 15.5px/1.3 Barlow,sans-serif;color:var(--c)}
.eff-liste span{display:block;font-size:14px;color:var(--k-text-3b2f1f)}
@media (min-width:900px){ .eff-liste{grid-template-columns:1fr 1fr} }

#stick{position:absolute;left:12px;bottom:calc(22px + env(safe-area-inset-bottom));
  width:146px;height:146px;touch-action:none;-webkit-tap-highlight-color:transparent;cursor:grab}
#stick.aus{opacity:.4}
#daumen{position:absolute;left:32%;top:32%;width:36%;height:36%;pointer-events:none;
  filter:drop-shadow(0 5px 6px var(--k-shadow-000a))}

#taten{position:absolute;right:12px;bottom:calc(22px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:7px}
#kontext{position:absolute;left:12px;bottom:calc(178px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);
  display:flex;flex-direction:column;align-items:flex-start;gap:7px}
/* in a vehicle the left thumb steers, so the actions move to the right (Owner 05.10.2026) */
#spiel.im-fahrzeug #kontext{left:auto;right:12px;align-items:flex-end}
#hinweis{max-width:min(320px,60vw);font-size:12.5px;line-height:1.45;text-align:right;display:none}
#hinweis.an{display:block}
#sprung small{display:block;font-size:.72em;font-weight:600;letter-spacing:0;text-transform:none;opacity:.85}
#sprung.warten{filter:saturate(.4) brightness(.8)}
#kreatur-knopf:not([hidden]){display:flex;align-items:center;gap:8px}
/* the ruler's mode: the controls of walking and fighting go, the sheet holds the strip of buildings */
#spiel.herr #taten,#spiel.herr #kontext{display:none}
/* the new ruler's mode, stage 1 (René 09.10.2026, concept "Herrschermodus neu"): the map is the screen; no frame, no sign,
   no joystick, no button column and no text; numbers on top, four buttons below, a sheet only when one of them asks for it */
#spiel.herr #stick,#spiel.herr #hud-rechts,#spiel.herr #stand,#spiel.herr #wo-knopf,#spiel.herr #route{display:none}
#herr-oben,#herr-unten,#herr-chip{display:none}
#spiel.herr #herr-oben{display:flex;position:absolute;z-index:23;top:calc(12px + env(safe-area-inset-top));left:calc(156px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));justify-content:flex-end;align-items:center;gap:6px;pointer-events:none}
#herr-oben>*{pointer-events:auto}
/* stage 5: the zoom levels replace the minimap in the ruler's mode; the compass takes its corner */
#spiel.herr #minikarte-knopf{display:none}
#spiel.herr #herr-nord{top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left))}
#spiel.herr #herr-oben{left:calc(72px + env(safe-area-inset-left))}
@media (max-width:420px){ #spiel.herr #herr-oben{gap:4px} #spiel.herr #herr-oben .hz{padding:0 8px} #herr-oben .hz small{display:none} }
@media (max-height:520px){ #spiel.herr #oben-meldungen{left:calc(76px + env(safe-area-inset-left));transform:none} }
#herr-oben .hz{display:flex;align-items:center;gap:4px;height:36px;padding:0 10px;border-radius:999px;background:rgba(20,14,10,.8);border:1px solid rgba(255,255,255,.16);color:#ffe9c8;font:700 15px/1 "Barlow Condensed",sans-serif;white-space:nowrap}
#herr-oben .hz i{font-style:normal;font-size:14px}
#herr-oben .hz[hidden]{display:none}
#herr-oben button.hz{cursor:default}
#herr-oben .hz.voll{border-color:#4fd17a;box-shadow:0 0 10px rgba(79,209,122,.55);cursor:pointer}
#herr-oben .hz small{font-size:12px;color:#4fd17a}
#herr-oben .hz small:empty{display:none}
#herr-raus{flex:none;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(20,14,10,.85);color:#ffe9c8;font:700 17px/1 sans-serif;cursor:pointer}
#spiel.herr #herr-unten{display:flex;position:fixed;z-index:23;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));gap:8px}
#herr-unten button{min-width:56px;height:52px;padding:0 14px;border-radius:16px;border:1px solid rgba(255,255,255,.2);background:rgba(20,14,10,.85);color:#ffe9c8;font:700 16px/1 "Barlow Condensed",sans-serif;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
#herr-unten #herr-b-bauen{background:linear-gradient(#f2461b,#a8260a);border-color:#ffb08a}
#herr-unten button[aria-pressed=true]{box-shadow:0 0 0 2px #ffe9c8}
#spiel.herr #herr-chip.an{display:block;position:absolute;z-index:23;top:calc(58px + env(safe-area-inset-top));right:12px;max-width:min(420px,calc(100vw - 168px));padding:7px 12px;border-radius:14px;background:rgba(20,14,10,.9);border:1px solid rgba(232,194,74,.7);color:#ffe9c8;font:600 13px/1.3 Barlow,sans-serif;pointer-events:none}
/* the companion (René 13.10.2026: "eine Art fliegenden Tamagotchi ... wenn wir auf ihn klicken, können wir alle Sachen machen, die
   wir sonst im Menü machen"): a little map spirit floating beside the figure, placed by bgTakt every frame */
#begleiter{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 5px 4px rgba(0,0,0,.45)) drop-shadow(0 0 6px rgba(255,140,40,.35));will-change:transform}
#begleiter[hidden]{display:none}
#begleiter.fern .bg-koerper{opacity:.5}
.bg-skins{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.bg-skin{display:flex;flex-direction:column;align-items:center;gap:2px;width:64px;min-height:64px;padding:6px 2px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(20,14,10,.7);color:#ffe9c8;cursor:pointer}
.bg-skin img{width:32px;height:32px}
.bg-skin small{font:600 11px/1.1 Barlow,sans-serif;text-align:center}
.bg-skin[aria-pressed=true]{border-color:#ffd27a;box-shadow:0 0 0 2px #ffd27a}
.bg-skin[aria-disabled=true]{opacity:.45;cursor:default}
/* Kiri is René's drone picture (13.10.): it floats, tilts a little and its two front eyes glow and blink */
/* small and always the same size (René 13.10.: "viel kleiner", "darf sich nicht verkleinern und vergrößern"); the tap area around it stays 44px */
.bg-koerper{position:absolute;left:50%;top:50%;display:block;width:30px;height:30px;margin:-15px 0 0 -15px;animation:bg-schweben 2.6s ease-in-out infinite}
.bg-koerper img{display:block;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.bg-auge{position:absolute;border-radius:50%;translate:-50% -50%;pointer-events:none}
.bg-auge.a1{left:78.6%;top:76.9%;width:9.5%;height:11%}
.bg-auge.a2{left:93.9%;top:78.6%;width:5.5%;height:10.5%}
.bg-auge::before{content:"";position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,190,90,.95),rgba(255,120,20,.45) 55%,transparent);mix-blend-mode:screen;animation:bg-gluehen 2.2s ease-in-out infinite}
.bg-auge::after{content:"";position:absolute;inset:-12%;border-radius:50%;background:#14100e;scale:1 0;animation:bg-blinzeln 4.6s infinite}
#begleiter.links .bg-koerper{transform:scaleX(-1)}
@keyframes bg-schweben{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -3px;rotate:3deg}}
@keyframes bg-gluehen{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes bg-blinzeln{0%,93%,100%{scale:1 0}96%{scale:1 1}}
@media (prefers-reduced-motion: reduce){.bg-koerper,.bg-auge::before,.bg-auge::after{animation:none}}
#bg-punkt{position:absolute;right:-4px;top:-2px;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:#1c140e;border:1.5px solid #ffb000;color:#ffd27a;font:700 12px/17px "Barlow Condensed",sans-serif;text-align:center;font-style:normal}
#bg-punkt:empty{display:none}
#bg-punkt:not(:empty){animation:bg-pochen 1.4s ease-in-out infinite}
@keyframes bg-pochen{0%,100%{scale:1}50%{scale:1.25}}
#bg-knoepfe .bg-gruppe{grid-column:1/-1;margin:6px 0 0;font:700 12px "Barlow Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#ffb000}
#bg-knoepfe .knopf .pack-zahl{position:absolute;right:4px;top:2px}
#bg-blase{position:absolute;left:0;top:0;z-index:23;max-width:min(260px,calc(100vw - 32px));padding:7px 11px;border-radius:14px;background:rgba(255,246,232,.97);color:#2a1a10;font:600 13px/1.3 Barlow,sans-serif;box-shadow:0 3px 12px rgba(0,0,0,.35);pointer-events:none;will-change:transform}
#bg-blase[hidden]{display:none}
#bg-blatt{position:absolute;z-index:40;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(440px,calc(100vw - 32px));max-height:calc(100% - 90px);overflow:auto;padding:12px;border-radius:18px;background:rgba(20,14,10,.95);border:1px solid rgba(255,176,0,.6);color:#ffe9c8;box-shadow:0 8px 30px rgba(0,0,0,.5)}
#bg-blatt[hidden]{display:none}
#bg-blatt .bg-kopf{display:flex;gap:10px;align-items:center;margin:0 0 10px}
#bg-blatt .bg-kopf .bg-koerper{position:relative;left:auto;top:auto;width:44px;height:44px;margin:0;flex:none;animation:none}
#bg-blatt .bg-kopf b{display:block;font:700 18px "Barlow Condensed",sans-serif;color:#ffd27a}
#bg-blatt .bg-kopf span{font:500 13px/1.3 Barlow,sans-serif}
#bg-blatt .bg-kopf p{flex:1;min-width:0;margin:0}
#bg-stift{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(255,176,0,.45);background:rgba(0,0,0,.25);color:#ffd27a;cursor:pointer}
#bg-stift svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
#bg-stift[aria-expanded=true]{background:rgba(255,176,0,.2)}
#bg-name-form{display:flex;gap:8px;margin:0 0 12px}
#bg-name-form[hidden]{display:none}
#bg-name-feld{flex:1;min-width:0;padding:9px 12px;border-radius:10px;border:1px solid #b89452;background:rgba(0,0,0,.35);color:#fff;font:500 16px Barlow,sans-serif}
#bg-knoepfe{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:6px}
#bg-knoepfe .knopf{min-height:42px;justify-content:flex-start;text-align:left;font-size:14px}
#bg-knoepfe .knopf.stark{grid-column:1/-1;justify-content:center}
#bg-knoepfe .knopf small{display:block;font-size:.72em;opacity:.8;text-transform:none;letter-spacing:0}
#bg-knoepfe svg{width:20px;height:20px;flex:none}
#spiel.herr.mit-bg #herr-chip{display:none!important}
#spiel.herr #bau-leiste,#spiel.herr #bau-leiste.klein{bottom:calc(76px + env(safe-area-inset-bottom))}
#bau-leiste.herr-kompakt #bl-text{display:none}
/* stage 2: the kinds as tabs, the next thing to build glows, the ghost's buttons and undo at the spot */
.herr-kat{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;-webkit-overflow-scrolling:touch}
.herr-kat button{flex:none;display:flex;align-items:center;gap:5px;height:34px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#f6ebcd;font:700 13px/1 "Barlow Condensed",sans-serif;cursor:pointer}
.herr-kat button[aria-pressed=true]{border-color:#f2461b;background:rgba(242,70,27,.25)}
.herr-kat button i{font-style:normal;font-size:15px}
.herr-karte.naechst,.herr-kat button.naechst,#herr-unten button.naechst{animation:herr-glimm 1.4s ease-in-out infinite}
@keyframes herr-glimm{0%,100%{box-shadow:0 0 0 2px #f2461b,0 0 6px rgba(242,70,27,.5)}50%{box-shadow:0 0 0 2px #ffb08a,0 0 18px rgba(242,70,27,.95)}}
@media (prefers-reduced-motion:reduce){.herr-karte.naechst,.herr-kat button.naechst,#herr-unten button.naechst{animation:none;box-shadow:0 0 0 2px #f2461b}}
#herr-am-ort{display:none;position:absolute;z-index:24;gap:8px;transform:translate(-50%,0)}
#spiel.herr #herr-am-ort.an{display:flex}
#herr-am-ort button{height:46px;min-width:46px;padding:0 14px;border-radius:23px;border:1px solid rgba(255,255,255,.3);background:rgba(20,14,10,.9);color:#ffe9c8;font:700 17px/1 "Barlow Condensed",sans-serif;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
#herr-am-ort .ja{background:linear-gradient(#36b865,#1d7a40);border-color:#9ff0bd;color:#fff}
#herr-am-ort .ja.zu{background:#5a2a24;border-color:#e0584a;opacity:.85}
#herr-am-ort .nein{background:#7a1f14;border-color:#ff9a8a;color:#fff}
/* stage 3: the ring round a picked own building; no sheet in the ruler's mode higher than 35 % of the screen */
#herr-ring{display:none;position:absolute;z-index:24;left:0;top:0;width:0;height:0}
#spiel.herr #herr-ring.an{display:block}
#herr-ring button{position:absolute;transform:translate(-50%,-50%);width:50px;height:50px;padding:0;border-radius:50%;border:2px solid #ff7a2a;background:rgba(20,14,10,.9);color:#ffe9c8;font:700 20px/1 "Barlow Condensed",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
#herr-ring button small{position:absolute;left:50%;top:100%;transform:translate(-50%,2px);padding:1px 5px;border-radius:6px;background:rgba(20,14,10,.9);font-size:11px;white-space:nowrap;color:#e8c873}
#herr-ring button.zu{opacity:.5}
#herr-ring .herr-schild{position:absolute;transform:translate(-50%,-50%);max-width:min(86vw,360px);padding:6px 12px;border-radius:12px;border:1px solid rgba(255,122,42,.6);background:rgba(20,14,10,.92);color:#ffe9c8;font:600 14px/1.3 "Barlow Condensed",sans-serif;text-align:center;pointer-events:none;white-space:nowrap}
#herr-ring .herr-schild b{display:block;font-size:16px;color:#ffd08a;overflow:hidden;text-overflow:ellipsis}
#herr-ring .herr-schild span{display:block;overflow:hidden;text-overflow:ellipsis}
#herr-ring button.gefahr{background:#7a1f14;border-color:#ff9a8a}
#spiel.herr #bau-leiste{max-height:35vh;max-height:35dvh}
/* stage 4: what walks is picked on the left, then its goal is tapped */
#herr-wahl{display:none}
#spiel.herr #oben-meldungen{left:calc(76px + env(safe-area-inset-left))}
#spiel.herr #herr-wahl.weg{display:none}
#spiel.herr #herr-wahl{display:flex;flex-direction:column;gap:8px;position:absolute;z-index:23;left:calc(12px + env(safe-area-inset-left));top:calc(76px + env(safe-area-inset-top))}
@media (max-height:520px){ #spiel.herr #herr-wahl{flex-direction:row;top:auto;bottom:calc(76px + env(safe-area-inset-bottom))} }
#herr-wahl button{position:relative;width:52px;height:52px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:rgba(20,14,10,.85);color:#ffe9c8;font:700 22px/1 "Barlow Condensed",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
#herr-wahl button[aria-pressed=true]{border-color:#f2461b;box-shadow:0 0 0 3px rgba(242,70,27,.45)}
#herr-wahl button b{position:absolute;right:-4px;bottom:-4px;min-width:20px;padding:2px 5px;border-radius:10px;background:#f2461b;color:#fff;font:700 12px/1 "Barlow Condensed",sans-serif}
#herr-wahl button b:empty{display:none}
#bau-leiste.herr-kompakt.mit-text #bl-text{display:block}
#bau-leiste.herr-kompakt{max-height:36vh;padding:8px 10px 10px}
/* the architect's workshop (René 09.10.2026) */
#arch{z-index:60;background:rgba(10,8,7,.72);padding:12px 12px calc(12px + env(safe-area-inset-bottom));overflow:auto}
#arch .arch-karte{width:100%;max-width:520px;margin:0 auto;padding:14px;border-radius:18px;background:#151210;border:1px solid rgba(255,255,255,.12);color:#f6ebcd;font-family:Barlow,system-ui,sans-serif}
#arch .arch-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
#arch h2{margin:0;font:700 20px/1.1 "Barlow Condensed",sans-serif;color:#e8c24a;letter-spacing:.03em;text-transform:uppercase}
#arch .arch-x{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#f6ebcd;font-size:16px;cursor:pointer}
#arch .arch-h3{margin:12px 0 8px;font:700 14px/1 "Barlow Condensed",sans-serif;color:#f6ebcd;text-transform:uppercase;letter-spacing:.05em}
#arch .arch-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
#arch .arch-plan{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#f6ebcd;cursor:pointer;text-align:center}
#arch .arch-plan b{font:700 13px/1.15 "Barlow Condensed",sans-serif}
#arch .arch-plan small{font-size:11px;color:#e8c24a}
#arch .arch-neu{justify-content:center;min-height:140px;font:700 15px/1.2 "Barlow Condensed",sans-serif;border-style:dashed;border-color:#f2601b}
#arch .arch-weg{position:absolute;top:4px;right:6px;font-size:12px;color:#ff8a6a;padding:2px 4px}
#arch .arch-hilfe{margin:8px 0;font-size:13px;line-height:1.45;color:rgba(246,235,205,.75)}
#arch .arch-werte{margin:8px 0;font:700 14px/1.3 "Barlow Condensed",sans-serif;color:#e8c24a}
#arch .arch-werte.arch-rot{color:#ff8a6a}
#arch input[type=text]{width:100%;height:40px;margin-bottom:8px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#f6ebcd;font:600 15px Barlow,sans-serif}
#arch .arch-reihe{display:flex;flex-wrap:wrap;gap:6px}
#arch .arch-werkzeuge{margin-bottom:8px}
#arch .arch-zeile{margin:8px 0}
#arch .arch-zeile>span{display:block;margin-bottom:4px;font:700 12px/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.05em;color:rgba(246,235,205,.7)}
#arch .arch-chip{min-height:34px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#f6ebcd;font:700 13px/1 "Barlow Condensed",sans-serif;cursor:pointer}
#arch .arch-chip[aria-pressed=true]{border-color:#f2461b;background:rgba(242,70,27,.25)}
#arch .arch-chip.arch-stark{background:linear-gradient(#f2601b,#c23a10);border-color:#f2601b}
#arch .arch-chip.arch-gefahr{border-color:rgba(220,80,60,.6);color:#ffb3a3}
#arch .arch-farbe{width:30px;min-height:30px;padding:0;border:2px solid rgba(255,255,255,.25)}
#arch .arch-farbe[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px #f2461b}
#arch canvas#arch-flaeche{display:block;margin:0 auto;border-radius:12px;touch-action:none;background:#1a1714}
#arch .arch-regler{display:grid;grid-template-columns:110px 1fr 54px;align-items:center;gap:8px;margin:6px 0;font-size:13px}
#arch .arch-regler b{text-align:right;color:#e8c24a;font:700 13px "Barlow Condensed",sans-serif}
#arch .arch-regler input{width:100%;accent-color:#f2601b}
#bau-leiste.herr-kompakt .bl-kopf b{font-size:15px;color:#e8c24a}
#bau-leiste.herr-kompakt p{margin:2px 0 6px;font-size:12.5px}
#bau-leiste.herr-kompakt .bl-zeile{margin:4px 0 0}
#bau-leiste.herr-kompakt .bl-zeile>span{display:none}
#bau-leiste.herr-kompakt .bl-reihe button{min-height:34px;padding:4px 12px;font-size:13px}
#bau-leiste.herr-kompakt .herr-leiste{padding:2px 2px 4px}
#bau-leiste.herr-kompakt .herr-karte{width:64px;padding:5px 3px;font-size:11px;gap:1px}
#bau-leiste.herr-kompakt .herr-karte i{font-size:19px}
#bau-leiste.herr-kompakt .herr-karte small{font-size:10px}
#herr-nord{display:none;position:absolute;top:calc(152px + env(safe-area-inset-top));left:12px;width:48px;height:48px;padding:0;border-radius:50%;
  border:2px solid #ff7a2a;background:rgba(20,14,10,.78);color:#ffe9c8;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
#spiel.herr #herr-nord{display:grid}
#herr-nord i{grid-area:1/1;font-style:normal;font-size:20px;line-height:1;color:#ff7a2a}
#herr-nord small{grid-area:1/1;font:700 10px/1 "Barlow Condensed",sans-serif;margin-top:22px}
.herr-leiste{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.herr-karte{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:3px;width:82px;padding:8px 4px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#f6ebcd;font:600 12px/1.15 "Barlow Condensed",sans-serif;cursor:pointer}
.herr-karte i{font-style:normal;font-size:26px;line-height:1.1}
.herr-karte small{font-size:11px;color:#e8c873}
.herr-karte.bl-zu{opacity:.45}
.herr-karte[aria-pressed=true]{border-color:#f2461b;background:rgba(242,70,27,.22);box-shadow:0 0 12px rgba(242,70,27,.6)}
#kreatur-knopf img{width:30px;height:30px;object-fit:contain;flex:none}
#kreatur-knopf small{display:block;font-size:.72em;font-weight:600;letter-spacing:0;text-transform:none;opacity:.85}
#kreatur-knopf.warten{filter:saturate(.4) brightness(.8)}
#krw-liste .knopf{display:flex;flex-direction:column;gap:4px;min-height:96px}
#krw-liste img{width:56px;height:56px;object-fit:contain}
#renn-uhr{position:absolute;left:50%;top:calc(var(--kopf-h,64px) + 10px);transform:translateX(-50%);z-index:4;min-width:180px;max-width:calc(100vw - 32px);padding:8px 14px;border-radius:14px;
  background:rgba(11,9,6,.82);border:1px solid #e8c24a;color:#f3da92;font:600 14px/1.3 "Barlow Condensed",sans-serif;text-align:center;pointer-events:none}
#renn-uhr b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
#renn-uhr span{display:block;opacity:.85;font-variant-numeric:tabular-nums}
#renn-uhr ol{margin:6px 0 0;padding:0 0 0 18px;text-align:left;font-size:13px;color:#ffe9c8}
#trw-glieder .knopf,#trw-dazu .knopf{display:flex;flex-direction:column;gap:4px;min-height:96px}
#trw-glieder img,#trw-dazu img{width:56px;height:56px;object-fit:contain}
#tr-wahl h3{margin:14px 0 8px;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--k-text-e0cfaa)}
#trw-hilfe{margin:6px 0 10px;padding:8px 12px;border:1px solid rgba(232,194,74,.45);border-radius:12px;background:rgba(232,194,74,.06)}
#trw-hilfe summary{cursor:pointer;font-weight:700;color:#f3da92}
#trw-hilfe ul{margin:8px 0 2px;padding:0 0 0 18px}
#trw-hilfe li{margin:0 0 6px;line-height:1.4}
#trw-befehle .knopf[aria-pressed=true]{box-shadow:inset 0 0 0 2px #e8c24a}
#bombe small{display:block;font-size:.72em;font-weight:600;letter-spacing:0;text-transform:none;opacity:.85}
#bombe.warten{filter:saturate(.4) brightness(.8)}
#nitro small{display:block;font-size:.72em;font-weight:600;letter-spacing:0;text-transform:none;opacity:.85}
#nitro.warten{filter:saturate(.4) brightness(.8)}
#nitro.an{box-shadow:0 0 0 2px #ffb12e,0 0 18px #ff6a1a}
#spiel.nitro::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 64%,rgba(255,255,255,.12) 0 .6deg,transparent .6deg 7deg);
  -webkit-mask:radial-gradient(circle at 50% 64%,transparent 32%,#000 78%);mask:radial-gradient(circle at 50% 64%,transparent 32%,#000 78%);
  animation:nitrozug .18s linear infinite}
@keyframes nitrozug{to{transform:rotate(1.5deg)}}
@media (prefers-reduced-motion: reduce){#spiel.nitro::before{animation:none}}
#spiel.sprung-blitz::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(circle at 50% 64%,var(--k-bg-rgba21425025595),var(--k-bg-rgba12723225545) 28%,var(--k-bg-rgba1020249) 72%);
  animation:sprungblitz 1.1s ease-out forwards}
@keyframes sprungblitz{0%{opacity:0}18%{opacity:1}62%{opacity:.9}100%{opacity:0}}

/* The credit gets a band of its own along the bottom edge and the controls sit
   above it. Centring it as a floating line put it underneath the joystick and the
   action button on every phone size; measured, not guessed. */
#quelle{position:absolute;left:0;right:0;text-align:center;
  bottom:calc(2px + env(safe-area-inset-bottom));margin:0;font-size:10px;line-height:1.2;
  color:var(--k-text-8e7c5d);pointer-events:none}
#quelle a{color:var(--k-text-a8956f);pointer-events:auto}

/* Small and out of the way: #hilfe/#tempo/#gps/#farbe (the right column) end by
   231 px down, the minimap is gone by 144, and the joystick/action buttons only
   start climbing from the bottom edge, so a band around 240 px is clear on
   every portrait phone this plays on. JS keeps it hidden whenever the room is
   needed for something else anyway (dialogs, landscape; see
   drehHinweisAktualisieren). */
#dreh-hinweis{position:fixed;left:12px;
  top:calc(196px + env(safe-area-inset-top));z-index:20;
  display:flex;align-items:center;gap:8px;max-width:calc(100vw - 162px);padding:7px 8px 7px 12px;
  background:var(--k-bg-17130fd6);border:1px solid var(--k-line-705327);font-size:12px;line-height:1.35;
  color:var(--k-text-ead9b5)}
#dreh-hinweis[hidden]{display:none}
#dreh-hinweis svg{width:18px;height:18px;flex:none;color:var(--k-text-b89452);
  animation:drehSymbol 2.6s ease-in-out infinite}
#dreh-zu{flex:none;background:none;border:0;color:var(--k-text-bda77f);font-size:17px;line-height:1;
  padding:2px 3px;margin:0 0 0 2px;cursor:pointer}
#dreh-zu:hover{color:var(--k-text-ead9b5)}
@keyframes drehSymbol{
  0%,15%{transform:rotate(0deg)} 45%,72%{transform:rotate(90deg)} 100%{transform:rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){
  #dreh-hinweis svg{animation:none;transform:rotate(90deg)}
}

/* ---------- overlays ---------- */
.schleier{position:fixed;inset:0;z-index:50;display:none;align-items:flex-start;justify-content:center;
  padding:20px;background:var(--k-bg-000a);overflow:auto}
.schleier.an{display:flex}
/* margin:auto centres a dialog that fits and lets a taller one scroll from its top (a centred flex item would overflow upwards) */
.schleier .karte{max-width:520px;width:100%;padding:20px;border:1px solid var(--k-line-b89452);margin:auto;
  background:radial-gradient(120% 90% at 50% 0%,var(--k-bg-2b2519),var(--k-bg-1b1712) 70%)}
.schleier h2{margin:0 0 12px;font-size:21px;color:var(--k-text-ead9b5)}
.schleier p{margin:0 0 12px;line-height:1.6;font-size:15px}

#belohnung .karte{max-width:420px;text-align:center}
/* back on top of every in-game dialog (Owner 05.10.2026): no scrolling down to the close button */
.dlg-zurueck{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;margin:-8px 0 12px;min-height:44px;padding:6px 16px 6px 10px;
  border:0;border-radius:999px;background:rgba(17,14,15,.88);color:#fff;font:700 15px var(--cond);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.dlg-zurueck svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.schleier.seite .dlg-zurueck{display:none}
/* the monster's loot, picked up where it fell: its cards turn up one after another */
#beute .karte{max-width:560px;text-align:center}
#beute .reihe{justify-content:center}
.beute-karten{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:4px 0 14px}
.beute-karten img{width:clamp(72px,24vw,112px);height:auto;border-radius:6px;border:1px solid var(--k-line-b89452);
  box-shadow:0 0 18px -4px rgba(255,208,138,.7);animation:beute-auf .5s ease-out both}
@keyframes beute-auf{from{opacity:0;transform:translateY(14px) rotateY(80deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.beute-karten img{animation:none}}
#belohnung img{display:block;width:min(240px,62vw);height:auto;margin:0 auto 14px;
  border:1px solid var(--k-line-705327);box-shadow:0 0 0 4px var(--k-shadow-17130f),0 0 0 5px var(--k-shadow-b89452),0 24px 48px -20px var(--k-shadow-000)}
/* The turn over. The card lay face down out on the map, so this is the payoff and
   it is staged as one: light bursts out from behind, the card swings round and
   overshoots, a shine runs across the foil. */
#preis{position:relative;display:inline-block;margin:0 auto 14px;line-height:0}
#preis[hidden]{display:none}
#preis img{margin:0}
#preis .strahlen,#preis .funken,#preis .glanz{position:absolute;pointer-events:none}
#preis .strahlen{left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,var(--k-bg-rgba24221514585),var(--k-bg-rgba24221514516) 45%,transparent 72%)}
#preis .funken{left:50%;top:50%;width:170%;height:170%;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,transparent 0 6deg,var(--k-bg-rgba2422151455) 6deg 7deg,transparent 7deg 30deg);
  -webkit-mask:radial-gradient(closest-side,transparent 38%,#000 46%,#000 78%,transparent 88%);
          mask:radial-gradient(closest-side,transparent 38%,#000 46%,#000 78%,transparent 88%)}
#preis .glanz{inset:0;overflow:hidden;
  background:linear-gradient(105deg,transparent 38%,var(--k-bg-rgba25525525572) 50%,transparent 62%);
  background-size:260% 100%;background-position:180% 0;mix-blend-mode:screen;opacity:0}

@keyframes preisKarte{
  0%{transform:perspective(900px) rotateY(105deg) scale(.42);opacity:0}
  48%{opacity:1}
  68%{transform:perspective(900px) rotateY(-9deg) scale(1.1)}
  84%{transform:perspective(900px) rotateY(4deg) scale(.97)}
  100%{transform:perspective(900px) rotateY(0) scale(1);opacity:1}
}
@keyframes preisStrahlen{
  0%{transform:translate(-50%,-50%) scale(.2);opacity:0}
  45%{opacity:.95}
  100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}
}
@keyframes preisFunken{
  0%{transform:translate(-50%,-50%) rotate(0) scale(.4);opacity:0}
  40%{opacity:.9}
  100%{transform:translate(-50%,-50%) rotate(52deg) scale(1.35);opacity:0}
}
@keyframes preisGlanz{
  0%{background-position:180% 0;opacity:0}
  35%{opacity:1}
  100%{background-position:-80% 0;opacity:0}
}
#preis.auf img{animation:preisKarte .74s cubic-bezier(.16,.9,.3,1.02) both}
#preis.auf .strahlen{animation:preisStrahlen .95s ease-out both}
#preis.auf .funken{animation:preisFunken 1.05s ease-out both}
#preis.auf .glanz{animation:preisGlanz .85s ease-out .52s both}
@media (prefers-reduced-motion:reduce){
  #preis.auf img,#preis.auf .strahlen,#preis.auf .funken,#preis.auf .glanz{animation:none}
  #preis.auf .strahlen{opacity:.5}
}
/* what a find, a loop or a win paid, at a glance (Owner 30.09.2026): coins gold, XP in the brand's orange */
.lohn-leiste{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 14px}
.lohn-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;font:700 17px/1 var(--cond);letter-spacing:.02em;white-space:nowrap}
.lohn-chip.coins{padding-left:6px;background:linear-gradient(180deg,#fff6d8,#ffdf85);color:#6e3d00;box-shadow:0 0 0 1px rgba(184,116,15,.5) inset,0 4px 14px rgba(242,178,51,.35)}
.lohn-chip.xp{background:linear-gradient(180deg,#ff8a4c,#f2461b);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 4px 14px rgba(242,70,27,.35)}
.lohn-chip .muenze{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe7a3,#f2b233 45%,#b8740f);box-shadow:0 0 0 2px rgba(255,255,255,.6) inset;display:grid;place-items:center;font:700 11px var(--cond);color:#8a4d00}
.lohn-leiste .lohn-chip{animation:lohnAuf .55s cubic-bezier(.2,1.5,.4,1) both}
.lohn-leiste .lohn-chip+.lohn-chip{animation-delay:.14s}
@keyframes lohnAuf{from{opacity:0;transform:scale(.4) translateY(10px)}to{opacity:1;transform:none}}
#lohnflug{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 128px);transform:translateX(-50%);z-index:75;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
#lohnflug .lohn-leiste{margin:0;animation:lohnFlug 3s ease both}
@keyframes lohnFlug{0%{opacity:0;transform:translateY(12px)}12%{opacity:1;transform:none}80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-22px)}}
@media (prefers-reduced-motion:reduce){
  .lohn-leiste .lohn-chip{animation:none}
  #lohnflug .lohn-leiste{animation:lohnRuhig 3s linear both}
  @keyframes lohnRuhig{0%,85%{opacity:1}100%{opacity:0}}
}
#belohnung .zahlen{display:flex;gap:10px;justify-content:center;margin:0 0 16px;flex-wrap:wrap}
#belohnung .zahl{min-width:96px;padding:8px 10px;border:1px solid var(--k-line-705327);background:var(--k-bg-17130f99)}
#belohnung .zahl span{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--k-text-bda77f)}
#belohnung .zahl b{display:block;font-family:var(--cond);font-size:19px;color:var(--k-text-ead9b5);margin-top:2px}
.bel-nebenknoepfe{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px}

/* Block B, Teil e: the collection, view-only. */
#sammlung .karte{max-width:640px}
.sammlung-filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.sammlung-filter button{font:700 11px Barlow,sans-serif;letter-spacing:.03em;
  padding:5px 11px;border-radius:14px;border:1px solid var(--k-line-705327);
  background:var(--k-bg-17130f99);color:var(--k-text-ead9b5);cursor:pointer}
.sammlung-filter button[aria-pressed="true"]{background:var(--k-bg-b89452);color:var(--k-text-17130f);border-color:var(--k-line-b89452)}
#sammlung-zaehler{font-size:13px;color:var(--k-text-c9b58b);margin:0 0 10px}
/* Deckbau, own page (Owner 28.09.2026), DECKBAU-V3: cards left, commander and deck right */
/* Quests (Owner 28.09.2026): the page and the dialog at a station */
#quests.seite .karte{max-width:1100px}
#quest-inhalt h3{font:700 15px/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--k-text-ead9b5);margin:22px 0 8px}
.qu-karte{display:grid;grid-template-columns:160px minmax(0,1fr);gap:20px;padding:18px;border:1px solid var(--k-line-705327);background:var(--k-bg-17130fcc);border-radius:20px}
.qu-karte .cmd{width:160px;height:auto;aspect-ratio:360/504;object-fit:cover;border-radius:10px;box-shadow:0 16px 30px -14px rgba(0,0,0,.55)}
.qu-von{font:700 12px/1.2 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--k-text-c9b58b);display:flex;align-items:center;gap:6px}
.qu-von i{display:inline-block;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.qu-karte h2{font:700 clamp(26px,3.4vw,36px)/1.05 var(--cond);margin:6px 0 8px;color:var(--k-text-ead9b5)}
.qu-karte p{margin:0 0 8px;font-size:14.5px;line-height:1.5}
.qu-balken{position:relative;height:10px;border-radius:99px;background:rgba(0,0,0,.14);overflow:hidden;margin:12px 0 4px}
.qu-balken i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,#2f9e5c,#8be07a)}
.qu-stand{font:700 13px/1.2 var(--cond);letter-spacing:.06em;color:var(--k-text-c9b58b)}
.qu-ziel{margin:14px 0 0;padding:12px 14px;border-radius:14px;background:rgba(242,70,27,.1);border-left:3px solid #f2461b}
.qu-ziel b{display:block;font:700 12px/1.2 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#f2461b;margin:0 0 4px}
.qu-ziel p{margin:0 0 10px}
.qu-ziel + p{margin-top:16px}
.qu-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px}
.qu-st{display:grid;grid-template-columns:30px 42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:14px;border:1px solid var(--k-line-705327);background:var(--k-bg-17130fcc)}
.qu-st .nr{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--cond);background:rgba(0,0,0,.12)}
.qu-st img{width:42px;height:auto;aspect-ratio:360/504;object-fit:cover;border-radius:5px}
.qu-st img.fig,#qd-bild.fig{object-fit:contain;background:radial-gradient(circle at 50% 60%,rgba(255,217,138,.22),rgba(0,0,0,.25) 70%)}
.qu-st span{display:flex;flex-direction:column;gap:2px;min-width:0}
.qu-st b{font:700 16px/1.1 var(--cond);color:var(--k-text-ead9b5)}
.qu-st small{font-size:12px;color:var(--k-text-c9b58b)}
.qu-st em{font:700 12px/1.2 var(--cond);font-style:normal;letter-spacing:.05em;text-align:right;color:var(--k-text-c9b58b)}
.qu-st.ist{border-color:#f2461b;box-shadow:0 0 0 1px #f2461b,0 14px 26px -16px rgba(242,70,27,.7)}
.qu-st.ist .nr{background:#f2461b;color:#fff}
.qu-st.ja .nr{background:#2f9e5c;color:#fff}
.qu-st.nein{opacity:.62}
.qu-weitere{font-size:13px;color:var(--k-text-c9b58b);margin:14px 0 0}
@media (max-width:620px){ .qu-karte{grid-template-columns:1fr} .qu-karte .cmd{width:120px} .qu-liste{grid-template-columns:1fr} }
.qd{max-width:540px}
.qd-kopf{display:flex;gap:14px;align-items:center;margin:0 0 10px}
#qd-bild{flex:none;width:92px;height:auto;aspect-ratio:360/504;object-fit:cover;border-radius:8px;box-shadow:0 12px 26px -12px rgba(0,0,0,.7)}
#qd-ort{display:block;font:700 12px/1.25 var(--cond);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
#qd-titel{margin:4px 0 0}
#qd-text{font-size:15px;line-height:1.55;margin:0 0 10px}
#qd-karten:not([hidden]){display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
#qd-karten figure{position:relative;margin:0;width:74px}
#qd-karten span{display:block;margin:4px 0 0;font:600 11px/1.15 var(--cond);text-align:center;overflow-wrap:anywhere}
#qd-gegner{margin:0 0 12px;font-size:13.5px;line-height:1.4;opacity:.85}
#qd-kt{margin:0 0 6px;font:700 12px/1.2 var(--cond);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.qd .reihe{gap:10px;flex-wrap:wrap}
/* the finale shows the whole deck: the dialog scrolls inside the screen, its buttons stay in view */
#questdlg .qd{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}
#questdlg .qd .reihe{position:sticky;bottom:-24px;margin:0 -24px -24px;padding:14px 24px 24px;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.92) 35%)}
#qd-karten figure.cmd img{box-shadow:0 0 0 2px #f2461b,0 8px 16px -8px rgba(0,0,0,.6)}
#qd-karten.alle figure{width:56px}
#qd-karten.alle img{width:56px}
#qd-karten.alle figcaption{min-width:18px;height:18px;font-size:11px;line-height:18px;right:-4px;top:-5px}
#qd-karten.alle span{font-size:10.5px}
#qd-karten img{display:block;width:74px;height:auto;aspect-ratio:360/504;object-fit:cover;border-radius:5px;box-shadow:0 8px 16px -8px rgba(0,0,0,.6)}
#qd-karten figcaption{position:absolute;right:-5px;top:-6px;min-width:22px;height:22px;padding:0 5px;box-sizing:border-box;border-radius:11px;background:#f2461b;color:#fff;font:700 13px/22px var(--cond);text-align:center}
#qd-ziel{font-size:13.5px;line-height:1.45;margin:0 0 10px;padding:9px 12px;border-radius:10px;background:rgba(242,70,27,.12);border-left:3px solid #f2461b}
#deckbau.seite .karte{max-width:1320px}
#db-inhalt h2{margin:0 0 6px}
.db-zw{font:700 15px/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--k-text-ead9b5);margin:16px 0 8px}
#db-inhalt i[class^="l-"],.db-detail i[class^="l-"],#arena-deck i[class^="l-"]{display:inline-block;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 1px 3px rgba(0,0,0,.3);vertical-align:-1px}
#db-inhalt i.l-hoelle,.db-detail i.l-hoelle,#arena-deck i.l-hoelle{box-shadow:0 0 0 1.5px #d8432c,0 1px 3px rgba(0,0,0,.3)}
#arena-deck i[class^="l-"]{margin-right:5px}
.db-decks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.db-deck,.db-cmdzeile,.db-leih{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--k-line-705327);background:var(--k-bg-17130fcc);border-radius:16px}
.db-deck img{width:40px;aspect-ratio:360/504;object-fit:cover;border-radius:4px}
.db-deck span,.db-cmdzeile span,.db-leih span{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.db-deck b,.db-cmdzeile b,.db-leih b{font:700 17px/1.1 var(--cond);color:var(--k-text-ead9b5)}
.db-deck small,.db-cmdzeile small,.db-leih small{font-size:12.5px;color:var(--k-text-c9b58b);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.db-cmdliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.db-cmdzeile{font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.db-cmdzeile:hover{transform:translateY(-2px);border-color:#f2461b;box-shadow:0 14px 26px -14px rgba(242,70,27,.6)}
.db-cmdzeile img{width:58px;aspect-ratio:360/504;object-fit:cover;border-radius:6px;box-shadow:0 8px 16px -8px rgba(0,0,0,.5)}
.db-cmdzeile em{font:400 26px/1 var(--cond);color:#f2461b;font-style:normal}
.db-leih{margin:18px 0 0}
.db-bau{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.db-leiste{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
.db-titel{margin:4px 0 8px}
.db-q{width:100%;box-sizing:border-box;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--k-line-705327);background:rgba(255,255,255,.7);font:500 15px Barlow,sans-serif;color:#141213;margin:0 0 8px}
.db-q:focus{outline:2px solid #f2461b;outline-offset:1px}
#db-chips{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
#db-chips .sammlung-filter{margin:0;flex-wrap:wrap}
.db-fzeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.db-flabel{font:700 12px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--k-text-c9b58b);min-width:62px}
.db-werte{gap:8px 18px}
.db-wert{display:flex;align-items:center;gap:8px}
.db-wert .db-flabel{min-width:0}
.db-etikknopf{height:34px;max-width:min(320px,62vw);display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid var(--k-line-705327);background:rgba(255,255,255,.7);padding:0 10px 0 12px;font:600 14px Barlow,sans-serif;color:#141213;cursor:pointer}
.db-etikknopf span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-etikknopf svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.db-etikknopf.an{border-color:#f2461b;box-shadow:0 0 0 1px #f2461b inset}
.db-etikwahl[open]{flex-direction:column;align-items:stretch;gap:12px;width:min(640px,94vw)}
.db-etikwahl h3{margin:0;font:400 24px/1.05 var(--display,Anton),var(--cond);text-transform:uppercase}
.db-etiktab{display:flex;flex-direction:column;gap:12px;max-height:62dvh;overflow:auto}
.db-etiktab h4{margin:0 0 6px;font:700 12px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#6b6365}
.db-etiktab .sammlung-filter{margin:0;flex-wrap:wrap}
.db-etikwahl .reihe{justify-content:flex-end;gap:8px}
.db-minibox{display:none;align-items:center;gap:6px}
.db-wechsel{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.62);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.db-wechsel svg,.db-wechselknopf svg{width:20px;height:20px;fill:none;stroke:#f2461b;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.db-wechselknopf{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:4px}
.db-cmdwahl[open]{flex-direction:column;align-items:stretch;gap:12px;width:min(520px,94vw)}
.db-cmdwahl h3{margin:0;font:400 24px/1.05 var(--display,Anton),var(--cond);text-transform:uppercase}
.db-cmdwahl .db-cmdliste{grid-template-columns:minmax(0,1fr);max-height:60dvh;overflow:auto}
.db-cmdwahl .reihe{justify-content:flex-end}
.db-fzeile label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--k-text-c9b58b)}
.db-fzeile select{height:34px;border-radius:999px;border:1px solid var(--k-line-705327);background:rgba(255,255,255,.7);padding:0 10px;font:600 14px Barlow,sans-serif;color:#141213}
.db-treffer{font-size:12.5px;color:var(--k-text-c9b58b);margin:8px 0 0}
.db-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px 8px;margin:8px 0 6px}
.db-karte{display:flex;flex-direction:column;align-items:center;gap:5px}
.db-karte .sammlung-karte{width:100%;border-radius:6px}
.db-karte.drin .sammlung-karte{box-shadow:0 0 0 2px #f2461b,0 10px 18px -10px rgba(242,70,27,.6)}
.db-karte.fremd .sammlung-karte{opacity:.42;filter:grayscale(.7)}
.db-karte small{font-size:11px;color:var(--k-text-c9b58b);display:flex;align-items:center;gap:3px;text-align:center}
.db-karte .menge{display:flex;align-items:center;gap:8px}
.db-karte .menge button,.db-zminus{width:32px;height:32px;border-radius:50%;border:1px solid rgba(20,18,19,.18);background:rgba(255,255,255,.75);color:#141213;font:700 17px/1 Barlow,sans-serif;cursor:pointer;padding:0}
.db-karte .menge button[data-plus]:not(:disabled){color:#fff;border-color:rgba(255,190,160,.8);background:linear-gradient(180deg,#ff7440,#f2461b 55%,#cf2d0b)}
.db-karte .menge button:disabled{opacity:.35;cursor:default}
.db-karte .menge b{min-width:14px;text-align:center;font:700 16px/1 var(--cond);color:var(--k-text-ead9b5)}
.db-rechts{position:sticky;top:96px;max-height:calc(100dvh - 116px);overflow:auto;padding:14px;border:1px solid rgba(255,255,255,.75);border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.34));box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 22px 44px -22px rgba(52,24,12,.42)}
.db-cmdkarte{display:flex;gap:12px;align-items:flex-start}
.db-cmdbild{padding:0;border:0;background:none;cursor:pointer;flex:none}
.db-cmdbild img{width:120px;aspect-ratio:360/504;object-fit:cover;border-radius:8px;box-shadow:0 0 0 2px #f2461b,0 16px 28px -14px rgba(0,0,0,.6);display:block}
.db-cmdkarte > span{display:flex;flex-direction:column;gap:5px;min-width:0}
.db-cmdkarte b{font:400 24px/1 var(--display,Anton),var(--cond);text-transform:uppercase;color:var(--k-text-ead9b5)}
.db-cmdkarte small{font-size:12px;color:var(--k-text-c9b58b);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.db-zahl{font:600 15px/1 var(--cond);color:var(--k-text-c9b58b);white-space:nowrap}
.db-zahl b{font:400 32px/1 var(--display,Anton),var(--cond);color:var(--k-text-ead9b5);margin-right:3px}
.db-zahl.voll b{color:#f2461b}
.db-bald{font-size:12px;line-height:1.4;color:var(--k-text-c9b58b);margin:10px 0 0}
.db-deckgruppe{font:700 12px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--k-text-c9b58b);margin:10px 0 4px}
.db-zeile{display:flex;align-items:center;gap:8px;padding:3px 0;border-bottom:1px solid rgba(20,18,19,.07)}
.db-zeilebild{padding:0;border:0;background:none;cursor:pointer}
.db-zeilebild img{width:28px;aspect-ratio:360/504;object-fit:cover;border-radius:3px;display:block}
.db-zkosten{width:20px;height:20px;border-radius:50%;background:#141213;color:#fff;font:700 11px/20px var(--cond);text-align:center;flex:none}
.db-zname{flex:1;min-width:0;text-align:left;padding:0;border:0;background:none;cursor:pointer;font:600 13.5px/1.2 Barlow,sans-serif;color:var(--k-text-ead9b5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-zeile > b{font:700 14px/1 var(--cond);color:var(--k-text-ead9b5)}
.db-zminus{width:28px;height:28px;font-size:15px}
.db-knoepfe{margin-top:10px;flex-wrap:wrap}
.db-mini{display:inline-flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.62);cursor:pointer}
.db-mini img{width:34px;aspect-ratio:360/504;object-fit:cover;border-radius:4px;box-shadow:0 0 0 1.5px #f2461b}
.db-mini .db-zahl b{font-size:22px}
.db-detail{border:0;border-radius:22px;padding:18px;max-width:min(680px,94vw);max-height:92dvh;background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(245,242,239,.92));color:#141213;box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.db-detail[open]{display:flex;gap:18px;align-items:flex-start}
.tausch-hinweis[open]{display:block;max-width:min(560px,94vw)}
.tausch-hinweis h2{margin:0 0 8px;font:600 24px/1.1 var(--cond)}
.tausch-hinweis ul{margin:10px 0 14px;padding-left:18px;display:grid;gap:6px;font-size:14px}
.tausch-hinweis p{margin:0 0 10px;font-size:14px;line-height:1.45}
.db-deck .db-grund{display:block;color:#b3261e;font-size:12px;margin-top:2px}
.db-detail::backdrop{background:rgba(20,18,19,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.db-detail img{width:min(280px,42vw);aspect-ratio:360/504;object-fit:cover;border-radius:10px;flex:none}
.db-dtext{display:flex;flex-direction:column;gap:8px;min-width:0}
.db-dtext small{font-size:12.5px;color:#6b6365;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.db-dtext h3{margin:0;font:400 26px/1.05 var(--display,Anton),var(--cond);text-transform:uppercase}
.db-dtext p{margin:0;font:500 14px/1.45 Barlow,sans-serif;color:#3a3536;max-height:40vh;overflow:auto}
.db-dtext .reihe{justify-content:flex-start;flex-wrap:wrap;gap:8px}
@media (max-width:860px){
  .db-bau{grid-template-columns:minmax(0,1fr)}
  .db-rechts{position:static;max-height:none}
  .db-minibox{display:inline-flex;position:fixed;top:78px;right:12px;z-index:70}
  .db-mini{box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
  .db-karten{grid-template-columns:repeat(3,minmax(0,1fr))}
  .db-cmdliste{grid-template-columns:minmax(0,1fr)}
  .db-detail[open]{flex-direction:column;align-items:center}
  .db-detail img{width:min(240px,62vw)}
  .db-leih{flex-direction:column;align-items:stretch}
}
/* Deck Building Challenges on the Tauschstelle (Owner 27.09.2026) */
#dbc h2{margin:0 0 6px}
.dbc-text{font-size:13.5px;line-height:1.45;color:var(--k-text-c9b58b);margin:0 0 12px;max-width:46em}
.dbc-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.dbc-eintrag{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px;border:1px solid var(--k-line-705327);
  background:var(--k-bg-17130fcc);color:var(--k-text-f0e3c6);cursor:pointer;font:inherit}
.dbc-eintrag:hover:not(:disabled){border-color:var(--k-line-b89452)}
.dbc-eintrag:disabled{opacity:.55;cursor:default}
.dbc-eintrag b{font:700 16px/1.2 var(--cond);color:var(--k-text-ead9b5)}
.dbc-eintrag small{font-size:12px;line-height:1.35;color:var(--k-text-c9b58b)}
.dbc-eintrag .dbc-bel{color:var(--k-text-ead9b5)}
.dbc-eintrag .dbc-stand{margin-top:4px;color:var(--k-text-b89452)}
.dbc-kopf{display:flex;justify-content:space-between;gap:8px;font-size:12px}
.dbc-sterne{color:var(--k-text-b89452);letter-spacing:1px;white-space:nowrap}
.dbc-sterne s{text-decoration:none;opacity:.25}
.dbc-lager{display:flex;align-items:center;gap:5px;color:var(--k-text-c9b58b)}
.dbc-lager i,.sammlung-filter i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}
.l-mensch{background:#e0342c}.l-technologie{background:var(--k-bg-5fb4c9)}.l-natur{background:var(--k-bg-56a867)}
.l-himmel{background:#f2c64b}.l-hoelle{background:#1c1719;box-shadow:0 0 0 1px #d8432c}.l-kosmos{background:var(--k-bg-3f6fd1)}
.dbc-reihebox{margin:12px 0 0;padding:10px 12px;border:1px dashed var(--k-line-b89452);font-size:13px;color:var(--k-text-ead9b5)}
.dbc-reihebox.fertig{border-style:solid;opacity:.7}
.dbc-titel{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 4px}
.dbc-titel h3{margin:0;font:700 20px/1.2 var(--cond);color:var(--k-text-ead9b5)}
.dbc-plaetze{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px;margin:10px 0}
.dbc-platz{aspect-ratio:360/504;border:1px solid var(--k-line-705327);background:var(--k-bg-0d0b08);padding:0;overflow:hidden;cursor:pointer}
.dbc-platz img{width:100%;height:100%;object-fit:cover;display:block}
.dbc-platz.leer{display:flex;align-items:center;justify-content:center;border-style:dashed;color:var(--k-text-b89452);font-size:20px;cursor:default}
.dbc-zahlen{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px;color:var(--k-text-c9b58b);margin:0 0 8px}
.dbc-zahlen b{color:var(--k-text-ead9b5);font-size:15px}
.dbc-bed{list-style:none;padding:0;margin:0 0 8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 12px}
.dbc-bed li{display:flex;gap:8px;align-items:center;font-size:13px;padding:5px 8px;background:var(--k-bg-17130f99);border-left:3px solid var(--k-line-9c352d)}
.dbc-bed li::before{content:"○";color:var(--k-text-e0705f)}
.dbc-bed li.ok{border-left-color:var(--k-line-3dbb78)}
.dbc-bed li.ok::before{content:"✓";color:var(--k-text-3dbb78)}
.dbc-bed li b{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.dbc-hilfe{font-size:12px;line-height:1.4;color:var(--k-text-a8966f);margin:0 0 10px}
.dbc-frei{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;max-height:min(42vh,340px);overflow:auto;padding:2px;margin:0 0 10px}
.dbc-ergebnis{text-align:center}
.dbc-ergebnis img{width:min(220px,60vw);display:block;margin:10px auto 4px;border:1px solid var(--k-line-b89452)}
#sammlung-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));
  gap:8px;max-height:min(50vh,360px);overflow:auto;padding:2px}
.sammlung-karte{position:relative;border:1px solid var(--k-line-705327);background:var(--k-bg-17130f);
  padding:0;aspect-ratio:360/504;overflow:hidden;border-radius:2px;cursor:pointer}
.sammlung-karte:disabled{cursor:default}
.sammlung-karte img{width:100%;height:100%;object-fit:cover;display:block}
.sammlung-karte.verdeckt{display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;background:var(--k-bg-0d0b08)}
.sammlung-karte.verdeckt span{font:700 10px Barlow,sans-serif;text-align:center;padding:0 4px}
.sammlung-karte.verdeckt .marke{font-family:var(--cond);font-size:22px;line-height:1}
.sammlung-karte .anzahl{position:absolute;right:2px;bottom:2px;background:var(--k-bg-17130fd6);
  border:1px solid var(--k-line-b89452);color:var(--k-text-ead9b5);font:700 10px/1.6 Barlow,sans-serif;
  padding:0 5px;border-radius:8px}
#sammlung-gross{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
/* back to all cards, big, right under the name and number (Owner 05.10.2026) */
#sammlung-gross-oben{width:min(100%,420px);min-height:52px;justify-content:center;gap:10px;
  padding:8px 18px;font-size:17px;background:rgba(17,14,15,.88);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.3)}
#sammlung-gross-oben svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* a secret's rarer prints (Owner 01.10.2026): a chip with the print, a sheen running over M and P */
.neu-karten-bilder{display:flex;gap:8px;justify-content:center}
.neu-karten-bilder img{width:96px;height:auto;border-radius:6px}
.sammlung-karte .druck{position:absolute;left:2px;top:2px;font:800 10px/1.6 Barlow,sans-serif;padding:0 5px;border-radius:8px;
  color:#1a1206;background:linear-gradient(135deg,#fff3b0,#e6b422 55%,#a8761a)}
.sammlung-karte.druck-p .druck{background:linear-gradient(135deg,#ffd6f5,#9ee7ff 35%,#ffe27a 70%,#e6b422)}
.sammlung-karte.druck-m,.sammlung-karte.druck-p{border-color:#e6b422}
.k3.druck-m .vorne,.k3.druck-p .vorne{box-shadow:0 0 0 2px #e6b422,0 0 26px -4px rgba(230,180,34,.8)}
.sammlung-karte.druck-m::after,.sammlung-karte.druck-p::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,236,170,.45) 48%,rgba(160,230,255,.3) 54%,transparent 66%);
  background-size:250% 100%;animation:druck-glanz 3.2s linear infinite;mix-blend-mode:screen}
#sammlung-gross.druck-m #sammlung-gross-bild,#sammlung-gross.druck-p #sammlung-gross-bild{box-shadow:0 0 0 2px #e6b422,0 0 28px -4px rgba(230,180,34,.75)}
@keyframes druck-glanz{from{background-position:130% 0}to{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.sammlung-karte.druck-m::after,.sammlung-karte.druck-p::after{animation:none}}
#sammlung-gross[hidden]{display:none}
/* every print of a card in the big view (Owner 02.10.2026): the ones not owned yet greyed out, a tap shows it large */
#sammlung-drucke{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#sammlung-drucke[hidden]{display:none}
#sammlung-drucke button{display:flex;flex-direction:column;align-items:center;gap:3px;width:76px;padding:4px;border-radius:10px;cursor:pointer;
  background:transparent;border:2px solid transparent;color:var(--k-text-ead9b5);font:700 12px/1.2 Barlow,sans-serif}
#sammlung-drucke button[aria-pressed="true"]{border-color:#e6b422}
#sammlung-gross #sammlung-drucke img{width:62px;max-width:none;border-radius:5px;border:0;box-shadow:none}
#sammlung-gross #sammlung-drucke .druck-m img,#sammlung-gross #sammlung-drucke .druck-p img{box-shadow:0 0 0 2px #e6b422}
#sammlung-drucke .fehlt img{filter:grayscale(1) brightness(.55)}
#sammlung-drucke .fehlt small{color:var(--tinte2);font-weight:600;font-size:10px}
#sammlung-gross img{max-width:min(240px,68vw);width:100%;height:auto;
  border:1px solid var(--k-line-705327);box-shadow:0 12px 28px -14px var(--k-shadow-000)}
#sammlung-gross h3{margin:4px 0 0;font-size:19px;color:var(--k-text-ead9b5)}
#sammlung-gross p{margin:0}
/* the big card in the light, as when a pack opens (René 03.10.2026: "ganz nah", turned freely by tilt, finger or mouse) */
#sammlung-gross .stapel{position:relative;height:min(64svh,calc(88vw / .714),680px);aspect-ratio:.714;perspective:1200px;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#sammlung-gross .sk,#sammlung-gross .sk .kipp,#sammlung-gross .sk .dreh,#sammlung-gross .sk .seite{position:absolute;inset:0}
#sammlung-gross .sk .kipp{transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
#sammlung-gross .sk .dreh{transform-style:preserve-3d}
#sammlung-gross .sk .seite{border-radius:4.2%/3%;overflow:hidden;background:#161214;
  box-shadow:var(--sx,0px) var(--sy,18px) 34px -10px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1)}
#sammlung-gross.druck-m .sk .seite,#sammlung-gross.druck-p .sk .seite{box-shadow:var(--sx,0px) var(--sy,18px) 34px -10px rgba(0,0,0,.85),0 0 0 2px #e6b422,0 0 28px -4px rgba(230,180,34,.75)}
#sammlung-gross .sk .seite img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border:0;border-radius:0;box-shadow:none;-webkit-user-drag:none;pointer-events:none}

#laden{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:var(--k-bg-211e18);color:var(--k-text-c9b58b);font-size:14px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:20px}
#laden.weg{display:none}
#laden-knoepfe{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;letter-spacing:normal;text-transform:none}
#laden-knoepfe[hidden]{display:none}

@media (max-width:560px){
  #minikarte-knopf{width:104px;height:104px}
  #wo-knopf{top:calc(122px + env(safe-area-inset-top));font-size:11.5px}
  #stand{max-width:38vw;font-size:11px;padding:3px 7px}
  /* The credit line lives at the bottom centre and the action button sat on top of
     it. The button moves up by its height instead of the credit moving away: a map
     attribution belongs where people look for it. */
  /* nichts mehr noetig: die Quellenangabe hat unten ein eigenes Band */
  /* Unfolded the row is 4x56 + 3x6 = 242 px. It clears the minimap down to about
     390 px; below that it wraps into a 2x2 block instead of running over it. */
  #stick{width:126px;height:126px}
}
/* A low window, which on a phone means landscape. The app handles this case
   explicitly (RpgMapScreen.tsx keeps a `short` flag for a height under 310 and
   shrinks the minimap and the joystick); without it the joystick and the minimap
   eat the whole picture and there is nothing left to look at. */
/* Very narrow, where the minimap and the status line start fighting for the top. */
@media (max-width:420px){
  #minikarte-knopf{width:92px;height:92px}
  #wo-knopf{top:calc(110px + env(safe-area-inset-top))}
  #stand{max-width:34vw}
  /* At 320 px the joystick and the action button touched by four pixels. Both give
     a little rather than one of them giving a lot. */
  #stick{width:118px;height:118px}
  #taten .knopf,#kontext .knopf{padding:6px 9px;font-size:13.5px}
  #kontext{bottom:calc(150px + env(safe-area-inset-bottom))}
}
/* at 320 to 360 px the hint over the right block would cover the own figure: it keeps to the right half */
@media (max-width:360px){
  #hinweis{max-width:calc(50vw - 36px)}
  /* the back button keeps only its arrow, so the music beside it leaves the status line room */
  #hilfe-text{display:none}
  #hilfe{width:44px;padding:0;justify-content:center}
}
@media (max-aspect-ratio:1/1) and (max-width:700px){
  #tempo{max-width:118px}
  #farbe{max-width:120px}
  #farbe{width:52px;padding:0;justify-content:center;gap:4px}
  #farbe #farbe-name{display:none}
  /* between the minimap and the back button instead of centred under both; the route line takes the same place
     (#spiel raises it over the later #route rule) */
  #spiel #stand,#spiel #route{left:152px;transform:none;text-align:left;max-width:calc(100vw - 152px - 176px)}
  #spiel #route{white-space:normal;line-height:1.2;padding:6px 7px 6px 8px;gap:4px}
  #spiel #route-pfeil{font-size:14px;flex:none}
  #spiel #route-text{min-width:0}
  #spiel #route .route-wort{display:none}
  #spiel #route .route-name{display:block;font:700 12px/1.15 var(--cond);hyphens:auto;overflow-wrap:anywhere}
  #spiel #route .route-weit{display:block;font-size:12px;color:#ff9a6e}
  #spiel #route .route-weit::before{content:none}
  /* the x as a round badge on the lower corner, beside the short distance, so the name keeps the width */
  #spiel #route-aus{position:absolute;right:-8px;bottom:-8px;width:26px;height:26px;padding:0;border-radius:50%;
    background:var(--rauch);box-shadow:var(--rauch-schatten);color:#fff;font-size:15px;display:grid;place-items:center}
}
@media (max-aspect-ratio:1/1) and (max-width:560px){
  #spiel #stand,#spiel #route{left:116px;max-width:calc(100vw - 116px - 176px)}
}
/* at 320 to 360 px the back button is only its arrow (above): the status line takes the room it leaves */
@media (max-aspect-ratio:1/1) and (max-width:360px){
  #spiel #stand,#spiel #route{max-width:calc(100vw - 116px - 120px)}
}
@media (max-height:520px){
  #minikarte-knopf{width:96px;height:96px}
  #wo-knopf{top:calc(114px + env(safe-area-inset-top))}
  #stick{width:104px;height:104px;bottom:calc(8px + env(safe-area-inset-bottom))}
  /* Querformat: die Statuszeile steht neben der Minikarte statt mittig, sonst
     laeuft sie in die Tempo-Leiste. */
  #stand{left:112px;transform:none;text-align:left;max-width:30vw}
  /* Landscape has width to spare and no height: the switch keeps its single row
     and moves beside the help button instead of under it. */
  /* Two rows from the right: Menü, travel switch, cards; under them GPS, name, music. A
     column would run into #taten climbing up from the bottom in this short a viewport. */
  #hud-rechts{top:calc(8px + env(safe-area-inset-top));flex-direction:row-reverse;flex-wrap:wrap;align-items:flex-start;max-width:calc(100vw - 140px)}
  #hud-oben{order:1}#tempo{order:2}#sammlung-knopf,#figur-knopf,#haltung-knopf,#sprache-knopf{order:3}.hud-umbruch{display:block;order:4;flex-basis:100%;height:0}
  #gps,#spur{order:5}#farbe{order:6}
  #tempo{flex-wrap:nowrap;max-width:none}
  /* the owner's eight modes would run into the status line: two rows of four while unfolded */
  #tempo.viele{flex-wrap:wrap;max-width:226px}
  .knopf.modus{min-height:44px;width:52px}
  #gps,#spur,#farbe{min-height:44px}
  #stand{top:calc(8px + env(safe-area-inset-top));font-size:10.5px;max-width:max(140px,calc(100vw - 580px))}
  #spiel #route{left:112px;transform:none;top:calc(8px + env(safe-area-inset-top));max-width:max(140px,calc(100vw - 580px));white-space:normal;line-height:1.25}
  /* no height to spare: "secure" stands left of the action block, the hint right over the block */
  #taten{bottom:calc(8px + env(safe-area-inset-bottom));flex-direction:row;align-items:flex-end}
  #taten #hinweis{position:absolute;right:0;bottom:calc(100% + 7px)}
  #kontext{left:128px;bottom:calc(8px + env(safe-area-inset-bottom));flex-direction:row;align-items:flex-end;max-width:max(150px,calc(100vw - 128px - 400px));flex-wrap:wrap-reverse}
  #spiel.im-fahrzeug #kontext{left:auto;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));flex-direction:column;align-items:flex-end}
  #ereignis-text{bottom:calc(96px + env(safe-area-inset-bottom))}
  #ereignis-text.titel{top:22%}
  #oben-meldungen{left:50%;transform:translateX(-50%);top:calc(60px + env(safe-area-inset-top));max-width:min(440px,46vw);align-items:center}
  #quelle{display:none}
  /* Was 20/12 px: brought down to 10/10 so the belohnung grid below has a
     20+20=40 px vertical budget to subtract from 100vh, not 64. Every other
     .schleier dialog just gets a little more room too. */
  .schleier{padding:10px}
  .schleier .karte{padding:10px}
  .schleier h2{margin-bottom:5px;font-size:16px}
  /* Landscape with little height (phone turned sideways): image left, title/
     text/values/button in a column to its right, as a CSS grid so the image
     can span that whole column's height instead of pushing it below the fold.
     Everything (title through the button) has to fit in one screen: focus()
     on the button no longer scrolls to it (see sichernAusfuehren), so if it
     didn't fit here it would just be invisible rather than reachable by hand. */
  #belohnung .karte{display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:auto 1fr auto auto auto;column-gap:14px;row-gap:3px;
    text-align:left;max-width:680px;align-items:start}
  #belohnung h2{grid-column:2;grid-row:1;width:auto;margin-bottom:2px}
  #preis{grid-column:1;grid-row:1/span 5;max-height:calc(100vh - 64px - env(safe-area-inset-bottom));align-self:start}
  #preis img{max-height:calc(100vh - 64px - env(safe-area-inset-bottom));width:auto;height:auto;object-fit:contain}
  /* Punkt 14 (24.09.): buttons were flush with the bottom edge at 667x375 */
  #belohnung{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  #belohnung .karte{padding-bottom:14px}
  #belohnung p{grid-column:2;grid-row:2;margin:0;font-size:12px;line-height:1.35;overflow:auto}
  #belohnung .doppelt{grid-column:2;grid-row:3;margin:0;padding:4px 7px;font-size:10.5px;line-height:1.3}
  #belohnung .zahlen{grid-column:2;grid-row:4;margin:0;gap:5px;justify-content:flex-start}
  #belohnung .zahl{padding:3px 6px;min-width:0}
  #belohnung .zahl span{font-size:8.5px}
  #belohnung .zahl b{font-size:13.5px;margin-top:0}
  /* Kritikerbefund (Owner, eigener Blick): a 6th grid row for the two extra
     buttons grew the card past the dialog, cropping the card and the text
     beside it. #weiter and the two small buttons now share row 5 in one flex
     line instead. */
  #bel-knopfzeile{grid-column:2;grid-row:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
  #bel-knopfzeile #weiter{min-height:32px;padding:4px 10px;font-size:13.5px;margin:0;flex:1 1 140px}
  #bel-knopfzeile .bel-nebenknoepfe{margin:0;flex:0 0 auto}

  /* #konto quer: title through the "Konto erstellen" button has to fit without
     scrolling (Google/oder/Zurück may still need a scroll, that's fine). Three
     fields side by side instead of stacked is most of the saving; the rest is
     just smaller type and tighter spacing on the same elements. Scoped to
     #konto so #profil and other .feld/.knopf users elsewhere are untouched. */
  #konto .karte{max-width:680px}
  #konto > .karte > p{margin:0 0 5px;font-size:12px;line-height:1.3}
  #konto-hinweis{margin:0 0 5px;font-size:12px}
  .konto-reiter{margin:0 0 7px}
  .konto-reiter .knopf{min-height:32px;padding:3px 8px;font-size:12.5px}
  #konto label.klein{font-size:10px;margin:0}
  #konto .feld{min-height:32px;padding:4px 10px;font-size:14px;margin:2px 0 6px}
  #konto .legal-row{margin:1px 0 6px;font-size:10.5px;line-height:1.3}
  #konto .legal-row input{width:13px;height:13px}
  #konto .fehler{margin:0 0 5px;font-size:11.5px}
  #konto .konto-notice{margin:0 0 5px;font-size:11px}
  #konto .reihe{margin:0}
  #konto-registrieren,#konto-anmelden,#konto-senden{min-height:34px;padding:3px 12px;font-size:13.5px}
  #konto-form-register:not([hidden]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px}
  #konto-form-register label[for="konto-name"]{grid-column:1;grid-row:1}
  #konto-form-register #konto-name{grid-column:1;grid-row:2}
  #konto-form-register label[for="konto-email-r"]{grid-column:2;grid-row:1}
  #konto-form-register #konto-email-r{grid-column:2;grid-row:2}
  #konto-form-register label[for="konto-pass-r"]{grid-column:3;grid-row:1}
  #konto-form-register #konto-pass-r{grid-column:3;grid-row:2}
  #konto-form-register .legal-row{grid-column:1/-1;grid-row:3}
  #konto-form-register #konto-fehler-r{grid-column:1/-1;grid-row:4}
  #konto-form-register #konto-hinweis-r{grid-column:1/-1;grid-row:5}
  #konto-form-register .reihe{grid-column:1/-1;grid-row:6}
  #konto-form-register .konto-oder{grid-column:1/-1;grid-row:7}
  #konto-form-register #konto-google{grid-column:1/-1;grid-row:8}
  #konto-form-register #konto-google-hinweis{grid-column:1/-1;grid-row:9}
  #konto-form-register #konto-google-anders{grid-column:1/-1;grid-row:10;justify-self:start}
  /* :not([hidden]): an ID selector alone would outrank the UA's [hidden]{display:none}
     and show the login form's fields through the register tab (found while
     measuring this fix). */
  #konto-form-login:not([hidden]){display:grid;grid-template-columns:1fr 1fr;column-gap:10px}
  #konto-form-login label[for="konto-email-l"]{grid-column:1;grid-row:1}
  #konto-form-login #konto-email-l{grid-column:1;grid-row:2}
  #konto-form-login label[for="konto-pass-l"]{grid-column:2;grid-row:1}
  #konto-form-login #konto-pass-l{grid-column:2;grid-row:2}
  #konto-form-login .fehler{grid-column:1/-1;grid-row:3}
  #konto-form-login .reihe{grid-column:1/-1;grid-row:4}
  #konto-form-login .konto-oder{grid-column:1/-1;grid-row:5}
  #konto-form-login #konto-google-l{grid-column:1/-1;grid-row:6}
  #konto-form-login #konto-google-hinweis-l{grid-column:1/-1;grid-row:7}
}
/* ---------- start: the app's hub (screens/hub/ExperienceHub.tsx) ----------
   Same backdrop, the same compass mark, the same two plates. The app says TCG
   and MAP; here TCG leads to the open beta and MAP to the spawn points. */
#start{background:var(--k-bg-100e0b) url(/assets/hintergrund/mapraiders-hintergrund-sternkarte-start-hochformat.webp) center/cover no-repeat}
@media (min-aspect-ratio:1/1){#start{background-image:url(/assets/hintergrund/mapraiders-hintergrund-sternkarte-start-querformat.webp)}}
/* The backdrop is busy right where the menu sits (its own compass rose), so a
   soft dark veil in the middle keeps the wordmark and the plates readable. */
#start::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 48%,var(--k-bg-rgba16141172),var(--k-bg-rgba16141125) 70%,var(--k-bg-rgba1614111))}
#start .hub{position:relative;width:100%;max-width:430px;display:flex;flex-direction:column;align-items:center;margin:auto}
#start .marke{font:700 clamp(30px,9vw,40px)/1.1 var(--cond);color:var(--k-text-ead7af);letter-spacing:.02em;
  text-shadow:0 2px 4px var(--k-shadow-100d09);margin:14px 0 6px}
#start .kicker{font-size:10px;letter-spacing:.28em;color:var(--k-text-d6b67e);margin:0 0 28px;text-shadow:0 1px 3px var(--k-shadow-000)}
.ansicht{width:100%}
.ansicht[hidden]{display:none}
.kachel{width:100%;min-height:104px;gap:15px;padding:12px 16px;text-align:left;justify-content:flex-start}
.kachel + .kachel{margin-top:16px}
.kachel .t{font:700 28px/1.15 var(--cond);letter-spacing:.06em;display:block}
.kachel .d{font:400 14px/1.35 Barlow,sans-serif;display:block;opacity:.9;margin-top:3px}
.kachel .gross{width:30px;height:30px;flex:none;fill:currentColor}
.kachel .pfeil{width:20px;height:20px;margin-left:auto;flex:none;fill:currentColor;opacity:.75}
.abzeichen{display:inline-block;margin-left:8px;padding:2px 7px;font:700 10px/1.4 Barlow,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;background:var(--k-bg-17130f);color:var(--k-text-e8c873);border:1px solid var(--k-line-b89452);vertical-align:middle}
#start .fuss{display:flex;align-items:center;gap:9px;margin:30px 0 6px;width:100%;max-width:300px;
  font-size:9px;letter-spacing:.12em;color:var(--k-text-e2c58d);text-shadow:0 1px 3px var(--k-shadow-161009)}
#start .fuss i{flex:1;height:1px;background:var(--k-bg-a4854c)}
#start .ohne{font-size:12px;color:var(--k-text-c9b58b);margin:4px 0 0;text-shadow:0 1px 3px var(--k-shadow-000)}
#start .sprachwahl{margin:18px 0 0;justify-content:center}
.platte-start{width:100%;background:var(--k-bg-17130fec);border:1px solid var(--k-line-b89452);padding:16px}
.platte-start h2{margin:0 0 8px;font:700 20px/1.25 var(--cond);color:var(--k-text-ead9b5)}
.platte-start p{margin:0 0 12px;line-height:1.55;font-size:14.5px}
.platte-start .reihe{gap:8px}
.orte{list-style:none;margin:0 0 12px;padding:0 4px 0 0;display:grid;gap:8px;max-height:min(50vh,430px);overflow:auto}
.orte .knopf{width:100%;justify-content:flex-start;min-height:54px;text-align:left}
.orte small{display:block;font:400 12.5px/1.3 Barlow,sans-serif;opacity:.85}

/* ---------- the colosseum: a door on the map, a dialog, and the runner ---------- */
#kolosseum .karte{max-width:560px}
/* arena: you (commander, nickname, deck) and the open lobbies, each with the commander card on the left */
.arena-ich{display:flex;gap:14px;align-items:flex-start;margin:0 0 14px}
.cmdbild{flex:none;overflow:hidden;border:1px solid var(--k-line-b89452);box-shadow:0 4px 14px var(--k-shadow-000a);display:block}
.cmdbild img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.arena-ich .cmdbild{width:96px;height:84px}
.arena-ich .wer{display:flex;flex-direction:column;gap:3px;min-width:0}
.arena-ich .wer b{font:700 18px/1.1 var(--cond);color:var(--k-text-ead9b5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arena-ich .wer span{color:var(--k-text-c4b189);font-size:14px}
.arena-ich .reihe{margin-top:8px;flex-wrap:wrap}
.arena-ich .wer .arena-spieler{font-size:12.5px;opacity:.8}
.arena-wahl{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;color:var(--k-text-c4b189)}
.arena-wahl select{min-height:40px;border-radius:12px;padding:0 10px;max-width:100%;min-width:0;flex:1}
.lobbys{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.lobbys li{display:flex;align-items:center;gap:12px;border:1px solid var(--k-line-6b5530);padding:8px 10px;background:var(--k-bg-0c0a07)}
.lobbys .cmdbild{width:52px;height:46px;box-shadow:none}
.lobbys .wer{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.lobbys .wer b{font:700 15px/1.1 var(--cond);color:var(--k-text-ead9b5)}
.lobbys .wer span{font-size:13px;color:var(--k-text-c4b189)}
#duell{position:fixed;inset:0;z-index:60;background:var(--k-bg-0d0b08);display:none}
#duell.an{display:block}
#duell iframe{border:0;width:100%;height:100%;display:block}
/* the duel chat layer: nothing of its own in the way, only the bubbles and, open, the field */
#dc{position:absolute;left:0;right:0;top:0;height:100%;z-index:3;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end}
#dc[hidden],#dc-form[hidden]{display:none}
#dc-liste{flex:none;max-height:44%;overflow:hidden;margin:0 0 36%;padding:0 12px;justify-content:flex-end}
#dc.offen #dc-liste{flex:1;max-height:none;margin:0;overflow-y:auto;pointer-events:auto;padding-top:calc(env(safe-area-inset-top,0px) + 80px);justify-content:flex-start}
#dc.offen #dc-liste>li:first-child{margin-top:auto}
#dc-liste li.fluechtig{animation:dc-weg 10s linear forwards}
@keyframes dc-weg{0%{opacity:0;transform:translateY(6px)}4%{opacity:1;transform:none}88%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#dc-liste li.fluechtig{animation:dc-weg-ruhig 10s linear forwards}}
@keyframes dc-weg-ruhig{0%,90%{opacity:1}100%{opacity:0}}
#dc-form{pointer-events:auto;display:flex;align-items:flex-end;gap:8px;padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 10px)}
#dc.tastatur #dc-form{padding-bottom:8px}
#dc-text{flex:1;min-width:0;align-self:center;resize:none;border:0;outline:0;background:none;color:#fff;font:500 17px/1.35 Barlow,sans-serif;padding:8px 6px;max-height:110px}
#dc-text::placeholder{color:#8696a0}
#dc-zu{width:46px;height:46px;flex:none;align-self:center;border:0;border-radius:50%;background:rgba(30,35,39,.92);color:#fff;display:grid;place-items:center;cursor:pointer}
#dc-zu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* the messenger chat: what lies behind it shows through a dark veil (Owner 04.10.2026, after his two pictures) */
#chat{position:fixed;left:0;right:0;top:0;height:100%;z-index:75;display:none;flex-direction:column;box-sizing:border-box;
  background:linear-gradient(rgba(8,10,12,.62),rgba(8,10,12,.5) 40%,rgba(8,10,12,.62));color:#e9edef;font-family:Barlow,system-ui,sans-serif}
#chat.an{display:flex}
.wa-kopf{flex:none;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 8px) 14px 8px 4px;background:rgba(17,22,26,.88);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wa-zurueck{width:44px;height:44px;flex:none;border:0;background:none;color:#fff;display:grid;place-items:center;cursor:pointer}
.wa-anruf{width:46px;height:46px;flex:none;border:0;border-radius:50%;background:none;color:#fff;display:grid;place-items:center;cursor:pointer}
.wa-anruf[hidden]{display:none}
.wa-anruf.drin{background:#25d366}
.wa-anruf svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wa-zurueck svg,#chat-emoji svg,.wa-senden svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wa-bild{width:48px;height:48px;flex:none;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.9);background:#6a5440;display:grid;place-items:center;
  color:#fff;font:700 20px/1 Barlow,sans-serif}
.wa-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(1.35);transform-origin:50% 25%}
.wa-wer{flex:1;min-width:0}
.wa-wer h2{margin:0;font:700 20px/1.2 Barlow,sans-serif;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0;text-transform:none}
.wa-wer small{display:flex;align-items:center;gap:7px;font:500 15px/1.2 Barlow,sans-serif;color:#d1d7db}
.wa-wer small::before{content:"";width:11px;height:11px;border-radius:50%;background:#25d366}
.wa-wer small:empty{display:none}
.wa-anlass{flex:none;align-self:center;max-width:86%;margin:10px 12px 0;padding:7px 12px;border-radius:10px;background:rgba(255,236,180,.92);color:#3b2f12;font:500 13px/1.35 Barlow,sans-serif;text-align:center}
.wa-anlass[hidden]{display:none}
.wa-verlauf{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px}
.wa-verlauf li{position:relative;max-width:80%;align-self:flex-start;display:flex;align-items:flex-end;gap:12px;padding:8px 10px 7px 14px;border-radius:14px;
  background:rgba(40,45,49,.94);color:#fff;font:500 17px/1.35 Barlow,sans-serif;overflow-wrap:anywhere;white-space:pre-wrap;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.wa-verlauf li.eigen{align-self:flex-end;background:rgba(34,112,62,.96)}
.wa-verlauf li.erst{margin-top:8px}
.wa-verlauf li.erst:not(.eigen){border-top-left-radius:3px}
.wa-verlauf li.erst.eigen{border-top-right-radius:3px}
.wa-verlauf li.erst:not(.eigen)::before,.wa-verlauf li.erst.eigen::before{content:"";position:absolute;top:0;width:10px;height:12px;background:inherit}
.wa-verlauf li.erst:not(.eigen)::before{left:-8px;clip-path:polygon(100% 0,0 0,100% 100%)}
.wa-verlauf li.erst.eigen::before{right:-8px;clip-path:polygon(0 0,100% 0,0 100%)}
.wa-verlauf li small{flex:none;display:flex;align-items:center;gap:4px;margin-bottom:-3px;font:500 12.5px/1 Barlow,sans-serif;color:rgba(255,255,255,.72);white-space:nowrap}
.wa-verlauf li small svg{width:18px;height:18px;fill:none;stroke:rgba(255,255,255,.72);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wa-verlauf li small svg.gelesen{stroke:#53bdeb}
.wa-verlauf li.tag,.wa-verlauf li.leer{align-self:center;max-width:none;margin:8px 0 4px;padding:6px 16px;border-radius:10px;background:rgba(40,45,49,.88);
  font:600 14px/1.2 Barlow,sans-serif;color:#e9edef;box-shadow:none}
.wa-fehler{flex:none;margin:0 14px 4px;color:#ffb4a8;font:600 13px/1.3 Barlow,sans-serif}
.wa-fehler:empty{display:none}
.wa-emojis{flex:none;display:flex;flex-wrap:wrap;gap:2px;padding:6px 12px 0}
.wa-emojis[hidden]{display:none}
.wa-emojis button{width:42px;height:42px;border:0;border-radius:10px;background:rgba(40,45,49,.85);font-size:24px;line-height:1;cursor:pointer}
.wa-leiste{flex:none;display:flex;align-items:flex-end;gap:8px;padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 10px)}
#chat.tastatur .wa-leiste{padding-bottom:8px}
.wa-leiste[hidden]{display:none}
.wa-feld{flex:1;min-width:0;display:flex;align-items:flex-end;gap:4px;min-height:54px;box-sizing:border-box;padding:4px 14px 4px 6px;border-radius:27px;
  background:rgba(30,35,39,.96);border:1px solid rgba(255,255,255,.14)}
#chat-emoji{width:44px;height:44px;flex:none;border:0;background:none;color:#aebac1;display:grid;place-items:center;cursor:pointer}
#chat-text{flex:1;min-width:0;align-self:center;resize:none;border:0;outline:0;background:none;color:#fff;font:500 17px/1.35 Barlow,sans-serif;padding:8px 2px;max-height:132px}
#chat-text::placeholder{color:#8696a0}
.wa-senden{width:54px;height:54px;flex:none;border:0;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px -4px rgba(0,0,0,.6)}
.wa-senden svg{fill:currentColor;stroke-width:1.4}
.wa-senden:disabled{opacity:.6}
.nur-leser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.reiter{display:flex;gap:8px;margin:0 0 14px}
.reiter .knopf{flex:1}
.kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.kopfzeile h3{margin:0;font:700 17px var(--cond);color:var(--k-text-ead9b5)}
.umschalt{display:flex;gap:6px}
.umschalt .knopf{min-height:38px;padding:0 10px;border-width:8px;border-image-width:8px;font-size:13px}
.tafel{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:14px;background:var(--k-bg-17130fcc)}
.tafel td{padding:7px 8px;border-bottom:1px solid var(--k-line-b8945233)}
.tafel td:first-child{width:38px;font:700 14px var(--cond)}
.tafel td:last-child{text-align:right;color:var(--k-text-b89452);font-weight:700}
.tafel tr.ich{background:var(--k-bg-b8945226)}
.tafel .leer{text-align:center;color:var(--k-text-c9b58b);font-style:italic}
.feld{display:block;width:100%;min-height:44px;padding:8px 12px;font:16px Barlow,sans-serif;color:var(--k-text-f0e3c6);
  background:var(--k-bg-17130f);border:1px solid var(--k-line-b89452);margin:4px 0 10px}
label.klein{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--k-text-c9b58b)}
.fehler{color:var(--k-text-e0a39c);font-size:13.5px;margin:0 0 10px}
.fehler.ok{color:var(--k-text-b9c9a4)}
.fehler:empty{display:none}
.datenschutz{font-size:12.5px;line-height:1.5;color:var(--k-text-c9b58b);margin:0 0 10px}
.linkknopf{font:inherit;color:var(--k-text-e8c873);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.linkknopf:focus-visible{outline:2px solid var(--k-line-b89452);outline-offset:2px}
/* Higher than the other .schleier dialogs (all z-index:50): the account gate
   can now open ON TOP of an already-open Kolosseum or Begegnung dialog (the
   second duel, entering the leaderboard), not only before either exists. */
/* #konto outranks #zustimmung on purpose: a session-expiry re-login
   (kontoAbgelaufen) can open while an older, still-unconfirmed consent
   dialog sits underneath it, and the fresher "sign in again" state has to
   win the stack, not get hidden behind a dialog whose own confirm button
   would fail silently on the now-dead token anyway. */
#zustimmung{z-index:55}
#konto{z-index:56}
#konto .karte{max-width:440px}
.konto-reiter{display:flex;gap:8px;margin:0 0 14px}
.konto-reiter .knopf{flex:1}
.konto-reiter[hidden]{display:none}
#konto.neu #konto-titel,#konto.neu #konto-titel + p{display:none}
.legal-row{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.5;color:var(--k-text-c9b58b);margin:2px 0 14px}
.legal-row input{margin-top:3px;flex:none;width:16px;height:16px}
.legal-row a{color:var(--k-text-e8c873)}
.konto-notice{font-size:13px;line-height:1.5;color:var(--k-text-b9c9a4);margin:0 0 10px}
/* Every button around it (register, Google, Zurück) is an inline-flex button
   that hugs the form's left edge rather than filling or centering in it
   (.knopf's own width is its content, never stretched); text-align:center
   here sat "oder" at the FORM's centre instead, well to the right of those
   buttons' own centre, which read as crooked (Kritiker-Befund Block A #3). */
.konto-oder{margin:2px 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--k-text-8e7c5d);text-align:left}
#konto-google-hinweis,#konto-google-hinweis-l{font-size:12.5px;text-align:left;margin:6px 0 0;min-height:1em}
/* A new Google account sent here from the sign-in tab (Owner 29.09.2026): only the box, the explanation and Google as
   the main button; the e-mail registration steps aside until the tab is left */
#konto-form-register .legal-row{padding:6px 8px;border-radius:8px;box-shadow:0 0 0 2px transparent}
#konto-form-register .legal-row.markiert{box-shadow:0 0 0 2px var(--o2);background:rgba(242,70,27,.08)}
#konto-form-register.google-neu > label.klein,#konto-form-register.google-neu > .feld,#konto-form-register.google-neu > .reihe,
#konto-form-register.google-neu > .konto-oder,#konto-form-register.google-neu > #konto-hinweis-r{display:none}
#konto-form-register.google-neu #konto-fehler-r{color:var(--tinte);font-weight:600}
#konto-google-anders{margin-top:8px}
#konto-google-anders[hidden]{display:none}
.konto-notice:empty{display:none}
.konto-notice[hidden]{display:none}
.ergebnis{display:flex;justify-content:space-around;margin:4px 0 14px;text-align:center}
.ergebnis b{display:block;font:700 26px var(--cond);color:var(--k-text-b89452)}
.ergebnis span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--k-text-c9b58b)}
#runner{position:fixed;inset:0;z-index:70;background:var(--k-bg-17130f);display:none}
#runner.an{display:block}
#runner-buehne,#runner-buehne iframe{width:100%;height:100%;border:0;display:block}
/* Always on top of the iframe/its own content, never dependent on either
   loading: a fixed corner button rather than part of #runner-buehne, which
   gets wiped on every open/close. */
#runner-schliessen{position:fixed;z-index:1;top:calc(10px + env(safe-area-inset-top));
  right:calc(10px + env(safe-area-inset-right));width:38px;height:38px;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--k-bg-17130fd6);border:1px solid var(--k-line-b89452);color:var(--k-text-ead9b5);cursor:pointer}
#runner-schliessen svg{width:16px;height:16px}
#runner-schliessen:hover{background:var(--k-bg-2b2519)}
#runner-fehler{position:fixed;inset:0;z-index:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;
  background:var(--k-bg-17130f);color:var(--k-text-ead9b5);font-size:15px;line-height:1.5}
#runner-fehler:not([hidden]){display:flex}

/* Full-screen map mode (Block B). z-index 60: above the ordinary .schleier
   dialogs (50-56), below the runner (70, which never opens at the same time
   as this does anyway, guarded in JS). */
#karte-modus{position:fixed;inset:0;z-index:60;background:var(--k-bg-1a1712);display:none}
#karte-modus.an{display:block}
#km-leinwand{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#km-leinwand:active{cursor:grabbing}
#km-schliessen{position:fixed;z-index:1;top:calc(10px + env(safe-area-inset-top));
  right:calc(10px + env(safe-area-inset-right));width:38px;height:38px;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--k-bg-17130fd6);border:1px solid var(--k-line-b89452);color:var(--k-text-ead9b5);cursor:pointer}
#km-schliessen svg{width:16px;height:16px}
#km-schliessen:hover{background:var(--k-bg-2b2519)}
#km-zoom{position:fixed;z-index:1;right:calc(10px + env(safe-area-inset-right));
  bottom:calc(74px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
#km-zoom button{width:38px;height:38px;padding:0;font:700 19px/1 var(--cond);
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--k-bg-17130fd6);border:1px solid var(--k-line-b89452);color:var(--k-text-ead9b5);cursor:pointer}
#km-zoom button:hover{background:var(--k-bg-2b2519)}
#km-figur{position:fixed;z-index:1;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));padding:8px 18px;font-size:14px}
#km-hinweis{position:fixed;z-index:1;left:50%;transform:translateX(-50%);
  top:calc(58px + env(safe-area-inset-top));max-width:80vw;padding:6px 14px;
  background:var(--k-bg-17130fd6);border:1px solid var(--k-line-705327);color:var(--k-text-ead9b5);
  font-size:12.5px;text-align:center}
#km-hinweis[hidden]{display:none}
#profil-loeschen{color:var(--k-text-d98a6a)}
#profil-loesch-frage{margin-top:14px;padding:12px;border:1px solid var(--k-line-9a5a3e);background:var(--k-bg-1c120c)}
#profil-loesch-frage[hidden]{display:none}
#profil-export{display:flex;align-items:center;min-height:44px;margin:6px 0 10px}
#profil-export[disabled]{opacity:.6;cursor:progress}
#profil-export-status:empty,#profil-export-fehler:empty{display:none}
#profil-export-status,#profil-export-fehler{margin:10px 0 0}
#profil-export-fehler{color:var(--k-text-d98a6a);border-left:3px solid var(--k-line-b8654a);padding-left:10px}
#profil-export-wege{display:flex;align-items:center;min-height:44px;font-size:13px}
#profil-export-wege[hidden],#profil-export-ausweg[hidden],#profil-export-teilen[hidden]{display:none}
#profil-export-ausweg{margin-top:12px;padding:12px;border:1px solid var(--k-line-705327);background:var(--k-bg-17130fd6)}
#profil-export-ausweg p{margin:0 0 10px;font-size:14px;line-height:1.4}
#profil-loesch-frage p{margin:0 0 10px;font-size:14px;line-height:1.4}
#profil-loesch-ja{border-color:var(--k-line-b8654a);color:var(--k-text-f0b49a)}
#tour .karte{position:relative;max-width:460px}
#tour-x{position:absolute;right:6px;top:6px;width:40px;height:40px;padding:0;border:0;background:none;color:var(--k-text-b89452);font-size:18px;cursor:pointer}
#tour-x:focus-visible{outline:2px solid var(--k-line-b89452);outline-offset:2px}
#tour-schritt{margin:0 0 4px;font-size:12px;letter-spacing:.12em;color:var(--k-text-c9b58b)}
#tour-text{font-size:15px;line-height:1.45}
#strudel{position:fixed;inset:0;z-index:80;display:none;place-items:center;overflow:hidden;background:var(--k-bg-0c0a07cc)}
#strudel.an{display:grid}
#strudel::before{content:"";position:absolute;left:50%;top:50%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;border-radius:50%;opacity:.85;
  background:repeating-conic-gradient(from 0deg,var(--k-bg-e1c27b) 0 8deg,var(--k-bg-0c0a07) 8deg 24deg);
  -webkit-mask:radial-gradient(circle,transparent 0 6%,#000 40%);mask:radial-gradient(circle,transparent 0 6%,#000 40%);
  animation:strudel 1.8s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes strudel{from{transform:rotate(0) scale(1.4)}to{transform:rotate(900deg) scale(.05)}}
#strudel b{position:relative;padding:0 20px;text-align:center;font:700 clamp(20px,5vw,34px)/1.2 var(--cond);color:var(--k-text-f3e2b5);text-shadow:0 2px 12px var(--k-shadow-000)}
@media (prefers-reduced-motion:reduce){#strudel::before{animation:none}}
#season.seite{background:linear-gradient(180deg,var(--k-bg-00000040),var(--k-bg-00000070) 32%,var(--k-bg-000000d0) 60%),url(/assets/hintergrund/mapraiders-tcg-hintergrund-menue-weltenschichten-quer.webp) center top/cover var(--k-bg-0d0b08)}
#season.seite .karte{max-width:1240px}
#season svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sz-held{display:flex;gap:24px;align-items:flex-start;justify-content:space-between;margin:6px 0 22px}
.sz-links{max-width:640px}
.sz-uhr{display:flex;align-items:center;gap:8px;margin:0;font:600 15px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--k-text-ecd494)}
.sz-uhr svg{width:20px;height:20px}
#season-titel{margin:8px 0 2px;font:700 clamp(28px,4.2vw,50px)/1.08 var(--cond);color:var(--k-text-f6e7c1);text-shadow:0 2px 18px var(--k-shadow-000)}
.sz-monat{margin:0 0 10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-text-c9b58b)}
.sz-lore{margin:0 0 16px;font-size:15.5px;line-height:1.55;color:var(--k-text-eadcbd);text-shadow:0 1px 8px var(--k-shadow-000)}
.sz-mehr{display:inline-block;padding:10px 20px;border:1px solid var(--k-line-d2a44f);color:var(--k-text-f1dfae);text-decoration:none;font:600 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;background:var(--k-bg-0b0906b0)}
.sz-mehr:hover{background:var(--k-bg-2a2217)}
.sz-premium{flex:none;width:300px;padding:16px;border:1px solid var(--k-line-d2a44f);background:linear-gradient(180deg,var(--k-bg-1a140bf0),var(--k-bg-0d0a06f0));box-shadow:0 0 0 1px var(--k-shadow-000),0 0 30px -8px var(--k-shadow-e8c36a88)}
.sz-premium-kopf{display:flex;gap:12px;align-items:flex-start}
.sz-premium-kopf svg{width:40px;height:40px;flex:none;color:var(--k-text-ecd494)}
.sz-premium-kopf b{display:block;font:700 17px/1.2 var(--cond);color:var(--k-text-f3da92)}
.sz-premium-kopf small{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--k-text-e0cfaa)}
.sz-premium-knopf{position:relative;display:block;width:100%;margin-top:14px;padding:12px 10px 10px;border:1px solid var(--k-line-f6e2a6);cursor:not-allowed;
  background:linear-gradient(180deg,var(--k-bg-f3da92),var(--k-bg-d2a44f) 55%,var(--k-bg-a97b30));color:var(--k-text-1a130a);font:700 15px/1.2 var(--cond);letter-spacing:.06em;opacity:.92}
.sz-premium-knopf em{display:block;margin-top:3px;font:700 11px/1 system-ui,sans-serif;font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--k-text-3b2b12)}
.sz-optik{display:block;margin-top:8px;font-size:11.5px;color:var(--k-text-a8977a);text-align:center}
.sz-reiter{display:flex;width:max-content;max-width:100%;border:1px solid var(--k-line-6b5630);background:var(--k-bg-0b0906c0);margin-bottom:14px;overflow-x:auto}
.sz-reiter button{padding:12px 26px;border:0;border-right:1px solid var(--k-line-3d321d);background:none;color:var(--k-text-c9b58b);cursor:pointer;font:600 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.sz-reiter button:last-child{border-right:0}
.sz-reiter button[aria-selected=true]{color:var(--k-text-f3da92);background:linear-gradient(180deg,var(--k-bg-2a2217),var(--k-bg-1a140b));box-shadow:inset 0 -2px 0 var(--k-shadow-d2a44f)}
.mi-kopf{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin:4px 0 16px}
.mi-titel{margin:0;font:700 clamp(26px,3.6vw,44px)/1.1 var(--cond);color:var(--k-text-f6e7c1);text-shadow:0 2px 18px var(--k-shadow-000)}
.mi-motto{margin:6px 0 10px;font:600 13px/1 var(--cond);letter-spacing:.3em;text-transform:uppercase;color:var(--k-text-e0cfaa)}
.mi-text{margin:0;max-width:560px;font-size:15px;line-height:1.5;color:var(--k-text-eadcbd)}
.mi-uhr{flex:none;display:flex;align-items:center;gap:12px;margin:0;padding:12px 18px;border:1px solid var(--k-line-d2a44f);background:var(--k-bg-0b0906d8)}
.mi-uhr svg{width:28px;height:28px;color:var(--k-text-ecd494)}
.mi-uhr b{display:block;font:700 18px/1.2 var(--cond);color:var(--k-text-f3da92);text-transform:uppercase;letter-spacing:.06em}
.mi-uhr small{display:block;font-size:12.5px;color:var(--k-text-e0cfaa);margin-top:2px}
.mi-wochen{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto}
.mi-wochen button{flex:1 0 auto;min-width:120px;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid var(--k-line-3d321d);background:var(--k-bg-0b0906d0);
  color:var(--k-text-8c7d5f);font:600 13px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;cursor:default}
.mi-wochen button svg{width:14px;height:14px}
.mi-wochen button[aria-current=true]{border-color:var(--k-line-d2a44f);color:var(--k-text-f3da92);background:linear-gradient(180deg,var(--k-bg-2a2217),var(--k-bg-15110b));box-shadow:0 0 18px -6px var(--k-shadow-e8c36acc)}
.mi-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.mi-karte{display:flex;flex-direction:column;border:1px solid var(--k-line-6b5630);background:linear-gradient(180deg,var(--k-bg-15110bf2),var(--k-bg-0b0906f2));text-align:center}
.mi-karte > img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;border-bottom:1px solid var(--k-line-6b5630)}
.mi-karte .mi-ic{width:34px;height:34px;margin:-17px auto 4px;position:relative;padding:6px;border-radius:50%;background:var(--k-bg-0b0906);border:1px solid var(--k-line-d2a44f);color:var(--k-text-f1dfae)}
.mi-karte h5{margin:0 0 4px;font:700 16px/1.2 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--k-text-f6e7c1)}
.mi-karte p{margin:0 10px 10px;min-height:2.6em;font-size:13px;line-height:1.3;color:var(--k-text-e0cfaa)}
.mi-balken{position:relative;margin:0 12px 12px;height:14px;border:1px solid var(--k-line-6b5630);background:var(--k-bg-0c0a07)}
.mi-balken i{display:block;height:100%;background:linear-gradient(90deg,var(--k-bg-b98f47),var(--k-bg-ecd494))}
.mi-balken span{position:absolute;inset:0;font-size:10.5px;line-height:13px;color:var(--k-text-fff);text-shadow:0 0 3px var(--k-shadow-000)}
.mi-lohn{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 12px 12px;padding:8px 6px;border-top:1px solid var(--k-line-3d321d);border-bottom:1px solid var(--k-line-3d321d);
  font:700 14px/1.2 var(--cond);color:var(--k-text-f3da92)}
.mi-lohn svg{width:26px;height:26px}
.mi-knopf{margin:auto 12px 12px;padding:10px 6px;border:1px solid var(--k-line-6b5630);background:var(--k-bg-1a140b);color:var(--k-text-e0cfaa);font:600 12.5px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase}
.mi-knopf.bereit{cursor:pointer;color:var(--k-text-1a130a);border-color:var(--k-line-f6e2a6);background:linear-gradient(180deg,var(--k-bg-f3da92),var(--k-bg-d2a44f) 55%,var(--k-bg-a97b30));animation:held-glanz 2.8s ease-in-out infinite}
.mi-knopf.fertig{color:var(--k-text-9fe39a);border-color:var(--k-line-3a5f3a)}
.mi-bonus{display:flex;gap:16px;margin-top:18px;padding:18px;border:1px solid var(--k-line-6b5630);background:var(--k-bg-0b0906d8)}
.mi-bonus-links{flex:1;min-width:0}
.mi-bonus h4{margin:0;font:700 clamp(18px,2.2vw,26px)/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--k-text-f3da92)}
.mi-bonus-links > p{margin:4px 0 14px;font-size:14px;color:var(--k-text-e0cfaa)}
.mi-stufen{display:grid;grid-template-columns:repeat(4,minmax(84px,1fr));gap:8px;overflow-x:auto;
  background:linear-gradient(var(--k-bg-0000) 17px,var(--k-bg-d2a44f66) 17px,var(--k-bg-d2a44f66) 19px,var(--k-bg-0000) 19px)}
.mi-stufe{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.mi-stufe > b{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--k-line-8c7d5f);background:var(--k-bg-0b0906);font:700 15px/1 var(--cond);color:var(--k-text-c9b58b)}
.mi-stufe > div{position:relative;width:100%;padding:10px 4px;border:1px solid var(--k-line-3d321d);background:var(--k-bg-120e09);font:700 13px/1.25 var(--cond);color:var(--k-text-e0cfaa)}
.mi-stufe > div svg{display:block;width:30px;height:30px;margin:0 auto 6px;color:var(--k-text-ecd494)}
.mi-stufe.ja > b{border-color:var(--k-line-ecd494);color:var(--k-text-f3da92);background:var(--k-bg-2a2217)}
.mi-stufe.ja > div{border-color:var(--k-line-bfa46a)}
.mi-stufe.ja > div::after{content:'✓';position:absolute;top:4px;right:6px;color:var(--k-text-ecd494);font-size:15px}
.mi-stufe.ist > div{border:2px solid var(--k-line-f3da92);box-shadow:0 0 18px -4px var(--k-shadow-e8c36acc)}
/* daily tasks and weekly missions from the server (Owner 29.09.2026) */
.mi-abschnitt{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:18px 0 10px}
.mi-abschnitt h4{margin:0;font:700 clamp(18px,2.2vw,26px)/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--k-text-f3da92)}
.mi-abschnitt span{font-size:13px;color:var(--k-text-e0cfaa)}
.mi-karte{position:relative;container-type:inline-size}
.mi-typ{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;font:700 11px/1.2 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#3f4a57}
.mi-typ,.mi-tausch{max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}
.mi-typ.gps{background:#1f7a4d}
.mi-typ.rpg{background:#8a4b12}
.mi-tausch{position:absolute;top:8px;right:8px;padding:4px 10px;border:0;border-radius:999px;background:rgba(255,255,255,.9);color:#1a130a;font:700 11px/1.2 var(--cond);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25)}
/* the swap button sits in the picture's lower right corner (16:10, so 62.5 % of the card's width down) above the round icon, the type badge in the upper left */
.mi-tausch{top:calc(62.5cqw - 42px)}
.mi-filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.mi-filter button{padding:7px 14px;border:1px solid var(--k-line-6b5630);border-radius:999px;background:none;color:var(--k-text-e0cfaa);font:600 12.5px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.mi-filter button[aria-pressed=true]{color:#fff;border-color:transparent;background:var(--orange,#f2461b)}
.mi-rumpf{margin:0 0 10px;font-size:13.5px;color:var(--k-text-e0cfaa)}
.mi-tagbonus{margin:10px 0 0;font:600 14px/1.4 var(--cond);color:var(--k-text-e0cfaa)}
.mi-tagbonus.ja{color:var(--k-text-9fe39a)}
.mi-hinweis{margin:10px 0;padding:18px;border:1px solid var(--k-line-6b5630);background:var(--k-bg-0b0906d8)}
.mi-hinweis p{margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--k-text-eadcbd)}
.mi-hinweis[hidden],#mi-inhalt[hidden]{display:none}
/* the season page scrolls under the fixed logo, profile pill and X (Owner 29.09.2026: the pill lay over the premium card):
   once it scrolls, a band behind the header covers what passes under it. Outside #season, whose backdrop-filter
   would make it the containing block of a fixed child; the header (z 52, later in the page) stays above it. */
#kopf-schutz{position:fixed;left:0;right:0;top:0;height:calc(84px + env(safe-area-inset-top));z-index:52;pointer-events:none;opacity:0;transition:opacity .2s;
  background:linear-gradient(180deg,rgba(236,232,228,.97) calc(100% - 16px),rgba(236,232,228,0))}
#season.an.gescrollt + #kopf-schutz{opacity:1}
@media (max-width:760px){ #kopf-schutz{height:calc(70px + env(safe-area-inset-top))} }
.mi-champion{flex:none;width:230px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;border:1px solid var(--k-line-d2a44f);text-align:center;background:linear-gradient(180deg,var(--k-bg-1a140bf0),var(--k-bg-0d0a06f0))}
.mi-champion p{margin:0;font-size:13.5px;color:var(--k-text-f1dfae)}
.mi-champion img{width:96px;height:auto;filter:drop-shadow(0 6px 14px var(--k-shadow-000))}
.mi-champion b{font:700 17px/1.2 var(--cond);color:var(--k-text-f3da92);text-transform:uppercase;letter-spacing:.06em}
.mi-champion small{font-size:13px;color:var(--k-text-e0cfaa)}
.mi-champion em{font:700 11px/1 system-ui,sans-serif;font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--k-text-d2a44f)}
@media (max-width:800px){
  .mi-kopf{flex-direction:column}
  .mi-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mi-bonus{flex-direction:column}
  .mi-champion{width:auto}
}
.sz-bald{padding:40px 16px;text-align:center;color:var(--k-text-c9b58b);border:1px solid var(--k-line-3d321d);background:var(--k-bg-0b0906c0)}
.sz-bahn{position:relative;display:flex;align-items:stretch;gap:10px}
.sz-banner{flex:none;width:86px;display:grid;grid-template-rows:46px 168px 168px;gap:10px}
.sz-banner b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  font:700 12.5px/1.2 var(--cond);letter-spacing:.1em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%)}
.sz-banner b svg{width:28px;height:28px}
.sz-banner b.gratis{background:linear-gradient(180deg,var(--k-bg-3a3a3a),var(--k-bg-1c1c1c));color:var(--k-text-e6e1d6);border:1px solid var(--k-line-777)}
.sz-banner b.premium{background:linear-gradient(180deg,var(--k-bg-5a4318),var(--k-bg-2a1e0a));color:var(--k-text-f3da92);border:1px solid var(--k-line-d2a44f)}
.sz-leiste{flex:1;min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);grid-template-rows:46px 168px 168px;gap:10px 10px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scroll-behavior:smooth;
  background:linear-gradient(var(--k-bg-0000) 22px,var(--k-bg-d2a44f66) 22px,var(--k-bg-d2a44f66) 24px,var(--k-bg-0000) 24px)}
.sz-leiste > *{scroll-snap-align:start}
.sz-knoten{align-self:center;justify-self:center;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--k-line-bfa46a);background:var(--k-bg-0b0906);font:700 15px/1 var(--cond);color:var(--k-text-e9dcc0)}
.sz-knoten.ja{background:var(--k-bg-2a2217);border-color:var(--k-line-ecd494);color:var(--k-text-f3da92)}
.sz-knoten.ist{width:46px;height:46px;border:2px solid var(--k-line-f3da92);color:var(--k-text-fff);box-shadow:0 0 18px var(--k-shadow-e8c36acc)}
.sz-lohn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px 10px;text-align:center;
  border:1px solid var(--k-line-4a3c22);background:linear-gradient(180deg,var(--k-bg-15110bec),var(--k-bg-0b0906ec));font-size:13px;line-height:1.3;color:var(--k-text-eadcbd)}
.sz-lohn img{height:70px;width:auto;filter:drop-shadow(0 4px 10px var(--k-shadow-000))}
.sz-lohn > svg{width:54px;height:54px;color:var(--k-text-ecd494)}
.sz-lohn small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--k-text-9c8c6c)}
.sz-lohn.ja{border-color:var(--k-line-bfa46a)}
.sz-lohn.ja small{color:var(--k-text-9fe39a)}
.sz-lohn.ja.offen small{color:var(--k-text-9c8c6c)}
.sz-lohn.ist{border:2px solid var(--k-line-f3da92);box-shadow:0 0 26px -4px var(--k-shadow-e8c36acc);background:linear-gradient(180deg,var(--k-bg-2a2217f0),var(--k-bg-120e08f0))}
.sz-lohn.prem{background:linear-gradient(180deg,var(--k-bg-261b0bec),var(--k-bg-110c05ec));border-color:var(--k-line-6b5630)}
.sz-lohn.prem > svg,.sz-lohn.prem img{opacity:.8}
.sz-lohn .schloss{position:absolute;top:8px;right:8px;width:16px;height:16px;color:var(--k-text-d2a44f);opacity:1}
.sz-pfeil{position:absolute;top:4px;z-index:2;width:34px;height:38px;border:0;background:none;color:var(--k-text-ecd494);font-size:24px;cursor:pointer}
.sz-pfeil.links{left:92px}
.sz-pfeil.rechts{right:-4px}
.sz-fuss{display:flex;align-items:center;gap:18px;margin:20px auto 6px;max-width:900px;padding:14px 20px;border:1px solid var(--k-line-4a3c22);background:var(--k-bg-0b0906d8)}
.sz-stufe-jetzt{font:700 15px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--k-text-c9b58b);white-space:nowrap}
.sz-stufe-jetzt b{font-size:24px;color:var(--k-text-f3da92);margin-left:6px}
#season-balken{flex:1;height:10px;border:1px solid var(--k-line-b89452);background:var(--k-bg-0c0a07)}
#season-balken i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--k-bg-b98f47),var(--k-bg-ecd494))}
#season-stand{font-size:14px;color:var(--k-text-eadcbd);white-space:nowrap}
.sz-wie{text-align:center;font-size:13px;color:var(--k-text-a8977a);margin:4px 0 0}
@media (max-width:800px){
  .sz-held{flex-direction:column}
  .sz-premium{width:auto;align-self:stretch}
  .sz-banner{width:54px;grid-template-rows:46px 150px 150px}
  .sz-banner b{font-size:10px;letter-spacing:.04em}
  .sz-banner b svg{width:20px;height:20px}
  .sz-leiste{grid-auto-columns:128px;grid-template-rows:46px 150px 150px}
  .sz-lohn{gap:6px;padding:10px 8px}
  .sz-lohn img{height:58px}
  .sz-pfeil{display:none}
  .sz-fuss{flex-wrap:wrap;gap:8px 12px;padding:12px}
  #season-balken{flex:1 0 100%;order:3}
}
#tempo .modus.gesperrt{opacity:.55}
#tempo .modus.gesperrt small{display:block;font-size:8px;font-weight:600}
#km-suche{position:fixed;z-index:1;left:calc(10px + env(safe-area-inset-left));top:calc(10px + env(safe-area-inset-top));
  max-width:calc(100vw - 80px);display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:6px 8px;
  background:var(--k-bg-17130fd6);border:1px solid var(--k-line-705327);color:var(--k-text-ead9b5);font:700 12px/1 Barlow,sans-serif}
#km-suche button{font:700 11.5px/1 Barlow,sans-serif;padding:6px 8px;background:var(--k-bg-0c0a07);color:var(--k-text-ead9b5);border:1px solid var(--k-line-705327);cursor:pointer}
#km-suche button[aria-pressed=true]{background:var(--k-bg-b89452);color:var(--k-text-17130f)}
#km-suche small{flex-basis:100%;font-weight:600;color:var(--k-text-e8c873)}
#km-suche small[hidden]{display:none}
#route{position:absolute;left:50%;transform:translateX(-50%);top:calc(12px + env(safe-area-inset-top));z-index:5;
  display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;background:var(--k-bg-17130fe0);border:1px solid var(--k-line-b89452);
  color:var(--k-text-ead9b5);font:700 13px/1 Barlow,sans-serif;white-space:nowrap}
#route[hidden]{display:none}
#route .route-weit::before{content:" · "}
#route-pfeil{display:inline-block;color:var(--k-text-e8c873);font-size:18px;transition:transform .15s linear}
#route-aus{background:none;border:0;color:var(--k-text-ead9b5);font:700 18px/1 sans-serif;cursor:pointer;padding:0 4px}
.doppelt{border:1px dashed var(--k-line-b89452);padding:10px 12px;margin:0 0 12px;font-size:14px;line-height:1.5;text-align:left}
.doppelt[hidden]{display:none}
.doppelt b{color:var(--k-text-e8c873);font-family:var(--cond)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important}}

/* ============ GLASS (Owner 27./28.09.2026): the look of the restyle preview, _ablage/2026-09-27/restyle ============
   The colours above are variables now: light glass values here, the old ones inside the map layers, which sit on a
   dark map. What follows gives the pieces their shape. */
:root{--k-bg-211e18:rgba(255,255,255,0.65);--k-text-f0e3c6:#141213;--k-bg-17130fe0:rgba(255,255,255,0.6);--k-line-b89452:rgba(255,255,255,0.95);--k-shadow-rgba0005:rgba(40,22,12,0.21);--k-shadow-rgba00058:rgba(40,22,12,0.22);--k-text-17130f:#ffffff;--k-line-705327:rgba(20,18,19,0.16);--k-bg-2b2519:rgba(255,255,255,0.65);--k-bg-1b1712:rgba(255,255,255,0.65);--k-text-ead9b5:#141213;--k-text-c9b58b:#3a3536;--k-text-c4b189:#3a3536;--k-bg-2a241b:rgba(255,255,255,0.65);--k-line-4a3d29:rgba(20,18,19,0.16);--k-bg-b89452:#f2461b;--k-shadow-b89452:rgba(242,70,27,0.45);--k-bg-17130fd6:rgba(255,255,255,0.58);--k-line-b8945266:rgba(255,255,255,0.38);--k-text-e8c873:#e0400f;--k-line-0008:rgba(20,18,19,0.09);--k-line-0009:rgba(20,18,19,0.1);--k-line-ead9b5:#f2461b;--k-bg-0c0a07:rgba(255,255,255,0.65);--k-bg-0d0b08:rgba(255,255,255,0.65);--k-bg-0b0906:rgba(255,255,255,0.65);--k-shadow-000:rgba(40,22,12,0.3);--k-text-e9dcc0:#141213;--k-text-f3da92:#141213;--k-line-d2a44f:rgba(255,255,255,0.95);--k-shadow-e8c36a88:rgba(242,70,27,0.29);--k-text-d2a44f:#e0400f;--k-bg-00000030:rgba(24,18,16,0.09);--k-bg-00000080:rgba(24,18,16,0.25);--k-bg-000000d8:rgba(24,18,16,0.42);--k-line-3d321d:rgba(20,18,19,0.16);--k-bg-2a2217:rgba(255,255,255,0.65);--k-bg-15110b:rgba(255,255,255,0.65);--k-shadow-e8c36acc:rgba(242,70,27,0.38);--k-text-bfa46a:#6b6365;--k-text-f6e7c1:#141213;--k-text-e0cfaa:#141213;--k-bg-0b0906d8:rgba(255,255,255,0.58);--k-line-4a3c22:rgba(20,18,19,0.16);--k-line-f3da92:#f2461b;--k-bg-0b0906c0:rgba(255,255,255,0.54);--k-text-ecd494:#141213;--k-line-8c6f3a:rgba(20,18,19,0.16);--k-bg-b98f47:#f2461b;--k-bg-ecd494:#ff8452;--k-text-eadcbd:#141213;--k-text-a8977a:#6b6365;--k-bg-0b0906e0:rgba(255,255,255,0.6);--k-bg-0f0c08:rgba(255,255,255,0.65);--k-text-efe0bb:#141213;--k-text-bfa77a:#6b6365;--k-text-8fd49a:#1e7a3c;--k-line-2c2416:rgba(20,18,19,0.16);--k-line-6b5630:rgba(20,18,19,0.16);--k-shadow-d2a44f:rgba(242,70,27,0.45);--k-bg-070605:rgba(255,255,255,0.65);--k-bg-0b0906c8:rgba(255,255,255,0.55);--k-text-f1dfae:#141213;--k-line-2a2214:rgba(20,18,19,0.16);--k-bg-120e09:rgba(255,255,255,0.65);--k-bg-000000c8:rgba(24,18,16,0.39);--k-bg-00000070:rgba(24,18,16,0.22);--k-bg-000000a0:rgba(24,18,16,0.31);--k-bg-00000060:rgba(24,18,16,0.19);--k-bg-00000020:rgba(24,18,16,0.06);--k-line-b08a47:rgba(255,255,255,0.95);--k-shadow-0b0906:rgba(40,22,12,0.3);--k-shadow-6b5530:rgba(242,70,27,0.45);--k-text-f3e7c9:#141213;--k-shadow-c9a55a:rgba(242,70,27,0.45);--k-shadow-c9a55a99:rgba(242,70,27,0.31);--k-text-d8c69b:#3a3536;--k-bg-ffffff26:rgba(255,255,255,0.11);--k-text-e1c27b:#e0400f;--k-text-ece1c6:#141213;--k-line-6b553080:rgba(20,18,19,0.09);--k-bg-0b090600:rgba(255,255,255,0);--k-text-f6ebcd:#141213;--k-text-dccb9f:#141213;--k-text-1a130a:#ffffff;--k-bg-f3da92:#ff8452;--k-bg-d2a44f:#f2461b;--k-bg-a97b30:#cf2d0b;--k-line-f6e2a6:#f2461b;--k-shadow-0b090638:rgba(40,22,12,0.16);--k-text-3b2b12:#ffffff;--k-shadow-e8c36aee:rgba(242,70,27,0.43);--k-bg-0b0906cc:rgba(255,255,255,0.56);--k-line-6b5530:rgba(20,18,19,0.16);--k-bg-e1c27b:#f2461b;--k-line-e1c27b:rgba(255,255,255,0.95);--k-text-ece1c6b8:#141213;--k-bg-17130fe6:rgba(255,255,255,0.61);--k-bg-120f0b:rgba(255,255,255,0.65);--k-bg-1d1810:rgba(255,255,255,0.65);--k-line-8a7040:rgba(20,18,19,0.16);--k-text-120f0b:#ffffff;--k-line-e8c873:rgba(255,255,255,0.95);--k-bg-000a:rgba(24,18,16,0.33);--k-line-3a2f1b:rgba(20,18,19,0.16);--k-line-0b0906:rgba(20,18,19,0.16);--k-shadow-4a3c22:rgba(40,22,12,0.3);--k-shadow-f6ebcd:rgba(242,70,27,0.45);--k-bg-e0463c:#e0463c;--k-line-2e2616:rgba(20,18,19,0.16);--k-bg-b8945226:rgba(242,70,27,0.15);--k-bg-000:rgba(24,18,16,0.5);--k-line-f6ebcd:#f2461b;--k-text-9fe39a:#1e7a3c;--k-text-f08a78:#c3321b;--k-bg-0b0907:rgba(255,255,255,0.65);--k-bg-efe3c6:#ff8452;--k-text-2b2115:#ffffff;--k-text-3b2f1f:#ffffff;--k-shadow-000a:rgba(40,22,12,0.24);--k-bg-rgba21425025595:rgba(214,250,255,.95);--k-bg-rgba12723225545:rgba(127,232,255,.45);--k-bg-rgba1020249:rgba(10,20,24,.9);--k-text-8e7c5d:#6b6365;--k-text-a8956f:#6b6365;--k-text-b89452:#6b6365;--k-text-bda77f:#6b6365;--k-shadow-17130f:rgba(40,22,12,0.3);--k-bg-rgba24221514585:rgba(242,70,27,0.85);--k-bg-rgba24221514516:rgba(242,70,27,0.16);--k-bg-rgba2422151455:rgba(242,70,27,0.5);--k-bg-rgba25525525572:rgba(255,255,255,0.52);--k-bg-17130f99:rgba(255,255,255,0.47);--k-bg-17130fcc:rgba(255,255,255,0.56);--k-bg-d9a441:#f2461b;--k-bg-5fb4c9:#5fb4c9;--k-bg-56a867:#56a867;--k-bg-e8c86a:#f2461b;--k-bg-d8432c:#d8432c;--k-bg-3f6fd1:#3f6fd1;--k-line-9c352d:#9c352d;--k-text-e0705f:#c3321b;--k-line-3dbb78:#3dbb78;--k-text-3dbb78:#1e7a3c;--k-text-a8966f:#6b6365;--k-bg-17130f:rgba(255,255,255,0.65);--k-bg-100e0b:rgba(255,255,255,0.65);--k-bg-rgba16141172:rgba(255,255,255,0.52);--k-bg-rgba16141125:rgba(255,255,255,0.31);--k-bg-rgba1614111:rgba(255,255,255,0.25);--k-text-ead7af:#141213;--k-shadow-100d09:rgba(40,22,12,0.3);--k-text-d6b67e:#e0400f;--k-text-e2c58d:#e0400f;--k-shadow-161009:rgba(40,22,12,0.3);--k-bg-a4854c:#cf2d0b;--k-bg-17130fec:rgba(255,255,255,0.62);--k-line-b8945233:rgba(255,255,255,0.19);--k-text-e0a39c:#c3321b;--k-text-b9c9a4:#1e7a3c;--k-bg-1a1712:rgba(255,255,255,0.65);--k-text-d98a6a:#c3321b;--k-line-9a5a3e:#9a5a3e;--k-bg-1c120c:rgba(255,255,255,0.65);--k-line-b8654a:#b8654a;--k-text-f0b49a:#c3321b;--k-bg-0c0a07cc:rgba(255,255,255,0.56);--k-text-f3e2b5:#141213;--k-bg-00000040:rgba(24,18,16,0.13);--k-bg-000000d0:rgba(24,18,16,0.41);--k-bg-0b0906b0:rgba(255,255,255,0.51);--k-bg-1a140bf0:rgba(255,255,255,0.62);--k-bg-0d0a06f0:rgba(255,255,255,0.62);--k-bg-1a140b:rgba(255,255,255,0.65);--k-bg-0b0906d0:rgba(255,255,255,0.57);--k-text-8c7d5f:#6b6365;--k-bg-15110bf2:rgba(255,255,255,0.63);--k-bg-0b0906f2:rgba(255,255,255,0.63);--k-text-fff:#141213;--k-line-3a5f3a:#3a5f3a;--k-bg-0000:rgba(24,18,16,0);--k-bg-d2a44f66:rgba(242,70,27,0.4);--k-line-8c7d5f:rgba(255,255,255,0.9);--k-line-ecd494:#f2461b;--k-line-bfa46a:rgba(255,255,255,0.95);--k-bg-3a3a3a:rgba(255,255,255,0.5);--k-bg-1c1c1c:rgba(255,255,255,0.65);--k-text-e6e1d6:#141213;--k-line-777:rgba(255,255,255,0.9);--k-bg-5a4318:rgba(255,255,255,0.5);--k-bg-2a1e0a:rgba(255,255,255,0.65);--k-bg-15110bec:rgba(255,255,255,0.62);--k-bg-0b0906ec:rgba(255,255,255,0.62);--k-text-9c8c6c:#6b6365;--k-bg-2a2217f0:rgba(255,255,255,0.62);--k-bg-120e08f0:rgba(255,255,255,0.62);--k-bg-261b0bec:rgba(255,255,255,0.62);--k-bg-110c05ec:rgba(255,255,255,0.62)}
#spiel,#karte-modus,#runner,#duell,#strudel,#start{--k-bg-211e18:#211e18;--k-text-f0e3c6:#f0e3c6;--k-bg-17130fe0:#17130fe0;--k-line-b89452:#b89452;--k-shadow-rgba0005:rgba(0,0,0,.5);--k-shadow-rgba00058:rgba(0,0,0,.58);--k-text-17130f:#17130f;--k-line-705327:#705327;--k-bg-2b2519:#2b2519;--k-bg-1b1712:#1b1712;--k-text-ead9b5:#ead9b5;--k-text-c9b58b:#c9b58b;--k-text-c4b189:#c4b189;--k-bg-2a241b:#2a241b;--k-line-4a3d29:#4a3d29;--k-bg-b89452:#b89452;--k-shadow-b89452:#b89452;--k-bg-17130fd6:#17130fd6;--k-line-b8945266:#b8945266;--k-text-e8c873:#e8c873;--k-line-0008:#0008;--k-line-0009:#0009;--k-line-ead9b5:#ead9b5;--k-bg-0c0a07:#0c0a07;--k-bg-0d0b08:#0d0b08;--k-bg-0b0906:#0b0906;--k-shadow-000:#000;--k-text-e9dcc0:#e9dcc0;--k-text-f3da92:#f3da92;--k-line-d2a44f:#d2a44f;--k-shadow-e8c36a88:#e8c36a88;--k-text-d2a44f:#d2a44f;--k-bg-00000030:#00000030;--k-bg-00000080:#00000080;--k-bg-000000d8:#000000d8;--k-line-3d321d:#3d321d;--k-bg-2a2217:#2a2217;--k-bg-15110b:#15110b;--k-shadow-e8c36acc:#e8c36acc;--k-text-bfa46a:#bfa46a;--k-text-f6e7c1:#f6e7c1;--k-text-e0cfaa:#e0cfaa;--k-bg-0b0906d8:#0b0906d8;--k-line-4a3c22:#4a3c22;--k-line-f3da92:#f3da92;--k-bg-0b0906c0:#0b0906c0;--k-text-ecd494:#ecd494;--k-line-8c6f3a:#8c6f3a;--k-bg-b98f47:#b98f47;--k-bg-ecd494:#ecd494;--k-text-eadcbd:#eadcbd;--k-text-a8977a:#a8977a;--k-bg-0b0906e0:#0b0906e0;--k-bg-0f0c08:#0f0c08;--k-text-efe0bb:#efe0bb;--k-text-bfa77a:#bfa77a;--k-text-8fd49a:#8fd49a;--k-line-2c2416:#2c2416;--k-line-6b5630:#6b5630;--k-shadow-d2a44f:#d2a44f;--k-bg-070605:#070605;--k-bg-0b0906c8:#0b0906c8;--k-text-f1dfae:#f1dfae;--k-line-2a2214:#2a2214;--k-bg-120e09:#120e09;--k-bg-000000c8:#000000c8;--k-bg-00000070:#00000070;--k-bg-000000a0:#000000a0;--k-bg-00000060:#00000060;--k-bg-00000020:#00000020;--k-line-b08a47:#b08a47;--k-shadow-0b0906:#0b0906;--k-shadow-6b5530:#6b5530;--k-text-f3e7c9:#f3e7c9;--k-shadow-c9a55a:#c9a55a;--k-shadow-c9a55a99:#c9a55a99;--k-text-d8c69b:#d8c69b;--k-bg-ffffff26:#ffffff26;--k-text-e1c27b:#e1c27b;--k-text-ece1c6:#ece1c6;--k-line-6b553080:#6b553080;--k-bg-0b090600:#0b090600;--k-text-f6ebcd:#f6ebcd;--k-text-dccb9f:#dccb9f;--k-text-1a130a:#1a130a;--k-bg-f3da92:#f3da92;--k-bg-d2a44f:#d2a44f;--k-bg-a97b30:#a97b30;--k-line-f6e2a6:#f6e2a6;--k-shadow-0b090638:#0b090638;--k-text-3b2b12:#3b2b12;--k-shadow-e8c36aee:#e8c36aee;--k-bg-0b0906cc:#0b0906cc;--k-line-6b5530:#6b5530;--k-bg-e1c27b:#e1c27b;--k-line-e1c27b:#e1c27b;--k-text-ece1c6b8:#ece1c6b8;--k-bg-17130fe6:#17130fe6;--k-bg-120f0b:#120f0b;--k-bg-1d1810:#1d1810;--k-line-8a7040:#8a7040;--k-text-120f0b:#120f0b;--k-line-e8c873:#e8c873;--k-bg-000a:#000a;--k-line-3a2f1b:#3a2f1b;--k-line-0b0906:#0b0906;--k-shadow-4a3c22:#4a3c22;--k-shadow-f6ebcd:#f6ebcd;--k-bg-e0463c:#e0463c;--k-line-2e2616:#2e2616;--k-bg-b8945226:#b8945226;--k-bg-000:#000;--k-line-f6ebcd:#f6ebcd;--k-text-9fe39a:#9fe39a;--k-text-f08a78:#f08a78;--k-bg-0b0907:#0b0907;--k-bg-efe3c6:#efe3c6;--k-text-2b2115:#2b2115;--k-text-3b2f1f:#3b2f1f;--k-shadow-000a:#000a;--k-bg-rgba21425025595:rgba(214,250,255,.95);--k-bg-rgba12723225545:rgba(127,232,255,.45);--k-bg-rgba1020249:rgba(10,20,24,.9);--k-text-8e7c5d:#8e7c5d;--k-text-a8956f:#a8956f;--k-text-b89452:#b89452;--k-text-bda77f:#bda77f;--k-shadow-17130f:#17130f;--k-bg-rgba24221514585:rgba(242,215,145,.85);--k-bg-rgba24221514516:rgba(242,215,145,.16);--k-bg-rgba2422151455:rgba(242,215,145,.5);--k-bg-rgba25525525572:rgba(255,255,255,.72);--k-bg-17130f99:#17130f99;--k-bg-17130fcc:#17130fcc;--k-bg-d9a441:#d9a441;--k-bg-5fb4c9:#5fb4c9;--k-bg-56a867:#56a867;--k-bg-e8c86a:#e8c86a;--k-bg-d8432c:#d8432c;--k-bg-3f6fd1:#3f6fd1;--k-line-9c352d:#9c352d;--k-text-e0705f:#e0705f;--k-line-3dbb78:#3dbb78;--k-text-3dbb78:#3dbb78;--k-text-a8966f:#a8966f;--k-bg-17130f:#17130f;--k-bg-100e0b:#100e0b;--k-bg-rgba16141172:rgba(16,14,11,.72);--k-bg-rgba16141125:rgba(16,14,11,.25);--k-bg-rgba1614111:rgba(16,14,11,.1);--k-text-ead7af:#ead7af;--k-shadow-100d09:#100d09;--k-text-d6b67e:#d6b67e;--k-text-e2c58d:#e2c58d;--k-shadow-161009:#161009;--k-bg-a4854c:#a4854c;--k-bg-17130fec:#17130fec;--k-line-b8945233:#b8945233;--k-text-e0a39c:#e0a39c;--k-text-b9c9a4:#b9c9a4;--k-bg-1a1712:#1a1712;--k-text-d98a6a:#d98a6a;--k-line-9a5a3e:#9a5a3e;--k-bg-1c120c:#1c120c;--k-line-b8654a:#b8654a;--k-text-f0b49a:#f0b49a;--k-bg-0c0a07cc:#0c0a07cc;--k-text-f3e2b5:#f3e2b5;--k-bg-00000040:#00000040;--k-bg-000000d0:#000000d0;--k-bg-0b0906b0:#0b0906b0;--k-bg-1a140bf0:#1a140bf0;--k-bg-0d0a06f0:#0d0a06f0;--k-bg-1a140b:#1a140b;--k-bg-0b0906d0:#0b0906d0;--k-text-8c7d5f:#8c7d5f;--k-bg-15110bf2:#15110bf2;--k-bg-0b0906f2:#0b0906f2;--k-text-fff:#fff;--k-line-3a5f3a:#3a5f3a;--k-bg-0000:#0000;--k-bg-d2a44f66:#d2a44f66;--k-line-8c7d5f:#8c7d5f;--k-line-ecd494:#ecd494;--k-line-bfa46a:#bfa46a;--k-bg-3a3a3a:#3a3a3a;--k-bg-1c1c1c:#1c1c1c;--k-text-e6e1d6:#e6e1d6;--k-line-777:#777;--k-bg-5a4318:#5a4318;--k-bg-2a1e0a:#2a1e0a;--k-bg-15110bec:#15110bec;--k-bg-0b0906ec:#0b0906ec;--k-text-9c8c6c:#9c8c6c;--k-bg-2a2217f0:#2a2217f0;--k-bg-120e08f0:#120e08f0;--k-bg-261b0bec:#261b0bec;--k-bg-110c05ec:#110c05ec}
:root{--o1:#ff7440;--o2:#f2461b;--o3:#cf2d0b;--tinte:#141213;--tinte2:#3a3536;--tinte3:#6b6365;--papier:#ece8e4;
  --cond:"Barlow Condensed",Barlow,system-ui,sans-serif;--anton:Anton,Impact,"Barlow Condensed",sans-serif;
  --jp:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",Meiryo,sans-serif;
  --glas-rand:inset 0 0 0 1.5px rgba(255,255,255,.92),0 0 5px rgba(255,255,255,.7),0 0 18px rgba(255,255,255,.35),inset 0 0 18px rgba(255,255,255,.4),0 24px 40px -22px rgba(18,22,32,.5);
  --orange:radial-gradient(80% 60% at 50% 110%,rgba(255,190,120,.55),rgba(255,160,100,0) 70%),linear-gradient(180deg,rgba(255,132,84,.97) 0%,rgba(245,82,31,.95) 55%,rgba(228,62,14,.97) 100%);
  --orange-schatten:inset 0 1px 0 rgba(255,236,222,.9),inset 0 -1px 0 rgba(255,210,170,.6),inset 0 12px 16px -12px rgba(255,230,210,.75),inset 0 -12px 16px -12px rgba(110,20,0,.35),0 0 16px -2px rgba(255,90,40,.5),0 6px 12px -5px rgba(110,25,0,.45);
  --milch:linear-gradient(180deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.44) 55%,rgba(255,255,255,.54) 100%);
  --milch-schatten:inset 0 0 0 1.5px rgba(255,255,255,.95),inset 0 -10px 14px -10px rgba(0,0,0,.14),0 1px 1px rgba(8,10,14,.18),0 6px 12px -6px rgba(8,10,14,.35);
  --rauch:linear-gradient(180deg,rgba(44,38,38,.74),rgba(14,12,12,.8));
  --rauch-schatten:inset 0 0 0 1px rgba(255,255,255,.42),inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px -6px rgba(0,0,0,.6)}
html,body{background:var(--papier)}
#spiel,#karte-modus,#runner,#start,#strudel{color:#f0e3c6}
h1,h2,h3,.zier{font-family:var(--cond);font-weight:700;letter-spacing:.01em}

/* buttons: milky glass, the strong one orange glass, on the map smoked glass */
.knopf{border:0;border-image:none;border-radius:999px;min-height:46px;padding:8px 20px;gap:.55em;
  font-family:var(--cond);font-weight:600;font-size:16px;letter-spacing:.03em;text-transform:uppercase;color:var(--tinte);
  background:var(--milch);-webkit-backdrop-filter:blur(10px) saturate(125%);backdrop-filter:blur(10px) saturate(125%);
  box-shadow:var(--milch-schatten);filter:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.knopf:hover{filter:none;transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px #fff,inset 0 -10px 14px -10px rgba(0,0,0,.14),0 2px 2px rgba(8,10,14,.2),0 10px 18px -8px rgba(8,10,14,.4)}
.knopf:active{filter:none;transform:translateY(1px) scale(.985)}
.knopf.stark,#spiel .knopf.stark,#karte-modus .knopf.stark{color:#fff;text-shadow:0 1px 2px rgba(120,20,0,.4);background:var(--orange);box-shadow:var(--orange-schatten)}
.knopf.klein{min-height:36px;padding:4px 14px;font-size:13.5px}
/* a newer build is live: a bar above everything with one button that reloads */
#neu-version{position:fixed;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100vw - 32px);padding:10px 10px 10px 18px;border-radius:16px;background:rgba(20,18,20,.94);color:#fff;font-size:15px;line-height:1.35;box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
#neu-version .knopf{flex:none;min-height:40px;padding:6px 18px}
#neu-version .zu{flex:none;width:36px;height:36px;margin-left:-6px;border:0;border-radius:50%;background:none;color:rgba(255,255,255,.75);font-size:22px;line-height:1;cursor:pointer}
.knopf[disabled]{opacity:.5;transform:none}
.knopf:focus-visible,a:focus-visible{outline:2px solid var(--o2);outline-offset:2px}
.linkknopf{color:var(--o3);font-weight:600}
#spiel .knopf,#karte-modus .knopf{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);background:var(--rauch);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--rauch-schatten)}
#spiel .knopf.modus{border-radius:14px;padding:0;min-height:50px;text-transform:none}
#spiel .knopf.modus[aria-pressed=true]{background:var(--orange);box-shadow:var(--orange-schatten)}
/* push buttons (René 26.10.2026): a raised cap that sinks into its socket when pressed, in our orange, milk and smoke;
   the haptic tick on press comes from sprache.js */
:root{--k-hoch:0 .05em .05em -.01em rgba(5,5,5,.55),0 .01em .01em -.01em rgba(5,5,5,.4),.15em .3em .25em -.05em rgba(5,5,5,.28),
    inset 0 0 0 0 rgba(20,18,19,0),inset 0 0 0 0 rgba(5,5,5,0),inset -.05em -.05em .05em 0 rgba(5,5,5,.25),inset 0 0 0 0 rgba(5,5,5,0),
    inset 0 0 .05em .2em rgba(255,255,255,.22),inset .025em .05em .1em 0 rgba(255,255,255,.95),inset .12em .12em .12em rgba(255,255,255,.25),inset -.075em -.25em .25em .1em rgba(5,5,5,.22);
  --k-tief:0 0 0 0 rgba(5,5,5,0),0 0 0 0 rgba(5,5,5,0),0 0 0 0 rgba(5,5,5,0),
    inset 0 0 0 1.5px rgba(20,18,19,.5),inset .1em .15em .05em 0 rgba(5,5,5,.6),inset -.025em -.03em .05em .025em rgba(5,5,5,.4),inset .25em .25em .2em 0 rgba(5,5,5,.4),
    inset 0 0 .05em .5em rgba(255,255,255,.12),inset 0 0 0 0 rgba(255,255,255,0),inset .12em .12em .12em rgba(255,255,255,.2),inset -.075em -.12em .2em .1em rgba(5,5,5,.22);
  --k-orange:linear-gradient(135deg,#ff9466,#e0400f);--k-milch:linear-gradient(135deg,#fff,#d3ccc6);--k-rauch:linear-gradient(135deg,#4d4545,#171414);}
.knopf,#spiel .knopf,#karte-modus .knopf{--kappe:var(--k-milch);background:var(--kappe);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--k-hoch);transition:transform .25s ease,box-shadow .3s ease}
#spiel .knopf,#karte-modus .knopf{--kappe:var(--k-rauch)}
.knopf.stark,#spiel .knopf.stark,#karte-modus .knopf.stark,#spiel .knopf.modus[aria-pressed=true]{--kappe:var(--k-orange);background:var(--kappe);box-shadow:var(--k-hoch)}
#spiel .knopf.modus[aria-pressed=true]{box-shadow:var(--k-tief)}
@media (hover:hover){.knopf:not([disabled]):not(.mr-apple):hover,#spiel .knopf:not([disabled]):hover,#karte-modus .knopf:not([disabled]):hover{transform:none;box-shadow:var(--k-tief)}}
.knopf:not([disabled]):not(.mr-apple):active,#spiel .knopf:not([disabled]):active,#karte-modus .knopf:not([disabled]):active{transform:scale(.975);box-shadow:var(--k-tief)}
/* chosen keys stay pressed like the header of the site (René 26.10.2026): selected tab, switched-on toggle, active mode, the strong key of a tab row, the active tile */
.knopf[aria-selected=true],.knopf[aria-pressed=true],.knopf[aria-current],.reiter .knopf.stark,.umschalt .knopf.stark,
#spiel .knopf[aria-pressed=true],#karte-modus .knopf[aria-pressed=true],.navtile.on,.ko-seiten button[aria-selected=true],.sz-reiter button[aria-selected=true]{transform:none;box-shadow:var(--k-tief)!important}
#spiel #hilfe{border-radius:14px}
#sammlung-knopf{border-radius:50%!important}
#stand,#route,#taten .platte,#dreh-hinweis{border:0!important;border-radius:14px;background:var(--rauch);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--rauch-schatten);color:#fff}
#stand b{font-family:var(--cond);font-size:1.08em;letter-spacing:.02em;color:#fff}
#stand .zurueck,#route-pfeil{color:#ff9a6e}
#km-schliessen,#km-zoom button,#runner-schliessen{background:var(--rauch);border:0;box-shadow:var(--rauch-schatten);color:#fff}
#km-hinweis,#km-suche{border:0;border-radius:14px;background:var(--rauch);box-shadow:var(--rauch-schatten)}
#km-suche button{border-radius:999px;border:0;background:rgba(255,255,255,.12);color:#fff}
#km-suche button[aria-pressed=true]{background:var(--orange);color:#fff}

/* dialogs: frosted glass cards */
.schleier{background:rgba(24,18,16,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.schleier .karte{border:0;border-radius:22px;padding:24px;color:var(--tinte);
  background:linear-gradient(160deg,rgba(255,255,255,.84),rgba(255,255,255,.62));
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.95),inset 0 0 22px rgba(255,255,255,.5),0 0 18px rgba(255,255,255,.3),0 30px 60px -24px rgba(30,16,10,.55)}
.schleier h2{font:700 26px/1.1 var(--cond);text-transform:uppercase;letter-spacing:.01em;color:var(--tinte)}
.schleier p{color:var(--tinte2)}
.feld,#profil input,.tk-name input{border-radius:12px;border:1px solid rgba(20,18,19,.16);background:rgba(255,255,255,.8);color:var(--tinte);box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.feld:focus-visible,#profil input:focus-visible{outline:2px solid var(--o2)}
.legal-row a,.linkknopf{color:var(--o3)}
.sprachwahl button{border-radius:999px;border:0;background:var(--milch);box-shadow:var(--milch-schatten);color:var(--tinte);font-family:var(--cond);font-weight:600}
.sprachwahl button[aria-pressed=true]{background:var(--orange);box-shadow:var(--orange-schatten);color:#fff}
#tour-x{color:var(--tinte)}
#belohnung img{border:0;border-radius:12px;box-shadow:0 0 0 2px rgba(255,255,255,.8),0 24px 44px -18px rgba(120,20,0,.55)}
#belohnung .zahl{border:0;border-radius:14px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9)}
#belohnung .zahl b{font-family:var(--anton);font-weight:400;font-size:22px;color:var(--tinte)}

/* panels on the pages: milky glass with a bright rim */
.ko-box,.ko-zahl,.ko-stat div,.clan-block,.tk-info,.tk-spawn,.mi-karte,.mi-bonus,.mi-champion,.mi-uhr,.sz-premium,.sz-lohn,.sz-fuss,.sz-bald,
.dbc-eintrag,.dbc-reihebox,.meldungen li,.chat-liste li,.clan-mitglieder li,.lobbys li,.skin,.ko-naechste,.platte-start,.clan-frage,.clan-bild,
.tafel,.eff-text,.eff-liste li,.chat-verlauf li,.tk-liste button,.dbc-bed li,.want{border-radius:14px;
  -webkit-backdrop-filter:blur(8px) saturate(115%);backdrop-filter:blur(8px) saturate(115%);box-shadow:var(--glas-rand)}
.ko-box,.clan-block,.mi-bonus,.sz-fuss,.tk-info,.tk-spawn{border:0;padding:18px 20px}
.ko-box h3,.clan-block h3,.tk-seite h3,.ko-feld h3,.dbc-titel h3,.kopfzeile h3,.tk-info h4,.tk-spawn h4{font:700 18px/1.2 var(--cond);text-transform:uppercase;letter-spacing:.02em;color:var(--tinte)}
.skin[aria-pressed=true],.tk-liste button[aria-pressed=true],.mi-stufe.ist>div,.sz-lohn.ist{box-shadow:inset 0 0 0 2px var(--o2),0 0 18px -4px rgba(242,70,27,.6)}
.eff-text,.eff-liste li{background:rgba(255,255,255,.7);color:var(--tinte2)}
.eff-liste span{color:var(--tinte2)}
.eff-titel{font:400 34px/1 var(--anton);text-transform:uppercase;color:var(--tinte)}
.chat-verlauf li.eigen{background:rgba(255,236,226,.85)}
.tk-karte{border:0;border-radius:18px;overflow:hidden;background:#1a1712;box-shadow:var(--glas-rand)}
.tk-zoom button,.ko-karte .ko-knopf{border-radius:999px;border:0;background:var(--rauch);color:#fff;box-shadow:var(--rauch-schatten)}
.tk-karte .tk-naeher{border:0;border-radius:12px;background:var(--rauch);color:#fff}
#ko-karte{border-radius:14px;background:#1a1712}
.ko-legende{border-radius:10px;background:rgba(20,16,16,.7);color:#fff}
.ko-knopf,.sz-mehr,.mi-knopf{border-radius:999px;border:0;background:var(--milch);box-shadow:var(--milch-schatten);color:var(--tinte);font-family:var(--cond);font-weight:600}
.mi-knopf.bereit{background:var(--orange);box-shadow:var(--orange-schatten);color:#fff;animation:none}
.ko-balken,.mi-balken,#season-balken{height:8px;border:0;border-radius:99px;background:rgba(20,18,19,.1);overflow:hidden;box-shadow:0 1px 1px rgba(0,0,0,.08) inset}
.ko-balken i,.mi-balken i,#season-balken i,#menue-profil .balken i{border-radius:inherit;background:linear-gradient(90deg,var(--o3),var(--o1));box-shadow:0 0 12px rgba(242,70,27,.6)}
.mi-balken{height:14px}
.ko-seiten{border-right-color:rgba(20,18,19,.12)}
.ko-seiten button{border-radius:14px;color:var(--tinte);font-family:var(--cond);letter-spacing:.06em}
.ko-seiten button[aria-selected=true]{color:#fff;background:var(--orange);box-shadow:var(--orange-schatten);border-color:transparent;text-shadow:0 1px 2px rgba(120,20,0,.4)}
.ko-bild{border:0;border-radius:18px;padding:0;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 16px 30px -14px rgba(0,0,0,.45)}
#profil .ko-titel,.mi-titel,#season-titel,.clan-intro h2,.clan-kopf h2{font-family:var(--anton);font-weight:400;text-transform:uppercase;letter-spacing:.01em;color:var(--tinte);text-shadow:none}
.ko-motto,.mi-motto,.ko-ecke,.sz-monat{color:var(--tinte2)}
.sz-reiter,.ko-welt-reiter{border:0;border-radius:999px;padding:4px;gap:4px;background:rgba(255,255,255,.45);box-shadow:var(--glas-rand)}
.sz-reiter button,.ko-welt-reiter button{border:0;border-radius:999px;font-family:var(--cond);letter-spacing:.06em;color:var(--tinte)}
.sz-reiter button[aria-selected=true],.ko-welt-reiter button[aria-pressed=true]{color:#fff;background:var(--orange);box-shadow:var(--orange-schatten)}
.sz-banner b.premium{background:var(--orange);color:#fff;border:0}
.sz-banner b.gratis{background:rgba(255,255,255,.7);color:var(--tinte);border:0}
.sz-premium-knopf{border:0;border-radius:14px;background:var(--orange);color:#fff}
.sz-premium-knopf em{color:rgba(255,255,255,.85)}
.sammlung-filter button{border-radius:999px;border:0;background:var(--milch);box-shadow:var(--milch-schatten);color:var(--tinte);font-family:var(--cond);font-size:13px;padding:6px 14px}
.sammlung-filter button[aria-pressed=true]{background:var(--orange);box-shadow:var(--orange-schatten);color:#fff}
.sammlung-karte{border-radius:8px;border:0;box-shadow:0 0 0 1.5px rgba(255,255,255,.7),0 10px 18px -10px rgba(40,10,0,.55)}
.sammlung-karte.verdeckt{background:linear-gradient(rgba(22,18,19,.62),rgba(22,18,19,.82)),url(/assets/kartenruecken/mapraiders-tcg-card-back-commander-220.webp) center/cover #1a1617}
.sammlung-karte.verdeckt span{text-shadow:0 1px 3px #000}
#sammlung-gross img,.dbc-ergebnis img{border:0;border-radius:12px;box-shadow:0 0 0 2px rgba(255,255,255,.8),0 20px 36px -16px rgba(120,20,0,.55)}
.dbc-platz{border-radius:8px}
.dbc-sterne,.dbc-eintrag .dbc-stand{color:var(--o2)}
.want img{border-radius:6px}
.menue-rahmen{border:0;border-radius:18px;background:var(--milch);box-shadow:var(--milch-schatten);color:var(--tinte)}
.menue-rahmen:hover,.menue-rahmen:focus-visible{filter:none;box-shadow:inset 0 0 0 1.5px #fff,0 2px 2px rgba(8,10,14,.2),0 12px 22px -10px rgba(8,10,14,.45)}

/* the pages: the city behind milky light */
.schleier.seite,#profil.seite,#season.seite,#menue.seite{background:linear-gradient(180deg,rgba(236,232,228,.5),rgba(236,232,228,.84) 380px,rgba(236,232,228,.9)),
  url(/assets/hintergrund/mapraiders-tcg-hintergrund-stadt-panorama.webp) center bottom/cover no-repeat,#ece8e4}
.schleier.seite{flex-direction:column;align-items:stretch;justify-content:flex-start}

/* the page head: big title, the line under it, the heroine of the page (glasHeld in the script) */
.glas-held{position:relative;flex:none;width:100%;max-width:1320px;margin:0 auto 12px;min-height:clamp(150px,15vw,210px);
  display:flex;flex-direction:column;justify-content:flex-end;padding:0 48% 16px 6px;isolation:isolate}
.gh-art{position:absolute;right:-24px;top:-100px;bottom:-60px;width:60%;z-index:-1;pointer-events:none;background:var(--held) right top/cover no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent,#000 30%),linear-gradient(0deg,transparent,#000 35%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 30%),linear-gradient(0deg,transparent,#000 35%);mask-composite:intersect}
.glas-held .gh-titel{margin:0;font:400 clamp(54px,6.6vw,124px)/.88 var(--anton);text-transform:uppercase;letter-spacing:.005em;color:#fff;
  text-shadow:0 3px 0 rgba(120,40,20,.35),0 10px 34px rgba(40,20,16,.45);overflow-wrap:normal}
.glas-held .gh-unter{margin:12px 0 0!important;font:600 clamp(11px,1.05vw,15px)/1.45 var(--cond)!important;letter-spacing:.2em;text-transform:uppercase;color:var(--tinte)!important;text-shadow:0 0 8px rgba(255,255,255,.9)}
.gh-unter:empty{display:none}
.gh-jp{position:absolute;left:37%;top:8%;border-left:1px solid rgba(20,18,19,.3);padding-left:14px}
.glas-held .gh-jp p{margin:0}
.glas-held .gh-jp1{font:900 clamp(15px,1.5vw,22px)/1.3 var(--jp);color:var(--tinte);text-shadow:0 0 10px rgba(255,255,255,.95)}
.glas-held .gh-mini{margin-top:8px!important;font:600 10px/1.6 var(--cond);letter-spacing:.24em;text-transform:uppercase;color:var(--tinte2)!important;text-shadow:0 0 6px rgba(255,255,255,.9)}

/* the rail (preview: Home, Map, Decks, DBC, ... on the left), logo and profile on top */
#menue-kopf{position:fixed;left:0;top:0;bottom:0;right:auto;width:176px;z-index:52;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px;
  padding:calc(86px + env(safe-area-inset-top)) 12px 16px;border:0;border-radius:0 26px 26px 0;isolation:isolate;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));
  box-shadow:inset -1.5px 0 0 rgba(255,255,255,.9),inset 0 -1.5px 0 rgba(255,255,255,.9),inset 0 1.5px 0 rgba(255,255,255,.9),6px 0 16px -6px rgba(255,255,255,.6),16px 0 40px -20px rgba(18,22,32,.45)}
#menue-kopf::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:url(/assets/hintergrund/mapraiders-tcg-hintergrund-stadt-dicht.webp) 30% center/auto 100% no-repeat,#b9b8bb;filter:blur(3px) saturate(.9);opacity:.9;clip-path:inset(0 round 0 26px 26px 0)}
#menue-kopf[hidden]{display:none}
.kopf-nav{order:0;flex:1 1 auto;min-height:0;margin:0;padding:2px 0;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;overflow-x:hidden;overflow-y:auto}
.kopf-nav button,#kopf-home{position:relative;flex:none;display:flex;align-items:center;gap:12px;height:54px;padding:0 12px 0 14px;border:0;border-radius:16px;
  font:500 17px/1.05 var(--cond);letter-spacing:.01em;text-transform:none;text-align:left;white-space:normal;color:#fff;text-shadow:0 1px 2px rgba(15,18,26,.5);
  background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.09) 45%,rgba(255,255,255,.04) 72%,rgba(255,255,255,.1) 100%);
  -webkit-backdrop-filter:blur(8px) saturate(135%) brightness(1.18);backdrop-filter:blur(8px) saturate(135%) brightness(1.18);
  box-shadow:-1px -1px 5px -1px rgba(255,248,232,.75),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 12px 16px -12px rgba(255,255,255,.6),inset 0 -12px 16px -12px rgba(0,0,0,.28),0 1px 1px rgba(8,10,14,.22),0 6px 10px -4px rgba(8,10,14,.38);
  cursor:pointer;transition:transform .2s}
.kopf-nav button:hover,#kopf-home:hover{transform:translateX(3px);color:#fff}
.kopf-nav button svg,#kopf-home svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1.5px rgba(15,18,26,.45))}
.kopf-nav button[aria-current=page],#kopf-home[aria-current=page]{color:#fff;border:0;text-shadow:0 1px 2px rgba(120,20,0,.4);background:var(--orange);box-shadow:var(--orange-schatten)}
/* inside the button: the rail scrolls and clipped a dot that stood out over the edge (Owner 05.10.2026) */
.kopf-nav button.hinweis::after{top:4px;right:4px;width:12px;height:12px;box-shadow:0 0 0 2px #fff}
#kopf-gruppe{color:#fff;background:rgba(20,18,19,.86);box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
#kopf-gruppe svg{width:20px;height:20px;stroke-width:2.6}
/* the group of the open page looks like the open page itself, not like a half-lit outline (Owner 05.10.2026) */
#kopf-nav button[data-g].hier{color:#fff;text-shadow:0 1px 2px rgba(120,20,0,.4);background:var(--orange);box-shadow:var(--orange-schatten)}
@media (max-width:700px){ #kopf-gruppe svg{width:24px;height:24px} #kopf-gruppe span{font-size:11px;font-weight:700} #kopf-nav button[data-in] span{white-space:normal;line-height:1.05;hyphens:auto;-webkit-hyphens:auto} }
#werkstatt .karte,#alle-karten .karte{max-width:1100px}
.ws-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.ws-raster.ws-fuenf{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.ws-kachel{border-radius:16px;padding:14px;background:rgba(255,255,255,.82);box-shadow:0 10px 24px -14px rgba(20,12,6,.5);color:#241c18}
.ws-kachel h3{margin:0 0 4px;font:700 18px/1.15 var(--cond)}
.ws-kachel small{display:block;color:#6b5f58;margin-bottom:8px}
.ws-kachel ul{margin:0;padding-left:18px;line-height:1.45}
.ws-kachel img{display:block;width:100%;aspect-ratio:1;object-fit:contain;margin-bottom:8px}
.ws-kachel svg{width:56px;height:56px;fill:none;stroke:#e2531c;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.ws-balken{height:6px;border-radius:3px;background:rgba(0,0,0,.08);margin:6px 0 10px}
.ws-balken i{display:block;height:100%;width:4%;border-radius:3px;background:var(--orange)}
.ws-platz{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid rgba(0,0,0,.08)}
.ws-platz b{font:700 13px/1.3 var(--cond);letter-spacing:.04em;text-transform:uppercase;color:#6b5f58}
.ws-kachel small.frei{color:#2f7d3a;font-weight:600}
.ws-kachel.zu{opacity:.78}.ws-kachel.zu>svg{stroke:#9a8f89}.ws-kachel.zu .ws-platz span{color:#8a7d76}
.ws-kachel small.gesperrt{display:flex;gap:6px;align-items:flex-start}
.ws-kachel small.gesperrt svg{width:13px;height:13px;flex:none;margin:2px 0 0;fill:none;stroke:currentColor;stroke-width:2}
.ws-platz{align-items:baseline}.ws-platz span{flex:1;text-align:right}
.ws-platz em.an{color:#2f7d3a;border:1px solid #2f7d3a}
.ws-kachel .ws-km{display:flex;justify-content:space-between;gap:8px;font:700 13px/1.3 var(--cond);font-variant-numeric:tabular-nums;color:#241c18}
.ws-kachel .ws-km+.ws-balken{margin-bottom:4px}
.ws-kachel .ws-bis{font-size:12px;color:#6b5f58;margin:0 0 8px}
.ws-kachel .ws-so{font-size:12.5px;line-height:1.4;color:#4a3f39;margin:8px 0 0}
/* the tuning (René 05.10.2026): points, places to tap, the choice and the ranks */
.fz-stand{font:700 15px/1.3 var(--cond);letter-spacing:.02em;color:#241c18}
.fz-stand small{display:block;font:400 13px/1.45 var(--sans,inherit);letter-spacing:0;color:#6b5f58;margin-top:2px}
.fz-punkte{margin:6px 0 4px;padding:8px 10px;border-radius:10px;background:rgba(226,83,28,.08)}
.fz-punkte b{display:block;font:700 14px/1.3 var(--cond);color:#c2410c}
.fz-punkte small{margin:2px 0 0;font-size:12px}
.fz-platz{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:10px 4px;border:0;border-top:1px solid rgba(0,0,0,.08);background:none;text-align:left;cursor:pointer;color:inherit;font:inherit}
.fz-platz:disabled{cursor:default}
.fz-platz.auf{background:rgba(226,83,28,.06)}
.fz-platz .fz-l{font:700 12px/1.25 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:#6b5f58}
.fz-platz .fz-t{text-align:right}
.fz-platz .fz-t b{display:block;font:700 15px/1.2 var(--cond);color:#241c18}
.fz-platz .fz-t small{display:block;margin:0;font-size:12.5px;color:#2f7d3a;font-weight:600}
.fz-platz.zu .fz-t small{color:#9a8f89;font-weight:400}
.fz-pips{display:flex;gap:4px}
.fz-pips i{width:10px;height:10px;border-radius:50%;border:1.5px solid #e2531c}
.fz-pips i.an{background:#e2531c}
.fz-edit{padding:4px 4px 12px}
.fz-wahl{font-size:12.5px;line-height:1.45;color:#4a3f39;margin:6px 0}
.fz-hin{font-size:12.5px;line-height:1.45;color:#9a3412;margin:6px 0 0}
.fz-teile{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 10px}
.fz-teile .knopf{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:64px;white-space:normal;text-align:left}
.fz-teile .knopf small{font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.3;opacity:.85}
.fz-rang{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:10px}
.fz-rang .knopf{min-height:48px;font-size:22px;justify-content:center;padding:0}
.fz-rang span{text-align:center}
.fz-rang b{display:block;font:700 15px/1.2 var(--cond)}
.fz-rang small{display:block;margin:2px 0 0;font-size:12px}
.ws-platz em{flex:none;font:600 11px/1.2 var(--cond);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#9a8f89;border:1px dashed #c9bfb9;border-radius:6px;padding:1px 6px}
#ws-figuren .ws-standard{display:grid;place-items:center;aspect-ratio:3/4;background:linear-gradient(180deg,#2a211d,#15110f)}
#ws-figuren .ws-standard svg{width:56%;height:auto;fill:none;stroke:#ff9a6e;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ws-stand{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.ws-stand div{background:rgba(255,255,255,.88);border-radius:14px;padding:8px 14px;min-width:96px;color:#241c18}
.ws-stand b{display:block;font:700 11px/1.2 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#6b5f58}
.ws-stand span{font:700 24px/1.1 var(--cond);font-variant-numeric:tabular-nums}
.baum-legende{display:flex;gap:8px;flex-wrap:wrap}
.baum-legende span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#4a403b}
.baum-legende .muster{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.25);background:#f7f3f0}
.baum-legende .muster.aktiv{border:2px solid #e2531c}.baum-legende .muster.wahl{border:2px dashed #7d706a}.baum-legende .muster.ende{background:#241c18;border-color:#241c18}
.baum{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.baum-zweig{background:rgba(255,255,255,.88);border-radius:16px;padding:12px;color:#241c18;min-width:0}
.baum-zweig h3{margin:0;font:700 19px/1.1 var(--cond)}
.baum-zweig>small{color:#6b5f58}
.baum-gitter{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.baum-knoten{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;padding:6px 4px;border-radius:10px;border:1px solid rgba(0,0,0,.14);background:#f7f3f0;color:#241c18;cursor:pointer;font:600 12px/1.15 var(--cond);text-align:center;overflow-wrap:anywhere}
.baum-knoten i{font-style:normal;font-size:18px;line-height:1;color:#e2531c}
.baum-knoten small{color:#8a7d76;font:500 10.5px/1 var(--cond)}
.baum-knoten.aktiv{border:2px solid #e2531c}
.baum-knoten.wahl{border-style:dashed;border-color:#7d706a}
.baum-knoten.wahl i{color:#c2410c}
.baum-knoten.ende{background:#241c18;color:#fff;border-color:#241c18}
.baum-knoten.ende i{color:#ff9a6e}.baum-knoten.ende small{color:#cbbdb5}
.baum-knoten[aria-pressed=true]{box-shadow:0 0 0 3px #f2461b}
.baum-info{margin:10px 0 0;font-size:13.5px;line-height:1.4;min-height:2.8em;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.baum-info[hidden]{display:none}.baum-info p{margin:0}.baum-info small{color:#6b5f58;font-size:12.5px}
.baum-knoten.hat{background:#fde7dc;border-color:#e2531c}.baum-knoten.ende.hat{background:#7a2e12;border-color:#7a2e12}
.baum-knoten.zu{opacity:.55}
.baum-xp{position:relative;height:26px;margin:0 0 12px;border-radius:13px;background:rgba(255,255,255,.88);overflow:hidden}
.baum-xp i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#f2461b,#ff8a3d)}
.baum-xp span{position:relative;display:block;padding:0 12px;font:700 13px/26px var(--cond);color:#241c18;font-variant-numeric:tabular-nums}
.baum-hinweis{font-weight:600}
/* the tree as branches (René 05.10.2026: "ein Baum mit der Struktur wie den hier angehangen ... gewisse Zweige einfach mehr
   stärker getunt"): each branch a dark field, its nodes round, joined by lines; the learned way glows */
.baum-zweig.ast{background:radial-gradient(120% 70% at 50% 0%,rgba(255,236,224,.95) 0%,rgba(255,255,255,.9) 60%);color:#241c18}
.baum{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.baum-ast{position:relative;margin-top:10px}
.baum-ast svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.baum-ast line{stroke:rgba(36,28,24,.2);stroke-width:3;stroke-linecap:round}
.baum-ast line.an{stroke:#f2461b;filter:drop-shadow(0 0 3px rgba(242,70,27,.7))}
.baum-ast line.leer{stroke:rgba(36,28,24,.14);stroke-dasharray:5 6;stroke-width:2.5}
.baum-ast circle.leer{fill:rgba(255,255,255,.7);stroke:rgba(36,28,24,.18);stroke-width:2;stroke-dasharray:3 4}
.baum-ast text.leer{fill:rgba(36,28,24,.3);font:700 13px "Barlow Condensed",sans-serif;text-anchor:middle;dominant-baseline:central}
.baum-ast .baum-knoten{position:absolute;transform:translateX(-50%);width:84px;min-height:0;padding:0;border:0;background:none;color:#241c18;gap:3px;font:600 11.5px/1.15 var(--cond)}
.baum-ast .baum-knoten i{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:22px;color:#e2531c;
  background:radial-gradient(circle at 35% 30%,#ffffff,#ece4df 70%);border:2px solid #c9bfb9;box-shadow:0 3px 8px rgba(36,28,24,.18)}
.baum-ast .baum-knoten span{max-width:84px}
.baum-ast .baum-knoten small{color:#6b5f58;font:600 10.5px/1 var(--cond)}
.baum-ast .baum-knoten.hat i{border-color:#f2461b;color:#fff;background:radial-gradient(circle at 35% 30%,#ff8a5c,#e2531c 70%);box-shadow:0 0 0 3px rgba(242,70,27,.22),0 0 14px rgba(242,70,27,.55)}
.baum-ast .baum-knoten.ende i{width:60px;height:60px;border-color:#d4a73c;font-size:26px}
.baum-ast .baum-knoten.ende.hat i{border-color:#d4a73c;background:radial-gradient(circle at 35% 30%,#ffd27a,#e2931c 70%);box-shadow:0 0 0 3px rgba(212,167,60,.3),0 0 18px rgba(226,147,28,.6)}
.baum-ast .baum-knoten.wahl i{border-style:dashed}
.baum-ast .baum-knoten.aktiv i{border-color:#e2531c}
.baum-ast .baum-knoten.zu{opacity:.5}
.baum-ast .baum-knoten.zu i::after{content:"🔒";position:absolute;right:-4px;bottom:-4px;font-size:12px;filter:grayscale(1)}
.baum-ast .baum-knoten,.baum-ast .baum-knoten.hat,.baum-ast .baum-knoten.ende,.baum-ast .baum-knoten.ende.hat{background:none;border:0}
.baum-ast .baum-knoten[aria-pressed=true]{box-shadow:none}
.baum-ast .baum-knoten[aria-pressed=true] i{outline:3px solid #241c18;outline-offset:2px}
.baum-ast .baum-ab{position:absolute;left:0;transform:translateY(-50%);font:700 10px/1 var(--cond);letter-spacing:.04em;color:#8a7d76;text-transform:uppercase}
.baum-reset{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 0;padding:12px;border-radius:14px;background:rgba(255,255,255,.88);color:#241c18}
.baum-reset p{margin:0;flex:1 1 220px}.baum-reset small{color:#6b5f58}
.alle-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.alle-karte{position:relative;padding:0;border:0;background:none;cursor:pointer;border-radius:8px;overflow:hidden}
.alle-karte img{display:block;width:100%;aspect-ratio:5/7;object-fit:cover}
.alle-karte.fehlt img{filter:grayscale(.8) brightness(.78)}
.alle-karte .anzahl{position:absolute;right:5px;top:5px;min-width:22px;padding:2px 7px;border-radius:999px;background:#f2461b;color:#fff;font:700 12px/1.2 var(--cond)}
#alle-filter button[data-fehlend]{margin-left:auto}
#alle-gross{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;background:rgba(10,8,7,.86)}
#alle-gross[hidden]{display:none}
#alle-gross img{height:min(80vh,150vw);max-width:92vw;object-fit:contain;border-radius:12px;box-shadow:0 20px 50px -20px #000}
#alle-gross p{margin:0;color:#fff;text-align:center;max-width:40em}
#menue-zurueck{position:fixed;left:196px;top:calc(12px + env(safe-area-inset-top));z-index:53}
#menue-zurueck img{height:54px;width:auto;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
/* music button and profile top right as one group, the button left of the profile (Owner 29.09.2026) */
#kopf-rechts{position:fixed;right:78px;top:calc(12px + env(safe-area-inset-top));z-index:53;display:flex;align-items:center;gap:10px}
#menue-kopf #kopf-rechts .mr-musik{width:48px;height:48px}
#kopf-profil{padding:5px 14px 5px 5px;border-radius:999px;background:var(--milch);box-shadow:var(--milch-schatten)}
#kopf-profil img{width:42px;height:42px;border:2px solid #fff;box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
#kopf-profil b{font:600 16px/1.1 var(--cond);color:var(--tinte)}
#kopf-profil small{font:500 12px/1.2 var(--cond);letter-spacing:.02em;color:var(--tinte3)}
#menue-x{position:fixed;right:16px;top:calc(14px + env(safe-area-inset-top));z-index:53;width:48px;height:48px;min-height:0;padding:0;border-radius:50%;font-size:18px}
body.menue-start #kopf-rechts,body.menue-start #menue-zurueck{display:none}
.schleier.seite{padding:calc(88px + env(safe-area-inset-top)) 24px 32px 200px}
#menue.seite{padding:0 0 0 176px}
body.kopf-ueber-duell #duell{top:0;left:176px}
body.kopf-ueber-duell #menue-zurueck,body.kopf-ueber-duell #kopf-rechts,body.kopf-ueber-duell #menue-x{display:none}
.tk-karte{height:calc(100dvh - 150px)}
.tk-seite{max-height:calc(100dvh - 150px)}
@media (max-width:1100px){ #kopf-profil span{display:none} #kopf-profil{padding:4px} }
@media (max-width:760px){
  #menue-kopf{width:64px;padding:calc(66px + env(safe-area-inset-top)) 6px 10px;gap:8px;border-radius:0 18px 18px 0}
  #menue-kopf::before{clip-path:inset(0 round 0 18px 18px 0)}
  .kopf-nav{order:0;flex:1 1 auto;margin:0;padding:2px 0;gap:8px;justify-content:flex-start}
  .kopf-nav button,#kopf-home{flex-direction:column;justify-content:center;height:54px;gap:3px;padding:0 2px;border-radius:12px;font-size:10.5px;text-align:center}
  .kopf-nav button span,#kopf-home span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kopf-nav button svg,#kopf-home svg{width:20px;height:20px}
  #menue-zurueck{left:74px;top:calc(12px + env(safe-area-inset-top));margin:0}
  #menue-zurueck img{height:34px}
  #kopf-rechts{right:66px;top:calc(8px + env(safe-area-inset-top));gap:8px}
  #menue-kopf #kopf-rechts .mr-musik{width:44px;height:44px}
  #kopf-profil img{width:38px;height:38px}
  #menue-x{right:10px;top:calc(9px + env(safe-area-inset-top));width:44px;height:44px}
  .schleier.seite{padding:calc(64px + env(safe-area-inset-top)) 10px 24px 72px}
  #menue.seite{padding:0 0 0 64px}
  body.kopf-ueber-duell #duell{left:64px}
  /* René 06.10.2026: the fields higher up, the title right under the logo; the figure keeps its place */
  .glas-held{min-height:118px;padding:0 2px 8px;margin-bottom:8px}
  .gh-art{right:-10px;top:-70px;bottom:-40px;width:78%;background-image:var(--held-hoch);background-position:right top;background-size:cover}
  .glas-held .gh-titel{font-size:clamp(36px,12vw,60px)}
  .glas-held .gh-unter{font-size:10px!important;letter-spacing:.14em}
  .gh-jp{display:none}
  .tk-karte{height:56dvh}
  .tk-seite{max-height:none}
}

/* sign-out in the profile overview (Owner 28.09.2026) */
.ko-abmelden{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 18px;border:0;border-radius:999px;cursor:pointer;
  font:600 14px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--tinte);background:var(--milch);box-shadow:var(--milch-schatten)}
.ko-abmelden svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ko-abmelden:hover{color:#c2410c}
@media (max-width:760px){ #profil .ko-seiten{flex-wrap:wrap;overflow:visible;row-gap:8px} }
/* the rail slides out and back in (Owner 28.09.2026); the pages move with it, so the picture stays centred */
#rail-knopf{position:fixed;left:18px;top:calc(18px + env(safe-area-inset-top));z-index:54;width:48px;height:48px;padding:0;border:0;border-radius:14px;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08));-webkit-backdrop-filter:blur(8px) saturate(135%);backdrop-filter:blur(8px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.3),0 6px 12px -6px rgba(8,10,14,.45);transition:background .3s,color .3s,box-shadow .3s}
#rail-knopf svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 1px 1.5px rgba(15,18,26,.45))}
#rail-knopf:focus-visible{outline:2px solid #f2461b;outline-offset:3px}
#menue-kopf[hidden] + #rail-knopf{display:none}
#menue-kopf{transition:left .38s cubic-bezier(.2,.8,.2,1)}
.schleier.seite,#menue.seite{transition:padding-left .38s cubic-bezier(.2,.8,.2,1)}
#menue-zurueck,body.kopf-ueber-duell #duell{transition:left .38s cubic-bezier(.2,.8,.2,1)}
/* left, not transform: a transform would make the rail the containing block of the fixed logo, profile and X inside it */
body.rail-zu #menue-kopf{left:-210px}
body.rail-zu #rail-knopf{color:var(--tinte);background:var(--milch);box-shadow:var(--milch-schatten)}
body.rail-zu #rail-knopf svg{filter:none}
body.rail-zu .schleier.seite{padding-left:24px}
body.rail-zu #menue.seite{padding-left:0}
body.rail-zu #menue-zurueck{left:82px}
body.rail-zu.kopf-ueber-duell #duell{left:0}
@media (max-width:760px){
  #rail-knopf{left:10px;top:calc(10px + env(safe-area-inset-top));width:44px;height:44px;border-radius:12px}
  body.rail-zu .schleier.seite{padding-left:10px}
  body.rail-zu #menue-zurueck{left:62px}
}
@media (max-width:760px){ body.rail-zu #menue-kopf{left:-90px} }
@media (prefers-reduced-motion:reduce){ #menue-kopf,.schleier.seite,#menue.seite,#menue-zurueck,body.kopf-ueber-duell #duell{transition:none} }

/* the arena as a menu page: the lobby with the bot and everyone waiting there */
#kolosseum.seite .karte{max-width:760px;width:100%;margin:0 auto}
#kolosseum.seite #kol-titel,#kolosseum.seite #kol-zu{display:none}
.lobbys li.online .avatar{flex:none;width:52px;height:46px;border-radius:12px;display:grid;place-items:center;font:400 24px/1 var(--anton);color:#fff;background:var(--farbe,#f2461b);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.lobbys li.online .wer b small{margin-left:6px;font:600 12px/1 var(--cond);letter-spacing:.06em;color:var(--tinte3)}
.lobbys li.leer{display:block;font-size:14px;line-height:1.5;color:var(--tinte2)}
.lobbys li.leer .knopf{margin-top:10px}
.lobby-offen{display:flex;align-items:center;gap:10px;margin:10px 0 2px;padding:10px 14px;border-radius:14px;font:600 14px/1.35 var(--cond);letter-spacing:.02em;color:var(--tinte);background:rgba(47,179,107,.12);box-shadow:inset 0 0 0 1.5px rgba(47,179,107,.35)}
.lobby-offen[hidden]{display:none}
.lobby-offen .punkt{flex:none;width:10px;height:10px;border-radius:50%;background:#2fb36b;box-shadow:0 0 0 4px rgba(47,179,107,.2);animation:lobbyPuls 1.6s ease-in-out infinite}
@keyframes lobbyPuls{50%{box-shadow:0 0 0 8px rgba(47,179,107,0)}}
.lobbys li.online .punkt{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#2fb36b;box-shadow:0 0 0 3px rgba(47,179,107,.2)}

/* the main menu: the heroine and the city, the menu on the left like the preview's home */
#menue.seite{background:linear-gradient(90deg,rgba(236,232,228,.97) 0,rgba(236,232,228,.86) 30%,rgba(236,232,228,.3) 48%,rgba(236,232,228,.05) 60%,rgba(236,232,228,.3) 76%,rgba(236,232,228,.62)),
  linear-gradient(0deg,rgba(236,232,228,.92),rgba(236,232,228,0) 34%),
  url(/assets/buehne/mapraiders-tcg-heldin-start-quer.webp) 78% 40px/auto 90% no-repeat,
  url(/assets/hintergrund/mapraiders-tcg-hintergrund-stadt-panorama.webp) center bottom/cover no-repeat,#ece8e4}
#menue.seite .karte{align-items:flex-start;padding:calc(14px + env(safe-area-inset-top)) clamp(18px,3.4vw,56px) calc(22px + env(safe-area-inset-bottom))}
.menue-oben{width:100%}
#menue-spiel{border-radius:999px;min-height:46px;padding:6px 20px;font:600 16px/1 var(--cond);text-transform:uppercase;letter-spacing:.03em}
#menue-profil{padding:5px 14px 5px 5px;border-radius:999px;background:var(--milch);box-shadow:var(--milch-schatten);color:var(--tinte)}
#menue-profil img{border:2px solid #fff;box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
#menue-profil b{font:600 17px/1.1 var(--cond)}
#menue-profil small{font:500 12px/1.3 var(--cond);letter-spacing:.02em;color:var(--tinte3)}
#menue-profil .balken{background:rgba(20,18,19,.12);border-radius:99px;overflow:hidden}
#menue-einstellungen{color:var(--tinte);border-radius:50%;background:var(--milch);box-shadow:var(--milch-schatten)}
.menue-logo{width:min(520px,42vw);margin:5vh 0 0;filter:none}
.menue-motto{margin:10px 0 26px;font:500 15px/1.4 var(--cond);letter-spacing:.34em;text-transform:uppercase;color:var(--tinte2);text-align:left;text-shadow:none}
#ortwechsel.menue-held{width:min(600px,100%);min-height:76px;margin:0 0 20px;padding:10px 28px;align-items:flex-start;border:0;border-radius:999px;color:#fff;
  background:var(--orange);box-shadow:var(--orange-schatten),0 18px 34px -12px rgba(242,70,27,.55);animation:none;text-shadow:0 1px 2px rgba(120,20,0,.4)}
.menue-held b{font:400 clamp(24px,2.4vw,34px)/1 var(--anton);letter-spacing:.02em}
.menue-held small{font:600 12.5px/1.2 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.kacheln,.kacheln.klein{width:min(760px,56vw);max-width:none;gap:14px}
.kacheln{grid-template-columns:repeat(2,1fr)}
.mkachel{border-radius:18px;padding:8px;text-align:left}
.mkachel::after{content:none}
.mkachel img{border-radius:12px;aspect-ratio:358/132}
.kacheln.klein img{aspect-ratio:265/80}
.mkachel span{margin:0;padding:10px 6px 4px;background:none}
.mkachel b{font:600 clamp(17px,1.5vw,22px)/1.1 var(--cond);text-transform:uppercase;letter-spacing:.02em;color:var(--tinte);text-shadow:none}
.mkachel small{font:500 11.5px/1.35 Barlow,sans-serif;letter-spacing:0;color:var(--tinte3)}
.mkachel.hinweis::before{box-shadow:0 0 0 2px #fff}
.menue-fuss{justify-content:flex-start;width:min(760px,56vw)}
.menue-knopf{border-radius:999px;font:600 15px/1.1 var(--cond);text-transform:uppercase;letter-spacing:.03em}
.menue-knopf svg{color:var(--o2)}
#menue .sprachwahl button{background:var(--milch);border:0;color:var(--tinte)}
#menue .sprachwahl button[aria-pressed=true]{background:var(--orange);color:#fff}
.menue-ecke{color:var(--tinte3);font-family:var(--cond)}
.menue-ecke.links{left:200px}
@media (max-width:700px){
  #menue.seite{background:linear-gradient(180deg,rgba(236,232,228,.55),rgba(236,232,228,0) 22%,rgba(236,232,228,0) 46%,rgba(236,232,228,.86) 64%,rgba(236,232,228,.94)),
    url(/assets/buehne/mapraiders-tcg-heldin-start-hoch.webp) 52% 40px/auto 760px no-repeat,
    url(/assets/hintergrund/mapraiders-tcg-hintergrund-stadt-dicht.webp) center 0/auto 100% no-repeat,#ece8e4}
  #menue.seite .karte{padding:calc(10px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom))}
  .menue-logo{width:100%;margin-top:10px}
  .menue-motto{font-size:10px;letter-spacing:.24em;margin-bottom:0;white-space:normal}
  .menue-luft{height:max(170px,30vh)}
  .kacheln,.kacheln.klein,.menue-fuss{width:100%}
  .kacheln.klein{grid-template-columns:repeat(2,1fr)}
  .mkachel b{font-size:16px}
  #ortwechsel.menue-held{min-height:64px;padding:8px 20px}
  .menue-held b{font-size:22px}
  #menue-spiel span{display:inline}
  .menue-ecke.links{left:auto}
}
#laden{background:linear-gradient(180deg,rgba(236,232,228,.6),rgba(236,232,228,.9)),url(/assets/hintergrund/mapraiders-tcg-hintergrund-stadt-panorama.webp) center bottom/cover no-repeat,#ece8e4;
  color:var(--tinte2);font-family:var(--cond);font-weight:600}
.schleier.seite .karte,#menue.seite .karte{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}
.schleier.seite .karte{padding:0}
.menue-ecke.links{display:none}
.knopf,.knopf.stark,.knopf.modus,.knopf.klein,.umschalt .knopf{border-image:none}
@media (max-width:700px){
  #menue.seite{background-position:0 0,52% 120px,center 0}
  .menue-luft{flex:none;height:max(230px,30vh)}
  .menue-motto{text-shadow:0 0 6px rgba(255,255,255,.9)}
  #menue-profil span{display:none}
  #menue-profil{padding:4px}
  .menue-oben{gap:8px}
  #menue-spiel{padding:6px 16px}
  .kacheln.klein span{margin:0;padding:8px 4px 2px}
  .kacheln.klein small{font-size:9.5px}
  .mkachel small{font-size:10.5px}
}

/* ====== the home dashboard, taken over from the restyle preview (Owner 28.09.2026), scoped to #dash ====== */

#dash{
  --ink:#141213; --ink-2:#3a3536; --ink-3:#6b6365;
  --paper:#ece8e4;
  --o1:#ff7440; --o2:#f2461b; --o3:#cf2d0b;
  --glass:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.30));
  --glass-line:rgba(255,255,255,.75);
  --glass-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -1px 0 rgba(0,0,0,.04) inset,0 22px 44px -22px rgba(52,24,12,.42);
  --dark:linear-gradient(160deg,rgba(34,28,28,.78),rgba(14,12,12,.86));
  --r:18px;
  --cond:'Barlow Condensed',system-ui,sans-serif;
  --body:'Barlow',system-ui,sans-serif;
  --display:'Anton',Impact,sans-serif;
  --jp:'Noto Sans JP',sans-serif;
}
#dash *{box-sizing:border-box;margin:0;padding:0}
#dash{-webkit-text-size-adjust:100%}
#dash{background:var(--paper);color:var(--ink);font-family:var(--body);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
#dash img{display:block;max-width:100%}
#dash svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
#dash a{color:inherit;text-decoration:none}
#dash button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- shared components ---------- */
#dash .glass{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);border-radius:var(--r)}
#dash .dark{background:var(--dark);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 24px 40px -20px rgba(0,0,0,.55);border-radius:var(--r);color:#f4efec}
#dash .cond{font-family:var(--cond);text-transform:uppercase;letter-spacing:.02em}
#dash .cta{display:inline-flex;align-items:center;gap:.8em;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#fff;
  background:linear-gradient(180deg,var(--o1),var(--o2) 55%,var(--o3));border-radius:999px;border:1px solid rgba(255,190,160,.8);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -2px 6px rgba(120,20,0,.35) inset,0 12px 30px -8px rgba(242,70,27,.75),0 0 0 6px rgba(242,70,27,.10);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
#dash .cta:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -2px 6px rgba(120,20,0,.35) inset,0 18px 38px -8px rgba(242,70,27,.85),0 0 0 8px rgba(242,70,27,.12)}
#dash .cta svg{stroke-width:2.2}
#dash .round{display:grid;place-items:center;border-radius:50%;border:1.5px solid rgba(20,18,19,.75);background:rgba(255,255,255,.55);box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
#dash .dark .round,#dash .round.light{border-color:rgba(255,255,255,.85);background:rgba(20,16,16,.35);color:#fff}
#dash .accent{color:var(--o2)}
#dash .lbl{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
#dash .bar{height:8px;border-radius:99px;background:rgba(20,18,19,.10);overflow:hidden;box-shadow:0 1px 1px rgba(0,0,0,.08) inset}
#dash .bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--o3),var(--o1));box-shadow:0 0 12px rgba(242,70,27,.6)}
#dash .pill{display:flex;align-items:center;border-radius:999px}
#dash .coin{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe7a3,#f2b233 45%,#b8740f);box-shadow:0 0 0 2px rgba(255,255,255,.6) inset,0 2px 6px rgba(160,90,0,.4);display:grid;place-items:center;font:700 13px var(--cond);color:#8a4d00}
#dash .gem{width:18px;height:24px;background:linear-gradient(135deg,#ff6b6b,#e0101a 55%,#8e0008);clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);filter:drop-shadow(0 2px 3px rgba(160,0,0,.4))}
#dash .avatar{border-radius:50%;background:url(/assets/buehne/mapraiders-tcg-heldin-start-quer.webp) 62% 12%/620% no-repeat;border:2px solid rgba(255,255,255,.9);box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
#dash .dot{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--o2);border:2px solid #fff;display:grid;place-items:center;font:700 9px var(--cond);color:#fff}
#dash .star{color:#fff;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
#dash .jp{font-family:var(--jp);font-weight:900;line-height:1.25;color:var(--ink)}
#dash .mini{font-family:var(--cond);font-size:11px;letter-spacing:.22em;text-transform:uppercase;line-height:1.55;color:var(--ink-2)}
#dash .navtile{position:relative;display:flex;align-items:center;border-radius:16px;color:var(--ink);transition:transform .2s}
#dash .navtile:hover{transform:translateX(3px)}
#dash .navtile.on{color:#fff;background:linear-gradient(180deg,var(--o1),var(--o2) 60%,var(--o3));border:1px solid rgba(255,196,170,.85);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 14px 28px -10px rgba(242,70,27,.8),0 0 0 5px rgba(242,70,27,.12)}
#dash .navtile .dot{top:-4px;right:-4px}

/* ============ DESKTOP ============ */
#dash .m{display:none}
#dash .d{position:relative;min-height:100vh;padding:10px 18px 12px 0;display:grid;grid-template-columns:168px 1fr;
  background:url(/assets/buehne/mapraiders-tcg-heldin-start-quer.webp) 60% 34px/auto 86% no-repeat,url(/assets/hintergrund/mapraiders-tcg-hintergrund-stadt-panorama.webp) center bottom/cover no-repeat,var(--paper)}
#dash .d::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(236,232,228,.97) 0,rgba(236,232,228,.86) 26%,rgba(236,232,228,.30) 42%,rgba(236,232,228,.05) 56%,rgba(236,232,228,.30) 72%,rgba(236,232,228,.62)),
             linear-gradient(0deg,rgba(236,232,228,.9),rgba(236,232,228,0) 30%)}
#dash .d > *{position:relative}
#dash .d-rail{margin:0 14px 0 0;padding:92px 12px 24px 12px;border-radius:0 26px 26px 0;border-left:0;display:flex;flex-direction:column;gap:12px}
#dash .d-rail .navtile{height:64px;padding:0 18px;gap:14px;font:500 18px var(--cond)}
#dash .d-rail .navtile svg{font-size:24px}
#dash .d-rail .navtile.on svg{fill:#fff;stroke:#fff}
#dash .d-rail .foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:14px}
#dash .d-rail .foot .star{font-size:84px}
#dash .d-rail .foot hr{width:70%;border:0;border-top:1px solid rgba(20,18,19,.2)}
#dash .d-main{display:grid;grid-template-rows:auto auto 1fr auto;gap:0;min-width:0}
#dash .d-top{display:flex;align-items:center;gap:18px;height:66px}
#dash .d-top .menu{font-size:30px;stroke-width:1.6;position:absolute;left:-150px;top:10px}
#dash .d-top .logo{height:54px}
#dash .d-top .tag{font:500 14px var(--cond);letter-spacing:.34em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
#dash .d-top .sp{flex:1}
#dash .d-top .search{height:44px;width:clamp(150px,14vw,196px);padding:0 16px;gap:10px;color:var(--ink-3);font-size:15px}
#dash .d-top .search svg{font-size:19px;color:var(--ink)}
#dash .d-top .lang{height:44px;padding:0 14px;gap:8px;font:600 15px var(--cond)}
#dash .d-top .bell{position:relative;font-size:24px;padding:8px}
#dash .d-top .bell .dot{width:9px;height:9px;top:6px;right:7px;border-width:1.5px}
#dash .d-top .user{display:flex;align-items:center;gap:10px;font:600 16px var(--cond);line-height:1.1}
#dash .d-top .user small{display:block;font-weight:500;color:var(--ink-3)}
#dash .d-top .user .avatar{width:44px;height:44px}
#dash .d-top .wallet{height:48px;padding:0 6px 0 12px;gap:10px;font:500 20px var(--cond)}
#dash .d-top .wallet .sep{width:1px;height:22px;background:rgba(20,18,19,.25)}
#dash .d-top .wallet .round{width:36px;height:36px;font-size:20px;border-width:1px}
#dash .d-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,548px);gap:24px;margin-top:6px}
#dash .d-copy{padding:18px 0 0 32px;border-left:1px solid rgba(20,18,19,.3);margin-left:12px;position:relative}
#dash .d-copy .num{display:flex;align-items:center;gap:14px;font:600 16px var(--cond);margin:-12px 0 18px -18px}
#dash .d-copy .num::after{content:"";width:74px;height:1px;background:var(--ink)}
#dash .d-copy .dh1{font:400 clamp(56px,5.9vw,92px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.005em;color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.4)}
#dash .d-copy .dh1 .accent{color:var(--o2);text-shadow:0 10px 30px rgba(242,70,27,.25)}
#dash .d-copy .row{display:flex;gap:26px;margin-top:14px;align-items:flex-start}
#dash .d-copy p{max-width:390px;font:400 17px/1.4 var(--body);color:var(--ink)}
#dash .d-copy .jpbox{border-left:1px solid rgba(20,18,19,.3);padding-left:14px}
#dash .d-copy .jp{font-size:22px}
#dash .d-copy .jpbox .mini{margin-top:12px;font-size:10px}
#dash .d-copy .actions{display:flex;align-items:center;gap:28px;margin-top:20px}
#dash .d-copy .cta{height:58px;padding:0 30px;font-size:22px}
#dash .d-copy .cta svg{font-size:24px}
#dash .trailer{display:flex;align-items:center;gap:12px;font:500 17px/1.05 var(--body)}
#dash .trailer .round{width:48px;height:48px;font-size:18px;background:transparent}
#dash .trailer .round svg{fill:currentColor;stroke:none;margin-left:3px}
#dash .d-side{display:flex;flex-direction:column;gap:16px}
#dash .loc{position:relative;height:238px;overflow:hidden;padding:24px 26px;display:grid;grid-template-columns:1fr auto;border-radius:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 0 36px rgba(120,180,255,.18),0 24px 40px -20px rgba(0,0,0,.6)}
#dash .loc .bg{position:absolute;inset:0;background:url(/assets/buehne/mapraiders-tcg-dashboard-city-evening.webp) center/cover;transform:scale(1.02)}
#dash .loc .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,8,.82),rgba(10,8,8,.45) 45%,rgba(10,8,8,0) 70%)}
#dash .loc > *{position:relative}
#dash .loc .k{display:flex;gap:10px;align-items:center;font:500 13px var(--cond);letter-spacing:.14em;color:#ddd}
#dash .loc .k svg{font-size:20px;color:#fff}
#dash .loc h3{font:600 30px/1 var(--cond);margin:4px 0 0 30px;letter-spacing:.02em}
#dash .loc .wx{display:flex;align-items:center;gap:16px;margin:18px 0 0 6px}
#dash .sun{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,#ffe16b 0 42%,transparent 44%);position:relative}
#dash .sun::before{content:"";position:absolute;inset:-4px;background:repeating-conic-gradient(#ffc93c 0 8deg,transparent 8deg 45deg);-webkit-mask:radial-gradient(circle,transparent 0 58%,#000 60% 72%,transparent 74%);mask:radial-gradient(circle,transparent 0 58%,#000 60% 72%,transparent 74%)}
#dash .loc .deg{font:500 38px/1 var(--cond)}
#dash .loc .deg small{display:block;font:400 15px var(--body);margin-top:2px;color:#ddd}
#dash .loc .cta{margin-top:20px;height:50px;padding:0 24px;font-size:19px;background:linear-gradient(180deg,rgba(255,140,100,.55),rgba(242,70,27,.45));border-color:rgba(255,220,200,.7);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 24px -10px rgba(242,70,27,.9)}
#dash .loc .thumbs{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
#dash .loc .thumbs .ex{width:40px;height:40px;border-radius:10px;border:1.5px solid rgba(255,255,255,.8);display:grid;place-items:center;font-size:18px;margin-bottom:6px}
#dash .loc .thumbs i{width:56px;height:40px;border-radius:6px;border:1.5px solid rgba(255,255,255,.7);background-size:cover;background-position:center}
#dash .loc .same{position:absolute;right:92px;bottom:24px;text-align:right;font:500 12px/1.6 var(--cond);letter-spacing:.24em;color:#eee}
#dash .today{display:grid;grid-template-columns:1.55fr 1fr;padding:0;overflow:hidden}
#dash .today .a{padding:16px 18px 14px}
#dash .today .b{padding:16px 20px 14px;border-left:1px solid rgba(20,18,19,.14)}
#dash .hd{display:flex;align-items:center;gap:10px;font:600 16px var(--cond);text-transform:uppercase;letter-spacing:.02em}
#dash .hd svg{font-size:20px}
#dash .hd .more{margin-left:auto;font-size:20px;stroke-width:3}
#dash .stats{display:grid;grid-template-columns:repeat(5,1fr);margin-top:12px}
#dash .stats div{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;border-left:1px solid rgba(20,18,19,.12)}
#dash .stats div:first-child{border:0}
#dash .stats svg{font-size:22px}
#dash .stats b{font:600 20px/1 var(--cond)}
#dash .stats small{font:500 11px var(--body);color:var(--ink-3)}
#dash .today .b .bar{margin-top:22px}
#dash .today .b .r{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:13px;color:var(--ink-2)}
#dash .today .b .round{width:30px;height:30px;font-size:14px;border-width:1px}
#dash .d-lower{display:grid;grid-template-columns:minmax(0,1fr) 196px 236px;gap:16px;margin-top:16px;align-items:end}
#dash .feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:6px}
#dash .feat{position:relative;height:234px;padding:16px 16px 18px;overflow:hidden;display:flex;flex-direction:column;border-radius:16px}
#dash .feat .n{font:600 16px var(--cond)}
#dash .feat .pic{position:absolute;top:10px;right:10px;width:54%;height:46%;border-radius:12px 12px 12px 40px;background-size:cover;background-position:center;box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}
#dash .feat > svg{font-size:36px;margin-top:22px}
#dash .feat h4{position:relative;font:600 22px/1 var(--cond);text-transform:uppercase;margin-top:auto}
#dash .feat p{font:400 14px/1.4 var(--body);margin-top:10px;color:var(--ink-2);padding-right:40px}
#dash .feat .round{position:absolute;right:14px;bottom:16px;width:40px;height:40px;font-size:18px;border-width:1px}
#dash .cardfan{position:absolute;top:6px;right:8px;width:50%;height:42%}
#dash .cardfan span{position:absolute;inset:0;border-radius:8px;background:#161214 url(/assets/karten/mapraiders-tcg-commander-archangel-gabriel-foil-640.webp) center/cover;border:2px solid #2a2224;box-shadow:0 12px 20px -8px rgba(0,0,0,.55)}
#dash .cardfan span:first-child{transform:rotate(-12deg) translate(-16px,6px);filter:brightness(.7)}
#dash .cardfan span:last-child{transform:rotate(8deg) translate(10px,-2px)}
#dash .deckbox{position:absolute;top:26px;right:8px;width:56%;height:34%;border-radius:10px;background:linear-gradient(160deg,#2b2627,#0b0909);transform:perspective(300px) rotateX(38deg) rotateZ(-14deg);box-shadow:0 20px 20px -10px rgba(0,0,0,.6),0 8px 0 #1a1516}
#dash .deckbox::after{content:"";position:absolute;inset:0;margin:auto;width:34px;height:34px;background:var(--o2);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 6px rgba(242,70,27,.8))}
#dash .topcard{padding:14px 14px 12px;display:flex;flex-direction:column;align-items:center;gap:10px}
#dash .topcard .hd{font-size:14px;align-self:stretch;white-space:nowrap}
#dash .topcard img{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:10px;box-shadow:0 0 0 2px rgba(255,255,255,.6),0 14px 26px -10px rgba(120,0,0,.6)}
#dash .btn-line{display:flex;align-items:center;justify-content:center;gap:10px;height:42px;width:100%;border-radius:99px;border:1.5px solid rgba(20,18,19,.75);font:600 17px var(--cond);text-transform:uppercase;background:rgba(255,255,255,.4)}
#dash .news{padding:14px 12px 12px;display:flex;flex-direction:column;gap:10px}
#dash .news .hd{font-size:15px}
#dash .news .hd a{margin-left:auto;font:500 12px var(--body);text-transform:none;display:flex;gap:6px;align-items:center}
#dash .nitem{position:relative;height:76px;border-radius:10px;overflow:hidden;padding:10px 12px;color:#fff;display:flex;flex-direction:column;justify-content:center}
#dash .nitem .bg{position:absolute;inset:0;background-size:cover;background-position:center}
#dash .nitem .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,6,6,.92) 30%,rgba(8,6,6,.1))}
#dash .nitem > *:not(.bg){position:relative}
#dash .nitem small{font:500 10px var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#ddd}
#dash .nitem b{font:600 22px/1 var(--cond);text-transform:uppercase}
#dash .nitem span{font:400 11.5px var(--body);margin-top:4px;display:flex;gap:4px;align-items:center}
#dash .d-foot{margin-top:12px;height:84px;display:grid;grid-template-columns:160px 1fr auto 1fr auto auto;align-items:center;gap:22px;padding:8px 26px 8px 8px}
#dash .d-foot .img{height:100%;border-radius:10px;background:url(/assets/buehne/mapraiders-tcg-dashboard-pagoda-night.webp) center/cover}
#dash .d-foot h5{font:600 22px var(--cond);text-transform:uppercase}
#dash .d-foot .mini{font-size:12px;letter-spacing:.3em}
#dash .d-foot .mid{display:flex;align-items:flex-end;gap:14px;font:500 12px var(--cond);letter-spacing:.06em}
#dash .d-foot .mid svg{font-size:58px;color:var(--ink);stroke-width:1.4}
#dash .d-foot .dom{font:500 12px var(--cond);letter-spacing:.2em;justify-self:end}
#dash .d-foot .soc{display:flex;gap:22px;font-size:26px}
#dash .d-foot .soc svg{fill:var(--ink);stroke:none}
#dash .d-foot .end{border-left:1px solid rgba(20,18,19,.25);padding-left:20px;font-size:11px}

/* ============ MOBILE ============ */
@media (max-width:1099px){
#dash .d{display:none}
#dash .m{display:block}
}
#dash .m{position:relative;min-height:100vh;max-width:560px;margin:0 auto;padding:12px 12px 20px 0;overflow:hidden;
  background:url(/assets/buehne/mapraiders-tcg-heldin-start-hoch.webp) 52% 0/auto 1060px no-repeat,url(/assets/hintergrund/mapraiders-tcg-hintergrund-stadt-dicht.webp) center 0/auto 100% no-repeat,var(--paper)}
#dash .m::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(236,232,228,.55),rgba(236,232,228,0) 22%,rgba(236,232,228,0) 80%,rgba(236,232,228,.7))}
#dash .m > *{position:relative}
#dash .m-rail{position:absolute;left:0;top:0;bottom:0;width:58px;padding:140px 7px 0;border-radius:0 18px 18px 0;border-left:0;display:flex;flex-direction:column;gap:9px;z-index:2}
#dash .m-rail .navtile{flex-direction:column;justify-content:center;height:56px;gap:3px;font:500 10.5px var(--cond);border-radius:12px;background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.75)}
#dash .m-rail .navtile svg{font-size:20px}
#dash .m-rail .navtile.on{background:linear-gradient(180deg,var(--o1),var(--o2) 60%,var(--o3));border-color:rgba(255,196,170,.85)}
#dash .m-rail .navtile.on svg{fill:#fff}
#dash .m-rail .navtile .dot{width:13px;height:13px;font-size:8px;top:-3px;right:-3px}
#dash .m-rail .menu{position:absolute;top:18px;left:14px;font-size:26px;stroke-width:1.6}
#dash .m-rail .foot{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:10px}
#dash .m-rail .foot .star{font-size:46px}
#dash .m-rail .foot .mini{font-size:6.5px;letter-spacing:.18em;text-align:center}
#dash .m-wrap{margin-left:66px}
#dash .m-top{display:flex;align-items:flex-start;gap:8px}
#dash .m-top .hi{font:400 13px/1.2 var(--body);flex:1;min-width:0}
#dash .m-top .hi b{font:600 17px var(--cond);display:block}
#dash .m-top .hi small{font-size:9.5px;color:var(--ink-2)}
#dash .m-top .wallet{height:32px;padding:0 3px 0 6px;gap:6px;font:500 14px var(--cond)}
#dash .m-top .wallet .coin{width:19px;height:19px;font-size:10px}
#dash .m-top .wallet .gem{width:13px;height:17px}
#dash .m-top .wallet .round{width:24px;height:24px;font-size:14px;border-width:1px}
#dash .m-top .av{position:relative}
#dash .m-top .avatar{width:40px;height:40px}
#dash .m-top .av .dot{top:-2px;right:-2px;width:11px;height:11px}
#dash .m-brand{display:grid;grid-template-columns:1fr 90px;gap:8px;margin-top:10px}
#dash .m-brand .logo{width:100%;margin-left:-6px}
#dash .m-brand .era{font:500 9px var(--cond);letter-spacing:.36em;text-align:center;margin-top:2px}
#dash .m-brand .side{border-left:1px solid rgba(20,18,19,.35);padding-left:8px}
#dash .m-brand .side .mini{font-size:8.5px;letter-spacing:.2em}
#dash .m-brand .side .p{width:60%;height:2px;margin:10px 0;background:linear-gradient(90deg,var(--o2) 60%,rgba(20,18,19,.15) 60%)}
#dash .m-grid{display:grid;grid-template-columns:minmax(0,158px) 1fr 132px;gap:0;margin-top:6px}
#dash .m-grid > .m-r{grid-column:3}
#dash .m-l{display:flex;flex-direction:column;gap:10px;min-width:0}
#dash .m-r{display:flex;flex-direction:column;gap:10px}
#dash .m-jp{padding-left:4px}
#dash .m-jp .jp{font-size:19px}
#dash .m-jp .mini{font-size:7.5px;margin-top:6px}
#dash .m-jp .yr{font:500 9px var(--cond);text-align:right;margin-top:4px;color:var(--ink-2)}
#dash .m-card1{padding:12px 12px 12px}
#dash .m-card1 .n{font:600 14px var(--cond)}
#dash .m-card1 h2{font:400 29px/.92 var(--display);text-transform:uppercase;margin-top:6px}
#dash .m-card1 .mini{font-size:8px;margin-top:8px;letter-spacing:.12em}
#dash .m-card1 .cta{height:34px;padding:0 12px;font-size:12.5px;gap:.5em;margin-top:10px;white-space:nowrap}
#dash .m-card1 .th{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}
#dash .m-card1 .th i{aspect-ratio:1.1;border-radius:6px;background-size:cover;background-position:center;border:1.5px solid rgba(255,255,255,.8);box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
#dash .m-card1 .dots{display:flex;gap:4px;justify-content:center;margin-top:8px}
#dash .m-card1 .dots i{width:5px;height:5px;border-radius:9px;background:rgba(20,18,19,.2)}
#dash .m-card1 .dots i:first-child{width:14px;background:var(--o2)}
#dash .m-spots{padding:10px}
#dash .m-spots .hd{font-size:11.5px;gap:5px;white-space:nowrap}
#dash .m-spots .hd svg{font-size:15px}
#dash .m-spots .hd a{margin-left:auto;font:400 9px var(--body);align-items:center;text-transform:none;display:flex;gap:4px}
#dash .mapbox{position:relative;height:118px;border-radius:10px;margin-top:8px;overflow:hidden;background:#1a1717}
#dash .mapbox svg.net{position:absolute;inset:0;width:100%;height:100%;stroke:none}
#dash .mapbox .pin{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:30px;color:#fff;filter:drop-shadow(0 0 10px rgba(242,70,27,.9))}
#dash .mapbox .pin svg{fill:#fff;stroke:#fff}
#dash .mapbox .t{position:absolute;left:10px;bottom:8px;color:#fff;font:600 15px/1 var(--cond)}
#dash .mapbox .t small{display:block;font:400 10px var(--body);margin-top:2px}
#dash .mapbox .ppl{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;background:rgba(255,255,255,.9);border-radius:99px;padding:2px 6px 2px 2px;font:600 10px var(--cond)}
#dash .mapbox .ppl i{width:18px;height:18px;border-radius:50%;margin-right:-5px;border:1.5px solid #fff;background:url(/assets/buehne/mapraiders-tcg-heldin-start-quer.webp) 62% 12%/620%}
#dash .mapbox .ppl i:nth-child(2){filter:grayscale(1)}
#dash .mapbox .ppl b{margin-left:8px}
#dash .m-quests{padding:10px}
#dash .m-quests .hd{font-size:12.5px;gap:6px;align-items:flex-start}
#dash .m-quests .hd svg{font-size:20px}
#dash .m-quests .hd small{display:block;font:400 9.5px var(--body);text-transform:none;color:var(--ink-2)}
#dash .m-quests .bar{height:6px;margin:8px 0}
#dash .q{display:flex;align-items:center;gap:7px;height:26px;padding:0 8px;border-radius:7px;background:rgba(255,255,255,.55);margin-top:4px;font:400 9.5px var(--body);white-space:nowrap}
#dash .q b{margin-left:auto;font:500 10px var(--cond)}
#dash .q .ck{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:9px;color:#fff;background:#2f8a4a}
#dash .q .ck svg{stroke-width:3.5}
#dash .q .ck.no{background:none;border:1.5px solid var(--o2);box-shadow:0 0 0 2px rgba(242,70,27,.15) inset}
#dash .m-wx{padding:10px;display:grid;grid-template-columns:1fr;position:relative;overflow:hidden}
#dash .m-wx .k{display:flex;gap:4px;align-items:center;font:600 11.5px var(--cond);letter-spacing:.06em}
#dash .m-wx .k svg{font-size:14px}
#dash .m-wx .row{display:flex;align-items:center;gap:8px;margin-top:8px}
#dash .m-wx .sun{width:30px;height:30px}
#dash .m-wx .deg{font:500 28px/1 var(--cond)}
#dash .m-wx .deg small{display:block;font:400 10px var(--body)}
#dash .m-wx .city{position:absolute;right:0;top:0;bottom:0;width:44%;background:url(/assets/buehne/mapraiders-tcg-dashboard-city-evening.webp) 40% center/cover;-webkit-mask:linear-gradient(90deg,transparent,#000 45%);mask:linear-gradient(90deg,transparent,#000 45%)}
#dash .m-wx .round{position:absolute;right:6px;bottom:6px;width:22px;height:22px;font-size:11px;border-width:1px}
#dash .m-today{padding:10px 6px 8px}
#dash .m-today .hd{font-size:12px;gap:5px;padding-left:4px}
#dash .m-today .hd svg{font-size:14px}
#dash .m-today .stats{grid-template-columns:repeat(4,1fr);margin-top:8px}
#dash .m-today .stats svg{font-size:16px}
#dash .m-today .stats b{font-size:12px;white-space:nowrap}
#dash .m-today .stats small{font-size:7.5px}
#dash .m-top1{padding:9px 8px 8px}
#dash .m-top1 .hd{font-size:10.5px;gap:4px;white-space:nowrap}
#dash .m-top1 .hd svg{font-size:14px}
#dash .m-top1 .cardwrap{position:relative;margin-top:7px}
#dash .m-top1 img{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1.5px rgba(255,255,255,.7),0 10px 18px -8px rgba(120,0,0,.6)}
#dash .m-top1 .round{position:absolute;right:-6px;top:58%;width:28px;height:28px;font-size:13px;background:#fff;border-width:1px}
#dash .m-top1 .lbl{text-align:center;font-size:13px;margin-top:7px}
#dash .m-realm{position:relative;height:80px;padding:10px;overflow:hidden;border-radius:14px}
#dash .m-realm .bg{position:absolute;inset:0;background:url(/assets/buehne/mapraiders-tcg-dashboard-pagoda-night.webp) 70% center/cover}
#dash .m-realm .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,6,6,.9) 25%,rgba(8,6,6,.1))}
#dash .m-realm > *:not(.bg){position:relative}
#dash .m-realm small{font:500 8.5px var(--cond);letter-spacing:.16em;color:#ddd;display:block}
#dash .m-realm b{font:600 22px/1 var(--cond);display:block;margin-top:2px}
#dash .m-realm .round{position:absolute;right:8px;bottom:8px;width:26px;height:26px;font-size:12px;border-width:1px}
#dash .m-leg{padding-left:6px}
#dash .m-leg .jp{font-size:9.5px;font-weight:700;white-space:nowrap}
#dash .m-leg .mini{font-size:6.5px;margin-top:4px}
#dash .m-leg i{display:block;width:44%;height:2px;margin-top:8px;background:linear-gradient(90deg,var(--o2),transparent)}

@media (max-width:400px){
#dash .m-grid{grid-template-columns:minmax(0,150px) 1fr 122px}
#dash .m-card1 h2{font-size:27px}
}
#dash .m .glass{background:linear-gradient(160deg,rgba(255,255,255,.58),rgba(255,255,255,.26))}
@media (prefers-reduced-motion:no-preference){
#dash .rise{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
#dash .rise.b{animation-delay:.08s}
#dash .rise.c{animation-delay:.16s}
#dash .rise.e{animation-delay:.24s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#dash .mapbox .pulse{animation:pulse 2.4s ease-out infinite;transform-origin:center;transform-box:fill-box}
  @keyframes pulse{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.4)}}
}

/* ============ GLASS BUTTONS ============ */
#dash{
  /* glass thickness: lit top edge, light leaving at the bottom edge, darker lower body */
  --gbody:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.35),
         inset 0 12px 16px -12px rgba(255,255,255,.6),inset 0 -12px 16px -12px rgba(0,0,0,.28);
  --glint:-1px -1px 5px -1px rgba(255,248,232,.75);
  --shadow:0 1px 1px rgba(8,10,14,.22),0 6px 10px -4px rgba(8,10,14,.38),0 16px 26px -12px rgba(8,10,14,.45);
  --shadow-up:0 2px 2px rgba(8,10,14,.22),0 10px 14px -4px rgba(8,10,14,.4),0 24px 34px -12px rgba(8,10,14,.48);
  /* the edge catches light unevenly */
  --edge:linear-gradient(145deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.92) 20%,rgba(255,255,255,.45) 42%,rgba(255,255,255,.22) 62%,rgba(255,255,255,.5) 88%,rgba(255,255,255,.8) 100%);
  --edge-warm:linear-gradient(145deg,rgba(255,246,232,1) 0%,rgba(255,220,195,.85) 14%,rgba(255,190,150,.35) 40%,rgba(255,170,120,.18) 62%,rgba(255,205,165,.5) 88%,rgba(255,225,200,.75) 100%);
}
#dash .round{position:relative}
#dash .d .navtile,#dash .m .navtile,#dash .d .cta,#dash .m .cta,#dash .btn-line,#dash .pill{position:relative}
#dash .d .navtile,#dash .m .navtile,#dash .d .cta,#dash .m .cta,#dash .d .round,#dash .m .round,#dash .btn-line,#dash .pill{isolation:isolate;border:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,filter .3s}
#dash .d .navtile:hover,#dash .m .navtile:hover,#dash .d .cta:hover,#dash .m .cta:hover,#dash .d .round:hover,#dash .m .round:hover,#dash .btn-line:hover,#dash .pill:hover{transform:translateY(-2px)}
#dash .d .navtile:active,#dash .m .navtile:active,#dash .d .cta:active,#dash .m .cta:active,#dash .d .round:active,#dash .m .round:active,#dash .btn-line:active,#dash .pill:active{transform:translateY(1px) scale(.985)}

/* the edge: a thin ring, brightest where the light hits (top left) */
#dash .d .navtile::before,#dash .m .navtile::before,#dash .d .cta::before,#dash .m .cta::before,#dash .d .round::before,#dash .m .round::before,#dash .btn-line::before,#dash .pill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:radial-gradient(22px 18px at 0 0,#fff,rgba(255,255,255,0) 80%),var(--edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
#dash .d .cta::before,#dash .m .cta::before,#dash .d .navtile.on::before,#dash .m .navtile.on::before{background:radial-gradient(22px 18px at 0 0,#fff8ee,rgba(255,255,255,0) 80%),var(--edge-warm)}

/* inside the glass: soft reflection across the upper part, warm light pooled in the top left corner,
   a band that sweeps across on hover */
#dash .d .navtile::after,#dash .m .navtile::after,#dash .d .cta::after,#dash .m .cta::after,#dash .d .round::after,#dash .m .round::after,#dash .btn-line::after,#dash .pill::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:
    linear-gradient(105deg,transparent 36%,rgba(255,255,255,.45) 45%,rgba(255,255,255,.1) 52%,transparent 60%) -140% 0/220% 100% no-repeat,
    radial-gradient(28px 24px at 0 0,rgba(255,244,222,.7),rgba(255,236,205,.18) 50%,rgba(255,255,255,0) 80%),
    radial-gradient(110% 60% at 30% -8%,rgba(255,255,255,.34),rgba(255,255,255,.08) 55%,rgba(255,255,255,0) 72%);
  transition:background-position 1s cubic-bezier(.2,.8,.2,1)}
#dash .d .navtile:hover::after,#dash .m .navtile:hover::after,#dash .d .cta:hover::after,#dash .m .cta:hover::after,#dash .d .round:hover::after,#dash .m .round:hover::after,#dash .btn-line:hover::after,#dash .pill:hover::after{background-position:240% 0,0 0,0 0}

/* clear nav tiles: the glass brightens and blurs the city behind it, labels white */
#dash .d .navtile:not(.on),#dash .m .navtile:not(.on){color:#fff;text-shadow:0 1px 2px rgba(15,18,26,.5);
  background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.09) 45%,rgba(255,255,255,.04) 72%,rgba(255,255,255,.1) 100%);
  -webkit-backdrop-filter:blur(8px) saturate(135%) brightness(1.18);backdrop-filter:blur(8px) saturate(135%) brightness(1.18);
  box-shadow:var(--glint),var(--gbody),var(--shadow)}
#dash .d .navtile:not(.on):hover,#dash .m .navtile:not(.on):hover{box-shadow:var(--glint),var(--gbody),var(--shadow-up)}
#dash .d .navtile:not(.on) svg,#dash .m .navtile:not(.on) svg{filter:drop-shadow(0 1px 1.5px rgba(15,18,26,.45))}

/* the rails carry the blurred city so the clear tiles have something to show */
#dash .d-rail,#dash .m-rail{isolation:isolate;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0;
  box-shadow:inset -1.5px 0 0 rgba(255,255,255,.9),inset 0 -1.5px 0 rgba(255,255,255,.9),inset 0 1.5px 0 rgba(255,255,255,.9),6px 0 16px -6px rgba(255,255,255,.6),16px 0 40px -20px rgba(18,22,32,.45)}
#dash .d-rail::before,#dash .m-rail::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:url(/assets/hintergrund/mapraiders-tcg-hintergrund-stadt-dicht.webp) 30% center/auto 100% no-repeat,#b9b8bb;filter:blur(3px) saturate(.9);opacity:.9;
  clip-path:inset(0 round 0 18px 18px 0)}
#dash .d-rail::before{clip-path:inset(0 round 0 26px 26px 0)}
#dash .d-rail .foot hr{border-top-color:rgba(255,255,255,.5)}
#dash .d-rail .foot .mini,#dash .m-rail .foot .mini{color:#fff;text-shadow:0 1px 2px rgba(15,18,26,.5)}
#dash .m-rail .menu,#dash .d-top .menu{color:#fff;filter:drop-shadow(0 1px 2px rgba(15,18,26,.5))}

/* panels: milky frosted glass, bright rim with a soft white halo */
#dash .d .glass:not(.navtile):not(.pill):not(.d-rail),#dash .m .glass:not(.navtile):not(.pill):not(.m-rail){
  background:linear-gradient(160deg,rgba(255,255,255,.44),rgba(255,255,255,.20));
  -webkit-backdrop-filter:blur(6px) saturate(115%);backdrop-filter:blur(6px) saturate(115%);
  border:0;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.92),0 0 5px rgba(255,255,255,.8),0 0 18px rgba(255,255,255,.4),inset 0 0 18px rgba(255,255,255,.45),0 24px 40px -22px rgba(18,22,32,.5)}

/* pills (wallet, search, language) and the outline button: milky glass, dark text */
#dash .pill,#dash .btn-line{color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.36) 55%,rgba(255,255,255,.44) 100%);
  -webkit-backdrop-filter:blur(10px) saturate(125%) brightness(1.05);backdrop-filter:blur(10px) saturate(125%) brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.5),inset 0 -10px 14px -10px rgba(0,0,0,.14),var(--shadow)}
#dash .btn-line{box-shadow:inset 0 0 0 1.5px rgba(20,18,19,.65),inset 0 1px 0 2px rgba(255,255,255,.7),var(--shadow)}
#dash .btn-line::before{content:none}

/* round buttons on light glass: white glass ball */
#dash .d .round,#dash .m .round{color:var(--ink);
  background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.98) 0,rgba(255,255,255,.85) 45%,rgba(232,234,240,.8) 100%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 -3px 5px rgba(20,24,34,.12),0 1px 1px rgba(8,10,14,.2),0 6px 10px -4px rgba(8,10,14,.4)}
/* round buttons on dark images: smoked glass, white arrow */
#dash .d .round.light,#dash .m .round.light,#dash .dark .round,#dash .nitem .round{color:#fff;
  background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.26),rgba(255,255,255,.06) 55%,rgba(10,10,14,.28) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.25),0 1px 1px rgba(0,0,0,.3),0 6px 10px -4px rgba(0,0,0,.55)}
#dash .d .round::after,#dash .m .round::after{background:radial-gradient(60% 45% at 38% 18%,rgba(255,255,255,.7),rgba(255,255,255,0) 75%)}
#dash .trailer .round{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
#dash .trailer .round::before,#dash .trailer .round::after{content:none}

/* orange glass: tinted body, lit from the top, warm edge, a soft glow instead of a neon halo */
#dash .d .cta,#dash .m .cta,#dash .d .navtile.on,#dash .m .navtile.on{color:#fff;text-shadow:0 1px 2px rgba(120,20,0,.4);
  background:
    radial-gradient(80% 60% at 50% 110%,rgba(255,190,120,.55),rgba(255,160,100,0) 70%),
    linear-gradient(180deg,rgba(255,132,84,.96) 0%,rgba(245,82,31,.94) 55%,rgba(228,62,14,.96) 100%);
  box-shadow:inset 0 1px 0 rgba(255,236,222,.9),inset 0 -1px 0 rgba(255,210,170,.6),
             inset 0 12px 16px -12px rgba(255,230,210,.75),inset 0 -12px 16px -12px rgba(110,20,0,.35),
             0 0 16px -2px rgba(255,90,40,.5),0 1px 1px rgba(90,20,0,.25),0 6px 10px -4px rgba(110,25,0,.4),0 16px 26px -12px rgba(120,25,0,.5)}
#dash .d .cta:hover,#dash .m .cta:hover,#dash .d .navtile.on:hover,#dash .m .navtile.on:hover{box-shadow:inset 0 1px 0 rgba(255,236,222,.95),inset 0 -1px 0 rgba(255,210,170,.7),
             inset 0 12px 16px -12px rgba(255,230,210,.85),inset 0 -12px 16px -12px rgba(110,20,0,.35),
             0 0 22px -2px rgba(255,90,40,.6),0 2px 2px rgba(90,20,0,.25),0 10px 14px -4px rgba(110,25,0,.42),0 24px 34px -12px rgba(120,25,0,.52)}
#dash .d .cta::after,#dash .m .cta::after,#dash .d .navtile.on::after,#dash .m .navtile.on::after{background:
    linear-gradient(105deg,transparent 36%,rgba(255,255,255,.4) 45%,rgba(255,255,255,.1) 52%,transparent 60%) -140% 0/220% 100% no-repeat,
    radial-gradient(26px 22px at 0 0,rgba(255,244,222,.5),rgba(255,226,190,.15) 50%,rgba(255,255,255,0) 80%),
    radial-gradient(110% 60% at 30% -8%,rgba(255,240,225,.38),rgba(255,230,210,.08) 55%,rgba(255,255,255,0) 72%)}
#dash .d .cta svg,#dash .m .cta svg,#dash .d .navtile.on svg,#dash .m .navtile.on svg{fill:#fff;filter:drop-shadow(0 1px 2px rgba(120,20,0,.45))}
#dash .d .cta svg,#dash .m .cta svg{fill:none}
#dash .loc .cta{background:
    radial-gradient(80% 60% at 50% 110%,rgba(255,190,120,.45),transparent 70%),
    linear-gradient(180deg,rgba(255,132,84,.75),rgba(228,62,14,.66))}
#dash .d-rail .navtile{height:62px;padding:0 12px 0 16px;gap:12px}

/* in the game: the rail is the game's own, the page carries the city itself */
#menue.seite{background:#ece8e4!important}
#menue > #dash.karte{position:relative;display:block;max-width:none;width:100%;min-height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible;color:var(--ink)}
#menue > #dash.karte::before,#menue > #dash.karte::after{content:none}
#dash .d{grid-template-columns:minmax(0,1fr);padding:10px 18px 12px 22px;min-height:100dvh;transition:padding-left .38s cubic-bezier(.2,.8,.2,1)}
#dash .d-main{grid-template-rows:auto auto auto auto}
#dash .m{max-width:none;min-height:100dvh;padding:12px 10px 22px 10px}
#dash .m-wrap{margin-left:0;transition:padding-left .38s cubic-bezier(.2,.8,.2,1)}
/* desktop: the lower row moves up (Owner 28.09.2026 "weiter hoch ziehen ... ohne gleich scrollen"). Card of the day and
   news fill the gap under "today", the four tiles start right under the text; one grid instead of two stacked rows. */
@media (min-width:1100px){
  #dash .d-main{grid-template-columns:minmax(0,1fr) 196px 244px;grid-template-rows:none;column-gap:20px;
    grid-template-areas:"top top top" "copy side side" "copy card news" "feats card news" "foot foot foot"}
  #dash .d-hero,#dash .d-lower{display:contents}
  #dash .d-top{grid-area:top}
  #dash .d-copy{grid-area:copy;margin-top:6px;align-self:start}
  #dash .d-side{grid-area:side;margin-top:6px}
  #dash .feats{grid-area:feats;margin-top:14px;align-self:start}
  /* the card may reach below the tiles: its height must not push the tiles down */
  #dash .topcard{grid-area:card;margin:14px 0 -120px;align-self:start}
  #dash .news{grid-area:news;margin:14px 0 -120px;align-self:start}
  #dash .d-foot{grid-area:foot;margin-top:136px}
}
@media (min-width:1100px) and (max-height:860px){
  #dash .d-copy .dh1{font-size:clamp(56px,min(5.9vw,10.5vh),92px)}
  #dash .d-copy .row{margin-top:10px}
  #dash .d-copy .actions{margin-top:14px}
}
/* the middle column: weekly missions and world ranking (Owner 28.09.2026) */
#dash .d-info{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (min-width:1440px){
  #dash .d-main{grid-template-columns:minmax(0,1fr) 284px 196px 244px;
    grid-template-areas:"top top top top" "copy info side side" "copy info card news" "feats feats card news" "foot foot foot foot"}
  #dash .d-info{grid-area:info;margin-top:6px;align-self:start}
}
@media (min-width:1440px) and (max-width:1799px){ #dash .d-copy .jpbox{display:none} }
@media (min-width:1100px) and (max-width:1439px){
  #dash .d-main{grid-template-areas:"top top top" "copy side side" "copy card news" "feats card news" "info . ." "foot foot foot"}
  #dash .d-info{grid-area:info;flex-direction:row;align-items:flex-start;margin-top:14px}
  #dash .d-info > *{flex:1 1 0}
}
#dash .quests{padding:13px 14px 11px}
#dash .quests .hd{align-items:flex-start;gap:10px;font-size:16px}
#dash .quests .hd > svg:first-child{font-size:26px}
#dash .quests .hd small{display:block;margin-top:1px;font:400 12.5px var(--body);text-transform:none;letter-spacing:0;color:var(--ink-2)}
#dash .quests .bar{height:9px;margin:9px 0 4px}
#dash .quests .q{height:27px;margin-top:4px;padding:0 10px;border-radius:9px;font-size:12.5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
#dash .quests .q b{font-size:14px}
#dash .q .tx{min-width:0;overflow:hidden;text-overflow:ellipsis}
#dash .quests .q .ck{flex:none;width:20px;height:20px;font-size:12px}
#dash .q .ck.no{background:radial-gradient(circle,#fff 0 30%,transparent 33%),rgba(242,70,27,.08)}
#dash .rang{padding:11px 14px 11px}
#dash .rang .hd{font-size:15px;gap:8px;flex-wrap:wrap}
#dash .rang .tabs{flex:1 0 100%;margin:7px 0 0;display:flex;gap:2px;padding:3px;border-radius:99px;background:rgba(20,18,19,.07)}
#dash .rang .tabs button{flex:1 1 auto;border:0;background:none;padding:5px 6px;border-radius:99px;font:600 11px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#dash .rang .tabs button[aria-pressed=true]{background:#fff;color:var(--o3);box-shadow:0 2px 6px -2px rgba(0,0,0,.25)}
#dash .rang ol{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
#dash .rang li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;height:27px;padding:0 10px;border-radius:9px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);font:400 13px var(--body)}
#dash .rang li .nr{font:600 15px var(--cond);color:var(--ink-3)}
#dash .rang li:nth-child(1) .nr{color:#c9a227}
#dash .rang li:nth-child(2) .nr{color:#8f98a3}
#dash .rang li:nth-child(3) .nr{color:#b8733a}
#dash .rang li .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dash .rang li .nm small{margin-left:6px;font:600 11px var(--cond);letter-spacing:.04em;color:var(--ink-3)}
#dash .rang li b{font:600 14px var(--cond)}
#dash .rang li.ich{background:rgba(242,70,27,.12);box-shadow:inset 0 0 0 1.5px rgba(242,70,27,.4)}
#dash .rang li.ich .nr,#dash .rang li.ich .nm small{color:var(--o3)}
#dash .rang li.leer{display:block;height:auto;padding:9px 10px;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
#dash .rang li.leer[data-go]{cursor:pointer;color:var(--o3);font-weight:600}
#dash .today .b .sn{margin-top:5px;font:600 15px/1.1 var(--cond);text-transform:uppercase;letter-spacing:.02em;color:var(--o3)}
#dash .today .b .bar{margin-top:10px}
#dash .m-quests .q{height:auto;min-height:26px;padding:4px 8px;white-space:normal;line-height:1.2}
#dash .m-rang{padding:10px}
#dash .m-rang .hd{font-size:12.5px;flex-wrap:wrap;row-gap:6px}
#dash .m-rang .tabs{display:grid;grid-template-columns:1fr 1fr;border-radius:12px}
#dash .m-rang .tabs button{padding:4px 2px;font-size:10px}
#dash .m-rang li{height:auto;min-height:26px;padding:4px 8px;font-size:11px;grid-template-columns:16px minmax(0,1fr);column-gap:6px;row-gap:0}
#dash .m-rang li b{grid-column:2;font-size:11px;color:var(--ink-2)}
#dash .m-rang li .nr{grid-row:span 2}
#dash .m-rang li .nr{font-size:13px}
body.rail-zu #dash .d{padding-left:86px}
body.rail-zu #dash .m-top{padding-left:52px}
#dash button{font:inherit;color:inherit;cursor:pointer}
#dash [data-go]{cursor:pointer}
#dash .d-top .lang{position:relative}
#dash .d-top .lang > summary{list-style:none;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;cursor:pointer}
#dash .d-top .lang > summary::-webkit-details-marker{display:none}
#dash .d-top .lang .sprachwahl{position:absolute;right:0;top:52px;z-index:5;display:flex;flex-direction:column;min-width:170px;padding:6px;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 18px 30px -12px rgba(18,22,32,.45)}
html[lang=ar] :is(p,li,h1,h2,h3,h4,h5,span,b,i,em,strong,small,label,button,a,td,th,summary,figcaption,blockquote){unicode-bidi:plaintext}
#dash .d-top .lang .sprachwahl{max-height:min(70vh,560px);overflow-y:auto}
#dash .d-top .lang .sprachwahl button{padding:9px 12px;border-radius:9px;text-align:left;font:500 15px var(--body)}
#dash .d-top .lang .sprachwahl button[aria-pressed=true]{background:rgba(242,70,27,.12);color:var(--o3)}
#dash .d-top .musik{display:flex;align-items:center}
/* the music button on the phone's start menu, left of the profile (the menu pages' one sits in #kopf-rechts), Owner 29.09.2026;
   on the start screen the same orange note on glass as everywhere else, which #dash button would blank */
#dash .m-top .musik,#kopf-rechts .musik{display:flex;align-items:center;flex:none}
#dash .m-top .mr-musik{width:40px;height:40px}
#dash .musik button{color:#f2461b;background:rgba(255,255,255,.74)}
#dash .musik button[aria-pressed=false]{color:#8a8284}
#dash .app-inst{position:relative;flex:none}
#dash .app-inst[hidden]{display:none}
#dash .app-inst > button{gap:8px;height:44px;padding:0 16px;font:600 14px var(--cond);letter-spacing:.04em;white-space:nowrap}
#dash .app-inst > button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4}
#dash .app-inst > button.rund{width:40px;height:40px;padding:0;justify-content:center}
#dash .app-tipp{position:absolute;right:0;top:calc(100% + 8px);z-index:6;width:min(260px,76vw);padding:10px 12px;font:400 13px/1.35 var(--body);border-radius:12px;background:rgba(255,255,255,.96)}
#dash .app-tipp[hidden]{display:none}
#dash .d-top .user{cursor:pointer}
#dash .d-top .user img,#dash .m-top .av img{border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.9);box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
#dash .d-top .user img{width:44px;height:44px}
#dash .m-top .av img{width:40px;height:40px}
#dash .wallet .xp{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;background:radial-gradient(circle at 35% 30%,#ffb08c,#f2461b 55%,#a82a08);box-shadow:0 0 0 2px rgba(255,255,255,.6) inset}
#dash .wallet .xp svg{font-size:14px;fill:#fff;stroke:none}
#dash .wallet .kt{display:grid;place-items:center;font-size:20px}
#dash .m-top .wallet .xp{width:19px;height:19px}#dash .m-top .wallet .xp svg{font-size:11px}#dash .m-top .wallet .kt{font-size:15px}
#dash .loc .ort{display:flex;align-items:center;gap:16px;margin:18px 0 0 6px}
#dash .loc .ort .stern{font-size:40px;color:#ffc93c;filter:drop-shadow(0 0 10px rgba(255,180,60,.6))}
#dash .loc .ort b{display:block;font:500 30px/1 var(--cond)}
#dash .loc .ort small{display:block;font:400 15px var(--body);margin-top:2px;color:#ddd}
#dash .m-wx .ort{display:flex;align-items:center;gap:8px;margin-top:8px;max-width:62%}
#dash .m-wx .ort .stern{font-size:26px;color:#ffb627}
#dash .m-wx .ort b{display:block;font:500 17px/1.05 var(--cond)}
#dash .m-wx .ort small{display:block;font:400 10px var(--body)}
#dash .d-foot .soc{gap:14px;font-size:inherit;align-items:center}
#dash .d-foot .soc a{font:600 13px var(--cond);letter-spacing:.14em;text-transform:uppercase}
#dash .d-foot .soc .sprachwahl{display:none}
#dash .m-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin-top:18px;font:600 12px var(--cond);letter-spacing:.14em;text-transform:uppercase}
#dash .m-fuss .sprachwahl{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:100%}
#dash .m-fuss .sprachwahl button{padding:6px 10px;border-radius:99px;background:rgba(255,255,255,.55);font:500 12px var(--body);letter-spacing:0;text-transform:none}
#dash .m-fuss .sprachwahl button[aria-pressed=true]{background:rgba(242,70,27,.14);color:var(--o3)}
#dash .mapbox .ppl{padding:3px 8px}
#dash .mapbox .ppl b{margin:0}
#dash .q{overflow:hidden}
#dash .q span.tx{overflow:hidden;text-overflow:ellipsis}
#dash .topcard img,#dash .m-top1 img{background:#161214}
#dash .dash-alt{display:none!important}
#dash .today .b,#dash .stats [data-go],#dash .m-quests{cursor:pointer}
#dash .stats [data-go]:hover b{color:var(--o2)}
#dash .m-arena{height:auto;min-height:124px;padding:14px 12px 12px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
#dash .m-arena .bg{background-image:url(/assets/buehne/mapraiders-tcg-dashboard-shadow-warrior.webp)!important;background-position:80% 30%!important}
#dash .m-arena b{font-size:26px}
#dash .m-arena em{font:400 10.5px/1.3 var(--body);font-style:normal;color:#eee;max-width:70%}
#dash .m-arena .round{width:34px!important;height:34px!important;font-size:16px!important;right:10px;bottom:10px;background:var(--o2)!important;color:#fff}
#dash .m-spots .hd a span{display:none}
#dash .d-top .logo{width:auto;height:54px}
#dash .m-brand .logo{height:auto}
#dash .topcard img,#dash .m-top1 img{height:auto}
@media (max-width:1560px){ #dash .d-top .tag{display:none} }
#dash .d-top .user div{white-space:nowrap}
#dash .loc .ort b{font-size:24px;line-height:1.05}
#dash .mapbox .ppl{top:8px;bottom:auto}
#dash .m-wx .ort b{font-size:15px}
@media (prefers-reduced-motion:reduce){ #dash .d,#dash .m-wrap{transition:none} }

/* ====== the shop, taken over from the restyle preview (Owner 28.09.2026), scoped to #shop-inhalt ====== */

#shop-inhalt{
  --ink:#141213; --ink-2:#3a3536; --ink-3:#6b6365;
  --paper:#ece8e4;
  --o1:#ff7440; --o2:#f2461b; --o3:#cf2d0b;
  --glass:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.30));
  --glass-line:rgba(255,255,255,.75);
  --glass-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -1px 0 rgba(0,0,0,.04) inset,0 22px 44px -22px rgba(52,24,12,.42);
  --dark:linear-gradient(160deg,rgba(34,28,28,.78),rgba(14,12,12,.86));
  --r:18px;
  --cond:'Barlow Condensed',system-ui,sans-serif;
  --body:'Barlow',system-ui,sans-serif;
  --display:'Anton',Impact,sans-serif;
  --jp:'Noto Sans JP',sans-serif;
}
#shop-inhalt *{box-sizing:border-box;margin:0;padding:0}
#shop-inhalt{-webkit-text-size-adjust:100%}
#shop-inhalt{background:var(--paper);color:var(--ink);font-family:var(--body);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
#shop-inhalt img{display:block;max-width:100%}
#shop-inhalt svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
#shop-inhalt a{color:inherit;text-decoration:none}
#shop-inhalt button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- shared components ---------- */
#shop-inhalt .glass{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);border-radius:var(--r)}
#shop-inhalt .dark{background:var(--dark);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 24px 40px -20px rgba(0,0,0,.55);border-radius:var(--r);color:#f4efec}
#shop-inhalt .cond{font-family:var(--cond);text-transform:uppercase;letter-spacing:.02em}
#shop-inhalt .cta{display:inline-flex;align-items:center;gap:.8em;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#fff;
  background:linear-gradient(180deg,var(--o1),var(--o2) 55%,var(--o3));border-radius:999px;border:1px solid rgba(255,190,160,.8);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -2px 6px rgba(120,20,0,.35) inset,0 12px 30px -8px rgba(242,70,27,.75),0 0 0 6px rgba(242,70,27,.10);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
#shop-inhalt .cta:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -2px 6px rgba(120,20,0,.35) inset,0 18px 38px -8px rgba(242,70,27,.85),0 0 0 8px rgba(242,70,27,.12)}
#shop-inhalt .cta svg{stroke-width:2.2}
#shop-inhalt .round{display:grid;place-items:center;border-radius:50%;border:1.5px solid rgba(20,18,19,.75);background:rgba(255,255,255,.55);box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
#shop-inhalt .dark .round,#shop-inhalt .round.light{border-color:rgba(255,255,255,.85);background:rgba(20,16,16,.35);color:#fff}
#shop-inhalt .accent{color:var(--o2)}
#shop-inhalt .lbl{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
#shop-inhalt .bar{height:8px;border-radius:99px;background:rgba(20,18,19,.10);overflow:hidden;box-shadow:0 1px 1px rgba(0,0,0,.08) inset}
#shop-inhalt .bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--o3),var(--o1));box-shadow:0 0 12px rgba(242,70,27,.6)}
#shop-inhalt .pill{display:flex;align-items:center;border-radius:999px}
#shop-inhalt .coin{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe7a3,#f2b233 45%,#b8740f);box-shadow:0 0 0 2px rgba(255,255,255,.6) inset,0 2px 6px rgba(160,90,0,.4);display:grid;place-items:center;font:700 13px var(--cond);color:#8a4d00}
#shop-inhalt .gem{width:18px;height:24px;background:linear-gradient(135deg,#ff6b6b,#e0101a 55%,#8e0008);clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);filter:drop-shadow(0 2px 3px rgba(160,0,0,.4))}
#shop-inhalt .avatar{border-radius:50%;background:url(/assets/buehne/mapraiders-tcg-heldin-start-quer.webp) 62% 12%/620% no-repeat;border:2px solid rgba(255,255,255,.9);box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
#shop-inhalt .dot{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--o2);border:2px solid #fff;display:grid;place-items:center;font:700 9px var(--cond);color:#fff}
#shop-inhalt .star{color:#fff;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
#shop-inhalt .jp{font-family:var(--jp);font-weight:900;line-height:1.25;color:var(--ink)}
#shop-inhalt .mini{font-family:var(--cond);font-size:11px;letter-spacing:.22em;text-transform:uppercase;line-height:1.55;color:var(--ink-2)}
#shop-inhalt .navtile{position:relative;display:flex;align-items:center;border-radius:16px;color:var(--ink);transition:transform .2s}
#shop-inhalt .navtile:hover{transform:translateX(3px)}
#shop-inhalt .navtile.on{color:#fff;background:linear-gradient(180deg,var(--o1),var(--o2) 60%,var(--o3));border:1px solid rgba(255,196,170,.85);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 14px 28px -10px rgba(242,70,27,.8),0 0 0 5px rgba(242,70,27,.12)}
#shop-inhalt .navtile .dot{top:-4px;right:-4px}

/* ============ DESKTOP ============ */
#shop-inhalt .m{display:none}
#shop-inhalt .d{position:relative;min-height:100vh;padding:10px 18px 12px 0;display:grid;grid-template-columns:168px 1fr;
  background:url(/assets/buehne/mapraiders-tcg-heldin-start-quer.webp) 60% 34px/auto 86% no-repeat,url(/assets/hintergrund/mapraiders-tcg-hintergrund-stadt-panorama.webp) center bottom/cover no-repeat,var(--paper)}
#shop-inhalt .d::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(236,232,228,.97) 0,rgba(236,232,228,.86) 26%,rgba(236,232,228,.30) 42%,rgba(236,232,228,.05) 56%,rgba(236,232,228,.30) 72%,rgba(236,232,228,.62)),
             linear-gradient(0deg,rgba(236,232,228,.9),rgba(236,232,228,0) 30%)}
#shop-inhalt .d > *{position:relative}
#shop-inhalt .d-main{display:grid;grid-template-rows:auto auto 1fr auto;gap:0;min-width:0}
#shop-inhalt .d-top{display:flex;align-items:center;gap:18px;height:66px}
#shop-inhalt .d-top .menu{font-size:30px;stroke-width:1.6;position:absolute;left:-150px;top:10px}
#shop-inhalt .d-top .logo{height:54px}
#shop-inhalt .d-top .tag{font:500 14px var(--cond);letter-spacing:.34em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
#shop-inhalt .d-top .sp{flex:1}
#shop-inhalt .d-top .search{height:44px;width:clamp(150px,14vw,196px);padding:0 16px;gap:10px;color:var(--ink-3);font-size:15px}
#shop-inhalt .d-top .search svg{font-size:19px;color:var(--ink)}
#shop-inhalt .d-top .lang{height:44px;padding:0 14px;gap:8px;font:600 15px var(--cond)}
#shop-inhalt .d-top .bell{position:relative;font-size:24px;padding:8px}
#shop-inhalt .d-top .bell .dot{width:9px;height:9px;top:6px;right:7px;border-width:1.5px}
#shop-inhalt .d-top .user{display:flex;align-items:center;gap:10px;font:600 16px var(--cond);line-height:1.1}
#shop-inhalt .d-top .user small{display:block;font-weight:500;color:var(--ink-3)}
#shop-inhalt .d-top .user .avatar{width:44px;height:44px}
#shop-inhalt .d-top .wallet{height:48px;padding:0 6px 0 12px;gap:10px;font:500 20px var(--cond)}
#shop-inhalt .d-top .wallet .sep{width:1px;height:22px;background:rgba(20,18,19,.25)}
#shop-inhalt .d-top .wallet .round{width:36px;height:36px;font-size:20px;border-width:1px}
#shop-inhalt .d-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,548px);gap:24px;margin-top:6px}
#shop-inhalt .d-copy{padding:18px 0 0 32px;border-left:1px solid rgba(20,18,19,.3);margin-left:12px;position:relative}
#shop-inhalt .d-copy .num{display:flex;align-items:center;gap:14px;font:600 16px var(--cond);margin:-12px 0 18px -18px}
#shop-inhalt .d-copy .num::after{content:"";width:74px;height:1px;background:var(--ink)}
#shop-inhalt .d-copy h1{font:400 clamp(56px,5.9vw,92px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.005em;color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.4)}
#shop-inhalt .d-copy h1 .accent{color:var(--o2);text-shadow:0 10px 30px rgba(242,70,27,.25)}
#shop-inhalt .d-copy .row{display:flex;gap:26px;margin-top:14px;align-items:flex-start}
#shop-inhalt .d-copy p{max-width:390px;font:400 17px/1.4 var(--body);color:var(--ink)}
#shop-inhalt .d-copy .jpbox{border-left:1px solid rgba(20,18,19,.3);padding-left:14px}
#shop-inhalt .d-copy .jp{font-size:22px}
#shop-inhalt .d-copy .jpbox .mini{margin-top:12px;font-size:10px}
#shop-inhalt .d-copy .actions{display:flex;align-items:center;gap:28px;margin-top:20px}
#shop-inhalt .d-copy .cta{height:58px;padding:0 30px;font-size:22px}
#shop-inhalt .d-copy .cta svg{font-size:24px}
#shop-inhalt .trailer{display:flex;align-items:center;gap:12px;font:500 17px/1.05 var(--body)}
#shop-inhalt .trailer .round{width:48px;height:48px;font-size:18px;background:transparent}
#shop-inhalt .trailer .round svg{fill:currentColor;stroke:none;margin-left:3px}
#shop-inhalt .d-side{display:flex;flex-direction:column;gap:16px}
#shop-inhalt .loc{position:relative;height:238px;overflow:hidden;padding:24px 26px;display:grid;grid-template-columns:1fr auto;border-radius:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 0 36px rgba(120,180,255,.18),0 24px 40px -20px rgba(0,0,0,.6)}
#shop-inhalt .loc .bg{position:absolute;inset:0;background:url(/assets/buehne/mapraiders-tcg-dashboard-city-evening.webp) center/cover;transform:scale(1.02)}
#shop-inhalt .loc .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,8,.82),rgba(10,8,8,.45) 45%,rgba(10,8,8,0) 70%)}
#shop-inhalt .loc > *{position:relative}
#shop-inhalt .loc .k{display:flex;gap:10px;align-items:center;font:500 13px var(--cond);letter-spacing:.14em;color:#ddd}
#shop-inhalt .loc .k svg{font-size:20px;color:#fff}
#shop-inhalt .loc h3{font:600 30px/1 var(--cond);margin:4px 0 0 30px;letter-spacing:.02em}
#shop-inhalt .loc .wx{display:flex;align-items:center;gap:16px;margin:18px 0 0 6px}
#shop-inhalt .sun{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,#ffe16b 0 42%,transparent 44%);position:relative}
#shop-inhalt .sun::before{content:"";position:absolute;inset:-4px;background:repeating-conic-gradient(#ffc93c 0 8deg,transparent 8deg 45deg);-webkit-mask:radial-gradient(circle,transparent 0 58%,#000 60% 72%,transparent 74%);mask:radial-gradient(circle,transparent 0 58%,#000 60% 72%,transparent 74%)}
#shop-inhalt .loc .deg{font:500 38px/1 var(--cond)}
#shop-inhalt .loc .deg small{display:block;font:400 15px var(--body);margin-top:2px;color:#ddd}
#shop-inhalt .loc .cta{margin-top:20px;height:50px;padding:0 24px;font-size:19px;background:linear-gradient(180deg,rgba(255,140,100,.55),rgba(242,70,27,.45));border-color:rgba(255,220,200,.7);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 24px -10px rgba(242,70,27,.9)}
#shop-inhalt .loc .thumbs{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
#shop-inhalt .loc .thumbs .ex{width:40px;height:40px;border-radius:10px;border:1.5px solid rgba(255,255,255,.8);display:grid;place-items:center;font-size:18px;margin-bottom:6px}
#shop-inhalt .loc .thumbs i{width:56px;height:40px;border-radius:6px;border:1.5px solid rgba(255,255,255,.7);background-size:cover;background-position:center}
#shop-inhalt .loc .same{position:absolute;right:92px;bottom:24px;text-align:right;font:500 12px/1.6 var(--cond);letter-spacing:.24em;color:#eee}
#shop-inhalt .today{display:grid;grid-template-columns:1.55fr 1fr;padding:0;overflow:hidden}
#shop-inhalt .today .a{padding:16px 18px 14px}
#shop-inhalt .today .b{padding:16px 20px 14px;border-left:1px solid rgba(20,18,19,.14)}
#shop-inhalt .hd{display:flex;align-items:center;gap:10px;font:600 16px var(--cond);text-transform:uppercase;letter-spacing:.02em}
#shop-inhalt .hd svg{font-size:20px}
#shop-inhalt .hd .more{margin-left:auto;font-size:20px;stroke-width:3}
#shop-inhalt .stats{display:grid;grid-template-columns:repeat(5,1fr);margin-top:12px}
#shop-inhalt .stats div{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;border-left:1px solid rgba(20,18,19,.12)}
#shop-inhalt .stats div:first-child{border:0}
#shop-inhalt .stats svg{font-size:22px}
#shop-inhalt .stats b{font:600 20px/1 var(--cond)}
#shop-inhalt .stats small{font:500 11px var(--body);color:var(--ink-3)}
#shop-inhalt .today .b .bar{margin-top:22px}
#shop-inhalt .today .b .r{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:13px;color:var(--ink-2)}
#shop-inhalt .today .b .round{width:30px;height:30px;font-size:14px;border-width:1px}
#shop-inhalt .d-lower{display:grid;grid-template-columns:minmax(0,1fr) 196px 236px;gap:16px;margin-top:16px;align-items:end}
#shop-inhalt .feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:6px}
#shop-inhalt .feat{position:relative;height:234px;padding:16px 16px 18px;overflow:hidden;display:flex;flex-direction:column;border-radius:16px}
#shop-inhalt .feat .n{font:600 16px var(--cond)}
#shop-inhalt .feat .pic{position:absolute;top:10px;right:10px;width:54%;height:46%;border-radius:12px 12px 12px 40px;background-size:cover;background-position:center;box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}
#shop-inhalt .feat > svg{font-size:36px;margin-top:22px}
#shop-inhalt .feat h4{position:relative;font:600 22px/1 var(--cond);text-transform:uppercase;margin-top:auto}
#shop-inhalt .feat p{font:400 14px/1.4 var(--body);margin-top:10px;color:var(--ink-2);padding-right:40px}
#shop-inhalt .feat .round{position:absolute;right:14px;bottom:16px;width:40px;height:40px;font-size:18px;border-width:1px}
#shop-inhalt .cardfan{position:absolute;top:6px;right:8px;width:50%;height:42%}
#shop-inhalt .cardfan span{position:absolute;inset:0;border-radius:8px;background:#161214 url(/assets/karten/mapraiders-tcg-commander-archangel-gabriel-foil-640.webp) center/cover;border:2px solid #2a2224;box-shadow:0 12px 20px -8px rgba(0,0,0,.55)}
#shop-inhalt .cardfan span:first-child{transform:rotate(-12deg) translate(-16px,6px);filter:brightness(.7)}
#shop-inhalt .cardfan span:last-child{transform:rotate(8deg) translate(10px,-2px)}
#shop-inhalt .deckbox{position:absolute;top:26px;right:8px;width:56%;height:34%;border-radius:10px;background:linear-gradient(160deg,#2b2627,#0b0909);transform:perspective(300px) rotateX(38deg) rotateZ(-14deg);box-shadow:0 20px 20px -10px rgba(0,0,0,.6),0 8px 0 #1a1516}
#shop-inhalt .deckbox::after{content:"";position:absolute;inset:0;margin:auto;width:34px;height:34px;background:var(--o2);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 6px rgba(242,70,27,.8))}
#shop-inhalt .topcard{padding:14px 14px 12px;display:flex;flex-direction:column;align-items:center;gap:10px}
#shop-inhalt .topcard .hd{font-size:14px;align-self:stretch;white-space:nowrap}
#shop-inhalt .topcard img{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:10px;box-shadow:0 0 0 2px rgba(255,255,255,.6),0 14px 26px -10px rgba(120,0,0,.6)}
#shop-inhalt .btn-line{display:flex;align-items:center;justify-content:center;gap:10px;height:42px;width:100%;border-radius:99px;border:1.5px solid rgba(20,18,19,.75);font:600 17px var(--cond);text-transform:uppercase;background:rgba(255,255,255,.4)}
#shop-inhalt .news{padding:14px 12px 12px;display:flex;flex-direction:column;gap:10px}
#shop-inhalt .news .hd{font-size:15px}
#shop-inhalt .news .hd a{margin-left:auto;font:500 12px var(--body);text-transform:none;display:flex;gap:6px;align-items:center}
#shop-inhalt .nitem{position:relative;height:76px;border-radius:10px;overflow:hidden;padding:10px 12px;color:#fff;display:flex;flex-direction:column;justify-content:center}
#shop-inhalt .nitem .bg{position:absolute;inset:0;background-size:cover;background-position:center}
#shop-inhalt .nitem .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,6,6,.92) 30%,rgba(8,6,6,.1))}
#shop-inhalt .nitem > *:not(.bg){position:relative}
#shop-inhalt .nitem small{font:500 10px var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#ddd}
#shop-inhalt .nitem b{font:600 22px/1 var(--cond);text-transform:uppercase}
#shop-inhalt .nitem span{font:400 11.5px var(--body);margin-top:4px;display:flex;gap:4px;align-items:center}
#shop-inhalt .d-foot{margin-top:12px;height:84px;display:grid;grid-template-columns:160px 1fr auto 1fr auto auto;align-items:center;gap:22px;padding:8px 26px 8px 8px}
#shop-inhalt .d-foot .img{height:100%;border-radius:10px;background:url(/assets/buehne/mapraiders-tcg-dashboard-pagoda-night.webp) center/cover}
#shop-inhalt .d-foot h5{font:600 22px var(--cond);text-transform:uppercase}
#shop-inhalt .d-foot .mini{font-size:12px;letter-spacing:.3em}
#shop-inhalt .d-foot .mid{display:flex;align-items:flex-end;gap:14px;font:500 12px var(--cond);letter-spacing:.06em}
#shop-inhalt .d-foot .mid svg{font-size:58px;color:var(--ink);stroke-width:1.4}
#shop-inhalt .d-foot .dom{font:500 12px var(--cond);letter-spacing:.2em;justify-self:end}
#shop-inhalt .d-foot .soc{display:flex;gap:22px;font-size:26px}
#shop-inhalt .d-foot .soc svg{fill:var(--ink);stroke:none}
#shop-inhalt .d-foot .end{border-left:1px solid rgba(20,18,19,.25);padding-left:20px;font-size:11px}

/* ============ MOBILE ============ */
@media (max-width:1099px){
#shop-inhalt .d{display:none}
#shop-inhalt .m{display:block}
}
#shop-inhalt .m{position:relative;min-height:100vh;max-width:560px;margin:0 auto;padding:12px 12px 20px 0;overflow:hidden;
  background:url(/assets/buehne/mapraiders-tcg-heldin-start-hoch.webp) 52% 0/auto 1060px no-repeat,url(/assets/hintergrund/mapraiders-tcg-hintergrund-stadt-dicht.webp) center 0/auto 100% no-repeat,var(--paper)}
#shop-inhalt .m::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(236,232,228,.55),rgba(236,232,228,0) 22%,rgba(236,232,228,0) 80%,rgba(236,232,228,.7))}
#shop-inhalt .m > *{position:relative}
#shop-inhalt .m-wrap{margin-left:66px}
#shop-inhalt .m-top{display:flex;align-items:flex-start;gap:8px}
#shop-inhalt .m-top .hi{font:400 13px/1.2 var(--body);flex:1;min-width:0}
#shop-inhalt .m-top .hi b{font:600 17px var(--cond);display:block}
#shop-inhalt .m-top .hi small{font-size:9.5px;color:var(--ink-2)}
#shop-inhalt .m-top .wallet{height:32px;padding:0 3px 0 6px;gap:6px;font:500 14px var(--cond)}
#shop-inhalt .m-top .wallet .coin{width:19px;height:19px;font-size:10px}
#shop-inhalt .m-top .wallet .gem{width:13px;height:17px}
#shop-inhalt .m-top .wallet .round{width:24px;height:24px;font-size:14px;border-width:1px}
#shop-inhalt .m-top .av{position:relative}
#shop-inhalt .m-top .avatar{width:40px;height:40px}
#shop-inhalt .m-top .av .dot{top:-2px;right:-2px;width:11px;height:11px}
#shop-inhalt .m-brand{display:grid;grid-template-columns:1fr 90px;gap:8px;margin-top:10px}
#shop-inhalt .m-brand .logo{width:100%;margin-left:-6px}
#shop-inhalt .m-brand .era{font:500 9px var(--cond);letter-spacing:.36em;text-align:center;margin-top:2px}
#shop-inhalt .m-brand .side{border-left:1px solid rgba(20,18,19,.35);padding-left:8px}
#shop-inhalt .m-brand .side .mini{font-size:8.5px;letter-spacing:.2em}
#shop-inhalt .m-brand .side .p{width:60%;height:2px;margin:10px 0;background:linear-gradient(90deg,var(--o2) 60%,rgba(20,18,19,.15) 60%)}
#shop-inhalt .m-grid{display:grid;grid-template-columns:minmax(0,158px) 1fr 132px;gap:0;margin-top:6px}
#shop-inhalt .m-grid > .m-r{grid-column:3}
#shop-inhalt .m-l{display:flex;flex-direction:column;gap:10px;min-width:0}
#shop-inhalt .m-r{display:flex;flex-direction:column;gap:10px}
#shop-inhalt .m-jp{padding-left:4px}
#shop-inhalt .m-jp .jp{font-size:19px}
#shop-inhalt .m-jp .mini{font-size:7.5px;margin-top:6px}
#shop-inhalt .m-jp .yr{font:500 9px var(--cond);text-align:right;margin-top:4px;color:var(--ink-2)}
#shop-inhalt .m-card1{padding:12px 12px 12px}
#shop-inhalt .m-card1 .n{font:600 14px var(--cond)}
#shop-inhalt .m-card1 h2{font:400 29px/.92 var(--display);text-transform:uppercase;margin-top:6px}
#shop-inhalt .m-card1 .mini{font-size:8px;margin-top:8px;letter-spacing:.12em}
#shop-inhalt .m-card1 .cta{height:34px;padding:0 12px;font-size:12.5px;gap:.5em;margin-top:10px;white-space:nowrap}
#shop-inhalt .m-card1 .th{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}
#shop-inhalt .m-card1 .th i{aspect-ratio:1.1;border-radius:6px;background-size:cover;background-position:center;border:1.5px solid rgba(255,255,255,.8);box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
#shop-inhalt .m-card1 .dots{display:flex;gap:4px;justify-content:center;margin-top:8px}
#shop-inhalt .m-card1 .dots i{width:5px;height:5px;border-radius:9px;background:rgba(20,18,19,.2)}
#shop-inhalt .m-card1 .dots i:first-child{width:14px;background:var(--o2)}
#shop-inhalt .m-spots{padding:10px}
#shop-inhalt .m-spots .hd{font-size:11.5px;gap:5px;white-space:nowrap}
#shop-inhalt .m-spots .hd svg{font-size:15px}
#shop-inhalt .m-spots .hd a{margin-left:auto;font:400 9px var(--body);align-items:center;text-transform:none;display:flex;gap:4px}
#shop-inhalt .mapbox{position:relative;height:118px;border-radius:10px;margin-top:8px;overflow:hidden;background:#1a1717}
#shop-inhalt .mapbox svg.net{position:absolute;inset:0;width:100%;height:100%;stroke:none}
#shop-inhalt .mapbox .pin{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:30px;color:#fff;filter:drop-shadow(0 0 10px rgba(242,70,27,.9))}
#shop-inhalt .mapbox .pin svg{fill:#fff;stroke:#fff}
#shop-inhalt .mapbox .t{position:absolute;left:10px;bottom:8px;color:#fff;font:600 15px/1 var(--cond)}
#shop-inhalt .mapbox .t small{display:block;font:400 10px var(--body);margin-top:2px}
#shop-inhalt .mapbox .ppl{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;background:rgba(255,255,255,.9);border-radius:99px;padding:2px 6px 2px 2px;font:600 10px var(--cond)}
#shop-inhalt .mapbox .ppl i{width:18px;height:18px;border-radius:50%;margin-right:-5px;border:1.5px solid #fff;background:url(/assets/buehne/mapraiders-tcg-heldin-start-quer.webp) 62% 12%/620%}
#shop-inhalt .mapbox .ppl i:nth-child(2){filter:grayscale(1)}
#shop-inhalt .mapbox .ppl b{margin-left:8px}
#shop-inhalt .m-quests{padding:10px}
#shop-inhalt .m-quests .hd{font-size:12.5px;gap:6px;align-items:flex-start}
#shop-inhalt .m-quests .hd svg{font-size:20px}
#shop-inhalt .m-quests .hd small{display:block;font:400 9.5px var(--body);text-transform:none;color:var(--ink-2)}
#shop-inhalt .m-quests .bar{height:6px;margin:8px 0}
#shop-inhalt .q{display:flex;align-items:center;gap:7px;height:26px;padding:0 8px;border-radius:7px;background:rgba(255,255,255,.55);margin-top:4px;font:400 9.5px var(--body);white-space:nowrap}
#shop-inhalt .q b{margin-left:auto;font:500 10px var(--cond)}
#shop-inhalt .q .ck{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:9px;color:#fff;background:#2f8a4a}
#shop-inhalt .q .ck svg{stroke-width:3.5}
#shop-inhalt .q .ck.no{background:none;border:1.5px solid var(--o2);box-shadow:0 0 0 2px rgba(242,70,27,.15) inset}
#shop-inhalt .m-wx{padding:10px;display:grid;grid-template-columns:1fr;position:relative;overflow:hidden}
#shop-inhalt .m-wx .k{display:flex;gap:4px;align-items:center;font:600 11.5px var(--cond);letter-spacing:.06em}
#shop-inhalt .m-wx .k svg{font-size:14px}
#shop-inhalt .m-wx .row{display:flex;align-items:center;gap:8px;margin-top:8px}
#shop-inhalt .m-wx .sun{width:30px;height:30px}
#shop-inhalt .m-wx .deg{font:500 28px/1 var(--cond)}
#shop-inhalt .m-wx .deg small{display:block;font:400 10px var(--body)}
#shop-inhalt .m-wx .city{position:absolute;right:0;top:0;bottom:0;width:44%;background:url(/assets/buehne/mapraiders-tcg-dashboard-city-evening.webp) 40% center/cover;-webkit-mask:linear-gradient(90deg,transparent,#000 45%);mask:linear-gradient(90deg,transparent,#000 45%)}
#shop-inhalt .m-wx .round{position:absolute;right:6px;bottom:6px;width:22px;height:22px;font-size:11px;border-width:1px}
#shop-inhalt .m-today{padding:10px 6px 8px}
#shop-inhalt .m-today .hd{font-size:12px;gap:5px;padding-left:4px}
#shop-inhalt .m-today .hd svg{font-size:14px}
#shop-inhalt .m-today .stats{grid-template-columns:repeat(4,1fr);margin-top:8px}
#shop-inhalt .m-today .stats svg{font-size:16px}
#shop-inhalt .m-today .stats b{font-size:12px;white-space:nowrap}
#shop-inhalt .m-today .stats small{font-size:7.5px}
#shop-inhalt .m-top1{padding:9px 8px 8px}
#shop-inhalt .m-top1 .hd{font-size:10.5px;gap:4px;white-space:nowrap}
#shop-inhalt .m-top1 .hd svg{font-size:14px}
#shop-inhalt .m-top1 .cardwrap{position:relative;margin-top:7px}
#shop-inhalt .m-top1 img{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1.5px rgba(255,255,255,.7),0 10px 18px -8px rgba(120,0,0,.6)}
#shop-inhalt .m-top1 .round{position:absolute;right:-6px;top:58%;width:28px;height:28px;font-size:13px;background:#fff;border-width:1px}
#shop-inhalt .m-top1 .lbl{text-align:center;font-size:13px;margin-top:7px}
#shop-inhalt .m-realm{position:relative;height:80px;padding:10px;overflow:hidden;border-radius:14px}
#shop-inhalt .m-realm .bg{position:absolute;inset:0;background:url(/assets/buehne/mapraiders-tcg-dashboard-pagoda-night.webp) 70% center/cover}
#shop-inhalt .m-realm .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,6,6,.9) 25%,rgba(8,6,6,.1))}
#shop-inhalt .m-realm > *:not(.bg){position:relative}
#shop-inhalt .m-realm small{font:500 8.5px var(--cond);letter-spacing:.16em;color:#ddd;display:block}
#shop-inhalt .m-realm b{font:600 22px/1 var(--cond);display:block;margin-top:2px}
#shop-inhalt .m-realm .round{position:absolute;right:8px;bottom:8px;width:26px;height:26px;font-size:12px;border-width:1px}
#shop-inhalt .m-leg{padding-left:6px}
#shop-inhalt .m-leg .jp{font-size:9.5px;font-weight:700;white-space:nowrap}
#shop-inhalt .m-leg .mini{font-size:6.5px;margin-top:4px}
#shop-inhalt .m-leg i{display:block;width:44%;height:2px;margin-top:8px;background:linear-gradient(90deg,var(--o2),transparent)}

@media (max-width:400px){
#shop-inhalt .m-grid{grid-template-columns:minmax(0,150px) 1fr 122px}
#shop-inhalt .m-card1 h2{font-size:27px}
}
#shop-inhalt .m .glass{background:linear-gradient(160deg,rgba(255,255,255,.58),rgba(255,255,255,.26))}
@media (prefers-reduced-motion:no-preference){
#shop-inhalt .rise{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
#shop-inhalt .rise.b{animation-delay:.08s}
#shop-inhalt .rise.c{animation-delay:.16s}
#shop-inhalt .rise.e{animation-delay:.24s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#shop-inhalt .mapbox .pulse{animation:pulse 2.4s ease-out infinite;transform-origin:center;transform-box:fill-box}
  @keyframes pulse{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.4)}}
}

/* ============ GLASS BUTTONS ============ */
#shop-inhalt{
  /* glass thickness: lit top edge, light leaving at the bottom edge, darker lower body */
  --gbody:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.35),
         inset 0 12px 16px -12px rgba(255,255,255,.6),inset 0 -12px 16px -12px rgba(0,0,0,.28);
  --glint:-1px -1px 5px -1px rgba(255,248,232,.75);
  --shadow:0 1px 1px rgba(8,10,14,.22),0 6px 10px -4px rgba(8,10,14,.38),0 16px 26px -12px rgba(8,10,14,.45);
  --shadow-up:0 2px 2px rgba(8,10,14,.22),0 10px 14px -4px rgba(8,10,14,.4),0 24px 34px -12px rgba(8,10,14,.48);
  /* the edge catches light unevenly */
  --edge:linear-gradient(145deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.92) 20%,rgba(255,255,255,.45) 42%,rgba(255,255,255,.22) 62%,rgba(255,255,255,.5) 88%,rgba(255,255,255,.8) 100%);
  --edge-warm:linear-gradient(145deg,rgba(255,246,232,1) 0%,rgba(255,220,195,.85) 14%,rgba(255,190,150,.35) 40%,rgba(255,170,120,.18) 62%,rgba(255,205,165,.5) 88%,rgba(255,225,200,.75) 100%);
}
#shop-inhalt .round{position:relative}
#shop-inhalt .d .navtile,#shop-inhalt .m .navtile,#shop-inhalt .d .cta,#shop-inhalt .m .cta,#shop-inhalt .btn-line,#shop-inhalt .pill{position:relative}
#shop-inhalt .d .navtile,#shop-inhalt .m .navtile,#shop-inhalt .d .cta,#shop-inhalt .m .cta,#shop-inhalt .d .round,#shop-inhalt .m .round,#shop-inhalt .btn-line,#shop-inhalt .pill{isolation:isolate;border:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,filter .3s}
#shop-inhalt .d .navtile:hover,#shop-inhalt .m .navtile:hover,#shop-inhalt .d .cta:hover,#shop-inhalt .m .cta:hover,#shop-inhalt .d .round:hover,#shop-inhalt .m .round:hover,#shop-inhalt .btn-line:hover,#shop-inhalt .pill:hover{transform:translateY(-2px)}
#shop-inhalt .d .navtile:active,#shop-inhalt .m .navtile:active,#shop-inhalt .d .cta:active,#shop-inhalt .m .cta:active,#shop-inhalt .d .round:active,#shop-inhalt .m .round:active,#shop-inhalt .btn-line:active,#shop-inhalt .pill:active{transform:translateY(1px) scale(.985)}

/* the edge: a thin ring, brightest where the light hits (top left) */
#shop-inhalt .d .navtile::before,#shop-inhalt .m .navtile::before,#shop-inhalt .d .cta::before,#shop-inhalt .m .cta::before,#shop-inhalt .d .round::before,#shop-inhalt .m .round::before,#shop-inhalt .btn-line::before,#shop-inhalt .pill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:radial-gradient(22px 18px at 0 0,#fff,rgba(255,255,255,0) 80%),var(--edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
#shop-inhalt .d .cta::before,#shop-inhalt .m .cta::before,#shop-inhalt .d .navtile.on::before,#shop-inhalt .m .navtile.on::before{background:radial-gradient(22px 18px at 0 0,#fff8ee,rgba(255,255,255,0) 80%),var(--edge-warm)}

/* inside the glass: soft reflection across the upper part, warm light pooled in the top left corner,
   a band that sweeps across on hover */
#shop-inhalt .d .navtile::after,#shop-inhalt .m .navtile::after,#shop-inhalt .d .cta::after,#shop-inhalt .m .cta::after,#shop-inhalt .d .round::after,#shop-inhalt .m .round::after,#shop-inhalt .btn-line::after,#shop-inhalt .pill::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:
    linear-gradient(105deg,transparent 36%,rgba(255,255,255,.45) 45%,rgba(255,255,255,.1) 52%,transparent 60%) -140% 0/220% 100% no-repeat,
    radial-gradient(28px 24px at 0 0,rgba(255,244,222,.7),rgba(255,236,205,.18) 50%,rgba(255,255,255,0) 80%),
    radial-gradient(110% 60% at 30% -8%,rgba(255,255,255,.34),rgba(255,255,255,.08) 55%,rgba(255,255,255,0) 72%);
  transition:background-position 1s cubic-bezier(.2,.8,.2,1)}
#shop-inhalt .d .navtile:hover::after,#shop-inhalt .m .navtile:hover::after,#shop-inhalt .d .cta:hover::after,#shop-inhalt .m .cta:hover::after,#shop-inhalt .d .round:hover::after,#shop-inhalt .m .round:hover::after,#shop-inhalt .btn-line:hover::after,#shop-inhalt .pill:hover::after{background-position:240% 0,0 0,0 0}

/* clear nav tiles: the glass brightens and blurs the city behind it, labels white */
#shop-inhalt .d .navtile:not(.on),#shop-inhalt .m .navtile:not(.on){color:#fff;text-shadow:0 1px 2px rgba(15,18,26,.5);
  background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.09) 45%,rgba(255,255,255,.04) 72%,rgba(255,255,255,.1) 100%);
  -webkit-backdrop-filter:blur(8px) saturate(135%) brightness(1.18);backdrop-filter:blur(8px) saturate(135%) brightness(1.18);
  box-shadow:var(--glint),var(--gbody),var(--shadow)}
#shop-inhalt .d .navtile:not(.on):hover,#shop-inhalt .m .navtile:not(.on):hover{box-shadow:var(--glint),var(--gbody),var(--shadow-up)}
#shop-inhalt .d .navtile:not(.on) svg,#shop-inhalt .m .navtile:not(.on) svg{filter:drop-shadow(0 1px 1.5px rgba(15,18,26,.45))}

/* the rails carry the blurred city so the clear tiles have something to show */
#shop-inhalt .btn-line{box-shadow:inset 0 0 0 1.5px rgba(20,18,19,.65),inset 0 1px 0 2px rgba(255,255,255,.7),var(--shadow)}
#shop-inhalt .btn-line::before{content:none}

/* round buttons on light glass: white glass ball */
#shop-inhalt .d .round,#shop-inhalt .m .round{color:var(--ink);
  background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.98) 0,rgba(255,255,255,.85) 45%,rgba(232,234,240,.8) 100%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 -3px 5px rgba(20,24,34,.12),0 1px 1px rgba(8,10,14,.2),0 6px 10px -4px rgba(8,10,14,.4)}
/* round buttons on dark images: smoked glass, white arrow */
#shop-inhalt .d .round.light,#shop-inhalt .m .round.light,#shop-inhalt .dark .round,#shop-inhalt .nitem .round{color:#fff;
  background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.26),rgba(255,255,255,.06) 55%,rgba(10,10,14,.28) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.25),0 1px 1px rgba(0,0,0,.3),0 6px 10px -4px rgba(0,0,0,.55)}
#shop-inhalt .d .round::after,#shop-inhalt .m .round::after{background:radial-gradient(60% 45% at 38% 18%,rgba(255,255,255,.7),rgba(255,255,255,0) 75%)}
#shop-inhalt .trailer .round{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
#shop-inhalt .trailer .round::before,#shop-inhalt .trailer .round::after{content:none}

/* orange glass: tinted body, lit from the top, warm edge, a soft glow instead of a neon halo */
#shop-inhalt .d .cta,#shop-inhalt .m .cta,#shop-inhalt .d .navtile.on,#shop-inhalt .m .navtile.on{color:#fff;text-shadow:0 1px 2px rgba(120,20,0,.4);
  background:
    radial-gradient(80% 60% at 50% 110%,rgba(255,190,120,.55),rgba(255,160,100,0) 70%),
    linear-gradient(180deg,rgba(255,132,84,.96) 0%,rgba(245,82,31,.94) 55%,rgba(228,62,14,.96) 100%);
  box-shadow:inset 0 1px 0 rgba(255,236,222,.9),inset 0 -1px 0 rgba(255,210,170,.6),
             inset 0 12px 16px -12px rgba(255,230,210,.75),inset 0 -12px 16px -12px rgba(110,20,0,.35),
             0 0 16px -2px rgba(255,90,40,.5),0 1px 1px rgba(90,20,0,.25),0 6px 10px -4px rgba(110,25,0,.4),0 16px 26px -12px rgba(120,25,0,.5)}
#shop-inhalt .d .cta:hover,#shop-inhalt .m .cta:hover,#shop-inhalt .d .navtile.on:hover,#shop-inhalt .m .navtile.on:hover{box-shadow:inset 0 1px 0 rgba(255,236,222,.95),inset 0 -1px 0 rgba(255,210,170,.7),
             inset 0 12px 16px -12px rgba(255,230,210,.85),inset 0 -12px 16px -12px rgba(110,20,0,.35),
             0 0 22px -2px rgba(255,90,40,.6),0 2px 2px rgba(90,20,0,.25),0 10px 14px -4px rgba(110,25,0,.42),0 24px 34px -12px rgba(120,25,0,.52)}
#shop-inhalt .d .cta::after,#shop-inhalt .m .cta::after,#shop-inhalt .d .navtile.on::after,#shop-inhalt .m .navtile.on::after{background:
    linear-gradient(105deg,transparent 36%,rgba(255,255,255,.4) 45%,rgba(255,255,255,.1) 52%,transparent 60%) -140% 0/220% 100% no-repeat,
    radial-gradient(26px 22px at 0 0,rgba(255,244,222,.5),rgba(255,226,190,.15) 50%,rgba(255,255,255,0) 80%),
    radial-gradient(110% 60% at 30% -8%,rgba(255,240,225,.38),rgba(255,230,210,.08) 55%,rgba(255,255,255,0) 72%)}
#shop-inhalt .d .cta svg,#shop-inhalt .m .cta svg,#shop-inhalt .d .navtile.on svg,#shop-inhalt .m .navtile.on svg{fill:#fff;filter:drop-shadow(0 1px 2px rgba(120,20,0,.45))}
#shop-inhalt .d .cta svg,#shop-inhalt .m .cta svg{fill:none}
#shop-inhalt .loc .cta{background:
    radial-gradient(80% 60% at 50% 110%,rgba(255,190,120,.45),transparent 70%),
    linear-gradient(180deg,rgba(255,132,84,.75),rgba(228,62,14,.66))}


/* ============ SHOP ============ */
#shop-inhalt .h .m{isolation:isolate;background:url(/assets/hintergrund/mapraiders-tcg-hintergrund-stadt-dicht.webp) center 300px/auto 100% no-repeat,var(--paper)}
#shop-inhalt .h .m::before{z-index:-1}
#shop-inhalt .h-art{position:absolute!important;left:0;right:0;top:0;height:560px;z-index:-1;pointer-events:none;background:url(/assets/buehne/mapraiders-tcg-heldin-shop-hoch.webp) 96px 20px/auto 460px no-repeat;
  -webkit-mask:linear-gradient(180deg,#000 62%,transparent);mask:linear-gradient(180deg,#000 62%,transparent)}
#shop-inhalt .h .m::before{background:linear-gradient(180deg,rgba(236,232,228,.35),rgba(236,232,228,0) 18%,rgba(236,232,228,0) 40%,rgba(236,232,228,.25) 60%,rgba(236,232,228,.6))}
#shop-inhalt .h .d{isolation:isolate;background:url(/assets/hintergrund/mapraiders-tcg-hintergrund-stadt-panorama.webp) center bottom/cover no-repeat,var(--paper)}
#shop-inhalt .h .d::before{z-index:-1}
#shop-inhalt .hd-art{position:absolute!important;right:0;top:64px;width:62%;height:520px;z-index:-1;pointer-events:none;background:url(/assets/buehne/mapraiders-tcg-heldin-shop-quer.webp) right top/cover no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent,#000 30%),linear-gradient(0deg,transparent,#000 35%);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 30%),linear-gradient(0deg,transparent,#000 35%);mask-composite:intersect}
#shop-inhalt .h .d::before{background:linear-gradient(90deg,rgba(236,232,228,.9) 0,rgba(236,232,228,.55) 22%,rgba(236,232,228,0) 45%),linear-gradient(0deg,rgba(236,232,228,.92),rgba(236,232,228,.55) 45%,rgba(236,232,228,0) 62%)}
#shop-inhalt .logo-w{filter:invert(1) drop-shadow(0 2px 5px rgba(20,16,16,.55))}
#shop-inhalt .pn{border-radius:16px;color:var(--ink)}
#shop-inhalt .pn .hd{display:flex;align-items:center;gap:7px;font:600 12px var(--cond);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
#shop-inhalt .pn .hd > svg{font-size:15px;stroke-width:2}
#shop-inhalt .pn .hd small{display:block;font:400 8px var(--body);text-transform:none;letter-spacing:0;color:var(--ink-2)}
#shop-inhalt .pn .hd .aside{margin-left:auto;display:flex;align-items:center;gap:5px;font:400 9.5px var(--body);text-transform:none;letter-spacing:0;color:var(--ink-2)}
#shop-inhalt .pn .hd .aside svg{font-size:12px}
#shop-inhalt .fire{color:var(--o2)}
#shop-inhalt .price{display:flex;align-items:center;justify-content:center;gap:6px;height:26px;font:600 13px var(--cond)}
#shop-inhalt .price .coin{width:16px;height:16px;font-size:8px}
#shop-inhalt .price s{font:500 10px var(--cond);color:var(--o2);margin-left:2px}

/* hero (mobile) */
#shop-inhalt .h-hero{position:relative;display:grid;grid-template-columns:1fr 78px;gap:4px;margin-top:6px;min-height:236px}
#shop-inhalt .h-hero .logo-w{width:150px;margin-left:-4px}
#shop-inhalt .h-hero h1{font:400 64px/.9 var(--display);color:#fff;text-transform:uppercase;letter-spacing:.01em;margin-top:-2px;
  text-shadow:0 2px 0 rgba(120,40,20,.35),0 6px 22px rgba(40,20,16,.45)}
#shop-inhalt .h-hero .sub{font:600 8px/1.45 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-top:6px;text-shadow:0 0 6px rgba(255,255,255,.9)}
#shop-inhalt .h-hero .rt{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:14px}
#shop-inhalt .h-hero .mini{font-size:6.5px;letter-spacing:.2em;color:var(--ink);border-left:1px solid rgba(20,18,19,.4);padding-left:5px}
#shop-inhalt .h-hero .jp{font-size:12px;color:#fff;text-shadow:0 1px 6px rgba(20,16,16,.9)}
#shop-inhalt .h-hero .jp + .mini{color:#fff;text-shadow:0 1px 4px rgba(20,16,16,.9)}
#shop-inhalt .h-hero .jp + .mini{border:0;padding:0;margin-top:5px}

/* category tabs */
#shop-inhalt .h-tabs{display:grid;grid-template-columns:1fr 1.3fr .9fr 1fr .95fr;gap:3px;padding:4px;border-radius:14px;margin-top:0}
#shop-inhalt .h-tabs a{display:flex;align-items:center;justify-content:center;gap:4px;height:30px;border-radius:10px;font:500 9.5px var(--cond);white-space:nowrap;color:var(--ink)}
#shop-inhalt .h-tabs a svg{font-size:13px}
#shop-inhalt .h-tabs a.navtile{flex-direction:row;font-weight:600}
#shop-inhalt .h-tabs a.navtile:hover{transform:none}
#shop-inhalt .h-tabs a + a:not(.navtile){border-left:1px solid rgba(20,18,19,.12);border-radius:0}
#shop-inhalt .h-tabs a.navtile + a{border-left:0}

/* featured finds */
#shop-inhalt .h-feat{padding:10px;margin-top:8px}
#shop-inhalt .packs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
#shop-inhalt .pk{position:relative;padding:4px 4px 6px;border-radius:10px;background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 6px 12px -8px rgba(18,22,32,.5)}
#shop-inhalt .pk .art{position:relative;aspect-ratio:.64;border-radius:7px;background:#ddd center/cover;overflow:hidden}
#shop-inhalt .pk .art img{position:absolute;left:18%;right:18%;top:10%;width:64%;filter:invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.8))}
#shop-inhalt .pk .zm{position:absolute;right:4px;top:4px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:9px;background:rgba(255,255,255,.75);box-shadow:0 1px 3px rgba(0,0,0,.3)}
#shop-inhalt .pk b{display:block;font:600 9.5px var(--cond);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#shop-inhalt .pk small{display:block;font:400 7px var(--body);color:var(--ink-2);white-space:nowrap}
#shop-inhalt .pk .price{margin-top:5px}
#shop-inhalt .packs .next{position:absolute;right:-8px;top:36%;width:22px;height:22px;font-size:11px;z-index:3}
#shop-inhalt .packs{position:relative}

/* two-up rows */
#shop-inhalt .h-row{display:grid;grid-template-columns:1.1fr 1fr;gap:8px;margin-top:8px}
#shop-inhalt .h-offer,#shop-inhalt .h-tokyo,#shop-inhalt .h-coins,#shop-inhalt .h-extra{padding:9px}
#shop-inhalt .banner{display:block;position:relative;height:118px;margin-top:7px;border-radius:9px;overflow:hidden;background:#1a1616 center/cover;color:#fff;padding:8px}
#shop-inhalt .banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,8,.85) 20%,rgba(10,8,8,.15) 70%)}
#shop-inhalt .banner > *{position:relative;z-index:1}
#shop-inhalt .banner h3{font:400 15px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
#shop-inhalt .banner p{font:400 7.5px/1.35 var(--body);margin-top:4px;max-width:62%}
#shop-inhalt .banner .tag{position:absolute;right:6px;top:6px;padding:2px 6px;border-radius:4px;background:var(--o2);font:600 10px var(--cond)}
#shop-inhalt .banner .price.pill{position:absolute;left:8px;bottom:8px;padding:0 9px}
#shop-inhalt .h-tokyo .banner::after{background:linear-gradient(0deg,rgba(10,8,8,.85) 15%,rgba(10,8,8,0) 60%)}
#shop-inhalt .h-tokyo .banner h3{position:absolute;left:8px;bottom:42px;font-size:12px}
#shop-inhalt .h-tokyo .banner p{position:absolute;left:8px;bottom:32px;font-size:7px;max-width:none}
#shop-inhalt .banner .round{position:absolute;right:7px;bottom:7px;width:24px;height:24px;font-size:12px}
#shop-inhalt .h-coins,#shop-inhalt .h-extra{display:flex;flex-direction:column}
#shop-inhalt .earn{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:7px}
#shop-inhalt .earn > div{display:flex;flex-direction:column;align-items:center;padding:5px 3px 5px;border-radius:9px;background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
#shop-inhalt .earn i{width:100%;aspect-ratio:.8;margin-bottom:2px;border-radius:6px;background:url(/assets/shop/mapraiders-tcg-shop-coins.webp) center/cover}
#shop-inhalt .earn b{font:600 10px var(--cond);margin-top:4px;white-space:nowrap}
#shop-inhalt .earn small{font:500 7px var(--cond);color:var(--o2);white-space:nowrap;margin-bottom:5px}
#shop-inhalt .earn .how{margin-top:auto;height:18px;padding:0 6px;font:500 7.5px var(--cond);white-space:nowrap;justify-content:center;width:100%}
#shop-inhalt .xl{margin-top:5px}
#shop-inhalt .xl a{display:grid;grid-template-columns:34px 1fr 20px;gap:6px;align-items:center;padding:4px 0;border-top:1px solid rgba(20,18,19,.08)}
#shop-inhalt .xl a:first-child{border-top:0}
#shop-inhalt .xl i{height:26px;border-radius:5px;background:#222 center/cover}
#shop-inhalt .xl b{display:block;font:600 9px var(--cond)}
#shop-inhalt .xl small{display:block;font:400 7px var(--body);color:var(--ink-2)}
#shop-inhalt .xl .round{width:20px;height:20px;font-size:10px}
#shop-inhalt .h .m-wrap{padding-bottom:14px}
#shop-inhalt .h .m .pk:nth-child(4){display:none}

/* starter deck bundle */
#shop-inhalt .h-bundle{position:relative;display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px;padding:9px;border-radius:16px;color:#fff;overflow:hidden;
  background:linear-gradient(90deg,rgba(14,11,11,.94),rgba(28,20,20,.9));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 0 5px rgba(255,255,255,.5),0 22px 36px -20px rgba(18,22,32,.6)}
#shop-inhalt .h-bundle::before{content:"";position:absolute;inset:0;background:url(/assets/buehne/mapraiders-tcg-dashboard-pagoda-night.webp) center/cover;opacity:.22}
#shop-inhalt .h-bundle > *{position:relative}
#shop-inhalt .h-bundle h3{font:600 13px var(--cond);text-transform:uppercase;letter-spacing:.03em}
#shop-inhalt .h-bundle p{font:400 7.5px var(--body);color:#ddd;margin-top:1px}
#shop-inhalt .h-bundle .boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin-top:7px}
#shop-inhalt .h-bundle .boxes i{aspect-ratio:.72;border-radius:4px;background:#222 center/cover;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 4px 8px -3px rgba(0,0,0,.8)}
#shop-inhalt .h-bundle .r{display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:3px;border-top:1px solid rgba(255,255,255,.18);padding-top:7px}
#shop-inhalt .h-bundle .r b{grid-column:1/-1}
#shop-inhalt .h-bundle .r .price.pill{grid-column:2;grid-row:2/5;align-self:center;padding:0 10px;height:30px}
#shop-inhalt .h-bundle .r b{font:600 11px var(--cond);text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
#shop-inhalt .h-bundle .r span:not(.price){display:flex;gap:4px;align-items:flex-start;font:400 7px/1.25 var(--body);color:#eee}
#shop-inhalt .h-bundle .r span:not(.price) svg{flex:none;font-size:9px;stroke-width:3;color:#fff;border:1px solid rgba(255,255,255,.7);border-radius:50%;padding:1px}
#shop-inhalt .h-bundle .price.pill{margin-top:auto;color:#fff;background:rgba(20,16,16,.4);box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.8),0 6px 12px -6px rgba(0,0,0,.8)}
#shop-inhalt .h-bundle .price s{color:#ff8a60}
#shop-inhalt .h-bundle .price .cart{font-size:12px;width:1em;box-sizing:content-box;margin-left:4px;border-left:1px solid rgba(255,255,255,.35);padding-left:5px}

/* single decks */
#shop-inhalt .h-decks{padding:9px;margin-top:8px}
#shop-inhalt .dk{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:7px}
#shop-inhalt .dk > div{display:flex;flex-direction:column;align-items:center;padding:4px 4px 5px;border-radius:9px;background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 6px 12px -8px rgba(18,22,32,.5)}
#shop-inhalt .dk i{width:100%;aspect-ratio:1;border-radius:6px;background:#ddd center 40%/cover}
#shop-inhalt .dk b{font:600 10px var(--cond);margin-top:4px}
#shop-inhalt .dk small{font:400 7px var(--body);color:var(--ink-2)}
#shop-inhalt .dk .price{margin-top:4px;width:100%;height:22px;font-size:11.5px}

/* ---------- shop desktop ---------- */
#shop-inhalt .hd-main{display:flex;flex-direction:column;min-width:0}
#shop-inhalt .hd-hero{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;height:300px;padding:0 40% 18px 26px}
#shop-inhalt .hd-hero h1{font:400 150px/.86 var(--display);color:#fff;text-transform:uppercase;text-shadow:0 3px 0 rgba(120,40,20,.35),0 10px 34px rgba(40,20,16,.45)}
#shop-inhalt .hd-hero .sub{font:600 16px/1.45 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-top:12px;text-shadow:0 0 8px rgba(255,255,255,.9)}
#shop-inhalt .hd-hero .rt{position:absolute;left:560px;top:120px;text-align:left;border-left:1px solid rgba(20,18,19,.3);padding-left:14px}
#shop-inhalt .hd-hero .rt .jp{font-size:22px;text-shadow:0 0 10px rgba(255,255,255,.9)}
#shop-inhalt .hd-hero .rt .mini{font-size:10px;margin-top:6px;color:var(--ink)}
#shop-inhalt .h .d .h-tabs{margin:0 0 0 20px;height:56px;padding:6px;border-radius:18px}
#shop-inhalt .h .d .h-tabs a{height:44px;font-size:17px;gap:10px;border-radius:13px}
#shop-inhalt .h .d .h-tabs a svg{font-size:21px}
#shop-inhalt .hd-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin:16px 0 0 20px}
#shop-inhalt .hd-grid > div{display:flex;flex-direction:column;gap:16px;min-width:0}
#shop-inhalt .h .d .pn .hd{font-size:17px;gap:10px}
#shop-inhalt .h .d .pn .hd > svg{font-size:22px}
#shop-inhalt .h .d .pn .hd small{font-size:12px}
#shop-inhalt .h .d .pn .hd .aside{font-size:14px;gap:8px}
#shop-inhalt .h .d .pn .hd .aside svg{font-size:16px}
#shop-inhalt .h .d .h-feat,#shop-inhalt .h .d .h-offer,#shop-inhalt .h .d .h-tokyo,#shop-inhalt .h .d .h-coins,#shop-inhalt .h .d .h-extra{margin:0;padding:16px 18px}
#shop-inhalt .h .d .packs{gap:14px;margin-top:14px}
#shop-inhalt .h .d .pk{padding:8px 8px 10px;border-radius:14px}
#shop-inhalt .h .d .pk .art{border-radius:10px}
#shop-inhalt .h .d .pk .zm{width:28px;height:28px;font-size:14px;right:8px;top:8px}
#shop-inhalt .h .d .pk b{font-size:18px;margin-top:10px}
#shop-inhalt .h .d .pk small{font-size:13px}
#shop-inhalt .h .d .price{height:40px;font-size:20px;gap:8px}
#shop-inhalt .h .d .price .coin{width:24px;height:24px;font-size:12px}
#shop-inhalt .h .d .price s{font-size:14px}
#shop-inhalt .h .d .pk .price{margin-top:10px}
#shop-inhalt .h .d .packs .next{width:34px;height:34px;font-size:16px;right:-14px}
#shop-inhalt .h .d .banner{height:auto;flex:1;min-height:136px;margin-top:12px;padding:16px;border-radius:12px}
#shop-inhalt .h .d .h-offer,#shop-inhalt .h .d .h-tokyo{display:flex;flex-direction:column;flex:1}
#shop-inhalt .h .d .banner h3{font-size:30px}
#shop-inhalt .h .d .banner p{font-size:13px}
#shop-inhalt .h .d .banner .tag{font-size:16px;padding:3px 10px;right:12px;top:12px}
#shop-inhalt .h .d .banner .price.pill{left:16px;bottom:16px;padding:0 16px}
#shop-inhalt .h .d .h-tokyo .banner h3{font-size:24px;left:16px;bottom:78px}
#shop-inhalt .h .d .h-tokyo .banner p{font-size:13px;left:16px;bottom:58px}
#shop-inhalt .h .d .banner .round{width:40px;height:40px;font-size:18px;right:14px;bottom:14px}
#shop-inhalt .h .d .packs{grid-template-columns:repeat(4,1fr)}
#shop-inhalt .h .d .h-feat .packs{grid-template-columns:repeat(3,1fr)}
#shop-inhalt .h .d .h-bundle{margin:16px 0 0 20px;grid-template-columns:1fr 300px;gap:24px;padding:20px 24px;border-radius:20px}
#shop-inhalt .h .d .h-bundle h3{font-size:26px}
#shop-inhalt .h .d .h-bundle p{font-size:14px;margin-top:2px}
#shop-inhalt .h .d .h-bundle .boxes{gap:12px;margin-top:14px}
#shop-inhalt .h .d .h-bundle .boxes i{border-radius:8px}
#shop-inhalt .h .d .h-bundle .r{display:flex;flex-direction:column;gap:10px;padding:0 0 0 22px;border-top:0;border-left:1px solid rgba(255,255,255,.18)}
#shop-inhalt .h .d .h-bundle .r .price.pill{height:44px;padding:0 18px}
#shop-inhalt .h .d .h-bundle .r b{font-size:22px}
#shop-inhalt .h .d .h-bundle .r span:not(.price){font-size:14px;gap:8px;align-items:center}
#shop-inhalt .h .d .h-bundle .r span:not(.price) svg{font-size:16px}
#shop-inhalt .h .d .h-bundle .price .cart{font-size:20px;margin-left:10px;padding-left:10px}
#shop-inhalt .h .d .h-decks{margin:16px 0 0 20px;padding:16px 18px}
#shop-inhalt .h .d .dk{grid-template-columns:repeat(6,1fr);gap:12px;margin-top:12px}
#shop-inhalt .h .d .dk > div{padding:8px 8px 10px;border-radius:12px}
#shop-inhalt .h .d .dk i{border-radius:8px}
#shop-inhalt .h .d .dk b{font-size:18px;margin-top:8px}
#shop-inhalt .h .d .dk small{font-size:12px}
#shop-inhalt .h .d .dk .price{height:36px;font-size:18px;margin-top:8px}
#shop-inhalt .hd-low{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0 0 20px}
#shop-inhalt .h .d .earn{gap:12px;margin-top:12px}
#shop-inhalt .h .d .earn > div{padding:8px 8px 10px;border-radius:12px}
#shop-inhalt .h .d .earn b{font-size:18px;margin-top:8px}
#shop-inhalt .h .d .earn small{font-size:13px}
#shop-inhalt .h .d .earn .how{height:32px;font-size:14px;margin-top:auto}
#shop-inhalt .h .d .earn .bis{margin-bottom:10px}
#shop-inhalt .h .d .xl{margin-top:10px}
#shop-inhalt .h .d .xl a{grid-template-columns:62px 1fr 32px;gap:14px;padding:8px 0}
#shop-inhalt .h .d .xl i{height:44px;border-radius:8px}
#shop-inhalt .h .d .xl b{font-size:16px}
#shop-inhalt .h .d .xl small{font-size:12px}
#shop-inhalt .h .d .xl .round{width:32px;height:32px;font-size:15px}

/* in the game: the page head is the game's (glasHeld), the page carries no background of its own */
#shop > #shop-inhalt.karte{position:relative;display:block;max-width:1320px;width:100%;margin:0 auto;padding:0 0 40px;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible;color:var(--ink)}
#shop > #shop-inhalt.karte::before,#shop > #shop-inhalt.karte::after{content:none}
#shop-inhalt{min-height:0;background:none;overflow:visible}
#shop-inhalt .d,#shop-inhalt .h .d{min-height:0;padding:0 18px 0 0;background:none;isolation:auto}
@media (min-width:1100px){ #shop-inhalt .h .d{display:block} #shop-inhalt .h .m{display:none} }
@media (max-width:1099px){ #shop-inhalt .h .d{display:none} #shop-inhalt .h .m{display:block} }
#shop-inhalt .m,#shop-inhalt .h .m{min-height:0;max-width:640px;padding:0 12px 20px;background:none;overflow:visible;isolation:auto}
#shop-inhalt .m::before{content:none}
#shop-inhalt .m-wrap{margin-left:0}
#shop-inhalt .h .d .h-tabs,#shop-inhalt .hd-grid,#shop-inhalt .h .d .h-bundle,#shop-inhalt .h .d .h-decks,#shop-inhalt .hd-low{margin-left:0}
#shop-inhalt .h-tabs{grid-template-columns:repeat(4,1fr)}
#shop-inhalt .h-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;height:34px;border:0;border-radius:10px;background:none;font:600 12px var(--cond);letter-spacing:.02em;white-space:nowrap;color:var(--ink);cursor:pointer}
#shop-inhalt .h-tabs button + button{border-left:1px solid rgba(20,18,19,.12);border-radius:0}
#shop-inhalt .h-tabs button[aria-pressed=true]{color:#fff;border-left:0;border-radius:10px;background:linear-gradient(180deg,var(--o1),var(--o2) 60%,var(--o3));box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 10px 20px -10px rgba(242,70,27,.8)}
#shop-inhalt .h-tabs button[aria-pressed=true] + button{border-left:0}
#shop-inhalt .h-tabs svg{width:1em;height:1em;font-size:15px}
#shop-inhalt .h .d .h-tabs button{height:44px;font-size:17px;gap:10px;border-radius:13px}
#shop-inhalt .h .d .h-tabs svg{font-size:21px}
#shop-inhalt button.price,#shop-inhalt button.round,#shop-inhalt button.zm,#shop-inhalt button.how{border:0;font-family:var(--cond);color:var(--ink);cursor:pointer}
#shop-inhalt .pk button.price,#shop-inhalt .dk button.price{width:100%}
#shop-inhalt .banner button.price{width:auto;min-width:96px}
#shop-inhalt .banner .round.light{position:absolute;right:10px;top:auto;bottom:10px;border:0;cursor:pointer}
#shop-inhalt .h-offer .banner .tag{right:10px}
/* banners: white on dark (.schleier p would paint the lines dark) */
#shop #shop-inhalt .banner h3,#shop #shop-inhalt .banner p{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
#shop #shop-inhalt .banner button.price{color:#fff;background:rgba(20,16,16,.45);box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.8),0 6px 12px -6px rgba(0,0,0,.8)}
#shop-inhalt .h .d .h-tokyo .banner{min-height:170px}
@media (max-width:520px){ #shop-inhalt .h-tabs button{gap:4px;font-size:11.5px;padding:0 2px} #shop-inhalt .h-tabs svg{display:none} }
#shop-inhalt button.price:disabled{opacity:.55;cursor:default}
#shop-inhalt .pk .zm{border:0;cursor:pointer}
#shop-inhalt .coin{font-size:12px}
#shop-inhalt .geld{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 12px;padding:10px 16px;border-radius:18px}
#shop-inhalt .geld .coin{width:34px;height:34px;font-size:15px}
#shop-inhalt .geld b{font:600 28px/1 var(--cond)}
#shop-inhalt .geld small{font:500 13px var(--body);color:var(--ink-2)}
#shop-inhalt .geld .heute{margin-left:auto;font:600 14px var(--cond);letter-spacing:.04em;text-transform:uppercase;color:var(--o3)}
#shop-inhalt .geld .knopf{margin-left:auto}
#shop-inhalt [data-anker]{scroll-margin-top:calc(var(--kopf-h,70px) + 16px)}
#shop-inhalt .h-bundle{cursor:default}
#shop-inhalt .h-bundle .boxes button{aspect-ratio:.72;border:0;border-radius:4px;background:#222 center/cover;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 4px 8px -3px rgba(0,0,0,.8);cursor:pointer}
#shop-inhalt .h .d .h-bundle .boxes button{border-radius:8px}
#shop-inhalt .h-bundle .r .stand{margin-top:auto;font:600 20px var(--cond);color:#fff}
#shop-inhalt .earn i{background-image:url(/assets/shop/mapraiders-tcg-shop-coins.webp)}
#shop-inhalt .earn .bis{font:400 11px/1.3 var(--body);color:var(--ink-2);text-align:center;margin:0 0 6px}
#shop-inhalt .xl .zeile{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:5px 0;border-top:1px solid rgba(20,18,19,.08)}
#shop-inhalt .xl .zeile:first-child{border-top:0}
#shop-inhalt .xl .zeile i{height:26px;border-radius:5px;display:grid;place-items:center;font:700 12px var(--cond);color:#fff;background:linear-gradient(160deg,#3a302e,#141213)}
#shop-inhalt .xl .zeile.plus i{background:radial-gradient(circle at 35% 30%,#ffe7a3,#f2b233 45%,#b8740f);color:#8a4d00}
#shop-inhalt .xl .zeile em{font:600 14px var(--cond);font-style:normal;color:var(--o3)}
#shop-inhalt .xl .zeile.plus em{color:#2e8a57}
#shop-inhalt .h .d .xl .zeile{grid-template-columns:48px 1fr auto;gap:14px;padding:8px 0}
#shop-inhalt .h .d .xl .zeile i{height:40px;border-radius:8px;font-size:15px}
#shop-inhalt .h .d .xl .zeile em{font-size:18px}
#shop-inhalt .regeln{margin-top:10px;font:400 12px/1.45 var(--body);color:var(--ink-2)}
#shop-inhalt .h .d .regeln{font-size:13px}
/* phone: the preview's 7-9px lines are too small on a real phone */
@media (max-width:1099px){
  #shop-inhalt .packs{grid-template-columns:repeat(2,1fr)}
  #shop-inhalt .h .m .pk:nth-child(4){display:block}
  #shop-inhalt .pk b{font-size:14px}
  #shop-inhalt .pk small,#shop-inhalt .dk small,#shop-inhalt .xl small,#shop-inhalt .earn small{font-size:11px;white-space:normal}
  #shop-inhalt .price{height:34px;font-size:16px}
  #shop-inhalt .h-row{grid-template-columns:1fr;gap:10px}
  #shop-inhalt .banner{height:150px;padding:12px}
  #shop-inhalt .banner h3{font-size:22px}
  #shop-inhalt .banner p{font-size:12px;max-width:70%}
  #shop-inhalt .h-tokyo .banner h3{font-size:20px;bottom:62px}
  #shop-inhalt .h-tokyo .banner p{font-size:12px;bottom:46px}
  #shop-inhalt .banner .price.pill{left:12px;bottom:12px;height:34px}
  #shop-inhalt .banner .tag{font-size:13px}
  #shop-inhalt .pn .hd{font-size:15px}
  #shop-inhalt .pn .hd small{font-size:11px}
  #shop-inhalt .h-bundle{padding:14px}
  #shop-inhalt .h-bundle h3{font-size:18px}
  #shop-inhalt .h-bundle p{font-size:12px}
  #shop-inhalt .h-bundle .r b{font-size:15px}
  #shop-inhalt .h-bundle .r span:not(.price){font-size:12px}
  #shop-inhalt .dk{grid-template-columns:repeat(3,1fr)}
  #shop-inhalt .dk b{font-size:14px}
  #shop-inhalt .earn b{font-size:15px}
  #shop-inhalt .earn .how{height:30px;font-size:12px}
  #shop-inhalt .xl b{font-size:13px}
}
/* ---- special, promo and single finds ---- */
#shop-inhalt .h-tabs{grid-template-columns:repeat(6,1fr)}
@media (max-width:520px){ #shop #shop-inhalt .h-tabs{grid-template-columns:repeat(6,max-content);overflow-x:auto;scrollbar-width:none} }
#shop-inhalt .h-packs{padding:12px 14px;margin:12px 0}
#shop-inhalt .h-packs .hd{justify-content:space-between;flex-wrap:wrap;row-gap:8px}
#shop-inhalt .h-packs .hd > div{flex:1 1 190px;min-width:0}
#shop-inhalt .h-packs .hd .alle{width:auto;padding:0 14px;flex:none;margin-left:auto}
#shop-inhalt .h .h-packs .packs{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));align-items:start}
#shop-inhalt .h .d .h-packs .packs{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
#shop-inhalt .h .h-packs .packs{align-items:stretch}
#shop-inhalt .h .h-packs .pk,#shop-inhalt .h .m .h-packs .pk:nth-child(n){display:flex;flex-direction:column}
#shop-inhalt .h-packs .pk button.price{margin-top:auto}
[data-r="shop"],.mit-zahl{position:relative}
#hilfe.mit-punkt{position:relative}
#bau-knopf.mit-punkt,#farbe.mit-punkt{position:relative}
#bau-knopf.mit-punkt::after,#farbe.mit-punkt::after{content:"";position:absolute;right:-3px;top:-3px;width:12px;height:12px;border-radius:50%;background:#f2461b;box-shadow:0 0 0 2px #fff}
#bau-leiste .bl-reihe button.bl-zu{opacity:.5}
#bau-leiste .bl-reihe button.bl-tipp{box-shadow:0 0 0 2px #f2461b}
#bl-text.bl-tipp{color:#ffb38f;font-weight:600}
body.rail-zu #rail-knopf.mit-punkt::after,#hilfe.mit-punkt::after{content:"";position:absolute;right:-3px;top:-3px;width:12px;height:12px;border-radius:50%;background:#f2461b;box-shadow:0 0 0 2px #fff}
[data-r="shop"] .pack-zahl,.mit-zahl .pack-zahl{position:absolute;right:4px;top:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:grid;place-items:center;font:700 11px/1 var(--cond);font-style:normal;color:#fff;background:#f2461b;box-shadow:0 0 0 2px #fff;pointer-events:none}
#shop-inhalt .h-packs .pk .anz{position:absolute;left:6px;top:6px;z-index:4;min-width:28px;height:28px;padding:0 8px;border-radius:14px;display:grid;place-items:center;font:700 14px var(--cond);color:#fff;background:#141213;box-shadow:0 0 0 2px #fff,0 4px 10px rgba(0,0,0,.35)}
#shop-inhalt .h-packs .pk button.price{width:100%}
#shop-inhalt .h-packs .pk small{white-space:normal;margin-bottom:8px}
#shop-inhalt .h-packs .regeln{margin:10px 0 4px}
#shop-inhalt .pack-lager{margin-top:12px}
#shop-inhalt .pack-lager p{margin:0 0 8px;font:600 13px var(--cond)}
#shop-inhalt .pack-lager .dk{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-bottom:10px}
#shop-inhalt .pack-lager .dk button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px;border:0;border-radius:10px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);cursor:pointer;font:600 11px var(--cond);color:var(--ink)}
#shop-inhalt .pack-lager .dk i{display:block;width:100%;aspect-ratio:1;border-radius:8px;background:#ddd center/cover}
/* two special finds since 29.09.2026 (titan, commander), so both halves hold two packs of the same size */
#shop-inhalt .sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
#shop-inhalt .sp-grid > div{min-width:0}
#shop-inhalt .h-spec{padding:16px 18px}
#shop-inhalt .h-spec .packs{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
#shop-inhalt .h-einzel .packs{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
#shop-inhalt .h .d .h-spec .packs{grid-template-columns:repeat(2,1fr)}
#shop-inhalt .h .d .h-einzel .packs{grid-template-columns:repeat(2,1fr)}
#shop-inhalt .h .d .sp-grid{grid-template-columns:1fr 1fr}
#shop-inhalt .h-spec .pk b,#shop-inhalt .h-einzel .pk b{font-size:15px;margin-top:8px;white-space:normal;line-height:1.1}
#shop-inhalt .h-spec .pk small,#shop-inhalt .h-einzel .pk small{font-size:11.5px;white-space:normal;line-height:1.3;margin-top:2px}
#shop-inhalt .h-spec .price,#shop-inhalt .h-einzel .price{height:36px;font-size:17px;margin-top:8px}
/* a description of two lines beside one of three: the prices still sit on one line */
#shop-inhalt .h-spec .pk{display:flex;flex-direction:column}
#shop-inhalt .h-spec .pk small{margin-bottom:8px}
#shop-inhalt .h .h-spec .pk .price{margin-top:auto}
#shop-inhalt .pk .band{position:absolute;left:0;right:0;bottom:10px;z-index:2;padding:3px 0;text-align:center;font:600 11px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(10,8,8,.55)}
@media (max-width:1099px){
  #shop-inhalt .sp-grid{grid-template-columns:1fr;gap:10px;margin-top:10px}
  #shop-inhalt .h-spec,#shop-inhalt .h-einzel{padding:10px}
  #shop-inhalt .h-spec .packs{grid-template-columns:repeat(2,1fr);gap:8px}
  #shop-inhalt .h-einzel .packs{grid-template-columns:repeat(2,1fr);gap:8px}
  #shop-inhalt .h-spec .pk b,#shop-inhalt .h-einzel .pk b{font-size:14px}
}
/* the foil pack: every find without a picture of its own, drawn in the pack's colour (--pf) */
.folie{position:relative;aspect-ratio:.64;border-radius:7px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 70% at 30% 18%,rgba(255,255,255,.55),transparent 55%),
    linear-gradient(155deg,color-mix(in srgb,var(--pf) 45%,#fff) 0%,var(--pf) 38%,color-mix(in srgb,var(--pf) 55%,#000) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 0 0 7px rgba(255,255,255,.08),inset 0 -30px 40px -20px rgba(0,0,0,.45)}
.folie::before,.folie::after{content:"";position:absolute;left:0;right:0;height:9px;z-index:2;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 3px,rgba(255,255,255,.25) 3px 6px)}
.folie::before{top:0}.folie::after{bottom:0}
.folie .glanz{position:absolute;inset:-40%;z-index:1;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);animation:folieGlanz 3.6s ease-in-out infinite}
.folie img{position:absolute;left:14%;right:14%;top:12%;width:72%;z-index:3;filter:invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.folie{container-type:inline-size}
#shop-inhalt .folie .emblem,#shop-oeffnen .folie .emblem{position:absolute;height:auto;left:30%;width:40%;top:30%;z-index:3;fill:color-mix(in srgb,var(--pf) 30%,#120e0e);stroke:#fff;stroke-width:1.1;stroke-linejoin:round;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(255,255,255,.6))}
.folie .wort{position:absolute;left:0;right:0;top:66%;z-index:3;transform:translateY(-50%);text-align:center;font:400 15cqw/1 Anton,Impact,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#fff;-webkit-text-stroke:.1em #140f0f;paint-order:stroke fill;text-shadow:0 3px 6px rgba(0,0,0,.45)}
.folie .zahl{position:absolute;left:0;right:0;bottom:15%;z-index:3;text-align:center;font:600 8cqw "Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;-webkit-text-stroke:.12em #140f0f;paint-order:stroke fill}
@keyframes folieGlanz{0%,55%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
/* a real sealed foil pack (René 02.10.2026, a photographed booster as the measure): serrated, crimped seals at both
   ends, a puffed body darker toward the side seams, crinkles in the foil and glints that move over them with the light
   (textures from design/website/quellen/shop/pack_folie_textur.py) */
.pack{clip-path:polygon(0% 0%,1.92% 1.4%,3.85% 0%,5.77% 1.4%,7.69% 0%,9.62% 1.4%,11.54% 0%,13.46% 1.4%,15.38% 0%,17.31% 1.4%,19.23% 0%,21.15% 1.4%,23.08% 0%,25% 1.4%,26.92% 0%,28.85% 1.4%,30.77% 0%,32.69% 1.4%,34.62% 0%,36.54% 1.4%,38.46% 0%,40.38% 1.4%,42.31% 0%,44.23% 1.4%,46.15% 0%,48.08% 1.4%,50% 0%,51.92% 1.4%,53.85% 0%,55.77% 1.4%,57.69% 0%,59.62% 1.4%,61.54% 0%,63.46% 1.4%,65.38% 0%,67.31% 1.4%,69.23% 0%,71.15% 1.4%,73.08% 0%,75% 1.4%,76.92% 0%,78.85% 1.4%,80.77% 0%,82.69% 1.4%,84.62% 0%,86.54% 1.4%,88.46% 0%,90.38% 1.4%,92.31% 0%,94.23% 1.4%,96.15% 0%,98.08% 1.4%,100% 0%,100% 100%,98.08% 98.6%,96.15% 100%,94.23% 98.6%,92.31% 100%,90.38% 98.6%,88.46% 100%,86.54% 98.6%,84.62% 100%,82.69% 98.6%,80.77% 100%,78.85% 98.6%,76.92% 100%,75% 98.6%,73.08% 100%,71.15% 98.6%,69.23% 100%,67.31% 98.6%,65.38% 100%,63.46% 98.6%,61.54% 100%,59.62% 98.6%,57.69% 100%,55.77% 98.6%,53.85% 100%,51.92% 98.6%,50% 100%,48.08% 98.6%,46.15% 100%,44.23% 98.6%,42.31% 100%,40.38% 98.6%,38.46% 100%,36.54% 98.6%,34.62% 100%,32.69% 98.6%,30.77% 100%,28.85% 98.6%,26.92% 100%,25% 98.6%,23.08% 100%,21.15% 98.6%,19.23% 100%,17.31% 98.6%,15.38% 100%,13.46% 98.6%,11.54% 100%,9.62% 98.6%,7.69% 100%,5.77% 98.6%,3.85% 100%,1.92% 98.6%,0% 100%);box-shadow:inset 14px 0 22px -12px rgba(0,0,0,.55),inset -14px 0 22px -12px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.18)}
.pack::before,.pack::after{content:"";position:absolute;left:0;right:0;height:6%;z-index:4;pointer-events:none;mix-blend-mode:hard-light;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,rgba(0,0,0,.22) 1px 2px,rgba(255,255,255,0) 2px 3px),linear-gradient(rgba(236,236,242,.5),rgba(150,150,160,.3))}
.pack::before{top:0;box-shadow:0 2px 3px -1px rgba(0,0,0,.5)}
.pack::after{bottom:0;box-shadow:0 -2px 3px -1px rgba(0,0,0,.5)}
.pack .pk-k,.pack .pk-g,.pack .pk-l{position:absolute;inset:0;z-index:3;pointer-events:none}
.pack .pk-k{background:url(/assets/shop/mapraiders-tcg-shop-pack-knitter.webp) center/100% 100%;mix-blend-mode:overlay;opacity:.9}
/* a rendered pack already is the whole foil pouch (René 02.10.2026): no second shell over it, only the moving light */
.pack.art{clip-path:none;box-shadow:none}
.pack.art::before,.pack.art::after,.pack.art .pk-k,.pack.art .pk-g,.pack.art .pk-l{display:none}
/* the whole pack is seen, seals and all, cut out of its background (René 02.10.2026: "zu nah rangezoomt") */
#shop-inhalt .pk .pack.art,#shop-oeffnen .buehne .teil .pack.art{background-color:transparent;background-size:contain;background-repeat:no-repeat;overflow:visible;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.pack.art img{top:13%}
.pack .pk-g{background:url(/assets/shop/mapraiders-tcg-shop-pack-glanz-links.webp) center/100% 100%;mix-blend-mode:screen;opacity:calc(1 - var(--pl,.35))}
.pack .pk-g.r{background-image:url(/assets/shop/mapraiders-tcg-shop-pack-glanz-rechts.webp);opacity:var(--pl,.35)}
.pack .pk-l{mix-blend-mode:screen;opacity:calc(.3 + var(--lk,0) * .4);background:radial-gradient(farthest-corner circle at var(--lx,35%) var(--ly,30%),rgba(255,255,255,.45),rgba(255,255,255,0) 42%)}
#shop-oeffnen .buehne{touch-action:none}
#shop-inhalt .pk .pack{cursor:pointer}
#shop-oeffnen .buehne .kipp-p{position:absolute;inset:0;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
@media (prefers-reduced-motion:reduce){ .folie .glanz{animation:none} }

/* ---- opening a find (Owner 28.09.2026: "eine schöne Packs Animation mit Glitzer Sterne, je nachdem was für ein Pack welche Farbe") ---- */
#shop-oeffnen{position:fixed;inset:0;z-index:60;overflow:auto;background:radial-gradient(120% 90% at 50% 40%,color-mix(in srgb,var(--pf,#f2461b) 26%,#1a1414) 0%,#0c0a0a 70%);color:#fff}
#shop-oeffnen[hidden]{display:none}
#shop-funken{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
#shop-oeffnen .blitz{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at 50% 45%,var(--blitz,#fff),transparent 65%);opacity:0}
#shop-oeffnen .blitz.an{animation:soBlitz .7s ease-out}
@keyframes soBlitz{0%{opacity:.95}100%{opacity:0}}
#shop-oeffnen .box{position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px 16px 32px;text-align:center}
#shop-oeffnen h2{font:400 clamp(30px,5.5vw,58px)/1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 0 30px color-mix(in srgb,var(--pf) 70%,transparent)}
#shop-oeffnen .unter{margin:0;font:500 15px Barlow,sans-serif;color:#ddd}
/* the pack on stage */
#shop-oeffnen h2,#shop-oeffnen .unter{position:relative;z-index:2}
#shop-oeffnen .buehne{position:relative;z-index:1;width:min(240px,52vw);aspect-ratio:.64;margin:10px 0;cursor:pointer;border:0;padding:0;background:none;
  filter:drop-shadow(0 0 28px color-mix(in srgb,var(--pf) 70%,transparent)) drop-shadow(0 30px 40px rgba(0,0,0,.7));animation:soSchweben 2.6s ease-in-out infinite}
#shop-oeffnen .buehne[hidden]{display:none}
#shop-oeffnen .buehne .teil{position:absolute;inset:0;border-radius:9px;overflow:hidden}
#shop-oeffnen .buehne .teil > *{width:100%;height:100%}
#shop-oeffnen .buehne .teil .art{background-color:#222;background-position:center;background-size:cover;border-radius:9px;position:relative}
#shop-oeffnen .buehne .teil .art img{position:absolute;left:18%;right:18%;top:10%;width:64%;filter:invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.8))}
#shop-oeffnen .buehne .folie{border-radius:9px}

#shop-oeffnen .buehne .oben{clip-path:polygon(0 0,100% 0,100% 5%,95% 7.5%,90% 5%,85% 7.5%,80% 5%,75% 7.5%,70% 5%,65% 7.5%,60% 5%,55% 7.5%,50% 5%,45% 7.5%,40% 5%,35% 7.5%,30% 5%,25% 7.5%,20% 5%,15% 7.5%,10% 5%,5% 7.5%,0% 5%)}
#shop-oeffnen .buehne .unten{clip-path:polygon(0% 5%,5% 7.5%,10% 5%,15% 7.5%,20% 5%,25% 7.5%,30% 5%,35% 7.5%,40% 5%,45% 7.5%,50% 5%,55% 7.5%,60% 5%,65% 7.5%,70% 5%,75% 7.5%,80% 5%,85% 7.5%,90% 5%,95% 7.5%,100% 5%,100% 100%,0 100%)}
#shop-oeffnen .buehne .riss{position:absolute;left:-4%;right:-4%;top:6%;height:2px;z-index:3;opacity:0;background:linear-gradient(90deg,transparent,#fff,var(--pf),#fff,transparent);box-shadow:0 0 14px 3px var(--pf)}
#shop-oeffnen .buehne.bebt{animation:soBeben .09s linear infinite}
#shop-oeffnen .buehne.bebt .riss{opacity:1;transition:opacity .5s}
#shop-oeffnen .buehne.auf{animation:none}
#shop-oeffnen .buehne.auf .oben{transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s;transform:translate(150px,-30px) rotate(34deg);opacity:0}
#shop-oeffnen .buehne.auf .unten{transition:transform .8s cubic-bezier(.5,0,.8,.4) .15s,opacity .6s .35s;transform:translateY(120px) scale(.9);opacity:0}
#shop-oeffnen .buehne.auf .riss{opacity:0}
@keyframes soSchweben{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
@keyframes soBeben{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-3px,1px) rotate(-1.2deg)}50%{transform:translate(2px,-2px) rotate(1deg)}75%{transform:translate(-1px,2px) rotate(-.6deg)}100%{transform:translate(0,0) rotate(0)}}
#shop-oeffnen .tipp{margin:0;font:600 14px "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:.85;animation:soPuls 1.6s ease-in-out infinite}
#shop-oeffnen .tipp[hidden]{display:none}
@keyframes soPuls{0%,100%{opacity:.45}50%{opacity:1}}
/* the cards */
#shop-oeffnen .reihe-k{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;width:100%;max-width:1420px;perspective:1400px}
#shop-oeffnen .reihe-k > .k3{flex:0 0 clamp(110px,17vw,260px)}
#shop-oeffnen .reihe-k.eins > .k3{flex-basis:clamp(200px,40vw,300px)}

#shop-oeffnen .reihe-k[hidden]{display:none}
#shop-oeffnen .k3{position:relative;margin:0;border:0;padding:0;background:none;cursor:pointer;text-align:center;color:#fff;
  opacity:0;transform:translateY(-60px) scale(.6);transition:opacity .4s,transform .6s cubic-bezier(.2,1.2,.3,1)}
#shop-oeffnen .k3.da{opacity:1;transform:none}
#shop-oeffnen .k3 .dreh{position:relative;display:block;aspect-ratio:.714;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.3,1.3,.4,1);transform:rotateY(180deg)}
#shop-oeffnen .k3.offen .dreh{transform:rotateY(0)}
#shop-oeffnen .k3 .seite{position:absolute;inset:0;border-radius:9px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 16px 30px -12px rgba(0,0,0,.9)}
#shop-oeffnen .k3 .seite img{display:block;width:100%;height:100%;object-fit:cover;background:#161214}
#shop-oeffnen .k3 .ruecken{transform:rotateY(180deg)}
@media (hover:hover){ #shop-oeffnen .k3:not(.offen):hover .dreh{transform:rotateY(180deg) translateY(-6px)} #shop-oeffnen .k3.offen:hover .dreh{transform:translateY(-6px)} }
#shop-oeffnen .k3.offen{cursor:zoom-in}
#shop-oeffnen .k3.ahnung .ruecken{box-shadow:0 0 0 2px var(--rf),0 0 34px 4px var(--rf),0 16px 30px -12px rgba(0,0,0,.9);animation:soAhnung .5s ease-in-out infinite alternate}
@keyframes soAhnung{from{filter:brightness(1)}to{filter:brightness(1.35)}}
#shop-oeffnen .k3.offen.sel .vorne{box-shadow:0 0 0 2px var(--rf),0 0 30px 2px var(--rf),0 16px 30px -12px rgba(0,0,0,.9)}
#shop-oeffnen .k3.offen.holo .vorne::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:.55;
  background:linear-gradient(115deg,transparent 20%,rgba(255,220,120,.7) 38%,rgba(120,255,230,.6) 50%,rgba(255,140,90,.6) 62%,transparent 80%) 0 0/250% 100%;animation:soHolo 2.4s linear infinite}
@keyframes soHolo{from{background-position:120% 0}to{background-position:-120% 0}}
#shop-oeffnen .k3 .unterschrift{display:block;min-height:36px;margin-top:8px;font:600 15px/1.2 "Barlow Condensed",sans-serif;opacity:0;transition:opacity .4s .35s}
#shop-oeffnen .k3.offen .unterschrift{opacity:1}
#shop-oeffnen .k3 .unterschrift span{display:block;font-weight:500;font-size:13px}
#shop-oeffnen .knoepfe{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
#shop-oeffnen .knoepfe [hidden]{display:none}
/* finds of 10 and 20 cards (Owner 29.09.2026): smaller cards, and the buttons stay in reach at the bottom */
#shop-oeffnen .reihe-k.viele{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;max-width:min(960px,100%)}
#shop-oeffnen .reihe-k.viele[hidden]{display:none}
#shop-oeffnen .reihe-k.viele > .k3{min-width:0}
@media (min-width:1100px){ #shop-oeffnen .reihe-k.viele.zwanzig{grid-template-columns:repeat(10,minmax(0,1fr));max-width:1420px} }
#shop-oeffnen .reihe-k.viele .unterschrift{min-height:30px;font-size:13px;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
/* the sticky buttons never hide the last row for good: they stay in the flow below it (the box keeps its 32px
   underneath), and a card scrolled into view is centred above the bar */
#shop-oeffnen:has(.reihe-k.viele:not([hidden])){scroll-padding-bottom:84px}
#shop-oeffnen .reihe-k.viele .unterschrift span{font-size:11.5px}
#shop-oeffnen .reihe-k.viele ~ .knoepfe{position:sticky;bottom:0;z-index:5;width:100%;padding:18px 0 max(14px,env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(12,10,10,.92) 38%)}
@media (max-width:640px){
  #shop-oeffnen .reihe-k{gap:10px}
  #shop-oeffnen .reihe-k > .k3{flex-basis:calc((100% - 20px) / 3)}
  #shop-oeffnen .reihe-k.eins > .k3{flex-basis:62%}
  #shop-oeffnen .reihe-k.viele{gap:6px;grid-template-columns:repeat(5,minmax(0,1fr))}
  #shop-oeffnen .reihe-k.viele .unterschrift{min-height:26px;margin-top:5px;font-size:10.5px;line-height:1.1}
  #shop-oeffnen .reihe-k.viele .unterschrift span{font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){
  #shop-oeffnen .buehne,#shop-oeffnen .buehne.bebt,#shop-oeffnen .tipp,#shop-oeffnen .k3.ahnung .ruecken,#shop-oeffnen .k3.offen.holo .vorne::after{animation:none}
  #shop-oeffnen .blitz{display:none}
  #shop-oeffnen .k3,#shop-oeffnen .k3 .dreh{transition-duration:.01s}
}
/* close in the corner, the whole time */
#shop-oeffnen .zu-x{position:fixed;top:14px;right:14px;z-index:6;width:46px;height:46px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.55)}
#shop-oeffnen .zu-x svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
#shop-oeffnen .zu-x:hover,#shop-oeffnen .zu-x:focus-visible{background:rgba(255,255,255,.24)}
/* the music button left of the close button, in its dark glass (Owner 29.09.2026) */
#pack-musik{position:fixed;top:14px;right:70px;z-index:6}
#pack-musik .mr-musik{width:46px;height:46px;border:0;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.55);color:var(--o1);-webkit-backdrop-filter:none;backdrop-filter:none}
#pack-musik .mr-musik[aria-pressed=false]{color:rgba(255,255,255,.6)}
@media (hover:hover){#pack-musik .mr-musik:hover{background:rgba(255,255,255,.24)}}
/* one card, large */
/* one card at a time, in the light (René 02.10.2026: "immer nur eine Karte", the shimmer and foil must be seen, the
   phone's tilt or a finger turns the card, a swipe sends it away) */
#shop-oeffnen .stapel{position:relative;z-index:2;height:min(56svh,calc(86vw / .714),600px);aspect-ratio:.714;margin:4px 0 0;perspective:1200px;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:0}
#shop-oeffnen .stapel[hidden]{display:none}
#shop-oeffnen .stapel:focus-visible{outline:3px solid var(--rf,#fff);outline-offset:8px;border-radius:18px}
#shop-oeffnen .sk{--tief:0;--dx:0px;--dy:0px;--gr:0;position:absolute;inset:0;z-index:calc(50 - var(--tief));opacity:1;
  transform:translate3d(var(--dx),calc(var(--dy) + var(--tief) * 12px),0) rotate(calc(var(--dw,0) * 1deg)) scale(calc(1 - var(--tief) * .045 + var(--gr)));
  transition:transform .42s cubic-bezier(.2,.9,.3,1.15),opacity .3s}
#shop-oeffnen .sk.neu{opacity:0;--dy:46px;--gr:-.08}
#shop-oeffnen .sk.zieht{transition:none}
#shop-oeffnen .sk.weg{transition:transform .5s cubic-bezier(.4,0,.9,.6),opacity .45s .05s;opacity:0;pointer-events:none}
#shop-oeffnen .sk.tief3{opacity:0}
#shop-oeffnen .sk .kipp{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
#shop-oeffnen .sk .dreh{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg);transition:transform .62s cubic-bezier(.3,1.25,.45,1)}
#shop-oeffnen .sk.offen .dreh{transform:rotateY(0)}
#shop-oeffnen .sk .seite{position:absolute;inset:0;border-radius:4.2%/3%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#161214;
  box-shadow:var(--sx,0px) var(--sy,18px) 34px -10px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08)}
#shop-oeffnen .sk .seite img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
#shop-oeffnen .sk .ruecken{transform:rotateY(180deg)}
#shop-oeffnen .sk.ahnung .ruecken{box-shadow:0 0 0 2px var(--rf),0 0 44px 8px var(--rf),0 18px 34px -10px rgba(0,0,0,.85);animation:soAhnung .45s ease-in-out infinite alternate}
#shop-oeffnen .sk.offen .vorne{box-shadow:var(--sx,0px) var(--sy,18px) 34px -10px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1),0 0 38px -6px color-mix(in srgb,var(--rf) calc(var(--glimm,0) * 100%),transparent)}
/* the light: a sheen on every card, a rainbow foil from rare upwards, gold on a Gold print; no glitter (René 02.10.2026) */
.lk-glanz,.lk-holo{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.lk-glanz{mix-blend-mode:screen;opacity:calc(.25 + var(--lk,0) * .55);
  background:radial-gradient(farthest-corner circle at var(--lx,50%) var(--ly,40%),rgba(255,255,255,.75) 0%,rgba(255,255,255,.25) 18%,rgba(255,255,255,0) 50%)}
.lk-holo{mix-blend-mode:color-dodge;opacity:calc(var(--ho,0) * (.55 + var(--lk,0) * .5));filter:brightness(.85) contrast(1.35);
  background:repeating-linear-gradient(112deg,#ff6a5c 0%,#ffd75e 5.5%,#9dff6a 11%,#5fffe0 16.5%,#6ab8ff 22%,#ff9a6a 27.5%,#ff6a5c 33%) 0 0/210% 210%;
  background-position:var(--lx,50%) var(--ly,50%);
  -webkit-mask-image:radial-gradient(farthest-corner circle at var(--lx,50%) var(--ly,40%),#000 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.18) 100%);
          mask-image:radial-gradient(farthest-corner circle at var(--lx,50%) var(--ly,40%),#000 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.18) 100%)}
.lk-holo.gold{filter:brightness(.8) contrast(1.35);
  background:linear-gradient(115deg,transparent 22%,rgba(255,196,84,.95) 40%,#fff4cf 50%,rgba(255,184,60,.95) 60%,transparent 78%) 0 0/300% 300%;
  background-position:var(--lx,50%) var(--ly,50%)}
#shop-oeffnen .stapel-name{position:relative;z-index:2;min-height:44px;margin:6px 0 0;font:600 18px/1.2 "Barlow Condensed",sans-serif;opacity:0;transition:opacity .3s}
#shop-oeffnen .stapel-name.an{opacity:1}
#shop-oeffnen .stapel-name span{display:block;font-weight:500;font-size:14px;letter-spacing:.06em}
#shop-oeffnen .stapel-name small{display:block;margin-top:2px;font:500 12px "Barlow Condensed",sans-serif;letter-spacing:.2em;color:#bbb}
#shop-oeffnen .stapel-tipp{position:relative;z-index:2;max-width:420px;margin:0;font:500 13.5px/1.35 Barlow,sans-serif;color:#cfc8c2}
#shop-oeffnen .stapel-tipp[hidden],#shop-oeffnen .stapel-name[hidden]{display:none}
@media (max-height:700px){ #shop-oeffnen .box{gap:8px;padding-top:16px} #shop-oeffnen h2{font-size:26px} #shop-oeffnen .stapel ~ .unter{display:none} }
/* a card of the find, large: the same light, turned by the same tilt or finger */
#shop-oeffnen .gross{position:fixed;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;background:rgba(8,6,6,.9);color:#fff;outline:0}
#shop-oeffnen .gross[hidden]{display:none}
#shop-oeffnen .gross .stapel{height:min(calc(100svh - 170px),calc(90vw / .714),720px)}
#shop-oeffnen .gross > span{font:600 20px/1.2 "Barlow Condensed",sans-serif;text-align:center}
#shop-oeffnen .gross > span span{display:block;font-size:16px;font-weight:500}
@media (prefers-reduced-motion:reduce){
  #shop-oeffnen .sk,#shop-oeffnen .sk .dreh{transition-duration:.01s}
  #shop-oeffnen .sk.ahnung .ruecken{animation:none}
}
#shop-oeffnen #shop-oeffnen-mehr .coin{display:inline-grid;place-items:center;width:1.3em;height:1.3em;margin:0 2px;border-radius:50%;font-size:.75em;vertical-align:-.15em;color:#8a4d00;background:radial-gradient(circle at 35% 30%,#ffe7a3,#f2b233 45%,#b8740f)}
/* banners: text as a column at the bottom, above the price, never under it */
#shop #shop-inhalt .banner{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;height:auto;min-height:150px;padding-bottom:62px}
#shop #shop-inhalt .h .d .banner{min-height:170px;padding-bottom:74px}
#shop #shop-inhalt .banner h3,#shop #shop-inhalt .banner p{position:relative;left:auto;bottom:auto;margin:0;max-width:78%}
#shop #shop-inhalt .h-tokyo .banner p{max-width:88%}
/* the tab bar stays under the page head while the shop scrolls */
/* the tab bar sticks right under the logo row; sticky counts from the scroller's padding (88px desktop, 64px phone),
   --kopf-h cannot help here, it is the whole page head with the heroine */
#shop-inhalt .h-tabs{position:sticky;top:-14px;z-index:8}
#shop #shop-inhalt .h-tabs{background:rgba(248,244,240,.96)}
/* once stuck, an opaque band fills the strip up to the logo row, so nothing scrolls visibly under logo and profile */
#shop #shop-inhalt .h-tabs.klebt::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:140px;background:#f8f4f0;pointer-events:none}
#shop #shop-inhalt [data-anker]{scroll-margin-top:150px}
@media (max-width:1099px){ #shop-inhalt .h-tabs{top:-2px} #shop #shop-inhalt [data-anker]{scroll-margin-top:124px} }
/* a price the balance does not reach */
#shop #shop-inhalt button.price.teuer{opacity:.45;filter:grayscale(.6)}
#shop #shop-inhalt .h-bundle p{color:#ddd}
#shop-inhalt .h .d .h-bundle.promo-auf{grid-template-columns:1fr 320px}
@media (max-width:1099px){
  #shop #shop-inhalt .banner{min-height:150px;padding-bottom:56px}
}/* the shop's own message line: #hinweis lives on the map, behind every menu page */
#shop-meldung{position:fixed;left:50%;bottom:24px;z-index:70;transform:translate(-50%,20px);width:max-content;max-width:min(560px,calc(100vw - 32px));padding:12px 18px;border-radius:14px;
  font:500 14.5px/1.45 Barlow,sans-serif;color:#fff;background:rgba(20,16,16,.92);box-shadow:0 0 0 1px rgba(255,255,255,.25),0 16px 34px -12px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#shop-meldung.an{opacity:1;transform:translate(-50%,0);pointer-events:auto}
/* on a tile the pack's count would run into its band; the line under the tile says it anyway */
#shop-inhalt .pk .folie .zahl{display:none}