/* ═══════════════════════════════════════════════════════════
   KURIER – Startseite
   Konsolidierte Styles. Visuelles Ergebnis identisch zur
   vorigen Fassung – aber ohne unnötige Wiederholungen.
═══════════════════════════════════════════════════════════ */

/* ── Design-Tokens ─────────────────────────────────────── */
:root {
  --green:       #28A94D;
  --green-soft:  #DAF1D6;
  --green-link:  #3fb556;
  --green-border:#c4dfbf;
  --green-chip:  #b8dab4;
  --orange:      #EE580F;
  --orange-mid:  #f0804a;
  --text:        #111111;
  --text-soft:   #515151;
  --muted:       #707070;
  --border:      #cccccc;
  --bg:          #f7f4f4;
  --white:       #ffffff;
  --w:           960px;

  --serif:       Georgia, "Times New Roman", serif;
  --sans:        Arial, Helvetica, sans-serif;
  --shadow-sm:   0 2px 5px rgba(0,0,0,.08);
  --shadow-md:   0 2px 6px rgba(0,0,0,.09);
  --shadow-lg:   0 2px 8px rgba(0,0,0,.12);
	


  /* Fluides Spacing analog zum CMS-Utility .p-40 (20 px → 40 px) */
  --p-40: clamp(20px, calc(20px + (40 - 20) * ((100vw - 360px) / (1920 - 360))), 40px);

  /* Seitenflanken (Dekorationsbilder links/rechts vom Content) */
  --side-banner-w: 360px;
  --side-banner-h: 774px;
  --side-banner-gap: 60px;
  --side-banner-hide: 1440px;

  --topbar-h: 60px;
  --social-btn-size: 24px;
  --circulation-h: 40px;
}

/* ── Reset & Body-Defaults ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  overflow-x: clip;
  scrollbar-gutter: stable;
}
body {
  background: var(--bg);
  color: var(--text-soft);
  font-family: var(--serif);   /* Standard für Content – nur UI-Elemente überschreiben mit --sans */
  overflow-x: clip;
}
a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Zentrierte Inhalts-Container (alle Section-„Inner") ── */
.topbar-inner,
.brand-inner,
.chip-nav-inner {
  max-width: var(--w);
  margin-left: auto;
  margin-right: auto;
}

/* Bootstrap-Container auf Kurier-Layoutbreite (960 px) begrenzen,
   auch wenn xl/xxl-Breakpoints überschritten werden. */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  max-width: var(--w);
  overflow-x: clip;
}

/* Eigene Gutter-Variante – nutzt die fluide --p-40-Variable
   für Spalten-Abstände, die responsiv von 20 → 40 px skalieren. */
.g-p40 {
  --bs-gutter-x: var(--p-40);
  --bs-gutter-y: var(--p-40);
}


/* ══════════════════════════════════════════════════════════
   TOPBAR (orange, sticky)
══════════════════════════════════════════════════════════ */
.topbar {
  background: var(--orange);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.topbar-inner {
  position: relative;
  min-height: var(--topbar-h);
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
}

/* Wortmarke / Logo */
.topbar-logo {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2.5px;
  color: #fff;
  line-height: 1;
}

.topbar-nav,
.topbar-right { display: flex; align-items: center; }
.topbar-nav {
  align-self: stretch;        /* Nav füllt Topbar-Höhe vertikal */
  align-items: stretch;       /* Kinder (<a>) auch auf volle Höhe ziehen */
  gap: 22px;
  margin-right: auto;         /* Nav direkt nach Logo, Right bleibt rechts */
  font-family: var(--sans);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.topbar-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;        /* Text intern mittig */
  align-self: stretch;        /* sicher voll hoch im Flex-Parent */
  text-decoration: none;
}
.topbar-nav a:hover { text-decoration: none; }
.topbar-nav a:hover::after,
.topbar-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: #fff;
  z-index: 2;
}
.topbar-right { gap: 10px; }

/* ── 2. Navigationsebene (Subnav) ─────────────────────────── */
.subnav {
  position: sticky;
  top: var(--topbar-h);
  z-index: 999;
  background: var(--orange-mid);
  border-top: 1px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  width: 100%;
}
.subnav-inner {
  max-width: var(--w);
  margin: 0 auto;
  padding: 9px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-family: var(--sans);
  font-size: 13px;
  color: #fff;
}
.subnav a {
  color: #fff;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.subnav a:hover,
.subnav a.is-active { text-decoration: underline; }

.subnav-toggle { display: none; }

@media (min-width: 761px) {
  .subnav-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
  }
}

/* Burger-Button – auf Desktop versteckt */
.burger {
  display: none;
  width: 32px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
}
.burger span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
  transform-origin: center;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.tb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--social-btn-size);
  height: var(--social-btn-size);
  flex-shrink: 0;
}
.tb-icon svg {
  width: var(--social-btn-size);
  height: var(--social-btn-size);
}
.tb-icon:hover { opacity: .85; }
.tb-epaper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--social-btn-size);
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
  padding: 0 10px;
}
.tb-epaper:hover { background: rgba(255,255,255,.18); }

/* ══════════════════════════════════════════════════════════
   AUFLAGE-NEWSTICKER
══════════════════════════════════════════════════════════ */
.circulation-bar {
  width: min(100%, var(--w));
  max-width: var(--w);
  margin-left: auto;
  margin-right: auto;
  background: var(--green-soft);
  border-bottom: 1px solid var(--green-border);
}
.circulation-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  position: relative;
  height: var(--circulation-h);
  min-height: var(--circulation-h);
  padding: 0;
  overflow: hidden;
  text-align: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
}
.ticker-item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  opacity: 0;
  padding: 0 16px;
}
.ticker-item.is-static {
  position: relative;
  top: auto;
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   BRAND-BEREICH (Datum + Logos + Claim)
══════════════════════════════════════════════════════════ */
.brand-inner { padding: 0 0; }
.brand-row {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  align-items: start;
  gap: 16px;
}
.header-date {
  justify-self: start;
  align-self: start;
  font-size: 15px;
  font-weight: bold;
  color: var(--orange);
  line-height: 1;
}
.brand-logo-placeholder {
  justify-self: center;
  width: 96px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--green-chip);
  border-radius: 4px;
  background: #f4fbf2;
  color: var(--green);
  font-size: 13px;
  font-weight: bold;
}
.logo-img  { width: 400px; justify-self: center; align-self: start; }

.claim-img {
  grid-column: 4;
  justify-self: end;
  align-self: start;
}


/* ══════════════════════════════════════════════════════════
   CHIP-NAV
══════════════════════════════════════════════════════════ */
.chip-nav-inner {
  padding: 6px 0 0px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 20px;
  background: var(--green-soft);
  color: var(--text-soft);
  border: 1px solid var(--green-soft);
  border-radius: 20px;
  font-size: 15px;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.chip:hover        { background: var(--green); color: var(--white); border-color: var(--green); }
.chip.chip-active  { background: var(--green); color: var(--white); border-color: var(--green); }

/* ══════════════════════════════════════════════════════════
   GEMEINSAME KARTEN-/BILD-BAUSTEINE
══════════════════════════════════════════════════════════ */

/* Hero und Service-Cards teilen sich den
   „weiße Box mit Rahmen + Schatten"-Stil. */
.hero,
.service-card {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.hero { box-shadow: var(--shadow-md); }

/* News-Cards bewusst ohne Hintergrund/Border/Schatten */
.news-card {
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

/* Komplett klickbare Karten (Hero, News, Event, Job, Service) – Default-Linkstil
   neutralisieren und einheitlicher Hover-Effekt */
.hero,
.news-card,
.event-item,
.job-item,
.service-card {
  color: inherit;
  text-decoration: none;
  transition: opacity .15s ease;
}
.hero:hover,
.news-card:hover,
.event-item:hover,
.job-item:hover,
.service-card:hover { opacity: .9; }
.news-card:hover h3,
.event-item:hover h4,
.job-item:hover .job-title,
.hero:hover h1 { color: var(--green-link); }

/* Bild-Container in Hero / News / Boxes haben dieselbe Logik */
.hero-img-wrap,
.news-img-wrap,
.box-img-wrap {
  position: relative;
  overflow: hidden;
}
.hero-img-wrap img,
.news-img-wrap img,
.box-img-wrap img,
.service-card img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Karten-Überschriften (News, Stellenmarkt, Veranstaltungsbox) */
.news-card h3,
.content-box h4,
.box-header {
  font-size: 26px;
  line-height: 32px;
  color: var(--text-soft);
}

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.hero {
  display: grid;
  grid-template-columns: 61% 39%;
}
.hero-text {
  display: flex;
  flex-direction: column;
  padding: 20px 18px 18px;
  border-left: 1px solid #e8e8e8;
}
.hero-text h1, h1 {
  font-size: 24px;
  font-weight: bold;
  line-height: 30px;
  color: var(--text-soft);
  margin-bottom: 12px;
}
.hero-text p {
  font-size: 15px;
  line-height: 23px;
  color: var(--muted);
}

/* Kategorie-Badge (auf Bildern) */
.img-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  padding: 5px 25px 5px;
}

/* ══════════════════════════════════════════════════════════
   NEWS-GRID 2×2
══════════════════════════════════════════════════════════ */
/* Layout 2-spaltig wird über Bootstrap-Grid (.row + .col-md-6) gelöst.
   Card-spezifisches Styling bleibt hier. */
.news-card h3 { padding: 10px 0 14px; }

/* ══════════════════════════════════════════════════════════
   VERANSTALTUNGEN + STELLENMARKT
══════════════════════════════════════════════════════════ */
.content-box {
  background: var(--white);
  border: 1px solid var(--green-border);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* Premium-Hervorhebung: vom CMS per zusätzlicher Klasse setzbar
   (kann an .content-box, .event-item oder .job-item gesetzt werden) */
.content-box.premium,
.content-box.premium .box-body,
.content-box.premium .box-img-wrap { background: var(--green-soft); }

/* Veranstaltungen – pro Eintrag steuerbar wie beim Stellenmarkt */
.box-body.event-list { padding: 0; }
.event-item {
  background: var(--white);
  border-bottom: 1px solid var(--green-border);
}
.event-item.premium { background: var(--green-soft); }
.event-item .event-info { position: relative; padding: var(--p-40); }

/* Mindestabstand p-40 vom letzten Item zum Button (auch bei vollen Boxen) */
.box-body.event-list > .event-item:has(+ .kurier-btn),
.box-body.job-list  > .job-item:has(+ .kurier-btn) {
  margin-bottom: var(--p-40);
}

/* Button unter Event-/Stellenliste – kompakt, horizontal zentriert,
   nach unten gedrückt mit p-40 Außenabstand unten */
.box-body.event-list > .kurier-btn,
.box-body.job-list   > .kurier-btn {
  align-self: center;
  margin: auto var(--p-40) var(--p-40);
}
.box-header {
  background: var(--green);
  color: #fff;
  text-align: center;
  padding: 20px 10px 20px;
}
.box-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 12px 14px 14px;
}
.event-date {
  font-size: 13px;
  font-weight: bold;
  color: var(--green-link);
  margin-bottom: 4px;
}
.content-box h4 { margin-bottom: 5px; }
.event-loc,
.job-loc {
  font-size: 15px;
  color: var(--text-soft);
}
.event-loc { margin-bottom: 14px; }
.pin       { font-style: normal; }

/* Stellenmarkt-Liste – kein horizontales Padding, damit Premium-Items volle Breite bekommen */
.box-body.job-list { padding: 0; }
.job-list {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.job-item {
  position: relative;
  background: var(--white);
  border-bottom: 1px solid var(--green-border);
  padding: var(--p-40);
}
.job-item.premium { background: var(--green-soft); }

.job-top { margin-bottom: 2px; }
.job-type {
  font-size: 15px;
  font-weight: bold;
  color: var(--green);
}
.job-title { margin-bottom: 3px; }

/* Premium-Badge – sitzt im Textcontent oben rechts, bündig am Rand */
.premium-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 5px;
}

/* ══════════════════════════════════════════════════════════
   GRÜNER STANDARD-BUTTON
══════════════════════════════════════════════════════════ */
.kurier-btn {
  display: block;
  background: var(--green);
  color: #fff;
  text-align: center;
  font-size: 16px;
  padding: 9px 20px 8px;
  margin-top: 14px;
  transition: background .12s;
}
.kurier-btn:hover           { background: #1e8f3e; color: #fff; }
.service-card .kurier-btn   { margin: 16px; padding: 11px 14px 10px; }
.service-card:hover .kurier-btn { background: #1e8f3e; }

/* ══════════════════════════════════════════════════════════
   CTA-BANNER
══════════════════════════════════════════════════════════ */
.cta-section {
  background: var(--green);
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-section h5 {
  font-size: 19px;
  font-weight: bold;
  line-height: 26px;
  margin-bottom: 8px;
}
.cta-section p {
  font-size: 15px;
  line-height: 18px;
  color: rgba(255,255,255,.88);
  max-width: 790px;
  margin: 0 auto 18px;
	font-weight: bold;
}
.cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.cta-btn {
  border: 1px solid rgba(255,255,255,.8);
  color: #fff;
  background: transparent;
  font-size: 16px;
  padding: 6px 16px 5px;
  transition: background .12s;
}
.cta-btn:hover { background: rgba(255,255,255,.15); }

/* ══════════════════════════════════════════════════════════
   SERVICE-KACHELN 3×2
══════════════════════════════════════════════════════════ */
/* Service-Layout 3-spaltig wird über Bootstrap-Grid gelöst (.row + .col-md-4). */
.service-card { display: flex; flex-direction: column; height: 100%; }

/* ══════════════════════════════════════════════════════════
   ANZEIGEN
══════════════════════════════════════════════════════════ */
.ad-section { padding: 0; }
.ad-label {
  text-align: center;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Anzeigen-Slider: 2 sichtbar, schiebt jeweils 1 weiter */
.ad-section,
.ad-slider {
  overflow-x: clip;
}
.ad-slider {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
}
.ad-slider-viewport {
  overflow: hidden;
  height: var(--ad-slider-h, auto);
}
.ad-slider-track {
  display: flex;
  transition: transform .45s ease;
  will-change: transform;
  height: 100%;
}
.ad-slide {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--p-40);
  border-right: 1px solid var(--border);
}
.ad-slide:last-child { border-right: 0; }
.ad-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.site-footer {
  width: min(100%, var(--w));
  max-width: var(--w);
  margin-left: auto;
  margin-right: auto;
}
.footer-top { background: var(--green); color: #fff; }
.footer-top-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: 80px;
  padding: 16px 0;
}
.ft-social { display: flex; align-items: center; gap: 10px; }
.ft-icon {
  color: rgba(255,255,255,.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--social-btn-size);
  height: var(--social-btn-size);
  flex-shrink: 0;
}
.ft-icon svg {
  width: var(--social-btn-size);
  height: var(--social-btn-size);
}
.ft-icon:hover { color: #fff; }
.ft-brand   { text-align: center; }
.ft-tagline {
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 4px;
}
.footer-logo { width: 260px; margin: 0 auto; }
.ft-right    { display: flex; justify-content: flex-end; }
.ft-donate {
  border: 1px solid rgba(255,255,255,.7);
  color: rgba(255,255,255,.9);
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 4px 14px 3px;
  border-radius: 12px;
}
.ft-donate:hover { background: rgba(255,255,255,.15); }

.footer-links { background: #d7ecd3; border-top: 2px solid #b8d8b4; padding: 20px 0 22px; }
/* Footer-Spalten (.fl-col) liegen jetzt in einer Bootstrap-.row mit .col-md-3. */
.fl-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 21px;
  color: var(--text-soft);
}
.fl-col strong  { font-size: 13px; font-weight: bold; margin-bottom: 4px; }
.fl-col a:hover { text-decoration: underline; }
.fl-link        { color: var(--green) !important; }
.fl-link:hover  { text-decoration: underline; }

.footer-copy {
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--bg);
  text-align: center;
  border-top: 1px solid #ccc;
  padding: 12px 0 16px;
  font-size: 13px;
  line-height: 22px;
  color: var(--text-soft);
}
.footer-copy a       { color: var(--green); }
.footer-copy a:hover { text-decoration: underline; }
.sep                 { margin: 0 6px; color: var(--muted); }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .topbar-inner,
  .circulation-inner,
  .chip-nav-inner,
  .brand-inner,
  .footer-top-inner,
  .footer-copy,
  .subnav-inner { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 760px) {
  .hero       { grid-template-columns: 1fr; }
  .hero-text  { border-left: none; border-top: 1px solid #eee; }
  .ad-slide { flex-basis: 100%; }
  .footer-top-inner   { grid-template-columns: 1fr; text-align: center; justify-items: center; min-height: auto; }
  .ft-right           { justify-content: center; }
  .brand-row          { grid-template-columns: 1fr; justify-items: center; gap: 8px; text-align: center; }
  .header-date,
  .claim-img          { justify-self: center; }
  .logo-img           { width: 210px; }
  .claim-img          { width: 140px; }

  /* ── Mobile-Burger-Menü ─────────────────────────────── */
  .burger { display: flex; }
  .topbar-logo { display: none; }   /* Wortmarke nur auf Desktop – im Brand-Bereich darunter steht das Hauptlogo */

  .topbar-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--orange);
    box-shadow: 0 4px 8px rgba(0,0,0,.18);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transition: max-height .3s ease, visibility 0s linear .3s;
  }
  .topbar-nav.is-open {
    max-height: 320px;
    pointer-events: auto;
    visibility: visible;
    transition: max-height .3s ease, visibility 0s linear 0s;
  }
  .topbar-nav a {
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,.22);
  }
  .topbar-nav a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
  /* Im mobilen Dropdown: Strich-Indikator deaktivieren, Aktivität über Hintergrund anzeigen */
  .topbar-nav a.is-active::after { display: none; }
  .topbar-nav a.is-active        { background: rgba(0,0,0,.12); }

  /* Subnav: Mobile-Dropdown */
  .subnav-inner {
    display: block;
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
    padding-top: 0;
    padding-bottom: 0;
  }

  .subnav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 11px 0;
    border: none;
    background: transparent;
    color: #fff;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
  }

  .subnav-toggle-icon {
    font-size: 12px;
    opacity: .9;
    transition: transform .2s ease;
  }

  .subnav-toggle[aria-expanded="true"] .subnav-toggle-icon {
    transform: rotate(180deg);
  }

  .subnav-panel {
    display: none;
    flex-direction: column;
    gap: 0;
    padding-bottom: 6px;
    border-top: 1px solid rgba(255, 255, 255, .35);
  }

  .subnav-panel.is-open {
    display: flex;
  }

  .subnav-panel a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    text-decoration: none;
  }

  .subnav-panel a:last-child {
    border-bottom: none;
  }

  .subnav-panel a.is-active {
    font-weight: bold;
    text-decoration: underline;
  }

  .subnav-panel a:hover {
    background: rgba(0, 0, 0, .08);
    text-decoration: none;
  }
}


/* ══════════════════════════════════════════════════════════
   ARTIKEL-DETAILSEITE
══════════════════════════════════════════════════════════ */
.article-page {
  background: var(--white);
  padding: var(--p-40);
  box-shadow: var(--shadow-sm);
}
.article-figure { margin: 0 0 8px; }
.article-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 2;
  color: var(--muted);
  margin-bottom: 32px;
}
.article-header { margin-bottom: 28px; }
.article-meta {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--text-soft);
  margin-bottom: 14px;
}
.article-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
  color: var(--text-soft);
}
.article-body {
  color: var(--text-soft);
}
.article-body p, .article-body li {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.53;
  color: var(--text-soft);
  margin-bottom: 18px;
}

.article-body li {
  margin-bottom: 5px;
}

.article-body p:last-child { margin-bottom: 0; }
.article-body a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body a:hover { color: var(--green); opacity: .8; }

@media (max-width: 760px) {
  .article-title { font-size: 20px; line-height: 1.3; }
}


/* Button allgemein */


.btn-primary {
  display: block;
  background: var(--green);
  color: #fff;
  text-align: center;
  font-size: 13px;
  padding: 9px 14px 8px;
  transition: background .12s;
	border-radius:0
}


.btn-primary:hover {

  background: var(--green);
opacity:0.8;
}

.btn{
	border-radius:0
}

/* ══════════════════════════════════════════════════════════
   ÜBERSICHTSSEITEN (Veranstaltungen, Stellenmarkt)
   Geteilte Komponenten zwischen Events und Jobs.
══════════════════════════════════════════════════════════ */
.page-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: bold;
  color: var(--text-soft);
  margin-bottom: var(--p-40);
}

/* ── Premium-Eintrag als volle Breite mit Bild/Logo ── */
.event-row,
.job-row,
.ad-row {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  background: var(--green-soft);
  position: relative;
  overflow: hidden;
}

/* Bild-/Logo-Container – Desktop: 240×160 px wie Veranstaltungen */
.event-row-img,
.job-row-img,
.ad-row-img {
  background: var(--white);
  width: 100%;
  height: 160px;
  min-height: 160px;
  max-height: 160px;
  overflow: hidden;
  align-self: start;
}
.event-row-img img,
.job-row-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
/* Anzeigen-Vorschau: zentriert, Bildhöhe wird vom Bild
   selbst bestimmt (im CMS festgelegt, Standard ~155px). */
.ad-row-img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.ad-row-img img {
  max-width: 100%;
  width: auto;
  display: block;
}

/* Textinhalt (mittig) */
.event-row-body,
.job-row-body,
.ad-row-body {
  padding: 22px var(--p-40);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.event-row-body .event-date,
.job-row-body  .job-meta,
.ad-row-body   .ad-meta {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--green);
  font-weight: bold;
  margin: 0;
}
.job-row-body .job-meta .job-sep,
.job-row-body .job-meta .job-start { font-weight: normal; color: var(--text-soft); }

.event-row-body .event-title,
.job-row-body  .job-title,
.ad-row-body   .ad-title, .job-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: bold;
  line-height: 1.25;
  color: var(--text-soft);
  margin: 0;
}

i.fa-solid.fa-location-dot {color: var(--green);}

.event-row-body .event-loc,
.job-row-body  .job-loc,
.ad-row-body   .ad-size {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--text-soft);
  margin: 0;
}
.job-row-body .job-loc .job-company {
  font-weight: normal;
  margin-left: 8px;
  color: var(--text-soft);
}

/* Aktionsbereich rechts (Pill-Button) */
.event-row-action,
.job-row-action,
.ad-row-action {
  display: flex;
  align-items: center;
  padding-right: var(--p-40);
}
/* Gemeinsamer Pill-Button für Stellen-/Veranstaltungs-/
   Werbeanzeigen-Übersichten (Look wie aktiver Chip-Nav-Pill). */
.event-info-btn,
.job-info-btn,
.ad-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 20px;
  background: var(--green);
  color: #fff;
  border: 1px solid var(--green);
  border-radius: 20px;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .5px;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}

/* Premium-Badge oben rechts */
.event-row .premium-badge,
.job-row   .premium-badge,
.ad-row    .premium-badge {
  position: absolute;
  top: 0;
  right: 0;
}

/* Hover */
.event-row:hover,
.job-row:hover,
.ad-row:hover { opacity: .92; }
.event-row:hover .event-info-btn,
.job-row:hover  .job-info-btn,
.ad-row:hover   .ad-info-btn   { background: #1e8f3e; border-color: #1e8f3e; }
.event-row:hover .event-title,
.job-row:hover  .job-title,
.ad-row:hover   .ad-title      { color: var(--green-link); }

/* ── Standard-Eintrag ohne Bild (kompakt, 2-spaltig) ── */
.event-card,
.job-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  padding: var(--p-40);
  height: 100%;
}
.event-card .event-date,
.job-card   .job-meta {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--green);
  font-weight: bold;
  margin: 0;
}
.job-card .job-meta .job-sep,
.job-card .job-meta .job-start { font-weight: normal; color: var(--text-soft); }

.event-card .event-title,
.job-card   .job-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.25;
  color: var(--text-soft);
  margin: 0;
}
.event-card .event-loc,
.job-card   .job-loc {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--text-soft);
  margin: 0;
}
.job-card .job-loc .job-company {
  font-weight: normal;
  margin-left: 8px;
  color: var(--text-soft);
}
.event-card:hover,
.job-card:hover               { opacity: .92; }
.event-card:hover .event-title,
.job-card:hover  .job-title   { color: var(--green-link); }

/* ── CTA-Box (Inserieren) ── */
.event-cta,
.job-cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--green);
  color: #fff;
  padding: var(--p-40);
  height: 100%;
}
.event-cta-q,
.job-cta-q {
  font-family: var(--sans);
  font-size: 14px;
  color: #fff;
  opacity: .9;
}
.event-cta-title,
.job-cta-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: bold;
  line-height: 1.25;
  color: #fff;
}
.event-cta-info,
.job-cta-info {
  font-family: var(--sans);
  font-size: 13px;
  color: #fff;
  opacity: .85;
  margin-top: 4px;
}
.event-cta:hover,
.job-cta:hover { opacity: .94; }

/* Default-Link-Styling neutralisieren */
.event-row,
.event-card,
.event-cta,
.job-row,
.job-card,
.job-cta,
.ad-row {
  color: inherit;
  text-decoration: none;
  transition: opacity .15s ease;
}

@media (max-width: 760px) {
  .event-row,
  .job-row,
  .ad-row { grid-template-columns: 1fr; }
  .event-row-img,
  .job-row-img,
  .ad-row-img {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .event-row-img img,
  .job-row-img img { aspect-ratio: 16/9; }
  .ad-row-img { padding: 24px; }
  .event-row-action,
  .job-row-action,
  .ad-row-action { padding: 0 var(--p-40) var(--p-40); }
}

/* ══════════════════════════════════════════════════════════
   VERANSTALTUNGS-DETAILSEITE
══════════════════════════════════════════════════════════ */
.event-detail-figure {
  margin: 0;
}

.event-detail-info {
  position: relative;
  margin-bottom: 22px;
}

/* PREMIUM-Tag sitzt im Info-Block bündig oben rechts. */
.event-detail-info .premium-badge.premium-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--green);
  color: var(--green);
  font-size: 11px;
  padding: 3px 10px;
  letter-spacing: 1.2px;
}

/* Bei Premium: Info-Block direkt unter dem Bild bekommt softes Grün
   – passend zur Premium-Optik in der Übersicht */
.event-detail.premium .event-detail-info {
  background: var(--green-soft);
  padding: 22px 24px;
}

.event-detail-date {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--green);
  font-weight: bold;
  margin-bottom: 6px;
}
.event-detail-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: bold;
  line-height: 1.25;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.event-detail-loc {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text-soft);
}

.event-detail-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0 0 22px;
  opacity: 1;
}

.event-detail-body p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: 18px;
}
.event-detail-body p:last-child { margin-bottom: 0; }
.event-detail-body strong { color: var(--text-soft); font-weight: bold; }

/* ── Sidebar innerhalb der weißen Box ──
   keine eigene Hintergrund-/Padding-Logik – die weiße Box kommt
   über .article-page und Bootstrap-Gutter regeln den seitlichen Abstand */
.aside-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: bold;
  color: var(--text-soft);
  margin-bottom: 18px;
}
.aside-contact {
  font-style: normal;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}

/* Alle Buttons identische Breite (mind. 150 px), zentrierter Text */
.aside-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.aside-btn {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  padding: 10px 24px;
  min-width: 150px;
  text-align: center;
  text-decoration: none;
  transition: background .12s;
}
.aside-btn:hover { background: #1e8f3e; color: #fff; }

@media (max-width: 760px) {
  .event-detail-title { font-size: 22px; line-height: 1.3; }
  .event-detail-body p { font-size: 15px; }
}


/* ══════════════════════════════════════════════════════════
   STELLEN-DETAILSEITE
   – Aufbau analog Veranstaltungs-Detail
   – Statt großem Bild oben links: Firmenlogo-Kasten
   – Statt Datum-Zeile: Vollzeit/Teilzeit | Verfügbarkeit
══════════════════════════════════════════════════════════ */

/* Logo-Box links: weiße Fläche mit dezenter Border, Logo zentriert.
   Höhe orientiert sich an der Flex-Spalte → gleich hoch wie Info-Box rechts. */
.job-detail-logo {
  width: 100%;
  flex: 1;
  background: var(--white);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.job-detail-logo img {
  max-width: 100%;
  max-height: 160px;
  width: auto;
  object-fit: contain;
}

/* Info-Block rechts – positioning analog event-detail-info */
.job-detail-info {
  position: relative;
  height: 100%;
  margin-bottom: 0;
}

/* PREMIUM-Tag bündig oben rechts im Info-Block */
.job-detail-info .premium-badge.premium-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--green);
  color: var(--green);
  font-size: 11px;
  padding: 3px 10px;
  letter-spacing: 1.2px;
}

/* Premium-Variante: softer grüner Hintergrund */
.job-detail.premium .job-detail-info {
  background: var(--green-soft);
  padding: 22px 24px;
}

/* Vollzeit | ab sofort */
.job-detail-type {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.job-detail-type strong {
  color: var(--green);
  font-weight: bold;
}

.job-detail-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: bold;
  line-height: 1.25;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.job-detail-loc {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text-soft);
}

/* Abstand zwischen Kopf-Row und Inhalts-Row */
.job-detail-content { margin-top: 28px; }

/* Sidebar links nutzt die grundlegenden .aside-*-Styles aus dem
   Event-Detail (Titel, Kontaktblock, Button) – keine eigene Klasse nötig. */

/* Stellenausschreibung – Body */
.job-detail-heading {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: bold;
  color: var(--text-soft);
  margin-bottom: 16px;
}
.job-detail-subheading {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: bold;
  color: var(--text-soft);
  margin-top: 8px;
  margin-bottom: 10px;
}
.job-detail-body p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: 18px;
}
.job-detail-body strong { color: var(--text-soft); font-weight: bold; }

/* Aufzählung mit grünem Bullet */
.job-detail-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 22px;
}
.job-detail-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-soft);
}
.job-detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

@media (max-width: 760px) {
  .job-detail-title { font-size: 22px; line-height: 1.3; }
  .job-detail-body p,
  .job-detail-list li { font-size: 15px; }
  .job-detail-logo { padding: 16px; }
}


/* ══════════════════════════════════════════════════════════
   E-PAPER / DOWNLOAD – LISTEN-KOMPONENTE
   Wird sowohl für die E-Paper-Ausgaben als auch für die
   Download-Seite genutzt. Die Klassen sind semantisch
   getrennt, teilen sich aber dieselben Styles.
══════════════════════════════════════════════════════════ */

/* ── Vorschau-Bild + Hinweistext (E-Paper) ── */
.epaper-hero {
  position: relative;
  z-index: 1;                 /* hebt Hero über .epaper-list, damit der Schatten sichtbar bleibt */
  margin: 0;
  background: var(--white);
  padding: var(--p-40);
  box-shadow: var(--shadow-sm);
}
.epaper-hero img {
  width: 100%;
  display: block;
}
.epaper-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 14px;
}

/* ── Container für Listen-Items ── */
.epaper-list,
.download-list,
.ad-list {
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.download-list + .download-list { margin-top: var(--p-40); }

/* Werbeanzeigen-Liste: weißer Kasten mit Innenabstand,
   einzelne ad-rows mit kleinem Abstand dazwischen */
.ad-list {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ad-list .ad-row { margin-bottom: 0; }

/* ── Optionaler grüner Header über der Liste ── */
.list-header {
  background: var(--green);
  color: #fff;
  text-align: center;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: bold;
  line-height: 1.3;
  padding: 14px 20px;
  margin: 0;
}

/* ── Einzelne Listen-Items ── */
.epaper-item,
.download-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.epaper-item:first-child,
.download-item:first-child { border-top: none; }
/* Wenn ein .list-header über den Items steht, wird die erste
   Trennlinie zwischen Header und erstem Item wieder eingeblendet. */
.list-header + .download-item,
.list-header + .epaper-item { border-top: 1px solid var(--border); }

.epaper-item.is-current   { background: var(--green-soft); }
.epaper-item.is-current .epaper-date { color: var(--green); }

.epaper-date,
.download-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: bold;
  color: var(--text-soft);
}
.epaper-actions,
.download-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.epaper-view,
.download-btn {
  margin: 0;                /* kurier-btn default margin-top überschreiben */
  padding: 8px 18px 7px;
  min-width: 140px;
}


/* ── Datei-Icon (Font Awesome, Typ per JS/CSS) ── */
.file-badge,
.pdf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  font-size: 26px;
  line-height: 1;
  padding: 4px;
  transition: opacity .15s ease, color .15s ease;
}
.file-badge:hover,
.pdf-badge:hover { opacity: .75; }

.file-badge--pdf,
.pdf-badge.file-badge--pdf,
.pdf-badge:not([class*="file-badge--"]) {
  color: #c62828;
}
.file-badge--pdf:hover,
.pdf-badge.file-badge--pdf:hover,
.pdf-badge:not([class*="file-badge--"]):hover { color: #c62828; }

.file-badge--zip  { color: #6d4c41; }
.file-badge--word { color: #1565c0; }
.file-badge--excel { color: #2e7d32; }
.file-badge--file { color: var(--text-soft); }


/* ── Rechte Spalte: Sidebar-Cards untereinander ── */
.epaper-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--p-40);
}
.epaper-sidebar .service-card { flex: 0 0 auto; height: auto; }

@media (max-width: 760px) {
  .epaper-item,
  .download-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .epaper-actions,
  .download-actions { width: 100%; }
  .epaper-view,
  .download-btn    { flex: 1; }
}


/* ══════════════════════════════════════════════════════════
   CONTENT-SEITE
   Nutzt sonst dieselben Bausteine wie die Artikel-Detail
   (.article-page, .article-figure, .article-title, .article-body).
══════════════════════════════════════════════════════════ */

/* Zentrierter Section-Titel mit Bindestrichen ("- Titel -") */
.section-title {
  text-align: center;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: bold;
  color: var(--text-soft);
  margin: 8px 0 14px;
}

/* Figure ohne Bildunterschrift braucht mehr Abstand zur Überschrift,
   da der margin sonst von der .article-caption übernommen würde. */
.article-figure:not(:has(.article-caption)) { margin-bottom: 28px; }

/* ── Ansprechpartner ───────────────────────────
   row-cols-md-3 + justify-content-center: 3 Karten
   füllen die Zeile, 2 oder 1 werden zentriert. */
.contacts-section          { margin-top: 40px; }
.contacts-section .section-title { margin-bottom: 28px; }

.contact-card {
  position: relative;
  font-family: var(--serif);
  color: var(--text-soft);
  font-size: 15px;
  padding-bottom: 22px;
}
.contact-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80%;
  height: 1px;
  background: var(--border);
}
.contact-name, h3 {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 4px;
}
.contact-role {
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 6px;
}
.contact-phone {
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 8px;
}
.contact-link {
  display: inline-block;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 15px;
}
.contact-link:hover { color: var(--green); opacity: .8; }

/* Variante mit Foto: Foto links, Daten rechts.
   padding-bottom 0 → Trennlinie liegt direkt am Bild an
   (sofern der Text rechts nicht höher als das Bild ist). */
.contact-card--with-image {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: start;
  padding-bottom: 0;
  margin-bottom: 24px;
}
.contact-card--with-image:last-child { margin-bottom: 0; }
.contact-photo img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}
.contact-card--with-image .contact-name { margin-top: 4px; }

/* ── Variante: Kontaktkarte als weißer Kasten mit Schatten ─
   (z. B. neben einer Promo-Card) */
.contact-card--boxed {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  gap: 0;
  margin-bottom: 0;
  align-items: stretch;
}
.contact-card--boxed::after { display: none; }
.contact-card--boxed .contact-photo,
.contact-card--boxed .contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-card--boxed .contact-info {
  padding: 24px 28px;
  align-self: center;
}

/* ── Info-Block (Adresse + Bürozeiten) ─────────── */
.info-block {
  font-family: var(--serif);
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.55;
}
.info-block-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 14px;
}
.info-block-text { margin-bottom: 14px; }
.info-block-subtitle {
  margin-bottom: 6px;
}
.info-block-hours {
  display: grid;
  grid-template-columns: 70px 1fr;
  row-gap: 2px;
  margin: 0;
}
.info-block-hours dt { font-weight: normal; }
.info-block-hours dd { margin: 0; }

/* ── Promo-Card („Das könnte Sie auch interessieren") ── */
.related-section { margin-top: 40px; }

.promo-card {
  display: flex;
  background: var(--green);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: opacity .15s ease;
  margin: 0;          /* row-Default-margins entfernen */
}
.promo-card:hover { opacity: .94; color: #fff; }
.promo-card-img {
  padding: 0;
}
.promo-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.promo-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 22px var(--p-40);
}
.promo-card-sub {
  font-family: var(--sans);
  font-size: 14px;
  opacity: .92;
}
.promo-card-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: bold;
  line-height: 1.25;
  margin: 0;
}
.promo-card-link {
  font-family: var(--sans);
  font-size: 13px;
  opacity: .85;
  margin-top: 4px;
}

/* ──────────────────────────────────────────────
   KONTAKT – Formular & Sidebar-Karte
   ────────────────────────────────────────────── */

/* ── System-Meldungen (Formular-Feedback) ─────── */
.system-message {
  background: var(--green-soft);
  border: 1px solid var(--green);
  color: var(--text-soft);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  padding: 14px 18px;
}
.system-message p { margin: 0; }
.system-message--error {
  background: #fdecea;
  border-color: #c62828;
  color: #c62828;
}
.system-message--error p {
  color: #c62828;
}

/* ── Kontaktformular ─────────────────────────── */
.contact-form {
  background: transparent;
}
.contact-form .list-header {
  text-align: center;
  font-size: 17px;
  padding: 14px 20px;
  margin-bottom: 14px;
}
.contact-form .contact-form-body + .list-header,
.contact-form--labeled .list-header {
  margin-top: 0;
  margin-bottom: 14px;
}

.contact-form-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Premium: Abstände auch in den Schritt-Containern (nicht nur direkte Kinder von .contact-form-body) */
.premium-step-indicator {
  margin-bottom: 18px;
}

.premium-form-step,
.premium-review-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.premium-step--hidden {
  display: none !important;
}

/* ── Kleinanzeigen: Content-Seite + Formular ─── */
.article-page.ka-page {
  padding: var(--p-40);
}
.article-page.ka-page .ka-form-box {
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.ka-form-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: bold;
  color: var(--text-soft, #444);
  text-align: center;
  margin: 0 0 6px;
}
.ka-form-subtitle {
  font-family: var(--serif);
  font-size: 15px;
  text-align: center;
  color: var(--text-soft, #666);
  margin: 0 0 18px;
}
.ka-intro {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft, #444);
  margin-bottom: 22px;
}
.ka-intro p:last-child { margin-bottom: 0; }
.ka-publish-hint {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft, #444);
  margin: 0 0 18px;
}
.ka-chip-nav { margin-bottom: 18px; }
.ka-line-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 16px;
  align-items: center;
  margin-bottom: 10px;
}
.ka-line-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 110px;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--text-soft, #666);
}
.ka-line-label { font-weight: 600; color: var(--text-soft, #666); }
.ka-line-chars {
  white-space: nowrap;
  color: var(--green, #A0CF41);
  font-weight: 400;
}
.ka-frequency-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 18px 0;
  font-family: var(--serif);
  font-size: 15px;
}
.ka-frequency-select { width: auto; min-width: 72px; }
.ka-chiffre-block { margin: 12px 0 18px; }
.ka-chiffre-options {
  margin: 10px 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ka-chiffre-options[hidden] {
  display: none !important;
}
.ka-checkbox-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 15px;
  cursor: pointer;
}
.ka-chiffre-label {
  font-weight: bold;
}
.ka-chiffre-options .ka-radio-option {
  cursor: default;
}
.ka-chiffre-options:not([hidden]) .ka-radio-option {
  cursor: pointer;
}
.ka-live-price {
  font-family: var(--serif);
  font-size: 16px;
  margin: 16px 0 8px;
  color: var(--text-soft, #444);
}
.ka-live-price strong { font-size: 18px; }
.ka-section-header.list-header {
  margin-top: 0;
}
@media (max-width: 767px) {
  .article-page.ka-page { padding: 20px 16px; }
  .ka-line-row { grid-template-columns: 1fr; }
  .ka-line-meta { align-items: flex-start; flex-direction: row; gap: 10px; }
}

/* ── Kleinanzeigen: Mehrschritt-Formular ─────── */
.ka-step-indicator {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 20px;
  border: 1px solid var(--border, #ddd);
}
.ka-step-item {
  padding: 12px 10px;
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-soft, #666);
  background: #f5f5f5;
  border-right: 1px solid var(--border, #ddd);
}
.ka-step-item:last-child { border-right: none; }
.ka-step-item--active {
  background: var(--green, #A0CF41);
  color: #fff;
  font-weight: 600;
}
.ka-step-item--done {
  background: #e8f5d6;
  color: var(--text-soft, #444);
}
.ka-form-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ka-step--hidden {
  display: none !important;
}
.ka-radio-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 15px;
  cursor: pointer;
}
.ka-radio-option input { margin-top: 4px; flex-shrink: 0; }
.ka-price-table-wrap { margin-top: 8px; }
.ka-price-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--serif);
  font-size: 14px;
}
.ka-price-table th,
.ka-price-table td {
  border: 1px solid var(--border, #ddd);
  padding: 10px 12px;
  vertical-align: top;
}
.ka-price-table th {
  background: #f5f5f5;
  font-weight: 600;
  text-align: left;
}

@media (max-width: 767px) {
  .ka-step-indicator { grid-template-columns: 1fr; }
  .ka-step-item { border-right: none; border-bottom: 1px solid var(--border, #ddd); }
  .ka-step-item:last-child { border-bottom: none; }
}

.form-field { margin: 0; }

/* Sichtbare Labels über den Feldern (VA-Eintrag) */
.contact-form--labeled .form-label {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.contact-form--labeled .form-hint {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  margin: 6px 0 0;
}
.contact-form input[type="file"].form-control--file {
  padding: 10px 18px;
  line-height: 1.4;
}
.contact-form--labeled .form-control--dropdown {
  background-color: #fff;
  color: var(--text-soft);
  font-weight: normal;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23515151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
  cursor: pointer;
}

.contact-form .form-control {
  width: 100%;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text-soft);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 18px;
  line-height: 1.4;
  box-shadow: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form .form-control::placeholder { color: var(--text-soft); opacity: 1; }
.contact-form .form-control:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(40, 169, 77, .15);
}

/* Select: hellgrüner Hintergrund + Pfeil rechts */
.contact-form .form-control--select {
  background-color: var(--green-soft);
  color: var(--green);
  font-weight: bold;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2328A94D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
  cursor: pointer;
}
.contact-form textarea.form-control {
  min-height: 160px;
  resize: vertical;
}

/* Datum/Uhrzeit-Felder mit Icon rechts */
.form-field--icon-right {
  position: relative;
}
.form-field--icon-right .form-field-icon {
  position: absolute;
  right: 18px;
  bottom: 14px;
  top: auto;
  left: auto;
  transform: none;
  color: var(--green);
  font-size: 15px;
  pointer-events: none;
  z-index: 1;
}
.form-field--icon-right .form-control {
  padding-right: 44px;
}
.contact-form input[type="date"].form-control::-webkit-calendar-picker-indicator,
.contact-form input[type="time"].form-control::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 44px;
  height: 100%;
  cursor: pointer;
}

/* Datum/Uhrzeit-Felder (hellgrün, grüner Text + Icon links) – Kontakt o.ä. */
.form-field--icon {
  position: relative;
}
.form-field-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green);
  font-size: 15px;
  pointer-events: none;
  z-index: 1;
}
.contact-form .form-control--accent {
  background-color: var(--green-soft);
  color: var(--green);
  font-weight: bold;
  border-color: var(--green-soft);
  padding-left: 44px;
}
.contact-form .form-control--accent:focus {
  border-color: var(--green);
}
.contact-form input[type="date"].form-control--accent::-webkit-calendar-picker-indicator,
.contact-form input[type="time"].form-control--accent::-webkit-calendar-picker-indicator {
  filter: invert(48%) sepia(60%) saturate(600%) hue-rotate(95deg);
  cursor: pointer;
}

/* ── VA-Eintrag: Premium-Sidebar ──────────────── */
.va-premium-aside {
  align-self: flex-start;
}
.va-premium-card {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.va-premium-card-img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.va-premium-card-body {
  padding: 24px 28px;
  font-family: var(--serif);
  color: var(--text-soft);
}
.va-premium-card-title {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.35;
  margin: 0 0 14px;
}
.va-premium-card-text {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.va-premium-card-footer {
  border-top: 1px solid var(--border);
  padding: 20px 28px 24px;
  text-align: center;
}
.va-premium-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 28px;
  background: var(--green);
  color: #fff;
  border: 0;
  border-radius: 20px;
  font-family: var(--serif);
  font-size: 15px;
  text-decoration: none;
  transition: background .12s ease;
}
.va-premium-btn:hover {
  background: #1e8f3e;
  color: #fff;
}

/* Einwilligungs-Checkbox */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-soft);
}
.form-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid var(--border);
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease, background-color .15s ease;
}
.form-consent input[type="checkbox"]:checked {
  background: var(--green);
  border-color: var(--green);
}
.form-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.form-consent a { color: var(--green); text-decoration: underline; }

/* Submit-Button links – im Stil der übrigen Kurier-Buttons */
.form-submit {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
}
.form-submit .kurier-btn {
  margin: 0;
  padding: 5px 24px 4px;
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}

/* ── Sidebar-Karte (Karte + Adresse + Kontakt) ── */
.contact-aside {
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.contact-map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #eaeaea;
}
.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.contact-aside-body {
  padding: 24px 28px 28px;
}
.contact-aside-sep {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}
.contact-aside .info-block + .info-block { margin-top: 0; }
.contact-aside .info-block a { color: var(--text-soft); }
.contact-aside .info-block a:hover { color: var(--green); }

@media (max-width: 760px) {
  .contact-aside-body { padding: 20px 20px 22px; }
}

/* ──────────────────────────────────────────────
   REFERENZEN – Bildergalerie mit Lightbox
   ────────────────────────────────────────────── */
.referenz-grid {
  margin-top: 24px;
}
.referenz-thumb {
  display: block;
  overflow: hidden;
  background: #f4f4f4;
  cursor: zoom-in;
  transition: opacity .2s ease, transform .2s ease;
}
.referenz-thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.referenz-thumb:hover { opacity: .92; }
.referenz-thumb:hover img { transform: scale(1.03); }

/* GLightbox – kleine Anpassungen an unseren Stil */
.gslide-description .gslide-title {
  font-family: var(--serif);
  color: #fff;
}
.gclose, .gnext, .gprev { color: #fff; }

@media (max-width: 760px) {
  .section-title { font-size: 20px; }
  .contact-card--with-image { grid-template-columns: 90px 1fr; gap: 14px; }
  .contact-photo img { height: 90px; }
  .promo-card-body { padding: 18px 20px; }
  .promo-card-title { font-size: 18px; }
  .va-premium-card-body { padding: 20px; }
  .va-premium-card-title { font-size: 18px; }
  .va-premium-card-footer { padding: 16px 20px 20px; }
}

/* ── Premium-Anzeige Formular ─────────────────── */
.premium-anzeige-form {
  max-width: 960px;
  margin: 0 auto;
}
.premium-price-bar {
  margin: 0 0 18px;
  padding: 14px 20px;
  background: var(--green-soft);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: bold;
  color: var(--green);
  text-align: center;
}
.premium-price-bar strong { font-weight: bold; }

.premium-upload-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 18px;
  background: var(--green-soft);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: bold;
  color: var(--green);
  text-align: center;
  cursor: pointer;
}
.premium-upload-bar input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.premium-upload-bar .premium-upload-input,
.premium-upload-bar input.premium-upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.premium-upload-bar .premium-upload-label {
  pointer-events: none;
  margin: 0;
}

.premium-form-split {
  align-items: stretch;
}
.premium-form-split .form-control--tall {
  min-height: 220px;
  height: 100%;
}
.premium-form-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.premium-form-links .form-field {
  flex: 1;
  display: flex;
}
.premium-form-links .form-control {
  height: 100%;
}

.premium-anzeige-form .form-control--anrede {
  max-width: 120px;
  flex-shrink: 0;
}

/* Bezahlverfahren */
.premium-payment-dialog {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.premium-payment-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
}
.premium-payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text-soft);
  cursor: pointer;
  margin: 0;
}
.premium-payment-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.premium-payment-label strong {
  font-weight: bold;
  color: var(--text-soft);
}
.premium-payment-option input[type="radio"] {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease, background-color .15s ease;
}
.premium-payment-option input[type="radio"]:checked {
  background: var(--green);
  border-color: var(--green);
}
.premium-payment-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
}
.premium-paypal-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1;
}
.premium-paypal-wordmark .pp-pay { color: #003087; }
.premium-paypal-wordmark .pp-pal { color: #009cde; }
.premium-payment-vorkasse-hint {
  margin: 0;
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-soft);
}
.premium-paypal-success[hidden] {
  display: none !important;
}

.premium-paypal-sandbox-hint {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #fff8e1;
  border: 1px solid #f0ad4e;
  font-family: var(--serif);
  font-size: 14px;
  color: #8a6d3b;
  text-align: center;
}

.premium-paypal-sandbox-hint[hidden] {
  display: none !important;
}

.premium-payment-panel {
  margin-top: 8px;
}
.premium-payment-title {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: bold;
  color: var(--text-soft);
  text-align: center;
}
.premium-paypal-success {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-soft);
  text-align: center;
}
.premium-paypal-success[hidden] {
  display: none !important;
}
#paypal-button-container {
  max-width: 400px;
  margin: 0 auto;
}
.premium-payment-panel[hidden] {
  display: none !important;
}
.premium-payment-error {
  margin: 0;
  padding: 12px 16px;
  background: #fdecea;
  border: 1px solid #c62828;
  font-family: var(--serif);
  font-size: 14px;
  color: #c62828;
}
.premium-payment-error[hidden] {
  display: none !important;
}
.premium-vorkasse-info {
  padding: 16px 20px;
  background: var(--green-soft);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
}
.premium-vorkasse-info p:last-child { margin-bottom: 0; }

.captcha-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 23px;
  background: #daf1d6;
  color: #515151;
  font-family: monospace;
  font-size: 14px;
  letter-spacing: 0.2em;
  user-select: none;
}

.premium-preview-success {
  max-width: 720px;
  margin: 0 auto 2rem;
}

.premium-preview-success[hidden] {
  display: none !important;
}

.premium-review-step {
  padding-top: 0;
}

.premium-form-step.premium-step--hidden,
.premium-review-step.premium-step--hidden,
#premium-step-1.premium-step--hidden,
#premium-step-2.premium-step--hidden,
#premium-step-3.premium-step--hidden {
  display: none !important;
}

.premium-review-block {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--green-soft);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.premium-review-block-title {
  margin: 0 0 0.75rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.premium-review-dl {
  margin: 0;
  display: grid;
  gap: 0.5rem 1rem;
}

.premium-review-row {
  display: grid;
  grid-template-columns: minmax(140px, 34%) 1fr;
  gap: 0.5rem 1rem;
  align-items: start;
}

.premium-review-row dt {
  margin: 0;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
}

.premium-review-row dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.premium-review-filename {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 14px;
  color: var(--text-soft);
}

.premium-review-thumb {
  display: block;
  max-width: 220px;
  max-height: 160px;
  width: auto;
  height: auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}

.premium-review-total {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 2px solid var(--green);
}

.premium-review-total-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text);
}

.premium-review-total-row--sum {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 17px;
}

.premium-review-total-row--sum strong {
  color: var(--green-dark, #3d7a32);
}

.premium-review-zahlungsart {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--text-soft);
}

.premium-review-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.25rem;
}

.premium-review-actions .kurier-btn {
  display: inline-block;
  margin: 0;
  padding: 8px 28px 7px;
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
}

.premium-review-actions .kurier-btn--outline {
  border: 2px solid var(--green);
}

.premium-anzeige-form .form-submit .kurier-btn,
.stellen-premium-form .form-submit .kurier-btn,
.va-premium-form .form-submit .kurier-btn,
.kleinanzeigen-form .form-submit .kurier-btn {
  display: inline-block;
  margin: 0;
  padding: 8px 28px 7px;
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
}

.kurier-btn--outline {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--green);
  box-shadow: none;
}

.kurier-btn--outline:hover,
.kurier-btn--outline:focus {
  background: var(--green-soft);
  color: var(--text);
}

@media (max-width: 767px) {
  .premium-review-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

@media (max-width: 767px) {
  .premium-anzeige-form .form-control--anrede { max-width: none; }
  .premium-form-split .form-control--tall { min-height: 160px; }
}

.defaultfont.lowContrast {
    display: none;
}

/* ══════════════════════════════════════════════════════════
   SEITENFLANKEN – Dekorationsbilder links/rechts
   Original: 360 × 774 px, 60 px Abstand zum Content
   Sichtbar ab > 1440 px, skaliert mit, darunter ausgeblendet
══════════════════════════════════════════════════════════ */
.page-side-banners {
  display: grid;
  grid-template-columns: 1fr min(var(--w), 100%) 1fr;
  column-gap: var(--side-banner-gap);
  align-items: start;
  width: 100%;
}

.page-side-banners__main {
  min-width: 0;
  width: 100%;
  grid-column: 2;
}

.page-side-banners__main > .container {
  max-width: 100%;
}

.page-side-banner {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  pointer-events: none; /* Seitenfläche blockiert keinen Content darunter */
}

.page-side-banner a {
  pointer-events: auto;
  display: block;
}

.page-side-banner--left  { justify-content: flex-end; }
.page-side-banner--right { justify-content: flex-start; }

@media (min-width: 1441px) {
  .page-side-banner {
    position: fixed;
    top: var(--side-banner-top, 0);
    z-index: 50;
    width: min(
      var(--side-banner-w),
      calc((100vw - var(--w) - (2 * var(--side-banner-gap))) / 2)
    );
  }

  .page-side-banner--left {
    right: calc(50% + var(--w) / 2 + var(--side-banner-gap));
    left: auto;
  }

  .page-side-banner--right {
    left: calc(50% + var(--w) / 2 + var(--side-banner-gap));
    right: auto;
  }
}

.page-side-banner img {
  display: block;
  width: min(
    var(--side-banner-w),
    calc((100vw - var(--w) - (2 * var(--side-banner-gap))) / 2)
  );
  max-height: var(--side-banner-h);
  height: auto;
  aspect-ratio: 360 / 774;
  object-fit: cover;
}

@media (max-width: 1440px) {
  .page-side-banners {
    display: block;
  }

  .page-side-banner {
    display: none;
  }
}

.chip-nav:not(:has(.chip-nav-inner a)) {
  display: none;
}

/* ══════════════════════════════════════════════════════════
   SCROLL-TO-TOP (per JS eingefügt)
══════════════════════════════════════════════════════════ */
.scroll-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, background .12s;
}
.scroll-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s, background .12s;
}
.scroll-to-top:hover {
  background: #1e8f3e;
}
.scroll-to-top svg {
  display: block;
  width: 20px;
  height: 20px;
}

@media (max-width: 760px) {
  .scroll-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}