/* ============================================================
   REIN INS REGAL! — Fachbereich pages (Marke · FMCG · Vertrieb)
   Loaded after styles.css. Germany-focused content pages.
============================================================ */

/* robust reveal — transform-only (compositing-safe) */
.reveal, .reveal-scale { opacity: 1 !important; transition: transform .75s cubic-bezier(.16,.84,.3,1) !important; }
html.jsrev .reveal:not(.in) { transform: translateY(26px); }
html.jsrev .reveal-scale:not(.in) { transform: scale(.97) translateY(16px); }
@media (prefers-reduced-motion: reduce) { html.jsrev .reveal:not(.in), html.jsrev .reveal-scale:not(.in) { transform: none; } }
[data-magnetic] { transition: box-shadow .25s, background .2s, border-color .2s, color .2s; }

/* hero */
.fhero { padding-top: clamp(150px,17vh,210px); padding-bottom: clamp(36px,5vw,64px); }
.fhero h1 { font-size: clamp(40px,6vw,82px); line-height: .98; margin-bottom: 22px; }
.fhero .lead { max-width: 58ch; }
.fhero .lead strong { color: var(--ink-0); font-weight: 700; }
.fchips { display: flex; flex-wrap: wrap; gap: 11px 22px; margin: 26px 0 30px; }
.fchips > span { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .03em; color: var(--ink-1); }
.fchips svg { width: 16px; height: 16px; stroke: var(--pink-deep); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* glossary callout */
.gloss { border-left: 3px solid var(--pink-deep); background: var(--night-2); border-radius: 0 14px 14px 0; padding: 18px 22px; margin: 0; max-width: 74ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.gloss b { color: var(--ink-0); font-weight: 700; }
.gloss .lbl { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pink-deep); margin-bottom: 7px; }

/* short prose */
.proselist { max-width: 64ch; }
.proselist p { font-size: 17px; line-height: 1.6; margin: 0 0 18px; color: var(--ink-2); }
.proselist p:last-child { margin-bottom: 0; }
.proselist p strong { color: var(--ink-0); font-weight: 700; }

/* steps process */
.steps { display: grid; grid-template-columns: repeat(var(--n,4),1fr); gap: 18px; }
@media (max-width:900px){ .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .steps { grid-template-columns: 1fr; } }
.step { background: #fff; border: 1px solid var(--night-line); border-radius: 18px; padding: clamp(22px,2.4vw,30px); position: relative; }
.step .sn { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: var(--pink-deep); margin-bottom: 14px; }
.step h3 { font-size: 18px; margin: 0 0 8px; letter-spacing: -.015em; }
.step p { font-size: 14.5px; margin: 0; color: var(--ink-2); }
.step .ar { position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; stroke: var(--ink-3); fill: none; stroke-width: 2; z-index: 2; }
@media (max-width:900px){ .step .ar { display: none; } }

/* faq accordion */
.faq { max-width: 82ch; }
.faq details { border-top: 1px solid var(--night-line); }
.faq details:last-child { border-bottom: 1px solid var(--night-line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-family: var(--f-display); font-weight: 700; font-size: clamp(17px,1.7vw,21px); color: var(--ink-0); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: 24px; color: var(--pink-deep); line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq .a { padding: 0 0 24px; font-size: 16px; line-height: 1.62; color: var(--ink-2); max-width: 70ch; }
.faq .a strong { color: var(--ink-1); font-weight: 700; }

/* capability cards */
.caps { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width:900px){ .caps { grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .caps { grid-template-columns: 1fr; } }
.cap { background: #fff; border: 1px solid var(--night-line); border-radius: 18px; padding: clamp(24px,2.6vw,32px); }
.cap .cn { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; color: var(--pink-deep); margin-bottom: 14px; }
.cap h3 { font-size: 19px; margin: 0 0 8px; }
.cap p { font-size: 14.5px; margin: 0; color: var(--ink-2); }
.cap.lead-cap { border-color: var(--pink-deep); box-shadow: 0 24px 60px -50px rgba(189,19,112,.4); }
.cap.lead-cap .cn { color: var(--pink-deep); }

/* dark glow + final cta */
.sec-glow { position: absolute; top: 0; left: 0; width: 540px; height: 540px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .45s ease; z-index: 0; background: radial-gradient(circle, rgba(255,61,181,.20), rgba(91,216,255,.09) 42%, transparent 70%); }
.on-dark .wrap { position: relative; z-index: 1; }
.final-cta { text-align: center; }
.final-cta h2 { font-size: clamp(32px,5vw,58px); margin-bottom: 18px; color: #fff; }
.final-cta p.lead { color: #C9C4DC; margin: 0 auto 34px; max-width: 52ch; }

/* cross-links */
.fcross { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width:760px){ .fcross { grid-template-columns: 1fr; } }
.fcross a { display: block; background: #fff; border: 1px solid var(--night-line); border-radius: 16px; padding: 26px; text-decoration: none; color: inherit; transition: transform .25s, border-color .25s, box-shadow .25s; }
.fcross a:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 30px 60px -44px rgba(20,18,28,.4); }
.fcross .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--pink-deep); margin-bottom: 10px; }
.fcross h3 { font-size: 20px; margin: 0 0 6px; }
.fcross p { font-size: 14px; margin: 0; color: var(--ink-2); }

/* full-bleed image band */
.img-band { position: relative; width: 100%; margin: 0; overflow: hidden; background: var(--night-2); }
.img-band img { width: 100%; height: clamp(280px, 42vw, 520px); object-fit: cover; display: block; }
.img-band .cap { position: absolute; left: 0; bottom: 0; padding: clamp(20px,3vw,34px) clamp(22px,4vw,56px); background: linear-gradient(0deg, rgba(10,8,20,.72), transparent); width: 100%; box-sizing: border-box; }
.img-band .cap .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.img-band .cap p { font-family: var(--f-display); font-weight: 700; font-size: clamp(18px,2.4vw,28px); letter-spacing: -.015em; margin: 0; max-width: 32ch; color: #fff; }

/* ===== TRADING / COLLECTOR CARDS (channels) ===== */
.tcard-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 940px){ .tcard-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .tcard-grid { grid-template-columns: 1fr; } }
.tcard { position: relative; background: #fff; border: 1px solid var(--night-line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 60px -50px rgba(20,18,28,.45); transition: transform .35s cubic-bezier(.16,.84,.3,1), box-shadow .35s, border-color .35s; }
.tcard:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 40px 80px -44px rgba(20,18,28,.5); }
.tcard .art { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #0A0814; }
.tcard .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard .art .fallback { position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 10%, rgba(255,61,181,.28), transparent 55%), radial-gradient(120% 90% at 85% 90%, rgba(91,216,255,.22), transparent 55%), #0A0814; display: grid; place-items: center; }
.tcard .art .fallback svg { width: 64px; height: 64px; fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tcard .num { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #fff; background: rgba(10,8,20,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 11px; }
.tcard .rarity { position: absolute; top: 12px; right: 12px; z-index: 2; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); background: rgba(10,8,20,.55); backdrop-filter: blur(6px); border: 1px solid rgba(91,216,255,.35); border-radius: 6px; padding: 4px 8px; }
.tcard .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 48%, transparent 56%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.tcard:hover .art::after { opacity: 1; }
.tcard .body { padding: clamp(18px,2vw,24px); display: flex; flex-direction: column; flex: 1; }
.tcard .body h3 { font-size: 18px; margin: 0 0 7px; letter-spacing: -.015em; }
.tcard .body .desc { font-size: 13.5px; line-height: 1.55; margin: 0 0 16px; color: var(--ink-2); }
.tcard .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: auto; border-top: 1px solid var(--night-line); }
.tcard .stat { padding: 13px 0; }
.tcard .stat + .stat { padding-left: 14px; border-left: 1px solid var(--night-line); }
.tcard .stat .v { font-family: var(--f-display); font-weight: 800; font-size: 19px; color: var(--pink-deep); letter-spacing: -.02em; line-height: 1.1; }
.tcard .stat .l { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; line-height: 1.4; }
.tcard .src { font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-3); padding: 10px 0 2px; border-top: 1px solid var(--night-line); margin-top: 2px; }