/* ============================================================
   PIXELWERK 1.0.0 — Streamer-Layout für ilch CMS 2.2
   Copyright by gameserver-install.de — by rumpel

   Keine fremden Schriften, keine fremden Symbole. Alles im Layout.
   ============================================================ */

:root{
  /* Vier Rundungen fuer die ganze Seite. Vorher waren acht
     verschiedene Werte in Gebrauch - das wirkte unruhig, ohne dass
     man den Grund sofort sieht. */
  --r-flaeche:16px;   /* grosse Flaechen: Aufmacher, Banner, Tabellen */
  --r-karte:14px;     /* Karten und Kaesten */
  --r-feld:10px;      /* Knoepfe, Felder, kleine Marken */
  --r-rund:99px;      /* Pillen und Punkte */

  /* Zwei Werte bestimmen die Breite der ganzen Seite. Wer etwas
     schmaler oder breiter mag, aendert sie hier an einer Stelle. */
  --breite:1340px;
  --rand:30px;
}
:root{
  --gut:#1a9e5f; --mittel:#c98a00; --schlecht:#c0392b;
}
html.dark{
  --gut:#37d68a; --mittel:#f0b429; --schlecht:#f2564a;
}
:root, html:not(.dark){
  --bg:#f5f4f0; --pane:#ffffff; --pane2:#eceae4; --line:#dedbd2; --line2:#c2beb2;
  --txt:#14141a; --dim:#6b6878; --schatten:rgba(20,20,26,.10);
}
html.dark{
  --bg:#0a0a0e; --pane:#121218; --pane2:#16161c; --line:#22222c; --line2:#33333f;
  --txt:#f2f1f5; --dim:#8a8898; --schatten:rgba(0,0,0,.55);
}
html[data-accent="orange"] {--acc:#ff6a3d; --auf-acc:#1c0800; --acc-rgb:255,106,61}
html[data-accent="limette"]{--acc:#c8ff2f; --auf-acc:#1f2b00; --acc-rgb:200,255,47}
html[data-accent="cyan"]   {--acc:#2fd4ff; --auf-acc:#00232e; --acc-rgb:47,212,255}
html[data-accent="magenta"]{--acc:#ff3d92; --auf-acc:#fff; --acc-rgb:255,61,146}
html[data-accent="violett"]{--acc:#9b7bff; --auf-acc:#12061f; --acc-rgb:155,123,255}
html[data-accent="gruen"]  {--acc:#2fd97a; --auf-acc:#00250f; --acc-rgb:47,217,122}
html:not([data-accent]){--acc:#ff6a3d; --auf-acc:#1c0800; --acc-rgb:255,106,61}
html:not(.dark)[data-accent="limette"]{--acc:#8fc400; --auf-acc:#fff; --acc-rgb:143,196,0}
html:not(.dark)[data-accent="cyan"]{--acc:#0093c4; --auf-acc:#fff; --acc-rgb:0,147,196}
html:not(.dark)[data-accent="gruen"]{--acc:#12a35a; --auf-acc:#fff; --acc-rgb:18,163,90}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--schrift, system-ui, sans-serif);
  font-size:16px; line-height:1.62; overflow-x:hidden;
  display:flex; flex-direction:column; min-height:100vh;
  transition:background .4s ease, color .4s ease;
  -webkit-font-smoothing:antialiased;
}
body > *{flex:none; width:100%}
img{max-width:100%; height:auto}
a{color:var(--acc); text-decoration:none}
h1,h2,h3,h4,h5{margin:0; font-family:var(--schrift-titel, inherit)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.px-sym{display:block; flex:none}
.px-mono{font-family:'Consolas','SF Mono','Segoe UI Mono','Roboto Mono',monospace}
.px-label{font-family:'Consolas','SF Mono','Segoe UI Mono',monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.px-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- Hintergrund ---------- */
#px-nebel{
  position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(680px 460px at 14% 8%, rgba(var(--acc-rgb),.10), transparent 62%),
    radial-gradient(560px 520px at 88% 32%, rgba(var(--acc-rgb),.06), transparent 60%),
    radial-gradient(circle at center, currentColor 1px, transparent 1.2px);
  background-size:auto, auto, var(--raster-weite,22px) var(--raster-weite,22px);
  color:rgba(127,127,140,calc(.20 * var(--raster-staerke,1)));
  animation:px-raster 60s linear infinite;
}
html.dark #px-nebel{color:rgba(180,180,200,calc(.13 * var(--raster-staerke,1)))}
@keyframes px-raster{
  from{background-position:0 0, 0 0, 0 0}
  to{background-position:0 0, 0 0, 220px 220px}
}
html[data-anim="0"] #px-nebel{animation:none}
html[data-nebel="0"] #px-nebel{display:none}
@keyframes px-wabern{from{transform:translate(0,0)}to{transform:translate(3%,-2.5%)}}
#px-grund{position:fixed; inset:0; z-index:-3; display:none}
html[data-bg="on"] #px-grund{display:block}
#px-grund img,#px-grund video{width:100%; height:100%; object-fit:cover}
#px-grund::after{content:''; position:absolute; inset:0; background:var(--bg);
  opacity:var(--grund-deckung,.74)}

/* ============================================================
   Ladeanzeige — „Die Presse"

   Drei Bogen wandern unter einer Walze durch, wie in einer
   Druckmaschine. Der Abgang laeuft ueber eine CSS-Animation mit
   fill-mode:forwards und braucht das Skript nicht.
   ============================================================ */
#px-pre{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
  animation:px-pre-raus .8s cubic-bezier(.76,0,.24,1) forwards;
  animation-delay:var(--pre-dauer,1.9s);
}
@keyframes px-pre-raus{
  0%{opacity:1; visibility:visible; clip-path:inset(0 0 0 0)}
  99%{opacity:0; clip-path:inset(0 100% 0 0)}
  100%{opacity:0; visibility:hidden; clip-path:inset(0 100% 0 0); pointer-events:none}
}
#px-pre.fort{display:none}
.px-pre-mitte{display:flex; flex-direction:column; align-items:center; gap:28px}

/* Der Rahmen der Presse. Ohne overflow:hidden liefen die Bogen ueber
   den ganzen Bildschirm, statt durch die Maschine zu laufen. */
.px-pre-presse{
  position:relative; width:200px; height:104px;
  overflow:hidden; border-radius:12px;
  background:var(--pane2);
  border:1px solid var(--line);
}
/* Die Bogen wandern von links nach rechts durch. Auf halbem Weg
   laufen sie unter die Walze und kommen bedruckt wieder heraus. */
.px-pre-presse .bogen{
  position:absolute; top:50%; left:0; width:78px; height:56px;
  margin-top:-28px; border-radius:5px;
  background:var(--pane); border:1px solid var(--line);
  animation:px-durchlauf 2.1s cubic-bezier(.45,0,.35,1) infinite;
}
/* Die Druckzeilen auf dem Bogen, anfangs unsichtbar */
.px-pre-presse .bogen::before,
.px-pre-presse .bogen::after{
  content:''; position:absolute; left:9px; height:4px; border-radius:2px;
  background:var(--acc); opacity:0; transform:scaleX(0); transform-origin:left;
  animation:px-drucken 2.1s cubic-bezier(.45,0,.35,1) infinite;
  animation-delay:inherit;
}
.px-pre-presse .bogen::before{top:13px; width:44px}
.px-pre-presse .bogen::after{top:25px; width:28px}
.px-pre-presse .b1{animation-delay:0s}
.px-pre-presse .b1::before,.px-pre-presse .b1::after{animation-delay:0s}
.px-pre-presse .b2{animation-delay:.7s}
.px-pre-presse .b2::before,.px-pre-presse .b2::after{animation-delay:.7s}
.px-pre-presse .b3{animation-delay:1.4s}
.px-pre-presse .b3::before,.px-pre-presse .b3::after{animation-delay:1.4s}

@keyframes px-durchlauf{
  0%   {transform:translateX(-90px) rotate(-3deg); opacity:0}
  14%  {opacity:1}
  86%  {opacity:1}
  100% {transform:translateX(200px) rotate(2deg); opacity:0}
}
@keyframes px-drucken{
  0%,44%  {opacity:0; transform:scaleX(0)}
  58%     {opacity:1; transform:scaleX(1)}
  100%    {opacity:1; transform:scaleX(1)}
}

/* Die Walze steht in der Mitte und dreht sich. Dafuer braucht es ein
   wiederholtes Streifenmuster - ein einfacher Verlauf laesst sich
   nicht sichtbar verschieben. */
.px-pre-presse .walze{
  position:absolute; left:50%; top:-6px; bottom:-6px; width:20px;
  margin-left:-10px; border-radius:99px; z-index:3;
  background:repeating-linear-gradient(
    180deg,
    var(--acc) 0 7px,
    rgba(var(--acc-rgb),.45) 7px 14px);
  background-size:100% 14px;
  box-shadow:0 0 22px rgba(var(--acc-rgb),.5);
  animation:px-walze .5s linear infinite;
}
@keyframes px-walze{
  from{background-position:0 0}
  to  {background-position:0 14px}
}
html[data-anim="0"] .px-pre-presse .bogen,
html[data-anim="0"] .px-pre-presse .walze,
html[data-anim="0"] .px-pre-presse .bogen::before,
html[data-anim="0"] .px-pre-presse .bogen::after{animation:none}
@media(prefers-reduced-motion:reduce){
  .px-pre-presse .bogen,.px-pre-presse .walze,
  .px-pre-presse .bogen::before,.px-pre-presse .bogen::after{animation:none}
  .px-pre-presse .b1{transform:translateX(20px)}
  .px-pre-presse .b2{transform:translateX(100px)}
  .px-pre-presse .b3{opacity:0}
}

.px-pre-name{font-size:15px; letter-spacing:.42em; text-transform:uppercase;
  padding-left:.42em; font-weight:700}
.px-pre-bahn{width:min(240px,62vw); height:2px; background:var(--line);
  border-radius:99px; overflow:hidden}
.px-pre-bahn i{display:block; height:100%; width:0; background:var(--acc);
  border-radius:99px; animation:px-pre-fuellen var(--pre-dauer,1.9s) cubic-bezier(.4,0,.2,1) forwards}
@keyframes px-pre-fuellen{to{width:100%}}
.px-pre-zeile{display:flex; align-items:baseline; gap:14px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.px-pre-zeile b{color:var(--acc); font-weight:700; min-width:3.2em; text-align:right}
.px-pre-zeile b::after{content:'%'; opacity:.5; margin-left:2px}

@media(prefers-reduced-motion:reduce){
  .px-pre-presse .bogen,.px-pre-presse .walze{animation:none}
  .px-pre-presse .b1{transform:translateX(10px)}
  .px-pre-presse .b2{transform:translateX(30px)}
}
html[data-anim="0"] .px-pre-presse .bogen,
html[data-anim="0"] .px-pre-presse .walze{animation:none}

/* ---------- Aufbauende Schrift ---------- */
/* Der Aufbau braucht overflow:hidden, damit die Woerter hinter der
   Kante hervorkommen. Kursive Buchstaben ragen aber oben und unten
   ueber - deshalb wird die Box mit Innenabstand vergroessert und der
   Abstand aussen wieder abgezogen. Sonst werden Buchstaben beschnitten. */
.px-auf{display:inline-block; overflow:hidden; vertical-align:bottom;
  padding:.16em .12em .18em; margin:-.16em -.12em -.18em}
.px-js .px-auf > span{display:inline-block; transform:translateY(105%); opacity:0}
.px-auf > span{display:inline-block}
.px-js .px-auf.los > span{animation:px-steigen .85s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--v,0s)}
@keyframes px-steigen{to{transform:none; opacity:1}}
html[data-anim="0"] .px-auf > span{transform:none!important; opacity:1!important; animation:none!important}

/* ---------- Kopf ---------- */
.px-head{position:sticky; top:0; z-index:600;
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--line); transition:background .4s, border-color .4s}
.px-hbar{max-width:var(--breite); margin:0 auto; padding:0 var(--rand); height:72px;
  display:flex; align-items:center; gap:24px}
.px-logo{font-size:21px; font-weight:800; letter-spacing:-.03em; color:var(--txt);
  display:flex; align-items:center; gap:10px; flex:none}
.px-logo:hover{text-decoration:none}
.px-logo .px-mark{width:28px; height:28px; color:var(--acc);
  filter:drop-shadow(0 0 12px rgba(var(--acc-rgb),.35));
  transition:transform .4s cubic-bezier(.16,1,.3,1)}
.px-logo:hover .px-mark{transform:rotate(90deg) scale(1.06)}
.px-logo img{display:block; width:auto}
.px-nav{display:flex; gap:3px; margin-left:auto}
.px-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:3px}
.px-nav li{position:relative}
.px-nav a{font-size:14px; font-weight:500; color:var(--dim); padding:8px 15px;
  border-radius:10px; transition:.2s; display:block; white-space:nowrap}
.px-nav a:hover{color:var(--txt); background:rgba(127,127,140,.12); text-decoration:none}
.px-nav .active > a,.px-nav a.active{color:var(--txt); background:rgba(127,127,140,.16)}
.px-nav li ul{position:absolute; top:100%; left:0; flex-direction:column; min-width:190px;
  background:var(--pane); border:1px solid var(--line); border-radius:14px; padding:6px;
  box-shadow:0 18px 44px var(--schatten); opacity:0; visibility:hidden;
  transform:translateY(-8px); transition:.22s cubic-bezier(.16,1,.3,1); z-index:50}
.px-nav li:hover > ul,.px-nav li:focus-within > ul{opacity:1; visibility:visible; transform:none}
.px-hact{display:flex; align-items:center; gap:8px; flex:none}
.px-icb{width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:transparent; color:var(--txt); cursor:pointer; display:grid; place-items:center;
  transition:.2s; padding:0}
.px-icb:hover{border-color:var(--acc); color:var(--acc)}
.px-hbtn{font-size:14px; font-weight:600; padding:10px 20px; border-radius:10px;
  background:var(--acc); color:var(--auf-acc); border:none; cursor:pointer; transition:.22s}
.px-hbtn:hover{transform:translateY(-1px); box-shadow:0 8px 26px rgba(var(--acc-rgb),.34)}
.px-burger{display:none}
.px-farben{display:flex; gap:5px; align-items:center; padding:0 3px}
.px-sw{width:17px; height:17px; border-radius:6px; border:2px solid transparent;
  cursor:pointer; padding:0; transition:.2s}
.px-sw:hover{transform:scale(1.22)}
.px-sw.on{border-color:var(--txt)}

/* ---------- Karten ---------- */
.px-karte{position:relative; border-radius:20px; background:var(--pane);
  border:1px solid var(--line); transform-style:preserve-3d; will-change:transform;
  transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s}
.px-karte:hover{border-color:var(--line2); box-shadow:0 20px 48px var(--schatten);
  transition:border-color .3s, box-shadow .3s}
/* Der Lichtkreis wird in Prozent der Kachel angegeben, nicht in Pixeln.
   Fest eingestellte 420 Pixel deckten kleine Kacheln vollstaendig ab -
   dort war dann kein Verlauf mehr zu sehen, der Effekt wirkte tot. */
.px-karte::before{content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:20px; opacity:0; transition:opacity .35s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
             rgba(var(--acc-rgb),.20) 0%,
             rgba(var(--acc-rgb),.09) 28%,
             transparent 62%)}
.px-karte:hover::before{opacity:1}
.px-karte::after{content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  border-radius:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
html:not(.dark) .px-karte::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.px-tiefe{transform:translateZ(38px)}

/* ---------- Startbereich ---------- */
.px-held{max-width:var(--breite); margin:0 auto; padding:70px var(--rand) 30px;
  display:grid; grid-template-columns:1fr 460px; gap:52px; align-items:center; position:relative}
/* Der Hintergrund muss ueber die volle Fensterbreite laufen. Lag er
   nur im Inhaltsrahmen, hoerte er auf breiten Bildschirmen links und
   rechts vor dem Rand auf - genau das sah nach falschen Massen aus. */
/* Bei mittiger Ausrichtung muss der Verlauf von beiden Seiten kommen,
   sonst wirkt der Startbereich nach rechts verschoben. */
.px-held.mittig .px-heldtext{position:relative; z-index:2}
.px-marke{display:inline-flex; align-items:center; gap:10px; padding:6px 15px 6px 9px;
  border:1px solid var(--line2); border-radius:99px; margin-bottom:24px}
.px-marke i{width:7px; height:7px; border-radius:50%; background:#ff3b3b;
  box-shadow:0 0 10px #ff3b3b; animation:px-pul 1.5s infinite; flex:none}
.px-marke.aus i{background:var(--line2); box-shadow:none; animation:none}
@keyframes px-pul{0%,100%{opacity:1}50%{opacity:.3}}
.px-marke span{font-family:'Consolas','SF Mono',monospace; font-size:11.5px;
  letter-spacing:.09em; color:var(--dim)}
.px-marke b{color:var(--txt)}
.px-held h1{font-size:clamp(44px,6.8vw,92px); font-weight:800; letter-spacing:-.045em;
  line-height:.98; margin-bottom:20px}
.px-held h1 em{font-style:italic; color:var(--acc)}
.px-lead{color:var(--dim); font-size:18.5px; max-width:44ch; margin:0 0 26px}
.px-btns{display:flex; gap:11px; flex-wrap:wrap}
.px-btn{font-size:14.5px; font-weight:600; padding:14px 26px; border-radius:12px;
  cursor:pointer; border:none; transition:.24s; display:inline-flex; align-items:center; gap:9px}
.px-btn:hover{text-decoration:none}
.px-btn-p{background:var(--acc); color:var(--auf-acc)}
.px-btn-p:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(var(--acc-rgb),.34)}
.px-btn-s{background:rgba(127,127,140,.1); color:var(--txt); border:1px solid var(--line2)}
.px-btn-s:hover{background:rgba(127,127,140,.18)}

.px-streamkarte{position:relative; z-index:2}
.px-streamkarte .bild{aspect-ratio:16/9; overflow:hidden; border-radius:19px 19px 0 0;
  position:relative; background:var(--pane2)}
.px-streamkarte .bild img{width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.px-streamkarte:hover .bild img{transform:scale(1.05)}
.px-livemark{position:absolute; top:13px; left:13px; z-index:5; display:flex; align-items:center;
  gap:6px; background:#e5232b; color:#fff; font-family:'Consolas',monospace; font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; padding:5px 11px; border-radius:99px}
.px-livemark i{width:6px; height:6px; border-radius:50%; background:#fff; animation:px-pul 1.3s infinite}
.px-livemark.aus{background:var(--line2); color:var(--bg)}
.px-livemark.aus i{animation:none; opacity:.5}
.px-zuschauer{position:absolute; bottom:13px; right:13px; z-index:5; background:rgba(0,0,0,.72);
  color:#fff; font-family:'Consolas',monospace; font-size:11.5px; padding:5px 11px; border-radius:99px}
.px-streamkarte .u{padding:20px 22px 22px; position:relative; z-index:5; border-radius:0 0 19px 19px}
.px-streamkarte h3{font-size:19px; font-weight:700; letter-spacing:-.02em; margin-bottom:5px}
.px-streamkarte .meta{font-family:'Consolas',monospace; font-size:12px; color:var(--dim)}

/* ---------- Abschnitte ---------- */
.px-sec{max-width:var(--breite); margin:0 auto; padding:60px var(--rand)}
.px-skopf{display:flex; align-items:flex-end; gap:20px; margin-bottom:26px; flex-wrap:wrap}
.px-skopf h2{font-size:clamp(29px,3.9vw,44px); font-weight:800; letter-spacing:-.035em; line-height:1}
.px-skopf h2 em{font-style:italic; color:var(--acc)}
.px-skopf .m{margin-left:auto; padding-bottom:6px}
.px-skopf .m a{font-size:14px; color:var(--dim)}
.px-skopf .m a:hover{color:var(--acc); text-decoration:none}

/* ---------- Kanäle ---------- */
.px-kanaele{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.px-kanal{padding:24px; display:flex; align-items:center; gap:16px; color:var(--txt)}
.px-kanal:hover{text-decoration:none}
.px-kanal .ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  color:#fff; flex:none}
.px-kanal h4{font-size:17px; font-weight:700; letter-spacing:-.02em; margin-bottom:3px}
.px-kanal .zahl{font-family:'Consolas',monospace; font-size:12.5px; color:var(--acc)}

/* ---------- Community ---------- */
.px-comm{display:grid; grid-template-columns:1.25fr 1fr; gap:16px}
.px-panel{padding:26px}
.px-ptop{display:flex; align-items:center; gap:13px; margin-bottom:20px;
  padding-bottom:16px; border-bottom:1px solid var(--line)}
.px-pmark{width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  flex:none; color:#fff}
.px-pmark.dc{background:#5865f2}
.px-pmark.ts{background:var(--acc); color:var(--auf-acc)}
.px-ptop h3{font-size:19px; font-weight:700; letter-spacing:-.02em}
.px-ptop small{display:block; font-family:'Consolas',monospace; font-size:11px;
  color:var(--dim); margin-top:3px}
.px-plive{margin-left:auto; font-family:'Consolas',monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--acc);
  display:flex; align-items:center; gap:7px}
.px-plive i{width:7px; height:7px; border-radius:50%; background:var(--acc); animation:px-pul 1.6s infinite}
.px-zahlen{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:18px}
.px-zahlk{background:var(--pane2); border-radius:13px; padding:14px 16px}
.px-zahlk b{display:block; font-size:25px; font-weight:700; letter-spacing:-.03em; line-height:1}
.px-zahlk b.a{color:var(--acc)}
.px-zahlk span{font-family:'Consolas',monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); margin-top:5px; display:block}
.px-koepfe{display:flex; margin-bottom:18px; flex-wrap:wrap}
.px-koepfe img{width:36px; height:36px; border-radius:50%; border:2px solid var(--pane);
  object-fit:cover; margin-left:-9px; transition:.22s}
.px-koepfe img:first-child{margin-left:0}
.px-koepfe img:hover{transform:translateY(-4px); position:relative; z-index:2}
.px-koepfe span{width:36px; height:36px; border-radius:50%; margin-left:-9px;
  background:var(--pane2); border:2px solid var(--pane); display:grid; place-items:center;
  font-family:'Consolas',monospace; font-size:10.5px; color:var(--dim)}
.px-raeume{border-top:1px solid var(--line); padding-top:14px; margin-bottom:18px}
.px-raum{display:flex; align-items:center; gap:10px; padding:6px 0;
  font-family:'Consolas',monospace; font-size:12.5px; color:var(--dim)}
.px-raum b{color:var(--txt); font-weight:400}
.px-raum .cnt{margin-left:auto; font-size:11px; color:var(--acc)}
.px-raum .wer{font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.px-kopieren{display:flex; gap:10px; flex-wrap:wrap}
.px-kopf-feld{flex:1; min-width:180px; display:flex; justify-content:space-between;
  align-items:center; gap:10px; padding:12px 15px; border-radius:12px; background:var(--pane2);
  border:1px solid var(--line); cursor:pointer; font-family:'Consolas',monospace;
  font-size:12.5px; color:var(--acc); transition:.2s; text-align:left}
.px-kopf-feld:hover{border-color:var(--acc); transform:translateY(-1px)}
.px-kopf-feld small{color:var(--dim); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; white-space:nowrap}

/* ---------- News ---------- */
.px-artikel{display:grid; grid-template-columns:1.35fr 1fr; gap:16px}
.px-gross{position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line);
  background:var(--pane); min-height:420px; display:flex; align-items:flex-end;
  transition:border-color .3s, box-shadow .3s; color:var(--txt)}
.px-gross:hover{border-color:var(--line2); box-shadow:0 18px 44px var(--schatten); text-decoration:none}
.px-gross > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.px-gross:hover > img{transform:scale(1.05)}
.px-gross::after{content:''; position:absolute; inset:0;
  background:linear-gradient(0deg,var(--pane) 6%,color-mix(in srgb,var(--pane) 55%,transparent) 46%,transparent 78%)}
.px-gross .inhalt{position:relative; z-index:2; padding:32px; width:100%}
.px-kat{display:inline-block; font-family:'Consolas',monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--auf-acc); background:var(--acc);
  padding:4px 10px; border-radius:6px; margin-bottom:14px}
.px-gross h3{font-size:clamp(23px,3vw,36px); font-weight:700; letter-spacing:-.032em;
  line-height:1.06; margin-bottom:12px; max-width:20ch}
.px-gross p{color:var(--dim); font-size:15.5px; max-width:52ch; margin-bottom:16px}
.px-meta{display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  font-family:'Consolas',monospace; font-size:11.5px; color:var(--dim)}
.px-liste{display:flex; flex-direction:column; gap:2px}
.px-eintrag{position:relative; display:flex; gap:18px; align-items:center; padding:20px;
  border-radius:14px; border:1px solid transparent; flex:1; color:var(--txt);
  transition:.3s cubic-bezier(.16,1,.3,1); overflow:hidden}
.px-eintrag:hover{background:var(--pane); border-color:var(--line); text-decoration:none}
.px-eintrag .vor{width:0; height:74px; border-radius:10px; overflow:hidden; flex:none;
  transition:width .4s cubic-bezier(.16,1,.3,1); opacity:0}
.px-eintrag:hover .vor{width:104px; opacity:1}
.px-eintrag .vor img{width:104px; height:74px; object-fit:cover}
.px-eintrag .vor.fest{width:120px; height:80px; opacity:1}
.px-eintrag .vor.fest img{width:120px; height:80px}
.px-eintrag .text{flex:1; min-width:0}
.px-eintrag .k{font-family:'Consolas',monospace; font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--acc); margin-bottom:6px}
.px-eintrag h4{font-size:17px; font-weight:600; letter-spacing:-.02em; line-height:1.25; margin-bottom:6px}
.px-eintrag time{font-family:'Consolas',monospace; font-size:11px; color:var(--dim)}
.px-eintrag .an{font-size:14px; color:var(--dim); margin:0 0 8px; line-height:1.5}
.px-eintrag .pfeil{flex:none; color:var(--dim); opacity:0; transform:translateX(-6px); transition:.3s}
.px-eintrag:hover .pfeil{opacity:1; transform:none; color:var(--acc)}

/* ---------- Merch ---------- */
.px-merch{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.px-ware{overflow:hidden; color:var(--txt)}
.px-ware:hover{text-decoration:none}
.px-ware .bild{aspect-ratio:1; overflow:hidden; border-radius:19px 19px 0 0; background:var(--pane2)}
.px-ware .bild img{width:100%; height:100%; object-fit:cover; transition:.6s cubic-bezier(.16,1,.3,1)}
.px-ware:hover .bild img{transform:scale(1.06)}
.px-ware .u{padding:17px 19px 20px; position:relative; z-index:5}
.px-ware h4{font-size:16px; font-weight:600; margin-bottom:6px}
.px-ware .preis{font-family:'Consolas',monospace; font-size:13.5px; color:var(--acc)}

/* ---------- Partner ---------- */
.px-partner{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px}
.px-pkarte{padding:26px 22px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; min-height:130px; text-align:center; color:var(--dim)}
.px-pkarte:hover{text-decoration:none; color:var(--txt)}
.px-pkarte img{max-height:46px; width:auto; max-width:100%; object-fit:contain;
  filter:grayscale(1); opacity:.62; transition:.32s cubic-bezier(.16,1,.3,1)}
.px-pkarte:hover img{filter:none; opacity:1; transform:scale(1.05)}
.px-pkarte .name{font-size:15px; font-weight:600; letter-spacing:-.01em}
.px-pkarte.ohnelogo .name{font-size:19px; font-weight:700}

/* ---------- Aufruf-Streifen ---------- */
.px-streifen{max-width:var(--breite); margin:64px auto 20px; padding:0 var(--rand)}
.px-streifen .inner{border-radius:22px; border:1px solid var(--line); background:var(--pane);
  padding:44px 40px; display:flex; align-items:center; gap:34px; flex-wrap:wrap;
  position:relative; overflow:hidden}
.px-streifen .inner::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 300px at 88% 20%, rgba(var(--acc-rgb),.13), transparent 60%)}
.px-streifen h2{font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-.035em;
  line-height:1.06; flex:1; min-width:260px; position:relative; z-index:2}
.px-streifen h2 em{font-style:italic; color:var(--acc)}
.px-streifen .px-btns{margin:0; position:relative; z-index:2}

/* ---------- Modulinhalt ---------- */
.px-main{flex:1 0 auto; max-width:var(--breite); margin:0 auto; padding:46px var(--rand) 56px; width:100%}
.px-main.mit-spalte{display:grid; grid-template-columns:1fr 300px; gap:36px; align-items:start}
html[data-rahmen="1"] .px-inhalt{background:var(--pane); border:1px solid var(--line);
  border-radius:20px; padding:34px 36px}
.px-inhalt h1,.px-inhalt h2,.px-inhalt h3{font-weight:700; letter-spacing:-.03em;
  line-height:1.12; margin:0 0 14px; overflow-wrap:break-word}
.px-inhalt h1{font-size:clamp(26px,3.4vw,38px)}
.px-inhalt h2{font-size:clamp(21px,2.6vw,27px); margin-top:30px}
.px-inhalt h3{font-size:19px; margin-top:24px}
.px-inhalt table{width:100%; border-collapse:collapse; margin-bottom:20px}
.px-inhalt th{background:var(--pane2); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; text-align:left; padding:12px 14px; border-bottom:1px solid var(--line)}
.px-inhalt td{padding:12px 14px; border-bottom:1px solid var(--line)}
.px-inhalt input[type="text"],.px-inhalt input[type="email"],.px-inhalt input[type="password"],
.px-inhalt input[type="number"],.px-inhalt textarea,.px-inhalt select,.px-inhalt .form-control{
  width:100%; background:var(--pane2); border:1px solid var(--line); border-radius:11px;
  color:var(--txt); padding:12px 14px; font-family:inherit; font-size:15px; transition:.2s}
.px-inhalt input:focus,.px-inhalt textarea:focus,.px-inhalt select:focus{
  outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(var(--acc-rgb),.15)}
.px-inhalt label{font-size:13px; font-weight:600; color:var(--dim); display:block; margin-bottom:6px}
.px-seite{position:sticky; top:96px}
.px-widget{background:var(--pane); border:1px solid var(--line); border-radius:18px;
  padding:22px; margin-bottom:16px}
.px-widget h5{font-family:'Consolas',monospace; font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--dim); margin-bottom:14px;
  padding-bottom:11px; border-bottom:1px solid var(--line)}
.px-widget ul{list-style:none; margin:0; padding:0}
.px-widget li{margin-bottom:9px}
.px-widget a{color:var(--txt); font-size:14.5px}

/* ---------- Fußbereich ---------- */
.px-foot{border-top:1px solid var(--line); background:var(--pane); margin-top:auto; transition:.4s}
.px-fmain{max-width:var(--breite); margin:0 auto; padding:54px var(--rand) 34px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px}
.px-fcol h5{font-family:'Consolas',monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin-bottom:18px}
.px-fcol ul{list-style:none; margin:0; padding:0}
.px-fcol li{margin-bottom:10px}
.px-fcol a{font-size:14.5px; color:var(--txt); transition:.18s}
.px-fcol a:hover{color:var(--acc); text-decoration:none}
.px-fmarke p{font-size:14px; color:var(--dim); max-width:36ch; margin:15px 0 20px}
.px-sozial{display:flex; gap:10px; flex-wrap:wrap}
.px-sozial a{width:42px; height:42px; border-radius:13px; border:1px solid var(--line);
  background:var(--pane2); display:inline-flex; align-items:center; justify-content:center;
  color:var(--txt); flex:none;
  transition:transform .24s cubic-bezier(.16,1,.3,1), background .2s, border-color .2s, color .2s}
.px-sozial a:hover{border-color:transparent; color:var(--auf-acc); background:var(--acc);
  transform:translateY(-3px); text-decoration:none; box-shadow:0 10px 22px rgba(var(--acc-rgb),.3)}
.px-fstat{background:var(--pane2); border-radius:13px; padding:15px 17px; margin-bottom:10px}
.px-fstat b{font-size:21px; font-weight:700; letter-spacing:-.03em; display:block}
.px-fstat span{font-family:'Consolas',monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); margin-top:5px; display:block}
.px-fbot{border-top:1px solid var(--line); padding:24px var(--rand) 26px; max-width:var(--breite); margin:0 auto;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}
.px-fbot p{font-family:'Consolas',monospace; font-size:11.5px; color:var(--dim); margin:0}
.px-fbot nav{display:flex; gap:22px; flex-wrap:wrap}
.px-fbot a{font-family:'Consolas',monospace; font-size:11.5px; color:var(--dim)}
.px-fbot a:hover{color:var(--acc); text-decoration:none}
.px-credit{display:block; margin-top:5px; font-size:10.5px; color:var(--line2)}
.px-credit a{font-size:10.5px; color:var(--line2)}

/* ---------- Fenster ---------- */
#px-login,#px-modal{position:fixed; inset:0; z-index:970; background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:24px}
#px-login.on,#px-modal.on{display:flex; animation:px-ein .25s ease}
@keyframes px-ein{from{opacity:0}to{opacity:1}}
#px-login .box{width:min(420px,100%); background:var(--pane); border:1px solid var(--line);
  border-radius:20px; animation:px-hoch .35s cubic-bezier(.16,1,.3,1); overflow:hidden}
#px-modal .box{width:min(1020px,100%); background:var(--pane); border:1px solid var(--line);
  border-radius:20px; overflow:hidden; animation:px-hoch .35s cubic-bezier(.16,1,.3,1)}
@keyframes px-hoch{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.px-mkopf{display:flex; align-items:center; gap:13px; padding:18px 22px; border-bottom:1px solid var(--line)}
.px-mkopf h3{font-size:18px; font-weight:700; letter-spacing:-.02em}
.px-mkopf a{margin-left:auto; color:var(--dim)}
.px-mkopf button{background:transparent; border:1px solid var(--line); border-radius:10px;
  color:var(--txt); width:34px; height:34px; cursor:pointer; transition:.2s;
  display:grid; place-items:center}
.px-mkopf button:hover{border-color:var(--acc); color:var(--acc)}
.px-mbody{padding:24px 22px 26px}
.px-mbody .form-group{margin-bottom:15px}
.px-mbody input{width:100%; background:var(--pane2); border:1px solid var(--line);
  border-radius:11px; color:var(--txt); padding:12px 14px; font-family:inherit; font-size:15px}
.px-mbody input:focus{outline:none; border-color:var(--acc)}
.px-mbody label{font-size:13px; font-weight:600; color:var(--dim); display:block; margin-bottom:6px}
.px-mbody .btn,.px-mbody button[type="submit"]{width:100%; background:var(--acc);
  color:var(--auf-acc); border:none; border-radius:11px; padding:13px;
  font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer}
#px-modal .rahmen{aspect-ratio:16/9; background:#000}
#px-modal iframe{width:100%; height:100%; border:0; display:block}

/* ---------- Nach oben, Meldung, Hinweis ---------- */
#px-top{position:fixed; right:24px; bottom:24px; z-index:900; width:46px; height:46px;
  border-radius:14px; background:var(--acc); color:var(--auf-acc); border:none; cursor:pointer;
  display:grid; place-items:center; opacity:0; visibility:hidden; transform:translateY(14px);
  transition:.3s cubic-bezier(.16,1,.3,1)}
#px-top.on{opacity:1; visibility:visible; transform:none}
#px-top:hover{transform:translateY(-4px)}
#px-toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:950;
  background:var(--txt); color:var(--bg); padding:13px 22px; border-radius:12px;
  font-size:13.5px; font-weight:600; opacity:0; visibility:hidden; transition:.28s}
#px-toast.on{opacity:1; visibility:visible; transform:translate(-50%,0)}
.px-hinweis{background:var(--pane); border:1px dashed var(--line2); border-radius:18px;
  padding:24px 26px; color:var(--dim); font-size:14.5px}
.px-hinweis code{display:block; background:var(--pane2); border:1px solid var(--line);
  border-radius:11px; padding:13px 15px; margin-top:12px;
  font-family:'Consolas',monospace; font-size:12.5px; color:var(--txt); line-height:1.9}

.px-js .px-rv{opacity:0; transform:translateY(24px); transition:.75s cubic-bezier(.16,1,.3,1)}
/* Steckt eine Karte schon in einem Abschnitt, der sich aufbaut, wird
   sie von dort gesteuert - sonst laufen zwei Bewegungen uebereinander
   und man sieht nur noch ein unscharfes Wabern. */
.px-js .px-bogen .px-rv{opacity:1; transform:none; transition:none}
.px-js .px-rv.in{opacity:1; transform:none}
html[data-anim="0"] .px-rv{opacity:1!important; transform:none!important}

/* ---------- Umbrüche ---------- */
@media(max-width:1080px){
  .px-held{grid-template-columns:1fr; gap:36px}
  .px-bento{grid-template-columns:repeat(2,1fr)}
  .px-tag.gross{grid-column:span 2; grid-row:auto; min-height:230px}
  .px-comm{grid-template-columns:1fr}
  .px-setup{grid-template-columns:1fr}
  .px-artikel{grid-template-columns:1fr}
  .px-fmain{grid-template-columns:1fr 1fr; gap:32px}
  .px-main.mit-spalte{grid-template-columns:1fr}
  .px-seite{position:static}
}
@media(max-width:760px){
  .px-nav{position:fixed; top:72px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:12px 0;
    transform:translateY(-130%); opacity:0; visibility:hidden; z-index:20;
    max-height:calc(100vh - 72px); overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transition:transform .36s cubic-bezier(.16,1,.3,1), opacity .25s, visibility .36s}
  .px-nav.offen{transform:none; opacity:1; visibility:visible; pointer-events:auto}
  .px-nav a{-webkit-tap-highlight-color:rgba(127,127,140,.2)}
  .px-nav.offen a{position:relative; z-index:2}
  .px-nav ul{flex-direction:column}
  .px-nav li ul{position:static; opacity:1; visibility:visible; transform:none;
    display:none; border:none; box-shadow:none; background:var(--pane2); margin:4px 0 4px 14px}
  .px-nav li.auf > ul{display:block}
  .px-nav a{padding:14px 26px; font-size:16px; border-radius:0}
  .px-burger{display:grid}
  .px-bento{grid-template-columns:1fr}
  .px-tag.gross{grid-column:span 1}
  .px-eintrag:hover .vor{width:0; opacity:0}
  .px-eintrag .vor.fest{width:84px; height:62px}
  .px-eintrag .vor.fest img{width:84px; height:62px}
  .px-fmain{grid-template-columns:1fr}
  :root{--rand:20px}
  .px-sec{padding:48px var(--rand)}
  .px-held{padding:52px var(--rand) 30px}
  .px-main{padding:32px var(--rand) 44px}
  .px-streifen{padding:0 20px; margin-top:44px}
  html[data-rahmen="1"] .px-inhalt{padding:22px 20px}
  /* Die Abdunklung muss UNTER der Kopfleiste liegen. Die Kopfleiste
     erzeugt mit ihrer Ebenenangabe einen eigenen Stapelraum - das
     Menue darin wird also gegen die Kopfleiste als Ganzes verglichen,
     nicht gegen seine eigene Ebene. Lag die Abdunklung darueber,
     erschien das Menue ausgegraut und liess sich nicht bedienen. */
  #px-schleier{position:fixed; inset:0; z-index:590; background:rgba(0,0,0,.55);
    opacity:0; visibility:hidden; transition:.3s; border:none; padding:0; cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  #px-schleier.on{opacity:1; visibility:visible}
}
@media(min-width:761px){#px-schleier{display:none}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01s!important}
  .px-js .px-rv{opacity:1; transform:none}
  .px-auf > span{transform:none!important; opacity:1!important}
}
@media print{
  .px-head,.px-held,.px-streifen,.px-foot,#px-top,#px-pre,#px-nebel,#px-grund{display:none!important}
  body{background:#fff; color:#000}
}

/* ============================================================
   Nachbesserungen an Sendeplan und Setup
   ============================================================ */

/* Die Kachel für sendefreie Tage bleibt ruhig, aber nicht blass */
.px-tag.frei{opacity:1}
.px-tag.frei .wo{font-size:15px; letter-spacing:.08em; color:var(--txt); font-weight:600}
.px-tag.frei .zeit{font-size:26px; color:var(--line2)}
.px-tag.frei .was{font-size:13.5px}

/* Gleichmäßige Höhe, damit das Raster nicht ausfranst */
.px-tag{min-height:172px; display:flex; flex-direction:column}
.px-tag .was{margin-top:auto}
.px-tag.gross{min-height:300px}

/* Nummer in der Teileliste — stellt die Verbindung zum Punkt im Bild her */
.px-teilnr{
  width:26px; height:26px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--pane2); color:var(--dim);
  font-size:11.5px; font-weight:600;
  border:1px solid var(--line);
  transition:.26s cubic-bezier(.16,1,.3,1);
}
.px-teilz:hover .px-teilnr,
.px-teilz.on .px-teilnr{background:var(--acc); color:var(--auf-acc); border-color:transparent}

/* Setup ohne Foto: keine schwebenden Punkte auf grauer Fläche */
.px-setupbild.ohnebild{
  background:repeating-linear-gradient(-45deg,
    rgba(var(--acc-rgb),.07) 0 10px, transparent 10px 22px), var(--pane2);
  display:grid; place-items:end stretch;
}
.px-setupbild.ohnebild::after{background:linear-gradient(0deg,var(--pane) 10%,transparent 60%)}

/* ============================================================
   Platzhalter, solange nichts Eigenes hinterlegt ist

   Alles gezeichnet — keine Beispielbilder, keine fremden Quellen.
   Sobald ein Bild oder ein Twitch-Kanal eingetragen ist, treten
   diese Flächen von selbst zurück.
   ============================================================ */

/* Grund des Startbereichs */
@keyframes px-platzgrund{
  from{background-position:0 0, 0 0, 0 0}
  to{background-position:40px -20px, -30px 20px, 90px 0}
}

/* Fläche in der Streamkarte */
.px-platzflaeche{
  position:absolute; inset:0; overflow:hidden;
  background:
    repeating-linear-gradient(-45deg,
      rgba(var(--acc-rgb),.07) 0 10px, transparent 10px 24px),
    var(--pane2);
  display:grid; place-items:center;
}
.px-platzglanz{
  position:absolute; top:-50%; bottom:-50%; width:38%;
  background:linear-gradient(90deg, transparent,
    rgba(var(--acc-rgb),.16) 45%, rgba(var(--acc-rgb),.22) 50%,
    rgba(var(--acc-rgb),.16) 55%, transparent);
  filter:blur(14px);
  animation:px-platzglanz 4.2s ease-in-out infinite;
}
@keyframes px-platzglanz{
  0%{left:-45%}
  55%{left:105%}
  100%{left:105%}
}
.px-platzmikro{
  position:relative; z-index:2; color:var(--acc); display:block;
  filter:drop-shadow(0 0 16px rgba(var(--acc-rgb),.4));
  animation:px-platzmikro 3.4s ease-in-out infinite;
}
.px-platzmikro svg{width:46px; height:46px; display:block}
@keyframes px-platzmikro{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.px-platzpegel{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; align-items:flex-end; gap:4px; height:26px; z-index:2;
}
.px-platzpegel i{
  width:4px; height:100%; border-radius:99px; background:var(--acc);
  transform-origin:bottom; opacity:.7;
  animation:px-platzpegel 1.15s ease-in-out infinite;
}
.px-platzpegel i:nth-child(1){animation-delay:-.05s}
.px-platzpegel i:nth-child(2){animation-delay:-.48s}
.px-platzpegel i:nth-child(3){animation-delay:-.22s}
.px-platzpegel i:nth-child(4){animation-delay:-.66s}
.px-platzpegel i:nth-child(5){animation-delay:-.31s}
.px-platzpegel i:nth-child(6){animation-delay:-.57s}
.px-platzpegel i:nth-child(7){animation-delay:-.14s}
@keyframes px-platzpegel{
  0%,100%{transform:scaleY(.18)}
  25%{transform:scaleY(.8)}
  50%{transform:scaleY(.36)}
  75%{transform:scaleY(1)}
}
.px-platz .u h3{color:var(--txt)}
.px-platz .u .meta{color:var(--dim)}

@media(prefers-reduced-motion:reduce){
    .px-platzpegel i{transform:scaleY(.5)}
}
html[data-anim="0"] 
/* ============================================================
   Banner der Unterseiten
   ============================================================ */
.px-banner{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.px-banner.ohnebild{
  background:
    radial-gradient(760px 380px at 82% 30%, rgba(var(--acc-rgb),.16), transparent 62%),
    radial-gradient(520px 320px at 18% 80%, rgba(var(--acc-rgb),.08), transparent 60%),
    repeating-linear-gradient(-38deg, rgba(127,127,140,.05) 0 2px, transparent 2px 16px),
    var(--pane);
}
.px-bannerbild{position:absolute; inset:0; z-index:0}
.px-bannerbild img{width:100%; height:100%; object-fit:cover}
.px-bannerbild::after{content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--bg) 6%,transparent 70%),
             linear-gradient(0deg,var(--bg) 2%,transparent 60%); opacity:.82}
.px-bannerin{position:relative; z-index:2; max-width:var(--breite); margin:0 auto; padding:44px var(--rand) 40px}
.px-brot{display:flex; align-items:center; gap:10px; margin-bottom:14px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.px-brot a{color:var(--dim)}
.px-brot a:hover{color:var(--acc); text-decoration:none}
.px-brot span{opacity:.45}
.px-brot b{color:var(--acc); font-weight:600}
.px-banner h1{font-size:clamp(30px,4.6vw,54px); font-weight:800;
  letter-spacing:-.04em; line-height:1.02}
@media(max-width:760px){.px-bannerin{padding:32px 20px 30px}}

/* ============================================================
   Artikel-Einzelseite
   ============================================================ */
/* Einspaltig - die Seitenspalte der Seite gehoert Menue 1 aus dem Layout */
.px-artikelseite{display:block}
.px-artikelkopf{margin-bottom:26px}
.px-badges{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.px-badge{display:inline-flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 12px; border-radius:99px; background:var(--pane2);
  border:1px solid var(--line); color:var(--dim)}
.px-badge.acc{background:var(--acc); color:var(--auf-acc); border-color:transparent}
.px-badge .px-sym{width:13px; height:13px}
.px-artikelseite h1{font-size:clamp(28px,4vw,46px); font-weight:800;
  letter-spacing:-.04em; line-height:1.04; margin-bottom:16px}
.px-artikelbild{border-radius:20px; overflow:hidden; border:1px solid var(--line);
  margin-bottom:28px; background:var(--pane2)}
.px-artikelbild img{width:100%; display:block}
.px-artikeltext{font-size:17px; line-height:1.78; max-width:74ch}
.px-artikeltext h2{font-size:26px; font-weight:700; letter-spacing:-.03em; margin:34px 0 13px}
.px-artikeltext h3{font-size:21px; font-weight:700; letter-spacing:-.025em; margin:26px 0 11px}
.px-artikeltext p{margin:0 0 1.25em}
.px-artikeltext img{max-width:100%; height:auto; border-radius:14px; margin:22px 0}
.px-artikeltext ul,.px-artikeltext ol{margin:0 0 1.25em; padding-left:24px}
.px-artikeltext li{margin-bottom:9px}
.px-artikeltext blockquote{background:var(--pane2); border-left:3px solid var(--acc);
  border-radius:0 14px 14px 0; padding:18px 22px; margin:24px 0; color:var(--dim)}
.px-artikeltext a{color:var(--acc); border-bottom:1px solid transparent}
.px-artikeltext a:hover{border-color:var(--acc); text-decoration:none}

/* Seitenspalte des Artikels */
.px-artikelspalte{position:sticky; top:96px; display:flex; flex-direction:column; gap:14px}
.px-spaltenkasten{background:var(--pane); border:1px solid var(--line);
  border-radius:18px; padding:20px 22px}
.px-spaltenkasten h5{font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--dim); margin-bottom:14px; padding-bottom:11px; border-bottom:1px solid var(--line)}
.px-spaltenkasten .zeile{display:flex; justify-content:space-between; gap:12px;
  padding:6px 0; font-size:13.5px}
.px-spaltenkasten .zeile span{color:var(--dim)}
.px-spaltenkasten .zeile b{font-weight:600; text-align:right}
.px-teilen{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}
.px-teilen button,.px-teilen a{
  flex:1; min-width:96px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 14px; border-radius:11px; border:1px solid var(--line);
  background:var(--pane2); color:var(--txt); font-family:inherit; font-size:13px;
  font-weight:600; cursor:pointer; transition:.2s}
.px-teilen button:hover,.px-teilen a:hover{border-color:var(--acc); color:var(--acc); text-decoration:none}
.px-kommentare{margin-top:42px; padding-top:28px; border-top:1px solid var(--line)}
.px-kommentare h2{font-size:24px; font-weight:700; letter-spacing:-.03em; margin-bottom:18px}

@media(max-width:1080px){
  .px-artikelseite{grid-template-columns:1fr}
  .px-artikelspalte{position:static; flex-direction:row; flex-wrap:wrap}
  .px-spaltenkasten{flex:1; min-width:240px}
}


/* Auf kleinen Kacheln darf das Licht kraeftiger sein - die Flaeche ist
   klein, der Verlauf entsprechend kurz. */
.px-tag:not(.gross)::before,
.px-kanal::before,
.px-ware::before,
.px-pkarte::before{
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
             rgba(var(--acc-rgb),.26) 0%,
             rgba(var(--acc-rgb),.11) 30%,
             transparent 66%);
}
/* Beim Ueberfahren auch ein Hauch Kantenlicht */
.px-karte:hover::after{box-shadow:inset 0 1px 0 rgba(var(--acc-rgb),.35)}

/* ============================================================
   Bildlaufleiste in der Akzentfarbe

   Firefox versteht scrollbar-color, die anderen brauchen die
   ::-webkit-Schreibweise. Beides gesetzt.
   ============================================================ */
html{
  scrollbar-color:var(--acc) var(--pane2);
  scrollbar-width:thin;
}
::-webkit-scrollbar{width:12px; height:12px}
::-webkit-scrollbar-track{background:var(--pane2)}
::-webkit-scrollbar-thumb{
  background:var(--acc);
  border-radius:99px;
  border:3px solid var(--pane2);
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background:var(--acc);
  border-width:2px;
  background-clip:padding-box;
}
::-webkit-scrollbar-corner{background:var(--pane2)}

/* Innerhalb von Kästen dünner, damit es nicht erschlägt */
.px-inhalt ::-webkit-scrollbar,
.px-panel ::-webkit-scrollbar,
.px-raeume::-webkit-scrollbar{width:8px; height:8px}
.px-inhalt ::-webkit-scrollbar-thumb,
.px-panel ::-webkit-scrollbar-thumb{border-width:2px}

/* Markierter Text ebenfalls in der Akzentfarbe */
::selection{background:var(--acc); color:var(--auf-acc)}
::-moz-selection{background:var(--acc); color:var(--auf-acc)}

/* Tastaturführung sichtbar machen */
:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:6px}

/* ============================================================
   Startbereich: Ausrichtung wählbar
   ============================================================ */
/* Links: Text links, Streamkarte rechts — die bisherige Fassung,
   nur mit ausgeglicheneren Anteilen. */
html[data-held="links"] .px-held{grid-template-columns:1.05fr 470px; gap:56px}
html[data-held="links"] .px-held h1{max-width:14ch}

/* Mittig: alles zentriert, die Streamkarte darunter. Wirkt ruhiger,
   wenn der Einleitungstext kurz ist. */
html[data-held="mittig"] .px-held{
  grid-template-columns:1fr; justify-items:center; text-align:center; gap:38px;
}
html[data-held="mittig"] .px-heldtext{max-width:760px}
html[data-held="mittig"] .px-held h1{max-width:none}
html[data-held="mittig"] .px-lead{max-width:56ch; margin-left:auto; margin-right:auto}
html[data-held="mittig"] .px-btns{justify-content:center}
html[data-held="mittig"] .px-streamkarte{width:min(680px,100%)}
html[data-held="mittig"] 
@media(max-width:1080px){
  html[data-held="links"] .px-held{grid-template-columns:1fr; gap:36px}
  html[data-held="links"] .px-held h1{max-width:none}
}

/* ============================================================
   Team
   ============================================================ */
.px-team{display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:16px}
.px-mitglied{overflow:hidden}
.px-mbild{height:212px; position:relative; overflow:hidden; background:var(--pane2);
  border-radius:19px 19px 0 0}
.px-mbild img{width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.04); transition:.5s}
.px-mitglied:hover .px-mbild img{filter:none; transform:scale(1.05)}
.px-mbild.leer{display:grid; place-items:center;
  background:repeating-linear-gradient(-45deg,
    rgba(var(--acc-rgb),.08) 0 9px, transparent 9px 20px), var(--pane2)}
.px-mbild.leer span{font-size:50px; font-weight:800; letter-spacing:-.05em;
  color:var(--line2); text-transform:uppercase; transition:color .4s}
.px-mitglied:hover .px-mbild.leer span{color:var(--acc)}
.px-mrolle{position:absolute; left:12px; bottom:12px; z-index:2;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--acc); color:var(--auf-acc); padding:5px 11px; border-radius:99px}
.px-mbody{padding:16px 18px 18px; position:relative; z-index:5}
.px-mbody h4{font-size:17px; font-weight:700; letter-spacing:-.02em}
.px-mbody span{font-size:11.5px; color:var(--dim); display:block; margin-top:4px}

/* ============================================================
   Seitenspalte gestaltet
   ============================================================ */
.px-widget{overflow:hidden; position:relative}
.px-widget::before{content:''; position:absolute; left:0; top:0; width:3px; height:100%;
  background:linear-gradient(180deg, var(--acc), transparent);
  opacity:.55}
.px-widget h5{display:flex; align-items:center; gap:9px}
.px-widget h5::before{content:''; width:7px; height:7px; border-radius:50%;
  background:var(--acc); flex:none}
.px-widget li{position:relative}
.px-widget a{
  display:block; padding:8px 10px; border-radius:9px;
  transition:background .18s, color .18s, padding-left .22s cubic-bezier(.16,1,.3,1);
}
.px-widget a:hover{background:var(--pane2); color:var(--acc); padding-left:16px}
.px-widget ul ul{margin:4px 0 4px 14px; padding-left:10px; border-left:1px solid var(--line)}
.px-widget ul ul a{font-size:13.5px; color:var(--dim)}
/* Fremde Inhalte in der Spalte auffangen */
.px-seite .panel,.px-seite .card,.px-seite .well{
  background:var(--pane); border:1px solid var(--line); border-radius:18px;
  box-shadow:none; overflow:hidden; margin-bottom:16px}
.px-seite .panel-heading,.px-seite .card-header{
  background:var(--pane2); border-color:var(--line);
  font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--dim);
  padding:14px 18px}
.px-seite img{max-width:100%; height:auto; border-radius:10px}

/* ============================================================
   Setup: Punkte mit Beschriftung

   Ohne Beschriftung musste man raten, welcher Punkt zu welchem Teil
   gehoert — beim Ueberfahren steht es jetzt direkt daneben.
   ============================================================ */
.px-punkt{overflow:visible}
.px-punkt .zahl{display:block; line-height:1}
.px-punkt .fahne{
  position:absolute; left:calc(100% + 12px); top:50%;
  transform:translate(-8px,-50%); white-space:nowrap;
  background:var(--pane); border:1px solid var(--line); border-radius:11px;
  padding:9px 14px; text-align:left; color:var(--txt);
  font-size:13.5px; font-weight:600; line-height:1.3;
  box-shadow:0 12px 30px var(--schatten);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:.26s cubic-bezier(.16,1,.3,1); z-index:6;
}
.px-punkt .fahne b{
  display:block; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--acc); font-weight:600; margin-bottom:3px;
}
.px-punkt .fahne::before{
  content:''; position:absolute; left:-5px; top:50%; width:9px; height:9px;
  transform:translateY(-50%) rotate(45deg);
  background:var(--pane); border-left:1px solid var(--line); border-bottom:1px solid var(--line);
}
.px-punkt:hover .fahne,.px-punkt.on .fahne{opacity:1; visibility:visible; transform:translate(0,-50%)}
/* Auf der rechten Bildhälfte klappt die Fahne nach links */
.px-punkt[style*="left:6"] .fahne,.px-punkt[style*="left:7"] .fahne,
.px-punkt[style*="left:8"] .fahne,.px-punkt[style*="left:9"] .fahne{
  left:auto; right:calc(100% + 12px); transform:translate(8px,-50%);
}
.px-punkt[style*="left:6"]:hover .fahne,.px-punkt[style*="left:7"]:hover .fahne,
.px-punkt[style*="left:8"]:hover .fahne,.px-punkt[style*="left:9"]:hover .fahne,
.px-punkt[style*="left:6"].on .fahne,.px-punkt[style*="left:7"].on .fahne,
.px-punkt[style*="left:8"].on .fahne,.px-punkt[style*="left:9"].on .fahne{transform:translate(0,-50%)}
.px-punkt[style*="left:6"] .fahne::before,.px-punkt[style*="left:7"] .fahne::before,
.px-punkt[style*="left:8"] .fahne::before,.px-punkt[style*="left:9"] .fahne::before{
  left:auto; right:-5px; border-left:none; border-bottom:none;
  border-right:1px solid var(--line); border-top:1px solid var(--line);
}
@media(max-width:700px){.px-punkt .fahne{display:none}}

/* Newsbild darf sich neigen */
.px-gross{transform-style:preserve-3d; will-change:transform;
  transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s}
.px-gross:hover{transition:border-color .3s, box-shadow .3s}
.px-gross .inhalt{transform:translateZ(30px)}

/* ============================================================
   Artikelseite: Angaben und weitere Beiträge
   ============================================================ */
.px-artikelzeile{
  display:flex; flex-wrap:wrap; gap:9px; margin-top:18px;
  padding-top:16px; border-top:1px solid var(--line);
}
.px-angabe{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--txt);
  background:var(--pane2); border:1px solid var(--line);
  border-radius:10px; padding:8px 13px;
}
.px-angabe b{
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim); font-weight:600;
}
button.px-angabe{cursor:pointer; font-family:inherit; transition:.2s}
button.px-angabe:hover{border-color:var(--acc); color:var(--acc)}
button.px-angabe:hover b{color:var(--acc)}

.px-weitere{margin-top:52px; padding-top:34px; border-top:1px solid var(--line)}
.px-weiteregrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.px-wkarte{overflow:hidden; color:var(--txt); display:block}
.px-wkarte:hover{text-decoration:none}
.px-wbild{height:142px; overflow:hidden; background:var(--pane2); border-radius:19px 19px 0 0}
.px-wbild img{width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.px-wkarte:hover .px-wbild img{transform:scale(1.06)}
.px-wbild.leer{background:repeating-linear-gradient(-45deg,
  rgba(var(--acc-rgb),.08) 0 9px, transparent 9px 20px), var(--pane2)}
.px-wbody{padding:16px 18px 18px; position:relative; z-index:5}
.px-wbody .k{font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--acc); margin-bottom:6px}
.px-wbody h4{font-size:16px; font-weight:600; letter-spacing:-.02em;
  line-height:1.3; margin-bottom:6px}
.px-wbody time{font-size:11.5px; color:var(--dim)}

@media(max-width:760px){
  .px-artikelzeile{gap:7px}
  .px-angabe{font-size:12.5px; padding:7px 11px}
}

/* Kennzeichnung der Plattform auf den Streamkacheln */
.px-plattform{
  position:absolute; top:12px; right:12px; z-index:5;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(8px);
  color:var(--txt); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px; border:1px solid var(--line);
}
.px-stleer{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--acc); background:repeating-linear-gradient(-45deg,
    rgba(var(--acc-rgb),.08) 0 9px, transparent 9px 22px), var(--pane2);
}
.px-st.ohnebild .px-stbild{background:var(--pane2)}

/* ============================================================
   Überschriften vereinheitlichen

   Überall dieselbe Größe, dasselbe Gewicht, derselbe zweifarbige
   Aufbau — auch dort, wo die Überschrift aus einem Modul kommt.
   ============================================================ */
.px-skopf h2,
.px-inhalt .px-skopf h2,
.px-inhalt .px-skopf h1,
.px-weitere .px-skopf h2{
  font-size:clamp(29px,3.9vw,44px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.08;
  margin:0;
  font-family:var(--schrift-titel, inherit);
}
.px-skopf h2 em,
.px-inhalt .px-skopf h2 em,
.px-inhalt .px-skopf h1 em,
.px-weitere .px-skopf h2 em{
  font-style:italic; font-weight:800; color:var(--acc);
}
.px-inhalt .px-skopf{
  display:flex; align-items:flex-end; gap:20px;
  margin-bottom:26px; flex-wrap:wrap;
}
.px-inhalt .px-skopf .m{margin-left:auto; padding-bottom:6px}

/* Startbereich und Aufruf-Streifen ziehen mit */
.px-held h1 em,
.px-streifen h2 em,
.px-banner h1 em{font-style:italic; font-weight:800; color:var(--acc)}

/* Zeilenhöhe großzügiger, damit nichts aneinanderstößt */
.px-held h1{line-height:1.06}
.px-streifen h2{line-height:1.12}
.px-banner h1{line-height:1.1}

/* ============================================================
   Streamkarte: kaputte Vorschau abfangen

   Twitch liefert für offline Kanäle kein Vorschaubild — der Browser
   zeigt dann sein eigenes Platzhaltersymbol. Das sieht kaputt aus.
   ============================================================ */
.px-streamkarte .bild img.fehlt,
.px-st .px-stbild img.fehlt{display:none}
.px-bildersatz{
  position:absolute; inset:0; display:grid; place-items:center; gap:10px;
  grid-auto-flow:row; text-align:center; color:var(--acc);
  background:repeating-linear-gradient(-45deg,
    rgba(var(--acc-rgb),.08) 0 10px, transparent 10px 24px), var(--pane2);
}
.px-bildersatz span{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}

/* ============================================================
   Laufband für Streams und Partner

   Die Kacheln liegen doppelt hintereinander, damit der Übergang beim
   Zurückspringen nicht sichtbar ist. Beim Überfahren hält es an.
   ============================================================ */
.px-laufband{
  display:flex !important;
  grid-template-columns:none !important;
  gap:16px;
  width:max-content;
  animation:px-laufen var(--marquee,38s) linear infinite;
}
.px-laufband > *{flex:0 0 auto; width:288px}
.px-laufband.partner > *{width:200px}
@keyframes px-laufen{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 8px))}
}
.px-laufrahmen{overflow:hidden; position:relative; margin:0 -30px; padding:4px 30px}
.px-laufrahmen::before,.px-laufrahmen::after{
  content:''; position:absolute; top:0; bottom:0; width:90px; z-index:3; pointer-events:none;
}
.px-laufrahmen::before{left:0; background:linear-gradient(90deg,var(--bg),transparent)}
.px-laufrahmen::after{right:0; background:linear-gradient(270deg,var(--bg),transparent)}
.px-laufrahmen:hover .px-laufband{animation-play-state:paused}

@media(max-width:760px){
  .px-laufband > *{width:250px}
  .px-laufrahmen{margin:0 -20px; padding:4px 20px}
  .px-laufrahmen::before,.px-laufrahmen::after{width:40px}
  .px-wechselzahl{display:none}
}
@media(prefers-reduced-motion:reduce){
  .px-laufband{animation:none; width:auto; flex-wrap:wrap}
  .px-folien > .px-streamkarte{transition:none}
}
html[data-anim="0"] .px-laufband{animation:none; width:auto; flex-wrap:wrap}

/* ============================================================
   Artikelübersicht mit eigenem Rahmen

   Die Liste stand vorher frei auf der Seite und wirkte dadurch
   angehängt. Sie bekommt jetzt eine eigene Fläche.
   ============================================================ */
.px-artikelliste{
  background:var(--pane);
  border:1px solid var(--line);
  border-radius:20px;
  padding:10px 14px;
}
.px-artikelliste .px-eintrag{
  border-radius:14px;
  border-bottom:1px solid var(--line);
  border-left:none; border-right:none; border-top:none;
  border-radius:0;
  padding:18px 12px;
}
.px-artikelliste .px-eintrag:last-child{border-bottom:none}
.px-artikelliste .px-eintrag:hover{
  background:var(--pane2);
  border-radius:14px;
  border-bottom-color:transparent;
}
.px-artikelliste .px-eintrag:hover + .px-eintrag{border-top-color:transparent}
.px-artikelliste .vor.fest{width:132px; height:88px; opacity:1; flex:none}
.px-artikelliste .vor.fest img{width:132px; height:88px}
.px-artikelliste .px-eintrag:hover .vor.fest{width:132px}
.px-artikelliste .an{font-size:14px; color:var(--dim); margin:0 0 8px; line-height:1.5}
.px-artikelliste .pfeil{align-self:center}

/* Der große Aufmacher und die Liste daneben zusammen im Rahmen */
.px-artikel > .px-liste{
  background:var(--pane);
  border:1px solid var(--line);
  border-radius:20px;
  padding:8px 12px;
}
.px-artikel > .px-liste .px-eintrag{border-radius:14px}

@media(max-width:760px){
  .px-artikelliste{padding:6px 8px}
  .px-artikelliste .vor.fest{width:88px; height:64px}
  .px-artikelliste .vor.fest img{width:88px; height:64px}
  .px-artikelliste .px-eintrag:hover .vor.fest{width:88px}
}


/* ---------- Discord: Mitglieder ---------- */
.px-dzahlen{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:16px}
.px-koepfe{display:flex; flex-wrap:wrap; margin-bottom:18px}
.px-koepfe img{width:36px; height:36px; border-radius:50%; border:2px solid var(--pane);
  object-fit:cover; margin-left:-9px; background:var(--pane2);
  transition:transform .24s cubic-bezier(.16,1,.3,1)}
.px-koepfe img:first-child{margin-left:0}
.px-koepfe img:hover{transform:translateY(-5px) scale(1.08); position:relative; z-index:3}
.px-koepfe span{width:36px; height:36px; border-radius:50%; margin-left:-9px;
  background:var(--pane2); border:2px solid var(--pane); display:grid; place-items:center;
  font-size:10.5px; color:var(--dim); font-weight:600}
.px-dhinweis{font-size:13.5px; color:var(--dim); line-height:1.55; margin-bottom:16px;
  padding:13px 15px; border-radius:12px; background:var(--pane2); border:1px solid var(--line)}
.px-dhinweis b{color:var(--txt); font-weight:600}

/* ============================================================
   Bildvergrößerung

   Kunden wollen die Ware sehen, bevor sie kaufen. Ein Klick aufs
   Bild öffnet es groß, mit Pfeilen geht es durch alle Bilder.
   ============================================================ */
.px-lupe{
  position:absolute; right:12px; bottom:12px; z-index:6;
  width:34px; height:34px; border-radius:10px; padding:0;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(8px);
  color:var(--txt); cursor:zoom-in; display:grid; place-items:center;
  opacity:0; transform:translateY(6px);
  transition:.26s cubic-bezier(.16,1,.3,1);
}
.px-ware:hover .px-lupe{opacity:1; transform:none}
.px-lupe:hover{border-color:var(--acc); color:var(--acc)}

#px-lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.88); backdrop-filter:blur(10px);
  display:none; align-items:center; justify-content:center; gap:20px;
  padding:30px;
}
#px-lightbox.on{display:flex; animation:px-lbein .28s ease}
@keyframes px-lbein{from{opacity:0}to{opacity:1}}
#px-lightbox figure{
  margin:0; max-width:min(1100px, 88vw); max-height:88vh;
  display:flex; flex-direction:column; gap:14px;
  animation:px-lbhoch .38s cubic-bezier(.16,1,.3,1);
}
@keyframes px-lbhoch{from{transform:scale(.94); opacity:0}to{transform:none; opacity:1}}
#px-lightbox img{
  max-width:100%; max-height:74vh; width:auto; height:auto;
  object-fit:contain; border-radius:14px; display:block;
  background:#111; box-shadow:0 30px 80px rgba(0,0,0,.6);
}
#px-lightbox figcaption{text-align:center; color:#fff}
#px-lightbox figcaption b{display:block; font-size:18px; font-weight:700; letter-spacing:-.02em}
#px-lightbox figcaption span{display:block; font-size:14px; color:rgba(255,255,255,.66); margin-top:5px}
#px-lightbox figcaption small{display:block; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.4); margin-top:9px}
#px-lightbox .zu{
  position:absolute; top:22px; right:22px; z-index:3;
  width:44px; height:44px; border-radius:12px; padding:0;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08);
  color:#fff; cursor:pointer; display:grid; place-items:center; transition:.2s;
}
#px-lightbox .zu:hover{background:var(--acc); color:var(--auf-acc); border-color:transparent}
#px-lightbox .blaettern{
  width:46px; height:46px; border-radius:50%; padding:0; flex:none;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08);
  color:#fff; cursor:pointer; display:grid; place-items:center; transition:.2s;
}
#px-lightbox .blaettern:hover{background:var(--acc); color:var(--auf-acc); border-color:transparent}
#px-lightbox .blaettern.vor .px-sym{transform:rotate(-90deg)}
#px-lightbox .blaettern.zurueck .px-sym{transform:rotate(90deg)}

@media(max-width:760px){
  #px-lightbox{padding:16px; gap:10px}
  #px-lightbox .blaettern{position:absolute; bottom:22px}
  #px-lightbox .blaettern.vor{left:22px}
  #px-lightbox .blaettern.zurueck{right:22px}
  #px-lightbox img{max-height:62vh}
  .px-lupe{opacity:1; transform:none}
}

/* ============================================================
   Farbwahl und Anmelden im aufklappbaren Menü

   Auf schmalen Geräten hängt das Skript beide Bedienelemente hier
   hinein, statt sie auszublenden. Beim Verbreitern wandern sie
   zurück in die Kopfleiste.
   ============================================================ */
.px-navfach{
  padding:18px 26px 22px;
  border-top:1px solid var(--line);
  margin-top:8px;
}
.px-navtitel{
  display:block; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin-bottom:14px;
}
.px-navreihe{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px;
}
.px-navfach .px-farben{display:flex; gap:9px; padding:0}
.px-navfach .px-sw{width:26px; height:26px; border-radius:8px}
.px-navfach .px-icb{width:42px; height:42px}
.px-navfach .px-hbtn{
  display:block; width:100%; padding:14px; font-size:15px; text-align:center;
}
@media(min-width:761px){
  .px-navfach{display:none}
}

/* ============================================================
   PIXELWERK — Magazin

   Zeitungskopf, Ressortleiste, Wertungskreise, Anleitungen.
   ============================================================ */

/* ---------- Rasterdruck als Hintergrund ----------
   Ein feines Punktraster wie im Zeitungsdruck, das sehr langsam
   wandert, dazu zwei weiche Farbwolken. Kostet nichts an Ladezeit,
   weil alles gezeichnet ist. */
#px-nebel{
  position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(680px 460px at 14% 8%, rgba(var(--acc-rgb),.10), transparent 62%),
    radial-gradient(560px 520px at 88% 32%, rgba(var(--acc-rgb),.06), transparent 60%),
    radial-gradient(circle at center, currentColor 1px, transparent 1.2px);
  background-size:auto, auto, 22px 22px;
  color:rgba(127,127,140,.20);
  animation:px-raster 60s linear infinite;
}
html.dark #px-nebel{color:rgba(180,180,200,.13)}
@keyframes px-raster{
  from{background-position:0 0, 0 0, 0 0}
  to{background-position:0 0, 0 0, 220px 220px}
}
html[data-nebel="0"] #px-nebel{display:none}

/* ---------- Zeitungskopf ---------- */
.px-head{
  position:static; border-bottom:1px solid var(--line);
  background:var(--bg); backdrop-filter:none;
}
.px-oben{
  max-width:var(--breite); margin:0 auto; padding:9px var(--rand);
  display:flex; align-items:center; gap:16px;
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim); border-bottom:1px solid var(--line);
}
.px-oben .r{margin-left:auto; display:flex; gap:15px; align-items:center}
.px-oben button{
  background:none; border:none; color:var(--dim); cursor:pointer;
  font:inherit; letter-spacing:.09em; text-transform:uppercase; transition:.2s;
}
.px-oben button:hover{color:var(--acc)}

.px-kopfmitte{
  max-width:var(--breite); margin:0 auto; padding:22px var(--rand) 18px;
  display:flex; align-items:center; gap:20px;
}
.px-wortmarke{
  font-size:clamp(30px,4.6vw,50px); font-weight:800;
  letter-spacing:-.045em; line-height:1; color:var(--txt); flex:none;
}
.px-wortmarke:hover{text-decoration:none}
.px-wortmarke span{color:var(--acc)}
.px-wortmarke img{display:block; width:auto}
.px-claim{
  font-size:12.5px; color:var(--dim); border-left:1px solid var(--line);
  padding-left:20px; line-height:1.4; max-width:26ch;
}
.px-suche{
  margin-left:auto; display:flex; align-items:center; gap:9px;
  background:var(--pane2); border:1px solid var(--line);
  border-radius:11px; padding:9px 14px; min-width:230px; transition:.2s;
}
.px-suche:focus-within{border-color:var(--acc)}
.px-suche input{
  background:none; border:none; outline:none; color:var(--txt);
  font:inherit; font-size:14px; width:100%;
}
.px-suche .px-sym{color:var(--dim); flex:none}
.px-hact{display:flex; align-items:center; gap:10px; flex:none}
.px-farben{display:flex; gap:5px}
.px-sw{width:17px; height:17px; border-radius:6px; border:2px solid transparent;
  cursor:pointer; padding:0; transition:.2s}
.px-sw:hover{transform:scale(1.22)}
.px-sw.on{border-color:var(--txt)}

/* Ressortleiste, bleibt beim Scrollen oben stehen */
.px-ressorts{
  position:sticky; top:0; z-index:500;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  /* Vorher eine harte weisse Linie - jetzt ein feiner Verlauf, der
     zur Akzentfarbe hin ausblendet. */
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 0 rgba(var(--acc-rgb),.28), 0 10px 26px -22px var(--schatten);
}
.px-ressorts .inner{
  max-width:var(--breite); margin:0 auto; padding:0 var(--rand);
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
}
.px-ressorts .inner::-webkit-scrollbar{display:none}
.px-ressorts ul{list-style:none; margin:0; padding:0; display:flex; gap:2px}
.px-ressorts li{position:relative}
.px-ressorts a{
  font-size:13.5px; font-weight:600; padding:12px 15px; color:var(--dim);
  white-space:nowrap; border-bottom:3px solid transparent;
  margin-bottom:-2px; transition:.18s; display:block;
}
.px-ressorts a:hover{color:var(--txt); text-decoration:none}
.px-ressorts .active > a,.px-ressorts a.active,.px-ressorts a.on{
  color:var(--txt); border-bottom-color:var(--acc);
}
.px-ressorts li ul{
  position:absolute; top:100%; left:0; flex-direction:column; min-width:190px;
  background:var(--pane); border:1px solid var(--line); border-radius:0 0 12px 12px;
  padding:6px; box-shadow:0 18px 44px var(--schatten);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:.22s cubic-bezier(.16,1,.3,1); z-index:50;
}
.px-ressorts li:hover > ul,.px-ressorts li:focus-within > ul{
  opacity:1; visibility:visible; transform:none;
}
.px-ressorts li ul a{border-bottom:none; margin:0; border-radius:8px}
.px-burger{display:none}

/* ---------- Aufmacher ---------- */
.px-aufmacher{
  max-width:var(--breite); margin:0 auto; padding:34px var(--rand) 30px;
  display:grid; grid-template-columns:1.7fr 1fr; gap:34px;
  border-bottom:1px solid var(--line);
}
.px-gross{
  position:relative; border-radius:16px; overflow:hidden; min-height:430px;
  display:flex; align-items:flex-end; border:1px solid var(--line);
  background:var(--pane2); color:#fff;
}
.px-gross:hover{text-decoration:none}
.px-gross img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.px-gross:hover img{transform:scale(1.04)}
.px-gross::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.92) 6%,rgba(0,0,0,.45) 46%,transparent 76%);
}
.px-gross .inhalt{position:relative; z-index:2; padding:30px; width:100%}
.px-dach{
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; background:var(--acc);
  color:var(--auf-acc); padding:5px 11px; border-radius:6px; margin-bottom:14px;
}
.px-dach.hell{background:transparent; color:var(--acc); padding:0}
.px-gross h2{
  font-size:clamp(26px,3.6vw,42px); font-weight:800; letter-spacing:-.035em;
  line-height:1.08; margin-bottom:12px; max-width:20ch;
}
.px-gross p{font-size:16px; color:rgba(255,255,255,.78); max-width:52ch; margin-bottom:16px}
.px-zeile{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  font-size:12.5px; color:rgba(255,255,255,.7);
}
.px-zeile b{color:#fff; font-weight:600}
.px-zeile .pkt{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5}

/* Wertungskreis */
.px-wertung{position:absolute; top:24px; right:24px; z-index:3; width:74px; height:74px}
.px-wertung svg{width:100%; height:100%; transform:rotate(-90deg)}
.px-wertung circle{fill:none; stroke-width:5; stroke-linecap:round}
.px-wertung .bahn{stroke:rgba(255,255,255,.22)}
.px-wertung .wert{
  stroke:var(--gut); stroke-dasharray:201; stroke-dashoffset:201;
  transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1);
}
.px-wertung.mittel .wert{stroke:var(--mittel)}
.px-wertung.schlecht .wert{stroke:var(--schlecht)}
.px-wertung b{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:23px; font-weight:800; color:#fff; letter-spacing:-.03em;
}

/* Seitenspalte */
.px-spalte{display:flex; flex-direction:column}
.px-spaltentitel{
  font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  padding-bottom:10px; border-bottom:2px solid var(--txt); margin-bottom:2px;
}
.px-klein{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); color:var(--txt)}
.px-klein:last-child{border-bottom:none}
.px-klein:hover{text-decoration:none}
.px-klein .bild{width:88px; height:62px; border-radius:9px; overflow:hidden;
  flex:none; background:var(--pane2)}
.px-klein .bild img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.px-klein:hover .bild img{transform:scale(1.07)}
.px-klein .k{font-size:10px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--acc); margin-bottom:5px}
.px-klein h3{font-size:15.5px; font-weight:600; line-height:1.3; margin-bottom:5px}
.px-klein:hover h3{color:var(--acc)}
.px-klein time{font-size:11.5px; color:var(--dim)}

/* ---------- Ressortköpfe ---------- */
.px-rkopf{
  display:flex; align-items:baseline; gap:16px;
  border-bottom:2px solid var(--txt); padding-bottom:10px; margin-bottom:22px;
}
.px-rkopf h2{font-size:clamp(23px,3vw,30px); font-weight:800; letter-spacing:-.03em}
/* Nur der zweite Teil bekommt die Farbe. Vorher traf die Regel jedes
   span - also auch die Huellen der einzelnen Woerter des ersten Teils,
   wodurch die ganze Ueberschrift einfarbig wurde. */
.px-rkopf h2 > .a,
.px-rkopf h2 > .a .px-auf{color:var(--acc)}
.px-rkopf h2{color:var(--txt)}
.px-rkopf a{margin-left:auto; font-size:13px; color:var(--dim); white-space:nowrap}
.px-rkopf a:hover{color:var(--acc); text-decoration:none}

/* ---------- Tests ---------- */
.px-tests{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px}
.px-test{
  background:var(--pane); border:1px solid var(--line); border-radius:15px;
  overflow:hidden; display:block; color:var(--txt);
  transition:.3s cubic-bezier(.16,1,.3,1);
}
.px-test:hover{
  border-color:var(--line2); transform:translateY(-4px);
  box-shadow:0 18px 40px var(--schatten); text-decoration:none;
}
.px-test .bild{aspect-ratio:16/9; overflow:hidden; position:relative; background:var(--pane2)}
.px-test .bild img{width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.px-test:hover .bild img{transform:scale(1.05)}
.px-test .bild.leer{display:grid; place-items:center;
  background:repeating-linear-gradient(-45deg,
    rgba(var(--acc-rgb),.08) 0 9px, transparent 9px 22px), var(--pane2)}
.px-test .bild.leer span{font-size:38px; font-weight:800; color:var(--line2);
  letter-spacing:-.05em; text-transform:uppercase}
.px-note{
  position:absolute; bottom:10px; right:10px; z-index:2; width:42px; height:42px;
  border-radius:11px; display:grid; place-items:center; font-size:17px;
  font-weight:800; color:#fff; letter-spacing:-.03em;
}
.px-note.gut{background:var(--gut)}
.px-note.mittel{background:var(--mittel)}
.px-note.schlecht{background:var(--schlecht)}
.px-plattformen{position:absolute; top:10px; left:10px; z-index:2; display:flex; gap:4px}
.px-plattformen span{
  font-family:'Consolas','SF Mono',monospace; font-size:9.5px; letter-spacing:.08em;
  background:rgba(0,0,0,.62); color:#fff; padding:3px 7px; border-radius:5px;
}
.px-test .body{padding:15px 17px 17px}
.px-test .k{font-size:10px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--acc); margin-bottom:7px}
.px-test h3{font-size:17.5px; font-weight:700; letter-spacing:-.02em;
  line-height:1.26; margin-bottom:7px}
.px-test p{font-size:14px; color:var(--dim); line-height:1.5; margin-bottom:11px}
.px-test .fuss{display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--dim)}

/* ---------- Anleitungen ---------- */
.px-guides{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.px-guide{
  background:var(--pane); border:1px solid var(--line); border-radius:15px;
  padding:20px 22px; display:flex; gap:16px; color:var(--txt);
  transition:.3s cubic-bezier(.16,1,.3,1);
}
.px-guide:hover{
  border-color:var(--line2); transform:translateY(-3px);
  box-shadow:0 14px 32px var(--schatten); text-decoration:none;
}
.px-guide .nr{font-size:30px; font-weight:800; color:var(--line2);
  line-height:1; flex:none; letter-spacing:-.04em; transition:color .3s}
.px-guide:hover .nr{color:var(--acc)}
.px-guide h3{font-size:16.5px; font-weight:700; letter-spacing:-.02em;
  line-height:1.3; margin-bottom:8px}
.px-guide:hover h3{color:var(--acc)}
.px-guide .angaben{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.px-stufe{font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 9px; border-radius:6px}
.px-stufe.leicht{background:rgba(26,158,95,.16); color:var(--gut)}
.px-stufe.mittel{background:rgba(201,138,0,.16); color:var(--mittel)}
.px-stufe.schwer{background:rgba(192,57,43,.16); color:var(--schlecht)}
.px-dauer{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:var(--dim); background:var(--pane2);
  border:1px solid var(--line); padding:4px 9px; border-radius:6px;
}
.px-dauer:hover{text-decoration:none; border-color:var(--acc); color:var(--acc)}

/* ---------- Reihe ---------- */
.px-reihe{
  padding:28px; display:grid; grid-template-columns:1fr 1.4fr;
  gap:30px; align-items:center;
}
.px-reihe h2{font-size:clamp(24px,3vw,34px); font-weight:800;
  letter-spacing:-.035em; line-height:1.1; margin-bottom:12px}
.px-reihe p{color:var(--dim); font-size:15.5px; margin-bottom:16px}
.px-reihe .teile{display:flex; flex-direction:column; gap:2px}
.px-teil{
  display:flex; align-items:center; gap:13px; padding:11px 14px;
  border-radius:11px; border:1px solid transparent; color:var(--txt); transition:.24s;
}
.px-teil:hover{background:var(--pane2); border-color:var(--line); text-decoration:none}
.px-teil .nr{
  width:26px; height:26px; border-radius:50%; background:var(--pane2);
  border:1px solid var(--line); display:grid; place-items:center; flex:none;
  font-size:12px; font-weight:700; color:var(--dim);
}
.px-teil.fertig .nr{background:var(--acc); color:var(--auf-acc); border-color:transparent}
.px-teil b{font-size:15px; font-weight:600}
.px-teil small{margin-left:auto; font-size:11.5px; color:var(--dim); white-space:nowrap}

/* ---------- Umbrüche ---------- */
@media(max-width:980px){
  .px-aufmacher{grid-template-columns:1fr; gap:28px}
  .px-reihe{grid-template-columns:1fr; gap:22px}
  .px-claim{display:none}
  .px-suche{min-width:0}
}
@media(max-width:760px){
  .px-kopfmitte{flex-wrap:wrap; gap:14px}
  .px-suche{order:3; width:100%; margin-left:0}
  .px-hact{margin-left:auto}
  .px-burger{display:grid}
  .px-farben{display:none}
  .px-ressorts .inner{padding:0 var(--rand)}
  .px-ressorts{
    max-height:0; overflow:hidden; border-bottom-width:1px;
    transition:max-height .34s cubic-bezier(.16,1,.3,1);
  }
  .px-ressorts.offen{max-height:70vh; overflow-y:auto; border-bottom-width:2px}
  .px-ressorts .inner{flex-direction:column; overflow:visible}
  .px-ressorts ul{flex-direction:column; width:100%}
  .px-ressorts a{padding:13px 4px; border-bottom:1px solid var(--line); margin:0}
  .px-ressorts li ul{position:static; opacity:1; visibility:visible; transform:none;
    display:none; box-shadow:none; border:none; background:var(--pane2);
    margin:0 0 6px 14px; border-radius:10px}
  .px-ressorts li.auf > ul{display:block}
  .px-gross{min-height:320px}
  .px-gross .inhalt{padding:20px}
  .px-wertung{width:58px; height:58px; top:16px; right:16px}
  .px-wertung b{font-size:18px}
}

/* ============================================================
   Seitenlaschen für Discord und TeamSpeak

   Links Discord, rechts TeamSpeak. Der Griff steht senkrecht am
   Rand, ein Klick fährt das Fach heraus. Auf schmalen Geräten
   bleiben sie weg — dort trägt der Community-Bereich die Angaben.
   ============================================================ */
.px-laschen{position:fixed; inset:0; z-index:880; pointer-events:none}
.px-lasche{position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto}
.px-lasche.links{left:0}
.px-lasche.rechts{right:0}

.px-lasche .griff{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:9px;
  writing-mode:vertical-rl; text-orientation:mixed;
  padding:18px 11px; border:1px solid var(--line); border-left:none;
  background:var(--pane); color:var(--txt);
  font:inherit; font-size:12.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer;
  border-radius:0 14px 14px 0;
  box-shadow:0 10px 30px var(--schatten);
  transition:.28s cubic-bezier(.16,1,.3,1);
}
.px-lasche.rechts .griff{
  writing-mode:vertical-rl; transform:rotate(180deg);
  border:1px solid var(--line); border-right:none;
  border-radius:0 14px 14px 0;
}
.px-lasche .griff:hover{background:var(--acc); color:var(--auf-acc); border-color:transparent}
.px-lasche .griff .px-sym{transform:rotate(90deg)}
.px-lasche.rechts .griff .px-sym{transform:rotate(90deg)}
.px-lasche .griff .zahl{
  background:var(--acc); color:var(--auf-acc); border-radius:99px;
  padding:3px 7px; font-size:10.5px; letter-spacing:.04em;
}
.px-lasche .griff:hover .zahl{background:var(--auf-acc); color:var(--acc)}

.px-lasche .fach{
  position:absolute; top:50%; transform:translateY(-50%) scaleX(.86);
  width:300px; padding:20px; border-radius:0 18px 18px 0;
  background:var(--pane); border:1px solid var(--line);
  box-shadow:0 24px 60px var(--schatten);
  opacity:0; visibility:hidden; transform-origin:left center;
  transition:.34s cubic-bezier(.16,1,.3,1);
}
.px-lasche.links .fach{left:0}
.px-lasche.rechts .fach{
  right:0; border-radius:18px 0 0 18px; transform-origin:right center;
}
.px-lasche.offen .fach{
  opacity:1; visibility:visible; transform:translateY(-50%) scaleX(1);
}
.px-lasche.links.offen .fach{left:calc(100% - 1px)}
.px-lasche.rechts.offen .fach{right:calc(100% - 1px)}
.px-lasche.offen .griff{background:var(--acc); color:var(--auf-acc); border-color:transparent}

.px-lasche .fach .kopf{
  display:flex; align-items:center; gap:11px; margin-bottom:16px;
  padding-bottom:13px; border-bottom:1px solid var(--line);
}
.px-lasche .fach .kopf b{display:block; font-size:15px; font-weight:700; letter-spacing:-.02em}
.px-lasche .fach .kopf small{display:block; font-size:11px; color:var(--dim); margin-top:2px}
.px-lasche .fach .zu{
  margin-left:auto; width:28px; height:28px; border-radius:8px; padding:0;
  border:1px solid var(--line); background:transparent; color:var(--dim);
  cursor:pointer; display:grid; place-items:center; transition:.2s;
}
.px-lasche .fach .zu:hover{border-color:var(--acc); color:var(--acc)}
.px-lasche .werte{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px}
.px-lasche .werte div{background:var(--pane2); border-radius:11px; padding:11px 13px}
.px-lasche .werte b{display:block; font-size:21px; font-weight:800; letter-spacing:-.03em; line-height:1}
.px-lasche .werte span{font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); margin-top:4px; display:block}
.px-lasche .koepfe{display:flex; flex-wrap:wrap; margin-bottom:14px}
.px-lasche .koepfe img{width:30px; height:30px; border-radius:50%; object-fit:cover;
  border:2px solid var(--pane); margin-left:-8px; background:var(--pane2); transition:.22s}
.px-lasche .koepfe img:first-child{margin-left:0}
.px-lasche .koepfe img:hover{transform:translateY(-4px); z-index:2; position:relative}
.px-lasche .raeume{border-top:1px solid var(--line); padding-top:11px; margin-bottom:14px}
.px-lasche .raum{display:flex; align-items:center; gap:9px; padding:5px 0;
  font-size:12.5px; color:var(--dim)}
.px-lasche .raum b{color:var(--txt); font-weight:500; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.px-lasche .raum span{margin-left:auto; color:var(--acc); font-size:11px; flex:none}
.px-lasche .hinweis{font-size:12.5px; color:var(--dim); line-height:1.5; margin-bottom:14px}
.px-lasche .px-btn{width:100%; justify-content:center; padding:11px}
.px-lasche .px-kopf-feld{width:100%; margin-bottom:9px}

@media(max-width:1180px){.px-laschen{display:none}}

/* ============================================================
   Darstellungsfenster
   ============================================================ */
#px-dknopf{
  position:fixed; left:24px; bottom:24px; z-index:900;
  width:46px; height:46px; border-radius:14px; padding:0;
  border:1px solid var(--line); background:var(--pane); color:var(--txt);
  cursor:pointer; display:grid; place-items:center;
  box-shadow:0 10px 26px var(--schatten);
  transition:.28s cubic-bezier(.16,1,.3,1);
}
#px-dknopf:hover{border-color:var(--acc); color:var(--acc); transform:translateY(-3px) rotate(-8deg)}
#px-dfenster{
  position:fixed; inset:0; z-index:960; background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px); display:none;
  align-items:flex-end; justify-content:flex-start; padding:24px;
}
#px-dfenster.on{display:flex; animation:px-ein .24s ease}
@keyframes px-ein{from{opacity:0}to{opacity:1}}
#px-dfenster .box{
  width:min(330px,100%); background:var(--pane);
  border:1px solid var(--line); border-radius:18px; padding:22px;
  box-shadow:0 30px 70px var(--schatten);
  animation:px-hoch .34s cubic-bezier(.16,1,.3,1);
}
@keyframes px-hoch{from{transform:translateY(18px) scale(.97); opacity:0}to{transform:none; opacity:1}}
#px-dfenster .kopf{display:flex; align-items:center; margin-bottom:18px}
#px-dfenster h3{font-size:17px; font-weight:800; letter-spacing:-.025em}
#px-dfenster .zu{
  margin-left:auto; width:30px; height:30px; border-radius:9px; padding:0;
  border:1px solid var(--line); background:transparent; color:var(--dim);
  cursor:pointer; display:grid; place-items:center; transition:.2s;
}
#px-dfenster .zu:hover{border-color:var(--acc); color:var(--acc)}
#px-dfenster .feld{margin-bottom:18px}
#px-dfenster .feld:last-child{margin-bottom:0}
#px-dfenster label{
  display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin-bottom:10px;
}
#px-dfenster .wahl{display:flex; gap:7px}
#px-dfenster .wahl button{
  flex:1; padding:11px; border-radius:11px; border:1px solid var(--line);
  background:var(--pane2); color:var(--txt); font:inherit; font-size:13.5px;
  font-weight:600; cursor:pointer; transition:.2s;
}
#px-dfenster .wahl button:hover{border-color:var(--line2)}
#px-dfenster .wahl button.on{background:var(--acc); color:var(--auf-acc); border-color:transparent}
#px-dfenster .farbwahl{display:flex; gap:9px; flex-wrap:wrap}
#px-dfenster .farbwahl button{
  width:38px; height:38px; border-radius:12px; padding:0;
  border:2px solid transparent; cursor:pointer; transition:.2s;
}
#px-dfenster .farbwahl button:hover{transform:scale(1.12)}
#px-dfenster .farbwahl button.on{border-color:var(--txt); transform:scale(1.08)}
#px-dfenster .notiz{font-size:12px; color:var(--dim); margin:9px 0 0; line-height:1.5}
@media(max-width:760px){
  #px-dknopf{left:16px; bottom:16px}
  #px-dfenster{align-items:center; justify-content:center}
}

/* ============================================================
   Seitenaufbau — Druckbogen

   Abschnitte wischen abwechselnd von links und rechts herein, wie
   ein Bogen, der durch die Druckmaschine läuft.
   ============================================================ */
/* Nur Abschnitte der Startseite starten verdeckt - der Modulinhalt
   niemals, damit dort unter keinen Umstaenden etwas haengenbleibt. */
.px-main .px-bogen,.px-inhalt .px-bogen{
  opacity:1!important; clip-path:none!important; transform:none!important;
}
/* Der Aufbau laeuft von unten nach oben: Der Inhalt steigt herein und
   wird dabei von unten her freigegeben. Das wirkt ruhiger als das
   seitliche Wischen und passt besser zum Lesefluss. */
/* ============================================================
   Seitenaufbau

   Zwei Ebenen, die nacheinander greifen — das macht den Unterschied
   zwischen "irgendwas huscht" und einem sichtbaren Aufbau:

   1. Der Abschnitt wird von unten nach oben freigegeben. Er bleibt
      dabei voll deckend, sonst überlagert das Ausblenden die Blende
      und man sieht nur einen vagen Schatten.
   2. Die Karten darin steigen einzeln nach, gestaffelt.
   ============================================================ */
.px-js .px-bogen{
  clip-path:inset(0 0 100% 0);
  transform:translateY(26px);
  transition:clip-path .9s cubic-bezier(.22,1,.28,1),
             transform .9s cubic-bezier(.16,1,.3,1);
}
.px-js .px-bogen.in{
  clip-path:inset(0 0 0 0);
  transform:none;
}

/* Die Karten im Abschnitt steigen nacheinander nach. Die Verzögerung
   setzt das Skript je Karte, damit es von oben links nach unten
   rechts durchläuft. */
.px-js .px-bogen .px-nach{
  opacity:0;
  transform:translateY(30px) scale(.985);
  transition:opacity .62s ease,
             transform .72s cubic-bezier(.16,1,.3,1);
}
.px-js .px-bogen.in .px-nach{
  opacity:1;
  transform:none;
}

/* Die Überschrift des Abschnitts kommt zuerst, mit einem Strich,
   der sich darunter aufzieht. */
.px-js .px-bogen .px-rkopf{position:relative}
.px-js .px-bogen .px-rkopf::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--acc);
  transition:width 1.1s cubic-bezier(.22,1,.28,1) .18s;
}
.px-js .px-bogen.in .px-rkopf::after{width:100%}

html[data-anim="0"] .px-bogen,
html[data-anim="0"] .px-bogen .px-nach{
  opacity:1!important; clip-path:none!important; transform:none!important;
}
@media(prefers-reduced-motion:reduce){
  .px-js .px-bogen,.px-js .px-bogen .px-nach{
    opacity:1; clip-path:none; transform:none;
  }
}


/* ============================================================
   Bewegung im Kopf und bei den Symbolen
   ============================================================ */
.px-wortmarke{position:relative; display:inline-block}
.px-wortmarke span{
  position:relative; display:inline-block;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
/* Farbauszug: beim Überfahren zieht sich der farbige Teil kurz
   auseinander, wie ein verrutschter Druck. */
.px-wortmarke span::before,
.px-wortmarke span::after{
  content:attr(data-t); position:absolute; left:0; top:0;
  pointer-events:none; opacity:0; transition:opacity .24s, transform .34s;
}
.px-wortmarke:hover span{transform:translateY(-2px)}
.px-wortmarke::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background:var(--acc); border-radius:99px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.px-wortmarke:hover::after{transform:scaleX(1)}

/* Symbole in Kästen bewegen sich beim Überfahren */
.px-pmark{transition:transform .34s cubic-bezier(.16,1,.3,1)}
.px-panel:hover .px-pmark{transform:rotate(-10deg) scale(1.1)}
.px-icb .px-sym,.px-kopf-feld .px-sym{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.px-icb:hover .px-sym{transform:scale(1.15)}
.px-dauer .px-sym{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.px-guide:hover .px-dauer .px-sym{transform:rotate(360deg)}
.px-suche:focus-within .px-sym{color:var(--acc); transform:scale(1.1)}


/* Aufmacher ohne Inhalt: einspaltiger Hinweis */
.px-aufmacher.einspaltig{grid-template-columns:1fr}


/* ============================================================
   Kein Leerraum, wenn Bereiche abgeschaltet sind

   Fehlt der Aufmacher, soll der Inhalt unmittelbar unter der
   Ressortleiste beginnen - nicht nach einer handbreiten Luecke.
   ============================================================ */
.px-ressorts + .px-main{padding-top:30px}
.px-ressorts + .px-sec{padding-top:34px}
.px-aufmacher:empty{display:none; padding:0}
.px-sec:empty{display:none; padding:0}
/* Ein Abschnitt, der nur seinen Kopf enthaelt, wird nicht gezeigt */
.px-sec > .px-rkopf:only-child{display:none}

/* Der Inhaltsbereich traegt die Seite, wenn sonst nichts da ist -
   aber ohne kuenstliche Mindesthoehe, die als Leere wirkt. */
.px-main{min-height:0}

/* ============================================================
   Überblick für Verwalter

   Zeigt angemeldeten Verwaltern, welche Bereiche Inhalt haben.
   Besucher sehen davon nichts.
   ============================================================ */
.px-stand{
  background:var(--pane); border:1px solid var(--line);
  border-radius:16px; padding:8px 14px;
}
.px-standzeile{
  display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  padding:12px 4px; border-bottom:1px solid var(--line);
}
.px-standzeile:last-child{border-bottom:none}
.px-standzeile .marke{
  width:24px; height:24px; border-radius:8px; flex:none;
  display:grid; place-items:center;
  background:rgba(192,57,43,.16); color:var(--schlecht);
}
.px-standzeile.da .marke{background:rgba(26,158,95,.16); color:var(--gut)}
.px-standzeile b{font-size:15px; font-weight:600; min-width:110px}
.px-standzeile .wert{font-size:13px; color:var(--dim)}
.px-standzeile .tipp{
  flex:1 1 100%; font-size:12.5px; color:var(--dim);
  padding-left:37px; line-height:1.5;
}
@media(max-width:600px){
  .px-standzeile b{min-width:0}
  .px-standzeile .tipp{padding-left:0}
}

/* ============================================================
   Aufmacher-Wechsler

   Die Folien liegen im selben Rasterfeld übereinander, nicht
   untereinander. Ohne diese Regeln stapeln sich alle Beiträge in
   voller Größe untereinander — genau das war der Fehler.
   ============================================================ */
.px-slider{position:relative; border-radius:16px; overflow:hidden}
.px-slider .folien{display:grid}
.px-slider .folien > *{
  grid-area:1 / 1;
  opacity:0; visibility:hidden;
  transition:opacity .55s ease, transform .7s cubic-bezier(.16,1,.3,1);
  transform:scale(1.02);
}
.px-slider .folien > .on{opacity:1; visibility:visible; transform:none}
/* Bei nur einer Folie braucht es keinen Wechsel */
.px-slider:not(.mehrere) .folien > *{opacity:1; visibility:visible; transform:none}

/* Pfeile links und rechts */
.px-slider .steuerung{
  position:absolute; inset:auto 0 0 0; z-index:6;
  display:flex; align-items:center; gap:9px;
  padding:0 18px 18px; pointer-events:none;
}
.px-slider .steuerung > .pfeil{
  width:38px; height:38px; border-radius:50%; padding:0; flex:none;
  border:1px solid rgba(255,255,255,.24); background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px); color:#fff; cursor:pointer;
  display:grid; place-items:center; pointer-events:auto; transition:.2s;
}
.px-slider .steuerung > .pfeil:hover{background:var(--acc); color:var(--auf-acc); border-color:transparent}
.px-slider .steuerung .pfeil.vor .px-sym{transform:rotate(-90deg)}
.px-slider .steuerung .pfeil.zurueck .px-sym{transform:rotate(90deg)}

/* Punkte zum Blättern */
.px-slider .punkte{display:flex; gap:7px; margin:0 auto; pointer-events:auto}
.px-slider .punkte > button > i{display:none}
.px-slider .punkte > button{
  width:9px; height:9px; border-radius:50%; padding:0; border:none;
  background:rgba(255,255,255,.4); cursor:pointer; transition:.24s;
}
.px-slider .punkte > button:hover{background:rgba(255,255,255,.75)}
.px-slider .punkte > button.on{background:var(--acc); width:24px; border-radius:99px}

.px-slider .zaehler{
  font-size:11.5px; color:rgba(255,255,255,.7); pointer-events:none;
  letter-spacing:.1em;
}
@media(max-width:760px){
  .px-slider .steuerung{padding:0 12px 12px}
  .px-slider .steuerung > .pfeil{width:32px; height:32px}
}

/* Nummernliste im Überblick für Verwalter */
.px-nummern{
  margin-top:14px; padding:16px 18px;
  background:var(--pane2); border:1px solid var(--line); border-radius:14px;
}
.px-nummern > b{font-size:14px; font-weight:700; display:block; margin-bottom:4px}
.px-nummern > p{font-size:12.5px; color:var(--dim); margin:0 0 12px}
.px-nummern .liste{display:flex; flex-wrap:wrap; gap:7px}
.px-nummern .liste span{
  font-family:'Consolas','SF Mono',monospace; font-size:12px;
  background:var(--pane); border:1px solid var(--line);
  padding:6px 11px; border-radius:8px; color:var(--dim);
}
.px-nummern .liste span:hover{border-color:var(--acc); color:var(--acc)}

/* ============================================================
   Autorenprofile

   Im Magazin sind Autoren keine Kacheln, sondern Personen: rundes
   Bild, Name, Ressort in der Akzentfarbe, ein Satz dazu. Die Bilder
   liegen in Graustufen und werden beim Überfahren farbig — das ist
   im Zeitschriftensatz üblich und hält die Seite ruhig.
   ============================================================ */
/* ============================================================
   Team — Karten statt loser Zeilen

   Vorher standen Bild und Name frei nebeneinander, ohne Flaeche und
   ohne Kante. Jetzt bekommt jeder eine Karte mit grossem Bild oben,
   farbigem Anlauf und Rolle als Marke - dieselbe Sprache wie die
   Beitragskacheln.
   ============================================================ */
/* ============================================================
   Team — kompakte Karten

   Vorher nahmen die Bilder die ganze Kartenbreite ein und wirkten
   erschlagend. Jetzt steht ein rundes Bild in ruhiger Groesse oben,
   der Rest ist Text. Mehr Karten passen in eine Reihe.
   ============================================================ */
.px-autoren{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:14px;
}
.px-autor{
  position:relative; overflow:hidden;
  background:var(--pane); border:1px solid var(--line);
  border-radius:var(--r-karte);
  padding:22px 16px 18px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:.3s cubic-bezier(.16,1,.3,1);
}
.px-autor::before{
  content:''; position:absolute; left:0; top:0; height:3px; width:100%;
  background:var(--acc); transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.px-autor:hover{
  border-color:var(--line2); transform:translateY(-4px);
  box-shadow:0 16px 36px -20px var(--schatten);
}
.px-autor:hover::before{transform:scaleX(1)}

.px-autor .bild{
  width:76px; height:76px; border-radius:50%; overflow:hidden;
  background:var(--pane2); border:2px solid var(--line);
  display:grid; place-items:center; margin-bottom:13px; flex:none;
  transition:border-color .3s ease;
}
.px-autor:hover .bild{border-color:var(--acc)}
.px-autor .bild img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:filter .45s ease;
}
.px-autor:hover .bild img{filter:none}
.px-autor .bild.leer span{
  font-size:26px; font-weight:800; color:var(--line2);
  letter-spacing:-.04em; transition:color .35s;
}
.px-autor:hover .bild.leer span{color:var(--acc)}

.px-autor .text{display:flex; flex-direction:column; align-items:center; width:100%}
.px-autor h4{
  font-size:15.5px; font-weight:700; letter-spacing:-.02em;
  margin-bottom:6px; line-height:1.25;
}
.px-autor .rolle{
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc); background:rgba(var(--acc-rgb),.13);
  padding:3px 9px; border-radius:var(--r-rund); margin-bottom:8px;
}
.px-autor p{font-size:12.5px; color:var(--dim); line-height:1.5; margin:0}

@media(max-width:600px){
  .px-autoren{grid-template-columns:repeat(auto-fit,minmax(138px,1fr)); gap:10px}
  .px-autor{padding:18px 12px 14px}
  .px-autor .bild{width:62px; height:62px}
}

/* ============================================================
   Partner — für Banner gebaut

   Im Partner-Modul trägst du Name, Adresse und Banner ein. Banner
   sind breit, keine quadratischen Logos. Die Kacheln geben ihnen
   darum Breite statt Höhe und schneiden nichts ab.
   ============================================================ */
.px-partner{display:flex; flex-wrap:wrap; gap:0}
.px-pkarte{
  flex:1 1 200px; min-height:104px;
  display:grid; place-items:center; padding:18px 22px;
  border:none; border-right:1px solid var(--line); border-radius:0;
  background:transparent; box-shadow:none;
  position:relative; overflow:hidden;
}
.px-pkarte:last-child{border-right:none}

/* Das Banner darf die ganze Breite nutzen und wird nie beschnitten */
.px-pkarte img{
  max-width:100%; max-height:58px;
  width:auto; height:auto; object-fit:contain;
  filter:grayscale(1); opacity:.62;
  transition:filter .4s ease, opacity .4s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.px-pkarte:hover{background:var(--pane2); transform:none; box-shadow:none}
.px-pkarte:hover img{filter:none; opacity:1; transform:scale(1.04)}

/* Ein farbiger Anlauf an der Unterkante beim Überfahren */
.px-pkarte::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--acc); transform:scaleX(0); transform-origin:center;
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.px-pkarte:hover::after{transform:scaleX(1)}

/* Ist ein Banner da, dient der Name nur der Vorlesehilfe */
.px-pkarte img + .name{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
/* Ohne Banner steht der Name gross da */
.px-pkarte.ohnelogo .name{
  position:static; width:auto; height:auto; overflow:visible;
  clip:auto; white-space:normal;
  font-size:17px; font-weight:700; letter-spacing:-.02em;
  color:var(--dim); text-align:center; transition:color .3s;
}
.px-pkarte.ohnelogo:hover .name{color:var(--acc)}

@media(max-width:600px){
  .px-pkarte{flex-basis:50%; border-bottom:1px solid var(--line); min-height:88px}
  .px-pkarte:nth-child(2n){border-right:none}
  .px-pkarte img{max-height:46px}
}

/* ---------- Einrichtungshinweis (nur für Verwalter) ---------- */
.px-einrichten{
  border:1px dashed var(--acc); border-radius:16px;
  background:rgba(var(--acc-rgb),.06); padding:22px 24px;
}
.px-einrichten .kopf{
  display:flex; align-items:center; gap:11px; margin-bottom:13px;
  color:var(--acc);
}
.px-einrichten .kopf b{font-size:15.5px; font-weight:700; letter-spacing:-.015em}
.px-einrichten p{font-size:14.5px; color:var(--dim); line-height:1.6; margin:0 0 11px}
.px-einrichten p:last-child{margin-bottom:0}
.px-einrichten b{color:var(--txt); font-weight:600}
.px-einrichten .marken{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:13px}
.px-einrichten .marken span{
  font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:8px;
  background:var(--pane); border:1px solid var(--line); color:var(--txt);
}
.px-einrichten .was{
  padding-top:13px; border-top:1px solid rgba(var(--acc-rgb),.24); font-size:14px;
}

.px-einrichten .zuordnung{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:13px}
.px-einrichten .zuordnung div{
  background:var(--pane); border:1px solid var(--line);
  border-radius:11px; padding:12px 14px;
}
.px-einrichten .zuordnung span{
  display:block; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); margin-bottom:4px;
}
.px-einrichten .zuordnung b{font-size:14.5px; color:var(--txt)}
@media(max-width:600px){.px-einrichten .zuordnung{grid-template-columns:1fr}}

/* ---------- Ressorts: Kategorien in der Kopfleiste ---------- */
.px-navkat{display:flex; gap:2px; margin:0; padding:0; list-style:none}
.px-navkat::before{
  content:''; width:1px; align-self:center; height:18px;
  background:var(--line); margin:0 8px; flex:none;
}
.px-navkat a{
  font-size:13px; font-weight:500; color:var(--dim);
  padding:12px 13px; border-bottom:3px solid transparent; margin-bottom:-2px;
  white-space:nowrap; display:block; transition:.18s;
}
.px-navkat a:hover{color:var(--txt); text-decoration:none}
.px-navkat a.on{color:var(--txt); border-bottom-color:var(--acc)}

/* Angaben in den Ressortkacheln */
.px-test .angaben{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}

@media(max-width:760px){
  .px-navkat{flex-direction:column; width:100%}
  .px-navkat::before{display:none}
  .px-navkat a{padding:13px 4px; border-bottom:1px solid var(--line); margin:0}
}

/* ============================================================
   Ohne Bild: Text statt Platzhalter

   Nicht jeder Beitrag hat ein Bild. Ein schraffierter Kasten mit
   zwei Buchstaben sieht dann nach Fehler aus. Darum bekommen
   bildlose Beiträge eine eigene, textbetonte Gestalt — mit mehr
   Raum für die Überschrift.
   ============================================================ */
.px-test.nurtext{
  background:var(--pane);
  border-left:3px solid var(--acc);
  border-radius:4px 15px 15px 4px;
  display:flex; flex-direction:column;
}
.px-test.nurtext .body{padding:20px 22px 18px; flex:1; display:flex; flex-direction:column}
.px-test.nurtext h3{
  font-size:20px; line-height:1.24; margin-bottom:10px;
  letter-spacing:-.025em;
}
.px-test.nurtext p{font-size:14.5px; line-height:1.55; flex:1}
.px-test.nurtext .fuss{
  padding-top:12px; border-top:1px solid var(--line); margin-top:auto;
}
.px-test.nurtext:hover{
  border-left-color:var(--acc);
  transform:translateY(-4px);
  box-shadow:0 18px 40px var(--schatten);
}
/* Der Strich links wächst beim Überfahren */
.px-test.nurtext{transition:.3s cubic-bezier(.16,1,.3,1), border-left-width .3s}
.px-test.nurtext:hover{border-left-width:6px}

/* Aufmacher ohne Bild: heller Kasten statt dunkler Bildfläche */
.px-gross.nurtext{
  background:
    linear-gradient(135deg, rgba(var(--acc-rgb),.13), transparent 58%),
    var(--pane);
  color:var(--txt);
  align-items:flex-end;
}
.px-gross.nurtext::after{display:none}
.px-gross.nurtext .ohnebild{display:none}
.px-gross.nurtext .inhalt{padding:34px 32px 30px}
.px-gross.nurtext h2{color:var(--txt)}
.px-gross.nurtext p{color:var(--dim)}
.px-gross.nurtext .px-zeile{color:var(--dim)}
.px-gross.nurtext .px-zeile b{color:var(--txt)}
.px-gross.nurtext .px-zeile .pkt{background:var(--line2)}
/* Ein großes Anführungszeichen als Blickfang, wie im Heft */
.px-gross.nurtext::before{
  content:''; position:absolute; right:-40px; top:-40px;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--acc-rgb),.16), transparent 68%);
  pointer-events:none;
}

/* ---------- Filterknöpfe über dem Raster ---------- */
.px-filter{
  display:flex; gap:7px; flex-wrap:wrap; margin:-8px 0 20px;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.px-filter button{
  font-family:inherit; font-size:13.5px; font-weight:600;
  padding:8px 15px; border-radius:99px;
  border:1px solid var(--line); background:transparent;
  color:var(--dim); cursor:pointer; transition:.2s;
}
.px-filter button:hover{color:var(--txt); border-color:var(--line2)}
.px-filter button.on{
  background:var(--acc); color:var(--auf-acc); border-color:transparent;
}
.px-leerfilter{
  font-size:14.5px; color:var(--dim); text-align:center;
  padding:40px 20px; margin:0;
}

/* ============================================================
   Unterseiten: Banner und Inhaltsflächen

   Der Banner war hoch und leer, weil die Überschrift unsichtbar
   blieb. Sie ist zurück; dazu wird der Bereich etwas flacher und
   bekommt eine Kante in der Akzentfarbe.
   ============================================================ */
.px-bannerin{padding:34px var(--rand) 30px}
.px-banner{border-bottom:2px solid var(--txt)}
.px-banner::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg, var(--acc) 0%, transparent 42%);
  z-index:3;
}
.px-banner h1{margin:0}

/* Inhaltsflächen bekommen dieselbe Anmutung wie die Kacheln:
   feine Kante, weicher Schatten, ein Hauch Akzent an der Oberkante. */
.px-inhalt > .px-karte,
.px-inhalt .px-artikelkopf,
.px-seitenleiste .px-kasten{
  position:relative;
}
.px-seitenleiste .px-kasten{
  box-shadow:-3px 0 0 0 rgba(var(--acc-rgb),.55), 0 14px 34px var(--schatten);
  transition:box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.px-seitenleiste .px-kasten:hover{
  box-shadow:-5px 0 0 0 var(--acc), 0 18px 44px var(--schatten);
}
.px-seitenleiste .px-kasten h4,
.px-seitenleiste .px-kasten .kopf{
  position:relative;
}

/* Der Artikelkopf bekommt oben denselben farbigen Anlauf */
.px-inhalt .px-artikelkopf::before,
.px-inhalt > .px-karte::before{
  content:''; position:absolute; left:0; top:0; height:2px; width:0;
  background:var(--acc); border-radius:2px 2px 0 0;
  transition:width .7s cubic-bezier(.16,1,.3,1);
}
.px-inhalt .px-artikelkopf.in::before,
.px-inhalt > .px-karte.in::before{width:100%}

/* ============================================================
   Forum: Farbe an den Kanten
   ============================================================ */
.px-inhalt .panel,
.px-inhalt .card,
.px-inhalt .well,
.px-inhalt .post{
  box-shadow:-3px 0 0 0 rgba(var(--acc-rgb),.42), 0 12px 30px var(--schatten);
  transition:box-shadow .3s cubic-bezier(.16,1,.3,1),
             transform .3s cubic-bezier(.16,1,.3,1);
}
.px-inhalt .panel:hover,
.px-inhalt .card:hover,
.px-inhalt .post:hover{
  box-shadow:-6px 0 0 0 var(--acc), 0 18px 44px var(--schatten);
}
/* Tabellenzeilen bekommen beim Überfahren einen Farbstrich links */
.px-inhalt .table > tbody > tr{
  box-shadow:inset 0 0 0 0 var(--acc);
  transition:box-shadow .26s cubic-bezier(.16,1,.3,1);
}
.px-inhalt .table > tbody > tr:hover{
  box-shadow:inset 3px 0 0 0 var(--acc);
}
/* Überschriften im Forum wie Ressortköpfe */
.px-inhalt h1,.px-inhalt h2,.px-inhalt h3{position:relative}
.px-inhalt .panel-heading::after,
.px-inhalt .card-header::after{
  content:''; position:absolute; left:0; bottom:-2px; width:64px; height:2px;
  background:var(--acc);
}

/* ---------- Menü mit Hover ---------- */
.px-ressorts a{position:relative; overflow:hidden}
.px-ressorts a::before{
  content:''; position:absolute; left:50%; right:50%; bottom:0; height:3px;
  background:var(--acc); border-radius:2px 2px 0 0;
  transition:left .32s cubic-bezier(.16,1,.3,1), right .32s cubic-bezier(.16,1,.3,1);
}
.px-ressorts a:hover::before{left:12px; right:12px}
.px-ressorts a::after{
  content:''; position:absolute; inset:4px 6px; border-radius:8px;
  background:rgba(var(--acc-rgb),.10);
  opacity:0; transform:scale(.9);
  transition:.28s cubic-bezier(.16,1,.3,1); z-index:-1;
}
.px-ressorts a:hover::after{opacity:1; transform:none}
.px-ressorts .active > a::before,
.px-ressorts a.active::before{left:12px; right:12px}

/* ---------- Zweifarbige Überschrift im Banner ---------- */
.px-zweifarbig .a{color:var(--acc)}
.px-zweifarbig .a .px-auf{color:var(--acc)}

/* ---------- Inhaltsspalte mittig halten ---------- */
.px-main{width:100%}
.px-inhalt{min-width:0}

/* ============================================================
   Archiv nach Monaten

   Aufklappbare Monatsblöcke — wächst von selbst mit, weil es sich
   allein aus dem Erscheinungsdatum ergibt.
   ============================================================ */
/* Das Archiv war nur eine Liste mit zwei Strichen - das wirkte
   billig. Jetzt sitzen die Monate in einer eigenen Flaeche, der
   offene Monat ist farbig hervorgehoben. */
.px-archiv{
  background:var(--pane); border:1px solid var(--line);
  border-radius:var(--r-flaeche); overflow:hidden;
}
.px-monat{border-bottom:1px solid var(--line); position:relative}
.px-monat:last-child{border-bottom:none}
.px-monat::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--acc); transform:scaleY(0); transform-origin:top;
  transition:transform .34s cubic-bezier(.16,1,.3,1);
}
.px-monat.auf::before{transform:scaleY(1)}
.px-monat.auf{background:var(--pane2)}

.px-monat > button{
  width:100%; display:flex; align-items:center; gap:14px;
  background:none; border:none; cursor:pointer; padding:17px 22px;
  font-family:inherit; color:var(--txt); text-align:left;
  transition:padding-left .26s cubic-bezier(.16,1,.3,1), background .2s;
}
.px-monat > button:hover{padding-left:28px; background:var(--pane2)}
.px-monat.auf > button{padding-left:28px}
.px-monat > button b{font-size:16.5px; font-weight:700; letter-spacing:-.02em}
.px-monat > button .anz{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); background:var(--bg); border:1px solid var(--line);
  padding:4px 10px; border-radius:var(--r-rund);
}
.px-monat.auf > button .anz{color:var(--acc); border-color:rgba(var(--acc-rgb),.4)}
.px-monat > button .zeichen{
  margin-left:auto; width:26px; height:26px; flex:none;
  display:grid; place-items:center; border-radius:50%;
  background:var(--bg); border:1px solid var(--line);
  color:var(--acc); font-size:16px; line-height:1;
  transition:transform .32s cubic-bezier(.16,1,.3,1), background .2s;
}
.px-monat > button:hover .zeichen{background:var(--pane)}
.px-monat.auf > button .zeichen{
  transform:rotate(45deg); background:var(--acc); color:var(--auf-acc);
  border-color:transparent;
}

.px-monat .inhalt{
  max-height:0; overflow:hidden;
  transition:max-height .38s cubic-bezier(.16,1,.3,1);
}
.px-monat .inhalt ul{list-style:none; margin:0; padding:0 22px 16px}
.px-monat .inhalt li{
  display:flex; align-items:baseline; gap:14px; padding:9px 12px;
  border-radius:var(--r-feld);
  transition:background .2s ease, padding-left .24s cubic-bezier(.16,1,.3,1);
}
.px-monat .inhalt li:hover{background:var(--pane); padding-left:20px}
.px-monat .inhalt time{
  font-size:11.5px; color:var(--dim); flex:none; width:48px;
  font-variant-numeric:tabular-nums; letter-spacing:.03em;
}
.px-monat .inhalt a{font-size:15px; color:var(--txt); flex:1; min-width:0}
.px-monat .inhalt a:hover{color:var(--acc); text-decoration:none}
.px-monat .inhalt .kat{
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acc); background:rgba(var(--acc-rgb),.12);
  padding:3px 9px; border-radius:var(--r-rund); flex:none;
}

@media(max-width:600px){
  .px-monat .inhalt li{flex-wrap:wrap; gap:6px}
  .px-monat .inhalt .kat{order:3}
}

/* ---------- Burger: sichtbare Rückmeldung ---------- */
.px-burger{transition:.26s cubic-bezier(.16,1,.3,1)}
.px-burger .px-sym{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.px-burger.offen{
  background:var(--acc); color:var(--auf-acc); border-color:transparent;
}
.px-burger.offen .px-sym{transform:rotate(90deg)}

/* Auf schmalen Geräten das Menü deutlich abheben */
@media(max-width:760px){
  .px-ressorts.offen{
    background:var(--pane);
    box-shadow:0 18px 40px var(--schatten),
               0 1px 0 0 rgba(var(--acc-rgb),.4);
  }
  .px-ressorts.offen a{padding-left:2px}
  .px-ressorts.offen a:hover::after{opacity:0}
  /* Der Strich läuft hier von links, nicht aus der Mitte */
  .px-ressorts.offen a::before{
    left:0; right:auto; top:0; bottom:0; width:0; height:auto;
    border-radius:0 2px 2px 0;
    transition:width .26s cubic-bezier(.16,1,.3,1);
  }
  .px-ressorts.offen a:hover::before{width:3px; left:0; right:auto}
}

/* ============================================================
   Maße vereinheitlichen

   Alles greift auf dieselben vier Rundungen zu. Wer die Anmutung
   kantiger oder weicher mag, ändert sie oben an einer Stelle.
   ============================================================ */
.px-gross,
.px-slider,
.px-banner .px-bannerbild,
.px-lizenzrahmen,
.px-archiv .px-monat .inhalt li{border-radius:var(--r-flaeche)}
.px-archiv .px-monat .inhalt li{border-radius:var(--r-feld)}

.px-test,
.px-guide,
.px-autor,
.px-karte,
.px-panel,
.px-reihe,
.px-einrichten,
.px-lasche .fach,
#px-dfenster .box{border-radius:var(--r-karte)}

.px-test.nurtext{border-radius:4px var(--r-karte) var(--r-karte) 4px}

.px-btn,
.px-wbtn,
.px-icb,
.px-kopf-feld,
.px-dauer,
.px-stufe,
.px-note,
.px-teil,
.px-klein .bild,
#px-dfenster .wahl button,
#px-dfenster .farbwahl button{border-radius:var(--r-feld)}

.px-filter button,
.px-dach,
.px-autor .rolle,
.px-archiv .kat,
.px-lasche .griff .zahl,
.px-plive{border-radius:var(--r-rund)}

/* Gleiche Innenabstände in den Karten */
.px-test .body{padding:16px 18px 18px}
.px-test.nurtext .body{padding:18px 20px 18px}
.px-guide{padding:18px 20px}
.px-autor .text{padding:0 16px 18px}

/* Gleicher Abstand zwischen allen Abschnitten */
.px-sec{padding-top:52px; padding-bottom:52px}
.px-sec + .px-sec{padding-top:0}
.px-rkopf{margin-bottom:20px}

/* Bilder wachsen nie über ihren Platz hinaus */
.px-test .bild,
.px-klein .bild,
.px-autor .bild,
.px-gross{contain:paint}

/* ============================================================
   Punkte in den Kastenüberschriften

   Der kleine Punkt vor MENÜ, LAYOUT und den übrigen Kästen pulst
   ruhig vor sich hin und wandert beim Überfahren kurz aus.
   ============================================================ */
.px-seitenleiste .px-kasten h4::before,
.px-seitenleiste .px-kasten .titel::before,
.px-kasten > .kopf::before{
  animation:px-puls 2.6s ease-in-out infinite;
  transition:transform .32s cubic-bezier(.16,1,.3,1),
             box-shadow .32s ease;
}
@keyframes px-puls{
  0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(var(--acc-rgb),.45)}
  55%    {opacity:.55; box-shadow:0 0 0 5px rgba(var(--acc-rgb),0)}
}
.px-seitenleiste .px-kasten:hover h4::before,
.px-seitenleiste .px-kasten:hover .titel::before{
  transform:translateX(3px) scale(1.35);
  box-shadow:0 0 10px 1px rgba(var(--acc-rgb),.55);
}
html[data-anim="0"] .px-seitenleiste .px-kasten h4::before{animation:none}
@media(prefers-reduced-motion:reduce){
  .px-seitenleiste .px-kasten h4::before{animation:none}
}

/* Punkte in Zählmarken der Seitenleiste mitbewegen */
.px-seitenleiste .zahl,
.px-seitenleiste .badge{
  transition:transform .28s cubic-bezier(.16,1,.3,1),
             background .24s, color .24s;
}
.px-seitenleiste a:hover .zahl,
.px-seitenleiste a:hover .badge{
  transform:scale(1.12);
  background:var(--acc); color:var(--auf-acc);
}

/* ---------- Suchfeld mit Knopf ---------- */
.px-suche button{
  border:none; background:none; padding:0; margin-left:2px;
  color:var(--dim); cursor:pointer; display:grid; place-items:center;
  width:24px; height:24px; border-radius:7px; flex:none;
  opacity:0; transform:translateX(-4px);
  transition:.26s cubic-bezier(.16,1,.3,1);
}
.px-suche button .px-sym{transform:rotate(-90deg)}
.px-suche:focus-within button,
.px-suche:hover button{opacity:1; transform:none}
.px-suche button:hover{background:var(--acc); color:var(--auf-acc)}