/* Startseite */
.hero { position: relative; min-height: clamp(32rem, 78vh, 48rem); display: grid; align-items: center; background: var(--color-sand); }
.hero__grid { position: relative; display: grid; align-items: center; min-height: inherit; }
.hero__content { position: relative; z-index: 1; display: grid; justify-items: start; gap: var(--space-5); max-width: 43rem; padding-block: clamp(var(--space-7), 10vw, var(--space-9)); color: var(--color-white); }
.hero__content h1 { max-width: 12ch; font-size: clamp(3.6rem, 7vw, 5.75rem); }
.hero__content h1, .hero__content .eyebrow { color: var(--color-white); }
.hero__intro { color: rgb(255 255 255 / 86%); font-size: var(--text-lg); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__image-wrap { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hero__image-wrap::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(18 19 18 / 76%) 0%, rgb(18 19 18 / 46%) 48%, rgb(18 19 18 / 10%) 100%); content: ""; }
.hero__image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.image-caption { position: absolute; z-index: 1; right: var(--content-padding); bottom: var(--space-5); max-width: 15rem; color: rgb(255 255 255 / 88%); font-family: var(--font-heading); font-size: var(--text-sm); font-style: italic; line-height: 1.35; text-align: right; }
.featured-posts { background: linear-gradient(180deg, var(--color-sand) 0, var(--color-tuerkis) 7rem, var(--color-tuerkis) 100%); }
.featured-posts .article-grid { grid-template-columns: 1.25fr 0.75fr; grid-template-rows: repeat(2, minmax(14rem, 18rem)); }
.featured-posts .article-card { position: relative; min-height: 14rem; isolation: isolate; background: var(--color-text); border-color: rgb(255 255 255 / 18%); box-shadow: 0 1.25rem 3.5rem rgb(23 24 23 / 13%); }
.featured-posts .article-card--featured { grid-row: 1 / 3; }
.featured-posts .article-card__image-link { position: absolute; z-index: -2; inset: 0; aspect-ratio: auto; }
.featured-posts .article-card--featured .article-card__image-link { aspect-ratio: auto; }
.featured-posts .article-card::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgb(23 24 23 / 3%) 20%, rgb(23 24 23 / 84%) 100%); content: ""; pointer-events: none; }
.featured-posts .article-card__content { position: absolute; right: 0; bottom: 0; left: 0; align-content: end; gap: var(--space-2); padding: clamp(var(--space-5), 4vw, var(--space-7)); color: var(--color-white); }
.featured-posts .article-card__meta { color: var(--color-accent-soft); }
.featured-posts .article-card h3 a, .featured-posts .article-card .text-link { color: var(--color-white); }
.featured-posts .article-card__content > p:not(.article-card__meta) { max-width: 34rem; color: rgb(255 255 255 / 82%); }
.featured-posts .article-card .text-link { width: max-content; }
.featured-posts .article-card:hover .article-card__image { transform: scale(1.05); }
.section-action { display: flex; justify-content: center; margin-top: var(--space-7); }

/* Startseite: Weltkarte und Kurzvorstellung */
.map-teaser { background: var(--color-tuerkis); color: var(--color-text); }
.map-teaser__layout { display: grid; grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(var(--space-7), 8vw, var(--space-9)); }
.map-teaser__globe { width: min(100%, 25rem); justify-self: center; }
.map-teaser__globe .travel-globe { width: 100%; }
.map-teaser__globe .world-map-controls { margin-top: calc(var(--space-4) * -1); }
.map-teaser__globe .map-control { border-color: var(--color-text); background: var(--color-white); color: var(--color-text); }
.map-teaser__globe .map-control:hover { background: var(--color-text); color: var(--color-white); }
.map-teaser__content { display: grid; justify-items: start; gap: var(--space-4); }
.map-teaser__content .eyebrow, .map-teaser__content h2 { color: var(--color-text); }
.map-teaser__content p:not(.eyebrow) { color: var(--color-text); }
.map-teaser__content .button { border-color: var(--color-text); background: var(--color-white); color: var(--color-text); }
.home-about { background: var(--color-sand); background-image: linear-gradient(180deg, rgb(202 209 199 / 38%), rgb(253 248 244 / 0%) 6rem); }
.home-about__layout { display: grid; grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.3fr); align-items: center; gap: clamp(var(--space-6), 7vw, var(--space-9)); }
.home-about__portrait { position: relative; width: min(100%, 25rem); aspect-ratio: 1 / 1; justify-self: center; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.home-about__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.home-about__content { position: relative; display: grid; justify-items: start; gap: var(--space-4); }
.home-about__content h2 { max-width: 18ch; }
.home-about__content > p:not(.eyebrow) { color: var(--color-text-muted); font-size: var(--text-lg); }

/* Reiseberichte */
.page-intro { padding-block: clamp(var(--space-7), 10vw, var(--space-9)); background: var(--color-tuerkis); }
.page-intro__content { display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
.page-intro__content h1 { font-size: var(--text-3xl); }
.page-intro__content > p:last-child { color: var(--color-text-muted); font-size: var(--text-lg); }
.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.report-card[hidden] { display: none; }

/* Einzelner Reisebericht */
.article-header { display: grid; justify-items: start; gap: var(--space-4); padding-block: clamp(var(--space-7), 9vw, var(--space-9)); }
.article-header h1 { max-width: 15ch; font-size: clamp(3.25rem, 6vw, 5rem); }
.article-header__intro { color: var(--color-text-muted); font-size: var(--text-xl); }
.article-hero { position: relative; margin-bottom: var(--space-8); }
.article-hero img { width: 100%; max-height: 44rem; border-radius: var(--radius-lg); object-fit: cover; }
.article-hero figcaption, .article-image figcaption { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.article-layout { display: grid; gap: var(--space-7); }
.article-content { display: grid; gap: var(--space-5); }
.article-content h2 { margin-top: var(--space-4); }
.article-content p { font-size: var(--text-lg); }
.article-lead { color: var(--color-text); font-family: var(--font-heading); font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important; line-height: 1.45; }
.article-image { margin-block: var(--space-4); }
.article-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: var(--radius-md); object-fit: cover; }
.article-image--portrait { width: min(100%, 38rem); margin-inline: auto; }
.article-image--portrait img { aspect-ratio: 4 / 5; }
.article-gallery {
  --gallery-image-height: min(68vh, 38rem);
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-4);
}
.article-gallery__viewport {
  overflow-x: auto;
  border-radius: var(--radius-md);
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.article-gallery__viewport::-webkit-scrollbar { display: none; }
.article-gallery__viewport:focus-visible { outline: 0.2rem solid var(--color-accent); outline-offset: 0.2rem; }
.article-gallery__track { display: flex; align-items: flex-start; }
.article-gallery__slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.article-gallery__slide.article-image--portrait { width: auto; margin-inline: 0; }
.article-gallery__slide img,
.article-gallery__slide.article-image--portrait img {
  width: 100%;
  height: var(--gallery-image-height);
  aspect-ratio: auto;
  border-radius: var(--radius-md);
  background: var(--color-tuerkis);
  object-fit: contain;
}
.article-gallery__slide figcaption { padding-inline: var(--space-2); }
.article-gallery__controls { display: none; align-items: center; justify-content: center; gap: var(--space-3); }
.article-gallery.is-ready .article-gallery__controls { display: flex; }
.article-gallery__button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-background);
  color: var(--color-primary);
  font-size: var(--text-lg);
  transition: background-color var(--transition-base), color var(--transition-base), opacity var(--transition-base);
}
.article-gallery__button:hover:not(:disabled) { background: var(--color-tuerkis-dark); color: var(--color-white); }
.article-gallery__button:disabled { cursor: default; opacity: 0.35; }
.article-gallery__dots { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.article-gallery__dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-border);
  transition: width var(--transition-base), background-color var(--transition-base);
}
.article-gallery__dot[aria-current="true"] { width: 1.5rem; background: var(--color-primary); }
@media (prefers-reduced-motion: reduce) {
  .article-gallery__viewport { scroll-behavior: auto; }
}

.packing-checklist { display: grid; gap: var(--space-5); margin-block: var(--space-4); }
.packing-checklist__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.packing-checklist__header h3 { margin-bottom: var(--space-1); }
.packing-checklist__status { color: var(--color-text-muted); font-size: var(--text-sm) !important; }
.packing-checklist__progress { width: 100%; height: 0.7rem; overflow: hidden; border: 0; border-radius: 999px; background: var(--color-tuerkis); accent-color: var(--color-primary); }
.packing-checklist__progress::-webkit-progress-bar { background: var(--color-tuerkis); }
.packing-checklist__progress::-webkit-progress-value { background: var(--color-primary); }
.packing-checklist__progress::-moz-progress-bar { background: var(--color-primary); }
.packing-checklist__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.packing-group { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.packing-group legend { padding-inline: var(--space-2); color: var(--color-text); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; }
.packing-group label { display: grid; grid-template-columns: 1.2rem 1fr; align-items: start; gap: var(--space-3); color: var(--color-text-muted); cursor: pointer; }
.packing-group input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--color-primary); }
.packing-group label:has(input:checked) { color: var(--color-text); text-decoration: line-through; text-decoration-color: var(--color-border); }
.related-posts { margin-top: var(--space-9); background: var(--color-tuerkis); }

/* Reiseziele */
.destination-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 18rem; gap: var(--grid-gap); }
.destination-card { position: relative; overflow: hidden; border-radius: var(--radius-md); color: var(--color-white); }
.destination-card--large { grid-row: span 2; }
.destination-card::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgb(20 33 36 / 70%)); content: ""; }
.destination-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.destination-card:hover img { transform: scale(1.05); }
.destination-card span { position: absolute; z-index: 1; right: var(--space-5); bottom: var(--space-5); left: var(--space-5); display: grid; gap: var(--space-1); }
.destination-card strong { font-family: var(--font-heading); font-size: var(--text-2xl); }
.destination-card small { font-size: var(--text-sm); }

/* Über mich */
.about-hero { min-height: 0; display: block; background: var(--color-background); }
.about-hero .two-column-layout { position: static; min-height: 0; align-items: center; }
.about-hero__content { position: relative; display: grid; justify-items: start; gap: var(--space-5); max-width: 43rem; color: var(--color-text); }
.about-hero__content h1 { color: var(--color-text); font-size: var(--text-3xl); }
.about-hero__content .eyebrow { color: var(--color-primary); }
.about-hero__lead { color: var(--color-text); font-family: var(--font-heading); font-size: var(--text-2xl); line-height: 1.35; }
.about-hero__content > p:last-of-type { color: var(--color-text-muted); }
.about-hero__portrait { position: relative; width: min(100%, 34rem); aspect-ratio: 1 / 1; justify-self: end; }
.about-hero__image { width: 100%; height: 100%; border-radius: var(--radius-lg); object-fit: cover; object-position: 50% 34%; box-shadow: var(--shadow-md); }
.about-hero .two-column-layout::after { display: none; }
.about-values { background: var(--color-tuerkis); }

/* Kontakt */
.contact-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(var(--space-7), 8vw, var(--space-9)); }
.contact-copy { display: grid; gap: var(--space-4); }
.contact-copy h2 { font-size: var(--text-2xl); }
.contact-copy > p:not(.eyebrow) { color: var(--color-text-muted); }
.contact-form { display: grid; gap: var(--space-5); padding: clamp(var(--space-5), 5vw, var(--space-7)); border-radius: var(--radius-md); background: var(--color-tuerkis); }

/* Reisetipps */
.tips-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.tips-cta { background: var(--color-primary); color: var(--color-white); text-align: center; }
.tips-cta > div { display: grid; justify-items: center; gap: var(--space-4); }
.tips-cta .eyebrow, .tips-cta h2 { color: var(--color-white); }
.tips-cta .button { background: var(--color-white); color: var(--color-primary); }
.tips-cta .button:hover { background: var(--color-tuerkis); }

/* Rechtliche Seiten */
.legal-page h1 { margin-top: var(--space-3); }
.legal-page section { display: grid; gap: var(--space-3); margin-top: var(--space-7); }
.legal-page section p { color: var(--color-text-muted); }

/* Interaktive Weltkarte */
.world-section { padding-top: var(--space-6); }
.world-map-shell { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.6fr); align-items: center; gap: clamp(var(--space-6), 7vw, var(--space-9)); }
.travel-map { width: 100%; min-height: clamp(25rem, 58vw, 39rem); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); z-index: 0; }
.travel-map--unavailable { display: grid; place-items: center; padding: var(--space-6); background: var(--color-tuerkis); color: var(--color-text-muted); text-align: center; }
.map-loading { align-self: center; padding: var(--space-6); color: var(--color-text-muted); text-align: center; }
.travel-map .leaflet-control-attribution { font-family: var(--font-sans); }
.travel-map .leaflet-tooltip { border: 0; border-radius: var(--radius-sm); color: var(--color-primary); font-family: var(--font-sans); font-weight: 700; }
.globe-stage { display: grid; justify-items: center; }
.travel-globe { width: min(100%, 42rem); margin-inline: auto; overflow: visible; }
.globe-sphere { fill: var(--color-sand); stroke: var(--color-tuerkis-dark); stroke-width: 2; }
.globe-country { fill: var(--color-white); stroke: var(--color-tuerkis-dark); stroke-width: 0.55; vector-effect: non-scaling-stroke; }
.globe-country--destination { fill: var(--color-tuerkis-dark); cursor: pointer; transition: fill var(--transition-base); }
.globe-country--destination:hover, .globe-countries a:focus .globe-country--destination { fill: var(--color-blumig); outline: none; }
.travel-globe { cursor: grab; touch-action: none; }
.travel-globe:active { cursor: grabbing; }
.world-map-controls { display: flex; gap: var(--space-3); margin-top: calc(var(--space-4) * -1); }
.map-control { width: 2.8rem; height: 2.8rem; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-primary); cursor: pointer; font-size: var(--text-xl); transition: background-color var(--transition-base), color var(--transition-base); }
.map-control:hover { background: var(--color-primary); color: var(--color-white); }
.world-map-detail { display: grid; gap: var(--space-3); min-height: 13rem; padding: var(--space-6); border-left: 0.18rem solid var(--color-accent); background: var(--color-tuerkis); }
.world-map-detail h2 { font-size: var(--text-2xl); }
.world-map-detail p:not(.eyebrow) { color: var(--color-text-muted); }

/* Underline editorial text links clearly. */
.article-content p a:not(.button),
.article-content > ul a:not(.button),
.article-content > ol a:not(.button) {
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  text-decoration-color: currentColor;
}
.article-content p a:not(.button):hover,
.article-content > ul a:not(.button):hover,
.article-content > ol a:not(.button):hover {
  text-decoration-thickness: 0.13em;
}

/* Route maps in travel guides */
.route-map {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-7);
  padding: clamp(var(--space-5), 5vw, var(--space-7));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.route-map h2 { font-size: var(--text-2xl); }
.route-map__intro { max-width: 62ch; color: var(--color-text-muted); }
.route-map__canvas {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 18% 22%, rgb(255 255 255 / 48%) 0 2.5rem, transparent 2.6rem),
    linear-gradient(145deg, var(--color-sand), var(--color-tuerkis));
}
.route-map__svg { display: block; width: 100%; height: auto; min-height: 16rem; }
.route-map__land path {
  fill: var(--color-sand);
  stroke: var(--color-tuerkis-dark);
  stroke-width: 2.25;
  vector-effect: non-scaling-stroke;
}
.route-map__terrain { fill: none; }
.route-map__contour {
  stroke: rgb(124 139 125 / 30%);
  stroke-width: 1.25;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}
.route-map__label {
  fill: var(--color-primary-dark);
  stroke: rgb(255 255 255 / 90%);
  stroke-width: 5px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.route-map__label--water {
  fill: var(--color-tuerkis-dark);
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.route-map__grid { stroke: rgb(124 139 125 / 10%); stroke-width: 1; stroke-dasharray: 3 10; vector-effect: non-scaling-stroke; }
.route-map__line-halo, .route-map__line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.route-map__line-halo { stroke: var(--color-white); stroke-width: 10; opacity: 0.9; }
.route-map__line { stroke: var(--color-accent-dark); stroke-width: 4.5; }
.route-map__marker circle { fill: var(--color-primary); stroke: var(--color-white); stroke-width: 3; vector-effect: non-scaling-stroke; }
.route-map__marker text {
  fill: var(--color-white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  dominant-baseline: middle;
  pointer-events: none;
}
.route-map__north { fill: var(--color-primary-dark); font-family: var(--font-body); font-size: 15px; font-weight: 700; }
.route-map__stops {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--route-map-row-count, 1), minmax(1.75rem, auto));
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.route-map__stops li { display: grid; grid-template-columns: 1.75rem 1fr; align-items: center; gap: var(--space-2); color: var(--color-text); font-size: var(--text-sm); }
.route-map__stops li > span:first-child {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 700;
}
.route-map__note { color: var(--color-text-muted); font-size: var(--text-xs); }
@media (max-width: 36rem) {
  .route-map { padding: var(--space-5); }
  .route-map__svg { min-height: 13rem; }
  .route-map__stops {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}



/* Interaktive Routenkarten mit detaillierter OpenStreetMap-Grundkarte */
.route-map__canvas--interactive {
  position: relative;
  width: 100%;
  height: clamp(22rem, 55vw, 32rem);
  min-height: 22rem;
  background: var(--color-tuerkis);
  isolation: isolate;
}
.route-map__canvas--interactive .leaflet-pane,
.route-map__canvas--interactive .leaflet-control {
  z-index: 1;
}
.route-map__canvas--interactive .leaflet-top,
.route-map__canvas--interactive .leaflet-bottom {
  z-index: 2;
}
.route-map__canvas--interactive .leaflet-control-attribution {
  font-family: var(--font-body);
  font-size: 0.65rem;
}
.route-map__marker-shell {
  border: 0;
  background: transparent;
}
.route-map__leaflet-marker {
  display: grid;
  width: 2.375rem;
  height: 2.375rem;
  place-items: center;
  border: 3px solid var(--color-white);
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 3px 10px rgb(23 24 23 / 24%);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}
.route-map__canvas--unavailable {
  display: grid;
  min-height: 12rem;
  place-items: center;
  padding: var(--space-5);
  color: var(--color-text-muted);
  text-align: center;
}
@media (max-width: 36rem) {
  .route-map__canvas--interactive {
    height: 23rem;
    min-height: 23rem;
  }
}

.route-map__canvas--pending {
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background:
    linear-gradient(rgb(253 248 244 / 90%), rgb(253 248 244 / 90%)),
    repeating-linear-gradient(35deg, var(--color-tuerkis) 0 1px, transparent 1px 28px);
}
.route-map__prompt {
  display: grid;
  max-width: 32rem;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 92%);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.route-map__prompt p {
  margin: 0;
  color: var(--color-text-muted);
}

/* Hiking map and horizontally scrolling stories. */
.topic-intro{background:linear-gradient(150deg,var(--color-sand),rgb(202 209 199 / 62%))}
.topic-map-shell{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(16rem,.65fr);gap:var(--space-6)}
.topic-map-panel{overflow:hidden;min-height:28rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:linear-gradient(145deg,var(--color-sand),var(--color-tuerkis));box-shadow:var(--shadow-sm)}
.topic-map{display:block;width:100%;height:100%;min-height:28rem;touch-action:pan-y}
.topic-map__land{fill:rgb(255 255 255 / 62%);stroke:var(--color-white);stroke-width:1.65;vector-effect:non-scaling-stroke}
.topic-map__region{fill:var(--color-primary);stroke:var(--color-white);stroke-width:2.25;vector-effect:non-scaling-stroke;transition:fill var(--transition-base),filter var(--transition-base)}
.topic-map__link{cursor:pointer;outline:none}
.topic-map__link:hover .topic-map__region,.topic-map__link:focus .topic-map__region{fill:var(--color-primary-dark);filter:drop-shadow(0 .25rem .4rem rgb(23 24 23 / 18%))}
.topic-map__link:focus-visible .topic-map__region{stroke:var(--color-text);stroke-width:3}
.topic-map__label{fill:var(--color-text);stroke:rgb(255 255 255 / 92%);stroke-width:5px;paint-order:stroke fill;font-family:var(--font-body);font-size:14px;font-weight:700;pointer-events:none}
.topic-map-detail{display:flex;min-height:16rem;flex-direction:column;justify-content:center;gap:var(--space-3);padding:clamp(var(--space-5),4vw,var(--space-7));border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm)}
.topic-map-detail h3{font-size:var(--text-2xl)}
.topic-map-detail>p:not(.eyebrow){color:var(--color-text-muted)}
.topic-map-detail .text-link{width:fit-content}
.topic-card{overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm);scroll-margin-top:7rem}
.topic-card__image-link{display:block;overflow:hidden;aspect-ratio:16/9}
.topic-card__image-link img{width:100%;height:100%;object-fit:cover;transition:transform 500ms ease}
.topic-card:hover img{transform:scale(1.035)}
.topic-card__content{display:grid;gap:var(--space-3);padding:var(--space-5)}
.topic-card__content h3{font-size:var(--text-xl)}
.topic-card__content>p:not(.article-card__meta){color:var(--color-text-muted);font-size:var(--text-sm)}
.topic-card-grid--horizontal{display:flex;gap:var(--space-4);overflow-x:auto;padding:.15rem .15rem var(--space-4);scroll-snap-type:x proximity;scroll-padding-inline:.15rem;overscroll-behavior-inline:contain;scrollbar-width:thin}
.topic-card-grid--horizontal:focus-visible{outline:2px solid var(--color-primary);outline-offset:var(--space-2);border-radius:var(--radius-sm)}
.topic-card-grid--horizontal .topic-card{flex:0 0 clamp(17rem,31vw,22rem);scroll-snap-align:start}
.topic-card-grid--horizontal .topic-card__content{padding:var(--space-4)}
.topic-map-shell--selection{grid-template-columns:1fr}
.topic-map-shell--selection .topic-map-detail{min-height:0}
.topic-map-detail[hidden]{display:none}
.topic-map-panel--hiking{position:relative;min-height:0;background:#dcebe7}
.topic-map--hiking{height:auto;min-height:0;aspect-ratio:820/520;cursor:grab;touch-action:pan-y}
.topic-map--hiking:active{cursor:grabbing}
.topic-map--hiking.topic-map--zoomed{touch-action:none}
.topic-map__link[role="button"]{cursor:pointer}
.topic-map__link.is-selected .topic-map__region{fill:var(--color-accent)}
.topic-map__label--hiking{font-size:12px}
.hiking-map-controls{position:absolute;z-index:3;bottom:var(--space-3);left:var(--space-3);display:flex;flex-wrap:wrap;gap:var(--space-2)}
.hiking-map-controls .map-control,.hiking-map-controls .island-map-controls__preset{min-width:2.8rem;min-height:2.8rem;border:1px solid var(--color-border);border-radius:999px;background:var(--color-white);color:var(--color-primary-dark);cursor:pointer;font-weight:700;box-shadow:var(--shadow-sm)}
.hiking-map-controls .island-map-controls__preset{padding:.45rem .85rem;font-size:var(--text-xs)}
.hiking-map-controls button:hover,.hiking-map-controls button:focus-visible{background:var(--color-primary);color:var(--color-white)}
.hiking-map-controls button:disabled{opacity:.45;cursor:default}
@media(max-width:42rem){.topic-card-grid--horizontal{margin-inline:calc(var(--container-padding) * -1);padding-inline:var(--container-padding);scroll-padding-inline:var(--container-padding)}.topic-card-grid--horizontal .topic-card{flex-basis:min(82vw,19rem)}}