:root {
   --cirkels:      160px;
   --thema-inspring: 44px;
   --thema-ruimte: 1.3em;
   --thema-koplucht: 16px;
   --kaderkop:       24px;
   --loep-tekening: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 754.75513 763.25037'%3E%3Cg transform='translate(754.75513,0) scale(-1,1)'%3E%3Cg transform='rotate(20,1094.1376,-184.17751)'%3E%3Cpath fill='black' fill-rule='nonzero' d='M 582.92969,652.71484 C 485.26172,607.24219 442.98828,490.38281 488.69141,392.21094 534.39844,294.04297 651.04297,251.16797 748.70703,296.64062 846.375,342.11328 888.64844,458.97266 842.94141,557.14453 797.23828,655.3125 680.59375,698.1875 582.92969,652.71484 m 334.78906,-60.75781 c 65,-139.61328 4.87891,-305.80859 -134.01563,-370.47656 -138.89843,-64.66797 -304.78515,-3.69531 -369.78515,135.91797 -56.31137,120.94785 -18.71578,261.83639 82.64334,339.39073 1.22547,0.93765 43.98982,28.25346 45.23388,29.17246 l -61.53451,16.58078 -104.80756,225.11384 c -11.78906,25.32031 -0.82421,55.62895 24.36719,67.35935 l 18.69141,8.7032 c 25.1914,11.7265 55.44922,0.6054 67.23437,-24.711 L 588.91765,797.41143 567.17151,736.05172 c 2.87961,0.56217 50.23538,13.62294 53.12025,14.0908 119.89349,19.44383 243.44466,-42.24096 297.42699,-158.18549'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 
   --blauw:        #315263;
   --blauw-donker: #274859;
   --blauw-licht:  #43687e;
   --lijn-blauw:   #4f7288;

   /* De rand om de blauwe knoppen. Iets lichter dan --lijn-blauw,
      zodat een knop die niet gekozen is toch duidelijk een knop is.
      Apart gehouden van --lijn-blauw, want dat is de kleur van de
      scheidingslijnen; die mogen juist ingetogen blijven. */
   --knop-rand:    #5f8398;
   --rood:         #bb2222;
   --rood-vak:     #b33434;
   --tekst:        #3a3631;
   --rand:         #e6c3c3;
   --ondergrond:   #fdfcfa;
   --balk:         112px;
 
   --band:         112px;
 
   --logo-hoogte:  128px;
   --logo-top:     7px;

   /* De hoogte van de menuregel in de blauwe balk. Dit is het enige
      getal dat je hiervoor hoeft aan te raken: het menu, de loep en
      de wereldbol hangen er alle drie aan. Hun onderlinge afstand
      ligt vast, dus ze kunnen niet meer uit elkaar lopen. */
   --menu-top:     40px;
   --menu-regel:   24px;

   /* De taalknop was een tekening en had een optische correctie
      nodig ten opzichte van de menutekst. Nu er een taalcode staat
      in dezelfde letter als het menu, is die correctie nul. Blijft
      staan om mee bij te sturen als het toch een haartje scheelt. */
   --bol-correctie: 0px;
 
   --schuif:       70px;
 
   --tracking:     -0.012em;
 
   --marge-rechts: max(20px, calc(50% - 466px - 70px));
   --kolom:        max(24px, calc(50% - 356px + 70px));
 
   --taal-hoogte:  6px;
   --streep:       0.01em;
 
   --kaart-regel:  27px;
 
   --kolom-zet:    -1px;
 
   --streep-af:    2px;
   --balk-duim:    #c3beb6;
   --balk-duim-op: #a7a099;
   --bol-maat:     16px;

   /* Het pijltje rechts van de taalcode. Klein en dun: het is een
      aanwijzing dat er iets uitklapt, geen knop op zichzelf. */
   --pijl-tekening: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 L6 8 L9.5 4.5'/%3E%3C/svg%3E");
   --pijl-maat:    10px;

   /* De ruimte die het menu rechts vrijhoudt voor het taalblok.
      Toen daar een bolletje van 16px stond was 46 genoeg; een
      taalcode met pijltje is breder, en dan botst de loep ertegen.
      Wordt een taalcode ooit langer, dan is dit het getal. */
   --taal-ruimte:  78px;

   /* Hoe ver het logo van de linkerrand staat zodra de tekstkolom
      niet meer opzij geschoven is. Dit is puur op het oog: het logo
      heeft zelf al wat witruimte links, dus gelijk uitlijnen met de
      tekst eronder oogt juist te ver naar links. */
   --logo-links:   44px;

   /* De maat van de hamburger. Op een tablet mag hij bescheiden
      zijn: daar wijst een muis of een rustige tik. Op een telefoon
      staat hij in het telefoonblok iets groter. */
   --hamburger:    21px;

   /* De hamburger en het kruisje waar hij in verandert. Als
      tekening, net als de loep en de wereldbol: dan schaalt hij
      mee met het scherm in plaats van te vertrouwen op strepen die
      op hele pixels moeten vallen. */
   --menu-tekening: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E");
   --kruis-tekening: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");

   /* Extra lucht boven en onder elke taal in de uitklaplijst. De
      1 en de 9 in de padding hieronder blijven staan: die zorgen
      dat de tekst optisch midden in zijn balkje staat, want de
      letter hangt wat hoog in de regel. Dit telt er aan beide
      kanten evenveel bij op, dus die verhouding blijft. */
   --taal-lucht:   4px;
 
   --kaderbeeld:   170px;
   --bol-tekening: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
 
   --kop-onder:    16px;

   /* De ruimte links in een rij van het zoekvak, waar het label
      staat. Stond eerst als los getal onderaan; nu op één plek,
      want het zoekveld hangt er ook aan. */
   --zoek-inspring: 108px;

   /* De breedte van het zoekveld. De toggle erin wordt hieraan
      rechts uitgelijnd, dus dit is het enige getal dat je hoeft
      te draaien om het veld breder of smaller te maken. */
   --zoekveld-breedte: 460px;

   /* De ruimte die 'Hele woorden' rechts in het zoekveld inneemt.
      Zoveel houdt het veld vanbinnen vrij, zodat een lange zoekterm
      niet onder de knop doorloopt. In een andere taal is het woord
      langer of korter; dan is dit het enige getal dat mee moet. */
   --hele-woorden: 160px;

   /* Een invoerveld centreert zijn eigen tekst, en dat valt net
      anders uit dan bij de tekst van de toggle ernaast. Dit is de
      correctie die ze op één lijn zet. Negatief is omhoog. Zie je
      het nog scheef, dan is dit het enige getal dat mee moet. */
   --woorden-zet:  -2px;

   /* De labels links van de rijen, een haartje omhoog ten opzichte
      van de knoppen ernaast. Negatief is omhoog. */
   --label-zet:    -1px;

   /* De hoogte waarop een zwevende foto naast de tekst begint. Een
      <a class='afbeelding'> tussen twee alinea's hoort in de html
      nog bij de alinea erboven, want een <a> sluit een <p> niet af.
      De foto zweeft dus mee vanaf het eind van die eerste alinea en
      staat daardoor te hoog. Dit duwt hem omlaag tot hij gelijk
      loopt met de bovenkant van de letters ernaast. */
   --beeld-zet:    28px;
 }
 
 /* Crimson Pro SC levert alleen kleinkapitalen, zoals Alegreya Sans
    SC naast Alegreya Sans staat. De broodtekst komt dus weer uit
    Crimson Pro zelf; deze familie wordt alleen aangeroepen waar
    kapitaaltjes moeten staan. */
 @font-face {
   font-family: 'Crimson Pro SC';
   src: url('fonts/CrimsonProSC-Regular.woff2') format('woff2');
   font-style: normal; font-weight: 400; font-display: swap;
 }
 @font-face {
   font-family: 'Crimson Pro SC';
   src: url('fonts/CrimsonProSC-Italic.woff2') format('woff2');
   font-style: italic; font-weight: 400; font-display: swap;
 }
 
 @font-face {
   font-family: 'Crimson Pro';
   src: url('fonts/CrimsonPro-Regular.woff2') format('woff2');
   font-style: normal; font-weight: 400; font-display: swap;
 }
 @font-face {
   font-family: 'Crimson Pro';
   src: url('fonts/CrimsonPro-Italic.woff2') format('woff2');
   font-style: italic; font-weight: 400; font-display: swap;
 }
 @font-face {
   font-family: 'Crimson Pro';
   src: url('fonts/CrimsonPro-Medium.woff2') format('woff2');
   font-style: normal; font-weight: 500; font-display: swap;
 }
 @font-face {
   font-family: 'Crimson Pro';
   src: url('fonts/CrimsonPro-SemiBold.woff2') format('woff2');
   font-style: normal; font-weight: 600; font-display: swap;
 }
 @font-face {
   font-family: 'Crimson Pro';
   src: url('fonts/CrimsonPro-Bold.woff2') format('woff2');
   font-style: normal; font-weight: 700; font-display: swap;
 }
 
 @font-face {
   font-family: 'Zilla Slab';
   src: url('fonts/ZillaSlab.woff2') format('woff2');
   font-style: normal; font-weight: 400; font-display: swap;
 }
 @font-face {
   font-family: 'Zilla Slab';
   src: url('fonts/ZillaSlab-Italic.woff2') format('woff2');
   font-style: italic; font-weight: 400; font-display: swap;
 }
 @font-face {
   font-family: 'Zilla Slab';
   src: url('fonts/ZillaSlab-Medium.woff2') format('woff2');
   font-style: normal; font-weight: 500; font-display: swap;
 }
 @font-face {
   font-family: 'Zilla Slab';
   src: url('fonts/ZillaSlab-MediumItalic.woff2') format('woff2');
   font-style: italic; font-weight: 500; font-display: swap;
 }
 @font-face {
   font-family: 'Zilla Slab';
   src: url('fonts/ZillaSlab-SemiBold.woff2') format('woff2');
   font-style: normal; font-weight: 600; font-display: swap;
 }
 @font-face {
   font-family: 'Zilla Slab';
   src: url('fonts/ZillaSlab-SemiBoldItalic.woff2') format('woff2');
   font-style: italic; font-weight: 600; font-display: swap;
 }
 @font-face {
   font-family: 'Zilla Slab';
   src: url('fonts/ZillaSlab-Bold.woff2') format('woff2');
   font-style: normal; font-weight: 700; font-display: swap;
 }
 
 html {
   scrollbar-gutter: stable;
   background: linear-gradient(to bottom,
               var(--blauw) var(--band), var(--ondergrond) var(--band));
   background-repeat: no-repeat;
 }
 
 ::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb {
   background: var(--balk-duim);
   background-clip: padding-box;
   border: 4px solid transparent;
   border-radius: 999px;
 }
 ::-webkit-scrollbar-thumb:hover {
   background: var(--balk-duim-op);
   background-clip: padding-box;
   border-width: 2px;
 }
 ::-webkit-scrollbar-corner { background: transparent; }
 
 body, table, td, p, li, span, div {
   letter-spacing: var(--tracking);
   word-spacing: 0;
 }
 body, table, td {
   font-family: 'Crimson Pro', Georgia, serif;
   font-size: 20px;
   line-height: 1.4;
   color: var(--tekst);
 
   font-feature-settings: 'onum' 1;
 }
 
 #menu a, .taalknop, .talen_link, .keuzekop, .keuzelabel, .keuzerij a, .keuzerij .knop { letter-spacing: 0; }
 
 .keuzeboom summary, .keuzeboom .blad { font-feature-settings: 'onum' 1; }
 
 body {
   background: transparent;
   margin: 0;
 }
 body:after  { content: none; }
 body:before { content: none; }
 
 .afbeeldingen {
   display: block;
   top: calc(var(--balk) + 6px);
   left: max(16px, calc(50% - 356px - 180px + 70px));
   right: auto;
   z-index: 1;
 }
 
 .afbeeldingen img { width: var(--cirkels); height: auto; display: block; }
 .decoratie    { display: none; }
 
 .navigatie { width: auto; float: none; }
 
 .inhoud {
   width: auto;
   max-width: 760px;
   margin: 0 auto;
   float: none;
   padding: calc(var(--balk) + 46px) 24px 0;
   position: relative;
   left: var(--schuif);
 }
 
 .inhoud > *:first-child { margin-top: 0; }
 
 .logo1, .logo2, .links, #menu, .vlaggen { z-index: 2; }
 
 .logo1 { top: var(--logo-top); left: max(20px, calc(50% - 356px - 140px + 70px)); display: block; }
 .logo1 a { display: block; position: relative; line-height: 0; }
 .logo1 img { height: var(--logo-hoogte); width: auto; display: block; }
 .logo1 a:after {
   content: '';
   position: absolute;
   left: 0; top: 0; right: 0; bottom: 0;
   background-image: url('gif/Logo_Tijs_-_Blauw.svg');
   background-size: 100% 100%;
   background-repeat: no-repeat;
 
   clip-path: inset(calc(var(--band) - var(--logo-top)) 0 0 0);
   pointer-events: none;
 }
 .logo2 { display: none; }
 .links { display: none; }

 /* De hamburger bestaat alleen op smalle schermen; javascript maakt
    hem aan, de mediaquery onderaan zet hem aan. */
 .hamburger { display: none; }
 
 #menu {
   position: absolute;
   top: var(--menu-top);
   left: calc(var(--kolom) + 70px);
   right: calc(var(--marge-rechts) + var(--taal-ruimte));
   width: auto;
   float: none;
   margin: 0;
   z-index: 3;
 }
 
 #menu ul.toplevel {
   display: flex;

   /* Stond op baseline. Dat ging mis bij het zoek-item: daar is het
      woord verborgen, dus er is geen tekstregel om op uit te lijnen
      en pakte de browser de onderkant van het icoon. Die hoogte
      hangt af van welk lettertype er op dat moment geladen is, en
      Zilla Slab komt van Google Fonts. Uit de cache stond het icoon
      dus ergens anders dan bij een verse pagina. Vandaar dat het
      menu telkens een paar pixels verschoven leek. */
   align-items: center;
   min-height: var(--menu-regel);
   gap: 26px;
   float: none;
   text-align: left;
   position: relative;
   white-space: nowrap;
 }
 #menu ul.toplevel > li { display: block; position: relative; }
 
 #menu a {
   display: block;
   font-family: 'Zilla Slab', Georgia, serif;
   font-size: 19px;
   text-transform: none;
   letter-spacing: 0;
   line-height: 1.4;
   color: #c3d3dc;
   padding: 0;
 }
 #menu li:hover > a { background: none; color: #fff; }
 #menu ul.toplevel > li > a { color: #c3d3dc; }
 #menu ul.toplevel > li:hover > a { color: #fff; }
 
 #menu ul.toplevel > li > a.huidig { color: #fff; }

 /* Op de homepage licht het hele menu op. Daar is geen enkel item
    'de huidige pagina', want de homepage staat zelf niet in het
    menu -- het logo is de weg terug. Alles wit betekent hier dus
    niet 'u bent overal', maar 'kies maar'. */
 #menu.thuis ul.toplevel > li > a { color: #fff; }
 
 #menu .zoek-item { margin-left: auto; }
 #menu .zoek-item a { display: flex; align-items: center; gap: 7px; }
 
 #menu .zoek-item > a:before {
   content: '';
   display: block;
   width: 16px;
   height: 16px;
   flex: none;
   background-color: #fff;
   -webkit-mask: var(--loep-tekening) no-repeat center / contain;
   mask: var(--loep-tekening) no-repeat center / contain;
 }
 #menu .zoek-item img,
 #menu .zoek-item .loepje { display: none; }

 /* Een loep van 16 bij 16 is een klein doel om te raken. Dit
    onzichtbare vlak eromheen maakt hem groter zonder dat er iets
    verschuift, net als bij de wereldbol. Zelfde maten ook. */
 #menu .zoek-item > a { position: relative; }
 #menu .zoek-item > a:after {
   content: '';
   position: absolute;
   top: -12px; right: -14px; bottom: -8px; left: -14px;
 }
 #menu .zoekwoord { display: none; }
 
 #menu ul.toplevel > li:after {
   content: '';
   position: absolute;
   top: 100%; left: -16px; right: -16px;
   height: 14px;
 }
 
 #menu ul.toplevel > li > ul {
   top: 100%;
   left: -16px;
   margin: 12px 0 0 0;
   padding: 13px 12px;
   background: #3a6076;
   border: 1px solid #5c8298;
   border-radius: 9px;
   text-align: left;
   min-width: 190px;
 }
 #menu ul.toplevel > li:hover > ul { display: block; left: -16px; }
 #menu ul ul li { display: block; }
 #menu ul ul a {
   font-size: 19px;
   line-height: 1.3;
   color: #fff;
   display: block;
   width: auto;
   padding: 3px 8px;
   border-radius: 5px;
 }
 #menu ul ul a:hover { background: #2c4d61; }
 
 .vlaggen {
   /* Zelfde bovenkant als het menu, en de knop erin wordt over de
      hoogte van de menuregel gecentreerd. Zo staat de bol altijd
      op dezelfde lijn als de loep ernaast. */
   top: calc(var(--menu-top) + var(--bol-correctie));
   height: var(--menu-regel);
   display: flex;
   align-items: center;
   right: var(--marge-rechts);
   left: auto;
   width: auto;
   line-height: 1.4;
   z-index: 5;
 }
 
 /* DE TAALKNOP

    Hier stond een wereldbol. Die zei 'internationaal' en niet 'kies
    je taal', en je moest hem aanklikken om erachter te komen. Nu
    staat er de code van de taal waarin je leest, in dezelfde letter
    en kleur als het menu ernaast, met een pijltje dat aangeeft dat
    er iets onder zit. De code komt uit het VB-programma; de knop is
    dus niet meer leeg. */
 .taalknop {
   display: flex;
   align-items: center;
   gap: 2px;
   margin-left: auto;
   width: auto;
   height: auto;

   /* Kleinkapitalen, dezelfde letter en dezelfde behandeling als de
      bezettingen in de lijsten: daar staat SSATB ook zo. Twee
      kapitalen op ware grootte zouden naast het menu schreeuwen. */
   font-family: 'Crimson Pro SC', 'Crimson Pro', Georgia, serif;
   font-size: 20px;
   font-feature-settings: 'onum' 1;
   line-height: 1.4;
   letter-spacing: 0.02em;

   /* Wit, en niet het zachte wit van de menu-items. Dit is geen
      menukeuze maar de taal waarin je op dit moment leest; die mag
      vaststaan in plaats van meedoen met de rij ernaast. */
   color: #fff;

   background: none;
   -webkit-mask: none;
   mask: none;
   cursor: pointer;
   position: relative;
   top: 0;
 }

 .taalknop:after {
   content: '';
   display: block;
   width: var(--pijl-maat);
   height: var(--pijl-maat);
   flex: none;

   /* Het pijltje hangt optisch iets hoog naast kapitalen, vandaar
      deze pixel omlaag. */
   position: relative;
   top: 1px;

   background-color: currentColor;
   -webkit-mask: var(--pijl-tekening) no-repeat center / contain;
   mask: var(--pijl-tekening) no-repeat center / contain;
 }

 .vlaggen:hover .taalknop { color: #fff; }
 
 .vlaggen:before {
   content: '';
   position: absolute;
   top: -12px; right: -14px; bottom: -8px; left: -14px;
 }
 
 .vlaggen:after {
   content: '';
   position: absolute;
   top: 100%; left: -20px; right: -20px;
   height: 14px;
 }
 
 .vlaggen table {
   display: none;
   position: absolute;
   top: 100%;
   right: -16px;
   width: auto;
   margin-top: 12px;
 
   padding: 11px 0;
   background: #3a6076;
   border: 1px solid #5c8298;
   border-radius: 9px;
 }
 .vlaggen:hover table { display: table; }
 
 .vlaggen br { display: none; }
 .vlag       { display: none; }
 .vlaggen td { text-align: left; white-space: nowrap; }
 .talen_link {
   font-family: 'Zilla Slab', Georgia, serif;
 
   font-size: 17px;
   line-height: 1.45;
   text-transform: none;
   letter-spacing: 0;
   color: #fff;
   display: block;
 
   padding: calc(1px + var(--taal-lucht)) 20px calc(9px + var(--taal-lucht));
   width: auto;
   white-space: nowrap;
 }
 .talen_link:hover { color: #fff; background: #2c4d61; }
 
 .talen_link.huidig { background: #2c4d61; }
 
 .kop, .kopje {
   font-family: 'Zilla Slab', Georgia, serif;
   font-size: 28px;
   font-weight: 500;
   text-transform: none;
   letter-spacing: 0;
   color: var(--tekst);
   display: block;
   margin: 34px 0 var(--kop-onder);
 }
 .kopje { font-size: 19px; }
 
 .kop + p, .kopje + p { margin-top: var(--kop-onder); }
 
 .kader + .kop { margin-top: 14px; }
 
 a, h1 { color: var(--rood); }
 
 a {
   border-bottom: 0;
   padding-bottom: 0;
 }
 
 #menu a,
 .talen_link,
 .taalknop,
 .vlaggen_link,
 .keuzeboom .blad,
 .keuzeboom summary,
 .keuzerij a,
 .links_link,
 .uitgeverij,
 .paginahuidig, .paginaandere,
 .paginaterug, .paginavooruit,
 .afbeelding,
 .kader > a { border-bottom: 0; padding-bottom: 0; }
 
 i, em { letter-spacing: 0; }
 
 /* Kleinkapitalen. Crimson Pro SC toont die zodra je hem kiest, dus
    hier hoeft geen feature meer aan te staan; alleen de mediëvale
    cijfers, want die zijn wel een keuze.

    De font-size op 1em is er omdat dit meestal in een <small> staat.
    De kapitaaltjes zijn zelf al de verkleining; zou de browser er
    ook nog eens 80% van maken, dan werd het twee keer klein. */
 small, .niveau {
   font-family: 'Crimson Pro SC', 'Crimson Pro', Georgia, serif;
   font-size: 1em;
   text-transform: none;
   letter-spacing: 0;
   line-height: inherit;
   font-feature-settings: 'onum' 1;
   font-variant-caps: normal;
 }
 
 .of, .slash { color: #b9b3ab; }
 
 /* HET OPLICHTEN VAN EEN TITEL

    Als je vanuit het zoeken of de homepage naar een arrangement
    springt, licht de titel even op.

    Het vlak wordt gemaakt met padding, net als vroeger, maar die
    padding wordt meteen weer teruggenomen met een even grote
    negatieve marge. Vijf pixels erbij aan de binnenkant, vijf
    pixels eraf aan de buitenkant: het vlak groeit, de regel niet.
    Er verschuift dus niets, ook niet op het moment dat de animatie
    afloopt en alles terugvalt naar nul.

    Let op: padding en marge staan in alle drie de stappen gelijk.
    Alleen de kleuren bewegen. Zodra een animatie afmetingen laat
    veranderen, moet de browser de regel opnieuw opmeten, en dan
    schuift de tekst ernaast mee.

    En het eind is niet 'transparent' maar hetzelfde rood met alpha
    nul. 'transparent' is in CSS doorzichtig zwart, dus daar zou de
    overgang via een grauwe tint lopen. */
 @keyframes myfirst {
   0%   { background: var(--rood-vak); color: #fff;
          padding: 1px 5px; margin: 0 -5px; }
   90%  { background: var(--rood-vak); color: #fff;
          padding: 1px 5px; margin: 0 -5px; }
   100% { background: rgba(179, 52, 52, 0); color: var(--rood);
          padding: 1px 5px; margin: 0 -5px; }
 }
 @-webkit-keyframes myfirst {
   0%   { background: var(--rood-vak); color: #fff;
          padding: 1px 5px; margin: 0 -5px; }
   90%  { background: var(--rood-vak); color: #fff;
          padding: 1px 5px; margin: 0 -5px; }
   100% { background: rgba(179, 52, 52, 0); color: var(--rood);
          padding: 1px 5px; margin: 0 -5px; }
 }
 
 .kop .sep:before,
 .hoofd .sep:before {
   content: '|';
   padding: 0 .34em;
   color: #b9b3ab;

   /* De .06em houdt de streep meeschalen met de titelgrootte; de
      pixel eraf is een optische correctie omdat het streepje in
      Zilla Slab net iets laag in zijn regel hangt. */
   position: relative;
   top: calc(.06em - 1px);
 }
 
 .hoofd, .hoofdmetinspring {
   background: none;
   color: var(--tekst);
   padding: 0;
 }
 .hoofd {
   font-family: 'Zilla Slab', Georgia, serif;
   font-size: 28px;
   font-weight: 500;
   line-height: 1.25;
   text-transform: none;
   letter-spacing: 0;
 }
 td[colspan="2"] .hoofd { padding-bottom: var(--thema-koplucht); }
 
 .paginakeuze { display: none; }
 .inhoud > .paginakeuze:last-of-type { display: block; }
 .paginahuidig, .paginaandere {
   font-size: 18px;
   padding-right: 3px;
 }
 .paginahuidig { color: var(--rood); }
 .paginaandere { color: #b9b3ab; }
 .paginaterug, .paginavooruit { color: #b9b3ab; font-size: 17px; }
 
 .overzicht_header { padding-bottom: 20px; text-indent: 0; padding-left: 0; }
 .overzicht_header i { font-style: normal; }
 .overzicht_header a {
   font-family: 'Zilla Slab', Georgia, serif;
   font-size: 16px;
   line-height: 1.25;
   display: inline-block;
   border: 1px solid var(--rand);
   border-radius: 999px;
   padding: 3px 14px 5px;
   color: var(--rood);
 }
 .overzicht_header a:hover { background: var(--rood-vak); border-color: var(--rood-vak); color: #fff; }
 
 .overzicht_header.grijs a {
   background: var(--rood-vak);
   border-color: var(--rood-vak);
   color: #fff;
   cursor: default;
 }
 .overzicht_header.grijs { background: none; }
 
 .inhoud > .overzichttabel:first-of-type td[height] {
   height: 0;
   padding: 0;
   font-size: 0;
   line-height: 0;
 }
 
 .overzichttabel + p,
 .overzichttabel + p + .paginakeuze + p,
 .overzichttabel + p + .paginakeuze + p + p {
   margin: 0;
   font-size: 0;
   line-height: 0;
 }
 
 .grijs { background: #f8f7f5; }
 
 td.lijn[colspan="5"] { border: 0; height: 0; }
 tr:has(.alfabet) + tr td.lijn { border: 0; height: 0; }
 
 .alfabet {
   font-family: 'Zilla Slab', Georgia, serif;
   font-size: 30px;
   font-weight: 500;
   line-height: 1.15;
   color: var(--rood);
   display: inline-block;
 
   text-indent: 0;
 }
 
 .overzichttabel, .overzichttabel td { font-size: 19px; }
 
 .overzichttabel td { line-height: 26px; }
 
 /* De themapagina is één lange lijst van titels achter elkaar, en
    dan telt de maat anders dan in een alinea broodtekst: dezelfde
    20px oogt hier fors. Een punt kleiner, en de regelafstand niet
    alleen evenredig mee omlaag maar nog een stukje verder, want in
    zo'n opsomming hoeven de regels minder ver uit elkaar te staan
    dan in een lopende tekst. */
 .thema_td {
   padding: 3px 0 5px var(--thema-inspring);
   text-indent: calc(var(--thema-inspring) * -1);
   font-size: 19px;
   line-height: 1.38;
 }
 .thema {
   font-family: 'Crimson Pro', Georgia, serif;
   font-weight: 500;
   color: var(--tekst);
   margin-right: var(--thema-ruimte);
 }
 .gecentreerde-punt {
   font-size: 0;
   line-height: 0;

   /* De ruimte links en rechts van het streepje. In em, dus hij
      schaalt mee met de tekst eromheen. Het streepje in de koppen
      gebruikt .34em; hier staan de titels dichter op elkaar, dus
      dit mag iets minder zijn. */
   margin: 0 .26em;
   color: #b9b3ab;
 }
 /* Een middenpunt in plaats van een streepje. In een lijst waar de
    titels dicht op elkaar staan is een punt rustiger dan een reeks
    verticale streepjes; die gaan op afstand een raster vormen. En
    de klassenaam zei het al.

    In Crimson Pro hangt de punt hoog in de regel: hij staat bijna
    op de hoogte van de stokletters in plaats van halverwege de
    kleine letters. Vandaar deze correctie. Zij is in pixels en
    niet in em, want het gaat om waar de punt in het lettertype
    zit, niet om de maat van de tekst eromheen. */
 .gecentreerde-punt:before {
   content: '\00B7';
   font-size: 19px;
   position: relative;
   top: 3px;
 }
 
 .kop:has(+ .aantal-arrangementen) { margin-bottom: -6px; }
 .kop + .aantal-arrangementen { margin-top: 0; }
 .aantal-arrangementen {
   margin-top: 2px;
   margin-bottom: 22px;
   font-size: 17px;
   font-style: italic;
   color: #6d6a66;
 }
 
 .kader {
   background: #fff;
   border: 1px solid var(--rand);
   border-radius: 10px;
   padding: 4px 24px 22px 30px;
 
   margin: 34px 0;
   display: flow-root;
 }
 .kader .kop, .kader .kopje { margin-top: 15px; }
 .kader .kop { font-size: var(--kaderkop); }
 .kader p { margin-bottom: 0; }
 
 .kader > a,
 .kader > img {
   float: right;
   display: block;
   line-height: 0;
   max-width: 40%;
   margin: 17px 0 -3px 22px;
 }
 .kader > a img { display: block; max-width: 100%; height: auto; }
 
 .kader .tekst { display: flow-root; }
 
 .kader .uitleg { border-collapse: collapse; width: 100%; }
 .kader .uitleg td { vertical-align: baseline; padding: 0 0 12px; }
 .kader .uitleg td:first-child { width: 106px; white-space: nowrap; }
 .kader .uitleg tr:last-child td { padding-bottom: 0; }
 
 .kader .noot {
   color: #6f6a62;
   margin-top: 9px;
 }
 
 .keuzeboom {
   background: var(--blauw);
   border-radius: 10px;
   overflow: hidden;

   /* font-size: 0 haalt de spatie weg die tussen twee inline-blokjes
      ontstaat doordat ze in de html op aparte regels staan. Die
      spatie is een echte letter met een echte breedte, en die
      breedte verschilt per omgeving. Zo is de enige ruimte tussen
      de knoppen de marge, en die kun je natellen. De knoppen zetten
      hun eigen font-size, dus die merken er niets van. */
   font-size: 0;

   /* 9 onder plus de 13 marge van de laatste knop is 22, gelijk aan
      de 22 boven en aan de padding van het zoekvak. */
   padding: 22px 24px 9px;
   margin: 0 0 34px;
 }
 
 /* De vorm van deze knoppen staat hierboven, bij DE BLAUWE KNOP.
    Hier alleen nog hoe ze in de boom staan: elke tak op een eigen
    regel, met 13px eronder. */
 .keuzeboom summary,
 .keuzeboom .blad { margin: 0 0 13px; }
 .keuzeboom summary::-webkit-details-marker { display: none; }
 .keuzeboom summary::marker { content: ''; }
 
 
 .keuzeboom details > div {
   font-size: 0;
   padding-left: 46px;
   overflow: hidden;
   transition: height .25s ease;
 }
 .keuzeboom .blad { margin-right: 12px; }
 
 .keuzeboom .zoekblad {
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }
 .keuzeboom .zoekblad:after {
   content: '';
   display: block;
   width: 15px;
   height: 15px;
   flex: none;
   position: relative;
   top: 2px;
   background-color: currentColor;
   -webkit-mask: var(--loep-tekening) no-repeat center / contain;
   mask: var(--loep-tekening) no-repeat center / contain;
 }
 .keuzeboom .zoekblad .loep { display: none; }
 
 .keuzeboom .scheiding {
   height: 1px;
   background: var(--lijn-blauw);
   margin: 8px 0 20px;
 }
 
 .keuzeboom.beweegt summary,
 .keuzeboom.beweegt .blad { cursor: default; }
 
 .keuzevak {
   background: var(--blauw);
   border-radius: 10px;
   padding: 22px 24px;
   margin: 0 0 34px;
 }
 .keuzekop {
   font-family: 'Zilla Slab', Georgia, serif;
   font-size: 19px;
   color: #fff;
   padding-bottom: 12px;
   margin-bottom: 14px;
   border-bottom: 1px solid var(--lijn-blauw);
 }
 .keuzerij {
   display: flex;
   align-items: center;
   gap: 14px;
   flex-wrap: wrap;
   margin-bottom: 13px;
 }
 .keuzerij:last-child { margin-bottom: 0; }
 .keuzelabel {
   font-family: 'Zilla Slab', Georgia, serif;

   /* Cursief zet de labels apart van de knoppen ernaast: het ene
      benoemt, het andere doet iets. Zilla Slab heeft een echte
      italic, dus dit is geen schuingetrokken romein. */
   font-style: italic;
   font-size: 17px;
   color: #fff;
   width: 128px;
   flex: none;
 }
 /* ------------------------------------------------------------
    DE BLAUWE KNOP

    Eén definitie voor beide plekken: de takken van de keuzeboom op
    de arrangementenpagina en de filters in het zoekvak. Ze zagen er
    lange tijd bijna hetzelfde uit, maar het waren twee losse
    blokken die langzaam uit elkaar liepen. Verander je hier iets,
    dan verandert het overal.
    ------------------------------------------------------------ */
 .keuzeboom summary,
 .keuzeboom .blad,
 .keuzerij a,
 .keuzerij .knop {
   font-family: 'Zilla Slab', Georgia, serif;
   font-size: 17px;
   line-height: 1.25;
   color: #fff;
   text-decoration: none;
   background: transparent;
   display: inline-block;
   border: 1px solid var(--knop-rand);
   border-radius: 999px;
   padding: 3px 16px 5px;
   white-space: nowrap;
   cursor: pointer;
   list-style: none;
   user-select: none;
 }

 /* Aangewezen, of de muis erboven. */
 .keuzeboom:not(.beweegt) summary:hover,
 .keuzeboom:not(.beweegt) .blad:hover,
 .keuzeboom summary.actief,
 .keuzeboom details[open] > summary,
 .keuzerij a:hover,
 .keuzerij .knop:hover,
 .keuzerij .knop.actief {
   background: var(--ondergrond);
   color: var(--blauw);
   border-color: var(--ondergrond);
 }

 /* Het zoekknopje in de keuzeboom heeft een loep achter het woord
    staan en gebruikt flex voor de ruimte ertussen. Die regel staat
    hierboven al, maar DE BLAUWE KNOP zet display op inline-block en
    komt later in het bestand, dus hij wordt hier hersteld. */
 .keuzeboom .zoekblad { display: inline-flex; }


 /* zoekvak: zie onderaan dit bestand */

 #zoekveld.zoekveld {
   font-family: 'Zilla Slab', Georgia, serif;
   font-size: 17px;
   line-height: 1.25;
   color: var(--tekst);
   background: var(--ondergrond);
   border: 1px solid var(--ondergrond);
   border-radius: 999px;

   box-sizing: border-box;
   height: 31px;

   /* De browser zet de tekst midden in het vak. Die 2px onder maken
      het vak vanbinnen lager, waardoor de tekst één pixel omhoog
      schuift. De pilvorm zelf blijft 31px hoog. */
   /* Rechts blijft --hele-woorden vrij; daar hangt de toggle in. */
   padding: 0 var(--hele-woorden) 2px 18px;

   /* Het veld heeft weer een eigen breedte. De toggle erin hangt
      niet aan de rand van de rij maar aan die van het veld, en
      rekent daarvoor met dezelfde twee variabelen. */
   display: block;
   width: var(--zoekveld-breedte);
   max-width: 100%;
   outline: none;

   /* Deze regel staat op het id en niet op de klasse, want in
      stijlen.css staat een #zoekveld met width: 100px en
      max-height: 10px erin. Een id wint van een klasse, dus daar
      kwam .zoekveld niet doorheen. Die twee worden hier ongedaan
      gemaakt; de rest van dat oude blok wordt overschreven. */
   max-height: none;
   min-height: 0;
 }
 #zoekveld.zoekveld::placeholder { color: #9c968e; }

 .zoekvak .scheiding {
   height: 1px;
   background: var(--lijn-blauw);
   margin: 4px 0 18px;
 }

 .zoekvak .leeglabel { visibility: hidden; }

 .zoek_geen {
   font-style: italic;
   color: #6d6a66;
   margin: 8px 0 0;
 }
 .zoek_aantal {
   font-size: 17px;
   font-style: italic;
   color: #6d6a66;
   margin: 0 0 18px;
 }
 
 .keuzerij.zonderlabel { gap: 10px; }
 
 .card {
   background: #fff;
   border: 1px solid var(--rand);
   border-radius: 10px;
   margin-bottom: 14px;
   display: flex;
   align-items: stretch;
   overflow: hidden;
 }
 .card .body { flex: 1; min-width: 0; padding: 12px 34px 14px 21px; }
 
 .card .col {
   width: 94px;
   flex: none;
   display: flex;
   flex-direction: column;
   background: var(--rood-vak);
 
   font-size: 18px;
 
   line-height: var(--kaart-regel);
   padding: calc(12px - var(--kolom-zet)) 13px calc(14px + var(--kolom-zet));
 }
 .card .col a { color: #fff; text-decoration: none; }
 
 .card .ttl { font-family: 'Zilla Slab', Georgia, serif; line-height: var(--kaart-regel); }
 /* De ruimte tussen de titel en de artiest hoort bij de artiest en
    niet bij de titel. Dat lijkt om het even, maar de titel is het
    ding dat oplicht als je ernaartoe springt, en een achtergrond
    loopt tot en met de padding. Stond die .55em op de titel, dan
    stak het rode vlak rechts elf pixels uit en links twee. */
 .card .t {
   font-family: 'Zilla Slab', Georgia, serif;
   font-size: 20px;
   font-weight: 500;
   color: var(--rood);

   /* Voor het vlak dat oplicht. Zolang er geen achtergrond is zie
      je er niets van, dus hij mag hier gewoon blijven staan; de
      animatie hoeft er niets over te zeggen. Kleiner dan de 10px
      van de kaders: dit is een woord, geen vak. */
   border-radius: 4px;
 }
 .card .art {
   font-family: 'Zilla Slab', Georgia, serif;
   font-size: 20px;
   font-weight: 500;
   color: #6d6a66;
   padding-left: .55em;
 }
 
 .card .line {
   line-height: var(--kaart-regel);
 
   padding-left: 1.8em;
   text-indent: -1.8em;
 }
 .card .desc { font-style: italic; }
 
 .card .sep {
   font-size: 0;
 
   line-height: 0;
   margin: 0 .22em;
   padding: 0;
   color: #b9b3ab;
 }
 .card .sep:before {
   content: '|';
   font-size: 17px;
   position: relative;
   top: -.06em;
 }
 
 .card .body a { color: inherit; text-decoration: none; }
 .card .body a:hover { color: var(--rood); }

 /* HET UITGEVERSRONDJE

    Het rondje met de letter van de uitgeverij komt uit stijlen.css.
    Belangrijk om te weten: dat rondje is geen vormgeving maar een
    letter. De klasse gebruikt het lettertype EstelleSansInCirkels,
    en daarin zit de cirkel al om de letter heen getekend.

    Hier stond eerder een background-color. Die tekende een rood
    vierkant achter de glyph -- precies het vlakje dat je zag. Het
    hoeft alleen een kleur te zijn.

    In de kaarten was het rondje zwart omdat .card .body a de kleur
    op inherit zet, en dat is daar de tekstkleur. Vandaar dat het
    rondje onderaan de pagina wel goed stond en in een kaart niet. */
 .uitgeverij,
 .card .body a.uitgeverij {
   background: none;
   color: var(--rood-vak);
 }
 .card .body a.uitgeverij:hover { color: var(--rood); }

 .nieuwe_stukken {
   width: 100%;
   border-collapse: collapse;
   background: transparent;
   margin-top: 6px;
   border-top: 1px solid var(--rand);
   border-bottom: 1px solid var(--rand);
 }
 .nieuwe_stukken td {
   line-height: 1.38;
   padding: 8px 14px;
   border-bottom: 1px solid var(--rand);
   vertical-align: baseline;
 }
 .nieuwe_stukken tr:last-child td { border-bottom: 0; }
 
 .nieuwe_stukken .titel a { color: var(--rood); }
 
 .nieuwe_stukken .herkomst { white-space: nowrap; }
 .nieuwe_stukken .bezetting { text-align: right; white-space: nowrap; }
 
 .afbeelding {
   float: right;
   display: block;
   line-height: 0;
   margin: var(--beeld-zet) 0 14px 24px;
   max-width: 40%;
 }
 .afbeelding img { display: block; max-width: 100%; height: auto; }
 
 @media only screen and (max-width: 1000px) {
   #menu ul.toplevel { gap: 18px; }
 }
 
 @media only screen and (max-width: 960px) {
   .afbeeldingen { display: none; }
 }
 
 /* ==================================================================
    SMALLER DAN 860: HET MENU ACHTER EEN HAMBURGER

    Zeven menu-items passen niet meer naast het logo. Ze gaan achter
    een knop en klappen open als een blauw vlak onder de balk.

    De balk zelf blijft hier nog gewoon zoals hij is: even hoog, met
    het logo op ware grootte dat door de onderrand heen loopt. Een
    tablet heeft daar ruimte voor. Pas op een telefoon wordt de kop
    compacter; zie het blok verderop.
    ================================================================== */
 @media only screen and (max-width: 860px) {

   /* De cirkels links staan onder 960px al uit, dus de inhoud hoeft
      niet meer opzij geschoven te worden. Zonder deze regel stond
      alles op een smal scherm 70px scheef. */
   .inhoud {
     left: 0;
     max-width: none;
   }

   /* Het logo staat op een breed scherm links van de tekstkolom, in
      de marge waar ook de cirkels hangen. Die kolom is hier weg, dus
      schuift het logo mee naar binnen. */
   .logo1 { left: var(--logo-links); }

   .navigatie { background: none; height: auto; width: auto; }

   /*  DE HAMBURGER  ---------------------------------------------- */
   /*  Staat op dezelfde regel als het menu stond, dus hij hangt aan
       --menu-top net als de taalknop ernaast. */
   /* De knop hangt aan dezelfde menuregel als de taalcode ernaast:
      hij begint op --menu-top en is --menu-regel hoog, en de
      tekening staat daar met flex middenin. Zo staan de twee altijd
      op één lijn, welke maat de tekening ook heeft. Stond de knop
      op zijn eigen hoogte, dan moest je bij elke maatverandering
      opnieuw gaan rekenen. */
   .hamburger {
     display: flex;
     align-items: center;
     position: absolute;
     top: var(--menu-top);
     right: var(--marge-rechts);
     width: var(--hamburger);
     height: var(--menu-regel);
     z-index: 6;
     cursor: pointer;

     /* Een onzichtbare rand eromheen: 24 bij 24 is klein voor een
        duim, en dit vergroot het doel zonder iets te verschuiven. */
     padding: 10px;
     margin: -10px;
     box-sizing: content-box;
   }

   /* De strepen zijn een tekening en geen drie blokjes meer. Drie
      blokjes van 2px moeten op hele schermpixels vallen om gelijk
      te ogen, en bij een browser op 90% of een telefoon met een
      eigen schaalfactor gebeurt dat niet. Een tekening schaalt mee.

      De <i>'s uit het javascript blijven staan maar worden
      verborgen; ze doen geen kwaad en zo hoeft de html niet mee te
      veranderen als je dit ooit terugdraait. */
   .hamburger:before {
     content: '';
     display: block;
     width: 100%;
     height: var(--hamburger);
     background-color: #fff;
     -webkit-mask: var(--menu-tekening) no-repeat center / contain;
     mask: var(--menu-tekening) no-repeat center / contain;
   }
   .hamburger i { display: none; }

   body.menu-open .hamburger:before {
     -webkit-mask-image: var(--kruis-tekening);
     mask-image: var(--kruis-tekening);
   }

   /*  HET UITKLAPMENU  ------------------------------------------- */
   #menu {
     position: absolute;
     top: var(--band);
     left: 0;
     right: 0;
     width: auto;
     background: var(--blauw);

     /* Een lijn tussen de balk en het uitklapmenu. Zonder die lijn
        lopen twee blauwe vlakken in elkaar over en lijkt de balk
        alleen maar hoger geworden. */
     border-top: 1px solid var(--lijn-blauw);

     padding: 6px 0 14px;
     display: none;
   }
   body.menu-open #menu { display: block; }

   #menu ul.toplevel {
     display: block;
     white-space: normal;
     min-height: 0;
     gap: 0;
   }
   #menu ul.toplevel > li { display: block; }

   /* De items lijnen uit met het logo erboven: allebei op
      --logo-links. Dat is het enige verticale houvast in deze balk,
      dus daar hoort het menu aan te hangen -- niet aan de marge van
      de tekst, die weer ergens anders begint.

      En krap op elkaar, net als op de telefoon: zeven items met veel
      lucht ertussen worden een lijst met gaten in plaats van een
      blok waar je in één oogopslag doorheen leest. */
   #menu ul.toplevel > li > a,
   #menu ul.toplevel > li > a.huidig {
     display: block;
     padding: 4px var(--logo-links);
     font-size: 21px;
     line-height: 1.3;
     color: #fff;
   }

   /*  In de balk is het zoeken een loepje, want daar is geen plek
       voor een woord. In het uitklapmenu is die plek er wel, dus
       daar staat het woord en verdwijnt het icoon. */
   #menu .zoek-item { margin-left: 0; }
   #menu .zoekwoord { display: inline; }
   #menu .zoek-item > a:before,
   #menu .zoek-item > a:after { display: none; }
   #menu .zoek-item > a { display: block; }

   #menu ul.toplevel > li:after { display: none; }

   /*  De taalknop schuift op zodat de hamburger rechts kan staan. */
   .vlaggen { right: calc(var(--marge-rechts) + 46px); }

   .nieuwe_stukken .herkomst { white-space: normal; }
 }
 
 /* ==================================================================
    SMALLER DAN 620: EEN MAATJE KLEINER

    De broodletter gaat van 20 naar 19px. Dat klinkt weinig, maar
    een bezetting als 'SSATB met piano of gitaar' scheelt er twee
    tekens mee, en dat is net het verschil tussen wel en niet
    afbreken. De kaders leveren tegelijk marge in.
    ================================================================== */
 @media only screen and (max-width: 620px) {
   body, table, td { font-size: 19px; }

   .kop, .hoofd { font-size: 25px; }
   .card .t, .card .art { font-size: 19px; }

   .kader { padding: 4px 20px 18px 22px; margin: 26px 0; }
   .kader .kop { font-size: 21px; }
   .kader > a,
   .kader > img { margin: 15px 0 -3px 18px; }

   .keuzerij { display: block; margin-bottom: 16px; }
   .keuzelabel { display: block; width: auto; margin-bottom: 7px; }
   .keuzerij a, .keuzerij .knop { display: inline-block; margin: 0 6px 7px 0; }
   /* Onder deze breedte past de vaste veldbreedte niet meer. Het
      veld vult dan de rij, en de toggle hangt aan de rechterkant
      daarvan in plaats van aan een breedte die er niet meer is. */
   /* Het zoekvak op smalle schermen staat helemaal onderaan dit
      bestand, achter het blok waar de vormgeving ervan staat. Dat
      moet ook: dat blok komt later in het bestand, en bij gelijke
      specificiteit wint wat later staat. */
 }
 
 @media only screen and (max-width: 620px) {
   .kader > a,
   .kader > img { float: none; max-width: 100%; margin: 20px 0 4px; }
 }
 
 /* ==================================================================
    SMALLER DAN 560: DE COMPACTE KOP

    Nu wordt de balk zelf kleiner. Het logo gaat mee omlaag en staat
    helemaal binnen het blauw, dus helemaal in wit: de omslag naar
    blauw halverwege de letter (.logo1 a:after) heeft hier geen
    ruimte meer en gaat uit.

    De marges gaan van 24px naar --marge-mobiel. Op 375px is elke
    pixel er een, en de kaarten en tabellen hebben hem harder nodig
    dan de witruimte.
    ================================================================== */
 @media only screen and (max-width: 560px) {
   :root {
     --balk: auto;
     /* De balk is lager dan het logo hoog is. Wat eronder uitsteekt
        -- de staart van de ij en het streepje van de k -- wordt door
        .logo1 a:after in blauw overgetekend, en staat dus diapositief
        op het room. Dezelfde truc als op een breed scherm. */
     --band: 110px;
     --logo-top: 10px;
     --marge-mobiel: 16px;
   }

   /* Het logo zo groot als het kan. Bij 128px hoog is het ongeveer
      240 breed; op een scherm van 375 begint het rechterblokje pas
      op 290, dus er blijft ruimte tussen. Wordt het logo nog groter,
      dan raken ze elkaar op de smalste telefoons.

      De balk is 20px hoger dan het logo. Die lucht is nodig: raakt
      het logo de onderrand, dan komt de staart van de r in het room
      te staan en krijg je alsnog de kleuromslag die op een telefoon
      juist niet moet. */
   .logo1 { top: var(--logo-top); left: var(--marge-mobiel); }

   /* Hier wordt de breedte gegeven en de hoogte gevolgd, andersom
      dan op een breed scherm. Dat moet ook: een svg met height op
      auto wordt niet opgerekt tot een max-height, die blijft dan op
      zijn eigen formaat staan -- en dan steekt hij niet onder de
      balk uit.

      De 243 is de breedte die hoort bij 128px hoog. De tweede waarde
      is wat er overblijft naast de taalcode en de hamburger; op een
      hele smalle telefoon wint die, en dan krimpt het logo mee in
      de goede verhouding. */
   .logo1 img {
     width: min(243px, calc(100vw - 116px));
     height: auto;
   }

   /* Omgedraaid ten opzichte van het brede scherm: de taalcode staat
      hier het meest naar buiten en de hamburger ernaast. Zo staat de
      knop die een heel vlak openklapt niet tegen de schermrand, waar
      je hem met je duim half misgrijpt. */
   :root { --hamburger: 21px; }
   .vlaggen { top: 43px; right: var(--marge-mobiel); }
   .hamburger { top: 43px; right: calc(var(--marge-mobiel) + 52px); }
   .vlaggen table { right: -12px; }

   /* Kleiner dan op een tablet en dichter op elkaar. Het menu stond
      op 21px terwijl de broodtekst hier 18 is; dat verschil was te
      groot, en in een uitklapmenu hoeft een item niet te schreeuwen.
      De padding van 9 naar 4 haalt tien pixels per regel weg, zodat
      de zeven items samen een blok vormen in plaats van een lijst
      met gaten.

      Links staan ze verder naar binnen dan de tekst eronder. Dat
      lijkt onlogisch maar oogt beter: het uitklapmenu is een vlak
      op zichzelf, en tekst die tegen de rand van een gekleurd vlak
      begint, ziet er altijd uit alsof hij eraf valt. */
   #menu ul.toplevel > li > a,
   #menu ul.toplevel > li > a.huidig {
     padding: 4px 26px;
     font-size: 18px;
     line-height: 1.3;
   }

   .inhoud { padding: calc(var(--band) + 22px) var(--marge-mobiel) 0; }

   /*  KAARTEN, TABELLEN EN KADERS  ------------------------------- */
   /*  Nog een maatje kleiner, en overal minder lucht. Op 375px telt
       elke pixel breedte: wat de marge inlevert, wint de tekst. */
   body, table, td { font-size: 18px; }

   .kop, .hoofd { font-size: 23px; }
   .card .t, .card .art { font-size: 18px; }
   .aantal-arrangementen { font-size: 16px; }

   .card { margin-bottom: 12px; }
   .card .body { padding: 10px 16px 11px 13px; }
   .card .col {
     width: 68px;
     font-size: 17px;
     padding: calc(10px - var(--kolom-zet)) 8px calc(11px + var(--kolom-zet));
   }

   .kader { padding: 2px 15px 16px 16px; margin: 22px 0; }
   .kader .kop { font-size: 20px; }
   .kader .uitleg td:first-child { width: 84px; }

   .overzichttabel, .overzichttabel td { font-size: 17px; }
   .alfabet { font-size: 25px; }

   :root { --thema-inspring: 30px; }
   .thema_td { font-size: 17px; }

   /* De labelkolom nog krapper: net breed genoeg voor 'Zoeken'. */
   :root { --zoek-inspring: 58px; }

   /* Een kop van 23px met de regelafstand van broodtekst valt uit
      elkaar zodra hij over twee regels loopt. */
   .kop, .hoofd { line-height: 1.15; }

   /* De regelafstand binnen een kaart. Dit ene getal geldt voor de
      titelregel, de bezettingen en de rode kolom tegelijk, dus die
      blijven onderling gelijk lopen. */
   :root { --kaart-regel: 23px; }

   /* UIT STIJLEN.CSS

      Daar staat bij 400px een padding-left van 10px op de kop en op
      het aantal, uit de tijd dat de koptekst op een blauw vlak
      stond. Dat vlak is er niet meer, dus die inspringing hangt in
      de lucht. En de kop kreeg daar extra letterspatiëring; Zilla
      Slab staat op deze site overal op nul. */
   .hoofd, .aantal-arrangementen { padding-left: 0; }
   .kop { letter-spacing: 0; }

   .nieuwe_stukken td { padding: 8px 10px; }
   .nieuwe_stukken .bezetting { text-align: left; }
   /* De foto zweeft niet meer naast de tekst maar staat op een eigen
      regel, en dan gelden er andere maten. Kleiner, want over de
      volle breedte wordt een portret een poster. Gecentreerd, want
      een losse afbeelding tegen de linkerrand oogt alsof er tekst
      naast hoort te staan die er niet is. En ruimte erboven: dat is
      de marge die vroeger uit --beeld-zet kwam, maar die was er om
      een zwevende foto op de bovenkant van de alinea te laten
      aansluiten, en dat speelt hier niet meer. */
   .afbeelding {
     float: none;
     display: block;
     width: 150px;
     max-width: 55%;
     margin: 26px auto 20px;
   }
   .afbeelding img { width: 100%; height: auto; }
 }

/* ------------------------------------------------------------------
   HET ZOEKVAK

   Dit staat achteraan en gebruikt geen flexbox, maar gewone
   inline-blokjes. Simpeler dan de flexrijen op de keuzepagina, en
   voor een rij losse knoppen net zo goed.

   Let op de width en text-align hieronder: die zijn er niet voor
   niets. In stijlen.css bestaat al een .knop, met width: 100px en
   text-align: center. Die won lange tijd, want de regels hierboven
   zeggen wel iets over kleur en rand maar niets over breedte, en
   dan blijft die 100px gewoon staan. Vandaar dat elke knop even
   breed werd, van een I tot Jazz & latin. Weghalen mag pas als
   .knop uit stijlen.css verdwijnt.

   Het label hangt links buiten de rij, zodat een rij die afbreekt
   op de volgende regel onder de eerste knop begint.
------------------------------------------------------------------ */

.zoekvak .keuzerij {
  display: block;
  position: relative;
  padding-left: var(--zoek-inspring);

  /* line-height op nul haalt de onzichtbare regelhoogte van de
     omringende broodtekst weg. Zonder dit is een rij een paar
     pixels hoger dan de knoppen erin, en dan lijkt de padding van
     het blauwe vak kleiner dan op de keuzepagina. De knoppen
     krijgen hun eigen regelhoogte hieronder terug. */
  line-height: 0;
  font-size: 0;
  margin-bottom: 13px;
}
.zoekvak .keuzerij:last-child { margin-bottom: 0; }
.zoekvak .zoekregel { margin-bottom: 17px; }

/* Het label erft de line-height: 0 van de rij, dus dat wordt hier
   teruggezet. En in plaats van het met een top-waarde op zijn plek
   te schatten, wordt het over de volle rijhoogte gecentreerd; dan
   staat het altijd gelijk met de tekst in de knoppen. */
.zoekvak .keuzelabel {
  position: absolute;
  left: 0;
  top: var(--label-zet);
  width: auto;
  height: 31px;
  display: flex;
  align-items: center;
  line-height: 1.25;
}

.zoekvak .knop {
  display: inline-block;
  vertical-align: middle;
  margin: 0 12px 0 0;
  width: auto;
  text-align: left;
}

/* Een romeins cijfer heeft minder lucht nodig dan een woord. */
.zoekvak .knop[data-groep='niveau'] {
  padding-left: 13px;
  padding-right: 13px;
}

/* ------------------------------------------------------------------
   HELE WOORDEN

   Deze schakelaar hoort bij het veld ernaast en niet bij de rijen
   eronder: de filters bepalen welke resultaten overblijven, deze
   bepaalt hoe de tekst in het veld gelezen wordt. Daarom staat hij
   ín het veld. Dat scheelt een kader, en nabijheid zegt het al.

   Hij houdt daar zijn plek zonder omhullende span in de html: de
   rij is al position: relative, en het veld loopt tot de rand van
   die rij. Rechts uitlijnen op de rij is dus rechts uitlijnen op
   het veld. De VB-generator hoeft niets anders te schrijven.

   Binnen het veld is dit het enige knopje, dus daar zegt een
   vinkvakje wél iets: aan of uit. Tussen de filters eronder zou
   datzelfde vakje niets onderscheiden, want die zijn het allemaal.
------------------------------------------------------------------ */

.zoekvak .zoekregel .knop {
  position: absolute;

  /* De rechterkant van het veld min 18px, en dan zichzelf een
     volle breedte naar links: zo eindigt de tekst even ver van de
     rand als de tekst in het veld ervan begint. */
  left: calc(var(--zoek-inspring) + var(--zoekveld-breedte) - 18px);
  transform: translateX(-100%);

  /* Even hoog als het veld, en de inhoud staat daar middenin. De
     zet erbovenop haalt het laatste pixelverschil met de tekst in
     het veld eruit. */
  top: var(--woorden-zet);
  height: 31px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: 8px;

  background: transparent;
  border: 0;
  border-radius: 0;

  /* Die 2px onder is dezelfde correctie als in het veld zelf, zodat
     beide teksten op één lijn staan. */
  padding: 0 0 2px;
  margin: 0;

  /* Zelfde zwart als de tekst die je in het veld typt: het staat
     in hetzelfde vak, dus het hoort ook dezelfde kleur te hebben.
     Grijs zou het op een placeholder laten lijken. */
  color: var(--tekst);
  white-space: nowrap;
}

/* Het vakje. */
.zoekvak .zoekregel .knop:before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  flex: none;
  box-sizing: border-box;
  border: 1px solid var(--tekst);
  border-radius: 3px;
  background: transparent;
}

/* Het vinkje ligt in het vakje en is normaal onzichtbaar. Er is
   geen padding meer, dus het vakje begint op nul. Het staat in
   dezelfde kleur als het lijntje eromheen en de tekst ernaast; op
   12px is de haal ongeveer even zwaar als die rand van 1px. */
.zoekvak .zoekregel .knop:after {
  content: '\2713';
  position: absolute;
  left: 0;
  width: 12px;
  text-align: center;
  top: 50%;
  transform: translateY(-58%);
  font-size: 12px;
  line-height: 1;
  color: var(--tekst);
  opacity: 0;
}

/* Aanvinken zet het vinkje aan, verder blijft alles staan. Het
   vakje vult zich niet: dan zou het vlak hetzelfde zeggen als het
   vinkje, en zegt eigenlijk geen van beide nog iets. */
.zoekvak .zoekregel .knop.actief:after { opacity: 1; }


/* ------------------------------------------------------------------
   HET CONTACTFORMULIER

   Dit blok komt achteraan in nieuw.css, na het zoekvak.

   Het formulier staat in een gewoon kader, met dezelfde witte
   ondergrond en hetzelfde randje als de kaders bij de arrangementen.
   Alleen de padding is anders: een kader begint normaal met een kop,
   en die heeft van zichzelf al marge boven -- daarom staat daar maar
   4px. Hier begint het meteen met een invulveld, en dan is 4px te
   krap.

   Twee dingen die niet vanzelf spreken:

   Een veld is niet hetzelfde als een knop. Het zoekveld in het blauwe
   vak is wit gevuld en heeft geen rand nodig, want het licht al op
   tegen het blauw. In een wit kader werkt dat niet: wit op wit is
   niets. Vandaar dat de velden hier wel een randje krijgen, in
   dezelfde kleur als het kader eromheen, en vanbinnen leeg blijven.
   Open, niet dicht.

   En ze zijn hoekig waar de knop een pil is. Dat verschil doet werk:
   rond en gevuld is iets om op te drukken, recht en leeg is iets om
   in te schrijven.

   De verzendknop is het enige gevulde vlak op de pagina. Dat is met
   opzet: op een formulier hoort precies een ding te zeggen 'klik mij'.
   Zou de knop ook een lege pil zijn, dan zag hij eruit als het vijfde
   veld.
------------------------------------------------------------------ */

:root {
  /* De breedte van de labelkolom. In het Nederlands is 'Arrangement
     van je interesse' het langste label en dat breekt hier over twee
     regels -- dat is de bedoeling, anders wordt de kolom zo breed dat
     'Naam' er verloren in staat. In het Spaans is 'Correo
     electronico' de langste; die past. Wordt het ooit krapper, dan is
     dit het getal. */
  --form-label:   170px;

  /* De breedte van de velden. De regel eronder, het bericht, is even
     breed; zo staat de rechterkant van het formulier op een lijn. */
  --form-veld:    320px;

  /* Even hoog als het zoekveld in het blauwe vak. Dat getal staat
     daar hard in de code; hier krijgt het een naam, want de labels
     ernaast rekenen er ook mee. */
  --form-hoog:    34px;

  /* De knop als de muis erboven hangt. Iets dieper dan --rood-vak.
     Apart gehouden, want --rood is voor tekst en mag geen vlak
     worden. */
  --rood-vak-op:  #9d2c2c;
}

.contactvak { padding: 22px 30px 24px; }

/* Het scriptje van reCAPTCHA staat in de html binnen het formulier.
   Een <script> is inline en zou dus een lege regel kunnen opleveren.
   Dit haalt hem weg. */
.contactvak script { display: none; }

.formrij {
  display: flex;

  /* Het label staat midden voor zijn veld. Bij een label van twee
     regels betekent dat: de rij wordt zo hoog als het label, en het
     veld zakt naar het midden daarvan. */
  align-items: center;
  margin-bottom: 12px;
}

/* HET BERICHT IS DE UITZONDERING

   Centreren kan hier niet: het vak is 170px hoog, en dan zou 'Bericht'
   halverwege een leeg vlak komen te hangen. Dit label staat dus wel
   bovenaan, met een zetje omlaag zodat het gelijk loopt met de eerste
   regel die je erin typt. */
.formrij:has(.formbericht) { align-items: flex-start; }
.formrij:has(.formbericht) .formlabel { padding-top: 10px; }

/* HET LABEL

   Crimson Pro op broodtekstgrootte. Het heeft even in Zilla Slab
   gestaan, gelijk aan de labels in het zoekvak, maar dat is daar een
   blauw vak vol knoppen. Hier staat het formulier midden in een
   pagina met lopende tekst, en dan is een label gewoon een woord.

   In de oude php stond hier line-height: 0.85, en dan plakken de twee
   regels van 'Arrangement van je interesse' aan elkaar. Daarna heeft
   het een tijdje op 1.5 gestaan en dat was weer te ruim: twee regels
   die bij elkaar horen mogen dichter op elkaar dan losse alinea's.
   1.3 is de correctie. Niet aanpassen zonder reden -- dit is
   uitgeprobeerd, geen willekeurig getal. */
.formlabel {
  width: var(--form-label);
  flex: none;
  box-sizing: border-box;
  font-family: 'Crimson Pro', Georgia, serif;

  /* Cursief zet de labels apart van wat je zelf invult: het ene
     benoemt, het andere is jouw tekst. Zonder dat verschil staan er
     acht dingen in dezelfde letter naast elkaar. */
  font-style: italic;

  font-size: 20px;

  /* Dit getal is drie keer bijgesteld en staat nu op 1.15. De oude
     php had 0.85, dat plakte; 1.5 en 1.3 waren allebei te ruim.
     Crimson Pro heeft een grotere x-hoogte dan Zilla Slab, dus twee
     regels lijken er eerder ver uit elkaar te staan. Dit is een
     doelbewuste correctie, geen restant. */
  line-height: 1.15;

  /* Cursief heeft van zichzelf al smallere letters; de negatieve
     tracking van de broodtekst maakt het dan te krap. Vandaar nul. */
  letter-spacing: 0;

  font-feature-settings: 'onum' 1;
  color: var(--tekst);
  padding: 0 16px 0 0;

  /* Het veld duwt zijn eigen tekst een pixel omhoog (zie de padding
     onderaan bij .formveld). Zonder dit zetje staat het label die
     pixel lager dan wat je typt. */
  position: relative;
  top: -1px;
}

.formveld {
  /* Broodtekst, net als de labels ernaast en de zin erboven. Wat je
     hier typt is gewoon tekst; alleen de knop onderaan is een knop.

     Een invoerveld erft zijn letter niet van de pagina -- de browser
     zet er van zichzelf een systeemletter op -- dus alles wat in de
     broodtekst vanzelf goed staat, moet hier met de hand mee. Vandaar
     ook de tracking en de mediaevale cijfers. */
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: var(--tracking);
  font-feature-settings: 'onum' 1;
  color: var(--tekst);
  background: #fff;
  border: 1px solid var(--rand);

  /* Dezelfde ronding als het berichtvak eronder en als het kader
     eromheen. De velden hebben een tijdje de pilvorm van de knoppen
     gehad, maar dat kan bij het berichtvak niet -- 170px hoog met
     die ronding levert halve cirkels op -- en dan staan er twee
     vormen in een formulier. Nu is het er een. */
  border-radius: 10px;

  box-sizing: border-box;
  height: var(--form-hoog);
  width: var(--form-veld);
  max-width: 100%;
  margin: 0;

  /* Dezelfde 2px onder als in het zoekveld: de browser zet de tekst
     midden in het vak, en die twee pixels duwen hem een pixel omhoog
     zonder dat de pil lager wordt. */
  padding: 0 16px 2px;

  /* Safari op de Mac en op de telefoon geeft invoervelden een eigen
     vorm en een eigen schaduwtje. Zonder deze twee regels blijft daar
     iets van staan, ook al is alles hierboven opgegeven. */
  -webkit-appearance: none;
  appearance: none;

  outline: none;
  box-shadow: none;
}
.formveld::placeholder { color: #9c968e; }

/* GEEN OPLICHTENDE RAND

   Het randje kleurde rood zodra je in een veld klikte. Dat was
   bedoeld als hulp maar het is vooral onrust: je ziet de cursor al
   knipperen, dus je weet waar je bent.

   Wat er wel moet blijven staan is iets voor wie met de tabtoets
   door het formulier loopt; die heeft geen cursor om op af te gaan
   en zou anders blind zoeken. :focus-visible doet precies dat
   onderscheid -- de browser zet hem aan bij toetsenbord en laat hem
   uit bij een muisklik. En dan in grijs, niet in rood. */
.formveld:focus-visible { border-color: #b9b3ab; }

/* HET BERICHT

   Verder gelijk aan de velden erboven; alleen hoger, en met padding
   boven omdat de tekst hier bovenin begint in plaats van in het
   midden.

   Slepen mag alleen omlaag. Breder trekken zou het vak buiten het
   kader duwen. */
.formbericht {
  height: auto;
  min-height: 170px;
  padding: 9px 16px 10px;
  line-height: 1.4;
  resize: vertical;
  display: block;
}

/* De knop staat onder de velden en niet rechts eronder. Je leest een
   formulier langs de linkerkant van de invulvelden naar beneden, en
   daar hoort de knop dus ook te staan -- rechts uitgelijnd valt hij
   buiten die lijn. */
.formknoprij {
  margin-top: 20px;
  padding-left: var(--form-label);
}

.verzendknop {
  font-family: 'Zilla Slab', Georgia, serif;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0;
  color: #fff;
  background: var(--rood-vak);
  border: 1px solid var(--rood-vak);
  border-radius: 999px;
  padding: 4px 24px 6px;

  /* In stijlen.css staat een .knop met een vaste breedte en gecentreerde
     tekst. Deze knop heet anders, maar de breedte en hoogte staan hier
     toch expliciet op auto: er staan in dat bestand meer regels op
     input-elementen, en die zouden er zomaar overheen kunnen komen. */
  width: auto;
  height: auto;
  max-height: none;

  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  cursor: pointer;
}
.verzendknop:hover {
  background: var(--rood-vak-op);
  border-color: var(--rood-vak-op);
}

/* De privacylink stond in de html achter acht harde regeleindes. Nu
   is het een gewone alinea met marge erboven. */
.privacyregel { margin-top: 64px; }

/* WAT NIEMAND ZIET

   Twee blokken die verborgen zijn, om twee heel verschillende
   redenen. Ze stonden allebei met een style-attribuut in de html;
   nu staan ze hier.

   De honingpot is een leeg veldje dat een mens nooit te zien krijgt
   en dus nooit invult. Een spamrobot leest de html en vult alles in
   wat hij tegenkomt. Staat er iets in, dan was het geen mens. Het
   moet dus wel echt in de pagina staan -- weglaten kan niet.

   De privacytekst hoort bij de link erboven en wordt door lytebox
   uit de pagina gevist zodra je erop klikt. */
.honingpot { display: none; }
#privacy-tekst.verborgen { display: none; }


@media only screen and (max-width: 620px) {
  /* Het label boven het veld in plaats van ernaast. Een kolom van
     150px naast een veld past hier niet meer, en het veld moet de
     volle breedte hebben om nog iets te kunnen tonen van wat je typt. */
  .formrij   { display: block; margin-bottom: 15px; }
  .formlabel { width: auto; padding: 0 0 4px; }
  .formveld  { width: 100%; }
  .formknoprij { padding-left: 0; }

  /* De broodtekst gaat hier van 20 naar 19px; het formulier gaat mee,
     anders staat het straks groter dan de zin erboven. */
  .formlabel, .formveld { font-size: 19px; }

  /* .kader krijgt hieronder zijn eigen krappere padding, maar dat
     staat eerder in het bestand en verliest dus van .contactvak
     hierboven. Daarom hier nog een keer. */
  .contactvak { padding: 20px 20px 20px 22px; }
}

@media only screen and (max-width: 560px) {
  .contactvak { padding: 16px 15px 18px 16px; }
  .formbericht { min-height: 150px; }
  .formlabel, .formveld { font-size: 18px; }
}


/* ------------------------------------------------------------------
   DE KOP IN DE LIGHTBOX

   Let op: dit is niet van het contactformulier maar van de lightbox,
   en die wordt op meer plekken gebruikt. Het raakt alleen de
   tekstversie (#lb-tekst); een foto in de lightbox heeft geen kop en
   merkt hier niets van.

   De kop kwam vet uit stijlen.css. 500 is dezelfde dikte als .kop en
   .hoofd elders op de site: aanwezig, maar niet schreeuwend.

   En de marge boven is nul. Een <h3> brengt van zichzelf een marge
   mee, en die kwam bovenop de ruimte die het kader eromheen al had.
   Twee keer lucht dus, waar een keer genoeg is.
------------------------------------------------------------------ */

#lb-tekst h3 {
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 500;

  /* De tracking van de broodtekst staat op --tracking en is negatief;
     Zilla Slab staat elders op de site altijd op nul. */
  letter-spacing: 0;

  margin: 0 0 14px;
}

/* Voor het geval de eerste regel ooit geen kop is maar een alinea:
   die brengt zijn eigen marge ook mee. */
#lb-tekst > *:first-child { margin-top: 0; }


/* ------------------------------------------------------------------
   DE TABEL OP DE HOMEPAGE OP EEN SMAL SCHERM

   Twee dingen uit stijlen.css zaten hier in de weg, en die zijn de
   eigenlijke oorzaak van de tabel die over de rand liep:

   1. Onder 700px staat daar 'margin-left: 10px' op .nieuwe_stukken.
      De tabel is al 100% breed, dus die tien pixels duwden hem tien
      pixels buiten het scherm. Dat is de horizontale schuifbalk.

   2. Elke cel had 'padding-right: 15px'. Bij drie kolommen is dat
      45px van de 390 die een telefoon heeft, en die gaan af van de
      titelkolom.

   Verder de nowrap van de bezetting eraf, want ook die stond aan op
   elke breedte, en het afbreken aan als vangnet voor de lange
   titels. hyphens: auto werkt alleen als de browser de taal kent;
   die komt uit het VB-programma, op div.inhoud en op de titelcel.
   overflow-wrap breekt ook zonder woordenboek, desnoods midden in
   een woord, in plaats van de tabel op te rekken.
------------------------------------------------------------------ */

@media only screen and (max-width: 620px) {

  /* De twee regels uit stijlen.css. */
  .nieuwe_stukken { margin-left: 0; }
  .nieuwe_stukken td { padding-right: 8px; }
  .nieuwe_stukken td:last-child { padding-right: 0; }

  .nieuwe_stukken .bezetting { white-space: normal; }

  /* De titel is het belangrijkste van de drie en krijgt daarom de
     halve breedte. Zonder dit verdeelt de browser naar wat er
     toevallig in staat, en dan eisen de artiest en de bezetting
     samen meer op dan de titel overhoudt. */
  .nieuwe_stukken .titel { width: auto; }

  /* Ook de gewone tekst en de kaders breken af. In een kolom van
     ruim driehonderd pixels laat één lang woord anders een gat van
     een halve regel achter, of duwt het de rand van een kader uit
     beeld. hyphens werkt met de taal die het VB-programma op
     div.inhoud zet; overflow-wrap is het vangnet voor woorden die
     in geen enkel woordenboek staan, zoals een lange bestandsnaam
     of een titel met streepjes erin. */
  .nieuwe_stukken td,
  .card .t, .card .art, .card .line, .card .desc,
  .overzichttabel td,
  .thema_td,
  .inhoud p,
  .kader .tekst,
  .kader .uitleg td,
  .kader .noot {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* ------------------------------------------------------------------
   HET BADGE VAN reCAPTCHA

   Google plakt rechtsonder in beeld een blokje met zijn logo. In
   stijlen.css staat daar 'visibility: hidden' op: je ziet het niet
   meer, maar het staat er nog wel en het rekt de pagina op. Op een
   smal scherm gaf dat een horizontale schuifbalk waarvan je de
   oorzaak nergens kon zien.

   Waarom hier zoveel !important staat: Google zet met javascript
   zelf een 'left' op dit blokje, na het laden van de pagina. Een
   eerdere poging schoof hem met 'right: -9999px' naar buiten, maar
   daarop rekende Google een nieuwe left uit van ruim tienduizend
   pixels -- en dan is de pagina tienduizend pixels breed. Dus niet
   wegschuiven, maar op nul zetten: hij blijft staan waar hij hoort,
   alleen is hij niets meer groot.

   Geen display: none, want dat mag niet van de voorwaarden van
   Google en het kan de verificatie breken.

   Daar hoort wel bij dat je ergens vermeldt dat de site door
   reCAPTCHA beschermd wordt, met een link naar hun privacybeleid.
   Dat staat in de privacytekst op de contactpagina, in alle vijf
   de talen. Haal je die weg, dan moet dit blokje weer zichtbaar.
------------------------------------------------------------------ */

.grecaptcha-badge {
  visibility: hidden;
  left: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Het onzichtbare iframe dat reCAPTCHA erbij zet om met Google te
   praten. Dat zit naast het badge en niet erin, dus de regel
   hierboven raakt het niet. Het is en blijft onzichtbaar; het gaat
   er alleen om dat het geen ruimte meer inneemt. */
iframe[src*="recaptcha"] {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border: 0;
}


/* ------------------------------------------------------------------
   HET ZOEKVAK OP EEN SMAL SCHERM

   Dit staat met opzet helemaal achteraan, na de vormgeving van het
   zoekvak hierboven. Die regels staan verderop in het bestand dan de
   mediaqueries in het midden, en bij gelijke specificiteit wint wat
   later komt. Stonden deze regels daar, dan deden ze niets -- en dat
   was precies waarom 'Hele woorden' op een telefoon toch nog naast
   het veld bleef staan.
------------------------------------------------------------------ */

@media only screen and (max-width: 620px) {

  /* 'Hele woorden' hing in het veld, rechts. Dat kan hier niet meer:
     het veld houdt daarvoor 160px vrij, en op een telefoon blijft er
     dan nauwelijks ruimte over voor wat je typt -- die tekst stond
     buiten beeld, achter de knop. Nu staat de knop onder het veld,
     rechts uitgelijnd, en gebruikt het veld de volle breedte.

     De kleur staat er nog een keer bij, ook als -webkit-text-fill-
     color. Mobiele browsers laten die eigenschap soms voorgaan op
     'color', en dan typ je in het niets. */
  #zoekveld.zoekveld {
    width: 100%;
    padding-right: 18px;
    color: var(--tekst);
    -webkit-text-fill-color: var(--tekst);
  }

  .zoekvak .zoekregel .knop {
    position: static;
    transform: none;
    float: right;
    height: auto;
    margin: 9px 0 0;
  }

  /* De rij moet de zwevende knop nog omvatten, anders valt hij
     buiten het blauwe vak. */
  .zoekvak .zoekregel:after { content: ''; display: block; clear: both; }

  /* De labelkolom was 108px, uitgerekend op 'Zoeken' plus lucht. Op
     een telefoon is dat een derde van de regel, en die pixels heeft
     de rij met knoppen harder nodig. Wat er nu staat is het woord
     plus ruim tien pixels, zodat het label niet tegen de knop
     ernaast komt te staan. */
  :root { --zoek-inspring: 92px; }

  .zoekvak .keuzerij { line-height: 1.25; }
  .zoekvak .knop { margin-bottom: 6px; }
}

@media only screen and (max-width: 560px) {
  :root { --zoek-inspring: 68px; }
}