/**
 * custom.css
 * Pfad: /templates/shaper_helixultimate/css/custom.css
 *
 * Helix Ultimate lädt diese Datei automatisch wenn sie hier liegt.
 * Falls sie nicht greift: Inhalt alternativ unter
 * Template Options > Custom Code > Custom CSS einfügen.
 *
 * Enthält:
 *  1. Split-Article Layout
 *  2. Slim Sidebar (50px, persistent, fixed)
 *  3. Slide-Out Navigation
 *  4. Content-Overlay beim Öffnen des Menüs
 */


/* ============================================================
   RESET / BASE
   Helix-eigene Container auf volle Breite setzen
   ============================================================ */

.sp-page-builder .sp-pb-section,
#sp-component,
.container,
.container-fluid {
    padding-left: 0 !important;
    max-width: 100% !important;
    padding-right: 0 !important;    /* Chris: Überschreibt die Bootstrap-Abstände des Hauptcontainers)  */
    padding-top: 0 !important;
}


/* ============================================================
   1. SPLIT-ARTICLE LAYOUT
   ============================================================ */

.split-article {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    width: 100%;
    position: relative;
}

/* --- Linke Hälfte: Bildpanel --- */

.split-image-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100vh;
    overflow: hidden;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.split-bg-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    display: block;
}

.split-bg-fallback {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #1a3a5c;
}

/* Blauer Tint über dem Bild */
.split-image-tint {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 157, 224, 1);   /* Cyan-Definition  */
    mix-blend-mode: multiply;
    pointer-events: none;
}
/* Titel auf dem blauen Tint */
.split-title-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
/*   padding: 60px 40px 40px 70px;    /* Original. */
    text-align: center;
    z-index: 2;
}

.split-title {    /* regelt den Titel über dem linken Bild    */
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    line-height: 1.25;
    margin: 0 5rem 0.5rem 5rem;   /* Chris: Hier den Abstand links und rechts einstellen. */
    letter-spacing: 0.01em;
}

/*  .split-category {       /* es könnte sein, daß dieser Block unnötig ist, weil links keine Kategorie angezeigt werden soll ... */
/*    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.25rem 0.75rem;
    border-radius: 2px;
}
*/
/* --- Rechte Hälfte: Inhaltspanel --- */

.split-content-panel {
    margin-left: 50%;
    width: 50%;
    min-height: 100vh;
    overflow-y: auto;
    background: #f7f8fc;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-start; /* ← wichtig (für mehrzeilige Bild-Modul-Ausgabe. */
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: flex-start;
    box-sizing: border-box;
}

.split-content-inner {
    width: 100%;
    flex: 1 1 auto;   /* ← DAS ist der Schlüssel (vielleicht - für mehrspaltige Ausgabe) */
    display: block !important;
    padding: 2rem 2rem 2rem 2rem;
}

.split-meta-date {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7a8fa6;
    margin-bottom: 1.5rem;
}

.split-body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #2c3e50;
}

.split-body h2,
.split-body h3 {
    color: #1a3a5c;
    margin-top: 2rem;  /* war im Original 2rem.  */
}

.split-body > p:first-child {   /* wichtig, um Leerräume über dem Modul wegzubekommen.  */
  display: none !important;
}

.split-body a {
    color: inherit;    /* klappt: dann ist ein Link erst einmal nicht sichtbar  */
    text-decoration: none;  /* Chris: hier ist "underline" ersetzt */
    text-underline-offset: 3px;
}

.split-tags {
    margin-top: 0rem;    /* Original 2.5rem.  */
    padding-top: 0rem;    /* Original 1.5rem.  */
    border-top: 1px solid #dde3ec;
}

/* ===========================================================
 ============================================================
   2. SLIM SIDEBAR (persistent, fixed)
   ============================================================ 
   ===========================================================  
*/

#slim-sidebar {   /* das hier ist vermutlich erst einmal der transparente Overlay des Menüs*/
    /* Hier eine Einfügung, um das als Container handzuhaben (scrollbar) */
    height: 100vh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    /* Einfügung ende */
    position: fixed;  
    top: 0;
    left: 0;
    width: 6%;   /* Chris: Versuch, die Breite flexibel zu halten ... Overlay wird breiter */
    height: 100vh;
    border: 1px solid;
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.2); 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 22px;
    gap: 0;
/*    overflow: visible;     /* was macht das mit den Dingen?   */
    -webkit-transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                        background 0.32s ease;
            transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                        background 0.32s ease;
    z-index: 999;
}

#slim-sidebar.is-open {
  width: 28vh;   /* Chris: Flexible Breite wenn offen? Oder 230px ...  */
    background: rgba(15, 53, 71, 0.90); /* Farbe entspr. HKS 38 N  */
}

/* Hamburger-Button */
#menu-toggle {
    width: 65%;
    height: 12%;            /* Chris: Höhe des Hamburger-Icon im Viewport   */
    background: transparent;
    border: none;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0.7rem;   /* Chris: Im Original Pixel, das vergrößert die Höhe des Icons  */
    padding: 4px;
    border-radius: 4px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-transition: background 0.2s;
            transition: background 0.2s;
}

#menu-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Hamburger-Linien */
#menu-toggle .bar {
    display: block;
    width: 100%;
    height: 0.4rem;   /* im Original Pixel-Angabe (2px)   */
    background: #ffffff;
    border-radius: 1rem;   /* Chris: das fängt an zu funktionieren .... */
    -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
            transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
    -webkit-transform-origin: center;
            transform-origin: center;
}

/* Animiertes X beim Öffnen */
#slim-sidebar.is-open #menu-toggle .bar:nth-child(1) {
    -webkit-transform: translateY(7px) rotate(45deg);
            transform: translateY(7px) rotate(45deg);
}
#slim-sidebar.is-open #menu-toggle .bar:nth-child(2) {
    opacity: 0;
    width: 0;
}
#slim-sidebar.is-open #menu-toggle .bar:nth-child(3) {
    -webkit-transform: translateY(-7px) rotate(-45deg);
            transform: translateY(-7px) rotate(-45deg);
}

/* Trennlinie */
.sidebar-divider {
    width: 85%;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
    margin: 12px 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-transition: width 0.32s ease;
            transition: width 0.32s ease;
}

#slim-sidebar.is-open .sidebar-divider {
    width: 90%;   /* Original   */
}

/* Logo */
#sidebar-logo {
    width: 4rem;    /* Chris: Hier kann man sehr gut die Größe handhaben. */
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    opacity: 0.9;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-transition: width 0.32s ease, opacity 0.2s;
            transition: width 0.32s ease, opacity 0.2s;
    /* Beliebiges PNG-Logo auf Weiß setzen */
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
}

#slim-sidebar.is-open #sidebar-logo {  /* Chris:Vermutlich das sich vergrößerndes Logo beim Öffnen   */
      display: none;
}

/* Navigationsmenü */
#sidebar-nav {
    /* Einfügung für scrollbarkeit */
    flex: 1;                 /* nimmt restlichen Platz ein */
    overflow-y: hidden;        /* noch "zu", aktiviert Scrollen erst in geöffnetem Zustand */
    overflow: hidden;   /* Chris: Versuch, das Abgeschnittene sichtbar zu machen ... */
    scroll-behavior: smooth;
    /* Einfügung Ende */
    margin-top: 28px;
    width: 100%;
    padding: 0 20px;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
    -webkit-transition: opacity 0.25s ease 0.1s, -webkit-transform 0.25s ease 0.1s;
            transition: opacity 0.25s ease 0.1s, transform 0.25s ease 0.1s;
    
}
#sidebar-nav {   /* optionale Ergänzung für schönere Scrollbar ... */
    scrollbar-width: thin; /* nur bei Firefox? */
}

#sidebar-nav::-webkit-scrollbar {   /* optionale Ergänzung für schönere Scrollbar ... */
    width: 6px;
}

#sidebar-nav::-webkit-scrollbar-thumb {   /* optionale Ergänzung für schönere Scrollbar ... */
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
}

#slim-sidebar.is-open #sidebar-nav {
    opacity: 1;
	overflow-y: auto;   /* soll nur in geöffnetem Zustand scrollbar sein ... */
    pointer-events: auto;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

#sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}

#sidebar-nav ul li a {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500; 
    letter-spacing: 0.03em;
    line-height: 1.2rem;
/*    text-transform: uppercase;   /* lasse ich erst mal weg   */
    padding: 8px 6px;
    border-radius: 3px;
    white-space: nowrap;
    -webkit-transition: color 0.2s, background 0.2s;
            transition: color 0.2s, background 0.2s;
}

#sidebar-nav ul li a:hover,
#sidebar-nav ul li.active a {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}
#sidebar-nav ul li.menuitem-bold a,
#sidebar-nav ul li a.menuitem-bold {
    color: red !important;
    font-weight: 800 !important;
    font-size: 2rem !important;
}


/* ============================================================
   3. CONTENT OVERLAY (Abdunkelung)
   ============================================================ */

#content-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 9100;
    pointer-events: none;
    -webkit-transition: background 0.32s ease;
            transition: background 0.32s ease;
}

#content-overlay.is-active {
    background: rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    cursor: pointer;
}


/* ============================================================
   4. RESPONSIVE – Breakpoint < 768px
   ============================================================ */

@media (max-width: 767px) {

    .split-article {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .split-image-panel {
        position: relative;   /* kein fixed mehr auf Mobile */
        width: 100%;
        height: 60vw;         /* Bildhöhe proportional zur Bildschirmbreite */
        flex-shrink: 0;
    }

    .split-bg-image {
        position: absolute;   /* zurück auf absolute innerhalb des Panels */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .split-image-tint {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .split-title-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 40px 20px 20px 20px;
    }

    .split-content-panel {
        margin-left: 0;       /* kein Versatz mehr */
        width: 100%;
        min-height: auto;
    }

    .split-title {
        font-size: 1.3rem;
    }

    .split-content-inner {
        padding: 40px 24px;
    }
}

/* ============================================================
   ERGÄNZUNG: mod_menu Sondertypen in der Sidebar
   ============================================================ */

/* Separator-Linie zwischen Menüpunkten */
#sidebar-nav li.separator {
    padding: 4px 0;
    list-style: none;
}

.sidebar-menu-divider {
    display: block;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 6px;
}

/* Heading-Typ: nicht klickbare Überschrift */
#sidebar-nav .sidebar-heading {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    padding: 12px 6px 4px 6px;
}

/* Logo-Link: kein Unterstreichen, kein Fokus-Rahmen im geschlossenen Zustand */
#sidebar-logo-link {
    display: block;
    text-decoration: none;
    outline: none;
    border: none;
    line-height: 0;
}

#sidebar-logo-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 3px;
    border-radius: 3px;
}
/*   *********************************************
     Hier die Einstellungen für das Grid-Modul der Beitragsbilder 
***************************************************  */
/* GRID */
.articles-grid {
  display: grid !important;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  Background: #4b6875;   /* nur zur Kontrolle?  */
}

/* ITEM */
.grid-item {
  position: relative;
  overflow: hidden;
}

/* Quadrat */
.grid-link {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.7;  /* funktioniert wunderbar für die Größe der Kacheln */
}

/* Große Kachel (doppelte Höhe) */
.grid-item--large .grid-link {
  aspect-ratio: 1 / 0.7;     /* funktioniert wunderbar für die Größe der Kacheln */
}

/* Bild */
.grid-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;  
  display: block;
  transition: transform 0.4s ease;
  filter: saturate(0.2)    /* Farbsättigung   */
  brightness(1)
  contrast(1.2)
  sepia(1)
  hue-rotate(160deg);
  pointer-events: none;  
  z-index: 5;
}

/* Hover */
.grid-item:hover img {
  transform: scale(1.03);   /* das überlegen wir noch, ob das gut ist .... */
  filter: brightness(1.2);   /* nur notwendig, weil der sanfte Dunkel-Text-HG vorhanden ist .... */
}

/* Farb-Overlay für Einfärbung */
.grid-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 53, 71, 0.05);   /* --------*/
  pointer-events: none;            /* wichtig, damit die Link-Funktion erhalten bleibt  */
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* Hover: Effekt AUS – zusammen weiches Einblenden?  */
.grid-item:hover::before {
  opacity: 0;
}
.grid-item::before {
  opacity: 1;
}

/* Overlay für Textbeschrifung */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.35) 10%,
    rgba(0,0,0,0)
  );
    pointer-events: none;            /* wichtig, damit die Link-Funktion erhalten bleibt  */
    z-index: 2;

}

/* Titel */
.overlay h3 {
  font-weight: 700;
  color: #fff;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
  pointer-events: none;            /* wichtig, damit die Link-Funktion erhalten bleibt  */

}


/*   *********************************************
Chris: Eigene letzte Korrekturen, vielleicht noch etwas wild und nur mit dem Inspector geschlussfolgert 
***************************************************  */
#sp-main-body {
  padding: 0px 0;  /* hat geholfen! Oberer Rand ist weg!  */
}
/* ––––––––– ...........................................––––––––––––––– */
/* Das Gerüst für das weiche Einblenden von DIV-Containern
   "fade-item" kann man einfach hinter die best. Klasse mit einem LZ Zwischenraum schreiben ... */
/* ––––––––– ...........................................––––––––––––––– */
.fade-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-item.visible {
  opacity: 1;
  transform: translateX(0);
}
.Cflex-box .Cflex-item.fade-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.Cflex-box .Cflex-item.fade-item.visible {
  opacity: 1;
  transform: translateX(0);
}
.col-md-6 .col-md-6-item.fade-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.col-md-6 .col-md-6-item.fade-item.visible {
  opacity: 1;
  transform: translateX(0);
}
/* ––––––––– ...........................................––––––––––––––– */
/*  Hier Formate für den bisherigen 2-Spaltigen Musterbeitrag im Bootstrp-Grid-Layout: */
/* ––––––––– ...........................................––––––––––––––– */

.row {
  --bs-gutter-x: 0rem;   /* ist im Original 1.875rem.  */
}
.CBlock-full {
  height: 100vh;          /* soll im Viewport die ganze Höhe einnehmen  */
}
.Crow {
  display: flex;
  align-items: center;
  height: 33vh;
}
.Crow:hover {
  filter: brightness(1.4);   /* Farbfläche hellt sich auf */
}
.col-md-3 {
   width: 25%;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-left: 0px;
   padding-right: 0px;
}
col-md-4 {
background: red;
}
.col-md-6 {
  align-items: center;
  justify-content: center;
  padding-left: 0px;
  padding-right: 0px;
}
.col-md-9 {
   width: 75%;
   align-items: center;
   justify-content: center;
   padding-left: 0px;
   padding-right: 0px;
}
.CTextbox-r {
/*  margin: 2%; */
  padding: 8%;
  background: #e1e9f7;
}
.CTextbox-l {
  text-align: right;
/*  margin: 2%; */
  padding: 8%;
  background: #e1e9f7;
}
.CBeitrag {
 background-color:#41546a;
}
/* ––––––––– .......Und auf einmal haben wir einen"featured" Button auf den Landingpage-Seiten........––––––––––––––– */
/* ––––––––– .......woher der kommt - Opazität ist mal auf "0" gesetzt ...........––––––––––––––– */
.bg-danger {
  --bs-bg-opacity: 0;
}
.CBlock-full {
  height: 100vh;
}
/*   *********************************************
Nur den neuen Footer-Block im Flex-Box-Layout 
***************************************************  */
.three-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px; /* Abstand zwischen den Boxen */
  width: 100%;
}
.three-columns-footer {    /*warum gibt's hier 2 "three-columns" ? Um das universeller zu beschreiben?"   */
  display: grid;  /* ursprünglich "grid" */
  grid-template-columns: repeat(3, 1fr);
  gap: 0px; /* Abstand zwischen den Boxen */
  width: 50%;
  float: right;
}

.col-box {
  display: flex;   
  flex-direction: column;
  text-align: center;
  border: 1px solid #9b9b9b;    
  background: #3d3d3c;
}

/* Überschrift */
.col-header {
  background: #333;
  color: #fff;
  padding: 5%;
  font-weight: bold;
  font-size: 1.3rem;
}

/* Inhalt */
.col-content {
  padding: 15px;
  flex-grow: 1; /* sorgt dafür, dass Inhalte flexibel wachsen */
  color: white;
}
/* Die Media-Angaben sind für den Umbruch .... */
@media (max-width: 900px) {
  .three-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .three-columns {
    grid-template-columns: 1fr;
  }
}


/* Flex-Boxen für waagrechte Elemente, klickbare Felder für die "Weichenstellungen" ...  */
.Cflex-box {
 /* background: green;    /* nur zur Kontrolle vorhanden  */
  display: flex;
  flex-direction: row; /* Standardwert */
}
.Cflex-item {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 20vh;
   text-decoration: none;
   font-size: 2rem;
   transition: filter 0.2s ease;   /* unklar: Ohne Bild keine Effekte? Oder weiches Aufblenden der Linkfarbe? */
}
.Cflex-item:hover {
  filter: brightness(1.4);   /* Farbfläche hellt sich auf */
}


/*   *********************************************
Chris: Eigene letzte Korrekturen, vielleicht noch etwas wild und nur mit dem Inspector geschlussfolgert 
***************************************************  */
#sp-main-body {
  padding: 0px 0;  /* hat geholfen! Oberer Rand ist weg!  */
}
/* Standard-Links über die ganze Seite – Achtung, ganz oben im Split-Menü sind ebenfalls Definitionen! */
a {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

/* Hover */
a:hover {
  color: #d06519;
}

/* Besuchte Links */
a:visited {
  color: inherit;
}

/* Aktiv (Klickmoment) */
a:active {
  color: red;
}
.article-body a {
  color: blue;
}

.article-body a:hover {
  color: green;
}