/* ISPWeb B.V. -- security.ispweb.nl
   Huisstijl: blauw uit het logo, met de rood/geel/groen accenten. */

:root {
    --brand:        #0b86cc;
    --brand-dark:   #06618f;
    --brand-darker: #04456a;
    --accent-red:   #e5051f;
    --accent-yellow:#eed500;
    --accent-green: #a1ce16;

    --bg:        #f4f7fa;
    --surface:   #ffffff;
    --border:    #dfe6ee;
    --text:      #17222c;
    --muted:     #5b6b7a;
    --shadow:    0 1px 2px rgba(4, 40, 66, .06), 0 12px 32px rgba(4, 40, 66, .07);
    --radius:    14px;
    --wrap:      1440px;
    --font:      "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:      #0e161e;
        --surface: #16222d;
        --border:  #263646;
        --text:    #e8eef4;
        --muted:   #9fb1c1;
        --shadow:  0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1 0 auto; }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 34px;
}

/* ---------- landingspagina: alles binnen een beeldscherm ----------
   body.oneview vult de viewport en laat de blauwe .board de resterende
   hoogte innemen. Wordt het scherm te laag, dan mag er alsnog gescrold
   worden -- liever dat dan onleesbare tekst. */

body.oneview {
    min-height: 100vh;
    min-height: 100dvh;
}

body.oneview main {
    display: flex;
    flex-direction: column;
}

.board {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1200px 460px at 8% -25%, rgba(255, 255, 255, .2), transparent 62%),
        linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 55%, var(--brand-darker) 100%);
}

.board-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vh, 34px);
    padding-block: clamp(22px, 4vh, 48px);
}

.board-grid {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(420px, 1.1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

.board-intro h1 {
    margin: 0 0 14px;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.13;
    letter-spacing: -.02em;
}

.board-intro p {
    margin: 0;
    max-width: 46ch;
    font-size: clamp(15.5px, 1.15vw, 18px);
    color: rgba(255, 255, 255, .93);
}

.board-meta {
    margin-top: 20px !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, .8) !important;
}

.board-cards {
    display: grid;
    gap: 16px;
}

.glass {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius);
    padding: clamp(16px, 2vh, 24px) clamp(18px, 2vw, 28px);
    backdrop-filter: blur(6px);
}

.glass h2 {
    margin: 0 0 10px;
    font-size: 15px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-yellow);
}

.steps {
    margin: 0;
    padding-left: 22px;
    font-size: clamp(14px, 1vw, 15.5px);
    line-height: 1.5;
}

.steps li { margin-bottom: 5px; }
.steps li::marker { color: var(--accent-green); font-weight: 700; }
.steps li:last-child { margin-bottom: 0; }

.rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 6px 26px;
    font-size: clamp(13.5px, .95vw, 15px);
    line-height: 1.45;
}

.rules h3 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .8);
}

.rules ul li { margin-bottom: 4px; }

/* ---------- de vier blokken onderaan de landingspagina ---------- */

.steps-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.steps-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.board .cards {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

/* Elk blok krijgt een eigen huisstijlkleur; het nummer wordt wit.
   --block   = achtergrond van het blok
   --on      = tekstkleur die daarop leesbaar is
   --numfg   = kleur van het cijfer op het witte plaatje */

.board .card {
    padding: 16px 18px;
    background: var(--block);
    color: var(--on);
    border-color: rgba(255, 255, 255, .3);
    box-shadow: 0 14px 30px rgba(2, 30, 50, .28);
}

/* Blok 1 fel lichtblauw: het eerdere donkerblauw viel weg tegen de achtergrond. */
.board .cards .card:nth-child(1) { --block: #4ec3f7; --on: #04324e;  --numfg: #0a6ea8; }
.board .cards .card:nth-child(2) { --block: #8fb912; --on: #10240a;  --numfg: #5d7a08; }
.board .cards .card:nth-child(3) { --block: #eed500; --on: #2b2600;  --numfg: #7d6e00; }
.board .cards .card:nth-child(4) { --block: #e5051f; --on: #fff;     --numfg: #c50419; }

.board .card h3 {
    margin: 0 0 4px;
    font-size: 15.5px;
    color: inherit;
}

.board .card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: inherit;
    opacity: .9;
}

.board .cards .card .num {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 10px;
    background: #fff;
    color: var(--numfg);
}

/* Op het blauwe vlak moet het rood lichter, anders is het niet te lezen. */
.glass ul.crosses li::before { color: #ff9aa2; }
.glass ul.checks li::before { color: var(--accent-green); }

.fineprint {
    margin: 12px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
}

/* Op de landingspagina sluit de footer direct op het blauwe vlak aan. */
body.oneview .site-footer { margin-top: 0; }

/* Lage schermen: nog wat compacter, zodat het blijft passen. */
@media (max-height: 860px) {
    .board-inner { padding-block: 20px; gap: 20px; }
    .board-intro h1 { font-size: clamp(24px, 2.6vw, 34px); }
    .board-intro p { font-size: 15.5px; }
    .glass { padding: 14px 18px; }
    .board-meta { margin-top: 12px !important; }
    .hero-actions { margin-top: 20px; }
    .board .card { padding: 13px 16px; }
    .board .card .num { margin-bottom: 7px; }
    .fineprint { margin-top: 9px; }
}

@media (max-height: 720px) {
    .steps-label { display: none; }
    .board .card p { display: none; }
    .board .card { display: flex; align-items: center; gap: 12px; }
    .board .card .num { margin-bottom: 0; flex: none; }
    .board .card h3 { margin: 0; }
}

@media (max-width: 900px) {
    .board-grid { grid-template-columns: 1fr; }
    body.oneview { min-height: 0; }
}

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

.skip {
    position: absolute;
    left: -9999px;
}
.skip:focus {
    left: 12px;
    top: 12px;
    z-index: 10;
    background: var(--surface);
    padding: 10px 16px;
    border-radius: 8px;
}

/* ---------- header ---------- */

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 5;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 76px;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.brand img {
    display: block;
    height: 42px;
    width: auto;
}

.brand-sub {
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--muted);
    padding-left: 12px;
    border-left: 1px solid var(--border);
}

.site-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.site-nav a {
    text-decoration: none;
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
}

.site-nav a:hover {
    color: var(--brand);
    background: rgba(11, 134, 204, .08);
}

/* ---------- taalwissel ---------- */

.lang-switch {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
    gap: 2px;
}

.lang-switch a {
    padding: 6px 9px;
    font-size: 13px;
    letter-spacing: .05em;
}

.lang-switch a.is-active {
    color: #fff;
    background: var(--brand);
}

.lang-switch a.is-active:hover {
    color: #fff;
    background: var(--brand-dark);
}

/* ---------- hero ---------- */

.hero {
    background:
        radial-gradient(1100px 380px at 12% -30%, rgba(255, 255, 255, .22), transparent 65%),
        linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 55%, var(--brand-darker) 100%);
    color: #fff;
    padding: 68px 0 84px;
    position: relative;
    overflow: hidden;
}

/* De accentbalk staat alleen nog bij de footer -- zie .site-footer::before. */

.hero-slim { padding: 32px 0 36px; }

.hero h1 {
    margin: 0 0 16px;
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.hero p {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(17px, 2.2vw, 20px);
    color: rgba(255, 255, 255, .92);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 18px;
}

.eyebrow::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--accent-green);
    box-shadow: 14px 0 0 var(--accent-yellow), 28px 0 0 var(--accent-red);
    margin-right: 30px;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* ---------- knoppen ---------- */

.btn {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: transform .12s ease, background-color .18s ease, color .18s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    background: #fff;
    color: var(--brand-dark);
}
.btn-primary:hover {
    background: var(--accent-yellow);
    color: #1c1c00;
}

.btn-ghost {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.btn-solid {
    background: var(--brand);
    color: #fff;
}
.btn-solid:hover {
    background: var(--brand-dark);
    color: #fff;
}

/* ---------- secties & kaarten ---------- */

.section { padding: 56px 0; }
.section-tight { padding: 34px 0; }
.section.no-top { padding-top: 0; }
.note-spaced { margin-top: 24px; }

input[type=file] {
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    border: 2px dashed var(--border);
    border-radius: 10px;
    cursor: pointer;
}

input[type=file]:hover { border-color: var(--brand); }

input[type=file]:focus {
    outline: none;
    border-color: var(--brand);
    border-style: solid;
}

input[type=file]::file-selector-button {
    margin-right: 12px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: var(--brand);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

input[type=file]::file-selector-button:hover { background: var(--brand-dark); }

/* Verzendknop links, Turnstile rechts, op één regel.
   Het widget van Cloudflare is 65px hoog; de knop krijgt dezelfde hoogte zodat
   ze netjes uitlijnen. Past het niet, dan valt het widget eronder. */
.submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.submit-row .btn {
    min-height: 65px;
    display: inline-flex;
    align-items: center;
}

/* Het widget zelf niet aanpassen -- Cloudflare rendert het in een iframe en
   schalen breekt de weergave. Alleen de witruimte eromheen wegnemen. */
.submit-row .cf-turnstile {
    line-height: 0;
    flex: 0 0 auto;
}

@media (max-width: 560px) {
    .submit-row { justify-content: flex-start; }
    .submit-row .btn { width: 100%; justify-content: center; }
}

/* Privacytekst onder het formulier: standaard ingeklapt, zodat het formulier
   op een scherm blijft passen. <details> werkt zonder JavaScript, dus dit
   botst niet met de strikte CSP. */
.privacy-note {
    margin: 20px 0 0;
    padding-left: 14px;
    border-left: 3px solid var(--accent-yellow);
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 110ch;
}

.privacy-note > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.privacy-note > summary::-webkit-details-marker { display: none; }

/* Eigen driehoekje, zodat het in beide browsers hetzelfde oogt. */
.privacy-note > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s ease;
}

.privacy-note[open] > summary::before { transform: rotate(90deg); }

.privacy-note > summary:hover { color: var(--brand); }

.privacy-note > summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 3px;
}

.privacy-note > p { margin: 8px 0 0; }
a.on-dark { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
a.on-dark:hover { color: var(--accent-yellow); }

.section h2 {
    font-size: clamp(22px, 3vw, 28px);
    margin: 0 0 8px;
    letter-spacing: -.01em;
}

.section > .wrap > p.lead {
    color: var(--muted);
    margin: 0 0 28px;
    max-width: 68ch;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 20px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow);
}

.card h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.card p:last-child { margin-bottom: 0; }

.card .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    margin-bottom: 14px;
}

/* De kleuren per blok staan bij .board -- daar worden de kaarten gebruikt. */

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

ul.checks, ul.crosses {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.checks li, ul.crosses li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 9px;
}

ul.checks li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--accent-green);
    font-weight: 700;
}

ul.crosses li::before {
    content: "\00d7";
    position: absolute;
    left: 2px;
    color: var(--accent-red);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
}

.note {
    border-left: 4px solid var(--accent-yellow);
    background: var(--surface);
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin: 26px 0 0;
    color: var(--muted);
    font-size: 15px;
}

code, .mono {
    font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
    font-size: .92em;
}

code {
    background: rgba(11, 134, 204, .1);
    padding: 2px 6px;
    border-radius: 5px;
}

/* ---------- formulier ---------- */

.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px;
    max-width: 940px;
}

.field { margin-bottom: 18px; }

/* Naam en e-mail naast elkaar: scheelt hoogte op het formulier. */
.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 20px;
}

.field label {
    display: block;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
}

/* Achter het label op dezelfde regel, zodat de invoervelden uitgelijnd blijven. */
.field .hint {
    font-weight: 400;
    color: var(--muted);
    font-size: 13.5px;
    margin-left: 6px;
}

/* Wringt een hint zich toch over twee regels, dan houdt dit de velden gelijk. */
.field-row .field {
    display: flex;
    flex-direction: column;
}

.field-row .field label { flex: 1 0 auto; }

input[type=text],
input[type=email],
input[type=password],
textarea,
select {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 16px;
    color: var(--text);
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 10px;
    transition: border-color .15s ease, background-color .15s ease;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface);
}

textarea { resize: vertical; min-height: 110px; }

.hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.alert {
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 22px;
    border: 1px solid;
    font-size: 15.5px;
}

.alert-ok {
    background: rgba(161, 206, 22, .12);
    border-color: rgba(161, 206, 22, .5);
}

.alert-err {
    background: rgba(229, 5, 31, .08);
    border-color: rgba(229, 5, 31, .4);
}

/* ---------- beheergedeelte ---------- */

.admin-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin-bottom: 26px;
}

.tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tabs a {
    text-decoration: none;
    color: var(--muted);
    font-weight: 600;
    font-size: 15px;
    padding: 12px 18px;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.tabs a:hover {
    color: var(--brand);
    background: rgba(11, 134, 204, .06);
}

.tabs a.is-active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.tabs-sub {
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
}

.tab-logout {
    font-size: 14px;
    color: var(--muted);
}

.n-sm { font-size: 14px !important; }
.n-md { font-size: 16px !important; word-break: break-word; }

.form-wide { max-width: none; }

.result-card { margin-top: 22px; }

.result-card h3,
.form-card h3 {
    margin: 0 0 14px;
    font-size: 17px;
}

label.inline {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 500;
    cursor: pointer;
}

label.inline input[type=checkbox] {
    width: auto;
    margin: 0;
}

textarea.mono {
    font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
}

pre.deploy-log,
pre.pgp-error {
    margin: 0;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-x: auto;
    font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

pre.pgp-error {
    background: transparent;
    border: 0;
    padding: 0;
}

.publish-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.btn-ghost-solid {
    background: transparent;
    border-color: var(--brand);
    color: var(--brand);
}

.btn-ghost-solid:hover {
    background: rgba(11, 134, 204, .1);
    color: var(--brand-dark);
}

/* ---------- logviewer ---------- */

.toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 22px;
}

.toolbar .field { margin-bottom: 0; }
.toolbar input, .toolbar select { width: auto; min-width: 170px; }

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
}

.stat .n {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.stat .l {
    color: var(--muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

table.log {
    border-collapse: collapse;
    width: 100%;
    font-size: 13.5px;
    font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

table.log th, table.log td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

table.log th {
    position: sticky;
    top: 0;
    background: var(--surface);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

table.log tr:last-child td { border-bottom: none; }
table.log tbody tr:hover { background: rgba(11, 134, 204, .06); }

td.wide,
td.col-host, td.col-path, td.col-ref, td.col-ua {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Vaste bovengrenzen, anders duwt een lange referer of user-agent de
   rest van de tabel buiten beeld. De volledige waarde staat in de tooltip. */
td.col-host { max-width: 260px; }
td.col-path { max-width: 380px; }
td.col-ref  { max-width: 260px; }
td.col-ua   { max-width: 260px; }

/* Logpagina breed, maar met 10% marge links en rechts. */
body.wide .wrap {
    max-width: none;
    padding-inline: 10%;
}

/* Op smalle schermen kost 10% te veel ruimte. */
@media (max-width: 900px) {
    body.wide .wrap { padding-inline: 14px; }
}

body.wide .section { padding: 22px 0; }
body.wide .form-card { margin-inline: auto; }

.tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(11, 134, 204, .12);
    color: var(--brand-dark);
}

.tag-bot {
    background: rgba(238, 213, 0, .22);
    color: #6a5c00;
}

.tag-own {
    background: rgba(161, 206, 22, .25);
    color: #4a6300;
}

@media (prefers-color-scheme: dark) {
    .tag { color: #7cc6f2; }
    .tag-bot { color: var(--accent-yellow); }
}

/* ---------- footer ---------- */

.site-footer {
    background: var(--surface);
    position: relative;
    margin-top: 60px;
    padding: 16px 0;
    font-size: 14.5px;
    color: var(--muted);
}

/* De accentbalk hoort bij de footer, zodat elke pagina er hetzelfde uitziet. */
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(
        90deg,
        var(--accent-red) 0 25%,
        var(--accent-yellow) 25% 50%,
        var(--accent-green) 50% 75%,
        var(--brand) 75% 100%
    );
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 26px;
}

/* Naast elkaar in plaats van onder elkaar: scheelt hoogte. */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
}

.footer-meta { font-size: 13.5px; }

@media (max-width: 640px) {
    body { font-size: 16px; }
    .hero { padding: 46px 0 60px; }
    .header-inner { min-height: 0; padding-block: 14px; }
    .brand-sub { display: none; }
}