/* ============================================================
   blank.css – SuS 21 Oberhausen e.V.
   Projekt-ID: 1773687490
   NUR zContent-Systemklassen für den TinyMCE-%CONTENT%-Bereich
   Upload-Pfad: /css-file/1773687490-blank.css
   ============================================================ */

/* ── Editor-Body: Vorschau im TinyMCE ────────────────────────── */
html, body {
  font-family: 'Lato', 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  color: #1a1a1a;
}

/* ── Basis HTML-Elemente ──────────────────────────────────────── */
p {
  margin-bottom: 0.85em;
  line-height: 1.4;
}
h1 { font-size: 2.0rem; font-weight: 700; color: #0f4224; margin-bottom: 0.6em; }
h2 { font-size: 1.6rem; font-weight: 700; color: #1a6e3c; margin-bottom: 0.55em; }
h3 { font-size: 1.3rem; font-weight: 700; color: #1a6e3c; margin-bottom: 0.5em; }
h4 { font-size: 1.1rem;   font-weight: 700; color: #1a6e3c; margin-bottom: 0.45em; }
h5 { font-size: 1.0rem; font-weight: 600; margin-bottom: 0.4em; }
h6 { font-size: 0.95rem;  font-weight: 600; margin-bottom: 0.35em; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  margin-top: 0;
}

a              { color: #1a6e3c; text-decoration: none; }
a:hover        { color: #0f4224; text-decoration: underline; }
strong, b      { font-weight: 700; }
em, i          { font-style: italic; }

ul, ol         { padding-left: 1.4em; margin-bottom: 0.85em; }
li             { margin-bottom: 0.25em; line-height: 1.6; }
ul li::marker  { color: #1a6e3c; }
ol li::marker  { color: #1a6e3c; font-weight: 600; }

hr {
  border: none;
  border-top: 1px solid #d0e8d9;
  margin: 1.4em 0;
}

blockquote {
  border-left: 4px solid #1a6e3c;
  background: #e8f4ed;
  margin: 1em 0;
  padding: 10px 16px;
  border-radius: 0 6px 6px 0;
}
blockquote p   { margin: 0; color: #1a4a2a; font-style: italic; }

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
  font-size: 0.88rem;
}
table th {
  background: #1a6e3c;
  color: #ffffff;
  padding: 7px 10px;
  text-align: left;
  font-weight: 700;
}
table td {
  padding: 6px 10px;
  border-bottom: 1px solid #ececec;
}
table tr:hover td          { background: #f0f8f3; }
table tr:last-child td     { border-bottom: none; }

img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.bild {margin-top:5px; margin-right:10px;}

/* ── zContent Systemklassen ───────────────────────────────────── */

/* Standardtext */
.normal        { font-size: 1.05rem; line-height: 1.4; }
.text          { font-size: 1.05rem; line-height: 1.4; }
.pokal         {
  background: #1a6e3c;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 700;
  display: inline-block;
}

/* Überschriften */
.ueberschrift  {
  font-size: 1.30rem;
  font-weight: 700;
  color: #1a6e3c;
  margin-bottom: 0.5em;
  line-height: 1.65;
}
.ueberschrift2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f4224;
  margin-bottom: 0.4em;
}
.ueberschrift3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #555555;
  margin-bottom: 0.35em;
}

/* Links */
.link          { color: #1a6e3c; font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.link:hover    { color: #0f4224; text-decoration: underline; }
.link_aktiv    { color: #0f4224; font-weight: 700; font-size: 1.05rem; text-decoration: underline; }

/* Formular / Tabellen-Hilfsklassen */
.auswahl {
  border: 1.5px solid #b8ddc8;
  border-radius: 5px;
  padding: 7px 10px;
  font-size: 1.0rem;
  width: 100%;
  transition: border-color 0.15s;
}
.auswahl:focus {
  outline: none;
  border-color: #1a6e3c;
  box-shadow: 0 0 0 3px rgba(26,110,60,0.12);
}
.bemerkung {
  font-size: 0.88rem;
  color: #888888;
  font-style: italic;
  margin-top: 3px;
  display: block;
}

/* Zentrierte Logo-Box */
.logo-box {
  text-align: center;
  margin-bottom: 1.4em;
}
.logo-box img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* ══════════════════════════════════════════════════════════
   NEWS-LISTE (%NEWS% Modul) – article_panel Styling
   Klassen: Bootstrap 3/4 + zContent CMS
   ══════════════════════════════════════════════════════════ */

/* ── Artikel-Karte ── */
.panel.panel-sub,
.article_panel {
  background: #ffffff;
  border: 1px solid #e0ede6;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  margin-bottom: 18px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.panel.panel-sub:hover,
.article_panel:hover {
  box-shadow: 0 3px 12px rgba(26,110,60,0.12);
}

/* ── Artikel-Heading ── */
.article_panel .panel-heading {
  background: #1a6e3c;
  padding: 10px 16px;
  border-bottom: none;
  border-radius: 7px 7px 0 0;
}
.article_panel .panel-heading h3 {
  font-family: 'Lato', 'Open Sans', Arial, sans-serif;
  font-size: 1.0rem;
  font-weight: 700;
  font-style: italic;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

/* ── Artikel-Body ── */
.panel-body.article {
  padding: 14px 16px;
}
.panel-body.article .row {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* ── Thumbnail-Bild ── */
.panel-body.article .col-md-3 {
  flex: 0 0 120px;
  max-width: 120px;
  padding-right: 14px;
}
.panel-body.article img.thumbnail,
.panel-body.article img.img-responsive {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
  border: none;
  display: block;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* ── Text-Spalte ── */
.panel-body.article .col-md-9 {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #333333;
}

/* ── Weiterlesen-Link ── */
.panel-body.article .col-md-9 span > a,
.panel-body.article a[href*="weiterlesen"],
.panel-body.article span > a {
  color: #1a6e3c;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  display: inline-block;
  margin-top: 4px;
}
.panel-body.article span > a:hover {
  color: #0f4224;
  text-decoration: underline;
}

/* ── Panel-Footer (Tags + Datum) ── */
.article_panel .panel-footer {
  background: #f6faf8;
  border-top: 1px solid #e0ede6;
  padding: 7px 16px;
  font-size: 0.78rem;
  color: #888888;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.article_panel .panel-footer a {
  color: #888888;
  text-decoration: none;
}
.article_panel .panel-footer a:hover {
  color: #1a6e3c;
}
.article_panel .panel-footer i {
  margin-right: 3px;
}

/* ── Pagination ── */
.pagination > li > a,
.pagination > li > span {
  color: #1a6e3c;
  border-color: #d0e8d9;
}
.pagination > .active > a,
.pagination > .active > span {
  background-color: #1a6e3c;
  border-color: #1a6e3c;
  color: #fff;
}
.pagination > li > a:hover {
  background: #e8f4ed;
  color: #0f4224;
  border-color: #b8ddc8;
}

/* ── zcontent_news Trennlinie zwischen Nachrichten ── */
table.zcontent_news {
  border-bottom: 1px solid #d0e8d9;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
table.zcontent_news:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

/* ── Impressum-Tabelle ── */
.impressum-table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.impressum-table td { padding: 6px 10px; border-bottom: 1px solid #ececec; font-size: 1.0rem; vertical-align: top; white-space: nowrap; }
.impressum-table tr:last-child td { border-bottom: none; }

/* ── Impressum-Tabelle ── */
.impressum-table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.impressum-table td { padding: 6px 10px; border-bottom: 1px solid #ececec; font-size: 1.0rem; vertical-align: top; white-space: nowrap; }
.impressum-table tr:last-child td { border-bottom: none; }

/* ── Partner-/Sponsoren-Logo-Grid ── */
.bildergalerie-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 1.4em;
}
.sponsor-logo-kachel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 14px;
  transition: box-shadow 0.15s;
  text-decoration: none;
}
.sponsor-logo-kachel:hover {
  box-shadow: 0 2px 10px rgba(26,110,60,0.12);
  border-color: #b8ddc8;
}
.sponsor-logo {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  display: block;
  filter: grayscale(20%);
  opacity: 0.88;
  transition: filter 0.2s, opacity 0.2s;
  border-radius: 0;
}
.sponsor-logo-kachel:hover .sponsor-logo {
  filter: grayscale(0);
  opacity: 1;
}

/* ── Partner-Banner 1200×300 (4:1) ── */
.img-partner-banner {
  display: block;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 4/1;
  object-fit: cover;
  border-radius: 6px;
  margin: 0 auto 20px;
}

/* ── Partner-Logo-Kachel 800×400 (2:1 Panorama) ── */
.sponsor-logo-partner {
  width: 100%;
  aspect-ratio: 2/1;
  object-fit: contain;
  display: block;
  background: #f8f8f8;
  border-radius: 4px;
  filter: grayscale(20%);
  opacity: 0.88;
  transition: filter 0.2s, opacity 0.2s;
}
.sponsor-logo-kachel:hover .sponsor-logo-partner {
  filter: grayscale(0);
  opacity: 1;
}

/* ── galerie-foto Bild: kein border-radius ── */
.galerie-foto img {
  border-radius: 0;
  display: block;
  width: 100%;
  height: auto;
}

.vorstand-funktion { font-size: 0.75rem; color: #1a6e3c; font-style: italic; margin: 0; }
.website-space {margin:20px auto; min-height:580px;}