/* =========================================================
   Vrienden Van De Lijst — gemeenschappelijke vormgeving
   Huisstijl: rood #e52320, blauw #2a4b9b, groen #66b32e
   ========================================================= */

:root {
    --vvdl-rood: #e52320;
    --vvdl-blauw: #2a4b9b;
    --vvdl-groen: #66b32e;
    --jaar-grootte: clamp(48px, 7vw, 78px);
}


/* ---------------------------------------------------------
   Bandkleuren — centrale bron
   Alleen de twee basiskleuren worden per band vastgelegd.
   De tussenkleur is exact 50/50 gemengd in sRGB.
   --------------------------------------------------------- */

.bandkleur {
    --band-tussen: color-mix(in srgb, var(--band-achtergrond) 50%, var(--band-tekst) 50%);
    --favicon-color: var(--band-tekst);
    --favicon-shadow: var(--band-achtergrond);
    background-color: var(--band-achtergrond);
    color: var(--band-tekst);
}

.bandkleur-standaard          { --band-achtergrond: #f7f3eb; --band-tekst: #27313a; }
.bandkleur-genesis            { --band-achtergrond: #dece93; --band-tekst: #000000; }
.bandkleur-marillion          { --band-achtergrond: #000060; --band-tekst: #ffffff; }
.bandkleur-iq                 { --band-achtergrond: #000000; --band-tekst: #a3a53a; }
.bandkleur-camel              { --band-achtergrond: #f4e9bc; --band-tekst: #800000; }
.bandkleur-pink-floyd         { --band-achtergrond: #fcfbfc; --band-tekst: #000000; }
.bandkleur-yes                { --band-achtergrond: #000030; --band-tekst: #acdef5; }
.bandkleur-pendragon          { --band-achtergrond: #feffef; --band-tekst: #000000; }
.bandkleur-supertramp         { --band-achtergrond: #0d141f; --band-tekst: #ff6600; }
.bandkleur-spocks-beard       { --band-achtergrond: #000000; --band-tekst: #acdef5; }
.bandkleur-boston             { --band-achtergrond: #000000; --band-tekst: #fce43f; }
.bandkleur-alan-parsons       { --band-achtergrond: #0b3f29; --band-tekst: #fdfed6; }
.bandkleur-pallas             { --band-achtergrond: #0a1122; --band-tekst: #9966cc; }
.bandkleur-rush               { --band-achtergrond: #222222; --band-tekst: #e12d88; }
.bandkleur-dream-theater      { --band-achtergrond: #000000; --band-tekst: #fdc032; }
.bandkleur-neal-morse         { --band-achtergrond: #bbcfcd; --band-tekst: #000000; }
.bandkleur-genesis-2          { --band-achtergrond: #feffd7; --band-tekst: #000000; }
.bandkleur-iq-2               { --band-achtergrond: #e3401f; --band-tekst: #fcf8b1; }
.bandkleur-pendragon-2        { --band-achtergrond: #9adaf5; --band-tekst: #000000; }
.bandkleur-queensryche        { --band-achtergrond: #1a1a1a; --band-tekst: #ffffff; }
.bandkleur-iona               { --band-achtergrond: #0b1e5b; --band-tekst: #ffffff; }
.bandkleur-blackfield         { --band-achtergrond: #6a17ad; --band-tekst: #c1b5cd; }
.bandkleur-blof               { --band-achtergrond: #a9c4d5; --band-tekst: #172b39; }
.bandkleur-coda               { --band-achtergrond: #e6dcc4; --band-tekst: #332a20; }
.bandkleur-collage            { --band-achtergrond: #5b5351; --band-tekst: #ffffff; }
.bandkleur-fish               { --band-achtergrond: #d8c5b3; --band-tekst: #302720; }
.bandkleur-mike-oldfield      { --band-achtergrond: #6f86a3; --band-tekst: #ffffff; }
.bandkleur-neuschwanstein     { --band-achtergrond: #f1ce89; --band-tekst: #492613; }
.bandkleur-now                { --band-achtergrond: #e3d9ef; --band-tekst: #382b4b; }
.bandkleur-pearl-jam          { --band-achtergrond: #c7bda1; --band-tekst: #28251f; }
.bandkleur-neal-morse-band    { --band-achtergrond: #bdd1cb; --band-tekst: #1e2c28; }
.bandkleur-toto               { --band-achtergrond: #5a2622; --band-tekst: #ffffff; }
.bandkleur-twelfth-night      { --band-achtergrond: #fefffa; --band-tekst: #202020; }

/* ---------------------------------------------------------
   Bijzondere vormgeving van enkele Banddraaja-pagina's
   --------------------------------------------------------- */

body.bandkleur-pink-floyd {
    background-image: url(../Images/thewall_background.webp);
    background-repeat: repeat;
}

body.bandkleur-supertramp {
    background-image: url(../Images/supertramp_background.webp);
    background-repeat: repeat;
}

.bandkleur-queensryche td.num {
    color: #ff002c;
    font-weight: bold;
    text-align: right;
}

.bandkleur-queensryche td.album {
    color: #ff002c;
    text-align: right;
}

.bandkleur-iona td.num {
    color: #c40000;
    font-weight: bold;
    text-align: right;
}

.bandkleur-iona td.album {
    color: #c40000;
    text-align: right;
}

.bandkleur-iona .lijsttabel td:nth-child(1) { width: 48px; }
.bandkleur-iona .lijsttabel td:nth-child(2) { width: 15px; }
.bandkleur-iona .lijsttabel td:nth-child(3) { width: 363px; }
.bandkleur-iona .lijsttabel td:nth-child(4) { width: 297px; }

/* ---------------------------------------------------------
   Bestaande Banddraaja-pagina's
   --------------------------------------------------------- */

.lijstkop {
    width: var(--lijstbreedte);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4px;
}

.lijstlogo {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

.lijstmeta {
    width: var(--lijstbreedte);
    margin: 0 auto 10px auto;
    text-align: right;
    font-size: 12px;
    font-style: italic;
    line-height: 1.2;
}

.lijsttabel {
    width: var(--lijstbreedte);
    border-spacing: 0;
    margin-left: auto;
    margin-right: auto;
}

.lijsttabel td {
    padding: 0;
}

.uitlijning-rechts {
    text-align: right;
}

.breedte-477 { --lijstbreedte: 620px; }
.breedte-550 { --lijstbreedte: 620px; }
.breedte-5815 { --lijstbreedte: 620px; }
.breedte-622 { --lijstbreedte: 630px; }
.breedte-623 { --lijstbreedte: 630px; }
.breedte-645 { --lijstbreedte: 645px; }
.breedte-663 { --lijstbreedte: 663px; }
.breedte-676 { --lijstbreedte: 676px; }
.breedte-677 { --lijstbreedte: 677px; }
.breedte-709 { --lijstbreedte: 709px; }
.breedte-723 { --lijstbreedte: 723px; }
.breedte-725 { --lijstbreedte: 725px; }
.breedte-729 { --lijstbreedte: 729px; }

.lijstpagina {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------
   Nieuwe startpagina
   --------------------------------------------------------- */

.start-body {
    margin: 0;
    min-height: 100vh;
    overflow: auto;
    background: #6F86A3;
}

.startpagina {
    --vrienden-h: 680px;
    --menu-h: calc(var(--vrienden-h) * 0.80);

    box-sizing: border-box;
    min-height: 100vh;
    min-width: max-content;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas:
        "titel titel titel"
        "album afbeelding band"
        "extra extra extra";
    justify-content: center;
    align-content: center;
    align-items: center;
    column-gap: clamp(2px, 0.6vw, 10px);
    row-gap: clamp(10px, 1.5vh, 18px);
    padding: clamp(16px, 2.5vw, 40px);
}

.start-titel {
    grid-area: titel;
    display: block;
    width: calc(var(--vrienden-h) * 1.72);
    height: auto;
    justify-self: center;
}

.start-vrienden {
    grid-area: afbeelding;
    display: block;
    height: var(--vrienden-h);
    width: auto;
    max-width: 100%;
}

.start-keuze {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.start-keuze img {
    display: block;
    height: auto;
    max-width: none;
    filter: drop-shadow(3px 4px 2px rgba(0, 0, 0, 0.28));
    transition: transform 0.15s ease;
}

.start-titel {
    filter: drop-shadow(3px 4px 2px rgba(0, 0, 0, 0.28));
}

.start-albums { grid-area: album; }
.start-bandjes { grid-area: band; }

.start-extra {
    grid-area: extra;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 4vw, 64px);
}

.start-neue,
.start-cataloojum {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.start-neue img,
.start-cataloojum img {
    display: block;
    width: auto;
    filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.22));
    transition: transform 0.15s ease;
}

.start-neue img {
    height: 37px;
}

.start-cataloojum img {
    height: 60px;
}

.start-neue:hover img,
.start-neue:focus-visible img,
.start-cataloojum:hover img,
.start-cataloojum:focus-visible img {
    transform: scale(1.025);
}

.start-neue:focus-visible,
.start-cataloojum:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 7px;
}

.start-keuze:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 8px;
    border-radius: 2px;
}

@media (min-width: 761px) {
    .start-keuze img {
        width: var(--menu-h);
    }

    .start-albums {
        margin-right: -34px;
    }

    .start-bandjes {
        margin-left: -34px;
    }

    .start-albums img {
        transform: rotate(-90deg);
    }

    .start-bandjes img {
        transform: rotate(90deg);
    }

    .start-albums:hover img,
    .start-albums:focus-visible img {
        transform: rotate(-90deg) scale(1.025);
    }

    .start-bandjes:hover img,
    .start-bandjes:focus-visible img {
        transform: rotate(90deg) scale(1.025);
    }
}

@media (hover: none) and (pointer: coarse) {
    .startpagina {
        --vrienden-w: min(90vw, 560px);
        --tekst-w: var(--vrienden-w);

        min-width: 0;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "titel titel"
            "afbeelding afbeelding"
            "album band"
            "extra extra";
        gap: 18px 14px;
        padding: 18px 12px 28px;
    }

    .start-titel {
        width: var(--tekst-w);
        height: auto;
        justify-self: center;
    }

    .start-vrienden {
        width: var(--vrienden-w);
        height: auto;
        justify-self: center;
    }

    .start-keuze img {
        width: min(42vw, calc(var(--tekst-w) / 2 - 10px));
        height: auto;
    }

    .start-extra {
        gap: min(7vw, 34px);
    }

    .start-neue img {
        height: min(7vw, 31px);
        width: auto;
    }

    .start-cataloojum img {
        height: min(11.3vw, 49px);
        width: auto;
    }

    .start-keuze:hover img,
    .start-keuze:focus-visible img {
        transform: scale(1.025);
    }
}

/* ---------------------------------------------------------
   Overzicht Albumlijsten
   --------------------------------------------------------- */

.albums-body {
    margin: 0;
    min-height: 100vh;
    background: #f7f3eb;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.albums-overzicht {
    box-sizing: border-box;
    width: min(94vw, 960px);
    margin: 0 auto;
    padding: 44px 18px 60px;
    text-align: center;
}

.albums-kop {
    margin: 0 auto 30px;
    color: var(--vvdl-rood);
}

.albums-kop .delijst-beeldmerk {
    width: min(78vw, 520px);
}

.delijst-beeldmerk {
    display: block;
    height: auto;
    margin: 0 auto;
    fill: currentColor;
}

.jaren {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 28px;
    align-items: center;
}

.jaarlink {
    color: var(--vvdl-blauw);
    font-size: var(--jaar-grootte);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
}


.jaarlink:hover,
.jaarlink:focus-visible {
    color: var(--vvdl-groen);
}

.jaarlink:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

/* ---------------------------------------------------------
   Jaarpagina's van De Lijst
   --------------------------------------------------------- */

.jaarlijstpagina {
    --accent: #b5282f;
    --tabeltekst: #27313a;
    --achtergrond: #f2e5d5;

    margin: 0;
    min-height: 100vh;
    background: var(--achtergrond);
    color: var(--tabeltekst);
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.jaarlijst {
    box-sizing: border-box;
    width: min(94vw, 860px);
    margin: 0 auto;
    padding: 44px 18px 54px;
}

.jaarlijstkop {
    text-align: center;
    margin: 0 auto 18px;
}

.jaarlijstkopregel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    transform: translateX(-118px);
}

.jaarlijstkop .delijst-beeldmerk {
    width: min(74vw, 430px);
    color: var(--accent);
}

.jaarlijstjaar {
    margin-left: -54px;
    color: var(--accent);
    font-size: var(--jaar-grootte);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: 0em;
    white-space: nowrap;
    -webkit-text-stroke: 0.35px currentColor;
}

.jaarlijsttabel {
    width: calc(100% - 108px);
    margin-right: auto;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--tabeltekst);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: normal;
}

.jaarlijsttabel col.nr    { width: 54px; }
.jaarlijsttabel col.vln   { width: 48px; }
.jaarlijsttabel col.band  { width: 220px; }
.jaarlijsttabel col.ln    { width: 58px; }

.jaarlijsttabel td {
    box-sizing: border-box;
    padding: 0 6px;
    vertical-align: top;
}

.jaarlijsttabel td.nr {
    color: var(--accent);
    font-weight: 700;
    text-align: right;
}

.jaarlijsttabel td.vln,
.jaarlijsttabel td.ln {
    text-align: right;
}

@media (max-width: 680px) {
    .jaarlijstkopregel {
        transform: translateX(-34px);
    }

    :root {
        --jaar-grootte: clamp(46px, 13vw, 60px);
    }

    .albums-overzicht {
        padding: 28px 12px 44px;
    }

    .albums-kop {
        margin-bottom: 22px;
    }

    .albums-kop .delijst-beeldmerk {
        width: min(86vw, 430px);
    }

    .jaren {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 16px;
    }

    .jaarlijst {
        width: 100%;
        padding: 28px 10px 40px;
    }

    .jaarlijstkop {
        margin-bottom: 20px;
    }

    .jaarlijstjaar {
        margin-left: -28px;
        -webkit-text-stroke: 0.45px currentColor;
    }

    .jaarlijsttabel {
        width: 100%;
    }

    .jaarlijstkop .delijst-beeldmerk {
        width: min(62vw, 300px);
    }

    .jaarlijsttabel col.nr   { width: 38px; }
    .jaarlijsttabel col.vln  { width: 36px; }
    .jaarlijsttabel col.band { width: 128px; }
    .jaarlijsttabel col.ln   { width: 42px; }

    .jaarlijsttabel td {
        padding: 5px 4px;
    }
}

@media (max-width: 410px) {
    .jaren {
        grid-template-columns: 1fr;
    }
}


/* ---------------------------------------------------------
   Snelle jaarnavigatie onderaan de albumlijsten
   --------------------------------------------------------- */

.jaarnavigatie {
    margin: 34px auto 0;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.7;
}

.jaarnavigatie-regel {
    white-space: nowrap;
}

.jaarnavigatie a,
.jaarnavigatie .huidig-jaar {
    display: inline-block;
    text-decoration: none;
}

.jaarnavigatie a {
    color: var(--tabeltekst);
}

.jaarnavigatie a:hover,
.jaarnavigatie a:focus-visible {
    color: var(--accent);
}

.jaarnavigatie .huidig-jaar {
    color: var(--accent);
    font-weight: 800;
}

.jaarnavigatie .scheiding {
    display: inline-block;
    margin: 0 0.38em;
    color: var(--tabeltekst);
    opacity: 0.7;
}

@media (max-width: 680px) {
    .jaarnavigatie {
        width: min(92vw, 520px);
        margin-top: 28px;
        font-size: 13px;
        line-height: 1.9;
    }

    .jaarnavigatie-regel {
        display: inline;
        white-space: normal;
    }

    .jaarnavigatie-regel + .jaarnavigatie-regel::before {
        content: " · ";
        color: var(--tabeltekst);
        opacity: 0.7;
    }
}


/* ---------------------------------------------------------
   Bandjes-overzicht
   --------------------------------------------------------- */

.bandjes-body {
    background-color: #6F86A3;
}

.bandjes-body .logo {
    display: block;
    margin: 30px auto;
}

.bandjes-body .genaajum { width: 700px; height: auto; }
.bandjes-body .mariljum { width: 800px; height: auto; }
.bandjes-body .draaiq { width: 650px; height: auto; }
.bandjes-body .camelium { width: 900px; height: auto; }
.bandjes-body .pink-flooijum { width: 700px; height: auto; }
.bandjes-body .yes-dr-day { width: 800px; height: auto; }
.bandjes-body .pendraajum1 { width: 1000px; height: auto; }
.bandjes-body .supertrampium { width: 800px; height: auto; }
.bandjes-body .baardium { width: 700px; height: auto; }
.bandjes-body .bostonium { width: 1000px; height: auto; }
.bandjes-body .parsonium { width: 900px; height: auto; }
.bandjes-body .pallaajum { width: 1000px; height: auto; }
.bandjes-body .rush-em { width: 600px; height: auto; }
.bandjes-body .theatralium { width: 1000px; height: auto; }
.bandjes-body .neal-em { width: 550px; height: auto; }
.bandjes-body .genaajum2 { width: 950px; height: auto; }
.bandjes-body .draaiq2 { width: 700px; height: auto; }
.bandjes-body .pendraajum2 { width: 900px; height: auto; }
.bandjes-body .queensraayum { width: 900px; height: auto; }
.bandjes-body .ionaajum { width: 800px; height: auto; }

.bandjes-body .zonder-draajum {
    width: min(92vw, 920px);
    margin: 54px auto 36px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.82);
}

.bandjes-body .zonder-draajum-titel {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
}

.bandjes-body .zonder-draajum-menu {
    font-size: 14px;
    line-height: 1.9;
}

.bandjes-body .zonder-draajum-menu a {
    color: #fff;
    text-decoration: none;
}

.bandjes-body .zonder-draajum-menu a:hover,
.bandjes-body .zonder-draajum-menu a:focus-visible {
    text-decoration: underline;
}

.bandjes-body .zonder-draajum-menu .scheiding {
    margin: 0 0.42em;
    opacity: 0.52;
}

@media (max-width: 680px) {
    .bandjes-body .zonder-draajum {
        margin-top: 42px;
    }

    .bandjes-body .zonder-draajum-menu {
        font-size: 13px;
        line-height: 2.0;
    }
}


/* ---------------------------------------------------------
   Neue Regel
   --------------------------------------------------------- */

.neue-regel-pagina {
    background-color: rgb(235, 225, 185);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #000;
}

.neue-regel-pagina .pagina {
    width: calc(100% - 40px);
    max-width: 900px;
    margin: 0 auto;
}

.neue-regel-pagina .neue-regel-logo {
    display: block;
    width: 100%;
    height: auto;
    margin: 20px 0 30px;
}

.neue-regel-pagina .content {
    width: 100%;
    padding-bottom: 20px;
}

.neue-regel-pagina ol {
    line-height: 1.7;
}

.neue-regel-pagina .rule-title {
    margin-top: 30px;
    margin-bottom: 10px;
    font-weight: bold;
}

.neue-regel-pagina .formule {
    text-align: center;
    margin: 24px 0 30px;
}

.neue-regel-pagina .formule img {
    display: block;
    width: min(100%, 520px);
    height: auto;
    margin: 0 auto;
}

/* ---------------------------------------------------------
   Subtiele hoofdnavigatie
   --------------------------------------------------------- */

.globalnav {
    box-sizing: border-box;
    margin: 12px auto 10px;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
}

.globalnav a {
    color: inherit;
    text-decoration: none;
    opacity: 0.72;
}

.globalnav a:hover,
.globalnav a:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.globalnav-huidig {
    font-weight: 700;
    opacity: 1;
}

.lijstpagina > .globalnav {
    width: var(--lijstbreedte);
}

.albums-body > .globalnav {
    width: min(94vw, 960px);
}

.jaarlijstpagina > .globalnav {
    width: min(94vw, 860px);
    color: var(--tabeltekst);
}

.jaarlijstpagina > .globalnav .globalnav-huidig {
    color: var(--accent);
}

.neue-regel-pagina > .globalnav {
    width: min(94vw, 900px);
}

@media (max-width: 680px) {
    .globalnav,
    .lijstpagina > .globalnav,
    .albums-body > .globalnav,
    .jaarlijstpagina > .globalnav,
    .neue-regel-pagina > .globalnav {
        width: auto;
        margin: 10px 12px 8px;
        text-align: center;
        font-size: 14px;
        white-space: normal;
    }
}


/* Bandjes-overzicht: lichte navigatie op de blauwgrijze achtergrond */
.bandjes-body > .globalnav {
    color: rgba(255, 255, 255, 0.80);
}

.bandjes-body > .globalnav .globalnav-huidig {
    color: #fff;
}

.bandjes-body > .globalnav a:hover,
.bandjes-body > .globalnav a:focus-visible {
    color: #fff;
}


/* Plaats en datum bij de albumlijsten, in dezelfde stijl als de bandlijsten */
.jaarlijst .jaarlijstmeta {
    width: calc(100% - 108px);
    margin: -8px auto 10px 0;
    color: var(--tabeltekst);
}

@media (max-width: 680px) {
    .jaarlijst .jaarlijstmeta {
        width: 100%;
        margin-top: -8px;
        padding: 0 4px;
        box-sizing: border-box;
    }
}


/* Klikbare bandnamen in de albumlijsten */
.jaarlijsttabel td.band a {
    color: inherit;
    text-decoration: none;
}

.jaarlijsttabel td.band a:hover,
.jaarlijsttabel td.band a:focus-visible {
    color: var(--accent);
    text-decoration: underline;
}

/* Bandpagina's voor bands zonder eigen Banddraajum */
.bandprofielpagina {
    margin: 0;
    min-height: 100vh;
    background: var(--band-achtergrond, #6f86a3);
    color: var(--band-tekst, #fff);
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.bandprofielpagina > .globalnav {
    width: min(94vw, 860px);
    color: var(--band-tekst, #fff);
}

.bandprofielpagina > .globalnav .globalnav-huidig,
.bandprofielpagina > .globalnav a:hover,
.bandprofielpagina > .globalnav a:focus-visible {
    color: var(--band-tekst, #fff);
}

.bandprofiel {
    box-sizing: border-box;
    width: min(94vw, 860px);
    margin: 0 auto;
    padding: 72px 18px 54px;
    text-align: center;
}

.bandprofiel h1 {
    margin: 0 0 18px;
    font-size: clamp(34px, 6vw, 64px);
    line-height: 1.05;
}

.bandprofiellogo {
    display: block;
    width: min(100%, 720px);
    height: auto;
    margin: 0 auto 18px;
}

.bandprofiel p {
    margin: 0;
    font-size: 16px;
    font-style: italic;
}


/* =========================================================
   Albumhoezen
   Klik op positie 1–25 om de albumhoes te tonen.
   ========================================================= */

.jaarlijsttabel td.nr .albumhoes-rangknop {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: zoom-in;
}

.jaarlijsttabel td.nr .albumhoes-rangknop:hover,
.jaarlijsttabel td.nr .albumhoes-rangknop:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

html.albumhoes-open,
html.albumhoes-open body {
    overflow: hidden;
}

.albumhoes-modal[hidden] {
    display: none !important;
}

.albumhoes-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 22px;
    box-sizing: border-box;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.albumhoes-achtergrond {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(1.5px);
}

.albumhoes-venster {
    position: relative;
    z-index: 1;
    width: min(86vw, 560px);
    max-height: calc(100vh - 44px);
    box-sizing: border-box;
    padding: 18px 18px 14px;
    border-radius: 8px;
    background: rgba(25, 25, 25, 0.96);
    color: #f2f2f2;
    box-shadow: 0 14px 46px rgba(0, 0, 0, 0.38);
}

.albumhoes-sluit {
    position: absolute;
    top: 5px;
    right: 8px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 0;
    padding: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font: 27px/34px Arial, sans-serif;
    cursor: pointer;
}

.albumhoes-sluit:hover,
.albumhoes-sluit:focus-visible {
    color: #fff;
}

.albumhoes-afbeeldingvak {
    display: grid;
    place-items: center;
    min-height: min(64vw, 460px);
}

.albumhoes-afbeelding {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: min(68vh, 520px);
    object-fit: contain;
    margin: 0 auto;
}

.albumhoes-laden {
    box-sizing: border-box;
    padding: 40px 28px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

.albumhoes-tekst {
    margin-top: 10px;
    text-align: center;
}

.albumhoes-titel {
    font-size: 14px;
    line-height: 1.35;
}

.albumhoes-bronregel {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.47);
    font-size: 11px;
    line-height: 1.4;
}

.albumhoes-bronregel a {
    color: inherit;
    text-decoration: none;
}

.albumhoes-bronregel a:hover,
.albumhoes-bronregel a:focus-visible {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: underline;
}

.albumhoes-bronregel span {
    margin: 0 0.5em;
}

@media (max-width: 680px) {
    .albumhoes-modal {
        padding: 12px;
    }

    .albumhoes-venster {
        width: min(94vw, 560px);
        max-height: calc(100vh - 24px);
        padding: 15px 15px 12px;
    }

    .albumhoes-afbeeldingvak {
        min-height: min(78vw, 420px);
    }

    .albumhoes-afbeelding {
        max-height: 68vh;
    }
}




/* Eenvoudige albumlijst op bandpagina's zonder Banddraajum */
.bandalbumlijst {
    width: min(100%, 640px);
    margin: 28px auto 0;
    padding: 0;
    list-style: none;
    text-align: left;
    font-size: 16px;
    line-height: 1.75;
    font-style: normal;
}

.bandalbumlijst li {
    margin: 0;
    padding: 0;
}

.bandalbumlijst a {
    color: inherit;
    text-decoration: none;
}

.bandalbumlijst a:hover,
.bandalbumlijst a:focus-visible {
    text-decoration: underline;
}

.bandalbumlijst .albumjaar {
    opacity: 0.72;
}

.bandalbumlijst a.musicmeter-jaar {
    color: inherit;
    opacity: 1;
    text-decoration: none;
}

.bandalbumlijst a.musicmeter-jaar:hover,
.bandalbumlijst a.musicmeter-jaar:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* =========================================================
   Dynamische albumgrafieken
   ========================================================= */

/* Het aantal jaren in De Lijst (laatste kolom) opent de grafiek. */
.jaarlijsttabel td.ln .albumgrafiek-link {
    display: inline-block;
    min-width: 2ch;
    color: inherit;
    text-align: right;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.jaarlijsttabel td.ln .albumgrafiek-link:hover,
.jaarlijsttabel td.ln .albumgrafiek-link:focus-visible {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.albumgrafiekpagina {
    margin: 0;
    min-height: 100vh;
    background: var(--band-achtergrond, #f7f3eb);
    color: var(--band-tekst, #27313a);
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.albumgrafiekpagina > .globalnav {
    width: min(94vw, 960px);
}

.albumgrafiek {
    box-sizing: border-box;
    width: min(94vw, 960px);
    margin: 0 auto;
    padding: 34px 18px 58px;
}

.albumgrafiekkop {
    margin: 0 auto 22px;
    text-align: center;
}

.albumgrafiekband {
    margin-bottom: 4px;
    color: var(--band-tussen, var(--vvdl-blauw));
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 700;
}

.albumgrafiekkop h1 {
    margin: 0;
    color: var(--band-tekst, var(--vvdl-rood));
    font-size: clamp(28px, 5vw, 52px);
    line-height: 1.08;
}

.albumgrafiekjaar {
    margin-top: 8px;
    color: var(--band-tussen, #5f6468);
    font-size: 14px;
    font-style: italic;
}

.albumgrafiekvak {
    margin: 0 auto;
}

.albumgrafieklegenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
}

.albumgrafieklegenda-item {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    transition: opacity 0.15s ease;
}

.albumgrafieklegenda-item.is-uit {
    opacity: 0.32;
}

.albumgrafieklegenda-knop {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
}

.albumgrafieklegenda-knop:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

.albumgrafieklegenda-kleurknop {
    display: inline-flex;
    width: 34px;
    height: 24px;
    align-items: center;
    justify-content: center;
}

.albumgrafieklegenda-kleur {
    display: block;
    width: 28px;
    height: 4px;
    border-radius: 999px;
}

.albumgrafieklegenda-letterknop {
    padding: 3px 2px;
}

.albumgrafieklegenda-letterknop:hover,
.albumgrafieklegenda-letterknop:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.albumgrafieklegenda-kleurknop:hover .albumgrafieklegenda-kleur,
.albumgrafieklegenda-kleurknop:focus-visible .albumgrafieklegenda-kleur {
    transform: scaleY(1.5);
}

.albumgrafieklaagknop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 2px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.albumgrafieklaagknop.is-uit {
    opacity: 0.32;
}

.albumgrafieklaagknop:hover,
.albumgrafieklaagknop:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.albumgrafieklaagknop:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

.albumgrafieklaagknop-lijn {
    display: block;
    width: 24px;
    height: 0;
    border-top: 1.5px solid #5f6468;
}

.albumgrafieklaagknop-lijn-gemiddelde {
    border-top-style: dashed;
}

.albumgrafieklaagknop-lijn-raster {
    opacity: 0.55;
}

.albumgrafiekhouder {
    width: 100%;
}

.albumgrafieksvg {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(39, 49, 58, 0.14);
    border-radius: 8px;
}

.albumgrafiek-raster,
.albumgrafiek-as {
    vector-effect: non-scaling-stroke;
}

.albumgrafiek-raster {
    stroke: rgba(39, 49, 58, 0.14);
    stroke-width: 1;
}

.albumgrafiek-as {
    stroke: rgba(39, 49, 58, 0.38);
    stroke-width: 1.2;
}

.albumgrafiek-rechteras {
    stroke: #5f6468;
    stroke-width: 1.8;
    vector-effect: non-scaling-stroke;
}

.albumgrafiek-ylabel,
.albumgrafiek-xlabel {
    fill: #5f6468;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

.albumgrafiek-ylabel-rechts {
    fill: #5f6468;
}

.albumgrafiek-jaarlink {
    cursor: pointer;
    text-decoration: none;
    outline: none;
}

.albumgrafiek-jaarlink:hover .albumgrafiek-xlabel,
.albumgrafiek-jaarlink:focus .albumgrafiek-xlabel {
    fill: var(--vvdl-blauw);
    text-decoration: underline;
}

.albumgrafiek-gemiddelde,
.albumgrafiek-lijn,
.albumgrafiek-punt {
    transition: opacity 0.15s ease;
}

.albumgrafiek-gemiddelde,
.albumgrafiek-lijn {
    vector-effect: non-scaling-stroke;
}

.albumgrafiek-gemiddelde {
    opacity: 0.58;
}

.albumgrafiek-laag-uit {
    opacity: 0 !important;
    pointer-events: none;
}

.albumgrafiek-serie-uit {
    opacity: 0 !important;
    pointer-events: none;
}

.albumgrafiek-punt {
    cursor: default;
    outline: none;
}

.albumgrafiek-punt:focus {
    stroke: #111;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.albumfeitenvak {
    margin: 18px auto 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.80);
    border: 1px solid rgba(39, 49, 58, 0.14);
    border-radius: 8px;
}

.albumfeiten {
    width: 100%;
    border-collapse: collapse;
    color: #20262b;
    font-size: 13px;
    line-height: 1.45;
}

.albumfeiten td {
    padding: 9px 14px;
    border-bottom: 1px solid rgba(39, 49, 58, 0.12);
    vertical-align: top;
}

.albumfeiten tr:last-child td {
    border-bottom: 0;
}

.albumfeiten td:first-child {
    width: 34%;
    color: #343a40;
    font-weight: 700;
}

.albumfeiten td:last-child {
    font-variant-numeric: tabular-nums;
}

.albumgrafiekterug {
    margin: 28px 0 0;
    text-align: center;
    font-size: 14px;
}

.albumgrafiekterug a {
    color: var(--band-tekst, var(--vvdl-blauw));
    text-decoration: none;
    opacity: 0.78;
}

.albumgrafiekterug a:hover,
.albumgrafiekterug a:focus-visible {
    color: var(--band-tekst, var(--vvdl-groen));
    opacity: 1;
    text-decoration: underline;
}

.albumgrafiekfout {
    margin: 30px auto 0;
    text-align: center;
}

@media (max-width: 680px) {
    .albumgrafiek {
        width: 100%;
        padding: 24px 10px 42px;
    }

    .albumgrafiekkop {
        margin-bottom: 18px;
    }

    .albumgrafieklegenda {
        gap: 7px 15px;
        font-size: 13px;
    }

    .albumgrafieklegenda-kleur {
        width: 22px;
    }

    .albumgrafiek-xlabel {
        font-size: 10px;
    }

    .albumfeiten {
        font-size: 12px;
    }

    .albumfeiten td {
        padding: 8px 9px;
    }

    .albumfeiten td:first-child {
        width: 40%;
    }
}


/* =========================================================
   Lokale tracklijst via klik op de albumtitel
   ========================================================= */

.albumtracks-knop {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.albumtracks-knop:hover,
.albumtracks-knop:focus-visible,
.albumtracks-link:hover,
.albumtracks-link:focus-visible {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* Albumtitels houden op iedere pagina hun bestaande typografie en uitlijning. */
.lijsttabel .albumtracks-knop { text-align: inherit; }
.bandalbumlijst .albumtracks-link { cursor: pointer; }
.albumgrafiekkop h1 .albumtracks-knop,
.albumgrafiekkop h1.albumtracks-knop {
    font: inherit;
    font-weight: inherit;
    color: inherit;
}

html.albumtracks-open,
html.albumtracks-open body {
    overflow: hidden;
}

.albumtracks-modal[hidden] {
    display: none;
}

.albumtracks-modal {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 24px;
}

.albumtracks-achtergrond {
    position: absolute;
    inset: 0;
    background: rgba(18, 24, 30, 0.62);
}

.albumtracks-venster {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(92vw, 620px);
    max-height: min(86vh, 760px);
    overflow: auto;
    padding: 28px 34px 30px;
    border-radius: 9px;
    background: #f7f3eb;
    color: #20262b;
    box-shadow: 0 12px 42px rgba(0, 0, 0, 0.28);
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.albumtracks-sluit {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5f6468;
    font: 28px/34px Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.albumtracks-sluit:hover,
.albumtracks-sluit:focus-visible {
    color: #111;
}

.albumtracks-band {
    margin: 0 42px 4px 0;
    color: #5f6468;
    font-size: 14px;
    font-weight: 700;
}

.albumtracks-titel {
    margin: 0 42px 18px 0;
    color: #20262b;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
}

.albumtracks-titellink {
    color: inherit;
    text-decoration: none;
}

.albumtracks-titellink:hover,
.albumtracks-titellink:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.albumtracks-lijst {
    margin: 0;
    padding-left: 2.3em;
    font-size: 15px;
    line-height: 1.45;
}

.albumtracks-lijst li {
    padding: 3px 0 3px 4px;
}


.albumtracks-discogs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: #6f7478;
    font-size: 12px;
    text-decoration: none;
}

.albumtracks-discogs img {
    width: 17px;
    height: 17px;
    opacity: 0.72;
}

.albumtracks-discogs:hover,
.albumtracks-discogs:focus-visible {
    color: #20262b;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.albumtracks-discogs:hover img,
.albumtracks-discogs:focus-visible img {
    opacity: 1;
}

@media (max-width: 520px) {
    .albumtracks-modal {
        padding: 12px;
    }

    .albumtracks-venster {
        width: 100%;
        padding: 24px 22px 26px;
    }

    .albumtracks-titel {
        font-size: 21px;
    }

    .albumtracks-lijst {
        font-size: 14px;
    }
}


/* Bandlijst: stemgegevens TOT en N */
.bandlijst-met-statistiek {
    width: calc(var(--lijstbreedte) + 72px);
}

.bandlijst-met-statistiek .bandstat {
    box-sizing: border-box;
    padding-left: 6px;
    text-align: right;
    white-space: nowrap;
    font-weight: 400;
}

.bandlijst-met-statistiek .bandstat strong {
    font-weight: 400;
}

.bandlijst-met-statistiek .bandstat-tot { width: 45px; }
.bandlijst-met-statistiek .bandstat-n   { width: 27px; }

.bandlijst-met-statistiek .bandstat-koprij td {
    padding-bottom: 3px;
}

.bandlijst-met-statistiek .bandstat-kop {
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
    opacity: 1;
}

/* Bandlijsten: rang 1–25 vet, 26–40 normaal; verder dezelfde typografie als de titels. */
.bandlijst-met-statistiek tr:nth-child(n+2):nth-child(-n+26) > td:first-child {
    font-weight: 700;
}

.bandlijst-met-statistiek tr:nth-child(n+27) > td:first-child {
    font-weight: 400;
}

.bandlijst-met-statistiek tr > td:first-child strong {
    font-weight: inherit;
}

/* Bandlijsten: compactere statistiekkolommen en meer ruimte voor titels */
.bandlijst-met-statistiek td:nth-child(1) {
    width: 38px !important;
}
.bandlijst-met-statistiek td:nth-child(2) {
    width: 8px !important;
}
.bandlijst-met-statistiek td:nth-child(3) {
    width: 52% !important;
    white-space: nowrap;
}
.bandlijst-met-statistiek td:nth-child(4) {
    width: auto !important;
    white-space: nowrap;
}
.bandlijst-met-statistiek .bandstat {
    padding-left: 4px;
}
.bandlijst-met-statistiek .bandstat-tot {
    width: 40px !important;
}
.bandlijst-met-statistiek .bandstat-n {
    width: 24px !important;
}


/* Puntenkaartje op de Banddraaja: alleen bij hover */
.bandpunten-trigger {
    font: inherit;
    color: inherit;
}

.bandpunten-hoverkaart[hidden] {
    display: none;
}

.bandpunten-hoverkaart {
    position: fixed;
    z-index: 1250;
    box-sizing: border-box;
    width: max-content;
    max-width: min(92vw, 560px);
    padding: 13px 16px 12px;
    border-radius: 7px;
    background: #f7f3eb;
    color: #20262b;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    pointer-events: none;
}

.bandpunten-scores {
    white-space: nowrap;
}

/* =========================================================
   Cataloojum — alle beschikbare lokale tracklijsten
   ========================================================= */

.cataloojum-body {
    margin: 0;
    min-height: 100vh;
    background: #f7f3eb;
    color: #27313a;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.cataloojum-body > .globalnav {
    color: #27313a;
}

.cataloojum {
    box-sizing: border-box;
    width: min(94vw, 1120px);
    margin: 0 auto;
    padding: 42px 18px 70px;
}

.cataloojum-kop {
    margin: 0 auto 30px;
    text-align: center;
}

.cataloojum-logo {
    display: block;
    width: min(78vw, 520px);
    height: auto;
    margin: 0 auto;
}

.cataloojum-teller {
    margin: 12px 0 0;
    color: #6a626c;
    font-size: 13px;
}

.cataloojum-groepen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 30px;
    align-items: start;
}

.cataloojum-groep {
    min-width: 0;
}

.cataloojum-groep h2 {
    margin: 0 0 7px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(128, 0, 128, 0.28);
    color: #800080;
    font-size: 16px;
    line-height: 1.2;
}

.cataloojum-bandlink {
    color: inherit;
    text-decoration: none;
}

.cataloojum-bandlink:hover,
.cataloojum-bandlink:focus-visible {
    text-decoration: underline;
}

.cataloojum-groep ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cataloojum-groep li {
    margin: 0;
    padding: 3px 0;
    font-size: 13px;
    line-height: 1.35;
}

.cataloojum-album {
    max-width: 100%;
    vertical-align: baseline;
}

.cataloojum-album:hover,
.cataloojum-album:focus-visible {
    color: #800080;
}

.cataloojum-jaar {
    color: #777078;
    white-space: nowrap;
}

a.cataloojum-jaar {
    text-decoration: none;
}

a.cataloojum-jaar:hover,
a.cataloojum-jaar:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 860px) {
    .cataloojum-groepen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .cataloojum {
        width: min(96vw, 1120px);
        padding: 30px 14px 50px;
    }

    .cataloojum-groepen {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cataloojum-groep li {
        font-size: 14px;
    }
}