:root{
--color-navy:#003f5f;
--color-surface-blue:#edf7fc;
--content-pad:max(var(--site-gutter),calc((100% - var(--site-max)) / 2));
--homepage-search-desktop:url("https://kidsvakantiegids.s3.eu-central-1.amazonaws.com/img/homepage-search-20260921-1323.webp");
--homepage-search-desktop-lqip:url("data:image/webp;base64,UklGRm4BAABXRUJQVlA4IGIBAACQBgCdASo1AAoAPl0mjkWjoiGb9AA4BcS0AE6ZQj8RZE2IN5pIjMkVKuTHug4kWlubGy1pbSKfk8HbgYMAAP7Q//450zkz0PSHZ7P9sPYj7cOv0O7C8kabT+1c69LVJqF2AU09WceTEeqbmWOogUyPL+YIdnkjGd2Buyico0+CMVfprrfkVN/lMYiYztEd8lOvejoCkTtTLqsj6UctJ+CG5PeAFbm3qu69+pI8rBkGIto1vjjja+XpXQ+bVWrqyUpdx+Youb0HX67zSYu2j4VH9F+rT0gOrEsLuOVQXf4M6+kR9hp56JNkvRZePeRpr+sJT1G/8pW0pI2YWXWl45uM6mJiiCvwv8UlvQL9b3nA11JDvq9Mzsd/CEzSmkqauld5cI2vO+4Efz0hKtpX9Sh1sVzfz/lHIjL/+KeNnuxmSUINVmBEC2/HzmxpBw17qPHeMxNabbN6XaU2uTjBySuEAAA=");
--homepage-search-mobile:url("https://kidsvakantiegids.s3.eu-central-1.amazonaws.com/img/homepage-search-mobile-20260921-1358.webp");
--homepage-search-mobile-lqip:url("data:image/webp;base64,UklGRrQBAABXRUJQVlA4IKgBAACwCACdASocABQAPm0sk0akIiGhMBgIAIANiWwAnTKEdQeu8Z3s22GdgMlfoV/oB1mflAFMm8fBAi8inTzuLGfbttB8TSrQh9kT2OqAfgAA/QMRq6dk59mKzsUZrQa+h7TDOSKb8clfH9r87sV3/htOk2VeGM4qYHOignfayTzq51ADfZHZOb7Sb93lmimkM1lPPbZFyrqui1sBR0azIp1i7VI4XqOV5t+dYs/8YO/AOIBO9xJ10B7TUaEBUyFTKcCkQ1gijhzZuXYjF3rTWnRL0xRlM+aMbWlxIJ/GCUozQRCP9iXN5Ygjxf8si2ZQ59Otm7DeB0V+D/nYx2/5nYFIaUXyrfheCvBHmPZzVj+GX1ev3v/jF2fWHr9on/cohGFO4XgLp0fKu+4Ea16D2zdqC/j6ao0K6aqCDoTBfb+WloWfwtMOpL3zLc2fKGWNwxK+0cs8KZpSSMPTqz8/eSOmOYrJd6NXYG/qrAvQ2Da+uuOeWtyhT7/DQL4iR9OxtOfFXlV8ScW+OggZqo/zvzfgRl+H0X4hEIPUrPnb0+xXnh3S0QKdAAAA");
--section-space:clamp(2.5rem,5vw,4.5rem)
}

body{background:var(--color-surface)}
#main{margin:0;max-width:none;padding:0}
#main > :is(header,section,aside){border:0;border-radius:0;margin:0;padding:var(--section-space) var(--content-pad)}
#footer{margin-top:0}
.section > header{text-align:center}
.section > header h2{align-items:center;display:flex;gap:0.5rem;justify-content:center;letter-spacing:-0.02em}
.section > header h2 .material-symbols-outlined{color:var(--color-link);font-size:26px}
.section > header p{color:var(--color-text-muted);font-size:0.8125rem;margin-top:0.25rem}
.alt-carousel{margin-right:-1rem;padding-right:1rem}

#featured > header,
#articles > header{margin-bottom:1rem;text-align:left}
#featured > header h2,
#articles > header h2{color:var(--color-primary-dark);font-family:var(--font-body);font-size:0.75rem;font-weight:var(--font-weight-ui);gap:0.375rem;justify-content:flex-start;letter-spacing:0.12em;text-transform:uppercase}
#featured > header h2 .material-symbols-outlined,
#articles > header h2 .material-symbols-outlined{color:inherit;font-size:16px}
#featured article > div > small,
#articles article > div > small{align-self:flex-start;background-color:var(--color-surface-alt);border-radius:var(--radius-full);color:var(--color-text-muted);font-size:0.6875rem;font-weight:var(--font-weight-ui);padding:0.125rem 0.5rem}
#featured h3 a:hover,
#articles h3 a:hover{color:var(--color-link)}

#homepage-search{background-color:#007fbd;background-image:linear-gradient(180deg,rgb(0 49 82/0.32) 0%,rgb(0 49 82/0.38) 55%,rgb(0 49 82/0.26) 100%),var(--homepage-search-mobile),var(--homepage-search-mobile-lqip);background-position:center top;background-repeat:no-repeat;background-size:cover;text-align:center}
#homepage-search h1{color:var(--color-white);font-family:var(--font-display);font-size:clamp(1.75rem,8vw,2.5rem);font-weight:var(--font-weight-display);letter-spacing:-0.03em;line-height:1.08;text-shadow:0 2px 8px rgb(0 38 65/0.2);text-wrap:balance}
#homepage-search h1::after{background-color:var(--color-primary);border-radius:var(--radius-full);content:"";display:block;height:0.25rem;margin:0.75rem auto 0;width:3rem}
#homepage-search p{color:var(--color-white);font-size:0.9375rem;margin-top:0.75rem;text-shadow:0 1px 5px rgb(0 38 65/0.2)}
#homepage-search form{align-items:center;background-color:var(--color-surface);border:2px solid var(--color-surface);border-radius:var(--radius-full);box-shadow:0 4px 8px rgb(0 63 95/0.08),0 12px 32px rgb(0 63 95/0.14);display:flex;gap:0.5rem;margin:1.25rem auto 0;max-width:40rem;padding:0.375rem 0.375rem 0.375rem 1rem;text-align:left;transition:border-color 0.15s,box-shadow 0.15s}
#homepage-search form:focus-within{border-color:var(--color-link);box-shadow:0 0 0 3px rgb(0 157 224/0.15)}
#homepage-search form > .material-symbols-outlined{color:var(--color-text-muted);flex-shrink:0;font-size:22px}
#homepage-search input{background:transparent;border:0;color:var(--color-text-main);flex:1;font:inherit;font-size:0.9375rem;min-width:0;outline:0;padding:0.625rem 0}
#homepage-search input::placeholder{color:var(--color-text-light)}
#homepage-search .btn-primary{flex-shrink:0;padding:0.75rem 1.25rem}
#homepage-search ul{display:flex;flex-wrap:wrap;gap:0.375rem 1rem;justify-content:center;margin-top:1rem}
#homepage-search li{align-items:center;color:var(--color-white);display:flex;font-size:0.8125rem;font-weight:var(--font-weight-ui);gap:0.25rem;text-shadow:0 1px 5px rgb(0 38 65/0.2)}
#homepage-search li .material-symbols-outlined{color:var(--color-white);font-size:16px}

#main #quick-navigation{background:var(--color-surface-blue);padding-block:1.5rem 2rem}
#quick-navigation ul{--cols-l:6}

#featured-track{display:flex;gap:calc(var(--site-gutter) * 2);margin-inline:calc(var(--site-gutter) * -1);overflow-x:auto;overscroll-behavior-x:contain;padding:0 var(--site-gutter) 1.5rem;scroll-padding-inline:var(--site-gutter);scroll-snap-type:x mandatory;scrollbar-width:none}
#featured-track::-webkit-scrollbar{display:none}
#featured article{display:flex;flex:0 0 100%;flex-direction:column;gap:1rem;scroll-snap-align:start}
#featured figure{border-radius:var(--radius-lg);overflow:hidden;position:relative}
#featured figure img{aspect-ratio:4/3;object-fit:cover;width:100%}
#featured figcaption{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:var(--color-surface-overlay-90);border-radius:var(--radius);bottom:0.75rem;box-shadow:var(--shadow-xs);color:var(--color-text-main);display:flex;font-size:0.75rem;font-weight:var(--font-weight-ui);gap:0.25rem;left:0.75rem;max-width:calc(100% - 1.5rem);padding:0.25rem 0.625rem 0.25rem 0.5rem;position:absolute}
#featured figcaption .material-symbols-outlined{color:var(--color-primary);flex-shrink:0;font-size:16px}
#featured article > div{display:flex;flex-direction:column}
#featured h3{font-family:var(--font-display);font-size:1.5rem;font-weight:var(--font-weight-display);letter-spacing:-0.02em;line-height:1.2;margin-top:0.625rem}
#featured blockquote{color:var(--color-text-muted);font-size:var(--font-size-reading);line-height:1.6;margin-top:0.75rem}
#featured footer{display:flex;flex-direction:column;gap:0.875rem;margin-top:1.25rem}
#featured footer small{color:var(--color-text-light);font-size:0.75rem;font-weight:var(--font-weight-ui)}
#featured footer .btn-primary{align-self:flex-start;box-shadow:var(--shadow-primary-soft);gap:0.375rem;padding:0.75rem 1.5rem}
#featured footer .btn-primary .material-symbols-outlined{font-size:18px}
#featured nav{align-items:center;display:flex;gap:0.5rem;justify-content:center}
#featured nav div{display:none}
#featured nav ul{display:flex}
#featured nav li{align-items:center;display:flex;height:2.5rem;justify-content:center;width:2.5rem}
#featured nav li::before{background-color:var(--color-border-strong);border-radius:var(--radius-full);content:"";display:block;height:0.5rem;transition:width 0.2s;width:0.5rem}
#featured nav li[data-current]::before{background-color:var(--color-text-main);width:1.5rem}

#videos{background:var(--color-surface-blue)}
#videos article{border-radius:var(--radius-lg);box-shadow:var(--shadow-card);display:grid;flex:0 0 clamp(9.25rem,40vw,10.5rem);overflow:hidden;scroll-snap-align:start;transition:box-shadow 0.3s ease,transform 0.3s ease}
#videos article:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-4px)}
#videos button{aspect-ratio:9/16;background-color:var(--color-text-main);display:block;grid-area:1/1;overflow:hidden;position:relative;width:100%}
#videos button img{height:100%;object-fit:cover;transition:transform 0.5s;width:100%}
#videos article:hover img{transform:scale(1.05)}
#videos b{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:var(--color-surface-overlay-90);border-radius:var(--radius-full);box-shadow:var(--shadow-xs);color:var(--color-text-main);font-size:0.625rem;font-weight:var(--font-weight-ui);left:0.5rem;letter-spacing:0.06em;line-height:1;padding:0.375rem 0.5rem;position:absolute;text-transform:uppercase;top:0.5rem}
#videos .live{background:var(--color-secondary);color:var(--color-white)}
#videos button > .material-symbols-outlined{align-items:center;background:var(--color-surface-overlay-90);border-radius:50%;box-shadow:var(--shadow-elevated);color:var(--color-text-main);display:flex;font-size:26px;height:2.75rem;justify-content:center;left:calc(50% - 1.375rem);position:absolute;top:calc(50% - 1.375rem);transition:background-color 0.15s,transform 0.3s;width:2.75rem}
#videos article:hover button > .material-symbols-outlined{background:var(--color-surface);transform:scale(1.1)}
#videos article > div{align-self:end;background:linear-gradient(transparent,rgb(0 0 0/0.85));color:var(--color-white);grid-area:1/1;padding:3rem 0.75rem 0.75rem;pointer-events:none;position:relative}
#videos h3{-webkit-box-orient:vertical;display:-webkit-box;font-size:0.875rem;font-weight:var(--font-weight-ui);-webkit-line-clamp:2;line-height:1.25;overflow:hidden}
#videos small{color:rgb(255 255 255/0.75);display:block;font-size:0.75rem;margin-top:0.125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ad--rotating{display:grid}
.ad--rotating a{grid-area:2/1;opacity:0;transition:opacity 0.25s,visibility 0.25s;visibility:hidden}
.ad--rotating a[data-current]{opacity:1;visibility:visible;z-index:1}

#awards{background:radial-gradient(48rem 18rem at 0% 0%,rgb(0 157 224/0.3),transparent 70%),var(--color-navy);color:var(--color-white)}
#awards > header{margin-bottom:1.25rem;text-align:center}
#awards > header h2{align-items:center;display:flex;font-family:var(--font-display);font-size:1.25rem;font-weight:var(--font-weight-display);gap:0.5rem;justify-content:center;letter-spacing:-0.02em}
#awards > header h2 .material-symbols-outlined{color:var(--color-accent);font-size:26px}
#awards > header p{color:rgb(255 255 255/0.7);font-size:0.8125rem;margin-top:0.25rem}
#awards > div{display:flex;gap:0.75rem;margin:0 -1rem;overflow-x:auto;padding:0 1rem 0.5rem;scroll-padding-inline:1rem;scroll-snap-type:x mandatory;scrollbar-width:none}
#awards > div::-webkit-scrollbar{display:none}
#awards article{background-color:rgb(255 255 255/0.06);border:1px solid rgb(255 255 255/0.1);border-radius:var(--radius-lg);display:flex;flex:0 0 86%;flex-direction:column;overflow:hidden;scroll-snap-align:start}
#awards article header{align-items:center;border-bottom:1px solid rgb(255 255 255/0.1);column-gap:0.75rem;display:grid;grid-template-columns:2.75rem minmax(0,1fr);padding:1rem}
#awards article header .material-symbols-outlined{align-items:center;background:rgb(255 255 255/0.1);border-radius:50%;color:var(--color-accent);display:flex;font-size:24px;grid-row:1/3;height:2.75rem;justify-content:center;width:2.75rem}
#awards article header small{align-self:end;color:var(--color-accent);font-size:0.6875rem;font-weight:var(--font-weight-ui);letter-spacing:0.08em;text-transform:uppercase}
#awards h3{font-family:var(--font-display);font-size:1.125rem;font-weight:var(--font-weight-display);line-height:1.2}
#awards article ul{display:flex;flex:1;flex-direction:column}
#awards article li{display:flex;flex:1}
#awards article li + li{border-top:1px solid rgb(255 255 255/0.1)}
#awards article a{align-items:center;column-gap:0.75rem;display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:3.25rem;padding:0.625rem 1rem;transition:background-color 0.15s;width:100%}
#awards article a:hover{background-color:rgb(255 255 255/0.08)}
#awards article a strong{color:var(--color-white);font-size:0.875rem;font-weight:var(--font-weight-ui);line-height:1.3}
#awards article a small{color:rgb(255 255 255/0.7);font-size:0.75rem;line-height:1.3}
#awards article a .material-symbols-outlined{color:rgb(255 255 255/0.45);font-size:18px;grid-column:2;grid-row:1/3;transition:color 0.15s}
#awards article a:hover .material-symbols-outlined{color:var(--color-accent)}

#articles{background:var(--color-surface-blue)}
#articles > div{display:flex;gap:0.75rem;margin-right:-1rem;overflow-x:auto;padding:0.25rem 1rem 0.75rem 0;scroll-snap-type:x mandatory;scrollbar-width:none}
#articles > div::-webkit-scrollbar{display:none}
#articles article{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);display:flex;flex:0 0 82%;flex-direction:column;overflow:hidden;scroll-snap-align:start}
#articles article img{aspect-ratio:16/10;object-fit:cover;width:100%}
#articles article > div{display:flex;flex:1;flex-direction:column;padding:1rem}
#articles h3{font-family:var(--font-display);font-size:1.125rem;font-weight:var(--font-weight-display);letter-spacing:-0.02em;line-height:1.25;margin-top:0.5rem}
#articles p{color:var(--color-text-muted);font-size:0.875rem;line-height:1.55;margin-top:0.5rem}
#articles article footer{margin-top:auto;padding-top:0.75rem}
#articles footer small{color:var(--color-text-light);display:block;font-size:0.75rem;font-weight:var(--font-weight-ui)}
#articles footer a{align-items:center;color:var(--color-link);display:inline-flex;font-size:0.8125rem;font-weight:var(--font-weight-ui);gap:0.25rem;margin-top:0.5rem}
#articles footer a:hover{text-decoration:underline}
#articles footer a .material-symbols-outlined{font-size:16px}

#providers ul{display:grid;gap:1.25rem 1.5rem;grid-template-columns:repeat(3,minmax(0,1fr))}
#providers a{display:block;transition:transform 0.3s ease}
#providers a:hover{transform:translateY(-2px)}
#providers img{aspect-ratio:3/1;margin-inline:auto;max-width:10.5rem;object-fit:contain;opacity:1;transition:opacity 0.5s ease;width:100%}
#providers li:not([data-slot]){display:none}
#providers li[data-slot="0"]{order:0}
#providers li[data-slot="1"]{order:1}
#providers li[data-slot="2"]{order:2}
#providers li[data-slot="3"]{order:3}
#providers li[data-slot="4"]{order:4}
#providers li[data-slot="5"]{order:5}
#providers li[data-swapping] img{opacity:0}

@media (min-width: 768px){
.section > header{text-align:left}
.section > header h2{justify-content:flex-start}
.section > header p{font-size:var(--font-size-reading)}
.alt-carousel{margin-right:0;padding-right:0}
#main #ad{padding-block:2rem 3rem}
#ad img{max-width:min(100%,60.625rem)}
#main #homepage-search{padding-block:4.5rem 3.75rem}
#homepage-search{background-image:linear-gradient(180deg,rgb(0 49 82/0.32) 0%,rgb(0 49 82/0.38) 55%,rgb(0 49 82/0.26) 100%),var(--homepage-search-desktop),var(--homepage-search-desktop-lqip);background-position:center}
#homepage-search h1{font-size:2.5rem}
#homepage-search p{font-size:1.0625rem}
#homepage-search form{margin-top:1.5rem;padding:0.5rem 0.5rem 0.5rem 1.25rem}
#homepage-search input{font-size:1.0625rem}
#homepage-search ul{margin-top:1.25rem}
#main #quick-navigation{padding-block:2rem 2.5rem}
#featured article{align-items:stretch;display:grid;gap:2rem;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
#featured figure{aspect-ratio:4/3;width:100%}
#featured figure img{height:100%;inset:0;position:absolute}
#featured article > div{align-self:center}
#featured h3{font-size:1.75rem}
#featured nav{justify-content:flex-start;margin-top:0.25rem}
#featured nav div{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);box-shadow:var(--shadow-card);display:flex;padding:0.25rem}
#featured nav div button{align-items:center;border-radius:50%;color:var(--color-text-main);display:flex;height:2.25rem;justify-content:center;transition:background-color 0.15s,color 0.15s;width:2.25rem}
#featured nav div button:hover{background-color:var(--color-link-bg-soft);color:var(--color-link)}
#featured nav div button:disabled{background-color:transparent;color:var(--color-border-strong);cursor:default}
#awards > header{text-align:left}
#awards > header h2{font-size:1.5rem;justify-content:flex-start}
#awards > header p{font-size:var(--font-size-reading)}
#awards > div{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;overflow:visible;padding:0}
#articles > div{display:grid;gap:1.5rem;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;overflow:visible;padding:0}
#articles article{flex:auto}
#articles article + article{padding:1.25rem}
#articles article img{border-radius:var(--radius-lg)}
#articles article > div{padding:0}
#articles article + article > div{padding:1rem 0 0}
#articles #articles-lead{display:grid;padding:1.5rem}
#articles-lead{align-items:center;gap:2rem;grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
#articles-lead img{order:1}
#articles-lead h3{font-size:1.75rem}
#articles-lead p{font-size:var(--font-size-reading)}
#providers ul{gap:1.5rem}
}

@media (min-width: 1024px){
#homepage-search h1{font-size:2.75rem}
#featured article{gap:2.5rem;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
#featured figure{aspect-ratio:16/10}
#videos article{flex-basis:calc((100% - 3.75rem) / 6)}
#featured h3{font-size:2rem}
#articles > div{column-gap:2rem}
#articles article + article{align-items:start;display:grid;gap:1.25rem;grid-template-columns:9rem minmax(0,1fr)}
#articles article + article img{aspect-ratio:1}
#articles article + article > div{padding:0}
#articles-lead{gap:2.5rem;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
#articles-lead h3{font-size:2rem}
#providers ul{grid-template-columns:repeat(6,minmax(0,1fr))}
}

@media (min-width: 1280px){
#providers ul{gap:2.5rem}
}

@media (min-width: 768px) and (max-width: 1023.98px){
#footer .inner{gap:2.5rem 2rem;grid-template-columns:repeat(2,minmax(0,1fr))}
#footer .brand{grid-column:1/-1}
}
