/* Lettertypes lokaal, zodat de mockup zonder internet werkt en elke pagina
   hetzelfde beeld geeft. Voorheen laadde alleen de helft van de pagina's
   Google Fonts; de rest viel terug op systeemletters.
   Latin + Latin Extended, opgehaald van Google Fonts (SIL Open Font License). */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/bebas-neue-400-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Thaler-verrijking: uitvoeringen, aanbouwdelen en subtiele dieptewerking. */
.hero,.series-hero,.photo-hero,.information-hero,.parallax-band {
  background-position: center calc(50% + var(--parallax-y, 0px));
  will-change: background-position;
}
.series-product img,.detail-photo img,.story-image {
  transform: translate3d(0,var(--float-y,0),0);
  transition: transform .12s linear;
  will-change: transform;
}
.thaler-variants { background:#f3f1ed; }
.variant-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.variant-grid article { position:relative; padding:30px; border:1px solid var(--line); border-top:5px solid #9b9b9b; background:var(--white); }
.variant-grid article.is-featured { border-top-color:var(--blue); box-shadow:0 18px 40px rgba(41,41,41,.1); }
.variant-grid article>span { color:var(--blue); font:800 12px/1 Manrope,Arial,sans-serif; }
.variant-grid h3 { margin:16px 0 8px; color:var(--navy); font:400 30px/1 "Bebas Neue",Impact,sans-serif; }
.variant-grid article>strong { display:block; margin-bottom:20px; color:var(--blue); font:800 20px/1.2 Manrope,Arial,sans-serif; }
.variant-grid dl { margin:0 0 24px; }
.variant-grid dl div { display:flex; justify-content:space-between; gap:18px; padding:9px 0; border-top:1px solid var(--line); }
.variant-grid dt { color:var(--muted); font-size:12px; }.variant-grid dd { margin:0; color:var(--ink); font-size:12px; font-weight:700; text-align:right; }
.model-story-photo { min-height:62vh; display:flex; align-items:flex-end; padding:90px 0; color:var(--white); background:linear-gradient(0deg,rgba(20,20,20,.82),rgba(20,20,20,.08) 75%),var(--parallax-image) center/cover no-repeat; }
.model-story-photo h2 { max-width:780px; margin:0; font:400 clamp(48px,6vw,84px)/.98 "Bebas Neue",Impact,sans-serif; text-transform:uppercase; }
/* .attachments-hero staat bij de andere page-hero-varianten verderop: hier zou
   de latere `background: var(--navy)` van .page-hero de foto wegdrukken. */
.attachment-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:38px; }
.attachment-filters button { padding:11px 18px; border:1px solid var(--line); background:var(--white); color:var(--ink); font:700 12px/1 Manrope,Arial,sans-serif; cursor:pointer; }
.attachment-filters button.active,.attachment-filters button:hover { border-color:var(--blue); background:var(--blue); color:var(--white); }
.attachment-filters button:focus-visible { outline:3px solid var(--navy); outline-offset:3px; }
.attachment-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.attachment-card { padding:0 25px 27px; border:1px solid var(--line); border-top:4px solid transparent; background:var(--white); transition:transform .3s,border-color .3s,box-shadow .3s; }
.attachment-card:hover { transform:translateY(-6px); border-top-color:var(--blue); box-shadow:0 20px 42px rgba(41,41,41,.12); }
.attachment-card>div { height:235px; display:grid; place-items:center; margin:0 -12px 15px; overflow:hidden; }
.attachment-card img { width:100%; height:100%; object-fit:contain; transition:transform .45s; }.attachment-card:hover img{transform:scale(1.055)}
.attachment-card>span { color:var(--blue); font:800 10px/1 Manrope,Arial,sans-serif; text-transform:uppercase; letter-spacing:.12em; }
.attachment-card h3 { margin:10px 0; color:var(--navy); font:400 28px/1 "Bebas Neue",Impact,sans-serif; }.attachment-card p{min-height:44px;color:var(--muted)}
/* Sectorkaarten op de homepage. Neemt de kaartconventie van .attachment-card over
   — randlijn, rode bovenrand bij hover, kaart komt omhoog, foto zoomt licht in —
   zodat er geen tweede kaartstijl bij komt. Foto's zijn 760x500 aangeleverd, dus
   object-fit hoeft nauwelijks bij te snijden. */
.sector-section { background:var(--cream); }
.sector-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.sector-card { display:block; border:1px solid var(--line); border-top:4px solid transparent; background:var(--white); box-shadow:var(--card-shadow); text-decoration:none; transition:transform .3s,border-color .3s,box-shadow .3s; }
.sector-card:hover,.sector-card:focus-visible { transform:translateY(-6px); border-top-color:var(--blue); box-shadow:var(--card-shadow-hover); outline:none; }
.sector-card figure { margin:0; overflow:hidden; }
.sector-card img { display:block; width:100%; height:190px; object-fit:cover; transition:transform .45s; }
.sector-card:hover img,.sector-card:focus-visible img { transform:scale(1.055); }
.sector-card figcaption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; color:var(--navy); font:400 24px/1 "Bebas Neue",Impact,sans-serif; text-transform:uppercase; }
.sector-card figcaption span { color:var(--blue); font:800 16px/1 Manrope,Arial,sans-serif; transition:transform .3s; }
.sector-card:hover figcaption span,.sector-card:focus-visible figcaption span { transform:translateX(4px); }
@media(max-width:900px){ .sector-grid{grid-template-columns:repeat(2,1fr)} .sector-card img{height:170px} }
@media(max-width:600px){ .sector-grid{gap:12px} .sector-card img{height:130px} .sector-card figcaption{padding:13px 14px;font-size:20px;gap:8px} }
@media(prefers-reduced-motion:reduce){
  .sector-card,.sector-card img,.sector-card figcaption span { transition:none }
  .sector-card:hover,.sector-card:focus-visible,.sector-card:hover img,.sector-card:focus-visible img,.sector-card:hover figcaption span,.sector-card:focus-visible figcaption span { transform:none }
}
.reveal-item { opacity:0; transform:translateY(22px); transition:opacity .55s ease,transform .55s ease; }.reveal-item.is-revealed{opacity:1;transform:none}
@media(max-width:900px){.attachment-grid{grid-template-columns:repeat(2,1fr)}.model-story-photo{min-height:48vh}.brand{margin-top:0;padding-top:0;min-height:56px}}
@media(max-width:600px){.attachment-grid{grid-template-columns:1fr}.attachment-card>div{height:205px}.variant-grid{grid-template-columns:1fr}.model-story-photo{min-height:420px;background-position:center}.reveal-item{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero,.series-hero,.photo-hero,.information-hero,.parallax-band{background-position:center!important}.series-product img,.detail-photo img,.story-image{transform:none!important}.reveal-item{opacity:1;transform:none;transition:none}.attachment-card,.attachment-card img{transition:none}}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/bebas-neue-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-400-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-500-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-600-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/manrope-500-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/manrope-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/manrope-600-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/manrope-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/manrope-700-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/manrope-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/manrope-800-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/manrope-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #292929;
  --blue: #db0031;
  --blue-hover: #b60029;
  --ink: #1a1d21;
  --muted: #616975;
  --cream: #f7f5f1;
  --line: #e6e1d8;
  --green: #db0031;
  --green-dark: #a80026;
  --gold: #f0b323;
  --white: #fff;
  --thaler-angle-button-cut: 15px;
  --thaler-angle-download-cut: 18px;
  --thaler-angle-footer-cut: 10px;
  --thaler-angle-hero-cut: 7px;
  --shell: min(1240px, calc(100% - 48px));
  --shadow: 0 26px 70px rgba(41, 41, 41, 0.12);
  /* Eén kaartconventie voor de hele site. */
  --card-shadow: 0 1px 2px rgba(41, 41, 41, 0.05);
  --card-shadow-hover: 0 16px 36px rgba(41, 41, 41, 0.09);
  --notice-bg: #fdf8ee;
  /* Eén pijl voor alle keuzemenu's. Zie de select-regel hieronder waarom we hem
     zelf tekenen; als custom property omdat elk keuzemenu zijn eigen
     achtergrondkleur meegeeft en de background-shorthand een los gezette
     background-image weer zou wissen. */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%230c1e52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* iOS Safari houdt bij een select zijn eigen compacte weergave aan: de opgegeven
   hoogte wordt genegeerd en er komt nauwelijks een pijltje, waardoor het veld op
   een iPhone als platte tekst leest in plaats van als keuzemenu. Met
   appearance:none tekenen we hoogte, rand en pijl zelf, op elk toestel gelijk. */
select {
  appearance: none;
  -webkit-appearance: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.75 Inter, Arial, sans-serif;
}

img {
  display: block;
  max-width: 100%;
  /* script.js zet width/height uit de natuurlijke grootte op elke afbeelding die
     ze mist, zodat de pagina niet verspringt tijdens het laden. Die attributen
     zijn opmaakhints: zet CSS daarna alleen een breedte, dan blijft de hoogte
     op de natuurlijke waarde staan en ontstaat er lege ruimte om de foto heen.
     height:auto laat de verhouding weer meeschalen; elke regel met een eigen
     hoogte (op klasse) wint hier gewoon van. */
  height: auto;
}

/* Bebas Neue is de kopletter van de site. Losse regels mogen grootte en kleur
   zetten; familie en kapitalen komen hiervandaan, zodat een kop zonder eigen
   regel nooit terugvalt op de bodyletter. */
h1, h2, h3 {
  font-family: "Bebas Neue", Impact, Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--white);
  color: #000;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--white);
  transition: background 0.3s, box-shadow 0.3s;
}

.site-header.scrolled {
  background: rgba(41, 41, 41, 0.97);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(12px);
}

.inner-header {
  position: absolute;
  background: var(--navy);
}

.utility-bar {
  height: 42px;
  font: 500 13px/1.2 Inter, Arial, sans-serif;
}

.utility-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.utility-inner nav {
  display: flex;
  gap: 26px;
}

.quality {
  display: flex;
  align-items: center;
  gap: 9px;
}

.quality img {
  width: 16px;
  height: 16px;
}

.nav-shell {
  width: var(--shell);
  min-height: 78px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  min-height: 60px;
  /* Het rode vlak hangt aan de bovenrand van de pagina en niet in het midden
     van de navigatiebalk: met -42px valt de bovenkant precies samen met de
     bovenkant van de servicebalk erboven, en dus met die van het venster. */
  align-self: flex-start;
  margin-top: -42px;
  padding: 10px 40px 11px 28px;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

.brand-origin { margin:0 0 4px 3px; color:#fff; font:600 9px/1.1 Manrope,Arial,sans-serif; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }

.brand img {
  width: 170px;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(20px, 2.3vw, 34px);
  /* Bebas Neue loopt smaller en optisch kleiner dan Manrope: 18px komt hier
     ongeveer uit op de regelhoogte van de vorige 14px Manrope. De letter kent
     alleen kapitalen, dus text-transform staat erbij zodat het beeld gelijk
     blijft als de webletter niet laadt en Arial invalt. */
  font: 400 18px/1 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.site-nav > a {
  position: relative;
  padding-block: 14px;
}

.site-nav > a::after {
  content: "";
  position: absolute;
  inset: auto 0 6px;
  width: 0;
  height: 2px;
  background: var(--green);
  transition: width 0.25s;
}

.site-nav > a:hover::after,
.site-nav > a:focus-visible::after,
.site-nav > a.active::after {
  width: 100%;
}

.menu-toggle {
  display: none;
  padding: 10px;
  background: none;
  border: 0;
  color: var(--white);
  cursor: pointer;
}

.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: flex-end;
  background: url("assets/models/3448H-hero.webp") center 48% / cover no-repeat;
  color: var(--white);
}

.hero::after,
.page-hero::after {
  content: none;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18,18,18,.72) 0%, rgba(18,18,18,.36) 18%, transparent 42%),
    linear-gradient(90deg, rgba(24, 24, 24, 0.97) 0%, rgba(24, 24, 24, 0.84) 34%, rgba(24, 24, 24, 0.24) 70%, rgba(24,24,24,.1) 100%),
    linear-gradient(0deg, rgba(24, 24, 24, 0.58), transparent 55%);
}

/* Speelt de film, dan mag de sluier dunner. Hij is er om witte tekst leesbaar
   te houden op een foto met een lichte lucht, en met de kop weg staat er nog
   maar één zin en twee knoppen — die staan bovendien linksonder, waar het
   verloop het dichtst is. Alle drie de lagen gaan met ruim een derde omlaag,
   zodat je van de film ziet waarvoor hij er is.

   Nagemeten op zeven momenten in de film: de zin haalt in het slechtste geval
   12,0:1 en het menu rechtsboven 9,8:1, ruim boven de 4,5:1 die de rest van de
   site aanhoudt. Dat kan omdat de eindkaart uit de film geknipt is — een wit
   vlak van drie seconden waar de sluier niet tegen op kon. */
.hero.film-speelt .hero-shade {
  background:
    linear-gradient(180deg, rgba(18, 18, 18, 0.46) 0%, rgba(18, 18, 18, 0.22) 18%, transparent 42%),
    linear-gradient(90deg, rgba(24, 24, 24, 0.72) 0%, rgba(24, 24, 24, 0.56) 34%, rgba(24, 24, 24, 0.14) 70%, rgba(24, 24, 24, 0.05) 100%),
    linear-gradient(0deg, rgba(24, 24, 24, 0.38), transparent 55%);
  transition: background 0.6s ease;
}

.hero.film-speelt .hero-shade::after {
  background: linear-gradient(180deg, rgba(24, 24, 24, 0.62) 0%, rgba(24, 24, 24, 0.4) 45%, rgba(24, 24, 24, 0) 100%);
}

/* De film ligt over de foto en onder de sluier; hij verschijnt pas als hij
   werkelijk speelt, want een zwart vlak op de plek van de foto is erger dan
   geen film. Zie assets/js/hero-video.js voor wanneer hij dat doet. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-video.is-playing {
  opacity: 1;
}

/* Speelt de film, dan wijkt onze eigen kop: de film van Thaler heeft zijn
   titels ingebrand — "we design", "Engineered in Germany" — en die liepen
   dwars door de h1 heen.

   Met `opacity` en niet met `display` of `visibility`, om twee redenen. De kop
   houdt zo zijn hoogte, dus de zin en de twee knoppen eronder blijven staan
   waar ze stonden en de pagina verspringt niet op het moment dat de film
   binnen is. En hij blijft in de toegankelijkheidsboom staan: een schermlezer
   leest de kop van de homepage gewoon voor, want de tekst ín de film kan hij
   niet lezen.

   Alleen de h1. De zin eronder en de knoppen blijven zichtbaar; dat is de weg
   verder op deze pagina en die neemt de film niet over. */
.hero.film-speelt h1 {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-content {
  position: relative;
  padding: 210px 0 95px;
}

.hero-accent {
  display: block;
  width: 50px;
  height: 3px;
  margin-bottom: 24px;
  background: var(--green);
}

/* Hetzelfde streepje boven iedere kop van een binnenpagina. Als pseudo-element
   en niet als `span`: de koppen komen uit drie verschillende sjablonen en één
   ervan — de informatiepagina — staat als opgemaakte tekst in de pagina zelf,
   waar geen sjabloon bij kan. De 27 pixels die het streepje inneemt zijn van de
   bovenruimte van de hero afgehaald, zodat de titel op 226 blijft staan. */
:is(.page-hero > .shell, .series-hero-content, .information-hero > .shell,
    .dealer-page-hero > .shell)::before {
  display: block;
  width: 50px;
  height: 3px;
  margin-bottom: 24px;
  background: var(--green);
  content: "";
}

.hero h1 {
  max-width: 900px;
  margin: 0;
  /* Bebas Neue is de kopletter van de site; alle hero-koppen delen deze regel. */
  font: 400 clamp(52px, 6vw, 86px)/0.96 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.hero-copy {
  max-width: 610px;
  margin: 28px 0 0;
  color: #eef3f8;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
}

.scroll-hint {
  position: absolute;
  right: 4vw;
  bottom: 48px;
}

.scroll-hint img {
  width: 42px;
  height: 42px;
}

.section {
  padding: 130px 0;
}

.eyebrow {
  margin: 0 0 22px;
  color: var(--green-dark);
  font: 700 12px/1.2 Manrope, Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow.light {
  color: var(--blue);
}

.section h2,
.story h2,
.contact-strip h2 {
  margin: 0;
  color: var(--navy);
  font: 400 clamp(43px, 5.13vw, 75px)/1.04 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: end;
}

.lead {
  margin: 0 0 30px;
  font-size: 20px;
  line-height: 1.7;
}

.text-link {
  display: inline-flex;
  align-items: center;
  padding-bottom: 5px;
  color: var(--navy);
  border-bottom: 1px solid currentColor;
  font: 700 14px/1.4 Manrope, Arial, sans-serif;
}

.button span,
.text-link span {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.25s;
}

.text-link:hover span {
  transform: translateX(4px);
}

.button:focus-visible,
.text-link:focus-visible,
.site-nav a:focus-visible,
.menu-toggle:focus-visible,
.scroll-hint:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 100px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.trust-row article {
  padding: 30px 20px;
  border-right: 1px solid var(--line);
}

.trust-row article:first-child {
  padding-left: 0;
}

.trust-row article:last-child {
  border-right: 0;
}

.trust-row strong,
.trust-row span {
  display: block;
}

.trust-row strong {
  color: var(--navy);
  font: 700 18px/1.4 Manrope, Arial, sans-serif;
}

.trust-row span {
  color: var(--muted);
  font-size: 13px;
}

.model-section,
.dealers {
  background: var(--white);
}

.section-heading {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 70px;
}

.section-heading > p {
  margin: 0 0 8px;
  color: var(--muted);
}

.model-card {
  min-height: 660px;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  overflow: hidden;
  background: var(--navy);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.model-visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: 60px;
  background: linear-gradient(145deg, #f5f2eb, #e9e5dc);
}

.model-visual::before {
  content: "";
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
}

.model-visual img {
  position: relative;
  width: min(620px, 95%);
  max-height: 520px;
  object-fit: contain;
  filter: drop-shadow(0 30px 24px rgba(41, 41, 41, 0.2));
}

.model-index {
  position: absolute;
  top: 28px;
  left: 32px;
  color: #747e84;
  font: 600 13px/1 Manrope, Arial, sans-serif;
}

.model-info {
  padding: 85px 74px;
  color: var(--white);
}

.model-info h3 {
  margin: 0 0 25px;
  font: 400 clamp(48px, 5.7vw, 78px)/1.02 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.model-info > p:not(.eyebrow) {
  max-width: 460px;
  color: #d6e0e9;
}

.spec-list {
  padding: 0;
  margin: 40px 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
}

.spec-list span {
  color: #aab9c7;
}

.spec-list strong {
  font-weight: 600;
  text-align: right;
}

.model-carousel {
  overflow: hidden;
}

.model-carousel .model-card {
  width: 100%;
}

.model-card.is-changing {
  animation: model-slide-in .42s cubic-bezier(.2,.75,.3,1) both;
}

.model-card.is-changing.from-left {
  animation-name: model-slide-in-left;
}

@keyframes model-slide-in {
  from { opacity: 0;transform: translateX(22px); }
  to { opacity: 1;transform: translateX(0); }
}

@keyframes model-slide-in-left {
  from { opacity: 0;transform: translateX(-22px); }
  to { opacity: 1;transform: translateX(0); }
}

.model-carousel-footer {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 30px;
  align-items: center;
  padding: 22px 0 0;
}

.model-carousel-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.model-carousel-controls button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
  font: 700 20px/1 Manrope,Arial,sans-serif;
  transition: background .25s,transform .25s;
}

.model-carousel-controls button:hover {
  background: var(--green);
  color: var(--navy);
  transform: translateY(-2px);
}

.model-carousel-count {
  min-width: 62px;
  color: var(--muted);
  font: 600 12px/1 Manrope,Arial,sans-serif;
  text-align: center;
}

.model-carousel-count strong {
  color: var(--navy);
  font-size: 16px;
}

.model-carousel-tabs {
  display: flex;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding: 4px 2px 9px;
  scrollbar-width: thin;
}

.model-carousel-tabs button {
  flex: 0 0 auto;
  min-width: 55px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  font: 800 11px/1 Manrope,Arial,sans-serif;
  transition: background .2s,border-color .2s,color .2s;
}

.model-carousel-tabs button:hover,
.model-carousel-tabs button.active {
  border-color: var(--green);
  background: var(--green);
  color: var(--navy);
}

.button {
  height: 54px;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 38px 0 25px;
  border: 1px solid transparent;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--thaler-angle-button-cut)) 100%, 0 100%);
  white-space: nowrap;
  font: 700 14px/1 Manrope, Arial, sans-serif;
  transition: background 0.25s, box-shadow 0.25s, transform 0.25s;
}

/* Witte letters en niet de antracietkleur uit de mock-up. Daar was deze knop
   groen; op het merkrood haalt antraciet 2,81:1 en wit 5,18:1. */
.button-primary {
  background: var(--green);
  color: var(--white);
}

.button-primary:hover {
  background: var(--navy);
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
  transform: translateX(5px);
}

.button-light {
  align-self: flex-start;
  background: var(--green);
  color: var(--navy);
}

.button-light:hover {
  background: var(--navy);
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
  transform: translateX(5px);
}

.button-outline-light {
  background: var(--green);
  color: var(--navy);
  border-color: var(--green);
}

.button-outline-light:hover {
  background: var(--navy);
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
  transform: translateX(5px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.story {
  min-height: 760px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  background: var(--navy);
  color: var(--white);
}

/* De machine staat vrij op een doorzichtige achtergrond, dus `cover` sneed hem
   aan drie kanten af: de bak liep het beeld uit en de wielen raakten de rand.
   Met `contain` staat hij er helemaal in, en de 88 procent geeft hem lucht. */
.story-image {
  min-height: 540px;
  background: url("assets/models/48T18.webp") center / 88% auto no-repeat;
}

.story-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px clamp(45px, 7vw, 120px);
}

.story h2,
.dealer-copy h2 {
  color: var(--white);
}

.story-panel > p:not(.eyebrow) {
  max-width: 520px;
  margin: 30px 0;
  color: #d4dee7;
}

.light-link {
  align-self: flex-start;
  color: var(--white);
}

.detail-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 100px;
  align-items: center;
}

.detail-photo {
  margin: 0;
}

.detail-photo img {
  width: 100%;
  height: 620px;
  object-fit: cover;
  border-radius: 10px;
}

.detail-photo figcaption {
  display: flex;
  gap: 20px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}

.detail-photo figcaption span {
  color: var(--green-dark);
  font-weight: 700;
}

.dealer-card {
  min-height: 620px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: var(--navy);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.dealer-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px;
  color: var(--white);
}

.dealer-copy > p:not(.eyebrow) {
  max-width: 460px;
  margin: 28px 0 36px;
  color: #dcecff;
}

.home-dealer-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 5px 0 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.home-dealer-stats article {
  padding: 22px 20px 22px 0;
}

.home-dealer-stats article + article {
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.home-dealer-stats strong,
.home-dealer-stats span {
  display: block;
}

.home-dealer-stats strong {
  font: 700 32px/1 Manrope, Arial, sans-serif;
}

.home-dealer-stats span {
  margin-top: 7px;
  color: #b9c8d5;
  font-size: 12px;
}

.home-dealer-finder label {
  display: block;
  margin-bottom: 9px;
  font: 700 12px/1.4 Manrope, Arial, sans-serif;
}

.home-dealer-finder > div {
  display: flex;
  gap: 10px;
}

.home-dealer-finder select {
  min-width: 0;
  flex: 1;
  min-height: 54px;
  padding: 0 42px 0 14px;
  background: var(--white) var(--select-arrow) no-repeat right 15px center;
  border: 1px solid var(--white);
  border-radius: 7px;
  color: var(--navy);
  font: 600 14px/1 Inter, Arial, sans-serif;
}

.home-dealer-finder select:focus {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.home-map-wrap {
  position: relative;
}

.home-map-wrap img {
  filter: drop-shadow(0 20px 28px rgba(41, 41, 41, 0.12));
}

/* Kaartvlak. De max-width van 413px houdt het beeldformaat gelijk aan de oude
   max-height van 480px, want 480 x (442.926 / 514.803) = 413. De aspect-ratio
   zorgt dat de markerlaag precies op de tekening past, ongeacht het schermformaat. */
.dealer-map {
  position: relative;
  width: 100%;
  max-width: 485px;
  margin: 0 auto;
  aspect-ratio: 442.926 / 514.803;
}

.dealer-map-base {
  display: block;
  width: 100%;
  height: 100%;
}

.dealer-map-points {
  position: absolute;
  inset: 0;
}

/* Raakvlak van 26px met een zichtbaar stipje van 10px. De negatieve marge
   centreert de marker op zijn coordinaat in plaats van hem met de linkerbovenhoek
   op te hangen. */
.dealer-point {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
}

.dealer-point::after {
  content: "";
  position: absolute;
  inset: 8px;
  background: var(--green);
  border: 2px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(41, 41, 41, 0.35);
  transition: inset 120ms ease, background 120ms ease;
}

.dealer-point:hover::after,
.dealer-point:focus-visible::after,
.dealer-point[data-actief]::after {
  inset: 5px;
  background: var(--green-dark);
}

.dealer-point:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* pointer-events: none is nodig omdat het labeltje boven de markers zweeft;
   zonder die regel onderschept het de muis en verdwijnt het meteen weer. */
.dealer-map-tip {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, calc(-100% - 16px));
  padding: 8px 12px;
  background: var(--white);
  border: 1px solid rgba(41, 41, 41, 0.08);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(41, 41, 41, 0.18);
  pointer-events: none;
  /* max-content houdt het labeltje op een regel zolang dat past; is de naam
     breder dan de kaart, dan breekt hij af in plaats van het beeld uit te lopen. */
  width: max-content;
  max-width: 100%;
}

.dealer-map-tip[hidden] {
  display: none;
}

.dealer-map-tip strong,
.dealer-map-tip span {
  display: block;
}

.dealer-map-tip strong {
  color: var(--navy);
  font: 700 13px/1.3 Manrope, Arial, sans-serif;
}

.dealer-map-tip span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.map-message {
  position: absolute;
  right: 30px;
  bottom: 30px;
  left: 30px;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(41, 41, 41, 0.08);
  border-radius: 8px;
  box-shadow: 0 15px 35px rgba(41, 41, 41, 0.12);
}

.map-message strong,
.map-message span {
  display: block;
}

.map-message strong {
  color: var(--navy);
  font: 700 16px/1.3 Manrope, Arial, sans-serif;
}

.map-message span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.map-wrap {
  display: grid;
  place-items: center;
  padding: 48px 42px;
  background: #f0eee9;
}

/* Alleen een directe afbeelding in de wrapper wordt zo begrensd. De kaart zit een
   niveau dieper en wordt door .dealer-map zelf op maat gehouden; zou deze regel
   daar ook op slaan, dan kadert hij de SVG in en lopen de markers uit de pas. */
.map-wrap > img {
  max-height: 480px;
}

.contact-strip {
  padding: 100px 0;
  background: #ebe7df;
}

.contact-page .page-hero h1 {
  max-width: 820px;
}

.contact-routes {
  padding: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.contact-route-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.contact-route-grid article {
  padding: 45px 38px;
  border-right: 1px solid var(--line);
}

.contact-route-grid article:first-child {
  padding-left: 0;
}

.contact-route-grid article:last-child {
  border-right: 0;
}

.contact-route-grid article > span {
  color: var(--green-dark);
  font: 700 11px/1.4 Manrope, Arial, sans-serif;
  letter-spacing: 0.12em;
}

.contact-route-grid h2 {
  margin: 18px 0 12px;
  color: var(--navy);
  font: 400 25px/1.25 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.contact-route-grid p {
  min-height: 78px;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
}

.contact-layout {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 80px;
  align-items: start;
}

.contact-details-card {
  padding: 42px;
  background: var(--navy);
  border-radius: 10px 10px 0 0;
  color: var(--white);
}

.contact-details-card h2 {
  margin: 0 0 22px;
  font: 400 32px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.contact-details-card address {
  color: #dce6ee;
  font-style: normal;
}

.contact-action-list {
  margin-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.contact-action-list > a {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14px;
}

.contact-action-list img {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  object-fit: contain;
}

.contact-action-list span,
.contact-action-list small {
  display: block;
}

.contact-action-list small {
  color: #9fb1c2;
  font-size: 11px;
}

.contact-map {
  height: 270px;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.contact-form-panel {
  scroll-margin-top: 110px;
}

/* Staat het formulier als laatste op de pagina, dan plakt de verzendknop tegen
   de voet: de secties dragen hun eigen ruimte onderaan en dit paneel had er
   geen. Alleen in dat geval, want zit er nog een sectie onder dan brengt die
   zijn eigen ruimte mee. */
main > *:last-child .contact-form-panel,
main > .contact-form-panel:last-child {
  padding-bottom: 96px;
}

.contact-form-panel > h2 {
  margin: 0 0 14px;
  color: var(--navy);
  font: 400 clamp(39px, 4.56vw, 57px)/1.08 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.contact-form-panel > p {
  max-width: 640px;
  margin: 0 0 34px;
  color: var(--muted);
}

.contact-form-panel
.button-primary {
  background: var(--green);
  color: var(--white);
}

.contact-form-panel .button-primary:hover {
  background: var(--navy);
  color: var(--white);
}

.consent-field {
  width: fit-content;
  display: inline-flex;
  flex-direction: row;
  gap: 9px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.consent-field input {
  appearance: auto;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  min-height: 15px;
  padding: 0;
  margin: 3px 0 0;
  accent-color: var(--blue);
}

.consent-field a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-inner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 50px;
}

.site-footer {
  position: relative;
  padding: 78px 0 0;
  background: var(--navy);
  color: var(--white);
}

.site-footer::before {
  position: absolute;
  top: -34px;
  right: 5vw;
  width: 150px;
  height: 35px;
  background: var(--navy);
  content: "";
  clip-path: polygon(var(--thaler-angle-footer-cut) 0, 100% 0, 100% 100%, 0 100%);
}

/* Houd een donkere afsluitende CTA visueel los van de donkerblauwe footer. */
main > .dealer-contact-section:last-child,
main > .warranty-section:last-child,
main > .warranty-check:last-child,
main > .s75-final-cta:last-child,
main > .page-hero:last-child {
  border-bottom: 24px solid var(--cream);
  box-shadow: inset 0 -6px 0 var(--green);
}

main > .about-local:last-child {
  border-bottom: 0;
  box-shadow: none;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 55px;
  padding-bottom: 72px;
}

.footer-logos a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.yanmar-logo {
  width: 80px;
}

.thaler-footer-logo {
  width: 150px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-style: normal;
}

.footer-column h3 {
  margin: 0 0 22px;
  font: 400 17px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.footer-column > a {
  margin: 0 0 9px;
  color: #d4dee7;
  font-size: 14px;
}

.footer-column > a:hover {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-underline-offset: 4px;
}

.contact-column > a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.contact-column > a img {
  width: 17px;
  height: 17px;
  margin-top: 4px;
  object-fit: contain;
}

.footer-legal {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.17);
  color: #aebdca;
  font-size: 13px;
}

.footer-legal a {
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-underline-offset: 3px;
}

.page-main {
  padding-top: 120px;
}

.has-transparent-header .page-main {
  padding-top: 0;
}

.page-hero {
  position: relative;
  overflow: hidden;
  /* De titel staat op elke pagina op dezelfde hoogte, en dat kan alleen vanaf
     de bovenkant: onderuitlijnen zette hem 138 pixels van boven op de 4275T en
     425 op de informatiepagina, want daaronder staat de ene keer een zin met
     twee knoppen en de andere keer niets. De 190 is de hoogste waarde waarbij
     de langste kop — drie regels, zin, twee knoppen — nog binnen de 650 past. */
  min-height: 650px;
  display: flex;
  align-items: flex-start;
  padding: 163px 0 40px;
  background: var(--navy);
  color: var(--white);
}

.page-hero .eyebrow {
  color: var(--blue);
}

.page-hero h1 {
  max-width: 900px;
  margin: 0;
  font: 400 clamp(52px, 6vw, 86px)/0.96 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.page-hero p:last-child {
  max-width: 720px;
  margin: 28px 0 0;
  color: #d8e2eb;
  font-size: 19px;
}

.photo-hero {
  min-height: 650px;
  display: flex;
  align-items: flex-start;
  background-color: var(--navy);
  background-position: center;
  background-size: cover;
}

.photo-hero::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24, 24, 24, .96) 0%, rgba(24, 24, 24, .82) 43%, rgba(24, 24, 24, .24) 78%, rgba(24, 24, 24, .12) 100%), linear-gradient(0deg, rgba(24, 24, 24, .52), transparent 62%);
  content: "";
}

.photo-hero .shell {
  position: relative;
  z-index: 1;
}

/* Deze hero's stonden op een productfoto met transparante achtergrond. Omdat
   .page-hero met de background-shorthand ook size en repeat reset, werd die PNG
   op ware grootte herhaald: drie machines naast elkaar. Vandaar hier expliciet
   cover + no-repeat. LET OP: assets/heroes/*-fotograaf.webp NIET gebruiken,
   daar staan Solis-tractoren op, geen Thaler. */
:is(.models-overview-hero, .dealers-overview-hero, .contact-hero, .service-hero,
    .warranty-hero, .warranty-form-hero, .privacy-hero, .cookie-hero,
    .acties-hero, .vergelijken-hero, .keuzehulp-hero, .demo-hero) {
  background-size: cover;
  background-repeat: no-repeat;
  /* .page-hero::after is bewust uitgezet, dus de sluier hoort hier: zonder
     verloop staat witte kop op een lichte lucht en leest de tekst niet. */
  background-blend-mode: normal;
  position: relative;
}
:is(.models-overview-hero, .dealers-overview-hero, .contact-hero, .service-hero,
    .warranty-hero, .warranty-form-hero, .privacy-hero, .cookie-hero,
    .acties-hero, .vergelijken-hero, .keuzehulp-hero, .demo-hero)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(24,24,24,.94) 0%, rgba(24,24,24,.78) 38%, rgba(24,24,24,.28) 74%, rgba(24,24,24,.12) 100%),
    linear-gradient(0deg, rgba(24,24,24,.55), transparent 58%);
}
:is(.models-overview-hero, .dealers-overview-hero, .contact-hero, .service-hero,
    .warranty-hero, .warranty-form-hero, .privacy-hero, .cookie-hero,
    .acties-hero, .vergelijken-hero, .keuzehulp-hero, .demo-hero) > .shell {
  position: relative;
  z-index: 1;
}
.models-overview-hero { background-image: url("assets/heroes-thaler/modellen.webp"); background-position: center 54%; }
.dealers-overview-hero { background-image: url("assets/heroes-thaler/dealers.webp"); background-position: center 58%; }
.contact-hero { background-image: url("assets/heroes-thaler/contact.webp"); background-position: center 42%; }
.service-hero { background-image: url("assets/heroes-thaler/service.webp"); background-position: center 52%; }
.warranty-hero { background-image: url("assets/heroes-thaler/garantie.webp"); background-position: center 54%; }
.warranty-form-hero { background-image: url("assets/heroes-thaler/garantieformulier.webp"); background-position: center 48%; }
.privacy-hero { background-image: url("assets/heroes-thaler/privacy.webp"); background-position: center 52%; }
.cookie-hero { background-image: url("assets/heroes-thaler/cookie.webp"); background-position: center 48%; }

/* Service hub */
.service-fastlane { background: var(--navy); color: var(--white); }
.service-fastlane-inner { min-height: 126px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.service-fastlane-inner > div { display: flex; align-items: center; gap: 20px; }
.service-fastlane-inner strong { display: block; margin-bottom: 5px; font: 700 18px/1.3 Manrope, sans-serif; }
.service-fastlane-inner p { margin: 0; color: rgba(255,255,255,.72); }
.service-status { width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 8px rgba(215,25,32,.14); }
.service-choices { padding-top: 110px; }
.service-choice-grid { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid #dce2e8; border-left: 1px solid #dce2e8; }
.service-choice-grid article { min-height: 330px; padding: 38px 40px 34px; display: flex; flex-direction: column; border-right: 1px solid #dce2e8; border-bottom: 1px solid #dce2e8; transition: background .25s, transform .25s; }
.service-choice-grid article:hover { background: #f4f7f1; }
.service-choice-grid article > span { color: var(--green); font: 700 14px/1 Manrope, sans-serif; }
.service-choice-grid article > div { margin: auto 0; }
.service-choice-grid h3 { max-width: 440px; margin: 12px 0 14px; color: var(--navy); font: 400 clamp(30px, 2.62vw, 43px)/1.06 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}
.service-choice-grid article p:not(.eyebrow) { max-width: 510px; color: var(--muted); line-height: 1.7; }
.service-process { padding: 112px 0; color: var(--white); background: var(--navy); }
.service-process-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(60px,9vw,150px); align-items: center; }
.service-process .content-copy h2 { color: var(--white); font-size: clamp(42px,5vw,72px); }
.service-process .content-copy > p:not(.eyebrow) { color: rgba(255,255,255,.72); }
.service-steps { border-top: 1px solid rgba(255,255,255,.18); }
.service-steps article { display: grid; grid-template-columns: 54px 1fr; gap: 22px; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.service-steps article > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--navy); background: var(--green); font: 800 15px/1 Manrope, sans-serif; clip-path: polygon(0 0,100% 0,100% 72%,72% 100%,0 100%); }
.service-steps h3 { margin: 0 0 8px; color: var(--white); font: 400 23px/1.25 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}
.service-steps p { margin: 0; color: rgba(255,255,255,.68); line-height: 1.65; }
.service-warranty { padding: 100px 0; }
.service-warranty-card { padding: clamp(40px,6vw,82px); display: grid; grid-template-columns: 1.25fr .75fr; gap: 70px; align-items: center; background: #eef3e9; }
.service-warranty-card h2 { max-width: 720px; margin: 8px 0 18px; color: var(--navy); font: 400 clamp(43px, 4.56vw, 68px)/1.02 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}
.service-warranty-card p:not(.eyebrow) { max-width: 760px; color: var(--muted); line-height: 1.75; }
.service-warranty-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 25px; }

@media (max-width: 1000px) {
  .service-process-grid,.service-warranty-card { grid-template-columns: 1fr; }
  .service-process-grid { gap: 55px; }
  .service-warranty-card { gap: 35px; }
}

@media (max-width: 600px) {
  .service-fastlane-inner { padding: 28px 0; align-items: flex-start; flex-direction: column; gap: 24px; }
  .service-fastlane-inner .button { width: 100%; }
  .service-choice-grid { grid-template-columns: 1fr; }
  .service-choice-grid article { min-height: 285px; padding: 30px 26px; }
  .service-process,.service-choices { padding-top: 76px; padding-bottom: 76px; }
  .service-warranty { padding: 64px 0; }
}

.dealer-page-hero {
  min-height: 540px;
  display: flex;
  align-items: flex-end;
  padding: 120px 0 95px;
  background: var(--navy) var(--dealer-hero-image, url("assets/heroes-thaler/dealers.webp")) center 52% / cover no-repeat;
}

.dealer-page-hero::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24, 24, 24, .97) 0%, rgba(24, 24, 24, .83) 42%, rgba(24, 24, 24, .28) 75%, rgba(24, 24, 24, .12) 100%), linear-gradient(0deg, rgba(24, 24, 24, .55), transparent 62%);
  content: "";
}

.dealer-page-hero .shell { position: relative; z-index: 1; }
.dealer-page-hero h1 { max-width: 820px; }
.dealer-page-hero .shell > p:not(.eyebrow) { max-width: 680px; color: #d8e2eb; font-size: 18px; }

.about-hero { background: linear-gradient(90deg, rgba(24, 24, 24,.96), rgba(24, 24, 24,.72) 58%, rgba(24, 24, 24,.22)), url("assets/heroes-thaler/over-ons.webp") center 48% / cover; }
.about-intro .page-image { height: 480px; min-height: 0; object-fit: cover; }
.about-scale { padding: 95px 0; background: var(--navy); color: var(--white); }
.about-scale-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 90px; align-items: center; }
.about-scale h2,.about-local h2 { margin: 0 0 20px; font: 400 clamp(46px, 5.13vw, 71px)/1.04 "Bebas Neue", Impact, Arial, sans-serif; letter-spacing: 0.005em;
  text-transform: uppercase;
}
.about-scale p:not(.eyebrow),.about-local p:not(.eyebrow) { color: #d5d5d5; }
.about-numbers { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(255,255,255,.14); }
.about-numbers article { min-height: 165px; padding: 34px; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.about-numbers article:nth-child(even) { border-right: 0; }.about-numbers article:nth-child(n+3) { border-bottom: 0; }
.about-numbers strong,.about-numbers span { display: block; }.about-numbers strong { color: var(--green); font: 800 34px/1 Manrope,Arial,sans-serif; }.about-numbers span { margin-top: 12px; color: #d5d5d5; font-size: 13px; }
.about-pillar-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 55px; }
.about-pillar-grid article { padding: 32px; background: var(--white); border-top: 5px solid var(--green); }
.about-pillar-grid article > span { color: var(--green-dark); font: 700 11px/1 Manrope,Arial,sans-serif; }.about-pillar-grid h3 { margin: 24px 0 13px; color: var(--navy); font: 400 24px/1.25 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}.about-pillar-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.about-principles { display: grid; gap: 2px; }.about-principles article { padding: 28px 30px; background: var(--cream); border-left: 5px solid var(--green); }.about-principles strong,.about-principles span { display: block; }.about-principles strong { color: var(--navy); font: 700 20px/1.2 Manrope,Arial,sans-serif; }.about-principles span { margin-top: 7px; color: var(--muted); font-size: 14px; }
.about-local {
  position: relative;
  padding: 82px 0;
  background: var(--cream);
  color: var(--navy);
  border-top: 7px solid var(--green);
}
.about-local .eyebrow.light { color: var(--green-dark); }
.about-local h2 { color: var(--navy); }
.about-local p:not(.eyebrow) { color: var(--muted); }
.about-local .button-outline-light { color: var(--navy); border-color: var(--navy); }
.about-local .button-outline-light:hover { background: var(--navy); color: var(--white); }
.about-local-inner { display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: end; }.about-local-inner > div:first-child { max-width: 760px; }

@media (max-width: 1000px) { .about-intro .page-image { height: 420px; }.about-scale-grid { grid-template-columns: 1fr; gap: 50px; }.about-pillar-grid { grid-template-columns: 1fr 1fr; }.about-local-inner { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 600px) { .about-intro .page-image { height: 360px; min-height: 0; }.about-numbers,.about-pillar-grid { grid-template-columns: 1fr; }.about-numbers article,.about-numbers article:nth-child(even),.about-numbers article:nth-child(n+3) { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }.about-numbers article:last-child { border-bottom: 0; }.about-scale,.about-local { padding: 72px 0; }.about-local .hero-actions,.about-local .button { width: 100%; } }

.content-section {
  padding: 105px 0;
}

.content-section.white {
  background: var(--white);
}

.content-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 100px;
  align-items: start;
}

.content-grid.equal {
  grid-template-columns: 1fr 1fr;
}

.content-copy h2,
.content-section > .shell > h2 {
  margin: 0 0 28px;
  color: var(--navy);
  font: 400 clamp(39px, 4.56vw, 63px)/1.08 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.content-copy h3,
.legal-copy h2 {
  margin: 42px 0 14px;
  color: var(--navy);
  font: 400 31px/1.25 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.content-copy p,
.legal-copy p,
.legal-copy li {
  color: #414852;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 50px;
}

.info-card {
  padding: 34px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.info-card h2,
.info-card h3 {
  margin: 0 0 15px;
  color: var(--navy);
  font: 400 30px/1.25 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.info-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.feature-list {
  padding: 0;
  margin: 28px 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.feature-list li {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.feature-list span {
  color: var(--muted);
}

.feature-list strong {
  color: var(--navy);
  text-align: right;
}

.page-image {
  width: 100%;
  min-height: 480px;
  object-fit: cover;
  border-radius: 10px;
}

.product-stage {
  display: grid;
  place-items: center;
  min-height: 500px;
  padding: 55px;
  background: linear-gradient(145deg, #f5f2eb, #e9e5dc);
  border-radius: 10px;
}

.product-stage img {
  max-height: 440px;
  filter: drop-shadow(0 26px 22px rgba(41, 41, 41, 0.2));
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  color: var(--navy);
  font: 700 13px/1.4 Manrope, Arial, sans-serif;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  background: var(--white);
  border: 1px solid #cfcac1;
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
}

.field select {
  padding-right: 44px;
  background: var(--white) var(--select-arrow) no-repeat right 16px center;
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid rgba(0, 102, 204, 0.18);
  border-color: var(--blue);
}

.form-status { grid-column:1/-1; min-height:1.5em; margin:0; font-weight:700; }
.form-status:empty { display:none; }
.form-status.is-error { padding:12px 14px; border-left:4px solid var(--blue); background:#fff1f1; color:#8f1116; }

.form-grid .consent-field {
  width: fit-content;
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
}

.form-grid .consent-field input {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  min-height: 15px;
  padding: 0;
  margin: 3px 0 0;
  border-radius: 3px;
}

.notice {
  padding: 24px 28px;
  background: #eef5fb;
  border-left: 4px solid var(--blue);
  border-radius: 0 8px 8px 0;
}

.warranty-first-buyer {
  display: block;
  max-width: 680px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.warranty-first-buyer strong {
  color: inherit;
  font-size: inherit;
}

/* Garantiepagina: compacte termijnintro en evenwichtige informatieblokken. */
body[data-page="garantie"] main > .content-section:nth-of-type(2) .content-grid {
  grid-template-columns: minmax(0, 820px);
  gap: 0;
}

body[data-page="garantie"] main > .content-section:nth-of-type(2) .content-copy {
  max-width: 820px;
}

body[data-page="garantie"] main > .content-section:nth-of-type(2) .content-copy > p:not(.eyebrow) {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.75;
}

body[data-page="garantie"] main > .content-section:nth-of-type(3) .about-pillar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

body[data-page="garantie"] .about-pillar-grid article {
  min-height: 245px;
  padding: 34px;
  border-top-color: var(--blue);
  box-shadow: 0 12px 34px rgba(20, 29, 38, .055);
}

body[data-page="garantie"] .about-pillar-grid article > span {
  color: var(--blue);
}

.warranty-scope-note {
  display: block;
  margin-top: 34px;
  padding: 22px 26px;
  color: var(--muted);
  background: rgba(255,255,255,.62);
  border-left: 3px solid var(--blue);
  font-size: 12px;
  line-height: 1.65;
}

.warranty-scope-note strong {
  margin-right: 6px;
  color: var(--ink);
}

body[data-page="garantie"] main > .content-section:nth-of-type(4) .about-pillar-grid {
  gap: 0;
  margin-top: 50px;
  border-top: 1px solid #d9dde0;
  border-bottom: 1px solid #d9dde0;
}

body[data-page="garantie"] main > .content-section:nth-of-type(4) .about-pillar-grid article {
  min-height: 215px;
  padding: 34px 32px;
  border-top: 4px solid var(--blue);
  border-right: 1px solid #e2e5e7;
  box-shadow: none;
}

body[data-page="garantie"] main > .content-section:nth-of-type(4) .about-pillar-grid article:last-child {
  border-right: 0;
}

@media (max-width: 1000px) {
  body[data-page="garantie"] main > .content-section:nth-of-type(3) .about-pillar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-page="garantie"] main > .content-section:nth-of-type(4) .about-pillar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  body[data-page="garantie"] main > .content-section:nth-of-type(3) .about-pillar-grid,
  body[data-page="garantie"] main > .content-section:nth-of-type(4) .about-pillar-grid {
    grid-template-columns: 1fr;
  }
  body[data-page="garantie"] .about-pillar-grid article {
    min-height: 0;
  }
  body[data-page="garantie"] main > .content-section:nth-of-type(4) .about-pillar-grid article {
    border-right: 0;
    border-bottom: 1px solid #e2e5e7;
  }
}

.legal-copy {
  max-width: 860px;
}

.legal-copy h2:first-child {
  margin-top: 0;
}

body[data-page="legal"] .page-hero p:last-child {
  max-width: 650px;
  font-size: 17px;
}

body[data-page="legal"] .content-section {
  padding: 85px 0 100px;
}

body[data-page="legal"] .legal-copy {
  max-width: 780px;
}

body[data-page="legal"] .legal-copy .notice {
  margin-bottom: 45px;
}

body[data-page="legal"] .legal-copy h2 {
  margin: 34px 0 10px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

body[data-page="legal"] .legal-copy .notice + h2 {
  padding-top: 0;
  border-top: 0;
}

body[data-page="legal"] .legal-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

.directory-card {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 45px;
  align-items: center;
  padding: 38px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.directory-card h2 {
  margin: 0 0 12px;
  color: var(--navy);
  font: 400 34px/1.15 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.dealer-finder-head {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 55px;
}

.dealer-search {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dealer-search label {
  color: var(--navy);
  font: 700 13px/1.4 Manrope, Arial, sans-serif;
}

.dealer-search input,
.dealer-search select {
  min-height: 56px;
  padding: 13px 16px;
  background: var(--white);
  border: 1px solid #cfcac1;
  border-radius: 7px;
  color: var(--ink);
  font: inherit;
}

.dealer-search select {
  padding-right: 44px;
  background: var(--white) var(--select-arrow) no-repeat right 16px center;
}

.dealer-search input:focus,
.dealer-search select:focus {
  outline: 3px solid rgba(0, 102, 204, 0.18);
  border-color: var(--blue);
}

.dealer-search span {
  color: var(--muted);
  font-size: 13px;
}

.all-dealers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.dealer-list-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: transform 0.25s, box-shadow 0.25s;
}

.dealer-card-image {
  display: block;
  height: 220px;
  overflow: hidden;
  background: var(--cream);
}

.dealer-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.dealer-list-card:hover .dealer-card-image img { transform: scale(1.035); }

.dealer-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px;
}

.dealer-list-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.dealer-card-top {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.dealer-place {
  color: var(--green-dark);
  font: 700 11px/1.3 Manrope, Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dealer-badge {
  padding: 5px 8px;
  background: #eef5fb;
  border-radius: 4px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
}

.dealer-list-card h2 {
  margin: 0 0 16px;
  color: var(--navy);
  font: 400 26px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.dealer-card-content > p {
  margin: 0 0 18px;
  color: var(--muted);
}

.dealer-card-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  padding-top: 18px;
}

.dealer-card-actions .button {
  min-height: 48px;
  padding-inline: 18px;
}

.dealer-phone-link {
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}

.regional-contact-card {
  padding: 45px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.regional-contact-card h2 {
  margin: 0 0 22px;
  color: var(--navy);
  font: 400 clamp(39px, 4.56vw, 57px)/1.05 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.information-hero {
  min-height: 650px;
  position: relative;
  display: flex;
  align-items: flex-start;
  /* Deze hero zet zijn tekst in een kale `.shell` en niet in een eigen
     inhoudsblok, dus de ruimte hoort hier — net als bij `.page-hero`. */
  padding: 163px 0 40px;
  overflow: hidden;
  background: linear-gradient(90deg,rgba(20,20,20,.95),rgba(20,20,20,.58) 60%,rgba(20,20,20,.25)),url("assets/models/gallery/3448-work.jpg") center / cover;
  color: var(--white);
}

.page-main.information-page {
  padding-top: 0;
}

.information-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(24, 24, 24, 0.98) 0%, rgba(24, 24, 24, 0.86) 34%, rgba(24, 24, 24, 0.18) 70%, transparent 100%),
    linear-gradient(0deg, rgba(24, 24, 24, 0.55), transparent 55%);
}

.information-hero-content {
  position: relative;
  z-index: 2;
}

.information-hero h1 {
  max-width: 760px;
  margin: 0;
  font: 400 clamp(52px, 6vw, 86px)/0.96 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.information-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 30px;
  font-weight: 700;
}

.information-nav a:not(:last-child)::after {
  content: "/";
  margin-left: 22px;
  color: var(--green);
}

.download-section {
  padding: 72px 0;
  background: var(--navy);
  color: var(--white);
}

.download-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 90px;
  align-items: center;
}

.download-grid h2 {
  margin: 0 0 18px;
  font: 400 clamp(39px, 4.56vw, 59px)/1.08 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.download-grid p:last-child {
  max-width: 560px;
  color: #d4dee7;
}

.angled-downloads {
  display: grid;
  gap: 12px;
}

.angled-download {
  height: 68px;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 52px 0 22px;
  background: var(--green);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--thaler-angle-download-cut)) 100%, 0 100%);
  color: var(--navy);
  font: 700 14px/1 Manrope, Arial, sans-serif;
  transition: background 0.25s, transform 0.25s;
}

.angled-download:hover {
  background: var(--navy);
  color: var(--white);
  transform: translateX(5px);
}

.tire-section {
  margin-top: 90px;
}

.tire-intro {
  align-items: center;
}

.tire-showcase {
  position: relative;
  min-height: 490px;
  overflow: hidden;
  background: var(--cream);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 58px), calc(100% - 58px) 100%, 0 100%);
}

.tire-showcase::before {
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: var(--green);
  content: "";
}

.tire-showcase-copy {
  position: absolute;
  z-index: 2;
  top: 36px;
  left: 38px;
}

.tire-showcase-copy span,
.tire-section-heading .eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--green-dark);
  font: 700 11px/1 Manrope, Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tire-showcase-copy strong {
  display: block;
  max-width: 260px;
  color: var(--navy);
  font: 700 22px/1.2 Manrope, Arial, sans-serif;
}

.tire-showcase-products {
  position: absolute;
  inset: 125px 28px 32px;
}

.tire-showcase-products img {
  position: absolute;
  width: 43%;
  height: 76%;
  object-fit: contain;
  filter: drop-shadow(0 18px 14px rgba(13, 42, 58, 0.16));
}

.tire-showcase-products img:nth-child(1) {
  top: 0;
  left: 30%;
}

.tire-showcase-products img:nth-child(2) {
  right: 0;
  bottom: 18px;
  width: 40%;
}

.tire-showcase-products img:nth-child(3) {
  bottom: 18px;
  left: 0;
  width: 35%;
  height: 62%;
}

.tire-section-heading {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 34px;
}

.tire-section-heading p:last-child {
  max-width: 510px;
  margin: 0 0 4px;
  color: var(--muted);
}

.tire-section > h3,
.tire-section-heading h3,
.agricultural-tires h3 {
  margin: 0;
  color: var(--navy);
  font: 400 34px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.tire-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tire-grid article {
  background: var(--cream);
  border: 1px solid var(--line);
  transition: transform 0.25s, box-shadow 0.25s;
}

.tire-grid article:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(13, 42, 58, 0.1);
}

.tire-card-image {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: var(--white);
}

.tire-card-image img {
  width: 100%;
  height: 100%;
  padding: 16px;
  object-fit: contain;
  transition: transform 0.35s;
}

.tire-grid article:hover .tire-card-image img {
  transform: scale(1.045);
}

.tire-card-image > span {
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 16px;
  width: 32px;
  height: 32px;
  padding-top: 11px;
  background: var(--green);
  color: var(--green-dark);
  font: 700 11px/1 Manrope, Arial, sans-serif;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}

.tire-card-copy {
  padding: 26px;
}

.tire-grid h4 {
  margin: 0 0 12px;
  color: var(--navy);
  font: 700 19px/1.25 Manrope, Arial, sans-serif;
}

.tire-grid p {
  color: var(--muted);
  font-size: 14px;
}

.tire-grid small {
  display: block;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--navy);
  font-size: 11px;
}

.agricultural-tires {
  margin-top: 90px;
  padding-top: 70px;
  border-top: 1px solid var(--line);
}

.agricultural-tires-intro {
  display: grid;
  grid-template-columns: 1fr 0.55fr;
  gap: 80px;
  align-items: center;
}

.agricultural-tires-intro img {
  width: 100%;
  height: 310px;
  object-fit: contain;
}

.tractor-tire-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 52px;
}

.tractor-tire-grid article {
  padding: 30px;
  background: var(--navy);
  color: var(--white);
  border-left: 6px solid var(--green);
}

.tractor-tire-title {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  margin-bottom: 20px;
}

.tractor-tire-title span {
  color: var(--green);
  font: 700 11px/1 Manrope, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tractor-tire-grid h4 {
  margin: 0;
  font: 700 22px/1.2 Manrope, Arial, sans-serif;
}

.tractor-tire-grid dl,
.tractor-tire-grid dd {
  margin: 0;
}

.tractor-tire-grid dl > div {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
}

.tractor-tire-grid dt {
  color: #b9c8d5;
}

.tractor-tire-grid dd {
  font-weight: 700;
  text-align: right;
}

.tire-advice {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: center;
  margin-top: 20px;
  padding: 28px 32px;
  background: var(--cream);
}

.tire-advice div span {
  display: block;
  margin-bottom: 5px;
  color: var(--green-dark);
  font: 700 11px/1 Manrope, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tire-advice div strong {
  color: var(--navy);
  font: 700 18px/1.3 Manrope, Arial, sans-serif;
}

.factory-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 70px;
}

.information-page #fabriek .page-image {
  height: 480px;
  min-height: 0;
  object-fit: cover;
}

.factory-gallery figure {
  margin: 0;
}

.factory-gallery img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.factory-gallery figcaption {
  padding-top: 13px;
  color: var(--muted);
  font-size: 12px;
}

.engine-panel {
  padding: 40px;
  background: var(--navy);
  color: var(--white);
}

.engine-panel > img {
  max-height: 230px;
  margin: 0 auto 25px;
}

.engine-panel ul {
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.engine-panel li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12px;
}

.engine-panel li span {
  color: #b9c8d5;
}

.engine-panel li strong {
  text-align: right;
}

.departments-section > .shell > h2,
.warranty-section > .shell > h2 {
  max-width: 800px;
  margin: 0;
  color: var(--navy);
  font: 400 clamp(43px, 5.13vw, 71px)/1.05 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.department-grid {
  display: grid;
  gap: 28px;
  margin-top: 55px;
}

.department-grid article {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 50px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
}

.department-grid article:nth-child(even) img {
  order: 2;
}

.department-grid img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.department-grid article > div {
  padding: 40px;
}

.department-grid h3 {
  margin: 0 0 15px;
  color: var(--navy);
  font: 400 28px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.department-grid p {
  color: var(--muted);
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.partner-technology {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 62px;
}

.partner-technology article {
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}

.partner-technology article > img,
.partner-visual-pair {
  width: 100%;
  height: 235px;
  background: var(--cream);
}

.partner-technology article > img {
  object-fit: cover;
}

.partner-visual-pair {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
}

.partner-visual-pair img {
  width: 100%;
  height: 117px;
  padding: 12px 24px;
  background: var(--white);
  object-fit: contain;
}

.partner-technology article > div:last-child {
  padding: 30px;
}

.partner-technology article span,
.partner-category {
  color: var(--green);
  font: 700 10px/1 Manrope, Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.partner-technology h3 {
  margin: 12px 0;
  font: 400 24px/1.25 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.partner-technology p {
  margin: 0;
  color: #c5d1da;
  font-size: 13px;
}

.partner-grid-heading {
  margin-top: 82px;
  margin-bottom: 30px;
}

.partner-grid-heading h3 {
  margin: 0;
  color: var(--navy);
  font: 400 34px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.partner-grid article {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--cream);
  border: 1px solid var(--line);
}

.partner-category {
  position: absolute;
  top: 20px;
  left: 20px;
  color: var(--green-dark);
}

.partner-logo {
  height: 105px;
  display: grid;
  place-items: center;
  margin-bottom: 25px;
  padding: 15px;
  background: var(--white);
}

.partner-grid article > a {
  display: inline-flex;
  align-self: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--green-dark);
  font: 700 12px/1.2 Manrope, Arial, sans-serif;
}

.partner-logo img {
  max-height: 70px;
  width: auto;
}

.partner-grid h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font: 400 21px/1.25 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.partner-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.warranty-section {
  background: var(--navy);
  color: var(--white);
}

.warranty-section > .shell > h2 {
  color: var(--white);
}

.warranty-intro {
  max-width: 720px;
  color: #d4dee7;
  font-size: 18px;
}

.warranty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 55px;
}

.warranty-grid article {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  color: var(--ink);
}

.warranty-grid img {
  width: 100%;
  height: 330px;
  object-fit: cover;
}

.warranty-grid article > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 38px;
}

.warranty-grid article .button {
  align-self: flex-start;
  margin-top: auto;
}

.warranty-grid h3 {
  margin: 0 0 18px;
  color: var(--navy);
  font: 400 30px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.warranty-grid p {
  color: var(--muted);
}

.warranty-info-page .page-hero h1 {
  max-width: 900px;
}

.warranty-summary {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.warranty-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.warranty-summary article {
  min-height: 205px;
  padding: 38px 34px;
  border-right: 1px solid var(--line);
}

.warranty-summary article:first-child {
  border-left: 1px solid var(--line);
}

.warranty-summary article.featured {
  background: var(--green);
}

.warranty-summary span,
.warranty-condition-grid article > span {
  display: block;
  margin-bottom: 13px;
  color: var(--green-dark);
  font: 700 10px/1 Manrope, Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.warranty-summary strong {
  display: block;
  color: var(--navy);
  font: 700 21px/1.25 Manrope, Arial, sans-serif;
}

.warranty-summary p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.warranty-summary .featured p {
  color: #173c30;
}

.warranty-explanation {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 90px;
  align-items: start;
}

.warranty-timeline {
  border-top: 1px solid var(--line);
}

.warranty-timeline article {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 25px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}

.warranty-timeline article > span {
  color: var(--green-dark);
  font: 700 13px/1.3 Manrope, Arial, sans-serif;
}

.warranty-timeline h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font: 400 22px/1.25 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.warranty-timeline p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.warranty-timeline .conditional {
  margin-top: -1px;
  padding-right: 22px;
  padding-left: 22px;
  background: var(--cream);
  border-left: 5px solid var(--green);
}

.warranty-conditions {
  background: var(--cream);
}

.warranty-condition-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 50px;
}

.warranty-condition-grid article {
  padding: 30px;
  background: var(--white);
  border-top: 5px solid var(--green);
}

.warranty-condition-grid h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font: 400 21px/1.25 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.warranty-condition-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.warranty-check {
  padding: 70px 0;
  background: var(--navy);
  color: var(--white);
}

.warranty-check-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 70px;
  align-items: center;
}

.warranty-check h2 {
  margin: 0 0 12px;
  font: 400 clamp(34px, 3.42vw, 52px)/1.08 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.warranty-check p:last-child {
  max-width: 680px;
  margin: 0;
  color: #c5d1da;
}

.warranty-check-actions {
  display: flex;
  gap: 12px;
}

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 35px;
}

.subnav a {
  padding: 10px 15px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--navy);
  font-weight: 600;
}

.history-list {
  border-top: 1px solid var(--line);
}

.local-value-strip {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.local-value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.local-value-grid article {
  padding: 30px 25px;
  border-right: 1px solid var(--line);
}

.local-value-grid article:first-child {
  padding-left: 0;
}

.local-value-grid article:last-child {
  border-right: 0;
}

.local-value-grid strong,
.local-value-grid span {
  display: block;
}

.local-value-grid strong {
  color: var(--navy);
  font: 700 17px/1.4 Manrope, Arial, sans-serif;
}

.local-value-grid span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.local-benefits {
  border-top: 1px solid var(--line);
}

.local-benefits article {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}

.local-benefits article > span {
  color: var(--green-dark);
  font: 700 12px/1.5 Manrope, Arial, sans-serif;
}

.local-benefits h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font: 400 23px/1.25 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.local-benefits p {
  margin: 0;
  color: var(--muted);
}

.service-heading {
  max-width: 760px;
}

.dealer-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 50px;
}

.dealer-service-grid article {
  padding: 32px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.dealer-service-grid article > span {
  color: var(--green-dark);
  font: 700 12px/1.4 Manrope, Arial, sans-serif;
}

.dealer-service-grid h3 {
  margin: 22px 0 10px;
  color: var(--navy);
  font: 400 24px/1.25 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.dealer-service-grid p {
  margin: 0;
  color: var(--muted);
}

.centered-action {
  display: flex;
  justify-content: center;
  margin-top: 42px;
}

.region-section {
  padding: 0;
  background: var(--cream);
}

.region-grid {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
}

.region-map {
  min-height: 590px;
}

.region-map iframe {
  width: 100%;
  height: 590px;
  display: block;
  border: 0;
}

.region-grid > .content-copy {
  max-width: 620px;
  padding: 80px clamp(35px, 7vw, 110px);
}

.history-list article {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 30px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}

.history-list article > span {
  color: var(--green-dark);
  font: 700 14px/1.4 Manrope, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.history-list h3 {
  margin: 0 0 9px;
  color: var(--navy);
  font: 400 25px/1.25 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.history-list p {
  margin: 0;
  color: var(--muted);
}

.dealer-contact-section {
  background: var(--navy);
  color: var(--white);
}

.dealer-contact-card {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 100px;
  align-items: start;
}

.dealer-contact-card h2 {
  max-width: 660px;
  margin: 0 0 24px;
  color: var(--white);
  font: 400 clamp(43px, 5.13vw, 71px)/1.05 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.dealer-contact-card > div > p:last-child {
  max-width: 600px;
  color: #d4dee7;
}

.dealer-address {
  padding: 36px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  font-style: normal;
}

.dealer-address h3 {
  margin: 0 0 18px;
  font: 400 27px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.dealer-address p {
  color: #e0e8ef;
}

.dealer-address a:hover {
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-underline-offset: 4px;
}

@media (max-width: 1000px) {
  :root {
    --shell: min(100% - 40px, 1240px);
  }

  .utility-bar {
    display: none;
  }

  .nav-shell {
    min-height: 82px;
  }

  .menu-toggle {
    display: grid;
    gap: 5px;
  }

  .menu-toggle span:not(.sr-only) {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--white);
  }

  .site-nav {
    position: absolute;
    top: 82px;
    left: 0;
    right: 0;
    display: none;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 25px 24px 32px;
    background: var(--navy);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18);
  }

  .site-nav.open {
    display: flex;
  }

  .site-nav a {
    width: 100%;
  }

  .section {
    padding: 90px 0;
  }

  .intro-grid,
  .section-heading,
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .trust-row {
    grid-template-columns: 1fr 1fr;
    margin-top: 65px;
  }

  .trust-row article:nth-child(2) {
    border-right: 0;
  }

  .model-card,
  .story,
  .dealer-card {
    grid-template-columns: 1fr;
  }

  .model-info,
  .dealer-copy {
    padding: 65px 50px;
  }

  .story-panel {
    padding: 90px 50px;
  }

  .detail-photo img {
    height: 520px;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
  }

  .page-main {
    padding-top: 82px;
  }

  .content-grid,
  .content-grid.equal {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .information-page #fabriek .page-image {
    height: 360px;
  }

  .download-grid,
  .agricultural-tires {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .tire-showcase {
    min-height: 430px;
  }

  .tire-section-heading,
  .agricultural-tires-intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .agricultural-tires-intro img {
    height: 260px;
  }

  .tractor-tire-grid {
    grid-template-columns: 1fr;
  }

  .tire-grid,
  .partner-grid {
    grid-template-columns: 1fr 1fr;
  }

  .partner-technology {
    grid-template-columns: 1fr;
  }

  .warranty-summary-grid,
  .warranty-condition-grid {
    grid-template-columns: 1fr 1fr;
  }

  .warranty-explanation,
  .warranty-check-inner {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dealer-contact-card {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .dealer-finder-head {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .all-dealers-grid {
    grid-template-columns: 1fr 1fr;
  }

  .information-hero {
    min-height: 610px;
  }

  .information-hero-content {
    padding: 150px 0 65px;
  }

  .download-section {
    padding: 60px 0;
  }

  .tire-grid,
  .factory-gallery,
  .partner-technology,
  .partner-grid,
  .warranty-grid {
    grid-template-columns: 1fr;
  }

  .department-grid article {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .department-grid article:nth-child(even) img {
    order: initial;
  }

  .department-grid img {
    height: 250px;
  }

  .factory-gallery img {
    height: 250px;
  }

  .department-grid article > div,
  .warranty-grid article > div {
    padding: 28px;
  }

  .engine-panel {
    padding: 30px 22px;
  }

  .engine-panel li,
  .tire-size-list div {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .engine-panel li strong,
  .tire-size-list strong {
    text-align: left;
  }

  .information-nav {
    gap: 8px 14px;
    font-size: 13px;
  }

  .information-nav a:not(:last-child)::after {
    margin-left: 14px;
  }

  .tire-showcase {
    min-height: 380px;
  }

  .tire-showcase-copy {
    top: 28px;
    left: 25px;
  }

  .tire-showcase-products {
    inset: 120px 18px 25px;
  }

  .tire-card-image {
    height: 245px;
  }

  .agricultural-tires {
    margin-top: 65px;
    padding-top: 55px;
  }

  .tractor-tire-grid article {
    padding: 24px 20px;
  }

  .tractor-tire-grid dl > div,
  .tire-advice {
    align-items: flex-start;
    flex-direction: column;
  }

  .tractor-tire-grid dd {
    text-align: left;
  }

  .tire-advice {
    gap: 22px;
    padding: 25px 22px;
  }

  .local-value-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dealer-service-grid {
    grid-template-columns: 1fr 1fr;
  }

  .region-grid {
    grid-template-columns: 1fr;
  }

  .region-map,
  .region-map iframe {
    min-height: 440px;
    height: 440px;
  }

  .local-value-grid article:nth-child(2) {
    border-right: 0;
  }
}

@media (max-width: 600px) {
  :root {
    --shell: calc(100% - 32px);
    --thaler-angle-hero-cut: 4px;
  }

  body {
    font-size: 15px;
  }

  .warranty-summary-grid,
  .warranty-condition-grid {
    grid-template-columns: 1fr;
  }

  .warranty-summary article,
  .warranty-summary article:first-child {
    min-height: 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }

  .warranty-timeline article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .warranty-check-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .brand img {
    width: 142px;
  }

  .hero {
    min-height: 720px;
    background-position: 58% center;
  }

  .hero-shade,
  .information-hero-shade {
    background: linear-gradient(0deg, rgba(24, 24, 24, 0.98) 0%, rgba(24, 24, 24, 0.8) 52%, rgba(24, 24, 24, 0.18) 100%);
  }

  .hero-content {
    padding: 150px 0 74px;
  }

  .hero-accent {
    margin-bottom: 18px;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(48px, 15vw, 62px);
  }

  .hero-copy {
    max-width: 95%;
    margin-top: 20px;
    font-size: 16px;
  }

  .scroll-hint {
    display: none;
  }

  .section {
    padding: 76px 0;
  }

  .section h2,
  .story h2,
  .contact-strip h2 {
    font-size: 38px;
  }

  .intro-grid {
    gap: 28px;
  }

  .lead {
    font-size: 17px;
  }

  .trust-row {
    grid-template-columns: 1fr;
  }

  .trust-row article,
  .trust-row article:first-child {
    padding: 22px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .trust-row article:last-child {
    border-bottom: 0;
  }

  .section-heading {
    margin-bottom: 40px;
  }

  .model-card {
    min-height: 0;
  }

  .model-carousel-footer {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .model-carousel-controls {
    justify-content: space-between;
  }

  .model-carousel-tabs {
    order: -1;
  }

  .model-visual {
    min-height: 340px;
    padding: 55px 20px;
  }

  .model-info,
  .story-panel,
  .dealer-copy {
    padding: 55px 28px;
  }

  .home-dealer-finder > div {
    align-items: stretch;
    flex-direction: column;
  }

  .home-dealer-finder .button {
    width: 100%;
  }

  .home-dealer-stats {
    grid-template-columns: 1fr;
  }

  .home-dealer-stats article + article {
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 0;
  }

  .map-message {
    position: static;
    margin-top: 24px;
  }

  .model-info h3 {
    font-size: 43px;
  }

  .spec-list li {
    align-items: flex-start;
  }

  .story-image {
    min-height: 390px;
  }

  .detail-grid {
    gap: 50px;
  }

  .detail-photo img {
    height: 390px;
  }

  .map-wrap {
    padding: 40px 30px;
  }

  .contact-strip {
    padding: 76px 0;
  }

  .contact-route-grid {
    grid-template-columns: 1fr;
  }

  .contact-route-grid article,
  .contact-route-grid article:first-child {
    padding: 28px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .contact-route-grid article:last-child {
    border-bottom: 0;
  }

  .contact-route-grid p {
    min-height: 0;
  }

  .contact-details-card {
    padding: 30px 26px;
  }

  .contact-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 35px;
  }

  .contact-inner .button {
    width: 100%;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-bottom: 50px;
  }

  .footer-legal {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 18px 0;
  }

  .page-hero {
    padding: 72px 0 68px;
  }

  .photo-hero {
    min-height: 560px;
  }

  body[data-page="legal"] .page-hero {
    padding: 58px 0 54px;
  }

  body[data-page="legal"] .page-hero h1 {
    font-size: 39px;
  }

  body[data-page="legal"] .content-section {
    padding: 62px 0 76px;
  }

  body[data-page="legal"] .legal-copy h2 {
    font-size: 18px;
  }

  .page-hero h1 {
    font-size: 44px;
  }

  .page-hero p:last-child {
    font-size: 17px;
  }

  .content-section {
    padding: 76px 0;
  }

  .card-grid,
  .form-grid,
  .directory-card {
    grid-template-columns: 1fr;
  }

  .field.full {
    grid-column: auto;
  }

  .directory-card,
  .info-card {
    padding: 26px;
  }

  .all-dealers-grid {
    grid-template-columns: 1fr;
  }

  .regional-contact-card {
    padding: 26px;
  }

  .dealer-card-content { padding: 24px; }
  .dealer-card-image { height: 205px; }

  .history-list article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .local-value-grid {
    grid-template-columns: 1fr;
  }

  .local-value-grid article,
  .local-value-grid article:first-child {
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .dealer-service-grid {
    grid-template-columns: 1fr;
  }

  .dealer-service-grid article {
    padding: 26px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .region-map,
  .region-map iframe {
    min-height: 360px;
    height: 360px;
  }

  .region-grid > .content-copy {
    padding: 60px 16px;
  }

  .dealer-address {
    padding: 26px;
  }

  .product-stage {
    min-height: 350px;
    padding: 35px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.series-hero {
  position: relative;
  display: flex;
  min-height: 650px;
  align-items: flex-start;
  overflow: hidden;
  background: var(--model-hero) center / cover no-repeat;
  color: var(--white);
}

.series-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(24, 24, 24, 0.98) 0%, rgba(24, 24, 24, 0.86) 34%, rgba(24, 24, 24, 0.18) 70%, transparent 100%),
    linear-gradient(0deg, rgba(24, 24, 24, 0.55), transparent 55%);
}

.series-hero-content {
  position: relative;
  z-index: 2;
  /* Onderaan geen ruimte: de langste modelkop — drie regels titel, twee regels
     aanhef en drie knoppen — vult het vlak van 650 pixels tot zeven pixels na.
     De 163 bovenaan is heilig, want daar staat de titel op zijn plek. */
  padding: 163px 0 0;
}

.series-hero h1 {
  max-width: 760px;
  margin: 0;
  font: 400 clamp(52px, 6vw, 86px)/0.96 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.series-hero-content > p:not(.eyebrow) {
  max-width: 630px;
  color: #dbe5ec;
  font-size: 18px;
}

.series-keyfacts {
  background: var(--navy);
  color: var(--white);
}

.series-keyfacts .shell {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}

.series-keyfacts article {
  padding: 28px 24px;
  border-right: 1px solid rgba(255,255,255,.14);
}

.series-keyfacts article:first-child { border-left: 1px solid rgba(255,255,255,.14); }
.series-keyfacts span,.series-keyfacts strong { display:block; }
.series-keyfacts span { color:var(--green);font:700 10px/1 Manrope,Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em; }
.series-keyfacts strong { margin-top:9px;font:700 17px/1.25 Manrope,Arial,sans-serif; }

.series-offer { padding:24px 0;background:var(--green); }
.series-offer .shell { display:flex;justify-content:space-between;gap:35px;align-items:center; }
.series-offer span,.series-offer strong,.series-offer small { display:block; }
.series-offer span { color:var(--green-dark);font:700 10px/1 Manrope,Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em; }
.series-offer strong { margin-top:5px;color:var(--navy);font:800 24px/1.1 Manrope,Arial,sans-serif; }
.series-offer small { margin-top:4px;color:#2e5145;font-size:10px; }
.series-offer .button { background:var(--navy);color:var(--white); }

.series-intro { display:grid;grid-template-columns:.9fr 1.1fr;gap:75px;align-items:center; }
.series-product { height:470px;overflow:hidden;background:var(--cream);border-top:7px solid var(--green); }
.series-product img { width:100%;height:100%;object-fit:contain; }

.series-specs { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px; }
.series-specs article { padding:27px;background:var(--cream);border-top:5px solid var(--green); }
.series-specs span,.series-specs strong { display:block; }
.series-specs span { color:var(--muted);font-size:11px; }
.series-specs strong { margin-top:9px;color:var(--navy);font:700 17px/1.3 Manrope,Arial,sans-serif; }
.series-specs article.world-spec { background:#f3f5ef;border-top-color:var(--navy); }
.series-specs article.world-spec small { display:block;margin-top:13px;color:var(--green-dark);font:700 9px/1 Manrope,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase; }
.series-source-note { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;margin-top:20px;padding:18px 22px;background:var(--navy);color:#fff; }
.series-source-note > span { color:var(--green);font:800 11px/1 Manrope,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase; }
.series-source-note p { margin:0;color:rgba(255,255,255,.74);font-size:13px; }
.series-source-note a { color:#fff;font:700 12px/1.2 Manrope,Arial,sans-serif;text-decoration:none;white-space:nowrap; }
.series-source-note a span { color:var(--green); }

.model-overview-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:55px; }
.series-product img,
.s75-product-stage img,
.s90-versions .s75-version-image img {
  filter: drop-shadow(0 14px 10px rgba(24, 24, 24, .2));
}

.s90-versions .s75-version-image {
  background: var(--cream);
}

.s90-versions .s75-version-image img {
  object-fit: contain;
}

.s90-versions .featured-version {
  border-top: 6px solid var(--green);
}

@media (max-width:1000px) {
  .series-keyfacts .shell,.series-specs,.model-overview-grid { grid-template-columns:1fr 1fr; }
  .series-intro { grid-template-columns:1fr; }
}

@media (max-width:600px) {
  .series-source-note { grid-template-columns:1fr;gap:10px; }
  .series-hero { min-height:650px;background-position:62% center; }
  .series-hero-shade { background:linear-gradient(0deg,rgba(24, 24, 24,.98) 0%,rgba(24, 24, 24,.8) 52%,rgba(24, 24, 24,.18) 100%); }
  .series-hero-content { padding-bottom:55px; }
  .series-hero h1 { font-size:48px; }
  .series-keyfacts .shell,.series-specs,.model-overview-grid { grid-template-columns:1fr; }
  .series-offer .shell { align-items:stretch;flex-direction:column; }
  .series-product { height:360px; }
}

/* Thaler S75 model page */
.s75-hero {
  position: relative;
  display: flex;
  min-height: 760px;
  align-items: flex-end;
  overflow: hidden;
  background: url("assets/models/gallery/3448-work.jpg") center / cover no-repeat;
  color: var(--white);
}

.s75-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(24, 24, 24, 0.98) 0%, rgba(24, 24, 24, 0.86) 34%, rgba(24, 24, 24, 0.18) 70%, transparent 100%),
    linear-gradient(0deg, rgba(24, 24, 24, 0.55), transparent 55%);
}

.s75-hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: 95px;
}

.s75-hero h1 {
  max-width: 780px;
  margin: 0;
  font: 400 clamp(52px, 6vw, 86px)/0.96 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.s75-hero-lead {
  max-width: 650px;
  margin: 26px 0 0;
  color: #e0e8ee;
  font-size: 19px;
}

.s75-hero-actions,
.s75-final-actions {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-top: 34px;
}

.s75-text-link {
  padding: 16px 6px;
  color: var(--white);
  font: 700 13px/1 Manrope, Arial, sans-serif;
}

.s75-text-link span {
  margin-left: 8px;
  color: var(--green);
}

.s75-hero-model {
  position: absolute;
  right: 4vw;
  bottom: -32px;
  z-index: 1;
  display: flex;
  align-items: baseline;
  color: rgba(255, 255, 255, 0.1);
  font: 800 clamp(150px, 20vw, 320px)/0.75 Manrope, Arial, sans-serif;
  letter-spacing: -0.1em;
}

.s75-hero-model span {
  font-size: 0.43em;
}

.s75-keyfacts {
  position: relative;
  z-index: 3;
  background: var(--navy);
  color: var(--white);
}

.s75-keyfacts .shell {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.s75-keyfacts article {
  padding: 32px 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.s75-keyfacts article:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.s75-keyfacts span,
.s75-keyfacts strong,
.s75-keyfacts small {
  display: block;
}

.s75-keyfacts span {
  color: var(--green);
  font: 700 10px/1 Manrope, Arial, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.s75-keyfacts strong {
  margin-top: 9px;
  font: 700 29px/1 Manrope, Arial, sans-serif;
}

.s75-keyfacts small {
  margin-top: 7px;
  color: #aebfca;
  font-size: 11px;
}

.s75-offer-bar {
  padding: 25px 0;
  background: var(--green);
}

.s75-offer-inner {
  display: flex;
  justify-content: space-between;
  gap: 45px;
  align-items: center;
}

.s75-offer-inner span,
.s75-offer-inner strong,
.s75-offer-inner small {
  display: block;
}

.series-offer :is(span,strong,small),
.s75-offer-bar :is(span,strong,small) { color:var(--white); }

.s75-offer-inner > div:first-child > span {
  color: var(--green-dark);
  font: 700 10px/1 Manrope, Arial, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.s75-offer-inner strong {
  margin-top: 6px;
  color: var(--navy);
  font: 800 25px/1.1 Manrope, Arial, sans-serif;
}

.s75-offer-inner small {
  margin-top: 5px;
  color: #25483b;
  font-size: 10px;
}

.s75-offer-actions {
  display: flex;
  gap: 12px;
}

.s75-offer-actions .button-primary {
  background: var(--navy);
  color: var(--white);
}

.s75-intro-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: center;
}

.s75-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 20px;
  margin-top: 28px;
}

.s75-checks span {
  position: relative;
  padding-left: 22px;
  color: var(--navy);
  font: 700 13px/1.4 Manrope, Arial, sans-serif;
}

.s75-checks span::before {
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--green);
  content: "";
  clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
}

.s75-footnote {
  display: block;
  margin-top: 20px;
  color: var(--muted);
  font-size: 10px;
}

.s75-versions {
  background: var(--cream);
}

.s75-version-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 55px;
}

.s75-version-grid article {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
}

.s75-version-image {
  position: relative;
  min-height: 430px;
  background: var(--white);
}

.s75-version-image > span {
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 20px;
  padding: 10px 16px;
  background: var(--green);
  color: var(--navy);
  font: 800 10px/1 Manrope, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.s75-version-image img {
  width: 100%;
  height: 100%;
  padding: 24px 10px 10px;
  object-fit: contain;
}

.s75-version-rops .s75-version-image img {
  padding: 32px 16px 16px;
  object-fit: contain;
}

.s75-version-grid article > div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 35px;
}

.s75-version-grid h3 {
  margin: 0 0 14px;
  color: var(--navy);
  font: 400 31px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.s75-version-grid p {
  color: var(--muted);
  font-size: 13px;
}

.s75-version-grid ul {
  padding: 0;
  margin: 12px 0 24px;
  list-style: none;
}

.s75-version-grid li {
  padding: 7px 0;
  color: var(--navy);
  font: 700 12px/1.3 Manrope, Arial, sans-serif;
  border-bottom: 1px solid var(--line);
}

.s75-version-grid .text-link {
  margin-top: auto;
}

.s75-product-stage {
  position: relative;
  min-height: 570px;
  overflow: hidden;
  background: var(--cream);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 58px), calc(100% - 58px) 100%, 0 100%);
}

.s75-product-stage::before {
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: var(--green);
  content: "";
}

.s75-product-stage img {
  width: 100%;
  height: 570px;
  object-fit: cover;
}

.s75-stage-label {
  position: absolute;
  z-index: 2;
  top: 28px;
  left: 30px;
  padding: 10px 16px;
  background: var(--navy);
  color: var(--green);
  font: 700 11px/1 Manrope, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.s75-work-section {
  position: relative;
  overflow: hidden;
  padding: 64px 0 70px;
  background: var(--navy);
  color: var(--white);
}

.s75-work-section .section-heading {
  margin-bottom: 0;
}

.s75-work-section::before {
  position: absolute;
  right: -30px;
  bottom: -58px;
  color: rgba(255, 255, 255, 0.035);
  content: attr(data-model-mark);
  font: 800 clamp(180px, 25vw, 390px)/0.8 Manrope, Arial, sans-serif;
  letter-spacing: -0.1em;
  pointer-events: none;
}

.s75-work-section .shell {
  position: relative;
  z-index: 1;
}

.s75-work-section .section-heading h2 {
  color: var(--white);
  font-size: clamp(34px, 3.5vw, 48px);
}

.s75-work-section .section-heading > p {
  color: #bdcbd5;
}

.s75-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
  background: none;
}

.s75-work-grid article {
  position: relative;
  min-height: 235px;
  padding: 34px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
  transition: background 0.25s, transform 0.25s;
}

.s75-work-grid article::before {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--green);
  content: "";
}

.s75-work-grid article:hover {
  background: rgba(255, 255, 255, 0.085);
  transform: translateY(-5px);
}

.s75-work-grid span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  background: var(--green);
  color: var(--navy);
  font: 800 12px/1 Manrope, Arial, sans-serif;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}

.s75-work-grid h3 {
  margin: 28px 0 12px;
  font: 400 28px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.s75-work-grid p {
  margin: 0;
  color: #bdcbd5;
  font-size: 14px;
}

.s75-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.s75-feature-grid > * {
  height: 520px;
  min-height: 0;
}

.s75-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 3.5vw, 48px);
  background: var(--cream);
}

.s75-feature-grid > .s75-feature-copy:last-child {
  background: var(--navy);
  color: var(--white);
}

.s75-feature-grid > .s75-feature-copy:last-child h2 {
  color: var(--white);
}

.s75-feature-grid > .s75-feature-copy:last-child > p:not(.eyebrow) {
  color: #c5d1da;
}

.s75-feature-grid > .s75-feature-copy:last-child li {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border-left-color: var(--green);
}

.s75-feature-copy h2 {
  margin: 0 0 17px;
  color: var(--navy);
  font: 400 clamp(39px, 3.76vw, 52px)/1.04 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.s75-feature-copy > p:not(.eyebrow) {
  color: var(--muted);
}

.s75-feature-copy ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0;
  margin: 20px 0 0;
  list-style: none;
}

.s75-feature-copy li {
  padding: 10px 12px;
  background: var(--white);
  color: var(--navy);
  font: 700 12px/1.3 Manrope, Arial, sans-serif;
  border-left: 4px solid var(--green);
}

.s75-feature-image {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.s75-feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s75-feature-grid .s75-feature-image:nth-child(2) img {
  object-position: center 66%;
}

.s75-feature-grid .s75-feature-image:nth-child(3) img {
  object-position: center 72%;
}

.s75-feature-image figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 14px 24px 14px 40px;
  background: var(--green);
  color: var(--navy);
  font: 700 11px/1.2 Manrope, Arial, sans-serif;
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
}

.s75-loader {
  overflow: hidden;
  padding: 85px 0;
  background: var(--navy);
  color: var(--white);
}

.s75-loader-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 75px;
  align-items: center;
}

.s75-loader-visual {
  position: relative;
  min-height: 480px;
}

.s75-loader-visual img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 480px;
  object-fit: contain;
  filter: drop-shadow(0 24px 22px rgba(0, 0, 0, 0.3));
}

.s75-loader-word {
  position: absolute;
  top: 50%;
  left: 0;
  color: rgba(255, 255, 255, 0.055);
  font: 800 clamp(80px, 10vw, 145px)/1 Manrope, Arial, sans-serif;
  letter-spacing: -0.08em;
  transform: translateY(-50%);
}

.s75-loader .content-copy h2 {
  color: var(--white);
}

.s75-loader .content-copy > p:not(.eyebrow) {
  color: #c5d1da;
}

.s75-loader-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 25px 0 30px;
}

.s75-loader-points span {
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font: 700 11px/1.2 Manrope, Arial, sans-serif;
  border-left: 4px solid var(--green);
}

.s75-command {
  background: var(--cream);
}

.s75-command-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 80px;
  align-items: center;
}

.s75-command-gallery {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
}

.s75-command-gallery img {
  width: 100%;
  height: 470px;
  object-fit: cover;
}

.s75-transmission-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}

.s75-transmission-choice div {
  padding: 22px;
  background: var(--navy);
  color: var(--white);
  border-top: 5px solid var(--green);
}

.s75-transmission-choice strong,
.s75-transmission-choice span {
  display: block;
}

.s75-transmission-choice strong {
  font: 700 22px/1 Manrope, Arial, sans-serif;
}

.s75-transmission-choice span {
  margin-top: 8px;
  color: #bdcbd5;
  font-size: 11px;
}

.s75-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 55px;
}

.s75-spec-grid article {
  padding: 32px;
  background: var(--cream);
  border-top: 5px solid var(--green);
}

.s75-spec-grid h3 {
  margin: 0 0 22px;
  color: var(--navy);
  font: 400 25px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.s75-spec-grid dl,
.s75-spec-grid dd {
  margin: 0;
}

.s75-spec-grid dl > div {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.s75-spec-grid dt {
  color: var(--muted);
}

.s75-spec-grid dd {
  color: var(--navy);
  font-weight: 700;
  text-align: right;
}

.s75-downloads {
  display: grid;
  grid-template-columns: 0.8fr repeat(3, 1fr);
  gap: 12px;
  align-items: end;
  margin-top: 55px;
  padding-top: 45px;
  border-top: 1px solid var(--line);
}

.s75-downloads h3 {
  margin: 0;
  color: var(--navy);
  font: 400 26px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}

.s75-lead-section {
  background: var(--cream);
}

.s75-lead-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 90px;
  align-items: start;
}

.s75-lead-promise {
  display: grid;
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--line);
}

.s75-lead-promise strong,
.s75-lead-promise span {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.s75-lead-promise strong {
  color: var(--green-dark);
  font: 700 11px/1 Manrope, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.s75-lead-promise span {
  color: var(--navy);
  font: 700 13px/1.3 Manrope, Arial, sans-serif;
}

.s75-model-form {
  padding: 38px;
  background: var(--white);
  border-top: 6px solid var(--green);
}

.s75-final-cta {
  padding: 85px 0;
  background: var(--navy);
  color: var(--white);
}

.s75-final-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 65px;
  align-items: center;
}

.s75-final-inner h2 {
  max-width: 800px;
  margin: 0 0 14px;
  font: 400 clamp(41px, 4.56vw, 64px)/1.04 "Bebas Neue", Impact, Arial, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.s75-final-inner p:last-child {
  margin: 0;
  color: #bdcbd5;
}

.s75-final-actions {
  margin-top: 0;
}

@media (max-width: 1000px) {
  .s75-hero {
    min-height: 650px;
  }

  .s75-keyfacts .shell,
  .s75-work-grid,
  .s75-spec-grid {
    grid-template-columns: 1fr 1fr;
  }

  .s75-intro-grid,
  .s75-loader-grid,
  .s75-lead-grid,
  .s75-command-grid,
  .s75-final-inner {
    grid-template-columns: 1fr;
  }

  .s75-feature-grid > * {
    height: 450px;
    min-height: 0;
  }

  .s75-version-grid,
  .s75-downloads {
    grid-template-columns: 1fr;
  }

  .s75-version-grid article {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

@media (max-width: 600px) {
  .s75-hero {
    min-height: 650px;
    background-position: 63% center;
  }

  .s75-hero-shade {
    background: linear-gradient(0deg, rgba(24, 24, 24, 0.98) 0%, rgba(24, 24, 24, 0.8) 52%, rgba(24, 24, 24, 0.18) 100%);
  }

  .s75-hero-content {
    padding-bottom: 58px;
  }

  .s75-hero h1 {
    font-size: 53px;
  }

  .s75-hero-lead {
    font-size: 16px;
  }

  .s75-hero-actions,
  .s75-offer-actions,
  .s75-final-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .s75-text-link {
    text-align: center;
  }

  .s75-hero-model {
    display: none;
  }

  .s75-keyfacts .shell,
  .s75-work-grid,
  .s75-feature-grid,
  .s75-spec-grid {
    grid-template-columns: 1fr;
  }

  .s75-offer-inner {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
  }

  .s75-version-grid article {
    grid-template-columns: 1fr;
  }

  .s75-version-image {
    min-height: 350px;
  }

  .s75-loader-visual,
  .s75-loader-visual img {
    min-height: 0;
    height: 330px;
  }

  .s75-loader-points {
    grid-template-columns: 1fr;
  }

  .s75-model-form {
    padding: 26px 20px;
  }

  .s75-keyfacts article,
  .s75-keyfacts article:first-child {
    padding: 24px 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }

  .s75-checks,
  .s75-feature-copy ul,
  .s75-transmission-choice {
    grid-template-columns: 1fr;
  }

  .s75-product-stage,
  .s75-product-stage img {
    min-height: 430px;
    height: 430px;
  }

  .s75-feature-grid > * {
    height: auto;
    min-height: 0;
  }

  .s75-feature-image {
    height: 400px;
    min-height: 430px;
  }

  .s75-feature-copy {
    padding: 45px 25px;
  }

  .s75-command-gallery {
    grid-template-columns: 1fr;
  }

  .s75-command-gallery img {
    height: 300px;
  }

  .s75-spec-grid dl > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .s75-spec-grid dd {
    text-align: left;
  }
}

/* Eén vaste herohoogte voor alle inhoudelijke vervolgpagina's. */
/* Configurator: licht werkvlak, navy voorbehouden aan het prijspaneel. */
.model-configurator { padding: 105px 0; color: var(--ink); background: var(--cream); }
.config-head { display: grid; grid-template-columns: 1fr .7fr; gap: 70px; align-items: end; margin-bottom: 54px; }
.config-head h2 { margin: 8px 0 0; color: var(--navy); font: 400 clamp(52px, 5.7vw, 87px)/.98 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}
.config-head > p { max-width: 580px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.7; }
.config-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(350px,.65fr); gap: 34px; align-items: start; }
.config-form { display: grid; gap: 16px; }
.config-form fieldset { min-width: 0; margin: 0; padding: 28px 26px; border: 1px solid var(--line); background: var(--white); box-shadow: var(--card-shadow); }
.config-form legend { padding: 0 14px 0 0; color: var(--navy); font: 700 22px/1.2 Manrope,sans-serif; }
.config-form legend span { margin-right: 12px; color: var(--green-dark); font-size: 13px; }
/* Past zich aan het aantal uitvoeringen aan: de S16 heeft er twee, de S50 zes. */
.config-segment { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 10px; margin-bottom: 24px; }
.config-segment input,.config-option input,.config-check input { position: absolute; opacity: 0; pointer-events: none; }
.config-segment label > span { min-height: 76px; padding: 17px 18px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); cursor: pointer; transition: .2s; }
.config-segment label:hover > span { border-color: var(--green-dark); }
.config-segment input:checked + span { color: var(--navy); border-color: var(--green); background: var(--green); }
.config-segment small { margin-top: 4px; color: var(--muted); }
.config-segment input:checked + span small { color: inherit; opacity: .78; }
.config-field { display: grid; gap: 9px; }
.config-field > label { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
/* De rechterruimte van 45px was al voor een pijl gereserveerd. */
.config-field select {
  width: 100%; min-height: 54px; padding: 0 45px 0 16px;
  border: 1px solid var(--line); border-radius: 0; color: var(--ink); font: inherit;
  background: var(--white) var(--select-arrow) no-repeat right 17px center;
}
.config-options,.config-check-grid { display: grid; gap: 9px; }
.config-option,.config-check { position: relative; padding: 15px 16px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; border: 1px solid var(--line); cursor: pointer; transition: .2s; }
.config-option:hover,.config-check:hover { border-color: var(--green-dark); }
.config-option:has(input:checked),.config-check:has(input:checked) { border-color: var(--green-dark); background: rgba(215,25,32,.09); }
.config-segment label:has(input:focus-visible) > span,
.config-option:has(input:focus-visible),.config-check:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }
.config-option span,.config-check span { display: flex; flex-direction: column; gap: 3px; }
.config-option strong,.config-check strong { color: var(--navy); font-size: 14px; }
.config-option small,.config-check small { color: var(--muted); line-height: 1.45; }
.config-option b,.config-check b { color: var(--navy); font-size: 13px; white-space: nowrap; }

/* Keuzes met miniatuur: extra kolom vóór de tekst. */
.config-option.has-thumb,.config-check.has-thumb { grid-template-columns: 62px 1fr auto; gap: 14px; }
.config-thumb {
  width: 62px; height: 48px; object-fit: contain; padding: 3px;
  border: 1px solid var(--line); background: var(--cream);
}
:is(.config-option,.config-check):has(input:checked) .config-thumb { border-color: var(--green-dark); background: var(--white); }
:is(.config-option,.config-check).is-disabled .config-thumb { opacity: .4; }

/* Uitvoeringsstap bij machines zonder L/S/H-varianten. */
.config-segment.is-single { display: block; }
.config-single {
  margin: 0; padding: 17px 18px; border: 1px solid var(--line); border-left: 4px solid var(--green);
  background: var(--cream); display: flex; flex-direction: column; gap: 4px;
}
.config-single strong { color: var(--navy); font-size: 15px; }
.config-single small { color: var(--muted); }

.config-dependent { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* Toepassingsfoto's op de modelpagina. */
.toepassing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.toepassing-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border: 1px solid var(--line); }

/* Klantverhalen. */
.verhalen-sectie { background: var(--cream); }
.verhaal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.verhaal { margin: 0; background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; }
.verhaal img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.verhaal figcaption { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.verhaal h3 { margin: 0; color: var(--navy); font: 400 24px/1.05 "Bebas Neue", Impact, sans-serif; text-transform: uppercase; }
.verhaal blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--green); color: var(--ink); font-size: 15px; line-height: 1.55; flex: 1; }
.verhaal-bron { margin: 0; color: var(--muted); font: 800 10px/1.4 Manrope, Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; }

/* Standaarduitrusting op de modelpagina. */
.thaler-features .feature-grid {
  /* margin:0 zou het centreren van .shell wegdrukken */
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.thaler-features .feature-grid li {
  padding: 18px 20px 18px 46px; position: relative; background: var(--white);
  color: var(--navy); font-size: 15px; line-height: 1.4;
}
.thaler-features .feature-grid li::before {
  content: ""; position: absolute; left: 20px; top: 21px; width: 14px; height: 9px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
@media (max-width: 600px) { .thaler-features .feature-grid li { padding: 15px 16px 15px 40px; font-size: 14px; } }
.config-dependent > p,.config-rule { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.config-quantity { margin-top: 16px; }
/* Wint van de display-waarde van .config-check en .config-field. */
.config-form [hidden] { display: none; }
.config-dependent[hidden],.config-rule[hidden] { display: none; }
.config-check.is-disabled { opacity: .45; cursor: not-allowed; }
.config-summary { position: sticky; top: 112px; color: var(--white); background: var(--navy); box-shadow: var(--shadow); }
.config-product { position: relative; min-height: 310px; display: grid; place-items: center; overflow: hidden; background: #edf1f4; }
.config-product > span { position:absolute; z-index:2; top:20px; left:20px; padding:8px 12px; color:var(--navy); background:var(--green); font:800 11px/1 Manrope,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.config-product img { position:relative; z-index:1; width:100%; height:300px; object-fit:contain; filter:drop-shadow(0 18px 18px rgba(41,41,41,.18)); }
.config-summary-body { padding: 30px; }
.config-summary-body .eyebrow { color: var(--blue); }
.config-summary-body h3 { margin: 5px 0 22px; color:var(--white); font: 400 32px/1.1 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}
/* De samenvatting scrollt bij lange configuraties. De systeemscrollbalk legde
   zich over de prijzen heen; deze is smal, meeschuivend en houdt ruimte vrij. */
.config-summary-body ul {
  max-height: 290px; margin: 0; padding: 0 14px 0 0; list-style: none;
  overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid rgba(255,255,255,.16);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.32) transparent;
}
.config-summary-body ul::-webkit-scrollbar { width: 6px; }
.config-summary-body ul::-webkit-scrollbar-track { background: rgba(255,255,255,.07); }
.config-summary-body ul::-webkit-scrollbar-thumb { background: rgba(255,255,255,.32); border-radius: 3px; }
.config-summary-body ul::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.5); }
/* Onderrand vervaagt zodat zichtbaar is dat er meer onder staat. */
.config-summary-body ul[data-scrollable] { mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
.config-summary-body li { padding:10px 0; display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid rgba(255,255,255,.11); font-size:12px; }
.config-summary-body li span { color:rgba(255,255,255,.66); }
.config-summary-body li strong { color:var(--white); text-align:right; white-space:nowrap; }
.config-total { padding:22px 0; display:flex; flex-direction:column; }
.config-total > span { color:rgba(255,255,255,.62); font-size:12px; text-transform:uppercase; letter-spacing:.07em; }
.config-total > strong { margin:5px 0 9px; color:var(--white); font:800 36px/1 Manrope,sans-serif; }
.config-total small { color:rgba(255,255,255,.55); font-size:11px; line-height:1.5; }
.config-summary-body .button { width:100%; border:0; }
.config-summary-body .button-primary:hover { background:var(--white); border-color:transparent; color:var(--navy); }
/* Korte bevestiging dat de configuratie in het bericht is gezet. */
.field textarea.is-configured { border-color:var(--green-dark); box-shadow:0 0 0 3px rgba(215,25,32,.28); }
.field textarea { transition:box-shadow .3s, border-color .3s; }
@media (prefers-reduced-motion: reduce) { .field textarea { transition:none; } }

@media (max-width: 1000px) {
  .config-head,.config-layout { grid-template-columns:1fr; }
  .config-summary { position:relative; top:auto; }
}

@media (max-width: 600px) {
  .model-configurator { padding:70px 0; }
  .config-head { gap:20px; margin-bottom:35px; }
  .config-form fieldset { padding:25px 18px; }
  .config-segment { grid-template-columns:1fr; }
  .config-option,.config-check { align-items:start; }
  .config-option.has-thumb,.config-check.has-thumb { grid-template-columns:48px 1fr auto; gap:12px; }
  .config-thumb { width:48px; height:40px; }
  .config-product { min-height:260px; }
  .config-product img { height:250px; }
  .config-summary-body { padding:25px 20px; }
}

/* Iedere kop van een binnenpagina is even hoog, en niet zomaar minstens even
   hoog: met `min-height` groeide de kop mee met de titel, en dan stond de kop
   van 4275T op 678 pixels terwijl de rest op 650 bleef. Een vaste hoogte legt
   dat vast; de titel eronder is zo gezet dat ook de langste erin past. De
   homepage doet hier niet aan mee, die is met opzet schermvullend. */
:is(.page-hero, .photo-hero, .dealer-page-hero, .information-hero, .series-hero, .s75-hero, .about-hero) {
  height: 650px;
  min-height: 650px;
}

@media (max-width: 1000px) {
  :is(.page-hero, .photo-hero, .dealer-page-hero, .information-hero, .series-hero, .s75-hero, .about-hero) {
    height: 610px;
    min-height: 610px;
  }
}

.acties-hero { background-image: url("assets/heroes-thaler/acties.webp"); background-position: center 50%; }
.vergelijken-hero { background-image: url("assets/heroes-thaler/vergelijken.webp"); background-position: center 48%; }
.attachments-hero {
  min-height: 650px;
  background: linear-gradient(90deg, rgba(24,24,24,.94), rgba(24,24,24,.35)),
              url("assets/heroes-thaler/aanbouwdelen.webp") center calc(50% + var(--parallax-y, 0px)) / cover no-repeat;
}
@media (max-width: 1000px) { .attachments-hero { min-height: 610px; } }

/* ---------- Keuzehulp ---------- */
/* Deze kop was lager dan de rest — 430 pixels met een kleinere titel — zodat de
   eerste vraag meteen in beeld kwam. Dat is losgelaten toen alle koppen even
   hoog werden en de titel op elke pagina op dezelfde hoogte kwam te staan: de
   uitzondering zette de titel hier 67 pixels hoger dan elders, en dat viel op
   zodra je van pagina wisselde. */
.keuzehulp-hero { background-image: url("assets/heroes-thaler/keuzehulp.webp"); background-position: center 52%; }
/* `p:not(.eyebrow)` en niet `p`: zonder die uitzondering kreeg het bovenkopje
   hier 18 pixels waar het op elke andere pagina 12 is, en stond de titel acht
   pixels lager dan elders. */
.keuzehulp-hero p:not(.eyebrow) { max-width: 620px; margin-top: 20px; color: rgba(255,255,255,.78); font-size: 18px; }
/* Iedere stap komt op dit anker uit; de marge houdt de vraag net onder de
   zwevende kopbalk. Die is 120 pixels hoog, en 154 zodra de meldingsbalk voor
   /de/ en /fr/ erbij komt — vandaar de tweede regel. Krapper dan dit kan niet
   en ruimer duwt de antwoorden uit beeld. */
#keuzehulp { scroll-margin-top: 136px; }
body.heeft-marktmelding #keuzehulp { scroll-margin-top: 170px; }
.keuzehulp-section { padding: 62px 0 96px; background: var(--cream); }
.kh-layout { display: grid; grid-template-columns: minmax(300px,.62fr) minmax(0,1.38fr); gap: 40px; align-items: start; }

.kh-form { position: sticky; top: 112px; display: grid; gap: 18px; padding: 28px 26px; border: 1px solid var(--line); background: var(--white); box-shadow: var(--card-shadow); }
.kh-form-head h2 { margin: 6px 0 10px; color: var(--navy); font: 400 34px/1.1 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}
.kh-form-head p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.kh-group { min-width: 0; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line); padding-top: 18px; }
.kh-group legend { padding: 0; color: var(--navy); font: 700 15px/1.3 Manrope, sans-serif; }
.kh-hint { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.kh-chips { margin-top: 12px; display: grid; gap: 8px; }
.kh-chip { position: relative; cursor: pointer; }
.kh-chip input { position: absolute; opacity: 0; pointer-events: none; }
.kh-chip > span { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border: 1px solid var(--line); color: var(--navy); font-size: 14px; transition: .2s; }
.kh-chip small { color: var(--muted); font-size: 12px; }
.kh-chip:hover > span { border-color: var(--green-dark); }
.kh-chip.is-active > span { border-color: var(--green-dark); background: rgba(215,25,32,.09); font-weight: 700; }
.kh-chip:has(input:focus-visible) > span { outline: 2px solid var(--navy); outline-offset: 2px; }
.kh-reset { justify-self: start; padding: 0; border: 0; background: none; color: var(--muted); font: 700 13px/1 Manrope, sans-serif; text-decoration: underline; cursor: pointer; }
.kh-reset:hover { color: var(--navy); }

.kh-count { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.kh-results { display: grid; gap: 16px; }
.kh-card { display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,.58fr); border: 1px solid var(--line); background: var(--white); box-shadow: var(--card-shadow); overflow: hidden; }
.kh-card-body { padding: 26px 28px; }
.kh-card-body h3 { margin: 4px 0 6px; color: var(--navy); font: 400 28px/1.1 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}
.kh-tagline { margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.kh-reasons { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 5px; }
.kh-reasons li { position: relative; padding-left: 20px; color: var(--navy); font-size: 13px; }
.kh-reasons li::before { content: "✓"; position: absolute; left: 0; color: var(--green-dark); font-weight: 700; }
/* Een voorbehoud is geen pluspunt: geen vinkje, wel zichtbaar. */
.kh-reasons li.is-caveat { color: var(--muted); }
.kh-reasons li.is-caveat::before { content: "!"; color: #8a6d2f; }
.kh-specs { margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.kh-specs dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.kh-specs dd { margin: 3px 0 0; color: var(--navy); font: 700 14px/1.3 Manrope, sans-serif; }
.kh-price { margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.kh-price span { width: 100%; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.kh-price strong { color: var(--navy); font: 800 24px/1 Manrope, sans-serif; }
.kh-price small { color: var(--muted); font-size: 12px; }
.kh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.kh-empty { padding: 40px; border: 1px solid var(--line); background: var(--white); }
.kh-empty h3 { margin: 0 0 10px; color: var(--navy); font: 400 25px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}
.kh-empty p { margin: 0 0 20px; max-width: 60ch; color: var(--muted); line-height: 1.65; }

.content-section.keuzehulp-help { position: relative; overflow: hidden; background: var(--cream); color: var(--ink); }
.content-section.keuzehulp-help::before { position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: var(--green); content: ""; }
.keuzehulp-help-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(360px,.95fr); gap: clamp(55px,8vw,110px); align-items: center; }
.keuzehulp-help-copy h2 { max-width: 680px; margin: 10px 0 20px; color: var(--navy); font: 400 clamp(43px, 5.24vw, 71px)/1.04 "Bebas Neue", Impact, Arial, sans-serif; letter-spacing: 0.005em;
  text-transform: uppercase;
}
.keuzehulp-help-copy > p:not(.eyebrow) { max-width: 670px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.keuzehulp-help-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.keuzehulp-help-points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.keuzehulp-help-points li { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 22px 24px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.keuzehulp-help-points li > span { padding-top: 3px; color: var(--green); font: 800 11px/1 Manrope,Arial,sans-serif; letter-spacing: .08em; }
.keuzehulp-help-points strong,.keuzehulp-help-points small { display: block; }
.keuzehulp-help-points strong { color: var(--navy); font: 700 16px/1.3 Manrope,Arial,sans-serif; }
.keuzehulp-help-points small { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.55; }

@media (max-width: 1000px) {
  .kh-layout { grid-template-columns: 1fr; }
  .kh-form { position: relative; top: auto; }
  .keuzehulp-help-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 700px) {
  .keuzehulp-section { padding: 70px 0; }
  .kh-card { grid-template-columns: 1fr; }
  .kh-card-body { padding: 22px 20px; }
  .kh-form { padding: 24px 20px; }
  .keuzehulp-help-actions { align-items: stretch; flex-direction: column; }
  .keuzehulp-help-actions .button { width: 100%; }
}

.hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 600px) { .hero-actions .button { width: 100%; } }

/* ---------- Demonstratiepad ---------- */
.demo-hero { background-image: url("assets/heroes-thaler/demonstratie.webp"); background-position: center 50%; }
.demo-hero p { max-width: 640px; color: rgba(255,255,255,.8); }
.demo-intent-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 18px; }
.demo-intent-grid article { padding: 28px 26px; border: 1px solid var(--line); background: var(--white); box-shadow: var(--card-shadow); }
.demo-intent-grid article.is-current { border-color: var(--green-dark); background: rgba(215,25,32,.08); }
.demo-intent-grid span { display: block; margin-bottom: 12px; color: var(--green-dark); font: 800 12px/1 Manrope, sans-serif; letter-spacing: .1em; }
.demo-intent-grid h3 { margin: 0 0 10px; color: var(--navy); font: 400 24px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}
.demo-intent-grid p { margin: 0 0 16px; color: var(--muted); font-size: 15px; line-height: 1.6; }

.demo-value { background: var(--cream); }
.demo-value-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 60px; align-items: start; }
.demo-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.demo-checklist li { padding: 20px 24px; border: 1px solid var(--line); background: var(--white); box-shadow: var(--card-shadow); }
.demo-checklist strong { display: block; margin-bottom: 4px; color: var(--navy); font: 700 16px/1.3 Manrope, sans-serif; }
.demo-checklist span { color: var(--muted); font-size: 14px; line-height: 1.6; }

.demo-form-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 60px; align-items: start; }
.demo-config-note { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.field-optional { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Zichtbaar onafgemaakt: mag niet ongemerkt live gaan. */
.demo-followup { margin-top: 26px; padding: 16px 20px; border: 2px dashed var(--gold); background: var(--notice-bg); }
.demo-followup-flag { margin: 0 0 6px; color: #8a6d2f; font: 800 11px/1 Manrope, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.demo-followup p:last-child { margin: 0; color: #6b5525; font-size: 13px; line-height: 1.6; }

/* Foutstatus op formuliervelden: niet alleen kleur, ook een rand en een teken. */
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179,38,30,.14); }
.field.has-error > label::after { content: " (nog invullen)"; color: #b3261e; font-weight: 400; }

.config-demo { margin-top: 10px; }
.kh-jump { display: none; }

@media (max-width: 900px) {
  .demo-value-grid, .demo-form-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 1000px) {
  /* Op mobiel staan de resultaten onder het formulier: geef een expliciete sprong
     in plaats van ongevraagd te scrollen na elk antwoord. */
  .kh-jump { display: inline-flex; }
}

/* ---------- Conditionele keuzehulp-wizard ---------- */
.kh-wizard { max-width: 920px; }
.kh-progress { margin-bottom: 22px; display: grid; grid-template-columns: auto minmax(140px,1fr) auto; gap: 16px; align-items: center; color: var(--navy); font: 700 13px/1 Manrope,sans-serif; }
.kh-progress > div { height: 6px; overflow: hidden; background: #dfe5df; }
.kh-progress i { height: 100%; display: block; background: var(--green); transition: width .25s ease; }
.kh-progress small { color: var(--muted); font-weight: 600; }
.kh-wizard-card { padding: clamp(26px,5vw,56px); border: 1px solid var(--line); background: var(--white); box-shadow: 0 18px 45px rgba(41,41,41,.07); }
.kh-wizard-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.kh-wizard-step legend { width: 100%; padding: 0; color: var(--navy); font: 700 clamp(30px,4vw,46px)/1.08 Manrope,sans-serif; }
.kh-wizard-step legend > span { margin-bottom: 12px; display: block; color: var(--green-dark); font: 800 12px/1 Manrope,sans-serif; text-transform: uppercase; letter-spacing: .11em; }
.kh-wizard-step > p { max-width: 670px; margin: 16px 0 28px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.kh-step-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 1fr; gap: 12px; }
.kh-step-option { position: relative; display: flex; height: 100%; cursor: pointer; }
.kh-step-option input { position: absolute; opacity: 0; pointer-events: none; }
.kh-step-option > span { width: 100%; min-height: 105px; padding: 20px; display: flex; flex: 1; flex-direction: column; border: 1px solid var(--line); transition: border-color .2s,background .2s,transform .2s; }
.kh-step-option strong { color: var(--navy); font: 700 16px/1.3 Manrope,sans-serif; }
.kh-step-option small { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.kh-step-option em { margin-top: auto; padding-top: 14px; color: var(--green-dark); font: 700 11px/1 Manrope,sans-serif; text-transform: uppercase; letter-spacing: .07em; }
.kh-step-option:hover > span { border-color: var(--green-dark); transform: translateY(-2px); }
.kh-step-option.is-active > span { border-color: var(--green-dark); background: rgba(215,25,32,.1); box-shadow: inset 4px 0 0 var(--green); }
.kh-step-option:has(input:focus-visible) > span { outline: 3px solid rgba(41,41,41,.25); outline-offset: 3px; }
.kh-wizard-actions { margin-top: 34px; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 14px; border-top: 1px solid var(--line); }
.kh-wizard-actions-single { justify-content: flex-start; }
.kh-wizard-actions [data-kh-next]:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.kh-wizard-assurance { margin: 16px 0 0; color: var(--muted); font-size: 13px; text-align: center; }

/* Gegeven antwoorden blijven in beeld en zijn stuk voor stuk aanklikbaar, zodat
   niet alleen het laatste antwoord te wijzigen is. */
.kh-answers { margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kh-answers-label { color: var(--muted); font: 800 11px/1 Manrope,sans-serif; text-transform: uppercase; letter-spacing: .09em; }
.kh-answer {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 13px; cursor: pointer;
  border: 1px solid var(--line); background: var(--white); text-align: left;
  font: inherit; transition: border-color .2s, box-shadow .2s;
}
.kh-answer:hover { border-color: var(--green-dark); box-shadow: var(--card-shadow); }
.kh-answer:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.kh-answer span { color: var(--muted); font: 800 10px/1 Manrope,sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.kh-answer strong { color: var(--navy); font: 700 13px/1.2 Manrope,sans-serif; }
.kh-answer b { color: var(--green-dark); font: 700 11px/1 Manrope,sans-serif; text-decoration: underline; }

.kh-result-page { max-width: 1100px; }
.kh-group-label { margin: 4px 0 12px; color: var(--navy); font: 800 12px/1 Manrope,sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.kh-more { margin-top: 20px; padding: 22px 24px; display: grid; justify-items: start; gap: 10px; border: 1px dashed var(--line); background: var(--white); }
.kh-more p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.kh-results-rest { margin-top: 16px; }
.kh-results-rest[hidden] { display: none; }
.kh-results-rest .kh-card { background: #fbfcfb; }
/* De kop van een nieuwe stap krijgt focus voor schermlezers. Voor wie klikt is
   een focusring daar verwarrend; voor wie tabt juist niet. */
[data-kh-focus]:focus:not(:focus-visible) { outline: none; }
.kh-result-head { margin-bottom: 26px; display: grid; grid-template-columns: 1fr .7fr; gap: 50px; align-items: end; }
.kh-result-head h2 { margin: 8px 0 0; color: var(--navy); font: 400 clamp(39px, 5.13vw, 66px)/1.04 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}
.kh-result-head > p { margin: 0; color: var(--muted); line-height: 1.65; }
.kh-result-toolbar { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kh-card-visual { position: relative; min-height: 240px; display: grid; place-items: center; background: #edf1f4; }
.kh-card-visual > span { position: absolute; z-index: 2; top: 16px; left: 16px; padding: 8px 11px; color: var(--navy); background: var(--green); font: 800 10px/1 Manrope,sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.kh-card-visual img { width: 100%; height: 100%; min-height: 240px; padding: 18px; object-fit: contain; }
.kh-card.is-best-match { border-color: var(--green-dark); box-shadow: 0 15px 35px rgba(41,41,41,.08); }
.kh-options-explained { margin-top: 34px; padding: clamp(26px,4vw,42px); border: 1px solid var(--line); background: var(--white); }
.kh-options-explained h3 { margin: 7px 0 10px; color: var(--navy); font: 400 clamp(28px, 3.42vw, 41px)/1.1 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}
.kh-options-explained > div:first-child > p:last-child { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.65; }
.kh-option-explain-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.kh-option-explain-grid article { padding: 22px; background: var(--cream); }
.kh-option-explain-grid strong { color: var(--navy); font: 700 16px/1.3 Manrope,sans-serif; }
.kh-option-explain-grid p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

@media (max-width: 700px) {
  .keuzehulp-hero { min-height: 0; padding: 64px 0 48px; }
  .keuzehulp-section { padding: 44px 0 70px; }
  .kh-progress { grid-template-columns: 1fr auto; }
  .kh-progress > div { grid-column: 1 / -1; grid-row: 2; }
  .kh-answers { gap: 6px; }
  .kh-answer { width: 100%; flex-wrap: wrap; }
  .kh-step-options { grid-template-columns: 1fr; }
  .kh-step-option > span { min-height: 94px; }
  .kh-wizard-actions { align-items: stretch; flex-direction: column-reverse; }
  .kh-wizard-actions .button { width: 100%; }
  .kh-result-head { grid-template-columns: 1fr; gap: 16px; }
  .kh-result-toolbar { align-items: flex-start; flex-direction: column; }
  .kh-card-visual img { min-height: 210px; }
  .kh-option-explain-grid { grid-template-columns: 1fr; }
}

/* ---------- Modelvergelijker ---------- */

.compare-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 22px; }
.compare-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--navy); font-size: 14px; font-weight: 700; }
.compare-switch input { width: 18px; height: 18px; accent-color: var(--green-dark); }
.compare-hidden-note { margin: 0; color: var(--muted); font-size: 13px; }

.compare-scroll { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 14px; }
.compare-table thead th { border-bottom: 2px solid var(--navy); vertical-align: bottom; }
.compare-table thead th:first-child { border-bottom-color: var(--line); }
.compare-table thead img { width: 100%; max-width: 190px; height: 120px; object-fit: contain; margin-bottom: 10px; background: #edf1f4; padding: 8px; }
.compare-table thead strong { display: block; color: var(--navy); font: 700 19px/1.15 Manrope,sans-serif; }
.compare-table thead span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.4; }
.compare-table tbody th { width: 210px; color: var(--navy); font: 700 13px/1.35 Manrope,sans-serif; }
.compare-table tbody th small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; }
.compare-table tbody td { color: var(--ink); }
.compare-table tr.is-different td { background: rgba(215,25,32,.07); font-weight: 700; color: var(--navy); }
.compare-none { color: var(--muted); font-style: italic; font-weight: 400; }
.compare-drop { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--muted); font: 700 12px/1 Manrope,sans-serif; text-decoration: underline; cursor: pointer; }
.compare-drop:hover { color: #b3261e; }
/* Als wrapper in de cel, niet op de <td> zelf: display:grid op een tabelcel
   haalt hem uit de kolomindeling, waardoor alle knoppen in kolom 1 stapelen. */
.compare-table tfoot td { vertical-align: top; }
.compare-actions { display: grid; gap: 10px; justify-items: start; }
.compare-footnote { margin: 20px 0 0; max-width: 78ch; color: var(--muted); font-size: 12px; line-height: 1.6; }

.compare-empty { padding: 50px 40px; border: 1px solid var(--line); background: var(--white); box-shadow: var(--card-shadow); text-align: center; }
.compare-empty h2 { margin: 0 0 10px; color: var(--navy); font: 400 32px/1.15 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}
.compare-empty p { margin: 0 auto 24px; max-width: 60ch; color: var(--muted); line-height: 1.65; }
.compare-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.compare-empty-hint { margin-top: 20px !important; font-size: 13px; }

.compare-picker-section { background: var(--cream); }
.compare-picker { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 10px; }
.compare-pick { cursor: pointer; }
.compare-pick input { position: absolute; opacity: 0; pointer-events: none; }
.compare-pick > span { display: block; padding: 16px 14px; border: 1px solid var(--line); background: var(--white); box-shadow: var(--card-shadow); text-align: center; transition: .2s; }
.compare-pick img { width: 100%; height: 78px; object-fit: contain; margin-bottom: 8px; }
.compare-pick strong { display: block; color: var(--navy); font: 700 14px/1.2 Manrope,sans-serif; }
.compare-pick small { color: var(--muted); font-size: 12px; }
.compare-pick:hover > span { border-color: var(--green-dark); }
.compare-pick.is-active > span { border-color: var(--green-dark); background: rgba(215,25,32,.1); }
.compare-pick.is-blocked > span { opacity: .4; cursor: not-allowed; }
.compare-pick:has(input:focus-visible) > span { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Selectievakje op de modelkaarten */
.compare-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--navy); font: 700 13px/1 Manrope,sans-serif; }
.compare-toggle input { width: 17px; height: 17px; accent-color: var(--green-dark); }
.compare-toggle.is-blocked { opacity: .45; cursor: not-allowed; }

/* Sticky vergelijkbalk */
.compare-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--navy); color: var(--white); box-shadow: 0 -8px 30px rgba(41,41,41,.28); }
.compare-bar[hidden] { display: none; }
.compare-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 14px 0; }
.compare-bar-count { margin: 0; color: rgba(255,255,255,.7); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.compare-bar-list { display: flex; flex: 1; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.compare-bar-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; background: rgba(255,255,255,.1); font-size: 13px; }
.compare-bar-list img { width: 42px; height: 30px; object-fit: contain; }
.compare-bar-list button { padding: 0 4px; border: 0; background: none; color: rgba(255,255,255,.7); font-size: 17px; line-height: 1; cursor: pointer; }
.compare-bar-list button:hover { color: var(--white); }
.compare-bar-actions { display: flex; align-items: center; gap: 14px; }
.compare-clear { padding: 0; border: 0; background: none; color: rgba(255,255,255,.7); font: 700 13px/1 Manrope,sans-serif; text-decoration: underline; cursor: pointer; }
.compare-bar .is-disabled { pointer-events: none; opacity: .5; }
body:has(.compare-bar:not([hidden])) { padding-bottom: 92px; }


@media (max-width: 700px) {
  .compare-table tbody th { width: 130px; }
  .compare-bar-inner { gap: 10px; padding: 10px 0; }
  .compare-bar-list span { display: none; }
  body:has(.compare-bar:not([hidden])) { padding-bottom: 120px; }
}

/* ---------- Actiepagina ---------- */


.acties-scroll { overflow-x: auto; }
.acties-table { width: 100%; border-collapse: collapse; }
.acties-table th, .acties-table td { padding: 12px 28px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--line); }
.acties-table thead th { color: var(--muted); font: 700 11px/1 Manrope,sans-serif; text-transform: uppercase; letter-spacing: .07em; }
.acties-table tbody th { color: var(--navy); font: 700 14px/1.35 Manrope,sans-serif; }
.acties-table tbody th small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 400; }
.acties-table tbody tr:last-child th, .acties-table tbody tr:last-child td { border-bottom: 0; }
.acties-was s { color: var(--muted); }
.acties-now strong { color: var(--navy); font: 800 17px/1 Manrope,sans-serif; }
.acties-badge { display: inline-block; padding: 4px 9px; background: rgba(215,25,32,.16); color: var(--green-dark); font: 800 12px/1 Manrope,sans-serif; white-space: nowrap; }
.acties-save small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.acties-none { color: var(--muted); font-style: italic; }

.acties-footnote { margin: 26px 0 0; max-width: 80ch; color: var(--muted); font-size: 12px; line-height: 1.6; }

@media (max-width: 800px) {
  .acties-table th, .acties-table td { padding: 11px 20px; }
}

.footer-note { padding-bottom: 22px; }
.footer-note small { color: rgba(255,255,255,.5); font-size: 11px; }

/* ---------- Modelkaart op het overzicht ----------
   De kaart is één blok met drie zones: beeld met kenmerk, specificaties, prijs
   en acties. De hele kaart licht op bij hover, maar alleen de titel en de knop
   zijn klikbaar, zo blijft het vergelijkvinkje bruikbaar. */
.model-tile {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--white);
  transition: border-color .2s, box-shadow .25s, transform .25s;
}
.model-tile:hover { border-color: #cfd7e0; box-shadow: var(--card-shadow-hover); transform: translateY(-3px); }
.model-tile:has(.compare-toggle input:checked) { border-color: var(--green-dark); }

.model-tile-figure { position: relative; padding: 26px 24px 0; }
.model-tile-figure img {
  width: 100%; height: 200px; object-fit: contain;
  filter: drop-shadow(0 12px 10px rgba(24, 24, 24,.16));
}
.model-tile-badge {
  position: absolute; top: 18px; left: 18px;
  padding: 6px 10px; background: var(--navy); color: var(--white);
  font: 800 10px/1 Manrope, sans-serif; text-transform: uppercase; letter-spacing: .08em;
}

.model-tile-title { padding: 20px 24px 0; }
.model-tile-title h3 { margin: 0 0 5px; color: var(--navy); font: 400 26px/1.15 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}
.model-tile-title h3 a { color: inherit; }
.model-tile-title h3 a::after { content: ""; position: absolute; inset: 0; }   /* hele kaart klikbaar */
.model-tile-title p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.model-tile-specs { margin: 18px 24px 0; padding-top: 15px; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.model-tile-specs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.model-tile-specs dt { color: var(--muted); font-size: 12px; }
.model-tile-specs dd { margin: 0; color: var(--navy); font: 700 13px/1.3 Manrope, sans-serif; text-align: right; }

.model-tile-foot {
  margin-top: auto; padding: 18px 24px 20px;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--line);
}
.model-tile-price span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.model-tile-price strong { display: block; margin-top: 3px; color: var(--navy); font: 800 23px/1 Manrope, sans-serif; }
.model-tile-price small { color: var(--muted); font-size: 11px; }
/* Boven de ::after van de titel, anders is het vinkje niet aanklikbaar. */
.model-tile .compare-toggle { position: relative; z-index: 1; }

@media (max-width: 1000px) { .model-overview-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) {
  .model-overview-grid { grid-template-columns: 1fr; }
  .model-tile-figure img { height: 220px; }
}

/* ---------- Uitgelichte actie ---------- */
.actie-layout { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 56px; align-items: start; }

.actie-visual { position: relative; padding: 28px 26px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.actie-machine img { width: 100%; height: auto; filter: drop-shadow(0 18px 16px rgba(24, 24, 24,.18)); }
.actie-accessoire { margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.actie-accessoire img { width: 62%; max-width: 260px; height: auto; margin: 0 auto; display: block; }
.actie-stamp {
  position: absolute; right: -14px; top: 26px; margin: 0;
  padding: 14px 20px; background: var(--green); color: var(--navy); text-align: right;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%);
}
.actie-stamp span { display: block; font: 800 10px/1 Manrope,sans-serif; text-transform: uppercase; letter-spacing: .09em; }
.actie-stamp strong { display: block; margin-top: 4px; font: 800 27px/1 Manrope,sans-serif; }

.actie-body h2 { margin: 6px 0 14px; color: var(--navy); font: 400 clamp(34px, 3.76vw, 48px)/1.1 "Bebas Neue", Impact, Arial, sans-serif;
  text-transform: uppercase;
}
.actie-intro { margin: 0 0 22px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.actie-punten { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 7px; }
.actie-punten li { position: relative; padding-left: 24px; color: var(--navy); font-size: 15px; }
.actie-punten li::before { content: "✓"; position: absolute; left: 0; color: var(--green-dark); font-weight: 700; }

.actie-scroll { overflow-x: auto; border: 1px solid var(--line); }
.actie-table th, .actie-table td { padding: 13px 18px; }
.actie-table tfoot th, .actie-table tfoot td { border-top: 2px solid var(--navy); border-bottom: 0; background: var(--cream); }
.actie-table tfoot th { color: var(--navy); font: 800 14px/1.3 Manrope,sans-serif; }
.actie-total { font-size: 22px !important; }

.actie-period { margin-top: 20px; padding: 16px 20px; border-left: 3px solid var(--gold); background: var(--notice-bg); }
.actie-period strong { display: block; margin-bottom: 3px; color: var(--navy); font: 700 13px/1.4 Manrope,sans-serif; }
.actie-period span { color: #6b5525; font-size: 12px; line-height: 1.6; }
.actie-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 950px) {
  .actie-layout { grid-template-columns: 1fr; gap: 34px; }
  .actie-stamp { right: 0; }
}

/* ---------- Subnavigatie onder "Modellen & prijzen" ---------- */
.nav-group { position: relative; }
.nav-group > a { position: relative; display: block; padding-block: 14px; }
.nav-group > a::after {
  content: ""; position: absolute; inset: auto 0 6px;
  width: 0; height: 2px; background: var(--green); transition: width .25s;
}
.nav-group:hover > a::after,
.nav-group > a:focus-visible::after,
.nav-group > a.active::after { width: 100%; }

.nav-submenu {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
  min-width: 216px; padding: 10px 0;
  background: var(--white); box-shadow: 0 18px 40px rgba(41,41,41,.16);
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-submenu a {
  display: block; padding: 10px 20px;
  color: var(--navy); font: 700 13px/1.3 Manrope, Arial, sans-serif; white-space: nowrap;
}
.nav-submenu a:hover, .nav-submenu a:focus-visible { background: rgba(215,25,32,.12); color: var(--green-dark); }
.nav-submenu a.active { color: var(--green-dark); }

@media (max-width: 1000px) {
  /* In het uitklapmenu staat alles onder elkaar; het submenu is er gewoon een
     ingesprongen lijstje, zonder hover-afhankelijkheid. */
  .nav-group { width: 100%; }
  .nav-submenu {
    position: static; transform: none; min-width: 0; padding: 2px 0 8px 16px;
    background: none; box-shadow: none; opacity: 1; visibility: visible;
    border-left: 2px solid rgba(255,255,255,.18); margin-left: 2px;
  }
  /* De hover-regel hierboven staat buiten deze mediaquery en is specifieker
     (0-3-0 tegen 0-1-0); een mediaquery telt niet mee in de specificiteit.
     Zonder deze regel wint dus alsnog translate(-50%, 0) en schuift het
     ingesprongen lijstje een halve breedte naar links, uit beeld. */
  .nav-group:hover .nav-submenu,
  .nav-group:focus-within .nav-submenu { transform: none; }
  .nav-submenu a { padding: 8px 0; color: rgba(255,255,255,.78); font-size: 14px; }
  .nav-submenu a:hover, .nav-submenu a:focus-visible, .nav-submenu a.active { background: none; color: var(--white); }
}

/* ---------- Modelcarrousel: tabs met vermogen, prijs in het paneel ---------- */
.model-carousel-tabs button { display: grid; gap: 3px; text-align: center; }
.model-carousel-tabs .tab-power { font: 700 9px/1 Manrope, Arial, sans-serif; opacity: .62; }
.model-carousel-tabs button.active .tab-power { opacity: .75; }
/* Zichtbare focus, ook als de tab niet geselecteerd is. */
.model-carousel-tabs button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.model-card:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

.model-price { margin: 20px 0 0; }
.model-price span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.model-price strong { color: var(--navy); font: 800 26px/1 Manrope, Arial, sans-serif; }
.model-price small { margin-left: 7px; color: var(--muted); font-size: 12px; }
.model-info .model-price span { color: #aab9c7; }
.model-info .model-price strong { color: var(--white); }
.model-info .model-price small { color: #d6e0e9; }
.model-actions { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

@media (prefers-reduced-motion: reduce) {
  .model-card.is-changing { animation: none; }
}


/* Slanke scrollbalken op lichte vlakken: vergelijkingstabel, actietabel en de
   modeltabs van de carrousel gebruiken dezelfde conventie. */
.compare-scroll, .acties-scroll, .actie-scroll, .model-carousel-tabs {
  scrollbar-width: thin;
  scrollbar-color: rgba(41,41,41,.28) transparent;
}
:is(.compare-scroll, .acties-scroll, .actie-scroll, .model-carousel-tabs)::-webkit-scrollbar { height: 7px; width: 7px; }
:is(.compare-scroll, .acties-scroll, .actie-scroll, .model-carousel-tabs)::-webkit-scrollbar-track { background: rgba(41,41,41,.06); }
:is(.compare-scroll, .acties-scroll, .actie-scroll, .model-carousel-tabs)::-webkit-scrollbar-thumb { background: rgba(41,41,41,.28); border-radius: 4px; }
:is(.compare-scroll, .acties-scroll, .actie-scroll, .model-carousel-tabs)::-webkit-scrollbar-thumb:hover { background: rgba(41,41,41,.45); }

/* ---------- Bestandsupload in formulieren ---------- */
.field-required { color: var(--green-dark); font-weight: 700; text-transform: none; letter-spacing: 0; }
.upload-field input[type="file"] {
  width: 100%; padding: 13px 15px;
  border: 1px dashed #cfcac1; border-radius: 6px;
  background: var(--white); color: var(--ink); font: inherit; cursor: pointer;
}
.upload-field input[type="file"]:hover { border-color: var(--green-dark); }
.upload-field input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 8px 14px;
  border: 0; border-radius: 4px; background: var(--navy); color: var(--white);
  font: 700 13px/1 Manrope, Arial, sans-serif; cursor: pointer;
}
.upload-field input[type="file"]::file-selector-button:hover { background: var(--green-dark); }
.field-hint { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.field-file { margin: 8px 0 0; color: var(--green-dark); font: 700 13px/1.4 Manrope, Arial, sans-serif; }
.field-file.is-error { color: #b3261e; }
.field-file[hidden] { display: none; }

/* ---------- Instapblokken op de keuzehulp ---------- */
.kh-value-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 2px; }
.kh-value-grid article { padding: 26px 24px; border: 1px solid var(--line); background: var(--white); }
.kh-value-grid h3 { margin: 0 0 8px; color: var(--navy); }
.kh-value-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* Concrete resultaten op de keuzehulpkaart: wat u ermee kunt, onder het waarom. */
.kh-results-list { margin: 0 0 16px; padding: 14px 0 0; list-style: none; display: grid; gap: 10px; border-top: 1px solid var(--line); }
.kh-results-list li { display: grid; gap: 2px; }
.kh-results-list strong { color: var(--navy); font: 400 17px/1.2 "Bebas Neue", Impact, Arial, sans-serif; text-transform: uppercase; letter-spacing: .005em; }
.kh-results-list span { color: var(--muted); font-size: 13px; line-height: 1.55; }

/* Dealerblok: bewust neutraal grijs, met rode Thaler-accenten. */
.dealers .dealer-card { background:#dededb; color:var(--ink); }
.dealers .dealer-copy { color:var(--ink); }
.dealers .dealer-copy h2 { color:var(--navy); }
.dealers .dealer-copy .eyebrow.light { color:var(--blue); }
.dealers .dealer-copy>p:not(.eyebrow),.dealers .home-dealer-stats span { color:#565b61; }
.dealers .home-dealer-stats { border-color:rgba(41,41,41,.18); }
.dealers .home-dealer-stats article+article { border-color:rgba(41,41,41,.18); }
.dealers .map-wrap { background:#cecfcc; }
.dealers .button-light { background:var(--blue); color:var(--white); }
.dealers .button-light:hover { background:var(--blue-hover); }

/* Parallax-regels staan bewust als laatste zodat bestaande hero-shorthands de
   berekende positie niet overschrijven. */
.hero,.series-hero,.photo-hero,.information-hero,.model-story-photo,.attachments-hero {
  background-position:center calc(50% + var(--parallax-y,0px));
}
@media(prefers-reduced-motion:reduce){.hero,.series-hero,.photo-hero,.information-hero,.model-story-photo,.attachments-hero{background-position:center!important}}

/* Gelaagde scrollanimaties */
.scroll-reveal{
  --reveal-delay:0ms;
  opacity:0;
  transform:translate3d(0,38px,0);
  transition:opacity .72s cubic-bezier(.22,1,.36,1) var(--reveal-delay),transform .88s cubic-bezier(.22,1,.36,1) var(--reveal-delay);
  will-change:opacity,transform;
}
.scroll-reveal.reveal-left{transform:translate3d(-52px,18px,0)}
.scroll-reveal.reveal-right{transform:translate3d(52px,18px,0)}
.scroll-reveal.reveal-card{transform:translate3d(0,34px,0) scale(.975)}
.scroll-reveal.is-revealed{opacity:1;transform:translate3d(0,0,0) scale(1);will-change:auto}

@media(max-width:600px){
  .scroll-reveal,
  .scroll-reveal.reveal-left,
  .scroll-reveal.reveal-right,
  .scroll-reveal.reveal-card{transform:translate3d(0,24px,0)}
  .scroll-reveal.is-revealed{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .scroll-reveal,
  .scroll-reveal.reveal-left,
  .scroll-reveal.reveal-right,
  .scroll-reveal.reveal-card{opacity:1;transform:none;transition:none}
}

.config-accessory-heading { margin:30px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line); color:var(--navy); font:400 22px/1 "Bebas Neue",Impact,Arial,sans-serif; text-transform:uppercase; letter-spacing:.02em; }
.config-accessory-heading:first-of-type { margin-top:6px; }
.attachment-card small { display:block; margin:-6px 0 16px; color:var(--muted); line-height:1.45; }

/* Specificaties op de aanbouwdeelkaart: maat-, gewicht- en inhoudsbereik over
   alle leverbare maten, plus de vanafprijs. Bron: Prijslijst 2025 NL. */
.attachment-specs {
  margin: 0 0 16px; padding: 12px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
}
.attachment-specs span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--navy); }
.attachment-specs b {
  color: var(--muted); font: 800 10px/1 Manrope, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .1em;
}
@media (max-width: 600px) { .attachment-specs { grid-template-columns: 1fr 1fr; } }
.info-machine-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:48px; }
.info-machine-grid article { display:flex; flex-direction:column; min-height:260px; padding:32px 28px; background:var(--cream); border-top:5px solid var(--blue); }
.info-machine-grid h3 { margin:0 0 15px; color:var(--navy); font-size:28px; }
.info-machine-grid p { margin:0 0 24px; color:var(--muted); font-size:14px; line-height:1.65; }
.info-machine-grid .text-link { margin-top:auto; }
@media(max-width:1000px){.info-machine-grid{grid-template-columns:1fr 1fr}.brand{min-height:60px}.brand-origin{font-size:9px}.dealer-map{max-width:440px}}
@media(max-width:600px){.info-machine-grid{grid-template-columns:1fr}.brand-origin{display:none}.brand{min-height:56px;margin-top:-42px;padding:42px 28px 0}.dealer-map{max-width:380px}.map-wrap{padding:38px 22px}}

/* Op Thaler-rood staat tekst altijd wit voor voldoende contrast. */
.button-primary,
.button-light,
.button-outline-light,
.angled-download,
.model-carousel-controls button:hover,
.model-carousel-tabs button:hover,
.model-carousel-tabs button.active,
.config-segment input:checked + span,
.config-product > span,
.kh-card-visual > span,
.actie-stamp,
.service-steps article > span {
  color: var(--white);
}
.button-primary :is(span,b,strong),
.button-light :is(span,b,strong),
.button-outline-light :is(span,b,strong),
.angled-download :is(span,b,strong),
.actie-stamp :is(span,strong) {
  color: inherit;
}

.button-primary:hover,
.button-light:hover,
.button-outline-light:hover,
.angled-download:hover,
.dealers .button-light:hover {
  background: var(--white);
  border-color: rgba(41,41,41,.28);
  color: var(--ink);
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}


/* ---------- Kopfoto's per schermbreedte ---------- */
/* Een kopfoto is de grootste afbeelding van de pagina en bepaalt daarmee de LCP.
   Op volle breedte is dat 2560 pixels en tot 1,2 MB, en een telefoon van 390
   punten haalde dat hele bestand op: op een gemiddelde mobiele verbinding vijf
   seconden voor die ene foto. Dat was de enige reden dat `make budget-check`
   rood stond.

   `make kopfotos` zet naast iedere kop een versie van 900 en 1500 pixels neer.
   De regel hieronder is scherpte-eerst: een scherm krijgt het kleinste bestand
   dat nog mínstens zoveel pixels heeft als het vraagt. Wat het vraagt is de
   breedte van het venster maal de pixeldichtheid, en omdat een mediaquery niet
   kan vermenigvuldigen staat die som hier uitgeschreven per band:

     dichtheid 1x    tot  900 punten -> 900     tot 1500 -> 1500    daarboven vol
     dichtheid 2x    tot  450 punten -> 900     tot  750 -> 1500    daarboven vol
     dichtheid 3x                                tot  500 -> 1500    daarboven vol

   Een telefoon van 390 punten bij dubbele dichtheid vraagt 780 en krijgt 900;
   bij drievoudige dichtheid vraagt hij 1170 en krijgt 1500. Niemand krijgt dus
   minder pixels dan zijn scherm aankan.

   Kent een browser `resolution` niet, dan valt hij door naar de volle maat. Dat
   is zwaarder maar nooit zachter, en dat is hier de goede kant om te falen.

   Alleen `background-image` wisselt; positie, uitsnede en sluier komen uit de
   regels hierboven en blijven staan. Daarom moet dit blok ná die regels komen:
   een mediaquery telt niet zwaarder dan een gewone regel.

   Een kop die van zichzelf al smaller is dan een maat krijgt die maat niet; dat
   zou een tweede bestand van hetzelfde gewicht zijn. `service` is er zo een. */
@media (max-resolution: 1.5dppx) and (max-width: 900px) {
  .models-overview-hero { background-image: url("assets/heroes-thaler/modellen-900.webp"); }
  .dealers-overview-hero { background-image: url("assets/heroes-thaler/dealers-900.webp"); }
  .contact-hero { background-image: url("assets/heroes-thaler/contact-900.webp"); }
  .service-hero { background-image: url("assets/heroes-thaler/service-900.webp"); }
  .warranty-hero { background-image: url("assets/heroes-thaler/garantie-900.webp"); }
  .warranty-form-hero { background-image: url("assets/heroes-thaler/garantieformulier-900.webp"); }
  .privacy-hero { background-image: url("assets/heroes-thaler/privacy-900.webp"); }
  .cookie-hero { background-image: url("assets/heroes-thaler/cookie-900.webp"); }
  .acties-hero { background-image: url("assets/heroes-thaler/acties-900.webp"); }
  .vergelijken-hero { background-image: url("assets/heroes-thaler/vergelijken-900.webp"); }
  .keuzehulp-hero { background-image: url("assets/heroes-thaler/keuzehulp-900.webp"); }
  .demo-hero { background-image: url("assets/heroes-thaler/demonstratie-900.webp"); }
  .about-hero {
    background-image:
      linear-gradient(90deg, rgba(24, 24, 24,.96), rgba(24, 24, 24,.72) 58%, rgba(24, 24, 24,.22)),
      url("assets/heroes-thaler/over-ons-900.webp");
  }
  .attachments-hero {
    background-image:
      linear-gradient(90deg, rgba(24,24,24,.94), rgba(24,24,24,.35)),
      url("assets/heroes-thaler/aanbouwdelen-900.webp");
  }
  .dealer-page-hero {
    background-image: var(--dealer-hero-image, url("assets/heroes-thaler/dealers-900.webp"));
  }
  .hero { background-image: url("assets/models/3448H-hero-900.webp"); }
  .information-hero {
    background-image:
      linear-gradient(90deg,rgba(20,20,20,.95),rgba(20,20,20,.58) 60%,rgba(20,20,20,.25)),
      url("assets/models/gallery/3448-work-900.webp");
  }
  .page-main.information-page { background-image: url("assets/models/gallery/3448-work-900.webp"); }
}

@media (min-resolution: 1.51dppx) and (max-resolution: 2.5dppx) and (max-width: 450px) {
  .models-overview-hero { background-image: url("assets/heroes-thaler/modellen-900.webp"); }
  .dealers-overview-hero { background-image: url("assets/heroes-thaler/dealers-900.webp"); }
  .contact-hero { background-image: url("assets/heroes-thaler/contact-900.webp"); }
  .service-hero { background-image: url("assets/heroes-thaler/service-900.webp"); }
  .warranty-hero { background-image: url("assets/heroes-thaler/garantie-900.webp"); }
  .warranty-form-hero { background-image: url("assets/heroes-thaler/garantieformulier-900.webp"); }
  .privacy-hero { background-image: url("assets/heroes-thaler/privacy-900.webp"); }
  .cookie-hero { background-image: url("assets/heroes-thaler/cookie-900.webp"); }
  .acties-hero { background-image: url("assets/heroes-thaler/acties-900.webp"); }
  .vergelijken-hero { background-image: url("assets/heroes-thaler/vergelijken-900.webp"); }
  .keuzehulp-hero { background-image: url("assets/heroes-thaler/keuzehulp-900.webp"); }
  .demo-hero { background-image: url("assets/heroes-thaler/demonstratie-900.webp"); }
  .about-hero {
    background-image:
      linear-gradient(90deg, rgba(24, 24, 24,.96), rgba(24, 24, 24,.72) 58%, rgba(24, 24, 24,.22)),
      url("assets/heroes-thaler/over-ons-900.webp");
  }
  .attachments-hero {
    background-image:
      linear-gradient(90deg, rgba(24,24,24,.94), rgba(24,24,24,.35)),
      url("assets/heroes-thaler/aanbouwdelen-900.webp");
  }
  .dealer-page-hero {
    background-image: var(--dealer-hero-image, url("assets/heroes-thaler/dealers-900.webp"));
  }
  .hero { background-image: url("assets/models/3448H-hero-900.webp"); }
  .information-hero {
    background-image:
      linear-gradient(90deg,rgba(20,20,20,.95),rgba(20,20,20,.58) 60%,rgba(20,20,20,.25)),
      url("assets/models/gallery/3448-work-900.webp");
  }
  .page-main.information-page { background-image: url("assets/models/gallery/3448-work-900.webp"); }
}

@media (max-resolution: 1.5dppx) and (min-width: 901px) and (max-width: 1500px) {
  .models-overview-hero { background-image: url("assets/heroes-thaler/modellen-1500.webp"); }
  .dealers-overview-hero { background-image: url("assets/heroes-thaler/dealers-1500.webp"); }
  .contact-hero { background-image: url("assets/heroes-thaler/contact-1500.webp"); }
  .warranty-hero { background-image: url("assets/heroes-thaler/garantie-1500.webp"); }
  .warranty-form-hero { background-image: url("assets/heroes-thaler/garantieformulier-1500.webp"); }
  .privacy-hero { background-image: url("assets/heroes-thaler/privacy-1500.webp"); }
  .cookie-hero { background-image: url("assets/heroes-thaler/cookie-1500.webp"); }
  .acties-hero { background-image: url("assets/heroes-thaler/acties-1500.webp"); }
  .vergelijken-hero { background-image: url("assets/heroes-thaler/vergelijken-1500.webp"); }
  .keuzehulp-hero { background-image: url("assets/heroes-thaler/keuzehulp-1500.webp"); }
  .demo-hero { background-image: url("assets/heroes-thaler/demonstratie-1500.webp"); }
  .about-hero {
    background-image:
      linear-gradient(90deg, rgba(24, 24, 24,.96), rgba(24, 24, 24,.72) 58%, rgba(24, 24, 24,.22)),
      url("assets/heroes-thaler/over-ons-1500.webp");
  }
  .attachments-hero {
    background-image:
      linear-gradient(90deg, rgba(24,24,24,.94), rgba(24,24,24,.35)),
      url("assets/heroes-thaler/aanbouwdelen-1500.webp");
  }
  .dealer-page-hero {
    background-image: var(--dealer-hero-image, url("assets/heroes-thaler/dealers-1500.webp"));
  }
  .hero { background-image: url("assets/models/3448H-hero-1500.webp"); }
}

@media (min-resolution: 1.51dppx) and (max-resolution: 2.5dppx) and (min-width: 451px) and (max-width: 750px) {
  .models-overview-hero { background-image: url("assets/heroes-thaler/modellen-1500.webp"); }
  .dealers-overview-hero { background-image: url("assets/heroes-thaler/dealers-1500.webp"); }
  .contact-hero { background-image: url("assets/heroes-thaler/contact-1500.webp"); }
  .warranty-hero { background-image: url("assets/heroes-thaler/garantie-1500.webp"); }
  .warranty-form-hero { background-image: url("assets/heroes-thaler/garantieformulier-1500.webp"); }
  .privacy-hero { background-image: url("assets/heroes-thaler/privacy-1500.webp"); }
  .cookie-hero { background-image: url("assets/heroes-thaler/cookie-1500.webp"); }
  .acties-hero { background-image: url("assets/heroes-thaler/acties-1500.webp"); }
  .vergelijken-hero { background-image: url("assets/heroes-thaler/vergelijken-1500.webp"); }
  .keuzehulp-hero { background-image: url("assets/heroes-thaler/keuzehulp-1500.webp"); }
  .demo-hero { background-image: url("assets/heroes-thaler/demonstratie-1500.webp"); }
  .about-hero {
    background-image:
      linear-gradient(90deg, rgba(24, 24, 24,.96), rgba(24, 24, 24,.72) 58%, rgba(24, 24, 24,.22)),
      url("assets/heroes-thaler/over-ons-1500.webp");
  }
  .attachments-hero {
    background-image:
      linear-gradient(90deg, rgba(24,24,24,.94), rgba(24,24,24,.35)),
      url("assets/heroes-thaler/aanbouwdelen-1500.webp");
  }
  .dealer-page-hero {
    background-image: var(--dealer-hero-image, url("assets/heroes-thaler/dealers-1500.webp"));
  }
  .hero { background-image: url("assets/models/3448H-hero-1500.webp"); }
}

@media (min-resolution: 2.51dppx) and (max-width: 500px) {
  .models-overview-hero { background-image: url("assets/heroes-thaler/modellen-1500.webp"); }
  .dealers-overview-hero { background-image: url("assets/heroes-thaler/dealers-1500.webp"); }
  .contact-hero { background-image: url("assets/heroes-thaler/contact-1500.webp"); }
  .warranty-hero { background-image: url("assets/heroes-thaler/garantie-1500.webp"); }
  .warranty-form-hero { background-image: url("assets/heroes-thaler/garantieformulier-1500.webp"); }
  .privacy-hero { background-image: url("assets/heroes-thaler/privacy-1500.webp"); }
  .cookie-hero { background-image: url("assets/heroes-thaler/cookie-1500.webp"); }
  .acties-hero { background-image: url("assets/heroes-thaler/acties-1500.webp"); }
  .vergelijken-hero { background-image: url("assets/heroes-thaler/vergelijken-1500.webp"); }
  .keuzehulp-hero { background-image: url("assets/heroes-thaler/keuzehulp-1500.webp"); }
  .demo-hero { background-image: url("assets/heroes-thaler/demonstratie-1500.webp"); }
  .about-hero {
    background-image:
      linear-gradient(90deg, rgba(24, 24, 24,.96), rgba(24, 24, 24,.72) 58%, rgba(24, 24, 24,.22)),
      url("assets/heroes-thaler/over-ons-1500.webp");
  }
  .attachments-hero {
    background-image:
      linear-gradient(90deg, rgba(24,24,24,.94), rgba(24,24,24,.35)),
      url("assets/heroes-thaler/aanbouwdelen-1500.webp");
  }
  .dealer-page-hero {
    background-image: var(--dealer-hero-image, url("assets/heroes-thaler/dealers-1500.webp"));
  }
  .hero { background-image: url("assets/models/3448H-hero-1500.webp"); }
}