/* Typografie-Grundlagen */
h1, h2, h3, h4, h5, a, p, ul, li, div {
  font-family: Univers, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, p, ul, li {
  color: #1e3140 !important;
}

h1, h2, h3, h4, h5 {
  font-weight: normal !important;
}

/* Listen */
p + ul, p + ol {
  margin-top: -1.2em !important;
}

p,a { font-size: 1rem; }

ul, ol {
  list-style-position: outside !important;
  margin: -0.2em 1em 1.8em 2.8em !important;
  padding-left: 0 !important;
}

li {
  font-size: 100% !important;
  line-height: 125% !important;
  padding-bottom: 0.4em !important;
  padding-left: 0.2em !important;
}

ul li {
  list-style-image: url(../../../../../images/img/s1c.jpg) !important;
}

/* Tabellen */
table {
  margin: 0em 1.8em 1.8em 3.6em !important;
  border-collapse: collapse !important;
  border: none !important;
  box-shadow: 0.15em 0.2em 0.2em 0.01em hsla(200,20%,8%,0.1) !important;
  width: 100%;
}

thead {
  box-shadow: 0.15em 0.2em 0.2em 0.01em hsla(200,20%,8%,0.2) !important;
}

th, td, tr {
  padding: 0.6em 0.4em 0.6em 0.5em !important;
  margin: 0 !important;
  font-size: 100% !important;
  line-height: 120% !important;
  text-align: left !important;
  vertical-align: top !important;
  border: 0px solid #fff !important;
  border-bottom: 1px solid hsla(200,40%,58%,0.4) !important;
}

th {
  color: #1e3140 !important;
  border-bottom: 2px solid #1e3140 !important;
  background-color: hsla(200,40%,78%,1) !important;
}

td {
  background-color: hsla(200,40%,94%,1) !important;
}

table ul {
  margin: 0.8em 0 0 0 !important;
}


/* Links & Buttons */
a, input.btn, button.btn {
  color: #1e3140 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: hsla(0,0%,100%,0.5) !important;
  background-image: none !important;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important;
  display: inline-block !important;
  margin: 0em 0em 0.1em 0.1em !important;
  padding: 0.2em 0.5em 0.2em 0.5em !important;
}

.btn {
  font-size: initial !important;
}

a:hover, input.btn:hover, button.btn:hover {
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.4) !important;
  background-color: #94aab8 !important;
}

p a {
  margin: 0 !important;
  padding: 0 0.5em !important;
}

li a {
  margin: 0 !important;
}

/* Formularelemente */
textarea, textarea.form-control {
  position: relative !important;
  font-family: Univers, Arial, sans-serif !important;
  font-weight: normal !important;
  font-size: 100% !important;
  color: #000 !important;
  text-shadow: -0.0em 0.05em 0.05em #999 !important;
  padding: 1.5em 1.5em 1.5em 1.5em !important;
  border: solid 0.2em #999 !important;
  border-radius: 0.4em !important;
  background-image: url(../../../../../images/paper_karo3.jpg) !important;
  height: 140px !important;
  width: 80% !important;
}



/* footer */
.page-link {  }













/* ==========================================================================
   1. CSS-VARIABLEN & GLOBALE EINSTELLUNGEN
   ========================================================================== */
:root {
    --hue: 214;
    --template-bg-light: #f0f4fb;
    --template-text-dark: #495057;
    --template-text-light: #ffffff;
    --template-link-color: var(--link-color);
    --template-special-color: #001B4C;
}

/* Hintergrundbild & globale Layout-Anpassungen */
body {
    /*! font-size: 1em !important; */
  font-family: Univers, Arial, sans-serif !important;
  color: #22262a;
  text-align: var(--body-text-align);
  background-color: var(--body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: #0000;
  margin: 0;
    background-image: url("../../../../../images/img/background.png");
    /*background-size: cover !important;*/
    background-size:  contain !important;
}

body.site.com_content.wrapper-static.view-category.layout-blog {
    /* Spezifische Anpassungen für die Blog-Kategorieansicht */
}

.main-top,
.card-body {
    padding: 0;
    margin: 0;
}


/* ==========================================================================
   2. HEADER & BRANDING
   ========================================================================== */

.container-header {
    padding: 0.5em !important;
}

.header {
    background-image: url("../../../../../images/img/hhg_HP_2026_4.svg");
    background-repeat: no-repeat;
    padding: 1em;
}

/* 1. Mobile / Handy (< 768px): -50px */
@media (max-width: 767.98px) {
    .header {
        background-image: url("../../../../../images/img/hhg_HP_2026_mobile.svg");
        background-position: right top !important;
    }
}
/* 2. Tablet (768px bis 1023.98px): -40px */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .header {
        background-image: url("../../../../../images/img/hhg_HP_2026_mobile.svg");
        background-position: right top !important;
    }
}
/* 3. PC = 1024px (1024px bis 1200px): -10px */
@media (min-width: 1024px) and (max-width: 1200px) {
    .header {
        background-position: -100px 0;
    }
}

.header h1 {
    font-size: 1.0em !important;
    color: #eeeeee00 !important;
    display: block;
    position: relative !important;
    
    height: 70px !important;
}



.grid-child {
    /* Raster-Elemente im Header */
}

.navbar-brand h1 {
    color: var(--template-text-light);
    margin: 0;
    font-size: 1.5rem;
}


/* ==========================================================================
   3. NAVIGATION (METISMENU & DROPDOWNS)
   ========================================================================== */
.container-nav { padding: 0 !important;  }
nav.navbar.navbar-expand-lg { }

/* Grundgerüst der Hauptmenü-Liste */
ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list.nav-pills,
ul.mod-menu {
    /*background-color: #1e293b;*/
    border: none;
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);*/
    margin: 0 !important;

}

ul.mod-menu a, ul.mod-menu .mm-toggler { 
    /*color: #eee !important;*/
    background: none !important;
    box-shadow: none !important;
    /*border-right: 1px solid #1e293b  !important;*/
}
.metismenu-item:hover {
     color: #fff !important;
  text-decoration: none !important;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.4) !important;
  background-color: #94aab8 !important;
}

/* --- DESKTOP NAVIGATION (ab 992px) --- */
/*@media (min-width: 992px) {*/

    /* 3.1 Hauptmenü waagerecht ausrichten */
    .metismenu {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* 3.2 Ebene 1 (Hauptmenüpunkte) */
    /*.metismenu > .metismenu-item.level-1 {
        position: relative;
        margin-right: 0.1rem;
        border-right: 1px solid #666;
        padding: 0.2em 0.5em;
        display: flex;
        align-items: center;
    }

    .metismenu > .metismenu-item.level-1 > a {
        color: var(--template-text-light);
        text-decoration: none;
        white-space: normal;
        word-break: break-word;
        hyphens: auto;
    }

    /* 3.3 Untermenü Ebene 1 (Klappt nach unten aus) */
    /*.metismenu-item.level-1:hover > .mm-collapse {
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 240px;
        z-index: 1000;
        background-color: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 0.5rem 0;
        list-style: none;
    }

    /* 3.4 Verschachtelte Untermenüs Ebene 2 & 3 (Klappen nach rechts aus) */
    /*.metismenu-item.level-2, 
    .metismenu-item.level-3 {
        position: relative;
    }

    .metismenu-item.level-2:hover > .mm-collapse,
    .metismenu-item.level-3:hover > .mm-collapse {
        display: block !important;
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 240px;
        z-index: 1001;
        background-color: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 0.5rem 0;
        list-style: none;
    }

    /* Links innerhalb der Dropdown-Untermenüs */
    /*.mm-collapse .metismenu-item a {
        color: var(--template-text-dark);
        padding: 0.4rem 1rem;
        display: block;
        text-decoration: none;
    }

    .mm-collapse .metismenu-item a:hover {
        background-color: var(--template-bg-light);
        color: var(--template-special-color);
    }

    /* 3.5 Toggler-Buttons (Pfeile) im Hauptmenü auf Desktop ausblenden */
    /*.metismenu-item.level-1 > .mm-toggler {
        display: none !important;
    }
}*/

/* Spezifische Link-Klassen */
.nav-home, .nav-schule, .nav-profile, 
.nav-grund, .nav-ganztag, .nav-beratung, 
.nav-leben, .nav-intern {
    /* Individuelle Styles für einzelne Hauptkategorien */
}


/* ==========================================================================
   4. HAUPTINHALT & RASTER (GRID)
   ========================================================================== */
.site-grid {
    padding: 0 0 0;
}

.container-component { }

#system-message-container {
    /* Container für Joomla-Systemnachrichten */
}

main {
    /* Haupt-HTML5-Inhaltsbereich */
}


/* ==========================================================================
   5. BLOG-LAYOUT & BEITRÄGE (COM_CONTENT)
   ========================================================================== */
.com-content-category-blog.blog { }

.com-content-category-blog__items.blog-items.items-leading {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.com-content-category-blog__item.blog-item {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Beitrags-Elemente */
.item-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.item-content {
    margin-top: 0.75rem;
}

.page-header h2 {
    margin-top: 0;
}

.page-header h2 a {
    color: var(--template-special-color);
    text-decoration: none;
}

.page-header h2 a:hover {
    text-decoration: underline;
}

.readmore .btn.btn-secondary {
    margin-top: 1rem;
}

    
    /* ==============================================
    Unterseiten
=========================================================== a*/
    .container-component {
        
        max-width: 650px !important;
        
    }
    .com-content-article, .item-pageaktuell {
        position: relative !important;
        display: block !important;
        padding: 0 2em !important;
    }    

    .container-component h1 {
  font-size: 2em !important;
  margin: 0em 0 0.8em 0 !important;
  padding-left: 2.2em !important; /* Behält das Icon links bei */
  display: block !important;
    
  /* Icon als Hintergrundbild */
  background-image: url("../../../../../images/img/sign23.png") !important;
  background-position: 0em 0.2em !important;
  background-size: 1.6em !important;
  background-repeat: no-repeat !important;
    background-color: none !important;
    text-decoration: none !important;
box-shadow: none !important; 

}

/* ==========================================================================
   6. BADGES, SYSTEM-MELDUNGEN & ADMIN
   ========================================================================== */
.system-unpublished {
    /*! border-left: 4px solid #ffc107; */
    padding-left: 0.5rem;
}

.badge.bg-warning {
    color: #000000;
    margin-right: 0.25rem;
}

.icons .float-end {
    float: right;
}

a.btn.btn-link.jmodedit {
    color: var(--template-text-light);
}


/* ==========================================================================
   7. DIVERSE JOOMLA-ELEMENTE & ICONS
   ========================================================================== */
joomla-hidden-mail {
    display: inline-block;
}

.icon-menu,
.icon-chevron-right,
.icon-eye-slash,
.icon-edit {
    margin-right: 0.3rem;
}
    
    


/* ============= Icons =============== */

.kontakt {
	position: relative;
	display: inline-block;
	min-width: 18em;
	margin: 0.4em 0.4em 1.8em 0.8em;
	padding: 0em;
	border-bottom: 2px solid #005bac;
	box-shadow: 1px 2px 8px 1px rgba(0,0,0,0.2) !important;
	background-color: hsla(200,40%,95%,0.9) !important;
}
.kontakt h3 {
	font-size: 110%;
	background-size: 1.3em;
	margin: 0 0 0.8em 0;
	min-height: 0.5em;
}
.kontakt p {
	margin: 0 0 0.8em 1em;
}

a.img {  /* E-Mail-Ico pur */
	border: 0px solid #fff !important;
	padding: 0 0 0em 0 !important;
	margin: 0 0 0 0 !important;
}
a.img img { 
	margin: 0em 0.4em -0.2em 0.4em !important;
}
a.ico {  /* E-Mail-Link-PDF-DOC-Icon */
	/*border: 0px solid #fff !important;*/
	padding-top: 0.2em !important;
	padding-bottom: 0.35em !important;
	/*margin: 0 !important;*/
}
a.ico img {  
	margin-bottom: -0.35em; 
	/*padding-bottom: 0.2em !important;
	/*margin: 0 !important;*/
}

p > img.std {
	position: relative;
	margin: 0.8em -3.6em;

}
img.std {	/*.item-page > div > img*/
	margin: 1.8em 0em;
	width: 100%;
}

/* --------------- Weiter-Button --------*/
.pager a, .readmore a{
	padding: 0.2em !important;
}
    
    

/* Container für die Kacheln erzwingen */
.com-content-category-blog__items.blog-items {
  display: grid !important;
  grid-template-columns: repeat(2, 320px) !important;
  justify-content: center !important;
  gap: 1.5em !important;
  margin: 0 auto 2em auto !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* Joomla Zwischen-Container und Bootstrap-Clears zurücksetzen */
.com-content-category-blog__items > * {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

/* Die einzelne Kachel */
.com-content-category-blog__item.blog-item {
  position: relative !important;
  display: block !important;
  width: 320px !important;
  height: 450px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 0 1em 0 !important;
  border-bottom: 2px solid hsla(200, 40%, 45%, 1) !important;
  /*background-color: hsla(200, 30%, 90%, 0.7) !important;*/
background-image: linear-gradient(
    to top, 
    #ffffff 0%, 
    hsla(200, 30%, 90%, 0.7) 100%
) !important;
  box-shadow: 0.1em 0.4em 0.4em 0.01em hsla(0, 0%, 0%, 0.1) !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Inhalts-Anpassung innerhalb der Kachel (hebt globale p- und h2-Abstände auf) */
.blog-item .page-header,
.blog-item p {
  padding-left: 1em !important;
  padding-right: 1em !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

}
.blog-item .item-image { margin: 0 !important; }
.item-image img { border-radius: 0 !important; }

.page-header h2 a{ /* Überschrift */
    font-size: 0.75em;
    background-color: #ffffff00 !important;
    box-shadow: none !important;
    /*text-decoration: underline !important;*/ 
    /*border: 1px solid #fff !important; */
}
.page-header h2 a:hover{ /* Überschrift */
    border: 1px solid #94aab8 !important; 
    color: #fff !important;
  text-decoration: none !important;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.4) !important;
  background-color: #94aab8 !important;
}


.page-header h2 {
  margin: 0em 0 0.8em -1em; 
  padding-left: 1.6em !important; /* Behält das Icon links bei */
  display: block !important;
    
  /* Icon als Hintergrundbild */
  background-image: url("../../../../../images/img/sign23.png") !important;
  background-position: 0em 0.2em !important;
  background-size: 1.6em !important;
  background-repeat: no-repeat !important;
    background-color: none !important;
    text-decoration: none !important;
box-shadow: none !important; 

}
    
.readmore {
    box-shadow: none !important; 
    text-decoration: underline !important;
}
.readmore:hover {
  color: #22262a !important;
    font-weight: bold;
    box-shadow: none !important; 
}

/* Mobil-Anpassung */
@media (max-width: 700px) {
  .com-content-category-blog__items.blog-items {
    grid-template-columns: repeat(1, 100%) !important;
    max-width: 320px !important;
  }
  .com-content-category-blog__item.blog-item {
    width: 100% !important;
  }
}
    
    
    
/* Footer */
    li.page-item {
        list-style-image: none !important;
    }
    
.footer .grid-child {
    display: block !important;
    width: 100% !important;
}
    .footer {
        
        background-color:  #1e3140 !important;
        background-image: none !important;
    }
    
    .auszeichnungen {
        
        /*border: 1px solid #fff !important;
        /*text-align: center;*/
    }
    
    .auszeichnungen a, .auszeichnungen a img {
        height: 90px !important;
        padding: 0 !important;
        
    }
    .auszeichnungen a {
        margin: 4px !important;
    }

    .mod-login-logout {
        position: relative !important;
    }


/* --- Auf einen Blick + Termine (Joomla 4) --- */

/* Haupt-Container der rechten Sidebar */
.container-sidebar-right .card {
    position: relative;
    z-index: 100;
    /*box-shadow: 0.1em 0.4em 0.4em 0.01em hsla(0, 0%, 0%, 0.2);
    background-color: #c7e9b0;*/
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    border-radius: 6px;
}

/* Modultitel (Ersetzt .well h3) */
.container-sidebar-right .card-header {
    font-size: 1.3em;
    padding: 0.5em 1em 0.2em 2.2em;
    background-color: #fff;
    /*color: #2c3e50;*/
    font-weight: bold;
    border-bottom: none;
    border-radius: 6px;
  margin: 0em 0 0.8em 0 !important;
  display: block !important;
    
  /* Icon als Hintergrundbild */
  background-image: url("../../../../../images/img/sign23.png") !important;
  background-position: 0em 0.6em !important;
  background-size: 1.8em !important;
  background-repeat: no-repeat !important;
}

.container-sidebar-right h4 {
    font-size: 1.2em;
}
/* Inhaltsbereich der Card */
.container-sidebar-right .card-body {
    padding: 0 !important;
}

/* Custom-Modul Container */
.custom {
    padding: 0;
    display: block;
    width: 100%;
}

.custom .blinks, 
.custom .bkontakt, 
.custom .bzeiten {
    position: relative;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}

/* Farbliche Abstufungen der Blöcke */
.custom .blinks {
    /*background-color: #d5eec2;*/
}

.custom .bkontakt {
    /*background-color: #c7e9b0;*/
}

.custom .bzeiten {
    background-color: #bbdba6;
}

/* Typografie & Links innerhalb des Moduls */
.custom h4 {
    margin: 0 0 0.5em 0 !important;
}

.custom p {
    padding: 0;
    margin: 0 0 1.1em 0;
    width: 100%;
}

.custom a {
    display: inline-block;
    margin-bottom: 0.3em;
    text-decoration: none;
}

.custom .bkontakt b {
    color: inherit;

}

/* Anpassung für Joomla-E-Mail-Spambot-Elemente */
joomla-hidden-mail {
    display: block;
    margin-bottom: 0.3em;
}



/* -------- slidecontainer ---------- */

/* Container-Sicherung für feste Höhe und Ausrichtung */
#slidecontainer {
  width: 100%;
  height: 350px;
  overflow: hidden;
}

#mySwiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  height: 100%;
    overflow: hidden; /* Schneidet den überstehenden rechten Bildteil ab */
  /*overflow: hidden;
  display: flex;*/
  /*justify-content: flex-start; /* img align left */
  /*align-items: center;*/
}

/* Basis-Styling für Bilder */
.swiper-slide img {
  height: 350px !important;
    width: auto !important;       /* Lässt das Bild breiter werden als der Container */
  max-width: none !important;  /* Überschreibt Bootstrap/Joomla max-width: 100% */
  /*width: auto;
  max-width: none; /* Verhindert Stauchung/Verzerrung */
  /*object-fit: cover;*/
  object-position: left center;
  transition: transform 0.3s ease; /* Weicher Übergang beim Verändern der Fenstergröße */
}

/* Responsive Bildverschiebung nach links */

/* 1. Mobile / Handy (< 768px): -50px */
@media (max-width: 767.98px) {
  .swiper-slide img {
    transform: translateX(-305px);
  }
}

/* 2. Tablet (768px bis 1023.98px): -40px */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .swiper-slide img {
    transform: translateX(-190px);
  }
}

/* 3. PC = 1024px (1024px bis 1200px): -10px */
@media (min-width: 1024px) and (max-width: 1200px) {
  .swiper-slide img {
    transform: translateX(-60px);
  }
}

/* 4. PC > 1024px (> 1200px): 0px */
@media (min-width: 1201px) {
  .swiper-slide img {
    transform: translateX(0px);
  }
}