/* roy.ch – Design «Glass Camp»
   Campingplatz-Szene im Hintergrund, türkiser Filter, Inhalte als Milchglas.
   Farben/Filterstärke kommen zusätzlich aus /theme.css (Dashboard → Einstellungen). */

@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --ink: #0E3B43; --teal: #0B7A70; --turq: #7FD8CB; --turq-soft: #E3F6F2; --sun: #FFC93C; --coral: #FF8A65; --sky: #9ED9F0; --bg: #FFF7E8;
  --overlay: .45; --muted: #4A6468; --line-soft: rgba(14,59,67,.12);
  --glass: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.58) 60%, rgba(255,255,255,.72));
  --glass-border: 1.5px solid rgba(255,255,255,.95);
  --glass-shadow: 0 28px 56px rgba(14,59,67,.13), 0 8px 18px rgba(14,59,67,.08), inset 0 1.5px 0 #fff;
  --blur: blur(28px) saturate(175%);
  --soft: rgba(255,255,255,.62);
  --soft-border: 1px solid rgba(14,59,67,.10);
  --paper: rgba(255,255,255,.95);
  --r: 28px; --r-lg: 34px;
  --f: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --c: var(--turq); --cf: var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; color: var(--ink); background: #F4FAFB; font: 400 17px/1.6 var(--f); overflow-x: clip; min-height: 100vh; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--teal); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 600; }
p { margin: 0 0 1em; }
b, strong { font-weight: 600; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--sun); color: var(--ink); padding: 10px 16px; border-radius: 999px; z-index: 60; font-weight: 600; }
.skip:focus { left: 16px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; position: relative; }
.wrap--narrow { max-width: 900px; }
.center { text-align: center; }
.muted { color: var(--muted); font-weight: 400; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.ico { flex: none; vertical-align: middle; }

/* ---------- Hintergrundszene + Wetter ---------- */
.scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #DDF1F6; }
.scene__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene__photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.scene__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,calc(var(--overlay) * .55)) 0%, rgba(250,253,253,calc(var(--overlay) + .2)) 55%, rgba(244,250,251,.94) 100%); }
.wx { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s; pointer-events: none; }
.wx-sun .wx--sun, .wx-clouds .wx--clouds, .wx-rain .wx--clouds, .wx-rain .wx--rain, .wx-snow .wx--clouds, .wx-snow .wx--snow, .wx-night .wx--night, .wx-storm .wx--clouds, .wx-storm .wx--rain, .wx-storm .wx--storm { opacity: 1; }
.wx-rain .wx--clouds, .wx-snow .wx--clouds { opacity: .75; }
.wx--sun { background: radial-gradient(560px 440px at 72% 30%, rgba(255,226,140,.55), transparent 70%); }
.wx--clouds::before, .wx--clouds::after { content: ""; position: absolute; border-radius: 50%; filter: blur(30px); background: rgba(255,255,255,.8); animation: drift 60s linear infinite alternate; }
.wx--clouds::before { left: 4%; top: 9%; width: 42vw; height: 16vh; }
.wx--clouds::after { left: 46%; top: 4%; width: 50vw; height: 19vh; background: rgba(236,246,246,.75); animation-duration: 80s; }
@keyframes drift { to { transform: translateX(6vw); } }
.wx--rain { background: repeating-linear-gradient(106deg, transparent 0 11px, rgba(70,120,140,.32) 11px 12px, transparent 12px 23px), repeating-linear-gradient(100deg, transparent 0 17px, rgba(70,120,140,.2) 17px 18px, transparent 18px 37px); background-size: 100% 200%; animation: rain .8s linear infinite; }
@keyframes rain { from { background-position: 0 0, 0 0; } to { background-position: -40px 120px, -30px 160px; } }
.wx--snow { background: radial-gradient(circle at 10px 12px, rgba(150,195,210,.95) 2.5px, transparent 3.5px) 0 0 / 56px 56px, radial-gradient(circle at 30px 40px, rgba(170,205,218,.9) 1.8px, transparent 2.8px) 0 0 / 74px 74px, radial-gradient(circle at 50px 20px, rgba(190,218,228,.9) 3px, transparent 4px) 0 0 / 110px 110px; animation: snow 14s linear infinite; }
@keyframes snow { to { background-position: 30px 560px, -20px 740px, 40px 1100px; } }
.wx--night { background: radial-gradient(circle at 12% 14%, #fff 1.5px, transparent 2.5px), radial-gradient(circle at 26% 30%, #fff 1px, transparent 2px), radial-gradient(circle at 44% 10%, #fff 1.5px, transparent 2.5px), radial-gradient(circle at 60% 22%, #fff 1px, transparent 2px), radial-gradient(circle at 82% 12%, #fff 1.5px, transparent 2.5px), radial-gradient(circle at 92% 30%, #fff 1px, transparent 2px), radial-gradient(70px 70px at 76% 18%, #FFF4D6 45%, rgba(255,244,214,.25) 60%, transparent 72%), linear-gradient(180deg, rgba(40,70,110,.55), rgba(40,70,110,.25) 70%); }
.wx--storm { background: linear-gradient(180deg, rgba(60,80,100,.35), transparent 60%); animation: flash 7s infinite; }
@keyframes flash { 0%, 92%, 96%, 100% { background-color: transparent; } 93%, 95% { background-color: rgba(255,255,255,.18); } }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); }
.blob--1 { left: -8vw; top: 70vh; width: 40vw; height: 40vw; background: rgba(127,216,203,.28); }
.blob--2 { right: -6vw; top: 40vh; width: 34vw; height: 34vw; background: rgba(240,214,170,.35); }

/* ---------- Glas-Bausteine ---------- */
.glass, .box, .card, .rcard, .album, .world, .stat, .hits li, .notice, .empty, .tablebox, .chartbox, .form, .searchbox {
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: var(--glass-border); box-shadow: var(--glass-shadow); border-radius: var(--r); color: var(--ink);
}
.soft { background: var(--soft); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: var(--soft-border); color: var(--ink); }
.box--shadow { box-shadow: var(--glass-shadow), 0 40px 80px rgba(4,35,40,.2); }
.paper { background: var(--paper); color: var(--ink); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1.5px solid rgba(255,255,255,.8); border-radius: var(--r); box-shadow: var(--glass-shadow); }
.paper a { color: var(--teal); }
.bg-sun { background: linear-gradient(135deg, rgba(255,201,60,.55), rgba(255,201,60,.22)); }
.bg-turq { background: linear-gradient(135deg, rgba(127,216,203,.55), rgba(127,216,203,.18)); }
.bg-coral { background: linear-gradient(135deg, rgba(255,138,101,.55), rgba(255,138,101,.2)); }
.bg-white, .bg-turq-soft { background: var(--glass); }
.bg-c { background: var(--glass); }
.hero__main .lead, .lead { color: #2C5157; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row--center { justify-content: center; }

/* Typo */
.display { font-weight: 300; font-size: clamp(44px, 7.6vw, 108px); line-height: .95; letter-spacing: -.045em; text-shadow: 0 4px 30px rgba(255,255,255,.7); }
.display b, .display strong { font-weight: 600; }
.display--md { font-size: clamp(38px, 5.6vw, 76px); }
.h2 { font-weight: 300; font-size: clamp(32px, 4vw, 54px); letter-spacing: -.045em; }
.h2 b { font-weight: 600; }
.h3 { font-weight: 600; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -.03em; }
.h4 { font-weight: 600; font-size: 18px; }
.lead { font-size: 20px; line-height: 1.65; font-weight: 300; max-width: 600px; margin: 0; }
.lead--dark { color: inherit; }
.kicker { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.meta { display: flex; align-items: center; gap: 8px; font-weight: 400; opacity: .9; margin: 6px 0 0; }
.link-u { font-weight: 600; border-bottom: 2px solid var(--turq); padding-bottom: 2px; }

/* Buttons, Chips */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; border: var(--soft-border); background: var(--soft); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--ink); font: 500 16px var(--f); cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:hover { color: var(--ink); transform: translateY(-2px); background: #fff; box-shadow: 0 10px 22px rgba(14,59,67,.12); }
.btn--sun, .btn--ink { background: var(--sun); color: var(--ink); border-color: transparent; font-weight: 600; box-shadow: 0 14px 30px rgba(255,201,60,.35); }
.btn--sun:hover, .btn--ink:hover { color: var(--ink); background: #FFD45F; }
.btn--white, .btn--ghost-light { background: var(--soft); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 5px 11px; background: var(--soft); border: var(--soft-border); color: var(--ink); }
.pill--white { background: #fff; }
.pill--sm { font-size: 11px; padding: 3px 9px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--soft); border: var(--soft-border); font: 500 14px var(--f); color: var(--ink); cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.chip b { font-size: 12px; font-weight: 600; background: rgba(14,59,67,.08); border-radius: 10px; padding: 1px 7px; }
.chip:hover { color: var(--ink); background: #fff; }
.chip.is-on, .chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.chip.is-on b, .chip[aria-pressed="true"] b { background: var(--sun); color: var(--ink); }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.sticker { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 500; background: var(--soft); border: var(--soft-border); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--ink); }
.sticker--sun { background: rgba(255,201,60,.9); color: var(--ink); border-color: transparent; }
.sticker--coral { background: rgba(255,138,101,.9); color: var(--ink); border-color: transparent; }
.tilt-l, .tilt-r, .tilt-n { transform: none; }
.input { width: 100%; min-height: 56px; padding: 0 24px; font: 500 16px var(--f); color: var(--ink); background: rgba(255,255,255,.8); border: 1px solid rgba(14,59,67,.16); border-radius: 999px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.input::placeholder { color: rgba(14,59,67,.5); }
textarea.input { border-radius: 22px; padding: 14px 20px; min-height: 160px; resize: vertical; line-height: 1.5; }
.row .input { flex: 1 1 260px; width: auto; }
.input--lg { min-height: 60px; font-size: 17px; }
.ph { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; min-height: 150px; padding: 16px; color: var(--cf); }
.ph--sm { min-height: 0; }
.empty { padding: 40px; text-align: center; font-weight: 400; }
.notice { padding: 20px 24px; margin-bottom: 20px; }
.notice p:last-child { margin: 0; }

/* ---------- Kopf & Fuss ---------- */
.top { padding-top: 22px; position: relative; z-index: 30; }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 28px !important; border-radius: 999px; max-width: 1216px; }
.top__bar { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.logo { font-weight: 600; font-size: 24px; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 3px rgba(255,201,60,.25); }
.logo--light { color: var(--ink); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.nav__a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px; border-radius: 999px; font-weight: 500; font-size: 15px; }
.nav__a .dot { display: none; }
.nav__a:hover { color: var(--ink); background: rgba(14,59,67,.06); }
.nav__a.is-on { background: var(--turq-soft); color: var(--teal); font-weight: 600; }
.nav__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--soft); border: var(--soft-border); margin-left: 4px; color: var(--ink); }
.nav .btn { margin-left: 6px; min-height: 44px; }
.menu-btn { display: none; width: 48px; height: 48px; border-radius: 50%; border: var(--soft-border); background: var(--soft); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.foot { margin-top: 96px; background: rgba(255,255,255,.7); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid rgba(14,59,67,.08); }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-top: 48px; padding-bottom: 20px; }
.foot__about { max-width: 420px; } .foot__about p { margin-top: 10px; font-weight: 300; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 24px; font-weight: 500; align-items: flex-start; }
.foot__nav .hl-sun { color: var(--teal); } .foot__nav .hl-coral { color: #C9573A; }
.foot__copy { padding-bottom: 32px; font-size: 14px; color: var(--muted); }

/* ---------- Startseite ---------- */
.hero { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 80px; padding-bottom: 64px; }
.hero__main { flex: 999 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.hero__stack { flex: 1 1 400px; min-width: 0; height: 450px; position: relative; perspective: 1400px; }
.stackcard { position: absolute; width: 300px; border-radius: 28px; padding: 12px; display: flex; flex-direction: column; gap: 12px; transform: rotateY(-14deg) rotateX(8deg) rotateZ(var(--rz, 0deg)); transition: transform .35s; }
.stackcard:hover { transform: rotateY(-4deg) rotateX(2deg) translateY(-10px); color: var(--ink); z-index: 5; }
.stackcard--1 { left: 150px; top: 0; --rz: 6deg; z-index: 1; }
.stackcard--2 { left: 0; top: 120px; --rz: -5deg; z-index: 2; }
.stackcard--3 { left: 90px; top: 215px; --rz: 1deg; z-index: 3; }
.stackcard__img { height: 150px; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--c), #fff); display: flex; align-items: flex-start; padding: 12px; position: relative; }
.stackcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stackcard__img .pill { position: relative; z-index: 1; }
.stackcard__body { padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.stackcard__title { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.weather { align-self: flex-start; border-radius: 26px; padding: 14px 22px 14px 14px; display: flex; align-items: center; gap: 16px; }
.weather__ico { width: 64px; height: 64px; border-radius: 20px; background: var(--sun); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(4,35,40,.3), inset 0 1px 0 rgba(255,255,255,.7); }
.weather__temp { font-weight: 300; font-size: 40px; letter-spacing: -.05em; line-height: 1; }
.weather__label { font-weight: 500; font-size: 17px; }
.weather small { font-weight: 300; font-size: 14px; display: block; }
.section { padding-top: 72px; display: flex; flex-direction: column; gap: 28px; }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.section__head--tight { align-items: baseline; }
.section__head .muted { font-size: 17px; }
.grid { display: grid; gap: 22px; }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.grid--worlds { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); perspective: 1600px; }
.grid--recipes { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid--albums { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.world { padding: 24px; display: flex; flex-direction: column; gap: 14px; transform: rotateX(5deg); transform-origin: 50% 100%; transition: transform .3s, background .3s; }
.world:hover { transform: rotateX(0) translateY(-6px); color: var(--ink); background: rgba(255,255,255,.95); }
.world__top { display: flex; justify-content: space-between; align-items: center; }
.world__ico, .iconbox { width: 58px; height: 58px; border-radius: 19px; background: var(--c); color: var(--cf); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 24px rgba(4,35,40,.3), inset 0 1px 0 rgba(255,255,255,.6); flex: none; }
.world__name { font-weight: 600; font-size: 27px; letter-spacing: -.03em; }
.world__desc { font-weight: 300; line-height: 1.5; }
.world__new { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.world__new span span { font-weight: 400; color: var(--muted); }
.teaser { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.teaser__big { font-weight: 600; font-size: 28px; letter-spacing: -.03em; line-height: 1.15; }
.teaser__num { font-weight: 300; font-size: 64px; letter-spacing: -.05em; line-height: 1; }
.teaser .row { margin-top: auto; }
.play { display: flex; flex-wrap: wrap; gap: 22px; }
.play__cw { flex: 999 1 520px; min-width: 0; padding: 30px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; border-radius: var(--r-lg); }
.play__side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.play__small { padding: 22px; display: flex; align-items: center; gap: 18px; }
.play__badge { font-weight: 600; font-size: 24px; letter-spacing: 5px; border-radius: 16px; padding: 12px 14px; white-space: nowrap; }
.minigrid { display: grid; gap: 4px; transform: perspective(800px) rotateY(-12deg) rotateX(6deg); }
.minigrid span { width: 16px; height: 16px; border-radius: 4px; background: rgba(14,59,67,.05); }
.stack-v { display: flex; flex-direction: column; gap: 8px; flex: 1 1 240px; min-width: 0; }
.minigrid span.o { background: #fff; box-shadow: 0 3px 6px rgba(14,59,67,.18), inset 0 0 0 1px rgba(14,59,67,.12); }
.avatars { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #7CF2B0; box-shadow: 0 0 10px #7CF2B0; }

/* Karten (Beiträge) */
.card { display: flex; flex-direction: column; overflow: hidden; padding: 10px; transition: transform .25s; }
.card:hover { transform: translateY(-6px); color: var(--ink); }
.card__img { height: 180px; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--c), #fff); position: relative; display: flex; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__badge { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.88); color: var(--ink); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; }
.card__body { padding: 14px 10px 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.card__title { font-weight: 600; font-size: 20px; letter-spacing: -.02em; line-height: 1.22; }
.card__sub { font-weight: 400; font-size: 15px; color: var(--muted); }

/* Bereichsköpfe */
.pagehead { padding-top: 64px; }
.pagehead__box { padding: 44px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; position: relative; }
.pagehead__ico { width: 64px; height: 64px; border-radius: 20px; background: var(--c); color: var(--cf); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 24px rgba(4,35,40,.3); }
.pagehead__count { position: absolute; top: 28px; right: 28px; }
.crumb { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; background: var(--soft); border: var(--soft-border); border-radius: 999px; padding: 7px 14px; color: var(--ink); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 28px; }
.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.crumbs { font-weight: 400; color: var(--muted); padding-top: 48px; }
.crumbs a:hover { text-decoration: underline; }

/* Lesetexte: helles Milchglas für gute Lesbarkeit */
.article { display: flex; flex-direction: column; gap: 28px; }
.article__head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.article__cover { margin: 0; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--glass-shadow); }
.article__cover img { width: 100%; }
.prose { font-size: 18px; line-height: 1.75; background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: 40px 44px; box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1.5px solid rgba(255,255,255,.8); }
.prose:empty { display: none; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: 30px; font-weight: 600; letter-spacing: -.03em; margin: 1.3em 0 .5em; }
.prose h3 { font-size: 23px; font-weight: 600; margin: 1.2em 0 .4em; }
.prose a { color: var(--teal); font-weight: 600; }
.prose img { border-radius: 18px; margin: 1em 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose blockquote { margin: 1.5em 0; padding: 18px 24px; background: var(--turq-soft); border-radius: 18px; font-weight: 500; }
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prose td, .prose th { border-bottom: 1px solid #CFE5E2; padding: 8px 10px; text-align: left; }
.prose--box { padding: 36px; }

/* Galerie + Lightbox */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gallery__item { display: block; aspect-ratio: 1; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 30px rgba(14,59,67,.15); border: 3px solid #fff; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery__item:hover img { transform: scale(1.06); }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(6,40,46,.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox__fig { margin: 0; max-width: min(1400px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lightbox__fig img { max-height: calc(100vh - 120px); width: auto; border-radius: 16px; }
.lightbox__fig figcaption { font-weight: 500; text-align: center; }
.lightbox { color: #fff; }
.lightbox button { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.18); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox__close { top: 18px; right: 18px; } .lightbox__prev { left: 18px; top: 50%; } .lightbox__next { right: 18px; top: 50%; }

/* ---------- Kochbuch ---------- */
.cookhead { padding: 44px; position: relative; }
.cookhead__form { display: flex; flex-direction: column; gap: 12px; max-width: 780px; }
.cook__label { font-weight: 300; font-size: 17px; }
.chip--fav svg { fill: none; }
.chip--fav[aria-pressed="true"] svg { fill: currentColor; }
.rcard { display: flex; flex-direction: column; padding: 10px; transition: transform .25s; }
.rcard:hover { transform: translateY(-5px); }
.rcard[hidden] { display: none; }
.rcard__link { display: flex; flex-direction: column; }
.rcard__link:hover { color: var(--ink); }
.rcard__img { height: 140px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, var(--c), #fff); color: var(--cf); display: flex; align-items: center; justify-content: center; }
.rcard__img img { width: 100%; height: 100%; object-fit: cover; }
.rcard__title { padding: 12px 8px 4px; font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; }
.rcard--simple .rcard__title { padding-bottom: 12px; }
.rcard__foot { padding: 6px 8px 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; }
.rcard__time { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.fav { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: var(--soft-border); background: var(--soft); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fav[aria-pressed="true"], .fav-big[aria-pressed="true"] { background: var(--coral); color: var(--ink); }
.fav[aria-pressed="true"] svg, .fav-big[aria-pressed="true"] svg { fill: currentColor; }
.recipe { display: flex; flex-direction: column; gap: 28px; padding-top: 56px; }
.recipe .btn--sm { align-self: flex-start; }
.recipe__top { display: flex; flex-wrap: wrap; gap: 32px; align-items: stretch; }
.recipe__img { flex: 1 1 380px; min-height: 320px; overflow: hidden; background: linear-gradient(135deg, var(--c), #fff); display: flex; padding: 0; }
.recipe__img img { width: 100%; height: 100%; object-fit: cover; }
.recipe__info { flex: 999 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.stepper { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px; background: var(--sun); color: var(--ink); }
.stepper__b { width: 44px; height: 44px; border-radius: 50%; border: none; background: #fff; font: 600 22px var(--f); color: var(--ink); cursor: pointer; }
.stepper__v { min-width: 120px; text-align: center; font-weight: 600; }
.tag { display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 20px; border-radius: 999px; font: 500 15px var(--f); background: var(--soft); border: var(--soft-border); color: var(--ink); }
.tag--btn { cursor: pointer; }
.recipe__cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.ings { flex: 1 1 340px; min-width: 0; padding: 28px; display: flex; flex-direction: column; gap: 8px; background: var(--paper) !important; color: var(--ink) !important; }
.ings .muted { opacity: .7; }
.ings__grp { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding-top: 8px; }
.ing { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border-radius: 16px; border: 1px solid #DCEDEA; background: #fff; text-align: left; font: 400 16px var(--f); color: var(--ink); cursor: pointer; }
.ing__box { width: 24px; height: 24px; flex: none; border-radius: 8px; border: 1.5px solid var(--teal); display: flex; align-items: center; justify-content: center; color: transparent; }
.ing__amt { min-width: 84px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ing[aria-pressed="true"] { background: #EEF8F6; }
.ing[aria-pressed="true"] .ing__box { background: var(--teal); color: #fff; }
.ing[aria-pressed="true"] .ing__name { text-decoration: line-through; opacity: .6; }
.steps { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; gap: 16px; align-items: flex-start; border-radius: 24px; padding: 18px 20px; background: var(--paper); color: var(--ink); box-shadow: var(--glass-shadow); border: 1.5px solid #fff; }
.step p { margin: 0; padding-top: 8px; font-size: 17px; line-height: 1.6; }
.step__n { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; background: var(--turq); color: var(--ink); }
.s1 { background: var(--teal); color: #fff; } .s2 { background: var(--sun); } .s3 { background: var(--coral); } .s4 { background: var(--sky); } .s5 { background: #FFB4A2; }
.tips { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.tips p { margin: 0; font-weight: 400; }

/* ---------- Alben ---------- */
.album { display: flex; flex-direction: column; padding: 10px; transition: transform .25s; }
.album:hover { transform: translateY(-6px); color: var(--ink); }
.album__img { aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--sky), #fff); display: flex; align-items: center; justify-content: center; }
.album__img img { width: 100%; height: 100%; object-fit: cover; }
.album__body { padding: 14px 8px 6px; display: flex; flex-direction: column; gap: 2px; }
.album__title { font-weight: 600; font-size: 19px; }

/* ---------- Konzerte ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; padding-top: 28px; }
.stat { padding: 24px; display: flex; flex-direction: column; gap: 4px; font-weight: 400; }
.stat__n { font-weight: 300; font-size: 48px; letter-spacing: -.05em; line-height: 1.05; }
a.stat:hover { color: var(--ink); transform: translateY(-4px); }
.chartbox { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 230px; overflow-x: auto; }
.bars__col { flex: 1 0 28px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.bars__n { font-size: 13px; font-weight: 500; }
.bars__bar { width: 100%; max-width: 44px; border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, var(--turq), rgba(127,216,203,.45)); min-height: 4px; box-shadow: 0 8px 16px rgba(14,59,67,.1); }
.bars__bar.is-max { background: linear-gradient(180deg, var(--sun), rgba(255,201,60,.5)); }
.bars__y { font-size: 12px; font-weight: 400; color: var(--muted); }
.filterbar .input { max-width: 520px; }
.tablebox { overflow-x: auto; }
.table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.table td { padding: 14px 20px; border-bottom: 1px solid rgba(14,59,67,.07); vertical-align: top; }
.table td .muted, .table small { color: var(--muted); }
.table tr[hidden] { display: none; }
.table tbody tr:hover { background: rgba(255,255,255,.7); }

/* ---------- Formulare, Suche ---------- */
.form { padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--sun); }
.check a { text-decoration: underline; }
.form .btn { align-self: flex-start; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.searchbox { padding: 36px; display: flex; flex-direction: column; gap: 14px; }
.hits { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.hits li { padding: 16px 20px; border-radius: 20px; }

/* ---------- Spielplatz ---------- */
.games { display: flex; flex-direction: column; gap: 28px; padding-top: 28px; }
.cw { padding: 34px; display: flex; flex-wrap: wrap; gap: 40px; border-radius: var(--r-lg); }
.cw__board { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cw__grid { display: grid; gap: 5px; max-width: 560px; touch-action: manipulation; }
.cw__cell { position: relative; aspect-ratio: 1; border-radius: 10px; background: rgba(14,59,67,.035); }
.cw__cell.o { background: #fff; box-shadow: 0 3px 8px rgba(14,59,67,.14), inset 0 0 0 1px rgba(14,59,67,.14); }
.cw__cell.hl { background: #FFF1C4; }
.cw__cell.cur { background: var(--sun); }
.cw__cell.ok { background: #C8F5E4; } .cw__cell.bad { background: #FFD2C4; }
.cw__num { position: absolute; top: 3px; left: 5px; font-size: 10px; font-weight: 600; color: var(--teal); pointer-events: none; }
.cw__who { position: absolute; bottom: 4px; right: 5px; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; }
.cw__cell input { width: 100%; height: 100%; border: none; background: transparent; text-align: center; font: 600 clamp(16px, 2.2vw, 24px) var(--f); color: var(--ink); text-transform: uppercase; border-radius: 10px; padding: 6px 0 0; caret-color: transparent; }
.cw__cell input:focus { outline: none; }
.cw__clues { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cw__clues ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cw__clue { border-radius: 16px; padding: 10px 14px; cursor: pointer; background: var(--soft); border: var(--soft-border); }
.cw__clue.is-on { background: var(--ink); color: #fff; }
.cw__clue b { margin-right: 8px; }
.cw__msg { font-weight: 500; }
.hang { padding: 30px; display: flex; flex-direction: column; gap: 16px; border-radius: var(--r-lg); }
.hang__word { font-weight: 300; font-size: clamp(28px, 4vw, 44px); letter-spacing: .3em; text-align: center; margin: 0; padding: 8px 0; overflow-wrap: anywhere; }
.hang__lives { display: flex; justify-content: center; gap: 6px; align-items: center; font-size: 14px; }
.hang__lives i { width: 14px; height: 14px; border-radius: 50%; background: var(--sun); }
.hang__lives i.off { background: rgba(14,59,67,.12); }
.hang__keys { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.hang__keys button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(14,59,67,.14); background: #fff; font: 600 16px var(--f); cursor: pointer; color: var(--ink); }
.hang__keys button:disabled { opacity: .35; cursor: default; }
.hang__keys button.hit { background: var(--turq); color: var(--ink); opacity: 1; }
.hang__msg { font-weight: 500; min-height: 1.5em; margin: 0; }
.quiz { padding: 30px; display: flex; flex-direction: column; gap: 16px; border-radius: var(--r-lg); }
.quiz__q { font-weight: 600; font-size: 25px; letter-spacing: -.02em; line-height: 1.2; min-height: 64px; }
.quiz__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quiz__opts button { min-height: 64px; border-radius: 18px; border: 1px solid rgba(14,59,67,.14); background: #fff; color: var(--ink); font: 300 28px var(--f); letter-spacing: -.03em; cursor: pointer; }
.quiz__opts button.ok { background: var(--turq); color: var(--ink); }
.quiz__opts button.bad { background: var(--coral); color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .wrap, .top__bar { padding: 0 18px; }
  .menu-btn { display: inline-flex; }
  .top__in { padding: 8px 8px 8px 22px !important; }
  .nav { display: none; position: absolute; left: 18px; right: 18px; top: 92px; flex-direction: column; align-items: stretch; padding: 14px; border-radius: 26px; background: rgba(255,255,255,.96); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: var(--glass-border); box-shadow: var(--glass-shadow); }
  .nav.is-open { display: flex; }
  .nav__a { min-height: 52px; font-size: 17px; }
  .nav .btn { margin: 8px 0 0; justify-content: center; }
  .hero { padding-top: 48px; gap: 32px; }
  .hero__stack { height: 400px; transform: scale(.9); transform-origin: left top; }
  .pagehead__box, .cookhead, .cw, .prose { padding: 28px 22px; }
  .pagehead__count { position: static; }
  .section { padding-top: 52px; }
  .world { transform: none; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero__stack { display: none; }
  .grid--cards, .grid--worlds { grid-template-columns: 1fr; }
  .grid--recipes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rcard__img { height: 100px; } .rcard__title { font-size: 15px; }
  .stat__n { font-size: 38px; }
  .minigrid { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .box, .card, .rcard, .album, .world, .stat, .hits li, .notice, .empty, .tablebox, .chartbox, .form, .searchbox, .soft, .btn, .chip, .pill, .sticker, .input { background-color: rgba(255,255,255,.92); }
}

/* ---------- Druck (Rezepte) ---------- */
@media print {
  .top, .foot, .noprint, .scene, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .box, .step, .ing, .ings, .prose, .tag, .stepper { box-shadow: none !important; background: #fff !important; color: #000 !important; border: 1px solid #ccc !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .recipe__img, .ing__box { display: none; }
  .recipe__cols { display: block; }
}

/* Balkenhöhen */
.bars__bar.h0{height:4px}.bars__bar.h1{height:9px}.bars__bar.h2{height:18px}.bars__bar.h3{height:27px}.bars__bar.h4{height:36px}.bars__bar.h5{height:45px}.bars__bar.h6{height:54px}.bars__bar.h7{height:63px}.bars__bar.h8{height:72px}.bars__bar.h9{height:81px}.bars__bar.h10{height:90px}.bars__bar.h11{height:99px}.bars__bar.h12{height:108px}.bars__bar.h13{height:117px}.bars__bar.h14{height:126px}.bars__bar.h15{height:135px}.bars__bar.h16{height:144px}.bars__bar.h17{height:153px}.bars__bar.h18{height:162px}.bars__bar.h19{height:171px}.bars__bar.h20{height:180px}
.row--between { justify-content: space-between; }

/* ---------- Spiele: Übersicht + Einzelseiten ---------- */
.gamehub { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.gamecard { padding: 30px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; border-radius: var(--r-lg); transition: transform .25s; }
.gamecard:hover { transform: translateY(-6px); color: var(--ink); }
.gamecard--big { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 36px; }
.gamecard__title { font-weight: 600; font-size: 30px; letter-spacing: -.03em; line-height: 1.1; }
.gamecard__badge { font-weight: 600; font-size: 30px; letter-spacing: 6px; border-radius: 18px; padding: 14px 18px; }
.gamecard .btn { margin-top: auto; }
.gamecard--big .stack-v { gap: 12px; align-items: flex-start; }
.progress { display: block; width: 100%; max-width: 420px; height: 10px; border-radius: 999px; background: rgba(14,59,67,.1); overflow: hidden; }
.progress__bar { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--sun), #FFE7A6); transition: width .4s; }
.gamehead { padding-top: 48px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.gamehead .row { width: 100%; }
.gamehead__live { padding: 10px 16px; border-radius: 999px; }
.cw--full { gap: 32px; }
.cw--full .cw__board { flex: 3 1 620px; }
.cw__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: -4px; padding: 4px; }
.cw--full .cw__grid { min-width: calc(var(--cols, 20) * 27px); }
.cw__swipe { display: none; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .cw__swipe { display: block; } .cw--full { padding: 18px; } }
.cw--full .cw__grid { max-width: 900px; gap: 3px; }
.cw--full .cw__clues { flex: 1 1 300px; max-height: 1100px; overflow-y: auto; padding-right: 6px; }
.cw__current { border-radius: 18px; padding: 14px 18px; font-weight: 500; min-height: 54px; }
.cw__current b { margin-right: 8px; }
.cw__help { font-size: 14px; }
.cw--full .cw__cell { border-radius: 5px; }
.cw--full .cw__cell input { border-radius: 5px; font-size: clamp(11px, 1.3vw, 18px); }
.cw--full .cw__num { font-size: 8px; top: 1px; left: 2px; }
.hang--full, .quiz--full { padding: 40px; gap: 22px; }
.hang--full .hang__word { font-size: clamp(30px, 6vw, 60px); }
.quiz__where { font-weight: 300; font-size: 18px; display: block; margin-top: -6px; }
.quiz__end { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; padding: 20px 0; }
.quiz__end[hidden], [data-q-play][hidden] { display: none; }
[data-q-play] { display: flex; flex-direction: column; gap: 16px; }
.progress__bar.p0{width:0%}.progress__bar.p1{width:5%}.progress__bar.p2{width:10%}.progress__bar.p3{width:15%}.progress__bar.p4{width:20%}.progress__bar.p5{width:25%}.progress__bar.p6{width:30%}.progress__bar.p7{width:35%}.progress__bar.p8{width:40%}.progress__bar.p9{width:45%}.progress__bar.p10{width:50%}.progress__bar.p11{width:55%}.progress__bar.p12{width:60%}.progress__bar.p13{width:65%}.progress__bar.p14{width:70%}.progress__bar.p15{width:75%}.progress__bar.p16{width:80%}.progress__bar.p17{width:85%}.progress__bar.p18{width:90%}.progress__bar.p19{width:95%}.progress__bar.p20{width:100%}
.minigrid--3{grid-template-columns:repeat(3,16px)}.minigrid--4{grid-template-columns:repeat(4,16px)}.minigrid--5{grid-template-columns:repeat(5,16px)}.minigrid--6{grid-template-columns:repeat(6,16px)}.minigrid--7{grid-template-columns:repeat(7,16px)}.minigrid--8{grid-template-columns:repeat(8,16px)}.minigrid--9{grid-template-columns:repeat(9,16px)}.minigrid--10{grid-template-columns:repeat(10,16px)}.minigrid--11{grid-template-columns:repeat(11,16px)}.minigrid--12{grid-template-columns:repeat(12,16px)}.minigrid--13{grid-template-columns:repeat(13,16px)}.minigrid--14{grid-template-columns:repeat(14,16px)}.minigrid--15{grid-template-columns:repeat(15,12px)}.minigrid--16{grid-template-columns:repeat(16,12px)}.minigrid--17{grid-template-columns:repeat(17,12px)}.minigrid--18{grid-template-columns:repeat(18,12px)}.minigrid--19{grid-template-columns:repeat(19,12px)}.minigrid--20{grid-template-columns:repeat(20,12px)}.minigrid--21{grid-template-columns:repeat(21,12px)}.minigrid--22{grid-template-columns:repeat(22,8px)}.minigrid--23{grid-template-columns:repeat(23,8px)}.minigrid--24{grid-template-columns:repeat(24,8px)}.minigrid--25{grid-template-columns:repeat(25,8px)}.minigrid--26{grid-template-columns:repeat(26,8px)}.minigrid--27{grid-template-columns:repeat(27,8px)}.minigrid--28{grid-template-columns:repeat(28,8px)}.minigrid--29{grid-template-columns:repeat(29,8px)}.minigrid--30{grid-template-columns:repeat(30,8px)}.minigrid--31{grid-template-columns:repeat(31,8px)}.minigrid--32{grid-template-columns:repeat(32,8px)}
.minigrid span{width:16px;height:16px}.minigrid--15 span{width:12px;height:12px}.minigrid--16 span{width:12px;height:12px}.minigrid--17 span{width:12px;height:12px}.minigrid--18 span{width:12px;height:12px}.minigrid--19 span{width:12px;height:12px}.minigrid--20 span{width:12px;height:12px}.minigrid--21 span{width:12px;height:12px}.minigrid--22 span{width:8px;height:8px}.minigrid--23 span{width:8px;height:8px}.minigrid--24 span{width:8px;height:8px}.minigrid--25 span{width:8px;height:8px}.minigrid--26 span{width:8px;height:8px}.minigrid--27 span{width:8px;height:8px}.minigrid--28 span{width:8px;height:8px}.minigrid--29 span{width:8px;height:8px}.minigrid--30 span{width:8px;height:8px}.minigrid--31 span{width:8px;height:8px}.minigrid--32 span{width:8px;height:8px}.minigrid--22,.minigrid--23,.minigrid--24,.minigrid--25,.minigrid--26,.minigrid--27,.minigrid--28,.minigrid--29,.minigrid--30,.minigrid--31,.minigrid--32{gap:3px}

/* Hangman-Figur: Teile zeichnen sich bei jedem Fehlversuch; ab und zu ist es eine Frau */
.hang__stage { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hang__fig { width: 180px; height: 198px; flex: none; overflow: visible; }
.hang__fig .hf { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s ease; }
.hang__fig .hf-gallows .hf { stroke: #B08A5B; stroke-width: 6; }
.hang__fig .hf-hair { stroke: #C9573A; }
.hang__fig .hf-woman .p6 { fill: rgba(127,216,203,0); transition: stroke-dashoffset .55s ease, fill .4s .4s; }
.hang__fig.is-woman.m6 .hf-woman .p6 { fill: rgba(127,216,203,.55); }
.hang__fig .hf-woman, .hang__fig.is-woman .hf-man { display: none; }
.hang__fig.is-woman .hf-woman { display: inline; }
.hang__fig.m1 .p1, .hang__fig.m2 .p2, .hang__fig.m3 .p3, .hang__fig.m4 .p4, .hang__fig.m5 .p5, .hang__fig.m6 .p6, .hang__fig.m7 .p7, .hang__fig.m8 .p8 { stroke-dashoffset: 0; }
.hang__fig .hf-face { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .3s .3s; }
.hang__fig.is-lost .hf-sad, .hang__fig.is-won.m5 .hf-happy { opacity: 1; }
.hang__fig .hf-person { transform-origin: 140px 20px; transform-box: view-box; }
.hang__fig.is-lost .hf-person { animation: hm-swing 2.4s ease-in-out .5s infinite; }
.hang__fig.is-won .hf-person { animation: hm-jump .7s ease-in-out 3; }
@keyframes hm-swing { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(-7deg); } }
@keyframes hm-jump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .hang__fig .hf-person { animation: none !important; } .hang__fig .hf { transition: none; } }
@media (max-width: 600px) { .hang__fig { width: 130px; height: 143px; } }

/* YouTube-Videos (Zwei-Klick) */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; margin: 26px 0; }
.prose .video, .video { margin: 22px 0; }
.videos .video { margin: 0; }
.video__btn, .video__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 3px solid #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 30px rgba(14,59,67,.15); background: #0E3B43; }
.video__btn { position: relative; padding: 0; cursor: pointer; }
.video__btn img, .video__ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.video__ph { background: linear-gradient(135deg, #7FD8CB, #BFE4F2 60%, #F2E6D2); }
.video__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 10px 26px rgba(14,59,67,.3); transition: transform .2s; }
.video__play::after { content: ''; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--ink); }
.video__btn:hover .video__play, .video__btn:focus-visible .video__play { transform: scale(1.1); }
.video figcaption { font-weight: 600; margin-top: 10px; }
.video__note { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

/* ---------- Reise-Ansicht: kompakt oben, Fotos sofort, Bericht danach ---------- */
.geo { display: inline-block; vertical-align: middle; flex: none; filter: drop-shadow(0 3px 6px rgba(14,59,67,.22)); overflow: visible; }
.trip { display: flex; flex-direction: column; gap: 22px; }
.trip .crumbs { padding-top: 32px; }
.trip__head { border-radius: var(--r-lg); padding: 26px 30px; display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; }
.trip__title .display { font-size: clamp(32px, 4.6vw, 58px); }
.trip__title .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.trip__title .meta > * { display: inline-flex; align-items: center; gap: 6px; }
.trip__title .meta a { color: var(--teal); font-weight: 600; }
.trip__lands { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: flex-end; }
.trip__lands a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink); }
.trip__lands a:hover .geo { transform: translateY(-3px) scale(1.06); }
.trip__lands .geo { transition: transform .2s; }
.trip__info { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-soft); align-items: flex-start; }
.tchip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(14,59,67,.1); font: 500 14px var(--f); color: var(--ink); box-shadow: 0 2px 6px rgba(14,59,67,.06); cursor: pointer; list-style: none; }
.tchip::-webkit-details-marker { display: none; }
a.tchip:hover, summary.tchip:hover { border-color: var(--turq); color: var(--ink); transform: translateY(-1px); }
.tchip .ico { color: var(--teal); flex: none; }
.tchip b { font-weight: 700; color: var(--teal); }
.tchip.is-on { background: var(--ink); color: #fff; }
.tchip.is-on .ico, .tchip.is-on b { color: #fff; }
.trip__more { position: relative; }
.trip__more[open] summary .ico:last-child { transform: rotate(180deg); }
.trip__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 18px; background: rgba(255,255,255,.7); border: 1px solid var(--line-soft); }
.trip__tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: thin; }
.trip__tabs .chip { flex: none; }
.trip__photos .gallery { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.gallery--clip .gallery__item:nth-child(n+13) { display: none; }
.gallery__more { display: flex; justify-content: center; margin-top: 16px; }
.trip__report .h2 { margin: 18px 0 14px; }
.trip__report .prose { max-width: 860px; }
@media (max-width: 760px) {
  .trip__head { grid-template-columns: 1fr; padding: 20px; }
  .trip__lands { justify-content: flex-start; gap: 8px 14px; }
  .trip__lands a { flex-direction: row; gap: 6px; font-size: 13px; }
  .trip__lands .geo { width: 34px; height: 34px; }
  .trip__info { padding-top: 12px; gap: 6px; }
  .tchip { min-height: 34px; padding: 0 12px; font-size: 13px; }
  .trip__photos .gallery { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .trip__photos .gallery__item { border-radius: 12px; border-width: 2px; }
  .gallery--clip .gallery__item:nth-child(n+10) { display: none; }
}

/* Karten-Übersicht «Wo ich war» */
.atlas { border-radius: var(--r-lg); padding: 24px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: 24px; align-items: center; }
.atlas__map { border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #E4F4F8, #F3FAFB); }
.geomap { display: block; width: 100%; height: auto; }
.geomap__off { fill: #FFFFFF; stroke: #CFE3E8; stroke-width: 1; }
.geomap__on { stroke: #FFFFFF; stroke-width: 1.4; cursor: pointer; transition: fill .2s, opacity .2s; }
.geomap__l1 { fill: #A9E6DD; } .geomap__l2 { fill: #7FD8CB; } .geomap__l3 { fill: #3DB5A6; } .geomap__l4 { fill: #138A86; }
.geomap a:hover .geomap__on, .geomap a:focus .geomap__on { fill: #FFC93C; }
.atlas__side .h3 { margin: 0 0 4px; }
.atlas__list { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.card__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card__meta .geo { filter: drop-shadow(0 1px 2px rgba(14,59,67,.25)); }
@media (max-width: 860px) { .atlas { grid-template-columns: 1fr; padding: 16px; } }

/* Zahl-Kugeln auf der Karte (Billard-Optik) */
.geoball { cursor: pointer; }
.geoball__shade { fill: rgba(14,59,67,.25); }
.geoball__ball { stroke: #FFFFFF; stroke-width: 1.5; transition: transform .2s; }
.geoball--l1 .geoball__ball { fill: #3DB5A6; } .geoball--l2 .geoball__ball { fill: #138A86; }
.geoball--l3 .geoball__ball { fill: #0E6F6C; } .geoball--l4 .geoball__ball { fill: #0E3B43; }
.geoball__face { fill: #FFFFFF; }
.geoball__shine { fill: rgba(255,255,255,.55); }
.geoball text { font: 700 10px var(--f); fill: #0E3B43; pointer-events: none; }
.geoball:hover .geoball__ball, .geoball:focus .geoball__ball { fill: #FFC93C; }



/* Anlässe (Konzerte, Sport): Liste mit Fotos, Tickets und Links */
.evlist { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ev { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 22px; background: rgba(255,255,255,.88); border: 1.5px solid #fff; box-shadow: 0 6px 18px rgba(14,59,67,.07); }
.ev[hidden] { display: none; }
.ev__thumb { width: 72px; height: 72px; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--turq-soft); color: var(--teal); box-shadow: 0 3px 8px rgba(14,59,67,.12); }
.ev__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ev__thumb--ticket img { object-fit: contain; background: #fff; }
.ev__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev__date { font-size: 13px; font-weight: 600; color: var(--teal); letter-spacing: .02em; }
.ev__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.ev__title span { font-weight: 400; color: var(--muted); }
.ev__place { font-size: 14px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.ev__note { font-size: 13px; color: var(--muted); font-style: italic; }
.ev__extras { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 380px; }
.evchip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(14,59,67,.1); font: 500 13px var(--f); color: var(--ink); }
.evchip img { width: 22px; height: 22px; object-fit: cover; border-radius: 5px; margin-left: -4px; }
.evchip .ico { color: var(--teal); }
.evchip:hover { border-color: var(--turq); color: var(--ink); transform: translateY(-1px); }
.evcats { gap: 6px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .ev { grid-template-columns: 56px 1fr; gap: 12px; padding: 10px; }
  .ev__thumb { width: 56px; height: 56px; border-radius: 12px; }
  .ev__extras { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
}

/* klickbare Statistik und Balken */
.stat--btn { font: inherit; color: inherit; text-align: left; cursor: pointer; border: 0; transition: transform .2s, box-shadow .2s; }
.stat--btn:hover { transform: translateY(-4px); }
.stat--btn.is-on { box-shadow: 0 0 0 3px var(--ink), var(--glass-shadow); }
.bars__col--btn { background: none; border: 0; padding: 0 0 2px; font: inherit; color: inherit; cursor: pointer; border-radius: 10px; }
.bars__col--btn:hover .bars__bar { filter: brightness(1.08); transform: translateY(-3px); }
.bars__col--btn .bars__bar { transition: transform .2s; }
.bars__col--btn.is-on .bars__bar { background: linear-gradient(180deg, var(--ink), #2C5157); }
.bars__col--btn.is-on .bars__y, .bars__col--btn.is-on .bars__n { color: var(--ink); font-weight: 700; }
.bars__col--btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bars__col { flex: 1 0 18px; }

.cook__live { margin: 10px 0 0; min-height: 1.4em; font-weight: 600; color: var(--ink); }
[data-cat].is-empty { opacity: .45; }

#ergebnisse { scroll-margin-top: 110px; }
#ergebnisse .section__head .h2 { display: flex; align-items: center; gap: 12px; }

/* Kreuzworträtsel kompakt: Rätsel passt in die Bildschirmhöhe, Hinweise bleiben am selben Ort */
.cw--full { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 24px; align-items: start; padding: 24px; }
.cw--full .cw__board { gap: 12px; position: relative; }
.cw--full .cw__current { position: sticky; top: 12px; z-index: 5; min-height: 46px; padding: 11px 16px; background: rgba(255,255,255,.96); box-shadow: 0 6px 16px rgba(14,59,67,.1); }
.cw--full .cw__grid { gap: 2px; min-width: 0; width: min(100%, calc((100vh - 200px) * var(--cols, 20) / var(--rows, 20))); max-width: none; margin: 0 auto; }
.cw--full .cw__cell { border-radius: 4px; }
.cw--full .cw__cell input { border-radius: 4px; padding-top: 3px; font-size: clamp(10px, 1.15vw, 17px); }
.cw--full .cw__num { font-size: 7px; top: 0; left: 1px; }
.cw--full .cw__help { font-size: 13px; margin: 0; }
.cw--full .cw__clues { position: sticky; top: 12px; max-height: calc(100vh - 30px); overflow-y: auto; gap: 10px; padding: 0 6px 6px 0; overscroll-behavior: contain; }
.cw--full .cw__clues .h3 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 6px 0; font-size: 17px; background: linear-gradient(180deg, #F7FCFC 75%, rgba(247,252,252,0)); }
.cw--full .cw__clues ol { gap: 4px; }
.cw--full .cw__clue { padding: 6px 10px; border-radius: 10px; font-size: 14px; line-height: 1.35; }
.cw--full .cw__clue b { margin-right: 6px; }
@media (max-width: 900px) {
  .cw--full { grid-template-columns: 1fr; padding: 14px; }
  .cw--full .cw__current { top: 6px; }
  .cw--full .cw__grid { width: auto; min-width: calc(var(--cols, 20) * 25px); }
  .cw--full .cw__clues { position: static; max-height: 420px; }
}
.cw--full .cw__cell { min-height: 0; min-width: 0; overflow: hidden; }
.cw--full .cw__cell input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 2px 0 0; line-height: 1; }

.cw__cell.rev input { color: #8AA3A7; font-style: italic; }
.btn--coral { background: #FFD2C4; border-color: #F0A994; }

/* ===== Neue Spiele ===== */
.gamecard__badge--sm { font-size: 24px; letter-spacing: 2px; }
.gamehub__head { grid-column: 1 / -1; margin: 18px 0 -6px; }
/* Wo war Roy? */
.gwhere, .gmem, .gmm, .gfridge { padding: 30px; display: flex; flex-direction: column; gap: 18px; border-radius: var(--r-lg); }
.gwhere__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.gwhere__grid[hidden] { display: none; }
.gwhere__photo { margin: 0; border-radius: 22px; overflow: hidden; background: rgba(14,59,67,.06); aspect-ratio: 4/3; }
.gwhere__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gwhere__map { display: flex; flex-direction: column; gap: 12px; }
.gwhere__ask { font-weight: 600; font-size: 17px; margin: 0; min-height: 48px; }
.gwhere__ask.is-ok { color: var(--teal); }
.gwhere__ask.is-bad { color: #C0482B; }
.gwhere__after[hidden] { display: none; }
.geomap--quiz { width: 100%; height: auto; background: rgba(158,217,240,.25); border-radius: 18px; }
.geomap__q { fill: #fff; stroke: #0E3B43; stroke-opacity: .35; stroke-width: .8; cursor: pointer; transition: fill .15s; }
.geomap__q:hover { fill: var(--sun); }
.geomap__pt { stroke-width: 1.4; stroke-opacity: .7; }
.geomap__q.is-bad { fill: var(--coral); }
.geomap__q.is-ok { fill: var(--turq); stroke-opacity: .9; stroke-width: 1.6; }
.gwhere__recap { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; width: 100%; }
.gwhere__rc { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; text-align: left; }
.gwhere__rc img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; border: 3px solid var(--turq); }
.gwhere__rc.is-miss img { border-color: var(--coral); }
/* Umriss-Quiz */
.gshape { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.gshape[hidden] { display: none; }
.gshape__pic { width: 220px; height: 220px; display: grid; place-items: center; }
.gshape__pic svg { width: 100%; height: 100%; }
.gshape__opts { width: 100%; }
.gshape__opts button, .gdia__opts button { font-size: 19px; font-weight: 500; letter-spacing: -.01em; padding: 8px 12px; }
.gdia__word { text-align: center; font-size: clamp(30px, 5vw, 46px); }
[data-g-next][hidden], [data-g-hint][hidden] { display: none; }
/* Memory */
.gmem__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gmem__board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 760px; width: 100%; margin: 0 auto; }
.gmem__board--24 { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 980px; }
.gmem__card { aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; perspective: 800px; font: inherit; }
.gmem__in { position: relative; display: block; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.gmem__card.is-open .gmem__in, .gmem__card.is-done .gmem__in { transform: rotateY(180deg); }
.gmem__back, .gmem__face { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; overflow: hidden; }
.gmem__back { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--turq), var(--sky)); color: var(--ink); font-weight: 600; font-size: clamp(16px, 2.6vw, 26px); letter-spacing: -.03em; box-shadow: 0 6px 18px rgba(14,59,67,.12); }
.gmem__back { background: linear-gradient(150deg, #FFFFFF 0%, var(--turq-soft) 55%, #FFF3D1 100%); border: 1.5px solid rgba(14,59,67,.1); }
.gmem__back .logo { font-size: clamp(15px, 2.4vw, 26px); gap: .26em; }
.gmem__back .logo__dot { width: .38em; height: .38em; box-shadow: 0 0 0 .13em rgba(255,201,60,.25), 0 0 .6em rgba(255,201,60,.7); }
.gmem__card:hover .gmem__back { filter: brightness(1.05); }
.gmem__face { background: #fff; transform: rotateY(180deg); border: 2px solid #fff; }
.gmem__face img { width: 100%; height: 100%; object-fit: cover; }
.gmem__face svg { width: 80%; height: 80%; }
.gmem__face small { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; font-weight: 600; padding: 3px 6px; background: rgba(255,255,255,.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .3s; }
.gmem__card.is-done .gmem__face { border-color: var(--turq); }
.gmem__card.is-done .gmem__face small { opacity: 1; }
.gmem__msg { text-align: center; }
.gmem__msg .btn { margin-left: 8px; }
/* Mastermind */
.gmm__rows { display: flex; flex-direction: column; gap: 6px; }
.gmm__row { display: grid; grid-template-columns: 28px auto 1fr; gap: 14px; align-items: center; padding: 6px 10px; border-radius: 16px; }
.gmm__row[hidden] { display: none; }
.gmm__row.is-cur { background: rgba(255,201,60,.22); }
.gmm__secret { background: var(--turq-soft); }
.gmm__n { font-size: 13px; font-weight: 600; color: var(--muted); text-align: right; }
.gmm__pegs { display: flex; gap: 8px; }
.gmm__peg { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: rgba(14,59,67,.55); background: var(--pc, rgba(14,59,67,.07)); border: 1.5px solid rgba(14,59,67,.18); }
.gmm__palette { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding-top: 6px; }
.gmm__pick { width: 52px; height: 52px; font-size: 20px; cursor: pointer; box-shadow: 0 4px 12px rgba(14,59,67,.15); }
.gmm__pick:hover { transform: translateY(-2px); }
.gmm__fb { display: flex; gap: 3px; flex-wrap: wrap; font-size: 16px; }
.gmm__k { color: var(--ink); }
.gmm__w { color: var(--ink); opacity: .6; }
/* Kühlschrank-Roulette */
.gfridge__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gfridge__form .btn { grid-column: 1 / -1; justify-self: center; }
.gfridge__wheel { border-radius: 22px; background: var(--ink); color: #fff; padding: 26px 20px; text-align: center; overflow: hidden; }
.gfridge__wheel[hidden], .gfridge__result[hidden] { display: none; }
.gfridge__reel { font-weight: 600; font-size: clamp(20px, 3.4vw, 30px); letter-spacing: -.02em; }
.gfridge__reel.is-tick { animation: reel .12s ease-out; }
@keyframes reel { from { transform: translateY(-40%); opacity: .2; } to { transform: none; opacity: 1; } }
.gfridge__result { display: flex; flex-direction: column; gap: 14px; }
.gfridge__card { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; background: #fff; border-radius: 22px; padding: 14px; box-shadow: 0 8px 24px rgba(14,59,67,.1); animation: pop .4s ease-out; }
.gfridge__card img { width: 160px; height: 120px; object-fit: cover; border-radius: 14px; }
.gfridge__card > span { display: flex; flex-direction: column; gap: 6px; }
.gfridge__card b { font-size: 24px; letter-spacing: -.02em; line-height: 1.15; }
.gfridge__have, .gfridge__need { font-size: 14px; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 760px) {
  .gwhere, .gmem, .gmm, .gfridge { padding: 18px; }
  .gwhere__grid { grid-template-columns: 1fr; }
  .gmem__board--24 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gfridge__form { grid-template-columns: 1fr; }
  .gfridge__card { grid-template-columns: 1fr; }
  .gfridge__card img { width: 100%; height: 160px; }
  .gmm__peg { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .gmem__in { transition: none; } .gfridge__reel.is-tick, .gfridge__card { animation: none; } }
/* ===== Action-Spiele ===== */
.arc { padding: 30px; display: flex; flex-direction: column; gap: 16px; border-radius: var(--r-lg); }
.arc__stage { position: relative; width: 100%; max-width: 900px; margin: 0 auto; }
.arc__stage--tall { max-width: 480px; }
.arc__canvas { display: block; width: 100%; height: auto; border-radius: 20px; background: #CFEBC4; touch-action: none; }
.arc__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: rgba(255,255,255,.82); border-radius: 20px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.arc__overlay[hidden] { display: none; }
.arc__overlay p { margin: 0; max-width: 460px; }
.arc__pad { display: none; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 420px; margin: 0 auto; width: 100%; }
.arc__btn { min-height: 64px; border-radius: 18px; border: 1.5px solid rgba(14,59,67,.18); background: #fff; font-size: 24px; color: var(--ink); touch-action: none; user-select: none; -webkit-user-select: none; }
.arc__btn.is-on { background: var(--sun); }
@media (hover: none), (max-width: 760px) { .arc__pad { display: grid; } }
/* Cervelat-Grill */
.grill { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 22px; border-radius: 24px; background: repeating-linear-gradient(90deg, #3A3A3A 0 6px, #2A2A2A 6px 26px); box-shadow: inset 0 0 0 6px #555, inset 0 0 40px rgba(255,120,40,.35); min-height: 300px; }
.grill__start { grid-column: 1 / -1; align-self: center; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; background: rgba(255,255,255,.94); border-radius: 20px; padding: 24px; }
.grill__start[hidden] { display: none; }
.grill__start p { margin: 0; max-width: 520px; }
.grill__slot { position: relative; aspect-ratio: 1.3; border: 0; border-radius: 16px; background: radial-gradient(circle at 50% 60%, rgba(255,110,40,.35), transparent 70%); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; touch-action: manipulation; font: inherit; }
.grill__slot.is-empty .cerv, .grill__slot.is-empty .cerv__bars { visibility: hidden; }
.cerv { position: relative; width: 78%; height: 34%; border-radius: 999px; background: var(--cc, #F2A096); box-shadow: inset 0 -6px 0 rgba(0,0,0,.15), 0 6px 10px rgba(0,0,0,.35); transition: transform .25s; }
.cerv::before, .cerv::after { content: ''; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: var(--cc, #F2A096); border-radius: 50%; filter: brightness(.85); }
.cerv::before { left: -4px; } .cerv::after { right: -4px; }
.cerv__marks { position: absolute; inset: 22% 18%; background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(40,20,10,.35) 14px 18px); border-radius: 999px; }
.grill__slot.is-flip .cerv { transform: rotateX(180deg); }
.grill__slot.is-ready .cerv { box-shadow: 0 0 0 3px var(--sun), 0 0 18px var(--sun); animation: ready .6s ease-in-out infinite alternate; }
@keyframes ready { to { transform: scale(1.05); } }
.grill__slot.is-smoke::after { content: '💨'; position: absolute; top: 4px; right: 8px; font-size: 20px; animation: smoke 1s linear infinite; }
@keyframes smoke { from { transform: translateY(4px); opacity: .9; } to { transform: translateY(-10px); opacity: 0; } }
.grill__slot.is-burnt .cerv { animation: none; box-shadow: none; }
.grill__slot.is-served .cerv { transform: translateY(-60px) scale(.6); opacity: 0; transition: transform .35s, opacity .35s; }
.cerv__bars { display: flex; flex-direction: column; gap: 3px; width: 70%; }
.cerv__bars i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, currentColor var(--w, 0%), rgba(255,255,255,.18) var(--w, 0%)); color: #FFB36B; }
.cerv__bars i.ok { color: #8CD17D; } .cerv__bars i.burnt { color: #FF5A3C; }
.grill__pop { position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-weight: 700; color: #fff; opacity: 0; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.grill__pop.is-on { animation: popup .7s ease-out; }
.grill__pop.ok { color: #C9F5BD; } .grill__pop.bad { color: #FFB4A0; }
@keyframes popup { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }
/* Bestenliste */
.gboard { display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 20px; background: rgba(255,255,255,.7); border-radius: 22px; }
.gboard[hidden], .gboard__save[hidden] { display: none; }
.gboard__save { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.gboard__save .field { min-width: 240px; }
.gboard__list { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 4px; }
.gboard__list li { display: flex; gap: 8px; padding: 8px 14px; border-radius: 12px; background: #fff; }
.gboard__list li span { margin-left: auto; font-weight: 600; }
.gboard__list li.is-me { background: var(--sun); }
/* ===== Mehrspieler ===== */
.mp { position: relative; padding: 30px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 18px; min-height: 360px; }
.mp [data-mp-screen][hidden], .mp__count[hidden] { display: none; }
.mp__lobby, .mp__wait { display: flex; flex-direction: column; gap: 16px; }
.mp__lobby .field { max-width: 360px; }
.mp__choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.mp__box { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 20px; background: rgba(255,255,255,.75); border-radius: 22px; }
.mp__code { text-transform: uppercase; letter-spacing: .3em; font-weight: 700; max-width: 220px; }
.mp__wait { align-items: center; text-align: center; }
.mp__bigcode { font-weight: 700; font-size: clamp(44px, 9vw, 80px); letter-spacing: .18em; padding: 4px 24px; background: #fff; border-radius: 24px; box-shadow: 0 8px 24px rgba(14,59,67,.1); }
.mp__players { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mp__players li { padding: 8px 16px; border-radius: 999px; background: #fff; font-weight: 600; }
.mp__players li.off { opacity: .5; }
.mp__count { position: absolute; inset: 0; display: grid; place-items: center; background: #FFF7E8; border-radius: var(--r-lg); z-index: 5; }
.mp__count span { font-weight: 700; font-size: 140px; color: var(--ink); animation: cnt 1s ease-out infinite; }
@keyframes cnt { from { transform: scale(1.4); opacity: .3; } 30% { transform: scale(1); opacity: 1; } }
.mp__log { font-weight: 600; min-height: 24px; margin: 0; }
/* Stapel-Sprint */
.kc { --kw: clamp(44px, 7vw, 64px); width: var(--kw); height: calc(var(--kw) * 1.4); border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: calc(var(--kw) * .45); border: 2px solid rgba(14,59,67,.2); background: #fff; color: var(--ink); position: relative; box-shadow: 0 3px 8px rgba(14,59,67,.12); font-family: inherit; padding: 0; }
.kc--a { background: linear-gradient(160deg, #FFFFFF 0%, #DCE8FF 100%); border-color: #3E6FD8; color: #2A57B8; }
.kc--b { background: linear-gradient(160deg, #FFFFFF 0%, #DDF3D6 100%); border-color: #3E9E4E; color: #2D7E3B; }
.kc--c { background: linear-gradient(160deg, #FFFFFF 0%, #FFE0D8 100%); border-color: #D9442E; color: #BF3420; }
.kc--a::before, .kc--b::before, .kc--c::before { content: attr(data-n); position: absolute; top: 3px; left: 5px; font-size: 10px; font-weight: 700; opacity: .7; }
.kc--j { background: linear-gradient(150deg, #FFE27A, #FFC93C 60%, #FFB020); border-color: #C98A00; font-size: calc(var(--kw) * .22); color: var(--ink); }
.kc--j .logo { font-size: inherit; gap: .2em; } .kc--j .logo__dot { width: .5em; height: .5em; background: #fff; box-shadow: 0 0 0 .12em rgba(255,255,255,.5); }
.kc--empty { background: rgba(14,59,67,.04); border-style: dashed; box-shadow: none; color: rgba(14,59,67,.3); font-size: calc(var(--kw) * .26); font-weight: 600; }
.kc--back { background: linear-gradient(150deg, #FFFFFF 0%, var(--turq-soft) 55%, #FFF3D1 100%); border-color: rgba(14,59,67,.18); font-size: calc(var(--kw) * .2); }
.kc--back .logo { font-size: inherit; gap: .2em; } .kc--back .logo__dot { width: .45em; height: .45em; }
.kc small { position: absolute; bottom: 2px; right: 5px; font-size: 10px; font-weight: 600; color: var(--muted); }
button.kc { cursor: pointer; }
.kc.is-sel { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--ink), 0 10px 18px rgba(14,59,67,.25); }
.kc.is-target { box-shadow: 0 0 0 3px var(--teal), 0 0 16px rgba(11,122,112,.5); animation: ready .6s ease-in-out infinite alternate; }
.ks { display: flex; flex-direction: column; gap: 14px; }
.ks__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ks__label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); width: 100%; }
.ks__center { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 18px; border-radius: 22px; background: rgba(14,59,67,.06); flex-wrap: wrap; }
.ks__opp { display: flex; flex-wrap: wrap; gap: 10px; }
.ks__oppbox { --kw: 34px; padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.7); display: flex; flex-direction: column; gap: 6px; }
.ks__oppbox.is-turn { box-shadow: 0 0 0 3px var(--sun); }
.ks__oppbox .kc { box-shadow: none; border-width: 1.5px; }
.ks__me { padding: 16px; border-radius: 22px; background: rgba(255,255,255,.75); display: flex; flex-direction: column; gap: 12px; }
.ks__me.is-turn { box-shadow: 0 0 0 3px var(--sun); }
.ks__pile { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ks__pile .kc + .kc { margin-top: calc(var(--kw) * -1.15); }
.ks__hand { display: flex; gap: 8px; flex-wrap: wrap; }
.ks__help { font-size: 14px; color: var(--muted); margin: 0; }
/* Kreuzworträtsel-Duell */
.kd { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.kd__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2px; width: min(100%, calc(var(--cols) * 38px)); margin: 0 auto; }
.kd__c { position: relative; aspect-ratio: 1; }
.kd__c input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border: 1.5px solid rgba(14,59,67,.35); border-radius: 5px; text-align: center; font: 600 clamp(12px, 2vw, 18px) var(--f); text-transform: uppercase; color: var(--ink); background: #fff; padding: 0; caret-color: transparent; }
.kd__c input:focus { outline: none; background: var(--sun); }
.kd__c.is-word input { background: #FFF3D1; }
.kd__c.is-sol input { color: #C0482B; font-style: italic; }
.kd__c b { position: absolute; top: 1px; left: 3px; font-size: 9px; font-weight: 600; z-index: 1; pointer-events: none; color: var(--muted); }
.kd__side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
.kd__clue { font-weight: 600; padding: 12px 14px; border-radius: 16px; background: var(--sun); min-height: 48px; }
.kd__board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kd__board li { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: 14px; background: #fff; font-size: 14px; }
.kd__board li.is-me { box-shadow: 0 0 0 2px var(--ink); }
.kd__board li > span { display: flex; justify-content: space-between; gap: 8px; }
.kd__bar { height: 6px; border-radius: 3px; background: rgba(14,59,67,.1); overflow: hidden; }
.kd__bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--teal); transition: width .4s; }
.kd__clues { max-height: 300px; overflow: auto; font-size: 14px; display: flex; flex-direction: column; gap: 3px; }
.kd__clues button { text-align: left; border: 0; background: none; padding: 4px 6px; border-radius: 8px; font: inherit; color: var(--ink); cursor: pointer; }
.kd__clues button.is-on { background: #FFF3D1; }
.kd__clues button.is-done { color: var(--muted); text-decoration: line-through; }
@media (max-width: 860px) { .kd { grid-template-columns: 1fr; } .kd__side { position: static; } }
@media (max-width: 760px) { .arc, .mp { padding: 18px; } .grill { gap: 8px; padding: 12px; } .ks__center { gap: 6px; padding: 12px 8px; flex-wrap: nowrap; } .ks__center .kc { --kw: min(48px, 15vw); } .ks .kc { --kw: 46px; } .ks__oppbox .kc { --kw: 30px; } }