/* Grundregeln, die jede Gestaltung braucht; das Aussehen steht in site.css (Variablen dort) */
html[data-l="de"] [lang="en"]:not(html),
html[data-l="en"] [lang="de"]:not(html){display:none!important}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--text);font:400 18px/1.55 var(--schrift);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--akzent);outline-offset:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--text);color:var(--grund);padding:8px 12px}
.skip:focus{left:8px}

#effekt{position:absolute;top:0;left:0;width:100%;height:100svh;display:block}
.kopf{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:32px;padding:24px var(--gut)}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none}
.marke svg{width:22px;height:22px;flex:none}
.kopf nav{margin-left:auto;display:flex;gap:28px}
.kopf nav a,.sprache a{text-decoration:none}
.sprache{display:flex;gap:12px}
.sprache a{opacity:.6}
.sprache a[aria-current]{opacity:1}
.held{position:relative;min-height:100svh}
main,.fuss{position:relative}
.wortmarke{margin:0;font-weight:inherit}

.abschnitt{max-width:1200px;margin:0 auto;padding:clamp(90px,12vw,170px) var(--gut) 0}
.abschnitt h2{margin:0 0 clamp(32px,4vw,64px)}
.spiele{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.5vw,56px)}
.bild{overflow:hidden}
.bild img{width:100%;height:100%;object-fit:cover}
.bild.pixel img{image-rendering:pixelated;object-fit:contain}
.spiel h3{margin:0 0 10px}
.spiel p{margin:0 0 12px}
.tags{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.aussage{margin:0}
.mail{display:inline-block;margin-top:clamp(24px,3vw,48px);text-decoration:none;overflow-wrap:anywhere}
.mail:hover{text-decoration:underline}
.fuss{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:clamp(100px,14vw,200px);padding:26px var(--gut) 34px;font-size:15px}
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline}

.js .auf{opacity:0;transform:translateY(30px);transition:opacity 1s,transform 1s cubic-bezier(.2,.7,.2,1)}
.js .auf.da{opacity:1;transform:none}

/* Platzhalter, die vor dem Hochladen gefüllt sein müssen (check.py prüft) */
.offen{color:#c4161c;background:#fff8;outline:1px dashed currentColor;outline-offset:3px;font:500 .5em/1.3 ui-monospace,Consolas,monospace;letter-spacing:0;text-transform:none}

/* Rechtstexte */
.recht-kopf{display:flex;align-items:center;gap:24px;padding:24px var(--gut)}
.recht-kopf .logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.recht-kopf .logo svg{width:22px;height:22px}
.recht-kopf .sprache{margin-left:auto}
.recht{max-width:46rem;margin:0 auto;padding:40px var(--gut) 90px}
.recht h1{margin:0 0 .6em;font-size:clamp(24px,6.6vw,84px);line-height:1.05;overflow-wrap:break-word;hyphens:auto}
.recht h2{margin:1.8em 0 .35em;font-size:22px;line-height:1.25}
.recht address{font-style:normal}
.recht .hinweis{padding:12px 16px;border-left:2px solid var(--akzent)}
.recht .stand{font-size:15px;opacity:.75}
.recht-fuss{display:flex;flex-wrap:wrap;gap:8px 28px;padding:24px var(--gut) 34px;font-size:15px}
.recht-fuss a{text-decoration:none}

@media (max-width:820px){
  .kopf{gap:16px}
  .kopf nav{display:none}
  .sprache{margin-left:auto}
  .spiele{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .auf{transition:none}}