/* ============================================================================
   BASE.CSS - Grundlegende Styles für alle Themes
   FTS Husum - Contao 5.3
   Mobile-First Ansatz mit modernen Breakpoints
   ============================================================================ */

/* ==========================================================================
   CUSTOM FONT
   ========================================================================== */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../../files/fonts/opensans/open-sans-v15-latin-regular.eot');
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
         url('../../files/fonts/opensans/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
         url('../../files/fonts/opensans/open-sans-v15-latin-regular.woff2') format('woff2'),
         url('../../files/fonts/opensans/open-sans-v15-latin-regular.woff') format('woff'),
         url('../../files/fonts/opensans/open-sans-v15-latin-regular.ttf') format('truetype'),
         url('../../files/fonts/opensans/open-sans-v15-latin-regular.svg#OpenSans') format('svg');
}

/* ==========================================================================
   RESET & BASE STYLES (Mobile-First, 0-575px)
   ========================================================================== */

body {
    max-width: 1400px;
    margin: 0 auto;
    background-color: #DCDCDC;
    font-family: 'Open Sans', Arial, sans-serif;
    color: #333;
    font-size: 16px;
}

/* Typography */
h1 {
    margin-top: 0;
    color: rgb(30, 63, 125);
    font-size: 1.5rem;
    line-height: 1.3;
}

h2 {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.1;
}

h3 {
    margin-top: 0;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4;
}

h4 {
    margin-top: 0;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.4;
}

h5 {
    margin-top: 0;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.4;
}

p,
li,
a {
    font-size: 0.9rem;
    line-height: 1.5rem;
}

p {
    hyphens: auto;
}

/* Links */
a {
    font-weight: bold;
    text-decoration: underline;
    color: rgb(30, 63, 125);
}

/* Lists */
ol li {
    margin-bottom: 10px;
    margin-left: 25px;
    line-height: 1.2rem;
}

ol.letter li {
    list-style-type: lower-alpha;
}

ul li.download-element.ext-pdf {
    list-style-type: none !important;
}

ul li.Liste-icon-hand::before {
    padding: 0 10px 10px 0;
    font-size: 1rem;
    line-height: 2rem;
    content: "\f0a4 ";
    font-family: 'FontAwesome';
}

ul li.liste-icon-plus::before {
    padding: 0 10px 10px 0;
    font-size: 1rem;
    line-height: 2rem;
    content: "\f067";
    font-family: 'FontAwesome';
    font-weight: 900;
}

.ext-pptx::before {
    font: 1rem/2rem FontAwesome;
    content: "\f1c4";
    margin-right: 0.4rem;
    color: #4979AA;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Colors */
.rot {
    color: #d22a39;
}

.gelb {
    color: #fecd11;
}

.grün {
    color: #62b215;
}

/* Spacing */
.mb1 {
    margin-bottom: 1rem;
}

.gap1 {
    gap: 1rem;
}

/* Width */
.width80 {
    width: 80%;
}

.fullwidth {
    width: 100% !important;
}

.textblock-schmal {
    width: 100%;
}

/* Alignment */
.center {
    text-align: center;
}

.mittig {
    text-align: center;
}

.links {
    float: left;
    text-align: left;
}

.left,
.float_left {
    float: left;
}

.centerflex {
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.div-center {
    display: table;
    margin: 0 auto;
}

/* Flexbox Utilities */
.flex {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .flex {
        flex-direction: column;
    }

    .mw-50pc.content-image {
        max-width: 100% !important;
    }
}

.zentriert,
.flex-col {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.flex-row {
    display: flex;
    justify-content: space-between;
}

.flex-row-center {
    display: flex;
    justify-content: space-around;
}

.div-center-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.zweispaltig {
    display: flex;
    flex-direction: column;
}

/* Image Utilities */
.spiegeln {
    transform: scale(-1, 1);
}

.mw-650 {
    max-width: 650px;
}

.mw-50vw-center {
    max-width: 50vw;
    display: block;
    margin: 0 auto;
}

.mw-50pc {
    max-width: 50%;
}

.mw-40pc {
    max-width: 40%;
}

.mw-30pc {
    max-width: 30%;
}

/* Borders */
.border-solid {
    border: 1px solid #7AB735;
    padding: 0.5rem;
    margin: 0 auto 1rem;
}

.border-dotted {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dotted #a9bcdc;
}

.border-dotted-top {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dotted #a9bcdc;
}

.border-dotted-neue5Kl {
    margin-bottom: 1rem;
    border-bottom: 1px dotted #fff;
}

.content-rahmen {
    padding: 5px;
    border-top: 5px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

.inhaltselement-hervorgehoben {
    padding: 1rem;
    border: 1px dotted #CB2E1f;
}

/* ==========================================================================
   COLOR THEME CLASSES
   ========================================================================== */

/* Navigation Menu Colors */
li.nicht-in-mmenu-anzeigen {
    display: none;
}

li.start,
li.galerie {
    background-color: #666;
}

li.profil {
    background-color: #4979AA;
}

li.leben {
    background-color: #F4BC0D;
}

li.gemeinschaft {
    background-color: #CB2E1F;
}

li.service {
    background-color: #7AB735;
}

/* ==========================================================================
   IMAGE CONTAINERS
   ========================================================================== */

.image_container.float_right,
.media--right > figure {
    margin-left: 1rem;
}

.media--left > figure {
    margin-right: 1rem;
}

figcaption {
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 0.7rem;
    line-height: 1rem;
    font-weight: bold;
}

/* gibt es die beiden nachfolgenden noch im html? */
.img-caption p {
    margin: 5px auto;
    font-size: 0.7rem !important;
    line-height: 1rem !important;
}

.img-caption {
    margin-top: -10px;
    margin-bottom: 10px;
}

/* ==========================================================================
   TABLES
   ========================================================================== */

.tabelle tr {
    border: 1px solid #E6E6E6;
}

.tabelle thead tr {
    background-color: #5b7ec0;
    color: #fff;
}

.tabelle.ce_table thead tr th {
    padding: 5px;
    vertical-align: middle;
}

.tabelle.ce_table td {
    font-size: 0.8rem;
    line-height: 1rem;
    padding: 0.5rem;
}

.tabelle ul li {
    margin-left: 20px;
    font-size: 0.8rem;
    line-height: 1rem;
    list-style-type: square;
}

.tabelle br {
    display: none;
}

.tabelle.ce_table tr.even {
    background-color: #f1f1f1;
}

/* Teacher Table Specific */
.tabelle.lehrer td,
.tabelle.lehrer th,
.tabelle.lehrer p {
    vertical-align: middle;
}

.tabelle.lehrer td.col_2 {
    text-align: center;
}

/* ==========================================================================
   BOXES & INFO ELEMENTS
   ========================================================================== */

.infobox,
.mod_newslist,
#termine {
    padding-left: 0.1rem;
    border: 1px solid rgba(232, 232, 232, 0.8);
    width: 100%;
}

.infobox p,
.mod_newslist p,
.mod_newslist a,
.kasten p,
.kasten h3 {
    margin: 0;
    padding: 5px 5px 5px 0;
    font-size: 0.9rem;
    line-height: 1.2rem;
}

.infobox a {
    font-size: 0.9rem;
    color: rgb(30, 63, 125);
}

.infobox h3,
.mod_newslist h3,
h3.infobox {
    margin: 0;
    padding: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    background-color: #4979aa;
}

.hinweis h3 {
    margin: 0;
    padding: 5px;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #4979aa;
    line-height: 1.3rem;
}

.kasten {
    border: 1px solid #C6C6C6;
    padding: 0.5rem;
    text-align: center;
}

.header-infoblock {
    background-color: #7AB735;
    padding: 0.2rem;
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.header-infoblock p {
    letter-spacing: 0.01rem;
    font-size: 0.9rem;
    line-height: 0.9rem;
    font-weight: 600;
    color: white;
}

/* ==========================================================================
   NEWS & EVENTS
   ========================================================================== */

.mod_newslist div.layout_simple {
    padding: 10px 5px;
}

.mod_newslist h4 {
    margin-top: 5px;
    margin-bottom: 2px;
    padding: 0 5px;
    font-size: 0.9rem;
    font-weight: normal;
}

.layout_latest {
    border-bottom: 1px dotted #ddd;
    margin: 0 1rem;
    padding-bottom: 1rem;
}

.layout_latest h2 {
    margin-top: 0;
    padding: 5px 5px 5px 0;
}

.mod_newslist .layout_latest h3 {
    background-color: #f7faf9;
}

.mod_newslist .layout_latest a {
    font-size: 0.9rem;
}

.highlight.first.even h2 a {
    color: red;
}

.mod_newsarchive h4 {
    font-size: 1rem;
    font-weight: bold;
    color: #f00;
}

.mod_article div.layout_latest {
    margin: 0;
    padding: 5px 0;
    background-color: #FCFCFC;
    border-top: 1px solid #eaeaea;
}

div.mod_newsarchive div.layout_latest h2 {
    margin-top: 0;
    margin-right: 15px;
    color: #333;
}

div.mod_newsarchive div.layout_latest h3 a,
div.mod_newsarchive div.layout_latest p.more a,
div.mod_newsreader p.back a {
    font-weight: normal;
    text-decoration: none;
    color: #333;
}

.mod_newsreader h2 {
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

.ce_text.news p {
    border-bottom: 1px solid rgba(232, 232, 232, 0.8);
    padding-bottom: 10px;
}

.news img {
    max-width: 80% !important;
}

div.ce_text.img-center figure.image_container.float_below {
    text-align: center;
}

div.mod_eventlist p,
div.mod_newslist p,
div.ImprAdr > p {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: normal;
}

div.mod_eventlist a {
    font-weight: normal;
    text-decoration: none;
    color: #333;
}

div.event > h2 > a {
    font-size: 0.8rem !important;
}

/* ==========================================================================
   GALLERY
   ========================================================================== */

.gallery_creator ul.list_albums li.level_1 a h2 {
    line-height: 2rem;
}

.gallery_creator ul.list_albums li {
    border-top: 3px solid #ddd;
}

.gallery_creator div.backLink {
    margin-bottom: 1rem;
}

.ce_gallery.block > ul > li > figure > a > img,
.ce_gallery.cboxFlyer ul li .image_container img {
    transition: transform 0.8s;
    border: 1px solid silver;
}

.ce_gallery.block > ul > li > figure > a > img:hover {
    transform: scale(1.02);
}

.thumb_150height img {
    width: auto;
    height: 170px;
}

.gallery_creator .tstamp.block p {
    font-size: 0.8em;
    color: #ddd;
}

#galleryContainer figure.image_container {
    margin-right: 2px;
}

.ce_gallery_creator_ce h2 {
    margin-top: 0;
}

a.cboxElement img {
    padding: 0.2rem;
    border: 1px solid #ddd;
    max-width: calc(100% - 10px);
}

/* Video Containers */
figure.video_container {
    width: 100%;
    padding: 0.2rem;
    border: 1px solid #ddd;
}

/* ==========================================================================
   NAVIGATION (BASIC)
   ========================================================================== */

.mod_customnav li {
    margin: 15px 0 10px;
}

.mod_customnav ul.level_1 li a {
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

.mod_customnav ul.level_1 li a:hover {
    color: #5B7EC0;
}

/* Meta Navigation */
#metanavi ul {
    display: flex;
    gap: 1em;
    border-top: 1px solid #ddd;
    flex-wrap: wrap;
}

/* Sitemap */
.mod_sitemap ul.level_1 li.submenu ul.level_2 li {
    margin-left: 2rem;
    border: 0;
    list-style-type: square;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination ul {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   SEARCH
   ========================================================================== */

#suche {
    width: 100%;
}

#suche #suchform div.formbody div.widget.widget-submit input#ctrl_15.submit {
    display: none;
}

#suchform .textfeld > label {
    display: none;
}

/* ==========================================================================
   COLORBOX
   ========================================================================== */

div#cboxContent div#cboxLoadedContent {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* ==========================================================================
   PHONE NUMBER
   ========================================================================== */

.phone-number,
.phone-number a {
    text-decoration: none;
    letter-spacing: 0.08rem;
}

/* ==========================================================================
   ICONS
   ========================================================================== */

.icon::before {
    display: inline-block;
    margin-right: 0.5rem;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

i.fa.fa-home {
    font-size: 1.5rem;
}

.fa::before {
    margin-right: 0.5rem;
}

/* ==========================================================================
   RESPONSIVE: LARGE MOBILE (576px+)
   ========================================================================== */

@media (min-width: 576px) {
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.3rem;
        line-height: 1rem;
    }

    h3 {
        font-size: 1.2rem;
    }

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

    .textblock-schmal {
        width: 50%;
    }

    .hinweis h3 {
        font-size: 1.2rem;
        line-height: 1.5rem;
    }
}

/* ==========================================================================
   RESPONSIVE: TABLET (768px+)
   ========================================================================== */

@media (min-width: 768px) {
    .zweispaltig {
        flex-direction: row;
    }

    .zweispaltig > div {
        flex: 1;
        padding-right: 2rem;
        text-align: justify;
    }
}

/* ==========================================================================
   RESPONSIVE: DESKTOP (1200px+)
   ========================================================================== */

@media (min-width: 1200px) {
    h1 {
        font-size: 2rem;
    }

    figure.video_container {
        width: 50%;
    }

    #abschlussklassen-2018.mod_article div.ce_gallery {
        display: flex;
        justify-content: center;
    }
}