/* Mobile First */
.portal { max-width: var(--breite-max); margin: 0 auto; padding: 0 var(--abstand-m); }
.header { border-bottom: 2px solid var(--farbe-schwarz); padding: var(--abstand-m) 0 var(--abstand-s); margin-bottom: var(--abstand-s); }
.masthead { font-family: var(--schrift-serif); font-size: 2rem; font-weight: normal; letter-spacing: -0.5px; }
.header-date { font-size: 0.75rem; color: var(--farbe-grau-dunkel); margin-top: var(--abstand-xs); }
.rubriken { display: flex; gap: var(--abstand-m); padding: var(--abstand-s) 0; border-top: 1px solid var(--farbe-grau-mittel); border-bottom: 1px solid var(--farbe-grau-mittel); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rubriken::-webkit-scrollbar { display: none; }
.rubrik { font-size: 0.8rem; color: var(--farbe-grau-dunkel); white-space: nowrap; padding-bottom: 2px; }
.rubrik.active { color: var(--farbe-schwarz); font-weight: bold; border-bottom: 2px solid var(--farbe-schwarz); }
.ticker-bar { background: var(--farbe-grau-hell); border-bottom: 1px solid var(--farbe-grau-mittel); padding: var(--abstand-s) 0; display: flex; align-items: center; gap: var(--abstand-m); overflow: hidden; margin-bottom: var(--abstand-l); }
.ticker-label { font-size: 0.7rem; font-weight: bold; background: var(--farbe-schwarz); color: var(--farbe-weiss); padding: 2px 8px; white-space: nowrap; flex-shrink: 0; }
.ticker-text { font-size: 0.8rem; color: var(--farbe-grau-dunkel); white-space: nowrap; animation: ticker 20s linear infinite; }
@keyframes ticker { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } }
.main-grid { display: grid; grid-template-columns: 1fr; gap: var(--abstand-l); margin-bottom: var(--abstand-xl); }
.drei-spalten { display: grid; grid-template-columns: 1fr; gap: var(--abstand-l); border-top: 2px solid var(--farbe-schwarz); padding-top: var(--abstand-m); margin-bottom: var(--abstand-xl); }
.aufmacher-bild { width: 100%; height: 200px; background: var(--farbe-grau-hell); border: 1px solid var(--farbe-grau-mittel); margin-bottom: var(--abstand-m); display: flex; align-items: center; justify-content: center; color: var(--farbe-grau-dunkel); font-size: 0.8rem; }
.aufmacher-rubrik { font-size: 0.7rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: var(--farbe-akzent); margin-bottom: var(--abstand-xs); }
.aufmacher-titel { font-family: var(--schrift-serif); font-size: 1.5rem; line-height: 1.3; margin-bottom: var(--abstand-s); }
.aufmacher-teaser { font-size: 0.9rem; color: var(--farbe-grau-dunkel); line-height: 1.6; margin-bottom: var(--abstand-s); }
.aufmacher-meta { font-size: 0.75rem; color: var(--farbe-grau-dunkel); }
.artikel-klein { padding: var(--abstand-s) 0; border-bottom: 1px solid var(--farbe-grau-mittel); }
.artikel-klein:last-child { border-bottom: none; }
.artikel-klein-rubrik { font-size: 0.7rem; color: var(--farbe-grau-dunkel); margin-bottom: var(--abstand-xs); }
.artikel-klein-titel { font-size: 0.9rem; font-weight: bold; line-height: 1.4; }
.artikel-klein-meta { font-size: 0.75rem; color: var(--farbe-grau-dunkel); margin-top: var(--abstand-xs); }
.artikel-card-rubrik { font-size: 0.7rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: var(--farbe-akzent); margin-bottom: var(--abstand-xs); }
.artikel-card-titel { font-family: var(--schrift-serif); font-size: 1rem; line-height: 1.4; margin-bottom: var(--abstand-xs); }
.artikel-card-teaser { font-size: 0.85rem; color: var(--farbe-grau-dunkel); line-height: 1.5; }
.karte-section { border-top: 2px solid var(--farbe-schwarz); padding-top: var(--abstand-m); margin-bottom: var(--abstand-xl); }
.karte-titel { font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; color: var(--farbe-grau-dunkel); margin-bottom: var(--abstand-m); }
.karte-placeholder { width: 100%; height: 200px; background: var(--farbe-grau-hell); border: 1px solid var(--farbe-grau-mittel); display: flex; align-items: center; justify-content: center; color: var(--farbe-grau-dunkel); font-size: 0.8rem; }
.footer { border-top: 2px solid var(--farbe-schwarz); padding: var(--abstand-m) 0; display: flex; flex-direction: column; gap: var(--abstand-s); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--abstand-m); }
.footer-link { font-size: 0.75rem; color: var(--farbe-grau-dunkel); }
.footer-copy { font-size: 0.75rem; color: var(--farbe-grau-dunkel); }

/* Tablet ab 600px */
@media (min-width: 600px) {
  .masthead { font-size: 2.5rem; }
  .aufmacher-bild { height: 260px; }
  .aufmacher-titel { font-size: 1.75rem; }
  .drei-spalten { grid-template-columns: repeat(2, 1fr); }
  .footer { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* Desktop ab 1024px */
@media (min-width: 1024px) {
  .masthead { font-size: 3rem; }
  .main-grid { grid-template-columns: 2fr 1fr; gap: var(--abstand-xl); }
  .aufmacher { border-right: 1px solid var(--farbe-grau-mittel); padding-right: var(--abstand-xl); }
  .aufmacher-bild { height: 280px; }
  .aufmacher-titel { font-size: 2rem; }
  .drei-spalten { grid-template-columns: repeat(3, 1fr); }
}

/* ---- ARTIKEL EINZELANSICHT ---- */
.artikel-einzeln { max-width: var(--breite-artikel); margin: var(--abstand-xl) auto; }
.artikel-header { border-bottom: 1px solid var(--farbe-grau-mittel); padding-bottom: var(--abstand-m); margin-bottom: var(--abstand-l); }
.artikel-zusammenfassung { font-size: 1.1rem; font-style: italic; color: var(--farbe-grau-dunkel); margin-bottom: var(--abstand-l); border-left: 3px solid var(--farbe-akzent); padding-left: var(--abstand-m); }
.artikel-inhalt p { font-size: 1rem; line-height: 1.8; margin-bottom: var(--abstand-m); }
.artikel-quelle { margin-top: var(--abstand-xl); padding-top: var(--abstand-m); border-top: 1px solid var(--farbe-grau-mittel); font-size: 0.85rem; color: var(--farbe-grau-dunkel); }

/* ---- DREI SPALTEN GRID ---- */
.drei-spalten-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-l);
}

@media (min-width: 600px) {
  .drei-spalten-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .drei-spalten-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- DREI SPALTEN GRID ---- */
.drei-spalten-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-l);
}

@media (min-width: 600px) {
  .drei-spalten-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .drei-spalten-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.drei-spalten > div,
.drei-spalten > div > div,
.drei-spalten > div > div > div {
  width: 100%;
}

/* ---- DRUPAL CONTAINER FIX ---- */
.drei-spalten .views-element-container,
.drei-spalten .views-element-container > div,
.drei-spalten [class^="js-view-dom-id"] {
  width: 100%;
  display: block;
}

.drei-spalten-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-l);
  width: 100%;
}

@media (max-width: 1023px) {
  .drei-spalten-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
  .drei-spalten-grid { grid-template-columns: 1fr; }
}

/* ---- FIX DREI SPALTEN ---- */
.drei-spalten {
  display: block !important;
  width: 100%;
}

.drei-spalten-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--abstand-l);
  width: 100%;
}

@media (max-width: 1023px) {
  .drei-spalten-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 599px) {
  .drei-spalten-grid { grid-template-columns: 1fr !important; }
}

/* ---- TICKER NUR AUF STARTSEITE ---- */
body:not(.path-frontpage) .ticker-bar {
  display: none;
}

/* ---- TICKER FIX ---- */
.ticker-wrapper {
  overflow: hidden;
  flex: 1;
}

.ticker-text {
  display: inline-block;
  white-space: nowrap;
  animation: ticker 20s linear infinite;
  font-size: 0.8rem;
  color: var(--farbe-grau-dunkel);
}

.ticker-text a {
  color: var(--farbe-grau-dunkel);
  text-decoration: none;
}

.ticker-text a:hover {
  color: var(--farbe-schwarz);
}

/* ---- TICKER FIX ---- */
.ticker-wrapper {
  overflow: hidden;
  flex: 1;
}

.ticker-text {
  display: inline-block;
  white-space: nowrap;
  animation: ticker 20s linear infinite;
  font-size: 0.8rem;
  color: var(--farbe-grau-dunkel);
}

.ticker-text a {
  color: var(--farbe-grau-dunkel);
  text-decoration: none;
}

.ticker-text a:hover {
  color: var(--farbe-schwarz);
}

/* ---- TICKER GESCHWINDIGKEIT ---- */
.ticker-text {
  animation-duration: 60s !important;
}

/* ---- BILD ---- */
.artikel-bild-figure {
  margin: 0 0 var(--abstand-m) 0;
  width: 100%;
}

.artikel-bild-img {
  width: 100%;
  height: auto;
  display: block;
}

.artikel-bild-caption {
  font-size: 0.8rem;
  color: var(--farbe-grau-dunkel);
  padding: var(--abstand-xs) 0;
  border-bottom: 1px solid var(--farbe-grau-mittel);
  font-style: italic;
}

/* ---- BILDUNTERSCHRIFT & MEDIENRECHTE ---- */
.artikel-bild-caption {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--farbe-grau-dunkel);
  padding: var(--abstand-xs) 0;
  border-bottom: 1px solid var(--farbe-grau-mittel);
  font-style: italic;
}

.medienrechte {
  white-space: nowrap;
  margin-left: var(--abstand-m);
}

/* ---- BILD CAPTION FORMATIERUNG ---- */
.artikel-bild-figure {
  margin: 0 0 var(--abstand-l) 0;
  width: 100%;
}

.artikel-bild-caption {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--abstand-xs) 0;
  border-bottom: 1px solid var(--farbe-grau-mittel);
}

.bildunterschrift {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--farbe-grau-dunkel);
  text-align: left;
}

.medienrechte {
  font-size: 0.7rem;
  color: var(--farbe-grau-dunkel);
  text-align: right;
  white-space: nowrap;
  margin-left: var(--abstand-m);
}

/* ---- CAPTION GEWICHTUNG ---- */
.bildunterschrift {
  font-size: 0.9rem !important;
  font-style: italic !important;
  color: var(--farbe-schwarz) !important;
  font-weight: normal;
}

.medienrechte {
  font-size: 0.7rem !important;
  color: var(--farbe-grau-dunkel) !important;
  text-align: right;
  white-space: nowrap;
  margin-left: var(--abstand-m);
  align-self: flex-end;
}

/* ---- CAPTION ABSTAND ---- */
.artikel-bild-caption {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--abstand-l);
  padding: var(--abstand-s) 0;
  border-bottom: 1px solid var(--farbe-grau-mittel);
  margin-bottom: var(--abstand-l);
}

/* ---- CAPTION LAYOUT NEU ---- */
.artikel-bild-caption {
  display: block !important;
}

.medienrechte {
  display: block;
  text-align: right !important;
  font-size: 0.7rem !important;
  color: var(--farbe-grau-dunkel) !important;
  margin: var(--abstand-xs) 0 var(--abstand-s) 0;
}

.bildunterschrift {
  display: block;
  text-align: left;
  font-size: 0.9rem !important;
  font-style: italic !important;
  color: var(--farbe-schwarz) !important;
  padding-top: var(--abstand-s);
  border-top: 1px solid var(--farbe-grau-mittel);
  width: 100%;
}

/* ---- CAPTION FEINTUNING ---- */
.artikel-bild-figure {
  margin-bottom: var(--abstand-l);
}

.medienrechte {
  display: block;
  text-align: right !important;
  font-size: 0.7rem !important;
  color: var(--farbe-grau-dunkel) !important;
  margin: 1px 0 var(--abstand-s) 0 !important;
  padding: 0 !important;
}

.bildunterschrift {
  display: block;
  text-align: left;
  font-size: 0.9rem !important;
  font-style: italic !important;
  color: var(--farbe-schwarz) !important;
  padding-top: var(--abstand-xs) !important;
  border-top: none !important;
  width: 100%;
}

/* ---- FIGURE ABSTAND OBEN ---- */
.artikel-bild-figure {
  margin-top: 0 !important;
}

/* ---- COPYRIGHT NACH OBEN ---- */
.medienrechte {
  margin-top: -15px !important;
}

/* ---- COPYRIGHT NACH OBEN ---- */
.medienrechte {
  margin-top: -12px !important;
}

/* ---- COPYRIGHT NACH OBEN ---- */
.medienrechte {
  margin-top: -12px !important;
}

/* ---- EINORDNUNG ---- */
.artikel-einordnung {
  background: #f8f8f4;
  border-left: 3px solid #2a5f2a;
  padding: 1em 1.2em;
  margin: 1.5em 0;
  border-radius: 0 4px 4px 0;
}
.artikel-einordnung--rubrik {
  border-left-color: #2a4a6f;
}
.einordnung-label {
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666;
  margin-bottom: 0.4em;
}
.einordnung-text {
  font-size: 0.95em;
  line-height: 1.6;
}

/* ---- ARTIKEL FOOTER ---- */
.artikel-footer {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.artikel-quelle-link {
  font-weight: 600;
  color: #2a4a6f;
  text-decoration: none;
}
.artikel-quelle-link:hover {
  text-decoration: underline;
}
.artikel-ki-hinweis {
  font-size: 0.78em;
  color: #888;
  font-style: italic;
}

/* ---- RUBRIKENMENÜ ---- */
.rubriken ul { list-style: none; margin: 0; padding: 0; display: contents; }
.rubriken ul li { margin: 0; padding: 0; display: contents; }
.rubriken ul li a { 
  text-decoration: none;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}

/* ---- RUBRIKENMENÜ SCHRIFTGRÖSSE ---- */
.rubriken ul li a {
  font-size: 0.8rem;
}

/* ---- FOOTER MENÜ ---- */
.footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5em;
  justify-content: center;
}
.footer nav ul li { margin: 0; padding: 0; }
.footer nav ul li a {
  color: inherit;
  text-decoration: none;
  font-size: 0.85rem;
}
.footer nav ul li a:hover { text-decoration: underline; }

/* ---- FOOTER MENÜ ---- */
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5em;
  justify-content: center;
}
.footer ul li { margin: 0; padding: 0; }
.footer ul li a {
  color: inherit;
  text-decoration: none;
  font-size: 0.85rem;
}
.footer ul li a:hover { text-decoration: underline; }

/* ---- AUFMACHER PLACEHOLDER ---- */
.aufmacher-bild-placeholder {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--abstand-m);
  border-radius: 4px;
}
.rubrik-demokratie-zivilgesellschaft { background: #1a3a5c; }
.rubrik-erneuerbare-energien          { background: #2d6a2d; }
.rubrik-wissenschaft                  { background: #4a235a; }
.rubrik-kultur-kunst                  { background: #7a2d00; }
.rubrik-musik                         { background: #7a1a3a; }
.rubrik-kooperationen-gemeinwohl      { background: #1a4a4a; }
.rubrik-regional-mv                   { background: #2a4a1a; }
.rubrik-sonstiges                     { background: #3a3a3a; }

/* ---- AUFMACHER OHNE BILD ---- */
.aufmacher--kein-bild {
  padding: 2em;
  color: #fff;
  border-radius: 6px;
}
.aufmacher--kein-bild .aufmacher-titel a { color: #fff; }
.aufmacher--kein-bild .aufmacher-rubrik  { color: rgba(255,255,255,0.8); }
.aufmacher--kein-bild .aufmacher-teaser  { color: rgba(255,255,255,0.9); }
.aufmacher--kein-bild .aufmacher-meta    { color: rgba(255,255,255,0.7); }

.rubrik-bg-demokratie-zivilgesellschaft { background: #1a3a5c; }
.rubrik-bg-erneuerbare-energien          { background: #2d6a2d; }
.rubrik-bg-wissenschaft                  { background: #4a235a; }
.rubrik-bg-kultur-kunst                  { background: #7a2d00; }
.rubrik-bg-musik                         { background: #7a1a3a; }
.rubrik-bg-kooperationen-gemeinwohl      { background: #1a4a4a; }
.rubrik-bg-regional-mv                   { background: #2a4a1a; }
.rubrik-bg-sonstiges                     { background: #3a3a3a; }

/* ---- OWID ARTIKEL ---- */
.artikel-zusammenfassung {
  font-style: normal;
  border-left: none;
}
.artikel-zusammenfassung p {
  font-style: normal;
  margin-bottom: 1em;
}
.owid-embed {
  margin: 0 0 1.5em 0;
}
.owid-embed figcaption {
  font-style: normal !important;
}

/* ---- OWID IFRAME ---- */
.owid-embed iframe {
  height: 550px;
  margin-top: -45px;
}
.owid-embed {
  overflow: hidden;
  border-radius: 4px;
}

/* ---- OWID IFRAME ---- */
.owid-embed iframe {
  height: 570px;
  margin-top: 20 px;
}
.owid-embed {
  overflow: hidden;
  border-radius: 4px;
}

/* ---- OWID IFRAME ---- */
.owid-embed iframe {
  height: 570px;
  margin-top: -16:wq px;
}
.owid-embed {
  overflow: hidden;
  border-radius: 4px;
}

/* ---- OWID IFRAME ---- */
.owid-embed iframe {
  height: 570px;
  margin-top: -16px;
}
.owid-embed {
  overflow: hidden;
  border-radius: 4px;
}