/* =========================
   TC-Methler – Cassiopeia User CSS
   Sauber, modern, konfliktfrei
   ========================= */


/* =========================
   0) Design-Farben
   ========================= */
:root {
  --tcm-blue: #243a73;
  --tcm-gold: #ffd95a;
  --page-bg: #f4f6fb;
  --card-bg: #ffffff;

  /* ✅ Neues modernes Vereins-Orange */
  --tcm-orange: #f68b1e;
}
/* =========================
   1) Header & Navigation (clean)
   ========================= */

/* Cassiopeia-Brand ausblenden */
.container-header .navbar-brand { display: none; }

/* Menü-Hintergrund beibehalten */
.container-header .mod-menu {
  background: var(--tcm-blue);
  justify-content: center;
}

/* Menü-Links ORANGE (höhere Spezifität ggü. Bootstrap) */
.container-header .navbar-dark .navbar-nav .nav-link,
.container-header .mod-menu .nav-link {
  color: var(--tcm-orange) !important;
  font-weight: 600;
  padding: .75rem 1rem;
}

/* Hover/Fokus – heller Ton für gute Lesbarkeit */
.container-header .navbar-dark .navbar-nav .nav-link:hover,
.container-header .navbar-dark .navbar-nav .nav-link:focus,
.container-header .mod-menu .nav-link:hover {
  color: #ffdca8 !important; /* sehr helles Orange/Weiß-Mix */
}

/* Aktiver Menüpunkt */
.container-header .navbar-dark .navbar-nav .nav-link.active,
.container-header .navbar-dark .navbar-nav .show > .nav-link,
.container-header .mod-menu li.current > a.nav-link {
  color: var(--tcm-orange) !important;
  font-weight: 700;
}

/* Dropdown-Pfeil orange */
.container-header .navbar-dark .dropdown-toggle::after {
  border-top-color: var(--tcm-orange) !important;
}

/* Mobile: Hamburger orange */
.container-header .navbar-dark .navbar-toggler { 
  border-color: var(--tcm-orange);
}
.container-header .navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(246,139,30,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Sticky Navi (wie gehabt) */
header.container-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* =========================
   2) Hero-Banner
   ========================= */
.tcm-hero {
  width: 100%;
  height: clamp(220px, 28vw, 380px);
  background-image: url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  margin: 12px 0 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* leichte Dunkelung zur besseren Lesbarkeit */
.tcm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.20) 0%,
    rgba(0,0,0,.10) 40%,
    rgba(0,0,0,0) 100%
  );
}


/* =========================
   3) Seitenhintergrund & Content-Container
   ========================= */

body {
  background: var(--page-bg);
}

/* Haupt-Content leicht abheben */
.container-component {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-top: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}


/* =========================
   4) Blog–Cards (Variante A)
   ========================= */

/* Abstand zwischen Artikeln */
.blog-items {
  row-gap: 1.25rem;
}

/* Die Artikel-Karte */
.blog-items .blog-item {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;

  display: flex;
  flex-direction: column;
  height: 100%;

  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover-Effekt */
.blog-items .blog-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

/* Bild im Beitrag */
.blog-items .blog-item .item-image {
  margin: -1.25rem -1.25rem .75rem;
}

.blog-items .blog-item .item-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

/* Inhalt */
.blog-items .blog-item .item-content {
  padding: .25rem 0 0;
  flex-grow: 1;
}

.blog-items .blog-item h2 {
  margin: 0 0 .5rem;
}

.blog-items .blog-item p {
  line-height: 1.6;
}

.blog-items .item .item-title a,
h1,h2,h3 {
  color: var(--tcm-orange) !important;
}

/* Weiterlesen-Button */
.blog-items .readmore a {
  display: inline-block;
  padding: .55rem .9rem;
  background: var(--tcm-blue);
  color: var(--tcm-orange) !important;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  transition: filter .15s ease;
}

.blog-items .readmore a:hover {
  filter: brightness(1.05);
}

/* Pagination schöner */
.pagination .page-item .page-link {
  border-radius: 8px;
}


/* =========================
   5) Breadcrumbs
   ========================= */

.breadcrumb {
  background: transparent;
  margin: .25rem 0 1rem;
}


/* =========================
   6) Mobile Optimierungen
   ========================= */

@media (max-width: 768px) {
  .blog-items .blog-item {
    padding: 1rem;
    border-radius: 12px;
  }

  .blog-items .blog-item .item-image {
    margin: -1rem -1rem .65rem;
  }

  .blog-items .blog-item .item-image img {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
}
/* =========================
   7) Tabellen-Styling
   ========================= */

/* Basis-Design für alle Standard-Tabellen */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

/* Kopfzeile */
table thead {
  background: var(--tcm-blue);
  color: #fff;
  font-weight: 700;
  text-align: left;
}

table thead th {
  padding: 0.9rem 1.2rem;
  border-bottom: 2px solid rgba(255,255,255,0.1);
}

/* Tabelleninhalt */
table tbody tr {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

table tbody td {
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid #eee;
}

/* Abwechselnde Zeilenfarben */
table tbody tr:nth-child(even) {
  background: #f8f9fc;
}

/* Hover-Effekt */
table tbody tr:hover {
  background: #eef3ff;
  box-shadow: inset 3px 0 0 var(--tcm-blue);
}

/* Letzte Zeile ohne Rahmen */
table tbody tr:last-child td {
  border-bottom: none;
}

/* ===== 1) Bilder in Tabellen immer responsiv ===== */
.com-content table img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== 2) Spezialfall: Tabellen MIT Bildern NICHT stacken ===== */
/* moderne Browser: :has() ist in aktuellen Chrome/Edge/Safari/Android verfügbar */
@media (max-width: 768px) {
  /* Standard: unsere bestehende Stack-Regel bleibt bestehen … */

  /* Ausnahme: Tabellen, die irgendwo ein <img> enthalten -> nicht stapeln */
  .com-content table:has(img) {
    display: block;          /* für Scroll-Container */
    overflow-x: auto;        /* horizontales Scrollen statt Stacken */
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,.05);
  }

  /* alles wieder in „Tabellenmodus“ zurücksetzen */
  .com-content table:has(img) thead,
  .com-content table:has(img) tbody,
  .com-content table:has(img) tr,
  .com-content table:has(img) th,
  .com-content table:has(img) td {
    display: table-header-group;   /* thead */
  }
  .com-content table:has(img) tbody { display: table-row-group; }
  .com-content table:has(img) tr    { display: table-row; box-shadow:none; margin:0; padding:0; }
  .com-content table:has(img) th,
  .com-content table:has(img) td    { display: table-cell; padding: .6rem 1rem; border: none; }

  /* die Label-Generierung (data-label) für Kartenansicht AUS für Bild-Tabellen */
  .com-content table:has(img) td::before { content: none !important; }

  /* optional: Scroll-Hinweis (dezente Linie unten) */
  .com-content table:has(img)::after {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
    margin-top: .25rem;
  }
}

/* ===== 3) Fallback-Klasse: bestimmte Tabellen nie stacken (ohne :has) ===== */
/* Wenn du irgendwo Probleme siehst: gib der Tabelle class="no-stack" */
@media (max-width: 768px) {
  .com-content table.no-stack {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .com-content table.no-stack thead,
  .com-content table.no-stack tbody,
  .com-content table.no-stack tr,
  .com-content table.no-stack th,
  .com-content table.no-stack td {
    display: revert; /* nimmt die Stack-Regeln zurück */
  }
  .com-content table.no-stack td::before { content: none !important; }
}