/* Ketting met penning (ketting-met-penning.html): de onderdelen van de
   Pootret-ketting (samenstelvak, 3D, tegels, bestelblok uit kwispel.css,
   naamketting.css, penningketting.css en pootret-ketting.css), maar in de
   kleuren van Amsterdam Laser. Die bestanden werken met variabelen; hier
   krijgen ze de atelier-kleuren in plaats van bordeaux en roze. */
.al-ketting {
  --kw-burgundy: #202221;
  --kw-burgundy-deep: #0b0b0c;
  --kw-pink: #e6e1d6;
  --kw-pink-light: #f1ece2;
  --kw-yellow: #b52b22;
  --kw-orange: #b52b22;
  --kw-cream: #f6f3ec;
  --kw-paper: #fffdf8;
  --kw-brown: #202221;
  --kw-coral: #b52b22;
  --kw-line: #d8d5cc;
  --kw-display: Georgia, "Times New Roman", serif;
  --kw-body: var(--body);
  --pootret-ink: #202221;
  --pkw-cream: #f6f3ec;
  --pkw-paper: #fffdf8;
  --pkw-rose: #e6e1d6;
  --pkw-wine: #202221;
  --pkw-wine-deep: #0b0b0c;
  --pkw-yellow: #b52b22;
  --pkw-ink: #202221;
  background: var(--paper);
}
.al-ketting main { background: var(--paper); }

/* Het bovenste blok: alleen tekst, in de stijl van de andere atelierpagina's. */
.alk-hero { max-width: 1240px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); }
.alk-hero__copy { max-width: 46rem; }
.alk-hero h1 { margin: .4rem 0 1rem; font-family: Georgia, serif; font-weight: 400; font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.alk-hero h1 em { color: var(--red); }
.alk-hero__lead { max-width: 40ch; margin: 0 0 1.6rem; font-size: 1.12rem; line-height: 1.7; color: #484b47; }
.al-ketting .pootret-pill { border-color: var(--red); color: var(--red); transform: none; }
.al-ketting .pootret-proof { color: var(--muted); }
.al-ketting .pootret-proof span { color: var(--red); }

/* Rustiger kaarten: geen gekleurde schaduwblokken zoals bij Kwispel. */
.al-ketting .pkw-card { box-shadow: 0 18px 40px rgb(32 34 33 / 8%); border-width: 1px; }
.al-ketting .pootret-studio { background: var(--paper-deep, #eae5dc); }
.al-ketting .cf-button-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.al-ketting .cf-button-primary:hover { background: var(--red); border-color: var(--red); }
.al-ketting .pootret-studio h2,
.al-ketting .pootret-how h2,
.al-ketting .pootret-faq h2 { font-family: Georgia, serif; font-weight: 400; }

/* Het vinkje voor de achterkant, tussen de tekstvelden. */
.pkw-achter-aan { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 .4rem; font-weight: 700; }
.pkw-achter-aan input { width: 1.15rem; height: 1.15rem; accent-color: var(--ink); }

/* Vijf ontwerpen: op een telefoon twee per rij, anders drie. */
.pkw-tegels--ontwerp > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 520px) { .pkw-tegels--ontwerp > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Het icoon in het midden bij "Boog": kleine tegels, vier of zeven per rij. */
.pkw-tegels--icoon > div { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
.pkw-tegel--icoon { padding: .5rem .2rem; text-align: center; }
.pkw-tegel--icoon .pkw-tegel__icoon { width: 26px; height: 26px; margin: 0 auto .25rem; }
.pkw-tegel--icoon .pkw-tegel__titel { font-size: .68rem; }
@media (max-width: 620px) { .pkw-tegels--icoon > div { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Blokken waar pootret-ketting.css en kwispel.css vaste roze en bordeaux
   kleuren gebruiken (geen variabelen): hier expliciet overschreven. */
/* pootret-ketting.css zet de roze achtergrond op #samenstellen zelf. */
.al-ketting .pootret-studio, .al-ketting #samenstellen { background: #eae5dc; background-image: none; }
.al-ketting .cf-kicker { color: var(--red); }
.al-ketting .pootret-studio__heading p { color: #484b47; font-weight: 400; }
.al-ketting .pkw-promise-strip { background: var(--ink); color: #f6f3ec; }
.al-ketting .pkw-promise-strip p { border-color: rgb(246 243 236 / 16%); }
.al-ketting .pkw-promise-strip strong { color: #fff; }
.al-ketting .pkw-promise-strip span { color: #d8d5cc; }
.al-ketting .pkw-card .pkw-tegels input:checked + label.pkw-tegel { background: #fff; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.al-ketting .pkw-card .pkw-tegels label.pkw-tegel { background: #f6f3ec; color: var(--ink); min-height: 0; }
.al-ketting .pkw-card .pkw-tegels--ontwerp > div { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.al-ketting .pkw-card .pkw-tegels--icoon > div { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.al-ketting .pkw-card .pkw-tegels--icoon label.pkw-tegel { align-items: center; padding: 8px 4px; }
@media (max-width: 520px) { .al-ketting .pkw-card .pkw-tegels--ontwerp > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Twee losse regels per kant. */
.pkw-regels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pkw-regel label { display: block; margin-bottom: 4px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pkw-regel label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pkw-regel input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 1rem; }
.pkw-regel input:focus-visible { outline: 3px solid var(--focus, #006eff); outline-offset: 1px; }
.pkw-regel[hidden] { display: none; }
@media (max-width: 520px) { .pkw-regels { grid-template-columns: 1fr; } }
.pkw-achter { display: grid; gap: 14px; }
.pkw-achter[hidden] { display: none; }
.pkw-regels { margin-top: 4px; }

/* Schuif voor de grootte van het icoon of portret in het midden. */
.pkw-schuif { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-top: 10px; }
.pkw-schuif label { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pkw-schuif output { margin-left: .4rem; font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--red); }
.pkw-schuif input[type=range] { width: 100%; accent-color: var(--ink); }

/* Bij een portret: zeggen dat het van jouw foto wordt (assets/penningketting.js). */
.al-ketting .nk-stage { position: relative; }
.pkw-portret-uitleg { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); margin: 0; padding: .55rem .9rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: .82rem; font-weight: 700; line-height: 1.3; text-align: center; box-shadow: 0 8px 24px rgb(32 34 33 / 18%); }
.pkw-portret-uitleg[hidden] { display: none; }
/* De keuzetegels verbergen hun rondjes (.nk-chain input); de schuif in
   hetzelfde vak moet juist zichtbaar blijven. */
.al-ketting .nk-chain .pkw-schuif input[type=range] { position: static; opacity: 1; width: 100%; height: 28px; margin: 0; clip: auto; pointer-events: auto; appearance: auto; -webkit-appearance: auto; }
.al-ketting .pkw-schuif { padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #f6f3ec; }
.al-ketting .pkw-card .pkw-tegels--icoon > .pkw-schuif { grid-template-columns: auto 1fr; gap: 16px; }

/* ---------------------------------------------------------------------------
   Donkere sfeer (28 oktober): de inhoud donker, warme lichte tekst, rood als
   accent. De kop met het logo blijft licht; het logo is donker.
   --------------------------------------------------------------------------- */
.al-ketting {
  --alk-bg: #131312;
  --alk-vlak: #1c1c1a;
  --alk-vlak2: #252522;
  --alk-lijn: #3a3935;
  --alk-tekst: #f1eee8;
  --alk-zacht: #aaa69d;
  --alk-rood: #e2564b;
}
.al-ketting main,
.al-ketting .atelier-wrap,
.al-ketting .alk-hero,
.al-ketting .pootret-studio,
.al-ketting #samenstellen,
.al-ketting #bestellen,
.al-ketting .pootret-how,
.al-ketting .pootret-faq,
.al-ketting .atelier-section { background: var(--alk-bg); background-image: none; color: var(--alk-tekst); }
.al-ketting main { padding-bottom: 0; }
.al-ketting .atelier-breadcrumb, .al-ketting .atelier-breadcrumb a { color: var(--alk-zacht); }
.al-ketting .alk-hero h1 { color: var(--alk-tekst); }
.al-ketting .alk-hero h1 em, .al-ketting .cf-kicker, .al-ketting .atelier-kicker { color: var(--alk-rood); }
.al-ketting .alk-hero__lead, .al-ketting .pootret-studio__heading p, .al-ketting .pootret-section-heading p { color: var(--alk-zacht); }
.al-ketting .pootret-pill { border-color: var(--alk-rood); color: var(--alk-rood); }
.al-ketting .pootret-proof { color: var(--alk-zacht); }
.al-ketting .pootret-proof li { background: var(--alk-vlak); }
.al-ketting .cf-button-primary { background: var(--alk-tekst); border-color: var(--alk-tekst); color: var(--alk-bg); box-shadow: none; }
.al-ketting .cf-button-primary:hover { background: var(--alk-rood); border-color: var(--alk-rood); color: #fff; }
.al-ketting .pkw-promise-strip { background: var(--alk-vlak); border-block: 1px solid var(--alk-lijn); }
.al-ketting .pkw-promise-strip p { border-color: var(--alk-lijn); }
.al-ketting .pkw-promise-strip span { color: var(--alk-zacht); }
.al-ketting main h2, .al-ketting main h3 { color: var(--alk-tekst); }

/* Het samenstelvak: donkere kaart, het voorbeeld als een vitrine met licht van boven. */
.al-ketting .pkw-card { background: var(--alk-vlak); border-color: var(--alk-lijn); color: var(--alk-tekst); box-shadow: 0 30px 60px rgb(0 0 0 / 35%); }
.al-ketting .pkw-card .nk-stage { background: radial-gradient(ellipse at 50% 30%, #3b3a36 0%, #1f1f1d 60%, #161615 100%); border-color: var(--alk-lijn); }
.al-ketting .pkw-live-label, .al-ketting .pk-kanten button { background: rgb(255 255 255 / 10%); color: var(--alk-tekst); border-color: var(--alk-lijn); }
.al-ketting .pk-kanten button[aria-pressed="true"] { background: var(--alk-tekst); color: var(--alk-bg); }
.al-ketting .pkw-portret-uitleg { background: var(--alk-tekst); color: var(--alk-bg); }
.al-ketting .pkw-card .nk-chain legend, .al-ketting .pkw-card label, .al-ketting .pkw-schuif label, .al-ketting .pkw-regel label, .al-ketting .pkw-achter-aan { color: var(--alk-tekst); }
.al-ketting .pkw-card .pkw-tegels label.pkw-tegel { background: var(--alk-vlak2); border-color: var(--alk-lijn); color: var(--alk-tekst); }
.al-ketting .pkw-card .pkw-tegels label.pkw-tegel .pkw-tegel__sub { color: var(--alk-zacht); }
.al-ketting .pkw-card .pkw-tegels input:checked + label.pkw-tegel { background: #2f2e2a; border-color: var(--alk-tekst); box-shadow: 0 0 0 1px var(--alk-tekst); }
.al-ketting .pkw-card .pkw-tegel__icoon { color: var(--alk-tekst); }
.al-ketting .pkw-regel input, .al-ketting .pkw-card input[type=file], .al-ketting .pkw-card .pkw-foto-veld input { background: var(--alk-vlak2); border-color: var(--alk-lijn); color: var(--alk-tekst); }
.al-ketting .pkw-regel input::placeholder { color: #77736b; }
.al-ketting .pkw-schuif { background: var(--alk-vlak2); border-color: var(--alk-lijn); }
.al-ketting .pkw-schuif output { color: var(--alk-rood); }
.al-ketting .nk-chain .pkw-schuif input[type=range], .al-ketting .pkw-achter-aan input { accent-color: var(--alk-rood); }
.al-ketting .nk-hint, .al-ketting .pkw-field-note, .al-ketting .pkw-card figcaption { color: var(--alk-zacht); }

/* Bestellen: de donkere samenvatting blijft, het formulier op een donkere kaart. */
.al-ketting .sb-form input, .al-ketting .sb-form textarea { background: var(--alk-vlak2); border-color: var(--alk-lijn); color: var(--alk-tekst); }
.al-ketting .sb-form label, .al-ketting .sb-form .sb-veld span, .al-ketting .sb-prijs, .al-ketting .sb-check { color: var(--alk-tekst); }
.al-ketting .sb-hint, .al-ketting .sb-check small { color: var(--alk-zacht); }
.al-ketting #bestellen .pootret-studio__heading { border-top-color: var(--alk-lijn); }

/* Zo werkt het en vragen. */
.al-ketting .pootret-how__grid li { background: var(--alk-vlak); border-color: var(--alk-lijn); color: var(--alk-tekst); box-shadow: none; }
.al-ketting .pootret-how__grid li p, .al-ketting .pootret-faq details p { color: var(--alk-zacht); }
.al-ketting .pootret-how__grid li span, .al-ketting .pootret-how__grid li > div { color: var(--alk-rood); }
.al-ketting .pootret-faq details { border-color: var(--alk-lijn); }
.al-ketting .pootret-faq summary { color: var(--alk-tekst); }
.al-ketting .pootret-faq a, .al-ketting .pkw-order-summary a { color: var(--alk-rood); }
.al-ketting .atelier-related a { color: var(--alk-tekst); border-color: var(--alk-lijn); }
.al-ketting .pkw-card .pkw-tegel--letter .pkw-tegel__proef { color: var(--alk-tekst); }
.al-ketting .pkw-card .pkw-tegel--letter .pkw-tegel__titel, .al-ketting .pkw-card .pkw-tegel--letter span:last-child { color: var(--alk-zacht); }
.al-ketting .pkw-card .pkw-tegel__titel { color: var(--alk-tekst); }
/* Velden die het script verbergt, ook als de opmaak ze een eigen display geeft. */
.al-ketting [data-pk-foto-veld][hidden], .al-ketting [data-pk-portret-veld][hidden], .al-ketting [data-pk-icoon-veld][hidden] { display: none; }
.al-ketting .atelier-dock { background: var(--alk-vlak); border-top-color: var(--alk-lijn); }
.al-ketting .atelier-dock small { color: var(--alk-zacht); }

/* ---------------------------------------------------------------------------
   Stijl van de hoofdpagina (index.html, home.css): donkere kop met het witte
   logo, vette Barlow-hoofdletters met rood, mono-kickers met een rood streepje,
   rode hoekige knoppen en een donkere voet met het logo in wit.
   --------------------------------------------------------------------------- */
.al-ketting { --alk-bg: #101111; --alk-rood: #dd312a; }
.al-ketting .site-header { background: #101111; border-bottom: 1px solid #373737; color: #fff; }
.al-ketting .site-header .site-nav > a:not(.button) { color: #fff; }
.al-ketting .site-header .atelier-link { color: #fff; border-color: rgb(255 255 255 / 40%); }
.al-ketting .nav-toggle { background: transparent; border-color: #fff; }
.al-ketting .nav-toggle span, .al-ketting .nav-toggle span::before, .al-ketting .nav-toggle span::after { background: #fff; }
@media (max-width: 900px) { .al-ketting .site-nav { background: #101111; } }

.al-ketting .alk-hero h1,
.al-ketting main h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.05em; line-height: .86; }
.al-ketting .alk-hero h1 { font-size: clamp(3.4rem, 9vw, 6.6rem); }
.al-ketting .alk-hero h1 em, .al-ketting main h2 em { font-style: normal; color: var(--alk-rood); }
.al-ketting main h2 { font-size: clamp(2.4rem, 5.5vw, 4rem); }

.al-ketting .pootret-pill,
.al-ketting .cf-kicker,
.al-ketting .atelier-kicker { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; border-radius: 0; background: none; color: #e9e3d6; font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transform: none; }
.al-ketting .cf-kicker::before, .al-ketting .atelier-kicker::before, .alk-streep { content: ""; display: inline-block; width: 32px; height: 2px; background: var(--alk-rood); }

.al-ketting .cf-button-primary,
.al-ketting .atelier-cta,
.al-ketting .sb-form button[type=submit] { background: var(--alk-rood); border-color: var(--alk-rood); border-radius: 0; color: #fff; font-family: var(--body); font-weight: 700; box-shadow: none; }
.al-ketting .cf-button-primary:hover,
.al-ketting .atelier-cta:hover,
.al-ketting .sb-form button[type=submit]:hover { background: #b8241e; border-color: #b8241e; color: #fff; }

.al-ketting .site-footer { background: #0b0b0c; color: #fff; border-top: 0; }
.al-ketting .site-footer .footer-logo { filter: invert(1) grayscale(1) brightness(4); }
.al-ketting .site-footer h3 { color: #fff; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.al-ketting .site-footer a, .al-ketting .site-footer p, .al-ketting .site-footer span, .al-ketting .site-footer .cc-voorkeuren { color: #c9c6bf; }
.al-ketting .site-footer a:hover { color: #fff; }
.al-ketting .footer-bottom { border-top-color: #2a2a2a; }
/* atelier.css zet de logo's op multiply; op donker maakt dat wit onzichtbaar. */
.al-ketting.atelier .brand-logo img { mix-blend-mode: normal; }
.al-ketting.atelier .site-footer .footer-logo { mix-blend-mode: normal; filter: invert(1) grayscale(1) brightness(4); }
.al-ketting.atelier .site-footer .footer-company span, .al-ketting.atelier .site-footer .footer-bottom span { color: #c9c6bf; }
.al-ketting main .pootret-studio h2, .al-ketting main .pootret-how h2, .al-ketting main .pootret-faq h2, .al-ketting main .atelier-section h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.05em; line-height: .86; }
.al-ketting main .pootret-how h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; }
.al-ketting .sb-form .sb-check, .al-ketting .sb-form .sb-prijs { background: var(--alk-vlak2); border-color: var(--alk-lijn); color: var(--alk-tekst); box-shadow: none; }
.al-ketting .sb-form .sb-check span, .al-ketting .sb-form .sb-check b, .al-ketting .sb-form .sb-prijs b { color: var(--alk-tekst); }
.al-ketting .sb-form .sb-check small, .al-ketting .sb-form .sb-prijs small { color: var(--alk-zacht); }
.al-ketting .sb-form .sb-check input { accent-color: var(--alk-rood); }
.al-ketting.atelier .site-footer .footer-logo { height: auto; object-fit: contain; }