/* ==== 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>");
}

/* ► Mitteilungen-Blocktitel mit FA-News-Icon */
#block-mittelstrimmig-base-views-block-mitteilungen-mitteilungen-sidebar > h2::before,
#block-mittelstrimmig-base-views-block-mitteilungen-sidebar > h2::before,
[id^="block-"][id*="views-block-mitteilungen-"][id*="-sidebar"] > h2::before{
  content: "\f1ea";                          /* fa-newspaper */
  font: 900 1.05rem/1 "Font Awesome 6 Free"; /* solid */
  display:inline-block;
  width:1.25em;
  text-align:center;
  transform: translateY(1px);
  color: currentColor;                        /* bleibt weiß wie die Überschrift */
}

/* Dark-Mode (optional) */
@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; }
#block-mittelstrimmig-base-wetter2 iframe[name="CW2"]{
  display: block;
  width: 100% !important;
  max-width: 100%;
  border-radius: 13px;
  border: 0px solid #ffbe00;
  box-sizing: border-box;
}
#block-mittelstrimmig-base-wetter2{ margin-block-end: 16px; }
#block-mittelstrimmig-base-wetter2 .field--name-body > p{ margin: 0; }

/* === Blocktitel: dezenter Grün-Verlauf (hell → dunkel) ================ */
.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{
  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 */
.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;
}

/* ===================================================================== */
/*            ►►  MITTEILUNGEN-SIDEBAR-LISTE: Pfeil + Hover              */
/* ===================================================================== */

/* Grundlayout pro Zeile */
.sidebar-notices .nv-row{
  padding:.55rem 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.sidebar-notices .nv-row:last-child{ border-bottom:0; }

/* Kopfzeile nur für Datum — etwas kompakter */
.sidebar-notices .nv-head{
  display:flex; align-items:center; gap:.55rem;
  min-height:1.2rem;               /* vorher 1.4rem */
}
/* (WICHTIG) Kein Pfeil mehr an der Kopfzeile */
.sidebar-notices .nv-head::before{ content:none !important; }

/* ► Datum-Pill: kleiner & flacher + Kalendersymbol links */
.sidebar-notices .nv-date.chip{
  --ink: #2f6b4f;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.22rem .60rem;           /* flacher */
  font-weight:800;
  font-size:.86rem;                /* kleiner */
  line-height:1.1;
  color:var(--ink);
  background:color-mix(in srgb, var(--ink) 12%, #fff);
  border:1px solid color-mix(in srgb, var(--ink) 35%, #eee);
  border-radius:999px;
}
.sidebar-notices .nv-date.chip::before{
  content:"";
  width:.95rem; height:.95rem; flex:0 0 .95rem;
  transform: translateY(1px);
  background:no-repeat 50%/100% 100%;
  /* SVG nutzt currentColor → Icon hat automatisch die gleiche Farbe wie der Text */
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \
stroke='currentColor' 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>");
}

/* ► Titelzeile MIT Pfeil */
.sidebar-notices .nv-title{
  margin-top:.45rem;
  display:flex; align-items:baseline; gap:.45rem;
}
/* Der Bullet-Pfeil: zuerst GEFÜLLT … */
.sidebar-notices .nv-title::before{
  content:"";
  width:0.95rem; height:0.95rem; flex:0 0 0.95rem;
  background:no-repeat 50%/100% 100%;
  margin-left:.1rem;
  transform: translateY(1px);
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='%232f6b4f'>\
<path d='M5 3l10 6-10 6z'/></svg>");
  transition:filter .18s ease, opacity .18s ease;
}
/* … und bei Hover/Focus OUTLINED */
.sidebar-notices .nv-row:hover .nv-title::before,
.sidebar-notices .nv-row:focus-within .nv-title::before{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%232f6b4f' stroke-width='2' stroke-linejoin='round'>\
<path d='M5 3l10 6-10 6z'/></svg>");
}

/* Link-Styling */
.sidebar-notices .nv-link{
  display:inline;                /* Textfluss wie normaler Link */
  text-decoration:none;
  font-weight:700;
  color:#213033;
}
.sidebar-notices .nv-link:hover{ text-decoration:underline; }
.sidebar-notices .nv-link:focus-visible{
  outline:2px solid color-mix(in srgb, #2f6b4f 45%, transparent);
  outline-offset:2px;
}
/* === “Alle Mitteilungen” (Views more-link) als dezenter grüner Pill-Button */
[id^="block-"][id*="views-block-mitteilungen-"][id*="-sidebar"] .more-link{ margin-top:10px; }
[id^="block-"][id*="views-block-mitteilungen-"][id*="-sidebar"] .more-link a{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:calc(.55rem + 1px) calc(.95rem + 2px);
  border-radius:999px;
  font-weight:700; line-height:1; text-decoration:none;
  color:#0f3c2c;
  background:color-mix(in srgb, #2f6b4f 12%, white);
  border:1px solid color-mix(in srgb, #2f6b4f 30%, transparent);
  box-shadow:inset 0 1px 0 hsla(0,0%,100%,.9), inset 0 -1px 0 rgba(0,0,0,.05);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
[id^="block-"][id*="views-block-mitteilungen-"][id*="-sidebar"] .more-link a:hover{
  background:color-mix(in srgb, #2f6b4f 20%, white);
  border-color:color-mix(in srgb, #2f6b4f 45%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  transform:translateY(-1px);
}
/* Pfeil rechts im Button */
[id^="block-"][id*="views-block-mitteilungen-"][id*="-sidebar"] .more-link a::after{
  content:"";
  width:1em; height:1em; display:inline-block; background:currentColor; 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;
}
/* === Termine-Sidebar: Einrückung & Vertikalabstände ===================== */
/* Berechnung: 10px Basis-Einzug + 0.95rem Pfeil + 0.45rem Gap */
.view-ms-sidebar-termine{
  --ms-title-left: 10px;    /* linker Einzug des Titels (ohne Pfeil)   */
  --ms-tri: .95rem;         /* Breite des Pfeil-Icons (::before)        */
  --ms-gap: .45rem;         /* Abstand zwischen Pfeil und Titeltext      */
  --ms-align: calc(var(--ms-title-left) + var(--ms-tri) + var(--ms-gap));
}

/* Uhrzeit & Ort links bündig mit dem Titeltext ausrichten */
.view-ms-sidebar-termine .ms-side-meta{
  margin-left: var(--ms-align);
}

/* Weniger Abstand zwischen Datumspille und Titel */
.view-ms-sidebar-termine .ms-datepill{
  margin-bottom: 4px;        /* vorher größer – jetzt kompakter zum Titel */
}
.view-ms-sidebar-termine .ms-side-title{
  margin-top: 0;             /* ggf. Restabstand nach oben entfernen      */
}

/* Mehr Luft NACH Uhrzeit/Ort bis zum nächsten Datum */
.view-ms-sidebar-termine .ms-side-meta{
  margin-bottom: 14px;       /* visueller Blockabstand zur nächsten Pille */
}

/* (optional) Falls die Meta-Zeile zu dicht ist, leicht entzerren */
.view-ms-sidebar-termine .ms-side-meta > * + *{
  margin-left: .6rem;
}
/* === Termine-Sidebar: exakte Einrückung + Abstände ===================== */
/* Pfeilbreite & Gap wie in deiner Titelzeile – daraus wird die Einrückung berechnet */
.view-ms-sidebar-termine{
  --ms-title-left: 10px;   /* linker Einzug der Titelzeile (ohne Pfeil) */
  --ms-tri: .95rem;        /* Breite/Höhe des kleinen Dreiecks (::before) */
  --ms-gap: .45rem;        /* Abstand zwischen Dreieck und Titeltext */
  --ms-align: calc(var(--ms-title-left) + var(--ms-tri) + var(--ms-gap));
}

/* Titel: wie gehabt, optional hier nochmal fixiert */
.view-ms-sidebar-termine .ms-side-title{
  margin-left: var(--ms-title-left) !important;
}

/* Uhrzeit & Ort: als Block bündig mit dem TitelTEXT einrücken */
.view-ms-sidebar-termine .ms-side-meta{
  margin-left: var(--ms-align) !important;
}

/* Sicherheit: falls irgendwo Kind-Elemente eigene Margins bekommen */
.view-ms-sidebar-termine .ms-side-meta > .ms-meta-line{
  margin-left: 0 !important;
}

/* Abstände feintunen */
.view-ms-sidebar-termine .ms-datepill{        /* weniger Abstand zur Titelzeile darunter */
  margin-bottom: 3px;
}
.view-ms-sidebar-termine .ms-side-title{
  margin-top: 0;
}

/* mehr Luft nach Uhrzeit/Ort bis zum nächsten Datum */
.view-ms-sidebar-termine .ms-side-meta{
  margin-bottom: 18px;     /* bei Bedarf 16–22px testen */
}