/* =========================================================
   Schriftart wechseln zur Schulschrift
   ========================================================= */
@font-face {
    font-family: 'Schriftart';
    src: url('../fonts/Schriftart.woff2') format('woff2'),
         url('../fonts/Schriftart.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body,
#sp-body,
.sp-page-builder,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Schriftart' !important;
}

/* =========================================================
   Schriftart für Offcanvas / Mobile Menü (Helix)
   ========================================================= */

.offcanvas-menu,
.offcanvas-menu a,
.offcanvas-menu .mod-menu,
.offcanvas-menu .mod-menu a {
    font-family: 'Schriftart' !important;
}

/* =========================================================
   Überschriften H1 immer in Großbuchstaben & Umbruch
   ========================================================= */
h1 {
    text-transform: uppercase;
  font-size: 24px !important;
  font-weight: bold !important;
}

h1, h2, h3, h4, h5, h6 {
    hyphens: auto; 
    white-space: normal;     /* Zeilenumbruch erlauben */
    word-wrap: break-word;   /* Lange Wörter umbrechen */
    overflow-wrap: break-word; /* Alternativ für moderne Browser */
}


/* =========================================================
   HEADER - Strich entfernen
   ========================================================= */
#sp-header {
    box-shadow: none !important;
}


/* =========================================================
   ARTIKELLISTE
   ========================================================= */
.article-list .article {
    margin-bottom: 0;
    padding: 5px 20px;
    border: none !important; 
    box-shadow: none !important; 
}

/* =========================================================
   FORMULARE / SUCHFELD
   ========================================================= */

#sp-menu .form-control {
    max-width: 160px;
}

/* ==========================================================
   BLOG / AKTUELLES rechts auf STARTSEITE
   ========================================================== */

/* Datum im Modul "Beiträge – Neueste" (Helix Ultimate) ausblenden */
.mod-articleslatest li a span:not([itemprop]) {
    display: none;
}

/* Blog-Titel im Modul "Aktuelles" */
.mod-articleslatest span[itemprop="name"] {
    font-size: 18px  !important;
}

/* ==========================================================
   Beiträge – Neueste: Responsive Layout
   ========================================================== */

/* Container für Artikel: Flexbox */
.mod-articleslatest.latestnews.mod-list {
    display: flex;
    flex-wrap: wrap;   /* erlaubt mehrere Zeilen */
    gap: 20px;         /* Abstand zwischen Artikeln */
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Einzelner Artikel: Mobile (1-Spalte) */
.mod-articleslatest.latestnews.mod-list li {
    flex: 1 1 100%;   /* Mobile: volle Breite */
    box-sizing: border-box;
}

/* Tablet: ≥768px → 2 Spalten */
@media (min-width: 768px) and (max-width: 991px) {
    .mod-articleslatest.latestnews.mod-list li {
        flex: 0 0 calc(50% - 10px); /* 2 Spalten, Abstand berücksichtigt */
    }
}

/* Desktop: ≥992px → 3 Spalten */
/* Desktop ≥992px: 3 Spalten + Trenner */
@media (min-width: 992px) {
    .mod-articleslatest.latestnews.mod-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0; /* Trenner übernimmt Abstand */
    }

    .mod-articleslatest.latestnews.mod-list li {
        flex: 0 0 calc(33.333%); /* genau 1/3 */
        position: relative;
        box-sizing: border-box;
        padding: 10px; /* optional für Innenabstand */
        text-align: center;
    }

    /* Trenner rechts für alle außer letzte Spalte in Zeile */
    .mod-articleslatest.latestnews.mod-list li:not(:nth-child(3n))::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 100%;
        background-color: #ccc; /* Farbe des Trenner */
    }
}


/* Bilder / Inhalte im Artikel auf 100% Breite */
.mod-articleslatest.latestnews.mod-list li a {
    display: block;
    width: 100%;
}


/* ==========================================================
   SCHRIFTGRÖßE H3 einstellen
   ========================================================== */

h3.sp-module-title {
    font-size: 18px !important;
}


/* ==========================================================
   MAIN – Abstände vergrößern
   ========================================================== */

#sp-main .container {
    padding-top: 10px !important;
}

/* ==========================================================
   FOOTER – Abstände verringern
   ========================================================== */

#sp-footer .container {
    padding-top: 20px !important;
    border-top: 0px !important;
}
#sp-footer .container-inner {
    padding-top: 0px !important;
    border-top: 0px !important;
    padding-bottom: 10px !important;
}

/* ==========================================================
   BLOG – Mobile Fix: Weiterlesen nicht überdecken
   ========================================================== */
@media (max-width: 767px) {

    /* Bild darf nicht floaten */
    .article-intro-image {
        float: none !important;
        width: 100%;
        margin-bottom: 15px;
    }

    /* Weiterlesen klar unter allem platzieren */
    .readmore {
        display: block;
        clear: both;
        margin-top: 15px;
        margin-bottom: 40px; /* Abstand zum nächsten Artikel */
    }

}

/* ==========================================================
   BURGERMENU - Schriftgröße Untermenüs erhöhen
   ========================================================== */
ul.mod-menu.mod-list.menu.nav-pills li a {
    font-size: 22px !important;
    line-height: 1.4; /* oder 1.5 für etwas mehr Abstand */
}


ul.mod-menu__sub.list-unstyled.small.menu-child li a {
    font-size: 18px !important;
    display: block;          /* Link nimmt ganze Zeile ein */
    padding: 8px 20px;      /* oben/unten 12px, links/rechts 20px */
    margin-bottom: 4px;      /* Abstand zwischen den Links */
    line-height: 1.4;        /* Zeilenhöhe für bessere Lesbarkeit */
    border-radius: 4px;      /* optional: Klickbereich visuell getrennt */
}

/* ==========================================================
   PHOCA Button Categories ausblenden
   ========================================================== */
/* Phoca Download: Categories Button ausblenden */
.ph-top a.btn.btn-primary[title="Categories"] {
    display: none !important;
}

/* ==========================================================
  TAB formatieren
   ========================================================== */
/* Hintergrundfarbe der Tab-Leiste */
#infoTabs {
    background-color: #ffffff; /* gesamte Tab-Leiste */
    border-bottom: none;       /* optional: Linie unten entfernen */
    padding: 5px;
}

/* Rahmen um jeden Tab */
#infoTabs .nav-item {
    border: 5px solid #ffffff; /* 5px weißer Rahmen */
    border-radius: 5px;        /* optional: abgerundete Ecken */
    margin-right: 5px;         /* Abstand zwischen den Tabs */
    box-sizing: border-box;    /* Rahmen wird in die Größe eingerechnet */
}


/* Alle Buttons */
#infoTabs .nav-link {
    background-color: #c8e0d2; /* Hintergrund jedes Buttons */
    color: #f48720;            /* Farbe der nicht aktiven Buttons */
    border: none;              /* Rahmen entfernen */
    margin-right: 5px;         /* Abstand zwischen Buttons */
    border-radius: 5px 5px 0 0; /* abgerundete Ecken oben */
}

/* Aktiver Button */
#infoTabs .nav-link.active {
    color: #0b7e55 !important; /* Textfarbe aktiver Button */
    font-weight: bold;          /* optional: fett */
    background-color: #c8e0d2; /* optional: gleiche Hintergrundfarbe */
    border-bottom: 2px solid #0b7e55; /* optional: Linie unter aktiver Registerkarte */
}

/* Hover-Effekt für nicht aktive Buttons */
#infoTabs .nav-link:not(.active):hover {
    color: #0b7e55;             /* beim Hover Farbe ändern */
    background-color: #b7d8c8;  /* etwas dunkleres Grün als Feedback */
    cursor: pointer;
}

/* Mobile: Tabs scrollbar machen, falls viele */
@media (max-width: 768px) {
    #infoTabs {
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* ==========================================================
  Akkordion formatieren
   ========================================================== */
/* Hintergrundfarbe der Akkordion Leiste */
/* Akkordeon Headerfarbe ändern */
.accordion-button {
    background-color: #c8e0d2 !important; /* gewünschte Farbe */
    font-size: 18px !important;
}

/* Optional: Hover-Effekt */
.accordion-button:hover {
    background-color: #c8e0d2 !important; /* etwas dunkler beim Hover */
    color: #f48720 !important;
     font-size: 18px !important;
}

/* Farbe für ausgeklappten Akkordeon-Button */
.accordion-button:not(.collapsed) {
    color: #f48720 !important; /* Orange */
     font-size: 18px !important;
}

/* Akkordeon-Button: keinen blauen Rahmen beim Klicken oder Fokus */
.accordion-button:focus {
    outline: none !important;   /* entfernt den Fokusrahmen */
    box-shadow: none !important; /* entfernt den blauen Schatten */
}

/* Pfeil beim ausgeklappten Zustand ebenfalls Orange */
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f48720' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* ==========================================================
  Newsflash auf Startseite formatieren
   ========================================================== */

.mod-articlesnews-horizontal li p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;

    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Optional: Damit die Bilder im Newsflash nicht zu riesig werden */
.newsflash-image img {
    max-height: 300px;
    width: auto;
  object-fit: contain;
}

/* Verhindert, dass die Listenpunkte (Bullets) angezeigt werden */
.mod-articlesnews-horizontal.mod-list {
    list-style: none;
    padding: 0;
}

/* Macht die gesamte News-Box klickbar */
.mod-articlesnews-horizontal li {
    position: relative; /* Basis für die Positionierung */
}

.newsflash-title a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Legt sich über das Bild und den Text */
}

/* Sorgt dafür, dass das Bild bei Mauskontakt leicht reagiert */
.mod-articlesnews-horizontal li:hover .newsflash-image img {
    opacity: 0.8;
    transition: 0.3s;
}

/* Den Titel im Newsflash dauerhaft schwarz und ohne Unterstreichung */
.mod-articlesnews-horizontal .newsflash-title a {
    color: #000000 !important; /* Tiefschwarz */
    text-decoration: none !important; /* Keine Unterstreichung */
    font-weight: bold; /* Optional: Damit es trotzdem wie eine Überschrift wirkt */
}

/* Verhindert, dass der Titel beim Drüberfahren (Hover) die Farbe ändert */
.mod-articlesnews-horizontal .newsflash-title a:hover,
.mod-articlesnews-horizontal .newsflash-title a:focus,
.mod-articlesnews-horizontal .newsflash-title a:active {
    color: #000000 !important;
    text-decoration: none !important;
}

/* 1. Den Container zentrieren und den Float aufheben */
.article-intro-image.float-left {
    float: none !important;      
    display: block !important;   
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;
    text-align: center !important; 
    width: 100% !important;
    clear: both !important; /* Verhindert, dass Text daneben hoch rutscht */
}

/* 2. Das Bild selbst als Block-Element zentrieren */
.article-intro-image img {
    display: block !important;    /* Bilder sind normalerweise Inline, für margin:auto brauchen sie Block */
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;       
    max-width: 100% !important;   /* Verhindert Überlaufen */
    height: 450px !important; 
    object-fit: contain !important; 
    object-position: center;  
    border-radius: 4px;       
}

/* 3. Mobile Anpassung */
@media (max-width: 768px) {
    .article-intro-image img {
        width: 100% !important;
        height: auto !important;
    }
}

/* 1. Trennung der Beiträge */
.com-content-category-blog__item.blog-item {
    border-bottom: 3px solid #C8E0D2 !important; /* Graue Trennlinie */
    padding-bottom: 10px !important;            /* Abstand vom Text zur Linie */
    margin-bottom: 40px !important;             /* Abstand von der Linie zum nächsten Beitrag */
    clear: both !important;                     /* WICHTIG: Erzwingt, dass jeder Beitrag unter dem vorherigen Bild beginnt */
    display: flow-root !important;              /* Sorgt dafür, dass der Container die Höhe des gefloateten Bildes erkennt */
}

/* Entfernt die Linie nach dem letzten Beitrag auf der Seite */
.com-content-category-blog__item.blog-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}