/* Teamscan-live — huisstijl overgenomen uit de originele Groei door Spanning-plugin
   (platform.css). Header (topbar), footer en tinten exact als op groeidoorspanning.nl. */

@font-face{
	font-family:'Montserrat Fallback';
	src:local('Arial');
	ascent-override:79%; descent-override:20.5%; line-gap-override:0%; size-adjust:111.5%;
}

.tsl-shell{
	--blauw:#5B9DB5; --blauw-d:#3D7A94; --blauw-dd:#2A5F78; --blauw-l:#E8F4F8;
	--geel:#F5C842; --geel-d:#D4A820;
	--comfort:#4d7c52; --weerstand:#a05a2c; --verkenning:#3D7A94; --verankering:#2A5F78;
	--zwart:#1A1A1A; --grijs:#5A5A5A; --rand:#C8DDE6; --wit:#fff; --bg:#edf4f7;
	--shadow:0 2px 16px rgba(61,122,148,.14);
	--font-display:'Proxima Nova','Montserrat','Montserrat Fallback',system-ui,sans-serif;
	--font-body:'Proxima Nova','Montserrat','Montserrat Fallback',system-ui,sans-serif;

	/* Vol-breed en gecentreerd, onafhankelijk van waar het thema het element plaatst. */
	position:relative;
	width:100vw; max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	font-family:var(--font-body);
	background:var(--bg);
	color:var(--zwart);
}
.tsl-shell *,.tsl-shell *::before,.tsl-shell *::after{box-sizing:border-box;}

/* ── Topbar (header) — vast bovenaan, volle breedte, met gele streep ── */
.tsl-shell{--tsl-topbar-h:64px;}
.tsl-shell .tsl-topbar{
	position:fixed; top:0; left:0; right:0; z-index:99990;
	display:flex; align-items:center; gap:16px;
	background:var(--blauw);
	padding:12px max(20px,4vw);
	height:var(--tsl-topbar-h); min-height:var(--tsl-topbar-h);
	box-shadow:0 2px 12px rgba(0,0,0,.18);
	flex-wrap:nowrap;
}
/* Gele accentstreep plakt onder de vaste header. */
.tsl-shell .tsl-topbar::after{
	content:''; position:absolute; left:0; right:0; top:100%;
	height:6px; background:var(--geel); pointer-events:none;
}
/* De inhoud schuift met de headerhoogte (+ gele streep) naar beneden,
   zodat niets achter de vaste header verdwijnt. */
.tsl-shell{padding-top:calc(var(--tsl-topbar-h) + 6px);}

/* Als de WordPress-adminbalk aanwezig is (ingelogde beheerder), zakt de
   plugin-header eronder zodat de balk zichtbaar blijft. */
body.admin-bar .tsl-shell .tsl-topbar{ top:32px; }
body.admin-bar .tsl-shell{ padding-top:calc(var(--tsl-topbar-h) + 6px + 32px); }
@media screen and (max-width:782px){
	body.admin-bar .tsl-shell .tsl-topbar{ top:46px; }
	body.admin-bar .tsl-shell{ padding-top:calc(var(--tsl-topbar-h) + 6px + 46px); }
}
.tsl-shell .tsl-logo{
	flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px;
	text-decoration:none;
}
.tsl-shell .tsl-logo-label{
	font-size:10px; letter-spacing:1.4px; text-transform:uppercase;
	color:rgba(255,255,255,.7); font-weight:700; line-height:1.2;
}
.tsl-shell .tsl-logo-titel{
	font-size:16px; font-weight:700; color:#fff; line-height:1.25;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tsl-shell .tsl-topbar-knop{
	display:inline-flex; align-items:center; height:38px; box-sizing:border-box;
	color:#fff; font-size:13px; font-weight:700; background:rgba(255,255,255,.16);
	padding:0 18px; border:1px solid rgba(255,255,255,.4); border-radius:7px;
	white-space:nowrap; text-decoration:none; transition:background .15s, border-color .15s;
}
.tsl-shell .tsl-topbar-knop:hover{ background:rgba(255,255,255,.28); border-color:#fff; color:#fff; }

/* ── Content-omhulsel ── */
.tsl-shell .tsl-inner{
	max-width:1040px; margin:0 auto; padding:26px max(20px,4vw) 40px;
}

/* ── Footer — overgenomen uit platform.css ── */
.tsl-shell .tsl-platform-footer{
	background:var(--blauw-dd); color:#fff; padding:30px 24px; text-align:center; margin-top:36px;
}
.tsl-shell .tsl-footer-links{
	display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-bottom:14px;
}
.tsl-shell .tsl-footer-links a{
	color:var(--blauw-l); text-decoration:none; font-size:14px; font-weight:600;
}
.tsl-shell .tsl-footer-links a:hover{color:var(--geel);}
.tsl-shell .tsl-footer-onder{font-size:12px; color:#9fc2d0;}

@media(max-width:640px){
	.tsl-shell .tsl-logo-titel{font-size:13px;}
	.tsl-shell .tsl-logo-label{font-size:9px;}
	.tsl-shell .tsl-inner{padding:18px 16px 24px;}
}

/* ── Kaarten ── */
.tsl-shell .tsl-box{
	background:var(--wit); border:1px solid var(--rand); border-radius:14px;
	padding:22px 24px; box-shadow:var(--shadow);
}
.tsl-shell .tsl-box h2{margin:0 0 14px; color:var(--blauw-dd); font-size:19px; font-weight:700; font-family:var(--font-display);}

/* ── Knoppen ── */
.tsl-shell .tsl-knop{
	display:inline-block; background:var(--geel); color:var(--zwart); border:none;
	padding:12px 22px; border-radius:8px; font-size:15px; font-weight:800; cursor:pointer;
	font-family:var(--font-body); text-decoration:none; line-height:1.2; transition:background .15s;
}
.tsl-shell .tsl-knop:hover{background:var(--geel-d); color:var(--zwart);}
.tsl-shell .tsl-knop-sec{
	background:var(--wit); color:var(--blauw-dd); border:1.5px solid var(--blauw);
	padding:10px 18px; font-size:14px; font-weight:700;
}
.tsl-shell .tsl-knop-sec:hover{background:var(--blauw-l); color:var(--blauw-dd);}

/* ── Formuliervelden ── */
.tsl-shell .tsl-tekstveld{
	width:100%; max-width:440px; padding:12px 14px; border:1.5px solid var(--rand);
	border-radius:10px; font-size:15px; font-family:var(--font-body); color:var(--zwart);
}
.tsl-shell .tsl-tekstveld:focus{outline:none; border-color:var(--blauw);}
.tsl-shell .tsl-getalveld{max-width:120px;}
.tsl-shell .tsl-checklabel{font-weight:700; color:var(--blauw-dd); font-size:14px;}
.tsl-shell .tsl-hint{font-size:12.5px; color:var(--grijs); line-height:1.5; display:inline-block; margin-top:4px;}
.tsl-shell p{margin:0 0 14px; font-size:14px; line-height:1.6;}
.tsl-shell p:last-child{margin-bottom:0;}

/* ── Tabbladen — mapjes met ronding bovenaan, onderaan het blauwe blok ── */
.tsl-shell .tsl-tabs{
	width:100%; max-width:1040px; margin:0 auto; padding:0 max(20px,4vw);
}
.tsl-shell .tsl-tabs-inner{
	display:flex; gap:4px; width:100%;
	background:var(--blauw-d); border-radius:0 0 14px 14px; padding:10px 14px 0;
}
.tsl-shell .tsl-tab{
	flex:1; text-align:center; padding:13px 8px 12px; font-size:12px; font-weight:800;
	letter-spacing:.5px; text-transform:uppercase; color:var(--wit); cursor:pointer;
	background:rgba(255,255,255,.12); border:none; border-radius:8px 8px 0 0;
	opacity:.72; transition:opacity .15s, background .15s, color .15s;
	font-family:var(--font-body); user-select:none; white-space:nowrap;
	display:flex; align-items:center; justify-content:center; gap:7px;
}
.tsl-shell .tsl-tab:hover{opacity:1;}
.tsl-shell .tsl-tab-actief{
	background:var(--bg); color:var(--blauw-d); opacity:1;
}
.tsl-shell .tsl-tab-nr{
	display:inline-flex; align-items:center; justify-content:center;
	width:20px; height:20px; background:rgba(255,255,255,.25); color:var(--wit);
	border-radius:50%; font-size:11px; font-weight:800; flex-shrink:0;
}
.tsl-shell .tsl-tab-actief .tsl-tab-nr{ background:var(--geel); color:var(--zwart); }
.tsl-shell .tsl-tab:disabled{opacity:.38; cursor:not-allowed;}
.tsl-shell .tsl-tab:disabled:hover{opacity:.38;}
@media(max-width:640px){
	.tsl-shell .tsl-tabs-inner{gap:2px; padding:8px 8px 0; overflow-x:auto;}
	.tsl-shell .tsl-tab{font-size:10px; padding:11px 5px 10px; letter-spacing:.2px;}
	.tsl-shell .tsl-tab-nr{width:17px; height:17px; font-size:10px;}
}
.tsl-shell .tsl-paneel.tsl-verberg{display:none;}

/* ── Sessiekiezer / scans ── */
.tsl-shell .tsl-sc-kies{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:760px){.tsl-shell .tsl-sc-kies{grid-template-columns:1fr;}}
.tsl-shell .tsl-sc-lijst{list-style:none; margin:0; padding:0;}
.tsl-shell .tsl-sc-item{display:flex; align-items:stretch; gap:8px; margin-bottom:9px;}
.tsl-shell .tsl-sc-open{
	flex:1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 15px;
	border:1px solid var(--rand); border-radius:10px; background:var(--wit);
	text-decoration:none; color:var(--zwart); transition:background .12s;
}
.tsl-shell .tsl-sc-open:hover{background:var(--blauw-l);}
.tsl-shell .tsl-sc-item-actief .tsl-sc-open{border-color:var(--blauw); border-width:2px; background:var(--blauw-l);}
.tsl-shell .tsl-sc-naam{font-weight:800; color:var(--blauw-dd); font-size:14px;}
.tsl-shell .tsl-sc-meta{font-size:12px; color:var(--grijs);}
.tsl-shell .tsl-sc-meta code{color:var(--blauw-d); background:none; padding:0; font-size:12px;}
.tsl-shell .tsl-sc-open .tsl-pill{margin-left:auto;}
.tsl-shell .tsl-sc-delform{display:flex;}
.tsl-shell .tsl-wis-knop{
	background:var(--wit); border:1px solid #e6c3b6; color:#a05a2c; border-radius:10px;
	padding:0 14px; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font-body); white-space:nowrap; transition:all .12s;
}
.tsl-shell .tsl-wis-knop:hover{background:#f7ede7; border-color:#a05a2c;}

/* ── Statuspillen ── */
.tsl-shell .tsl-pill{display:inline-block; padding:3px 11px; border-radius:20px; font-size:11px; font-weight:800;}
.tsl-shell .tsl-pill-open{background:#eaf3ec; color:#4d7c52;}
.tsl-shell .tsl-pill-dicht{background:#f7ede7; color:#a05a2c;}

/* ── Bord-kop ── */
.tsl-shell .tsl-bord-kop{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px;}
.tsl-shell .tsl-bord-titel{font-size:19px; font-weight:800; color:var(--blauw-dd); margin-right:10px; font-family:var(--font-display);}

/* ── Uitleg-tabblad ── */
.tsl-shell .tsl-h3{font-size:15px; font-weight:800; color:var(--blauw-dd); margin:22px 0 8px; font-family:var(--font-display);}
.tsl-shell .tsl-uitleg-zones{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin:12px 0 4px;}
@media(max-width:760px){.tsl-shell .tsl-uitleg-zones{grid-template-columns:1fr;}}
.tsl-shell .tsl-zone{border-radius:10px; padding:14px 16px; border:1px solid var(--rand);}
.tsl-shell .tsl-zone p{font-size:12.5px; line-height:1.55; color:#333; margin:0;}
.tsl-shell .tsl-zone-kop{font-size:12.5px; font-weight:800; margin-bottom:6px;}
.tsl-shell .tsl-zone-c{background:#eaf3ec; border-left:4px solid var(--comfort);}
.tsl-shell .tsl-zone-c .tsl-zone-kop{color:var(--comfort);}
.tsl-shell .tsl-zone-w{background:#f7ede7; border-left:4px solid var(--weerstand);}
.tsl-shell .tsl-zone-w .tsl-zone-kop{color:var(--weerstand);}
.tsl-shell .tsl-zone-h{background:var(--blauw-l); border-left:4px solid var(--verkenning);}
.tsl-shell .tsl-zone-h .tsl-zone-kop{color:var(--verkenning);}
.tsl-shell .tsl-stappen{margin:8px 0 4px; padding-left:20px; line-height:1.8; font-size:14px;}
.tsl-shell .tsl-note{
	background:#FFF8E6; border-left:4px solid var(--geel); border-radius:0 8px 8px 0;
	padding:14px 18px; margin:18px 0 4px; font-size:13.5px; line-height:1.55; color:#3a2f00;
}
.tsl-shell .tsl-note strong{color:var(--blauw-dd);}

/* ── QR-tabblad ── */
.tsl-shell .tsl-meedoen{text-align:center;}
.tsl-shell .tsl-meedoen-groot{max-width:460px; margin:0 auto;}
.tsl-shell .tsl-qr{width:190px; height:190px; margin:6px auto 12px; background:#fff; padding:8px; border:1px solid var(--rand); border-radius:12px;}
.tsl-shell .tsl-qr-groot{width:230px; height:230px;}
.tsl-shell .tsl-qr svg,.tsl-shell .tsl-qr canvas,.tsl-shell .tsl-qr img{width:100%!important; height:100%!important; display:block;}
.tsl-shell .tsl-code-groot{font-family:'Courier New',monospace; font-size:27px; font-weight:700; letter-spacing:5px; color:var(--zwart); margin:6px 0;}
.tsl-shell .tsl-link-rij{display:flex; gap:6px; margin-bottom:8px; max-width:420px; margin-left:auto; margin-right:auto;}
.tsl-shell .tsl-link-rij input{flex:1; min-width:0; font-size:12px; padding:8px 10px; border:1px solid var(--rand); border-radius:8px; font-family:var(--font-body);}

/* ── Voortgangsbalk ── */
.tsl-shell .tsl-voortgang{margin:20px auto 4px; max-width:340px; text-align:left;}
.tsl-shell .tsl-voortgang-kop{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; font-weight:700; color:var(--blauw-dd); margin-bottom:7px;}
.tsl-shell .tsl-voortgang-kop #tsl-vg-doel{color:var(--grijs); font-weight:600;}
.tsl-shell .tsl-voortgang-baan{height:14px; background:#e3edf1; border-radius:8px; overflow:hidden;}
.tsl-shell .tsl-voortgang-vulling{height:100%; width:0%; background:var(--blauw); border-radius:8px; transition:width .5s ease;}
.tsl-shell .tsl-voortgang-vulling.tsl-vg-vol{background:var(--comfort);}

/* ── Verandercurve-tabblad ── */
.tsl-shell .tsl-bordview{padding:18px 20px;}
.tsl-shell .tsl-bord-teller{font-size:13px; color:#555; margin-bottom:10px;}
.tsl-shell .tsl-bord-teller #tsl-aantal{font-weight:800; color:var(--blauw-dd); font-size:16px;}
.tsl-shell .tsl-live{float:right; font-size:12px; color:var(--comfort); font-weight:800;}
.tsl-shell .tsl-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--comfort); margin-right:5px; animation:tslpulse 1.6s infinite;}
@keyframes tslpulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.tsl-shell .tsl-curve-wrap{background:#fff; border:1px solid var(--rand); border-radius:12px; padding:8px;}
.tsl-shell .tsl-curve-wrap svg{display:block; width:100%; height:auto;}
.tsl-shell .tsl-legenda{display:flex; flex-wrap:wrap; gap:14px; margin:10px 0 16px; font-size:12px; color:#666;}
.tsl-shell .tsl-legenda .lg{display:inline-block; width:13px; height:13px; border-radius:50%; margin-right:5px; vertical-align:middle;}

.tsl-shell .tsl-verdeling{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:16px;}
@media(max-width:600px){.tsl-shell .tsl-verdeling{grid-template-columns:1fr;}}
.tsl-shell .tsl-verdeling .vd{border-radius:10px; padding:13px 15px; border:1px solid var(--rand);}
.tsl-shell .tsl-verdeling .vd.c{background:#eaf3ec; border-left:4px solid var(--comfort);}
.tsl-shell .tsl-verdeling .vd.w{background:#f7ede7; border-left:4px solid var(--weerstand);}
.tsl-shell .tsl-verdeling .vd.h{background:var(--blauw-l); border-left:4px solid var(--verkenning);}
.tsl-shell .tsl-verdeling .g{font-size:27px; font-weight:800; line-height:1;}
.tsl-shell .tsl-verdeling .vd.c .g{color:var(--comfort);}.tsl-shell .tsl-verdeling .vd.w .g{color:var(--weerstand);}.tsl-shell .tsl-verdeling .vd.h .g{color:var(--verkenning);}
.tsl-shell .tsl-verdeling .l{font-size:12px; font-weight:800; margin-top:4px;}
.tsl-shell .tsl-verdeling .s{font-size:11px; color:#777; margin-top:2px;}

.tsl-shell .tsl-analyse{background:var(--blauw-l); border-radius:12px; padding:16px 18px; margin-bottom:14px; border-left:4px solid var(--blauw-d);}
.tsl-shell .tsl-analyse .ta-titel{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--blauw-d); margin-bottom:10px;}
.tsl-shell .tsl-analyse .ta-k{background:#fff; border:1px solid var(--rand); border-radius:9px; padding:12px 15px; margin-bottom:9px;}
.tsl-shell .tsl-analyse .ta-k:last-child{margin-bottom:0;}
.tsl-shell .tsl-analyse .ta-kop{font-size:14px; font-weight:800; color:var(--blauw-dd); margin-bottom:4px; font-family:var(--font-display);}
.tsl-shell .tsl-analyse .ta-body{font-size:12.5px; line-height:1.5; color:#333;}
.tsl-shell .tsl-analyse .ta-wacht{font-size:13px; color:#666;}

.tsl-shell .tsl-leden .leden-titel{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:#777; margin-bottom:8px;}
.tsl-shell .tsl-leden .lid{display:flex; align-items:center; gap:10px; padding:8px 11px; border:1px solid var(--rand); border-radius:9px; background:#fff; margin-bottom:5px;}
.tsl-shell .tsl-leden .lid .d{width:13px; height:13px; border-radius:50%; flex-shrink:0;}
.tsl-shell .tsl-leden .lid .n{font-size:12.5px; font-weight:700; flex:1;}
.tsl-shell .tsl-leden .lid .f{font-size:12px; font-weight:800;}

/* Toegangsmelding */
.tsl-sc-melding{
	font-family:inherit; max-width:640px; margin:20px auto;
	background:#E8F4F8; border-left:4px solid #3D7A94; border-radius:0 12px 12px 0;
	padding:18px 22px; font-size:14.5px; color:#2A5F78; line-height:1.6;
}
.tsl-sc-melding a{color:#3D7A94; font-weight:700;}

/* ── Thema-header en -footer verbergen op de teamscan-pagina ──
   De plugin levert zijn eigen header/footer; we verbergen die van het
   Twenty Twenty-Five-thema zodat ze niet dubbel verschijnen.
   Gericht op de standaard template-parts van blok-thema's. */
body.tsl-verberg-thema-omhulsel > header.wp-block-template-part,
body.tsl-verberg-thema-omhulsel > footer.wp-block-template-part,
body.tsl-verberg-thema-omhulsel .wp-site-blocks > header.wp-block-template-part,
body.tsl-verberg-thema-omhulsel .wp-site-blocks > footer.wp-block-template-part,
body.tsl-verberg-thema-omhulsel .wp-block-site-title,
body.tsl-verberg-thema-omhulsel .wp-block-post-title{
	display:none !important;
}
/* Laat de content vol-breed lopen (thema-kolombeperking opheffen op deze pagina). */
body.tsl-verberg-thema-omhulsel .wp-block-post-content,
body.tsl-verberg-thema-omhulsel .entry-content,
body.tsl-verberg-thema-omhulsel main{
	max-width:none !important; margin:0 !important; padding:0 !important;
}
/* Witruimte boven de content wegnemen zodat de blauwe header strak
   tegen de bovenkant van de pagina sluit. */
body.tsl-verberg-thema-omhulsel .wp-site-blocks,
body.tsl-verberg-thema-omhulsel .wp-site-blocks > main,
body.tsl-verberg-thema-omhulsel .is-layout-flow,
body.tsl-verberg-thema-omhulsel .is-layout-constrained{
	margin-top:0 !important; padding-top:0 !important;
}
body.tsl-verberg-thema-omhulsel .wp-site-blocks{
	padding-left:0 !important; padding-right:0 !important;
}
/* Kleine marges van het thema rond de contentkolom wegnemen. */
body.tsl-verberg-thema-omhulsel .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
	max-width:none !important;
}

/* ── Stap-kop + tabs: blauwe kaart die tegen de header aansluit ── */
.tsl-shell .tsl-stapkop-host{
	width:100%; max-width:1040px; margin:0 auto; padding:0 max(20px,4vw);
}
.tsl-shell .tsl-stapkop{
	background:var(--blauw-d); border-radius:14px 14px 0 0; padding:34px 40px 26px;
	position:relative; overflow:hidden;
}
.tsl-shell .tsl-stapkop-kicker{
	font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
	color:rgba(255,255,255,.72); margin-bottom:12px;
}
.tsl-shell .tsl-stapkop h2{
	font-family:var(--font-display); font-size:34px; font-weight:800; color:#fff;
	line-height:1.08; margin:0 0 12px; padding:0; border:none;
}
.tsl-shell .tsl-stapkop-sub{
	color:rgba(255,255,255,.9); font-size:16px; line-height:1.5; margin:0; max-width:680px;
}
.tsl-shell .tsl-stapkop .tsl-pill{margin-top:14px; display:inline-block;}
@media(max-width:640px){
	.tsl-shell .tsl-stapkop{padding:22px 22px 18px; border-radius:12px 12px 0 0;}
	.tsl-shell .tsl-stapkop h2{font-size:25px;}
	.tsl-shell .tsl-stapkop-sub{font-size:14px;}
}

/* ── Inlogscherm (besloten instrument) ── */
.tsl-shell .tsl-stapkop-rond{ border-radius:14px; }
.tsl-shell .tsl-login-kaart{
	background:var(--wit); border:1px solid var(--rand); border-radius:14px;
	box-shadow:var(--shadow); padding:40px 36px; max-width:480px; margin:8px auto 0; text-align:center;
}
.tsl-shell .tsl-login-icoon{ font-size:40px; line-height:1; margin-bottom:14px; }
.tsl-shell .tsl-login-kaart h2{
	font-family:var(--font-display); color:var(--blauw-dd); font-size:22px; font-weight:800; margin:0 0 12px;
}
.tsl-shell .tsl-login-kaart p{ color:#444; font-size:15px; line-height:1.6; margin:0; }
.tsl-shell .tsl-login-hint{ font-size:13px !important; color:var(--grijs) !important; margin-top:18px !important; }
@media(max-width:640px){
	.tsl-shell .tsl-login-kaart{ padding:30px 22px; }
}

/* ── Opslaan als PDF ────────────────────────────────────────────────
   De curve staat als SVG in de pagina, dus wat op het scherm staat kan
   rechtstreeks naar papier of PDF. We verbergen alles behalve het
   teambeeld en trekken dat naar de bovenkant van de pagina.
   Er wordt bewust gewerkt met visibility in plaats van display: zo
   blijven de afmetingen van de SVG behouden en klopt de curve. */
.tsl-printknop{
  margin-left:auto; background:var(--blauw-dd,#2A5F78); color:#fff; border:none;
  border-radius:8px; padding:8px 14px; font-size:12.5px; font-weight:800;
  cursor:pointer; font-family:inherit; letter-spacing:.2px;
}
.tsl-printknop:hover{background:#1F4A5E}
.tsl-printkop{display:none}

@media print{
  /* Alles uit beeld, behalve het teambeeld. */
  body *{visibility:hidden !important}
  .tsl-paneel[data-paneel="curve"],
  .tsl-paneel[data-paneel="curve"] *{visibility:visible !important}
  .tsl-paneel[data-paneel="curve"]{
    position:absolute !important; left:0; top:0; width:100%;
    margin:0 !important; padding:0 !important;
  }
  /* Kop alleen op papier, knop en live-melding juist niet. */
  .tsl-printkop{display:block !important; margin:0 0 14px; border-bottom:2px solid #F5C842; padding-bottom:10px}
  .tsl-printkop-merk{font-size:10pt; letter-spacing:.12em; text-transform:uppercase; color:#3D7A94; font-weight:800}
  .tsl-printkop-titel{font-size:20pt; font-weight:800; color:#2A5F78; margin-top:2px}
  .tsl-printkop-datum{font-size:9.5pt; color:#5A5A5A; margin-top:2px}
  .tsl-printknop,
  .tsl-live{display:none !important}

  .tsl-box{box-shadow:none !important; border:none !important; padding:0 !important}
  /* Zonekleuren en stippen moeten mee de printer op. */
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
  /* Curve, verdeling en analyse niet over een paginarand heen breken. */
  .tsl-curve-wrap,.tsl-verdeling,#tsl-analyse{break-inside:avoid; page-break-inside:avoid}
  .tsl-curve-wrap{max-width:100%; margin-bottom:10mm}
  @page{size:A4 portrait; margin:14mm}
}