/* FPA Simulator – Einbettung auf der WordPress-Seite */
/* --fpa-kopf: Höhe einer festen Theme-Kopfleiste (misst fpa-seite.js ab 0.2.2), damit Leiste + Spiel genau darunter in den Bildschirm passen */
.fpa-sim { --fpa-kopf: 0px; --fpa-sim-hoehe: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 44px - var(--fpa-kopf)); margin: 1.5em 0; box-sizing: border-box; scroll-margin-top: var(--fpa-kopf); }
.fpa-sim-verdeckt { visibility: hidden !important; pointer-events: none !important; }
.fpa-sim *, .fpa-sim *::before, .fpa-sim *::after { box-sizing: border-box; }
.fpa-sim--voll { position: relative; width: 100vw; max-width: 100vw !important; left: 50%; margin-left: -50vw !important; margin-right: 0 !important; }
.fpa-sim__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 12px; background: #1d2228; color: #e6e9ee; font: 14px/1.3 system-ui, sans-serif; border-radius: 6px 6px 0 0; }
.fpa-sim--voll .fpa-sim__leiste { border-radius: 0; }
.fpa-sim__titel { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.fpa-sim__untertitel { color: #9aa7b4; font-size: 13px; }
.fpa-sim__status { flex: 1 1 auto; color: #ffd27a; }
.fpa-sim__status a { color: #7cc4ff; font-weight: 700; }
.fpa-sim__punkte { color: #ffd23f; }
.fpa-sim__aktionen { display: flex; gap: 6px; margin-left: auto; }
.fpa-sim__btn { display: inline-block; background: #2e353e; color: #e6e9ee !important; border: 1px solid #0b0d10; border-radius: 5px; padding: 4px 10px; font: 600 13px system-ui, sans-serif; cursor: pointer; text-decoration: none !important; line-height: 1.3; }
.fpa-sim__btn:hover { background: #3a4450; }
.fpa-sim__rahmen { position: relative; width: 100%; height: var(--fpa-sim-hoehe); min-height: 600px; background: #15191d; }
.fpa-sim__iframe { display: block; width: 100%; height: 100%; border: 0; }
.fpa-sim__hinweis { margin: .4em 12px 0; font-size: 13px; opacity: .75; }
.fpa-sim:fullscreen { width: 100vw; height: 100vh; margin: 0; left: 0; background: #15191d; display: flex; flex-direction: column; }
.fpa-sim:fullscreen .fpa-sim__rahmen { flex: 1; height: auto; min-height: 0; }
.fpa-sim:fullscreen .fpa-sim__hinweis { display: none; }
/* ab 0.2.1: Handy – iframe so hoch wie der sichtbare Bildschirm (Spiel scrollt darin, danach die Seite), kompakte Leiste */
.fpa-sim__hinweis--mobil { display: none; }
@media (max-width: 899.98px), (pointer: coarse) and (max-height: 540px) {
  .fpa-sim { --fpa-sim-hoehe: calc(100vh - var(--fpa-kopf)); --fpa-sim-hoehe: calc(100svh - var(--fpa-kopf)); margin: 1em 0; scroll-margin-top: 0; }
  .fpa-sim__rahmen { min-height: 300px; scroll-margin-top: var(--fpa-kopf); }
  .fpa-sim__leiste { gap: 4px 10px; padding: 6px 10px; font-size: 13px; }
  .fpa-sim__untertitel { display: none; }
  .fpa-sim__status { flex-basis: 100%; order: 3; font-size: 12.5px; }
  .fpa-sim__btn { min-height: 40px; display: inline-flex; align-items: center; padding: 4px 12px; touch-action: manipulation; }
  .fpa-sim__hinweis--desktop { display: none; }
  .fpa-sim__hinweis--mobil { display: block; }
}
/* Seiten-Vollbild (iPhone ohne Fullscreen-API bzw. Vollbild-Karte im Spiel) */
html.fpa-sim-pseudovoll-an, html.fpa-sim-pseudovoll-an body { overflow: hidden !important; }
.fpa-sim.fpa-sim--pseudovoll { position: fixed !important; inset: 0 !important; z-index: 2147483000; width: 100% !important; max-width: none !important; height: 100vh; height: 100dvh; margin: 0 !important; left: 0 !important;
  display: flex; flex-direction: column; background: #15191d; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.fpa-sim--pseudovoll .fpa-sim__rahmen { flex: 1; height: auto; min-height: 0; }
.fpa-sim--pseudovoll .fpa-sim__hinweis, .fpa-sim--pseudovoll .fpa-sim__status { display: none; }
.fpa-sim--pseudovoll.fpa-sim--karte .fpa-sim__leiste { display: none; }

/* ---------- Rangliste (dunkel/neutral, responsiv) ---------- */
.fpa-rangliste { --fpa-bg: #15181d; --fpa-bg2: #1e232a; --fpa-rand: #2c333d; --fpa-text: #e8eaed; --fpa-leise: #9aa3ad; --fpa-akzent: #f2b437;
  background: var(--fpa-bg); color: var(--fpa-text); border: 1px solid var(--fpa-rand); border-radius: 12px; padding: 16px 18px; margin: 1.5em 0; max-width: 720px; box-sizing: border-box; font-size: 15px; line-height: 1.45; }
.fpa-rangliste__titel { margin: 0 0 12px; font-size: 1.25em; color: var(--fpa-text); }
.fpa-rangliste__tabelle { width: 100%; border-collapse: collapse; margin: 0; border: 0; }
.fpa-rangliste__tabelle th, .fpa-rangliste__tabelle td { padding: 7px 10px; border: 0; border-bottom: 1px solid var(--fpa-rand); text-align: left; color: var(--fpa-text); background: transparent; }
.fpa-rangliste__tabelle th { color: var(--fpa-leise); font-weight: 600; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }
.fpa-rangliste__tabelle td:first-child, .fpa-rangliste__tabelle th:first-child { width: 4.5em; }
.fpa-rangliste__tabelle td:last-child, .fpa-rangliste__tabelle th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.fpa-rangliste__tabelle tbody tr:nth-child(-n+3) .fpa-rangliste__platz { color: var(--fpa-akzent); font-weight: 700; }
.fpa-rangliste__ich td { background: rgba(242,180,55,.12); font-weight: 700; }
.fpa-rangliste__leer, .fpa-rangliste__dein { color: var(--fpa-leise); margin: 10px 0 0; }
.fpa-rangliste__dein b { color: var(--fpa-akzent); }
.fpa-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.fpa-tabs__tab { appearance: none; background: var(--fpa-bg2); color: var(--fpa-leise); border: 1px solid var(--fpa-rand); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .9em; cursor: pointer; line-height: 1.2; }
.fpa-tabs__tab:hover, .fpa-tabs__tab:focus-visible { color: var(--fpa-text); border-color: var(--fpa-leise); outline: none; }
.fpa-tabs__tab.is-aktiv { background: var(--fpa-akzent); border-color: var(--fpa-akzent); color: #1b1b1b; font-weight: 700; }
.fpa-tabs { display: none; }
.fpa-tabs.is-bereit { display: flex; }
.fpa-tabs__panel + .fpa-tabs__panel { margin-top: 18px; }
.fpa-tabs.is-bereit ~ .fpa-tabs__panel { margin-top: 0; }
.fpa-tabs.is-bereit ~ .fpa-tabs__panel[hidden] { display: none; }
.fpa-tabs__panel-titel { margin: 0 0 6px; font-size: 1em; color: var(--fpa-leise); }
.fpa-tabs.is-bereit ~ .fpa-tabs__panel .fpa-tabs__panel-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Übersicht (Kacheln) ---------- */
.fpa-uebersicht { --fpa-spalten: 3; display: grid; grid-template-columns: repeat(var(--fpa-spalten), minmax(0, 1fr)); gap: 20px; margin: 1.5em 0; }
@media (max-width: 960px) { .fpa-uebersicht { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fpa-uebersicht { grid-template-columns: 1fr; } }
.fpa-kachel { display: flex; flex-direction: column; background: #15181d; color: #e8eaed; border: 1px solid #2c333d; border-radius: 12px; overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; }
.fpa-kachel:hover { transform: translateY(-2px); border-color: #4a5462; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.fpa-kachel__bild { display: block; aspect-ratio: 16 / 9; background: #0d0f12; overflow: hidden; }
.fpa-kachel__bild img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.fpa-kachel__platzhalter { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3em; color: #4a5462; }
.fpa-kachel__text { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.fpa-kachel__titel { margin: 0; font-size: 1.2em; color: #fff; }
.fpa-kachel__untertitel { margin: 0; color: #f2b437; font-size: .85em; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.fpa-kachel__beschreibung { margin: 0; color: #c3c9d0; font-size: .95em; line-height: 1.45; flex: 1; }
.fpa-kachel__stats { margin: 0; color: #9aa3ad; font-size: .85em; }
.fpa-kachel__link { align-self: flex-start; margin-top: 6px; background: #f2b437; color: #1b1b1b !important; text-decoration: none !important; font-weight: 700; padding: 8px 16px; border-radius: 8px; }
.fpa-kachel__link:hover, .fpa-kachel__link:focus-visible { background: #ffc857; outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Rollen in der Spielleiste ---------- */
.fpa-sim__rolle { display: inline-block; border-radius: 10px; padding: 0 8px; font-size: .8em; font-weight: 700; background: #3b3f46; color: #fff; }
.fpa-sim__rolle--patron { background: linear-gradient(135deg, #f2b437, #e0762b); color: #1b1b1b; }
.fpa-sim__rolle--moderator { background: #2f7de1; }
.fpa-sim__rolle--admin { background: #c62828; }
.fpa-sim__rolle--test { background: #7a4dff; }

/* ---------- Statistik & Medaillen (Aktivitätsringe) ---------- */
.fpa-statistik { --fpa-bg: #0f1114; --fpa-bg2: #1a1d22; --fpa-rand: #2a2f37; --fpa-text: #f2f3f5; --fpa-leise: #9aa3ad; --fpa-akzent: #f2b437;
  background: var(--fpa-bg); color: var(--fpa-text); border: 1px solid var(--fpa-rand); border-radius: 16px; padding: 18px 20px; margin: 1.5em 0; max-width: 900px; box-sizing: border-box; font-size: 15px; line-height: 1.45; }
.fpa-statistik a { color: #8ab4ff; }
.fpa-statistik__titel { margin: 0 0 12px; font-size: 1.25em; color: var(--fpa-text); }
.fpa-statistik__kopf { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }
.fpa-ringe { display: block; filter: drop-shadow(0 0 10px rgba(0,0,0,.6)); }
.fpa-ring { animation: fpa-ring-ein 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fpa-ring-ein { from { stroke-dasharray: 0 var(--fpa-umfang); } }
.fpa-statistik__legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fpa-statistik__legende li { display: flex; align-items: baseline; gap: 8px; }
.fpa-statistik__legende b { color: var(--fpa-farbe); font-size: 1.15em; font-variant-numeric: tabular-nums; }
.fpa-statistik__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--fpa-farbe); align-self: center; box-shadow: 0 0 8px var(--fpa-farbe); }
.fpa-statistik__lbl { color: var(--fpa-leise); min-width: 9.5em; }
.fpa-statistik__kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 12px; }
.fpa-statistik__kacheln div { background: var(--fpa-bg2); border: 1px solid var(--fpa-rand); border-radius: 12px; padding: 10px 12px; }
.fpa-statistik__kacheln dt { color: var(--fpa-leise); font-size: .78em; text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.fpa-statistik__kacheln dd { margin: 2px 0 0; font-size: 1.35em; font-weight: 700; font-variant-numeric: tabular-nums; }
.fpa-statistik__info { color: var(--fpa-leise); margin: 0 0 10px; }
.fpa-statistik__h { margin: 16px 0 10px; font-size: 1.05em; color: var(--fpa-text); }
.fpa-statistik__h small { color: var(--fpa-leise); font-weight: 400; }
.fpa-medaillen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px 10px; }
.fpa-medaille { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.fpa-medaille__plakette { position: relative; width: 88px; height: 88px; color: var(--fpa-farbe); }
.fpa-medaille__plakette svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fpa-medaille__symbol { position: absolute; inset: 13px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fpa-farbe) 75%, #fff), var(--fpa-farbe) 55%, color-mix(in srgb, var(--fpa-farbe) 45%, #000));
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.35), inset 0 3px 6px rgba(255,255,255,.35), 0 0 14px color-mix(in srgb, var(--fpa-farbe) 55%, transparent); }
.fpa-medaille.is-offen .fpa-medaille__symbol { background: #23272e; box-shadow: inset 0 0 0 1px #343a43; filter: grayscale(1); opacity: .55; }
.fpa-medaille__name { font-weight: 700; font-size: .9em; margin-top: 4px; }
.fpa-medaille.is-offen .fpa-medaille__name { color: var(--fpa-leise); }
.fpa-medaille__ziel { font-size: .78em; color: var(--fpa-farbe); }
.fpa-medaille__info { font-size: .75em; color: var(--fpa-leise); }
@media (max-width: 600px) { .fpa-statistik { padding: 14px; } .fpa-statistik__kopf { justify-content: center; } .fpa-ringe { width: 130px; height: 130px; } .fpa-medaillen { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .fpa-medaille__plakette { width: 74px; height: 74px; } .fpa-medaille__symbol { font-size: 24px; inset: 11px; } }
@media (prefers-reduced-motion: reduce) { .fpa-ring { animation: none; } }

/* =====================================================================
   Übersichtsseite [fpa_simulator_uebersicht] (ab 0.2.0)
   Ohne externe Fonts/CDNs: Schriften erbt das Theme (font-family: inherit).
   ===================================================================== */
.fpa-start { --fpa-gold: #ffc23d; --fpa-gold2: #ff9f2e; --fpa-nacht: #0d1520; --fpa-karte: #111a26; --fpa-karte2: #0b121b; --fpa-rand: #24344b;
  --fpa-text: #eef3f8; --fpa-leise: #a9b7c8; --fpa-hell: #f3f6fa; --fpa-hell-rand: #e1e7ef; --fpa-hell-text: #1b2735; --fpa-hell-leise: #4b5a6c;
  container: fpa-start / inline-size; margin: 0 0 2.5em; font-size: 16px; line-height: 1.5; color: var(--fpa-hell-text); box-sizing: border-box; }
.fpa-start *, .fpa-start *::before, .fpa-start *::after { box-sizing: border-box; }
.fpa-start p, .fpa-start ul, .fpa-start ol, .fpa-start dl, .fpa-start dd, .fpa-start h2, .fpa-start h3 { margin: 0; padding: 0; }
.fpa-start ul, .fpa-start ol { list-style: none; }
.fpa-start h2, .fpa-start h3 { font-family: inherit; clear: none; word-spacing: normal; }
.fpa-start img { max-width: 100%; height: auto; border: 0; box-shadow: none; }
.fpa-start a { text-decoration: none; }
.fpa-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.fpa-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Buttons ---------- */
.fpa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: .7em 1.35em; border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none !important; cursor: pointer; transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s, filter .15s; }
.fpa-btn:focus-visible, .fpa-start a:focus-visible { outline: 3px solid var(--fpa-gold); outline-offset: 3px; box-shadow: 0 0 0 3px var(--fpa-nacht); }
.fpa-btn--primaer { background: linear-gradient(135deg, #ffd45a, var(--fpa-gold2)); color: #1d1405 !important; box-shadow: 0 6px 18px rgba(255, 160, 46, .35); }
.fpa-btn--primaer:hover, .fpa-btn--primaer:focus-visible { color: #1d1405 !important; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255, 160, 46, .45); }
.fpa-btn--hell { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .38); color: #fff !important; }
.fpa-btn--hell:hover, .fpa-btn--hell:focus-visible { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff !important; }
.fpa-btn--leise { background: transparent; border-color: var(--fpa-rand); color: var(--fpa-text) !important; }
.fpa-btn--leise:hover, .fpa-btn--leise:focus-visible { border-color: var(--fpa-karte-akzent, var(--fpa-gold)); color: #fff !important; }

/* ---------- Hero ---------- */
.fpa-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 32px; align-items: center;
  padding: 26px 22px; border-radius: 22px; color: var(--fpa-text);
  background: radial-gradient(110% 90% at 88% 0%, rgba(47, 209, 166, .30), transparent 55%), radial-gradient(80% 90% at 100% 100%, rgba(181, 140, 240, .34), transparent 60%),
              radial-gradient(60% 70% at 0% 100%, rgba(255, 159, 46, .16), transparent 60%), linear-gradient(140deg, #0c1420 0%, #12233a 55%, #1c1838 100%);
  box-shadow: 0 18px 40px rgba(13, 21, 32, .22); }
.fpa-hero__deko { position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath d='M-20 330 C 180 200 300 380 470 250 S 760 60 930 190 S 1150 320 1230 120' fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='3' stroke-dasharray='2 14' stroke-linecap='round'/%3E%3Cpath d='M-20 360 C 200 250 330 400 500 290 S 780 110 950 230 S 1160 350 1230 170' fill='none' stroke='%232fd1a6' stroke-opacity='.18' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.fpa-hero__text { position: relative; }
.fpa-hero__kicker { display: inline-flex; align-items: center; gap: .45em; margin-bottom: 14px !important; padding: 5px 12px; border-radius: 999px; background: rgba(255, 194, 61, .14); color: #ffd77a;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fpa-hero__kicker .fpa-icon { width: .95em; height: .95em; }
.fpa-start .fpa-hero__titel { color: #fff; font-size: clamp(1.85rem, 1.2rem + 3cqi, 3.1rem); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.fpa-hero__untertitel { margin-top: 14px !important; max-width: 40em; color: #cbd6e2; font-size: clamp(1rem, .95rem + .3cqi, 1.15rem); }
.fpa-hero__aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.fpa-hero__konto { margin-top: 16px !important; color: var(--fpa-leise); font-size: .92rem; }
.fpa-hero__konto b { color: #fff; }
.fpa-hero__konto a { color: #ffd77a !important; font-weight: 700; text-decoration: underline !important; text-underline-offset: 3px; }
.fpa-hero__konto a:hover { color: #fff !important; }
.fpa-hero__logos { position: relative; order: -1; height: 112px; }
.fpa-hero__logo { position: absolute; top: 0; width: auto !important; height: 112px !important; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.fpa-hero__logo--1 { left: 0; transform: rotate(-7deg); }
.fpa-hero__logo--2 { left: 88px; top: 6px; transform: rotate(8deg); }
.fpa-hero__zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 10px; }
.fpa-hero__zahlen div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: rgba(255, 255, 255, .06); backdrop-filter: blur(4px); }
.fpa-hero__zahlen dt { color: var(--fpa-leise); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fpa-hero__zahlen dd { margin: 0; color: #fff; font-size: 1.6rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
@container fpa-start (min-width: 760px) {
  .fpa-hero { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); padding: 48px 52px 40px; }
  .fpa-hero__logos { order: 0; height: 270px; }
  .fpa-hero__logo { height: 230px !important; }
  .fpa-hero__logo--1 { left: 4%; top: 4px; }
  .fpa-hero__logo--2 { left: auto; right: 2%; top: 46px; }
  .fpa-hero__zahlen { grid-column: 1 / -1; margin-top: 6px; }
}

/* ---------- Abschnittsüberschriften (auf heller Theme-Seite) ---------- */
.fpa-start .fpa-start__h2 { display: flex; align-items: center; gap: 12px; margin: 42px 0 18px; color: var(--fpa-hell-text); font-size: clamp(1.4rem, 1.1rem + 1.2cqi, 1.95rem); font-weight: 700; line-height: 1.2; }
.fpa-start .fpa-start__h2::before { content: ""; flex: none; width: 34px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--fpa-gold), var(--fpa-gold2)); }

/* ---------- Simulator-Karten ---------- */
.fpa-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.fpa-kachel.fpa-karte { --fpa-karte-akzent: var(--fpa-gold); position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--fpa-rand); border-radius: 22px;
  background: var(--fpa-karte); color: var(--fpa-text); box-shadow: 0 12px 30px rgba(13, 21, 32, .16); transition: transform .2s, box-shadow .2s, border-color .2s; }
.fpa-kachel.fpa-karte::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--fpa-karte-akzent), var(--fpa-gold)); }
.fpa-kachel.fpa-karte:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--fpa-karte-akzent) 55%, var(--fpa-rand)); box-shadow: 0 20px 44px rgba(13, 21, 32, .26); }
.fpa-karte .fpa-kachel__bild { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--fpa-karte2); }
.fpa-karte .fpa-kachel__bild img { display: block; width: 100%; height: 100% !important; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.fpa-karte .fpa-kachel__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 26, 38, 0) 55%, var(--fpa-karte) 100%); }
.fpa-karte:hover .fpa-kachel__bild img { transform: scale(1.045); }
.fpa-karte__play { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  background: rgba(13, 21, 32, .55); border: 2px solid rgba(255, 255, 255, .7); color: #fff; backdrop-filter: blur(3px); transition: transform .2s, background-color .2s; }
.fpa-karte__play .fpa-icon { width: 30px; height: 30px; margin-left: 4px; }
.fpa-karte:hover .fpa-karte__play { transform: scale(1.1); background: var(--fpa-gold); border-color: var(--fpa-gold); color: #1d1405; }
.fpa-karte .fpa-kachel__text { position: relative; display: flex; flex-direction: column; flex: 1; gap: 14px; margin-top: -30px; padding: 0 24px 24px; }
.fpa-karte__kopf { display: flex; align-items: center; gap: 14px; }
.fpa-karte__logo { flex: none; width: 58px !important; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.fpa-start .fpa-karte .fpa-kachel__titel { color: #fff; font-size: 1.55rem; font-weight: 700; line-height: 1.15; }
.fpa-karte .fpa-kachel__untertitel { margin-top: 3px; color: var(--fpa-karte-akzent); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fpa-karte__version { align-self: flex-start; margin-left: auto; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--fpa-karte-akzent) 60%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--fpa-karte-akzent) 14%, transparent); color: var(--fpa-karte-akzent); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.fpa-karte .fpa-kachel__beschreibung { flex: 0 0 auto; color: #c7d2de; font-size: .98rem; line-height: 1.55; }
.fpa-karte__highlights { display: grid; gap: 7px; }
.fpa-karte__highlights li { display: flex; align-items: flex-start; gap: 9px; color: var(--fpa-text); font-size: .95rem; }
.fpa-karte__highlights .fpa-icon { margin-top: .15em; color: var(--fpa-karte-akzent); stroke-width: 2.6; }
.fpa-karte__zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 8px; }
.fpa-karte__zahlen div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 10px 12px; border: 1px solid var(--fpa-rand); border-radius: 12px; background: var(--fpa-karte2); }
.fpa-karte__zahlen dt { color: var(--fpa-leise); font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; }
.fpa-karte__zahlen dd { margin: 0; color: #fff; font-size: 1.3rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.fpa-karte__mein { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--fpa-karte-akzent) 35%, var(--fpa-rand)); border-radius: 14px;
  background: color-mix(in srgb, var(--fpa-karte-akzent) 8%, var(--fpa-karte2)); }
.fpa-karte .fpa-kachel__stats { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--fpa-text); font-size: .88rem; }
.fpa-karte .fpa-kachel__stats span { display: inline-flex; align-items: center; gap: 6px; }
.fpa-karte .fpa-kachel__stats span:first-child { color: #fff; font-weight: 700; }
.fpa-karte .fpa-kachel__stats .fpa-icon { color: var(--fpa-gold); }
.fpa-fortschritt { height: 10px; overflow: hidden; border-radius: 999px; background: #070c12; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.fpa-fortschritt span { display: block; height: 100%; min-width: 6px; border-radius: inherit; background: linear-gradient(90deg, var(--fpa-karte-akzent), var(--fpa-gold)); }
.fpa-karte__ziel, .fpa-karte__frei, .fpa-karte__neu { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; line-height: 1.45; }
.fpa-karte__ziel { color: var(--fpa-leise); }
.fpa-karte__ziel .fpa-icon, .fpa-karte__frei .fpa-icon { margin-top: .1em; color: var(--fpa-karte-akzent); }
.fpa-karte__frei { padding: 11px 14px; border: 1px dashed var(--fpa-rand); border-radius: 12px; color: var(--fpa-leise); }
.fpa-karte__neu { padding: 10px 14px; border-left: 3px solid var(--fpa-gold); border-radius: 4px 12px 12px 4px; background: linear-gradient(90deg, rgba(255, 194, 61, .16), rgba(255, 194, 61, .02)); color: #ffe1a1; font-weight: 700; }
.fpa-karte__neu .fpa-icon { margin-top: .1em; color: var(--fpa-gold); }
.fpa-karte__aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }
.fpa-karte .fpa-kachel__link { align-self: auto; margin-top: 0; padding: .7em 1.5em; border-radius: 999px; font-size: 1.05rem; }
.fpa-karte .fpa-kachel__link:hover, .fpa-karte .fpa-kachel__link:focus-visible { background: linear-gradient(135deg, #ffd45a, var(--fpa-gold2)); }
.fpa-karte .fpa-kachel__link:focus-visible { outline: 3px solid var(--fpa-gold); outline-offset: 3px; }
@media (max-width: 480px) { .fpa-karte .fpa-kachel__text { padding: 0 18px 20px; } .fpa-karte__aktionen .fpa-btn { flex: 1 1 100%; } .fpa-start .fpa-karte .fpa-kachel__titel { font-size: 1.35rem; } }

/* ---------- So funktioniert's + Top 3 ---------- */
.fpa-start__unten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; align-items: start; }
@container fpa-start (min-width: 900px) { .fpa-start__unten { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.fpa-so { container: fpa-so / inline-size; }
.fpa-so__schritte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; counter-reset: fpa-schritt; }
@container fpa-so (min-width: 480px) { .fpa-so__schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container fpa-so (min-width: 920px) { .fpa-so__schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fpa-so__schritte li { position: relative; overflow: hidden; padding: 20px 20px 18px; border: 1px solid var(--fpa-hell-rand); border-radius: 18px; background: var(--fpa-hell); counter-increment: fpa-schritt; }
.fpa-so__schritte li::after { content: counter(fpa-schritt); position: absolute; top: 4px; right: 14px; color: rgba(27, 39, 53, .07); font-size: 4.2rem; font-weight: 800; line-height: 1; }
.fpa-so__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 14px; background: linear-gradient(135deg, #ffd45a, var(--fpa-gold2)); color: #1d1405; box-shadow: 0 6px 14px rgba(255, 160, 46, .3); }
.fpa-so__icon .fpa-icon { width: 24px; height: 24px; }
.fpa-start .fpa-so__schritte h3 { margin-bottom: 6px; color: var(--fpa-hell-text); font-size: 1.08rem; font-weight: 700; line-height: 1.25; }
.fpa-so__schritte p { color: var(--fpa-hell-leise); font-size: .93rem; line-height: 1.5; }
.fpa-top { margin-top: 42px; padding: 22px; border-radius: 22px; background: radial-gradient(90% 70% at 100% 0%, rgba(255, 194, 61, .18), transparent 60%), linear-gradient(160deg, #141d2b, #1d1735); color: var(--fpa-text); box-shadow: 0 12px 30px rgba(13, 21, 32, .16); }
.fpa-start .fpa-top .fpa-start__h2 { margin: 0 0 16px; color: #fff; font-size: 1.35rem; }
.fpa-top__liste { display: grid; gap: 10px; }
.fpa-top__platz { --fpa-medaille: #d98c4a; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .05); }
.fpa-top__platz--1 { --fpa-medaille: #ffc23d; padding-block: 14px; border-color: rgba(255, 194, 61, .45); background: linear-gradient(90deg, rgba(255, 194, 61, .16), rgba(255, 255, 255, .04)); }
.fpa-top__platz--2 { --fpa-medaille: #d3dce6; }
.fpa-top__platz.is-ich { outline: 2px solid var(--fpa-gold); outline-offset: -2px; }
.fpa-top__rang { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--fpa-medaille); color: #1d1405; font-weight: 800; font-size: 1.05rem; box-shadow: 0 0 0 3px rgba(0, 0, 0, .25), 0 4px 12px rgba(0, 0, 0, .35); }
.fpa-top__platz--1 .fpa-top__rang { width: 46px; height: 46px; font-size: 1.25rem; box-shadow: 0 0 0 3px rgba(0, 0, 0, .25), 0 0 22px rgba(255, 194, 61, .55); }
.fpa-top__name { min-width: 0; color: #fff; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.fpa-top { container: fpa-top / inline-size; }
@container fpa-top (max-width: 400px) { .fpa-top__platz { grid-template-columns: auto minmax(0, 1fr); row-gap: 0; } .fpa-top__punkte { grid-column: 2; font-size: .9rem; } }
.fpa-top__punkte { color: var(--fpa-gold); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fpa-top__leer, .fpa-top__fuss { color: var(--fpa-leise); font-size: .92rem; }
.fpa-top__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 16px !important; }
.fpa-top__fuss b { color: #fff; }
.fpa-top__link { display: inline-flex; align-items: center; gap: 6px; color: var(--fpa-gold) !important; font-weight: 700; }
.fpa-top__link:hover { color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  .fpa-start *, .fpa-start *::before, .fpa-start *::after { transition: none !important; animation: none !important; }
  .fpa-kachel.fpa-karte:hover, .fpa-btn:hover, .fpa-karte:hover .fpa-kachel__bild img, .fpa-karte:hover .fpa-karte__play { transform: none; }
}

/* =====================================================================
   Seitenlayout: volle Breite ohne Sidebar (Body-Klasse fpa-volle-breite,
   nur auf Seiten mit Plugin-Shortcode; abschaltbar per Filter fpa_sim_volle_breite)
   ===================================================================== */
/* Theme „Business Consultant Finder“ / „BCF Shop“ (freizeitparkapp.de) */
body.fpa-volle-breite .site-content .bcf-sidebar { display: none !important; }
body.fpa-volle-breite .site-content .col-md-8.bcf-main-content { width: 100%; max-width: 100%; flex: 0 0 100%; -ms-flex: 0 0 100%; }
/* Übliche Theme-Strukturen (_s/Underscores u. ä.) */
body.fpa-volle-breite #secondary.widget-area { display: none !important; }
body.fpa-volle-breite #primary.content-area { float: none; width: 100%; max-width: none; }