/* Kaya Rock Media – heller Stein, Tinte, ein Akzent. Schrift: Fraunces (Überschriften) + DM Sans (Text), beide lokal. */
@font-face { font-family: "Fraunces"; src: url("schrift/Fraunces.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("schrift/DMSans.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }

:root { --stein: #ece7dd; --papier: #f6f2ea; --tinte: #161616; --leise: #5e594f; --linie: #cdc5b6; --akzent: #f0a400; --dunkel: #151515; --dunkel-leise: #a9a39a; --rand: clamp(18px, 4vw, 40px); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; overflow-x: clip; background: var(--stein); color: var(--tinte); font: 400 17px/1.6 "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
  /* feines Korn wie Papier – ein kleines SVG, kein Bild vom Server */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .17  0 0 0 0 .12  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E"); }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
.dunkel :focus-visible { outline-color: #fff; }

h1, h2 { word-spacing: .06em; font-family: "Fraunces", Georgia, serif; font-weight: 640; font-variation-settings: "opsz" 144; letter-spacing: -.02em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 9.4vw, 104px); margin-bottom: 26px; }
h2 { font-size: clamp(32px, 5.4vw, 60px); margin-bottom: 20px; }
h2.gross { font-size: clamp(42px, 8.6vw, 104px); }
mark { background: linear-gradient(transparent 58%, var(--akzent) 58%, var(--akzent) 92%, transparent 92%); color: inherit; padding: 0 .06em; }
.vorzeile { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.dunkel .vorzeile { color: var(--dunkel-leise); }
.lang { margin: 0 0 28px; max-width: 34em; font-size: clamp(17px, 1.5vw, 20px); color: #2f2c27; }
.dunkel .lang { color: #d9d4cb; }
.klein-text { margin: 22px 0 0; color: var(--leise); font-size: 14px; }

.kopf { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--rand); background: rgba(236, 231, 221, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.marke { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; text-decoration: none; font-weight: 800; letter-spacing: .01em; font-size: 16px; }
.kopf-nav { display: flex; align-items: center; gap: 26px; font-size: 15px; font-weight: 500; }
.kopf-nav a:not(.knopf) { display: none; text-decoration: none; }
.kopf-nav a:not(.knopf):hover { text-decoration: underline; text-underline-offset: 5px; }

.knopf { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 14px 24px; border-radius: 4px; background: var(--tinte); color: #fff; font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.knopf:hover { background: #000; transform: translateY(-2px); }
.knopf span { color: var(--akzent); transition: transform .2s ease; } .knopf:hover span { transform: translateX(4px); }
.knopf.klein { min-height: 42px; padding: 9px 16px; font-size: 14px; }
.textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--akzent); }
.textlink span { transition: transform .2s ease; } .textlink:hover span { transform: translateX(4px); }
.reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

.innen { max-width: 1180px; margin: 0 auto; padding-inline: var(--rand); }
.block { padding-block: clamp(64px, 9vw, 130px); }
.band { padding-block: clamp(64px, 9vw, 130px); }
.dunkel { background: var(--dunkel); color: #f4f1ea; }

/* Auftakt */
.auftakt { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 70px) var(--rand) clamp(40px, 6vw, 80px); display: grid; gap: 20px; }
.auftakt-bild { position: relative; aspect-ratio: 1 / .62; order: -1; margin: 0 -8px; }
#buehne3d { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.hat3d #buehne3d { display: block; }
.logo-ersatz { position: absolute; top: 50%; left: 50%; width: min(58%, 300px); height: auto; transform: translate(-50%, -50%) rotate(-4deg); filter: drop-shadow(0 26px 22px rgba(40, 30, 10, .25)); }
.hat3d .logo-ersatz { display: none; }
.auftakt-bild::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 6%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 30, 10, .28), transparent); filter: blur(6px); }
.fakten { margin: 26px 0 0; display: grid; gap: 0; border-top: 1px solid var(--tinte); }
.fakten div { padding: 16px 0; border-bottom: 1px solid var(--linie); display: grid; grid-template-columns: 9.5em 1fr; gap: 14px; align-items: baseline; }
.fakten dt { font-family: "Fraunces", Georgia, serif; font-weight: 640; font-size: 22px; letter-spacing: -.01em; }
.fakten dd { margin: 0; color: var(--leise); font-size: 15px; }

/* Film */
.film-teil { display: grid; gap: 40px; align-items: center; }
.punkte { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid #3a3731; }
.punkte li { padding: 16px 0; border-bottom: 1px solid #3a3731; color: #cfc9bf; font-size: 17px; }
.punkte b { display: block; color: #fff; font-weight: 700; font-size: 18px; }
.handy { position: relative; width: min(100%, 330px); margin: 0 auto; padding: 8px; border-radius: 14px; background: #050505; border: 1px solid #444039; box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .9); }
.handy video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 8px; background: #000; object-fit: cover; }
.ton { position: absolute; right: 20px; top: 20px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 4px; background: var(--akzent); color: var(--tinte); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }

/* Stile */
.stil-teil { display: grid; gap: 34px; align-items: center; }
.wahl { display: flex; flex-wrap: wrap; gap: 4px 22px; border-top: 1px solid var(--linie); padding-top: 8px; }
.wahl button { min-height: 46px; padding: 8px 0; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--leise); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.wahl button:hover { color: var(--tinte); }
.wahl button[aria-pressed="true"] { color: var(--tinte); border-bottom-color: var(--akzent); }
.vergleich { --p: 50%; position: relative; width: min(100%, 420px); margin: 0 auto; aspect-ratio: 540 / 968; overflow: hidden; border-radius: 6px; background: #000; touch-action: pan-y; box-shadow: 0 40px 50px -34px rgba(40, 30, 10, .55); }
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich .oben { clip-path: inset(0 0 0 var(--p)); }
.vergleich .griff { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.vergleich .griff::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; color: var(--tinte); font-weight: 700; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.vergleich input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.schild { position: absolute; bottom: 12px; padding: 5px 10px; border-radius: 3px; background: rgba(12, 12, 12, .78); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.schild.l { left: 12px; } .schild.r { right: 12px; background: var(--akzent); color: var(--tinte); }

/* Beispiele */
.filme { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 12px; }
.filme button { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #000; cursor: pointer; text-align: left; color: #fff; font: inherit; }
.filme img, .filme video { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .5s ease; }
.filme video { position: absolute; inset: 0; height: 100%; }
.filme button:hover img { transform: scale(1.04); }
.filme .titel { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 12px 11px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.filme .titel small { font-weight: 500; opacity: .8; }

/* Ablauf */
.schritte { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: s; border-top: 1px solid var(--tinte); }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 2.6em 1fr; gap: 4px 14px; padding: 22px 0; border-bottom: 1px solid var(--linie); }
.schritte li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font-family: "Fraunces", Georgia, serif; font-weight: 640; font-size: 30px; line-height: 1; color: var(--tinte); font-variant-numeric: tabular-nums; }
.schritte b { font-size: 20px; font-weight: 700; }
.schritte span { color: var(--leise); }

/* Kontakt */
.telefon { display: inline-block; margin: 6px 0 22px; font-family: "Fraunces", Georgia, serif; font-weight: 640; font-size: clamp(34px, 7vw, 72px); letter-spacing: -.02em; text-decoration: none; border-bottom: 4px solid var(--akzent); line-height: 1.1; }
.wege { display: flex; flex-wrap: wrap; gap: 6px 34px; }
.fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 22px var(--rand) 34px; background: var(--dunkel); color: var(--dunkel-leise); font-size: 14px; border-top: 1px solid #2c2a26; }
.fuss nav { display: flex; gap: 20px; }

/* Rechtstexte */
.recht { max-width: 760px; margin: 0 auto; padding: 40px var(--rand) 70px; }
.recht h1 { font-size: clamp(36px, 7vw, 60px); margin-bottom: 24px; }
.recht h2 { font-size: 24px; margin: 34px 0 8px; }
.recht p, .recht li { color: #2f2c27; }
.hinweis { padding: 12px 14px; border: 1px dashed var(--tinte); border-radius: 4px; background: var(--papier); font-size: 14px; }

/* Einblenden */
.js .zeig { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .zeig.da { opacity: 1; transform: none; }

@media (min-width: 640px) { .filme { grid-template-columns: repeat(4, 1fr); } .fakten { grid-template-columns: repeat(3, 1fr); column-gap: 30px; } .fakten div { grid-template-columns: 1fr; gap: 2px; border-bottom: 0; } }
@media (min-width: 900px) {
  .kopf-nav a:not(.knopf) { display: inline; }
  .auftakt { grid-template-columns: 1.15fr .85fr; align-items: center; column-gap: 30px; }
  .auftakt-bild { order: 0; aspect-ratio: 1 / 1; margin: 0; }
  .fakten { grid-column: 1 / -1; margin-top: 40px; }
  .film-teil { grid-template-columns: 1fr 330px; gap: 80px; }
  .stil-teil { grid-template-columns: 1fr 420px; gap: 80px; }
  .vergleich { margin: 0; }
  .filme { grid-template-columns: repeat(7, 1fr); }
  .schritte { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; }
}
@media (max-width: 359px) { .kopf .knopf.klein { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .zeig { opacity: 1; transform: none; transition: none; } .knopf, .knopf span, .textlink span, .filme img { transition: none; } }

/* ---------- nach der Prüfung (Design, Technik, Text) ---------- */
.dunkel mark { color: var(--tinte); }
/* Zeitmarken wie in einem Schnittplan */
.tc { display: inline-block; margin-right: 12px; padding-right: 12px; border-right: 1px solid currentColor; font-family: "Fraunces", Georgia, serif; font-weight: 640; font-size: 14px; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #8a5a00; }
.dunkel .tc { color: var(--akzent); }
/* Filmperforation aus dem Logo als Trennlinie */
.band::before, .fakten::before { content: ""; display: block; height: 10px; background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 26px); opacity: .16; }
.band::before { max-width: 1180px; margin: calc(-1 * clamp(64px, 9vw, 130px) + 22px) auto clamp(42px, 6vw, 96px); padding-inline: var(--rand); background-clip: content-box; }
.fakten { border-top: 0; } .fakten::before { grid-column: 1 / -1; margin-bottom: 4px; opacity: .55; }
.laufzeit { position: absolute; left: -64px; bottom: 18px; font-family: "Fraunces", Georgia, serif; font-weight: 640; font-size: 22px; color: var(--akzent); font-variant-numeric: tabular-nums; writing-mode: vertical-rl; transform: rotate(180deg); }
.zwischenruf { margin: 34px 0 0; font-size: 19px; font-weight: 700; } .zwischenruf a { text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.faq { border-top: 1px solid var(--tinte); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: "Fraunces", Georgia, serif; font-size: 26px; line-height: 1; color: #8a5a00; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 22px; max-width: 40em; color: #2f2c27; }
.vergleich:has(input:focus-visible) .griff::after { outline: 3px solid var(--akzent); outline-offset: 3px; }
.anruf-leiste { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; display: flex; justify-content: center; align-items: center; min-height: 54px; border-radius: 4px; background: var(--tinte); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.anruf-leiste::before { content: ""; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--akzent); }
body { padding-bottom: 76px; }
/* ohne JavaScript: nichts, was nur mit Skript funktioniert */
html:not(.js) .ton, html:not(.js) #beispiele { display: none; }
/* Notfall: falls das Skript nicht lädt, nach 3 s trotzdem alles zeigen */
.js .zeig { animation: notfall 0s 3s forwards; } @keyframes notfall { to { opacity: 1; transform: none; } }
@media (max-width: 639px) {
  .filme { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(-1 * var(--rand)); padding: 0 var(--rand) 6px; scrollbar-width: none; }
  .filme button { flex: 0 0 44%; scroll-snap-align: start; }
  .wahl { flex-wrap: nowrap; overflow-x: auto; gap: 0 18px; scrollbar-width: none; }
  .wahl button { flex: 0 0 auto; }
  .laufzeit { display: none; }
}
@media (min-width: 640px) and (max-width: 899px) { .auftakt-bild { aspect-ratio: 16 / 9; max-height: 42vh; } }
@media (min-width: 900px) {
  .anruf-leiste { display: none; } body { padding-bottom: 0; }
  .faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .js .zeig { animation: none; } .faq summary::after { transition: none; } }
.stil-teil > *, .film-teil > * { min-width: 0; }
.dunkel mark { background: var(--akzent); padding: 0 .14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.person { margin: 40px 0 0; max-width: 300px; }
.person img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.person figcaption { margin-top: 10px; font-size: 14px; color: var(--dunkel-leise); }
@media (min-width: 900px) {
  .anfrage .innen { display: grid; grid-template-columns: 1fr 320px; column-gap: 70px; align-items: end; }
  .anfrage .innen > :not(.person) { grid-column: 1; }
  .person { grid-column: 2; grid-row: 1 / span 5; margin: 0; max-width: none; align-self: end; }
}
.anfrage .innen > .telefon { justify-self: start; }

/* ---------- Spiele-Bereich (/spiele) – gleiche Sprache wie die Film-Seite, das Spiel bringt die Farbe ---------- */
.spiel-seite { padding-bottom: 0; }
.spiel-nav { gap: 18px; }
.spiel-nav a:not(.knopf) { display: inline; text-decoration: none; }
.spiel-nav a:not(.knopf):hover { text-decoration: underline; text-underline-offset: 5px; }
.spiel-nav .sprache { padding-left: 18px; border-left: 1px solid var(--linie); color: var(--leise); }
@media (max-width: 420px) { .spiel-nav .optional { display: none !important; } }

.spiel-auftakt { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 70px) var(--rand) clamp(48px, 7vw, 96px); display: grid; gap: 34px; align-items: center; }
.spiel-titel { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 22px; text-decoration: none; }
.spiel-titel img { width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 10px 20px -12px rgba(40, 30, 10, .6); }
.spiel-titel b { font-family: "Fraunces", Georgia, serif; font-weight: 640; font-size: 26px; letter-spacing: -.01em; }
.spiel-titel small { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.spiel-auftakt h1 { font-size: clamp(40px, 7.4vw, 84px); }

.plattformen { margin: 30px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--tinte); }
.plattform { display: block; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.plattform + .plattform { padding-left: 14px; border-left: 1px solid var(--linie); }
.plattform small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a5a00; }
.plattform b { display: block; font-size: 16px; line-height: 1.3; }
a.plattform b::after { content: " →"; color: #8a5a00; }
.plattform-hinweis { margin: 14px 0 0; font-size: 14px; color: var(--leise); }
.plattform-hinweis a { text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.spiel-buehne { position: relative; }
.spiel-buehne .handy { width: min(100%, 320px); }
.spiel-buehne .handy img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; }

.screens { margin: 34px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.screens figure { margin: 0; }
.screens img { width: 100%; height: auto; aspect-ratio: 600 / 1300; object-fit: cover; object-position: top; border-radius: 10px; border: 6px solid #0d0d0d; background: #0d0d0d; box-shadow: 0 30px 40px -30px rgba(40, 30, 10, .6); }
.screens figcaption { margin-top: 12px; font-size: 15px; color: var(--leise); }
.screens figcaption b { display: block; color: var(--tinte); font-size: 17px; }

.welten { margin: 30px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #3a3731; }
.welten div { padding: 18px 16px 18px 0; border-bottom: 1px solid #3a3731; }
.welten dt { font-family: "Fraunces", Georgia, serif; font-weight: 640; font-size: 24px; color: #fff; }
.welten dd { margin: 4px 0 0; color: #cfc9bf; font-size: 15px; }
.welt-bild { margin: 0; }
.welt-bild img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .9); }
.welt-bild figcaption { margin-top: 10px; font-size: 14px; color: var(--dunkel-leise); }

.hilfe { display: grid; gap: 30px; }
.hilfe .mail { display: inline-block; margin: 4px 0 18px; font-family: "Fraunces", Georgia, serif; font-weight: 640; font-size: clamp(24px, 4.4vw, 40px); letter-spacing: -.01em; text-decoration: none; border-bottom: 3px solid var(--akzent); overflow-wrap: anywhere; }
.hilfe ul { margin: 0; padding-left: 1.1em; color: #2f2c27; }
.hilfe li { margin: 6px 0; }
.ki-hinweis { margin: 30px 0 0; max-width: 46em; font-size: 14px; color: var(--leise); }

/* Studio-Teaser auf der Startseite */
.studio-teil { display: grid; gap: 30px; align-items: center; }
.studio-karte { position: relative; display: block; max-width: 420px; text-decoration: none; color: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 40px 50px -34px rgba(40, 30, 10, .55); }
.studio-karte img { width: 100%; height: auto; aspect-ratio: 9 / 12; object-fit: cover; object-position: top; transition: transform .6s ease; }
.studio-karte:hover img { transform: scale(1.03); }
.studio-karte .titel { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 16px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .82)); display: flex; justify-content: space-between; align-items: end; gap: 10px; font-weight: 700; }
.studio-karte .titel small { font-weight: 500; opacity: .85; font-size: 13px; }

/* Spiele-Übersicht */
.spiele-liste { margin: 34px 0 0; display: grid; gap: 22px; }
.spiel-karte { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--tinte); text-decoration: none; }
.spiel-karte img { width: 96px; height: 96px; border-radius: 20px; }
.spiel-karte h2 { font-size: clamp(26px, 3.6vw, 36px); margin: 0 0 6px; }
.spiel-karte p { margin: 0; color: var(--leise); }
.spiel-karte .status { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a5a00; }
.spiel-karte.leer { opacity: .7; border-top-color: var(--linie); }
.spiel-karte.leer .platzhalter { width: 96px; height: 96px; border-radius: 20px; border: 1px dashed var(--leise); display: grid; place-items: center; font-family: "Fraunces", Georgia, serif; font-size: 34px; color: var(--leise); }

/* Rechtstexte der Spiele (aus legal/*.md erzeugt) */
.recht h3 { font-size: 18px; margin: 24px 0 6px; font-family: "DM Sans", system-ui, sans-serif; font-weight: 700; }
.recht a { text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.recht aside.note { margin: 0 0 26px; padding: 12px 14px; border: 1px dashed var(--tinte); border-radius: 4px; background: var(--papier); font-size: 14px; }
.recht code { padding: 0 .25em; border-radius: 3px; background: var(--papier); font-size: .92em; }
.recht ul, .recht ol { padding-left: 1.2em; }
.recht hr { border: 0; border-top: 1px solid var(--linie); margin: 40px 0; }

@media (min-width: 640px) {
  .screens { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .welten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .spiel-auftakt { grid-template-columns: 1.1fr .9fr; column-gap: 60px; }
  .spiel-buehne .handy { margin: 0 0 0 auto; }
  .welt-teil { display: grid; grid-template-columns: 1fr 380px; gap: 70px; align-items: center; }
  .hilfe { grid-template-columns: 1fr 1fr; column-gap: 60px; align-items: start; }
  .studio-teil { grid-template-columns: 1fr 420px; gap: 80px; }
}
@media (max-width: 520px) { .plattformen { grid-template-columns: 1fr; } .plattform + .plattform { padding-left: 0; border-left: 0; } }
/* sehr schmale Handys: im Spiele-Bereich nur das Logo, damit Navigation und Name sich nicht überlagern */
@media (max-width: 380px) { .spiel-seite .marke { font-size: 0; gap: 0; } }
.dunkel .hilfe ul { color: #d9d4cb; }