/* =================== */
/*   Layout + Theming  */
/* =================== */
:root{
  --container: 1100px;
  --gutter: 1rem;

  --bg: #fff;
  --border: #e5e7eb;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.05);

  --accent: #111827;
  --accent-contrast: #fff;

  /* Header-Theming (von menu.css genutzt) */
  --header-bg: #111827;
  --header-fg: #fff;
  --header-gap: .5rem;    /* Abstand Logo <-> Menüzeile */
}

/* =================== */
/*   Page Layout/Grid  */
/* =================== */
.container{ max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); }

.inner-section{ padding-block: 1.25rem; }
@media (min-width: 48rem){ .inner-section{ padding-block: 2rem; } }

.row{ display:grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 48rem){ .row{ grid-template-columns: repeat(12, 1fr); gap: 1.25rem; } }

/* 12-col helpers */
.four-col{ grid-column: 1 / -1; }
.eight-col{ grid-column: 1 / -1; }
@media (min-width: 48rem){
  .four-col{ grid-column: span 4; }
  .eight-col{ grid-column: span 8; }
}

/* reorder mobile */
@media (max-width: 47.999rem){
  .push-four{ order: 2; }
  .pull-eight{ order: 1; }
}
@media (min-width: 48rem){
  .push-four, .pull-eight{ order: initial; }
}

/* Cards / surfaces */
.surface{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Content wrapper */
.content-wrapper{ min-height: 40vh; }
.content-inner{ display: grid; gap: 1rem; }

/* Breadcrumb border line */
.title-border{ display:block; height:2px; width:100%; background: var(--border); margin-top:.5rem; }

/* Back-to-top */
.back-top{ position: fixed; right: 1rem; bottom: 1rem; z-index: 50; }
#scroll-top{
  display:inline-flex; align-items:center; justify-content:center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--accent-contrast);
  box-shadow: var(--shadow);
}
#scroll-top:hover{ filter: brightness(1.08); }

/* =================== */
/*   Content + Sidebar */
/* =================== */
.grid{
  display:grid;
  grid-template-columns: 1fr;      /* mobil: einspaltig */
  gap: 1.2rem;
  align-items:start;
}
@media (min-width: 1000px){
  .grid{ grid-template-columns: minmax(0,1fr) 320px; } /* Inhalt | Sidebar */
}

/* Optik */
.content, .sidebar{
  background:#fafafa;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:clamp(1rem,1.5vw,1.5rem);
}

/* Titelleiste unter Header */
.page-header{ padding:.75rem 0; border-bottom:1px solid #e5e7eb; margin:0 0 1rem; }
.page-title{ margin:0; line-height:1.2; font-size:clamp(1.5rem, 1.1vw + 1.2rem, 2rem); }
.search{margin:0; line-height:0.2; float:right}

/* =================== */
/*       Header        */
/* =================== */
.site-header{
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Stapelt Logo (oben) und Navi (darunter) – auf allen Breakpoints */
.header-inner{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--header-gap);
  min-height: 64px;
}

.header-left{
  display:flex;
  align-items:center;
  gap:.75rem;
  width:100%;
  padding-inline:.5rem 0 ;
}

/* Marke/Logo */
.brand-link{
  display:inline; align-items:center; gap:.5rem;
  text-decoration:none; color: var(--header-fg);
}
.brand-link:hover{ text-decoration:none; color: var(--header-fg); }
.brand-logo{ height:48px; width:auto; display:block; }

/* Menüzeile (direkt unter dem Logo) nutzt volle Breite */
.site-header .main-nav{ width:100%; }

/* Optionaler Menü-Button (nur wenn Drawer genutzt werden soll) */
.menu-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  background: transparent; border:1px solid rgba(255,255,255,.45);
  color: var(--header-fg);
  padding:.4rem .6rem; border-radius:.4rem; cursor:pointer;
}
.menu-toggle:hover{ background: rgba(255,255,255,.08); }

/* =================== */
/*       Sidebar       */
/* =================== */
.sidebar .sidebar-section + .sidebar-section{ margin-top: 1rem; }
.sidebar .sidebar-title{ margin: 0 0 .5rem; font-size: 1.1rem; line-height: 1.2; }

/* Karten/Boxen & Trennung */
.sidebar .box{ background:transparent; padding:0 0 1rem; margin-top:1rem; }
.sidebar .box + .box{ border-top:1px solid #e5e7eb; padding-top:1rem; }

/* (Optional) kleine Überschriften */
.sidebar .box-title{ margin:0 0 .5rem; font-size:1.05rem; font-weight:600; }
.sidebar .contact-card .org{ margin:0 0 .25rem; }
.sidebar .contact-card .address,
.sidebar .contact-card .contact{ margin:.25rem 0 .75rem; }
.sidebar .donate-card p{ margin:.25rem 0; }

/* =================== */
/*     News-Listen     */
/* =================== */
.news-list{ list-style:none; margin:0; padding:0; }
.news-item{ padding:.4rem 0 .6rem; border-bottom:1px solid #eee; }
.news-item + .news-item{ margin-top:.35rem; }
.news-item:last-child{ border-bottom:0; }

.news-item__title{ margin:0 0 .2rem; font-size:1rem; font-weight:500; line-height:1.3; }
.news-item__title a{ color:inherit; text-decoration:none; }
.news-item__title a:hover{ text-decoration:underline; }

.news-date{ display:block; margin:0 0 .25rem; font-size:.85rem; color:#6b7280; font-weight:400; }

.news-item__summary{ margin:.25rem 0 .4rem; font-size:.95rem; line-height:1.45; }

.news-item__more{ margin:.2rem 0 0; font-size:.95rem; }
.btn-link{ all:unset; cursor:pointer; color:#0a58ca; }
.btn-link:hover{ text-decoration:underline; }

/* =================== */
/*     Pagination      */
/* =================== */
.pagination ul{
  display:flex; flex-wrap:wrap; gap:.25rem .5rem;
  list-style:none; margin:.5rem 0 0; padding:0;
}
.pagination li a, .pagination li span{
  display:block; padding:.4rem .6rem;
  border:1px solid #e5e7eb; border-radius:.4rem; text-decoration:none;
}
.pagination li.active span{ font-weight:600; background:#f3f4f6; }
.pagination li.disabled span{ opacity:.5; }
.pagination-info{ margin:.4rem 0 0; font-size:.9rem; opacity:.8; }

/* News-spezifisch */
.news-pagination{ margin-top:1rem; }
.news-pagination .pagination{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.25rem; align-items:center;
}
.news-pagination .pagination li{ display:inline-flex; }
.news-pagination .pagination a,
.news-pagination .pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.25rem; height:2.25rem;
  padding:.25rem .6rem;
  border:1px solid #e5e7eb; border-radius:.5rem; text-decoration:none;
}
.news-pagination .pagination a:hover{ background:#f8fafc; }
.news-pagination .pagination .current{
  background:#111827; color:#fff; border-color:#111827;
}
.news-pagination .pagination .disabled{
  opacity:.45; cursor:not-allowed; user-select:none;
}
.news-pagination .pagination .status{
  margin-left:.25rem; opacity:.7; border:0;
}

/* =================== */
/*  Screenreader-Only  */
/* =================== */
.visually-hidden{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important; border:0 !important;
  white-space:nowrap !important;
}
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus{
  position: static !important;
  width:auto !important; height:auto !important;
  margin:0 !important; overflow:visible !important;
  clip:auto !important; clip-path:none !important;
  white-space:normal !important;
}
/* Button standardmäßig sichtbar */
.menu-toggle{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background: transparent;
  border:1px solid rgba(255,255,255,.45);
  color: var(--header-fg);
  padding:.4rem .6rem;
  border-radius:.4rem;
  cursor:pointer;
}
.menu-toggle:hover{ background: rgba(255,255,255,.08); }

/* 👉 Nur mobil anzeigen */
@media (min-width: 900px){
  .menu-toggle{ display:none !important; }
}
/* Mobil: Desktop-Navi ausblenden, Drawer-Button bleibt */
@media (max-width: 899.98px){
  #site-nav{ display:none; }
}

/* Desktop: Navi normal anzeigen */
@media (min-width: 900px){
  #site-nav{ display:block; }
}