/* Wissensfeed: ein Handy-Format in der Mitte, Karten rasten vertikal ein.
   Es werden bewusst Systemschriften verwendet, damit keine Daten an Schriftdienste gehen. */
:root {
  --bg: #0b0c0f;
  --red: #C20318;
  --red-hi: #ff4b57;
  --fg: #f4f1ec;
  --fg-soft: rgba(244, 241, 236, 0.88);
  --muted: rgba(244, 241, 236, 0.66);
  --glass: rgba(11, 12, 15, 0.55);
  --line: rgba(244, 241, 236, 0.2);
  --display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", system-ui, Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--body); font-size: 16px; line-height: 1.5; overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

#app { height: 100%; display: flex; justify-content: center; align-items: center; }
.phone { position: relative; width: 100%; max-width: 480px; height: 100%; max-height: 940px; overflow: hidden; overflow: clip; background: var(--bg); }
@media (min-width: 520px) {
  .phone { border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0, 0, 0, 0.55); }
}

.top {
  position: absolute; inset: 0 0 auto 0; z-index: 5; padding-top: 12px; padding-bottom: 22px;
  background: linear-gradient(to bottom, rgba(8, 9, 12, 0.8), rgba(8, 9, 12, 0));
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.top > * { pointer-events: auto; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.tabs { display: flex; gap: 20px; min-width: 0; }
.tab {
  background: none; border: 0; padding: 6px 0; font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
.meta { display: flex; align-items: center; gap: 12px; }
.count { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; }
.infolink { font-size: 13px; color: var(--muted); text-decoration: underline; padding: 6px 2px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.chips::-webkit-scrollbar { display: none; }
.chipbtn {
  flex: none; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--glass);
  border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--fg); backdrop-filter: blur(6px);
}
.chipbtn[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.banner {
  align-self: center; margin: 0 var(--gutter-r) 0 var(--gutter-l); padding: 6px 12px; border-radius: 999px;
  background: rgba(240, 179, 90, 0.18); border: 1px solid rgba(240, 179, 90, 0.5); color: #f0c47e; font-size: 12px; text-align: center;
}

.feed { height: 100%; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.card {
  --ac: hsl(var(--h) 90% 74%);
  position: relative; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always;
  background: linear-gradient(160deg, hsl(var(--h) 48% 13%), hsl(calc(var(--h) + 28) 52% 22%));
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.art { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Spiele und Quizze: eigener Hintergrund, unabhängig von den Themenkarten */
.card.game {
  background:
    radial-gradient(120% 55% at 100% 0%, hsl(var(--h) 85% 46% / 0.42), transparent 62%),
    radial-gradient(100% 50% at 0% 100%, hsl(calc(var(--h) + 70) 80% 40% / 0.34), transparent 64%),
    linear-gradient(180deg, hsl(var(--h) 55% 10%), hsl(calc(var(--h) + 14) 58% 14%));
}
.card.game .shade { background: linear-gradient(to bottom, hsl(var(--h) 60% 6% / 0.22), hsl(var(--h) 60% 6% / 0.5)); }
.shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, hsl(var(--h) 55% 7% / 0.95) 0%, hsl(var(--h) 55% 7% / 0.86) 58%, hsl(var(--h) 55% 7% / 0) 94%);
}
.info {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 100%; overflow: hidden;
  padding: 0 calc(var(--gutter-r) + 62px) 22px var(--gutter-l);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  user-select: text; -webkit-user-select: text;
}
.photo {
  display: block; width: 100%; height: clamp(110px, 20vh, 190px); border-radius: 16px; object-fit: cover;
  background: rgba(255, 255, 255, 0.06); margin-bottom: 4px;
}
.cat { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac); }
.stat {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(34px, 10.5vw, 48px); color: var(--ac); overflow-wrap: anywhere;
}
.stat small { display: block; margin-top: 6px; font-family: var(--body); font-weight: 500; font-size: 13px; letter-spacing: 0.02em; color: var(--muted); }
.desc { font-size: 15px; font-weight: 600; color: var(--ac); }
h2 {
  margin: 4px 0 0; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.12;
  letter-spacing: -0.015em; text-wrap: balance; overflow-wrap: anywhere;
}
.info p { margin: 0; color: var(--fg-soft); font-size: 16px; line-height: 1.5; max-width: 60ch; }
.card:not(.ad) .info p { font-size: 17px; }
.more {
  margin-top: 8px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--ac); color: hsl(var(--h) 60% 10%); font-weight: 700; font-size: 15px; text-decoration: none;
}
.lic { font-size: 12px; line-height: 1.4; color: var(--muted); }
.lic a { text-decoration: underline; }
.imgcredit { display: block; }
@media (max-height: 720px) { .photo, .imgcredit { display: none; } }

.rail { position: absolute; right: var(--gutter-r); bottom: 30px; z-index: 3; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.act { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; width: 52px; font-size: 11px; color: var(--fg-soft); }
.act .ic {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--glass);
  border: 1px solid var(--line); backdrop-filter: blur(6px); transition: transform 0.15s ease, background 0.15s ease;
}
.act:active .ic { transform: scale(0.9); }
.act svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.act[aria-pressed="true"] .ic { background: var(--ac); color: hsl(var(--h) 60% 10%); border-color: var(--ac); }
.act[aria-pressed="true"] svg { fill: currentColor; }

.pop { position: absolute; left: 50%; top: 42%; width: 110px; height: 110px; margin: -55px 0 0 -55px; opacity: 0; pointer-events: none; color: var(--ac); z-index: 4; }
.pop svg { width: 100%; height: 100%; fill: currentColor; }
.pop.go { animation: pop 0.7s ease-out; }
@keyframes pop { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.3) translateY(-20px); } }

.empty, .loading {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r); text-align: center;
}
.loading { color: var(--muted); z-index: 1; }
.empty[hidden], .loading[hidden], .banner[hidden] { display: none; }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--fg); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty h3 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -0.015em; }
.empty p { margin: 0; color: var(--muted); max-width: 30ch; }
.empty button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--fg); color: var(--bg); font-weight: 700; }
.toast {
  position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 20px); z-index: 8; background: var(--fg); color: var(--bg);
  padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Spielkarten */
.gamebox {
  position: absolute; inset: 0; padding: 112px var(--gutter-r) 18px var(--gutter-l);
  display: flex; flex-direction: column; justify-content: center; gap: 12px; overflow: hidden;
  user-select: text; -webkit-user-select: text;
}
.gamebox .q { margin: 0; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.opts { display: grid; gap: 10px; }
.opt {
  min-height: 52px; padding: 12px 16px; border-radius: 14px; text-align: left; font-size: 16px; line-height: 1.3;
  background: var(--glass); border: 1px solid var(--line); color: var(--fg); backdrop-filter: blur(6px);
}
.opt:disabled { cursor: default; color: var(--fg); }
.opt.ok { background: hsl(150 55% 22%); border-color: hsl(150 70% 58%); }
.opt.ok::before { content: "✓ "; font-weight: 800; }
.opt.bad { background: hsl(0 50% 26%); border-color: hsl(0 80% 68%); }
.opt.bad::before { content: "✗ "; font-weight: 800; }
.opt.dim { opacity: 0.55; }
.expl { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.09); color: var(--fg-soft); font-size: 15px; line-height: 1.45; }
.expl a { text-decoration: underline; }
.gstat, .hint { font-size: 13px; color: var(--muted); }
.hint { text-align: center; }
.gh { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gh b { color: var(--fg); font-weight: 800; }
.board {
  position: relative; align-self: center; border-radius: 16px; background: rgba(0, 0, 0, 0.28); touch-action: none;
  user-select: none; -webkit-user-select: none; flex: none;
}
.tile { position: absolute; left: 0; top: 0; padding: 3px; transition: transform 0.2s ease; cursor: pointer; }
.tile .t {
  width: 100%; height: 100%; border-radius: 12px; display: grid; place-items: center;
  background: hsl(var(--th) 55% 26%); border: 2px solid hsl(var(--th) 75% 66%); color: hsl(var(--th) 90% 84%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.tile .t svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile.sel .t { outline: 3px solid #fff; outline-offset: -3px; transform: scale(0.92); }
.tile.gone .t { transform: scale(0.2); opacity: 0; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 11px; color: var(--muted); }
.lg { display: inline-flex; align-items: center; gap: 4px; }
.lg svg { width: 14px; height: 14px; fill: none; stroke: hsl(var(--th) 90% 78%); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.factbox { min-height: 56px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.09); color: var(--fg-soft); font-size: 14px; line-height: 1.4; }
.over {
  position: absolute; inset: 0; border-radius: 16px; background: rgba(11, 12, 15, 0.86); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
}
.over h3 { margin: 0; font-family: var(--display); font-size: 28px; font-weight: 800; }
.over p { margin: 0; color: var(--fg-soft); }
.over button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--fg); color: var(--bg); font-weight: 700; }
@media (max-height: 720px) { .legend { display: none; } }

/* Kompaktstufen: greifen nur, wenn der Inhalt nicht in die Karte passt */
.gamebox.fit1 { gap: 8px; }
.gamebox.fit1 .q { font-size: 19px; }
.gamebox.fit1 .opts, .gamebox.fit1 .sortlist { gap: 7px; }
.gamebox.fit1 .opt { min-height: 44px; padding: 9px 14px; font-size: 15px; }
.gamebox.fit1 .expl { padding: 9px 12px; font-size: 14px; line-height: 1.35; }
.gamebox.fit1 .hint { display: none; }
.gamebox.fit2 { gap: 6px; }
.gamebox.fit2 .q { font-size: 17px; }
.gamebox.fit2 .opts, .gamebox.fit2 .sortlist { gap: 5px; }
.gamebox.fit2 .opt { min-height: 38px; padding: 6px 12px; font-size: 14px; }
.gamebox.fit2 .legend { display: none; }
.gamebox.fit3 .opt { min-height: 34px; padding: 4px 10px; font-size: 13px; }
.gamebox.fit3 .expl { font-size: 13px; padding: 7px 10px; }
.matchbox.fit3 .q { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tile, .tile .t { transition: none; }
  .pop.go, .spin { animation: none; }
  .pop.go { opacity: 0; }
  .toast, .act .ic { transition: none; }
}

/* ---------- Anzeigenkarten: ruhiges Papier, passt zu jedem Absender ---------- */
.card.ad {
  --ac: #a8480f; --ink: #1d2233;
  color: var(--ink);
  background: linear-gradient(165deg, #fbf7ee 0%, #f2e9d6 55%, #eadfc6 100%);
}
.card.ad::after {
  content: ""; position: absolute; inset: 12px; border: 1px solid rgba(29, 34, 51, 0.16); border-radius: 26px; pointer-events: none;
}
.card.ad .info { padding: 0 max(var(--gutter-r), 30px) 36px max(var(--gutter-l), 30px); }
.card.ad .adtag {
  display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: #fbf7ee;
  font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
}
.card.ad .cat, .card.ad .stat { color: var(--ac); }
.card.ad h2 { color: var(--ink); }
.card.ad .stat small, .card.ad .lic { color: rgba(29, 34, 51, 0.72); }
.card.ad .info p { color: #2b3042; }
.card.ad .more { background: var(--ink); color: #fbf7ee; }
.card.ad :focus-visible { outline-color: var(--ink); }

/* Bundesland-Auswahl */
.chipbtn.region { border-style: dashed; }
.sheet { position: absolute; inset: 0; z-index: 9; display: flex; align-items: flex-end; background: rgba(0, 0, 0, 0.6); }
.sheet[hidden] { display: none; }
.sheet .panel { width: 100%; max-height: 86%; overflow-y: auto; padding: 20px var(--gutter-r) 24px var(--gutter-l); background: #16171c; border-radius: 20px 20px 0 0; border-top: 1px solid var(--line); }
.sheet h3 { margin: 0 0 4px; font-family: var(--display); font-size: 22px; font-weight: 800; }
.sheet p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.sheet .regions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet button { min-height: 44px; padding: 8px 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); color: var(--fg); font-size: 14px; text-align: left; }
.sheet button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 700; }
.sheet .none { width: 100%; margin-top: 8px; text-align: center; }

/* Einstellungen, Timer, Anzeigenbild */
.gear { width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; padding: 0; color: var(--muted); }
.gear svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.timerrow { display: flex; justify-content: flex-end; padding-left: var(--gutter-l); padding-right: var(--gutter-r); margin-top: -4px; }
.timerrow[hidden] { display: none; }
.timerpill { min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--fg); }
.sheet h4 { margin: 18px 0 2px; font-family: var(--display); font-size: 16px; font-weight: 800; }
.sheet .favs, .sheet .timers { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet .favs button, .sheet .timers button { min-height: 40px; padding: 0 14px; border-radius: 999px; text-align: center; }
.sheet .done { width: 100%; margin-top: 18px; min-height: 48px; border-radius: 999px; border: 0; background: var(--fg); color: var(--bg); font-weight: 700; text-align: center; }
.sheet.times { align-items: center; padding: 24px; }
.sheet.times .panel { border-radius: 20px; max-width: 360px; margin: 0 auto; text-align: center; border: 1px solid var(--line); }
.sheet.times .none { margin-top: 8px; }
.adimg { display: block; width: 100%; height: clamp(80px, 14vh, 150px); object-fit: contain; border-radius: 16px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(29, 34, 51, 0.1); box-shadow: 0 6px 18px rgba(29, 34, 51, 0.08); padding: 6px; }
@media (max-height: 700px) { .card.front .issueline { display: none; } .card.front .flead button { min-height: 38px; } .card.front .fmast { padding-top: 8px; } .card.front .mastname { font-size: 24px; } }
@media (max-height: 640px) { .adimg:not(.house) { display: none; } .adimg.house { height: 92px; } }

/* Chipleiste mit Pfeilen, Timer-Dialog, Hinweis */
.chipswrap { position: relative; }
.chipnav {
  position: absolute; top: 0; bottom: 0; z-index: 2; width: 38px; display: grid; place-items: center; border: 0; padding: 0 0 3px;
  font-size: 26px; line-height: 1; color: var(--fg); cursor: pointer;
}
.chipnav[hidden] { display: none; }
.chipnav.prev { left: 0; background: linear-gradient(to right, rgba(8, 9, 12, 0.92) 40%, rgba(8, 9, 12, 0)); }
.chipnav.next { right: 0; background: linear-gradient(to left, rgba(8, 9, 12, 0.92) 40%, rgba(8, 9, 12, 0)); }
.chipbtn.region { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet .note { padding: 10px 12px; margin: 6px 0 12px; border-left: 3px solid var(--ac, #f0b35a); background: rgba(255, 255, 255, 0.06); border-radius: 0 10px 10px 0; color: var(--fg-soft); font-size: 14px; line-height: 1.45; }
.sheet .note strong { color: var(--fg); }
.sheet.tsheet .panel { padding-bottom: 28px; }

/* Kopfzeile auf schmalen Handys: alles bleibt sichtbar */
.tabs { gap: 14px; }
.tab { font-size: 16px; }
.meta { gap: 2px; }
.meta .count { margin-right: 6px; min-width: 1ch; }
.gear { width: 31px; }

/* Vier Spielarten */
.tfbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.tfbtns .opt { text-align: center; font-weight: 700; }
.opt.dim { opacity: .45; }
.sortlist { display: grid; gap: 8px; }
.sortb { display: flex; align-items: center; gap: 10px; text-align: left; }
.sortb .no { min-width: 1.6em; font-weight: 800; color: var(--accent, #e8a53a); }
.sortb .nm { flex: 1; }
.sortb .vl { font-size: .8em; opacity: .75; }
.sortb.bad { animation: wfshake .4s; }
.hearts { color: #e24a4a; letter-spacing: 2px; }
@keyframes wfshake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* Zeit ist um */
.sheet.times { position: absolute; overflow: hidden; }
.sheet.times .panel { position: relative; z-index: 1; animation: wfpop .5s cubic-bezier(.2,1.4,.4,1); }
.sheet.times .joke { font-weight: 600; }
.mascot { width: 132px; height: 132px; display: block; margin: -4px auto 6px; border-radius: 50%; box-shadow: 0 0 0 4px var(--red); animation: wfhop 1.1s ease-in-out infinite; }
.mascot.wave { animation: wfwave 1.4s ease-in-out infinite; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.conf { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: wffall linear infinite; }
@keyframes wffall { to { transform: translateY(110vh) rotate(540deg); } }
@keyframes wfhop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px) rotate(-3deg); } }
@keyframes wfwave { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes wfpop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }



/* ---------- SnapCrow-Marke ---------- */
.lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand { width: 30px; height: 30px; border-radius: 9px; flex: none; display: block; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.loadicon { width: 72px; height: 72px; border-radius: 20px; display: block; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
@media (max-width: 380px) { .count { display: none; } }
.mascot.alarm { width: 200px; height: 200px; border-radius: 24px; box-shadow: none; margin: -6px auto 8px; animation: wfshake 0.5s ease-in-out 3, wfhop 1.6s ease-in-out 1.5s infinite; }
@media (prefers-reduced-motion: reduce) { .mascot.alarm { animation: none; } }
.adimg.house { height: clamp(110px, 21vh, 180px); background: #fff; }
@media (max-height: 780px) { .adimg.house { height: clamp(90px, 14vh, 120px); } }
@media (max-height: 740px) { .card.ad .info { gap: 6px; padding-bottom: 26px; } .card.ad .info p { font-size: 15px; line-height: 1.4; } .card.ad h2 { font-size: 23px; } .adimg.house { height: 84px; } }
.card.ad .adhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.adcrow { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid rgba(29, 34, 51, 0.14); box-shadow: 0 4px 12px rgba(29, 34, 51, 0.12); flex: none; }
@media (max-height: 700px) { .card.front .issueline { display: none; } .card.front .flead button { min-height: 38px; } .card.front .fmast { padding-top: 8px; } .card.front .mastname { font-size: 24px; } }
@media (max-height: 640px) { .adcrow { width: 44px; height: 44px; } }
@media (max-height: 590px) { .adimg.house { display: none; } }

/* ---------- Anzeigenkarten: Krähe ganz oben, ohne Hintergrund ---------- */
.card.ad { display: flex; flex-direction: column; }
.card.ad .adhero { position: relative; z-index: 1; flex: 1 1 0; min-height: 0; padding: 132px 20px 4px; display: flex; justify-content: center; pointer-events: none; }
.card.ad .adhero img { display: block; width: 100%; max-width: 380px; height: 100%; object-fit: contain; object-position: center; filter: drop-shadow(0 8px 14px rgba(29, 34, 51, 0.16)); }
.card.ad .adhero.tiny img { visibility: hidden; }
.card.ad .info { position: relative; flex: none; }
@media (max-height: 740px) {
  .card.ad .stat { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; font-size: 38px; }
  .card.ad .stat small { display: inline; margin-top: 0; }
}

/* ---------- Wort-Rätsel ---------- */
.wordbox { gap: 8px; justify-content: flex-start; }
.wordbox .q { font-size: 20px; }
.wclue { min-height: 2.8em; font-size: 14px; line-height: 1.4; color: var(--fg-soft); }
.wclue b { color: var(--fg); }
.wtip { font: inherit; font-weight: 600; color: var(--fg); background: transparent; border: 1px dashed currentColor; border-radius: 999px; padding: 6px 14px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.wtip:hover, .wtip:focus-visible { background: rgba(255,255,255,.1); }
.wgridwrap { flex: 1 1 0; min-height: 60px; display: flex; align-items: center; justify-content: center; container-type: size; }
.wgrid { --wg: 5px; --ws: 34px; display: grid; gap: var(--wg); justify-content: center; }
@supports (height: 1cqh) { .wgrid { --ws: max(20px, min(54px, calc((100cqh - 5 * var(--wg)) / 6), calc((100cqw - 4 * var(--wg)) / 5))); } }
.wrow { display: flex; gap: var(--wg); justify-content: center; }
.wt {
  width: var(--ws); height: var(--ws); display: grid; place-items: center; border-radius: 8px; border: 2px solid rgba(255, 255, 255, 0.26);
  background: var(--glass); font-weight: 800; font-size: calc(var(--ws) * 0.52); line-height: 1; color: var(--fg);
}
.wt.fill { border-color: rgba(255, 255, 255, 0.75); }
.wt.ok { background: #2f9e62; border-color: #2f9e62; color: #fff; }
.wt.pr { background: #c99a2b; border-color: #c99a2b; color: #1b1405; }
.wt.ab { background: #3a3a46; border-color: #3a3a46; color: rgba(255, 255, 255, 0.7); }
.wt.flip { animation: wfflip 0.5s ease both; }
@keyframes wfflip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.wrow.shake { animation: wfshake 0.4s; }
.wmsg { min-height: 1.3em; font-size: 13px; color: var(--muted); text-align: center; }
.kbd { display: grid; gap: 6px; }
.krow { display: flex; gap: 4px; justify-content: center; }
.key {
  flex: 1 1 0; max-width: 40px; height: clamp(36px, 5.6vh, 46px); padding: 0; border-radius: 8px; border: 0;
  background: rgba(255, 255, 255, 0.16); color: var(--fg); font-weight: 700; font-size: 15px;
}
.key.wide { flex: 1.7 1 0; max-width: 66px; font-size: 12px; }
.key.ok { background: #2f9e62; color: #fff; }
.key.pr { background: #c99a2b; color: #1b1405; }
.key.ab { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.4); }
.wordbox.done .kbd, .wordbox.done .wclue { display: none; }
@media (max-height: 780px) { .wordbox .q { display: none; } }
.wordbox .hint { display: none; }
@media (min-height: 781px) { .wordbox.done .hint { display: block; } }
.kbd, .kbd *, .wgrid, .winfo { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wordbox button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.winfo {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 4px; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.5); background: var(--glass); color: var(--fg); font-size: 13px; font-weight: 600; line-height: 1;
}
.winfo .wi { width: 22px; height: 22px; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; font: italic 700 14px/1 Georgia, "Times New Roman", serif; }
.winfo::after { content: ""; position: absolute; inset: -8px -6px; }
.winfo.new { animation: wfinfo 1.8s ease-out infinite; border-color: var(--fg); }
@keyframes wfinfo { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
.sheet.wsheet { align-items: center; padding: 24px; }
.sheet.wsheet .panel { max-width: 360px; margin: 0 auto; border-radius: 20px; border: 1px solid var(--line); text-align: left; animation: wfpop 0.25s ease-out; }
.sheet.wsheet p { color: var(--fg-soft); line-height: 1.45; }
.sheet.wsheet .wnote { margin: 0; font-size: 13px; color: var(--muted); }
.sheet.wsheet .wleg { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.sheet.wsheet .wleg li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; color: var(--fg-soft); }
.sheet.wsheet .wleg b { color: var(--fg); }
.sheet.wsheet .wleg .wt { --ws: 34px; flex: none; }
.sheet.wsheet .done { margin-top: 16px; }
@media (max-height: 700px) { .sheet.wsheet { padding: 16px; } .sheet.wsheet .panel { padding-top: 16px; padding-bottom: 16px; } .sheet.wsheet .wleg { gap: 8px; } .sheet.wsheet .wleg .wt { --ws: 30px; } }
@media (prefers-reduced-motion: reduce) { .winfo.new, .sheet.wsheet .panel { animation: none; } }
@media (max-height: 700px) {
  .wordbox { gap: 6px; }
  .wordbox .wgrid { --wg: 4px; }
  .wordbox .wclue { min-height: 2.5em; font-size: 13px; }
  .wordbox .key { height: 34px; }
  .wordbox .kbd { gap: 5px; }
}

/* Tagesziel geschafft */
.card.done .donebox { position: relative; z-index: 1; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 96px 28px 40px; }
.card.done .donebox img { width: 128px; height: 128px; border-radius: 50%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); animation: wfpop .6s cubic-bezier(.2, 1.4, .4, 1); }
.card.done h2 { margin: 0; font-size: 30px; }
.card.done p { margin: 0; max-width: 32ch; color: var(--fg-soft); font-size: 17px; line-height: 1.5; }
.card.done .donestat { margin-top: 4px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-weight: 600; font-size: 14px; color: var(--ac); }
.donebtns { display: grid; gap: 10px; width: 100%; max-width: 320px; margin-top: 8px; }
.donebtns button { font: inherit; font-weight: 700; min-height: 48px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: var(--fg); cursor: pointer; }
.donebtns button.primary { background: var(--ac); color: hsl(var(--h) 60% 10%); border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .card.done .donebox img { animation: none; } }

.daybar { height: 3px; margin: 6px var(--gutter-r) 4px var(--gutter-l); border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.daybar > i { display: block; height: 100%; width: 0; border-radius: 3px; background: #f0b35a; transition: width .4s ease; }
@media (prefers-reduced-motion: reduce) { .daybar > i { transition: none; } }

/* Spiele-Schalter in der Kopfzeile */
.gamebtn { border-radius: 50%; }
.gamebtn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* Sammelalbum: historische Kuriositätenkarten (Pergament, dezente rote Akzente, kleines Krähen-Siegel) */
.collbtn { position: relative; }
.collbtn .dot { position: absolute; top: 5px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: #C20318; box-shadow: 0 0 0 2px #0b0c0f, 0 0 0 3px #f4e8cf; }
.collbtn .dot[hidden] { display: none; }
.coll, .cdetail, .foundbar { --perg: #efe3c8; --perg2: #e2d2ae; --tinte: #2b2118; --tinte2: #5a4a38; --snap: #C20318; --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif; }
.coll {
  position: absolute; inset: 0; z-index: 8; overflow-y: auto; background: radial-gradient(120% 60% at 50% 0%, #2a1d1d 0%, #16120f 55%, #0b0a09 100%); color: var(--fg); padding-bottom: 40px; text-align: left; }
.coll[hidden] { display: none; }
.collhead { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 12px var(--gutter-r) 6px var(--gutter-l); background: linear-gradient(#16120f 75%, rgba(22, 18, 15, 0)); }
.collhead h2 { margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 700; }
.coll .back { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--fg); font-size: 26px; line-height: 1; padding: 0 0 3px; }
.ctabs { position: sticky; top: 58px; z-index: 3; display: flex; gap: 8px; padding: 4px var(--gutter-r) 10px var(--gutter-l); background: linear-gradient(#16120f 70%, rgba(22, 18, 15, 0)); }
.ctabs button { min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); color: var(--fg); font-size: 14px; font-weight: 600; }
.ctabs button[aria-selected="true"] { background: var(--perg); color: var(--tinte); border-color: var(--perg); }
.collbody { padding: 4px var(--gutter-r) 24px var(--gutter-l); display: flex; flex-direction: column; gap: 14px; }
.collbody > * { flex: none; }
.coll .now { padding: 18px; border-radius: 16px; background: rgba(239, 227, 200, 0.07); border: 1px solid rgba(239, 227, 200, 0.28); }
.coll .eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #ff7a85; font-weight: 700; }
.coll .ttl { margin: 4px 0 6px; font-family: var(--serif); font-size: 28px; line-height: 1.1; font-weight: 700; }
.coll .intro { margin: 0 0 14px; color: var(--fg-soft); font-size: 16px; line-height: 1.5; }
.coll .bar { height: 8px; border-radius: 99px; background: rgba(244, 241, 236, 0.14); overflow: hidden; }
.coll .bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #C20318, #ff6a5a); transition: width .6s ease; }
.coll .prog { margin: 8px 0 2px; font-size: 15px; color: var(--fg); }
.coll .hint { margin: 0; font-size: 14px; color: var(--muted); }
.kcard { position: relative; border-radius: 14px; background: radial-gradient(130% 90% at 30% 0%, #f6ecd4, var(--perg) 55%, var(--perg2)); color: var(--tinte); border: 1px solid #b9a67e; box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset 0 0 0 5px rgba(239, 227, 200, .9), inset 0 0 0 6px rgba(194, 3, 24, .55); padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; font-family: var(--serif); }
.kcard:focus-visible { outline: 3px solid #ff7a85; outline-offset: 2px; }
.kcard .cart { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #d8c79f; border: 1px solid #a99263; }
.kcard .cart img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.12) saturate(.95); }
.kcard .cart .ph { display: none; position: absolute; inset: 0; place-items: center; font-size: 34px; color: rgba(90, 74, 56, .55); background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .35), transparent 60%), repeating-linear-gradient(45deg, rgba(120, 95, 55, .06) 0 6px, transparent 6px 12px); }
.kcard .cart.noimg .ph, .kcard.locked .cart .ph { display: grid; }
.kcard .cart.noimg::after { content: "Bild folgt"; position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 12px; font-style: italic; color: var(--tinte2); }
.kcard .kbody { display: flex; flex-direction: column; gap: 3px; padding-right: 44px; }
.kcard .kno { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--snap); font-weight: 700; font-family: var(--body); }
.kcard h4, .kcard h3 { margin: 2px 0 0; font-size: 20px; line-height: 1.2; font-weight: 700; color: var(--tinte); }
.kcard .sub { margin: 0; font-style: italic; color: var(--tinte2); font-size: 15px; }
.kcard p { margin: 4px 0 0; font-size: 16px; line-height: 1.45; color: var(--tinte); }
.kcard .tease { font-style: italic; color: var(--tinte2); }
.kcard .stat { align-self: flex-start; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.kcard .stat.on { background: var(--snap); color: #fff; }
.kcard .stat.off { background: rgba(43, 33, 24, .1); color: var(--tinte2); border: 1px dashed #a99263; }
.kcard.locked { opacity: .82; filter: saturate(.7); }
.seal { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--snap); padding: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.seal img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.kcard.locked .seal { filter: grayscale(.7); opacity: .75; }
.coll .arch { margin: 14px 0 0; font-family: var(--serif); font-size: 18px; font-weight: 700; }
.coll .collempty { margin: 0; color: var(--muted); font-size: 14px; }
.coll details.old { border-radius: 14px; border: 1px solid var(--line); background: rgba(239, 227, 200, 0.05); padding: 0 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.coll details.old summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 0 2px; list-style: none; }
.coll details.old summary::-webkit-details-marker { display: none; }
.coll details.old summary span { display: flex; flex-direction: column; }
.coll details.old summary small { color: var(--muted); font-size: 13px; }
.coll details.old summary em { font-style: normal; font-size: 14px; color: #ff7a85; }
.shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 12px; border-bottom: 10px solid #4a3322; border-radius: 0 0 6px 6px; }
.cslot { border-radius: 12px; min-height: 150px; }
.cslot.full { display: flex; flex-direction: column; gap: 8px; padding: 8px; text-align: left; background: var(--perg); border: 1px solid #b9a67e; box-shadow: inset 0 0 0 3px rgba(239, 227, 200, .9), inset 0 0 0 4px rgba(194, 3, 24, .5); color: var(--tinte); font-family: var(--serif); font-size: 14px; }
.cslot.full .cart { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #d8c79f; }
.cslot.full .cart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cslot.full .cart .ph { display: none; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(120, 95, 55, .08) 0 6px, transparent 6px 12px); }
.cslot.full .cart.noimg .ph { display: block; }
.cslot.vacant { display: grid; place-items: center; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
/* Detailansicht */
.cdetail { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; background: #0b0a09; }
.cdetail[hidden] { display: none; }
.dhead { display: flex; justify-content: flex-end; padding: 12px var(--gutter-r) 4px var(--gutter-l); }
.dback { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--fg); font-size: 26px; line-height: 1; padding: 0 0 3px; }
.dscroll { overflow-y: auto; padding: 4px var(--gutter-r) 36px var(--gutter-l); display: flex; flex-direction: column; gap: 14px; }
.dscroll > * { flex: none; }
.kcard.big { cursor: default; padding: 14px; }
.kcard.big .frame { display: flex; flex-direction: column; gap: 10px; position: relative; }
.kcard.big .short { font-size: 17px; }
.know { padding: 16px; border-radius: 14px; background: rgba(239, 227, 200, .08); border: 1px solid rgba(239, 227, 200, .25); }
.know h4 { margin: 0 0 6px; font-family: var(--serif); font-size: 17px; color: #ff7a85; }
.know p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--fg-soft); }
.qa, .qans { border-radius: 12px; border: 1px solid var(--line); padding: 12px 14px; background: rgba(255, 255, 255, .04); }
.qa summary, .qans summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.qa p { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--fg-soft); }
.qans { margin-top: 10px; }
.cab { min-height: 48px; border-radius: 999px; border: 1px solid #b9a67e; background: var(--perg, #efe3c8); color: #2b2118; font-weight: 700; font-size: 15px; }
.cab[aria-pressed="true"] { background: transparent; color: var(--fg); border-color: var(--line); }
.cdetail .note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
/* Hinweis bei neuer Karte */
.foundbar { position: absolute; left: 12px; right: 12px; bottom: 16px; z-index: 7; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #efe3c8; color: #2b2118; border: 1px solid #b9a67e; box-shadow: 0 10px 28px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(239, 227, 200, .9), inset 0 0 0 4px rgba(194, 3, 24, .5); font-family: Georgia, serif; }
.foundbar[hidden] { display: none; }
.foundbar .seal { position: static; flex: none; }
.foundbar div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.foundbar strong { font-size: 14px; }
.foundbar span:not(.seal) { font-size: 15px; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foundbar button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: #C20318; color: #fff; font-weight: 700; font-size: 14px; }
.foundbar.in { animation: fbin .5s ease both; }
@keyframes fbin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .coll .bar span { transition: none; } .foundbar.in { animation: none; } }
@media (max-width: 400px) {
  .tabs { gap: 10px; }
  .tab { font-size: 15px; }
  .lead { gap: 8px; }
  .meta .count:empty { display: none; }
  .gear { width: 29px; }
  .row { gap: 6px; }
}
.kcard .cart.noimg img, .cslot .cart.noimg img { display: none; }
/* Fundstück-Siegel im Feed und Bildhinweis */
.kcard .cart, .cslot.full .cart { aspect-ratio: 17 / 10; }
.artnote { display: block; margin-top: -4px; font-family: var(--serif, Georgia, serif); font-size: 12px; font-style: italic; line-height: 1.3; color: var(--tinte2, #5a4a38); }
.findchip { position: absolute; right: var(--gutter-r); z-index: 4; display: flex; align-items: center; gap: 10px; max-width: 240px; padding: 8px 14px 8px 8px; border-radius: 16px; background: #efe3c8; color: #2b2118; border: 1px solid #b9a67e; box-shadow: 0 8px 22px rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(239, 227, 200, .9), inset 0 0 0 4px rgba(194, 3, 24, .5); text-align: left; font-family: Georgia, "Iowan Old Style", serif; animation: chipin .6s ease both; cursor: pointer; }
.findchip .seal { position: static; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #C20318; padding: 2px; box-shadow: 0 0 0 0 rgba(194, 3, 24, .5); animation: pulse 2.4s ease-out 3; }
.findchip .seal img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.findchip span:not(.seal) { display: flex; flex-direction: column; line-height: 1.25; }
.findchip strong { font-size: 14px; }
.findchip em { font-size: 12px; color: #5a4a38; }
.findchip.done { animation: none; background: #e8efd8; }
@keyframes chipin { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(194, 3, 24, .5); } 100% { box-shadow: 0 0 0 14px rgba(194, 3, 24, 0); } }
@media (prefers-reduced-motion: reduce) { .findchip, .findchip .seal { animation: none; } }

/* Sammelkarten: ruhige Veredelung (Papierton, feine Zierlinie, Datum), ohne Spieleffekte */
.kcard { background: radial-gradient(120% 80% at 20% 0%, rgba(255, 252, 240, .85), rgba(255, 252, 240, 0) 60%), radial-gradient(130% 90% at 80% 100%, rgba(170, 130, 70, .18), rgba(170, 130, 70, 0) 60%), linear-gradient(#f2e7cc, #e6d6b0); }
.kcard::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(90, 74, 56, .28); border-radius: 9px; pointer-events: none; }
.kcard .kcol { font-family: var(--body); font-size: 11px; letter-spacing: .06em; color: var(--tinte2); font-weight: 600; }
.kcard .kno { margin-top: 1px; }
.kcard .kdate { align-self: flex-start; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(90, 74, 56, .25); font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--tinte2); }
.kcard.locked { background: linear-gradient(#e9dfc6, #ddceaa); filter: saturate(.55); opacity: .9; border-style: dashed; box-shadow: 0 4px 12px rgba(0, 0, 0, .25), inset 0 0 0 5px rgba(239, 227, 200, .7); }
.kcard.locked::before { border-style: dashed; }
.kcard.locked .cart { aspect-ratio: 17 / 6; background: repeating-linear-gradient(45deg, rgba(120, 95, 55, .07) 0 7px, transparent 7px 14px), #d9c9a3; border-style: dashed; }
.kcard.locked .cart .ph { display: grid; }
.kcard.locked .cart .ph i { font-style: normal; font-family: var(--serif); font-size: 40px; color: rgba(90, 74, 56, .45); }
.kcard.locked h4 { font-size: 18px; color: var(--tinte2); }
.kcard.locked .tease { font-size: 14px; }
/* Kuriositätenkabinett: gemütliche Wunderkammer mit festen Plätzen */
.coll .placing { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(194, 3, 24, .16); border: 1px solid rgba(255, 122, 133, .5); font-size: 14px; }
.coll .placing em { font-style: italic; }
.coll .placing button { flex: none; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--fg); font-size: 13px; }
.wunder { border-radius: 14px 14px 6px 6px; background: linear-gradient(90deg, #3a2414, #4a2f1b 20%, #3a2414 40%, #4a2f1b 60%, #3a2414 80%, #4a2f1b); padding: 0 10px 10px; box-shadow: 0 14px 30px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 220, 160, .12); }
.cornice { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 8px 10px; font-family: var(--serif); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: #e6c98a; border-bottom: 2px solid rgba(0, 0, 0, .35); }
.cornice .seal { position: static; width: 28px; height: 28px; padding: 2px; }
.vitrine { background: radial-gradient(90% 60% at 50% 0%, rgba(255, 196, 120, .22), rgba(255, 196, 120, 0) 70%), linear-gradient(#2a1620, #1b0f15); box-shadow: inset 0 6px 14px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(0, 0, 0, .35); border-radius: 4px; margin-top: 8px; }
.shelfrow { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 14px 0; }
.shelfrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: linear-gradient(#8a6038, #5e3f22); box-shadow: 0 -2px 0 rgba(255, 220, 160, .18), 0 6px 10px rgba(0, 0, 0, .5); }
.obj { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 0 20px; background: none; border: 0; color: #e6c98a; min-height: 44px; cursor: pointer; }
.obj:focus-visible { outline: 3px solid #ff7a85; outline-offset: 2px; border-radius: 12px; }
.cameo { position: relative; display: block; width: 100%; max-width: 132px; aspect-ratio: 4 / 5; border-radius: 50% / 46%; overflow: hidden; background: #d8c79f; border: 4px solid #c9a24f; box-shadow: 0 0 0 2px #7a5a22, 0 8px 14px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 240, 200, .5); }
.cameo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.15) saturate(.95); }
.cameo.noimg img { display: none; }
.cameo.blank { background: rgba(255, 255, 255, .03); border: 2px dashed rgba(230, 201, 138, .4); box-shadow: none; display: grid; place-items: center; }
.cameo.blank i { font-style: normal; font-family: var(--serif); font-size: 34px; color: rgba(230, 201, 138, .55); }
.plaque { max-width: 100%; padding: 4px 8px; border-radius: 3px; background: linear-gradient(#e0c06f, #b08a3a); color: #2b2118; font-family: var(--serif); font-size: 12px; line-height: 1.2; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, .45); }
.plaque.faint { background: none; box-shadow: none; color: rgba(230, 201, 138, .6); font-style: italic; }
.sockel { height: 10px; margin-top: 6px; border-radius: 3px; background: linear-gradient(#5e3f22, #3a2414); }
.cpick { position: absolute; inset: 0; z-index: 12; display: flex; align-items: flex-end; background: rgba(0, 0, 0, .62); }
.cpick[hidden] { display: none; }
.cpick .panel { width: 100%; max-height: 82%; overflow-y: auto; padding: 18px var(--gutter-r) 22px var(--gutter-l); background: #1d1713; border-radius: 20px 20px 0 0; border-top: 1px solid var(--line); color: var(--fg); }
.cpick h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 20px; }
.cpick h4 { margin: 16px 0 8px; font-size: 14px; color: #e6c98a; letter-spacing: .06em; text-transform: uppercase; }
.cpick .plist { display: flex; flex-direction: column; gap: 8px; }
.cpick .prow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--fg); text-align: left; font-size: 15px; }
.cpick .prow.now { background: rgba(230, 201, 138, .1); }
.cpick .prow span:not(.thumb) { display: flex; flex-direction: column; min-width: 0; }
.cpick .prow small { color: var(--muted); font-size: 13px; }
.cpick .thumb { flex: none; width: 56px; height: 44px; border-radius: 8px; overflow: hidden; background: #d8c79f; border: 1px solid #a99263; }
.cpick .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpick .thumb.noimg img { display: none; }
.cpick .pbtns { display: flex; gap: 8px; margin-top: 10px; }
.cpick .pbtns button, .cpick .pclose { flex: 1; min-height: 46px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--fg); font-size: 15px; font-weight: 600; }
.cpick .pclose { width: 100%; margin-top: 16px; background: #efe3c8; color: #2b2118; border-color: #efe3c8; }
.cpick .pnote { margin: 0; color: var(--muted); font-size: 14px; }

/* Belohnung beim Fund: kleines Kartensymbol, das sich sanft entfaltet (kein Vollbild) */
.reveal { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 7; display: flex; justify-content: center; pointer-events: none; font-family: Georgia, "Iowan Old Style", serif; }
.reveal[hidden] { display: none; }
.reveal > * { pointer-events: auto; }
.reveal .rvicon { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; border-radius: 999px; border: 1px solid #b9a67e; background: #efe3c8; color: #2b2118; font-size: 14px; font-weight: 700; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); animation: rvicon .5s ease both; min-height: 44px; }
.reveal .rvicon .mini { position: relative; width: 28px; height: 36px; border-radius: 4px; background: linear-gradient(#f6ecd4, #e2d2ae); border: 1px solid #b9a67e; box-shadow: inset 0 0 0 2px rgba(194, 3, 24, .45); display: grid; place-items: center; transform: rotate(-6deg); }
.reveal .rvicon .seal { position: static; width: 18px; height: 18px; padding: 1px; box-shadow: none; }
.reveal .rvcard { display: none; width: 100%; max-width: 440px; max-height: 70vh; overflow-y: auto; position: relative; padding: 14px; border-radius: 16px; background: linear-gradient(#f2e7cc, #e6d6b0); color: #2b2118; border: 1px solid #b9a67e; box-shadow: 0 14px 34px rgba(0, 0, 0, .55), inset 0 0 0 4px rgba(239, 227, 200, .9), inset 0 0 0 5px rgba(194, 3, 24, .5); text-align: left; }
.reveal.p2 .rvicon { display: none; }
.reveal.p2 .rvcard { display: block; animation: rvcard .55s cubic-bezier(.2, .8, .25, 1) both; }
.reveal.quick .rvcard, .reveal.quick .rvicon { animation: none; }
.rvx { position: absolute; top: 6px; right: 8px; width: 40px; height: 40px; border: 0; background: none; font-size: 26px; line-height: 1; color: #5a4a38; z-index: 2; }
.rvtop { display: flex; gap: 12px; align-items: center; padding-right: 30px; }
.rvimg { flex: none; width: 104px; aspect-ratio: 17 / 10; border-radius: 8px; overflow: hidden; background: #d8c79f; border: 1px solid #a99263; }
.rvimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rvimg.noimg img { display: none; }
.rvlab { font-family: system-ui, sans-serif; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #C20318; font-weight: 700; }
.rvtop h3 { margin: 2px 0 0; font-size: 18px; line-height: 1.2; }
.rvtop .sub { margin: 2px 0 0; font-style: italic; font-size: 14px; color: #5a4a38; }
.rvshort { margin: 10px 0 0; font-size: 16px; line-height: 1.45; }
.rvdet { margin-top: 8px; font-size: 14px; }
.rvdet summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; color: #5a4a38; font-weight: 700; font-family: system-ui, sans-serif; font-size: 13px; }
.rvdet p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; }
.rvbtns { display: flex; gap: 8px; margin-top: 12px; }
.rvbtns button { flex: 1; min-height: 46px; border-radius: 999px; font-size: 15px; font-weight: 700; border: 1px solid #b9a67e; background: transparent; color: #2b2118; }
.rvbtns .go { background: #C20318; border-color: #C20318; color: #fff; }
.rvnote { margin: 8px 0 0; font-size: 11.5px; font-style: italic; color: #5a4a38; }
.rvmoreinfo { margin: 4px 0 0; font-size: 12px; color: #5a4a38; font-family: system-ui, sans-serif; }
.rvmoreinfo:empty { display: none; }
@keyframes rvicon { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes rvcard { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal .rvicon, .reveal.p2 .rvcard { animation: none; } }

/* Fortschritt, Gratulation und Abschlusskarte */
.coll .prog .rest { color: var(--muted); }
.coll .bar.full span { background: linear-gradient(90deg, #C20318, #e6a44a); }
.coll .cheer { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(230, 201, 138, .12); border: 1px solid rgba(230, 201, 138, .35); color: #f0dcae; font-size: 15px; }
.coll .keep { margin: 0; font-size: 13px; color: var(--muted); }
.kcard.final { flex-direction: row; align-items: center; gap: 14px; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 252, 240, .9), rgba(255, 252, 240, 0) 60%), linear-gradient(#f3e8cc, #e4d3aa); }
.kcard.final { cursor: default; }
.kcard.final .crest { flex: none; position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #f6ecd4 55%, transparent 56%); box-shadow: 0 0 0 2px rgba(194, 3, 24, .55), 0 0 0 6px #efe3c8, 0 0 0 7px rgba(194, 3, 24, .35); }
.kcard.final .crest .seal { position: static; width: 64px; height: 64px; padding: 3px; }
.kcard.final .kbody { padding-right: 0; }
.kcard.final h4 { font-size: 20px; }
.reveal .rvdone { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(194, 3, 24, .08); border: 1px solid rgba(194, 3, 24, .3); font-size: 14px; line-height: 1.4; }

/* Anpassung an die aktuelle Markup-Struktur (Kopfbereich, Kicker, Lead) im alten dunklen Pergament-Look */
.collhead { justify-content: flex-start; gap: 10px; }
.coll .back { width: auto; min-width: 44px; height: 40px; border-radius: 999px; padding: 0 14px; font-size: 15px; font-weight: 600; line-height: 1; }
.collhead .ctabs { position: static; padding: 0; background: none; margin-left: auto; }
.collhead { background: linear-gradient(#16120f 80%, rgba(22, 18, 15, 0)); }
.mast { display: flex; flex-direction: column; gap: 2px; padding: 0 0 4px; }
.mastkick { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #ff7a85; font-weight: 700; }
.mast h2 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 700; }
.mastsub { font-size: 14px; color: var(--muted); }
.kcard .khead { display: flex; flex-direction: column; gap: 3px; padding-right: 44px; }
.kcard .kcol { font-family: var(--body); font-size: 11px; letter-spacing: .06em; color: var(--tinte2); font-weight: 600; }
.kcard .lead { display: block; margin: 4px 0 0; font-size: 16px; line-height: 1.45; color: var(--tinte); }
.kcard .short { margin: 4px 0 0; font-size: 17px; line-height: 1.5; color: var(--tinte); }
.kcard .kdate { align-self: stretch; }
.kcard .tease { margin: 4px 0 0; }
.kcard.final { flex-direction: column; align-items: stretch; text-align: left; }
.kcard.final .crest { align-self: center; }
.plaque small { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.cdetail .dhead { border: 0; }
.cpick .pclose, .rvbtns .go { border-radius: 999px; }
.donebtns .testbtn { background: transparent; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
.mast { display: none; }
.kcard .tease, .kcard .lead, .kcard .kdate { padding-right: 0; } .kcard .tease { padding-right: 46px; } .kcard.locked .seal { top: auto; }
/* Navigation im Sammelbereich: gleiche Reiter wie in der Kopfzeile (Feed · Sammlung · Kabinett) */
.collhead { display: block; padding: 12px var(--gutter-r) 8px var(--gutter-l); }
.collhead .tabs { gap: 20px; }
.collhead .tab { position: relative; min-height: 40px; }
.collhead .tab[data-feed] { color: var(--muted); }
.ndot { position: absolute; top: 4px; right: -9px; width: 8px; height: 8px; border-radius: 50%; background: #C20318; box-shadow: 0 0 0 2px #16120f; }
.kcard .neu { position: absolute; right: 54px; top: 18px; padding: 2px 8px; border-radius: 999px; background: #C20318; color: #fff; font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; z-index: 1; }
@media (max-width: 400px) { .collhead .tabs { gap: 14px; } .collhead .tab { font-size: 15px; } }

/* Maskottchen-Varianten */
.card.done .donebox img.mascot { width: 200px; height: 200px; border-radius: 0; box-shadow: none; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.loadicon.mascot { width: 96px; height: 96px; object-fit: contain; }
.emptymascot { display: block; margin: 0 auto 8px; width: 120px; height: 120px; object-fit: contain; }
.crestcrow { width: 84px; height: 84px; object-fit: contain; display: block; margin: 0 auto; }

/* Fundstück-Maskottchen: fliegende Krähe mit Glühbirne */
.seal { background: #f3e6c8; }
.seal img { object-fit: contain; border-radius: 0; padding: 3px; }
.findchip .seal { width: 56px; height: 46px; border-radius: 0; background: transparent; padding: 0; box-shadow: none; animation: none; }
.findchip .seal img { padding: 0; object-fit: contain; border-radius: 0; filter: drop-shadow(0 3px 5px rgba(0,0,0,.3)); animation: wfpop .6s cubic-bezier(.2, 1.4, .4, 1); }
.reveal .rvicon .seal img { padding: 0; }

/* Maskottchen als Bild bei Beispielkarten */
.mpic { display: block; height: clamp(90px, 15vh, 150px); width: auto; max-width: 70%; margin: 0 0 6px auto; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
@media (max-height: 720px) { .mpic { display: none; } }

/* lange deutsche Wörter in Überschriften sauber trennen */
.card h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

.adlink { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; color:var(--fg); border-radius:50%; }
.adlink:hover { background:rgba(244,241,236,.14); }

.adlink { width:30px; }
@media (max-width: 400px) { .tab { font-size: 14px; } .lead { gap: 6px; } .top .brand { width: 26px; height: 26px; } }
@media (max-width: 380px) { #savedN { display: none; } .tab { padding-left: 2px; padding-right: 2px; } }
@media (max-width: 380px) { .tabs { gap: 0; } .tab { font-size: 13.5px; } .meta .gear, .accbtn, .adlink { width: 27px; } }

/* ---------- Titelseite ---------- */

/* ---------- Willkommen: Themenauswahl beim ersten Start ---------- */
.onb { position: absolute; inset: 0; z-index: 20; background: #0b0c0f; display: flex; align-items: center; justify-content: center; overflow-y: auto; }
.onbbox { width: 100%; max-width: 460px; box-sizing: border-box; padding: 28px var(--gutter-r) 28px var(--gutter-l); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: auto; }
.onbbox img { border-radius: 50%; }
.onbbox h2 { margin: 0; font-family: var(--display); font-size: 26px; }
.onbbox p { margin: 0; color: var(--fg-soft); font-size: 15px; line-height: 1.5; }
.onbopts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0; }
.onbopts button { font: inherit; font-size: 15px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--fg); cursor: pointer; }
.onbopts button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 700; }
.onbgo { font: inherit; font-weight: 800; min-height: 50px; padding: 0 28px; border-radius: 999px; border: 0; background: var(--red); color: #fff; cursor: pointer; }
.onbskip { font: inherit; font-size: 14px; background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; min-height: 40px; }

/* ---------- Titelseite als Zeitungs-Pop-up ---------- */
.paperov { position: absolute; inset: 0; z-index: 25; background: rgba(5,5,8,.68); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.paper { position: relative; width: 100%; max-width: 380px; max-height: 100%; overflow: auto; box-sizing: border-box; background: #f3ecdc; color: #1b1a17; border-radius: 6px; padding: 18px 18px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.55); font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
.paper * { box-sizing: border-box; }
.pclose { position: absolute; top: 6px; right: 8px; width: 34px; height: 34px; border: 0; background: none; font-size: 26px; line-height: 1; color: #1b1a17; cursor: pointer; }
.pmast { text-align: center; border-top: 4px double #1b1a17; padding-top: 8px; }
.pname { display: block; font-size: 38px; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.psub { display: block; font-family: system-ui, sans-serif; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; margin-top: 5px; color: #55503f; }
.pdate { display: flex; justify-content: space-between; gap: 8px; font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600; border-top: 1px solid #1b1a17; border-bottom: 3px double #1b1a17; padding: 5px 0; margin: 10px 0 12px; color: #3d392c; }
.plead { overflow: hidden; }
.pdraw { float: right; width: 96px; height: auto; margin: 0 0 4px 10px; mix-blend-mode: multiply; }
.pkick { display: block; font-family: system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #a3211d; margin-bottom: 4px; }
.plead h2 { font-family: inherit; margin: 0 0 6px; font-size: 25px; line-height: 1.1; font-weight: 800; hyphens: auto; }
.plead p { margin: 0; font-size: 14.5px; line-height: 1.4; color: #3d392c; }
.pmore { border-top: 1px solid #1b1a17; margin-top: 12px; padding-top: 9px; }
.phead { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-bottom: 1px solid #cfc6ae; padding: 8px 0; color: inherit; cursor: pointer; }
.phead:last-child { border-bottom: 0; }
.phead img { width: 40px; height: 40px; object-fit: contain; flex: none; mix-blend-mode: multiply; }
.phead span { font-size: 16px; font-weight: 700; line-height: 1.2; }
.phead b { display: block; font-family: system-ui, sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #a3211d; margin-bottom: 2px; }
.pgo { display: block; width: 100%; margin-top: 12px; min-height: 46px; border: 0; border-radius: 4px; background: #1b1a17; color: #f3ecdc; font-family: system-ui, sans-serif; font-weight: 700; font-size: 15px; cursor: pointer; }
@media (max-height: 700px) { .pdraw { width: 72px; } .plead h2 { font-size: 22px; } .pname { font-size: 32px; } .phead { padding: 6px 0; } }

.pgo.alt { background: transparent; color: #1b1a17; border: 1.5px solid #1b1a17; }
.sharebox { max-width: 340px; } .sharet { font-family: inherit; font-size: 19px; line-height: 1.2; margin: 2px 0 8px; }
.copt.right { background: #cfe6c8; } .copt.wrong { background: #f0cccb; } .copt { padding-left: 8px; padding-right: 8px; }
.chalpill { position: absolute; left: 50%; top: 190px; transform: translateX(-50%); z-index: 15; white-space: nowrap; display: flex; align-items: center; background: #f3ecdc; color: #1b1a17; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.45); overflow: hidden; }
.chalgo, .chalx { font: inherit; border: 0; background: none; color: inherit; cursor: pointer; } .chalgo { white-space: nowrap; font-weight: 700; font-size: 14px; min-height: 40px; padding: 0 6px 0 18px; } .chalx { font-size: 20px; width: 38px; min-height: 40px; }
.chalinfo { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: #3d392c; }

/* neugierige Krähe */
.peekcrow { position: absolute; right: 0; top: 34%; z-index: 14; pointer-events: none; transform: translateX(100%); transition: transform .55s cubic-bezier(.3,1.3,.5,1); }
.peekcrow.in { transform: translateX(34%); } .peekcrow.talk { transform: translateX(2%); } .peekcrow.out { transform: translateX(100%); transition-duration: .4s; }
.peekbtn { pointer-events: auto; display: block; border: 0; background: none; padding: 0; cursor: pointer; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); animation: peekhop 1.1s ease-out .6s 2, peekwig 2.4s ease-in-out 2.8s infinite; transform-origin: 80% 90%; }
.peekbtn img { display: block; height: auto; }
@keyframes peekhop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-16px) rotate(-6deg); } 65% { transform: translateY(0) rotate(4deg); } }
@keyframes peekwig { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
.peekbub { pointer-events: none; position: absolute; right: 158px; top: 4px; width: 220px; background: #f3ecdc; color: #1b1a17; border-radius: 14px; padding: 10px 12px; font: 600 14px/1.35 "Iowan Old Style", Georgia, serif; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.peekbub b { display: block; font: 800 10px system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #a3211d; margin-bottom: 3px; }
.peekbub::after { content: ""; position: absolute; right: -7px; top: 34px; border: 8px solid transparent; border-left-color: #f3ecdc; border-right: 0; }
@media (prefers-reduced-motion: reduce) { .peekbtn { animation: none; } .peekcrow { transition: none; } }
.chalchip { border-style: dashed; }
.peekbtn img.flip { transform: scaleX(-1); }
.resetall { font: inherit; color: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0 0 0 6px; }
.streak { margin-top: 10px; padding: 10px 12px; border: 1.5px solid #1b1a17; border-radius: 6px; font-family: system-ui, sans-serif; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.streak b { font-size: 17px; } .streak > span { color: #55503f; }
.sbadges { flex-basis: 100%; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.sbadge { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid #b9b09a; color: #8a826c; }
.sbadge.on { background: #1b1a17; border-color: #1b1a17; color: #f3ecdc; }
.snew { flex-basis: 100%; margin: 4px 0 0; font-weight: 800; color: #a3211d; }
.peekbub .cname { display: block; font: 800 15px/1.2 "Iowan Old Style", Georgia, serif; margin-bottom: 3px; }
.calbline { margin: 10px 0 6px; font-size: 14px; line-height: 1.4; color: #3d392c; min-height: 40px; }
.cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ctile { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 1px solid #cfc6ae; border-radius: 6px; background: #ece3cf; color: #1b1a17; cursor: pointer; }
.ctile img { width: 64px; height: 64px; object-fit: contain; filter: brightness(0); opacity: .18; }
.ctile.on img { filter: none; opacity: 1; } .ctile img.flip { transform: scaleX(-1); }
.ctile span { font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; }
.ctile:disabled { cursor: default; }

/* Wer oder was bin ich? */
.whobox .clues { display: flex; flex-direction: column; gap: 7px; }
.whobox .clue { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); font-size: 16px; line-height: 1.3; animation: cluein 0.3s ease; }
.whobox .clue b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent, #ffd166); color: #1a1a1a; display: grid; place-items: center; font-size: 13px; }
.whobox .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.whobox .opt { min-height: 44px; font-size: 15px; }
.gamebox.whobox.fit1 .clue, .gamebox.whobox.fit2 .clue { font-size: 14px; padding: 6px 10px; }
@keyframes cluein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Wissens-Puzzle: Auftrag und Blitz-Steine */
.goalrow { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.gp { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; font-size: 14px; font-weight: 700; background: hsl(var(--th) 50% 22%); border: 2px solid hsl(var(--th) 70% 60%); color: hsl(var(--th) 90% 88%); font-variant-numeric: tabular-nums; }
.gp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gp.ok { opacity: 0.7; }
.tile.sp .t { background: hsl(var(--th) 70% 40%); border-color: #fff8c2; box-shadow: 0 0 10px 2px hsl(var(--th) 100% 70% / 0.8); color: #fff8c2; animation: spglow 1.2s ease-in-out infinite alternate; }
.tile.sp .t svg { fill: currentColor; }
@keyframes spglow { from { box-shadow: 0 0 5px 1px hsl(var(--th) 100% 70% / 0.5); } to { box-shadow: 0 0 14px 4px hsl(var(--th) 100% 75% / 0.95); } }
@media (prefers-reduced-motion: reduce) { .tile.sp .t { animation: none; } }

/* Punktestand und Fehler melden */
.stable { display: flex; flex-direction: column; margin-top: 8px; border-top: 1px solid rgba(27,26,23,.25); }
.srow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(27,26,23,.15); }
.srow span { display: flex; flex-direction: column; } .srow small { font-size: 12px; opacity: .7; } .srow em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.sbig { margin: 2px 0 0; font-size: 34px; line-height: 1.1; } .sfoot { font-size: 12.5px; line-height: 1.4; margin: 10px 0 0; opacity: .8; }
.pgo.rep { background: transparent; border: 0; min-height: 36px; margin-top: 6px; font-weight: 600; font-size: 13.5px; color: #1b1a17; text-decoration: underline; opacity: .75; }
.rchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.rchip { min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1.5px solid #1b1a17; background: transparent; color: #1b1a17; font: 600 13.5px system-ui, sans-serif; cursor: pointer; }
.rchip[aria-pressed="true"] { background: #1b1a17; color: #f3ecdc; }
.rnote { width: 100%; border: 1.5px solid #1b1a17; border-radius: 4px; background: rgba(255,255,255,.5); color: #1b1a17; padding: 8px; font: 14px/1.4 system-ui, sans-serif; resize: vertical; }
.rwiki { font-size: 13px; line-height: 1.4; margin: 8px 0 0; } .rwiki a { color: inherit; }
.pgo:disabled { opacity: .45; cursor: default; }

/* Challenge-Ergebnis mit Maskottchen */
.rhero { text-align: center; margin-top: 10px; }
.rglow { width: 170px; height: 150px; margin: 0 auto 4px; display: grid; place-items: end center; background: radial-gradient(closest-side, rgba(255,214,120,.55), rgba(255,214,120,0) 100%); }
.t0 .rglow { background: radial-gradient(closest-side, rgba(150,160,190,.4), rgba(150,160,190,0) 100%); }
.rmas { height: 150px; width: auto; max-width: 170px; object-fit: contain; animation: rpop .55s cubic-bezier(.2,1.4,.4,1) both; transform-origin: 50% 100%; }
.t3 .rmas, .t4 .rmas { animation: rpop .55s cubic-bezier(.2,1.4,.4,1) both, rhop 1.6s ease-in-out .6s infinite; }
@keyframes rpop { from { transform: scale(.6) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rhop { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .rmas { animation: none !important; } }
.rtitle { font-family: inherit; font-size: 30px; line-height: 1.05; font-weight: 800; margin: 2px 0 6px; }
.rscore { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-family: system-ui, sans-serif; }
.rscore b { font-size: 40px; line-height: 1; font-family: "Iowan Old Style", Georgia, serif; } .rscore span { font-size: 15px; color: #55503f; font-weight: 600; }
.rmarks { display: flex; justify-content: center; gap: 8px; margin: 10px 0 6px; }
.rm { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 17px system-ui, sans-serif; color: #fff; }
.rm.ok { background: #2f9e6a; } .rm.no { background: #b9ae95; }
.rline { margin: 6px 4px 0; font-size: 14.5px; line-height: 1.4; color: #3d392c; }
.streak { background: #ebe2cc; border: 0; border-radius: 12px; justify-content: center; text-align: center; padding: 12px; }
.streak b { font-size: 20px; } .sbadges { justify-content: center; }

/* Wochenübersicht, Sonderkrähen, Einladen, Monatsausgabe */
.rweek { margin-top: 12px; padding: 10px 8px 8px; background: #ebe2cc; border-radius: 12px; }
.rwl { display: block; text-align: center; font: 800 11px system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #55503f; margin-bottom: 6px; }
.rwd { display: flex; justify-content: space-between; gap: 4px; }
.wk { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: system-ui, sans-serif; }
.wk small { font-size: 11px; font-weight: 700; color: #6b654f; }
.wk.today small { color: #a3211d; }
.wb { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; }
.wb.none { background: transparent; color: #a79d83; border: 1.5px dashed #b9b09a; } .wb.fut { background: transparent; border: 1.5px dashed #d2c9b2; }
.wb.r0 { background: #8f879c; } .wb.r1 { background: #8a7bb5; } .wb.r2 { background: #c98a2e; } .wb.r3 { background: #e0a53a; } .wb.r4 { background: #2f9e6a; }
.wk.today .wb { box-shadow: 0 0 0 2.5px #f3ecdc, 0 0 0 4.5px #a3211d; }
.ctile.sp:not(.on) img { filter: brightness(0) opacity(.22); }
.ctile.sp:not(.on) { cursor: help; }
.spt { margin-top: 14px; font-weight: 700; }
.spnew { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; background: #1b1a17; color: #f3ecdc; border: 2px solid #ffd166; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.5); font: 600 14px system-ui, sans-serif; animation: spin .5s cubic-bezier(.2,1.4,.4,1) both; max-width: calc(100% - 24px); }
.spnew img { height: 54px; width: auto; } .spnew span { display: flex; flex-direction: column; } .spnew b { color: #ffd166; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.spnew.out { opacity: 0; transition: opacity .5s; }
@keyframes spin { from { transform: translateX(-50%) translateY(30px) scale(.8); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.pact { margin-top: 6px; } .pact .pgo em { font-style: normal; font-size: 12px; font-weight: 700; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #f3ecdc; color: #1b1a17; }
.invpics { display: flex; justify-content: center; gap: 6px; margin: 4px 0 6px; } .invpics img { height: 96px; width: auto; }
.chalinfo + .pgo.nxt { margin-top: 10px; }
.edition { max-width: 400px; } .edition .pname { font-size: 34px; }
.edstats { display: flex; justify-content: space-between; gap: 6px; margin: 10px 0 4px; padding: 8px 0; border-top: 1px solid rgba(27,26,23,.3); border-bottom: 1px solid rgba(27,26,23,.3); font: 11px system-ui, sans-serif; text-align: center; text-transform: uppercase; letter-spacing: .06em; color: #55503f; }
.edstats span { flex: 1; display: flex; flex-direction: column; } .edstats b { font: 800 22px "Iowan Old Style", Georgia, serif; color: #1b1a17; letter-spacing: 0; }
.edlead h3 { font-family: inherit; font-size: 26px; line-height: 1.1; margin: 4px 0 6px; } .edlead p { margin: 0 0 6px; font-size: 15px; line-height: 1.45; }
.edmore { margin-top: 10px; border-top: 2px solid #1b1a17; padding-top: 8px; } .edit { margin: 8px 0; font-size: 13.5px; line-height: 1.35; } .edit b { display: block; font-size: 15px; } .edit span { color: #3d392c; }
.edsrc { font-size: 10.5px; line-height: 1.4; color: #6b654f; margin: 10px 0 0; word-break: break-word; }
.chk { font-weight: 700; }
@media print {
  body.printing-ed .phone > *:not(.paperov) { display: none !important; }
  body.printing-ed, body.printing-ed .phone { background: #fff !important; height: auto !important; overflow: visible !important; }
  body.printing-ed .paperov { position: static !important; background: none !important; display: block !important; padding: 0 !important; }
  body.printing-ed .paper { box-shadow: none !important; max-height: none !important; overflow: visible !important; max-width: 100% !important; background: #fff !important; }
  body.printing-ed .noprint, body.printing-ed .pclose { display: none !important; }
}
.paper .srow { padding: 5px 0; } .paper .stable { margin-top: 4px; }
@media print { body.printing-ed .phone { box-shadow: none !important; width: 100% !important; max-width: none !important; border-radius: 0 !important; } }

.qanote{font-style:italic}
.edhook{display:flex;flex-direction:column;gap:5px;margin:2px 0 10px;padding:10px 12px;border-left:3px solid var(--accent,#f2b84b);background:rgba(255,255,255,.07);border-radius:0 10px 10px 0;max-width:100%}
.edtag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.edmain{font-size:18px;line-height:1.3;font-weight:700}
.edteaser{font-size:14px;line-height:1.35;opacity:.9}
.edhint{font-size:12px;opacity:.65;font-style:italic}

/* Interaktive Geschichten (freiwillig, ohne Pop-up; Auflösung klappt sanft innerhalb der Karte auf) */
.stwrap{display:flex;flex-direction:column;gap:8px;width:100%;max-width:60ch}
.starea{display:flex;flex-direction:column;gap:7px;align-items:flex-start;width:100%}
.sttag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.8;color:var(--ac)}
.stsetup{font-size:15px;line-height:1.4;color:var(--fg-soft)}
.stq{font-size:19px;line-height:1.3;font-weight:700}
.stopts{display:flex;flex-direction:column;gap:6px;width:100%}
.stopt{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:8px 12px;text-align:left;font:inherit;font-size:15px;line-height:1.3;color:inherit;background:rgba(255,255,255,.09);border:1px solid var(--line,rgba(255,255,255,.2));border-radius:12px;cursor:pointer}
.stopt:hover:not(:disabled){background:rgba(255,255,255,.15)}
.stopt:focus-visible,.stlink:focus-visible,.stmore summary:focus-visible,.strevin:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.stl{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:rgba(255,255,255,.14)}
.stt{flex:1}
.stmark{flex:none;font-size:12px;font-weight:700;color:var(--ac)}
.stopt:disabled{cursor:default;color:inherit;opacity:1}
.stopt.right{border-color:var(--ac);background:rgba(255,255,255,.14)}
.stopt.mine:not(.right){border-style:dashed}
.stopt.gone{display:none}
.stact{display:flex;gap:6px;flex-wrap:wrap}
.stlink{min-height:44px;padding:0 12px;background:none;border:0;font:inherit;font-size:14px;font-weight:600;color:var(--ac);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.strev{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.strev.open{grid-template-rows:1fr}
.strevin{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:6px}
.strev:not(.open) .strevin{visibility:hidden}
.stverdict{font-weight:700;color:var(--ac);font-size:15px}
.stcmp{font-size:14px;opacity:.9}
.strevt{font-size:17px;line-height:1.35;font-weight:700}
.stexp,.stextra{font-size:15px;line-height:1.4;color:var(--fg-soft)}
.stcrow{display:flex;align-items:center;gap:8px;font-size:14px;font-style:italic;color:var(--fg-soft)}
.stcrow img{flex:none;width:34px;height:34px;object-fit:contain}
.stmore summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--ac)}
.stmore p{margin-top:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-height:760px){.hasstory .stq{font-size:17px}.stopt{min-height:42px;padding:6px 10px;font-size:14px}.hasstory h2{font-size:22px}.stcrow img{width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){.strev{transition:none}}
@media (max-height:700px){
  .hasstory .info{gap:5px;padding-bottom:12px}
  .hasstory h2{font-size:20px;margin-top:0}
  .hasstory .sthead{display:none}
  .hasstory .stq{font-size:16px}.hasstory .stsetup{font-size:13px}
  .hasstory .stopt{min-height:38px;padding:5px 9px;font-size:13.5px;gap:8px}.hasstory .stl{width:20px;height:20px;font-size:11px}
  .hasstory .stlink,.hasstory .stmore summary{min-height:36px}
  .hasstory .strevt{font-size:15px}.hasstory .stexp,.hasstory .stextra{font-size:14px;line-height:1.35}
  .hasstory .lic{font-size:11px;line-height:1.3}
  .hasstory .info{overflow-y:auto}                      /* Sicherheitsnetz für sehr kleine Geräte: nichts wird unerreichbar abgeschnitten */
}
@media (max-height:700px){.hasstory .stcrow img{display:none}}
@media (max-height:660px){.hasstory .info{gap:4px;padding-bottom:8px}.hasstory .stverdict{font-size:14px}}

/* Krähe als Miträtslerin: Kommentar, Denkanstoß, Reaktion. Immer im Textfluss, nie über Inhalten. */
.ccrow{display:flex;align-items:flex-end;gap:8px;max-width:100%;margin:2px 0;animation:ccin .5s ease-out both}
.ccrow.wait{animation-play-state:paused}
.inview .ccrow.wait{animation-play-state:running}
.ccpic{flex:none;width:48px;height:48px;object-fit:contain;padding:4px;box-sizing:border-box;background:#f3ead8;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.18);transform-origin:50% 100%}
.inview .ccpic{animation:ccbob 3.2s ease-in-out 1s 2}
.ccbub{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:14px 14px 14px 4px;padding:7px 11px;font-size:14px;line-height:1.35;font-style:italic;color:var(--fg-soft)}
.ccrow.riddle .ccbub,.ccrow.react .ccbub{border-color:var(--ac)}
@keyframes ccin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ccbob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.ccrow,.ccpic,.inview .ccpic{animation:none!important}}
@media (max-height:700px){.ccpic{width:36px;height:36px;padding:3px}.ccbub{font-size:13px;padding:5px 9px}}

.ccrow.mini .ccpic{display:none}

/* ---------- Eigenwerbekarte (kompakt, Smartphone) ---------- */
.card.housead { justify-content: flex-end; }
.card.housead .info { gap: 8px; padding-top: 140px; padding-bottom: 24px; }
.housead .adtag { font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
@media (max-width: 400px) { .housead .hlong { display: none; } }
.housead .hrow { display: flex; align-items: center; gap: 10px; }
.housead .hcrow { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; background: #fff; border: 1px solid rgba(29,34,51,.14); padding: 3px; box-sizing: border-box; flex: none; }
.housead .hhead { font-size: clamp(24px, 7.2vw, 30px); line-height: 1.12; margin: 2px 0 0; color: var(--ink); }
.housead .hben { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14.5px; line-height: 1.3; color: #2b3042; }
.housead .hben li { padding-left: 18px; position: relative; }
.housead .hben li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); }
.housead .hben b { color: var(--ac); }
.housead .hex { position: relative; margin-top: 6px; padding: 14px 12px 10px; border: 1.5px dashed rgba(29,34,51,.35); border-radius: 14px; background: rgba(255,255,255,.55); }
.housead .hexlab { position: absolute; top: -9px; left: 12px; padding: 0 8px; background: #f2e9d6; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ac); border-radius: 6px; }
.housead .hextag { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(29,34,51,.65); }
.housead .hextit { font-size: 16px; font-weight: 800; line-height: 1.25; margin: 3px 0 4px; color: var(--ink); }
.housead .hexlink { font-size: 13px; font-weight: 700; color: var(--ac); }
.card.ad .more.hbtn { display: flex; align-items: center; justify-content: center; min-height: 54px; font-size: 18px; font-weight: 800; border-radius: 16px; margin-top: 8px; background: var(--ac); color: #fff; width: 100%; box-sizing: border-box; box-shadow: 0 8px 18px rgba(168,72,15,.35); text-decoration: none; }
@media (max-height: 775px) { .card.housead .info { padding-top: 124px; gap: 6px; } .housead .hben { font-size: 13.5px; gap: 3px; } .housead .hextit { font-size: 15px; } .housead .hcrow { width: 44px; height: 44px; } }
@media (max-height: 690px) { .housead .hexlink, .housead .hextag { display: none; } .housead .hex { padding-top: 12px; } .housead .hhead { font-size: 22px; } }
@media (max-height: 620px) { .housead .hex { display: none; } .housead .hben { font-size: 13px; } .card.housead .info { padding-top: 110px; } }
@media (max-height: 690px) { .card.housead .info { padding-top: 96px; padding-bottom: 14px; gap: 5px; } .housead .hhead { font-size: 21px; } .housead .hben { font-size: 12.5px; gap: 2px; } .housead .hextit { font-size: 14px; margin: 0; } .card.ad .more.hbtn { min-height: 46px; font-size: 16px; margin-top: 4px; } .housead .hcrow { width: 38px; height: 38px; } .housead .lic { font-size: 11px; } }

/* ---------- Kurz erklärt (Fachbegriffe bei Steuern und Finanzen) ---------- */
.gloss { width: 100%; max-width: 60ch; margin-top: 2px; padding: 8px 11px 9px; border-left: 3px solid var(--ac); border-radius: 4px 12px 12px 4px; background: rgba(255,255,255,.07); font-size: 13px; line-height: 1.35; color: var(--fg-soft); text-align: left; }
.gloss .glt { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ac); }
.gloss dl { margin: 0; display: grid; gap: 3px; }
.gloss dl > div { display: block; }
.gloss dt, .gloss dd { display: inline; margin: 0; }
.gloss dt { font-weight: 800; color: var(--fg); }
.gloss dt::after { content: ":"; }
.glmore { margin-top: 4px; }
.glmore summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ac); padding: 5px 0 3px; min-height: 24px; list-style: none; }
.glmore summary::-webkit-details-marker { display: none; }
.glmore summary::before { content: "＋ "; }
.glmore[open] summary::before { content: "－ "; }
.glmore[open] { max-height: 26vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-height: 760px) { .gloss { font-size: 12.5px; padding: 6px 10px 7px; } .gloss dl { gap: 2px; } }
@media (max-height: 680px) { .gloss { font-size: 12px; line-height: 1.3; } .gloss .glt { margin-bottom: 1px; } }

/* Erklärkasten: Karte wird bei Platzmangel schrittweise kompakter */
.info.g1 { gap: 6px; padding-bottom: 16px; } .info.g1 p { font-size: 15px; line-height: 1.38; } .info.g1 h2 { font-size: 22px; margin-top: 2px; }
.info.g2 { gap: 5px; padding-bottom: 12px; } .info.g2 p { font-size: 14px; line-height: 1.33; } .info.g2 h2 { font-size: 20px; } .info.g2 .stat { font-size: 28px; } .info.g2 .stat small { display: none; } .info.g2 .gloss { font-size: 12px; padding: 5px 9px 6px; } .info.g2 .photo { display: none; }
.info.g3 { gap: 4px; padding-bottom: 8px; } .info.g3 p { font-size: 13.5px; line-height: 1.3; } .info.g3 h2 { font-size: 18px; } .info.g3 .stat { display: none; } .info.g3 .cat { display: none; } .info.g3 .gloss { font-size: 11.5px; line-height: 1.28; } .info.g3 .gloss .glt { display: none; } .info.g3 .lic { font-size: 10.5px; }
.info.gs { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: auto; padding-top: 4px; justify-content: flex-start; }

/* Anzeigen: Foto, Werbekrähe, Umfrage */
.card.ad .adhero.photo img { object-fit: cover; border-radius: 18px; filter: none; box-shadow: 0 8px 22px rgba(29, 34, 51, 0.2); max-height: 100%; }
.card.ad .adpoll { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.card.ad .adpoll .pq { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--ink); margin: 0; }
.card.ad .pbtn { min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 2px solid rgba(29, 34, 51, 0.25); background: rgba(255, 255, 255, 0.85); color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; }
.card.ad .pbtn:hover { border-color: var(--ac); }
.card.ad .pbtn.on { background: var(--ac); border-color: var(--ac); color: #fff; }
.card.ad .pthx { margin: 0; min-height: 18px; font-size: 13px; color: rgba(29, 34, 51, 0.8); }
@media (max-height: 740px) { .card.ad .adpoll .pq { font-size: 16px; } .card.ad .pbtn { min-height: 44px; padding: 8px 12px; font-size: 15px; } .card.haspoll .adhero { padding-top: 104px; } }

/* Krähentratsch: Umfrage der Woche */
.card.wpoll { --ac: #a8480f; --ink: #1d2233; color: var(--ink); background: linear-gradient(165deg, #fbf7ee 0%, #f2e9d6 55%, #eadfc6 100%); display: flex; flex-direction: column; justify-content: center; }
.card.wpoll::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(29, 34, 51, 0.16); border-radius: 26px; pointer-events: none; }
.card.wpoll .info { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 96px max(var(--gutter-r), 28px) 30px max(var(--gutter-l), 28px); max-height: 100%; overflow-y: auto; }
.card.wpoll .wptag { align-self: flex-start; background: var(--ink); color: #fbf7ee; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.card.wpoll h2 { color: var(--ink); font-size: 24px; line-height: 1.25; margin: 4px 0 6px; }
.card.wpoll .wpopts { display: flex; flex-direction: column; gap: 9px; }
.card.wpoll .wpo { min-height: 50px; padding: 10px 14px; border-radius: 14px; border: 2px solid rgba(29, 34, 51, 0.25); background: rgba(255, 255, 255, 0.88); color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; }
.card.wpoll .wpo:hover, .card.wpoll .wpo:focus-visible { border-color: var(--ac); }
.card.wpoll :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.card.wpoll .wpres { display: flex; flex-direction: column; gap: 8px; }
.card.wpoll .wpr { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(29, 34, 51, 0.18); overflow: hidden; font-size: 15px; font-weight: 600; }
.card.wpoll .wpr.me { border: 2px solid var(--ac); }
.card.wpoll .wpbar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(168, 72, 15, 0.2); transition: width 0.6s ease; }
.card.wpoll .wpl, .card.wpoll .wpp { position: relative; }
.card.wpoll .wpp { font-weight: 800; font-variant-numeric: tabular-nums; }
.card.wpoll .wpyou { font-weight: 600; font-size: 12.5px; color: var(--ac); }
.card.wpoll .wpmeta { margin: 0; font-size: 13px; color: rgba(29, 34, 51, 0.78); }
.card.wpoll .wpcrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(29, 34, 51, 0.14); }
.card.wpoll .wpcrow img { flex: none; width: 52px; height: 52px; object-fit: contain; border-radius: 50%; background: #f3ead8; }
.card.wpoll .wpcrow p { margin: 0; font-size: 14.5px; line-height: 1.35; font-weight: 600; color: #2b3042; }
.card.wpoll .wparch { align-self: flex-start; background: none; border: 0; padding: 8px 2px; min-height: 40px; color: var(--ink); text-decoration: underline; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.card.wpoll .lic { font-size: 12px; color: rgba(29, 34, 51, 0.72); }
@media (max-height: 760px) { .card.wpoll .info { padding-top: 84px; gap: 7px; } .card.wpoll h2 { font-size: 20px; } .card.wpoll .wpo { min-height: 44px; padding: 7px 12px; font-size: 15px; } .card.wpoll .wpr { min-height: 40px; padding: 5px 10px; font-size: 14px; } .card.wpoll .wpcrow img { width: 42px; height: 42px; } .card.wpoll .wpcrow p { font-size: 13.5px; } }
.wparchov { position: fixed; inset: 0; z-index: 90; background: rgba(10, 12, 18, 0.72); display: flex; align-items: center; justify-content: center; padding: 14px; }
.wparchbox { width: min(560px, 100%); max-height: 88vh; overflow-y: auto; border-radius: 22px; background: #fbf7ee; color: #1d2233; padding: 18px 18px 22px; box-sizing: border-box; }
.wparchhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.wparchhead h2 { margin: 0; font-size: 22px; color: #1d2233; }
.wparchx { min-width: 44px; min-height: 44px; border-radius: 50%; border: 1px solid rgba(29, 34, 51, 0.25); background: #fff; color: #1d2233; font-size: 18px; cursor: pointer; }
.wparchit { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(29, 34, 51, 0.15); display: flex; flex-direction: column; gap: 6px; }
.wparchit h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.3; color: #1d2233; }
.wparchov .wpr { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 5px 10px; border-radius: 10px; background: #fff; border: 1px solid rgba(29, 34, 51, 0.18); overflow: hidden; font-size: 14px; font-weight: 600; }
.wparchov .wpbar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(168, 72, 15, 0.2); }
.wparchov .wpl, .wparchov .wpp { position: relative; }
.wparchov .wpmeta { margin: 2px 0 0; font-size: 13px; color: rgba(29, 34, 51, 0.78); }
.card.wpoll .info .wpmeta { font-size: 13px; line-height: 1.35; color: rgba(29, 34, 51, 0.78); }
.card.wpoll .info .wpcrow p { font-size: 14.5px; line-height: 1.35; margin: 0; }
.card.wpoll .wpp { flex: none; white-space: nowrap; }
.card.wpoll .wpl { min-width: 0; }
@media (max-height: 680px) { .card.wpoll .info { padding-top: 74px; gap: 6px; } .card.wpoll .lic { display: none; } .card.wpoll h2 { font-size: 18px; } }

/* Eigenwerbung: aufgeräumtes Layout (klare Gruppen, ausgerichtete Vorteile, ruhiges Beispiel) */
.card.housead .info { gap: 14px; }
.housead .hhead { font-size: clamp(25px, 7.4vw, 31px); line-height: 1.14; margin: 0; letter-spacing: -.01em; }
.housead .hhead .hacc { color: var(--ac); }
.housead .hben { display: block; padding: 0; margin: 0; font-size: 14.5px; line-height: 1.3; border-top: 1px solid rgba(29,34,51,.14); }
.housead .hben li { display: grid; grid-template-columns: 82px 1fr; column-gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(29,34,51,.14); }
.housead .hben li::before { display: none; }
.housead .hben b { color: var(--ac); font-weight: 800; }
.housead .hex { margin-top: 0; padding: 10px 12px 11px; border: 1px solid rgba(29,34,51,.2); border-radius: 14px; background: rgba(255,255,255,.7); display: block; }
.housead .hexlab { position: static; display: inline-block; margin: 0 0 6px; padding: 2px 8px; background: rgba(168,72,15,.12); border-radius: 999px; font-size: 10.5px; }
.housead .hextag { font-size: 10.5px; }
.housead .hextit { font-size: 16px; margin: 2px 0 4px; }
.card.ad .more.hbtn { margin-top: 2px; }
.housead .lic { margin-top: 0; }
@media (max-height: 775px) { .card.housead .info { gap: 10px; } .housead .hben li { padding: 5px 0; } .housead .hben { font-size: 13.5px; } }
@media (max-height: 690px) { .card.housead .info { gap: 7px; padding-top: 92px; } .housead .hben li { padding: 3px 0; grid-template-columns: 74px 1fr; } .housead .hben { font-size: 12.5px; } .housead .hexlab { display: none; } .housead .hex { padding: 8px 10px; } }
@media (max-height: 620px) { .housead .hex { display: none; } }
.card.housead .info { gap: 10px; padding-top: 118px; }
.housead .hhead { font-size: clamp(24px, 6.8vw, 28px); }
.housead .hben { font-size: 13.5px; }
.housead .hben li { grid-template-columns: 74px 1fr; column-gap: 8px; padding: 5px 0; }
.housead .hex { padding: 8px 12px 9px; }
.housead .hexlab { margin-bottom: 4px; }
.housead .hextit { font-size: 15px; margin: 1px 0 3px; }
@media (max-height: 840px) { .housead .hextag { display: none; } }
@media (max-height: 690px) { .card.housead .info { padding-top: 92px; } .housead .hextit { font-size: 14px; } .housead .hexlink { display: none; } }
@media (max-height: 660px) { .housead .hex { display: none; } .housead .hben li { padding: 4px 0; } }
.housead .hopen { display: block; font-size: 12.5px; line-height: 1.3; color: rgba(29, 34, 51, 0.82); margin-top: -4px; }
@media (max-height: 690px) { .housead .hopen { display: none; } }

/* Kopfzeilen-Sicherung: Inhalt bleibt unter der Kopfzeile, zu hoher Inhalt scrollt in der Karte */
.card .info { max-height: calc(100% - var(--hdrb, 0px) - 6px); }
.card.hasstory .info, .card .info.gs { overflow-y: auto; scrollbar-width: none; }
.card.hasstory .info::-webkit-scrollbar, .card .info.gs::-webkit-scrollbar { display: none; }

/* Handy-Vollbild: App füllt den Bildschirm (iPhone-Web-App), unten nur der Sicherheitsabstand */
#app { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); bottom: env(safe-area-inset-bottom, 0px); height: auto; }

/* Tagesziel-Karte: passt unter die Kopfzeile, Rabe und Texte werden bei kurzen Bildschirmen kleiner */
@media (max-height: 1000px) {
  .card.done .donebox { justify-content: flex-start; gap: 8px; padding-top: calc(var(--hdrb, 104px) + 8px); padding-bottom: 20px; }
  .card.done .donebox img.mascot { width: auto; height: min(170px, 19vh); max-width: 60%; }
  .card.done h2 { font-size: 26px; line-height: 1.15; }
  .card.done p { font-size: 15px; line-height: 1.4; }
  .donebtns { gap: 8px; margin-top: 4px; }
  .donebtns button { min-height: 44px; }
}
@media (max-height: 720px) {
  .card.done .donebox { padding-top: calc(var(--hdrb, 96px) + 6px); gap: 6px; }
  .card.done .donebox img.mascot { height: min(110px, 15vh); }
  .card.done h2 { font-size: 22px; }
  .card.done p { font-size: 13.5px; line-height: 1.32; }
  .card.done .donestat { font-size: 13px; padding: 4px 12px; }
  .donebtns button { min-height: 40px; font-size: 14px; }
}
.card.done .donebox { padding-top: calc(var(--hdrb, 96px) + 8px); }

/* Kopfzeile auf schmalen Handys: Reiter und Symbole überlappen nicht mehr */
@media (max-width: 480px) {
  .top .tabs { gap: 8px; } .top .tab { font-size: 14.5px; padding-left: 2px; padding-right: 2px; white-space: nowrap; }
  .top .meta { gap: 0; } .top .meta .gear, .top .meta .accbtn, .top .meta .adlink { width: 28px; } .top .meta .count { margin-right: 2px; }
}
@media (max-width: 360px) { .top .meta .gear, .top .meta .accbtn, .top .meta .adlink { width: 25px; } .top .tab { font-size: 13.5px; } }
@media (max-width: 420px) { .top .tab { font-size: 14px; } .top .lead { gap: 6px; } .top .brand { width: 26px; height: 26px; } }

/* Eigenanzeige: der Inhalt beginnt direkt unter der Kopfzeile (die Höhe begrenzt .info bereits), nichts wird unten abgeschnitten */
.card.housead .info { padding-top: 8px; padding-bottom: 20px; }
@media (max-height: 760px) { .housead .hben li { padding: 3px 0; } .housead .hexlink { display: none; } .housead .hhead { font-size: clamp(21px, 6.2vw, 24px); } .card.housead .info { gap: 6px; } .housead .hcrow { width: 40px; height: 40px; } }

/* Geschichten mit Auflösung: "Lesesessel"-Optik. Warmes Lampenlicht, Papierton, weiche Serifenschrift (Systemschrift, keine externe Datei).
   Gleiche Kartenstruktur und Abstufungen wie alle Geschichten, nur Farben, Schrift und Ränder ändern sich. */
.card.tale { --ac: #f2c27a; --tfg: #f8efdd; --tsoft: rgba(248,239,221,.9); --tline: rgba(242,194,122,.28); color: var(--tfg);
  background:
    radial-gradient(75% 38% at 90% 4%, rgba(255,190,100,.42), transparent 66%),
    radial-gradient(70% 34% at 4% 46%, hsl(calc(var(--h) + 330) 55% 38% / .55), transparent 70%),
    radial-gradient(90% 40% at 92% 100%, hsl(calc(var(--h) + 215) 50% 34% / .70), transparent 70%),
    linear-gradient(172deg, #3c2719 0%, #2f1f1b 46%, #231a22 100%); }
.card.tale::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22132%22 height=%22132%22 viewBox=%220 0 132 132%22 fill=%22none%22 stroke=%22%23f2c27a%22 stroke-width=%221.3%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%0A%3Cg transform=%22translate(14 16)%22%3E%3Cpath d=%22M0 4c6-3 12-3 17 0v14c-5-3-11-3-17 0z%22/%3E%3Cpath d=%22M17 4c5-3 11-3 17 0v14c-6-3-12-3-17 0z%22/%3E%3C/g%3E%0A%3Cg transform=%22translate(78 70) rotate(-35)%22%3E%3Cpath d=%22M0 0c10-6 18-4 24-14-9 1-17 4-24 14z%22/%3E%3Cpath d=%22M0 0l-6 7%22/%3E%3C/g%3E%0A%3Cpath d=%22M92 20v10M87 25h10%22/%3E%3Cpath d=%22M30 86v8M26 90h8%22/%3E%0A%3Ccircle cx=%2264%22 cy=%2252%22 r=%221.2%22 fill=%22%23f2c27a%22 stroke=%22none%22/%3E%3Ccircle cx=%22112%22 cy=%22104%22 r=%221.2%22 fill=%22%23f2c27a%22 stroke=%22none%22/%3E%3Ccircle cx=%2212%22 cy=%22118%22 r=%221.2%22 fill=%22%23f2c27a%22 stroke=%22none%22/%3E%0A%3C/svg%3E") 0 0 / 132px 132px repeat; }
.card.tale .art { opacity: .10; mix-blend-mode: soft-light; }
.card.tale .shade { background: linear-gradient(to top, rgba(32,18,13,.88) 0%, rgba(32,18,13,.55) 55%, rgba(32,18,13,0) 92%); }
.card.tale::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(242,194,122,.22); border-radius: 26px; pointer-events: none; z-index: 1; }
.card.tale .info { padding-left: max(var(--gutter-l), 26px); padding-right: calc(var(--gutter-r) + 62px); z-index: 2; }
.card.tale .cat { color: var(--ac); letter-spacing: .16em; }
.card.tale h2 { margin: 16px 0 8px; font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; font-weight: 700; letter-spacing: 0; line-height: 1.22; color: #fff6e4; text-wrap: balance; }
.card.tale .info p, .card.tale .stsetup, .card.tale .stexp, .card.tale .stextra, .card.tale .stcrow, .card.tale .stcmp { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; color: var(--tsoft); line-height: 1.5; }
.card.tale .stsetup { font-size: 16px; }
.card.tale .stq, .card.tale .strevt { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif; color: #fff6e4; font-weight: 700; }
.card.tale .sttag { display: inline-block; background: rgba(242,194,122,.16); border: 1px solid var(--tline); color: var(--ac); padding: 3px 11px; border-radius: 999px; opacity: 1; font-weight: 700; }
.card.tale .stopt { background: rgba(255,244,224,.07); border: 1px solid var(--tline); border-radius: 16px; color: var(--tfg); transition: background .2s ease, border-color .2s ease; }
.card.tale .stopt:hover:not(:disabled) { background: rgba(242,194,122,.16); }
.card.tale .stopt.right { background: rgba(242,194,122,.22); border-color: var(--ac); }
.card.tale .stl { background: rgba(242,194,122,.2); color: #fff6e4; font-family: Georgia, serif; }
.card.tale .stlink, .card.tale .stmore summary, .card.tale .stverdict, .card.tale .stmark { color: var(--ac); }
.card.tale .stverdict { font-family: Georgia, serif; font-style: italic; font-weight: 600; }
.card.tale .stcrow { font-style: italic; }
.card.tale .more { background: rgba(242,194,122,.95); color: #2f1d17; }
.card.tale .lic, .card.tale .lic a { color: rgba(248,239,221,.62); }
.card.tale .stopt:focus-visible, .card.tale .stlink:focus-visible, .card.tale .stmore summary:focus-visible { outline: 2px solid var(--ac); }
.card.tale .strev { transition-duration: .45s; }
@media (prefers-reduced-motion: reduce) { .card.tale .stopt { transition: none; } }
@media (max-height: 760px) { .card.tale .stsetup { font-size: 15px; } }
@media (max-height: 700px) { .card.tale .stsetup { font-size: 13.5px; } .card.tale::after { inset: 8px; } }

/* Abstufungen für Geschichtenkarten (wie bei Erklärkarten): erst enger, dann kleiner, zuletzt scrollbar */
.card.tale .info.t1 { gap: 6px; padding-bottom: 16px; } .card.tale .info.t1 h2 { font-size: 22px; } .card.tale .info.t1 .stsetup { font-size: 15px; line-height: 1.42; } .card.tale .info.t1 .stexp, .card.tale .info.t1 .stextra { font-size: 14.5px; line-height: 1.4; } .card.tale .info.t1 .stopt { min-height: 42px; padding: 6px 10px; } .card.tale .info.t1 .stq { font-size: 17px; }
.card.tale .info.t2 { gap: 5px; padding-bottom: 12px; } .card.tale .info.t2 h2 { font-size: 20px; } .card.tale .info.t2 .sthead { display: none; } .card.tale .info.t2 .stsetup { font-size: 14px; line-height: 1.38; } .card.tale .info.t2 .stexp, .card.tale .info.t2 .stextra { font-size: 13.5px; line-height: 1.35; } .card.tale .info.t2 .stopt { min-height: 38px; font-size: 14px; } .card.tale .info.t2 .stcrow img { display: none; } .card.tale .info.t2 .stlink, .card.tale .info.t2 .stmore summary { min-height: 38px; } .card.tale .info.t2 .stq { font-size: 16px; } .card.tale .info.t2 .strevt { font-size: 15px; }
.card.tale .info.t3 { gap: 4px; padding-bottom: 8px; } .card.tale .info.t3 h2 { font-size: 18px; } .card.tale .info.t3 .cat { display: none; } .card.tale .info.t3 .stsetup { font-size: 13px; line-height: 1.32; } .card.tale .info.t3 .stexp, .card.tale .info.t3 .stextra { font-size: 12.5px; line-height: 1.3; } .card.tale .info.t3 .stopt { min-height: 34px; font-size: 13px; padding: 4px 8px; } .card.tale .info.t3 .stq { font-size: 15px; } .card.tale .info.t3 .lic { font-size: 10.5px; line-height: 1.25; } .card.tale .info.t3 .stmore { display: none; }
.card.tale .info.ts { overflow-y: auto; }

/* ruhiger: Zierstrich über der Überschrift, leiser Weiterlesen-Knopf, kleinere Krähenblase */
.card.tale h2::before { content: ""; display: block; width: 34px; height: 2px; margin-bottom: 12px; border-radius: 2px; background: var(--ac); opacity: .75; }
.card.tale .more { background: transparent; color: var(--ac); border: 1px solid var(--tline); font-weight: 600; margin-top: 4px; }
.card.tale .stcrow { font-size: 13px; opacity: .92; }
.card.tale .info.t1 h2 { margin: 10px 0 4px; } .card.tale .info.t1 h2::before { margin-bottom: 8px; }
.card.tale .info.t2 h2, .card.tale .info.t3 h2 { margin: 4px 0 2px; } .card.tale .info.t2 h2::before, .card.tale .info.t3 h2::before { display: none; }
@media (max-height: 760px) { .card.tale h2 { margin-top: 10px; } .card.tale h2::before { margin-bottom: 8px; } }

.card.tale h2 { font-size: 24px; }

/* Beruhigung: Titel in Serif, alles andere in der App-Schrift; nur drei Größen (16 / 15 / 13); Krähe unten; leise Links */
.card.tale .info p, .card.tale .stsetup, .card.tale .stexp, .card.tale .stextra, .card.tale .stcrow, .card.tale .stcmp,
.card.tale .stq, .card.tale .strevt, .card.tale .stverdict, .card.tale .stl { font-family: inherit; font-style: normal; }
.card.tale .stsetup, .card.tale .stexp, .card.tale .stextra, .card.tale .stopt, .card.tale .stcmp { font-size: 15px; line-height: 1.5; }
.card.tale .stq, .card.tale .strevt { font-size: 16px; line-height: 1.35; }
.card.tale .stverdict { font-size: 15px; font-weight: 700; }
.card.tale .stlink, .card.tale .stmore summary, .card.tale .more, .card.tale .lic, .card.tale .stcrow, .card.tale .sttag { font-size: 13px; }
.card.tale .sttag { background: none; border: 0; padding: 0; letter-spacing: .1em; }
.card.tale .more { min-height: 34px; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; color: var(--ac); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.card.tale .starea > .ccrow { order: 20; margin-top: 4px; }
.card.tale .starea > .ccrow .ccpic { width: 34px; height: 34px; }
.card.tale .starea > .ccrow .ccbub { font-size: 13px; padding: 6px 10px; }
.card.tale .stopt { background: rgba(255,244,224,.05); border-color: rgba(242,194,122,.22); }
.card.tale .sttext, .card.tale .sthead { opacity: .9; }
.card.tale .info.t1 .stsetup, .card.tale .info.t1 .stexp, .card.tale .info.t1 .stextra, .card.tale .info.t1 .stopt { font-size: 14.5px; }
.card.tale .info.t2 .stsetup, .card.tale .info.t2 .stexp, .card.tale .info.t2 .stextra, .card.tale .info.t2 .stopt { font-size: 14px; }
.card.tale .info.t3 .stsetup, .card.tale .info.t3 .stexp, .card.tale .info.t3 .stextra, .card.tale .info.t3 .stopt { font-size: 13px; }
.card.tale .info.t2 .stq, .card.tale .info.t2 .strevt, .card.tale .info.t3 .stq, .card.tale .info.t3 .strevt { font-size: 15px; }
.card.tale .stverdict { font-weight: 600; font-size: 15px; }
.card.tale .strevin { gap: 8px; }

/* Fachbegriffe: ruhiger Knopf statt Textblock; Erklärungen in eigenem Fenster */
.gloss.glb { padding: 0; border: 0; background: none; border-radius: 0; margin-top: 2px; }
.glbtn { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--ac); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.glbtn:hover { background: rgba(255,255,255,.12); }
.glbtn:focus-visible, .glclose:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.glmodal { position: absolute; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.glback { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.glpanel { position: relative; width: 100%; max-width: 520px; max-height: 78%; overflow-y: auto; padding: 22px 24px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: #1c1b24; color: var(--fg); border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -12px 40px rgba(0,0,0,.5); outline: none; }
.glpanel h3 { margin: 0 0 14px; font-size: 18px; line-height: 1.25; }
.glpanel dl { margin: 0; display: grid; gap: 14px; }
.glpanel dt { font-weight: 700; font-size: 16px; color: #fff; }
.glpanel dd { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: var(--fg-soft); }
.glclose { margin-top: 20px; min-height: 44px; width: 100%; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.08); color: var(--fg); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .glpanel { animation: glup .22s ease-out both; } @keyframes glup { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } }
.card.tale .glbtn { border-color: rgba(242,194,122,.3); }
/* Auflösung: einheitlich 15 px in der App-Schrift; Hervorhebung nur durch Fett bzw. Goldton */
.card.tale .stq, .card.tale .strevt { font-size: 15px; line-height: 1.5; font-weight: 700; color: #fff6e4; }
.card.tale .stverdict { font-size: 15px; font-weight: 700; line-height: 1.5; }
.card.tale .stexp, .card.tale .stextra, .card.tale .stcmp { font-size: 15px; line-height: 1.5; color: var(--tsoft); }
.card.tale .stcrow, .card.tale .starea > .ccrow .ccbub, .card.tale .stcrow span { font-size: 14px; font-style: normal; line-height: 1.4; }
.card.tale .ccbub, .card.tale .ccbub * { font-style: normal; }
.card.tale .info.t2 .stq, .card.tale .info.t2 .strevt, .card.tale .info.t2 .stverdict { font-size: 14px; }
.card.tale .info.t3 .stq, .card.tale .info.t3 .strevt, .card.tale .info.t3 .stverdict { font-size: 13px; }
.card.tale .stlink { padding-left: 0; }

/* ---------- Zeitstrahlen & Wissenspfade (eine Komponente, vier Typen) ---------- */
.toast { z-index: 30; }
.card.pfadcard { --ac: #e8b86a; }
.card.pfadcard .pfmeta { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.pfopen { align-self: flex-start; margin-top: 10px; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(232,184,106,.55); background: rgba(232,184,106,.14); color: #f6dcae; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.pfopen:hover, .pfopen:focus-visible { background: rgba(232,184,106,.26); outline: none; }
.pfview { --pa: #e8b86a; position: absolute; inset: 0; z-index: 22; display: flex; flex-direction: column; color: var(--fg);
  background: radial-gradient(1.2px 1.2px at 12px 12px, rgba(232,184,106,.10) 98%, transparent) 0 0 / 28px 28px, linear-gradient(180deg, #17151d, #101015); }
.pfbar { flex: none; display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) var(--gutter-r) 8px var(--gutter-l); border-bottom: 1px solid var(--line); }
.pfback, .pfa { min-height: 44px; padding: 0 12px; white-space: nowrap; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--fg); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.pfa[aria-pressed="true"] { border-color: var(--pa); color: #f6dcae; background: rgba(232,184,106,.16); }
.pftag { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pa); font-weight: 700; }
.pfactions { margin-left: auto; display: flex; gap: 8px; }
.pfscroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); outline: none; }
.pfhead { padding: 20px var(--gutter-r) 14px var(--gutter-l); }
.pfhead h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; margin: 0 0 8px; font-size: 23px; line-height: 1.2; font-weight: 800; color: #fff; }
.pfhead p { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: var(--fg-soft); }
.pfhead .ccrow { margin-top: 6px; }
.pfpath { list-style: none; margin: 0; padding: 6px var(--gutter-r) 6px var(--gutter-l); counter-reset: pfn; }
.pfst { position: relative; padding: 0 0 12px 38px; counter-increment: pfn; }
.pfst::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: -14px; width: 2px; background: rgba(232,184,106,.28); }
.pfst:last-child::before { display: none; }
.pfst::after { content: ""; position: absolute; left: 4px; top: 12px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: #17151d; border: 2px solid var(--pa); }
.pfst.seen::after { background: var(--pa); }
.pf-ablauf .pfst::after, .pf-wissen .pfst::after { content: counter(pfn); left: 0; top: 8px; width: 24px; height: 24px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--pa); border-width: 1.5px; }
.pf-ablauf .pfst.seen::after, .pf-wissen .pfst.seen::after { color: #17151d; }
.pf-ablauf .pfst::before, .pf-wissen .pfst::before { left: 11px; top: 36px; }
.pf-wissen .pfst::after { border-radius: 7px; }
.pf-ablauf .pfst, .pf-wissen .pfst { padding-left: 40px; }
.pfsb { display: block; width: 100%; text-align: left; font: inherit; color: inherit; padding: 12px 14px; min-height: 48px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); cursor: pointer; }
.pfsb:hover, .pfsb:focus-visible { background: rgba(232,184,106,.09); border-color: rgba(232,184,106,.5); outline: none; }
.pfl { display: block; font-size: 13px; letter-spacing: .03em; color: var(--pa); font-weight: 700; }
.pfl:empty { display: none; }
.pft { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; display: block; margin-top: 2px; font-size: 17px; line-height: 1.25; font-weight: 700; color: #fff; }
.pfk { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--fg-soft); }
.pfk::after { content: "  Mehr ›"; color: var(--pa); font-weight: 600; white-space: nowrap; }
.pf-zeitskala .pfsb::after { content: ""; display: block; margin-top: 9px; height: 3px; border-radius: 2px; width: calc(var(--n) * 100%); background: linear-gradient(90deg, rgba(232,184,106,.15), var(--pa)); }
.pffoot { padding: 16px var(--gutter-r) 0 var(--gutter-l); font-size: 13px; line-height: 1.5; color: var(--muted); }
.pffoot h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.pffoot ul { margin: 0 0 8px; padding-left: 18px; }
.pffoot a { color: var(--pa); }
.pffoot p { margin: 0; }
.pfsheet { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: center; }
.pfsback { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.pfspanel { position: relative; width: 100%; max-width: 520px; max-height: 84%; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 8px 22px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: #1c1b24; border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -12px 40px rgba(0,0,0,.5); outline: none; }
.pfgrip { display: block; width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); margin: 4px auto 6px; }
.pfshead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pfsl { font-size: 13px; letter-spacing: .03em; color: var(--pa); font-weight: 700; }
.pfsx { width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: var(--fg); font-size: 28px; line-height: 1; cursor: pointer; border-radius: 12px; }
.pfspanel h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; color: #fff; }
.pfspanel p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; color: var(--fg-soft); }
.pfbox { margin: 4px 0 12px; padding: 10px 14px; border-radius: 12px; border-left: 3px solid var(--pa); background: rgba(232,184,106,.09); }
.pfbox b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pa); margin-bottom: 2px; }
.pfbox p { margin: 0; font-size: 15.5px; }
.pfnav { display: flex; gap: 10px; margin-top: 6px; position: sticky; bottom: 0; }
.pfn { flex: 1; min-height: 48px; border-radius: 14px; border: 1px solid var(--line); background: #24232e; color: var(--fg); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.pfn:disabled { opacity: .35; cursor: default; }
.pfq { box-sizing: border-box; width: 100%; min-height: 46px; margin: 4px 0 10px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--fg); font: inherit; font-size: 16px; }
.pfft { display: flex; flex-wrap: wrap; gap: 8px; }
.pfc { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--fg-soft); font: inherit; font-size: 14px; cursor: pointer; }
.pfc[aria-pressed="true"] { background: rgba(232,184,106,.18); border-color: var(--pa); color: #f6dcae; }
.pfhl { list-style: none; margin: 0; padding: 0 var(--gutter-r) 0 var(--gutter-l); display: grid; gap: 10px; }
.pfhi { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; min-height: 56px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); cursor: pointer; }
.pfhi:hover, .pfhi:focus-visible { background: rgba(232,184,106,.09); border-color: rgba(232,184,106,.5); outline: none; }
.pfhn { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--pa); border: 1.5px solid var(--pa); }
.pfhb b { display: block; font-size: 16px; line-height: 1.3; color: #fff; }
.pfhb small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.pfnone { padding: 14px 0; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { .pfview { animation: pffade .18s ease-out both; } .pfspanel { animation: pfup .22s ease-out both; } @keyframes pffade { from { opacity: 0; } to { opacity: 1; } } @keyframes pfup { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } } }
@media (max-height: 640px) { .pfhead h2 { font-size: 21px; } .pfspanel { max-height: 90%; } }
.pfimg { margin: 0 0 12px; }
.pfimg img { display: block; width: 100%; max-height: 190px; object-fit: cover; border-radius: 12px; background: rgba(255,255,255,.05); }
.pfimg figcaption { margin-top: 5px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.pfimg a { color: var(--pa); }
/* ===== Zeitpfad-Karte: Gesamthintergrund im App-Design (etwas heller), Symbol-Kacheln, Detail-Fenster ===== */
.card.pfadcard, .pfsheet { --pk: hsl(var(--h) 88% 76%); --pka: hsl(var(--h) 88% 76% / .16); --pkb: hsl(var(--h) 88% 76% / .34); }
.card.pfadcard.pfty-zeitstrahl, .pfsheet.pfty-zeitstrahl { --h: 28 !important; }
.card.pfadcard.pfty-ablauf, .pfsheet.pfty-ablauf { --h: 165 !important; }
.card.pfadcard.pfty-wissen, .pfsheet.pfty-wissen { --h: 262 !important; }
.card.pfadcard.pfty-zeitskala, .pfsheet.pfty-zeitskala { --h: 212 !important; }
.card.pfadcard { --ac: var(--pk);
  background:
    radial-gradient(110% 40% at 100% 0%, hsl(var(--h) 80% 55% / .22), transparent 66%),
    radial-gradient(100% 40% at 0% 100%, hsl(calc(var(--h) + 40) 70% 50% / .16), transparent 66%),
    linear-gradient(160deg, hsl(var(--h) 46% 19%), hsl(calc(var(--h) + 28) 50% 30%)); }
.card.pfadcard .art, .card.pfadcard .shade, .card.pfadcard .slot { display: none; }
.card.pfadcard .info { top: 130px; bottom: 14px; max-height: none; padding: 4px calc(var(--gutter-r) + 62px) 0 var(--gutter-l); gap: 8px; }
.card.pfadcard .pfhd { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: 100%; }
.card.pfadcard .pfht { min-width: 0; flex: 1; }
.card.pfadcard .cat { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pk); }
.card.pfadcard h2 { margin: 3px 0 0; font-size: 23px; line-height: 1.12; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; text-wrap: balance; }
.card.pfadcard .pfsubt { display: none; font-weight: 600; color: var(--fg-soft); }
.card.pfadcard .pfmas { flex: none; width: 56px; height: 56px; object-fit: contain; margin: -2px 0 0; background: none; border: 0; padding: 0; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.card.pfadcard .pfintro { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 14px; line-height: 1.4; color: var(--fg-soft); max-width: none; }
.card.pfadcard .pfinl { --pa: var(--pk); flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; overflow-y: auto; padding: 2px 0; -webkit-mask-image: none; mask-image: none; touch-action: pan-y; outline: none; }
.card.pfadcard .pfpath { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 0; margin: 0; list-style: none; }
.card.pfadcard .pfst { position: relative; flex: 1 0 auto; display: flex; min-height: 0; max-height: none; padding: 0 0 7px 22px; counter-increment: none; }
.card.pfadcard .pfst:last-child { padding-bottom: 0; }
.card.pfadcard .pfst::before { content: ""; position: absolute; left: 5px; top: 50%; bottom: -50%; width: 1.5px; background: var(--pkb); }
.card.pfadcard .pfst:last-child::before { display: none; }
.card.pfadcard .pfst::after { content: ""; position: absolute; left: 0; top: calc(50% - 5.5px); width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%; background: hsl(var(--h) 46% 19%); border: 1.5px solid var(--pk); display: block; }
.card.pfadcard .pfst.seen::after { background: var(--pk); }
.card.pfadcard .pfsb { position: relative; display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 0; align-items: center; width: 100%; height: auto; min-height: 0; padding: 7px 26px 7px 8px; text-align: left; font: inherit; color: var(--fg); background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.13); border-radius: 16px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.card.pfadcard .pfst.seen .pfsb { background: var(--pka); border-color: var(--pkb); }
.card.pfadcard .pfsb::after { content: "›"; position: absolute; right: 10px; top: 50%; left: auto; bottom: auto; width: auto; height: auto; transform: translateY(-50%); background: none; margin: 0; font-size: 20px; line-height: 1; font-weight: 600; color: var(--pk); }
.card.pfadcard .pfsb:focus-visible { outline: 2px solid var(--pk); outline-offset: 2px; }
.pfic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--pka); border: 1px solid var(--pkb); color: var(--pk); }
.pfic svg { width: 27px; height: 27px; }
.card.pfadcard .pfic { grid-row: 1 / span 3; grid-column: 1; }
.card.pfadcard .pfl { grid-column: 2; grid-row: 1; font-size: 11px; line-height: 1.2; font-weight: 700; letter-spacing: .04em; text-transform: none; color: var(--pk); white-space: normal; }
.card.pfadcard .pft { grid-column: 2; grid-row: 2; margin: 0; font-family: var(--display); font-size: 15.5px; line-height: 1.2; font-weight: 700; color: var(--fg); }
.card.pfadcard .pft::after { content: none; }
.card.pfadcard .pfk { display: none; grid-column: 2; grid-row: 3; margin-top: 1px; font-size: 12.5px; line-height: 1.3; color: var(--fg-soft); overflow: hidden; -webkit-box-orient: vertical; }
.card.pfadcard .pfk::after, .card.pfadcard .pfk::before { content: none !important; display: none !important; }
.card.pfadcard.k1 .pfk { display: -webkit-box; -webkit-line-clamp: 1; }
.card.pfadcard.k2 .pfk { display: -webkit-box; -webkit-line-clamp: 2; }
.card.pfadcard .lic { display: block; margin: 0; padding-top: 2px; font-size: 11px; line-height: 1.3; }
@media (min-height: 860px) { .card.pfadcard .pfsubt { display: inline; } }
@media (max-height: 860px) { .card.pfadcard .pfintro { display: none; } }
@media (max-height: 700px) {
  .card.pfadcard h2 { font-size: 19px; } .card.pfadcard .lic { display: none; } .card.pfadcard .pfmas { width: 44px; height: 44px; }
  .card.pfadcard .pfsb { grid-template-columns: 36px 1fr; padding: 4px 24px 4px 6px; column-gap: 10px; }
  .card.pfadcard .pfic { width: 36px; height: 36px; border-radius: 11px; } .card.pfadcard .pfic svg { width: 21px; height: 21px; }
  .card.pfadcard .pfst { padding-bottom: 5px; } .card.pfadcard .pfl { font-size: 10px; } .card.pfadcard .pft { font-size: 14px; line-height: 1.15; }
}
.ccrow.chk { visibility: hidden; animation: none; }

/* Detail-Fenster (Bottom Sheet) im App-Design */
.pfsheet .pfsback { background: rgba(5,5,9,.6); }
.pfsheet .pfspanel { --pa: var(--pk); background: linear-gradient(180deg, hsl(var(--h) 34% 20%), hsl(var(--h) 30% 15%)); color: var(--fg); border: 1px solid var(--pkb); border-bottom: 0; border-radius: 26px 26px 0 0; padding: 8px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
.pfsheet .pfshead { align-items: center; gap: 12px; margin: 4px 0 10px; justify-content: flex-start; }
.pfsheet .pfic.big { flex: none; width: 54px; height: 54px; border-radius: 16px; }
.pfsheet .pfic.big svg { width: 31px; height: 31px; }
.pfsheet .pfsh { flex: 1; min-width: 0; }
.pfsheet .pfsl { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pk); }
.pfsheet .pfspanel h3 { margin: 2px 0 0; font-family: var(--display); font-size: 22px; line-height: 1.2; color: #fff; }
.pfsheet .pfsx { flex: none; align-self: flex-start; margin: -6px -8px 0 0; }
.pfsheet .pfbox { background: var(--pka); border-left-color: var(--pk); }
.pfsheet .pfbox b { color: var(--pk); }
.pfsheet .pfn { background: rgba(255,255,255,.08); }
.pfsheet .pfnav { background: linear-gradient(180deg, transparent, hsl(var(--h) 30% 15%) 30%); padding-top: 8px; }
.pfsheet .pfimg a { color: var(--pk); }
@media (max-height: 860px) { .card.pfadcard .pfsb { grid-template-columns: 42px 1fr; padding: 5px 26px 5px 7px; } .card.pfadcard .pfic { width: 42px; height: 42px; } .card.pfadcard .pfic svg { width: 25px; height: 25px; } .card.pfadcard h2 { font-size: 22px; } }
@media (max-height: 700px) { .card.pfadcard .pfsb { grid-template-columns: 36px 1fr; padding: 4px 24px 4px 6px; } .card.pfadcard .pfic { width: 36px; height: 36px; } .card.pfadcard .pfic svg { width: 21px; height: 21px; } }

/* ===== Redaktions-Vorschau im Dashboard (?wfprev=1): echte Karten, Texte direkt bearbeitbar ===== */
body.wfprev .banner, body.wfprev .chalpill, body.wfprev .onb, body.wfprev .toast { display: none !important; }
body.wfprev .top, body.wfprev .rail { pointer-events: none; }
body.wfprev .pvedit { cursor: text; border-radius: 6px; outline: 1px dashed rgba(240,179,90,.0); outline-offset: 3px; transition: outline-color .15s, background-color .15s; -webkit-user-select: text; user-select: text; }
body.wfprev .pvedit:hover { outline-color: rgba(240,179,90,.75); }
body.wfprev .pvedit:focus { outline: 2px solid #f0b35a; background: rgba(240,179,90,.10); }
body.wfprev .pvempty { display: flex; align-items: center; justify-content: center; height: 100%; padding: 24px; text-align: center; color: rgba(244,241,236,.7); }
body.wfprev .ccbub .pvedit { display: block; min-width: 4ch; min-height: 1.35em; }
body.wfprev .ccbub .pvedit:empty::before { content: "Spruch eingeben …"; opacity: .55; }