/* Casepagina Rijschool Formule 1 (includes/cases/formule1.php).
   Leent de huisstijl van de klant: Barlow Condensed en Inter, Formule-rood #B62226 op zwart en asfalt, geblokte vlag. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;1,800;1,900&family=Inter:wght@400..800&display=swap");

.rf1 {
  --rf1-red: #b62226; --rf1-red2: #9a1d21; --rf1-hot: #ff3b40; --rf1-pink: #f8e5e6;
  --rf1-black: #000; --rf1-asphalt: #111; --rf1-tar: #1b1b1d; --rf1-grey: #f4f4f5;
  --rf1-text: #f2f2f3; --rf1-text2: #b9b9be; --rf1-line: rgba(255,255,255,.1);
  --rf1-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --rf1-inter: Inter, system-ui, sans-serif;
  --rf1-check: conic-gradient(#fff 25%, #000 0 50%, #fff 0 75%, #000 0);
  position: relative; color: var(--rf1-text); color-scheme: dark; overflow: hidden;
  background:
    radial-gradient(50% 35% at 85% 6%, rgba(182,34,38,.42), transparent 70%),
    radial-gradient(45% 30% at 0% 55%, rgba(182,34,38,.2), transparent 70%),
    var(--rf1-asphalt);
}
/* asfaltkorrel */
.rf1::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.rf1 > section { position: relative; }
.rf1 .eyebrow { color: var(--rf1-hot); font-family: var(--rf1-cond); font-weight: 800; font-style: italic; letter-spacing: .14em; font-size: 15px; }
.rf1 .h2 { color: #fff; font-family: var(--rf1-cond); font-weight: 800; text-transform: uppercase; letter-spacing: 0; line-height: .95; font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
.rf1 .h2 em { font-style: italic; color: var(--rf1-red); font-weight: 900; }
.rf1 .sec-lead { color: var(--rf1-text2); }
.rf1 a { color: #fff; }
.rf1 :focus-visible { outline: 3px solid var(--rf1-hot); outline-offset: 3px; }
/* middenstreep tussen de secties */
.rf1 > section + section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 70px, transparent 70px 130px); opacity: .35; }

/* kop: banner en projectbewijs */
.rf1-open { padding-top: 56px; }
.rf1-open .wrap { position: relative; }
.rf1-banner { display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--rf1-line); box-shadow: 0 40px 100px -40px rgba(182,34,38,.7); }
.rf1-banner img { display: block; width: 100%; height: auto; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.rf1-banner:hover img { transform: scale(1.015); }
.rf1-card { position: relative; width: min(560px, 100%); margin: -90px 0 0 auto; margin-right: 40px; padding: 22px 26px 24px; border-radius: 18px; color: #1a1a1a; background: linear-gradient(135deg, #fff 0%, #fbeeee 55%, #f3d6d8 100%); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(0,0,0,.06); transform: rotate(-1.5deg); overflow: hidden; }
.rf1-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(182,34,38,.04) 14px 15px); }
.rf1-card-top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 2px solid var(--rf1-red); }
.rf1-card-top b { font: 800 italic 24px/1 var(--rf1-cond); text-transform: uppercase; letter-spacing: .06em; color: var(--rf1-red); flex: 1; }
.rf1-flag { width: 44px; height: 28px; border-radius: 4px; background: var(--rf1-check) 0 0/11px 11px; box-shadow: inset 0 0 0 1px #000; }
.rf1-nl { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--rf1-red); color: #fff; font: 800 15px var(--rf1-inter); }
.rf1-card dl { margin: 0; display: grid; gap: 7px; position: relative; z-index: 1; }
.rf1-card dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: baseline; }
.rf1-card dt { font: 600 12px var(--rf1-inter); text-transform: uppercase; letter-spacing: .08em; color: #7a6264; }
.rf1-card dt span { color: var(--rf1-red); font-weight: 800; }
.rf1-card dd { margin: 0; font: 800 21px/1.15 var(--rf1-cond); text-transform: uppercase; color: #111; }
.rf1-card .rf1-live a { color: var(--rf1-red); text-decoration: none; }
.rf1-card .rf1-live a:hover { text-decoration: underline; }
.rf1-stamp { position: absolute; right: 18px; bottom: 16px; z-index: 2; padding: 6px 14px; border: 3px solid var(--rf1-red); border-radius: 8px; color: var(--rf1-red); font: 900 italic 24px/1 var(--rf1-cond); text-transform: uppercase; letter-spacing: .08em; transform: rotate(-12deg); opacity: .85; }
.js .rf1-card:not(.in) .rf1-stamp { transform: rotate(-12deg) scale(2.2); opacity: 0; }
.rf1-stamp { transition: transform .5s cubic-bezier(.3,1.6,.5,1) .6s, opacity .3s .6s; }

/* startlichten */
.rf1-start-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.rf1-gantry { text-align: center; }
.rf1-lights { appearance: none; width: 100%; cursor: pointer; padding: 34px 28px 28px; border: 0; border-radius: 24px; color: #fff; background: linear-gradient(#0a0a0a, #000); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), inset 0 0 0 2px #262626, inset 0 3px 0 #2c2c2c; font: inherit; position: relative; user-select: none; -webkit-tap-highlight-color: transparent; }
.rf1-lights::before { content: ""; position: absolute; left: 10%; right: 10%; top: -16px; height: 16px; background: linear-gradient(#333, #161616); border-radius: 6px 6px 0 0; }
.rf1-lamps { display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 22px); }
.rf1-lamps i { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: #161616; box-shadow: inset 0 0 0 1px #2a2a2a; }
.rf1-lamps b { width: clamp(34px, 6vw, 58px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #3a3a3a, #161616 65%); box-shadow: inset 0 -4px 10px rgba(0,0,0,.6); transition: background .05s, box-shadow .05s; }
.rf1-lamps i.on b { background: radial-gradient(circle at 38% 32%, #ff7b7e, #f0262c 45%, #8a0f12 85%); box-shadow: 0 0 28px 4px rgba(255,40,45,.75), inset 0 -4px 10px rgba(0,0,0,.35); }
.rf1-time { display: block; margin-top: 26px; font: 800 italic clamp(44px, 7vw, 72px)/1 var(--rf1-cond); letter-spacing: .02em; color: #fff; font-variant-numeric: tabular-nums; }
.rf1-time b { font-weight: inherit; }
.rf1-msg { display: block; margin-top: 8px; font: 600 15px var(--rf1-inter); color: var(--rf1-text2); min-height: 1.5em; }
.rf1-lights.false .rf1-msg { color: var(--rf1-hot); }
.rf1-lights.done .rf1-time { color: var(--rf1-hot); }
.rf1-best { margin-top: 14px; color: var(--rf1-text2); font-size: 15px; }
.rf1-best b { color: #fff; font-family: var(--rf1-cond); font-size: 20px; font-style: italic; }

/* circuit */
.rf1-lap-grid { display: grid; grid-template-columns: .9fr 1.25fr; gap: 48px; align-items: center; }
.rf1-track svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf1-kerb { fill: none; stroke: var(--rf1-red); stroke-width: 34; stroke-dasharray: 10 10; stroke-linejoin: round; opacity: .9; }
.rf1-asphalt { fill: none; stroke: #2a2a2d; stroke-width: 28; stroke-linejoin: round; }
.rf1-line { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-dasharray: 8 8; }
.rf1-trail { fill: none; stroke: var(--rf1-hot); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255,59,64,.8)); }
.rf1-dot circle { fill: #111; stroke: #fff; stroke-width: 2; }
.rf1-dot text { fill: #fff; font: 800 11px var(--rf1-inter); text-anchor: middle; dominant-baseline: central; }
.rf1-dot.on circle { fill: var(--rf1-red); }
.rf1-car circle { fill: #fff; filter: drop-shadow(0 0 10px rgba(255,255,255,.7)); }
.rf1-car path { fill: var(--rf1-red); }
.rf1-sectors { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rf1-sectors button { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; border-radius: 999px; border: 1px solid var(--rf1-line); background: rgba(255,255,255,.04); color: var(--rf1-text); font: 600 15px var(--rf1-inter); transition: background .2s, border-color .2s; }
.rf1-sectors button span { padding: 3px 8px; border-radius: 99px; background: #2a2a2d; font: 800 italic 14px/1 var(--rf1-cond); letter-spacing: .04em; }
.rf1-sectors button:hover { border-color: rgba(255,255,255,.3); }
.rf1-sectors button[aria-selected="true"] { background: var(--rf1-red); border-color: var(--rf1-red); color: #fff; }
.rf1-sectors button[aria-selected="true"] span { background: #000; }
.rf1-screen { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 50px 100px -40px rgba(0,0,0,.9), 0 0 0 1px var(--rf1-line); }
.rf1-bar, .rf1-film .rf1-bar { display: flex; align-items: center; gap: 7px; padding: 0 14px; height: 38px; background: #1a1a1c; }
.rf1-bar i { width: 11px; height: 11px; border-radius: 50%; background: #444; }
.rf1-bar i:first-child { background: var(--rf1-red); }
.rf1-bar span { margin-left: 12px; padding: 0 12px; border-radius: 7px; background: #2a2a2d; color: #bbb; font: 500 13px/24px var(--rf1-inter); }
.rf1-bar span b { color: #fff; font-weight: 600; }
.rf1-screen img { display: block; width: 100%; height: auto; transition: opacity .25s; }
.rf1-screen img.swap { opacity: .15; }
.rf1-screen figcaption { padding: 16px 20px; background: #000; color: var(--rf1-text2); font-size: 15px; line-height: 1.55; border-top: 3px solid var(--rf1-red); }

/* pitstop: lichtgrijs zoals de tarievenpagina */
.rf1-pit { background: var(--rf1-grey); color: #1a1a2e; color-scheme: light; }
.rf1-pit .h2 { color: #000; }
.rf1-pit .sec-lead { color: #55555f; }
.rf1-pit .eyebrow { color: var(--rf1-red); }
.rf1-pit-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.rf1-tabs { display: flex; gap: 6px; margin-top: 26px; padding: 5px; background: #fff; border-radius: 999px; width: fit-content; box-shadow: 0 4px 24px rgba(0,0,0,.06); }
.rf1-tabs button { appearance: none; cursor: pointer; border: 0; border-radius: 999px; padding: 10px 18px; background: transparent; font: 700 17px var(--rf1-cond); text-transform: uppercase; letter-spacing: .04em; color: #333; }
.rf1-tabs button[aria-pressed="true"] { background: #000; color: #fff; }
.rf1-slide { display: block; margin-top: 22px; max-width: 420px; }
.rf1-slide span { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.rf1-slide input { width: 100%; accent-color: var(--rf1-red); }
.rf1-pit-demo { position: relative; display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; }
.rf1-plan { position: relative; padding: 30px 24px 24px; border-radius: 30px; background: #fff; box-shadow: 0 8px 36px rgba(0,0,0,.1); text-align: center; }
.rf1-plan h3 { margin: 0; font: 700 21px/1.15 var(--rf1-cond); color: #000; }
.rf1-price { margin: 14px 0 0; font: 800 clamp(40px, 4.4vw, 54px)/1 var(--rf1-inter); letter-spacing: -.03em; color: #000; font-variant-numeric: tabular-nums; }
.rf1-ex { margin: 6px 0 14px; font-size: 13px; color: #95a5a6; }
.rf1-plan ul { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; min-height: 96px; }
.rf1-plan li { padding: 7px 0 7px 26px; border-bottom: 1px solid #eee; font-size: 14px; position: relative; }
.rf1-plan li::before { content: "✓"; position: absolute; left: 4px; color: var(--rf1-red); font-weight: 800; }
.rf1-pop { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 99px; background: #000; color: #fff; font: 700 12px var(--rf1-inter); }
.rf1-pop[hidden] { display: none; }
.rf1-btn { display: block; padding: 12px 20px; border-radius: 999px; background: var(--rf1-red); color: #fff; font: 700 15px var(--rf1-inter); text-align: center; }
.rf1-arrow { height: 4px; margin: 0 4px; background: repeating-linear-gradient(90deg, var(--rf1-red) 0 8px, transparent 8px 14px); background-size: 28px 4px; animation: rf1-flow 0.8s linear infinite; }
@keyframes rf1-flow { to { background-position: 28px 0; } }
.rf1-form { display: grid; gap: 12px; padding: 24px 20px; border-radius: 26px; background: #fff; box-shadow: 0 8px 36px rgba(0,0,0,.1); }
.rf1-form b { font: 700 22px var(--rf1-cond); color: #000; }
.rf1-field { display: block; padding: 10px 12px; border: 1px solid #e1e8ed; border-radius: 10px; font-size: 13px; color: #9aa; }
.rf1-sel { border-color: var(--rf1-red); box-shadow: 0 0 0 3px rgba(182,34,38,.15); color: #111; font-weight: 600; font-size: 13px; line-height: 1.4; }
.rf1-sel small { display: block; color: var(--rf1-red); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.rf1-sel.flash { animation: rf1-flash .6s; }
@keyframes rf1-flash { 0% { background: var(--rf1-pink); } 100% { background: #fff; } }

/* film */
.rf1-film-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; }
.rf1-video { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--rf1-line); box-shadow: 0 50px 100px -40px rgba(182,34,38,.6); background: #000; }
.rf1-video video { display: block; width: 100%; height: auto; }

/* huisstijl */
.rf1-kit { padding-bottom: 150px; }
.rf1-kit-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.rf1-logo { padding: 56px 40px; border-radius: var(--r); background: radial-gradient(70% 90% at 50% 100%, rgba(182,34,38,.35), transparent 70%), #000; border: 1px solid var(--rf1-line); }
.rf1-logo img { display: block; width: 100%; height: auto; }
.rf1-colors { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rf1-colors li { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--rf1-line); }
.rf1-colors span { grid-row: span 2; width: 34px; height: 34px; border-radius: 8px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.rf1-colors b { font-size: 14px; }
.rf1-colors code { font-size: 12px; color: var(--rf1-text2); }
.rf1-ui { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.rf1-ui .rf1-btn { display: inline-block; }
.rf1-pill { padding: 5px 14px; border-radius: 99px; background: var(--rf1-pink); color: var(--rf1-red); font: 700 13px var(--rf1-inter); }
.rf1-type { font-family: var(--rf1-inter); color: var(--rf1-text2); }
.rf1-type b { font: 800 22px var(--rf1-cond); color: #fff; text-transform: uppercase; }
.rf1-finish { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: var(--rf1-check) 0 0/32px 32px; opacity: .9; }

@media (max-width: 980px) {
  .rf1-start-grid, .rf1-lap-grid, .rf1-pit-grid, .rf1-film-grid, .rf1-kit-grid { grid-template-columns: 1fr; gap: 36px; }
  .rf1-card { margin: -40px auto 0; transform: none; }
}
@media (max-width: 620px) {
  .rf1-card dl > div { grid-template-columns: 1fr; gap: 0; }
  .rf1-stamp { font-size: 18px; bottom: 12px; }
  .rf1-pit-demo { grid-template-columns: 1fr; gap: 0; }
  .rf1-arrow { width: 4px; height: 36px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--rf1-red) 0 8px, transparent 8px 14px); animation: none; }
  .rf1-colors { grid-template-columns: repeat(2, 1fr); }
  .rf1-lamps i { padding: 6px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .rf1-arrow { animation: none; }
  .rf1-stamp, .rf1-banner img { transition: none; }
}