/* ============================================================
   /for/... - de beroepspagina's
   Alleen wat styles.css nog niet kan. Bewust een eigen bestand:
   elf nieuwe pagina's horen de cachebuster van styles.css op de
   andere vijfenvijftig niet te laten verschuiven.
   Alle kleuren komen uit de tokens van styles.css, dus licht en
   donker werken vanzelf mee.
   ============================================================ */

/* ---------- Kop van een beroepspagina: icoon naast het bovenschrift ---------- */
.aud-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.aud-head .eyebrow{margin-bottom:0}
.aud-ic{
  flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue);
}
.aud-ic svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aud-ic.coral{background:color-mix(in srgb,var(--coral) 18%,transparent);color:var(--coral)}

/* ---------- Het overzicht als landingspagina, niet als juridische pagina ----
   Hij hing aan .legal-head, dezelfde opmaak als het privacybeleid en de
   voorwaarden, en dat was precies hoe hij aanvoelde. Hier krijgt hij de
   behandeling van de indexpagina: twee gekleurde gloeden achter de kop, een
   grotere titel, en de kaartenrij op containerbreedte zodat de vraag en de
   antwoorden onder elkaar uitlijnen. */
.aud-hub{position:relative;overflow:hidden;padding-top:clamp(36px,6vw,64px)}
.aud-hub > *{position:relative;z-index:1}
.aud-hub::before,.aud-hub::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;opacity:.5;
}
.aud-hub::before{
  width:46vw;height:46vw;top:-20vw;left:-14vw;
  background:radial-gradient(circle at 34% 34%,
    color-mix(in srgb,var(--coral) 62%,transparent),
    color-mix(in srgb,var(--coral) 20%,transparent) 36%, transparent 66%);
}
.aud-hub::after{
  width:44vw;height:44vw;top:-16vw;right:-16vw;
  background:radial-gradient(circle at 60% 40%,
    color-mix(in srgb,var(--blue) 58%,transparent),
    color-mix(in srgb,var(--blue) 18%,transparent) 36%, transparent 66%);
}
.aud-hub .prose-wrap{max-width:var(--maxw)}
.aud-hub h1{font-size:clamp(2.3rem,6.4vw,3.9rem);font-weight:750;letter-spacing:-.035em;max-width:16ch}
.aud-hub .lead{max-width:54ch;font-size:clamp(1.05rem,2vw,1.22rem)}
.aud-hub .aud-ic{width:46px;height:46px}
.aud-hub .aud-ic svg{width:24px;height:24px}

/* ---------- De tien antwoorden ----------
   Het zijn knoppen, geen kaartjes om te lezen: de naam groot, eronder een
   regel uit de week van de lezer, en een pijl die meeschuift. De hele knop is
   de link, ook voor een toetsenbord. */
.aud-grid{display:grid;gap:13px;grid-template-columns:repeat(2,1fr);margin-top:clamp(28px,4.5vw,44px)}
.aud-card{
  position:relative;display:flex;gap:17px;align-items:center;
  background:var(--canvas);border:1px solid var(--hairline-strong);border-radius:var(--r);
  padding:21px 23px;color:inherit;text-decoration:none;box-shadow:var(--shadow);
  transition:transform .24s var(--ease),border-color .24s,box-shadow .24s;
}
.aud-card .aud-ic{
  width:48px;height:48px;border-radius:13px;
  transition:transform .24s var(--ease);
}
.aud-card .aud-ic svg{width:25px;height:25px}
.aud-card .tx{flex:1;min-width:0}
.aud-card h2{font-size:1.12rem;font-weight:700;letter-spacing:-.02em;margin:0 0 4px;line-height:1.25}
.aud-card p{color:var(--ink-soft);font-size:14.5px;line-height:1.5;margin:0}
.aud-card .go{
  flex:none;width:20px;height:20px;color:var(--ink-soft);
  transition:transform .24s var(--ease),color .24s;
}
.aud-card .go svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){
  .aud-card:hover{
    transform:translateY(-3px);border-color:color-mix(in srgb,var(--blue) 45%,var(--hairline-strong));
    box-shadow:0 2px 4px rgba(0,0,0,.05), 0 16px 40px color-mix(in srgb,var(--blue) 12%,transparent);
    text-decoration:none;
  }
  .aud-card:hover .aud-ic{transform:scale(1.06)}
  .aud-card:hover .go{transform:translateX(4px);color:var(--blue-text)}
  .aud-card:hover h2{color:var(--blue-text)}
}
.aud-card:focus-visible{outline:2px solid var(--blue-text);outline-offset:3px}
[dir="rtl"] .aud-card .go svg{transform:scaleX(-1)}
@media (max-width:760px){
  .aud-grid{grid-template-columns:1fr;gap:11px}
  .aud-card{padding:18px 19px;gap:15px}
  .aud-card h2{font-size:1.06rem}
}
/* Een kaarttitel mag een ­ bevatten voor een woord dat op de smalste
   telefoons niet in de kaart past: het Deense "Menneske­rettigheder"
   (169px tekst in een kolom van 138 op 320px) maakte het overzicht daar
   anders 9px breder dan het scherm. Alleen daar mag de browser het streepje
   gebruiken; breder gaat zo'n woord gewoon als geheel naar de volgende regel,
   in plaats van "sundheds-personale" op een telefoon van 375 die het woord
   heel kan tonen. "Menneskerettigheder" past vanaf 351px. Talen zonder ­
   in hun titels merken hier niets van. */
.aud-card h2{-webkit-hyphens:none;hyphens:none}
@media (max-width:350px){.aud-card h2{-webkit-hyphens:manual;hyphens:manual}}

/* De uitweg voor wie er niet bij staat. Eén regel, geen sectie. */
.aud-none{
  margin:clamp(28px,4vw,40px) auto 0;max-width:58ch;text-align:center;
  font-size:15px;color:var(--ink-soft);line-height:1.65;
}
.aud-none + .btn-row{justify-content:center;margin-top:18px}

/* ---------- De band onder de kop ----------
   Sfeer, geen bewijs: een plek waar dit werk gebeurt, geen poserende mensen.
   Staat onder de samenvatting en boven de lopende tekst, zodat de lezer eerst
   het nuttige krijgt en de foto daarna het verhaal opent. Zelf gehost, want
   een site die belooft dat er niets naar een server gaat hoort geen plaatjes
   van een vreemde CDN te laden. */
.aud-photo{margin:clamp(28px,4.5vw,44px) 0 0}
.aud-photo img{
  width:100%;height:auto;display:block;
  border-radius:var(--r);background:var(--surface);
  box-shadow:var(--shadow);
}
.aud-photo figcaption{
  margin-top:9px;font-size:11.5px;line-height:1.5;
  color:var(--ink-soft);opacity:.65;text-align:end;
}
.aud-photo figcaption a{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .aud-photo figcaption a:hover{color:var(--blue-text);text-decoration:underline}
}

/* ---------- De drie regels onder de kop ----------
   Waarvoor, waarom, en waarvoor niet. Het derde puntje is met opzet even
   zwaar opgemaakt als de eerste twee: wie alleen de samenvatting leest hoort
   ook te horen waar de app niet voor deugt. */
.aud-tldr{
  list-style:none;padding:0;margin:clamp(22px,3vw,30px) 0 0;
  display:grid;gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;
}
.aud-tldr li{
  display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:baseline;
  background:var(--surface);padding:15px 20px;
}
.aud-tldr b{
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);
}
.aud-tldr li:last-child b{color:var(--coral-text)}
.aud-tldr span{font-size:15px;line-height:1.6;color:var(--ink)}
@media (max-width:640px){
  .aud-tldr li{grid-template-columns:1fr;gap:5px}
}

/* ---------- Het blok dat je meeneemt ----------
   De woorden zelf: een toestemmingsalinea, de vraag aan een
   beveiligingsofficier, twee zinnen voor een datamanagementplan. Zwaarder
   opgemaakt dan de lopende tekst, want dit is waarvoor je zo'n pagina
   bewaart. */
.aud-say{
  margin:26px 0 0;padding:0;
  border:1px solid var(--hairline-strong);border-radius:var(--r);
  background:var(--canvas);overflow:hidden;
}
.aud-say figcaption{
  padding:13px 22px;background:var(--surface);
  border-bottom:1px solid var(--hairline);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-text);
}
.aud-say blockquote{
  margin:0;padding:22px 22px 18px;
  font-size:16.5px;line-height:1.68;color:var(--ink);
  border-inline-start:3px solid var(--coral);
}
.aud-say > p{
  margin:0;padding:0 22px 20px;
  font-size:14px;line-height:1.65;color:var(--ink-soft);
}
@media (max-width:640px){
  .aud-say figcaption{padding:12px 17px}
  .aud-say blockquote{padding:18px 17px 15px;font-size:15.5px}
  .aud-say > p{padding:0 17px 17px}
}

/* ---------- De momenten waarop je hem pakt ---------- */
.ucase{display:grid;gap:14px;margin-top:22px}
.ucase article{
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r);padding:20px 22px;
}
.ucase h3{font-size:1.02rem;margin:0 0 9px;display:flex;gap:11px;align-items:baseline}
.ucase h3 .n{
  flex:none;font-size:11.5px;font-weight:800;letter-spacing:.06em;line-height:1.5;
  color:var(--coral-text);font-variant-numeric:tabular-nums;
}
.ucase p{color:var(--ink-soft);font-size:15px;line-height:1.7;margin:0}
.ucase p + p{margin-top:10px}
.ucase .do{
  margin-top:13px;padding-top:13px;border-top:1px solid var(--hairline);
  font-size:14.5px;color:var(--ink-soft);line-height:1.65;
}
.ucase .do b{color:var(--ink)}

/* ---------- De afslag na de use cases ----------
   Wie na de momenten uit zijn eigen week overtuigd is, moest anders nog vier
   secties door voordat er een knop stond. Eén regel, één knop, en een zin voor
   wie juist wel door wil lezen. Licht gehouden: dit is een afslag, geen muur. */
.aud-jump{
  display:grid;grid-template-columns:1fr auto;gap:6px 22px;align-items:center;
  margin:24px 0 0;padding:20px 22px;
  border:1px solid var(--hairline-strong);border-radius:var(--r);
  background:var(--surface);
}
.aud-jump p{grid-column:1;margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.aud-jump .btn{grid-column:2;grid-row:1 / span 2;white-space:nowrap}
.aud-jump .more{grid-column:1;font-size:13.5px;color:var(--ink-soft)}
@media (max-width:640px){
  .aud-jump{grid-template-columns:1fr;gap:14px}
  .aud-jump .btn{grid-column:1;grid-row:auto;justify-self:start}
  .aud-jump .more{order:3}
}

/* De twee nevenwegen onder de hoofdknop. Tekstlinks, geen knoppen, zodat er
   aan het eind van de pagina één ding is dat eruit springt in plaats van drie. */
.aud-also{
  margin-top:14px;font-size:14px;color:var(--ink-soft);
}
.aud-also a{color:var(--blue-text)}

/* ---------- Twee kolommen: wat er misgaat, en wat hier anders is ---------- */
.riskbox{
  margin-top:22px;border:1px solid var(--hairline-strong);border-radius:var(--r);
  background:var(--canvas);overflow:hidden;
}
.riskbox > div{padding:19px 21px}
.riskbox > div + div{border-top:1px solid var(--hairline)}
.riskbox b{
  display:block;font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:8px;
}
.riskbox .bad b{color:var(--coral-text)}
.riskbox .good b{color:var(--blue-text)}
.riskbox p{margin:0;font-size:15px;color:var(--ink-soft);line-height:1.68}
.riskbox p + p{margin-top:9px}
@media (min-width:720px){
  .riskbox{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .riskbox > div + div{border-top:0;border-inline-start:1px solid var(--hairline)}
}

/* ---------- Instellen in vier stappen. Eigen lijst, want .steps hangt
             aan een scrollvariabele die app.js alleen op de indexpagina zet. */
.aud-steps{list-style:none;counter-reset:s;padding:0;margin:22px 0 0;display:grid;gap:12px}
.aud-steps li{
  counter-increment:s;position:relative;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:16px 18px 16px 58px;font-size:15px;color:var(--ink-soft);line-height:1.68;
}
.aud-steps li::before{
  content:counter(s);position:absolute;inset-inline-start:18px;top:15px;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--coral);color:var(--on-coral);font-size:12.5px;font-weight:800;line-height:1;
}
.aud-steps li b{color:var(--ink);font-weight:650}
:root[dir="rtl"] .aud-steps li,[dir="rtl"] .aud-steps li{padding:16px 58px 16px 18px}

/* ---------- De regels-tabel: lange samenstellingen mogen afbreken ----------
   Een tabelkolom wordt nooit smaller dan zijn langste woord. In het Nederlands
   (verwerkersovereenkomst, geheimhoudingsplicht) werd de tabel daardoor op een
   telefoon breder dan zijn kader: 31px te breed op 375, 86px op 320, en dan
   moest je hem opzij schuiven. Afbreken met een streepje, volgens de taal van
   de pagina, houdt hem binnen het kader. Duits en Fins worden nog langer. */
.spec.kv th,.spec.kv td{-webkit-hyphens:auto;hyphens:auto}

/* ---------- De kop: alleen afbreken op een telefoon ----------
   styles.css laat .legal-head h1 afbreken, voor één lang woord op 320px. Op een
   breed scherm brak dat ook koppen die gewoon pasten, zoals "proto-cole" in een
   Franse kop van 48px. Vanaf 621px past het langste woord van elke kop hier
   zonder afbreken, nagemeten in het Engels, Nederlands, Duits en Frans. */
@media (min-width:621px){.legal-head h1{-webkit-hyphens:manual;hyphens:manual}}

/* ---------- Door naar de andere negen ---------- */
.aud-more{margin-top:clamp(40px,6vw,64px);padding-top:26px;border-top:1px solid var(--hairline)}
.aud-more > b{
  display:block;font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;
}

/* ---------- De regel onder een beroepspagina ----------
   Klein houden. De verantwoording ("geschreven door de maker, geen juridisch
   advies") staat al bovenaan in het kader van elke pagina; hier hoeft alleen
   nog wanneer het geschreven is en waar de cijfers vandaan komen. Eigen
   klasse, want .fact-updated wordt ook door /facts gebruikt. */
.fact-updated.aud-fine{
  margin-top:clamp(28px,4vw,42px);padding-top:16px;
  font-size:12.5px;line-height:1.62;color:var(--ink-soft);opacity:.72;
  max-width:var(--prose);
}
.fact-updated.aud-fine p{margin:0}
.fact-updated.aud-fine p + p{margin-top:9px}
/* Het vet mag de regel vindbaar maken, niet laten roepen: zelfde grootte,
   zelfde kleur, alleen iets steviger. */
.fact-updated.aud-fine b{font-weight:650;color:inherit}

/* ---------- Rechts naar links (Arabisch) ----------
   Arabisch is een verbonden schrift: letter-spacing trekt een woord uit
   elkaar in losse letters. /styles.css zet het daarom op een rij plekken
   uit; dit zijn de plekken van deze pagina's (labels, koppen, kaarttitels).
   Het pijltje van een kaart schuift bij hover de leesrichting in, en de twee
   vlekken achter het overzicht kantelen mee, zoals de vlekken op de homepage. */
[dir="rtl"] .aud-tldr b,
[dir="rtl"] .aud-say figcaption,
[dir="rtl"] .riskbox b,
[dir="rtl"] .aud-more > b,
[dir="rtl"] .ucase h3 .n,
[dir="rtl"] .aud-hub h1,
[dir="rtl"] .aud-card h2{letter-spacing:normal}
@media (hover:hover) and (pointer:fine){
  [dir="rtl"] .aud-card:hover .go{transform:translateX(-4px)}
}
[dir="rtl"] .aud-hub::before{left:auto;right:-14vw}
[dir="rtl"] .aud-hub::after{right:auto;left:-16vw}