.ttk {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
line-height: 1.4;
position: relative;
z-index: 0;
isolation: isolate;
}
.ttk .wrap {
max-width: 1100px;
margin: 0 auto;
padding: 24px 16px;
position: relative;
z-index: 1;
}
.ttk .ttk-nav{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin:0 0 16px;
padding:6px;
background:#f4f4f4;
border:1px solid #e6e6e6;
border-radius:16px;
width:fit-content;
max-width:100%;
position: relative;
z-index: 3;
}
.ttk .ttk-nav-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:10px 16px;
border-radius:12px;
text-decoration:none;
font-weight:900;
white-space:nowrap;
color:#333;
background:transparent;
border:1px solid transparent;
transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ttk .ttk-nav-link:hover{
background:#fff;
transform: translateY(-1px);
box-shadow:0 6px 14px rgba(0,0,0,.05);
}
.ttk .ttk-nav-link.is-active{
background:#2f6fef;
color:#fff;
border-color:#2f6fef;
box-shadow:0 6px 14px rgba(47,111,239,.25);
pointer-events:none;
}
.ttk .ttk-nav-link--mine{
color:#c80074;
}
.ttk .ttk-nav-link--mine:hover{
background:#fff0f7;
color:#9f005d;
}
.ttk .sub { color: #555; margin: 0 0 16px; }
.ttk .panel {
background:#fff;
border:1px solid #e6e6e6;
border-radius:14px;
overflow:hidden;
position:relative;
z-index:2;
}
.ttk .controls{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
justify-content:space-between;
padding:12px 14px;
border-bottom:1px solid #e6e6e6;
background:#f7f7f7;
position: relative;
z-index: 4;
}
.ttk .filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ttk .btn{
appearance:none;
border:1px solid #e0e0e0;
background:#fff;
border-radius:999px;
padding:8px 12px;
font-weight:650;
font-size:14px;
cursor:pointer;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
user-select:none;
display:inline-flex;
align-items:center;
gap:8px;
position: relative;
z-index: 1;
}
.ttk .btn:hover{ transform: translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.06); }
.ttk .btn.active{ border-color:#cfcfcf; background:#fafafa; }
.ttk .sort{ display:inline-flex; align-items:center; gap:10px; flex-wrap: wrap; }
.ttk label{ font-weight:650; font-size:14px; color:#333; }
.ttk select{
border:1px solid #e0e0e0;
background:#fff;
border-radius:10px;
padding:8px 10px;
font-weight:600;
font-size:14px;
position: relative;
z-index: 1;
}
.ttk .search{ display:inline-flex; align-items:center; gap:10px; }
.ttk .search input{
border:1px solid #e0e0e0;
background:#fff;
border-radius:10px;
padding:8px 10px;
font-weight:600;
font-size:14px;
min-width: 220px;
position: relative;
z-index: 1;
}
@media (max-width: 760px){ .ttk .search input{ min-width: 160px; } }
.ttk .mobile-only{ display:none; }
.ttk .desktop-only{ display:inline; }
@media (max-width: 760px){
.ttk .mobile-only{ display:inline; }
.ttk .desktop-only{ display:none; }
}
.ttk .upcoming{
border-bottom:1px solid #e6e6e6;
padding:22px;
background:linear-gradient(135deg,#eef3ff,#ffffff);
position: relative;
z-index: 4;
}
.ttk .hero{
display:grid;
gap:14px;
}
.ttk .hero-top{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:10px;
}
.ttk .hero-badge{
font-weight:900;
font-size:13px;
padding:6px 10px;
border-radius:999px;
background:#2f6fef;
color:#fff;
}
.ttk .hero-countdown{
font-weight:800;
font-size:13px;
padding:6px 10px;
border-radius:999px;
background:#fff;
border:1px solid #e0e0e0;
}
.ttk .hero-title{
font-size:40px;
font-weight:950;
line-height:1.2;
color:#111;
}
.ttk .hero-title .event-title-with-flag{
gap:10px;
}
.ttk .hero-title .country-flag{
width:28px;
height:21px;
border-radius:4px;
}
.ttk .hero-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
font-weight:750;
color:#333;
}
.ttk .hero-meta span{
display:inline-flex;
align-items:center;
gap:6px;
}
.ttk .hero-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:6px;
}
.ttk .hero-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 14px;
border-radius:999px;
border:1px solid #e0e0e0;
background:#fff;
font-weight:900;
text-decoration:none;
cursor:pointer;
white-space:nowrap;
position: relative;
z-index: 1;
}
.ttk .hero-btn.primary{
background:#2f6fef;
color:#fff;
border-color:#2f6fef;
}
.ttk .focus-note{
padding:10px 14px;
border-bottom:1px solid #e6e6e6;
background:#fffbe8;
color:#5c4b00;
font-size:14px;
font-weight:700;
}
.ttk .season-anchor-row td{
background:#eef4ff;
border-top:1px solid #dbe7ff;
border-bottom:1px solid #dbe7ff;
color:#224;
font-weight:850;
padding:10px 14px;
}
.ttk .season-anchor-row .count{
color:#4f5f8a;
font-weight:700;
margin-left:8px;
}
@media (max-width:760px){
.ttk .hero-title{ font-size:20px; }
.ttk .ttk-nav{
width:100%;
display:grid;
grid-template-columns:1fr;
}
.ttk .ttk-nav-link{
width:100%;
}
.ttk .focus-note{
font-size:13px;
line-height:1.4;
}
}
.ttk .table-wrap{
width: 100%;
max-width: 100%;
overflow: hidden;
position: relative;
display: block;
z-index: 3;
background:#fff;
}
.ttk .table-scroll{
width: 100%;
max-width: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: block;
max-height: 70vh;
overscroll-behavior: contain;
position: relative;
z-index: 1;
background:#fff;
}
.ttk .table-scroll table{
width: 100%;
border-collapse: collapse;
max-width: 100%;
table-layout: fixed;
background:#fff;
}
@media (max-width: 900px){
.ttk .table-scroll{ overflow-x: auto; }
.ttk .table-scroll table{ width: max-content; min-width: 100%; table-layout: auto; }
}
.ttk .table-scroll thead th{
position: sticky;
top: 0;
z-index: 3;
background: #fff;
box-shadow: 0 1px 0 #e6e6e6;
}
.ttk th, .ttk td{ padding:12px 14px; text-align:left; vertical-align:top; }
.ttk thead th{ font-weight:700; color:#333; border-bottom:1px solid #e6e6e6; }
.ttk tbody td{ border-bottom:1px solid #f0f0f0; }
.ttk th, .ttk td{ white-space: normal; overflow-wrap: anywhere; }
.ttk td:nth-child(1), .ttk th:nth-child(1),
.ttk td:nth-child(3), .ttk th:nth-child(3),
.ttk td:nth-child(4), .ttk th:nth-child(4) { white-space: nowrap; }
.ttk tbody tr.data-row:hover{ background:#fafafa; transition: background .2s ease; }
.ttk tr.data-row{ opacity: 1; }
.ttk tr.data-row.past-row{ opacity: .58; }
.ttk .month-row td{
background:#f7f7f7;
border-bottom:1px solid #e6e6e6;
font-weight:800;
letter-spacing:.2px;
padding:10px 14px;
}
.ttk .month-row .count{ font-weight:650; color:#555; margin-left:8px; }
.ttk a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.ttk .muted{ color:#555; }
.ttk .nowrap{ white-space:nowrap; }
.ttk .badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:5px 12px;
border-radius:999px;
font-weight:800;
font-size:13px;
border:1px solid transparent;
white-space:nowrap;
}
.ttk .badge::before{ content:""; width:10px; height:10px; border-radius:50%; display:inline-block; }
.ttk .badge.tt { background: rgba(47,111,239,.12); border-color: rgba(47,111,239,.35); }
.ttk .badge.tt::before { background: #2f6fef; }
.ttk .badge.ptt { background: rgba(30,155,90,.12); border-color: rgba(30,155,90,.35); }
.ttk .badge.ptt::before { background: #1e9b5a; }
.ttk .badge.ktt { background: rgba(240,160,0,.16); border-color: rgba(240,160,0,.45); }
.ttk .badge.ktt::before { background: #f0a000; }
.ttk .badge.nk { background: rgba(198,40,40,.12); border-color: rgba(198,40,40,.35); }
.ttk .badge.nk::before { background: #c62828; }
.ttk .badge.other { background: rgba(153,153,153,.14); border-color: rgba(153,153,153,.35); }
.ttk .badge.other::before { background: #999; }
.ttk .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.ttk .dot.tt{ background:#2f6fef; }
.ttk .dot.ptt{ background:#1e9b5a; }
.ttk .dot.ktt{ background:#f0a000; }
.ttk .dot.nk{ background:#c62828; }
.ttk .dot.other{ background:#999; }
.ttk .notify-dot{
display:inline-block;
width:10px;
height:10px;
border-radius:50%;
background:#ff3b30;
box-shadow:0 0 0 4px rgba(255,59,48,.14);
vertical-align:middle;
margin-left:8px;
flex:0 0 auto;
}
.ttk td.event-cell{ padding: 0; }
.ttk .event-toggle{
width: 100%;
text-align: left;
border: 0;
background: transparent;
padding: 12px 14px;
cursor: pointer;
display:flex;
align-items:flex-start;
gap:10px;
}
.ttk .event-main{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ttk .event-title{ font-weight: 850; color: #222; line-height: 1.25; word-break: break-word; }
.ttk .event-title-with-flag{
display:inline-flex;
align-items:center;
gap:8px;
min-width:0;
max-width:100%;
vertical-align:middle;
}
.ttk .country-flag{
display:inline-block;
width:20px;
height:15px;
object-fit:cover;
border-radius:3px;
box-shadow:0 0 0 1px rgba(0,0,0,.12);
flex:0 0 auto;
}
.ttk .event-sub{ display:flex; gap:8px; flex-wrap: wrap; align-items:center; color:#555; font-size: 13px; font-weight: 650; }
.ttk .event-distances{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:6px;
}
.ttk .distance-pill{
display:inline-flex;
align-items:center;
padding:4px 10px;
border-radius:999px;
background:#f3f4f6;
border:1px solid #e5e7eb;
font-size:12px;
font-weight:800;
color:#333;
white-space:nowrap;
}
.ttk .variant-list{
display:grid;
gap:10px;
margin-top:4px;
}
.ttk .variant-card{
border:1px solid #eee;
border-radius:12px;
background:#fff;
padding:10px;
display:grid;
gap:8px;
}
.ttk .variant-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
}
.ttk .variant-title{
font-weight:900;
color:#222;
}
.ttk .result-bubble{
display:inline-flex; align-items:center; gap:8px;
border:1px solid #e6e6e6; background:#fafafa;
border-radius:999px; padding:3px 8px;
font-size:12px; font-weight:850; color:#444; white-space:nowrap;
margin-left: 8px;
}
.ttk .result-bubble::before{ content:""; width:8px; height:8px; border-radius:50%; background:#2f6fef; display:inline-block; }
.ttk .chev{ margin-left:auto; font-weight: 900; color: rgba(0,0,0,.35); transform: translateY(1px); flex: 0 0 auto; }
.ttk tr.is-open .chev{ transform: rotate(90deg); }
.ttk .mini-map-btn{
display:inline-flex; align-items:center; justify-content:center;
border:1px solid #e0e0e0; background:#fff; border-radius:999px;
padding:8px 12px; font-weight:800; font-size:13px; cursor:pointer;
text-decoration:none; white-space:nowrap;
}
.ttk .event-actions{
display:flex; gap:8px; align-items:center; flex-wrap:wrap;
padding:0 12px 12px;
}
.ttk tr.details-row td{ padding: 0; border-bottom: 1px solid #f0f0f0; background: #fcfcfc; }
.ttk .details{ padding: 12px 14px 14px; border-top: 1px solid #eee; display: grid; gap: 10px; }
.ttk .details-head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap: wrap; }
.ttk .details-title{ font-weight: 900; color:#222; font-size: 14px; }
.ttk .variant-card--results{
border-color: rgba(200,0,116,.32);
background: linear-gradient(135deg, #fff0f7, #ffffff);
box-shadow: 0 8px 18px rgba(200,0,116,.08);
}
.ttk .variant-head--results{
align-items:flex-start;
}
.ttk .variant-title-wrap{
display:grid;
gap:4px;
min-width:0;
}
.ttk .results-available{
display:inline-flex;
align-items:center;
gap:7px;
width:fit-content;
max-width:100%;
color:#9f005d;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.03em;
}
.ttk .results-available::before{
content:"";
width:9px;
height:9px;
border-radius:50%;
background:#c80074;
box-shadow:0 0 0 4px rgba(200,0,116,.13);
flex:0 0 auto;
}
.ttk .results-link{
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid #e0e0e0;
background:#fff;
border-radius:999px;
padding:8px 12px;
font-weight:850;
font-size:14px;
text-decoration:none;
white-space:nowrap;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ttk .results-link--primary{
background:#c80074;
color:#fff !important;
border-color:#c80074;
padding:10px 14px;
font-weight:950;
box-shadow:0 7px 16px rgba(200,0,116,.22);
text-decoration:none !important;
}
.ttk .results-link--primary:hover{
transform:translateY(-1px);
box-shadow:0 10px 22px rgba(200,0,116,.26);
}
.ttk .cat-title{ font-weight: 950; color:#222; margin-top: 4px; }
.ttk .top3{ display:grid; gap: 8px; }
.ttk .top3-item{
display:flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
padding: 8px 10px; border: 1px solid rgba(200,0,116,.13); border-radius: 12px; background:rgba(255,255,255,.88);
}
.ttk .top3-item .rank{ font-weight: 950; min-width: 34px; color:#222; }
.ttk .top3-item .time{ margin-left:auto; font-weight: 950; color:#222; white-space: nowrap; }
.ttk .past-pill{
display:inline-flex; align-items:center;
border:1px solid #e6e6e6; background:#f4f4f4;
border-radius:999px; padding:3px 8px;
font-size:12px; font-weight:750; color:#555;
margin-left:8px; white-space:nowrap;
}
.ttk .row-flash{ animation: ttkFlash 2s ease; }
@keyframes ttkFlash{
0% { background:#fff8cc; }
100% { background:transparent; }
}
.ttk .mobile-links{
display:flex;
gap: 10px;
flex-wrap: wrap;
padding: 0 12px 12px;
}
.ttk .mobile-links a{
font-weight: 800;
font-size: 13px;
text-decoration: underline;
text-underline-offset: 2px;
color: #222;
}
.ttk .map-wrap{
display:none;
border-top:1px solid #e6e6e6;
background:#fff;
padding: 12px;
min-height: 450px;
position:relative;
z-index:1;
pointer-events:none;
visibility:hidden;
}
.ttk .map-wrap.is-visible{
display:block;
pointer-events:auto;
visibility:visible;
}
.ttk .map{
width:100%;
height:70vh;
min-height:420px;
border-radius:14px;
border:1px solid #eee;
position: relative;
z-index: 1;
background:#f7f7f7;
}
.ttk .map-msg{
padding:12px;
border:1px solid #eee;
border-radius:12px;
background:#fafafa;
color:#444;
font-weight:650;
}
.ttk .popup-grid{
display:grid;
gap:10px;
min-width:260px;
max-width:380px;
}
.ttk .popup-title{
font-weight:950;
font-size:14px;
line-height:1.25;
color:#222;
position: sticky;
top: 0;
background: #fff;
padding: 2px 0 8px;
z-index: 2;
}
.ttk .popup-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:4px;
}
.ttk .pill-btn{
display:inline-flex; justify-content:center; align-items:center;
padding:8px 10px;
border:1px solid #e0e0e0;
border-radius:999px;
font-weight:850;
text-decoration:none;
background:#fff;
white-space:nowrap;
cursor:pointer;
}
.ttk .details-layout{
display:grid;
gap:12px;
grid-template-columns:minmax(0,1fr);
}
.ttk .details-layout.has-image{
grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);
align-items:start;
}
.ttk .details-card{
border:1px solid #eee;
border-radius:14px;
background:#fff;
padding:12px;
display:grid;
gap:12px;
}
.ttk .details-section-title{
font-size:13px;
font-weight:950;
color:#222;
text-transform:uppercase;
letter-spacing:.04em;
}
.ttk .details-meta-grid{
display:grid;
gap:10px;
grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.ttk .details-meta-item{
display:grid;
gap:4px;
padding:10px;
border:1px solid #eee;
border-radius:12px;
background:#fcfcfc;
}
.ttk .details-meta-item strong{
color:#222;
font-size:14px;
line-height:1.35;
}
.ttk .details-copy{
color:#333;
line-height:1.6;
white-space:pre-line;
}
.ttk .details-image-wrap{
display:grid;
gap:8px;
}
.ttk .details-image{
width:100%;
display:block;
aspect-ratio:16 / 10;
object-fit:cover;
border-radius:12px;
border:1px solid #eee;
background:#f7f7f7;
}
.ttk .details-image-caption{
font-size:13px;
font-weight:650;
color:#555;
}
.ttk .leaflet-container{
position:relative;
z-index:1 !important;
}
.ttk .leaflet-pane,
.ttk .leaflet-top,
.ttk .leaflet-bottom,
.ttk .leaflet-control,
.ttk .leaflet-popup{
z-index:auto;
}
.ttk .leaflet-tile-pane{ z-index:100 !important; }
.ttk .leaflet-overlay-pane{ z-index:200 !important; }
.ttk .leaflet-shadow-pane{ z-index:300 !important; }
.ttk .leaflet-marker-pane{ z-index:400 !important; }
.ttk .leaflet-tooltip-pane{ z-index:450 !important; }
.ttk .leaflet-popup-pane{ z-index:500 !important; }
.ttk .leaflet-top,
.ttk .leaflet-bottom{ z-index:600 !important; }
.ttk .leaflet-popup-content{
margin: 12px 12px;
max-height: min(60vh, 420px);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
}
.ttk .leaflet-popup-content-wrapper{ border-radius: 14px; }
@media (max-width: 900px){
.ttk .details-layout.has-image{
grid-template-columns:1fr;
}
}
@media (max-width: 760px){
.ttk, .ttk * { box-sizing: border-box; }
.ttk .wrap { padding-left: 12px; padding-right: 12px; }
.ttk .panel { overflow: hidden; }
.ttk .table-wrap{ overflow: hidden; }
.ttk .table-scroll{
overflow-x: hidden;
overflow-y: auto;
max-height: 72vh;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.ttk .table-scroll table{
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
table-layout: fixed !important;
}
.ttk table, .ttk thead, .ttk tbody{ display:block; }
.ttk thead{ display:none; }
.ttk tbody{ padding: 12px; }
.ttk tr.month-row{ display:block; }
.ttk tr.month-row td{ display:block; }
.ttk tr.data-row{
display:block;
margin: 10px 0;
border: 1px solid #eee;
border-radius: 14px;
overflow: hidden;
background:#fff;
}
.ttk tr.data-row td{
display:block;
border-bottom: 0;
padding: 10px 12px;
white-space: normal;
overflow-wrap: anywhere;
}
.ttk tr.data-row td:nth-child(1){
background:#fafafa;
font-weight: 900;
border-bottom: 1px solid #eee;
}
.ttk tr.data-row td:nth-child(3),
.ttk tr.data-row td:nth-child(4),
.ttk tr.data-row td:nth-child(5){
display:none;
}
.ttk td.event-cell{ padding: 0 !important; }
.ttk .event-toggle{ padding: 12px !important; width: 100%; }
.ttk .event-title{ font-size: 16px; }
.ttk tr.details-row{ display:block; }
.ttk tr.details-row td{ display:block; }
.ttk tr.details-row td > .details{ padding: 12px !important; }
.ttk .leaflet-popup-content{ max-height: min(70vh, 520px); }
}


/* ==================================================
   Kalender hero + compacte moderne filterrij
   Pagina-HTML/CSS only: footer/JS blijft onaangeraakt
================================================== */
.ttk .ttk-calendar-intro{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
gap:22px;
align-items:stretch;
margin:0 0 22px;
padding:30px;
border:1px solid rgba(20,25,40,.09);
border-radius:30px;
background:
radial-gradient(circle at 12% 0%, rgba(22,142,234,.18), transparent 34%),
radial-gradient(circle at 88% 10%, rgba(217,43,234,.14), transparent 36%),
linear-gradient(135deg, #f7faff 0%, #ffffff 58%, #fff5fb 100%);
box-shadow:0 20px 52px rgba(20,25,40,.09);
overflow:hidden;
position:relative;
z-index:2;
}
.ttk .ttk-calendar-intro__content{min-width:0;}
.ttk .ttk-calendar-intro__eyebrow{
display:inline-flex;
align-items:center;
width:fit-content;
min-height:38px;
padding:0 16px;
margin:0 0 16px;
border-radius:999px;
background:
radial-gradient(circle at 92% 50%, rgba(255,20,147,.28), transparent 38%),
linear-gradient(135deg, #168eea 0%, #3b73f2 100%);
color:#fff;
font-size:14px;
font-weight:950;
box-shadow:0 10px 24px rgba(47,111,239,.22);
}
.ttk .ttk-calendar-intro h1{
margin:0 0 14px;
max-width:760px;
color:#10131c;
font-size:clamp(38px,5.6vw,64px);
line-height:.98;
letter-spacing:-.055em;
font-weight:950;
}
.ttk .ttk-calendar-intro p{
max-width:760px;
margin:0;
color:#596174;
font-size:18px;
line-height:1.55;
font-weight:650;
}
.ttk .ttk-calendar-intro__actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:22px;
}
.ttk .ttk-calendar-intro__btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 18px;
border-radius:999px;
border:1px solid rgba(20,25,40,.12);
background:rgba(255,255,255,.90);
color:#171a24;
text-decoration:none;
white-space:nowrap;
font-size:15px;
font-weight:950;
box-shadow:0 8px 20px rgba(20,25,40,.06);
transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.ttk .ttk-calendar-intro__btn:hover{
transform:translateY(-1px);
box-shadow:0 13px 28px rgba(20,25,40,.11);
text-decoration:none;
}
.ttk .ttk-calendar-intro__btn--primary{
background:
radial-gradient(circle at 92% 50%, rgba(255,20,147,.30), transparent 38%),
linear-gradient(135deg, #168eea 0%, #3b73f2 100%);
color:#fff;
border-color:transparent;
box-shadow:0 12px 28px rgba(47,111,239,.26);
}
.ttk .ttk-calendar-intro__side{
align-self:stretch;
padding:20px;
border:1px solid rgba(20,25,40,.08);
border-radius:24px;
background:rgba(255,255,255,.72);
box-shadow:inset 0 1px 0 rgba(255,255,255,.80);
}
.ttk .ttk-calendar-intro__side-label{
margin:0 0 12px;
color:#171a24;
font-size:14px;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
}
.ttk .ttk-calendar-intro__side ul{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}
.ttk .ttk-calendar-intro__side li{
display:grid;
gap:3px;
padding:12px 13px;
border:1px solid rgba(20,25,40,.075);
border-radius:16px;
background:rgba(255,255,255,.78);
}
.ttk .ttk-calendar-intro__side strong{
color:#171a24;
font-size:15px;
font-weight:950;
}
.ttk .ttk-calendar-intro__side span{
color:#687085;
font-size:13px;
line-height:1.35;
font-weight:650;
}

/* Compacte filtermodule - functioneel veilig
   Let op: data-upcoming-toggle blijft binnen .filters, omdat de footer daar de events bindt. */
.ttk .controls--modern {
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(20,25,40,.08) !important;
}

.ttk .controls-primary {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(140px, .7fr)) !important;
  gap: 12px !important;
  align-items: end !important;
  padding: 16px 18px 13px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,255,.96)) !important;
  border-bottom: 1px solid rgba(20,25,40,.06) !important;
}

.ttk .search--modern,
.ttk .select-group {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.ttk .search--modern label,
.ttk .select-group label,
.ttk .filter-block__label {
  color: #697083 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

.ttk .search--modern input,
.ttk .select-group select {
  width: 100% !important;
  min-height: 44px !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(20,25,40,.12) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #171a24 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 6px 14px rgba(20,25,40,.03) !important;
}

.ttk .search--modern input {
  border-radius: 16px !important;
  font-size: 15px !important;
}

.ttk .search--modern input:focus,
.ttk .select-group select:focus {
  outline: none !important;
  border-color: rgba(47,111,239,.46) !important;
  box-shadow: 0 0 0 4px rgba(47,111,239,.12) !important;
}

.ttk .controls-choicebar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 12px 18px 0 !important;
  background: #fff !important;
}

.ttk .filters--modern {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
  width: 100% !important;
}

.ttk .filters-main-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: end !important;
}

.ttk .filter-block {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.ttk .type-filter-set {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
}

.ttk .type-filter-set .btn {
  min-height: 36px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(20,25,40,.10) !important;
  background: #f7f8fb !important;
  color: #242836 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.ttk .type-filter-set .btn:hover {
  background: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(20,25,40,.07) !important;
}

.ttk .type-filter-set .btn.active {
  background:
    radial-gradient(circle at 92% 50%, rgba(255,20,147,.20), transparent 38%),
    linear-gradient(135deg, #168eea 0%, #3b73f2 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 9px 22px rgba(47,111,239,.24) !important;
}

.ttk .type-filter-set .btn.active .dot {
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.22) !important;
}

.ttk .view-toggle-area {
  justify-self: end !important;
  align-self: end !important;
}

.ttk .toggle-group {
  display: inline-grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid rgba(20,25,40,.10) !important;
  border-radius: 16px !important;
  background: #f2f4f8 !important;
}

.ttk .toggle-group .btn {
  min-height: 36px !important;
  padding: 7px 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #4f5668 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  box-shadow: none !important;
  transform: none !important;
  white-space: nowrap !important;
}

.ttk .toggle-group .btn:hover {
  background: #fff !important;
  color: #171a24 !important;
  transform: none !important;
  box-shadow: 0 5px 14px rgba(20,25,40,.06) !important;
}

.ttk .toggle-group--date .btn.active {
  background:
    radial-gradient(circle at 92% 50%, rgba(255,20,147,.18), transparent 38%),
    linear-gradient(135deg, #168eea 0%, #3b73f2 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(47,111,239,.22) !important;
}

.ttk .toggle-group--view .btn.active {
  background:
    radial-gradient(circle at 92% 50%, rgba(255,136,0,.25), transparent 38%),
    linear-gradient(135deg, #d92bea 0%, #ff1493 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(217,43,234,.20) !important;
}

.ttk .competition-filter-wrap {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 16px !important;
  background: #fff !important;
}

.ttk .competition-filter-title {
  margin: 0 0 8px !important;
}

.ttk .competition-filter-label {
  font-size: 16px !important;
  font-weight: 950 !important;
}

.ttk .competition-filter-hint {
  color: #697083 !important;
  font-size: 14px !important;
}

.ttk .competition-pills {
  gap: 8px !important;
}

.ttk .competition-pill-btn {
  min-height: 38px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.ttk .competition-pill-btn.active {
  background:
    radial-gradient(circle at 92% 50%, rgba(255,136,0,.30), transparent 38%),
    linear-gradient(135deg, #d92bea 0%, #ff1493 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 9px 22px rgba(217,43,234,.22) !important;
}

.ttk .panel{
border-radius:26px;
border-color:rgba(20,25,40,.09);
box-shadow:0 14px 36px rgba(20,25,40,.065);
}
.ttk .upcoming{border-radius:0;}
.ttk .table-wrap{border-radius:0 0 26px 26px;}
.ttk .month-row td{
background:#fafbff;
border-top:1px solid rgba(20,25,40,.06);
border-bottom:1px solid rgba(20,25,40,.06);
color:#252a38;
}
.ttk tr.data-row{transition:background .16s ease;}
.ttk tbody tr.data-row:hover{background:#fbfcff;}

@media (max-width: 1100px) {
  .ttk .controls-primary {
    grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(130px, .6fr)) !important;
  }

  .ttk .controls-choicebar,
  .ttk .filters-main-row {
    grid-template-columns: 1fr !important;
  }

  .ttk .view-toggle-area {
    justify-self: start !important;
  }
}

@media (max-width: 760px) {
  .ttk .ttk-calendar-intro{grid-template-columns:1fr;padding:22px;border-radius:24px;}
  .ttk .ttk-calendar-intro h1{font-size:clamp(34px,10vw,46px);letter-spacing:-.045em;}
  .ttk .ttk-calendar-intro p{font-size:16px;}
  .ttk .ttk-calendar-intro__side{padding:16px;border-radius:20px;}

  .ttk .controls-primary {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }

  .ttk .controls-choicebar {
    display: grid !important;
    gap: 12px !important;
    padding: 14px 14px 0 !important;
  }

  .ttk .filters-main-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .ttk .type-filter-set {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
  }

  .ttk .type-filter-set .btn {
    flex: 0 0 auto !important;
  }

  .ttk .toggle-group {
    width: 100% !important;
  }

  .ttk .toggle-group .btn {
    min-width: 0 !important;
  }

  .ttk .view-toggle-area {
    width: 100% !important;
  }

  .ttk .competition-filter-wrap {
    padding: 0 0 14px !important;
  }

  .ttk .competition-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }

  .ttk .competition-pill-btn {
    flex: 0 0 auto !important;
  }
}
@media (max-width:560px){
.ttk .ttk-calendar-intro{padding:18px;}
.ttk .ttk-calendar-intro__actions{display:grid;grid-template-columns:1fr;}
.ttk .ttk-calendar-intro__btn{width:100%;}
.ttk .ttk-calendar-intro__side li{padding:11px 12px;}
}


/* ==================================================
   Landen- en competitiekeuze 2026
================================================== */
.ttk .controls-primary{
  grid-template-columns:minmax(280px,1.5fr) repeat(4,minmax(145px,.68fr)) !important;
}
.ttk .panel{
  overflow:visible !important;
}
.ttk .smart-select{
  position:relative;
  min-width:0;
}
.ttk .filter-native-source{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
  padding:0 !important;
  margin:-1px !important;
}
.ttk .smart-select__button{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 12px;
  border:1px solid rgba(20,25,40,.12);
  border-radius:13px;
  background:#fff;
  color:#171a24;
  font:inherit;
  font-size:14px;
  font-weight:850;
  text-align:left;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.8),0 6px 14px rgba(20,25,40,.03);
}
.ttk .smart-select__button:hover{
  border-color:rgba(47,111,239,.28);
  box-shadow:0 8px 18px rgba(20,25,40,.06);
}
.ttk .smart-select__button:focus-visible{
  outline:none;
  border-color:rgba(47,111,239,.46);
  box-shadow:0 0 0 4px rgba(47,111,239,.12);
}
.ttk .smart-select__button[aria-expanded="true"] .smart-select__chevron{
  transform:rotate(180deg);
}
.ttk .smart-select__button-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ttk .smart-select__chevron{
  color:#747b8e;
  font-size:18px;
  line-height:1;
  transition:transform .16s ease;
  flex:0 0 auto;
}
.ttk .smart-select__menu{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  z-index:180;
  width:min(430px,calc(100vw - 32px));
  max-height:min(560px,70vh);
  overflow:auto;
  padding:12px;
  border:1px solid rgba(20,25,40,.11);
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 60px rgba(20,25,40,.20);
}
.ttk .smart-select__menu[hidden]{display:none !important;}
.ttk .smart-select__menu-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.ttk .smart-select__menu-head strong{
  display:block;
  color:#171a24;
  font-size:16px;
  font-weight:950;
}
.ttk .smart-select__menu-head span{
  display:block;
  margin-top:2px;
  color:#697083;
  font-size:12px;
  line-height:1.4;
  font-weight:650;
}
.ttk .smart-select__search{
  display:block;
  margin-bottom:10px;
}
.ttk .smart-select__search input{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:9px 11px;
  border:1px solid rgba(20,25,40,.12);
  border-radius:12px;
  background:#f9faff;
  color:#171a24;
  font-size:14px;
  font-weight:750;
}
.ttk .smart-select__search input:focus{
  outline:none;
  border-color:rgba(47,111,239,.46);
  box-shadow:0 0 0 4px rgba(47,111,239,.10);
  background:#fff;
}
.ttk .country-option-list,
.ttk .competition-option-list{
  display:grid;
  gap:7px;
}
.ttk .country-option{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:9px 10px;
  border:1px solid rgba(20,25,40,.08);
  border-radius:13px;
  background:#fff;
  cursor:pointer;
}
.ttk .country-option:hover{background:#f8faff;}
.ttk .country-option input{width:18px;height:18px;margin:0;accent-color:#2f6fef;}
.ttk .country-option__label{font-size:14px;font-weight:900;color:#242836;}
.ttk .country-option__count{font-size:12px;font-weight:800;color:#7a8192;white-space:nowrap;}
.ttk .smart-select__quick-actions,
.ttk .smart-select__menu-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(20,25,40,.07);
}
.ttk .smart-select__quick-actions button,
.ttk .smart-select__menu-actions button{
  min-height:38px;
  padding:8px 11px;
  border:1px solid rgba(20,25,40,.10);
  border-radius:11px;
  background:#f7f8fb;
  color:#303546;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.ttk .smart-select__menu-actions{justify-content:flex-end;}
.ttk .smart-select__menu-actions .smart-select__apply{
  background:linear-gradient(135deg,#168eea,#3b73f2);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 18px rgba(47,111,239,.20);
}
.ttk .competition-option-group{display:grid;gap:6px;margin-top:10px;}
.ttk .competition-option-group:first-child{margin-top:0;}
.ttk .competition-option-group__title{
  padding:4px 6px 2px;
  color:#747b8e;
  font-size:11px;
  font-weight:950;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.ttk .competition-option{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  min-height:46px;
  padding:9px 10px;
  border:1px solid rgba(20,25,40,.08);
  border-radius:13px;
  background:#fff;
  color:#242836;
  text-align:left;
  cursor:pointer;
}
.ttk .competition-option:hover,
.ttk .competition-option:focus-visible{background:#f8faff;border-color:rgba(47,111,239,.22);outline:none;}
.ttk .competition-option.is-selected{
  background:linear-gradient(135deg,rgba(47,111,239,.10),rgba(255,20,147,.07));
  border-color:rgba(47,111,239,.34);
  box-shadow:inset 3px 0 0 #2f6fef;
}
.ttk .competition-option__main{min-width:0;display:grid;gap:3px;}
.ttk .competition-option__label{font-size:14px;font-weight:920;overflow-wrap:anywhere;}
.ttk .competition-option__countries{font-size:12px;font-weight:700;color:#747b8e;}
.ttk .competition-option__count{font-size:12px;font-weight:850;color:#747b8e;white-space:nowrap;}
.ttk .competition-option-empty{padding:18px 10px;text-align:center;color:#747b8e;font-size:13px;font-weight:750;}
.ttk .filter-status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:8px 18px 14px;
  background:#fff;
}
.ttk .filter-summary{
  color:#626a7c;
  font-size:13px;
  line-height:1.4;
  font-weight:750;
}
.ttk .filter-reset{
  min-height:36px;
  padding:7px 11px;
  border:1px solid rgba(20,25,40,.10);
  border-radius:999px;
  background:#fff;
  color:#4f5668;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.ttk .filter-reset:hover{background:#f7f8fb;color:#171a24;}
html.ttk-country-choice-open,
html.ttk-country-choice-open body{
  overflow:hidden !important;
}
/* In page builders en WordPress-editors mag de bezoekerspopup nooit de editor blokkeren. */
html.ttk-editor-context,
html.ttk-editor-context body{
  overflow:auto !important;
}
html.ttk-editor-context .ttk-country-choice-backdrop{
  display:none !important;
  pointer-events:none !important;
}
.ttk-country-choice-backdrop{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(15,20,32,.52);
  backdrop-filter:blur(5px);
}
.ttk-country-choice-backdrop[hidden]{display:none !important;}
.ttk-country-choice-dialog{
  width:min(560px,100%);
  padding:26px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:26px;
  background:#fff;
  box-shadow:0 30px 90px rgba(10,15,28,.32);
}
.ttk-country-choice-kicker{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 10px;
  border-radius:999px;
  background:#eef4ff;
  color:#2f6fef;
  font-size:12px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.ttk-country-choice-dialog h2{
  margin:14px 0 8px;
  color:#171a24;
  font-size:clamp(26px,5vw,38px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.ttk-country-choice-dialog p{
  margin:0;
  color:#626a7c;
  font-size:16px;
  line-height:1.55;
  font-weight:650;
}
.ttk-country-choice-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:22px;
}
.ttk-country-choice-actions button{
  min-height:54px;
  padding:11px 14px;
  border:1px solid rgba(20,25,40,.10);
  border-radius:16px;
  background:#f7f8fb;
  color:#242836;
  font-size:14px;
  font-weight:950;
  cursor:pointer;
}
.ttk-country-choice-actions button[data-country-welcome-all]{
  background:linear-gradient(135deg,#168eea,#3b73f2);
  color:#fff;
  border-color:transparent;
  box-shadow:0 12px 26px rgba(47,111,239,.24);
}
.ttk-country-choice-note{
  margin-top:12px !important;
  font-size:12px !important;
  color:#858b9b !important;
}
@media (max-width:1100px){
  .ttk .controls-primary{
    grid-template-columns:minmax(240px,1fr) repeat(2,minmax(150px,.65fr)) !important;
  }
  .ttk .search--modern{grid-column:span 1;}
}
@media (max-width:760px){
  .ttk .controls-primary{grid-template-columns:1fr !important;}
  .ttk .smart-select__menu{
    position:fixed;
    left:12px;
    right:12px;
    top:auto;
    bottom:12px;
    width:auto;
    max-height:calc(100vh - 24px);
    border-radius:22px;
    z-index:100000;
  }
  .ttk .filter-status-row{padding:6px 14px 14px;align-items:flex-start;}
  .ttk-country-choice-dialog{padding:22px;border-radius:22px;}
  .ttk-country-choice-actions{grid-template-columns:1fr;}
}

/* Regio/provinciefilter blijft technisch aanwezig voor de kalender-JS, maar is visueel verborgen */
.ttk .select-group--hidden-compat {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}


/* Op kleinere schermen niet tonen, anders wordt de hero te druk */
@media (max-width: 900px) {
  .ttk .upcoming .hero {
    max-width: 100% !important;
  }

  .ttk .ttk-route-shape {
    display: none !important;
  }
}

/* ==================================================
   Kalender als breed en hoog losstaand blok
================================================== */

.ttk .wrap {
  max-width: min(1380px, calc(100vw - 48px)) !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.ttk .panel {
  border-radius: 28px !important;
  border: 1px solid rgba(20,25,40,.10) !important;
  background: #fff !important;
  box-shadow:
    0 18px 44px rgba(20,25,40,.08),
    0 1px 0 rgba(255,255,255,.75) inset !important;
  overflow: hidden !important;
}

.ttk .table-scroll {
  max-height: 85vh !important;
}

/* Rijen iets compacter zodat je meer tijdritten ziet */
.ttk th,
.ttk td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.ttk .event-toggle {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.ttk .month-row td {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

@media (min-width: 1600px) {
  .ttk .wrap {
    max-width: 1440px !important;
  }
}

@media (max-width: 900px) {
  .ttk .wrap {
    max-width: calc(100vw - 24px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 760px) {
  .ttk .table-scroll {
    max-height: 78vh !important;
  }

  .ttk tr.data-row {
    margin: 8px 0 !important;
  }

  .ttk tr.data-row td {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
}

@media (max-width: 560px) {
  .ttk .wrap {
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .ttk .panel {
    border-radius: 22px !important;
  }
}



/* ==================================================
   Hero routekaart - lichte vloeiende posterstijl
================================================== */

.ttk .upcoming {
  position: relative !important;
  overflow: hidden !important;
  min-height: 300px !important;
}

.ttk .upcoming .hero {
  position: relative !important;
  z-index: 4 !important;
  max-width: 56% !important;
}

.ttk .ttk-hero-route-card {
  position: absolute !important;
  z-index: 2 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 48% !important;
  min-width: 420px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 28px 28px 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  opacity: .98 !important;

  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.04) 14%, rgba(0,0,0,.18) 28%, rgba(0,0,0,.52) 46%, rgba(0,0,0,.82) 64%, #000 78%, #000 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.92) 8%, #000 18%, #000 82%, rgba(0,0,0,.92) 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.04) 14%, rgba(0,0,0,.18) 28%, rgba(0,0,0,.52) 46%, rgba(0,0,0,.82) 64%, #000 78%, #000 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.92) 8%, #000 18%, #000 82%, rgba(0,0,0,.92) 92%, transparent 100%);
  mask-composite: intersect;
}

.ttk .ttk-hero-route-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(circle at 70% 32%, rgba(255,122,0,.14), transparent 34%),
    radial-gradient(circle at 88% 52%, rgba(217,43,234,.10), transparent 40%),
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 12%, rgba(255,255,255,.50) 26%, rgba(255,255,255,.16) 46%, rgba(255,255,255,.02) 66%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02) 42%, rgba(255,255,255,.12));
  pointer-events: none;
}

.ttk .ttk-hero-route-card::after {
  content: "PARCOURS";
  position: absolute;
  left: 28%;
  bottom: 28px;
  z-index: 5;
  color: rgba(20,25,40,.48);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  pointer-events: none;
}

.ttk .ttk-hero-route-map {
  position: absolute !important;
  inset: -16px -16px -16px -8px !important;
  z-index: 1 !important;
  width: calc(100% + 24px) !important;
  height: calc(100% + 32px) !important;
  background: transparent !important;
}

.ttk .ttk-hero-route-map .leaflet-container {
  background: transparent !important;
}

.ttk .ttk-hero-route-map .leaflet-pane,
.ttk .ttk-hero-route-map .leaflet-top,
.ttk .ttk-hero-route-map .leaflet-bottom,
.ttk .ttk-hero-route-map .leaflet-control,
.ttk .ttk-hero-route-map .leaflet-popup {
  z-index: auto !important;
}

.ttk .ttk-hero-route-map .leaflet-tile {
  filter: saturate(.72) contrast(.96) brightness(1.04);
  opacity: .82 !important;
}

.ttk .ttk-hero-route-map .leaflet-control-attribution {
  display: none !important;
}

.ttk .ttk-hero-route-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(20,25,40,.38);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: transparent;
}

/* Extra zachte overgang over de volledige hero */
.ttk .upcoming::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  top: 0;
  bottom: 0;
  width: 62%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.88) 14%, rgba(255,255,255,.62) 28%, rgba(255,255,255,.26) 48%, rgba(255,255,255,.04) 68%, rgba(255,255,255,0) 100%),
    radial-gradient(circle at 78% 20%, rgba(217,43,234,.10), transparent 46%),
    radial-gradient(circle at 82% 78%, rgba(22,142,234,.08), transparent 42%);
  pointer-events: none;
}

/* Hero krijgt op kleinere desktop/tablet ruimte onder de tekst */
@media (max-width: 1100px) {
  .ttk .upcoming .hero {
    max-width: 100% !important;
  }

  .ttk .ttk-hero-route-card {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 230px !important;
    margin-top: 18px !important;
    border-radius: 22px !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 100%);
  }

  .ttk .upcoming::after {
    display: none !important;
  }

  .ttk .ttk-hero-route-card::after {
    left: 18px;
    bottom: 15px;
  }
}

@media (max-width: 760px) {
  .ttk .upcoming {
    min-height: 0 !important;
  }

  .ttk .ttk-hero-route-card {
    display: none !important;
  }
}

/* Extra zachte overgang over de volledige hero */
.ttk .upcoming::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  top: 0;
  bottom: 0;
  width: 58%;
  background:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.72) 18%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 80% 22%, rgba(217,43,234,.10), transparent 42%);
  pointer-events: none;
}

/* Hero krijgt op kleinere desktop/tablet ruimte onder de tekst */
@media (max-width: 1100px) {
  .ttk .upcoming .hero {
    max-width: 100% !important;
  }

  .ttk .ttk-hero-route-card {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 230px !important;
    margin-top: 18px !important;
    border-radius: 22px !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 100%);
  }

  .ttk .upcoming::after {
    display: none !important;
  }

  .ttk .ttk-hero-route-card::after {
    left: 18px;
    bottom: 15px;
  }
}

@media (max-width: 760px) {
  .ttk .upcoming {
    min-height: 0 !important;
  }

  .ttk .ttk-hero-route-card {
    display: none !important;
  }
}

/* Hero krijgt op desktop ruimte voor het routevlak */
@media (max-width: 1100px) {
  .ttk .upcoming .hero {
    max-width: 100% !important;
  }

  .ttk .ttk-hero-route-card {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 230px !important;
    margin-top: 18px !important;
  }
}

@media (max-width: 760px) {
  .ttk .upcoming {
    min-height: 0 !important;
  }

  .ttk .ttk-hero-route-card {
    display: none !important;
  }
}
.ttk .ttkdc-calendar-source-badge{
 position:absolute;top:10px;right:10px;z-index:20;padding:6px 10px;border-radius:999px;
 background:#1d2327;color:#fff;font-size:12px;font-weight:850;box-shadow:0 4px 12px rgba(0,0,0,.18)
}


/* 1.11.2: shortcodekalender doorbreekt een smalle theme-contentkolom. */
.ttk.ttk--wide {
  width: min(1480px, calc(100vw - 32px));
  max-width: none !important;
  margin-left: 50% !important;
  margin-right: 0 !important;
  transform: translateX(-50%);
}
.ttk.ttk--wide > .wrap {
  width: 100%;
  max-width: 1440px !important;
}
@media (max-width: 760px) {
  .ttk.ttk--wide {
    width: 100%;
    margin-left: 0 !important;
    transform: none;
  }
}


/* 1.14.0: centrale kalender met vaste viewport-zijvlakken en aparte mobiele banner. */
.ttkdc-calendar-shell {
  --ttk-calendar-width: 1600px;
  --ttk-banner-min-width: 120px;
  --ttk-banner-gap: 18px;
  --ttk-banner-sticky-top: 105px;
  --ttk-banner-bottom: 16px;
  --ttk-left-rail-width: 0px;
  --ttk-right-rail-width: 0px;
  --ttk-desktop-fit: cover;
  --ttk-desktop-bg: #111111;
  --ttk-mobile-fit: cover;
  --ttk-mobile-max-height: 180px;
  --ttk-mobile-breakpoint: 980px;
  width: min(calc(100vw - 24px), var(--ttk-calendar-width));
  max-width: none !important;
  margin-left: 50% !important;
  transform: translateX(-50%);
  position: relative;
  display: block;
}
.ttkdc-calendar-main { min-width: 0; width: 100%; position: relative; z-index: 1; }
.ttkdc-side-banner {
  position: fixed;
  top: var(--ttk-banner-sticky-top);
  bottom: var(--ttk-banner-bottom);
  z-index: 20;
  overflow: hidden;
  background: var(--ttk-desktop-bg);
  box-shadow: 0 10px 34px rgba(0,0,0,.12);
  opacity: 0;
  transition: opacity .18s ease;
}
.ttkdc-calendar-shell.ttkdc-has-desktop-rails .ttkdc-side-banner:not([hidden]) { opacity: 1; }
.ttkdc-side-banner--left { left: 0; width: var(--ttk-left-rail-width); border-radius: 0 16px 16px 0; }
.ttkdc-side-banner--right { right: 0; width: var(--ttk-right-rail-width); border-radius: 16px 0 0 16px; }
.ttkdc-side-banner a,
.ttkdc-side-banner img { display: block; width: 100%; height: 100%; }
.ttkdc-side-banner a { text-decoration: none; }
.ttkdc-side-banner img { object-fit: var(--ttk-desktop-fit); object-position: center; }
.ttkdc-mobile-banner { display: none; width: 100%; margin: 0 0 14px; overflow: hidden; border-radius: 14px; background: #f3f4f6; }
.ttkdc-mobile-banner a { display: block; text-decoration: none; }
.ttkdc-mobile-banner img { display: block; width: 100%; max-height: var(--ttk-mobile-max-height); object-fit: var(--ttk-mobile-fit); object-position: center; }
.ttk.ttk--wide {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}
.ttk.ttk--wide > .wrap {
  width: 100%;
  max-width: var(--ttk-calendar-width) !important;
  padding-left: 12px;
  padding-right: 12px;
}

/* Geen tekst over aangrenzende tabelcellen heen. */
.ttk .table-scroll table { min-width: 1040px; table-layout: fixed; }
.ttk .table-scroll th,
.ttk .table-scroll td { min-width: 0; overflow: hidden; }
.ttk .table-scroll th:nth-child(1), .ttk .table-scroll td:nth-child(1) { width: 124px; }
.ttk .table-scroll th:nth-child(2), .ttk .table-scroll td:nth-child(2) { width: auto; }
.ttk .table-scroll th:nth-child(3), .ttk .table-scroll td:nth-child(3) { width: 164px; }
.ttk .table-scroll th:nth-child(4), .ttk .table-scroll td:nth-child(4) { width: 168px; }
.ttk .table-scroll th:nth-child(5), .ttk .table-scroll td:nth-child(5) { width: 220px; }
.ttk td:nth-child(3) .badge {
  max-width: 100%;
  white-space: normal;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ttk td:nth-child(5),
.ttk td:nth-child(5) * { overflow-wrap: anywhere; }
.ttk td:nth-child(5) a {
  display: block;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}
.ttk .event-distances,
.ttk .event-meta-row,
.ttk .variant-head { min-width: 0; }
.ttk .distance-pill,
.ttk .event-meta-pill { max-width: 100%; }

@media (max-width: 980px) {
  .ttkdc-calendar-shell {
    width: min(100%, calc(100vw - 16px));
    margin-left: 50% !important;
    transform: translateX(-50%);
  }
  .ttkdc-side-banner { display: none !important; }
  .ttkdc-mobile-banner { display: block; }
  .ttk.ttk--wide > .wrap { padding-left: 8px; padding-right: 8px; }
  .ttk .table-scroll table { min-width: 1020px; table-layout: auto; }
}
@media (max-width: 480px) {
  .ttkdc-calendar-shell { width: 100%; margin-left: 0 !important; transform: none; }
  .ttkdc-mobile-banner { border-radius: 0; margin-bottom: 10px; }
}


.ttk .details-info-section{margin-top:14px;padding-top:14px;border-top:1px solid rgba(15,23,42,.09)}
.ttk .details-info-heading{font-size:14px;font-weight:950;margin-bottom:7px;color:#111827}
.ttk .details-copy-html p:first-child{margin-top:0}.ttk .details-copy-html p:last-child{margin-bottom:0}
.ttk .details-copy-html ul,.ttk .details-copy-html ol{padding-left:20px}
.ttk .details-copy-html a{overflow-wrap:anywhere}

/* 1.30.0 - sticky contextnavigatie, losse inzendpill en community-CTA's */
.ttk .ttk-nav-row{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:12px;
 flex-wrap:wrap;
 margin:0 0 16px;
 padding:8px;
 border:1px solid rgba(15,23,42,.09);
 border-radius:20px;
 background:rgba(255,255,255,.94);
 box-shadow:0 10px 30px rgba(15,23,42,.08);
 backdrop-filter:blur(14px);
 -webkit-backdrop-filter:blur(14px);
}
.ttk .ttk-nav-row .ttk-nav{margin:0;background:transparent;border:0;padding:0;box-shadow:none}
.ttk .ttkdc-community-open--detached{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:7px;
 min-height:52px;
 padding:10px 19px;
 border-radius:999px!important;
 white-space:nowrap;
 margin-left:auto;
 cursor:pointer;
}
.ttk .ttkdc-community-open--detached>span:first-child{font-size:20px;line-height:1;font-weight:700}
.ttk .ttk-community-cta{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:18px;
 padding:16px 18px;
 border:1px solid rgba(22,142,234,.18);
 background:linear-gradient(135deg,rgba(22,142,234,.09),rgba(59,115,242,.04));
 color:#172033;
}
.ttk .ttk-community-cta>div{display:grid;gap:3px;min-width:0}
.ttk .ttk-community-cta strong,.ttk .ttk-community-cta h2{margin:0;font-weight:950;letter-spacing:-.015em}
.ttk .ttk-community-cta span,.ttk .ttk-community-cta p{margin:0;color:#526078;font-weight:650}
.ttk .ttk-community-cta button{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:7px;
 flex:0 0 auto;
 min-height:46px;
 border-radius:999px;
 cursor:pointer;
}
.ttk .ttk-community-cta--inline{border-left:0;border-right:0}
.ttk .ttk-community-cta--bottom{
 margin:22px 0 4px;
 padding:24px;
 border-radius:24px;
 box-shadow:0 12px 32px rgba(15,23,42,.07);
}
.ttk .ttk-community-cta--bottom>div{max-width:760px}
.ttk .ttk-community-cta--bottom h2{font-size:clamp(22px,3vw,30px)}
.ttk .ttk-community-cta__kicker{font-size:12px!important;text-transform:uppercase;letter-spacing:.08em;color:#168eea!important;font-weight:950!important}
.ttk .ttk-type-help-list{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px}
.ttk .ttk-help-term{
 position:relative;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 padding:1px 5px;
 border-bottom:1px dotted currentColor;
 border-radius:5px;
 font-weight:900;
 cursor:help;
 outline:none;
}
.ttk .ttk-help-term::after{
 content:attr(data-tooltip);
 position:absolute;
 left:50%;
 bottom:calc(100% + 9px);
 z-index:120;
 width:max-content;
 max-width:min(260px,75vw);
 padding:7px 10px;
 border-radius:9px;
 background:#111827;
 color:#fff;
 font-size:12px;
 font-weight:750;
 line-height:1.35;
 box-shadow:0 8px 22px rgba(15,23,42,.22);
 opacity:0;
 visibility:hidden;
 transform:translate(-50%,5px);
 transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
 pointer-events:none;
}
.ttk .ttk-help-term:hover::after,.ttk .ttk-help-term:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:760px){
 .ttk .ttk-nav-row{display:grid;grid-template-columns:1fr;padding:7px}
 .ttk .ttk-nav-row .ttk-nav{display:flex!important;flex-wrap:nowrap!important;width:100%!important;overflow-x:auto;scrollbar-width:none;gap:6px}
 .ttk .ttk-nav-row .ttk-nav::-webkit-scrollbar{display:none}
 .ttk .ttk-nav-row .ttk-nav-link{width:auto!important;flex:0 0 auto;min-height:44px;padding:9px 13px;font-size:14px}
 .ttk .ttkdc-community-open--detached{width:100%;margin-left:0}
 .ttk .ttk-community-cta{align-items:stretch;flex-direction:column}
 .ttk .ttk-community-cta button{width:100%}
}

/* 1.30.1 - consistente publieke navigatie, contrast en kalenderuitlijning */
.ttk .ttk-nav-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  box-sizing:border-box!important;
  transform:translateY(0);
  opacity:1;
  transition:transform var(--ttk-sticky-nav-duration,420ms) cubic-bezier(.22,.61,.36,1),opacity 300ms ease,padding .24s ease,border-radius .24s ease,box-shadow .24s ease!important;
  will-change:transform;
}
.ttk .ttk-nav-row .ttk-nav{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:7px!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
.ttk .ttk-nav-row .ttk-nav-link{
  width:100%!important;
  min-width:0!important;
  min-height:52px!important;
  padding:10px 14px!important;
  text-align:center!important;
}
.ttk .ttk-nav-row .ttkdc-community-open--detached{
  align-self:stretch!important;
  min-height:52px!important;
}
.ttk .ttk-nav-row.ttk-smart-sticky.is-sticky-compact{
  padding:5px!important;
  border-radius:16px!important;
  box-shadow:0 8px 24px rgba(15,23,42,.10)!important;
}
.ttk .ttk-nav-row.ttk-smart-sticky.is-sticky-compact .ttk-nav-link,
.ttk .ttk-nav-row.ttk-smart-sticky.is-sticky-compact .ttkdc-community-open--detached{
  min-height:40px!important;
  padding-top:7px!important;
  padding-bottom:7px!important;
  font-size:14px!important;
}
.ttk .ttk-nav-row.ttk-smart-sticky.is-sticky-hidden{
  transform:translateY(calc(-100% - 18px))!important;
  opacity:0!important;
  pointer-events:none!important;
}
.ttk .ttk-nav-row.ttk-smart-sticky.is-sticky-visible{
  transform:translateY(0)!important;
  opacity:1!important;
  pointer-events:auto!important;
}
.ttk .ttkdc-community-open[data-ttkdc-community-open="calendar"],
.ttk .ttkdc-community-open[data-ttkdc-community-open="calendar"] *{
  color:var(--ttk-calendar-text,#fff)!important;
  -webkit-text-fill-color:var(--ttk-calendar-text,#fff)!important;
  text-shadow:none!important;
}
.ttk .toggle-group--view .btn.active{
  background:linear-gradient(135deg,var(--ttk-results-start,#d92bea),var(--ttk-results-end,#ff1493))!important;
  color:var(--ttk-results-text,#fff)!important;
  border-color:var(--ttk-results-start,#d92bea)!important;
  box-shadow:0 8px 20px rgba(216,43,234,.20)!important;
}

/* Alleen ruimte reserveren wanneer er daadwerkelijk een route-preview is. */
.ttk .upcoming{min-height:0!important;}
.ttk .upcoming .hero{max-width:100%!important;}
.ttk .upcoming.has-route-preview{min-height:300px!important;}
.ttk .upcoming.has-route-preview .hero{max-width:56%!important;}
.ttk .ttk-hero-route-fallback{
  position:absolute;
  inset:24px 18px 24px 14%;
  z-index:1;
  width:calc(86% - 32px);
  height:calc(100% - 48px);
  overflow:visible;
  opacity:.96;
  filter:drop-shadow(0 10px 18px rgba(255,122,0,.12));
}
.ttk .ttk-route-fallback-halo,
.ttk .ttk-route-fallback-line{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.ttk .ttk-route-fallback-halo{stroke:#fff;stroke-width:11;opacity:.88;}
.ttk .ttk-route-fallback-line{stroke:#ff7a00;stroke-width:4;opacity:.98;}
.ttk .ttk-hero-route-card.has-leaflet-map .ttk-hero-route-fallback{opacity:.38;}
.ttk .ttk-hero-route-map{z-index:2!important;}
.ttk .ttk-hero-route-loading{z-index:3!important;}

/* Tabelkolommen en inhoud staan op één vaste basislijn. */
.ttk .table-scroll table{
  width:100%!important;
  min-width:1040px!important;
  table-layout:fixed!important;
}
.ttk .table-scroll th:nth-child(1),.ttk .table-scroll td:nth-child(1){width:124px!important;}
.ttk .table-scroll th:nth-child(2),.ttk .table-scroll td:nth-child(2){width:auto!important;}
.ttk .table-scroll th:nth-child(3),.ttk .table-scroll td:nth-child(3){width:164px!important;}
.ttk .table-scroll th:nth-child(4),.ttk .table-scroll td:nth-child(4){width:168px!important;}
.ttk .table-scroll th:nth-child(5),.ttk .table-scroll td:nth-child(5){width:220px!important;}
.ttk tr.data-row>td{
  height:92px;
  vertical-align:middle!important;
  padding-top:12px!important;
  padding-bottom:12px!important;
}
.ttk tr.data-row>td.event-cell{padding:0!important;}
.ttk .event-toggle{
  min-height:92px!important;
  align-items:center!important;
}
.ttk .date-cell__inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:6px;
  min-width:0;
}
.ttk .date-cell__value{font-weight:800;}
.ttk .date-cell .past-pill{margin:0!important;max-width:100%;}
.ttk tr.data-row.past-row{opacity:.68;}
.ttk td:nth-child(3) .badge{
  justify-content:flex-start;
  max-width:100%;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

@media(max-width:1100px){
  .ttk .upcoming.has-route-preview .hero{max-width:100%!important;}
  .ttk .ttk-hero-route-fallback{inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);}
}
@media(max-width:900px){
  .ttk .ttk-nav-row{grid-template-columns:minmax(0,1fr)!important;}
  .ttk .ttk-nav-row .ttkdc-community-open--detached{width:100%!important;}
}
@media(max-width:760px){
  .ttk .ttk-nav-row .ttk-nav{
    display:flex!important;
    grid-template-columns:none!important;
    overflow-x:auto!important;
  }
  .ttk .ttk-nav-row .ttk-nav-link{width:auto!important;flex:0 0 auto!important;}
  .ttk .upcoming.has-route-preview{min-height:0!important;}
  .ttk tr.data-row>td{height:auto;}
  .ttk .event-toggle{min-height:0!important;}
}
body.ttkdc-sticky-nav-enabled .ttk .ttk-nav-row{
  position:sticky!important;
  top:var(--ttk-sticky-nav-offset,8px)!important;
  z-index:90!important;
}
body.admin-bar.ttkdc-sticky-nav-enabled .ttk .ttk-nav-row{top:calc(32px + var(--ttk-sticky-nav-offset,8px))!important;}
body.ttkdc-sticky-nav-enabled .ttk .ttk-nav-row .ttk-nav{position:static!important;top:auto!important;}
@media(max-width:782px){body.admin-bar.ttkdc-sticky-nav-enabled .ttk .ttk-nav-row{top:calc(46px + var(--ttk-sticky-nav-offset,8px))!important;}}

/* 1.30.1 - eerste landenkeuze blijft viewportvast tijdens asynchroon laden. */
html.ttk-country-choice-open .ttkdc-calendar-shell{
  margin-left:0!important;
  transform:none!important;
}
html.ttk-country-choice-open .ttk-country-choice-backdrop{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  overscroll-behavior:contain;
}


/* 1.30.2 - gelijke navigatiematen en gedeelde pagina-uitlijning */
.ttk .ttk-nav-row{grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:stretch!important;}
.ttk .ttk-nav-row .ttk-nav{grid-column:span 4!important;}
.ttk .ttk-nav-row .ttkdc-community-open--detached{grid-column:5!important;width:100%!important;min-width:0!important;min-height:52px!important;margin:0!important;padding:10px 14px!important;font-size:16px!important;line-height:1.2!important;align-self:stretch!important;box-sizing:border-box!important;}
.ttk .ttk-nav-row .ttk-nav-link{font-size:16px!important;line-height:1.2!important;}
.ttk .ttk-nav-row,.ttk .ttk-nav-row.ttk-smart-sticky{transition:transform var(--ttk-sticky-nav-duration,420ms) cubic-bezier(.22,.61,.36,1),opacity 300ms ease,padding .24s ease,border-radius .24s ease,box-shadow .24s ease!important;}
@media(max-width:900px){.ttk .ttk-nav-row{grid-template-columns:minmax(0,1fr)!important}.ttk .ttk-nav-row .ttk-nav,.ttk .ttk-nav-row .ttkdc-community-open--detached{grid-column:1!important}}


/* 1.30.3 - communityactie is het vijfde, gelijkwaardige navigatie-item */
.ttk .ttk-nav-row{
  display:block!important;
  width:100%!important;
  padding:8px!important;
}
.ttk .ttk-nav-row .ttk-nav{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:7px!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
.ttk .ttk-nav-row .ttk-nav-link,
.ttk .ttk-nav-row .ttkdc-community-open--detached{
  grid-column:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:52px!important;
  height:auto!important;
  margin:0!important;
  padding:10px 14px!important;
  border-radius:14px!important;
  box-sizing:border-box!important;
  font-size:16px!important;
  line-height:1.2!important;
  align-self:stretch!important;
  justify-content:center!important;
  text-align:center!important;
}
.ttk .ttk-nav-row .ttkdc-community-open--detached>span:first-child{font-size:18px!important;}
@media(max-width:900px){
  .ttk .ttk-nav-row .ttk-nav{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  .ttk .ttk-nav-row .ttk-nav::-webkit-scrollbar{display:none!important;}
  .ttk .ttk-nav-row .ttk-nav-link,
  .ttk .ttk-nav-row .ttkdc-community-open--detached{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
  }
}

/* 1.30.4 - gedeeld publiek frame als fallback, ook zonder advertentiewrapper */
.ttkdc-public-frame{width:min(var(--ttk-public-content-width,1380px),calc(100vw - 48px));max-width:var(--ttk-public-content-width,1380px);margin-left:50%;margin-right:0;transform:translateX(-50%);box-sizing:border-box}
.ttkdc-public-frame>.ttkdc-public-standalone-main{width:100%;max-width:none;margin:0;min-width:0}
@media(max-width:760px){.ttkdc-public-frame{width:calc(100vw - 20px);max-width:none}}

/* 1.41.0 - filterbalk vult het kalenderpaneel en landenkeuze staat in de viewport. */
.ttk #ttk-calendar-list,
.ttk #ttk-calendar-list > .controls--modern,
.ttk #ttk-calendar-list > .controls--modern > .controls-primary,
.ttk #ttk-calendar-list > .controls--modern > .controls-choicebar,
.ttk #ttk-calendar-list > .controls--modern > .filter-status-row{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}
.ttk #ttk-calendar-list > .controls--modern{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
}
body > .ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  display:grid!important;
  place-items:center!important;
  width:100vw!important;
  height:100dvh!important;
  margin:0!important;
  padding:18px!important;
  transform:none!important;
  box-sizing:border-box!important;
}
body > .ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal[hidden]{
  display:none!important;
}

/* 1.48.7: compacte filterbediening met een toegankelijke mobiele dialoog. */
.ttk .calendar-filter-shell{
  position:relative;
  width:100%;
  max-width:none;
  box-sizing:border-box;
  background:#fff;
  border-bottom:1px solid rgba(20,25,40,.08);
}
.ttk .calendar-filter-toolbar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:70px;
  padding:12px 18px;
  box-sizing:border-box;
  background:linear-gradient(135deg,#fff,#f8faff);
}
.ttk .calendar-filter-toggle,
.ttk .calendar-filter-apply,
.ttk .calendar-filter-close,
.ttk .calendar-filter-panel__footer .filter-reset{
  appearance:none;
  border:0;
  cursor:pointer;
  font:inherit;
}
.ttk .calendar-filter-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:9px 15px;
  border:1px solid rgba(47,111,239,.22);
  border-radius:14px;
  background:#fff;
  color:#20263a;
  font-size:14px;
  font-weight:950;
  box-shadow:0 7px 18px rgba(20,25,40,.06);
}
.ttk .calendar-filter-toggle[aria-expanded="true"]{
  background:#2f6fef;
  border-color:#2f6fef;
  color:#fff;
}
.ttk .calendar-filter-count{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#d92bea;
  color:#fff;
  font-size:12px;
  line-height:1;
  box-sizing:border-box;
}
.ttk .calendar-filter-count[hidden]{display:none!important}
.ttk .calendar-filter-toolbar .filter-summary{
  min-width:0;
  color:#5d6577;
  font-size:13px;
  font-weight:750;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.ttk .calendar-filter-panel[hidden]{display:none!important}
.ttk .calendar-filter-panel{
  position:relative;
  z-index:40;
  width:min(1080px,calc(100% - 36px))!important;
  max-width:1080px!important;
  margin:0 18px 18px!important;
  overflow:visible;
  border:1px solid rgba(20,25,40,.10)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 22px 50px rgba(20,25,40,.14)!important;
}
.ttk .calendar-filter-panel__header,
.ttk .calendar-filter-panel__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 18px;
  box-sizing:border-box;
  background:#fff;
}
.ttk .calendar-filter-panel__header{
  border-bottom:1px solid rgba(20,25,40,.08);
  border-radius:20px 20px 0 0;
}
.ttk .calendar-filter-panel__header h2{
  margin:1px 0 0;
  color:#171a24;
  font-size:22px;
  line-height:1.15;
}
.ttk .calendar-filter-panel__eyebrow{
  color:#697083;
  font-size:10px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ttk .calendar-filter-close{
  display:inline-grid!important;
  place-items:center;
  flex:0 0 42px;
  width:42px!important;
  height:42px;
  padding:0!important;
  border-radius:999px;
  background:#f0f3f8;
  color:#20263a;
  font-size:27px;
  font-weight:500;
  line-height:1;
}
.ttk .calendar-filter-panel__body{
  min-width:0;
  background:#fff;
}
.ttk .calendar-filter-panel .controls-primary{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.ttk .calendar-filter-panel .search--modern{
  grid-column:span 2;
}
.ttk .calendar-filter-panel .controls-choicebar{
  grid-template-columns:minmax(0,1fr)!important;
  padding-bottom:14px!important;
}
.ttk .calendar-filter-panel__footer{
  justify-content:flex-end;
  border-top:1px solid rgba(20,25,40,.08);
  border-radius:0 0 20px 20px;
}
.ttk .calendar-filter-apply,
.ttk .calendar-filter-panel__footer .filter-reset{
  min-height:44px;
  padding:9px 17px;
  border-radius:13px;
  font-size:14px;
  font-weight:950;
}
.ttk .calendar-filter-apply{
  background:linear-gradient(135deg,#168eea,#3b73f2);
  color:#fff;
  box-shadow:0 8px 20px rgba(47,111,239,.22);
}
.ttk .calendar-filter-panel__footer .filter-reset{
  border:1px solid rgba(20,25,40,.12);
  background:#fff;
  color:#4f5668;
}
.ttk .distance-filter{
  display:grid;
  align-content:end;
  gap:6px;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.ttk .distance-filter legend{
  margin:0 0 5px;
  padding:0;
  color:#697083;
  font-size:11px;
  font-weight:950;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.ttk .distance-filter__value{
  color:#20263a;
  font-size:13px;
  font-weight:900;
}
.ttk .distance-filter__sliders{
  position:relative;
  height:34px;
}
.ttk .distance-filter__track{
  position:absolute;
  top:16px;
  right:0;
  left:0;
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:#dfe4ed;
}
.ttk .distance-filter__track span{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#168eea,#d92bea);
}
.ttk .distance-filter input[type="range"]{
  position:absolute;
  inset:0;
  width:100%;
  height:34px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  pointer-events:none;
  appearance:none;
}
.ttk .distance-filter input[type="range"]::-webkit-slider-runnable-track{
  height:5px;
  background:transparent;
}
.ttk .distance-filter input[type="range"]::-webkit-slider-thumb{
  width:22px;
  height:22px;
  margin-top:-8px;
  border:3px solid #fff;
  border-radius:50%;
  background:#2f6fef;
  box-shadow:0 2px 8px rgba(20,25,40,.28);
  pointer-events:auto;
  appearance:none;
}
.ttk .distance-filter input[type="range"]::-moz-range-track{
  height:5px;
  background:transparent;
}
.ttk .distance-filter input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border:3px solid #fff;
  border-radius:50%;
  background:#2f6fef;
  box-shadow:0 2px 8px rgba(20,25,40,.28);
  pointer-events:auto;
}
.ttk .distance-filter input[type="range"]:disabled{opacity:.45}
.ttk .distance-filter__limits{
  display:flex;
  justify-content:space-between;
  color:#7a8192;
  font-size:11px;
  font-weight:750;
}
.ttk .calendar-filter-toggle:focus-visible,
.ttk .calendar-filter-close:focus-visible,
.ttk .calendar-filter-apply:focus-visible,
.ttk .calendar-filter-panel__footer .filter-reset:focus-visible,
.ttk .distance-filter input[type="range"]:focus-visible::-webkit-slider-thumb{
  outline:3px solid rgba(47,111,239,.34);
  outline-offset:3px;
}

html.ttk-filter-panel-open,
html.ttk-filter-panel-open body{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

@media(max-width:900px) and (min-width:761px){
  .ttk .calendar-filter-panel .controls-primary{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:760px){
  html.ttk-filter-panel-open .ttk .panel{overflow:visible!important}
  .ttk .calendar-filter-toolbar{
    grid-template-columns:minmax(0,1fr) auto;
    gap:9px;
    min-height:0;
    padding:11px;
  }
  .ttk .calendar-filter-toolbar .filter-summary{
    grid-column:1/-1;
    grid-row:2;
  }
  .ttk .calendar-filter-toggle{
    justify-self:start;
    width:auto!important;
  }
  .ttk .calendar-filter-toolbar .view-toggle-area{
    width:auto!important;
  }
  .ttk .calendar-filter-toolbar .toggle-group{
    width:auto!important;
  }
  .ttk .calendar-filter-panel{
    position:fixed!important;
    inset:0!important;
    z-index:2147483600!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto;
    width:100vw!important;
    max-width:none!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .ttk .calendar-filter-panel[hidden]{display:none!important}
  .ttk .calendar-filter-panel__header{
    padding:max(13px,env(safe-area-inset-top,0px)) max(15px,env(safe-area-inset-right,0px)) 13px max(15px,env(safe-area-inset-left,0px));
    border-radius:0;
  }
  .ttk .calendar-filter-panel__body{
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .ttk .calendar-filter-panel .controls-primary{
    grid-template-columns:minmax(0,1fr)!important;
    padding:15px!important;
  }
  .ttk .calendar-filter-panel .search--modern{grid-column:auto}
  .ttk .calendar-filter-panel .controls-choicebar{
    padding:14px 15px 18px!important;
  }
  .ttk .calendar-filter-panel .type-filter-set .btn{
    width:auto!important;
  }
  .ttk .calendar-filter-panel__footer{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    padding:12px max(15px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(15px,env(safe-area-inset-left,0px));
    border-radius:0;
    box-shadow:0 -10px 24px rgba(20,25,40,.08);
  }
  .ttk .calendar-filter-panel__footer .filter-reset,
  .ttk .calendar-filter-apply{
    width:100%!important;
  }
  .ttk .calendar-filter-close{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
  }
}

/* 1.47.0: volledige landenoverlay en een kalender die binnen het mobiele scherm blijft */
dialog.ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal{
 position:fixed!important;inset:0!important;z-index:2147483000!important;display:none!important;place-items:center!important;
 width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;margin:0!important;padding:clamp(14px,4vw,28px)!important;
 border:0!important;background:rgba(17,24,39,.68)!important;box-sizing:border-box!important;overflow:auto!important;transform:none!important;
 -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)
}
dialog.ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal[open]{display:grid!important}
dialog.ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal[hidden]{display:none!important}
dialog.ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal::backdrop{background:rgba(17,24,39,.68);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
dialog.ttk-country-choice-backdrop .ttk-country-choice-dialog{width:min(560px,100%)!important;max-width:100%!important;margin:auto!important;box-sizing:border-box!important}
html.ttk-country-choice-open,html.ttk-country-choice-open body{overflow:hidden!important;overscroll-behavior:none}

@media(max-width:760px){
 .ttkdc-public-frame,.ttkdc-calendar-shell,.ttkdc-public-standalone-main,.ttk,.ttk .wrap,.ttk .panel,.ttk #ttk-calendar-list,.ttk .table-wrap,.ttk .table-scroll{
  width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important;transform:none!important;box-sizing:border-box!important
 }
 .ttkdc-public-frame{padding:0 5px!important;overflow-x:hidden!important}
 .ttk{overflow-x:hidden!important}.ttk .wrap{padding:7px!important;overflow-x:hidden!important}.ttk .panel{border-radius:18px!important;overflow:hidden!important}
 body.ttkdc-sticky-nav-enabled .ttk .ttk-nav-row,.ttk .ttk-nav-row{position:relative!important;top:auto!important;transform:none!important;display:block!important;width:100%!important;max-width:100%!important;margin:0 0 10px!important;padding:6px!important;border-radius:15px!important;overflow:visible!important}
 .ttk .ttk-nav-row .ttk-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;width:100%!important;max-width:100%!important;overflow:visible!important}
 .ttk .ttk-nav-row .ttk-nav-link,.ttk .ttk-nav-row .ttkdc-community-open--detached{display:flex!important;width:100%!important;min-width:0!important;max-width:100%!important;min-height:43px!important;padding:8px 7px!important;border-radius:11px!important;font-size:13px!important;line-height:1.15!important;white-space:normal!important;text-align:center!important}
 .ttk .ttk-nav-row .ttk-nav>*:nth-child(5){grid-column:1/-1!important}
 .ttk .ttk-calendar-intro{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;margin:0 0 12px!important;padding:18px 15px!important;border-radius:20px!important}
 .ttk .ttk-calendar-intro__aside{display:none!important}.ttk .ttk-calendar-intro h1{font-size:clamp(29px,10vw,42px)!important;line-height:1.02!important}.ttk .ttk-calendar-intro p{font-size:13px!important;line-height:1.5!important}
 .ttk .controls--modern,.ttk .controls-primary,.ttk .controls-choicebar,.ttk .filter-status-row{width:100%!important;max-width:100%!important;min-width:0!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;padding-left:0!important;padding-right:0!important}
 .ttk .controls--modern input,.ttk .controls--modern select,.ttk .controls--modern button,.ttk .controls--modern [data-country-control],.ttk .controls--modern [data-competition-control]{width:100%!important;max-width:100%!important;min-width:0!important}
 .ttk .table-scroll{max-height:none!important;overflow-x:hidden!important;overflow-y:visible!important}
 .ttk .table-scroll table{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;table-layout:fixed!important}
 .ttk .table-scroll thead{display:none!important}.ttk .table-scroll tbody{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:8px!important}
 .ttk .table-scroll tr.month-row,.ttk .table-scroll tr.data-row,.ttk .table-scroll tr.details-row{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important}
 .ttk .table-scroll tr.month-row td,.ttk .table-scroll tr.data-row td,.ttk .table-scroll tr.details-row td{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
 .ttk tr.data-row{height:auto!important;margin:8px 0!important;border-radius:16px!important;overflow:hidden!important}.ttk tr.data-row>td{height:auto!important}.ttk tr.data-row td:nth-child(3),.ttk tr.data-row td:nth-child(4),.ttk tr.data-row td:nth-child(5){display:none!important}
 .ttk td.event-cell{display:block!important;padding:0!important;overflow:hidden!important}.ttk .event-toggle{display:flex!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important;align-items:flex-start!important;padding:13px!important;overflow:hidden!important}
 .ttk .event-main,.ttk .event-title,.ttk .event-title-with-flag,.ttk .event-title-with-flag>span:last-child,.ttk .event-sub{width:100%!important;max-width:100%!important;min-width:0!important}
 .ttk .event-title{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:7px!important;font-size:16px!important;line-height:1.25!important;overflow:hidden!important}
 .ttk .event-title-with-flag{display:flex!important;flex:1 1 100%!important;align-items:flex-start!important;gap:8px!important}.ttk .event-title-with-flag>span:last-child{overflow-wrap:anywhere!important;word-break:normal!important}
 .ttk .competition-badge,.ttk .result-bubble{display:inline-flex!important;flex:0 1 auto!important;max-width:100%!important;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.2!important}
 .ttk .event-sub{display:block!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.45!important}.ttk .chev{display:none!important}
 .ttk .event-distance-pills,.ttk .event-actions{display:flex!important;flex-wrap:wrap!important;max-width:100%!important;gap:7px!important}.ttk .event-actions a,.ttk .event-actions button{max-width:100%!important;white-space:normal!important}
 .ttk tr.details-row td>.details,.ttk .details-layout,.ttk .details-main,.ttk .details-side{width:100%!important;max-width:100%!important;min-width:0!important}.ttk .details-layout{grid-template-columns:minmax(0,1fr)!important}
 .ttk .map-wrap,.ttk .map{width:100%!important;max-width:100%!important;min-width:0!important}
 dialog.ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal{padding:12px!important}.ttk-country-choice-dialog{padding:22px 18px!important;border-radius:20px!important}.ttk-country-choice-actions{grid-template-columns:minmax(0,1fr)!important}.ttk-country-choice-actions button{width:100%!important}
}

@media(max-width:420px){
 .ttkdc-public-frame{padding:0!important}.ttk .wrap{padding:5px!important}.ttk .table-scroll tbody{padding:6px!important}
 .ttk .ttk-calendar-intro{padding:16px 13px!important}.ttk .event-toggle{padding:12px!important}
}
html.ttk-country-choice-open dialog.ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal:not([hidden]){display:grid!important}

/* 1.48.0: body-level landenkeuze en betrouwbaar ingeklapte mobiele wedstrijdkaarten. */
.ttk tr.details-row[hidden],
.ttk .table-scroll tr.details-row[hidden]{
  display:none!important;
}
body > .ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  z-index:2147483640!important;
  display:grid!important;
  place-items:center!important;
  width:100vw!important;
  max-width:none!important;
  min-height:100vh!important;
  height:100dvh!important;
  max-height:none!important;
  margin:0!important;
  padding:max(18px,env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) max(18px,env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))!important;
  border:0!important;
  background:rgba(17,24,39,.72)!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  -webkit-backdrop-filter:blur(7px)!important;
  backdrop-filter:blur(7px)!important;
}
body > .ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal[hidden]{
  display:none!important;
}
body > .ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal > .ttk-country-choice-dialog{
  position:relative!important;
  width:min(560px,calc(100vw - 36px))!important;
  max-width:560px!important;
  max-height:none!important;
  margin:auto!important;
  padding:26px!important;
  box-sizing:border-box!important;
  transform:none!important;
}
@media(max-width:760px){
  body > .ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal{
    place-items:center!important;
    padding:max(14px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))!important;
  }
  body > .ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal > .ttk-country-choice-dialog{
    width:100%!important;
    max-width:520px!important;
    margin:auto!important;
    padding:22px 18px!important;
    border-radius:20px!important;
  }
}


/* 1.48.1: details are closed by state, not by layout CSS. */
.ttk .table-scroll tr.details-row,
.ttk tr.details-row{
  display:none!important;
}
.ttk .table-scroll tr.data-row.is-open + tr.details-row:not([hidden]),
.ttk tr.data-row.is-open + tr.details-row:not([hidden]){
  display:table-row!important;
}
@media(max-width:760px){
  .ttk .table-scroll tr.data-row.is-open + tr.details-row:not([hidden]),
  .ttk tr.data-row.is-open + tr.details-row:not([hidden]){
    display:block!important;
  }
}

/* De landenkeuze wordt vanuit de shortcode naar document.body verplaatst. */
body > .ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal{
  position:fixed!important;
  inset:0!important;
  z-index:2147483640!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  max-width:none!important;
  height:100vh!important;
  height:100dvh!important;
  margin:0!important;
  padding:max(16px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))!important;
  overflow:auto!important;
  box-sizing:border-box!important;
  transform:none!important;
}
body > .ttk-country-choice-backdrop.ttk-country-choice-backdrop--portal[hidden]{
  display:none!important;
}

/* 1.48.7 finale responsive prioriteit. */
.ttk .wrap{box-sizing:border-box!important;max-width:100%!important}
.ttk .mobile-links.mobile-only{display:none!important}
@media(max-width:760px){
  html.ttk-filter-panel-open .ttk .panel{overflow:visible!important}
  .ttk .calendar-filter-panel{
    position:fixed!important;
    inset:0!important;
    z-index:2147483600!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    width:100vw!important;
    max-width:none!important;
    height:100vh!important;
    height:100dvh!important;
    margin:0!important;
    overflow:hidden!important;
    border-radius:0!important;
  }
  .ttk .calendar-filter-panel[hidden]{display:none!important}
  .ttk .calendar-filter-panel .controls-primary{
    grid-template-columns:minmax(0,1fr)!important;
    padding:15px!important;
  }
  .ttk .calendar-filter-panel .controls-choicebar{padding:14px 15px 18px!important}
  .ttk .calendar-filter-panel .type-filter-set .btn{width:auto!important}
  .ttk .mobile-links.mobile-only{display:flex!important}
  .ttk .calendar-filter-panel .calendar-filter-close{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    padding:0!important;
  }
}


/* 1.48.8 - volledige filterbreedte, robuuste dubbele afstandslider en compacte actiekolommen. */
.ttk .sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.ttk .calendar-filter-panel{
  width:100%!important;
  max-width:none!important;
  margin:0 0 18px!important;
  box-sizing:border-box!important;
}
.ttk .calendar-filter-panel .distance-filter{
  grid-column:1/-1!important;
  width:100%!important;
  padding-top:3px!important;
}
.ttk .distance-filter__sliders{
  position:relative!important;
  isolation:isolate;
  width:100%!important;
  height:42px!important;
  overflow:visible!important;
}
.ttk .distance-filter__track{
  position:absolute!important;
  z-index:1!important;
  top:50%!important;
  right:11px!important;
  left:11px!important;
  width:auto!important;
  height:8px!important;
  transform:translateY(-50%)!important;
  overflow:hidden!important;
  border:1px solid rgba(32,38,58,.10)!important;
  border-radius:999px!important;
  background:#dfe5ef!important;
  box-shadow:inset 0 1px 2px rgba(20,25,40,.10)!important;
}
.ttk .distance-filter__track span{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  min-width:0!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,#168eea 0%,#3b73f2 55%,#d92bea 100%)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset!important;
}
.ttk .distance-filter input[type="range"]{
  position:absolute!important;
  inset:0!important;
  z-index:4;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:42px!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:default!important;
  pointer-events:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
.ttk .distance-filter input[data-distance-min]{z-index:5}
.ttk .distance-filter input[data-distance-max]{z-index:4}
.ttk .distance-filter input[type="range"]::-webkit-slider-runnable-track{
  height:8px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-appearance:none!important;
}
.ttk .distance-filter input[type="range"]::-webkit-slider-thumb{
  width:24px!important;
  height:24px!important;
  margin-top:-8px!important;
  border:3px solid #fff!important;
  border-radius:50%!important;
  background:#2f6fef!important;
  box-shadow:0 2px 8px rgba(20,25,40,.28),0 0 0 1px rgba(47,111,239,.24)!important;
  cursor:grab!important;
  pointer-events:auto!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
.ttk .distance-filter input[type="range"]:active::-webkit-slider-thumb{cursor:grabbing!important}
.ttk .distance-filter input[type="range"]::-moz-range-track{
  height:8px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.ttk .distance-filter input[type="range"]::-moz-range-progress{background:transparent!important}
.ttk .distance-filter input[type="range"]::-moz-range-thumb{
  width:18px!important;
  height:18px!important;
  border:3px solid #fff!important;
  border-radius:50%!important;
  background:#2f6fef!important;
  box-shadow:0 2px 8px rgba(20,25,40,.28),0 0 0 1px rgba(47,111,239,.24)!important;
  cursor:grab!important;
  pointer-events:auto!important;
}
.ttk .distance-filter input[type="range"]:active::-moz-range-thumb{cursor:grabbing!important}
.ttk .distance-filter input[type="range"]:focus-visible::-webkit-slider-thumb{
  outline:3px solid rgba(47,111,239,.34)!important;
  outline-offset:3px!important;
}
.ttk .distance-filter input[type="range"]:focus-visible::-moz-range-thumb{
  outline:3px solid rgba(47,111,239,.34)!important;
  outline-offset:3px!important;
}

.ttk .table-scroll table{
  min-width:1040px!important;
  table-layout:fixed!important;
}
.ttk .table-scroll th:nth-child(1),.ttk .table-scroll td:nth-child(1){width:124px!important}
.ttk .table-scroll th:nth-child(2),.ttk .table-scroll td:nth-child(2){width:auto!important}
.ttk .table-scroll th:nth-child(3),.ttk .table-scroll td:nth-child(3){width:150px!important}
.ttk .table-scroll th:nth-child(4),.ttk .table-scroll td:nth-child(4){width:150px!important}
.ttk .table-scroll th:nth-child(5),.ttk .table-scroll td:nth-child(5),
.ttk .table-scroll th:nth-child(6),.ttk .table-scroll td:nth-child(6){width:64px!important}
.ttk .table-scroll th:nth-child(4),.ttk .table-scroll td:nth-child(4){white-space:normal!important}
.ttk .calendar-action-heading,
.ttk .calendar-action-cell{
  padding-right:8px!important;
  padding-left:8px!important;
  text-align:center!important;
  vertical-align:middle!important;
}
.ttk .calendar-action-heading svg{
  display:block;
  width:21px;
  height:21px;
  margin:auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ttk .calendar-distance{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  color:#20263a;
  font-size:13px;
  font-weight:900;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.ttk .calendar-action-icon{
  display:inline-grid!important;
  place-items:center!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  margin:0 auto!important;
  padding:0!important;
  border:1px solid rgba(20,25,40,.12)!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#2f6fef!important;
  text-decoration:none!important;
  box-shadow:0 5px 13px rgba(20,25,40,.06)!important;
  cursor:pointer!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
.ttk .calendar-action-icon:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(47,111,239,.36)!important;
  box-shadow:0 9px 20px rgba(47,111,239,.14)!important;
}
.ttk .calendar-action-icon:focus-visible{
  outline:3px solid rgba(47,111,239,.28)!important;
  outline-offset:2px!important;
}
.ttk .calendar-action-icon svg{
  display:block;
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.ttk .calendar-action-icon--website{color:#344054!important}
.ttk .calendar-action-empty{display:inline-block;width:100%;text-align:center}

@media(max-width:760px){
  .ttk .calendar-filter-panel{width:100vw!important;max-width:none!important}
  .ttk .calendar-filter-panel .distance-filter{grid-column:auto!important}
  .ttk tr.data-row td:nth-child(3),
  .ttk tr.data-row td:nth-child(4),
  .ttk tr.data-row td:nth-child(5),
  .ttk tr.data-row td:nth-child(6){display:none!important}
  .ttk .mobile-links.mobile-only .calendar-action-icon{
    display:inline-grid!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
  }
}


/* ==================================================
   1.48.9 - volledige filterbreedte, zichtbare afstandsrange,
   paginering, begrijpelijke actiekoppen en mobiele kaarten.
================================================== */
.ttk #ttk-calendar-list{scroll-margin-top:24px!important}
.ttk .calendar-filter-panel{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  justify-items:stretch!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 18px!important;
}
.ttk .calendar-filter-panel > .calendar-filter-panel__header,
.ttk .calendar-filter-panel > .calendar-filter-panel__body,
.ttk .calendar-filter-panel > .calendar-filter-panel__footer,
.ttk .calendar-filter-panel .controls-primary,
.ttk .calendar-filter-panel .controls-choicebar,
.ttk .calendar-filter-panel .filters--modern,
.ttk .calendar-filter-panel .filters-main-row{
  grid-column:1/-1!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
  justify-self:stretch!important;
}
.ttk .calendar-filter-panel .controls-primary{
  grid-template-columns:minmax(280px,1.55fr) repeat(2,minmax(180px,.75fr))!important;
}
.ttk .calendar-filter-panel .search--modern{grid-column:auto!important}
.ttk .calendar-filter-panel .distance-filter{grid-column:1/-1!important}

/* Een zelfstandige kleurstrook maakt de geselecteerde afstand ook in Safari zichtbaar. */
.ttk .distance-filter__sliders{
  --distance-min-percent:0%;
  --distance-max-percent:100%;
  height:48px!important;
}
.ttk .distance-filter__sliders::before{
  content:"";
  position:absolute;
  z-index:2;
  top:50%;
  right:12px;
  left:12px;
  height:10px;
  transform:translateY(-50%);
  border:1px solid rgba(32,38,58,.12);
  border-radius:999px;
  background:linear-gradient(to right,
    #dfe5ef 0 var(--distance-min-percent),
    #168eea var(--distance-min-percent),
    #d92bea var(--distance-max-percent),
    #dfe5ef var(--distance-max-percent) 100%);
  box-shadow:inset 0 1px 2px rgba(20,25,40,.13),0 1px 0 rgba(255,255,255,.8);
  pointer-events:none;
}
.ttk .distance-filter__track{
  z-index:3!important;
  height:10px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.ttk .distance-filter__track span{
  height:10px!important;
  background:linear-gradient(90deg,#168eea 0%,#3b73f2 55%,#d92bea 100%)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 3px 10px rgba(47,111,239,.25)!important;
}
.ttk .distance-filter input[type="range"]{height:48px!important}
.ttk .distance-filter input[type="range"]::-webkit-slider-runnable-track{height:10px!important;background:transparent!important}
.ttk .distance-filter input[type="range"]::-webkit-slider-thumb{
  width:26px!important;height:26px!important;margin-top:-8px!important;
  border:3px solid #fff!important;background:#2f6fef!important;
  box-shadow:0 3px 10px rgba(20,25,40,.28),0 0 0 1px rgba(47,111,239,.30)!important;
}
.ttk .distance-filter input[type="range"]::-moz-range-track{height:10px!important;background:transparent!important}
.ttk .distance-filter input[type="range"]::-moz-range-thumb{
  width:20px!important;height:20px!important;border:3px solid #fff!important;background:#2f6fef!important;
  box-shadow:0 3px 10px rgba(20,25,40,.28),0 0 0 1px rgba(47,111,239,.30)!important;
}

/* Tabellenkoppen blijven begrijpelijk zonder te hoeven raden naar pictogrammen. */
.ttk .table-scroll table{min-width:1160px!important}
.ttk .table-scroll th:nth-child(5),.ttk .table-scroll td:nth-child(5){width:170px!important}
.ttk .table-scroll th:nth-child(6),.ttk .table-scroll td:nth-child(6){width:112px!important}
.ttk .calendar-action-heading{
  position:relative;
  white-space:normal!important;
  font-size:13px!important;
  line-height:1.25!important;
}
.ttk .calendar-heading-label{display:inline;vertical-align:middle}
.ttk .calendar-heading-help{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  margin-left:5px;
  border:1px solid rgba(47,111,239,.28);
  border-radius:50%;
  background:#eef4ff;
  color:#2f6fef;
  font-size:12px;
  font-weight:950;
  line-height:1;
  cursor:help;
  vertical-align:middle;
}
.ttk .calendar-heading-help::after{
  content:attr(data-tooltip);
  position:absolute;
  z-index:100;
  right:0;
  bottom:calc(100% + 10px);
  width:240px;
  max-width:min(240px,70vw);
  padding:9px 11px;
  border:1px solid rgba(20,25,40,.12);
  border-radius:10px;
  background:#20263a;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  text-align:left;
  white-space:normal;
  box-shadow:0 12px 28px rgba(20,25,40,.22);
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
  pointer-events:none;
}
.ttk .calendar-heading-help:hover::after,
.ttk .calendar-heading-help:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* Paginering met paginagrootte én directe paginasprong. */
.ttk .calendar-pagination{
  display:grid;
  grid-template-columns:minmax(210px,1fr) auto auto;
  align-items:center;
  gap:12px 18px;
  width:100%;
  padding:16px 18px;
  border-top:1px solid rgba(20,25,40,.09);
  background:linear-gradient(135deg,#fff,#f8faff);
  box-sizing:border-box;
}
.ttk .calendar-pagination[hidden]{display:none!important}
.ttk .calendar-pagination__summary{color:#5d6577;font-size:13px;font-weight:800;line-height:1.4}
.ttk .calendar-pagination__size,
.ttk .calendar-pagination__jump{display:flex;align-items:center;gap:8px;color:#4f5668;font-size:12px;font-weight:900;white-space:nowrap}
.ttk .calendar-pagination select,
.ttk .calendar-pagination input{
  min-height:38px;
  border:1px solid rgba(20,25,40,.14);
  border-radius:10px;
  background:#fff;
  color:#20263a;
  font:inherit;
  font-weight:900;
  box-sizing:border-box;
}
.ttk .calendar-pagination select{padding:6px 30px 6px 10px}
.ttk .calendar-pagination input{width:66px;padding:6px 8px;text-align:center}
.ttk .calendar-pagination__buttons{display:flex;align-items:center;justify-content:center;gap:6px}
.ttk .calendar-pagination__numbers{display:flex;align-items:center;gap:5px}
.ttk .calendar-pagination button{
  min-width:38px;
  min-height:38px;
  padding:7px 10px;
  border:1px solid rgba(20,25,40,.12);
  border-radius:10px;
  background:#fff;
  color:#20263a;
  font:inherit;
  font-size:13px;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(20,25,40,.04);
}
.ttk .calendar-pagination button:hover:not(:disabled){border-color:rgba(47,111,239,.35);background:#f5f8ff}
.ttk .calendar-pagination button.is-active{
  border-color:#2f6fef;
  background:linear-gradient(135deg,#168eea,#3b73f2);
  color:#fff;
  box-shadow:0 7px 16px rgba(47,111,239,.22);
}
.ttk .calendar-pagination button:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.ttk .calendar-pagination__ellipsis{padding:0 2px;color:#7a8192;font-weight:900}
.ttk .calendar-pagination__jump{grid-column:1/-1;justify-self:end}
.ttk .calendar-pagination__jump button{min-width:48px;background:#eef4ff;color:#2f6fef;border-color:rgba(47,111,239,.22)}

@media(max-width:1100px) and (min-width:761px){
  .ttk .calendar-filter-panel .controls-primary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ttk .calendar-filter-panel .distance-filter{grid-column:1/-1!important}
  .ttk .calendar-pagination{grid-template-columns:1fr auto}
  .ttk .calendar-pagination__buttons{grid-column:1/-1;grid-row:2}
  .ttk .calendar-pagination__jump{grid-column:1/-1;grid-row:3}
}

@media(max-width:760px){
  .ttk #ttk-calendar-list{scroll-margin-top:10px!important}
  .ttk .calendar-filter-panel{width:100vw!important;height:100dvh!important;margin:0!important}
  .ttk .calendar-filter-panel .controls-primary{grid-template-columns:minmax(0,1fr)!important}
  .ttk .distance-filter__sliders{height:52px!important}

  /* De kalender wordt op telefoon als echte kaartlijst opgebouwd. */
  .ttk .table-wrap{background:#f3f6fb!important}
  .ttk .table-scroll tbody{padding:10px!important;background:#f3f6fb!important}
  .ttk .table-scroll tr.month-row{
    margin:16px 2px 7px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }
  .ttk .table-scroll tr.month-row:first-child{margin-top:4px!important}
  .ttk .table-scroll tr.month-row td{
    padding:5px 2px!important;
    border:0!important;
    background:transparent!important;
    color:#20263a!important;
    font-size:18px!important;
    font-weight:950!important;
  }
  .ttk .table-scroll tr.month-row .count{font-size:13px!important;color:#697083!important}
  .ttk tr.data-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    margin:0 0 11px!important;
    border:1px solid rgba(20,25,40,.09)!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 8px 22px rgba(20,25,40,.065)!important;
    opacity:1!important;
  }
  .ttk tr.data-row.past-row{opacity:.74!important}
  .ttk tr.data-row td:nth-child(1){
    display:block!important;
    padding:9px 13px!important;
    border:0!important;
    border-bottom:1px solid rgba(20,25,40,.07)!important;
    background:linear-gradient(135deg,#f7faff,#fff)!important;
  }
  .ttk .date-cell__inner{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}
  .ttk .date-cell__value{font-size:13px!important;color:#4f5668!important;font-weight:950!important}
  .ttk .date-cell .past-pill{font-size:10px!important;padding:3px 7px!important}
  .ttk td.event-cell{display:block!important;overflow:visible!important}
  .ttk .event-toggle{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 26px!important;
    gap:10px!important;
    align-items:start!important;
    padding:14px 13px 12px!important;
  }
  .ttk .event-main{gap:10px!important}
  .ttk .event-title{font-size:16px!important;line-height:1.3!important;color:#171a24!important}
  .ttk .event-title-with-flag{align-items:flex-start!important}
  .ttk .event-sub{display:grid!important;gap:9px!important}
  .ttk .mobile-event-meta{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}
  .ttk .mobile-meta-chip{
    display:inline-flex!important;align-items:center!important;min-height:27px!important;padding:4px 9px!important;
    border-radius:999px!important;font-size:11px!important;font-weight:950!important;line-height:1.2!important;
  }
  .ttk .mobile-meta-chip--type{background:#eef4ff!important;color:#2f6fef!important;border:1px solid rgba(47,111,239,.18)!important}
  .ttk .mobile-meta-chip--distance{background:#fff1f8!important;color:#a60061!important;border:1px solid rgba(200,0,116,.15)!important}
  .ttk .mobile-meta-location{flex:1 1 100%!important;color:#697083!important;font-size:12px!important;font-weight:750!important;line-height:1.4!important}
  .ttk .mobile-expand-label{display:inline-flex!important;color:#2f6fef!important;font-size:12px!important;font-weight:900!important}
  .ttk .chev{
    display:grid!important;place-items:center!important;width:26px!important;height:26px!important;margin-top:1px!important;
    border-radius:50%!important;background:#eef4ff!important;color:#2f6fef!important;font-size:22px!important;line-height:1!important;
    transition:transform .18s ease!important;
  }
  .ttk tr.data-row.is-open .chev{transform:rotate(90deg)!important}
  .ttk .mobile-links.mobile-only{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding:0 13px 13px!important;
  }
  .ttk .calendar-mobile-action{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
    min-width:0!important;min-height:41px!important;padding:8px 10px!important;
    border:1px solid rgba(20,25,40,.11)!important;border-radius:12px!important;background:#fff!important;
    color:#2f6fef!important;text-decoration:none!important;font-size:12px!important;font-weight:950!important;
    box-shadow:0 5px 14px rgba(20,25,40,.045)!important;
  }
  .ttk .calendar-mobile-action--website{color:#344054!important}
  .ttk .calendar-mobile-action svg{width:19px!important;height:19px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important;flex:0 0 auto!important}
  .ttk tr.details-row td>.details{padding:13px!important;background:#fff!important}
  .ttk .season-anchor-row{display:block!important;margin:7px 0 10px!important}
  .ttk .season-anchor-row td{display:block!important;border-radius:13px!important;padding:10px 12px!important;font-size:12px!important}
  .ttk .season-anchor-row .count{display:block!important;margin:3px 0 0!important}

  .ttk .calendar-pagination{
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    padding:14px 12px 18px!important;
    background:#fff!important;
  }
  .ttk .calendar-pagination__summary{text-align:center!important}
  .ttk .calendar-pagination__size{justify-content:center!important;white-space:normal!important}
  .ttk .calendar-pagination__buttons{grid-column:auto!important;grid-row:auto!important;justify-content:space-between!important;gap:5px!important}
  .ttk .calendar-pagination__numbers{max-width:100%!important;overflow-x:auto!important;padding:2px!important}
  .ttk .calendar-pagination__buttons>button{min-width:74px!important}
  .ttk .calendar-pagination__jump{grid-column:auto!important;grid-row:auto!important;justify-self:stretch!important;justify-content:center!important;flex-wrap:wrap!important;white-space:normal!important}
  .ttk .calendar-pagination__jump label{flex:1 1 100%!important;text-align:center!important}
}

@media(max-width:430px){
  .ttk .mobile-links.mobile-only{grid-template-columns:minmax(0,1fr)!important}
  .ttk .calendar-pagination__numbers button:not(.is-active){display:none!important}
  .ttk .calendar-pagination__numbers .calendar-pagination__ellipsis{display:none!important}
}

/* 1.48.9 mobile width correction: neutralise the desktop table minimum width. */
@media(max-width:760px){
  .ttk .table-scroll{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
  .ttk .table-scroll table,
  .ttk .table-scroll tbody{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
  }
  .ttk .table-scroll tr.month-row,
  .ttk .table-scroll tr.data-row,
  .ttk .table-scroll tr.details-row,
  .ttk .table-scroll tr.season-anchor-row{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .ttk .table-scroll tr.month-row td,
  .ttk .table-scroll tr.data-row td,
  .ttk .table-scroll tr.details-row td,
  .ttk .table-scroll tr.season-anchor-row td{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}


/* ==================================================
   1.48.10 - browseronafhankelijke dubbele afstandslider.
   De visuele rail en knoppen worden niet langer door Safari/het thema gerenderd.
================================================== */
.ttk .distance-filter__sliders{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:50px!important;
  min-height:50px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  isolation:isolate!important;
}
.ttk .distance-filter__sliders::before,
.ttk .distance-filter__sliders::after{
  content:none!important;
  display:none!important;
}
.ttk .distance-filter__track{
  position:absolute!important;
  z-index:20!important;
  top:50%!important;
  right:14px!important;
  left:14px!important;
  display:block!important;
  width:auto!important;
  height:10px!important;
  min-height:10px!important;
  margin:0!important;
  padding:0!important;
  transform:translateY(-50%)!important;
  overflow:visible!important;
  border:1px solid rgba(32,38,58,.13)!important;
  border-radius:999px!important;
  background:#dfe5ef!important;
  box-shadow:inset 0 1px 3px rgba(20,25,40,.14),0 1px 0 rgba(255,255,255,.9)!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:none!important;
}
.ttk .distance-filter__selection,
.ttk .distance-filter__track > span[data-distance-range-fill]{
  position:absolute!important;
  z-index:1!important;
  top:-1px!important;
  bottom:-1px!important;
  display:block!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#168eea 0%,#3b73f2 55%,#d92bea 100%)!important;
  box-shadow:0 2px 8px rgba(47,111,239,.28),inset 0 0 0 1px rgba(255,255,255,.16)!important;
  pointer-events:none!important;
}
.ttk .distance-filter__thumb{
  position:absolute!important;
  z-index:3!important;
  top:50%!important;
  display:block!important;
  width:27px!important;
  min-width:27px!important;
  max-width:27px!important;
  height:27px!important;
  min-height:27px!important;
  max-height:27px!important;
  margin:0!important;
  padding:0!important;
  transform:translate(-50%,-50%)!important;
  overflow:visible!important;
  border:3px solid #fff!important;
  border-radius:50%!important;
  outline:0!important;
  background:#2f6fef!important;
  box-shadow:0 3px 10px rgba(20,25,40,.30),0 0 0 1px rgba(47,111,239,.34)!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  cursor:grab!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  pointer-events:auto!important;
  touch-action:none!important;
}
.ttk .distance-filter__thumb::before,
.ttk .distance-filter__thumb::after{
  content:none!important;
  display:none!important;
}
.ttk .distance-filter__thumb:hover{
  transform:translate(-50%,-50%) scale(1.06)!important;
  box-shadow:0 4px 13px rgba(20,25,40,.32),0 0 0 4px rgba(47,111,239,.12)!important;
}
.ttk .distance-filter__thumb:focus-visible{
  outline:3px solid rgba(47,111,239,.36)!important;
  outline-offset:4px!important;
}
.ttk .distance-filter__sliders.is-dragging .distance-filter__thumb{
  cursor:grabbing!important;
}
.ttk .distance-filter__sliders.is-disabled{
  opacity:.48!important;
}
.ttk .distance-filter input[type="range"]{
  display:none!important;
  visibility:hidden!important;
  width:0!important;
  height:0!important;
  opacity:0!important;
  pointer-events:none!important;
}
@media(max-width:760px){
  .ttk .distance-filter__sliders{height:54px!important;min-height:54px!important}
  .ttk .distance-filter__track{right:15px!important;left:15px!important;height:11px!important;min-height:11px!important}
  .ttk .distance-filter__thumb{width:30px!important;min-width:30px!important;max-width:30px!important;height:30px!important;min-height:30px!important;max-height:30px!important}
}

/* Hogere specificiteit dan de mobiele formulierregel die alle knoppen 100% breed maakt. */
.ttk .controls--modern .distance-filter .distance-filter__track > button.distance-filter__thumb,
.ttk .calendar-filter-panel .distance-filter .distance-filter__track > button.distance-filter__thumb{
  right:auto!important;
  bottom:auto!important;
  width:27px!important;
  min-width:27px!important;
  max-width:27px!important;
  height:27px!important;
  min-height:27px!important;
  max-height:27px!important;
  box-sizing:border-box!important;
}
@media(max-width:760px){
  .ttk .controls--modern .distance-filter .distance-filter__track > button.distance-filter__thumb,
  .ttk .calendar-filter-panel .distance-filter .distance-filter__track > button.distance-filter__thumb{
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
  }
}

/* ==================================================
   1.48.21 – hero zachtere overgang + subtiele shareable styling
================================================== */
.ttk .upcoming {
  background:
    radial-gradient(circle at 12% 16%, rgba(47,111,239,.10), transparent 26%),
    radial-gradient(circle at 86% 16%, rgba(217,43,234,.09), transparent 28%),
    radial-gradient(circle at 78% 78%, rgba(255,122,0,.06), transparent 24%),
    linear-gradient(105deg, #f7faff 0%, #fbfcff 42%, #fff8fc 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 16px 38px rgba(31,46,88,.06) !important;
}

.ttk .upcoming::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.10) 22%, rgba(255,255,255,0) 50%, rgba(255,255,255,.06) 76%, rgba(255,255,255,.14) 100%),
    radial-gradient(circle at 18% 82%, rgba(22,142,234,.05), transparent 24%);
  pointer-events: none;
}

.ttk .upcoming .hero {
  padding-right: 12px !important;
}

.ttk .upcoming .hero::after {
  content: "";
  position: absolute;
  top: -22px;
  right: -128px;
  bottom: -22px;
  width: 240px;
  z-index: -1;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.58) 36%, rgba(255,255,255,.16) 60%, rgba(255,255,255,0) 76%);
  filter: blur(14px);
  pointer-events: none;
}

.ttk .ttk-hero-route-card {
  right: -1.5% !important;
  width: 52% !important;
  min-width: 440px !important;

  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.01) 10%, rgba(0,0,0,.10) 24%, rgba(0,0,0,.32) 38%, rgba(0,0,0,.64) 52%, rgba(0,0,0,.90) 70%, #000 82%, #000 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.90) 6%, #000 15%, #000 85%, rgba(0,0,0,.90) 94%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.01) 10%, rgba(0,0,0,.10) 24%, rgba(0,0,0,.32) 38%, rgba(0,0,0,.64) 52%, rgba(0,0,0,.90) 70%, #000 82%, #000 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.90) 6%, #000 15%, #000 85%, rgba(0,0,0,.90) 94%, transparent 100%);
}

.ttk .ttk-hero-route-card::before {
  background:
    radial-gradient(circle at 72% 34%, rgba(255,122,0,.13), transparent 36%),
    radial-gradient(circle at 88% 52%, rgba(217,43,234,.10), transparent 42%),
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.84) 11%, rgba(255,255,255,.60) 22%, rgba(255,255,255,.28) 38%, rgba(255,255,255,.08) 54%, rgba(255,255,255,.01) 68%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 42%, rgba(255,255,255,.12));
}

.ttk .upcoming::after {
  width: 67%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.90) 12%, rgba(255,255,255,.70) 24%, rgba(255,255,255,.36) 40%, rgba(255,255,255,.10) 58%, rgba(255,255,255,.02) 72%, rgba(255,255,255,0) 100%),
    radial-gradient(circle at 76% 20%, rgba(217,43,234,.10), transparent 46%),
    radial-gradient(circle at 83% 76%, rgba(22,142,234,.08), transparent 42%);
}

.ttk .hero-badge {
  box-shadow: 0 12px 24px rgba(47,111,239,.18);
}

.ttk .hero-countdown {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(8px);
  border-color: rgba(47,111,239,.10);
  box-shadow: 0 10px 18px rgba(26,44,85,.06);
}

.ttk .hero-title {
  letter-spacing: -.02em;
  text-wrap: balance;
}

.ttk .hero-meta {
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.64);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(47,111,239,.10);
  box-shadow: 0 10px 20px rgba(26,44,85,.05);
}

.ttk .hero-actions {
  margin-top: 12px;
}

.ttk .hero-btn {
  padding: 12px 18px;
  border-radius: 18px;
  border-color: rgba(47,111,239,.22);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 22px rgba(26,44,85,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ttk .hero-btn:hover,
.ttk .hero-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(26,44,85,.10);
  border-color: rgba(47,111,239,.34);
}

.ttk .hero-btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #2f6fef 0%, #2e95f5 100%);
  box-shadow: 0 16px 28px rgba(47,111,239,.22);
}

@media (max-width: 1100px) {
  .ttk .upcoming .hero::after,
  .ttk .upcoming::before,
  .ttk .upcoming::after {
    display: none !important;
  }

  .ttk .ttk-hero-route-card {
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ttk .hero-meta {
    display: flex;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
  }
}

/* ==================================================
   1.48.22 – hero-parcours nog vloeiender laten overlopen
================================================== */
.ttk .upcoming {
  isolation: isolate;
}

.ttk .ttk-hero-route-card {
  right: -2.2% !important;
  width: 54% !important;
  min-width: 450px !important;
  opacity: .99 !important;
  -webkit-mask-image:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.004) 8%,
      rgba(0,0,0,.025) 16%,
      rgba(0,0,0,.09) 24%,
      rgba(0,0,0,.22) 34%,
      rgba(0,0,0,.42) 46%,
      rgba(0,0,0,.68) 60%,
      rgba(0,0,0,.90) 74%,
      #000 86%,
      #000 100%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.88) 5%,
      #000 14%,
      #000 86%,
      rgba(0,0,0,.88) 95%,
      transparent 100%);
  mask-image:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.004) 8%,
      rgba(0,0,0,.025) 16%,
      rgba(0,0,0,.09) 24%,
      rgba(0,0,0,.22) 34%,
      rgba(0,0,0,.42) 46%,
      rgba(0,0,0,.68) 60%,
      rgba(0,0,0,.90) 74%,
      #000 86%,
      #000 100%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.88) 5%,
      #000 14%,
      #000 86%,
      rgba(0,0,0,.88) 95%,
      transparent 100%);
}

.ttk .ttk-hero-route-card::before {
  background:
    radial-gradient(circle at 72% 34%, rgba(255,122,0,.12), transparent 38%),
    radial-gradient(circle at 88% 52%, rgba(217,43,234,.09), transparent 44%),
    linear-gradient(90deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.92) 8%,
      rgba(255,255,255,.82) 18%,
      rgba(255,255,255,.62) 30%,
      rgba(255,255,255,.36) 44%,
      rgba(255,255,255,.14) 58%,
      rgba(255,255,255,.03) 72%,
      rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 42%, rgba(255,255,255,.12));
}

.ttk .upcoming::after {
  width: 72% !important;
  right: -2% !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.94) 10%,
      rgba(255,255,255,.84) 18%,
      rgba(255,255,255,.66) 28%,
      rgba(255,255,255,.42) 40%,
      rgba(255,255,255,.20) 52%,
      rgba(255,255,255,.07) 64%,
      rgba(255,255,255,.01) 76%,
      rgba(255,255,255,0) 100%),
    radial-gradient(circle at 76% 20%, rgba(217,43,234,.09), transparent 48%),
    radial-gradient(circle at 83% 76%, rgba(22,142,234,.07), transparent 44%);
}

.ttk .upcoming .hero::after {
  right: -168px;
  width: 320px;
  background: radial-gradient(circle at 48% 50%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.70) 28%, rgba(255,255,255,.34) 54%, rgba(255,255,255,.08) 70%, rgba(255,255,255,0) 82%);
  filter: blur(18px);
}

.ttk .ttk-hero-route-card::after {
  left: 30%;
  bottom: 24px;
  color: rgba(38,46,67,.64);
  font-size: 11px;
  letter-spacing: .28em;
  text-shadow: 0 1px 0 rgba(255,255,255,.84), 0 8px 18px rgba(255,255,255,.42);
}

@media (max-width: 1280px) {
  .ttk .ttk-hero-route-card {
    width: 52% !important;
    min-width: 420px !important;
  }

  .ttk .upcoming::after {
    width: 68% !important;
  }
}

@media (max-width: 1100px) {
  .ttk .upcoming::after,
  .ttk .upcoming .hero::after {
    display: none !important;
  }

  .ttk .ttk-hero-route-card {
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ttk .ttk-hero-route-card::after {
    left: 18px;
  }
}

/* ==================================================
   1.48.23 – headerovergang zonder zichtbare knip
================================================== */
.ttk .upcoming {
  background:
    linear-gradient(90deg,
      #eef4ff 0%,
      #f2f7ff 16%,
      #f7faff 32%,
      #fbfcff 48%,
      #fffbfe 66%,
      #fff7fc 100%) !important;
}

.ttk .upcoming::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(64,129,242,.10) 0%,
      rgba(64,129,242,.06) 14%,
      rgba(64,129,242,.025) 28%,
      rgba(255,255,255,0) 48%),
    radial-gradient(circle at 86% 18%, rgba(217,43,234,.08), transparent 32%),
    radial-gradient(circle at 82% 76%, rgba(22,142,234,.06), transparent 30%);
  pointer-events: none;
}

.ttk .upcoming .hero {
  position: relative;
  z-index: 4;
}

.ttk .upcoming .hero::before {
  content: "";
  position: absolute;
  top: -28px;
  right: -220px;
  bottom: -28px;
  width: 420px;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(234,242,255,.92) 0%,
      rgba(243,248,255,.82) 24%,
      rgba(252,253,255,.52) 48%,
      rgba(255,255,255,.20) 68%,
      rgba(255,255,255,0) 100%);
  filter: blur(24px);
  pointer-events: none;
}

.ttk .ttk-hero-route-card {
  right: -3.2% !important;
  width: 56.5% !important;
  min-width: 470px !important;
  -webkit-mask-image:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.002) 7%,
      rgba(0,0,0,.015) 14%,
      rgba(0,0,0,.05) 21%,
      rgba(0,0,0,.12) 29%,
      rgba(0,0,0,.24) 38%,
      rgba(0,0,0,.42) 48%,
      rgba(0,0,0,.63) 59%,
      rgba(0,0,0,.82) 71%,
      rgba(0,0,0,.94) 82%,
      #000 90%,
      #000 100%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.86) 5%,
      #000 14%,
      #000 86%,
      rgba(0,0,0,.86) 95%,
      transparent 100%);
  mask-image:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.002) 7%,
      rgba(0,0,0,.015) 14%,
      rgba(0,0,0,.05) 21%,
      rgba(0,0,0,.12) 29%,
      rgba(0,0,0,.24) 38%,
      rgba(0,0,0,.42) 48%,
      rgba(0,0,0,.63) 59%,
      rgba(0,0,0,.82) 71%,
      rgba(0,0,0,.94) 82%,
      #000 90%,
      #000 100%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.86) 5%,
      #000 14%,
      #000 86%,
      rgba(0,0,0,.86) 95%,
      transparent 100%);
}

.ttk .ttk-hero-route-card::before {
  background:
    radial-gradient(circle at 72% 34%, rgba(255,122,0,.11), transparent 40%),
    radial-gradient(circle at 88% 52%, rgba(217,43,234,.08), transparent 46%),
    linear-gradient(90deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.92) 8%,
      rgba(255,255,255,.86) 16%,
      rgba(255,255,255,.74) 24%,
      rgba(255,255,255,.56) 34%,
      rgba(255,255,255,.34) 46%,
      rgba(255,255,255,.14) 60%,
      rgba(255,255,255,.04) 74%,
      rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 42%, rgba(255,255,255,.10));
}

.ttk .upcoming::after {
  width: 76% !important;
  right: -4% !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.94) 9%,
      rgba(255,255,255,.88) 16%,
      rgba(255,255,255,.76) 24%,
      rgba(255,255,255,.60) 34%,
      rgba(255,255,255,.38) 46%,
      rgba(255,255,255,.18) 58%,
      rgba(255,255,255,.06) 70%,
      rgba(255,255,255,.01) 80%,
      rgba(255,255,255,0) 100%),
    radial-gradient(circle at 76% 20%, rgba(217,43,234,.08), transparent 48%),
    radial-gradient(circle at 83% 76%, rgba(22,142,234,.06), transparent 44%);
}

.ttk .ttk-hero-route-card::after {
  left: auto !important;
  right: 28px !important;
  bottom: 26px !important;
  color: rgba(39,47,68,.72) !important;
  text-align: right;
  letter-spacing: .24em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.92), 0 10px 22px rgba(255,255,255,.56) !important;
}

@media (max-width: 1320px) {
  .ttk .ttk-hero-route-card {
    width: 54% !important;
    min-width: 430px !important;
  }
}

@media (max-width: 1100px) {
  .ttk .upcoming::before,
  .ttk .upcoming::after,
  .ttk .upcoming .hero::before {
    display: none !important;
  }

  .ttk .ttk-hero-route-card {
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ttk .ttk-hero-route-card::after {
    right: 18px !important;
  }
}

/* ==================================================
   1.48.24 – volgende tijdrit hero in stijl van sjabloon v3
================================================== */
.ttk .upcoming {
  position: relative !important;
  overflow: hidden !important;
  min-height: 300px !important;
  isolation: isolate;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  background:
    linear-gradient(90deg,
      #ffffff 0%,
      #ffffff 24%,
      #fbfdff 40%,
      #fefcff 58%,
      #fffaff 76%,
      #fff7fb 100%) !important;
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,.05),
    0 10px 15px -3px rgba(0,0,0,.05) !important;
}

.ttk .upcoming::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(at 80% 0%, rgba(249,115,22,.08) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(236,72,153,.12) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(37,99,235,.05) 0px, transparent 50%);
  pointer-events: none;
}

.ttk .upcoming::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: radial-gradient(rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: .65;
  clip-path: inset(0 0 0 54%);
  pointer-events: none;
}

.ttk .upcoming .hero {
  position: relative !important;
  z-index: 10 !important;
  max-width: 60% !important;
  padding: 2.5rem 3rem !important;
  background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 65%, rgba(255,255,255,.72) 82%, rgba(255,255,255,0) 100%) !important;
}

.ttk .upcoming .hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: -260px;
  bottom: 0;
  width: 340px;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.66) 36%, rgba(255,255,255,.24) 64%, rgba(255,255,255,0) 100%);
  filter: blur(18px);
  pointer-events: none;
}

.ttk .hero-top{
  gap:10px;
}

.ttk .hero-badge {
  display:inline-flex;
  align-items:center;
  background: rgba(37,99,235,.10);
  color:#2563eb;
  border:1px solid rgba(37,99,235,.20);
  font-size:.75rem;
  font-weight:800;
  padding:.42rem 1rem;
  border-radius:9999px;
  margin-bottom:1.25rem;
  text-transform:uppercase;
  letter-spacing:1px;
  backdrop-filter: blur(8px);
  box-shadow:none;
}

.ttk .hero-countdown {
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: .5rem 1rem;
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 800;
  color: #0f172a;
  z-index: 20;
  box-shadow:none;
}

.ttk .hero-title {
  font-size: 2.125rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 1rem 0;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.ttk .hero-title .event-title-with-flag {
  gap: .75rem;
}

.ttk .hero-title .country-flag {
  width: 30px;
  height: 22px;
  border-radius: 4px;
}

.ttk .hero-meta {
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem;
  font-size:.95rem;
  font-weight:500;
  color:#64748b;
  margin:0 0 2rem 0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}

.ttk .hero-meta span {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}

.ttk .hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:0;
}

.ttk .hero-btn {
  text-decoration:none;
  font-size:.875rem;
  font-weight:600;
  padding:.75rem 1.25rem;
  border-radius:10px;
  transition:all .2s ease;
  border:1px solid #e2e8f0;
  background-color: rgba(255,255,255,.85);
  color:#0f172a;
  backdrop-filter: blur(4px);
  box-shadow:none;
}

.ttk .hero-btn:hover,
.ttk .hero-btn:focus-visible {
  border-color:#2563eb;
  color:#2563eb;
  background-color:#f8fafc;
  transform:none;
  box-shadow:none;
}

.ttk .hero-btn.primary {
  background-color:#2563eb;
  color:#fff;
  border-color:#2563eb;
}

.ttk .hero-btn.primary:hover,
.ttk .hero-btn.primary:focus-visible {
  background-color:#1d4ed8;
  color:#fff;
  border-color:#1d4ed8;
}

.ttk .ttk-hero-route-card {
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:55% !important;
  min-width:0 !important;
  z-index:5 !important;
  pointer-events:none !important;
  background: transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  opacity:1 !important;
  overflow:hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.ttk .ttk-hero-route-card::before {
  content:"TIJDRIT";
  position:absolute;
  top:5%;
  right:-2%;
  z-index:3;
  font-size:9rem;
  font-weight:900;
  line-height:.8;
  letter-spacing:-4px;
  color:transparent;
  -webkit-text-stroke:2px rgba(15,23,42,.12);
  white-space:nowrap;
  mix-blend-mode:multiply;
}

.ttk .ttk-hero-route-card::after {
  content:"PARCOURS";
  position:absolute;
  bottom:24px;
  left:28px !important;
  right:auto !important;
  z-index:6;
  color: rgba(15,23,42,.48) !important;
  font-size:10px !important;
  line-height:1;
  font-weight:950;
  letter-spacing:.32em !important;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  pointer-events:none;
}

.ttk .ttk-hero-route-card .ttk-hero-route-map::before {
  content:"TTK";
  position:absolute;
  bottom:-3%;
  right:10%;
  z-index:4;
  font-size:6rem;
  font-weight:900;
  letter-spacing:-2px;
  line-height:.8;
  color: rgba(236,72,153,.08);
  white-space:nowrap;
  mix-blend-mode:multiply;
  pointer-events:none;
}

.ttk .ttk-hero-route-map {
  position:absolute !important;
  right:2rem !important;
  bottom:2rem !important;
  width:70% !important;
  height:75% !important;
  inset:auto !important;
  z-index:5 !important;
  filter: drop-shadow(0 8px 16px rgba(236,72,153,.2));
}

.ttk .ttk-hero-route-map .leaflet-container {
  background: transparent !important;
}

.ttk .ttk-hero-route-map .leaflet-tile-pane {
  opacity: 0 !important;
}

.ttk .ttk-hero-route-map .leaflet-overlay-pane svg {
  overflow: visible;
}

.ttk .ttk-hero-route-map .leaflet-interactive {
  stroke: #ff7a00 !important;
  stroke-opacity: .78 !important;
  stroke-width: 6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 8px 16px rgba(236,72,153,.20));
}

.ttk .ttk-hero-route-map .leaflet-overlay-pane::before {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(37,99,235,.08) 100%);
  clip-path: polygon(0 68%, 100% 48%, 100% 100%, 0 100%);
  opacity:.35;
  pointer-events:none;
}

.ttk .ttk-hero-route-loading {
  background: transparent;
  color: rgba(15,23,42,.38);
  font-size:11px;
  font-weight:950;
  letter-spacing:.18em;
  text-transform:uppercase;
}

@media (max-width: 768px) {
  .ttk .upcoming {
    min-height: 0 !important;
  }

  .ttk .upcoming::after {
    display:none !important;
  }

  .ttk .upcoming .hero {
    max-width:100% !important;
    padding:2rem 2rem 14rem 2rem !important;
    background:#fff !important;
  }

  .ttk .upcoming .hero::before {
    display:none !important;
  }

  .ttk .ttk-hero-route-card {
    display:block !important;
    position:absolute !important;
    inset:auto 0 0 0 !important;
    width:100% !important;
    height:240px !important;
  }

  .ttk .ttk-hero-route-card::before {
    font-size:6rem;
    top:15%;
    right:5%;
  }

  .ttk .ttk-hero-route-card::after {
    left:18px !important;
    bottom:16px !important;
  }

  .ttk .ttk-hero-route-map::before {
    font-size:4rem;
    bottom:0;
    right:5%;
  }

  .ttk .hero-countdown {
    top:auto;
    bottom:1.5rem;
    left:1.5rem;
    right:auto;
  }

  .ttk .ttk-hero-route-map {
    width:90% !important;
    height:75% !important;
    right:1rem !important;
    bottom:1rem !important;
  }
}

/* ==================================================
   1.48.25 – GPX-animatie in de hero
================================================== */
.ttk .ttk-hero-route-card {
  pointer-events: none !important;
}

.ttk .ttk-hero-route-card::before {
  content: attr(data-route-distance) !important;
  top: 7% !important;
  right: -1% !important;
  font-size: clamp(4.5rem, 7.5vw, 8.5rem) !important;
  line-height: .82 !important;
  letter-spacing: -.045em !important;
  color: transparent !important;
  -webkit-text-stroke: 2px rgba(15,23,42,.11) !important;
}

.ttk .ttk-hero-route-map {
  position: absolute !important;
  inset: auto 2rem 2rem auto !important;
  width: 70% !important;
  height: 75% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: transparent !important;
}

.ttk .ttk-hero-route-map::before {
  content: attr(data-route-type) !important;
  position: absolute;
  right: 10%;
  bottom: -5%;
  z-index: 1;
  font-size: clamp(4rem, 6vw, 6rem) !important;
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.03em;
  color: rgba(236,72,153,.075) !important;
  white-space: nowrap;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.ttk .ttk-hero-route-fallback,
.ttk .ttk-hero-route-card.has-leaflet-map .ttk-hero-route-fallback {
  position: absolute !important;
  inset: auto 2rem 2rem auto !important;
  z-index: 5 !important;
  width: 70% !important;
  height: 75% !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter: drop-shadow(0 8px 16px rgba(236,72,153,.18)) !important;
  pointer-events: none !important;
}

.ttk .ttk-route-animation-shadow,
.ttk .ttk-route-fallback-halo,
.ttk .ttk-route-fallback-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ttk .ttk-route-animation-shadow {
  stroke: rgba(37,99,235,.23);
  stroke-width: 24;
  opacity: 0;
  filter: blur(5px);
}

.ttk .ttk-route-fallback-halo {
  stroke: rgba(255,255,255,.94) !important;
  stroke-width: 12 !important;
  opacity: .98 !important;
}

.ttk .ttk-route-fallback-line {
  stroke-width: 5 !important;
  opacity: 1 !important;
}

.ttk .ttk-route-animation-markers {
  pointer-events: none;
}

.ttk .ttk-route-marker-pulse {
  fill: rgba(249,115,22,.20);
  stroke: rgba(255,255,255,.80);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: ttkHeroRoutePulse 2s ease-in-out infinite;
}

.ttk .ttk-route-marker-start {
  fill: #f97316;
  stroke: #fff;
  stroke-width: 4;
}

.ttk .ttk-route-marker-pole {
  fill: none;
  stroke: #ec4899;
  stroke-width: 5;
  stroke-linecap: round;
}

.ttk .ttk-route-marker-flag {
  fill: #fff;
  stroke: #ec4899;
  stroke-width: 4;
  stroke-linejoin: round;
}

.ttk .ttk-hero-route-replay {
  position: absolute;
  right: 24px;
  bottom: 22px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 50%;
  background: rgba(255,255,255,.90);
  color: #64748b;
  box-shadow: 0 6px 14px rgba(15,23,42,.08);
  cursor: pointer;
  pointer-events: auto !important;
  transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .35s ease;
}

.ttk .ttk-hero-route-replay svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ttk .ttk-hero-route-replay:hover,
.ttk .ttk-hero-route-replay:focus-visible {
  color: #2563eb;
  background: #fff;
  box-shadow: 0 9px 20px rgba(15,23,42,.12);
  transform: rotate(-180deg) scale(1.06);
  outline: 3px solid rgba(37,99,235,.18);
  outline-offset: 2px;
}

.ttk .ttk-hero-route-card.is-route-animating .ttk-hero-route-replay {
  color: #ec4899;
}

@keyframes ttkHeroRoutePulse {
  0%, 100% { transform: scale(1); opacity: .72; }
  50% { transform: scale(1.32); opacity: .28; }
}

@media (max-width: 768px) {
  .ttk .ttk-hero-route-fallback,
  .ttk .ttk-hero-route-map {
    right: 1rem !important;
    bottom: 1rem !important;
    width: 90% !important;
    height: 75% !important;
  }

  .ttk .ttk-hero-route-card::before {
    top: 15% !important;
    right: 5% !important;
    font-size: clamp(3rem, 16vw, 6rem) !important;
  }

  .ttk .ttk-hero-route-map::before {
    right: 5%;
    bottom: 0;
    font-size: clamp(3rem, 12vw, 4rem) !important;
  }

  .ttk .ttk-hero-route-replay {
    right: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ttk .ttk-route-marker-pulse {
    animation: none !important;
  }

  .ttk .ttk-hero-route-replay {
    display: none !important;
  }
}

/* ==================================================
   1.48.26 – duidelijkere postertekst, achtergrondroute en kalenderlink
================================================== */
.ttk .ttk-hero-route-card::before {
  color: rgba(37,99,235,.025) !important;
  -webkit-text-stroke: 2.4px rgba(15,23,42,.19) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.70) !important;
}

.ttk .ttk-hero-route-map::before {
  color: rgba(236,72,153,.13) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.62) !important;
}

.ttk .ttk-hero-route-card::after {
  color: rgba(15,23,42,.62) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.78) !important;
}

.ttk .ttk-route-animation-base,
.ttk .ttk-route-animation-shadow,
.ttk .ttk-route-fallback-halo,
.ttk .ttk-route-fallback-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ttk .ttk-route-animation-base {
  stroke: rgba(37,99,235,.16);
  stroke-width: 8;
  opacity: 1;
  filter: blur(.35px);
}

.ttk .ttk-hero-route-card.is-route-animating .ttk-route-animation-base {
  stroke: rgba(37,99,235,.13);
}

.ttk .ttk-hero-route-card.is-route-complete .ttk-route-animation-base {
  stroke: rgba(37,99,235,.10);
}

.ttk .hero-btn--details {
  border-color: rgba(37,99,235,.28) !important;
  background: rgba(239,246,255,.92) !important;
  color: #1d4ed8 !important;
}

.ttk .hero-btn--details:hover,
.ttk .hero-btn--details:focus-visible {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

@media (max-width: 768px) {
  .ttk .ttk-hero-route-card::before {
    -webkit-text-stroke-width: 1.8px !important;
  }

  .ttk .ttk-route-animation-base {
    stroke-width: 6;
    stroke: rgba(37,99,235,.14);
  }
}

/* ==================================================
   1.48.27 – countdown rechtsboven in de kalenderhero
================================================== */
.ttk .upcoming > .hero-countdown {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 40 !important;
  margin: 0 !important;
  white-space: nowrap;
  background: rgba(255,255,255,.76) !important;
  border: 1px solid rgba(255,255,255,.94) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 22px rgba(15,23,42,.08) !important;
}

.ttk .upcoming .hero-top {
  justify-content: flex-start !important;
}

@media (max-width: 768px) {
  .ttk .upcoming > .hero-countdown {
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    max-width: calc(100% - 32px);
    font-size: .7rem !important;
    padding: .45rem .8rem !important;
  }

  .ttk .upcoming .hero {
    padding-top: 4.5rem !important;
  }
}

/* ==================================================
   1.48.28 – lichte kaartachtergrond in hero-parcours
================================================== */
.ttk .ttk-hero-route-map {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 100%),
    radial-gradient(circle at 80% 18%, rgba(249,115,22,.08), transparent 34%),
    radial-gradient(circle at 10% 88%, rgba(37,99,235,.07), transparent 40%);
  border-radius: 20px;
  overflow: hidden;
}

.ttk .ttk-hero-route-map .leaflet-container {
  background: rgba(255,255,255,.08) !important;
  border-radius: inherit;
}

.ttk .ttk-hero-route-map .leaflet-map-pane {
  filter: saturate(.55) contrast(.96) brightness(1.04);
}

.ttk .ttk-hero-route-map .leaflet-tile-pane {
  opacity: .24 !important;
  filter: grayscale(.82) saturate(.35) brightness(1.08) contrast(.92);
  mix-blend-mode: multiply;
}

.ttk .ttk-hero-route-map .leaflet-tile {
  opacity: 1 !important;
  filter: grayscale(.88) saturate(.28) brightness(1.12) contrast(.9);
}

.ttk .ttk-hero-route-map .leaflet-overlay-pane,
.ttk .ttk-hero-route-map .leaflet-marker-pane {
  z-index: 420 !important;
}

.ttk .ttk-hero-route-map::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,.08) 100%),
    linear-gradient(90deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.02) 34%, rgba(255,255,255,.12) 100%);
  pointer-events: none;
  z-index: 410;
}

.ttk .ttk-hero-route-map .leaflet-interactive {
  stroke: #ff7a00 !important;
  stroke-opacity: .88 !important;
  stroke-width: 6.5 !important;
  filter: drop-shadow(0 10px 18px rgba(236,72,153,.18));
}

.ttk .ttk-route-animation-base {
  stroke: rgba(37,99,235,.20);
}

.ttk .ttk-hero-route-card.is-route-complete .ttk-route-animation-base {
  stroke: rgba(37,99,235,.14);
}

@media (max-width: 768px) {
  .ttk .ttk-hero-route-map {
    border-radius: 16px;
  }

  .ttk .ttk-hero-route-map .leaflet-tile-pane {
    opacity: .20 !important;
  }
}

/* ==================================================
   1.48.29 – echte Leaflet-kaart achter de GPX-animatie
================================================== */
.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map {
  background: rgba(248,250,252,.34) !important;
}

.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-container {
  opacity: 1 !important;
  background: #f8fafc !important;
}

.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-tile-pane {
  opacity: .36 !important;
  filter: grayscale(.72) saturate(.48) brightness(1.08) contrast(.94) !important;
  mix-blend-mode: multiply;
}

.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-tile {
  opacity: 1 !important;
  filter: none !important;
}

.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 42%, rgba(255,255,255,.08) 100%),
    linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.02) 44%, rgba(255,255,255,.10) 100%);
}

.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-fallback {
  filter: drop-shadow(0 8px 16px rgba(236,72,153,.18)) !important;
}

@media (max-width: 768px) {
  .ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-tile-pane {
    opacity: .30 !important;
  }
}

/* ==================================================
   1.48.30 – betrouwbare kaartlaag en compacte mobiele hero
================================================== */
.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map {
  background: rgba(241,245,249,.58) !important;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.08);
}

.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map.leaflet-container,
.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-container {
  opacity: 1 !important;
  background: #eef2f6 !important;
}

.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-tile-pane {
  opacity: .42 !important;
  filter: grayscale(.68) saturate(.54) brightness(1.02) contrast(1.02) !important;
  mix-blend-mode: multiply;
  transition: opacity .35s ease;
}

.ttk .ttk-hero-route-card.is-map-ready .ttk-hero-route-map .leaflet-tile-pane {
  opacity: .52 !important;
}

.ttk .ttk-hero-route-card.is-map-waiting .ttk-hero-route-map .leaflet-tile-pane {
  opacity: .20 !important;
}

.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-tile {
  opacity: 1 !important;
  filter: none !important;
}

.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 46%, rgba(255,255,255,.06) 100%),
    linear-gradient(90deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.06) 100%);
}

.ttk .ttk-hero-route-card.is-map-ready .ttk-hero-route-fallback {
  filter: drop-shadow(0 7px 14px rgba(236,72,153,.16)) !important;
}

@media (max-width: 768px) {
  .ttk .upcoming.has-route-preview {
    min-height: 0 !important;
  }

  .ttk .upcoming.has-route-preview .hero,
  .ttk .upcoming .hero {
    position: relative !important;
    z-index: 12 !important;
    max-width: 100% !important;
    padding: 5.25rem 1.25rem 1.5rem !important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.97) 0%,
        rgba(255,255,255,.95) 48%,
        rgba(255,255,255,.84) 68%,
        rgba(255,255,255,.62) 84%,
        rgba(255,255,255,.48) 100%) !important;
  }

  .ttk .upcoming .hero-title {
    max-width: 88%;
    font-size: clamp(1.85rem, 8.4vw, 2.35rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 1.15rem !important;
  }

  .ttk .upcoming .hero-title .event-title-with-flag {
    align-items: flex-start;
  }

  .ttk .upcoming .hero-meta {
    gap: .55rem .9rem !important;
    margin-bottom: 1.35rem !important;
    font-size: .9rem !important;
    line-height: 1.45;
  }

  .ttk .upcoming .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem !important;
    width: 100%;
    max-width: 100%;
  }

  .ttk .upcoming .hero-actions .hero-btn {
    width: 100%;
    min-width: 0;
    padding: .72rem .72rem !important;
    font-size: .82rem !important;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  .ttk .upcoming .hero-actions .hero-btn:nth-child(5) {
    grid-column: 1 / -1;
  }

  .ttk .ttk-hero-route-card {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    z-index: 4 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    opacity: .88 !important;
  }

  .ttk .ttk-hero-route-map {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    opacity: .58;
  }

  .ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-tile-pane {
    opacity: .34 !important;
    filter: grayscale(.76) saturate(.44) brightness(1.04) contrast(.98) !important;
  }

  .ttk .ttk-hero-route-card.is-map-ready .ttk-hero-route-map .leaflet-tile-pane {
    opacity: .42 !important;
  }

  .ttk .ttk-hero-route-fallback,
  .ttk .ttk-hero-route-card.has-leaflet-map .ttk-hero-route-fallback {
    inset: 24% -10% 12% 34% !important;
    width: 76% !important;
    height: 60% !important;
    opacity: .62 !important;
    z-index: 7 !important;
  }

  .ttk .ttk-route-animation-base {
    stroke: rgba(37,99,235,.18) !important;
    stroke-width: 7 !important;
  }

  .ttk .ttk-route-fallback-halo {
    stroke: rgba(255,255,255,.78) !important;
    stroke-width: 10 !important;
  }

  .ttk .ttk-route-fallback-line {
    opacity: .82 !important;
    stroke-width: 4.5 !important;
  }

  .ttk .ttk-hero-route-card::before {
    top: 18% !important;
    right: -9% !important;
    font-size: clamp(4rem, 22vw, 7rem) !important;
    opacity: .62;
  }

  .ttk .ttk-hero-route-map::before {
    right: 4% !important;
    bottom: 4% !important;
    font-size: clamp(3.2rem, 17vw, 5.4rem) !important;
    opacity: .62;
  }

  .ttk .ttk-hero-route-card::after {
    left: 18px !important;
    right: auto !important;
    bottom: 14px !important;
    opacity: .78;
  }

  .ttk .ttk-hero-route-replay {
    right: 14px !important;
    bottom: 14px !important;
    width: 34px;
    height: 34px;
  }

  .ttk .upcoming > .hero-countdown {
    top: 16px !important;
    right: 16px !important;
    z-index: 30 !important;
  }

  .ttk .upcoming .hero-badge {
    position: absolute;
    top: 16px;
    left: 20px;
    z-index: 30;
    margin: 0 !important;
    font-size: .68rem !important;
    padding: .38rem .75rem !important;
  }
}

@media (max-width: 390px) {
  .ttk .upcoming.has-route-preview .hero,
  .ttk .upcoming .hero {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .ttk .upcoming .hero-title {
    max-width: 94%;
  }

  .ttk .upcoming .hero-actions .hero-btn {
    font-size: .78rem !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
}

/* ==================================================
   1.48.31 – kaart over volledige hero + mobiele filtersheet
================================================== */
.ttk .upcoming.has-route-preview {
  isolation: isolate;
  background: #f8fafc !important;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-card {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  z-index: 2 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  opacity: 1 !important;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-map,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .ttk-hero-route-map {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: #eef2f6 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  overflow: hidden !important;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-map.leaflet-container,
.ttk .upcoming.has-route-preview .ttk-hero-route-map .leaflet-container {
  border-radius: inherit !important;
  background: #eef2f6 !important;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-map .leaflet-tile-pane {
  opacity: .34 !important;
  filter: grayscale(.72) saturate(.48) brightness(1.06) contrast(.95) !important;
  mix-blend-mode: multiply;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-card.is-map-ready .ttk-hero-route-map .leaflet-tile-pane {
  opacity: .40 !important;
}

.ttk .upcoming.has-route-preview::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  width: auto !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.985) 0%,
      rgba(255,255,255,.97) 20%,
      rgba(255,255,255,.91) 38%,
      rgba(255,255,255,.72) 52%,
      rgba(255,255,255,.40) 66%,
      rgba(255,255,255,.14) 80%,
      rgba(255,255,255,.04) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,0) 42%,
      rgba(236,72,153,.055) 100%) !important;
  pointer-events: none !important;
}

.ttk .upcoming.has-route-preview .hero {
  position: relative !important;
  z-index: 12 !important;
  background: transparent !important;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-fallback,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-leaflet-map .ttk-hero-route-fallback {
  inset: auto 2.25rem 2rem auto !important;
  width: 50% !important;
  height: 72% !important;
  z-index: 8 !important;
  opacity: .92 !important;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-card::before {
  z-index: 7 !important;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-card::after,
.ttk .upcoming.has-route-preview .ttk-hero-route-replay {
  z-index: 14 !important;
}

@media (max-width: 768px) {
  .ttk .upcoming.has-route-preview::after {
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.97) 0%,
        rgba(255,255,255,.94) 48%,
        rgba(255,255,255,.78) 72%,
        rgba(255,255,255,.50) 100%),
      linear-gradient(180deg,
        rgba(255,255,255,.10) 0%,
        rgba(255,255,255,.02) 62%,
        rgba(236,72,153,.06) 100%) !important;
  }

  .ttk .upcoming.has-route-preview .ttk-hero-route-map .leaflet-tile-pane,
  .ttk .upcoming.has-route-preview .ttk-hero-route-card.is-map-ready .ttk-hero-route-map .leaflet-tile-pane {
    opacity: .30 !important;
  }

  .ttk .upcoming.has-route-preview .ttk-hero-route-fallback,
  .ttk .upcoming.has-route-preview .ttk-hero-route-card.has-leaflet-map .ttk-hero-route-fallback {
    inset: 24% -9% 10% 36% !important;
    width: 72% !important;
    height: 58% !important;
    opacity: .58 !important;
  }
}

/* Mobiele filters als bottom sheet; portal voorkomt clipping door theme-containers. */
@media (max-width: 760px) {
  body > .ttk-filter-portal-root {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483640 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: stretch !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    background: rgba(15,23,42,.48) !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility 0s linear .28s;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  body > .ttk-filter-portal-root.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .28s ease;
  }

  body > .ttk-filter-portal-root .calendar-filter-panel {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: min(88dvh, 820px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 26px 26px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -22px 58px rgba(15,23,42,.24) !important;
    transform: translate3d(0,105%,0) !important;
    transition: transform .32s cubic-bezier(.22,.8,.24,1) !important;
  }

  body > .ttk-filter-portal-root.is-open .calendar-filter-panel,
  body > .ttk-filter-portal-root .calendar-filter-panel.is-sheet-open {
    transform: translate3d(0,0,0) !important;
  }

  body > .ttk-filter-portal-root .calendar-filter-panel__header {
    position: relative;
    padding: 24px max(17px,env(safe-area-inset-right,0px)) 13px max(17px,env(safe-area-inset-left,0px)) !important;
    border-radius: 26px 26px 0 0 !important;
  }

  body > .ttk-filter-portal-root .calendar-filter-panel__header::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: #d7dce5;
    transform: translateX(-50%);
  }

  body > .ttk-filter-portal-root .calendar-filter-panel__body {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body > .ttk-filter-portal-root .calendar-filter-panel__footer {
    padding-bottom: max(14px,env(safe-area-inset-bottom,0px)) !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,.98) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body > .ttk-filter-portal-root,
  body > .ttk-filter-portal-root .calendar-filter-panel {
    transition: none !important;
  }
}

/* ==================================================
   1.48.32 – kleurverloop over volledige kaart zonder wit middenvlak
================================================== */
.ttk .upcoming.has-route-preview {
  background:
    linear-gradient(90deg,
      #dfeaff 0%,
      #e7efff 30%,
      #f1eafa 56%,
      #f8deee 78%,
      #f6d2e8 100%) !important;
}

.ttk .upcoming.has-route-preview::after {
  background:
    radial-gradient(ellipse at 9% 48%,
      rgba(37,99,235,.22) 0%,
      rgba(37,99,235,.13) 28%,
      rgba(37,99,235,.06) 50%,
      rgba(37,99,235,0) 72%),
    radial-gradient(ellipse at 94% 48%,
      rgba(236,72,153,.26) 0%,
      rgba(236,72,153,.16) 30%,
      rgba(236,72,153,.07) 54%,
      rgba(236,72,153,0) 76%),
    linear-gradient(90deg,
      rgba(222,235,255,.90) 0%,
      rgba(226,238,255,.84) 18%,
      rgba(232,239,255,.74) 34%,
      rgba(237,235,251,.62) 48%,
      rgba(244,228,247,.54) 62%,
      rgba(249,218,239,.58) 78%,
      rgba(247,207,232,.68) 100%) !important;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-map .leaflet-tile-pane,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.is-map-ready .ttk-hero-route-map .leaflet-tile-pane {
  opacity: .44 !important;
  filter: grayscale(.60) saturate(.62) brightness(1.02) contrast(.96) !important;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-fallback,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-leaflet-map .ttk-hero-route-fallback {
  opacity: .98 !important;
}

@media (max-width: 768px) {
  .ttk .upcoming.has-route-preview::after {
    background:
      radial-gradient(ellipse at 8% 44%,
        rgba(37,99,235,.19) 0%,
        rgba(37,99,235,.10) 34%,
        rgba(37,99,235,0) 68%),
      radial-gradient(ellipse at 96% 58%,
        rgba(236,72,153,.20) 0%,
        rgba(236,72,153,.11) 34%,
        rgba(236,72,153,0) 70%),
      linear-gradient(90deg,
        rgba(222,235,255,.92) 0%,
        rgba(229,239,255,.86) 36%,
        rgba(239,233,250,.72) 64%,
        rgba(249,216,238,.70) 100%) !important;
  }

  .ttk .upcoming.has-route-preview .ttk-hero-route-map .leaflet-tile-pane,
  .ttk .upcoming.has-route-preview .ttk-hero-route-card.is-map-ready .ttk-hero-route-map .leaflet-tile-pane {
    opacity: .34 !important;
  }
}

/* ==================================================
   1.48.33 – echte kleurlaag onder de kaart; geen wit middenvlak
================================================== */
.ttk .upcoming.has-route-preview {
  background:
    linear-gradient(90deg,
      #d9e7ff 0%,
      #e1e9ff 24%,
      #e9e4fa 48%,
      #f1d9ee 70%,
      #f5cfe7 100%) !important;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-card,
.ttk .upcoming.has-route-preview .ttk-hero-route-map,
.ttk .upcoming.has-route-preview .ttk-hero-route-map.leaflet-container,
.ttk .upcoming.has-route-preview .ttk-hero-route-map .leaflet-container,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .ttk-hero-route-map,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .ttk-hero-route-map.leaflet-container,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-container {
  background: transparent !important;
  box-shadow: none !important;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-map .leaflet-tile-pane,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.is-map-ready .ttk-hero-route-map .leaflet-tile-pane,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-tile-pane {
  opacity: .46 !important;
  mix-blend-mode: multiply !important;
  filter: grayscale(.58) saturate(.68) brightness(.98) contrast(1.02) !important;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-map::after,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .ttk-hero-route-map::after {
  background:
    radial-gradient(ellipse at 10% 52%,
      rgba(37,99,235,.20) 0%,
      rgba(37,99,235,.10) 34%,
      rgba(37,99,235,0) 68%),
    radial-gradient(ellipse at 93% 48%,
      rgba(236,72,153,.24) 0%,
      rgba(236,72,153,.12) 36%,
      rgba(236,72,153,0) 72%) !important;
}

.ttk .upcoming.has-route-preview::after {
  background:
    linear-gradient(90deg,
      rgba(37,99,235,.20) 0%,
      rgba(37,99,235,.13) 20%,
      rgba(99,102,241,.08) 42%,
      rgba(181,82,181,.08) 58%,
      rgba(236,72,153,.14) 78%,
      rgba(236,72,153,.22) 100%),
    radial-gradient(ellipse at 8% 50%,
      rgba(37,99,235,.18) 0%,
      rgba(37,99,235,.08) 38%,
      rgba(37,99,235,0) 72%),
    radial-gradient(ellipse at 94% 50%,
      rgba(236,72,153,.22) 0%,
      rgba(236,72,153,.10) 40%,
      rgba(236,72,153,0) 74%) !important;
}

.ttk .upcoming.has-route-preview .hero {
  background: transparent !important;
}

@media (max-width: 768px) {
  .ttk .upcoming.has-route-preview {
    background:
      linear-gradient(90deg,
        #dce9ff 0%,
        #e5e9ff 36%,
        #eee1f5 64%,
        #f4d2e8 100%) !important;
  }

  .ttk .upcoming.has-route-preview::after {
    background:
      linear-gradient(90deg,
        rgba(37,99,235,.18) 0%,
        rgba(37,99,235,.11) 34%,
        rgba(150,87,194,.08) 62%,
        rgba(236,72,153,.18) 100%) !important;
  }

  .ttk .upcoming.has-route-preview .ttk-hero-route-map .leaflet-tile-pane,
  .ttk .upcoming.has-route-preview .ttk-hero-route-card.is-map-ready .ttk-hero-route-map .leaflet-tile-pane,
  .ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-tile-pane {
    opacity: .34 !important;
  }
}

/* ==================================================
   1.48.34 – heroachtergrond volledig opnieuw opgebouwd
   Eén kleurvlak, één kaartlaag en één overlay. Geen witte
   pseudo-elementen of transparante uitfades meer.
================================================== */
.ttk .upcoming.has-route-preview {
  isolation: isolate !important;
  background-color: #d7e5ff !important;
  background-image:
    linear-gradient(90deg,
      #cfe1ff 0%,
      #d6e0ff 26%,
      #ded5fb 48%,
      #ebc8ed 70%,
      #f5bddc 100%) !important;
}

/* Verwijder alle oudere witte glans- en overgangslagen. */
.ttk .upcoming.has-route-preview::before,
.ttk .upcoming.has-route-preview .hero::before,
.ttk .upcoming.has-route-preview .hero::after,
.ttk .upcoming.has-route-preview .ttk-hero-route-map::after,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .ttk-hero-route-map::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
}

/* Kaart en Leaflet-containers zijn volledig transparant boven het kleurvlak. */
.ttk .upcoming.has-route-preview .ttk-hero-route-card,
.ttk .upcoming.has-route-preview .ttk-hero-route-map,
.ttk .upcoming.has-route-preview .ttk-hero-route-map.leaflet-container,
.ttk .upcoming.has-route-preview .ttk-hero-route-map .leaflet-container,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .ttk-hero-route-map,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .ttk-hero-route-map.leaflet-container,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-container,
.ttk .upcoming.has-route-preview .leaflet-container,
.ttk .upcoming.has-route-preview .leaflet-map-pane,
.ttk .upcoming.has-route-preview .leaflet-tile-pane {
  background-color: rgba(207,225,255,0) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* De kaart blijft zichtbaar, maar neemt de onderliggende kleur aan. */
.ttk .upcoming.has-route-preview .ttk-hero-route-map .leaflet-tile-pane,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.is-map-ready .ttk-hero-route-map .leaflet-tile-pane,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-tile-pane {
  opacity: .58 !important;
  mix-blend-mode: multiply !important;
  filter: grayscale(.42) saturate(.72) brightness(.90) contrast(1.08) !important;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-map .leaflet-tile {
  opacity: 1 !important;
  filter: none !important;
}

/* Eén doorlopende kleurlaag over de kaart. Geen wit en geen transparent-keyword. */
.ttk .upcoming.has-route-preview::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  width: auto !important;
  pointer-events: none !important;
  background-color: rgba(215,229,255,.32) !important;
  background-image:
    linear-gradient(90deg,
      rgba(194,218,255,.90) 0%,
      rgba(202,219,255,.84) 22%,
      rgba(211,211,252,.74) 43%,
      rgba(225,194,239,.64) 63%,
      rgba(240,175,217,.56) 82%,
      rgba(247,164,207,.50) 100%) !important;
}

/* Moderne browsers interpoleren in OKLab en houden het midden verzadigd. */
@supports (background: linear-gradient(90deg in oklab, #cfe1ff, #f5bddc)) {
  .ttk .upcoming.has-route-preview {
    background-image:
      linear-gradient(90deg in oklab,
        #c9ddff 0%,
        #d3ddff 28%,
        #dfcdf7 52%,
        #edbde5 74%,
        #f6b2d4 100%) !important;
  }

  .ttk .upcoming.has-route-preview::after {
    background-image:
      linear-gradient(90deg in oklab,
        rgba(190,216,255,.90) 0%,
        rgba(204,216,255,.82) 28%,
        rgba(220,201,246,.70) 54%,
        rgba(239,176,222,.58) 78%,
        rgba(248,159,204,.50) 100%) !important;
  }
}

.ttk .upcoming.has-route-preview .hero {
  position: relative !important;
  z-index: 12 !important;
  background-color: rgba(207,225,255,0) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Route blijft duidelijk boven de kaart en de kleurlaag liggen. */
.ttk .upcoming.has-route-preview .ttk-route-animation-base {
  stroke: rgba(53,91,184,.26) !important;
}

.ttk .upcoming.has-route-preview .ttk-hero-route-map .leaflet-interactive,
.ttk .upcoming.has-route-preview .ttk-route-animation-line,
.ttk .upcoming.has-route-preview .ttk-route-fallback-line {
  filter: drop-shadow(0 8px 13px rgba(123,52,132,.20)) !important;
}

@media (max-width: 768px) {
  .ttk .upcoming.has-route-preview {
    background-color: #d7e5ff !important;
    background-image:
      linear-gradient(100deg,
        #cbdfff 0%,
        #d5ddff 34%,
        #e1cef5 62%,
        #f2b9db 100%) !important;
  }

  .ttk .upcoming.has-route-preview::after {
    background-color: rgba(209,225,255,.42) !important;
    background-image:
      linear-gradient(100deg,
        rgba(193,218,255,.92) 0%,
        rgba(204,217,255,.86) 38%,
        rgba(224,196,242,.74) 68%,
        rgba(244,170,215,.64) 100%) !important;
  }

  @supports (background: linear-gradient(100deg in oklab, #cbdfff, #f2b9db)) {
    .ttk .upcoming.has-route-preview {
      background-image:
        linear-gradient(100deg in oklab,
          #c7dcff 0%,
          #d5dcff 36%,
          #e1caf4 64%,
          #f2b2d4 100%) !important;
    }

    .ttk .upcoming.has-route-preview::after {
      background-image:
        linear-gradient(100deg in oklab,
          rgba(189,216,255,.92) 0%,
          rgba(205,216,255,.84) 38%,
          rgba(226,190,238,.72) 68%,
          rgba(246,160,207,.62) 100%) !important;
    }
  }

  .ttk .upcoming.has-route-preview .ttk-hero-route-map .leaflet-tile-pane,
  .ttk .upcoming.has-route-preview .ttk-hero-route-card.is-map-ready .ttk-hero-route-map .leaflet-tile-pane,
  .ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-tile-pane {
    opacity: .46 !important;
    filter: grayscale(.48) saturate(.68) brightness(.90) contrast(1.08) !important;
  }
}

/* ==================================================
   1.48.35 – hero opnieuw gefade met SVG-overlay zonder harde middenstrook
================================================== */
.ttk .upcoming {
  background:
    url("calendar-hero-gradient-overlay.svg") center center / cover no-repeat,
    linear-gradient(90deg, #eef6ff 0%, #dbe8ff 22%, #d9d0ff 50%, #efc7ea 74%, #f9d8eb 100%) !important;
}

/* Oude witte glans- en fade-lagen expliciet uitschakelen */
.ttk .upcoming::before,
.ttk .upcoming::after,
.ttk .upcoming .hero::before,
.ttk .upcoming .hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Geen apart wit tekstvlak meer; leesbaarheid via subtiele text shadow */
.ttk .upcoming .hero {
  max-width: 60% !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.ttk .upcoming .hero-title,
.ttk .upcoming .hero-meta,
.ttk .upcoming .hero-badge {
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* Kaart ligt echt over volledige hero maar blijft rustig */
.ttk .ttk-hero-route-card,
.ttk .ttk-hero-route-card.has-background-map {
  inset: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
}

.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map {
  background: transparent !important;
  box-shadow: none !important;
}

.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map,
.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map.leaflet-container,
.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-container {
  background: transparent !important;
}

.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-map-pane {
  opacity: .9;
  filter: grayscale(.72) saturate(.58) contrast(.95) brightness(1.02);
}

.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-tile-pane {
  opacity: .34 !important;
  filter: grayscale(.8) saturate(.42) brightness(1.03) contrast(.96) !important;
  mix-blend-mode: multiply;
}

.ttk .ttk-hero-route-card.is-map-ready .ttk-hero-route-map .leaflet-tile-pane {
  opacity: .38 !important;
}

.ttk .ttk-hero-route-card.is-map-waiting .ttk-hero-route-map .leaflet-tile-pane {
  opacity: .18 !important;
}

.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-tile {
  opacity: 1 !important;
  filter: none !important;
}

/* Subtiele blauwe leesbaarheidswaas links, maar zonder harde rand */
.ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      rgba(232,242,255,.55) 0%,
      rgba(227,238,255,.38) 18%,
      rgba(219,230,255,.22) 34%,
      rgba(214,221,255,.10) 48%,
      rgba(231,207,242,.08) 62%,
      rgba(242,201,231,.12) 78%,
      rgba(246,214,234,.18) 100%);
  pointer-events: none;
  z-index: 410;
}

/* Routevisualisatie rechts beter laten poppen */
.ttk .ttk-hero-route-card::before {
  opacity: .62;
}

.ttk .ttk-hero-route-card::after {
  opacity: .86;
}

.ttk .ttk-route-animation-base {
  stroke: rgba(81,122,232,.24);
}

.ttk .ttk-hero-route-card.is-route-complete .ttk-route-animation-base {
  stroke: rgba(81,122,232,.18);
}

@media (max-width: 768px) {
  .ttk .upcoming {
    background:
      url("calendar-hero-gradient-overlay.svg") 64% center / cover no-repeat,
      linear-gradient(135deg, #edf5ff 0%, #dfeaff 36%, #e5d9fb 64%, #f2d0e8 100%) !important;
  }

  .ttk .upcoming .hero,
  .ttk .upcoming.has-route-preview .hero {
    background: transparent !important;
    padding: 5rem 1.2rem 1.3rem !important;
  }

  .ttk .ttk-hero-route-card,
  .ttk .ttk-hero-route-card.has-background-map {
    opacity: .92 !important;
  }

  .ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map .leaflet-tile-pane {
    opacity: .28 !important;
  }

  .ttk .ttk-hero-route-card.has-background-map .ttk-hero-route-map::after {
    background:
      linear-gradient(180deg,
        rgba(239,246,255,.64) 0%,
        rgba(239,246,255,.46) 26%,
        rgba(233,225,251,.20) 52%,
        rgba(242,208,232,.08) 78%,
        rgba(242,208,232,.12) 100%);
  }
}

/* ==================================================
   1.48.36 – render-time overlay met harde knip definitief uitgeschakeld

   De harde verticale overgang ontstond pas nadat JS de class
   .has-route-preview toevoegde. Oudere, specifiekere selectors
   activeerden dan opnieuw ::after en behielden de oude clip-path
   vanaf 54% van de hero. Deze regels overschrijven die selectors
   met minimaal gelijke specificiteit.
================================================== */
.ttk .upcoming.has-route-preview::before,
.ttk .upcoming.has-route-preview::after,
.ttk .upcoming.has-route-preview .hero::before,
.ttk .upcoming.has-route-preview .hero::after,
.ttk .upcoming.has-route-preview .ttk-hero-route-map::after,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .ttk-hero-route-map::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* De SVG-gradient blijft de enige kleurlaag van de hero. */
.ttk .upcoming.has-route-preview {
  background-color: #d9e5ff !important;
  background-image:
    url("calendar-hero-gradient-overlay.svg"),
    linear-gradient(90deg, #eef6ff 0%, #dbe8ff 22%, #d9d0ff 50%, #efc7ea 74%, #f9d8eb 100%) !important;
  background-position: center center, center center !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
}

.ttk .upcoming.has-route-preview .hero {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Leaflet ligt transparant boven één doorlopende achtergrond. */
.ttk .upcoming.has-route-preview .ttk-hero-route-card,
.ttk .upcoming.has-route-preview .ttk-hero-route-map,
.ttk .upcoming.has-route-preview .ttk-hero-route-map.leaflet-container,
.ttk .upcoming.has-route-preview .ttk-hero-route-map .leaflet-container,
.ttk .upcoming.has-route-preview .leaflet-container,
.ttk .upcoming.has-route-preview .leaflet-map-pane,
.ttk .upcoming.has-route-preview .leaflet-tile-pane {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Geen afzonderlijk composietvlak per kaarthelft; de hele map-pane mengt uniform. */
.ttk .upcoming.has-route-preview .leaflet-map-pane {
  opacity: .38 !important;
  mix-blend-mode: multiply !important;
  filter: grayscale(.58) saturate(.58) brightness(.98) contrast(1.02) !important;
}

.ttk .upcoming.has-route-preview .leaflet-tile-pane,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.is-map-ready .leaflet-tile-pane,
.ttk .upcoming.has-route-preview .ttk-hero-route-card.has-background-map .leaflet-tile-pane {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.ttk .upcoming.has-route-preview .leaflet-tile {
  opacity: 1 !important;
  filter: grayscale(.58) saturate(.58) brightness(.98) contrast(1.02) !important;
}

@media (max-width: 768px) {
  .ttk .upcoming.has-route-preview {
    background-image:
      url("calendar-hero-gradient-overlay.svg"),
      linear-gradient(135deg, #edf5ff 0%, #dfeaff 36%, #e5d9fb 64%, #f2d0e8 100%) !important;
    background-position: 64% center, center center !important;
  }

  .ttk .upcoming.has-route-preview .leaflet-map-pane {
    opacity: .27 !important;
  }
}

/* ==================================================
   1.48.37 – hero visueel rijker met herhaalde naam/afstand/type
================================================== */
.ttk .upcoming {
  isolation: isolate;
}

.ttk .ttk-hero-decor {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

.ttk .ttk-hero-decor-item,
.ttk .ttk-hero-decor-icon {
  position: absolute;
  user-select: none;
  white-space: nowrap;
}

.ttk .ttk-hero-decor-item {
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: .9;
  text-transform: uppercase;
}

.ttk .ttk-hero-decor-item.is-distance {
  color: transparent;
  -webkit-text-stroke: 2px rgba(32,48,88,.28);
  text-shadow: 0 2px 0 rgba(255,255,255,.08);
  opacity: .92;
}

.ttk .ttk-hero-decor-item.is-title,
.ttk .ttk-hero-decor-item.is-type,
.ttk .ttk-hero-decor-item.is-label {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(50,62,98,.22);
  opacity: .9;
}

.ttk .ttk-hero-decor-item.is-title {
  letter-spacing: -.035em;
  line-height: .95;
}

.ttk .ttk-hero-decor-item.is-label {
  font-size: clamp(3rem, 5.4vw, 5rem);
  opacity: .16;
}

.ttk .ttk-hero-decor-item.is-distance-a {
  top: 14px;
  left: 18px;
  font-size: clamp(5.8rem, 8.4vw, 8.9rem);
}

.ttk .ttk-hero-decor-item.is-distance-b {
  right: 18px;
  bottom: 8px;
  font-size: clamp(6.2rem, 8.9vw, 9.3rem);
  opacity: .84;
}

.ttk .ttk-hero-decor-item.is-title-a {
  top: 12px;
  left: 26px;
  font-size: clamp(2rem, 3vw, 3.05rem);
  max-width: 68%;
}

.ttk .ttk-hero-decor-item.is-title-b {
  top: 112px;
  left: 49%;
  transform: translateX(-18%);
  font-size: clamp(1.3rem, 2vw, 2rem);
  max-width: 52%;
  opacity: .82;
}

.ttk .ttk-hero-decor-item.is-title-c {
  right: 22px;
  bottom: 188px;
  font-size: clamp(1.35rem, 2.2vw, 2.3rem);
  max-width: 44%;
  white-space: normal;
  text-align: right;
  opacity: .74;
}

.ttk .ttk-hero-decor-item.is-type-a {
  top: 18px;
  right: 50px;
  font-size: clamp(4rem, 5.8vw, 6rem);
  opacity: .16;
}

.ttk .ttk-hero-decor-item.is-type-b {
  right: 34px;
  top: 142px;
  font-size: clamp(5rem, 7vw, 7.5rem);
  opacity: .18;
}

.ttk .ttk-hero-decor-item.is-label-a {
  left: 40%;
  bottom: 26px;
}

.ttk .ttk-hero-decor-item.is-label-b {
  right: 140px;
  top: 38px;
  opacity: .14;
}

.ttk .ttk-hero-decor-icon {
  width: 88px;
  height: 88px;
  color: rgba(50,62,98,.18);
  opacity: .96;
}

.ttk .ttk-hero-decor-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ttk .ttk-hero-decor-icon.is-clock {
  top: 16px;
  left: 50.5%;
  transform: translateX(-50%);
}

.ttk .ttk-hero-decor-icon.is-finish {
  right: 265px;
  top: 182px;
  width: 72px;
  height: 72px;
}

.ttk .ttk-hero-decor-icon.is-stopwatch {
  left: 18px;
  bottom: 24px;
  width: 84px;
  height: 84px;
}

/* Content en route moeten erboven goed leesbaar blijven */
.ttk .upcoming .hero {
  position: relative;
  z-index: 12 !important;
}

.ttk .ttk-hero-route-card {
  z-index: 8 !important;
}

.ttk .ttk-hero-route-replay {
  z-index: 15 !important;
}

@media (max-width: 1200px) {
  .ttk .ttk-hero-decor-item.is-title-c,
  .ttk .ttk-hero-decor-item.is-label-a,
  .ttk .ttk-hero-decor-icon.is-finish {
    display: none;
  }

  .ttk .ttk-hero-decor-item.is-distance-a {
    font-size: clamp(4.8rem, 8vw, 7rem);
  }

  .ttk .ttk-hero-decor-item.is-distance-b {
    font-size: clamp(5rem, 8.2vw, 7.4rem);
  }
}

@media (max-width: 768px) {
  .ttk .ttk-hero-decor {
    opacity: .72;
  }

  .ttk .ttk-hero-decor-item.is-title-b,
  .ttk .ttk-hero-decor-item.is-title-c,
  .ttk .ttk-hero-decor-item.is-type-b,
  .ttk .ttk-hero-decor-item.is-label-b,
  .ttk .ttk-hero-decor-icon.is-clock,
  .ttk .ttk-hero-decor-icon.is-stopwatch,
  .ttk .ttk-hero-decor-icon.is-finish {
    display: none;
  }

  .ttk .ttk-hero-decor-item.is-distance-a {
    top: 46px;
    left: 10px;
    font-size: 4.9rem;
    -webkit-text-stroke: 1.4px rgba(32,48,88,.2);
  }

  .ttk .ttk-hero-decor-item.is-distance-b {
    right: 10px;
    bottom: 16px;
    font-size: 4.5rem;
    -webkit-text-stroke: 1.4px rgba(32,48,88,.16);
  }

  .ttk .ttk-hero-decor-item.is-title-a {
    top: 8px;
    left: 14px;
    max-width: 90%;
    font-size: 1.5rem;
    -webkit-text-stroke: 1px rgba(50,62,98,.18);
  }

  .ttk .ttk-hero-decor-item.is-type-a {
    top: 56px;
    right: 16px;
    font-size: 3rem;
    opacity: .12;
  }

  .ttk .ttk-hero-decor-item.is-label-a {
    left: auto;
    right: 18px;
    bottom: 58px;
    font-size: 2.25rem;
    opacity: .1;
  }
}

/* ==================================================
   1.48.38 – dubbele afstand linksboven verwijderd
================================================== */
/* De oude afstandstekst op de routekaart werd nog via ::before
   gerenderd naast de nieuwe decoratieve afstandslaag. */
.ttk .upcoming.has-route-preview .ttk-hero-route-card::before,
.ttk .ttk-hero-route-card::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}
/* 1.49.56: publieke inschrijfstatus en event detail link */
.registration-badge{display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;border-radius:999px;background:#eef2f6;color:#344054;font-size:11px;font-weight:850;line-height:1.2;vertical-align:middle}.registration-badge--open{background:#e7f6ed;color:#166534}.registration-badge--full,.registration-badge--closed{background:#feeceb;color:#b42318}.registration-badge--not_open_yet{background:#fff4e5;color:#9a4a00}.pill-btn--primary{background:#f58220!important;border-color:#f58220!important;color:#fff!important}.event-title>.registration-badge{margin-left:6px}.details-info-section .registration-badge{margin-top:2px}@media(max-width:700px){.event-title>.registration-badge{margin-left:4px}.registration-badge{font-size:10px;padding:3px 7px}}
\n/* 1.49.58 – duidelijke route naar de centrale wedstrijdpagina */\n.ttk .event-page-cta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;margin:18px 0 14px;padding:15px 16px;border:1px solid rgba(245,130,32,.34);border-radius:15px;background:linear-gradient(120deg,#fff7ef 0%,#fff 72%);color:#10233f;text-decoration:none!important;box-shadow:0 8px 20px rgba(28,42,67,.055);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.ttk .event-page-cta:hover{transform:translateY(-1px);border-color:#f58220;box-shadow:0 11px 24px rgba(28,42,67,.09)}.ttk .event-page-cta__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#10233f;color:#fff;font-size:13px;font-weight:950;font-style:italic;letter-spacing:-.04em}.ttk .event-page-cta__copy{display:grid;gap:3px;min-width:0}.ttk .event-page-cta__copy strong{color:#10233f;font-size:15px;line-height:1.2}.ttk .event-page-cta__copy small{color:#667085;font-size:12px;line-height:1.35}.ttk .event-page-cta__arrow{color:#d4660e;font-size:22px;font-weight:900}.ttk .popup-actions--secondary{margin-top:10px}@media(max-width:640px){.ttk .event-page-cta{grid-template-columns:auto minmax(0,1fr) auto;padding:13px}.ttk .event-page-cta__copy small{font-size:11px}}\n

/* ==================================================
   1.49.59 – wedstrijddashboard als primaire verdiepings-CTA
================================================== */
.ttk .event-page-cta{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
  margin:22px 0 16px;
  padding:22px 24px;
  border:1px solid #b9d6ff;
  border-radius:18px;
  background:linear-gradient(135deg,#edf7ff 0%,#f5f4ff 52%,#fff1f7 100%);
  color:#10233f;
  text-decoration:none!important;
  box-shadow:0 12px 28px rgba(35,80,150,.10);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.ttk .event-page-cta:hover,.ttk .event-page-cta:focus-visible{transform:translateY(-2px);border-color:#6aa8f8;box-shadow:0 16px 34px rgba(35,80,150,.15)}
.ttk .event-page-cta__copy{display:grid!important;gap:5px;min-width:0}
.ttk .event-page-cta__eyebrow{color:#2868cf;font-size:10px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.ttk .event-page-cta__copy strong{max-width:760px;color:#10233f;font-size:20px!important;line-height:1.16;letter-spacing:-.015em}
.ttk .event-page-cta__copy small{color:#5d6b82;font-size:13px!important;line-height:1.45}
.ttk .event-page-cta__button{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:0 0 auto;min-height:46px;padding:11px 16px;border-radius:11px;background:#1473e6;color:#fff;font-size:13px;font-weight:900;box-shadow:0 7px 16px rgba(20,115,230,.24)}
.ttk .event-page-cta:hover .event-page-cta__button{background:#0e65cf}
/* Volledige parcourskaart/hoogteprofiel horen vanaf 1.49.59 in het wedstrijddashboard. */
.ttk .details-row .parcours-card,.ttk .details-row .gpx-route-preview{display:none!important}
@media(max-width:700px){
 .ttk .event-page-cta{align-items:stretch;flex-direction:column;gap:15px;padding:19px}
 .ttk .event-page-cta__copy strong{font-size:18px!important}
 .ttk .event-page-cta__button{width:100%}
}


/* ==================================================
   1.49.60 – stevige dashboardbalk + agendaactie
================================================== */
.ttk .event-page-cta{
  position:relative;
  overflow:hidden;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:auto;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  align-self:stretch;
  margin:22px 0 16px;
  padding:21px 22px 21px 24px;
  border:0!important;
  border-radius:15px;
  background:linear-gradient(112deg,#08182e 0%,#10233f 66%,#17365d 100%)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(16,35,63,.19)!important;
  text-decoration:none!important;
}
.ttk .event-page-cta::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:#f58220}
.ttk .event-page-cta::after{content:"";position:absolute;right:-55px;top:-90px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(245,130,32,.17),rgba(245,130,32,0) 67%);pointer-events:none}
.ttk .event-page-cta:hover,.ttk .event-page-cta:focus-visible{transform:translateY(-1px);box-shadow:0 18px 36px rgba(16,35,63,.25)!important}
.ttk .event-page-cta__copy{position:relative;z-index:1;display:grid!important;gap:5px;min-width:0}
.ttk .event-page-cta__eyebrow{color:#ffab60!important;font-size:10px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.ttk .event-page-cta__copy strong{max-width:760px;color:#fff!important;font-size:20px!important;line-height:1.16;letter-spacing:-.015em}
.ttk .event-page-cta__copy small{color:#c9d4e2!important;font-size:13px!important;line-height:1.45}
.ttk .event-page-cta__button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:0 0 auto;min-height:46px;padding:11px 16px;border-radius:10px;background:#f58220!important;color:#fff!important;font-size:13px;font-weight:900;box-shadow:0 7px 16px rgba(245,130,32,.25)}
.ttk .event-page-cta:hover .event-page-cta__button{background:#e97313!important}

.ttk .calendar-add-menu{position:relative;display:inline-block;max-width:100%;margin:0}
.ttk .calendar-add-menu>summary{list-style:none;cursor:pointer;user-select:none}
.ttk .calendar-add-menu>summary::-webkit-details-marker{display:none}
.ttk .pill-btn--calendar{display:inline-flex!important;align-items:center;gap:7px;background:#eef6ff!important;border-color:#b8d6ff!important;color:#145db8!important}
.ttk .pill-btn--calendar::before{content:"+";display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#1473e6;color:#fff;font-size:12px;font-weight:950;line-height:1}
.ttk .calendar-add-menu__panel{position:absolute;z-index:35;left:0;top:calc(100% + 7px);display:grid;min-width:210px;padding:7px;border:1px solid #dce4ee;border-radius:11px;background:#fff;box-shadow:0 14px 34px rgba(16,35,63,.16)}
.ttk .calendar-add-menu__panel a{display:flex;align-items:center;min-height:39px;padding:9px 11px;border-radius:8px;color:#10233f!important;text-decoration:none!important;font-size:12px;font-weight:850;white-space:nowrap}
.ttk .calendar-add-menu__panel a:hover{background:#f2f6fb}
@media(max-width:700px){
  .ttk .event-page-cta{align-items:stretch;flex-direction:column;gap:15px;padding:20px 18px 18px 21px}
  .ttk .event-page-cta__copy strong{font-size:18px!important}
  .ttk .event-page-cta__button{width:100%}
  .ttk .calendar-add-menu{display:block;width:100%}
  .ttk .calendar-add-menu>summary{width:100%;justify-content:center}
  .ttk .calendar-add-menu__panel{position:static;width:100%;min-width:0;margin-top:7px;box-sizing:border-box}
  .ttk .calendar-add-menu__panel a{width:100%;white-space:normal;box-sizing:border-box}
}

/* 1.49.63 – subtiele stale-cachemelding; de kalender zelf blijft zichtbaar. */
.ttk .calendar-cache-status{
  margin:10px 0;
  padding:8px 11px;
  border:1px solid #dce4ee;
  border-radius:9px;
  background:#f7f9fc;
  color:#5f6b7a;
  font-size:12px;
  line-height:1.4;
}
.ttk .calendar-cache-status[data-status="warning"]{
  border-color:#f1d7aa;
  background:#fffaf0;
  color:#76551c;
}