:root {
  --green:#064b39;
  --cream:#f6f2e9;
  --line:#d8d0c0;
  --text:#18382d;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:var(--cream); color:var(--text); }
body { font-family:Georgia,"Times New Roman",serif; overflow-x:hidden; }
.desktop { display:block; width:100%; max-width:1920px; height:auto; margin:auto; }
.mobile { display:none; }

/* Nur Mouseover-Sprechblasen für die Leistungs-Icons */
.service { position:relative; }
.service::after {
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%);
  width:230px;
  padding:10px 12px;
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
  font:13px/1.35 Arial,sans-serif;
  text-align:center;
  white-space:normal;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:1000;
  transition:opacity .15s ease, visibility .15s ease;
}
.service::before {
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 4px);
  transform:translateX(-50%) rotate(45deg);
  width:10px;
  height:10px;
  background:#fff;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:1001;
}
.service:hover::after,
.service:hover::before { opacity:1; visibility:visible; }


@media (max-width:768px) {
  .desktop { display:none !important; }
  .mobile {
    display:block; width:100%; max-width:520px; margin:0 auto;
    background:var(--cream);
  }
  .original-header {
    display:block; width:100%; height:auto; margin:0;
  }
  .intro { padding:12px 20px 20px; }
  h1 {
    margin:0 0 12px; color:var(--green);
    font-size:40px; line-height:1.02; letter-spacing:-1px;
  }
  .rule { height:1px; background:var(--green); margin:12px 0 14px; }
  .intro p {
    margin:0 0 12px; font:14px/1.45 Arial,sans-serif; color:#30352f;
  }
  .intro .service-note {
    border-left:3px solid var(--green); padding-left:12px;
  }
  .hero {
    width:100%; display:block; aspect-ratio:1648/374;
    object-fit:cover; object-position:center;
  }
  .section-title {
    text-align:center; color:var(--text);
    font-size:25px; margin:0; padding:20px 12px 15px;
  }
  .services {
    display:grid; grid-template-columns:1fr 1fr;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .service {
    min-height:105px; padding:15px 8px;
    display:flex; flex-direction:column; justify-content:center;
    align-items:center; text-align:center;
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .service:nth-child(2n) { border-right:0; }
  .service:nth-last-child(-n+2) { border-bottom:0; }
  .icon { font-size:30px; line-height:1; margin-bottom:8px; }
  .service span { font-size:15px; line-height:1.15; }
  .personal { padding:22px 20px 0; }
  .personal h2 {
    margin:0 0 10px; font-size:31px; line-height:1.05; color:var(--text);
  }
  .personal p {
    margin:0 0 16px; font:14px/1.45 Arial,sans-serif; color:#30352f;
  }
  .personal img { display:block; width:100%; height:auto; }
  .footer {
    background:var(--green); color:white; padding:24px 20px 28px;
    font-family:Arial,sans-serif;
  }
  .footer-brand { font:700 27px Georgia,serif; margin-bottom:16px; }
  .footer-sub { font:10px Georgia,serif; letter-spacing:3px; }
  .contact-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px;
  }
  .footer h3 { margin:0 0 7px; font:700 16px Georgia,serif; }
  .footer p { margin:0; font-size:13px; line-height:1.5; }
  .copyright {
    border-top:1px solid rgba(255,255,255,.35); margin-top:20px;
    padding-top:12px; text-align:center; font-size:11px;
  }
}

/* Desktop-Icon-Infos: nur eine transparente Interaktionsschicht über der Originalgrafik */
.desktop-interactive {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  line-height: 0;
}
.desktop-interactive > .desktop {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
.desktop-hotspot {
  position: absolute;
  top: 58.6%;
  width: 7.2%;
  height: 8.0%;
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: pointer;
  pointer-events: auto;
}
.desktop-hotspot::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  width: 230px;
  padding: 10px 12px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
  font: 13px/1.35 Arial,sans-serif;
  text-align: center;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
  transition: opacity .15s ease, visibility .15s ease;
}
.desktop-hotspot::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 101;
}
.desktop-hotspot:hover::after,
.desktop-hotspot:hover::before,
.desktop-hotspot.active::after,
.desktop-hotspot.active::before {
  opacity: 1;
  visibility: visible;
}

/* Die tatsächlichen Mittelpunkte der acht Icons in der vorhandenen Querformat-Grafik */
.desktop-hotspot:nth-of-type(1) { left: 18.0%; }
.desktop-hotspot:nth-of-type(2) { left: 27.5%; }
.desktop-hotspot:nth-of-type(3) { left: 37.0%; }
.desktop-hotspot:nth-of-type(4) { left: 46.7%; }
.desktop-hotspot:nth-of-type(5) { left: 56.2%; }
.desktop-hotspot:nth-of-type(6) { left: 65.8%; }
.desktop-hotspot:nth-of-type(7) { left: 75.9%; }
.desktop-hotspot:nth-of-type(8) { left: 85.5%; }

@media (max-width:768px) {
  .desktop-interactive { display:none !important; }
}


/* Unsichtbare Klickflächen – keine weißen Kästchen über den Icons */
.desktop-hotspot {
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: 0 !important;
  margin: 0;
  padding: 0;
  outline: none;
  box-shadow: none !important;
}
.desktop-hotspot:focus,
.desktop-hotspot:focus-visible {
  outline: none;
  background: transparent !important;
  box-shadow: none !important;
}

/* Klickfläche für die bereits vorhandene Friedhofsliste im 8. Leistungs-Icon */
.desktop-cemetery-link {
  position:absolute;
  left:85.5%;
  top:58.6%;
  width:7.2%;
  height:8.0%;
  transform:translate(-50%,-50%);
  z-index:20;
  display:block;
  background:transparent !important;
  border:0;
  outline:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.desktop-cemetery-link:focus,
.desktop-cemetery-link:focus-visible { outline:none; box-shadow:none; }

/* Friedhofsliste als Klick-Dialog */
.cemetery-section { display:none !important; }
.cemetery-section.cemetery-open {
  display:block !important;
  position:fixed;
  inset:0;
  z-index:5100;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:58px 24px 30px;
  background:var(--cream);
  color:var(--text);
  font-family:Arial,sans-serif;
}
.cemetery-inner { width:100%; max-width:1000px; margin:0 auto; }
.cemetery-section h2 { margin:0 0 8px; color:var(--green); font:700 30px/1.15 Georgia,serif; }
.cemetery-intro { margin:0 0 18px; font-size:14px; }
.cemetery-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cemetery-table { width:100%; border-collapse:collapse; background:#fff; font-size:13px; }
.cemetery-table th, .cemetery-table td { padding:8px 9px; border:1px solid var(--line); text-align:left; vertical-align:top; }
.cemetery-table th { background:#e9e4d8; color:var(--green); font-weight:700; }
.cemetery-table td:first-child { width:48px; text-align:center; }
.cemetery-close {
  position:fixed; top:12px; right:14px; z-index:5102;
  border:1px solid var(--line); background:#fff; color:var(--green);
  border-radius:999px; width:42px; height:42px;
  font:700 25px/40px Arial,sans-serif; text-align:center; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.14);
}
body.cemetery-dialog-open { overflow:hidden; }
@media (max-width:768px) {
  .desktop-cemetery-link { display:none !important; }
  .cemetery-section.cemetery-open { padding:58px 12px 28px; }
  .cemetery-section h2 { font-size:26px; }
  .cemetery-intro { font-size:13px; }
  .cemetery-table { font-size:12px; min-width:650px; }
  .cemetery-table th, .cemetery-table td { padding:7px 8px; }
}


/* Rechtliche Bereiche: nur durch Anklicken öffnen. Unsichtbare Klickflächen liegen direkt über den drei vorhandenen Icons im Originalbild. */
.desktop-legal-link {
  position:absolute;
  bottom:1.6%;
  height:12.5%;
  z-index:30;
  display:block;
  background:transparent !important;
  border:0;
  outline:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.desktop-legal-link.impressum { left:23.5%; width:22.0%; }
.desktop-legal-link.agb { left:45.5%; width:20.5%; }
.desktop-legal-link.datenschutz { left:66.0%; width:21.0%; }
.desktop-legal-link:focus,
.desktop-legal-link:focus-visible { outline:none; box-shadow:none; }

/* Rechtstexte niemals dauerhaft im Seitenfluss anzeigen. */
.legal-section {
  display:none !important;
}
.legal-section.legal-open {
  display:block !important;
  position:fixed;
  inset:0;
  z-index:5000;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:58px 24px 30px;
  background:var(--cream);
  color:var(--text);
  font-family:Arial,sans-serif;
  line-height:1.55;
}
.legal-section .legal-inner {
  width:100%;
  max-width:900px;
  margin:0 auto;
}
.legal-section h2 {
  margin:0 0 18px;
  color:var(--green);
  font:700 30px/1.15 Georgia,serif;
}
.legal-section h3 {
  margin:20px 0 7px;
  color:var(--text);
  font:700 17px/1.25 Georgia,serif;
}
.legal-section p { margin:0 0 11px; font-size:14px; }
.legal-section a { color:var(--green); }
.legal-divider { height:1px; background:var(--line); margin:28px 0 0; }
.legal-close {
  position:fixed;
  top:12px;
  right:14px;
  z-index:5002;
  border:1px solid var(--line);
  background:#fff;
  color:var(--green);
  border-radius:999px;
  width:42px;
  height:42px;
  font:700 25px/40px Arial,sans-serif;
  text-align:center;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.14);
}
body.legal-dialog-open { overflow:hidden; }

/* In Hoch- und Queransicht mobil bleiben die Rechtstexte ein Klick-Dialog. */
@media (max-width:768px) {
  .legal-section.legal-open {
    padding:58px 18px 28px;
  }
  .legal-section h2 { font-size:26px; }
  .legal-section h3 { font-size:16px; }
  .legal-section p { font-size:13px; }
  .footer a.legal-footer-link {
    color:inherit;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
}