/* Coasterpass – seiteneigene Ergänzungen (kit.css bleibt unberührt).
   Kategorie-Farben laut Briefing: Achterbahn = Primär #E8430C, Kinderachterbahn #3BA9E0, Alpine #4CAF50. */
:root {
    --cat-co: #E8430C; --cat-ki: #3BA9E0; --cat-al: #4CAF50;
    --cat-co-ink: #B8330A; --cat-ki-ink: #1F6F99; --cat-al-ink: #2E7D32;   /* Text auf Hell (≥ 4.5:1) */
    --app-bg: #14121F; --app-card: #211E31; --app-line: rgba(255, 255, 255, .08);
    --app-text: #F6F1EC; --app-muted: #A49FB3; --app-yellow: #FFC93C;
}

/* ---------- Links unter den Bühnen ---------- */
.stage-link { margin-top: 18px; }
.stage-link a { font-weight: 650; color: var(--brand-deep); text-decoration: none; }
.stage-link a::after { content: " →"; }
.stage-link a:hover { text-decoration: underline; }
.s-dark .stage-link a { color: var(--stage-accent); }

/* ---------- Knöpfe (Partnerseite, Park-Band) ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 0;
    background: #C93A0A; color: #fff; font: inherit; font-size: 16px; font-weight: 650;
    text-decoration: none; cursor: pointer; transition: transform .2s ease, filter .2s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.s-light .btn-ghost, .s-gray .btn-ghost { color: var(--brand-deep); }
html[data-theme="light"] .btn:not(.btn-ghost) { background: #B8330A; }  /* beide ≥ 4.5:1 mit Weiß */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.hero-note { margin-top: 18px; font-size: 15px; color: var(--hero-muted); }
.parks-cta { margin-top: 30px; }

/* ---------- Kategorie-Aussage ---------- */
.cat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.cat {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px;
    border-radius: 999px; font-size: 16px; font-weight: 650; line-height: 1.2;
}
.cat svg { width: 20px; height: 20px; flex: none; }
.cat.co { background: color-mix(in srgb, var(--cat-co) 13%, transparent); color: var(--cat-co-ink); }
.cat.ki { background: color-mix(in srgb, var(--cat-ki) 15%, transparent); color: var(--cat-ki-ink); }
.cat.al { background: color-mix(in srgb, var(--cat-al) 15%, transparent); color: var(--cat-al-ink); }

/* ---------- Gratis / Pro ---------- */
.pro-sub { max-width: 640px; margin: 22px auto 0; }
.plans {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px;
    margin: clamp(34px, 5vw, 56px) auto 0; padding: 0 var(--pad);
}
.plan { border-radius: 22px; padding: 30px 28px; background: var(--paper-gray); }
.plan-pro { background: var(--app-bg); color: var(--app-text); box-shadow: 0 0 0 1px rgba(232, 67, 12, .35), 0 24px 60px rgba(232, 67, 12, .18); }
.plan-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.plan-h small { font-size: 14px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.plan-pro .plan-h small { color: var(--app-yellow); }
.plan ul { margin-top: 18px; display: grid; gap: 10px; }
.plan li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.45; }
.plan li::before {
    content: ""; position: absolute; left: 2px; top: 5px; width: 14px; height: 8px;
    border-left: 2.4px solid var(--brand-deep); border-bottom: 2.4px solid var(--brand-deep); transform: rotate(-45deg);
}
.plan-pro li::before { border-color: var(--brand); }
.plan li.plan-muted { color: var(--ink-soft); }
.plan li.plan-muted::before { border-color: #b0b0b5; }
.plans-note { max-width: 680px; margin: 22px auto 0; padding: 0 var(--pad); text-align: center; font-size: 15px; color: var(--ink-soft); }
.s-dark .plans-note { color: var(--stage-muted); }
.plans + .plans-note + .wrap { margin-top: clamp(56px, 8vw, 96px); }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }

/* ---------- Partner-Pakete ---------- */
.pkgs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch;
    max-width: var(--maxw-wide); margin: clamp(34px, 5vw, 56px) auto 0; padding: 0 var(--pad);
}
.pkg { display: flex; flex-direction: column; border-radius: 22px; padding: 30px 26px; background: var(--paper-gray); }
.pkg-hi { background: var(--app-bg); color: var(--app-text); box-shadow: 0 0 0 1px rgba(232, 67, 12, .4), 0 24px 60px rgba(232, 67, 12, .2); }
.pkg-name { font-size: 20px; font-weight: 750; letter-spacing: -.01em; }
.pkg-price { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.pkg-price b { font-size: clamp(38px, 4.4vw, 50px); font-weight: 750; letter-spacing: -.04em; line-height: 1.05; }
.pkg-price small { font-size: 14px; color: var(--ink-soft); }
.pkg-hi .pkg-price small { color: var(--app-muted); }
.pkg ul { margin: 22px 0 26px; display: grid; gap: 10px; flex: 1; align-content: start; }
.pkg li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.45; }
.pkg li::before {
    content: ""; position: absolute; left: 2px; top: 5px; width: 13px; height: 7px;
    border-left: 2.3px solid var(--brand-deep); border-bottom: 2.3px solid var(--brand-deep); transform: rotate(-45deg);
}
.pkg-hi li::before { border-color: var(--brand); }
.pkg .btn { align-self: flex-start; }
.pkg-hi .btn-ghost { color: var(--app-text); }
@media (max-width: 900px) { .pkgs { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- Ablauf ---------- */
.steps {
    counter-reset: st; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none;
    max-width: var(--maxw-wide); margin: clamp(34px, 5vw, 56px) auto 0; padding: 0 var(--pad);
}
.steps li { counter-increment: st; padding: 26px 22px; border-radius: 20px; background: var(--stage-soft); border: 1px solid var(--stage-hair); }
.steps li::before {
    content: counter(st); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px;
    border-radius: 50%; background: var(--brand); color: #fff; font-weight: 750;
}
.steps b { display: block; font-size: 19px; color: var(--stage-text); }
.steps p { margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--stage-muted); }
.steps-note { margin-top: 28px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Anfrageformular ---------- */
.pform { max-width: 760px; margin: clamp(30px, 4vw, 48px) auto 0; padding: 0 var(--pad); }
.pform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; }
.fld abbr { display: none; }
.fld > span + abbr { display: inline; text-decoration: none; color: var(--brand-deep); }
.fld-wide { grid-column: 1 / -1; }
.fld input, .fld select, .fld textarea {
    width: 100%; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink);
    padding: 12px 14px; border-radius: 12px; border: 1.5px solid #d4d4da; background: #fff;
}
.fld textarea { resize: vertical; min-height: 120px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.fld-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pform-note { margin-top: 18px; font-size: 14px; color: var(--ink-soft); }
.pform-note a { color: var(--brand-deep); }
.pform-actions { margin-top: 20px; }
.pform-msg { margin-top: 18px; padding: 14px 16px; border-radius: 14px; font-size: 16px; line-height: 1.45; }
.pform-msg.is-ok { background: color-mix(in srgb, var(--cat-al) 14%, #fff); color: #1b5e20; }
.pform-msg.is-err { background: color-mix(in srgb, var(--cat-co) 12%, #fff); color: #8a2306; }
@media (max-width: 620px) { .pform-grid { grid-template-columns: 1fr; } }

/* ---------- Fußzeile: Quellen ---------- */
.foot-src a { color: inherit; }

/* =====================================================================
   App-Mockups (Entwurf der App als HTML im Geräterahmen, skaliert über cqw)
   ===================================================================== */
.scr {
    position: relative; aspect-ratio: 780 / 1688; border-radius: 11% / 5.2%; overflow: hidden;
    background: var(--app-bg); color: var(--app-text); container-type: inline-size;
    font-size: 4.2cqw; line-height: 1.3; text-align: left; letter-spacing: 0;
    background-image: radial-gradient(120% 50% at 80% 0%, rgba(232, 67, 12, .22), transparent 60%);
}
.scr * { letter-spacing: 0; }
.scr ul { list-style: none; margin: 0; padding: 0; }
.scr small { font-size: .78em; color: var(--app-muted); }
.scr b { font-weight: 700; }
.mk-status { display: flex; justify-content: space-between; align-items: center; padding: 4.6cqw 8cqw 0; font-size: 3.6cqw; font-weight: 650; }
.mk-bat { width: 6.4cqw; height: 3.1cqw; border-radius: .9cqw; border: .45cqw solid currentColor; opacity: .85; position: relative; }
.mk-bat::after { content: ""; position: absolute; inset: .45cqw 1.4cqw .45cqw .45cqw; background: currentColor; border-radius: .3cqw; }
.mk-head { display: flex; align-items: center; gap: 2.4cqw; padding: 5.4cqw 6cqw 3cqw; }
.mk-h { font-size: 7.6cqw; font-weight: 800; letter-spacing: -.02em; }
.mk-h2 { display: flex; flex-direction: column; font-size: 5.6cqw; font-weight: 800; line-height: 1.15; }
.mk-h2 small { font-size: 3.4cqw; font-weight: 500; margin-top: .6cqw; }
.mk-back { width: 6cqw; height: 6cqw; flex: none; color: var(--app-muted); }
.mk-pro { margin-left: auto; font-style: normal; font-size: 3.1cqw; font-weight: 800; padding: .8cqw 2.2cqw; border-radius: 99px; background: var(--app-yellow); color: #3a2a00; }

/* Pass-Karte */
.mk-card {
    position: relative; margin: 0 6cqw; padding: 5cqw 5.5cqw 5.4cqw; border-radius: 5.5cqw; overflow: hidden;
    background: linear-gradient(135deg, #F25A1E, #E8430C 45%, #7A1F06); display: flex; flex-direction: column;
    box-shadow: 0 3cqw 8cqw rgba(232, 67, 12, .35);
}
.mk-card-l { font-size: 3.3cqw; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.mk-card-v { font-size: 20cqw; font-weight: 800; line-height: .95; letter-spacing: -.05em; margin-top: 1cqw; }
.mk-card-u { font-size: 3.8cqw; font-weight: 600; opacity: .92; }
.mk-card-stamp { position: absolute; right: 4cqw; top: 4cqw; width: 22cqw; height: 22cqw; color: var(--app-yellow); opacity: .9; transform: rotate(-12deg); }
.mk-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; margin: 3.4cqw 6cqw 0; }
.mk-trio > span { display: flex; flex-direction: column; padding: 2.6cqw 3cqw; border-radius: 3.4cqw; background: var(--app-card); }
.mk-trio b { font-size: 5.8cqw; }
.mk-trio .mk-al b { color: var(--cat-al); }
.mk-kid { display: flex; align-items: center; gap: 2cqw; margin: 3cqw 6cqw 0; font-size: 3.4cqw; color: var(--app-muted); }
.mk-dot { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; flex: none; }
.mk-dot.ki { background: var(--cat-ki); }
.mk-sec { margin: 4.4cqw 6cqw 1.6cqw; font-size: 3.3cqw; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--app-muted); }

/* Listen */
.mk-list { margin: 0 6cqw; }
.mk-list li { display: flex; align-items: center; gap: 2.8cqw; padding: 2.4cqw 0; border-bottom: 1px solid var(--app-line); }
.mk-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mk-t b { font-size: 4.1cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-badge, .mk-st, .mk-off {
    font-style: normal; font-size: 2.9cqw; font-weight: 750; padding: .9cqw 2.2cqw; border-radius: 99px; white-space: nowrap; flex: none;
}
.mk-badge.co { background: rgba(232, 67, 12, .2); color: #FF8A5C; }
.mk-badge.ki { background: rgba(59, 169, 224, .2); color: #7CCBF2; }
.mk-badge.al { background: rgba(76, 175, 80, .2); color: #8FD493; }
.mk-stamp { width: 7.4cqw; height: 7.4cqw; border-radius: 50%; flex: none; border: .55cqw dashed currentColor; position: relative; }
.mk-stamp::after { content: ""; position: absolute; inset: 1.5cqw; border-radius: 50%; border: .6cqw solid currentColor; border-bottom-color: transparent; }
.mk-stamp.co { color: var(--cat-co); }
.mk-stamp.ki { color: var(--cat-ki); }
.mk-stamp.al { color: var(--cat-al); }
.mk-check { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; flex: none; border: .55cqw solid #4A4560; position: relative; }
.mk-check.on { border-color: var(--cat-co); background: var(--cat-co); }
.mk-check.on.ki { border-color: var(--cat-ki); background: var(--cat-ki); }
.mk-check.on::after {
    content: ""; position: absolute; left: 1.55cqw; top: 1.05cqw; width: 2.6cqw; height: 1.4cqw;
    border-left: .6cqw solid #fff; border-bottom: .6cqw solid #fff; transform: rotate(-45deg);
}
.mk-rows li { padding: 2.9cqw 0; }
.mk-dim .mk-t b { color: var(--app-muted); }

/* Park: Fortschritt + Filter */
.mk-prog { margin: 0 6cqw 3.4cqw; font-size: 3.5cqw; font-weight: 650; }
.mk-prog i { display: block; height: 1.8cqw; margin-top: 1.8cqw; border-radius: 99px; background: var(--app-card); overflow: hidden; }
.mk-prog i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cat-co), var(--app-yellow)); }
.mk-chips { display: flex; gap: 1.8cqw; margin: 0 6cqw 2.2cqw; overflow: hidden; }
.mk-chips span { flex: none; font-size: 3.2cqw; font-weight: 650; padding: 1.4cqw 3cqw; border-radius: 99px; background: var(--app-card); color: var(--app-muted); }
.mk-chips span.on { background: var(--app-text); color: var(--app-bg); }

/* Neuheiten */
.mk-hero { margin: 1.2cqw 6cqw 2.4cqw; border-radius: 5cqw; overflow: hidden; background: var(--app-card); }
.mk-hero-img { position: relative; aspect-ratio: 200 / 90; background: linear-gradient(160deg, #2C2246, #5A1D10 70%, #E8430C); }
.mk-hero-img svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-off { position: absolute; left: 3cqw; top: 3cqw; background: var(--app-yellow); color: #3a2a00; }
.mk-hero-t { display: flex; flex-direction: column; padding: 3.4cqw 4cqw 0; }
.mk-hero-t b { font-size: 5.4cqw; }
.mk-hero-r { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 2.6cqw 4cqw 3.8cqw; }
.mk-count { font-size: 3.4cqw; font-weight: 700; color: var(--app-yellow); }
.mk-st.cons { background: rgba(255, 201, 60, .18); color: var(--app-yellow); }
.mk-st.ann { background: rgba(255, 255, 255, .1); color: var(--app-text); }
.mk-st.open { background: rgba(76, 175, 80, .2); color: #8FD493; }

/* Detail + Abstimmung */
.mk-big {
    display: flex; align-items: center; gap: 2.4cqw; margin: 1cqw 6cqw 3.4cqw; padding: 4cqw 4.4cqw;
    border-radius: 4.4cqw; font-size: 4.4cqw; font-weight: 800; line-height: 1.2;
}
.mk-big svg { width: 7cqw; height: 7cqw; flex: none; }
.mk-big.ki { background: rgba(59, 169, 224, .18); color: #8ED3F5; box-shadow: inset 0 0 0 1px rgba(59, 169, 224, .45); }
.mk-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; margin: 0 6cqw; }
.mk-facts span { display: flex; flex-direction: column; padding: 2.8cqw 3cqw; border-radius: 3.4cqw; background: var(--app-card); }
.mk-facts b { font-size: 4.6cqw; }
.mk-vote { margin: 4cqw 6cqw 0; padding: 4cqw; border-radius: 4.4cqw; background: var(--app-card); }
.mk-vote-q { font-size: 4.2cqw; font-weight: 750; margin-bottom: 2.6cqw; }
.mk-vrow { display: grid; grid-template-columns: 24cqw 1fr 6cqw; align-items: center; gap: 2.4cqw; padding: 1.5cqw 0; font-size: 3.4cqw; color: var(--app-muted); }
.mk-vrow.on { color: var(--app-text); font-weight: 700; }
.mk-vrow span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-vrow i { height: 2.2cqw; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mk-vrow i b { display: block; height: 100%; border-radius: inherit; }
.mk-vrow b.co { background: var(--cat-co); } .mk-vrow b.ki { background: var(--cat-ki); } .mk-vrow b.al { background: var(--cat-al); }
.mk-vrow em { font-style: normal; text-align: right; }
.mk-vote-ok { display: flex; align-items: center; gap: 1.6cqw; margin-top: 2.6cqw; font-size: 3.3cqw; font-weight: 650; color: #8FD493; }
.mk-vote-ok svg { width: 4.4cqw; height: 4.4cqw; flex: none; }

/* Statistik */
.mk-rec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2cqw; margin: 0 6cqw; }
.mk-rec span { display: flex; flex-direction: column; padding: 3cqw 2.8cqw; border-radius: 3.6cqw; background: var(--app-card); min-width: 0; }
.mk-rec b { font-size: 4.6cqw; margin-top: .6cqw; white-space: nowrap; }
.mk-rec i { font-style: normal; font-size: 2.9cqw; color: var(--app-yellow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-rec small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-bars { margin: 0 6cqw; display: grid; gap: 1.9cqw; }
.mk-bars li { display: grid; grid-template-columns: 25cqw 1fr 6cqw; align-items: center; gap: 2.4cqw; font-size: 3.4cqw; }
.mk-bars span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-bars i { height: 2.4cqw; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.mk-bars i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cat-co), #FF7A3D); }
.mk-bars em { font-style: normal; text-align: right; color: var(--app-muted); }
.mk-cols { display: flex; align-items: flex-end; gap: 3cqw; height: 26cqw; margin: 0 6cqw; }
.mk-cols span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 1.2cqw; }
.mk-cols i { width: 100%; border-radius: 1.6cqw 1.6cqw .6cqw .6cqw; background: linear-gradient(180deg, var(--app-yellow), var(--cat-co)); }
.mk-cols small { font-size: 2.8cqw; }

/* Tab-Leiste */
.mk-tabs {
    position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 2.6cqw 4cqw 6.4cqw; background: rgba(20, 18, 31, .94); border-top: 1px solid var(--app-line);
}
.mk-tabs span { display: flex; flex-direction: column; align-items: center; gap: .8cqw; color: var(--app-muted); }
.mk-tabs svg { width: 6cqw; height: 6cqw; }
.mk-tabs small { font-size: 2.8cqw; color: inherit; }
.mk-tabs .on { color: var(--brand); }