/* =========================================================
   home.css — the homepage layer, and nothing else.
   ---------------------------------------------------------
   Conventions follow contact.css / business-class.css, the newest sheets
   in the project:
     - consumes tokens, never redeclares shared ones (base.css owns the
       spacing scale, the type scale, the colours, .container, the reset)
     - BEM-ish block__element / block--modifier naming
     - grids are minmax(0, …) + align-items:start, collapsing at 960 / 640
     - one transition speed (.15s ease), one card recipe, one button

   Colour is entirely tokenised — see the palette block in base.css. No hex
   or rgba() from the palette may be written here:
     --navy / --navy-2   headlines and the dark bands
     --navy-soft         eyebrows and metadata labels
     --accent(-deep)     links and interactive text
     --tint              the alternating section fill
     --on-dark-*         text, hairlines and edges on the dark bands
     --navy-rgb          alpha compositing (scrims) without forking the colour
   Orange (--brand) is the ONE action colour, reserved for buttons, and it
   always carries dark text (--on-brand), never white — white on #F49B06 is
   2.20:1 and fails WCAG (review finding H-04).

   The search mask is NOT styled here. It lives in search-form.css and is
   rendered identically on /erlebnisreisen; the two must never drift.

   Section order mirrors home.php:
     hero · trust strip · destinations · kombi · business class ·
     process · why · faq · adventures · plan
   ========================================================= */

:root {
  --section-y: 88px;
  --block-gap: 44px;
}
@media (max-width: 960px) { :root { --section-y: 64px; --block-gap: 32px; } }
@media (max-width: 640px) { :root { --section-y: 52px; --block-gap: 26px; } }

main > section { padding-block: var(--section-y); }
.hero { padding-block: 0; } /* the hero owns its own spacing */

/* Headline colour, scoped to the homepage while the rollout to the rest of
   the site is still open. Swap this for `h1,h2,h3` in base.css to apply
   site-wide. */
main :is(h1, h2, h3) { color: var(--navy); }

/* Two page backgrounds only: white and --tint (plus the one navy band).
   Five off-whites within 2% of each other read as sloppiness, not as
   separation; alternating these two also stops three white sections landing
   in a row. */
section.kombi,
section.why,
section.adventures { background: var(--tint); }

/* The trust strip continues the hero, so its top gap is tighter than the
   section rhythm; the bottom keeps the normal gap so the first content
   heading sits the same distance down as every other section's. */
section.trust-section { padding-block: 36px var(--section-y); }
@media (max-width: 640px) { section.trust-section { padding-block: 24px var(--section-y); } }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  z-index: 1;
}
.hero-photo { position: absolute; inset: 0; z-index: 0; display: block; }
.hero-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Biased below centre: the hero band is wider than the photo's 3:2, so a
     centred crop keeps the sky and pushes the turquoise water out of view. */
  object-position: center 56%;
}
/* Tinted with the brand teal rather than near-black, and far lighter at the
   top than the old 0.55→0.88 ramp: the photo carries the warmth, the scrim
   only has to buy legibility for the headline and the search card. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgb(var(--navy-rgb) / .46) 0%,
    rgb(var(--navy-rgb) / .16) 30%,
    rgb(var(--navy-rgb) / .52) 62%,
    rgb(var(--navy-rgb) / .82) 100%
  );
  pointer-events: none;
}
/* Hero variant of the AI marker (base.css). Keep it above the scrim (z 1) and
   anchored to the requested bottom-right edge of the hero image. */
.ai-tag--hero {
  top: auto;
  right: 12px;
  bottom: 12px;
  z-index: 2;
}
.hero-inner {
  position: relative;
  z-index: 3;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  min-height: 700px;
  display: flex;
  flex-direction: column;
}
.hero-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 36px;
}
/* Wide enough that the headline sets in two lines, not three — the manual
   <br/> is the only break it should take. */
.headline-row { position: relative; z-index: 3; max-width: 840px; }
.hero h1 {
  color: #fff;
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .28);
}
.hero h1 em {
  font-style: normal;
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 0.86em;
  color: var(--brand);
  letter-spacing: 0;
  display: inline-block;
  transform: translateY(0.06em) rotate(-1.5deg);
  padding-inline: 0.06em 0.1em;
}
.desc-hero {
  margin-top: var(--stack-md);
  max-width: 540px;
  color: var(--on-photo);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.55;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .35);
}

/* Four micro-proofs directly under the search card. The trust strip below
   the fold repeats them with seals; this is the version a visitor sees
   while deciding whether to use the mask at all. */
.hero-assurance {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 18px;
  padding: 0;
}
.hero-assurance li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--on-photo);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
.hero-assurance svg { width: 15px; height: 15px; color: var(--brand); flex: 0 0 auto; }
.hero-assurance a { color: inherit; text-decoration: none; }
.hero-assurance a:hover { text-decoration: underline; }

/* =========================================================
   SHARED SECTION FURNITURE
   ========================================================= */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--stack-lg);
  margin-bottom: var(--block-gap);
}
.section-head h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-title);
  text-wrap: balance;
  max-width: 680px;
}
.section-head .lede {
  margin-top: var(--stack-sm);
  max-width: 64ch;
  color: var(--muted);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}
.eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--navy-soft);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Exactly two link styles and one button, page-wide. */
.see-all,
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: var(--navy);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  text-decoration: none;
  transition: gap .15s ease, color .15s ease;
}
.see-all:hover,
.link-arrow:hover { gap: 12px; color: var(--accent-deep); }
.see-all svg,
.link-arrow svg { width: 15px; height: 15px; }
.see-all .arrow { display: inline-flex; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--on-brand);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}
.btn-primary:hover { background: var(--brand-deep); }
.btn-primary svg { width: 16px; height: 16px; }

/* Ghost button for dark bands only — the teal sections need a second action
   that is visibly not the primary one. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid var(--on-dark-edge);
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.btn-ghost:hover { background: var(--on-dark-fill); border-color: var(--on-dark); }
.btn-ghost svg { width: 16px; height: 16px; }

.section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: var(--stack-lg);
}

/* =========================================================
   DESTINATIONS — three cards, no slider
   ---------------------------------------------------------
   Was an eight-card scroll-snap carousel whose cards 4–8 were effectively
   invisible and whose hidden cards took keyboard focus (finding H-08).
   Three cards, each with one named action, replace it.
   ========================================================= */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}
.dest-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.dest-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--line-2);
}
.dest-card__media { aspect-ratio: var(--card-ratio); }
/* `card_theme_css` is a CMS field. It only shows through when a destination
   has no photo yet, so a half-finished card reads as deliberate rather than
   as a broken image. */
.dest-card.sahara  .dest-card__media { background: linear-gradient(180deg, #9fc7e8 0%, #c9a27a 55%, #e2b683 100%); }
.dest-card.oasis   .dest-card__media { background: linear-gradient(180deg, #6fbfd1 0%, #2a7b90 100%); }
.dest-card.crimson .dest-card__media { background: linear-gradient(180deg, #ffb47a 0%, #d66a3a 60%, #6e2f1a 100%); }
.dest-card__media .ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--on-dark-mute);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--fs-label);
}
.dest-card__badge {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: var(--on-photo-chip);
  backdrop-filter: blur(6px);
  color: var(--navy);
  font-size: var(--fs-label);
  font-weight: 700;
}
.dest-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 24px;
}
.dest-card__body h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
}
.dest-card__desc {
  color: var(--muted);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}
/* The two legs of the combination, labelled.
   This was one filled beige pill reading "4 Nächte Nilkreuzfahrt · 7 Nächte
   Hurghada". Two problems: it sat directly above the orange button as a
   second block of near-identical weight, so the card read as having two
   buttons; and the run-on line wrapped differently on every card, so no two
   cards lined up. Naming the legs instead turns the same words into the
   clearest explanation of what a Kombireise *is* — which is the whole point
   of the page. */
.dest-card__legs {
  display: grid;
  gap: 9px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.dest-card__legs > div {
  display: grid;
  /* Wide enough for "RUNDREISE" at --fs-label with the tracking below; the
     label column must never wrap or the two rows stop aligning. */
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.dest-card__legs dt {
  color: var(--navy-soft);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dest-card__legs dd {
  margin: 0;
  color: var(--navy);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1.45;
}
.dest-card__price {
  color: var(--navy);
  font-size: var(--fs-body-sm);
  font-weight: 800;
}
.dest-card__cta { align-self: flex-start; margin-top: 16px; }
/* Stretched link: the button is the only focusable target, but the whole
   card is clickable. Requires the card to be position:relative. */
.dest-card__cta::after { content: ""; position: absolute; inset: 0; }

.dest-empty {
  grid-column: 1 / -1;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: #fff;
}
.dest-empty h3 { font-size: var(--fs-h3); }
.dest-empty p { margin-top: 8px; color: var(--muted); line-height: var(--lh-body); }
.dest-empty__actions { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 18px; }
.dest-empty__actions a { color: var(--accent-deep); font-size: var(--fs-body-sm); font-weight: 800; text-decoration: underline; }

/* Everything below the top three stays reachable as a chip row rather than
   disappearing with the carousel. */
.dest-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: var(--stack-lg);
  padding-top: var(--stack-lg);
  border-top: 1px solid var(--line);
}
.dest-more__label {
  margin-right: 4px;
  color: var(--muted-2);
  font-size: var(--fs-meta);
  font-weight: 700;
}
.dest-more a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--navy);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.dest-more a:hover { border-color: var(--accent); background: var(--tint); color: var(--accent-deep); }

/* =========================================================
   KOMBI — "Was ist eine Kombireise?"
   The USP centrepiece. Explains the product the site actually sells.
   ========================================================= */
.kombi__intro { max-width: 780px; margin-bottom: var(--block-gap); }
.kombi__intro h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-title);
  text-wrap: balance;
}
.kombi__lead {
  margin-top: var(--stack-sm);
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.kombi__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 44px;
  align-items: start;
}

.kombi-steps { display: grid; gap: 18px; }
.kombi-step {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.kombi-step__num {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  /* A navy wash rather than --tint: the card already sits on the tinted
     band, so reusing --tint left the circle almost invisible. */
  background: rgb(var(--navy-rgb) / .08);
  color: var(--navy);
  display: grid;
  place-items: center;
}
.kombi-step__num svg { width: 22px; height: 22px; }
.kombi-step__num::after {
  content: attr(data-step);
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  display: grid;
  place-items: center;
  font-size: var(--fs-label);
  font-weight: 800;
}
.kombi-step h3 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.01em; }
.kombi-step p {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Worked example. The three abstract steps above become one real itinerary
   here — the single most-requested thing from a visitor who has never
   booked a "Rundreise und Baden". */
.kombi-example {
  align-self: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.kombi-example__media { aspect-ratio: var(--card-ratio); }
.kombi-example__body { padding: 24px 26px 26px; }
.kombi-example__body h3 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.01em; }
.kombi-timeline { list-style: none; margin: 18px 0 0; padding: 0; }
.kombi-timeline li {
  position: relative;
  padding: 0 0 20px 30px;
  color: var(--navy);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  line-height: 1.4;
}
.kombi-timeline li:last-child { padding-bottom: 0; }
.kombi-timeline li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  background: #fff;
}
/* Connector between dots, stopping short of the last one. */
.kombi-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 17px;
  bottom: 2px;
  width: 2px;
  background: var(--line);
}
.kombi-timeline span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 500;
}
.kombi-example__note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

.kombi-benefits {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
  margin: var(--stack-lg) 0 0;
  padding: 0;
}
.kombi-benefits li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.kombi-benefits svg { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.kombi-benefits strong { color: var(--navy); font-weight: 800; }

/* Keyword prose from the old .comparison-editorial section, kept indexable
   but collapsed so it stops competing with the explainer above it. */
.kombi-more {
  margin-top: var(--stack-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: #fff;
}
.kombi-more > summary {
  list-style: none;
  padding: 18px 24px;
  color: var(--navy);
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
}
.kombi-more > summary::-webkit-details-marker { display: none; }
.kombi-more > summary::after { content: "+"; float: right; color: var(--muted-2); font-weight: 800; }
.kombi-more[open] > summary::after { content: "\2013"; }
.kombi-more__body {
  padding: 0 24px 22px;
  max-width: 74ch;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.kombi-more__body > * + * { margin-top: 12px; }
.kombi-more__body h3 { font-size: var(--fs-body); font-weight: 800; }
.kombi-more__body ul { padding-left: 20px; }
.kombi-more__body li + li { margin-top: 8px; }
.kombi-more__body strong { color: var(--navy); }
.kombi-more__body a { color: var(--accent-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   BUSINESS CLASS — full-bleed teal band
   The second product line, given its own register instead of an <h3>
   inside a wall of SEO prose.
   ========================================================= */
.bc-band {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
}
.bc-band :is(h2, h3) { color: #fff; }
.bc-band .eyebrow { color: var(--on-dark-accent); }
.bc-band__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: 56px;
  align-items: center;
}
.bc-band__copy h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-title);
  text-wrap: balance;
}
.bc-band__lead {
  margin-top: var(--stack-sm);
  max-width: 56ch;
  color: var(--on-dark-soft);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}
.bc-proofs {
  list-style: none;
  display: grid;
  gap: 2px;
  margin: var(--stack-lg) 0 0;
  padding: 0;
}
.bc-proofs li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid var(--on-dark-line);
}
.bc-proofs li:last-child { border-bottom: 1px solid var(--on-dark-line); }
.bc-proofs__ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--on-dark-fill);
  color: var(--on-dark-accent);
  display: grid;
  place-items: center;
}
.bc-proofs__ico svg { width: 18px; height: 18px; }
.bc-proofs strong { display: block; color: #fff; font-size: var(--fs-body-sm); font-weight: 800; }
.bc-proofs__sub { display: block; margin-top: 2px; color: var(--on-dark-mute); font-size: var(--fs-meta); line-height: 1.5; }
.bc-band__media {
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6);
}

/* =========================================================
   PROCESS — "So einfach buchen Sie bei uns"
   Three steps against booking anxiety. The 45+ audience is the reason
   this section exists: it names a human, a timescale and a guarantee.
   ========================================================= */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  counter-reset: step;
}
.process-card {
  position: relative;
  padding: 30px 28px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.process-card::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 800;
}
.process-card h3 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.01em; }
.process-card p {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.process-card__phone {
  display: inline-block;
  margin-top: 12px;
  color: var(--navy);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.process-card__phone:hover { color: var(--accent-deep); }
.process-card__hours { margin-top: 4px; color: var(--muted-2); font-size: var(--fs-meta); }

/* =========================================================
   WHY — every trust signal in one place
   Replaces the old .trust-cards row plus the separate .about section,
   which split the same argument across two screens.
   ========================================================= */
.why-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.why-story .lead {
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--navy);
  text-wrap: balance;
}
.why-story .body {
  margin-top: var(--stack-md);
  max-width: 54ch;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.why-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 44px;
  margin-top: var(--stack-lg);
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.why-stats .n {
  color: var(--navy);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.why-stats .l { margin-top: 6px; color: var(--muted-2); font-size: var(--fs-meta); line-height: 1.4; }
.why-sig { display: flex; align-items: center; gap: 14px; margin-top: var(--stack-lg); }
.why-sig__avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: var(--fs-body-sm);
  font-weight: 700;
}
.why-sig__name { color: var(--navy); font-size: var(--fs-body-sm); font-weight: 800; }
.why-sig__role { margin-top: 2px; color: var(--muted-2); font-size: var(--fs-meta); }
.why-heritage {
  position: relative;
  margin-top: var(--stack-lg);
  border-radius: var(--radius-card);
  aspect-ratio: 16 / 9;
}
.why-heritage figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: rgb(var(--navy-rgb) / .74);
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 600;
}

.why-proofs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.why-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
a.why-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-card-hover); }
.why-card--wide { grid-column: 1 / -1; }
.why-card__eyebrow {
  color: var(--muted-2);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.why-card__phone {
  color: var(--navy);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.why-card__phone:hover { color: var(--accent-deep); }
.why-card h3 { font-size: var(--fs-body-lg); font-weight: 800; letter-spacing: -0.01em; }
.why-card p { color: var(--muted); font-size: var(--fs-body-sm); line-height: 1.55; }
.why-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--navy);
  font-size: var(--fs-body-sm);
  font-weight: 700;
}
.why-card__cta .arr { margin-left: auto; display: inline-flex; color: var(--muted-2); transition: color .15s ease, transform .15s ease; }
.why-card__cta .arr svg { width: 14px; height: 14px; }
.why-card:hover .why-card__cta .arr { color: var(--accent-deep); transform: translate(2px, -2px); }
/* Same technique as .why-operators below, and for the same reason: sizing a
   seal by height alone lets its intrinsic ratio set the width with no upper
   bound, so the 480×112 DerTour artwork rendered 146px wide inside a 162px
   card and pushed 109px past the edge at 1024px. Equal grid cells cap the
   width; object-fit letterboxes whatever ratio the artwork happens to have. */
.why-seals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 18px;
  padding: 4px 0;
}
.why-seals img {
  width: 100%;
  height: 52px;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.why-seals img.is-wide { height: 34px; }
/* Equal cells with contained logos: the partner artwork has wildly different
   intrinsic ratios, so sizing by height alone made the row read as six
   different weights. */
.why-operators {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 14px 14px;
  padding: 4px 0 2px;
}
.why-operators img { width: 100%; height: 26px; object-fit: contain; object-position: left center; display: block; }
.why-card__count { color: var(--navy); font-size: var(--fs-body); font-weight: 700; }
/* Own line: inline, the 25px figure and the 16px label wrapped mid-phrase
   ("80+ Veranstalter im / Preisvergleich"). */
.why-card__count strong { display: block; font-size: 25px; font-weight: 800; letter-spacing: -0.02em; }

/* =========================================================
   FAQ — the .faq-item accordion itself lives in base.css (/faq shares it)
   ========================================================= */
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  border-top: 1px solid var(--line);
}

/* =========================================================
   ADVENTURES — blog teaser
   ========================================================= */
.adv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.adv-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  color: inherit;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.adv-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--line-2); }
.adv-media { aspect-ratio: var(--card-ratio); }
.adv-media .ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgb(var(--navy-rgb) / .45);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--fs-label);
}
.adv-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.adv-body h3 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.01em; line-height: var(--lh-snug); }
.adv-body .desc {
  color: var(--muted);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.adv-body .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
  color: var(--muted-2);
  font-size: var(--fs-meta);
  font-weight: 500;
}
.adv-body .meta .sep { color: var(--line); }

/* =========================================================
   PLAN — closing advisory band
   ========================================================= */
.plan { padding-bottom: calc(var(--section-y) + 8px); }
.plan-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 48px;
  align-items: center;
  padding: 48px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
}
.plan-card h2 {
  color: #fff;
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-title);
  text-wrap: balance;
}
.plan-card p {
  margin-top: var(--stack-sm);
  max-width: 56ch;
  color: var(--on-dark-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.plan-contact {
  padding: 26px;
  border-radius: var(--radius-card);
  background: var(--on-dark-fill);
  border: 1px solid var(--on-dark-line);
  text-align: center;
}
.plan-contact__label {
  color: var(--on-dark-mute);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plan-contact__phone {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.plan-contact__phone:hover { color: var(--on-dark-accent); }
.plan-contact__hours { margin-top: 10px; color: var(--on-dark-mute); font-size: var(--fs-meta); line-height: 1.5; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
  .hero-inner { min-height: 560px; padding-block: 32px 24px; }
  .hero-body { padding-bottom: 24px; }
  .hero h1 { font-size: clamp(36px, 7vw, 56px); }
  .desc-hero { max-width: none; }
  .section-head { gap: 18px; }

  .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .dest-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dest-card:last-child:nth-child(odd) .dest-card__media { aspect-ratio: 21 / 9; }

  .kombi__layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .kombi-example__media { aspect-ratio: 21 / 9; }

  .bc-band__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bc-band__media { aspect-ratio: 16 / 9; }

  .process-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .why-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faq-list { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-card { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px; }
}

@media (max-width: 640px) {
  .hero-inner { min-height: 540px; padding-block: 24px; }
  .hero h1 { font-size: clamp(32px, 8.5vw, 44px); }
  .desc-hero { font-size: var(--fs-body); }
  .hero-assurance { gap: 6px 18px; }
  .hero-assurance li { font-size: var(--fs-meta); }

  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .section-head h2 { max-width: none; }
  .see-all, .link-arrow { min-height: 44px; }

  .dest-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dest-card:last-child:nth-child(odd) .dest-card__media { aspect-ratio: var(--card-ratio); }
  .dest-card__body { padding: 18px 20px 20px; }

  .kombi-step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 20px; }
  .kombi-step__num { width: 44px; height: 44px; }
  .kombi-step__num svg { width: 19px; height: 19px; }
  .kombi-benefits { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .kombi-example__body { padding: 20px; }

  .bc-band__layout { gap: 26px; }
  .bc-proofs li { grid-template-columns: 36px minmax(0, 1fr); gap: 13px; }
  .bc-proofs__ico { width: 36px; height: 36px; }

  .process-card { padding: 24px 22px; }
  .why-stats { gap: 16px 28px; padding: 18px 0; }
  .why-stats .n { font-size: 25px; }
  .why-proofs { grid-template-columns: minmax(0, 1fr); }
  .why-seals { gap: 18px; }

  .adv-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .plan-card { padding: 24px; gap: 24px; }
  .plan-contact__phone { font-size: 24px; }

  .faq-item > summary { padding: 16px 4px; gap: 12px; }
  .faq-item .a { padding: 0 4px 16px; }
}