/* MeerHeimatLiebe 2.5.2-r41
   Vollbreiten-Hintergründe, professioneller SH-Reiseplaner,
   minimierbarer Merkzettel, Einwilligung und Kopierschutz. */

:root {
  --r41-header-height: var(--r40-header-height, 92px);
  --r41-shell-gap: clamp(.75rem, 1.6vw, 1.4rem);
}

/* Startseite und Logbuch: Bild wirklich über die gesamte Browserbreite. */
.site-backdrop,
.site-vignette {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  inset-inline: 0 !important;
}

body.scene-home,
body.scene-logbook {
  --r41-scene-image: var(--scene-desktop) !important;
}

body.scene-home .site-backdrop--a,
body.scene-logbook .site-backdrop--a {
  background-image:
    linear-gradient(180deg, rgba(2, 24, 38, .14), rgba(2, 16, 27, .42)),
    var(--r41-scene-image) !important;
  background-size: 100% 100%, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat !important;
}

/* Alle übrigen Szenen ebenfalls flächig, ohne seitliche Bildbegrenzung. */
.site-backdrop--a {
  background-size: 100% 100%, cover !important;
  background-position: center center, center center !important;
}

/* Reiseplaner nutzt die Seitenbreite und bleibt logisch angeordnet. */
.attractions-shell {
  width: min(1880px, calc(100vw - 1rem)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: clamp(.25rem, 1vw, 1rem) !important;
}

.attractions-toolbar {
  padding: clamp(1rem, 2vw, 1.5rem) !important;
}

.attractions-filters {
  grid-template-columns: repeat(5, minmax(170px, 1fr)) !important;
  gap: .75rem !important;
  align-items: end !important;
}

.attraction-origin-field {
  min-width: 0;
}

.planner-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .65rem 1rem;
  margin-top: .85rem;
}

.planner-origin-badge {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  max-width: 100%;
  padding: .45rem .7rem;
  border: 1px solid rgba(132, 222, 237, .36);
  border-radius: 999px;
  color: #dffaff;
  background: rgba(12, 94, 118, .28);
}

.attractions-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px) !important;
  gap: var(--r41-shell-gap) !important;
  align-items: start !important;
}

.attractions-layout.trip-plan-closed {
  grid-template-columns: minmax(0, 1fr) !important;
}

.attractions-results {
  min-width: 0;
  padding: clamp(.85rem, 1.5vw, 1.25rem) !important;
}

.attractions-results__heading {
  align-items: flex-start !important;
  gap: 1rem;
}

.attractions-results__heading > div {
  display: grid;
  gap: .22rem;
}

.attractions-results__heading small {
  color: var(--muted);
  font-weight: 500;
}

.attraction-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)) !important;
  gap: clamp(.8rem, 1.25vw, 1.15rem) !important;
}

.attraction-card {
  display: grid !important;
  grid-template-columns: minmax(145px, 38%) minmax(0, 1fr) !important;
  min-height: 270px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

.attraction-card__media {
  min-height: 100%;
  background: rgba(4, 34, 50, .82);
  overflow: hidden;
}

.attraction-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 270px;
  object-fit: cover;
  object-position: center center;
  filter: saturate(.92) brightness(.98);
  transition: transform .28s ease, filter .28s ease;
}

.attraction-card:hover .attraction-card__media img {
  transform: scale(1.025);
  filter: saturate(1.03) brightness(1.02);
}

.attraction-card__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.attraction-card__content > p {
  color: #d8e7eb;
  font-size: .84rem;
}

.attraction-card__actions {
  margin-top: auto !important;
}

/* Merkzettel ist nicht mehr unkontrolliert über anderen Fenstern. */
.trip-plan {
  position: sticky !important;
  top: calc(var(--r40-header-height, 92px) + 1rem) !important;
  z-index: 45 !important;
  width: 100% !important;
  max-width: 390px !important;
  max-height: calc(100dvh - var(--r40-header-height, 92px) - 1.5rem) !important;
  margin: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

.trip-plan[hidden] {
  display: none !important;
}

.trip-plan.is-minimized {
  max-height: none !important;
  overflow: visible !important;
}

.trip-plan__head-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.trip-plan__toggle,
.trip-plan__dismiss,
.trip-plan__clear {
  flex: 0 0 36px;
  font-size: 1rem !important;
  cursor: pointer;
}

.trip-plan__body[hidden] {
  display: none !important;
}

.trip-plan__route-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-top: .8rem;
}

.trip-route-result {
  margin-top: .75rem;
  padding: .8rem;
  border: 1px solid rgba(132, 222, 237, .25);
  border-radius: 14px;
  background: rgba(2, 24, 38, .54);
}

.trip-route-result__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .45rem;
}

.trip-route-result__head strong {
  font-size: 1.25rem;
  color: #fff;
}

.trip-route-result ol {
  display: grid;
  gap: .4rem;
  margin: .65rem 0 0;
  padding: 0;
  list-style: none;
}

.trip-route-result li {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .45rem .5rem;
  border-radius: 9px;
  background: rgba(255,255,255,.035);
}

.trip-route-result li span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.trip-route-result li strong {
  flex: 0 0 auto;
  color: #c9f8fb;
  font-size: .78rem;
}

.trip-plan-reopen {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(5.2rem, calc(env(safe-area-inset-bottom) + 5.2rem));
  z-index: 6100;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(132, 222, 237, .52);
  border-radius: 999px;
  color: #e7fcff;
  background: rgba(3, 42, 61, .92);
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
  cursor: pointer;
}

.trip-plan-reopen[hidden] {
  display: none !important;
}

.how-built-compact {
  max-width: 950px !important;
}

/* Lokale Einwilligung für Cookies und Standort. */
.privacy-consent {
  position: fixed;
  inset: 0;
  z-index: 90000;
  display: grid;
  place-items: end center;
  padding: 1rem;
  background: rgba(0, 10, 18, .48);
  opacity: 0;
  transition: opacity .18s ease;
}

.privacy-consent.is-visible {
  opacity: 1;
}

.privacy-consent[hidden] {
  display: none !important;
}

.privacy-consent__card {
  width: min(860px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(132, 222, 237, .45);
  border-radius: 18px;
  color: #e8f7fa;
  background: rgba(3, 34, 50, .97);
  box-shadow: 0 24px 60px rgba(0,0,0,.44);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.privacy-consent__card h2 {
  margin: .15rem 0 .3rem;
}

.privacy-consent__card p:last-child {
  margin-bottom: 0;
  color: #c8dce1;
}

.privacy-consent__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}

.privacy-consent-manage {
  position: fixed;
  left: max(.75rem, env(safe-area-inset-left));
  bottom: max(.75rem, env(safe-area-inset-bottom));
  z-index: 6050;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .48rem .62rem;
  border: 1px solid rgba(132, 222, 237, .32);
  border-radius: 999px;
  color: #dffaff;
  background: rgba(3, 42, 61, .78);
  font-size: .72rem;
  cursor: pointer;
}

/* Browserseitiger Kopierschutz – Formulare bleiben nutzbar. */
.copy-protection-enabled body,
.copy-protection-enabled .site-main,
.copy-protection-enabled .site-header,
.copy-protection-enabled .site-footer {
  -webkit-user-select: none;
  user-select: none;
}

.copy-protection-enabled input,
.copy-protection-enabled textarea,
.copy-protection-enabled select,
.copy-protection-enabled [contenteditable="true"],
.copy-protection-enabled [contenteditable=""] {
  -webkit-user-select: text;
  user-select: text;
}







@media (prefers-reduced-motion: reduce) {
  .attraction-card__media img,
  .privacy-consent {
    transition: none !important;
  }
}