/* ========================================================================== 
   BAD TÖLZ — regionale Leistungsseite
   Nur auf webdesign-bad-toelz.html geladen.
   ========================================================================== */
.region-page { overflow: clip; }

.region-hero {
  width: min(calc(100% - (2 * var(--page-pad))), 1480px);
  margin-inline: auto;
  padding: clamp(9rem, 16vh, 13rem) 0 clamp(5rem, 9vw, 8rem);
}
.region-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 8rem);
}
.region-hero__grid > div {
  max-width: 1180px;
}
.region-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, .78fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 8rem);
}
.region-hero h1 {
  max-width: 980px;
  font-size: clamp(3.6rem, 7.5vw, 8.7rem);
  line-height: .9;
  letter-spacing: -.065em;
}
.region-hero__lead {
  max-width: 800px;
  margin-top: 2rem;
  font-size: clamp(1.15rem, 1.55vw, 1.55rem);
  line-height: 1.5;
}
.region-hero__services {
  margin-top: 1.4rem;
  font-family: var(--font-sans);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.region-media {
  margin: 0;
  overflow: hidden;
  background: #f2f2f2;
}
.region-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.region-section {
  width: min(calc(100% - (2 * var(--page-pad))), 1360px);
  margin-inline: auto;
  padding: clamp(5rem, 9vw, 9rem) 0;
}
.region-section + .region-section { border-top: 1px solid var(--color-line); }
.region-section--compact { padding-block: clamp(4rem, 7vw, 6.5rem); }
.region-copy { max-width: 760px; }
.region-copy h2,
.region-section > h2 {
  max-width: 1000px;
  font-size: clamp(2.7rem, 5.5vw, 6.6rem);
  line-height: .94;
  letter-spacing: -.055em;
}
.region-copy h3,
.region-card h3,
.region-faq summary {
  font-family: var(--font-sans);
}
.region-copy h3,
.region-card h3 {
  margin-top: 2.2rem;
  font-size: clamp(1.45rem, 2vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}
.region-copy p,
.region-card p,
.region-local p,
.region-faq p,
.region-closing p {
  margin-top: 1rem;
  font-size: clamp(1.05rem, 1.25vw, 1.22rem);
  line-height: 1.62;
}
.region-copy .button,
.region-closing .button { margin-top: 2rem; }
.region-cta { margin-top: 3rem; }
.region-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  margin-top: 3rem;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.region-card { background: var(--color-bg); padding: clamp(2rem, 4vw, 4rem); }
.region-card h3 { margin-top: 0; }
.region-card--media { padding: 0; }
.region-card--media img { width: 100%; height: 100%; min-height: 390px; object-fit: cover; }
.region-local {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(2rem, 5vw, 6rem);
}
.region-local__item { padding-top: 1.5rem; border-top: 1px solid var(--color-text); }
.region-local__item h3 { font-size: clamp(1.7rem, 2.7vw, 3rem); line-height: 1; }
.source-link {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.region-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  margin-top: 3rem;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.region-check { padding: clamp(2rem, 4vw, 4rem); background: var(--color-bg); }
.region-check h3 { font-size: clamp(1.6rem, 2.5vw, 2.6rem); line-height: 1; }
.region-check p { margin-top: 1rem; font-size: 1.05rem; line-height: 1.6; }
.region-work-list { margin-top: 3rem; border-top: 1px solid var(--color-text); }
.region-work-item { padding: 2rem 0; border-bottom: 1px solid var(--color-line); }
.region-work-item h3 { font-size: clamp(1.7rem, 3vw, 3.2rem); line-height: 1; }
.region-work-item strong { display: block; margin-top: .45rem; font-family: var(--font-sans); font-size: .8rem; }
.region-work-item p { max-width: 760px; margin-top: .9rem; }
.region-faq { margin-top: 3rem; border-top: 1px solid var(--color-text); }
.region-faq details { border-bottom: 1px solid var(--color-line); }
.region-faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 1.6rem 3rem 1.6rem 0;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  font-weight: 760;
  letter-spacing: -.02em;
}
.region-faq summary::-webkit-details-marker { display: none; }
.region-faq summary::after {
  content: "+";
  position: absolute;
  right: .2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 400;
}
.region-faq details[open] summary::after { content: "–"; }
.region-faq details p { max-width: 850px; margin: 0; padding: 0 3rem 1.8rem 0; }
.region-closing {
  width: min(calc(100% - (2 * var(--page-pad))), 1360px);
  margin-inline: auto;
  padding: clamp(6rem, 11vw, 11rem) 0;
}
.region-closing h2 { max-width: 1050px; font-size: clamp(3rem, 6vw, 7rem); line-height: .92; letter-spacing: -.06em; }
.region-source-note { max-width: 850px; margin-top: clamp(5rem, 9vw, 8rem); padding-top: 1.5rem; border-top: 1px solid var(--color-line); }
.region-source-note h3 { font-size: 1rem; }
.region-source-note p { margin-top: .75rem; font-size: .9rem; line-height: 1.6; }

@media (max-width: 900px) {
  .region-hero__grid,
  .region-split,
  .region-local { grid-template-columns: 1fr; }
  .region-hero { padding-top: 8rem; }
  .region-hero__visual { order: 2; }
  .region-cards,
  .region-checks { grid-template-columns: 1fr; }
  .region-card--media img { min-height: 0; aspect-ratio: 1; }
}

@media (max-width: 600px) {
  .region-hero h1 { font-size: clamp(3.2rem, 15vw, 5.8rem); }
  .region-copy h2,
  .region-section > h2 { font-size: clamp(2.6rem, 12vw, 4.6rem); }
  .region-section { padding-block: 4.5rem; }
  .region-faq summary { padding-right: 2.2rem; }
}

/* ========================================================================== 
   BAD TÖLZ — Feinschliff v2
   - Wartungsbild entfernt: kein leerer grauer Grid-Slot mehr
   - Trennlinien außerhalb FAQ entfernt
   - mehr Luft im lokalen Quellenbereich
   - Karten-Hover mit sicherem Textkontrast
   ========================================================================== */

/* Keine dekorativen Trennlinien zwischen Inhaltsblöcken. */
.region-section + .region-section {
  border-top: 0;
}

/* Lokaler Bezug: Überschrift und Quellenblöcke bekommen bewusst mehr Raum. */
.region-section > .section-kicker + h2 {
  margin-top: 1rem;
}
.region-local {
  margin-top: clamp(3.25rem, 6vw, 6rem);
  gap: clamp(3rem, 7vw, 7rem);
}
.region-local__item {
  padding-top: 0;
  border-top: 0;
}

/* Karten ohne Rasterlinien; Abstand übernimmt die Gliederung. */
.region-cards,
.region-checks {
  gap: clamp(1rem, 2vw, 1.5rem);
  background: transparent;
  border: 0;
}

/* Referenzen und Quellenhinweis ebenfalls ohne Trennlinien. */
.region-work-list {
  border-top: 0;
}
.region-work-item {
  border-bottom: 0;
  padding: 2rem 0;
}
.region-source-note {
  border-top: 0;
  padding-top: 0;
}

/* Textkarten bleiben ruhig, reagieren am Desktop aber sichtbar auf den Mauszeiger. */
.region-card:not(.region-card--media),
.region-check {
  transition:
    background-color .32s var(--ease-out),
    color .32s var(--ease-out),
    transform .32s var(--ease-out);
}

/* Desktop: klassischer Hover. Mobil/Touch: derselbe Zustand per Tap (.is-active). */
.region-card:not(.region-card--media).is-active,
.region-check.is-active,
.region-card:not(.region-card--media):focus-visible,
.region-check:focus-visible {
  background: #111;
  color: #fff;
  transform: translateY(-4px);
  outline: none;
}

.region-card:not(.region-card--media).is-active h3,
.region-card:not(.region-card--media).is-active p,
.region-check.is-active h3,
.region-check.is-active p,
.region-card:not(.region-card--media):focus-visible h3,
.region-card:not(.region-card--media):focus-visible p,
.region-check:focus-visible h3,
.region-check:focus-visible p {
  color: #fff;
}

.region-card--media img {
  transition: transform .5s var(--ease-out);
}
.region-card--media.is-active img {
  transform: scale(1.015);
}

@media (hover: hover) and (pointer: fine) {
  .region-card:not(.region-card--media):hover,
  .region-check:hover {
    background: #111;
    color: #fff;
    transform: translateY(-4px);
  }

  .region-card:not(.region-card--media):hover h3,
  .region-card:not(.region-card--media):hover p,
  .region-check:hover h3,
  .region-check:hover p {
    color: #fff;
  }

  .region-card--media:hover img {
    transform: scale(1.015);
  }
}

@media (hover: none), (pointer: coarse) {
  .region-card:not(.region-card--media),
  .region-check,
  .region-card--media {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

/* FAQ behält bewusst seine Linien als klare Bedienstruktur. */
.region-faq {
  border-top: 1px solid var(--color-text);
}
.region-faq details {
  border-bottom: 1px solid var(--color-line);
}

@media (max-width: 900px) {
  .region-local {
    margin-top: 2.75rem;
    gap: 3rem;
  }
}


/* ==========================================================================
   BAD TÖLZ — Hero ohne Bild + Quellenpanel
   Nur diese regionale Seite.
   ========================================================================== */

/* Lokaler Bezug im Stil der schwarzen Informationsboxen. */
.region-local-panel {
  background: #111;
  color: #fff;
  border-radius: 28px;
  padding: clamp(3.5rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem);
}
.region-local-panel .section-kicker,
.region-local-panel h2,
.region-local-panel h3,
.region-local-panel p,
.region-local-panel .source-link {
  color: #fff;
}
.region-local-panel .section-kicker {
  opacity: .72;
}
.region-local-panel .source-link {
  opacity: .9;
}
.region-local-panel .source-link:hover,
.region-local-panel .source-link:focus-visible {
  opacity: 1;
}
.region-local-panel .region-local {
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
}

@media (max-width: 900px) {
  .region-local-panel {
    border-radius: 22px;
    padding: 3rem 1.5rem;
  }
}

/* ==========================================================================
   BAD TÖLZ — lebendige Bildführung in den Inhaltsbereichen
   Hero bleibt bewusst reine Textfläche.
   ========================================================================== */

.region-media,
.region-card--media {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: #efefef;
  box-shadow: 0 24px 70px rgba(15, 15, 15, 0.08);
  isolation: isolate;
}

.region-media::before,
.region-card--media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 28%);
  pointer-events: none;
  z-index: 2;
}

.region-media img,
.region-card--media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.045);
  transform-origin: center center;
  transition: transform 1.1s var(--ease-out), filter .7s ease;
  will-change: transform;
}

.reveal {
  clip-path: inset(12% 0 0 0 round 28px);
}

.reveal.is-visible {
  clip-path: inset(0 0 0 0 round 28px);
}

.reveal--left {
  transform: translate3d(-2.4rem, 3rem, 0);
}

.reveal--right {
  transform: translate3d(2.4rem, 3rem, 0);
}

.reveal.is-visible img {
  transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .region-media:hover img,
  .region-card--media:hover img {
    transform: scale(1.035);
  }
}

.region-card--media img {
  min-height: 420px;
}

.region-checks .region-card--media img {
  min-height: 100%;
}

@media (max-width: 900px) {
  .region-media,
  .region-card--media {
    border-radius: 22px;
  }

  .reveal,
  .reveal.is-visible {
    clip-path: inset(0 0 0 0 round 22px);
  }

  .reveal--left,
  .reveal--right {
    transform: translate3d(0, 2.5rem, 0);
  }
}

/* Abstand für nachgelagerte Leistungsblöcke auf Regional-Seiten. */
.region-copy--followup { margin-top: clamp(4rem, 8vw, 8rem); }


/* ==========================================================================
   REGIONALE SEO-SEITEN — Hero ausschließlich als Textfläche
   Garmisch-Partenkirchen und Penzberg: kein Bild / keine zweite Hero-Spalte.
   ========================================================================== */
.region-hero--text-only .region-hero__grid {
  grid-template-columns: minmax(0, 1fr);
}

.region-hero--text-only .region-hero__grid > div {
  max-width: 1180px;
}

.region-hero--text-only h1 {
  max-width: 1180px;
}

@media (max-width: 900px) {
  .region-hero--text-only .region-hero__grid > div {
    max-width: 100%;
  }
}