/* ===== Mitteilungen – Compact / Rail Cards (CLEAN) ===================== */
/* Scope NUR auf den Mitteilungen-Compact-Block */
#block-mittelstrimmig-base-views-block-mitteilungen-compact{
  --border: rgba(0,0,0,.10);
  --line:   rgba(0,0,0,.12);
  --ink:    #213033;
  --muted:  #6b7a80;

  /* Markenfarben Mitteilungen (grün) */
  --brand:      #1f7a5a;
  --brand-ink:  #0f3c2c;

  /* Kategorien */
  --cat-m: #1f7a5a;   /* Mitteilung */
  --cat-p: #2a6f9e;   /* Sitzungsprotokoll */
  --cat-w: #b87900;   /* Hinweis/Warnung */
}

/* ================== Blocktitel (Typo wie „Termine“) =================== */
#block-mittelstrimmig-base-views-block-mitteilungen-compact > h2{
  display:flex; align-items:center; gap:.6rem;
  margin:0 0 .6rem 0;
  font-family: var(--font-sans,
  ui-sans-serif, system-ui, -apple-system, "Segoe UI",
  Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
  ) !important;
  font-weight:900 !important;
  font-size:clamp(1.45rem, 1.25rem + .4vw, 1.75rem) !important;
  line-height:1.1;
  letter-spacing:.2px;
  color:var(--brand-ink);
}
/* EIN Icon vor dem Titel – Font Awesome (fa-newspaper) */
#block-mittelstrimmig-base-views-block-mitteilungen-compact > h2::before{
  content: "\f1ea";                          /* fa-newspaper */
  font: 900 1.25rem/1 "Font Awesome 6 Free"; /* solid weight */
  display:inline-block;
  width:1.25em;
  text-align:center;
  transform: translateY(1px);
  color: var(--brand);
}

/* ====================== Liste & Kartenlayout ========================== */
#block-mittelstrimmig-base-views-block-mitteilungen-compact .notices-compact{
  display:grid; grid-template-columns:1fr; gap:16px;
  padding:0; /* bündig wie bei den Terminen */
}
#block-mittelstrimmig-base-views-block-mitteilungen-compact .notice.card{
  display:grid; grid-template-columns:10px 1fr; /* Rail-Breite wie Events */
  background:#fff; border:1px solid #e7eeea; border-radius:12px;
  box-shadow:0 1px 0 rgba(0,0,0,.03); margin:0;
}
#block-mittelstrimmig-base-views-block-mitteilungen-compact .notice .rail{
  background:linear-gradient(180deg,#6ec5a2,#3a7e65);
  border-radius:12px 0 0 12px;
}
/* Rail-Farben pro Kategorie */
#block-mittelstrimmig-base-views-block-mitteilungen-compact .notice.cat-protokoll .rail{
  background:linear-gradient(180deg,var(--cat-p),#215277);
}
#block-mittelstrimmig-base-views-block-mitteilungen-compact .notice.cat-warnung .rail{
  background:linear-gradient(180deg,var(--cat-w),#7a4e00);
}

/* Inhalt links, Thumbnail rechts */
#block-mittelstrimmig-base-views-block-mitteilungen-compact .notice .body{
  display:grid; grid-template-columns:1fr auto; gap:12px;
  padding:14px;
  align-items:stretch;           /* WICHTIG: Items auf volle Höhe strecken */
}
#block-mittelstrimmig-base-views-block-mitteilungen-compact .notice.has-thumb .body{
  min-height:102px;
}

/* Content-Spalte als Flex-Column → CTA unten „ankleben“ */
#block-mittelstrimmig-base-views-block-mitteilungen-compact .notice .content{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
#block-mittelstrimmig-base-views-block-mitteilungen-compact .notice .actions{
  margin-top:auto;               /* schiebt den Button nach unten */
}
#block-mittelstrimmig-base-views-block-mitteilungen-compact .notice .actions .cta{
  align-self:flex-start;         /* linksbündig lassen */
}

/* ======================= Meta: Datum + Kategorie ====================== */
#block-mittelstrimmig-base-views-block-mitteilungen-compact .meta{
  display:flex; align-items:center; gap:.8rem;
  margin:0 0 .55rem 0; color:var(--muted);
}
#block-mittelstrimmig-base-views-block-mitteilungen-compact .date-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:6px 10px; border-radius:999px; font-weight:800; font-size:.92rem;
  color:var(--brand-ink);
  background:color-mix(in srgb,var(--brand) 18%,#fff);
  border:1px solid color-mix(in srgb,var(--brand) 40%, #eee);
}
/* FA-Kalender-Icon im Datum */
#block-mittelstrimmig-base-views-block-mitteilungen-compact .date-pill i{
  font-size:1.05em; line-height:1; opacity:.95;
}

/* Kategorie (Icon + Text) */
#block-mittelstrimmig-base-views-block-mitteilungen-compact .cat{
  display:inline-flex; align-items:center; gap:.45rem; font-size:.95rem; line-height:1;
}
#block-mittelstrimmig-base-views-block-mitteilungen-compact .cat i{
  font-size:1.05em; line-height:1; opacity:.95;
}
/* Farb-Akzent je Kategorie für das Icon */
#block-mittelstrimmig-base-views-block-mitteilungen-compact .notice.cat-mitteilung .cat i{ color:var(--cat-m); }
#block-mittelstrimmig-base-views-block-mitteilungen-compact .notice.cat-protokoll .cat i{ color:var(--cat-p); }
#block-mittelstrimmig-base-views-block-mitteilungen-compact .notice.cat-warnung   .cat i{ color:var(--cat-w); }

/* =================== Titel (angepasst: etwas leichter/kleiner) ======= */
#block-mittelstrimmig-base-views-block-mitteilungen-compact .t{
  font-family: var(--font-sans,
  ui-sans-serif, system-ui, -apple-system, "Segoe UI",
  Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif
  ) !important;
  font-weight:700 !important;  /* vorher 900 → jetzt 700 */
  font-size:clamp(1.10rem, 1.00rem + 0.35vw, 1.45rem) !important;
  line-height:1.15; letter-spacing:.2px;
  margin:0 0 .55rem 0;
  color:var(--ink);
}
#block-mittelstrimmig-base-views-block-mitteilungen-compact .t a{
  color:inherit !important;
  text-decoration:none !important;
  font-weight:inherit !important;
}

/* ========================== CTA (grüner Ring) ========================= */
#block-mittelstrimmig-base-views-block-mitteilungen-compact .actions .cta{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  text-decoration:none;
}
#block-mittelstrimmig-base-views-block-mitteilungen-compact .actions .cta:hover{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent);
  text-decoration:none;
}
#block-mittelstrimmig-base-views-block-mitteilungen-compact .actions .cta:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 35%, transparent);
}
#block-mittelstrimmig-base-views-block-mitteilungen-compact .actions .cta:active{
  transform:translateY(1px);
}

/* ======================== Thumbnail rechts =========================== */
#block-mittelstrimmig-base-views-block-mitteilungen-compact .thumb-right{
  width:130px;                 /* wie vorher */
  justify-self:end;
}
#block-mittelstrimmig-base-views-block-mitteilungen-compact .thumb-right img{
  display:block;
  width:100%;                  /* füllt die 130px Breite */
  height:auto;                 /* behält Seitenverhältnis */
  object-fit:contain;          /* KEIN Beschnitt */
  border-radius:10px;
  border:1px solid #e2e8f0;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
@media (max-width:560px){
  #block-mittelstrimmig-base-views-block-mitteilungen-compact .thumb-right{ width:100px; }
  #block-mittelstrimmig-base-views-block-mitteilungen-compact .thumb-right img{ width:100%; height:auto; }
}

/* ===================== Footer-Button: „Alle Mitteilungen“ ============ */
#block-mittelstrimmig-base-views-block-mitteilungen-compact .view-footer-link{ margin:8px 0 0; }
#block-mittelstrimmig-base-views-block-mitteilungen-compact .btn-more{
  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:var(--brand-ink);
  background:color-mix(in srgb, var(--brand) 12%, white);
  border:1px solid color-mix(in srgb, var(--brand) 25%, 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;
}
#block-mittelstrimmig-base-views-block-mitteilungen-compact .btn-more:hover{
  background:color-mix(in srgb, var(--brand) 20%, white);
  border-color:color-mix(in srgb, var(--brand) 40%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  transform:translateY(-1px);
}
/* nur EIN Pfeil: via <span class="ic"> im Twig */
#block-mittelstrimmig-base-views-block-mitteilungen-compact .btn-more .ic{
  width:1em; height:1em; 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;
}

/* ===================== View-Page: Titel & Pager ====================== */
.view-mitteilungen.view-display-id-page_1 .view__title{
  display:flex; align-items:center; gap:.6rem;
  margin:0 0 .6rem 0;
  font-family: var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif) !important;
  font-weight:900 !important;
  font-size:clamp(1.45rem, 1.25rem + .4vw, 1.75rem) !important;
  line-height:1.1; letter-spacing:.2px; color:var(--brand-ink, #0f3c2c);
}
/* Seitentitel-Icon – Font Awesome (fa-newspaper) */
.view-mitteilungen.view-display-id-page_1 .view__title::before{
  content: "\f1ea";                          /* fa-newspaper */
  font: 900 1.25rem/1 "Font Awesome 6 Free"; /* solid weight */
  display:inline-block;
  width:1.25em;
  text-align:center;
  transform: translateY(1px);
  color: var(--brand, #1f7a5a);
}
.view-mitteilungen.view-display-id-page_1 .pager { margin-top: 2rem; }
.view-mitteilungen.view-display-id-page_1 .pager__items{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
}
.view-mitteilungen.view-display-id-page_1 .pager__item a,
.view-mitteilungen.view-display-id-page_1 .pager__item.is-active{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.4rem; height:2.4rem; padding:0 .75rem;
  border:1px solid var(--border, rgba(0,0,0,.12));
  border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05);
  font-weight:600; text-decoration:none;
}
.view-mitteilungen.view-display-id-page_1 .pager__item.is-active{
  background:var(--brand-100, #eaf4ee);
  border-color:var(--brand-300, #92b39b);
}
.view-mitteilungen.view-display-id-page_1 .pager__item a:hover{
  background:var(--brand-50, #f3f8f5);
}
/* Mitteilungen: Desktop rechts, mobil unter dem Titel */
.notices-compact .notice .body{ position: relative; }
.notices-compact .notice.has-thumb .content{ padding-right: 146px; } /* 130 + 16 */
.notices-compact .notice .thumb-right{
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 130px;
}
@media (max-width:560px){
  .notices-compact .notice.has-thumb .content{ padding-right: 0; }
  .notices-compact .notice .thumb-right{ position: static; transform:none; width:100%; margin:.4rem 0 .2rem; }
  .notices-compact .notice .thumb-right img{ width:100%; height:auto; border-radius:12px; object-fit:contain; }
}