/* ==== Globale Sidebar-Block-Überschriften ================================= */
/* Scope: nur innerhalb der Sidebar-Region (.aside). Passt auf alle Blöcke. */
.aside [id^="block-"] > h2,
.aside .block > h2{
  --heading-bg: var(--brand, var(--brand-green, #2f6b4f));
  --heading-ink: #fff;
  --heading-radius: 10px;

  display:flex; align-items:center; gap:.6rem;
  margin:0 0 .6rem;
  padding:.65rem .75rem;
  font-size:1.2rem;
  line-height:1.15;
  font-weight:800;
  letter-spacing:.01em;

  background: var(--heading-bg);
  color: var(--heading-ink);
  border:0;
  border-radius: var(--heading-radius);
}

/* Standard: kein Icon – pro Block optional über ein ::before hinzufügen */
.aside [id^="block-"] > h2::before,
.aside .block > h2::before{ content:none; }

/* Etwas Luft zum Inhalt */
.aside [id^="block-"] > h2 + *,
.aside .block > h2 + *{ margin-top:.35rem; }

/* Opt-out: Überschrift im Plain-Style lassen (z. B. für spezielle Blöcke) */
.aside .headline-plain > h2{
  background:transparent; color:inherit; border:0; border-radius:0;
  padding:0; margin:0 0 .6rem;
}
.aside .headline-plain > h2::before{ content:none !important; }

/* Beispiel: Icon je Block (optional, ergänzbar) */
#block-mittelstrimmig-base-views-block-termine-termine-sidebar > h2::before{
  content:""; width:1.1rem; height:1.1rem; transform:translateY(1px);
  background: no-repeat 50%/100% 100%;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' \
fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<rect x='3' y='4' width='18' height='18' rx='2' ry='2'/>\
<line x1='16' y1='2' x2='16' y2='6'/>\
<line x1='8' y1='2' x2='8' y2='6'/>\
<line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
#block-mittelstrimmig-base-wetter2 > h2::before{
  content:""; width:1.1rem; height:1.1rem; transform:translateY(1px);
  background:no-repeat 50%/100% 100%;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'>\
<path d='M7 18a5 5 0 1 1 2.2-9.5A6 6 0 0 1 21 12a4 4 0 0 1-1 7H7z'/></svg>");
}

/* Dark-Mode (optional, falls du System-Theme nutzt) */
@media (prefers-color-scheme: dark){
  .aside [id^="block-"] > h2,
  .aside .block > h2{
    --heading-bg: var(--brand-dark, #245641);
  }
}

/* Wetter-Widget im Sidebar-Block immer auf Blockbreite ziehen */
#block-mittelstrimmig-base-wetter2 p {
  margin: 0;                   /* kein zusätzlicher Außenabstand */
}

#block-mittelstrimmig-base-wetter2 iframe[name="CW2"]{
  display: block;              /* damit keine Inline-Lücken entstehen */
  width: 100% !important;      /* überschreibt width="305" im Markup */
  max-width: 100%;
  height: 285px;               /* Originalhöhe beibehalten
  border-radius: 13px;
  border: 0px solid #ffbe00;
  box-sizing: border-box;      /* Border mit in die Breite einrechnen */
}
/* Abstand unter dem Wetter-Block zum nächsten Block */
#block-mittelstrimmig-base-wetter2{
  margin-block-end: 16px;   /* = margin-bottom */
}

/* (lassen wir oben weiterhin bündig) */
#block-mittelstrimmig-base-wetter2 .field--name-body > p{
  margin: 0;                 /* oben/seitlich 0, Abstand macht der Block selbst */
}

/* === Blocktitel: dezenter Grün-Verlauf (hell → dunkel) ================ */
/* WICHTIG: auch [id^="block-"] matchen, weil viele Wrapper kein .block haben */
.region-sidebar-first [id^="block-"] > h2,
.region-sidebar-second [id^="block-"] > h2,
.region-sidebar-first .block > h2,
.region-sidebar-second .block > h2,
.aside [id^="block-"] > h2,
.aside .block > h2,
.aside .block .block-title{
  /* Fallback + eigentlicher Verlauf */
  background-color:#1f5f44;
  background-image:linear-gradient(
    90deg,
    color-mix(in srgb, #1f5f44 70%, #ffffff) 0%,
    #1f5f44 100%
  );
  color:#fff;
  background-clip:padding-box;
}

/* Falls der Titel verlinkt ist: gleiche Farbe, ohne Unterstreichung */
.region-sidebar-first .block > h2 a,
.region-sidebar-second .block > h2 a,
.region-sidebar-first .block .block-title a,
.region-sidebar-second .block .block-title a,
.aside [id^="block-"] > h2 a,
.aside .block > h2 a,
.aside .block .block-title a{
  color:inherit;
  text-decoration:none;
}