html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

#map {
  width: 100%;
  height: 100vh;
}

/* Marker */

.custom-marker{
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:18px;
    font-weight:bold;
    border:2px solid white;
    box-shadow:0 2px 6px rgba(0,0,0,.35);
}

.marker-start{background:#2e7d32;}
.marker-sehenswuerdigkeit{background:#c62828;}
.marker-service{background:#546e7a;}
.marker-gastronomie{background:#ef6c00;}
.marker-warnung{background:#f9a825;color:#000;}
.marker-rast{background:#1565c0;}
.marker-hund{background:#6a1b9a;}
.marker-natur{background:#388e3c;}
.marker-bruecke{background:#00838f;}
.marker-oeffentlich{background:#5d4037;}

/* Infobox */

.tour-panel{
    background:white;
    padding:15px;
    border-radius:12px;
    width:280px;
    box-shadow:0 2px 12px rgba(0,0,0,.25);
}

.tour-panel h1{
    margin:0;
    font-size:20px;
}

.subtitle{
    color:#666;
    margin-bottom:10px;
}

.facts{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    margin:10px 0;
}

.fact{
    background:#17c945;
    color:#fff;
    padding:10px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,.18);
}

.fact b{
    color:#fff;
    font-size:18px;
}

.fact{
    line-height:1.35;
}

.legend{
    background:white;
    padding:12px;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.25);
    font-size:14px;
}

.legend-title{
    font-weight:bold;
    margin-bottom:8px;
}

.popup-type{
    color:#666;
    font-size:12px;
}
.legend-item{
  display:flex;
  align-items:center;
  gap:10px;
  margin:7px 0;
  font-size:14px;
  cursor:pointer;
  padding:4px 6px;
  border-radius:8px;
  transition:background .2s ease;
}

.legend-icon{
    width:26px;
    height:26px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:14px;
    font-weight:bold;
    border:2px solid #fff;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    flex-shrink:0;
}

.legend-icon.marker-start{background:#2e7d32;}
.legend-icon.marker-sehenswuerdigkeit{background:#c62828;}
.legend-icon.marker-service{background:#546e7a;}
.legend-icon.marker-gastronomie{background:#ef6c00;}
.legend-icon.marker-warnung{background:#f9a825;color:#000;}
.legend-icon.marker-rast{background:#1565c0;}
.legend-icon.marker-hund{background:#6a1b9a;}
.legend-icon.marker-natur{background:#388e3c;}
.legend-icon.marker-bruecke{background:#00838f;}
.legend-icon.marker-oeffentlich{background:#5d4037;}

.legend-item:hover{
  background:#f1f1f1;
}

.legend-active{
  background:#e7f8ec;
  font-weight:bold;
}
.custom-marker img{
  width:18px;
  height:18px;
  display:block;
  filter: brightness(0) invert(1);
  pointer-events:none;
}

.marker-warnung img{
  filter:none;
}
/* ---------- Tourpanel ---------- */

.tour-details summary{
  display:none;
}

/* ---------- Smartphone ---------- */

@media (max-width:768px){

  .tour-panel{
    width:270px;
    max-height:75vh;
    overflow:auto;
  }

  .tour-details{
    background:white;
  }

  .tour-details:not([open]) > *:not(summary){
    display:none;
  }

  .tour-details summary{
    display:block;
    cursor:pointer;
    background:#17c945;
    color:white;
    padding:12px 42px 12px 12px;
    border-radius:10px;
    font-size:16px;
    font-weight:bold;
    margin-bottom:12px;
    position:relative;
  }
  
  .tour-details summary::after{
  content:"▼";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
}

.tour-details[open] summary::after{
  content:"▲";
}

  .summary-hint{
    display:block;
    font-size:12px;
    font-weight:normal;
    opacity:.9;
    margin-top:3px;
  }

  .tour-details[open] .summary-hint{
    display:none;
  }

}
.popup-card{
  min-width:210px;
  max-width:260px;
}

.popup-title{
  font-size:17px;
  font-weight:700;
  color:#1b5e20;
  margin-bottom:3px;
}

.popup-category{
  display:inline-block;
  font-size:12px;
  color:#fff;
  background:#17c945;
  padding:3px 8px;
  border-radius:999px;
  margin-bottom:8px;
}

.popup-text{
  font-size:14px;
  line-height:1.4;
  color:#333;
  margin-bottom:10px;
}

.popup-link{
  display:inline-block;

  background:#064E3B;

  color:#F8E7C9 !important;

  text-decoration:none;
  font-weight:700;

  padding:7px 11px;

  border-radius:999px;

  font-size:13px;
}

.popup-link:hover{
    background:#043B2D;
}
.popup-header{
    position:relative;
    margin:-12px -12px 12px -12px;
}

.popup-image{
    display:block;
    width:100%;
    height:180px;
    object-fit:cover;

    border-radius:12px 12px 0 0;
}
.popup-title-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 14px;

    background:rgba(0,0,0,.55);

    color:#fff;

    font-size:20px;
    font-weight:700;

    text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.popup-title{
    display:flex;
    align-items:center;
    gap:10px;

    font-size:20px;
    font-weight:700;

    margin-bottom:12px;
}
.popup-title-icon{
    width:24px;
    height:24px;
    flex-shrink:0;

    filter:
        drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.popup-title-content{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.popup-title-name{
    display:block;
    line-height:1.2;
}

.popup-type-label{
    display:block;
    margin-top:2px;

    font-size:12px;
    font-weight:500;
    line-height:1.2;

    opacity:0.85;
}
.popup-story{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid #e5e5e5;
}

.popup-story h4{
    margin:0 0 8px;
    font-size:15px;
    color:#2e7d32;
}

.popup-story p{
    margin:0;
    font-size:14px;
    line-height:1.5;
    color:#444;
}
/* ========================================
   Gemeinsame Tour-Seite Version 2
======================================== */

.tour-page {
  min-height: 100vh;
  background: #F8E7C9;
}


/* Gesamter Informationsbereich */

.tour-info {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 24px 20px;
}


/* Hero-Bild */

.tour-hero {
  position: relative;
  height: 280px;
  overflow: hidden;
  background: #064E3B;
  border-radius: 18px;

  border: 1px solid rgba(248,231,201,.28);

  box-shadow:
    0 18px 45px rgba(6,78,59,.30);
}

.tour-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tour-hero::after {
  position:absolute;
  inset:0;
  content:"";

  background:
    linear-gradient(
      90deg,
      rgba(6,78,59,.78) 0%,
      rgba(6,78,59,.52) 48%,
      rgba(6,78,59,.18) 100%
    );
}

.tour-hero-overlay {
  position: absolute;
  z-index: 2;
  left: 34px;
  bottom: 30px;
  max-width: 720px;
  padding-right: 28px;
}

.tour-hero-without-image {
  height: auto;
  min-height: 220px;
}

.tour-label {
  margin-bottom: 8px;
  color:#F8E7C9;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#tour-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.03;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.35);
}

#tour-subtitle {
  max-width: 680px;
  margin: 12px 0 0;
  color: #f6f7f4;
  font-size: 1.04rem;
  line-height: 1.5;
  text-shadow:
    0 1px 5px rgba(0, 0, 0, 0.45);
}


/* Faktenleiste */

.tour-facts {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}

.tour-fact{
  display:flex;
  align-items:center;
  min-width:0;

  padding:12px 14px;

  background:#FFFDF9;

  border:1px solid #E6D8BC;

  border-radius:14px;

  box-shadow:0 8px 18px rgba(6,78,59,.08);
}

.tour-fact-icon {
  display: flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 11px;
  color:#F8E7C9;
  background:#064E3B;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
}

.tour-fact-content {
  min-width: 0;
}

.tour-fact-label {
  margin-bottom: 3px;
  overflow: hidden;
  color: #778078;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tour-fact-value {
  overflow: hidden;
  color: #263228;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
}


/* Beschreibung */

.tour-description-wrapper {
  max-width: 900px;
}

.tour-description-title{
  margin:0 0 8px;
  color:#064E3B;
  font-size:1.35rem;
  line-height:1.3;
}

.tour-description {
  color: #404a42;
  font-size: 0.96rem;
  line-height: 1.6;
}

.tour-description p {
  margin: 0 0 9px;
}


/* Karte */

.tour-map-section {
  position: relative;
  width: 100%;
}

.tour-map-section #map {
  width: 100%;
  height: 70vh;
  min-height: 520px;
  
  border:1px solid #E6D8BC;
border-radius:18px;
overflow:hidden;
box-shadow:0 12px 28px rgba(6,78,59,.10);
}

#loading-message,
#error-message {
  position: absolute;
  z-index: 1000;
  top: 20px;
  left: 50%;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 10px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateX(-50%);
}

#error-message {
  color: #a12622;
  font-weight: 700;
}


/* Tablet */

@media (max-width: 900px) {

  .tour-hero {
    height: 240px;
  }

  .tour-facts {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* Smartphone */

@media (max-width: 600px) {

  .tour-info {
    padding: 12px 12px 14px;
  }

  .tour-hero {
    height: 250px;
    border-radius: 14px;
  }

  .tour-hero::after {
    background:
      linear-gradient(
        0deg,
        rgba(15, 28, 17, 0.9) 0%,
        rgba(15, 28, 17, 0.48) 65%,
        rgba(15, 28, 17, 0.12) 100%
      );
  }

  .tour-hero-overlay {
    right: 18px;
    bottom: 20px;
    left: 18px;
    padding-right: 0;
  }

  #tour-title {
    font-size: 2.15rem;
  }

  #tour-subtitle {
    margin-top: 8px;
    font-size: 0.93rem;
    line-height: 1.4;
  }

  .tour-facts {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 14px;
  }

  .tour-fact {
    padding: 10px;
  }

  .tour-fact-icon {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    font-size: 0.9rem;
  }

  .tour-fact-label {
    font-size: 0.6rem;
  }

  .tour-fact-value {
    font-size: 0.85rem;
  }

  .tour-description-title {
    font-size: 1.1rem;
  }

  .tour-description {
    font-size: 0.91rem;
    line-height: 1.5;
  }

  .tour-map-section #map {
    height: 68vh;
    min-height: 460px;
  }

}
/* --------------------------
   Verweis zur Dorfkarte
-------------------------- */

.dorfkarte-teaser {
  margin: 0 0 42px;
}

.dorfkarte-teaser-content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;

  padding: 30px 34px;

  color: #fff;

  background:
    linear-gradient(
      120deg,
      rgba(6, 78, 59, 0.98),
      rgba(4, 59, 45, 0.92)
    );

  border: 1px solid rgba(248, 231, 201, 0.35);
  border-radius: 18px;

  box-shadow: 0 12px 30px rgba(6, 78, 59, 0.18);
}

.dorfkarte-teaser-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 68px;
  height: 68px;

  background: rgba(248, 231, 201, 0.16);
  border: 1px solid rgba(248, 231, 201, 0.35);
  border-radius: 50%;

  font-size: 2rem;
}

.dorfkarte-teaser-label {
  margin: 0 0 6px;

  color: #f8e7c9;

  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dorfkarte-teaser h2 {
  margin: 0 0 8px;

  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.dorfkarte-teaser-text > p:last-child {
  max-width: 680px;
  margin: 0;

  color: rgba(255, 255, 255, 0.9);
  line-height: 1.55;
}

.dorfkarte-teaser-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 48px;
  padding: 12px 20px;

  color: #064e3b;
  background: #f8e7c9;

  border-radius: 999px;

  font-weight: 700;
  text-decoration: none;

  white-space: nowrap;

  transition:
    transform 0.2s,
    background-color 0.2s;
}

.dorfkarte-teaser-button:hover {
  background: #fff;
  transform: translateY(-2px);
}

.dorfkarte-teaser-button:focus-visible {
  outline: 3px solid rgba(248, 231, 201, 0.55);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .dorfkarte-teaser-content {
    grid-template-columns: 1fr;
    gap: 18px;

    padding: 24px;
  }

  .dorfkarte-teaser-icon {
    width: 56px;
    height: 56px;

    font-size: 1.6rem;
  }

  .dorfkarte-teaser-button {
    width: 100%;
  }
}