/* De kaartencollectie. Elke kaart is een container: alle maten binnenin staan
   in cqw, zodat dezelfde kaart klopt als miniatuur, in de envelop en groot. */

.kaart {
  container-type: inline-size; position: relative; width: 100%; aspect-ratio: 5 / 7; overflow: hidden;
  background: #fff; color: var(--inkt); text-align: left;
  border: 2px solid var(--inkt); border-radius: 3.6% / 2.6%; box-shadow: 0 4px 0 var(--inkt);
}
.kaart p, .kaart dl, .kaart ul { margin: 0; }
.kaart > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- omdraaien --- */
.flip { perspective: 1500px; width: 100%; aspect-ratio: 5 / 7; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3, .1, .2, 1); }
.flip[data-kant="achter"] .flip-in { transform: rotateY(180deg); }
.flip-kant { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-achter { transform: rotateY(180deg); }

/* --- 1 tegeltje --- */
.kaart--tegel { background: #D9E2EB; }
.k-muur { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5.5cqw;
  background: repeating-linear-gradient(0deg, transparent 0 13.6cqw, rgba(16, 29, 64, .06) 13.6cqw 14cqw); }
.k-spijker { width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--inkt); margin-bottom: -3.5cqw; }
.k-tegel { position: relative; width: 80cqw; aspect-ratio: 1; display: grid; place-items: center; background: #FDFCF7; rotate: -1.6deg;
  box-shadow: 0 1.4cqw 0 rgba(16, 29, 64, .28), 0 0 0 .5cqw rgba(16, 29, 64, .1); }
.k-tegel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.k-t-lijn { fill: none; stroke: #2B55A0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.k-t-dun { stroke-width: .9; }
.k-t-vul { fill: #2B55A0; }
.k-tegel p { position: relative; padding: 0 15cqw 12cqw; font: italic 600 7.9cqw/1.12 var(--serif); color: #2B55A0; text-align: center; }
.k-tegel em { font-style: italic; text-decoration: underline; text-decoration-thickness: .5cqw; text-underline-offset: 1cqw; }
.k-onder { font: 700 3.1cqw var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #4C5B7A; }

/* --- 2 goud --- */
.kaart--goud { background: radial-gradient(circle at 28% 18%, #26366F, #101D40 72%); }
.k-goud-rand { position: absolute; inset: 5cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5cqw; padding: 5cqw;
  border: .6cqw solid #D9A441; outline: .3cqw solid #D9A441; outline-offset: 1.3cqw; }
.k-goud-ster { width: 62cqw; fill: #E7BE5E; }
.k-goud-tekst { font: 600 12cqw/1.04 var(--serif); text-align: center; color: #F1D58B; }
.k-goud-tekst strong { display: block; padding: 0 3cqw 1cqw; font-size: 27cqw; font-style: italic; line-height: 1;
  background: linear-gradient(100deg, #B8862B, #F8E7A8 38%, #D9A441 58%, #FFF2C2 78%, #B8862B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-keur { padding-top: 3cqw; border-top: .3cqw solid #D9A441; font: 700 3.2cqw var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #D9A441; }
.k-glinster { position: absolute; inset: -20%; pointer-events: none; background: linear-gradient(115deg, transparent 43%, rgba(255, 255, 255, .26) 50%, transparent 57%); animation: glinster 4.8s ease-in-out infinite; }
@keyframes glinster { 0%, 55% { transform: translateX(-75%); } 100% { transform: translateX(75%); } }

/* --- formulieren: beoordeling en verlof --- */
.kaart--beoordeling { background: #FBF9F3; }
.kaart--verlof { background: #E4EFDD; }
.kaart--beoordeling header, .kaart--verlof header { display: flex; justify-content: space-between; align-items: baseline; margin: 7cqw 7cqw 0; padding-bottom: 2.2cqw; border-bottom: .7cqw solid var(--inkt); }
.kaart--beoordeling header span, .kaart--verlof header span { font: 600 3cqw ui-monospace, Menlo, monospace; color: var(--inkt-zacht); }
.kaart--beoordeling header strong, .kaart--verlof header strong { font: 700 7.4cqw var(--serif); }
.kaart--beoordeling dl { display: grid; grid-template-columns: auto 1fr; gap: 2cqw 3cqw; margin: 5cqw 7cqw 0; align-items: end; }
.kaart--beoordeling dt { font: 700 2.9cqw var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--inkt-zacht); padding-bottom: .6cqw; }
.kaart--beoordeling dd { margin: 0; border-bottom: .35cqw dotted var(--inkt); font: italic 600 5.4cqw/1.2 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-vinkjes { list-style: none; padding: 0; margin: 6cqw 7cqw 0 !important; display: grid; gap: 2.8cqw; font: 4.5cqw/1.2 var(--sans); }
.k-vinkjes li { display: flex; align-items: center; gap: 3cqw; color: var(--inkt-zacht); }
.k-vinkjes li::before { content: ''; flex: none; width: 5cqw; height: 5cqw; border: .5cqw solid var(--inkt); border-radius: .8cqw; display: grid; place-items: center; font: 800 4.6cqw/1 var(--sans); color: var(--cta); }
.k-vinkjes li.aan { font-weight: 700; color: var(--inkt); }
.k-vinkjes li.aan::before { content: '✓'; background: #FFE6D8; }
.k-toelichting { margin: 5cqw 7cqw 0 !important; font: italic 3.7cqw/1.4 var(--serif); color: var(--inkt-zacht); }
.k-stempel { position: absolute; right: 5cqw; bottom: 6cqw; max-width: 62cqw; padding: 2.2cqw 3.2cqw; border: .9cqw solid #C0392B; border-radius: 1.6cqw; color: #C0392B; rotate: -8deg;
  font: 700 2.9cqw/1.25 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-align: center; opacity: .88; mix-blend-mode: multiply; }
.k-stempel b { display: block; font-size: 4.3cqw; }
.k-stempel.k-groen { right: 8cqw; bottom: 14cqw; border-color: #2F7D46; color: #2F7D46; font-size: 6.4cqw; letter-spacing: .12em; rotate: -12deg; padding: 2.4cqw 4.4cqw; }
.k-veld { margin: 4.2cqw 7cqw 0; padding-bottom: 1.4cqw; border-bottom: .35cqw solid #2F5B3A; min-width: 0; }
.k-veld small { display: block; font: 700 2.8cqw var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #2F5B3A; }
.k-veld span { display: block; font: italic 600 5.4cqw/1.22 var(--serif); overflow-wrap: anywhere; }
.k-rij { display: grid; grid-template-columns: 1fr 1fr; }
.k-rij .k-veld:first-child { margin-right: 2cqw; } .k-rij .k-veld:last-child { margin-left: 2cqw; }
.kaart--verlof footer { position: absolute; left: 7cqw; right: 7cqw; bottom: 5cqw; font: 3cqw var(--sans); color: #4A6B50; }

/* --- 5 lichtjes --- */
.kaart--lichtjes { background: linear-gradient(180deg, #131B3D, #2A2961 58%, #4B3667); }
.k-snoer { fill: none; stroke: #080C1F; stroke-width: .7; }
.k-gloed { opacity: .26; }
.k-lampje { animation: twinkel 2.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes twinkel { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }
.kaart--lichtjes p { position: absolute; left: 8cqw; right: 8cqw; bottom: 10cqw; font: 600 13cqw/1.04 var(--serif); color: #FFF3D6; }
.kaart--lichtjes em { color: #FFD36E; }

/* --- 6 winteravond --- */
.kaart--winter { background: #2E3E73; }
.kaart--winter p { position: absolute; left: 8cqw; top: 10cqw; font: 600 11.5cqw/1.05 var(--serif); color: #fff; text-shadow: 0 .5cqw 0 rgba(16, 29, 64, .35); }
.k-vlok { animation: sneeuw var(--t) linear infinite; animation-delay: calc(var(--d) * -1); }
@keyframes sneeuw { from { transform: translate(0, -20px); } to { transform: translate(5px, 150px); } }
.k-raam { animation: twinkel 3.2s ease-in-out infinite; }

/* --- 7 agenda --- */
.kaart--agenda { background: repeating-linear-gradient(0deg, transparent 0 13.7cqw, #D7DDEA 13.7cqw 14cqw), #EEF1F7; }
.k-ag-dag { position: absolute; left: 4cqw; top: 7cqw; width: 15cqw; text-align: center; font: 600 3.3cqw var(--sans); color: var(--inkt-zacht); }
.k-ag-dag b { display: block; font: 800 5.4cqw var(--sans); text-transform: uppercase; color: var(--cta); }
.k-ag-blok { position: absolute; left: 21cqw; right: 5cqw; top: 7cqw; bottom: 8cqw; display: flex; flex-direction: column; gap: 3.2cqw; padding: 5cqw 4.6cqw;
  background: #fff; border-left: 1.8cqw solid #3B6BE0; border-radius: 2.4cqw; box-shadow: 0 1cqw 3cqw rgba(16, 29, 64, .14); }
.k-ag-blok small { font: 800 2.9cqw var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #3B6BE0; }
.k-ag-blok strong { font: 700 7.6cqw/1.12 var(--serif); }
.k-ag-blok dl { display: grid; grid-template-columns: auto 1fr; gap: 1.8cqw 3cqw; font: 3.6cqw/1.25 var(--sans); }
.k-ag-blok dt { color: var(--inkt-zacht); }
.k-ag-blok dd { margin: 0; font-weight: 650; }
.k-ag-knoppen { display: flex; flex-wrap: wrap; gap: 1.6cqw; margin-top: auto; }
.k-ag-knoppen span { padding: 1.9cqw 2.6cqw; border: .4cqw solid #C9D1E3; border-radius: 1.6cqw; font: 650 3.2cqw var(--sans); }
.k-ag-knoppen .ja { background: #3B6BE0; border-color: #3B6BE0; color: #fff; }
.k-ag-knoppen .nee { color: #9AA3B8; text-decoration: line-through; }
.k-ag-blok em { font: italic 3.1cqw/1.3 var(--serif); color: var(--inkt-zacht); }

/* --- 8 goede match --- */
.kaart--match { background: radial-gradient(circle at 50% 34%, #fff 0 30%, #FFF1E0 70%); }
.kaart--match > svg.k-ring { inset: auto; left: 19cqw; top: 11cqw; width: 62cqw; height: 62cqw; overflow: visible; }
.k-ring-l { fill: #101D40; animation: match-l 5.5s ease-in-out infinite; }
.k-ring-r { fill: #F76A2A; animation: match-r 5.5s ease-in-out infinite; }
@keyframes match-l { 0%, 18% { transform: translateX(-7px) rotate(-4deg); } 42%, 100% { transform: none; } }
@keyframes match-r { 0%, 18% { transform: translateX(7px) rotate(4deg); } 42%, 100% { transform: none; } }
.k-ring-l, .k-ring-r { transform-origin: 50px 50px; }
.kaart--match p { position: absolute; left: 8cqw; right: 8cqw; bottom: 9cqw; font: 600 6.4cqw/1.22 var(--serif); text-align: center; }
.kaart--match b { display: block; margin-top: 1.6cqw; font-style: italic; font-size: 9cqw; color: var(--cta); }

/* --- achterkant --- */
.kaart--achter { display: flex; flex-direction: column; background: #FFFDF6; }
.ka-kop { display: flex; justify-content: space-between; align-items: flex-start; margin: 6cqw 6cqw 2.5cqw; }
.ka-voor { font: italic 6.6cqw/1.2 var(--serif); overflow-wrap: anywhere; min-width: 0; }
.ka-voor b { font-weight: 700; }
.ka-merk { flex: none; width: 23cqw; color: var(--accent); opacity: .8; rotate: 7deg; }
.ka-tekst {
  flex: 1; min-height: 0; margin: 0 6cqw; padding: 0; overflow-y: auto; overscroll-behavior: contain;
  font: italic max(15px, 5.3cqw)/1.6 var(--serif); color: var(--inkt); white-space: pre-wrap; overflow-wrap: anywhere; text-align: left;
  background-image: linear-gradient(transparent calc(1.6em - 1px), rgba(16, 29, 64, .15) calc(1.6em - 1px)); background-size: 100% 1.6em; background-attachment: local;
  scrollbar-width: thin;
}
.kaart--achter[data-lengte="midden"] .ka-tekst { font-size: max(14.5px, 4.7cqw); }
.kaart--achter[data-lengte="lang"] .ka-tekst { font-size: max(14px, 4.1cqw); }
textarea.ka-invoer { display: block; border: 0; border-radius: 4px; resize: none; background-color: transparent; font-size: max(16px, 5.3cqw) !important; }
textarea.ka-invoer:focus-visible { outline: 2px dashed var(--cta); outline-offset: 5px; }
textarea.ka-invoer::placeholder { color: #8A90A6; font-style: italic; }
.ka-rest { visibility: hidden; }
.ka-tekst.meer { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
.ka-tekst.schrijft .ka-zicht::after { content: ''; display: inline-block; width: .09em; height: 1em; margin-left: .06em; vertical-align: -.12em; background: var(--cta); animation: caret .7s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ka-van { margin: 2.6cqw 6cqw 5.5cqw; text-align: right; font: 3.8cqw/1.3 var(--sans); color: var(--inkt-zacht); }
.ka-van b { display: block; font: italic 700 5.8cqw/1.15 var(--serif); color: var(--inkt); overflow-wrap: anywhere; }