/* Kennis (/kennis, /en/knowledge, sub/kennis.php), in the look of the FAQ (glig-widget-faq in
   css/glig/widgets.css): its buttons for the groups, its list with the small blue stones, its colours */
.kennis .head { max-width: 480px; }     /* the top stays left of the yellow note with the logo */
.kennis h1 { font-size: 1.9em; color: #2b3f93; font-weight: normal; margin: 0 0 10px; }
.kennis .navigation { margin: 6px 0 14px; }
.kennis .navigation a
{
    display: inline-block;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 4px 8px;
    margin: 0 5px 8px 0;
    font-weight: bold;
    white-space: nowrap;
    font-size: 1.1em;
    box-shadow: 0 0 3px rgba(50, 50, 60, 0.25);
    text-decoration: none;
}
.kennis .navigation a:hover { background: gold; color: brown; }
.kennis .navigation a.selected { background: linear-gradient(#ee3399, #cd1269); color: white; border-color: purple; }
/* an article: its buttons as on /oefenen (css/oefenen.css), white with the flag of the language, the level beside them */
.kennis .navigation:has(a.all) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kennis .navigation a.all { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px; border: 1px solid #dde3ee;
                            border-radius: 14px; background: #fff; color: #2b3f93; font-size: 13px; font-weight: bold; line-height: 18px;
                            box-shadow: 0 1px 3px rgba(50, 50, 60, .15); }
.kennis .navigation a.all:hover { background: #f3f6fb; color: #2b3f93; }
.kennis .navigation a.all .flag { display: block; width: 18px; height: 12px; margin: 0; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.kennis .navigation:has(a.all) .level { margin: 0; font-size: 14px; padding: 3px 8px; border-radius: 6px; }
.kennis .navigation:has(a.all) .row-end { margin-left: auto; }
.kennis .index { margin: 0 0 18px; }
.kennis .index h3 { color: #3a7ab0; font-size: 1em; margin: 0 0 4px; }
.kennis .index ul { list-style-type: none; margin: 0; padding: 0; }
.kennis .index li { position: relative; padding-left: 15px; margin-bottom: 6px; }
.kennis .index li:before
{
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: url("/images/icons/bstone2.gif") no-repeat;
    background-size: contain;
}
.kennis .index li span { display: block; color: #666; font-size: 0.9em; }
.kennis .text { max-width: 640px; }
.kennis .text h2 { color: #2b3f93; font-size: 1.3em; margin: 18px 0 6px; }
.kennis .text .answer { background: #eef8fe; border-left: 5px solid #73d2f7; border-radius: 8px; padding: 10px 14px; }
.kennis .text table { border-collapse: collapse; margin: 6px 0 12px; }
.kennis .text td, .kennis .text th { border-bottom: 1px solid #e3e6ee; padding: 4px 10px 4px 0; text-align: left; vertical-align: top; }
.kennis .text .q { display: inline-block; background: linear-gradient(#ee3399, #cd1269); color: white; border-radius: 6px; padding: 0 6px; margin-right: 6px; font-weight: bold; }
.kennis .missing { color: #cd1165; font-weight: bold; }
.kennis .teacher { margin-top: 22px; padding: 12px 14px; background: #f3f5fa; border-radius: 8px; }

/* more inviting, with what the site has: the course icons and the photos,
   the yellow note for the short answer, a card per topic, and in an article a contents list, numbered steps, a talk in
   balloons, a tip, a question to test yourself and a picture of the place in Babbeldam where it is practised */
.kennis .group-head { display: flex; gap: 10px; align-items: center; margin: 18px 0 8px; }
.kennis .group-head img { width: 40px; height: 40px; }
.kennis .group-head h3 { margin: 0; color: #2b3f93; font-size: 1.25em; }
.kennis .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.kennis .cards li { margin: 0; padding: 0; }
.kennis .cards li:before { display: none; }
.kennis .cards a { display: block; height: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; background: #fff;
                   border: 1px solid #dde3ee; box-shadow: 0 1px 3px rgba(40, 50, 90, .12); text-decoration: none; transition: box-shadow .15s, border-color .15s; }
.kennis .cards a:hover { border-color: #73d2f7; box-shadow: 0 2px 7px rgba(40, 50, 90, .18); }
/* it stays where it is under the mouse: a little more shadow, and its head lights up, with a glint going over it once */
.kennis .cards b { position: relative; overflow: hidden; transition: filter .15s; }
.kennis .cards a:hover b { filter: saturate(1.6); }
.kennis .cards b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%); transform: translateX(-110%); pointer-events: none; }
.kennis .cards a:hover b::after { transform: translateX(110%); transition: transform .65s ease-out; }
@media (prefers-reduced-motion: reduce) { .kennis .cards b::after { display: none; } }
.kennis .cards b { display: block; color: #2b3f93; }
.kennis .cards span { display: block; color: #666; font-size: .88em; margin-top: 2px; }
.kennis .cards .lang { display: inline-block; font-size: .72em; font-weight: bold; color: #cd1165; margin-top: 4px; }
.kennis .photo { float: right; margin: 0 0 10px 16px; transform: rotate(2deg); box-shadow: 0 3px 10px rgba(0, 0, 0, .25); border: 6px solid #fff; }
.kennis .text .answer { background: #fbf2a8; border: 0; border-radius: 2px; box-shadow: 0 4px 10px rgba(80, 70, 0, .22); transform: rotate(-.6deg);
                        padding: 14px 18px; font-family: inherit; }
.kennis .text .lead { font-size: 1.15em; color: #333; }
.kennis .toc { background: #f3f7fc; border-radius: 10px; padding: 10px 14px; margin: 12px 0; display: inline-block; }
.kennis .toc ol { margin: 4px 0 0; padding-left: 20px; }
.kennis .step { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; margin-right: 6px;
                border-radius: 50%; background: linear-gradient(#ee3399, #cd1269); color: #fff; font-size: .8em; vertical-align: 2px; }
.kennis .talk { margin: 10px 0 14px; }
.kennis .talk p { position: relative; max-width: 78%; margin: 0 0 8px; padding: 8px 12px; border-radius: 14px; background: #eef8fe; }
.kennis .talk p b { display: block; font-size: .8em; color: #2b3f93; }
.kennis .talk p.you { margin-left: auto; background: #fde7f1; }
.kennis .tip { background: #fff7e0; border-left: 5px solid #f2a33a; border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.kennis .tip b:first-child { color: #c46f00; }
.kennis .test { background: #f2f9f2; border: 1px dashed #7fb07f; border-radius: 10px; padding: 10px 14px; margin: 14px 0; }
.kennis .test summary { cursor: pointer; font-weight: bold; color: #2b6f2b; }
.kennis .test p { margin: 8px 0 0; }
.kennis .shot { margin: 14px 0; }
.kennis .shot img { max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 3px 12px rgba(0, 0, 0, .2); }
.kennis .shot figcaption { font-size: .85em; color: #666; margin-top: 4px; }
.kennis .practice { display: flex; gap: 12px; align-items: center; margin: 18px 0 0; padding: 12px 14px; border-radius: 10px;
                    background: linear-gradient(#eef8fe, #dff1fc); border: 1px solid #b9e3f7; text-decoration: none; }
.kennis .practice img { width: 48px; height: 48px; }
.kennis .practice b { display: block; color: #2b3f93; }
.kennis .text table tr:nth-child(even) td { background: #f7f9fc; }

/* a little more businesslike and fresh, for professionals: the short answer a clean card instead of a tilted note,
   navy steps, calmer balloons and tips; the humour is in the words, one dry line per article (.wink) */
.kennis .text .answer { background: #fff; border: 1px solid #dbe4f0; border-left: 4px solid #2b3f93; border-radius: 10px; transform: none;
                        box-shadow: 0 2px 8px rgba(40, 60, 120, .08); }
.kennis .step { background: #2b3f93; }
.kennis .talk p { background: #f3f6fb; border: 1px solid #e3e9f3; }
.kennis .talk p.you { background: #eaf6fd; border-color: #cfe9f8; }
.kennis .tip { background: #f6f9fc; border-left: 4px solid #73d2f7; }
.kennis .tip b:first-child { color: #2b3f93; }
.kennis .test { background: #fbfcfe; border: 1px solid #dbe4f0; }
.kennis .test summary { color: #2b3f93; }
.kennis .photo { transform: rotate(1.5deg); }
.kennis .wink { font-style: italic; color: #5a6585; border-top: 1px solid #e3e9f3; padding-top: 8px; margin-top: 16px; }
/* Partnertip: for the partner (or a friend, a colleague) who practises with the learner at home; what to do together, in
   daily life, in a few minutes. Someone who tells you, a round avatar (images/kennis/partner.svg) and the tip in a balloon
   beside it, in the TaalTaal magenta, so it is recognised in every article; from behind the avatar hangs a ribbon in the
   two TaalTaal colours. The markup is only <div class=partner><p> */
.kennis .partner { display: grid; grid-template-columns: 68px minmax(0, 1fr); column-gap: 10px; align-items: start; margin: 18px 0; }
.kennis .partner::before { content: ""; position: relative; z-index: 1; grid-column: 1; grid-row: 1; justify-self: center; width: 52px;
                           height: 52px; margin-top: 4px; border-radius: 50%; border: 3px solid #fff; background: url(/images/kennis/partner.svg) center / cover; box-shadow: 0 2px 6px rgba(150, 10, 80, .25); }
/* the ribbon: two narrow tails in the two TaalTaal colours, together at the top and a little apart below, each cut in a V;
   the partner who helps is worn as a prize (said nowhere, a detail for who sees it) */
.kennis .partner::after { content: ""; grid-column: 1; grid-row: 1; justify-self: center; width: 26px; height: 58px; margin-top: 44px;
                          background: linear-gradient(90deg, #cd1165 50%, #73d2f7 50%); filter: drop-shadow(0 1px 1px rgba(60, 20, 50, .25));
                          clip-path: polygon(8% 0, 92% 0, 100% 100%, 80% 87%, 59% 100%, 50% 10%, 41% 100%, 20% 87%, 0 100%); }
.kennis .partner p { grid-column: 2; grid-row: 1; position: relative; margin: 4px 0 0; padding: 10px 14px; border-radius: 14px;
                     background: #fdf3f8; border: 1px solid #f4d2e3; }
.kennis .partner p::before { content: ""; position: absolute; left: -8px; top: 22px; width: 14px; height: 14px; background: #fdf3f8;
                             border-left: 1px solid #f4d2e3; border-bottom: 1px solid #f4d2e3; transform: rotate(45deg); }
.kennis .partner p b:first-child { display: block; margin-bottom: 2px; color: #cd1165; }
.kennis .flags { display: block; max-width: 100%; height: auto; margin: 22px 0 4px; }
/* the photo is a polaroid of its own (taal_nl.png has its frame and shadow): no second box */
.kennis .photo { border: 0; box-shadow: none; }

/* per language (/kennis, /kennis/nederlands): the languages as polaroids, a level on every topic,
   and all topics A-Z in two columns with a filter, so a hundred of them stay easy to find */
.kennis .languages { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 14px 0; padding: 0; }
.kennis .languages li:before { display: none; }
.kennis .languages a { display: block; width: 160px; text-align: center; text-decoration: none; }
.kennis .languages img { display: block; margin: 0 auto 4px; transform: rotate(-1.5deg); transition: transform .15s; }
.kennis .languages a:hover img { transform: rotate(0) scale(1.03); }
.kennis .languages b { display: block; color: #2b3f93; font-size: 1.15em; }
.kennis .languages span { color: #666; font-size: .85em; }
.kennis .level { display: inline-block; font-style: normal; font-size: .72em; font-weight: bold; color: #2b3f93; background: #eaf2fb;
                 border-radius: 6px; padding: 0 5px; vertical-align: 2px; }
.kennis .cards .level { margin-top: 5px; }
.kennis .navigation .level { margin-left: 4px; font-size: .85em; }
.kennis .all { margin-top: 22px; }
.kennis .all h3 { color: #2b3f93; margin: 0 0 6px; }
.kennis .all .filter { width: 100%; max-width: 360px; box-sizing: border-box; padding: 6px 10px; border: 1px solid #cdd6e4; border-radius: 8px;
                       font: inherit; margin-bottom: 8px; }
.kennis .all ul { columns: 2; column-gap: 24px; list-style: none; margin: 0; padding: 0; }
.kennis .all li { break-inside: avoid; padding: 2px 0 2px 15px; position: relative; }
.kennis .all li:before { content: ""; position: absolute; left: 0; top: .75em; transform: translateY(-50%); width: 8px; height: 8px;
                         background: url("/images/icons/bstone2.gif") no-repeat; background-size: contain; }
@media (max-width: 600px) { .kennis .all ul { columns: 1; } }

/* the languages page as rows (polaroid, then the newest topics) with the language fact on its note
   beside them; the page of a language with its banner, its note, a colour per group and the levels as buttons */
.kennis .row { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid #dde3ee; border-radius: 12px;
               padding: 12px 14px; margin: 0 0 12px; box-shadow: 0 1px 3px rgba(40, 50, 90, .08); }
.kennis .row .pol > a img { display: block; transform: rotate(-1.5deg); }
.kennis .row > div { min-width: 0; }
.kennis .row h3 { margin: 2px 0 6px; font-size: 1.2em; }
.kennis .row h3 a { color: #2b3f93; text-decoration: none; }
.kennis .row h3 span { font-size: .7em; font-weight: normal; color: #777; }
.kennis .side { float: right; width: 210px; margin: 70px 0 10px 18px; }
.kennis .banner { display: block; width: 100%; max-width: 709px; height: auto; border-radius: 10px; margin: 6px 0 4px; clear: both; }
.kennis .cards.g-leren a { border-top: 3px solid #73d2f7; }
.kennis .cards.g-leven a { border-top: 3px solid #cd1165; }
.kennis .cards.g-werken a { border-top: 3px solid #f2a33a; }
.kennis .levels { display: inline-flex; gap: 6px; margin: 0 0 8px 10px; flex-wrap: wrap; }
.kennis .levels button { font: inherit; font-size: .9em; cursor: pointer; border: 1px solid #cdd6e4; background: #fff; color: #2b3f93;
                         border-radius: 999px; padding: 3px 10px; }
.kennis .levels button.on { background: #2b3f93; color: #fff; border-color: #2b3f93; }
@media (max-width: 600px) { .kennis .side { float: none; width: auto; margin: 10px 0; } .kennis .row { flex-direction: column; } }

/* the languages page again: the note on top, a row per language over the width on
   paper of its own colour, lifted a little off the page, its topics a striped table */
.kennis .weetje { max-width: 380px; margin: 4px 0 18px 10px; transform: rotate(-.8deg); }
.kennis .row { background: #fdf6ec url("/images/kennis/paper.png"); border: 1px solid rgba(120, 95, 60, .18); border-radius: 4px;
               box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 3px 8px rgba(70, 55, 30, .18), 0 1px 2px rgba(70, 55, 30, .2);
               padding: 14px 16px; margin: 0 0 16px; }
.kennis .row.lang-nl { background-color: #fff2e4; }
.kennis .row.lang-en { background-color: #edf3fb; }
.kennis .row.lang-es { background-color: #fdf6dc; }
.kennis .row > div { flex: 1; }
.kennis .row h3 { margin: 0 0 8px; }
.kennis .recent { width: 100%; border-collapse: collapse; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(60, 60, 90, .12); }
.kennis .recent td { padding: 5px 10px; background: #fff; }
.kennis .recent tr:nth-child(even) td { background: #eaf4fc; }
.kennis .recent a { text-decoration: none; }
.kennis .recent .lv { width: 1%; white-space: nowrap; text-align: right; font-size: .78em; font-weight: bold; color: #2b3f93; }

/* on a desktop the language fact sits top right, where a page otherwise has its sticky note
; the flag beside a language's name; the polaroid
   with less room around it, half over the edge of its paper and onto the clipboard ("overlappen op de rand... van het
   clipboard"); a soft shadow behind the tables */
.kennis { position: relative; }
@media (min-width: 760px)
{
    /* up beside the buttons and a little over the right edge, as the sticky note lies; the heading keeps clear of it */
    .kennis .weetje { position: absolute; top: -36px; right: -26px; width: 220px; margin: 0; transform: rotate(2deg); z-index: 2; }
    .kennis .head { max-width: 470px; }
}
.kennis .row h3 .flag { vertical-align: 1px; margin-right: 2px; }
.kennis .row { padding: 10px 14px 12px 0; gap: 10px; margin-left: 0; margin-bottom: 30px; }
.kennis .row > .pol { flex: none; width: 160px; margin: 4px 0 -20px -44px; position: relative; z-index: 1; }
.kennis .recent { box-shadow: 0 2px 7px rgba(60, 45, 20, .16), 0 1px 1px rgba(60, 45, 20, .1); }
@media (max-width: 600px) { .kennis .row { margin-left: 0; padding-left: 14px; } .kennis .row > a { margin: 0; } }
/* the name of a language on a label of its own, as written on a slip on the paper  */
.kennis .row h3 { display: inline-block; background: rgba(255, 255, 255, .78); border: 1px solid rgba(120, 95, 60, .2); border-radius: 4px;
                  padding: 3px 12px 4px; box-shadow: 0 1px 3px rgba(70, 55, 30, .15); transform: rotate(-.6deg); margin: 0 0 10px; }
/* the label yellow, as a note, and over the top edge of its paper; the paper without a margin of its own on the left,
   only the page's room to the clipboard ("box links heeft nu een marge, haal die weg") */
.kennis .row h3 { background: #fdf3a7; border-color: rgba(150, 120, 20, .25); margin: -24px 0 8px; position: relative; z-index: 1; }
/* the label in a fresh light blue instead  */
.kennis .row h3 { background: #e3f5fd; border-color: rgba(70, 150, 200, .35); }
/* a soft gradient on the labels, and a few trinkets on the right of each paper: a strip of tape over the top right
   corner, as on the language fact (the stamp that was here made way for the dots below); drawn here, without pictures */
.kennis .row h3 { background: linear-gradient(#f4fbff, #d4eefb); }
.kennis .row { position: relative; }
/* the tape subtler and at another angle per language, and instead of the stamp three cheerful dots
   at the top right, in the spirit of the buttons of a window on a Mac but in the colours of TaalTaal  */
.kennis .row::after
{
    content: "";
    position: absolute;
    top: -4px;
    right: -10px;
    width: 54px;
    height: 13px;
    transform: rotate(34deg);
    background: linear-gradient(rgba(245, 243, 235, .6), rgba(232, 229, 215, .45));
    border-left: 1px dashed rgba(0, 0, 0, .08);
    border-right: 1px dashed rgba(0, 0, 0, .08);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.kennis .row.lang-en::after { transform: rotate(22deg); top: -2px; }
.kennis .row.lang-es::after { transform: rotate(46deg); top: -6px; right: -12px; }
.kennis .row::before
{
    content: "";
    position: absolute;
    top: 14px;
    right: 58px;
    width: 44px;
    height: 12px;
    background:                                     /* a little shine on each, then the three dots */
        radial-gradient(circle at 4px 4px, rgba(255, 255, 255, .9) 0 1.4px, transparent 2.6px),
        radial-gradient(circle at 20px 4px, rgba(255, 255, 255, .9) 0 1.4px, transparent 2.6px),
        radial-gradient(circle at 36px 4px, rgba(255, 255, 255, .9) 0 1.4px, transparent 2.6px),
        radial-gradient(circle at 6px 6px, #ef5d9c 0 5px, transparent 5.6px),
        radial-gradient(circle at 22px 6px, #73d2f7 0 5px, transparent 5.6px),
        radial-gradient(circle at 38px 6px, #f6c945 0 5px, transparent 5.6px);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
    pointer-events: none;
}
@media (max-width: 600px) { .kennis .row::after { right: -6px; } .kennis .row::before { display: none; } }
.kennis .row .more { display: inline-block; margin-top: 8px; font-weight: bold; text-decoration: none; }
/* a topic shown in the other language, with its language after it (EN on the Dutch pages, NL on the English) */
.kennis .in { display: inline-block; font-style: normal; font-size: .68em; font-weight: bold; color: #cd1165; border: 1px solid rgba(205, 17, 101, .35);
              border-radius: 5px; padding: 0 4px; margin-left: 5px; vertical-align: 2px; }
/* the name of a language as the tab of a file: rounded at the top, its bottom on the table, its top
   out over the paper, in the grey of an archive; the dots further right, pressed into a small inset ("meer naar rechts... of een klein indent/insetje") */
.kennis .row h3 { display: inline-block; transform: none; margin: -24px 0 0; padding: 5px 14px 5px; border-radius: 8px 8px 0 0;
                  background: linear-gradient(#f1efea, #dedad1); border: 1px solid rgba(110, 100, 80, .28); border-bottom: 0;
                  box-shadow: 0 -1px 2px rgba(60, 50, 30, .08); }
.kennis .row h3 span { color: #6b6559; }
.kennis .row .recent { border-top-left-radius: 0; border-top: 3px solid #dedad1; }
.kennis .row::before
{
    right: 30px;
    top: 12px;
    width: 52px;
    height: 16px;
    border-radius: 9px;
    background:
        radial-gradient(circle at 10px 6px, rgba(255, 255, 255, .9) 0 1.3px, transparent 2.4px),
        radial-gradient(circle at 26px 6px, rgba(255, 255, 255, .9) 0 1.3px, transparent 2.4px),
        radial-gradient(circle at 42px 6px, rgba(255, 255, 255, .9) 0 1.3px, transparent 2.4px),
        radial-gradient(circle at 11px 8px, #ef5d9c 0 4.6px, transparent 5.2px),
        radial-gradient(circle at 27px 8px, #73d2f7 0 4.6px, transparent 5.2px),
        radial-gradient(circle at 43px 8px, #f6c945 0 4.6px, transparent 5.2px),
        rgba(90, 75, 45, .08);
    box-shadow: inset 0 1px 2px rgba(60, 45, 20, .28), 0 1px 0 rgba(255, 255, 255, .6);
    filter: none;
}
/* the link to all topics quieter and in line with the words of the table, with the small grey
   arrow of the site in front  */
.kennis .row .more { font-weight: normal; margin: 8px 0 0 10px; }
.kennis .row .more img { vertical-align: -1px; margin-right: 3px; }
/* the tab further out over the paper and in the light grey the site gives the heads of its tables
   (.events_widget th: #fff, #eee, #ccc) - "het tabje moet meer uitsteken, minstens 5-6 pixels; en zoals we tables normaal
   vormgeven, meer lichtgrijs zoals elders"; the inset with the dots right in line with the table ("uitlijnen op tabel, geen
   probleem als plakbandje erover gaat"); under the polaroid the topics per level and the course of the language; the levels
   in the colours of the ERK table (css/extra_widgets.css: A green, B magenta, C blue) */
.kennis .row h3 { margin-top: -30px; background: linear-gradient(#fff, #eee, #ccc 130%); border-color: #c9c9c9; }
.kennis .row h3 span { color: #777; }
.kennis .row .recent { border-top: 3px solid #d8d8d8; }
.kennis .row::before { right: 14px; top: -9px; }
.kennis .pol .sum { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 12px 0 0 12px; font-size: .85em; color: #666; }
.kennis .pol .course { display: block; margin: 8px 0 0 12px; font-size: .9em; text-decoration: none; }
.kennis .pol .course img { vertical-align: -1px; margin-right: 3px; }
.kennis .level { color: #fff; background: #2b3f93; padding: 1px 5px; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.kennis .level.lv-A { background: linear-gradient(#6b6, #393); }
.kennis .level.lv-B { background: linear-gradient(#f39, #c70765); }
.kennis .level.lv-C { background: linear-gradient(#67a9c5, #489); }
.kennis .level.lv-all { background: linear-gradient(90deg, #393, #c70765, #489); }
.kennis .recent .lv .level { font-size: 1em; }
.kennis .levels button.level { background: #fff; text-shadow: none; border-width: 1px; }
.kennis .levels button.lv-A { color: #393; border-color: #6b6; }
.kennis .levels button.lv-B { color: #c70765; border-color: #f39; }
.kennis .levels button.lv-C { color: #489; border-color: #67a9c5; }
.kennis .levels button.level.on { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.kennis .levels button.lv-A.on { background: linear-gradient(#6b6, #393); }
.kennis .levels button.lv-B.on { background: linear-gradient(#f39, #c70765); }
.kennis .levels button.lv-C.on { background: linear-gradient(#67a9c5, #489); }
@media (max-width: 600px) { .kennis .row > .pol { margin: 0; } }
/* everything under the polaroid inside the paper (the polaroid itself still over the edge), the
   inset with the dots inside the box too; the arrow of the course link was a block through the polaroid rule; the note 15px lower;
   the table a little higher, and with that no dots any more ("als de hele content wat omhoog gaat dan is er rechts misschien
   niks nodig en kunnen de bolletjes weg") */
.kennis .row > .pol { margin-bottom: 0; }
.kennis .row { padding-top: 2px; }
.kennis .row::before { display: none; }
@media (min-width: 760px) { .kennis .weetje { top: -21px; } }
/* the tab half out over the paper and straight on its table, the list moving up with it;
   under the polaroid, inside its own width, the ladder of the ERK with the levels of this language lit up, and the course as
   a label ("iets anders verzinnen, en geen extra horizontale ruimte gebruiken") */
.kennis .row > .pol + div { margin-top: 10px; }
.kennis .row h3 { display: block; width: fit-content; }
.kennis .pol .ladder { display: flex; gap: 2px; margin: 12px 0 0 52px; }
.kennis .pol .ladder i { flex: none; width: 16px; font: bold 9px/15px Arial, sans-serif; text-align: center; color: #b3aa9a;
                         background: rgba(90, 75, 45, .08); border-radius: 2px; box-shadow: inset 0 1px 1px rgba(60, 45, 20, .18); }
.kennis .pol .ladder i.on { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); box-shadow: 0 1px 1px rgba(0, 0, 0, .15); }
.kennis .pol .ladder i.on.lv-A { background: linear-gradient(#6b6, #393); }
.kennis .pol .ladder i.on.lv-B { background: linear-gradient(#f39, #c70765); }
.kennis .pol .ladder i.on.lv-C { background: linear-gradient(#67a9c5, #489); }
.kennis .pol .course { display: inline-block; max-width: 92px; margin: 12px 0 0 52px; padding: 3px 8px 4px; font-size: .85em;
                       line-height: 1.25; text-decoration: none; background: #fff; border: 1px solid #ddd; border-radius: 2px;
                       box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transform: rotate(-1.5deg); }
@media (max-width: 600px) { .kennis .row > .pol + div { margin-top: 0; } .kennis .pol .ladder, .kennis .pol .course { margin-left: 12px; } }
/* an icon in front of every topic, glig's coloured set ("experimenteer met icons voor elk onderwerp
   in de tabel"), with the line metrics glig-icon gives them; the teacher box with Fleur's photo in the white frame, round corners
   and tilt she has on the front pages (.online_front_widget img.fleur) */
.kennis .recent .ico { width: 18px; height: 18px; vertical-align: -4px; margin-right: 8px; fill: transparent; stroke: currentColor;
                       stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: #5b6f9a; }
.kennis .teacher { position: relative; min-height: 70px; padding-left: 116px; }
.kennis .teacher .fleur { position: absolute; left: 14px; top: -14px; width: 84px; height: auto; border: 3px solid #fff;
                          border-radius: 20px; transform: rotate(-8deg); box-shadow: 0 0 5px #777; }
/* the table lies ON its tab: no line between them, the bottom of the tab a little darker as if in
   the table's shadow, and the tab rounder; no tape any more ("plakbandje rechtsboven weghalen, voegt niet zo veel toe"). Under
   the polaroid only the course, as a label half over the left edge of the paper, and a stamp and a train ticket of the
   language ("paar kleine skeuo items die relevant zijn voor de taal") - the page is also meant to impress our teachers */
.kennis .row .recent { border-top: 0; }
.kennis .row h3 { border-radius: 12px 12px 0 0; box-shadow: 0 -1px 2px rgba(60, 50, 30, .08), inset 0 -5px 5px -4px rgba(60, 50, 30, .3); }
.kennis .row::after { display: none; }
.kennis .pol .course { position: relative; z-index: 2; max-width: none; white-space: nowrap; margin: 14px 0 0 16px; padding: 4px 10px 5px;
                       font-size: .9em; transform: rotate(-2deg); }
@media (max-width: 600px) { .kennis .pol .props { display: none; } .kennis .pol .course { margin-left: 0; } }
/* 10px more room under the introduction on the languages page ("de marge daaronder 10px groter") */
.kennis .head.root p { margin-bottom: 26px; }
/* the course label in the yellow of the language fact's note and rounder ("'Cursus Nederlands' iets
   meer afgerond en doe maar kleurtje zoals van weetje"); under it three things of the language from glig's prop shelf,
   lying a little askew ("iets als een tulp, klomp, etc"); the tabs whiter and quieter ("te dominant, iets subtieler/witter") */
.kennis .pol .course { background: #fdf6a3; border: 0; border-radius: 6px; box-shadow: 0 2px 5px rgba(0, 0, 0, .16); }
.kennis .pol .props { position: relative; height: 104px; margin-top: 4px; }
.kennis .row h3 { background: linear-gradient(#fff, #f8f8f8); border-color: #e3e3e3;
                  box-shadow: 0 -1px 2px rgba(0, 0, 0, .04), inset 0 -4px 4px -3px rgba(0, 0, 0, .12); }
/* the room right of the polaroid as wide as the room right of the table ("marge rechts van polaroid
   moet even groot zijn als tabel tot box rand rechts"): the png has 10px of shadow on its right, so the column is narrower */
.kennis .row > .pol { width: 149px; }
/* each prop on a round sticker, the stickers partly over the left edge of the paper as the course
   label is ("zet de props in een soort ronde stickers, mag deels met rand links overlappen"); the label kept at least 5px from
   the table ("gele labeltje met cursusnaam minimaal 5px van tabel rand") */
.kennis .pol .props { height: 116px; margin-top: 8px; }
.kennis .pol .pr { position: absolute; width: 54px; height: 54px; padding: 6px; box-sizing: border-box; border-radius: 50%;
                   background: radial-gradient(circle at 35% 30%, #fff, #f1eee8); box-shadow: 0 2px 5px rgba(60, 45, 20, .22), inset 0 0 0 1px rgba(60, 45, 20, .06); }
.kennis .pol .pr glig-icon { display: block; width: 100%; height: 100%; }
.kennis .pol .pr-1 { left: 12px; top: 0; transform: rotate(-8deg); }
.kennis .pol .pr-2 { left: 72px; top: 8px; transform: rotate(7deg); }
.kennis .pol .pr-3 { left: 36px; top: 58px; transform: rotate(-3deg); }
.kennis .pol .course { margin-left: 4px; }
/* the label closer to the polaroid, more room between it and the stickers and a little between the
   stickers themselves, and the stickers in a light gradient ("meer marge tussen cursuslabel en de stickers; klein beetje marge
   tussen stickers onderling; minder marge tussen cursuslabel en polaroid"; "de sticker lichte gradient") */
.kennis .pol .course { margin-top: 6px; }
.kennis .pol .props { height: 122px; margin-top: 16px; }
.kennis .pol .pr { background: linear-gradient(155deg, #fff 0%, #f6f3ee 55%, #e4dfd4 100%); }
.kennis .pol .pr-2 { left: 76px; top: 6px; }
.kennis .pol .pr-3 { left: 42px; top: 64px; }
/* the name of the language on the polaroid beside its flag, in capitals as the front page has it
   (.front_index_widget a.foto: 11px bold, 38px in and 87px down on the same picture); the tilt moves from the picture to the
   link, so the name tilts along (the polaroid's link only: the course label is a link in.pol too) */
.kennis .row .pol > a:first-child { display: block; position: relative; transform: rotate(-1.5deg); text-decoration: none; }
.kennis .row .pol > a img { transform: none; }
.kennis .row .pol > a:first-child span { position: absolute; left: 38px; top: 87px; font-size: 11px; font-weight: bold; line-height: 13px; }
/* the stickers a little squarer and their gradient a shade lighter ("prop stickers misschien iets
   vierkanter? en fractie minder gradient") */
.kennis .pol .pr { border-radius: 16px; background: linear-gradient(155deg, #fff 0%, #f8f6f2 55%, #ebe7df 100%); }
/* the course label straight ("Cursuslabel gewoon horizontaal zetten, niet gedraaid") */
.kennis .pol .course { transform: none; }
/* the stickers a little closer to the table, the right one a little higher ("de props qua marge aan
   de rechterkant tot tabel net iets minder, en rechter prop fractie meer naar boven"); a sticker is a button now, and opens a
   card beside it with the Dutch word, a few lines about it and the word in English, Spanish and French ("als je erop klikt,
   moet er een popupje komen met wat het woord is plus uitleg en wat het in het Engels, Spaans en Frans is") */
.kennis .pol .pr-1 { left: 16px; }
.kennis .pol .pr-2 { left: 82px; top: 0; }
.kennis .pol .pr-3 { left: 47px; }
.kennis .pol button.pr { border: 0; margin: 0; cursor: pointer; font: inherit; transition: transform .15s ease-out, box-shadow .15s ease-out; }
.kennis .pol button.pr:hover, .kennis .pol button.pr[aria-expanded="true"] { box-shadow: 0 4px 9px rgba(60, 45, 20, .26), inset 0 0 0 1px rgba(60, 45, 20, .06); }
.kennis .pol button.pr-1:hover, .kennis .pol button.pr-1[aria-expanded="true"] { transform: translateY(-2px) rotate(-8deg); }
.kennis .pol button.pr-2:hover, .kennis .pol button.pr-2[aria-expanded="true"] { transform: translateY(-2px) rotate(7deg); }
.kennis .pol button.pr-3:hover, .kennis .pol button.pr-3[aria-expanded="true"] { transform: translateY(-2px) rotate(-3deg); }
.kennis .pol button.pr:focus-visible { outline: 2px solid #2b3f93; outline-offset: 2px; }
.kennis .pol .card { position: absolute; left: 146px; top: -6px; z-index: 5; width: 250px; padding: 12px 14px 10px; box-sizing: border-box;
                     background: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(60, 45, 20, .22), 0 1px 3px rgba(60, 45, 20, .15);
                     font-size: 13px; line-height: 1.45; color: #333; }
.kennis .pol .card[hidden] { display: none; }
.kennis .pol .card-3 { top: 52px; }
.kennis .pol .card h4 { display: flex; align-items: center; gap: 8px; margin: 0 22px 6px 0; font-size: 16px; color: #8a5a2b; }
.kennis .pol .card h4 glig-icon { flex: none; width: 34px; height: 34px; }
.kennis .pol .card p { margin: 0 0 8px; }
.kennis .pol .card ul { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 7px 0 0; list-style: none;
                        border-top: 1px dashed #e2dccf; color: #555; }
.kennis .pol .card li img { vertical-align: -1px; margin-right: 3px; }
.kennis .pol .card .close { position: absolute; right: 6px; top: 4px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
                            background: none; color: #999; font-size: 18px; line-height: 24px; cursor: pointer; }
.kennis .pol .card .close:hover { background: #f3f0ea; color: #555; }
@media (prefers-reduced-motion: reduce) { .kennis .pol button.pr { transition: none; } }
/* the column of the polaroid one layer up, so an open card lies over the tab of the next language */
.kennis .row > .pol { z-index: 2; }
/* the card opens over its own prop and pops out of it, growing from the sticker's middle to its
   size with a little overshoot ("de popup moet over de prop komen en 'ploppen', d.w.z. groeien naar het formaat"); the cross
   a clear round button ("de (x) moet duidelijker zijn") */
.kennis .pol .card { transform-origin: 33px 33px; animation: kennis-plop .28s cubic-bezier(.2, .9, .3, 1.25) both; }
.kennis .pol .card-1 { left: 10px; top: -6px; }
.kennis .pol .card-2 { left: 76px; top: -6px; }
.kennis .pol .card-3 { left: 41px; top: 58px; }
@keyframes kennis-plop { from { transform: scale(.22); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kennis .pol .card { animation: none; } }
.kennis .pol .card .close { right: 8px; top: 8px; width: 26px; height: 26px; background: #efe9de; color: #5a4a35; font-size: 19px;
                            font-weight: bold; line-height: 25px; box-shadow: inset 0 0 0 1px rgba(90, 74, 53, .18); }
.kennis .pol .card .close:hover { background: #e2d9c8; color: #2f2618; }
.kennis .pol .card .close:focus-visible { outline: 2px solid #2b3f93; outline-offset: 2px; }
.kennis .pol .card h4 { margin-right: 30px; }
/* the card grows from its own middle ("ok, maar vanuit center") */
.kennis .pol .card { transform-origin: center; }
/* the middle of the card over the middle of its prop, and growing from there ("ik wil dat het
   center van de popup over de prop is"); left/top are the middle of the sticker, the card is pulled back by half its size in
   the same transform the pop animates. The column with an open card goes above the next language's row, whose course label
   lies a layer up too ("de popup komt onder labeltje voor Engels") */
.kennis .pol .card { transform: translate(-50%, -50%); animation-name: kennis-plop-middle; }
.kennis .pol .card-1 { left: 43px; top: 27px; }
.kennis .pol .card-2 { left: 109px; top: 27px; }
.kennis .pol .card-3 { left: 74px; top: 91px; }
@keyframes kennis-plop-middle { from { transform: translate(-50%, -50%) scale(.22); opacity: 0; } 40% { opacity: 1; }
                                to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.kennis .row > .pol:has(.card:not([hidden])) { z-index: 4; }
/* on an article room between the practice block and 'More in...', more room before the teacher
   box, and Fleur's photo a little lower ("marge tussen het blauwe blokje en More in Learning Dutch; grotere marge naar het
   blokje met Fleur; haar foto 5-8px lager") */
.kennis .practice + .index { margin-top: 22px; }
.kennis .index + .teacher { margin-top: 38px; }
.kennis .teacher .fleur { top: -8px; }
.kennis .teacher { min-height: 78px; }      /* the lower photo stays inside its box */
/* the banner of a language at the top of its page, lower, as a window pressed into the paper (an
   inner shadow over the picture), with the language fact's note lying over its bottom right edge ("de banner moet bovenaan;
   een mooie inset schaduw of zo; sticky kan erover heen") */
.kennis .banner { position: relative; max-width: none; height: 130px; margin: 0 0 18px; border-radius: 10px; overflow: hidden; clear: both; }
.kennis .banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.kennis .banner::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
                         box-shadow: inset 0 3px 10px rgba(20, 30, 50, .45), inset 0 0 0 1px rgba(20, 30, 50, .18); }
@media (max-width: 600px) { .kennis .banner { height: 96px; } }
/* the icon of a group from glig's coloured set, in the line metrics of glig-icon, as the topics
   on /kennis have theirs */
.kennis .group-head .ico { flex: none; width: 30px; height: 30px; fill: transparent; stroke: currentColor; stroke-width: 2;
                           stroke-linecap: round; stroke-linejoin: round; color: #5b6f9a; }
/* the topic's icon also on its card and in the list A-Z of a language page, in the metrics of the
   table on /kennis; in the list it takes the place of the square bullet */
.kennis .cards .ico, .kennis .all .ico { width: 18px; height: 18px; vertical-align: -4px; margin-right: 7px; fill: transparent; stroke: currentColor;
                                         stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: #5b6f9a; }
.kennis .all li { padding-left: 0; }
.kennis .all li:before { display: none; }
/* the way to Google Translate on an article, a quiet white pill at the end of its row ("een knopje
   naar google translate") */
.kennis .navigation a.translate { margin-left: 10px; font-size: .95em; font-weight: normal; color: #5b6f9a; background: #fff; }
.kennis .navigation a.translate:hover { background: #f3f6fb; color: #2b3f93; }
.kennis .navigation a.translate .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; fill: transparent; stroke: currentColor;
                                       stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the way to Google Translate top right, in the row of the menu buttons above the article, and saying
   it is Google that translates ("rechts boven, in de rij met HOME, COURSES; duidelijker dat het een google translation is") */
.kennis > a.translate { position: absolute; right: 0; top: -38px; z-index: 2; display: inline-block; padding: 4px 10px; border: 1px solid #dde3ee;
                        border-radius: 12px; background: #fff; color: #5b6f9a; font-size: 13px; text-decoration: none; white-space: nowrap;
                        box-shadow: 0 1px 3px rgba(50, 50, 60, .15); }
.kennis > a.translate:hover { background: #f3f6fb; color: #2b3f93; }
.kennis > a.translate .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; fill: transparent; stroke: currentColor;
                             stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .kennis > a.translate { position: static; margin: 0 0 8px; } }
.kennis > a.translate .out { width: 12px; height: 12px; vertical-align: -1px; margin-left: 5px; fill: transparent; stroke: currentColor;
                             stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the teacher box more cheerful: warm paper from yellow to pink, Fleur saying hello in a speech
   balloon, the heading in TaalTaal blue and the intake as a real button in the magenta of the site's pills ("het blokje
   'Rather learn it with a teacher' fleuriger maken of zo") */
.kennis .teacher { background: linear-gradient(120deg, #fff8d9 0%, #ffeef3 100%); border: 1px solid #f3dcc8; box-shadow: 0 2px 7px rgba(60, 45, 20, .1);
                   padding-top: 16px; padding-bottom: 16px; line-height: 1.5; }
.kennis .teacher b { display: block; margin-bottom: 2px; font-size: 1.15em; color: #2b3f93; }
.kennis .teacher .hello { position: absolute; left: 82px; top: -18px; padding: 3px 9px 4px; border-radius: 12px 12px 12px 2px; background: #fff;
                          font-weight: bold; font-size: 13px; color: #c70765; box-shadow: 0 2px 5px rgba(0, 0, 0, .18); transform: rotate(-6deg); }
.kennis .teacher a.cta { display: inline-block; margin: 8px 0 0; padding: 5px 14px 6px; border-radius: 14px; font-weight: bold; color: #fff;
                         text-decoration: none; background: linear-gradient(#ee3399, #cd1269); box-shadow: 0 2px 4px rgba(150, 10, 80, .3); }
.kennis .teacher a.cta:hover { background: linear-gradient(#f44ca6, #d91a75); }
.kennis .teacher a.cta::after { content: " \203A"; }
.kennis .teacher a.cta { display: table; margin-top: 10px; }      /* on a line of its own, so the text keeps its rhythm */
/* the bottom sticker 5px further in, off the edge of the paper ("de middelste onder net 5px naar
   rechts, anders zit het net op/tegen de rand"); its card stays centred on it */
.kennis .pol .pr-3 { left: 52px; }
.kennis .pol .card-3 { left: 79px; }
/* 10px more between the languages, the tab of the next one stood close to the paper above ("iets
   meer marge tussen de taalblokken; Engels staat dicht op Nederlands") */
.kennis .row { margin-bottom: 40px; }
/* the icon of a practice block that has one of its own (the clock), as big as the pictures */
.kennis .practice .ico { flex: none; width: 48px; height: 48px; fill: transparent; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: #2b3f93; }

/* the share pill at the end of the row under a heading (lib/helpers/PageShare.php), as on the exercises */
.kennis .navigation:has(.row-end) { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.kennis .navigation .row-end { display: inline-flex; align-items: center; margin-left: auto; }

/* /kennis: the heading and Delen on one row, Delen on the right; Bo under it says what Kennis is */
.kennis .head.root { clear: both; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: none; margin-bottom: 6px; }
.kennis .head.root h1 { margin: 0; }
.kennis .head.root .row-end { margin-left: auto; }
.kennis .head.root + .tijs { margin: 20px 0 36px -6px; }     /* Bo under the heading, with room above and below his balloon */
.kennis .head.root + .tijs .mascot { position: relative; left: -5px; }     /* Bo himself a little further left, the balloon stays */
/* on a phone the topics come under the polaroid, and their tab (the h3, pulled up over the edge of its table) would lie over
   the course label: room for the tab first */
@media (max-width: 600px) { .kennis .row > .pol + div { margin-top: 38px; } }

/* the page of one language: the heading and both buttons in the banner, without a row of their own, and the note higher up
   beside them. The letters carry their own shade, so they read on any photo without a dark band over it */
.kennis .banner:has(h1) { overflow: visible; }
.kennis .banner:has(h1) img { border-radius: inherit; }
.kennis .banner h1 { position: absolute; z-index: 1; left: 20px; top: 10px; display: flex; align-items: center; gap: 9px; margin: 0; color: #fff; font-size: 2.2em; font-weight: bold;
                     text-shadow: 0 1px 2px rgba(10, 20, 50, .85), 0 0 12px rgba(10, 20, 50, .65), 0 0 28px rgba(10, 20, 50, .45); }
.kennis .banner .navigation { position: absolute; z-index: 3; top: 12px; right: 12px; gap: 8px; margin: 0; }
.kennis .banner .navigation .row-end { margin: 0; }
.kennis .banner h1 .flag { flex: none; width: 38px; height: 26px; border-radius: 3px; box-shadow: 0 1px 4px rgba(10, 20, 50, .55), 0 0 0 1px rgba(255, 255, 255, .25); }
/* the words and, beside them in a fixed place, the note, reaching up over the edge of the banner; the bottom of a note with
   a fact of three lines is level with the bottom of the words */
.kennis .lang-top { position: relative; margin-bottom: 16px; }
.kennis .lang-top .head { max-width: calc(100% - 228px); }
.kennis .lang-top .head p { margin: 0; }
.kennis .lang-top .side { position: absolute; z-index: 2; top: -66px; right: 0; float: none; margin: 0; }
.kennis .lang-top .side > * { margin: 0; }
/* on the photo the two buttons let a little of it through */
.kennis .banner .navigation a.back, .kennis .banner .navigation taaltaal-share[menu] .toggle { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.kennis .banner .navigation a.back:hover, .kennis .banner .navigation taaltaal-share[menu] .toggle:hover { background: rgba(255, 255, 255, .94); }
@media (max-width: 600px) { .kennis .banner:has(h1) { height: 108px; } .kennis .banner h1 { left: 14px; top: auto; bottom: 8px; gap: 7px; font-size: 1.75em; }
                            .kennis .banner h1 .flag { width: 28px; height: 19px; }
                            .kennis .lang-top .head { max-width: none; } .kennis .lang-top .side { position: static; width: auto; margin: 0 0 10px; } }
/* the level of a card in a fixed place, top right; the title keeps clear of it */
.kennis .cards a { position: relative; }
.kennis .cards .level { position: absolute; top: 9px; right: 9px; margin: 0; }
/* the way back: the same pill as Delen beside it (css/taaltaal-share.css), with a triangle to the left */
.kennis a.back { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 12px; border: 1px solid #dde3ee; border-radius: 14px;
                 background: #fff; color: #2b3f93; font: bold 13px/18px Arial, Verdana, Tahoma, sans-serif; white-space: nowrap; box-shadow: 0 1px 3px rgba(50, 50, 60, .15); text-decoration: none; }
.kennis a.back:hover { background: #f3f6fb; color: #2b3f93; }
.kennis a.back::before { content: ""; border-style: solid; border-width: 5px 7px 5px 0; border-color: transparent currentColor transparent transparent; }
.kennis .head.root .row-end { display: inline-flex; align-items: center; gap: 8px; }

/* the levels one by one, a color each in a fixed order: gold, green, sky blue, navy, teal, purple; as the table on /erk
   (css/extra_widgets.css). Dark enough for their letters to read at this size; A1 is light, with dark letters of its own color */
.kennis .level { padding: 2px 7px; }
.kennis .level.lv-A1, .kennis .levels button.lv-A1.on { background: linear-gradient(#fbd45c, #efb31f); color: #744a00; text-shadow: none; border-color: #efb31f; }
.kennis .levels button.lv-A1:not(.on) { color: #946c00; border-color: #fbd45c; }
.kennis .level.lv-A2, .kennis .levels button.lv-A2.on { background: linear-gradient(#379637, #1f761f); color: #fff; border-color: #1f761f; }
.kennis .levels button.lv-A2:not(.on) { color: #1f761f; border-color: #379637; }
.kennis .level.lv-B1, .kennis .levels button.lv-B1.on { background: linear-gradient(#2a9ad8, #127fba); color: #fff; border-color: #127fba; }
.kennis .levels button.lv-B1:not(.on) { color: #0a6ea6; border-color: #2a9ad8; }
.kennis .level.lv-B2, .kennis .levels button.lv-B2.on { background: linear-gradient(#2f4aa8, #1b2c7a); color: #fff; border-color: #1b2c7a; }
.kennis .levels button.lv-B2:not(.on) { color: #1b2c7a; border-color: #2f4aa8; }
.kennis .level.lv-C1, .kennis .levels button.lv-C1.on { background: linear-gradient(#0e939b, #07717a); color: #fff; border-color: #07717a; }
.kennis .levels button.lv-C1:not(.on) { color: #07717a; border-color: #0e939b; }
.kennis .level.lv-C2, .kennis .levels button.lv-C2.on { background: linear-gradient(#9a4bd6, #6f2bb0); color: #fff; border-color: #6f2bb0; }
.kennis .levels button.lv-C2:not(.on) { color: #6f2bb0; border-color: #9a4bd6; }
.kennis .level.lv-all { background: linear-gradient(90deg, #d99a10, #1f761f, #127fba, #1b2c7a, #07717a, #6f2bb0); }
/* a card: a head on a background of its own with an icon, a short title on one line and the level; what the title goes on to
   say opens the text under it. Its color is a light tint of its level with a line in the full color under it; light blue when it
   has a range of levels */
.kennis .cards a { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.kennis .cards.g-leren a, .kennis .cards.g-leven a, .kennis .cards.g-werken a { border-top: 1px solid #dde3ee; }
.kennis .cards b { display: flex; align-items: center; gap: 8px; padding: 6px 52px 6px 12px; background: #e4f5fd; border-bottom: 1px solid rgba(115, 210, 247, .7); line-height: 1.25; }
.kennis .cards b .ico { flex: none; width: 19px; height: 19px; margin: 0; color: #2b3f93; }
.kennis .cards a:has(.lv-A1) b { background: #fdf3d0; border-bottom-color: rgba(239, 179, 31, .7); }
.kennis .cards a:has(.lv-A2) b { background: #e5f3e5; border-bottom-color: rgba(55, 150, 55, .7); }
.kennis .cards a:has(.lv-B1) b { background: #dff1fb; border-bottom-color: rgba(42, 154, 216, .7); }
.kennis .cards a:has(.lv-B2) b { background: #e4e8f6; border-bottom-color: rgba(27, 44, 122, .7); }
.kennis .cards a:has(.lv-C1) b { background: #dff3f4; border-bottom-color: rgba(14, 147, 155, .7); }
.kennis .cards a:has(.lv-C2) b { background: #f3e6fb; border-bottom-color: rgba(111, 43, 176, .7); }
.kennis .cards span { display: block; margin: 0; padding: 8px 12px 11px; }
.kennis .cards span em { font-style: normal; font-weight: bold; color: #4a5a85; }
.kennis .cards .level { top: 5px; right: 8px; padding: 2px 8px; font-size: 13px; }
.kennis .cards b .in { flex: none; margin: 0; }
/* all topics of a language: the search in a round box with the levels beside it, the topics under each other in a table as on
   /kennis; its stripes follow what is left after searching (.alt), not the place in the table */
.kennis .all .tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid #d5e4f4; border-radius: 20px;
                      background: linear-gradient(120deg, #e8f6fd, #f3ecfb); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 3px 10px rgba(43, 63, 147, .2); }
.kennis .all .find { position: relative; flex: 1 1 260px; max-width: 380px; }
.kennis .all .find .ico { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; margin: -8px 0 0; color: #5b6f9a; vertical-align: 0; }
.kennis .all .filter { display: block; width: 100%; max-width: none; box-sizing: border-box; margin: 0; padding: 7px 16px 7px 37px; border: 1px solid #b9c5db; border-radius: 18px; background: #fff;
                       box-shadow: inset 0 1px 2px rgba(40, 50, 90, .1); font: inherit; }
.kennis .all .filter:focus { outline: 0; border-color: #73d2f7; box-shadow: 0 0 0 3px rgba(115, 210, 247, .3); }
.kennis .all .levels { margin: 0; }
.kennis .all .help { flex-basis: 100%; margin: 0 0 0 5px; font-size: 13px; line-height: 1.3; color: #5b6f9a; }
.kennis .all .help a { color: #2b3f93; text-underline-offset: 2px; }
.kennis .all .recent tr:nth-child(even) td { background: #fff; }
.kennis .all .recent tr.alt td { background: #eaf4fc; }
.kennis .all .recent .in { margin-left: 8px; }
/* the photo in the teacher box further left and lower, level with the words beside it; only a corner of it rises above them, by
   its tilt, and nothing sticks out above the box: on the page of a language 20px to what is above; 10px under it */
.kennis .teacher { padding-left: 124px; }
.kennis .teacher .fleur { left: 6px; top: 17px; }
.kennis .teacher .hello { left: 74px; top: 7px; }
.kennis .all ~ .teacher { margin-top: 20px; margin-bottom: 10px; }
/* /kennis, built as /oefenen: the heading on top, under it the slats and grass of the table on /oefenen: Bo on the edge with his
   balloon, a white bookcase beside the balloon, whose things can be clicked (taaltaal-bookcase.js) */
.kennis .head.root:has(+ .banner.hero) { margin-bottom: 1em; }
.kennis .head.root:has(+ .banner.hero) p { margin: 4px 0 0; }
.kennis .banner.hero { height: 166px; margin: 0 0 21px; overflow: visible; background: #e8caab url(/images/kennis/wall.svg?v=2) left bottom no-repeat; }
.kennis .banner.hero::after { box-shadow: inset 0 3px 10px rgba(20, 30, 50, .45), inset 0 -4px 18px -4px rgba(20, 30, 50, .16), inset 0 0 0 1px rgba(20, 30, 50, .18); }
.kennis .banner.hero .bookcase { position: absolute; right: 14px; bottom: 2px; display: block; width: 176px; height: 149px; }
.kennis .banner.hero .bookcase img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; filter: drop-shadow(0 2px 3px rgba(40, 20, 5, .4)); }
/* above the picture, whatever comes first: an element can be connected before its children are there, so its buttons may come first */
.kennis .bookcase .spot { position: absolute; z-index: 1; margin: 0; padding: 0; border: 0; border-radius: 2px; background: transparent; cursor: pointer; transition: background-color .12s; }
.kennis .bookcase .spot:hover { background: rgba(255, 255, 255, .28); }
.kennis .bookcase .spot[data-id="kast"]:hover { background: transparent; }
.kennis .bookcase .spot:focus-visible { outline: 2px solid #2b3f93; outline-offset: -2px; }
/* Bo's balloon with the word (.bo-say in his drawing) stands above his head, outside his box, and in front of everything: also of
   his glass balloon, which is a layer of its own */
.kennis .banner.hero .mascot { position: relative; z-index: 2; overflow: visible; }
.kennis .banner.hero .tijs { position: absolute; z-index: 3; left: 8px; bottom: -5.6px; align-items: flex-end; gap: 10px; margin: 0; }     /* his feet on the edge */
.kennis .banner.hero .tijs .mascot { width: 104px; }
/* the balloon of glass on the wall; of its point only the half outside the balloon, or the overlap would show through it */
.kennis .banner.hero .tijs .balloon { flex: 0 1 310px; width: 310px; max-width: 310px; margin-bottom: 29px; background: linear-gradient(120deg, rgba(255, 255, 255, .78), rgba(240, 245, 253, .66));
                                      border-color: rgba(255, 255, 255, .75); -webkit-backdrop-filter: blur(5px) saturate(1.2); backdrop-filter: blur(5px) saturate(1.2); }
.kennis .banner.hero .tijs .balloon::before { top: auto; bottom: 30px; left: -9.5px; margin-top: 0; background: rgba(255, 255, 255, .74); border-color: rgba(255, 255, 255, .75); clip-path: polygon(0 0, 0 100%, 100% 100%); }
/* to look in all languages at once: only the box, until it is used */
.kennis .all.everywhere { margin: 0 0 35px; }     /* the tab of the first language sticks out above its row */
.kennis .all.everywhere:not(.used) .tools { margin-bottom: 0; }
.kennis .all.everywhere:not(.used) table { display: none; }
.kennis .all .recent .flag { width: 18px; height: 12px; margin-right: 9px; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.kennis .all .none { margin: 8px 14px 0; color: #5b6f9a; }
@media (max-width: 600px) { .kennis .all.everywhere { margin-bottom: 19px; }
                            .kennis .banner.hero { height: auto; padding: 10px 8px 0; box-sizing: border-box; }
                            .kennis .banner.hero .bookcase { display: none; }
                            .kennis .banner.hero .tijs { position: static; }
                            .kennis .banner.hero .tijs .mascot { width: 70px; margin-bottom: -4px; }
                            .kennis .banner.hero .tijs .balloon { flex: 1; width: auto; max-width: none; margin-bottom: 16px; } }
/* under the table of a language on /kennis: all its topics on the left, the way to its exercises on the right */
.kennis .row .under { display: flex; align-items: baseline; }
.kennis .row .under .practise { margin: 8px 10px 0 auto; }
.kennis .row .under .practise img { margin: 0 0 0 3px; }
/* the tables of Oefenen, a table of contents as in a workbook: what, what it practises, which level */
.kennis .recent td.topic { color: #1b2c7a; font-size: .92em; }
@media (max-width: 600px) { .kennis .recent td.topic { display: none; } }