/* Miettoiletten-Teaser, kompakte Box (Shortcode [entsorgo_mt_teaser]) – entsorgo-Designsystem: Navy #113547, Text #325567,
   Link #2D8FCC, CTA-Verlauf #54C639 → #3B8B28, Roboto / Roboto Condensed (lädt das Elementor-Kit bereits).
   Bewusst klein gehalten: Bild-Kachel, Titel, 1–2 Sätze, eine Faktenzeile, zwei Links; in den fünf großen Städten zusätzlich
   eine Linkzeile „Mehr in <Stadt>“. Alles unter .mtt; Selektoren doppelt geklammert (.mtt .mtt__x), damit Elementor-Kit-Stile
   (.elementor-kit-N h2/a) nicht gewinnen. Layout per Container-Query: passt sich der Spaltenbreite an. */
.mtt { container-type: inline-size; box-sizing: border-box; width: 100%; max-width: 1160px; margin: clamp(28px, 4vw, 48px) auto; color: #325567; font: 400 16px/1.5 Roboto, -apple-system, "Segoe UI", sans-serif; text-align: left; }
.mtt *, .mtt *::before, .mtt *::after { box-sizing: border-box; }
.mtt .mtt__card { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "media head" "body body" "actions actions" "lokal lokal"; gap: 12px 14px; align-items: center; padding: 18px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 53, 71, .1), 0 8px 20px rgba(17, 53, 71, .06); }
.mtt .mtt__media { grid-area: media; align-self: center; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; margin: 0; padding: 8px; border-radius: 14px; background: #ECF7FE; }
.mtt .mtt__media img { display: block; width: 100%; max-width: none; height: 100%; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; }
.mtt .mtt__head { grid-area: head; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mtt .mtt__body { grid-area: body; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mtt .mtt__eyebrow { margin: 0; font: 700 12px/1.25 Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #2D8FCC; }
.mtt .mtt__title { margin: 0; padding: 0; font: 700 20px/1.18 "Roboto Condensed", "Arial Narrow", sans-serif; letter-spacing: 0; text-transform: none; color: #113547; text-wrap: balance; }
.mtt .mtt__text { margin: 0; font: 400 15px/1.5 Roboto, sans-serif; color: #325567; text-wrap: pretty; }
.mtt .mtt__facts { margin: 0; font: 500 13px/1.45 Roboto, sans-serif; color: #113547; }
.mtt .mtt__quelle { margin: 0; font: 400 12px/1.4 Roboto, sans-serif; color: #637D8C; }
.mtt .mtt__quelle a { color: #637D8C; text-decoration: underline; text-underline-offset: 2px; }
.mtt .mtt__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; }
.mtt .mtt__btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 10px 20px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #54C639 0%, #3B8B28 100%); box-shadow: 0 6px 14px rgba(59, 139, 40, .28); font: 700 15px/1.25 Roboto, sans-serif; text-align: center; text-decoration: none; color: #fff; transition: filter .15s ease; }
.mtt .mtt__btn:hover { filter: brightness(1.06); color: #fff; text-decoration: none; }
.mtt .mtt__link { display: inline-flex; align-items: center; min-height: 44px; font: 700 15px/1.3 Roboto, sans-serif; color: #2D8FCC; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mtt .mtt__link:hover { color: #113547; }
.mtt .mtt__lokal { grid-area: lokal; display: flex; flex-wrap: nowrap; align-items: center; gap: 0 14px; margin: 0; padding-top: 10px; border-top: 1px solid #E2E8EC; font: 400 14px/1.4 Roboto, sans-serif; color: #637D8C; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.mtt .mtt__lokal::-webkit-scrollbar { display: none; }
.mtt .mtt__lokal > span { flex: 0 0 auto; }
.mtt .mtt__lokal a { display: inline-flex; align-items: center; min-height: 36px; font-weight: 500; color: #2D8FCC; text-decoration: none; }
.mtt .mtt__lokal a:hover { color: #113547; text-decoration: underline; text-underline-offset: 3px; }
.mtt .mtt__btn:focus-visible, .mtt .mtt__link:focus-visible, .mtt .mtt__lokal a:focus-visible { outline: 3px solid #2D8FCC; outline-offset: 3px; } /* ≥ 3:1 auf hellem Grund (vorher #3FAFEF, 2,4:1) */

@container (min-width: 520px) {
  .mtt .mtt__card { grid-template-columns: 88px minmax(0, 1fr); padding: 20px 22px; }
  .mtt .mtt__title { font-size: 22px; }
  .mtt .mtt__btn { display: inline-flex; width: auto; }
}
@container (min-width: 620px) {
  /* ab Tablet-Breite passt die Zeile: wieder umbrechen, kein Scroll-Verlauf */
  .mtt .mtt__lokal { flex-wrap: wrap; overflow: visible; white-space: normal; -webkit-mask-image: none; mask-image: none; }
}
@container (min-width: 820px) {
  .mtt .mtt__card { grid-template-columns: 124px minmax(0, 1fr) auto; grid-template-areas: "media head actions" "media body actions" "lokal lokal lokal"; gap: 6px 28px; padding: 22px 28px; align-items: center; }
  .mtt .mtt__head { align-self: end; }
  .mtt .mtt__body { align-self: start; }
  .mtt .mtt__title { font-size: 24px; }
  .mtt .mtt__actions { flex-direction: column; align-items: flex-end; gap: 4px; }
  .mtt .mtt__link { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .mtt .mtt__btn { transition: none; } }