/* Accountsite Astonia 4: zelfde huisstijl als website v6 "Obsidiaan & goud" (Website/app/v6.css, Tom 09-10).
   Alles lokaal (CSP: style/font/img 'self'); beelden en fonts in /static/v6 (kopieën van de website). */
@font-face{font-family:'Cinzel';src:url('/static/v6/fonts/cinzel-600.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('/static/v6/fonts/ebgaramond-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('/static/v6/fonts/ebgaramond-500.woff2') format('woff2');font-weight:500 700;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('/static/v6/fonts/ebgaramond-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --bg:#07060a;--gold:#c9a45c;--gold-hi:#ecd29a;--gold-lo:#6e5530;--line:rgba(201,164,92,.34);--line-soft:rgba(201,164,92,.15);
  --ember:#8e231b;--ember-hi:#c8402f;--ember-glow:rgba(214,84,52,.45);--text:#efe4cc;--text-2:#c6b99e;--text-3:#918670;
  --ok:#7fc98c;--fout:#e2735c;--teal:#3fd6c6;
  --display:'Cinzel','Trajan Pro',Georgia,serif;--serif:'EB Garamond',Garamond,Georgia,serif;--mono:Consolas,'SF Mono',Menlo,monospace;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --fill:var(--grain),linear-gradient(180deg,rgba(27,21,22,.96),rgba(16,12,13,.97));
  --bevel:8px;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--text);font:400 18px/1.55 var(--serif);display:flex;flex-direction:column;align-items:center;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body::before{content:'';position:fixed;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 50% 0%,rgba(7,6,10,.25),rgba(7,6,10,.82) 62%,#07060a 100%),
    linear-gradient(180deg,rgba(7,6,10,.35),rgba(7,6,10,.9) 70%),url('/static/v6/bg-aston.webp') center 30%/cover no-repeat,var(--bg)}
@media (max-width:900px){body::before{background:linear-gradient(180deg,rgba(7,6,10,.45),rgba(7,6,10,.92) 55%,#07060a),
    url('/static/v6/bg-aston-900.webp') center top/cover no-repeat,var(--bg)}}
::selection{background:rgba(201,164,92,.35);color:#fff}
a{color:var(--gold-hi);text-decoration:none;border-bottom:1px solid rgba(236,210,154,.3);transition:color .15s,border-color .15s}
a:hover{color:#fff4dc;border-color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
p{margin:0 0 12px}
strong{font-weight:500;color:#fff4dc}

/* ── kop: logo + label ─────────────────────────────────────────────── */
.kop{display:flex;flex-direction:column;align-items:center;margin:28px 0 10px;padding:0 16px}
.merk{border:0;display:block;line-height:0}
.merk img{width:220px;height:auto;filter:drop-shadow(0 6px 22px rgba(0,0,0,.75)) drop-shadow(0 0 30px rgba(200,64,47,.18))}
.merk:hover{border:0}
.sub{margin-top:6px;font:600 11px/1 var(--display);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}

/* ── kaart met het gouden kader van de website ────────────────────── */
.kaart{position:relative;width:min(470px,calc(100% - 24px));margin:14px 0 18px;padding:26px 30px 28px;
  border:16px solid transparent;border-image:url('/static/v6/frame-panel.webp') 128/40px/0 round;
  background:var(--fill) padding-box;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.kaart.breed{width:min(900px,calc(100% - 24px))}
.kaart.breed form{max-width:420px}
.kaart.breed form.vol{max-width:none}
.kaart.breed form.vol .twee,.kaart.breed form.vol>button{max-width:640px}
h1{margin:0 0 6px;font:600 25px/1.2 var(--display);letter-spacing:.05em;color:var(--gold-hi);text-shadow:0 2px 14px rgba(0,0,0,.6)}
h1::after{content:'';display:block;height:10px;margin:12px 0 16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='10'%3E%3ClinearGradient id='l' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c9a45c' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23c9a45c' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23c9a45c' stop-opacity='0'/%3E%3C/linearGradient%3E%3Crect x='0' y='4.5' width='186' height='1' fill='url(%23l)'/%3E%3Crect x='214' y='4.5' width='186' height='1' fill='url(%23l)'/%3E%3Cpath d='M200 .8 204.2 5 200 9.2 195.8 5Z' fill='none' stroke='%23c9a45c'/%3E%3Ccircle cx='200' cy='5' r='1.3' fill='%23ecd29a'/%3E%3C/svg%3E") center/100% 10px no-repeat}
h2{margin:26px 0 8px;font:600 15px/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.uitleg,.hint{color:var(--text-2)}
.uitleg{font-size:17px}
.hint{margin:8px 0 0;font-size:15px;color:var(--text-3)}
.klein{font-size:15px;color:var(--text-3)}
.lijst{margin:6px 0 14px;padding-left:22px}
.lijst li{margin:6px 0}
.lijst li::marker{color:var(--gold)}

/* ── formulieren ──────────────────────────────────────────────────── */
label{display:block;margin:16px 0 6px;font:600 11.5px/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
input,select,textarea,button{font-family:inherit}
input,select,textarea{width:100%;padding:11px 13px;background:rgba(6,5,7,.78);color:var(--text);font-size:18px;
  border:1px solid rgba(201,164,92,.28);border-radius:3px;box-shadow:inset 0 2px 8px rgba(0,0,0,.55);transition:border-color .15s,box-shadow .15s}
select{appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;background-size:6px 6px;background-repeat:no-repeat}
select option{background:#120e10;color:var(--text)}
textarea{min-height:84px;resize:vertical}
input::placeholder,textarea::placeholder{color:#6f6656}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:inset 0 2px 8px rgba(0,0,0,.55),0 0 0 3px rgba(201,164,92,.18)}
input[readonly]{background:transparent;color:var(--text-3);border-style:dashed}
input[readonly]:focus{box-shadow:none;border-color:rgba(201,164,92,.28)}
input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--gold);box-shadow:none;vertical-align:-3px}
label.vink{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;font:400 16px/1.45 var(--serif);letter-spacing:0;text-transform:none;color:var(--text-2)}
label.vink input{flex:none;margin-top:3px}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:520px){.twee{grid-template-columns:1fr}}
.opt{font:italic 400 13px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--text-3)}
.verborgen{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* knop: afgeschuinde bronzen plaat met gouden rand en rode gloed (website .v6-btn) */
button{--b:var(--bevel);position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;
  margin-top:22px;padding:0 24px;border:0;background:none;cursor:pointer;color:#fff4dc;
  font:600 13.5px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;transition:filter .2s,transform .2s}
button::before,button::after{content:'';position:absolute;z-index:-1;
  clip-path:polygon(var(--b) 0,calc(100% - var(--b)) 0,100% var(--b),100% calc(100% - var(--b)),calc(100% - var(--b)) 100%,var(--b) 100%,0 calc(100% - var(--b)),0 var(--b))}
button::before{inset:0;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo) 55%,var(--gold))}
button::after{inset:1px;background:radial-gradient(120% 90% at 50% 0%,var(--ember-hi),var(--ember) 55%,#3f0f0c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
button:hover{filter:brightness(1.12) drop-shadow(0 0 14px var(--ember-glow))}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
button.licht::after,button.klein::after{background:linear-gradient(180deg,#2a2119,#140f0c)}
button.licht:hover,button.klein:hover{filter:brightness(1.18) drop-shadow(0 0 10px rgba(201,164,92,.3))}
form+form>button{margin-top:12px}
button.klein{--b:5px;display:inline-flex;width:auto;min-height:30px;margin:0 0 0 8px;padding:0 12px;font-size:10.5px;letter-spacing:.14em;white-space:nowrap;vertical-align:middle}
.knoppen{display:flex;gap:12px;flex-wrap:wrap}
.knoppen{max-width:640px}
.knoppen button{width:auto;flex:1 1 200px}
form.rij{display:inline}

/* ── meldingen ────────────────────────────────────────────────────── */
.fout,.melding{position:relative;margin:0 0 16px;padding:11px 14px 11px 16px;border:1px solid;border-radius:3px;font-size:17px}
.fout{background:rgba(142,35,27,.2);border-color:rgba(226,115,92,.45);color:#f5d6cc}
.melding{background:rgba(63,214,198,.06);border-color:rgba(127,201,140,.38)}
.fout::before,.melding::before{content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--fout)}
.melding::before{background:var(--ok)}
.melding p:last-child{margin-bottom:0}
.melding .klein{margin-top:6px;word-break:break-all}

.links{margin-top:20px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:16.5px;display:flex;flex-direction:column;gap:7px}
.links a{align-self:flex-start}

/* ── codes, 2FA, tabellen ─────────────────────────────────────────── */
code{font-family:var(--mono);font-size:.86em;background:rgba(6,5,7,.8);border:1px solid var(--line-soft);padding:2px 7px;border-radius:3px;word-break:break-all;color:var(--gold-hi)}
code.sleutel{display:inline-block;font-size:16px;line-height:1.8;letter-spacing:1px;word-spacing:6px;padding:8px 14px;word-break:normal;white-space:nowrap}
code.groot{display:inline-block;margin-top:8px;font-size:24px;letter-spacing:3px;padding:8px 16px}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;list-style:none;padding:0;margin:16px 0}
.codes code{display:block;text-align:center;font-size:16px;letter-spacing:1px;padding:7px 8px}
.qr{background:#fff;display:inline-block;padding:10px;border-radius:3px;margin:10px 0;box-shadow:0 0 0 1px var(--gold),0 0 0 5px rgba(201,164,92,.12)}
.qr svg{display:block;max-width:100%;height:auto}
.tabel{overflow-x:auto;margin-top:14px}
table{width:100%;border-collapse:collapse;font-size:16px}
h2+.tabel{margin-top:0}
td,th{border-bottom:1px solid rgba(201,164,92,.13);padding:8px 8px;text-align:left;vertical-align:top}
th{font:600 10.5px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);border-bottom-color:var(--line)}
tbody tr:hover td{background:rgba(201,164,92,.04)}
td.nowrap,.nw{white-space:nowrap}
dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0 0 8px}
dt{font:600 11px/1.9 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
dd{margin:0;word-break:break-all}
.label{display:inline-block;padding:1px 8px;border:1px solid var(--line);border-radius:2px;font:600 10px/1.7 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.label.goed{border-color:rgba(127,201,140,.5);color:var(--ok)}
.label.nieuw{border-color:rgba(236,210,154,.6);color:var(--gold-hi)}
.label.weg{color:var(--text-3);border-color:rgba(145,134,112,.35)}

/* ── brede pagina's: introkolom + formulier (registreren, aanvragen, activeren) ── */
.duo{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:28px;align-items:start;width:min(1040px,calc(100% - 24px));margin:6px 0 0}
.duo .kaart{width:100%;margin-top:0}
.intro{position:relative;padding:22px 8px 0 4px;min-height:520px}
.intro .held{position:absolute;right:-30px;bottom:-40px;width:300px;height:auto;opacity:.92;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);filter:drop-shadow(0 10px 30px rgba(0,0,0,.8))}
.intro .boven{font:600 12px/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--ember-hi)}
.intro h2{margin:10px 0 12px;font:600 34px/1.12 var(--display);letter-spacing:.04em;text-transform:none;color:#fff4dc;text-shadow:0 3px 18px rgba(0,0,0,.8)}
.intro p{max-width:350px;color:var(--text-2);text-shadow:0 2px 10px rgba(0,0,0,.85)}
.stappen{list-style:none;counter-reset:stap;margin:22px 0 0;padding:0;max-width:330px;position:relative;z-index:1}
.stappen li{counter-increment:stap;position:relative;padding:9px 0 9px 50px;color:var(--text-2);text-shadow:0 2px 8px rgba(0,0,0,.9)}
.stappen li::before,.stappen li::after{content:'';position:absolute;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.stappen li::before{left:0;top:6px;width:38px;height:38px;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo))}
.stappen li::after{content:counter(stap,decimal-leading-zero);left:1px;top:7px;width:36px;height:36px;display:grid;place-items:center;
  font:600 12px/1 var(--display);color:var(--gold-hi);background:#0d0a0b}
.stappen li.nu{color:#fff4dc}
.stappen li.nu::after{background:radial-gradient(circle,var(--ember-hi),var(--ember) 70%);color:#fff4dc}
.stappen li.af{color:var(--text-3)}
.stappen li.af::after{content:'\2713';color:var(--ok);font-size:14px}
.stappen b{display:block;font:600 13px/1.4 var(--display);letter-spacing:.1em;text-transform:uppercase;color:inherit}
@media (max-width:960px){.duo{grid-template-columns:1fr;width:min(470px,calc(100% - 24px))}.intro{min-height:0;padding:0 4px}.intro .held,.intro p,.intro h2,.intro .boven{display:none}
  .stappen{display:flex;justify-content:space-between;max-width:none;margin:0 0 12px}.stappen li{padding:44px 0 0;flex:1;text-align:center;font-size:0}
  .stappen li::before{left:50%;margin-left:-19px;top:0}.stappen li::after{left:50%;margin-left:-18px;top:1px}.stappen b{font-size:9.5px;letter-spacing:.08em}}

/* ── staffoverzicht: trechter ─────────────────────────────────────── */
.trechter{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:4px 0 8px}
.trechter div{padding:12px 10px;text-align:center;border:1px solid var(--line-soft);background:rgba(6,5,7,.55);position:relative}
.trechter div:not(:last-child)::after{content:'\203A';position:absolute;right:-10px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:22px}
.trechter b{display:block;font:600 28px/1.1 var(--display);color:var(--gold-hi)}
.trechter span{font:600 10px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
@media (max-width:620px){.trechter{grid-template-columns:repeat(2,1fr)}.trechter div::after{display:none}}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 6px}
.tabs a{border:1px solid var(--line-soft);padding:6px 12px;font:600 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.tabs a.actief{border-color:var(--gold);color:var(--gold-hi);background:rgba(201,164,92,.08)}
td.vink{width:28px}
.leeg{color:var(--text-3);font-style:italic}

footer{margin:auto 0 26px;padding:14px 16px 0;text-align:center;font-size:15px;color:var(--text-3)}
footer a{color:var(--text-2);border-color:transparent}
footer .stip{margin:0 8px;color:var(--gold-lo)}

@media (max-width:480px){body{font-size:17px}.kop{margin-top:18px}.merk img{width:170px}.kaart{padding:18px 16px 20px;border-width:12px;border-image-width:30px}
  h1{font-size:21px}input,select,textarea{font-size:17px}}
@media (max-width:560px){.smal-weg{display:none}td.datum{white-space:normal}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}