/* ============================================================
   Front Info Row: Mitteilungsblatt + WhatsApp-Kanal
   Einheitliches Layout, gleiche Bildhöhe, Buttons, Icons
   ============================================================ */

/* Zweispaltiges Layout für die Info-Reihe */
.front-info-row .front-two-col.has-both {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* Region-Wrapper als Flex, damit der Block die volle Höhe bekommt */
.front-info-row .front-col--info {
  display: flex;
}

.front-info-row .front-col--info > div {
  flex: 1;
}

/* Gemeinsame Kartenbasis (beide Blöcke) */
.front-info-row #block-mittelstrimmig-base-mitteilungsblatt-2,
.front-info-row #block-mittelstrimmig-base-whatsappkanal-2 {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.4rem 1.6rem 1.5rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .05);
  box-sizing: border-box;
}

/* Individuelle Hintergründe */
.front-info-row #block-mittelstrimmig-base-mitteilungsblatt-2 {
  background: linear-gradient(180deg, #fbf7e6 0%, #f6ecd7 100%);
  border-color: #e3d9b9;
}

.front-info-row #block-mittelstrimmig-base-whatsappkanal-2 {
  background: linear-gradient(180deg, #e8f8f0 0%, #d6efe4 100%);
  border-color: #c4e3d3;
}

/* ============================================================
   Überschriften + Icons
   ============================================================ */

.front-info-row #block-mittelstrimmig-base-mitteilungsblatt-2 > h2,
.front-info-row #block-mittelstrimmig-base-whatsappkanal-2 > h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  line-height: 1.2;
}

/* Gemeinsame Icon-Kapsel vor der Überschrift */
.front-info-row #block-mittelstrimmig-base-mitteilungsblatt-2 > h2::before,
.front-info-row #block-mittelstrimmig-base-whatsappkanal-2 > h2::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04);
  font-size: 1.05rem;
}

/* Konkrete Icons (Font Awesome) */
.front-info-row #block-mittelstrimmig-base-mitteilungsblatt-2 > h2::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  content: "\f1ea"; /* fa-newspaper */
  color: #a36f26;
}

.front-info-row #block-mittelstrimmig-base-whatsappkanal-2 > h2::before {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", sans-serif;
  font-weight: 400;
  content: "\f232"; /* fa-whatsapp */
  color: #128C7E;
}

/* ============================================================
   Bild + Text + Button – identisch für beide Karten
   Markup:
   <div>
     <a><img class="align-left"></a>
     <p>Text…</p>
     <p><a>Button</a></p>
   </div>
   ============================================================ */

.front-info-row #block-mittelstrimmig-base-mitteilungsblatt-2 > div,
.front-info-row #block-mittelstrimmig-base-whatsappkanal-2 > div {
  margin-top: .9rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.4rem;
  row-gap: .4rem;
  align-items: center;
}

/* Bild ankert links und geht über beide Textzeilen */
.front-info-row #block-mittelstrimmig-base-mitteilungsblatt-2 > div > a,
.front-info-row #block-mittelstrimmig-base-whatsappkanal-2 > div > a {
  grid-row: 1 / 3;
}

/* Bildgrößen angleichen */
.front-info-row #block-mittelstrimmig-base-mitteilungsblatt-2 img.align-left,
.front-info-row #block-mittelstrimmig-base-whatsappkanal-2 img.align-left {
  display: block;
  float: none;
  margin: 0;
  width: auto;
  max-width: 190px;
  height: 130px;              /* gleiche Bildhöhe */
  object-fit: contain;
}

/* Beschreibungstext */
.front-info-row #block-mittelstrimmig-base-mitteilungsblatt-2 > div p,
.front-info-row #block-mittelstrimmig-base-whatsappkanal-2 > div p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.45;
  color: rgba(0, 0, 0, .72);
}

/* ============================================================
   Buttons (letztes <p> in beiden Karten)
   ============================================================ */

.front-info-row #block-mittelstrimmig-base-mitteilungsblatt-2 > div p:last-child a,
.front-info-row #block-mittelstrimmig-base-whatsappkanal-2 > div p:last-child a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .55rem;
  padding: .45rem 1.05rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--ms-brand-ink, #7a5c26);
  background: color-mix(in srgb, var(--ms-brand, #b88b3b) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--ms-brand, #b88b3b) 30%, transparent);
  box-shadow:
    inset 0 1px 0 hsla(0, 0%, 100%, .9),
    inset 0 -1px 0 rgba(0, 0, 0, .06);
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

/* kleiner Pfeil im Button */
.front-info-row #block-mittelstrimmig-base-mitteilungsblatt-2 > div p:last-child a::after,
.front-info-row #block-mittelstrimmig-base-whatsappkanal-2 > div p:last-child a::after {
  content: "";
  width: .9em;
  height: .9em;
  background: currentColor;
  display: inline-block;
  transform: translateY(1px);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 3l9 5-9 5z'/></svg>") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 3l9 5-9 5z'/></svg>") center/100% 100% no-repeat;
}

.front-info-row #block-mittelstrimmig-base-mitteilungsblatt-2 > div p:last-child a:hover,
.front-info-row #block-mittelstrimmig-base-whatsappkanal-2 > div p:last-child a:hover,
.front-info-row #block-mittelstrimmig-base-mitteilungsblatt-2 > div p:last-child a:focus,
.front-info-row #block-mittelstrimmig-base-whatsappkanal-2 > div p:last-child a:focus {
  background: color-mix(in srgb, var(--ms-brand, #b88b3b) 22%, #fff);
  border-color: color-mix(in srgb, var(--ms-brand, #b88b3b) 45%, transparent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  transform: translateY(-1px);
  outline: 0;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 800px) {
  .front-info-row .front-two-col.has-both {
    grid-template-columns: 1fr;
  }
}
/* Abstand nach oben wie beim Bürgerservice-Block */
.content-panel > .front-info-row {
  margin-top: 32px;
}