/* =========================================================
   Taiji School Berlin – Custom Theme (Sandfarben)
   ========================================================= */

/* === Farbvariablen === */
:root {
  --sand-light: #f9f5ed;   /* Grundhintergrund */
  --sand-medium: #efe6d7;  /* Header/Footer */
  --ink: #222;
  --muted: #666;
  --accent: #c75b39;
}

/* === Global === */
html, body { background: var(--sand-light); color: var(--ink); }
p, .text-muted, .text-body-secondary { color: var(--muted); }

/* ============================================
   HEADER
   ============================================ */
#page-header {
  min-height: 115px !important;
  background-color: var(--sand-medium) !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
#page-header > .container.container-mainnavigation {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
}
#page-header .navbar-brand img {
  max-height: 75px !important; height: auto !important; display: block !important;
}

@media (min-width: 992px) {
  #page-header .navbar-toggler { display: none !important; }
  #mainnavigation.collapse { display: flex !important; }
  #mainnavigation {
    display: flex !important; flex-grow: 1 !important; margin-left: auto !important;
    justify-content: flex-end !important; width: auto !important;
  }
  #mainnavigation .navbar-nav {
    flex-direction: row !important; margin-left: auto !important; margin-right: 0 !important;
    justify-content: flex-end !important;
  }
  #mainnavigation .nav-link {
    color: var(--ink) !important; font-weight: 500; text-transform: none;
    text-align: right; padding: 0.5rem 1rem !important; transition: color .2s;
  }
  #mainnavigation .nav-link:hover { color: var(--accent) !important; }
}
@media (max-width: 991.98px) {
  #mainnavigation .nav-link { color: var(--ink) !important; }
}

/* =========================================================
   HERO / CAROUSEL
   ========================================================= */
.carousel .carousel-item .image,
.carousel .item .image,
.carousel .carousel-item picture img,
.section-jumbotron .background-image,
.jumbotron .background-image,
.hero .image {
  filter: grayscale(30%); opacity: .9; object-fit: cover; object-position: center;
}
.carousel-content .carousel-header,
.carousel-content .carousel-header.awesome,
.carousel-content .carousel-header.h2,
.section-jumbotron h1, .jumbotron h1 {
  font-family: "Source Sans Pro","Helvetica Neue",Arial,sans-serif;
  font-weight: 400; letter-spacing: 0.02em;
  font-size: clamp(2.6rem, 6.8vw, 4.8rem);
  line-height: 1.1; text-transform: none; color: #fff; text-align: center;
  text-shadow: 0 3px 8px rgba(0,0,0,0.75), 0 8px 24px rgba(0,0,0,0.6), 0 0 25px rgba(255,255,255,0.25);
}
.carousel-content, .carousel-content-inner, .carousel-text-inner { color:#fff !important; }

/* Badge */
.taiji-badge{
  position:absolute; right:24px; top:24px; background:#fff; color:var(--accent);
  border-radius:48px; padding:14px 16px; font-weight:700; line-height:1; text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.15); z-index:3;
}

/* =========================================================
   CONTENT & FOOTER
   ========================================================= */
.section, .content, .main-section { background: transparent; }
.footer, .site-footer {
  background-color: var(--sand-medium) !important;
  border-top: 1px solid rgba(0,0,0,.08);
  color: var(--ink);
  padding: 2rem 0;
}
.footer a, .site-footer a { color: var(--ink); transition: color .2s; }
.footer a:hover, .site-footer a:hover { color: var(--accent); text-decoration: underline; }


/* ==== FORCE FOOTER BACKGROUND (am Ende der Datei einfügen) ==== */
#page-footer,
footer.footer,
footer.site-footer,
footer.section,
footer.main-footer,
.site-footer,
.footer,
.section-footer,
.footer.bg-light,
.site-footer.bg-light {
  --bs-bg-opacity: 1;
  background-color: var(--sand-medium) !important;
  background-image: none !important;
}

/* Falls ein inneres Wrapper-Element den Eindruck "transparent" erzeugt */
#page-footer > .container,
footer.footer > .container,
.site-footer > .container {
  background: transparent !important;   /* kein eigener Hintergrund, damit der Footer-Hintergrund sichtbar bleibt */
}

/* Text/Links im Footer */
#page-footer, .footer, .site-footer {
  color: var(--ink) !important;
}
#page-footer a, .footer a, .site-footer a {
  color: var(--ink) !important;
}
#page-footer a:hover, .footer a:hover, .site-footer a:hover {
  color: var(--accent) !important;
}

/* =========================================================
   Footerbereich (ab footer-section-meta) durchgehend einfärben
   ========================================================= */

/* Äußere Section über gesamte Breite einfärben */
section.footer-section.footer-section-meta {
  background-color: #e1d6bd !important;   /* dunklerer Sandton */
  border-top: 1px solid rgba(0,0,0,0.06);
  color: var(--ink);
  margin: 0;
  padding: 0;
}

/* Innenliegende Elemente transparent halten */
section.footer-section.footer-section-meta .frame-group-container,
section.footer-section.footer-section-meta .frame-group-inner,
section.footer-section.footer-section-meta .frame-container,
section.footer-section.footer-section-meta .frame-inner {
  background: transparent !important;
}

/* Die eigentliche Info-Section fügt sich nahtlos ein */
section.footer-section.footer-section-meta .footer-info-section {
  background: transparent !important;
  color: var(--ink) !important;
}

/* Links und Hover */
section.footer-section.footer-section-meta a {
  color: var(--ink) !important;
  transition: color 0.2s ease-in-out;
}
section.footer-section.footer-section-meta a:hover {
  color: var(--accent) !important;
  text-decoration: underline;
}

/* =========================================================
   Fade-Out nur für das Start-Hero Carousel mit ID #carousel-288
   ========================================================= */

/* Basis: Item und Wrapper vorbereiten */
#carousel-288,
#carousel-288 .carousel-inner,
#carousel-288 .carousel-item {
  position: relative;
  overflow: hidden; /* keine Überstände */
}

/* Hintergrund-Layer bewusst nach hinten */
#carousel-288 .carousel-backgroundimage-container,
#carousel-288 .carousel-backgroundimage {
  position: relative;
  z-index: 0;
}

/* Overlay-Verlauf unten, über dem Bild, unter dem Text */
#carousel-288 .carousel-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14%;            /* 35–60% je nach Geschmack */
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(249,245,237,0) 0%,
    rgba(249,245,237,0.15) 30%,
    rgba(249,245,237,0.35) 60%,
    rgba(249,245,237,0.7) 85%,
    #f9f5ed 100%          /* in Footer-Ton ändern: z. B. #e1d6bd */
  );
}

/* Text über dem Overlay halten */
#carousel-288 .carousel-content,
#carousel-288 .carousel-caption {
  position: relative;
  z-index: 2;
}

/***********************************************************************/
#carousel-288 .carousel-content { position: relative; }  /* Anker fürs absolute Badge */
.taiji-badge{
  position:absolute; right:24px; top:24px; background:#fff; color:var(--accent);
  border-radius:48px; padding:14px 16px; font-weight:700; line-height:1; text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.15); z-index:3;
}

/* --- Badge im Start-Hero sichtbar machen --- */
#carousel-288 .carousel-item { position: relative; }

#carousel-288 .carousel-content {
  position: relative;         /* Bezugspunkt für das Badge */
  z-index: 5;                 /* über Bild/Overlay */
}

#carousel-288 .carousel-item::after {
  z-index: 1;                 /* Fade-Overlay bleibt unter dem Text/Badge */
}

#carousel-288 .carousel-backgroundimage-container,
#carousel-288 .carousel-backgroundimage {
  position: relative;
  z-index: 0;                 /* Bild ganz nach hinten */
}

/* Das Badge selbst */
#carousel-288 .taiji-badge{
  position: absolute;
  top: 24px;
  right: 24px;
  background: #fff;
  color: var(--accent);
  border-radius: 48px;
  padding: 14px 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.15);
  z-index: 6;                 /* oberste Ebene */
}

/* Debug (optional kurz aktivieren): zeigt, wo das Badge liegt */
/* #carousel-288 .taiji-badge { outline: 2px dashed red; } */

/* === Start-Hero: Text sicher über Bild & Fade, Badge sichtbar === */
#carousel-288 { position: relative; }

/* Fade unter Text halten */
#carousel-288 .carousel-item { position: relative; }
#carousel-288 .carousel-item::after { z-index: 1; pointer-events: none; }

/* Bild ganz hinten */
#carousel-288 .carousel-backgroundimage-container,
#carousel-288 .carousel-backgroundimage { position: relative; z-index: 0; }

/* Caption-Layer klar nach oben */
#carousel-288 .carousel-content,
#carousel-288 .carousel-content-inner,
#carousel-288 .carousel-text-inner { position: relative; z-index: 10; }

/* Headline-Style erzwingen (Farbe + Schrift) */
#carousel-288 .carousel-header {
  color: #fff !important;
  font-family: "Source Sans 3","Source Sans Pro","Helvetica Neue",Arial,sans-serif !important;
  font-weight: 600;
  letter-spacing: .02em;
  text-shadow:
    0 3px 8px rgba(0,0,0,.75),
    0 8px 24px rgba(0,0,0,.6),
    0 0 25px rgba(255,255,255,.25);
}

/* Badge direkt am Carousel-Root positionieren */
#carousel-288 .taiji-badge{
  position:absolute; top:24px; right:24px;
  background:#fff; color:var(--accent);
  border-radius:48px; padding:14px 16px; font-weight:700; line-height:1; text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.15);
  z-index: 20; /* über Caption/Fade */
}

/* Mobile kleiner */
@media (max-width: 768px){
  #carousel-288 .taiji-badge{ top:12px; right:12px; padding:10px 12px; }
}

/************************************************************************************************/
/* === Start-Hero #carousel-288: Headline sicher sichtbar === */

/* 1) Grund-Layer korrekt stapeln */
#carousel-288 { position: relative; }
#carousel-288 .carousel-backgroundimage-container,
#carousel-288 .carousel-backgroundimage { position: relative; z-index: 0; }
#carousel-288 .carousel-item { position: relative; }
#carousel-288 .carousel-item::after { z-index: 1; pointer-events: none; } /* Fade bleibt unter Text */

/* 2) Caption/Content-Overlay auf volle Fläche legen und über Bild/Fade */
#carousel-288 .carousel-content {
  position: absolute;        /* statt relativ */
  inset: 0;                  /* füllt den gesamten Slide */
  display: flex;
  align-items: center;       /* middle; nimm 'flex-end' für unten */
  justify-content: center;   /* zentriert */
  padding: 2rem;             /* etwas Luft */
  z-index: 10;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 3) Sicherheit: alle inneren Wrapper sichtbar halten */
#carousel-288 .carousel-content-inner,
#carousel-288 .carousel-text-inner {
  position: relative;
  z-index: 11;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 4) Manche Themes verstecken Header-Typen – aktiv wieder einblenden */
#carousel-288 .carousel-item-type-header .carousel-header {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 5) Headline-Stil + oberster Layer */
#carousel-288 h1.carousel-header {
  position: relative;
  z-index: 12;               /* über allem */
  color: #fff !important;
  font-family: "Source Sans 3","Source Sans Pro","Helvetica Neue",Arial,sans-serif !important;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  text-shadow:
    0 3px 8px rgba(0,0,0,.75),
    0 8px 24px rgba(0,0,0,.6),
    0 0 25px rgba(255,255,255,.25);
}

/* 6) Badge weiterhin oben rechts */
#carousel-288 .taiji-badge { z-index: 20; }

/* 7) Kurz zum Debuggen (kannst du danach wieder löschen):
   zeigt dir die Fläche der Caption an */
/* #carousel-288 .carousel-content { outline: 2px dashed red; } */

/* === Headline einzeilig (kein Zeilenumbruch) === */
#carousel-288 h1.carousel-header {
  white-space: nowrap !important;       /* kein automatischer Umbruch */
  display: inline-block !important;     /* verhindert Block-Zeilenbruch */
  max-width: 100% !important;
  overflow: hidden;                     /* falls Text doch zu lang ist */
  text-overflow: ellipsis;              /* optional: ... falls abgeschnitten */
}

/* Headline NICHT abschneiden */
#carousel-288 h1.carousel-header {
  overflow: visible !important;
  text-overflow: clip !important;
}

/* =========================================================
   Responsive Feintuning – Headline im Start-Hero (#carousel-288)
   ========================================================= */

/* Basisgröße – Desktop (ab ca. 992px) */
#carousel-288 h1.carousel-header {
  font-size: clamp(2.8rem, 6vw, 4.8rem) !important;
  line-height: 1.1;
  letter-spacing: 0.015em;
  white-space: nowrap !important; /* Desktop bleibt einzeilig */
}

/* Tablet-Portrait (768–991px) – etwas kleiner, bleibt oft einzeilig */
@media (max-width: 991.98px) {
  #carousel-288 h1.carousel-header {
    font-size: clamp(2.4rem, 7vw, 4rem) !important;
    white-space: nowrap !important;
  }
}

/* Kleine Geräte (unter 768px) – darf umbrechen, falls nötig */
@media (max-width: 767.98px) {
  #carousel-288 h1.carousel-header {
    font-size: clamp(2rem, 8vw, 3.4rem) !important;
    white-space: normal !important;
    line-height: 1.2;
  }
}

/* Sehr kleine Geräte (unter 480px) – zentriert, kleiner Abstand */
@media (max-width: 480px) {
  #carousel-288 h1.carousel-header {
    font-size: clamp(1.8rem, 9vw, 2.8rem) !important;
    line-height: 1.25;
    padding: 0 0.5rem;
  }
}

/* ===== Mobile: schwarze Ränder im Hero (carousel-288) entfernen ===== */

/* 1) Alle Carousel-Layer auf Sand statt Schwarz setzen */
#carousel-288,
#carousel-288 .carousel-inner,
#carousel-288 .carousel-item,
#carousel-288 .carousel-backgroundimage-container,
#carousel-288 .carousel-backgroundimage {
  background-color: var(--sand-light) !important; /* statt default: #000 */
}

/* 2) Bild-Container sicher vollflächig rendern */
#carousel-288 .carousel-backgroundimage {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* 3) Auf kleinen Screens evtl. Innenabstände/Gutter weg,
      damit nichts vom Carousel-Hintergrund seitlich durchscheint */
@media (max-width: 767.98px) {
  #carousel-288,
  #carousel-288 .carousel-inner,
  #carousel-288 .carousel-item {
    border: 0 !important;
  }

  /* falls der Carousel-Frame noch Seiten-Padding hat: */
  #c288 .frame-inner,
  #c288 .frame-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   Sanfterer Fade-Out im Start-Hero (carousel-288)
   ========================================================= */
#carousel-288 .carousel-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%; /* war 35% — höher = längerer Übergang */
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(249,245,237,0) 0%,     /* komplett transparent */
    rgba(249,245,237,0) 55%,    /* 0→55% bleibt voll durchsichtig */
    rgba(249,245,237,0.7) 85%,  /* ab hier langsam sanft einblenden */
    #f9f5ed 100%                /* deckend unten */
  );
}

/* 1) Gradient-Ende exakt auf den Seitenhintergrund matchen + 1px überlappen */
#carousel-288 .carousel-item::after {
  bottom: -1px; /* minimal über den Abschluss hinausziehen */
  height: 52%;  /* etwas länger = sanfter, verhindert Lücke */
  background: linear-gradient(
    to bottom,
    rgba(249,245,237,0) 0%,
    rgba(249,245,237,0) 60%,     /* später anfangen */
    rgba(249,245,237,0.7) 85%,
    var(--sand-light) 100%       /* exakt deine Grundfarbe verwenden */
  );
}

/* 2) Der Bereich unter dem Hero hat sicher die gleiche Grundfarbe */
.page-uid-1 .section,
.page-uid-1 .content,
.page-uid-1 .main-section {
  background-color: var(--sand-light) !important;
}

/* 3) Eventuelle Trennlinien oder Schatten am ersten Content-Block entfernen */
.page-uid-1 .section,
.page-uid-1 .content {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* 4) Falls das erste Element unter dem Hero ein Frame mit top-Rand ist */
.page-uid-1 .frame,
.page-uid-1 .frame-container,
.page-uid-1 .frame-inner {
  border-top: 0 !important;
}

/* 1) Gradient-Ende exakt auf den Seitenhintergrund matchen + 1px überlappen */
#carousel-288 .carousel-item::after {
  bottom: -1px; /* minimal über den Abschluss hinausziehen */
  height: 14%;  /* etwas länger = sanfter, verhindert Lücke */
  background: linear-gradient(
    to bottom,
    rgba(249,245,237,0) 0%,
    rgba(249,245,237,0) 60%,     /* später anfangen */
    rgba(249,245,237,0.7) 85%,
    var(--sand-light) 100%       /* exakt deine Grundfarbe verwenden */
  );
}

/* 2) Der Bereich unter dem Hero hat sicher die gleiche Grundfarbe */
.page-uid-1 .section,
.page-uid-1 .content,
.page-uid-1 .main-section {
  background-color: var(--sand-light) !important;
}

/* 3) Eventuelle Trennlinien oder Schatten am ersten Content-Block entfernen */
.page-uid-1 .section,
.page-uid-1 .content {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* 4) Falls das erste Element unter dem Hero ein Frame mit top-Rand ist */
.page-uid-1 .frame,
.page-uid-1 .frame-container,
.page-uid-1 .frame-inner {
  border-top: 0 !important;
}

/* =========================================================
   Accordion (Bootstrap) – Taiji School Berlin Farbanpassung
   ========================================================= */

/* Grundzustand: geschlossen (collapsed) */
.accordion-button.collapsed {
  background-color: var(--sand-medium) !important;   /* heller Sand-Ton */
  color: var(--ink) !important;                      /* dunkler Text */
  box-shadow: none !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  transition: background-color .3s ease, color .3s ease;
}

/* Hover im geschlossenen Zustand */
.accordion-button.collapsed:hover {
  background-color: #e7ddc9 !important;              /* etwas dunklerer Sand */
  color: var(--accent) !important;
}

/* Offener Zustand */
.accordion-button:not(.collapsed) {
  background-color: var(--sand-light) !important;
  color: var(--accent) !important;
  border-color: rgba(0,0,0,0.15) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.05) !important;
}

/* Icon-Pfeil (Chevron) – angleichen */
.accordion-button::after {
  filter: brightness(0.4);   /* dunkler Pfeil */
}
.accordion-button:not(.collapsed)::after {
  filter: hue-rotate(-10deg) brightness(0.7) saturate(1.2);
}

/* Accordion-Body (Inhalt) */
.accordion-body {
  background-color: var(--sand-light) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(0,0,0,0.05);
  border-top: none;
  padding: 1rem 1.25rem;
}

/* =========================================================
   Dropdown-Menü (Bootstrap) – Sandfarbenes Theme
   ========================================================= */

/* Menü-Container */
.dropdown-menu,
.dropdown-menu-simple {
  background-color: var(--sand-medium) !important;   /* heller Sandton wie Accordion-Button */
  border: 1px solid rgba(0,0,0,0.1) !important;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  padding: 0.25rem 0;
}

/* Menü-Elemente */
.dropdown-item {
  color: var(--ink) !important;
  background-color: transparent !important;
  padding: 0.5rem 1rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Hover / Focus */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #e7ddc9 !important; /* etwas dunklerer Sand */
  color: var(--accent) !important;
}

/* Aktives Element (z. B. gewählte Seite) */
.dropdown-item.active,
.dropdown-item.active:hover,
.dropdown-item:active {
  background-color: var(--sand-light) !important;
  color: var(--accent) !important;
}

/* Optional: Trennlinien im Menü etwas dezenter */
.dropdown-divider {
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Optionale Animation – leichtes Einblenden */
.dropdown-menu.show {
  animation: taijiDropdownFade 0.2s ease-out;
}
@keyframes taijiDropdownFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* =========================================================
   Tabellen & Table-Wrapper (Taiji School Berlin Theme)
   ========================================================= */

/* Wrapper (Bootstrap .table-responsive) */
.table-responsive {
  background-color: var(--sand-medium) !important;   /* wie Accordion/Dropsown */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  padding: 0.75rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

/* Tabellen selbst */
.table {
  color: var(--ink);
  background-color: var(--sand-light);
  border-color: rgba(0,0,0,0.1);
  margin-bottom: 0;
}

/* Tabellenkopf */
.table thead th {
  background-color: var(--sand-medium);
  color: var(--ink);
  font-weight: 600;
  border-bottom: 2px solid rgba(0,0,0,0.08);
}

/* Tabellenzellen */
.table td,
.table th {
  border-top: 1px solid rgba(0,0,0,0.06);
  vertical-align: middle;
}

/* Alternierende Zeilen */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Hover-Effekt */
.table-hover tbody tr:hover {
  background-color: #e7ddc9 !important; /* dezenter Sand-Hover wie bei Dropdowns */
  color: var(--accent);
}

/* Caption (Tabellenbeschreibung) */
.table caption {
  caption-side: top;
  font-weight: 600;
  color: var(--muted);
  padding: 0.5rem;
}

/* Responsive-Wrapper Scrollbar angleichen */
.table-responsive::-webkit-scrollbar {
  height: 8px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0.05);
}


/**************************************************************************************/
/* =========================================================
   Tabellen – Feinschliff (harmonisch eingebettet)
   ========================================================= */

/* Wrapper */
.table-responsive {
  background-color: var(--sand-medium) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: 10px;
  padding: 0.75rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

/* Tabelle selbst */
.table {
  --bs-table-bg: #f4efe4; /* sanfterer Ton statt rein sand-light */
  --bs-table-border-color: rgba(0,0,0,0.07);
  --bs-table-hover-bg: #e8dfcb;
  --bs-table-striped-bg: rgba(0,0,0,0.02);

  background-color: var(--bs-table-bg);
  color: var(--ink);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}

/* Kopfzeile */
.table thead th {
  background-color: var(--sand-medium);
  color: var(--ink);
  font-weight: 600;
  border-bottom: 2px solid rgba(0,0,0,0.08);
}

/* Zellen */
.table td, .table th {
  border-top: 1px solid rgba(0,0,0,0.06);
  vertical-align: middle;
  padding: 0.6rem 0.9rem;
}

/* Alternierende Zeilen & Hover */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0,0,0,0.015);
}
.table-hover tbody tr:hover {
  background-color: #e8dfcb !important;
  color: var(--accent);
}

/* Links */
.table a {
  color: var(--accent);
  text-decoration: underline;
}
.table a:hover {
  text-decoration: none;
}

/* Caption */
.table caption {
  caption-side: top;
  color: var(--muted);
  font-weight: 600;
  padding-bottom: 0.4rem;
}

/* Responsive Scrollbar */
.table-responsive::-webkit-scrollbar {
  height: 8px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0.05);
}

/* ================================
   A) Nur horizontale Linien in Tabellen
   ================================ */

/* alle Standard-Borders entfernen – auch .table-bordered */
.table,
.table td,
.table th,
.table > :not(caption) > * > *,
.table-bordered > :not(caption) > * > * {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Kopfzeile: nur unten eine feine Linie */
.table thead th {
  background: transparent !important;
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,0.10) !important;
}

/* Datenzeilen: nur unten eine Linie */
.table tbody tr {
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
.table tbody tr:last-child { border-bottom: 0 !important; }

/* dezenter Hover ohne Kästchen */
.table-hover tbody tr:hover {
  background-color: rgba(0,0,0,0.03) !important;
  color: var(--accent);
}

/* ================================
   B) Keine „Karten“-Box um Tabellen
   ================================ */

/* Wrapper neutralisieren */
.table-responsive {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Typo3/BootstrapPackage Tabellen-CE: Frame-Hintergrund/Rand aus */
.ce-table .frame-inner,
.frame.ce-table .frame-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Fallback falls ein .frame um die Tabelle liegt (ohne .ce-table) */
.frame .table-responsive { background: transparent !important; }

/* =========================================================
   Saubere horizontale Trenner für Tabellen (fixiert)
   ========================================================= */

/* =========================================================
   Horizontale UND vertikale Trenner – sandfarben & dezent
   ========================================================= */

.table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100%;
}

/* Kopfzeile: leicht stärker abgesetzt */
.table thead th {
  border-bottom: 2px solid rgba(60, 45, 25, 0.2) !important;
  color: var(--ink);
  font-weight: 600;
  background: transparent !important;
}

/* Alle Zellen mit feiner Sandlinie unten */
.table td, 
.table th {
  border-bottom: 1px solid rgba(60, 45, 25, 0.12) !important;
  border-right: none !important; /* keine vertikalen Gitterlinien */
  padding: 0.6rem 0.8rem !important;
}

/* Letzte Zeile behält ebenfalls die Linie */
.table tbody tr:last-child td {
  border-bottom: 1px solid rgba(60, 45, 25, 0.12) !important;
}

/* Kein Außenrahmen */
.table,
.table > :not(caption) > * > * {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* dezentes Hover-Feedback */
.table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

/* Farbe harmonisch im Sandfarbton */
.table, .table td, .table th {
  border-color: #d9cdb5 !important; /* dunklerer Sandton passend zu var(--sand-medium) */
}

/**************************************************************************************/

/* Breadcrumb auf der Seite "Weitere Taiji-Schulen" ausblenden */
body.page-75 .breadcrumb {
  display: none !important;
}