:root{
  color-scheme:dark;
  --void:#07080A;
  --ground:#0D0E10;
  --panel:#121417;
  --panel-hi:#1A1D21;
  --edge:#2A2E34;
  --edge-hi:#3A4048;
  --metal:#6E747C;
  --paper:#E9EAEC;
  --body:#C6CBD2;
  --dim:#98A0A9;

  --sig:#E22F01;       /* Markenrot: große Typo + Flächen */
  --sig-btn:#D82C01;   /* rote Fläche unter weißem Text, AA-fest */
  --sig-text:#FF5A2B;  /* rot als Kleintext, AA-fest */
  --sig-dk:#541F0E;
  --cool:#1F8FB4;
  --cool-text:#4CC2E0;
  --cool-dk:#0C3646;
  --cool-lo:#156F8D;   /* doc.css-Token für eingebettete Rechtstexte */
  --metal-hi:#9E9E9F;  /* dito */
  --ink:#C0C6CD;       /* dito */

  --glass:rgba(10,11,13,.92);
  --f-disp:"Chakra Petch","Eurostile","Arial Narrow",sans-serif;
  --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --bar-h:3.5rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0;
  height:100dvh;
  display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--void);
  color:var(--body);
  font-family:var(--f-body);
  font-size:1rem;line-height:1.6;
}
::selection{background:#C42900;color:#fff}
a{color:inherit}
:focus-visible{outline:2px solid var(--paper);outline-offset:2px;border-radius:1px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.skip{
  position:fixed;left:.75rem;top:.75rem;z-index:200;
  transform:translateY(-300%);
  background:var(--paper);color:var(--void);
  font-family:var(--f-disp);font-weight:700;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.8rem 1.1rem;text-decoration:none;
  transition:transform .2s;
}
.skip:focus{transform:none}

/* ============ boot ============ */
#boot{
  position:fixed;inset:0;z-index:150;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  background:var(--void);
  transition:opacity .35s ease;
}
#boot.on{display:flex}
#boot.off{opacity:0;pointer-events:none}
#boot svg{width:74px;height:74px}
.b-word{
  font-family:var(--f-disp);font-style:italic;font-weight:700;
  font-size:1.35rem;color:var(--paper);letter-spacing:-.01em;
}
.b-word b{color:var(--sig-text)}
.b-bar{width:min(46vw,190px);height:2px;background:#1B1E23;overflow:hidden}
.b-bar i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--sig),#FF7A45);
  transform:translateX(-100%);
  animation:bload 1.05s cubic-bezier(.3,.1,.3,1) forwards;
}
@keyframes bload{to{transform:none}}

/* ============ systemleiste ============ */
#sysbar{
  position:relative;z-index:60;
  flex:none;
  display:flex;align-items:center;gap:.7rem;
  min-height:var(--bar-h);
  padding:.25rem .8rem;
  padding-top:max(.25rem,env(safe-area-inset-top));
  background:var(--glass);
  border-bottom:1px solid #1B1E23;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.brand{
  display:inline-flex;align-items:center;gap:.55rem;
  min-height:44px;min-width:44px;
  text-decoration:none;flex:none;padding:0;
}
.brand svg{width:24px;height:24px;flex:none}
.bw{
  font-family:var(--f-disp);font-style:italic;font-weight:700;
  font-size:1rem;letter-spacing:-.01em;color:var(--paper);white-space:nowrap;
}
.bw b{color:var(--sig-text)}
@media (max-width:519px){.bw{display:none}}

#sys-live{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:.55rem;
  margin:0;
  font-size:.8125rem;line-height:1.3;color:var(--dim);
  white-space:nowrap;overflow:hidden;
}
#sys-live .txt{overflow:hidden;text-overflow:ellipsis}
#sys-live b{font-weight:600;color:var(--body)}
@media (max-width:719px){.t-venue{display:none}}
@media (max-width:429px){.t-dates{display:none}}

.lang{display:flex;gap:1px;padding:1px;background:var(--edge);flex:none}
.lang a{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-disp);font-weight:600;
  font-size:.75rem;letter-spacing:.1em;
  min-width:2.6rem;min-height:2.6rem;
  background:var(--void);color:var(--dim);text-decoration:none;
  transition:color .18s,background .18s;
}
.lang a[aria-current="page"]{background:var(--sig-btn);color:#fff}

#sysclock{
  /* mobil ausgeblendet — das Handy zeigt seine eigene Uhr direkt darüber */
  display:none;
  flex:none;
  font-family:var(--f-disp);font-weight:600;
  font-size:.875rem;color:var(--paper);
  font-variant-numeric:tabular-nums;letter-spacing:.05em;
  min-width:3.1rem;text-align:right;
}
/* soundtrack-control */
#snd{position:relative;display:flex;align-items:center;flex:none}
#sndbtn{
  width:44px;height:44px;display:grid;place-items:center;
  color:var(--dim);transition:color .15s,background .15s;
}
#sndbtn:hover{color:var(--paper);background:#1B1E23}
#sndbtn svg{width:19px;height:19px}
#sndbtn .i-off{display:none}
#sndbtn[aria-pressed="true"] .i-on{display:none}
#sndbtn[aria-pressed="true"] .i-off{display:block}
#sndpop{
  position:absolute;top:calc(100% + .3rem);right:2px;z-index:70;
  display:none;
  width:2.5rem;height:10.6rem;padding:0;
  background:var(--glass);border:1px solid #23272D;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .18s ease .35s,transform .18s ease .35s;
}
/* unsichtbare Hover-Bruecke ueber die Luecke zwischen Icon und Regler */
#sndpop::before{content:"";position:absolute;top:-.5rem;left:-.5rem;right:-.5rem;height:.6rem}
#sndvol{
  -webkit-appearance:none;appearance:none;
  display:block;width:8.6rem;height:24px;margin:0;
  background:transparent;cursor:pointer;
  /* vertikal: rotiert, damit alle Track/Thumb-Stile erhalten bleiben; links unten = leise, oben = laut */
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-90deg);
}
#sndvol::-webkit-slider-runnable-track{height:3px;background:#2A2E34}
#sndvol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:12px;height:12px;margin-top:-4.5px;
  background:var(--paper);border:0;border-radius:1px;
}
#sndvol::-moz-range-track{height:3px;background:#2A2E34}
#sndvol::-moz-range-thumb{width:12px;height:12px;background:var(--paper);border:0;border-radius:1px}
@media (min-width:900px){
  #sysclock{display:block;margin-left:-.35rem;margin-right:.9rem}
  #snd{margin-left:auto}
  .lang{margin-left:0}
  .brand{margin-right:1.4rem}
  #sndpop{display:block}
  #snd:hover #sndpop,#snd.open #sndpop,#snd:focus-within #sndpop{opacity:1;transform:none;pointer-events:auto;transition-delay:0s,0s}
}

/* ============ arbeitsfläche ============ */
#desk{position:relative;flex:1 1 auto;min-height:0;isolation:isolate;overflow:clip}

#wall{position:absolute;inset:0;z-index:0;overflow:hidden}
#wall img{width:100%;height:100%;object-fit:cover;display:block}
#wall::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 110%,rgba(226,47,1,.10),transparent 55%),
    linear-gradient(180deg,rgba(7,8,10,.55),rgba(7,8,10,.18) 30%,rgba(7,8,10,.28) 75%,rgba(7,8,10,.72));
}

/* ---- homescreen (mobil) / desktop-hintergrundebene ---- */
#home{
  position:absolute;inset:0;z-index:1;
  overflow-y:auto;
  display:flex;flex-direction:column;gap:1rem;
  padding:1rem .9rem calc(1rem + env(safe-area-inset-bottom));
}

/* systembenachrichtigung */
#notif{
  display:flex;align-items:center;gap:.8rem;
  padding:.85rem 1rem;
  background:var(--glass);
  border:1px solid #23272D;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
#notif .n-ic{flex:none;width:34px;height:34px;display:grid;place-items:center;background:#15181C;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
#notif .n-ic svg{width:20px;height:20px}
#notif .n-tx{flex:1 1 auto;min-width:0}
#notif p{margin:0;line-height:1.35}
.n-t{
  font-family:var(--f-disp);font-weight:700;
  font-size:.875rem;letter-spacing:.03em;color:var(--paper);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.n-s{font-size:.8125rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-s b{color:var(--body);font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:519px){.n-city{display:none}}
.n-go{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.35rem .9rem;
  font-family:var(--f-disp);font-weight:700;
  font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--sig-btn);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:filter .2s;
}
.n-go:hover{filter:brightness(1.12)}

/* app-kacheln */
#homemark{
  margin:auto 0;
  text-align:center;
  font-family:var(--f-disp);font-style:italic;font-weight:700;
  font-size:clamp(2rem,9vw,2.6rem);line-height:1;letter-spacing:-.018em;
  pointer-events:none;user-select:none;-webkit-user-select:none;
}
#homemark .a{
  background:linear-gradient(178deg,#FFF 8%,var(--paper) 38%,#8D9299 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#homemark .b{color:var(--sig);text-shadow:0 0 26px rgba(226,47,1,.45)}
#homemark .sub{
  display:block;margin-top:.55rem;
  font-style:normal;font-weight:600;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
}
@media (min-width:900px){#homemark{display:none}}
#tiles{
  display:grid;grid-template-columns:1fr 1fr;gap:.8rem;
  margin-top:auto;
}
.tile{
  display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;
  min-height:7.25rem;padding:1rem 1rem .9rem;
  text-align:left;
  background:var(--glass);
  border:1px solid #23272D;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .18s,border-color .18s,background .18s;
}
.tile:hover{border-color:var(--edge-hi);background:rgba(16,18,21,.94)}
.tile:active{transform:scale(.97)}
.tile svg{width:26px;height:26px;color:var(--paper)}
.tile[data-acc="red"] svg{color:var(--sig-text)}
.tile[data-acc="cyan"] svg{color:var(--cool-text)}
.tl{
  font-family:var(--f-disp);font-weight:700;
  font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);
}
.ts{font-size:.75rem;color:var(--dim);letter-spacing:.02em}
.ts b{color:var(--body);font-weight:600}

/* systeminfo-zeile */
#sysinfo{
  margin:0;display:flex;justify-content:center;gap:1.2rem;flex-wrap:wrap;
  font-size:.75rem;color:var(--dim);
  padding:.2rem .4rem;
}
#sysinfo a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--dim);text-decoration:none;border-bottom:1px solid #2A2E34;
}
#sysinfo a:hover{color:var(--paper)}
#sysinfo .cop{display:inline-flex;align-items:center;min-height:44px}

/* ============ apps ============ */
.app{
  position:absolute;z-index:40;
  display:flex;flex-direction:column;
  background:linear-gradient(170deg,#101216,var(--ground) 55%,#0B0C0E);
  visibility:hidden;
}
.app[data-open]{visibility:visible}

.app-bar{
  flex:none;display:flex;align-items:center;gap:.4rem;
  min-height:3.25rem;padding:0 .5rem;
  border-bottom:1px solid #1E2126;
  background:linear-gradient(180deg,#15181C,#101216);
}
.app-bar .a-ic{flex:none;width:30px;height:30px;display:grid;place-items:center}
.app-bar .a-ic svg{width:19px;height:19px}
.app[data-acc="red"] .a-ic svg{color:var(--sig-text)}
.app[data-acc="cyan"] .a-ic svg{color:var(--cool-text)}
.app[data-acc="metal"] .a-ic svg{color:var(--paper)}
.app-bar h2{
  flex:1 1 auto;margin:0;min-width:0;
  font-family:var(--f-disp);font-weight:700;
  font-size:.9375rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.app-bar h2:focus-visible{outline-offset:-2px}
.back,.x{
  flex:none;display:grid;place-items:center;
  width:44px;height:44px;color:var(--dim);
  transition:color .15s,background .15s;
}
.back:hover,.x:hover{color:var(--paper);background:#1B1E23}
.back svg,.x svg{width:18px;height:18px}
.app::before{ /* akzentkante oben */
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:1;
}
.app[data-acc="red"]::before{background:linear-gradient(90deg,var(--sig),transparent 65%)}
.app[data-acc="cyan"]::before{background:linear-gradient(90deg,var(--cool),transparent 65%)}
.app[data-acc="warm"]::before{background:linear-gradient(90deg,#FF6E22,transparent 65%)}
.app[data-acc="metal"]::before{background:linear-gradient(90deg,var(--metal),transparent 65%)}

.app-bar h2:focus{outline:none}
.app-bar h2:focus-visible{outline:1px solid var(--edge);outline-offset:4px}
.app-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:1.1rem 1rem calc(1.4rem + env(safe-area-inset-bottom));
  overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#2A2E34 transparent;
}
.app-body::-webkit-scrollbar{width:6px}
.app-body::-webkit-scrollbar-track{background:transparent}
.app-body::-webkit-scrollbar-thumb{background:#2A2E34}
.app-body::-webkit-scrollbar-thumb:hover{background:var(--metal)}
#home{scrollbar-width:thin;scrollbar-color:#2A2E34 transparent}
#home::-webkit-scrollbar{width:6px}
#home::-webkit-scrollbar-track{background:transparent}
#home::-webkit-scrollbar-thumb{background:#2A2E34}

/* --- mobil: app als vollbild-sheet --- */
@media (max-width:899px){
  .app{
    inset:0;
    transform:translateY(103%);
    transition:transform .32s cubic-bezier(.2,.75,.25,1),visibility 0s .32s;
  }
  .app[data-open]{transform:none;transition:transform .32s cubic-bezier(.2,.75,.25,1)}
  .x{display:none}
  body[data-app] #dock{display:none}
}

/* --- desktop: apps als fenster --- */
@media (min-width:900px){
  body{--colw:min(34rem,48vw);--gc-h:clamp(21rem,50%,29.5rem)}
  #home{padding:1.25rem 1.25rem}
  #notif{position:absolute;top:1rem;right:1.25rem;width:var(--colw);z-index:45;padding:.65rem 1rem}
  #tiles{
    margin:0;position:absolute;left:1.25rem;top:1.1rem;
    display:flex;flex-direction:column;gap:.7rem;width:11.5rem;
  }
  .tile{min-height:0;padding:.8rem .9rem .7rem}
  #dock #sysinfo{padding:0;margin-left:auto;gap:.9rem}
  .app{
    display:none;
    left:var(--wx);top:var(--wy);width:var(--ww);height:var(--wh);
    border:1px solid #23272D;
    box-shadow:0 0 0 1px rgba(0,0,0,.7),0 26px 60px -18px rgba(0,0,0,.85);
    clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  }
  .app[data-open]{display:flex;visibility:visible}
  .app::after{ /* scroll-hinweis: ausblendkante am inhaltsende */
    content:"";position:absolute;left:0;right:0;bottom:0;height:3.25rem;z-index:2;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(11,12,14,0),rgba(11,12,14,.92));
    opacity:0;transition:opacity .25s;
  }
  .app.has-more::after{opacity:1}
  .back{display:none}
  .app-bar{cursor:grab;user-select:none;touch-action:none}
  .app-bar:active{cursor:grabbing}
  /* Standard-Belegung folgt dem Inhaltsstand: vor Turnier #1 ist die Redaktion das
     Hauptfenster und gamescom das zweite; Turniere ruht in Kacheln/Dock (Cascade-Position).
     Sobald Turniere live sind, wandert Turniere zurück in den Haupt-Slot. */
  #app-redaktion{--wx:14rem;--wy:2.5%;--ww:calc(100vw - 14rem - var(--colw) - 2.25rem);--wh:min(95%,51.5rem)}
  #app-gamescom{--wx:calc(100vw - var(--colw) - 1.25rem);--wy:5.75rem;--ww:var(--colw);--wh:calc(2.5% + min(95%,51.5rem) - 5.75rem)}
  #app-turniere,#app-zugang{--wx:14rem;--wy:2.5%;--ww:calc(100vw - 14rem - var(--colw) - 2.25rem);--wh:min(95%,51.5rem)}
  #app-impressum,#app-datenschutz,#app-ki{--wx:14rem;--wy:2.5%;--ww:calc(100vw - 14rem - var(--colw) - 2.25rem);--wh:min(95%,51.5rem)}
  /* redaktion im breiten Haupt-Slot: lesbare zeilenlänge, karten als inhaltsspalte */
  #app-redaktion .app-body{padding-left:1.5rem;padding-right:1.5rem}
  #app-redaktion .blk,#app-redaktion .note,#app-redaktion .artfilter{max-width:46rem;margin-left:auto;margin-right:auto}
  /* fokus-blitz beim erneuten aufruf eines schon offenen fensters */
  .app.flash .app-bar{animation:barflash .55s ease}
  @keyframes barflash{0%,35%{filter:brightness(1.9)}100%{filter:none}}
}

/* ============ app-inhalte ============ */
.blk{
  --cut:10px;
  padding:1px;margin:0 0 .9rem;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  background:linear-gradient(160deg,var(--edge),#15181C 70%);
}
.blk > div{
  --cut:9px;
  padding:1.1rem 1.15rem 1.15rem;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  background:linear-gradient(165deg,var(--panel),#0E1013);
}
.blk.hot{background:linear-gradient(140deg,var(--sig-dk),var(--edge) 40%,#15181C)}

.k{
  margin:0 0 .5rem;display:flex;align-items:center;gap:.55rem;
  font-family:var(--f-disp);font-weight:700;
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.k .hotk{color:var(--sig-text)}
.blk h3{
  margin:0 0 .4rem;
  font-family:var(--f-disp);font-style:italic;font-weight:700;
  font-size:1.35rem;line-height:1.12;letter-spacing:-.01em;text-transform:uppercase;color:var(--paper);
}
.meta{margin:0 0 1rem;font-size:.9375rem;color:var(--dim)}
.meta b{color:var(--body);font-weight:600}

.scoreline{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  margin:0 0 .35rem;
  font-family:var(--f-disp);font-weight:700;
  font-size:1.3rem;letter-spacing:.02em;color:var(--paper);
}
.scoreline .vs{font-size:1.5rem;font-variant-numeric:tabular-nums}
.scoreline .vs i{font-style:normal;color:var(--dim);padding:0 .15rem}

.count{display:flex;gap:.5rem;margin:0 0 1.1rem}
.count > div{
  flex:1;max-width:5.25rem;text-align:center;
  padding:.6rem .25rem .5rem;
  background:var(--void);
  border:1px solid #1E2126;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.count b{
  display:block;
  font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.4rem,5vw,1.75rem);line-height:1.1;
  color:var(--paper);font-variant-numeric:tabular-nums;
}
.count span{
  display:block;margin-top:.12rem;
  font-family:var(--f-disp);font-weight:600;
  font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
}

.prog{margin:0 0 1.1rem}
.prog-bar{height:5px;background:#1E2126;border-radius:3px;overflow:hidden}
.prog-bar b{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#B92800,var(--sig))}
.prog p{margin:.45rem 0 0;font-size:.8125rem;color:var(--dim)}
.prog p b{color:var(--body);font-weight:600}

.specs{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.1rem}
.specs dt{
  font-family:var(--f-disp);font-weight:600;
  font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
  padding-top:.15rem;
}
.specs dd{margin:0;font-size:.9375rem;color:var(--body)}

.disc{
  display:inline-block;
  font-family:var(--f-disp);font-weight:700;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cool-text);
  padding:.26rem .55rem;border:1px solid var(--cool-dk);
  margin-bottom:.7rem;
}

.btn{
  --cut:8px;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.5rem 1.4rem;
  text-decoration:none;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  font-family:var(--f-disp);font-weight:700;
  font-size:.875rem;letter-spacing:.13em;text-transform:uppercase;
  transition:filter .2s,transform .2s;
}
.btn svg{width:15px;height:15px;flex:none}
.btn-p{background:linear-gradient(170deg,#D82C01,#C42900 60%,#AD2400);color:#fff}
.btn-p:hover{filter:drop-shadow(0 5px 16px rgba(226,47,1,.5));transform:translateY(-1px)}
.btn-s{background:linear-gradient(172deg,var(--panel-hi),#0B0C0E);color:var(--paper);box-shadow:inset 0 0 0 1px var(--edge)}
.btn-s:hover{filter:brightness(1.3)}
.btn:active{transform:translateY(1px)}

/* redaktion */
.rev > div{display:grid;grid-template-columns:auto 1fr;gap:1.1rem}
.seal-col{display:flex;flex-direction:column;align-items:center;gap:.45rem}
.seal{
  width:96px;height:109px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:conic-gradient(from 210deg,#565C64,#C9CFD5 18%,#787E86 34%,#EDF1F4 52%,#6E747C 66%,#B9BFC6 84%,#565C64);
  position:relative;
}
.seal::before{
  content:"";position:absolute;inset:5px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(170deg,#1B1E22,#0E1013 70%);
}
.seal-num{
  position:relative;
  font-family:var(--f-disp);font-weight:700;font-style:italic;
  font-size:1.85rem;line-height:1;
  background:linear-gradient(176deg,#FFF 15%,var(--paper) 50%,#A9AFB6 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.seal-cap{
  position:relative;margin-top:.28rem;
  font-family:var(--f-disp);font-weight:600;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.seal-word{
  font-family:var(--f-disp);font-weight:700;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cool-text);
}
.rev-tag{
  margin:0 0 .3rem;
  font-family:var(--f-disp);font-weight:600;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.rev-txt{margin:0 0 1rem;font-size:.9375rem;line-height:1.6;color:var(--body)}
.crit{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.5rem}
.crit li{display:grid;grid-template-columns:8.5rem 1fr 2.2rem;align-items:center;gap:.7rem}
.crit .cl{
  font-family:var(--f-disp);font-weight:600;
  font-size:.75rem;letter-spacing:.05em;line-height:1.25;text-transform:uppercase;color:var(--dim);
}
.crit .bar{height:4px;background:#1E2126;border-radius:2px;overflow:hidden}
.crit .bar b{display:block;height:100%;width:calc(var(--v)*100%);border-radius:2px;background:linear-gradient(90deg,var(--metal),#C6CCD2)}
.crit .cv{
  font-family:var(--f-disp);font-weight:600;font-size:.8125rem;
  color:var(--body);text-align:right;font-variant-numeric:tabular-nums;
}
.more{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  font-family:var(--f-disp);font-weight:700;
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sig-text);text-decoration:none;
}
.more svg{width:14px;height:14px;transition:transform .2s}
.more:hover{color:#FF7A50}
.more:hover svg{transform:translateX(4px)}
.note{margin:.2rem 0 0;font-size:.875rem;color:var(--dim)}
.note b{color:var(--body);font-weight:600}
@media (max-width:480px){
  .rev > div{grid-template-columns:1fr}
  .seal-col{flex-direction:row;justify-content:flex-start;gap:1rem}
  .crit li{grid-template-columns:7.25rem 1fr 2.2rem}
}

/* redaktion: artikel-karten (liste traegt 0/3/30 eintraege) */
.art-card{padding:1px;transition:background .18s}
.art-card>div{padding:0}
.art-card:hover{background:linear-gradient(160deg,var(--edge-hi),#1B2026 70%)}
.art-face{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:16.5rem;transition:filter .25s}
.art-card:hover .art-face{filter:brightness(1.08)}
.art-card:hover .more svg{transform:translateX(4px)}
.art-card--plain:hover{background:linear-gradient(160deg,var(--edge),#15181C 70%)}
.art-card--plain:hover .art-face{filter:none}
/* prozedurale cover: buehnenlicht-stimmung je titel — platzhalter, bis pressebilder da sind */
/* Echte Cover je Spiel setzt der Generator als Inline-Regeln im <head>
   (aus content/games/*.json, mit dokumentiertem credit/sourceUrl);
   die prozeduralen Flächen darunter sind der Fallback ohne Pressebild. */

.art-face::before,.art-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(233,234,236,.035) 0 1px,transparent 1px 4px);
}
.cov-cs2{background:
  linear-gradient(112deg,transparent 38%,rgba(160,190,208,.24) 45%,rgba(160,190,208,.05) 56%,transparent 61%),
  linear-gradient(96deg,transparent 62%,rgba(148,178,196,.12) 67%,transparent 74%),
  radial-gradient(60% 95% at 20% 2%,rgba(130,164,184,.5),transparent 64%),
  radial-gradient(48% 72% at 70% 30%,rgba(96,124,142,.34),transparent 66%),
  radial-gradient(70% 55% at 86% 100%,rgba(38,54,66,.9),transparent 72%),
  linear-gradient(168deg,#22303C,#0E141A 58%,#080B0F);}
.cov-eafc{background:
  linear-gradient(107deg,transparent 22%,rgba(238,250,240,.24) 28%,rgba(238,250,240,.04) 42%,transparent 48%),
  linear-gradient(253deg,transparent 22%,rgba(238,250,240,.2) 28%,rgba(238,250,240,.04) 42%,transparent 48%),
  repeating-linear-gradient(90deg,rgba(228,255,236,.05) 0 2.6rem,transparent 2.6rem 5.2rem),
  radial-gradient(80% 65% at 50% 114%,rgba(52,110,64,.85),transparent 74%),
  radial-gradient(50% 45% at 50% -12%,rgba(210,235,215,.14),transparent 70%),
  linear-gradient(170deg,#1B3423,#0D1911 60%,#080D0A);}
.cov-rl{background:
  radial-gradient(46% 76% at 8% 106%,rgba(255,120,44,.44),transparent 68%),
  radial-gradient(50% 82% at 92% 104%,rgba(64,178,236,.4),transparent 68%),
  radial-gradient(64% 55% at 50% -16%,rgba(134,124,232,.32),transparent 72%),
  linear-gradient(172deg,#201E3E,#100F20 58%,#090914);}
.art-scrim{
  position:relative;z-index:1;
  padding:2.9rem 1.15rem 1.05rem;
  /* WP-L7/V1: frueher abdunkeln, damit die Kicker-Zeile auch ueber hellen Covern AA erreicht */
  background:linear-gradient(180deg,rgba(7,8,10,.42),rgba(7,8,10,.66) 22%,rgba(8,9,11,.9) 55%,rgba(9,10,12,.97));
}
.art-kick{
  margin:0 0 .4rem;display:flex;align-items:baseline;gap:.6rem;
  font-family:var(--f-disp);font-weight:700;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cool-text);
}
.art-kick time{margin-left:auto;flex:none;font-weight:600;letter-spacing:.1em;color:var(--dim);font-variant-numeric:tabular-nums}
.art-face .art-kick{flex-wrap:wrap;padding-right:3.6rem} /* siegel-/status-zone oben rechts freihalten */
.art-face .art-kick time{margin-left:0}
.art-t{
  margin:0 0 .4rem;
  font-family:var(--f-disp);font-style:italic;font-weight:700;
  font-size:1.5rem;line-height:1.08;letter-spacing:-.01em;text-transform:uppercase;color:var(--paper);
}
.art-t a{text-decoration:none;color:inherit}
.art-t a::after{content:"";position:absolute;inset:0;z-index:2}
.art-t a:focus-visible{outline:none}
.art-t a:focus-visible::after{box-shadow:inset 0 0 0 2px var(--paper)}
.art-teaser{margin:0 0 .55rem;max-width:36rem;font-size:.9375rem;line-height:1.55;color:var(--body)}
.art-card .more{min-height:1.85rem;color:var(--sig-text)}
.art-seal{position:absolute;top:1rem;right:1rem;z-index:1;filter:drop-shadow(0 8px 18px rgba(0,0,0,.55))}
.seal--s{width:62px;height:70px}
.seal--s::before{inset:4px}
.seal--s .seal-num{font-size:1.15rem}
.seal--s .seal-cap{margin-top:.16rem;font-size:.5rem;letter-spacing:.13em}
.art-flag{
  margin:0;position:absolute;top:1rem;right:1rem;z-index:1;
  font-family:var(--f-disp);font-weight:700;
  font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:var(--body);
  background:rgba(7,8,10,.8);border:1px solid var(--edge-hi);
  padding:.34rem .6rem .3rem;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.art-wait{
  margin:0;display:inline-flex;align-items:center;min-height:1.85rem;
  font-family:var(--f-disp);font-weight:600;
  font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
}
/* leerzustand (0 artikel) */
.art-empty{display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:2.9rem 1.25rem 3.1rem;text-align:center}
.art-empty svg{width:34px;height:34px;color:var(--cool-text)}
.art-empty h3{margin:.1rem 0 0;font-family:var(--f-disp);font-style:italic;font-weight:700;font-size:1.35rem;line-height:1.15;text-transform:uppercase;color:var(--paper)}
.art-empty p{margin:0;max-width:26rem;font-size:.9375rem;line-height:1.6;color:var(--dim)}
.art-empty .k{margin:.45rem 0 0;justify-content:center}
.art-empty .k b{color:var(--paper);font-variant-numeric:tabular-nums}

/* redaktion: suche + statusfilter ueber der artikelliste.
   Kommt nur ab 4 Artikeln aus dem Generator; hidden-Attribut ist das JS-Gate. */
.artfilter{display:flex;flex-direction:column;gap:.6rem;margin:0 0 1.15rem}
.artfilter[hidden]{display:none}  /* JS-Gate: display:flex darf das hidden-Attribut nie ueberstimmen */
.af-search{position:relative}
.af-search svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--dim);pointer-events:none}
.af-search input{
  width:100%;min-height:2.75rem;
  font-family:var(--f-body);font-size:1rem;
  color:var(--paper);background:var(--void);
  border:1px solid var(--edge);border-radius:0;
  padding:.45rem .7rem .45rem 2.4rem;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  -webkit-appearance:none;appearance:none;
  transition:border-color .15s,background .15s;
}
.af-search input::placeholder{color:var(--dim);opacity:.7}
.af-search input:focus{outline:none;border-color:var(--cool-text);background:#0A0F13}
.af-chips{display:flex;gap:.35rem;flex-wrap:wrap}
.af-chip{
  flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:2.75rem;padding:.3rem .7rem;   /* 2.75rem = 44px: Touchziel */
  font-family:var(--f-disp);font-weight:600;
  font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);background:transparent;
  border:1px solid var(--edge);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:color .12s,border-color .12s,background .12s;
  white-space:nowrap;
}
.af-chip:hover{border-color:var(--edge-hi);color:var(--body)}
.af-chip:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.af-chip[aria-pressed="true"]{background:var(--cool-dk);border-color:var(--cool);color:var(--cool-text)}
.af-chip b{font-variant-numeric:tabular-nums;font-weight:600}
.af-reset{
  margin-top:.5rem;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:2.75rem;padding:.4rem 1.15rem;
  font-family:var(--f-disp);font-weight:700;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cool-text);background:transparent;
  border:1px solid var(--cool);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:background .12s;
}
.af-reset:hover{background:var(--cool-dk)}
.af-reset:focus-visible{outline:2px solid var(--paper);outline-offset:2px}

/* artikel-detail (unterseite der redaktion — kein eigenes dock-icon) */
#app-artikel .app-body{padding:0 0 calc(1.7rem + env(safe-area-inset-bottom))}
.art-hero{position:relative;height:clamp(10rem,34vw,13rem)}
.art-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,10,.12),transparent 42%,rgba(13,14,16,.5) 82%,var(--ground))}
.art-in{max-width:46rem;margin:0 auto;padding:1.35rem 1rem 0}
.art-head{margin:0 0 1.5rem}
.art-head::after{content:"";display:block;height:1px;margin-top:1.35rem;background:linear-gradient(90deg,var(--cool-dk),var(--edge) 35%,transparent 94%)}
.art-title{
  margin:.25rem 0 .75rem;
  font-family:var(--f-disp);font-style:italic;font-weight:700;
  font-size:clamp(1.75rem,6vw,2.35rem);line-height:1.04;letter-spacing:-.012em;text-transform:uppercase;
  background:linear-gradient(178deg,#FFF 8%,var(--paper) 38%,#8D9299 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-wrap:balance;
}
.art-lede{margin:0 0 1.2rem;font-size:1.0625rem;line-height:1.6;color:var(--body)}
.art-cred{margin:0;display:flex;flex-direction:column;gap:.32rem;max-width:24rem}
.art-cred div{display:flex;align-items:baseline;gap:.6rem}
.art-cred dt{flex:none;font-family:var(--f-disp);font-weight:500;font-size:.575rem;letter-spacing:.17em;text-transform:uppercase;color:var(--dim)}
.art-cred .dots{flex:1;height:1px;align-self:center;background:repeating-linear-gradient(90deg,var(--edge) 0 2px,transparent 2px 5px)}
.art-cred dd{margin:0;flex:none;max-width:60%;font-family:var(--f-disp);font-weight:600;font-size:.78rem;letter-spacing:.03em;color:var(--paper);text-align:right}
.art-copy{margin:0 0 1.5rem}
.art-copy p{margin:0 0 1.1rem;font-size:1rem;line-height:1.7;color:var(--body)}
.art-score .k,.art-fazit .k{margin-bottom:.7rem}
.k .coolk{color:var(--cool-text)}
.blk.cool{background:linear-gradient(140deg,var(--cool-dk),var(--edge) 40%,#15181C)}
.fazit-txt{margin:0;font-size:1rem;line-height:1.65;color:var(--body)}
.fazit-txt b{color:var(--paper);font-weight:600}

/* wertungskasten (anspieltest-scorecard): panel + zaehlerkachel (count-idiom),
   balken in redaktions-cyan mit 1-punkt-ticks — bewusst kein zweites siegel */
.art-rating .k{margin-bottom:.9rem}
.rate{display:grid;grid-template-columns:1fr auto;gap:1rem 1.5rem;align-items:center;margin:0 0 .95rem}
.rate-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.rate-list li{display:grid;grid-template-columns:8.5rem 1fr 2.2rem;align-items:center;gap:.7rem}
.rate-list .rl{
  font-family:var(--f-disp);font-weight:600;
  font-size:.75rem;letter-spacing:.05em;line-height:1.25;text-transform:uppercase;color:var(--dim);
}
.rate-list .rbar{position:relative;height:6px;background:#0E161C;overflow:hidden}
.rate-list .rbar b{display:block;height:100%;width:calc(var(--v)*100%);background:linear-gradient(90deg,var(--cool-lo),var(--cool) 70%,#3DB4D6)}
.rate-list .rbar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--ground) calc(10% - 1px) 10%);
}
.rate-list .rv{
  font-family:var(--f-disp);font-weight:600;font-size:.8125rem;
  color:var(--paper);text-align:right;font-variant-numeric:tabular-nums;
}
.rate-total{
  margin:0;align-self:center;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  min-width:7.25rem;padding:.8rem 1.1rem .7rem;
  background:var(--void);border:1px solid var(--cool-dk);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.rt-num{
  font-family:var(--f-disp);font-weight:700;
  font-size:2rem;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums;
}
.rt-num .rt-of{font-size:.9rem;font-weight:600;color:var(--dim);margin-left:.2rem}
.rt-cap{
  font-family:var(--f-disp);font-weight:600;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cool-text);
}
@media (max-width:480px){
  .rate{grid-template-columns:1fr}
  .rate-list li{grid-template-columns:7.25rem 1fr 2.2rem}
  .rate-total{flex-direction:row-reverse;align-items:baseline;justify-content:center;gap:.6rem;padding:.6rem 1rem .55rem}
}
@media (prefers-reduced-motion:no-preference){
  .rate-list .rbar b{transform-origin:left;animation:ratefill .7s cubic-bezier(.2,.7,.2,1) backwards}
  .rate-list li:nth-child(2) .rbar b{animation-delay:.07s}
  .rate-list li:nth-child(3) .rbar b{animation-delay:.14s}
  .rate-list li:nth-child(4) .rbar b{animation-delay:.21s}
  .rate-list li:nth-child(5) .rbar b{animation-delay:.28s}
}
@keyframes ratefill{from{transform:scaleX(0)}}
.art-bridge{margin:1.4rem 0 2.1rem}
.art-press{margin:0}
.press-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:0 0 .6rem}
.press-ph{
  position:relative;aspect-ratio:16/9;display:grid;place-items:center;
  background:linear-gradient(165deg,#101216,#0A0C0E);border:1px solid #1E2126;color:#3A4048;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.press-ph svg{width:26px;height:26px}
.press-credit{margin:0;font-size:.8125rem;color:var(--dim)}
.press-credit b{color:var(--body);font-weight:600}
@media (max-width:479px){.press-grid{grid-template-columns:1fr}.press-ph{aspect-ratio:21/9}}
@media (min-width:900px){
  #app-artikel{--wx:15.25rem;--wy:calc(2.5% + 1.25rem);--ww:calc(100vw - 14rem - var(--colw) - 2.25rem);--wh:min(92%,50rem)}
  .art-in{padding:1.6rem 1.5rem 0}
  .art-hero{height:clamp(11rem,24vh,15rem)}
}

/* gamescom */
.gc-stage{
  position:relative;height:160px;margin:-1.1rem -1rem 1rem;
  overflow:hidden;border-bottom:1px solid #1E2126;
}
.gc-stage svg{width:100%;height:100%;display:block}
.gc-chip{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-disp);font-weight:700;
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cool-text);
  padding:.45rem .85rem;border:1px solid var(--cool-dk);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.gc-chip b{font-variant-numeric:tabular-nums}
@media (min-width:900px){
  .gc-stage{height:clamp(6.5rem,17vh,10rem)}
}

/* zugang */
.claim{
  margin:0 0 .6rem;
  font-family:var(--f-disp);font-style:italic;font-weight:700;
  font-size:clamp(1.5rem,5.5vw,1.9rem);line-height:1.1;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--paper);
}
.claim i{font-style:italic;color:var(--sig)}

/* legal-fenster: seiteninhalt im fensterkörper */
.app-body--frame{padding:0;overflow:hidden}
.app-body--frame iframe{display:block;width:100%;height:100%;border:0;background:var(--ground)}

/* ============ dock ============ */
#dock{
  position:relative;z-index:60;flex:none;
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem .9rem;
  padding-bottom:max(.6rem,env(safe-area-inset-bottom));
  background:var(--glass);
  border-top:1px solid #1B1E23;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
#dock .btn{flex:1 1 0}
.dk{display:none}
@media (min-width:900px){
  #dock{justify-content:center}
  #dock .btn{flex:0 0 auto;min-height:44px;padding:.4rem 1.2rem}
  .dk{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
    min-width:5.5rem;min-height:44px;padding:.3rem .7rem;
    color:var(--dim);
    transition:color .15s,background .15s;
    position:relative;
  }
  .dk:hover{color:var(--paper);background:#15181C}
  .dk svg{width:20px;height:20px}
  .dk span{
    font-family:var(--f-disp);font-weight:600;
    font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  }
  .dk[aria-pressed="true"]{color:var(--paper)}
  .dk[aria-pressed="true"]::after{
    content:"";position:absolute;bottom:1px;width:14px;height:2px;background:var(--sig);
  }
  .dock-sep{width:1px;height:2rem;background:var(--edge)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ===== eingebettete Rechtstexte: Typografie aus doc.css (".doc"-scope) ===== */
.doc-head::after{content:"";display:block;height:1px;margin-top:1.35rem;
  background:linear-gradient(90deg,var(--sig-dk),var(--edge) 35%,transparent 94%);}
.doc-title{margin:0;
  font-family:var(--f-disp);font-style:italic;font-weight:700;
  font-size:clamp(1.35rem,6.4vw,2.1rem);line-height:1.12;
  letter-spacing:-.012em;text-transform:uppercase;
  background:linear-gradient(178deg,#FFF 8%,var(--paper) 38%,#8D9299 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-wrap:balance;}
.doc-title::after{content:"";display:inline-block;width:8px;height:8px;
  margin-left:.6rem;vertical-align:.16em;
  transform:rotate(45deg);background:var(--sig);}
.stamp{margin:.9rem 0 0;
  font-family:var(--f-disp);font-weight:500;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);}
.doc p{margin:0 0 1.05rem;color:var(--ink)}
.doc h2{display:flex;align-items:center;gap:.7rem;
  margin:2.6rem 0 1rem;
  font-family:var(--f-disp);font-weight:700;
  font-size:.8rem;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);}
.doc h2::after{content:"";flex:1;min-width:1.5rem;height:1px;
  background:linear-gradient(90deg,var(--edge),transparent);}
.doc h2:first-child{margin-top:.2rem}
.doc h3{margin:1.9rem 0 .6rem;
  font-family:var(--f-disp);font-weight:600;
  font-size:.68rem;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;
  color:var(--metal-hi);}
.doc ul,.doc ol{margin:0 0 1.1rem;padding-left:1.25rem;color:var(--ink)}
.doc li{margin:.35rem 0}
.doc li::marker{color:var(--metal)}
.doc ul ul,.doc ol ol,.doc ul ol,.doc ol ul{margin:.35rem 0 .45rem}
.doc a{color:var(--cool);
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--cool) 45%,transparent);
  text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-color .18s,color .18s;}
.doc a:hover{color:#3EA6C9;text-decoration-color:var(--cool)}
.doc a:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.doc strong{color:var(--paper);font-weight:600}
.doc em{font-style:italic}
.doc address{font-style:normal}
.doc hr{border:0;height:1px;margin:2.1rem 0;
  background:linear-gradient(90deg,transparent,var(--edge) 15%,var(--edge) 85%,transparent);}
.doc blockquote{margin:0 0 1.1rem;padding:.15rem 0 .15rem 1rem;
  border-left:2px solid var(--edge);color:var(--dim);}
.doc th,.doc td{border:1px solid var(--edge);
  padding:.5rem .7rem;
  text-align:left;vertical-align:top;}
.doc th{font-family:var(--f-disp);font-weight:600;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);background:var(--panel);}
.doc td{color:var(--ink)}
.doc-head{margin:2.8rem 0 2.4rem}
.doc-embed .doc{margin:0 auto}
.doc-embed .stamp{display:block;margin:0 0 1.4rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.doc-loading{color:var(--dim)}


/* cred/dots der Rechtstexte (doc.css), gescoped auf die eingebetteten Fenster */
.doc-embed .cred div{display:flex;align-items:baseline;gap:.6rem}
.doc-embed .cred dt{flex:none;width:5.6rem;
  font-family:var(--f-disp);font-weight:500;
  font-size:.575rem;letter-spacing:.17em;text-transform:uppercase;color:var(--dim);}
.doc-embed .cred dd{margin:0;flex:none;max-width:70%;
  font-family:var(--f-disp);font-weight:600;
  font-size:.78rem;letter-spacing:.03em;color:var(--paper);
  text-align:right;}
.doc-embed .cred dd a{color:var(--paper);text-decoration:none;
  border-bottom:1px solid var(--cool-lo);
  transition:color .18s,border-color .18s;}
.doc-embed .cred dd a:hover{color:#3EA6C9;border-color:var(--cool)}
.doc-embed .cred dd a:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.doc-embed .dots{flex:1;height:1px;align-self:center;
  background:repeating-linear-gradient(90deg,var(--edge) 0 2px,transparent 2px 5px);}

/* sehr schmale geraete (<=379px): dock-buttons duerfen nicht ueberlaufen */
#dock .btn{min-width:0}
@media (max-width:379px){
  #dock .btn{padding-left:.6rem;padding-right:.6rem;letter-spacing:.08em}
}

/* WP-L7: sichtbarer Bildnachweis unter dem Artikel-Hero */
.art-imgcredit{margin:.35rem 1.15rem 0;text-align:right;font-size:.62rem;letter-spacing:.06em;color:#7A828B}

/* pressebilder im artikel (generator-ergänzung, gleiche formsprache wie .press-ph) */
.press-grid img.press-img{width:100%;height:auto;display:block;background:#0A0C0E;border:1px solid #1E2126;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
/* no-js hinweisblock */
#nojs a{color:var(--body)}
#nojs a:hover{color:var(--paper)}