/* ===========================
   REGIOFUX – BASE STYLES
   =========================== */

:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --ink:#1f2937;            /* slate-800 */
  --muted:#d6dde8;          /* light borders */
  --soft:#eef2f7;
  --accent:#2563eb;         /* blue-600 */
  --accent-ink:#0b1220;     /* dark bg for media */
  --link:#2563eb;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; }
a:hover{ opacity:.9; }

/* Layout */
.container{ max-width:1100px; margin:0 auto; padding:0 16px; }
.card{
  background:var(--card); border:1px solid var(--muted);
  border-radius:.75rem; overflow:hidden;
}
.card-body{ padding:1rem; }
.shadow-sm{ box-shadow:0 .25rem .5rem rgba(0,0,0,.05); }

/* Media helpers */
.object-fit-cover{ object-fit:cover; }
.bg-ink{ background:var(--accent-ink); }

/* Text clamps */
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-4{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* ===========================
   TEASER – HORIZONTAL (Bild links, Text rechts)
   =========================== */

/* Karte */
.teaser-card{
  position:relative; overflow:hidden; transition:.2s ease;
  display:flex; flex-direction:column; height:100%; border-radius:.75rem;
}
.teaser-card:hover{ box-shadow:0 .5rem 1rem rgba(0,0,0,.08); }

/* Grid nur für Teaser einsetzen */
.teaser--h .teaser-inner{
  display:grid;
  grid-template-columns:280px 1fr;     /* Bild links fix, Text rechts flexibel */
  gap:16px; align-items:start;
}

/* 2-Spalten-Listen: Karten gleich hoch & Bild etwas breiter */
.teaser-grid-2 .teaser-card{ display:flex; flex-direction:column; height:100%; }
.teaser-grid-2 .teaser-card .card-body{ display:flex; flex-direction:column; }
@media (min-width:992px){
  .teaser-grid-2 .teaser--h .teaser-inner{ grid-template-columns:320px 1fr; }
}

/* Mobil: untereinander stapeln */
@media (max-width:768px){
  .teaser--h .teaser-inner{ grid-template-columns:1fr; }
}

/* Medienspalte */
.teaser--h .teaser-media{
  position:relative; width:100%;
  height:200px;                     /* feste, kompakte Höhe */
  border-radius:.75rem; overflow:hidden; background:#000;
}
.teaser--h .teaser-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Preis-Badge & Play-Overlay */
.price-chip{
  position:absolute; top:8px; right:8px;
  font-size:.9rem; background:rgba(15,23,42,.85); color:#fff;
  padding:.25rem .5rem; border-radius:.5rem; border:1px solid rgba(255,255,255,.08);
}
.play-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.35));
}
.play-overlay > span{
  width:72px; height:72px; border:5px solid var(--accent); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.play-overlay i{
  width:0; height:0; border-left:24px solid var(--accent);
  border-top:16px solid transparent; border-bottom:16px solid transparent; margin-left:5px;
}

/* Titel/Meta/Text rechts */
.teaser-title{
  margin:0 0 .5rem 0; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em;
}
.teaser-meta{ font-size:.825rem; color:#6b7280; margin-bottom:.5rem; }
.teaser-text{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-top:.25rem;
}

/* Sicherheit: alte 16:9-Regeln neutralisieren, falls irgendwo noch gesetzt */
.teaser--h .ratio-16x9{ aspect-ratio:auto !important; height:auto !important; }

/* ===========================
   DETAIL / HERO / THUMBS / CONTENT
   =========================== */

.hero-16x9{ aspect-ratio:16/9; background:var(--accent-ink); border-radius:.75rem; overflow:hidden; }
.thumb-strip{ display:flex; gap:.5rem; flex-wrap:wrap; }
.thumb-strip a{ width:135px; height:90px; border-radius:.5rem; overflow:hidden; border:1px solid var(--muted); background:#000; }
.thumb-strip img{ width:100%; height:100%; object-fit:cover; }

.content img{ height:auto; }
.content::after{ content:""; display:block; clear:both; }
.content p:empty{ display:none; }
.content iframe{ max-width:100%; }

/* ===========================
   HEADER / FOOTER / UI
   =========================== */

.site-header{
  background:#fff; border-bottom:1px solid var(--muted);
  position:sticky; top:0; z-index:100; backdrop-filter:saturate(180%) blur(6px);
}
.site-header .nav{ display:flex; gap:1rem; padding:.75rem 0; }

.site-footer{
  margin-top:2rem; background:#0b1220; color:#e5e7eb; font-size:.9rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.site-footer a{ color:#e5e7eb; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .75rem; border-radius:.5rem;
  border:1px solid var(--muted); background:#fff; color:var(--ink); cursor:pointer;
}
.btn:hover{ background:var(--soft); }
.btn-outline-secondary{ background:transparent; }
.btn-success{ background:#16a34a; border-color:#15803d; color:#fff; }
.btn-warning{ background:#f59e0b; border-color:#d97706; color:#111827; }

/* Pagination */
.pagination{ display:flex; gap:.25rem; list-style:none; padding:0; margin:0; }
.page-item .page-link{
  display:block; padding:.4rem .65rem; border:1px solid var(--muted);
  border-radius:.5rem; background:#fff; color:var(--ink); text-decoration:none;
}
.page-item.active .page-link{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* Utilities */
.mt-2{margin-top:.5rem} .mt-3{margin-top:1rem} .mt-4{margin-top:1.5rem}
.mb-0{margin-bottom:0} .mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:1rem} .mb-4{margin-bottom:1.5rem}
.p-0{padding:0} .p-1{padding:.25rem} .p-2{padding:.5rem} .p-3{padding:1rem}
.rounded{border-radius:.5rem} .rounded-lg{border-radius:.75rem}
.text-muted{color:#6b7280} .text-primary{color:var(--accent)}
.small{font-size:.875rem}
/* OVERRIDE: Teaser horizontal erzwingen */
.teaser-card.teaser--h .teaser-inner {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 16px !important;
    align-items: start !important;
}
.teaser-card.teaser--h .teaser-media {
    height: 200px !important;
}

/* ==== FORCE HORIZONTAL TEASERS (aktuelles Markup mit .teaser-grid) ==== */

/* Teaser: Bild links fix, Text rechts flexibel */
.teaser-card .teaser-grid{
  display: grid !important;
  grid-template-columns: 260px 1fr !important; /* Bild fix */
  gap: 1rem !important;
  align-items: start !important;
}

/* Medienspalte kompakt halten */
.teaser-card .teaser-grid .teaser-media{
  position: relative;
  width: 100%;
  height: 160px;               /* fixe Höhe in 1-Spalte */
  border-radius: .5rem;
  overflow: hidden;
  background: #000;
}
.teaser-card .teaser-grid .teaser-media img{
  width: 100%; height: 100%; object-fit: cover;
}

/* 2-Spalten-Ansicht ( ?cols=2 ): etwas kleinere Medienspalte */
@media (min-width: 768px){
  .teaser-grid-2 .teaser-grid{ grid-template-columns: 220px 1fr !important; }
  .teaser-grid-2 .teaser-media{ height: 150px !important; }
}

/* Handy: untereinander stapeln */
@media (max-width: 575.98px){
  .teaser-card .teaser-grid{ grid-template-columns: 1fr !important; }
  .teaser-card .teaser-grid .teaser-media{ height: 180px !important; }
}

/* Falls irgendwo noch 16:9 erzwungen wird: neutralisieren */
.teaser-card .teaser-media.ratio-16x9{
  aspect-ratio: auto !important;
  height: auto !important;
}
.teaser-card .teaser-grid{display:grid;grid-template-columns:minmax(260px,34%) 1fr;gap:1rem}
@media (max-width: 575.98px){
  .teaser-card .teaser-grid{grid-template-columns:1fr}
}
/* Startseiten-Teaser: Titelbalken sauber und einheitlich */
:root{
  --title-lines: 3;        /* Anzahl Zeilen */
  --title-lh: 1.18;        /* Zeilenhöhe */
  --title-fs: .95rem;      /* Fontgröße */
  --title-pad-y: .5rem;    /* vertikales Padding */
}

/* höhere Spezifität + !important, damit alte Regeln sicher überschrieben werden */
.home-teaser.card .titlebar{
  background: var(--accent-ink) !important;  /* dunkle Headerfarbe */
  color: #fff !important;

  padding: var(--title-pad-y) .75rem;
  font-size: var(--title-fs);
  font-weight: 500;                           /* nicht fett */
  line-height: var(--title-lh);

  border-top-left-radius:.75rem;
  border-top-right-radius:.75rem;

  /* Multi-line clamp + fixe Gesamthöhe inkl. Padding */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--title-lines);
  overflow: hidden;

  /* Höhe = Zeilenhöhe + Padding oben/unten */
  height: calc(var(--title-lines) * var(--title-lh) * 1em + (var(--title-pad-y) * 2));
  min-height: calc(var(--title-lines) * var(--title-lh) * 1em + (var(--title-pad-y) * 2));
  max-height: calc(var(--title-lines) * var(--title-lh) * 1em + (var(--title-pad-y) * 2));
}

/* Links erben weiß, vollständige Klickfläche im Balken */
.home-teaser.card .titlebar a{
  display:block;
  color:inherit !important;
  text-decoration:none;
}
.home-teaser.card .titlebar a:hover{ opacity:.9; }
:root{
  --title-lines: 3;        /* Anzahl Zeilen */
  --title-lh: 1.18;        /* Zeilenhöhe */
  --title-fs: .95rem;      /* Fontgröße */
  --title-pad-y: .5rem;    /* vertikales Padding */
  --header-bg: #2a6f3b;    /* gleiche Farbe wie Kopfzeile */
}

.home-teaser.card .titlebar{
  background: var(--header-bg) !important;  /* Kopfzeilenfarbe */
  color: #fff !important;

  padding: var(--title-pad-y) .75rem;
  font-size: var(--title-fs);
  font-weight: 500;
  line-height: var(--title-lh);

  border-top-left-radius:.75rem;
  border-top-right-radius:.75rem;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--title-lines);
  overflow: hidden;

  height: calc(var(--title-lines) * var(--title-lh) * 1em + (var(--title-pad-y) * 2));
  min-height: calc(var(--title-lines) * var(--title-lh) * 1em + (var(--title-pad-y) * 2));
  max-height: calc(var(--title-lines) * var(--title-lh) * 1em + (var(--title-pad-y) * 2));
}

.home-teaser.card .titlebar a{
  display:block;
  color:inherit !important;
  text-decoration:none;
}
.home-teaser.card .titlebar a:hover{ opacity:.9; }
/* ==== Startseiten-Teaser (einheitliche Höhe, Header-Farbe) ==== */
/* Wenn ihr bereits eine Kopfzeilenfarbe als Variable habt, tragt sie hier ein: */
:root {
  /* Fällt auf Grün zurück, kann aber z. B. auf var(--rf-header-bg) zeigen */
  --header-bg: #2a6f3b;
  --title-lines: 3;
  --title-lh: 1.15;
  --title-fs: 0.95rem;
  --title-pad-y: 0.5rem;
}

.home-teaser.card { border-radius: .75rem; overflow: hidden; }
.home-teaser .titlebar{
  background: var(--header-bg);
  color: #fff;
  padding: var(--title-pad-y) .75rem;
  font-size: var(--title-fs);
  font-weight: 500;                 /* nicht fett */
  line-height: var(--title-lh);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--title-lines);
  overflow: hidden;

  /* feste Höhe = gleiche Höhe bei 2/3 Zeilen */
  height: calc(var(--title-lines) * var(--title-lh) * 1em + (var(--title-pad-y) * 2));
  min-height: calc(var(--title-lines) * var(--title-lh) * 1em + (var(--title-pad-y) * 2));
}

.home-teaser .teaser-img{
  width: 100%;
  height: 200px;            /* einheitliche Bildhöhe */
  object-fit: cover;
  object-position: center bottom; /* unten ausrichten */
  display: block;
}
:root { --rf-header-bg: #2a6f3b; }  /* eure zentrale Header-Farbe */
:root { --header-bg: var(--rf-header-bg); }
/* markiert das zuletzt angeklickte Bild */
.sn-selected { outline: 2px solid #0d6efd; outline-offset: 2px; }