/* Dover-Dunkirk componenten. Markup komt uit de mu-plugin dd-core en uit de pagina-inhoud (kernblokken met dd-klassen). */

.dd-ic { width: 20px; height: 20px; flex: none; }
.dd-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; min-width: 0; }
.dd-muted { color: var(--dd-ink-3); }
.dd-small { font-size: 14px; }
.dd-disc { font-size: 12.5px; color: var(--dd-ink-3); margin: 8px 0 0; }

/* knoppen */
.dd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--dd-cta); color: var(--dd-cta-ink); text-decoration: none; font-weight: 700; padding: 14px 22px; border-radius: 10px; line-height: 1.2; border: 0; cursor: pointer; font: inherit; font-weight: 700; transition: background .15s ease, transform .15s ease; }
.dd-btn:hover { background: var(--dd-cta-hover); color: #fff; }
.dd-btn:active { transform: translateY(1px); }
.dd-btn .dd-ic { width: 18px; height: 18px; }
.dd-btn--secondary { background: var(--dd-brand-tint); color: var(--dd-brand-ink); }
.dd-btn--secondary:hover { background: var(--dd-brand-tint-2); color: var(--dd-brand-ink); }
.dd-btn--small { padding: 10px 16px; font-size: 15px; border-radius: 8px; }

/* panelen */
.dd-panel { background: var(--dd-surface); border: 1px solid var(--dd-line); border-radius: var(--dd-radius); box-shadow: var(--dd-shadow-soft); }

/* hero met planningspaneel */
.dd-hero { position: relative; background: var(--dd-brand-ink); }
.dd-hero img { display: block; width: 100%; height: clamp(280px, 36vw, 520px); object-fit: cover; object-position: center 55%; }
.dd-hero__cap { position: absolute; left: 24px; top: 16px; font-size: 12.5px; color: #fff; background: rgba(11, 43, 51, .55); padding: 5px 10px; border-radius: 6px; }
.dd-plan { position: relative; margin-top: -72px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: end; }
.dd-plan__card { padding: 28px 30px 26px; display: flex; flex-direction: column; gap: 18px; }
.dd-plan__card .dd-lede { font-size: 17.5px; line-height: 1.5; max-width: 60ch; color: var(--dd-ink-2); margin: 10px 0 0; }

/* boekingsmodule */
.dd-booking { border: 1px solid var(--dd-line); border-radius: 10px; overflow: hidden; background: #fff; }
/* De DirectFerries-module groeit zodra een route is gekozen (retour: twee datumrijen). Compact bij het laden, ruimer na de eerste aanraking (dd.js zet .is-active). */
.dd-booking__frame { width: 100%; height: 276px; border: 0; display: block; transition: height .2s ease; }
.dd-booking.is-active .dd-booking__frame { height: 470px; }
@media (max-width: 760px) { .dd-booking__frame { height: 300px; } .dd-booking.is-active .dd-booking__frame { height: 640px; } }
@media (max-width: 480px) { .dd-booking__frame { height: 452px; } .dd-booking.is-active .dd-booking__frame { height: 840px; } }
.dd-booking .dd-disc { padding: 8px 12px 10px; margin: 0; border-top: 1px solid var(--dd-line); }

/* vertrekbord */
.dd-board { background: var(--dd-brand-ink); color: #fff; border-radius: var(--dd-radius); box-shadow: var(--dd-shadow); overflow: hidden; display: flex; flex-direction: column; }
.dd-board a { color: #fff; }
.dd-board__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.dd-board__title { font-size: 20px; font-weight: 800; letter-spacing: 0; margin: 0; color: #fff; }
.dd-board__live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #BFE9EF; }
.dd-board__live i { width: 8px; height: 8px; border-radius: 50%; background: #3CCB8E; }
.dd-board__clocks { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 20px; gap: 12px; background: rgba(255, 255, 255, .04); }
.dd-board__clock { display: flex; flex-direction: column; }
.dd-board__clock.is-right { align-items: flex-end; text-align: right; }
.dd-board__port { font-size: 13px; color: #BFE9EF; font-weight: 700; }
.dd-board__time { font-size: 28px; font-weight: 800; line-height: 1.1; }
.dd-board__zone { font-size: 12px; color: #8FB7BF; }
.dd-board__mid { font-size: 12.5px; color: #BFE9EF; text-align: center; line-height: 1.3; }
.dd-board__tabs { display: none; gap: 6px; padding: 10px 12px 0; }
.dd-board.has-js .dd-board__tabs { display: flex; }
.dd-board__tab { font: inherit; border: 0; flex: 1; text-align: center; font-weight: 700; font-size: 14px; padding: 10px 12px; border-radius: 10px 10px 0 0; background: rgba(255, 255, 255, .06); color: #BFE9EF; cursor: pointer; }
.dd-board__tab.is-on { background: rgba(255, 255, 255, .12); color: #fff; }
.dd-board__pane-title { font-size: 14px; font-weight: 700; color: #BFE9EF; margin: 12px 14px 0; }
.dd-board.has-js .dd-board__pane { display: none; }
.dd-board.has-js .dd-board__pane.is-on { display: block; }
.dd-board.has-js .dd-board__pane-title { display: none; }
.dd-board__table { width: 100%; border-collapse: collapse; color: #fff; margin: 0; }
.dd-board__table th { padding: 10px 12px 6px; white-space: nowrap; text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #8FB7BF; font-weight: 700; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 0; }
.dd-board__table td { padding: 12px 12px; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 0; font-size: 15px; vertical-align: middle; }
.dd-board__dep { font-weight: 800; font-size: 18px; width: 72px; }
.dd-board__arr { color: #BFE9EF; font-weight: 700; }
.dd-board__chk { color: #8FB7BF; font-size: 13px; }
.dd-board__ship { color: #D7EEF2; font-size: 14px; }
.dd-board__st { text-align: right; }
.dd-board__table tr.is-next td { background: rgba(200, 70, 26, .18); }
.dd-board__empty { padding: 16px 20px; color: #BFE9EF; margin: 0; }
.dd-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.dd-pill--next { background: var(--dd-cta); color: #fff; }
.dd-pill--next i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.dd-pill--boarding { background: rgba(60, 203, 142, .18); color: #8FE4BE; }
.dd-pill--sailed { background: rgba(255, 255, 255, .08); color: #8FB7BF; }
.dd-board__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; font-size: 13px; color: #8FB7BF; border-top: 1px solid rgba(255, 255, 255, .12); }
.dd-board__foot a { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dd-board__foot a .dd-ic { width: 16px; height: 16px; }

/* snelkoppelingstegels */
.dd-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.dd-q { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--dd-ink); transition: transform .15s ease, box-shadow .15s ease; }
.dd-q:hover { transform: translateY(-2px); box-shadow: var(--dd-shadow); color: var(--dd-ink); }
.dd-q__k { font-size: 13px; font-weight: 700; color: var(--dd-ink-3); display: flex; align-items: center; gap: 8px; }
.dd-q__k .dd-ic { width: 16px; height: 16px; color: var(--dd-brand); }
.dd-q__v { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.dd-q__s { font-size: 13.5px; color: var(--dd-ink-2); }

/* secties */
.dd-section { margin-top: 64px; }
.dd-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.dd-sec-head p { max-width: 64ch; color: var(--dd-ink-2); margin: 8px 0 0; }
.dd-linkrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
.dd-linkrow:hover { text-decoration: underline; }
.dd-linkrow .dd-ic { width: 18px; height: 18px; }

/* kaart */
.dd-map-frame { overflow: hidden; background: #D8E8EC; }
.dd-map-frame svg { display: block; width: 100%; height: auto; }
.dd-map-foot { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dd-note { background: #FFF4E5; border: 1px solid #F5D9AE; border-radius: var(--dd-radius-s); padding: 10px 12px; color: #6B4A0F; font-size: 14px; display: flex; gap: 8px; align-items: flex-start; max-width: 72ch; }
.dd-note .dd-ic { width: 18px; height: 18px; flex: none; color: var(--dd-warn); }
.dd-legend { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; color: var(--dd-ink-3); margin-top: 10px; }
.dd-legend span { display: inline-flex; align-items: center; gap: 8px; }
.dd-legend svg { width: 28px; height: 6px; display: inline-block; }

/* fotostrook */
.dd-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.dd-strip figure { margin: 0; background: var(--dd-surface); border: 1px solid var(--dd-line); border-radius: var(--dd-radius); overflow: hidden; box-shadow: var(--dd-shadow-soft); display: flex; flex-direction: column; }
.dd-strip img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; }
.dd-strip figcaption { padding: 12px 14px 14px; font-size: 14px; color: var(--dd-ink-2); line-height: 1.45; }
.dd-strip figcaption b { display: block; color: var(--dd-ink); font-size: 15px; margin-bottom: 3px; }

/* vergelijking */
.dd-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dd-copy { display: flex; flex-direction: column; gap: 14px; padding: 6px 0; }
.dd-copy p { color: var(--dd-ink-2); max-width: 56ch; margin: 0; }
.dd-cmp { padding: 6px 8px 8px; }
.dd-cmp table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; margin: 0; }
.dd-cmp th { text-align: left; font-size: 13px; color: var(--dd-ink-3); padding: 12px 14px; border-bottom: 1px solid var(--dd-line); }
.dd-cmp th.hi { background: var(--dd-brand-tint); color: var(--dd-brand-ink); border-radius: 10px 10px 0 0; }
.dd-cmp td { padding: 12px 14px; border-bottom: 1px solid var(--dd-line); }
.dd-cmp td.hi { background: var(--dd-brand-tint); font-weight: 700; color: var(--dd-brand-ink); }
.dd-cmp tr:last-child td { border-bottom: 0; }
.dd-cmp tr:last-child td.hi { border-radius: 0 0 10px 10px; }

/* havenkaarten */
.dd-ports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dd-port { overflow: hidden; display: flex; flex-direction: column; }
.dd-port img { width: 100%; height: 230px; object-fit: cover; display: block; }
.dd-port__b { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.dd-port__a { font-weight: 600; color: var(--dd-ink-2); font-size: 15px; }
.dd-port p { color: var(--dd-ink-2); font-size: 15px; margin: 0; }

/* doorrij-band */
.dd-drive { background: var(--dd-brand); color: #fff; border-radius: var(--dd-radius); padding: 28px 30px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: center; box-shadow: var(--dd-shadow); }
.dd-drive h2 { color: #fff; margin: 0; }
.dd-drive p { color: #CFE6EA; font-size: 15px; margin: 8px 0 0; }
.dd-drive__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dd-drive__d { background: rgba(255, 255, 255, .1); border-radius: 10px; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.dd-drive__d b { font-size: 22px; font-weight: 800; }
.dd-drive__d span { font-size: 13.5px; color: #CFE6EA; }

/* faq */
.dd-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dd-faq details { background: var(--dd-surface); border: 1px solid var(--dd-line); border-radius: var(--dd-radius-s); padding: 0 18px; }
.dd-faq summary { list-style: none; cursor: pointer; font-weight: 700; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dd-faq summary::-webkit-details-marker { display: none; }
.dd-faq summary .dd-ic { color: var(--dd-brand); transition: transform .2s ease; }
.dd-faq details[open] summary .dd-ic { transform: rotate(180deg); }
.dd-faq details p { padding: 0 0 16px; color: var(--dd-ink-2); font-size: 15.5px; margin: 0; }

/* feiten en vertrouwen */
.dd-facts dl { margin: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.dd-facts dl > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--dd-line); padding-bottom: 8px; }
.dd-facts dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dd-facts dt { color: var(--dd-ink-2); }
.dd-facts dd { margin: 0; font-weight: 700; }
.dd-trust { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; padding: 18px 22px; }
.dd-trust__t { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--dd-ink-2); }
.dd-trust__t .dd-ic { color: var(--dd-brand); }
.dd-updated { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dd-ink-2); }
.dd-updated .dd-ic { width: 16px; height: 16px; color: var(--dd-brand); }

/* vaste knoppenbalk mobiel */
.dd-sticky { display: none; }

@media (max-width: 1040px) {
  .dd-plan { grid-template-columns: minmax(0, 1fr); margin-top: -60px; }
  .dd-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-compare, .dd-ports, .dd-faq { grid-template-columns: minmax(0, 1fr); }
  .dd-drive { grid-template-columns: minmax(0, 1fr); }
  .dd-drive__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dd-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dd-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dd-hero__cap { display: none; }
  .dd-plan__card { padding: 20px 18px; }
  .dd-quick { grid-template-columns: minmax(0, 1fr); }
  .dd-board__time { font-size: 22px; }
  .dd-board__ship { display: none; }
  .dd-board__table td { padding: 10px 8px; font-size: 14px; }
  .dd-board__table th { padding: 8px 8px 4px; font-size: 10.5px; }
  .dd-board__dep { font-size: 16px; width: auto; }
  .dd-pill { font-size: 10.5px; padding: 3px 6px; }
  .dd-board__st { padding-right: 8px !important; }
  .dd-board__foot > span { display: none; }
  .dd-board__upd { display: none; }
  .dd-drive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  .dd-strip figure { flex: 0 0 78%; scroll-snap-align: start; }
  .dd-trust { grid-template-columns: minmax(0, 1fr); }
  .dd-sticky { display: flex; position: sticky; bottom: 0; z-index: 15; gap: 10px; padding: 10px 16px 14px; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--dd-line); backdrop-filter: blur(6px); }
  .dd-sticky .dd-btn { flex: 1; }
}

/* header */
.dd-skip { position: absolute; left: -999px; top: 8px; background: var(--dd-brand-ink); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 50; font-weight: 700; }
.dd-skip:focus { left: 16px; color: #fff; }
.dd-header { background: var(--dd-surface); border-bottom: 1px solid var(--dd-line); position: sticky; top: 0; z-index: 20; }
.dd-header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.dd-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--dd-brand-ink); font-weight: 800; font-size: 21px; letter-spacing: -.02em; white-space: nowrap; }
.dd-brand svg { width: 34px; height: 34px; }
.dd-brand__tld { color: var(--dd-brand); }
.dd-nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.dd-nav__list a { color: var(--dd-ink-2); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 10px; border-radius: 8px; white-space: nowrap; display: block; }
.dd-nav__list a:hover { background: var(--dd-bg); color: var(--dd-ink); }
.dd-nav .dd-lang { display: none; }
.dd-header__tools { display: flex; align-items: center; gap: 14px; }
.dd-lang { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; font-size: 13px; font-weight: 700; }
.dd-lang a { padding: 5px 7px; border-radius: 6px; color: var(--dd-ink-3); text-decoration: none; }
.dd-lang a.is-on { background: var(--dd-brand-tint); color: var(--dd-brand-ink); }
.dd-menu-btn { display: none; background: var(--dd-surface); border: 1px solid var(--dd-line); border-radius: 8px; padding: 8px; cursor: pointer; color: var(--dd-ink); }
#main { min-width: 0; }

/* footer */
.dd-footer { margin-top: 64px; background: var(--dd-brand-ink); color: #BFD2D7; padding: 44px 0 26px; }
.dd-footer__cols { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 28px; font-size: 14.5px; }
.dd-footer__col { display: flex; flex-direction: column; gap: 8px; }
.dd-footer__col b { color: #fff; font-weight: 800; }
.dd-footer__col p { margin: 0; max-width: 34ch; color: #9DB8BF; font-size: 14px; }
.dd-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dd-footer__list a, .dd-footer__legal a { color: #BFD2D7; text-decoration: none; }
.dd-footer__list a:hover, .dd-footer__legal a:hover { color: #fff; }
.dd-footer .dd-lang a { color: #BFD2D7; } .dd-footer .dd-lang a.is-on { background: rgba(255,255,255,.12); color: #fff; }
.dd-footer__legal { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 28px; padding-top: 16px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13px; color: #9DB8BF; }

@media (max-width: 1040px) { .dd-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .dd-nav { display: none; }
  .dd-header.is-open .dd-nav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--dd-surface); border-bottom: 1px solid var(--dd-line); padding: 12px 24px 18px; box-shadow: var(--dd-shadow); }
  .dd-header.is-open .dd-nav__list { flex-direction: column; gap: 0; }
  .dd-header.is-open .dd-nav__list a { padding: 12px 8px; font-size: 16px; border-bottom: 1px solid var(--dd-line); border-radius: 0; }
  .dd-header.is-open .dd-nav .dd-lang { display: flex; gap: 8px; margin-top: 12px; }
  .dd-header__tools .dd-lang, .dd-header__tools .dd-btn { display: none; }
  .dd-menu-btn { display: inline-flex; }
@media (max-width: 860px) { .dd-footer__cols { grid-template-columns: minmax(0, 1fr); } }
}

/* inhoudspagina: kop, leeskolom en zijkolom */
.dd-page-head { padding: 40px 0 8px; display: flex; flex-direction: column; gap: 12px; }
.dd-page-head .dd-lede { font-size: 18px; line-height: 1.5; color: var(--dd-ink-2); max-width: none; margin: 0; }
.dd-page-head .dd-meta { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.dd-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; padding-top: 24px; }
.dd-main { min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.dd-main > section { display: flex; flex-direction: column; gap: 14px; }
.dd-main p, .dd-main li { max-width: var(--dd-measure); }
.dd-main p { margin: 0; color: var(--dd-ink-2); }
.dd-main ul, .dd-main ol { margin: 0; padding-left: 22px; color: var(--dd-ink-2); }
.dd-main li { margin: 4px 0; }
.dd-main h2 { margin-top: 8px; }
.dd-main .dd-panel { padding: 6px 8px 8px; }
.dd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; margin: 0; }
.dd-table th { text-align: left; font-size: 13px; color: var(--dd-ink-3); padding: 10px 12px; border-bottom: 1px solid var(--dd-line); }
.dd-table td { padding: 10px 12px; border-bottom: 1px solid var(--dd-line); vertical-align: top; }
.dd-table tr:last-child td { border-bottom: 0; }
.dd-tw { overflow-x: auto; }
.dd-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: dd; }
.dd-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: start; color: var(--dd-ink-2); }
.dd-steps li::before { counter-increment: dd; content: counter(dd); grid-column: 1; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--dd-brand); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.dd-steps b { grid-column: 2; grid-row: 1; display: block; color: var(--dd-ink); }
.dd-steps li > span, .dd-steps li > p { grid-column: 2; grid-row: 2; margin: 0; }
.dd-aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 88px; }
.dd-aside .dd-panel { padding: 18px 20px; }
.dd-aside h3 { font-size: 15px; margin: 0 0 8px; }
.dd-aside .dd-btn { display: flex; width: 100%; }
.dd-aside .dd-disc { margin-top: 12px; }
.dd-aside .dd-facts dl { padding: 0; }
.dd-toc { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.dd-toc a { text-decoration: none; }
.dd-toc a:hover { text-decoration: underline; }
.dd-tip { background: var(--dd-brand-tint); border-radius: var(--dd-radius-s); padding: 12px 14px; color: var(--dd-brand-ink); font-size: 15px; display: flex; gap: 10px; align-items: flex-start; max-width: 72ch; }
.dd-tip .dd-ic { width: 18px; height: 18px; flex: none; color: var(--dd-brand); margin-top: 2px; }
.dd-figure { margin: 0; }
.dd-figure img { width: 100%; height: auto; border-radius: var(--dd-radius); display: block; }
.dd-figure figcaption { font-size: 13.5px; color: var(--dd-ink-3); margin-top: 8px; }
.dd-board--full .dd-board__pane { display: block; }
@media (max-width: 1040px) { .dd-page { grid-template-columns: minmax(0, 1fr); gap: 32px; } .dd-aside { position: static; } }

/* weekoverzicht */
.dd-week th[scope="row"] { white-space: nowrap; font-weight: 700; color: var(--dd-ink); }
.dd-week tr.is-today th, .dd-week tr.is-today td { background: var(--dd-brand-tint); }
.dd-week__n { font-weight: 800; }
.dd-week__times { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-week__t { display: inline-block; background: var(--dd-bg); border: 1px solid var(--dd-line); border-radius: 6px; padding: 2px 7px; font-size: 14px; font-weight: 600; }
.dd-week__none { color: var(--dd-ink-3); }
.dd-board--full .dd-board__pane + .dd-board__pane { border-top: 1px solid rgba(255,255,255,.12); margin-top: 6px; }

/* Timetables Pro (datumkeuze) in de huisstijl */
.tp-wrap { font-family: var(--dd-font) !important; }
.tp-wrap .tp-btn, .tp-wrap button[type="button"], .tp-wrap #tp-load-ops, .tp-wrap .tp-more-btn { background: var(--dd-cta) !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; font-weight: 700 !important; font-family: var(--dd-font) !important; }
.tp-wrap .tp-btn:hover, .tp-wrap button[type="button"]:hover { background: var(--dd-cta-hover) !important; }
.tp-wrap input[type="date"], .tp-wrap select { border: 1px solid var(--dd-line-strong) !important; border-radius: 8px !important; font-family: var(--dd-font) !important; }
.tp-wrap .tp-card, .tp-wrap .tp-ext-card { border: 1px solid var(--dd-line) !important; border-radius: var(--dd-radius-s) !important; box-shadow: none !important; }
.tp-wrap .tp-route-ticket { background: var(--dd-brand-tint) !important; color: var(--dd-brand-ink) !important; border-color: var(--dd-brand-tint-2) !important; }
.tp-wrap .tp-row-link, .tp-wrap a { color: var(--dd-brand) !important; }
.tp-wrap .tp-time { color: var(--dd-ink) !important; }

/* ingesloten kaarten (Windy) */
.dd-embed { overflow: hidden; padding: 0 !important; }
.dd-embed iframe { display: block; width: 100%; height: 520px; border: 0; }
@media (max-width: 720px) { .dd-embed iframe { height: 420px; } }

/* foto's in een rij: gelijke verhouding */
.dd-ports .dd-figure img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Paginahero: foto-band met overlappende kopkaart (subpagina's) */
.dd-hero--page img { height: clamp(180px, 24vw, 340px); object-position: center 50%; }
.dd-page-head--card { padding: 32px 0 8px; }
.dd-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0 8px; }
.dd-figs .dd-figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.dd-main > section > .dd-figure { margin: 20px 0 8px; }
.dd-main > section > .dd-figure img { aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 720px) {
  .dd-page-head--card { padding: 22px 0 6px; }
  .dd-figs { grid-template-columns: minmax(0, 1fr); }
}

/* Checklist met vinkjes */
.dd-check { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.dd-check label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--dd-surface); border: 1px solid var(--dd-line); border-radius: var(--dd-radius-s); cursor: pointer; line-height: 1.5; }
.dd-check input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--dd-brand); }
.dd-check input:checked + span { color: var(--dd-ink-3); text-decoration: line-through; text-decoration-color: var(--dd-line-strong); }

/* Embleem (illustratie van Bram) voor het woordmerk */
.dd-header .dd-btn { white-space: nowrap; }
.dd-brand .dd-brand__mark { width: 34px; height: 34px; display: block; flex: none; border-radius: 8px; }
@media (max-width: 720px) { .dd-brand .dd-brand__mark { width: 30px; height: 30px; } }
.dd-footer__emblem { display: block; width: 200px; height: auto; margin: 0 0 14px; }

/* Header met embleem: merk krimpt niet, menu wordt compacter op smallere desktops */
.dd-brand { flex: none; }
.dd-header__in { gap: 16px; }
@media (max-width: 1340px) and (min-width: 1101px) {
  .dd-nav__list a { font-size: 14px; padding: 8px 7px; }
  .dd-header__tools { gap: 10px; }
  .dd-header .dd-btn { padding-left: 14px; padding-right: 14px; }
}
}

.dd-page-head h1 { max-width: none; text-wrap: wrap; }

/* Cookiebanner: het hidden-attribuut moet winnen van display:flex, anders blijft de banner na Accepteren staan */
.dd-consent[hidden] { display: none !important; }