/* LocSEO-Spiel: ausschließlich lokale Systemschriften und CSS/SVG.
   Alle Regeln gelten nur innerhalb von .spiel-app. Die Website-Stile (Kopfzeile, Navigation, Fußzeile,
   seitliches Menü, Cookie-Banner) bleiben unberührt. Variablen und Grundschrift liegen am Container,
   nicht auf :root oder body. Die Spielphase steht als data-phase am Container #spiel-app. */
.spiel-app {
  color-scheme: light;
  --ground: #f4f4f2;
  --surface: #fdfdfc;
  --heading: #0f172a;
  --text: #1e293b;
  --muted: #526074;
  --accent: #2563eb;
  --hover: #1d4ed8;
  --tint: #eaf0fc;
  --border: #d2d7de;
  --map-ground: #e9ebe7;
  --map-block: #dce0dc;
  --map-park: #d7e0d4;
  --negative: #9f2535;
  --negative-tint: #faeeee;
  --positive: #175d42;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
  width: min(1280px, calc(100% - 40px));
  margin-inline: auto;
  color: var(--text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
}
.spiel-app, .spiel-app * { box-sizing: border-box; }
/* Platz für die feste Kopfleiste der Website (ab 1200px steht das Menü seitlich und braucht keinen Abstand). */
.spiel-main { padding-top: 92px; }
.spiel-main:focus { outline: none; }
@media (min-width: 1200px) { .spiel-main { padding-top: 0; } }
.spiel-app [hidden] { display: none !important; }

.spiel-app button, .spiel-app a { -webkit-tap-highlight-color: transparent; }
.spiel-app button { font: inherit; }
.spiel-app button, .spiel-app summary { touch-action: manipulation; }
.spiel-app button:not(:disabled), .spiel-app summary { cursor: pointer; }
.spiel-app button:disabled { cursor: not-allowed; }
.spiel-app a { color: var(--hover); text-decoration: underline; text-underline-offset: 3px; transition: none; }
.spiel-app h1, .spiel-app h2, .spiel-app h3, .spiel-app p, .spiel-app figure, .spiel-app dl, .spiel-app dd { margin: 0; }
.spiel-app h1, .spiel-app h2, .spiel-app h3 { color: var(--heading); line-height: 1.15; }
.spiel-app p { max-width: 68ch; text-wrap: wrap; }
/* Gegen die globalen Website-Stile (Überschriften mit Outfit/Balance, Listen ohne Aufzählung, Absatzabstand). */
.spiel-app h1, .spiel-app h2, .spiel-app h3 { font-family: inherit; font-weight: 700; letter-spacing: normal; text-wrap: wrap; background: none; -webkit-text-fill-color: currentColor; }
.spiel-app ul, .spiel-app ol { list-style: revert; margin: revert; padding: revert; }





.spiel-app .intro { padding: 32px 0 40px; }
.spiel-app .intro-context { font-size: .875rem; color: var(--muted); margin-bottom: 16px; }
.spiel-app .intro h1 { font-size: 2.35rem; letter-spacing: -.055em; font-weight: 750; line-height: 1.06; }
.spiel-app .intro-description { margin-top: 22px; max-width: 47ch; }
.spiel-app .business-picker { min-width: 0; padding: 0; margin: 24px 0 0; border: 0; }
.spiel-app .business-picker legend { padding: 0; margin-bottom: 10px; color: var(--heading); font-size: .875rem; font-weight: 600; }
.spiel-app .business-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.spiel-app .business-option { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); font-size: .875rem; line-height: 1.4; cursor: pointer; touch-action: manipulation; }
.spiel-app .business-option input { flex-shrink: 0; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.spiel-app .business-option span { min-width: 0; overflow-wrap: anywhere; }
.spiel-app .business-option:has(input:checked) { border-color: var(--accent); background: var(--tint); }
.spiel-app .business-option:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.spiel-app .business-option input:focus-visible { outline: none; }
.spiel-app .intro .button { margin-top: 26px; min-width: 174px; }
.spiel-app .intro-meta { margin-top: 12px; font-size: .8125rem; color: var(--muted); }
.spiel-app .button { border: 1px solid transparent; border-radius: 5px; min-height: 48px; padding: 12px 19px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; font-size: .9375rem; font-weight: 600; text-decoration: none; transition: background-color 160ms ease-out, transform 180ms ease-out; }
.spiel-app .button > span { margin-left: auto; font-size: 1.2em; }
.spiel-app .primary { color: var(--surface); background: var(--accent); }
.spiel-app .secondary { border-color: var(--border); color: var(--heading); background: transparent; }
.spiel-app .button:active:not(:disabled), .spiel-app .action-card:active:not([aria-disabled="true"]) { transform: scale(.975); }
.spiel-app :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.spiel-app [tabindex="-1"]:focus { outline: none; }


.spiel-app .play-layout { display: grid; gap: 28px; align-items: start; }
.spiel-app .map-panel { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.spiel-app .map-heading { display: flex; align-items: center; gap: 12px; padding: 17px 18px; font-size: .9375rem; font-weight: 600; }
.spiel-app .search-icon { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 50%; position: relative; flex-shrink: 0; color: var(--accent); margin-right: 3px; }
.spiel-app .search-icon::after { content: ""; position: absolute; width: 7px; height: 2px; background: currentColor; transform: rotate(45deg); right: -5px; bottom: -3px; }
.spiel-app .map-type { margin-left: auto; color: var(--muted); font-size: .75rem; font-weight: 400; }
.spiel-app .map { display: block; width: 100%; height: auto; }
.spiel-app .map text { font-family: inherit; }
.spiel-app .opponent-pin path { fill: var(--muted); stroke: var(--surface); stroke-width: 2; }
.spiel-app .opponent-pin text, .spiel-app .own-pin text { text-anchor: middle; fill: var(--surface); font-weight: 700; font-size: 14px; }
.spiel-app .own-pin path { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.spiel-app .customer-route { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 3 6; stroke-linecap: round; opacity: 0; transition: opacity 240ms ease-out; }
.spiel-app .customer-route.is-visible { opacity: .85; }
.spiel-app .customer-route.is-blocked { opacity: 0; }
.spiel-app .map-customer { opacity: 0; transition: opacity 240ms ease-out; }
.spiel-app .map-customer.is-visible { opacity: 1; }
.spiel-app #map-bakery { transition: opacity 220ms ease-out; }
.spiel-app #map-bakery.is-suspended { opacity: .45; }
.spiel-app .map-business { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px 20px; }
.spiel-app .map-business > div { display: grid; gap: 2px; }
.spiel-app .map-business > div > span { color: var(--muted); font-size: .75rem; }
.spiel-app .map-business > div > strong { font-size: 1.0625rem; color: var(--heading); }
.spiel-app .map-business > p { color: var(--accent); font-size: .9375rem; white-space: nowrap; }
.spiel-app .map-business > p > strong { font-size: 1.75rem; margin-left: 3px; }
.spiel-app .map-event-note { padding: 13px 24px; background: var(--ground); color: var(--muted); font-size: .8125rem; min-height: 46px; max-width: none; }
.spiel-app .map-event-note.has-event { background: var(--tint); color: var(--text); }
.spiel-app .rank-improved .own-pin .pin-mark { animation: rank-step 260ms ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes rank-step { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.16); } }
.spiel-app .map-bottom { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: .6875rem; color: var(--muted); }
.spiel-app .map-bottom span:first-child { white-space: nowrap; }
.spiel-app .legend-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: var(--accent); border-radius: 50%; }
.spiel-app .ranking-preview { padding: 20px 24px 10px; }
.spiel-app .ranking-preview h2 { font-size: 1rem; line-height: 1.4; }
.spiel-app .ranking-preview > p { margin-top: 5px; color: var(--muted); font-size: .8125rem; }
.spiel-app .top-three { list-style: none; padding: 0; margin: 14px 0 0; }
.spiel-app .top-three li { display: grid; grid-template-columns: 23px 1fr auto; gap: 8px; padding: 9px 0; font-size: .8125rem; }
.spiel-app .top-three li + li { border-top: 1px solid var(--border); }
.spiel-app .top-three li > span:first-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.spiel-app .top-three li > span:last-child { color: var(--muted); font-size: .75rem; }
.spiel-app .top-three li.is-own { color: var(--accent); font-weight: 650; }
.spiel-app .muted { color: var(--muted); font-size: .875rem; }
.spiel-app .game-heading { padding: 20px 0 24px; }
.spiel-app #game { display: contents; }
.spiel-app .decision-panel { scroll-margin-top: 110px; }
.spiel-app .game-heading h1 { font-size: 1.7rem; letter-spacing: -.04em; }
.spiel-app .game-heading p { margin-top: 9px; color: var(--muted); font-size: .875rem; }
.spiel-app .status-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border-block: 1px solid var(--border); padding: 13px 0; margin-bottom: 24px; }
.spiel-app .status-bar > div + div { border-left: 1px solid var(--border); padding-left: 12px; }
.spiel-app .status-bar dt { font-size: .75rem; color: var(--muted); }
.spiel-app .status-bar dd { font-size: 1.4rem; color: var(--heading); font-weight: 650; font-variant-numeric: tabular-nums; }
.spiel-app .status-unit { color: var(--muted); font-size: .875rem; font-weight: 400; }
.spiel-app #rank { color: var(--accent); }
.spiel-app .growth-status { margin: -8px 0 24px; font-size: .8125rem; color: var(--muted); }
.spiel-app .growth-status strong { color: var(--heading); }
.spiel-app .growth-feedback { padding: 16px 18px; background: var(--tint); border-radius: 6px; margin-top: 20px; }
.spiel-app .growth-feedback h3 { font-size: 1rem; line-height: 1.4; }
.spiel-app .growth-feedback p { font-size: .875rem; margin-top: 6px; }
.spiel-app .result-customers { margin-top: 16px; font-size: .9375rem; font-weight: 600; }
.spiel-app .point-dots { display: none; }
.spiel-app .section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.spiel-app .section-heading h2 { font-size: 1.25rem; letter-spacing: -.025em; }
.spiel-app .section-heading > span { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.spiel-app .week-tip { color: var(--muted); font-size: .875rem; margin: 7px 0 17px; }
.spiel-app .new-actions-note { color: var(--text); font-size: .8125rem; }
.spiel-app .actions { display: grid; gap: 9px; }
.spiel-app .action-card { display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 5px 12px; width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 13px 14px; color: var(--text); background: var(--surface); transition: border-color 160ms ease-out, background-color 160ms ease-out, transform 180ms ease-out; }
.spiel-app .action-name { font-size: .9375rem; font-weight: 650; color: var(--heading); line-height: 1.35; }
.spiel-app .action-cost { color: var(--hover); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.spiel-app .action-money { display: block; font-size: .75rem; font-weight: 400; margin-top: 3px; }
.spiel-app .action-copy { grid-column: 1 / -1; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.spiel-app .action-card[aria-pressed="true"] { border-color: var(--accent); background: var(--tint); }
.spiel-app .action-card[aria-disabled="true"] { background: var(--ground); }
.spiel-app .action-card[aria-disabled="true"] .action-cost { color: var(--muted); }
.spiel-app .action-card[aria-disabled="true"] .action-name { color: var(--muted); }
.spiel-app summary { min-height: 44px; padding: 12px 0; color: var(--text); font-size: .875rem; font-weight: 600; }
.spiel-app .week-gaps { color: var(--text); font-weight: 600; margin-top: -9px; }
.spiel-app .action-groups { display: grid; gap: 22px; }
.spiel-app .action-group-title { margin: 0 0 9px; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.spiel-app .completed-actions { margin-top: 4px; border-top: 1px solid var(--border); }
.spiel-app .completed-list { margin: 0 0 12px; padding-left: 20px; color: var(--muted); font-size: .8125rem; }
.spiel-app .completed-list li + li { margin-top: 6px; }
.spiel-app .week-finances { margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.spiel-app .week-finances summary { padding-top: 0; min-height: 36px; }
.spiel-app .week-finances > p { color: var(--muted); font-size: .8125rem; margin-block: 10px 14px; }
.spiel-app .finance-title { font-size: 1rem; margin: 22px 0 10px; }
.spiel-app .finance-list { margin-block: 10px; font-size: .8125rem; }
.spiel-app .finance-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 7px; }
.spiel-app .finance-list > div + div { border-top: 1px solid var(--border); }
.spiel-app .finance-list dt { color: var(--muted); }
.spiel-app .finance-list dd { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spiel-app .finance-list > div:last-child dd { font-weight: 650; }
.spiel-app .recap .finance-list { margin-bottom: 24px; }
.spiel-app .selection-note { font-size: .8125rem; color: var(--muted); margin: 15px 0 12px; }
.spiel-app .end-week { width: 100%; }
.spiel-app .event-panel { background: var(--tint); border-radius: 6px; padding: 20px; margin-bottom: 24px; }
.spiel-app .event-context { font-size: .75rem; color: var(--muted); margin-bottom: 8px; }
.spiel-app .event-panel h2 { font-size: 1.2rem; }
.spiel-app .event-panel > p:not(.event-context) { font-size: .875rem; margin-top: 9px; }
.spiel-app .event-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.spiel-app .event-choices .button { background: var(--surface); border-color: var(--border); color: var(--heading); font-size: .8125rem; padding: 10px 12px; }
.spiel-app .event-choices .button:disabled { color: var(--muted); border-style: dashed; }
.spiel-app .event-resolved { padding: 16px 20px; }
.spiel-app .event-resolved > p:last-child { margin-top: 0; }
.spiel-app .recap { padding: 28px 0; }
.spiel-app .recap h2 { font-size: 2rem; letter-spacing: -.04em; }
.spiel-app .rank-change { color: var(--accent); font-size: 2.6rem; letter-spacing: -.055em; font-weight: 650; margin: 14px 0; font-variant-numeric: tabular-nums; }
.spiel-app .recap > p:not(.intro-context):not(.rank-change) { margin-bottom: 16px; }
.spiel-app .recap .button { margin-top: 12px; }
.spiel-app .recap-notices { padding-left: 20px; font-size: .875rem; }
.spiel-app .recap-notices li { margin-block: 10px; }
.spiel-app .recap-notices li.is-warning { color: var(--negative); }
.spiel-app .result { padding-top: 24px; }
.spiel-app .result h1 { font-size: 1.75rem; letter-spacing: -.04em; }
.spiel-app .result-rank { color: var(--heading); font-size: 1.5rem; line-height: 1.1; margin: 20px 0 15px; }
.spiel-app .result-rank strong { display: inline-block; margin-left: 10px; color: var(--accent); font-size: 6rem; font-weight: 650; letter-spacing: -.075em; }
.spiel-app .result-rank.is-suspended strong { display: block; margin-left: 0; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.15; letter-spacing: -.04em; }
.spiel-app .result-verdict { font-size: 1.0625rem; max-width: 42ch; }
.spiel-app #result-progress { margin-top: 8px; }
.spiel-app .result-main h2 { font-size: 1.125rem; margin-top: 30px; }
.spiel-app .result-setbacks > p { margin-top: 10px; font-size: .875rem; }
.spiel-app .setback-weeks { list-style: none; padding: 0; margin-top: 16px; }
.spiel-app .setback-week { border-top: 1px solid var(--border); padding: 16px 0; }
.spiel-app .setback-week h3 { font-size: 1rem; }
.spiel-app .setback-week ul { padding-left: 20px; margin-top: 8px; font-size: .875rem; }
.spiel-app .setback-week ul li + li { margin-top: 8px; }
.spiel-app .learnings { padding: 0; list-style: none; margin: 12px 0 0; counter-reset: learning; }
.spiel-app .learnings li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border); font-size: .875rem; }
.spiel-app .learnings li::before { counter-increment: learning; content: counter(learning) "."; color: var(--accent); font-weight: 650; }
.spiel-app .result-cta { padding: 26px 22px; margin-top: 28px; background: var(--tint); border-radius: 8px; }
.spiel-app .result-cta > .search-icon { margin: 0 0 24px 3px; }
.spiel-app .result-cta h2 { font-size: 1.875rem; letter-spacing: -.045em; }
.spiel-app .result-cta p { margin-top: 18px; font-size: .9375rem; }
.spiel-app .result-cta .button { width: 100%; margin-top: 24px; text-align: left; }
.spiel-app .result-cta .secondary { margin-top: 10px; }
.spiel-app .result-sidebar { min-width: 0; }
.spiel-app .result-share { margin-top: 32px; }
.spiel-app .result-share h2 { font-size: 1.25rem; letter-spacing: -.025em; }
.spiel-app .result-share > p { font-size: .875rem; margin-top: 12px; color: var(--muted); }
.spiel-app #share-card { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; margin-top: 18px; border: 1px solid var(--border); border-radius: 6px; }
.spiel-app .share-actions { display: grid; gap: 9px; margin-top: 16px; }
.spiel-app .share-actions .button { width: 100%; text-align: left; justify-content: flex-start; }
.spiel-app #share-text { display: block; resize: vertical; width: 100%; min-height: 180px; padding: 12px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); font: inherit; font-size: .8125rem; line-height: 1.5; }
.spiel-app .result-share > .share-feedback { min-height: 1.5em; margin-top: 8px; font-size: .8125rem; }
.spiel-app .result-share > #share-mode-hint { font-size: .8125rem; }
.spiel-app .share-game-link { display: inline-block; padding-block: 12px; font-size: .8125rem; overflow-wrap: anywhere; }
.spiel-app .share-fallback { margin-top: 4px; border-top: 1px solid var(--border); }
.spiel-app .share-fallback ol { padding-left: 20px; font-size: .8125rem; }
.spiel-app .share-fallback li + li { margin-top: 6px; }
.spiel-app .share-fallback p { margin-top: 10px; color: var(--muted); font-size: .8125rem; }
.spiel-app.spiel-info { padding: 0 0 8px; }
.spiel-app.spiel-info > h2 { font-size: 1.5rem; letter-spacing: -.03em; margin-bottom: 16px; }
.spiel-app.spiel-info > p { color: var(--text); font-size: .9375rem; max-width: 72ch; margin-bottom: 14px; }
.spiel-app.spiel-info > p.spiel-note { color: var(--muted); font-size: .8125rem; max-width: 90ch; margin-bottom: 8px; }
.spiel-app.spiel-learn { padding: 56px 0 24px; border-top: 1px solid var(--border); margin-top: 24px; }
.spiel-app.spiel-rules { padding: 24px 0 72px; }
.spiel-app .model-info { margin-top: 4px; max-width: 90ch; }
.spiel-app .model-info summary { color: var(--muted); font-size: .75rem; font-weight: 400; }
.spiel-app .model-info p { font-size: .8125rem; color: var(--muted); margin-bottom: 10px; }
.spiel-app .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.spiel-app .no-script { border: 1px solid var(--border); padding: 20px; margin-top: 24px; }
/* Auf dem Startbildschirm steht der Ort direkt neben der Ausgangslage. */
.spiel-app[data-phase="intro"] #intro, .spiel-app[data-phase="intro"] #play-layout { display: contents; }
.spiel-app[data-phase="intro"] { display: grid; gap: 32px; padding-top: 28px; padding-bottom: 24px; align-items: center; }
.spiel-app[data-phase="intro"] .map-panel { position: static; }
.spiel-app[data-phase="intro"] .ranking-preview { display: none; }
/* Mobil bleibt der Ort kompakt; Aktionswechsel scrollen direkt zur Entscheidung. */
.spiel-app[data-phase="playing"] .map-heading, .spiel-app[data-phase="recap"] .map-heading { padding-block: 12px; }
@media (hover: hover) and (pointer: fine) {
  .spiel-app .primary:hover { background: var(--hover); }
  .spiel-app .secondary:hover { background: var(--surface); }
  .spiel-app .action-card:hover:not([aria-disabled="true"]) { border-color: var(--accent); }
  .spiel-app .event-choices .button:hover { border-color: var(--accent); }
}
@media (min-width: 680px) {
  .spiel-app { width: min(1280px, calc(100% - 64px)); }
  
  .spiel-app .intro h1 { font-size: 3.5rem; }
  .spiel-app .intro { padding-top: 44px; }
  .spiel-app .play-layout { grid-template-columns: 1fr 1fr; gap: 32px; }
  .spiel-app .result { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .spiel-app .result-cta { margin-top: 24px; }
  .spiel-app .status-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 16px; }
  .spiel-app .status-bar dt { font-size: .8125rem; }
  .spiel-app .status-bar dd { font-size: 1.65rem; }
  .spiel-app .status-bar > div + div { padding-left: 24px; }
  .spiel-app .point-dots { display: inline-flex; gap: 5px; margin-left: 16px; vertical-align: middle; }
  .spiel-app .point-dots i { width: 7px; height: 7px; border: 1px solid var(--accent); border-radius: 50%; }
  .spiel-app .point-dots i.is-full { background: var(--accent); }
  .spiel-app .map-bottom { font-size: .6875rem; }
}
@media (min-width: 1000px) {
  
  
  .spiel-app[data-phase="intro"] { grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: 56px; min-height: calc(100svh - 230px); padding-block: 36px; }
  .spiel-app .intro h1 { font-size: clamp(2.75rem, 4.2vw, 3.8rem); }
  .spiel-app .intro-description { font-size: 1.0625rem; }
  /* 1280px Fläche: flexible Ortsansicht und Entscheidungen mit 40px Abstand. */
  .spiel-app .play-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; }
  .spiel-app .game-heading { padding-top: 27px; }
  .spiel-app .status-bar { margin-bottom: 30px; }
  .spiel-app .decision-panel { padding-top: 4px; }
  .spiel-app .map-panel { position: static; }
  .spiel-app .result { grid-template-columns: 1fr 440px; gap: 96px; }
  .spiel-app .result-cta { padding: 36px; }
  .spiel-app .result-cta h2 { font-size: 2.1rem; }
}
@media (max-width: 679px) {
  
  .spiel-app .intro h1 { max-width: none; }
  .spiel-app .game-heading { padding-block: 12px 18px; }
  .spiel-app .game-heading h1 { font-size: 1.375rem; }
  .spiel-app .status-bar { position: sticky; top: 0; z-index: 2; background: var(--ground); }
  .spiel-app .status-bar > div + div { padding-left: 8px; }
  .spiel-app .status-bar dt { font-size: .6875rem; white-space: nowrap; }
  .spiel-app .status-bar { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.5fr); gap: 6px; }
  .spiel-app .status-bar > div { min-width: 0; }
  .spiel-app .status-bar dd { font-size: 1.125rem; white-space: nowrap; }
  .spiel-app .status-bar dd#budget { font-size: 1.0625rem; letter-spacing: -.01em; }
  .spiel-app .status-unit { font-size: .75rem; }
  .spiel-app .map-bottom { font-size: .6875rem; }
  .spiel-app .map-business { padding: 0 16px 14px; }
  .spiel-app .map-business > div > strong { font-size: .9375rem; }
  .spiel-app .map-business > p > strong { font-size: 1.4rem; }
  .spiel-app .map-event-note { padding: 12px 16px; font-size: .75rem; }
  .spiel-app[data-phase="playing"] .play-layout, .spiel-app[data-phase="recap"] .play-layout { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .spiel-app, .spiel-app *, .spiel-app *::before, .spiel-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .spiel-app .button:active, .spiel-app .action-card:active { transform: none !important; }
}

/* Zusatzlinks im Abschluss und Zeitangaben */
.spiel-app .cta-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: .8125rem; }
.spiel-app .cta-links a { color: var(--hover); text-decoration: underline; text-underline-offset: 3px; }
.spiel-app .action-hours { color: var(--muted); }
.spiel-app .result-outlook { margin-top: 18px; }

/* ---- Version 2.3: Startsituationen, Local Pack, Mitbewerber-Notiz, Profi-Vergleich, Abzeichen ---- */
.spiel-app .start-picker { margin-top: 18px; }
.spiel-app .start-options { grid-template-columns: minmax(0, 1fr); }
.spiel-app .start-hint { margin-top: 10px; font-size: .8125rem; color: var(--muted); max-width: 52ch; }
.spiel-app .intro-best { margin-top: 14px; font-size: .875rem; font-weight: 600; color: var(--heading); }
.spiel-app .intro .intro-best + .button { margin-top: 18px; }

/* Local Pack (neutral nachgebaut, ohne fremde Markenoptik) */
.spiel-app .local-pack { list-style: none; padding: 0; margin: 12px 0 0; }
.spiel-app .pack-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 9px 0; font-size: .8125rem; line-height: 1.4; }
.spiel-app .pack-item + .pack-item { border-top: 1px solid var(--border); }
.spiel-app .pack-item.is-own { margin-inline: -8px; padding-inline: 8px; background: var(--tint); border-radius: 6px; border-top-color: transparent; }
.spiel-app .pack-item.is-own + .pack-item { border-top-color: transparent; }
.spiel-app .pack-pos { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.spiel-app .pack-body { display: grid; gap: 1px; min-width: 0; }
.spiel-app .pack-body p { max-width: none; }
.spiel-app .pack-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.spiel-app .pack-name { color: var(--heading); font-weight: 650; overflow-wrap: anywhere; }
.spiel-app .pack-tag { font-size: .6875rem; line-height: 1.5; padding: 0 6px; border: 1px solid var(--accent); border-radius: 3px; color: var(--hover); white-space: nowrap; }
.spiel-app .pack-tag.is-warn { border-color: var(--negative); color: var(--negative); }
.spiel-app .pack-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; color: var(--muted); }
.spiel-app .pack-rating { display: inline-flex; align-items: center; gap: 5px; }
.spiel-app .pack-number { color: var(--heading); font-weight: 650; font-variant-numeric: tabular-nums; }
.spiel-app .pack-stars { position: relative; display: inline-block; width: 5.4em; height: 1.1em; font-size: .8125rem; line-height: 1.1; }
.spiel-app .pack-stars::before, .spiel-app .pack-stars::after { content: "★★★★★"; position: absolute; inset: 0 auto 0 0; white-space: nowrap; letter-spacing: .06em; }
.spiel-app .pack-stars::before { color: #d3d8e0; }
.spiel-app .pack-stars::after { width: var(--fill, 0%); overflow: hidden; color: #c98700; }
.spiel-app .pack-count { font-variant-numeric: tabular-nums; }
.spiel-app .pack-meta { color: var(--muted); }
.spiel-app .pack-meta .is-open { color: var(--positive); }
.spiel-app .pack-meta .is-warn { color: var(--negative); font-weight: 600; }
.spiel-app .pack-gap { padding: 3px 0 3px 30px; color: var(--muted); font-size: .8125rem; }
.spiel-app .pack-note { margin-top: 8px; padding: 10px 12px; border-radius: 6px; background: var(--negative-tint); color: var(--negative); font-size: .8125rem; }
.spiel-app .ranking-preview { padding-bottom: 14px; }
@media (min-width: 1000px) and (min-height: 980px) {
  .spiel-app .map-panel { position: sticky; top: 24px; }
}
@media (max-width: 679px) {
  .spiel-app .ranking-preview { padding: 16px 16px 8px; }
}

/* Mitbewerber-Notiz im Wochenrückblick */
.spiel-app .recap-rival { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--muted); background: var(--ground); font-size: .875rem; color: var(--text); max-width: 68ch; }
.spiel-app .recap > p.recap-rival { margin-bottom: 16px; }

/* Ergebnis: Bestwert, Profi-Vergleich, Abzeichen */
.spiel-app .result-best { margin-top: 6px; font-size: .875rem; color: var(--heading); font-weight: 600; }
.spiel-app .result-pro, .spiel-app .result-badges { margin-top: 30px; }
.spiel-app .result-pro h2, .spiel-app .result-badges h2 { margin-top: 0; }
.spiel-app .result-pro > p, .spiel-app .result-badges > p { margin-top: 8px; font-size: .875rem; }
.spiel-app .pro-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: .875rem; }
.spiel-app .pro-table th, .spiel-app .pro-table td { padding: 10px 10px 10px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--border); font-weight: 400; }
.spiel-app .pro-table thead th { border-top: 0; font-size: .75rem; color: var(--muted); padding-top: 0; }
.spiel-app .pro-table tbody th { font-weight: 650; color: var(--heading); white-space: nowrap; }
.spiel-app .pro-table tbody td:nth-child(2) { font-weight: 650; color: var(--accent); white-space: nowrap; }
.spiel-app .pro-table tbody tr:last-child th, .spiel-app .pro-table tbody tr:last-child td { padding-bottom: 4px; }
.spiel-app .pro-text { font-weight: 600; color: var(--heading); }
.spiel-app .pro-note { color: var(--muted); font-size: .8125rem; }
.spiel-app .badge-list { list-style: none; padding: 0; margin: 10px 0 0; }
.spiel-app .badge-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--border); font-size: .875rem; color: var(--muted); }
.spiel-app .badge-item.is-earned { color: var(--text); }
.spiel-app .badge-mark { font-weight: 700; text-align: center; color: var(--muted); }
.spiel-app .badge-item.is-earned .badge-mark { color: var(--positive); }
.spiel-app .badge-text strong { color: var(--heading); }
.spiel-app .badge-item:not(.is-earned) .badge-text strong { color: var(--muted); }
.spiel-app .badge-state { font-size: .75rem; }
.spiel-app .badge-text small { display: block; font-size: .8125rem; color: var(--muted); }
@media (max-width: 679px) {
  .spiel-app .pro-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .spiel-app .pro-table, .spiel-app .pro-table tbody, .spiel-app .pro-table tr { display: block; }
  .spiel-app .pro-table tr { padding: 10px 0; border-top: 1px solid var(--border); }
  .spiel-app .pro-table th, .spiel-app .pro-table td { display: block; border-top: 0; padding: 0; }
  .spiel-app .pro-table tbody td:nth-child(2) { font-size: 1.125rem; }
  .spiel-app .pro-table tbody tr:last-child th, .spiel-app .pro-table tbody tr:last-child td { padding-bottom: 0; }
}

/* Mobil: Die feste Website-Kopfleiste blendet sich beim Hochscrollen wieder ein (script.js entfernt dann body.header-hidden)
   und würde die klebende Statusleiste überdecken. Die Statusleiste rückt deshalb unter die Kopfleiste und bei versteckter
   Kopfleiste wieder nach oben. --spiel-header-h setzt spiel.js aus der echten Höhe, 66px ist der Ersatzwert. */
@media (max-width: 679px) {
  .spiel-app .status-bar { top: var(--spiel-header-h, 66px); transition: top 250ms ease-out; }
  body.header-hidden .spiel-app .status-bar { top: 0; }
}

/* Der Website-Button „nach oben“ (#back-to-top) sitzt als schmaler Reiter am rechten Rand und das Spiel lässt dort Platz,
   damit er unter 1200px keinen Text von Aktionskarten oder Auswertung überdeckt. Website-Dateien bleiben unverändert. */
@media (max-width: 1199px) {
  .spiel-app { width: min(1280px, calc(100% - 76px)); margin-left: 32px; margin-right: auto; }
  body:has(.spiel-app) #back-to-top { width: 28px; height: 44px; right: 0; bottom: 12px; border-radius: 22px 0 0 22px; border-right: 0; font-size: 1rem; }
}
@media (max-width: 679px) {
  .spiel-app { width: calc(100% - 52px); margin-left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .spiel-app .status-bar { transition: none !important; }
}