/* ============================================================================
   COMPONENTS.CSS - Wiederverwendbare Komponenten
   FTS Husum - Contao 5.3
   Colorbox, Flyer-Elemente, spezielle Komponenten
   ============================================================================ */

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

/* Colorbox Loaded Content */
#cboxLoadedContent {
    padding: 2rem;
}

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

/* Colorbox Variants */
.inline-box,
.inline,
.inline-boxes {
    /* Trigger classes for colorbox */
}

.cboxFlyer p {
    line-height: 1.5rem;
}

/* ==========================================================================
   FLYER-SPECIFIC COMPONENTS
   ========================================================================== */

#article-399 {
    margin-left: 1rem;
}

.ce_image.flyer-willk {
    margin-top: -3rem;
    margin-bottom: 3rem;
}

/* SVG Map Interactions */
.ie #map svg {
    width: 1260px;
    height: 615px;
}

path {
    fill: white;
    fill-opacity: 0.1;
}

path:hover {
    stroke: blue;
    stroke-opacity: 0.2;
    stroke-dasharray: 5 2;
    fill: #4979AA;
    fill-opacity: 0.1;
}

.cursor {
    cursor: url("files/Flyer/fuesse.png"), auto;
}

/* ==========================================================================
   START PAGE BOXES (Neue 5. Klassen)
   ========================================================================== */

.start-boxen {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

/* Safari Specific */
.safari .start-boxen {
    margin-top: 2rem;
}

/* IE Specific */
.ie .start-boxen {
    margin-bottom: 2rem;
}

.ie .ce_text.hinweis {
    margin-bottom: 2rem;
}

/* ==========================================================================
   FLYER-BOXEN FARBEN (neue-5-klassen Seite)
   ========================================================================== */

.box {
    padding: 1rem;
    text-align: center;
    flex: 1;
    margin-right: 1rem;
}

.box.red.last {
    margin-right: 0;
}

.box a,
.box p {
    color: #fff;
    font-size: 1rem;
    line-height: 1.5rem;
}

.box p {
    padding: 0.1rem;
}

.box-green {
    background-color: #7AB735;
    color: #1a1a1a;
    padding-top: 1rem;
    text-align: center;
    margin-right: 1rem;
}

.red {
    background-color: #CB2E1F;
    color: #fff;
}

.yellow {
    background-color: #F4BC0D;
    color: #fff;
}

.blue {
    background-color: #4979AA;
    color: #fff;
}

.green {
    background-color: #7AB735;
    color: #fff;
}

/* ==========================================================================
   CUSTOM ELEMENTS FOR SPECIFIC PAGES
   ========================================================================== */

/* Gallery Creator Hiding Back Link on Specific Article */
#article-366.mod_article.first.last.block div.ce_gallery_creator_ce.border-dotted.gallery_creator.block div.backLink a {
    display: none;
}

/* Text Block Widths */
.text-links {
    width: calc(100% / 5 * 2);
}

.text-rechts {
    width: calc(100% / 5 * 3);
}

/* ==========================================================================
   SPECIAL INFO ELEMENTS
   ========================================================================== */

/* Corona Info Block */
.mod_newslist.corona.sonderinfo.block div.layout_short {
    display: block;
}

/* ==========================================================================
   LAUFSCHRIFT (MARQUEE)
   ========================================================================== */

/* JavaScript handles the animation duration */
/* CSS defines the basic structure */

/* ==========================================================================
   DFLIP (PDF FLIPBOOK)
   ========================================================================== */

/* Loaded via external stylesheet in head tags:
   files/dflip/css/dflip.css
   files/dflip/css/themify-icons.css
*/

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

@media (min-width: 576px) {
    .start-boxen {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

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

@media (min-width: 768px) {
    .text-links,
    .text-rechts {
        width: auto;
        flex: 1;
    }
}

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

@media (min-width: 1200px) {
    .mod_newslist.corona.sonderinfo.block div.layout_short {
        display: flex;
    }
}