#sp-footer, #sp-bottom {
  padding:20px 10px !important;
  background-color:#1a1a1a !important;
}

/* === PRESSE: nur auf der Presse-Seite === */
.presse .com-content-category-blog {
  max-width: 980px;
  margin: 0 auto;
}

.presse .article-list .article {
  padding: 18px 18px;
  margin: 0 0 18px 0;
  border: 1px solid #E5E5E5;
  border-radius: 14px;
  background: #FFFFFF;
}


/* Titel (bei dir z.B. 2025 / 2023 / 12/2022) */
.presse .article-title {
  margin: 0 0 10px 0;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

/* Text schöner lesbar */
.presse .article {
  font-size: 17px;
  line-height: 1.7;
  color: #222222;
}

.presse h1 {
  margin-top:30px;
}
/* Links als klare CTA, nicht „pinkes irgendwas“ */
.presse a,
.presse a:visited {
  color: #6B1F2B;
  text-decoration: none;
}
.presse a:hover {
  color: #8A2A3A;
  text-decoration: underline;
}

/* „Zum Beitrag“ optisch als CTA */
.presse a[href*="zum-beitrag"],
.presse a:contains("Zum Beitrag") { /* falls :contains nicht greift, s.u. Alternative */
  font-weight: 600;
}

/* Wenn du keine :contains nutzen willst: Link im Editor mit Klasse versehen (siehe Punkt 3) */
.presse .presse-cta {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
}

/* YouTube / iFrame Embeds responsiv & hübscher */
.presse iframe,
.presse embed,
.presse object {
  max-width: 100%;
}

/* Wenn YouTube zu „klobig“ wirkt: runde Ecken + weniger Luft */
.presse iframe {
  border-radius: 10px;
  overflow: hidden;
}

/* Mobile: Titel etwas kleiner */
@media (max-width: 768px) {
  .presse .com-content-category-blog { padding: 0 16px; }
  .presse .article-title { font-size: 24px; }
}

/* PRESSE: H1 zentrieren und wie H2 darstellen */
.presse h1{
  text-align: center;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 22px 0;

  /* Optisch wie H2, automatisch skalierend */
  font-size: clamp(28px, 3.2vw, 40px);
}


.sppb-btn {
  text-transform: none !important;
}

.termine-wow{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.termine-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 14px 16px;
  border: 1px solid #E8E6E3;
  border-radius: 14px;
  background: #FFFFFF;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.termine-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  border-color: #D9D3CF;
}

.termine-datebox{
  width: 56px;
  min-width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #F6F4F2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.termine-day{
  font-size: 22px;
  font-weight: 700;
  color:#1A1A1A;
}

.termine-month{
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color:#6E6E6E;
  margin-top: 4px;
}

.termine-content{
  flex:1;
  min-width:0;
}

.termine-title{
  color:#1A1A1A;
  font-weight: 600;
  line-height:1.35;
}

.termine-meta{
  margin-top: 4px;
  color:#6E6E6E;
  font-size: 14px;
}

.termine-arrow{
  color:#6B1F2B;
  font-weight: 700;
  margin-left: 6px;
}

@media (max-width: 768px){
  .termine-card{
    padding: 12px 14px;
  }
  .termine-title{
    font-size: 16px;
  }
}

.termine-context{
  border: 1px solid #E8E6E3;
  border-radius: 16px;
  padding: 24px;
  background: linear-gradient(180deg, #FAF8F6 0%, #FFFFFF 100%);
}

.termine-context h3{
  margin: 0 0 8px 0;
}

.termine-context p{
  color:#5F5F5F;
  margin-bottom: 16px;
}

.termine-context a{
  color:#6B1F2B;
  font-weight:500;
  text-decoration:none;
}

.termine-context a:hover{
  text-decoration:underline;
}

/* === Termin-Fields als Card === */
.fields-container{
  list-style: none;
  margin: 0 0 18px 0;
  padding: 16px 18px;
  border: 1px solid #E8E6E3;
  border-radius: 16px;
  background: linear-gradient(180deg, #FAF8F6 0%, #FFFFFF 100%);
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* jede Zeile als flex-row: Label links, Wert rechts */
.fields-container .field-entry{
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

/* Label dezent */
.fields-container .field-label{
  color: #6E6E6E;
  font-size: 14px;
  min-width: 120px;
  white-space: nowrap;
}

/* Wert stärker */
.fields-container .field-value{
  color: #1A1A1A;
  font-weight: 500;
  line-height: 1.5;
}

/* Datum hervorheben */
.fields-container .field-entry.termin-datum .field-value{
  font-weight: 700;
}

/* Mobile: Label über Wert, damit nix bricht */
@media (max-width: 768px){
  .fields-container{
    padding: 14px 14px;
    border-radius: 14px;
  }

  .fields-container .field-entry{
    flex-direction: column;
    gap: 2px;
  }

  .fields-container .field-label{
    min-width: 0;
    white-space: normal;
  }
}
.fields-container .field-label{ display:none; }

.fields-container{
  max-width: 800px;
  margin: 0 auto 24px auto;
  padding: 20px 24px;
}

/* === Automatische Bildreihen – ohne Überskalierung === */

/* Absatz mit direkt enthaltenen Bildern */
p:has(> img){
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Bilder: NICHT aufblasen */
p:has(> img) > img{
  flex: 0 1 auto;            /* kein Aufblasen */
  width: auto !important;    /* respektiert HTML-Width */
  max-width: calc(33.333% - 12px);
  height: auto;
  border-radius: 12px;
  margin-top: 12px;
  object-fit: contain;
}

/* Genau 2 Bilder → 50 %, aber nur bis zur Originalgröße */
p:has(> img:first-child:nth-last-child(2)) > img{
  max-width: calc(50% - 12px);
}

/* Mobile: untereinander */
@media (max-width: 768px){
  p:has(> img){
    display: block;
  }
  p:has(> img) > img{
    max-width: 100%;
    width: auto !important;
    margin-top: 12px;
  }
}