/* ============================================================================
 * Konsolidierte Stylesheet-Datei. Ersetzt foundation.min.css + boxicons.css +
 * app.css. Enthält:
 *   1. Reset/Normalize-Essentials
 *   2. Foundation-XY-Grid-Subset (nur die genutzten Klassen)
 *   3. Cards, Button, Show-for-SR (Foundation-Pattern, neu geschrieben)
 *   4. Boxicons-Font + die 9 verwendeten Glyphen
 *   5. Theme-Styles (das frühere app.css 1:1)
 * ========================================================================= */


/* --- 1. Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1 { font-size: 2em; margin: .67em 0; }
img { border-style: none; max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button { cursor: pointer; }
[hidden] { display: none; }


/* --- 2. Grid (Foundation-6-XY-Grid-Subset) ---------------------------------- */

.grid-container {
    box-sizing: border-box;
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 .625rem;
}
.grid-container.full { max-width: 100%; padding: 0; }
.grid-container.fluid { max-width: 100%; }

.grid-x { display: flex; flex-flow: row wrap; }

.cell {
    flex: 0 0 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

.grid-padding-x > .cell { padding-right: .9375rem; padding-left: .9375rem; }
.grid-margin-x { margin-left: -.625rem; margin-right: -.625rem; }
.grid-margin-x > .cell { margin-left: .625rem; margin-right: .625rem; }
.grid-margin-y { margin-top: -.625rem; margin-bottom: -.625rem; }
.grid-margin-y > .cell { margin-top: .625rem; margin-bottom: .625rem; }

/* Generierte Spalten 1..12 für small (=Default), medium, large. */
.small-1 { width: 8.33333%; }   .small-2 { width: 16.66667%; }
.small-3 { width: 25%; }        .small-4 { width: 33.33333%; }
.small-5 { width: 41.66667%; }  .small-6 { width: 50%; }
.small-7 { width: 58.33333%; }  .small-8 { width: 66.66667%; }
.small-9 { width: 75%; }        .small-10 { width: 83.33333%; }
.small-11 { width: 91.66667%; } .small-12 { width: 100%; }
.small-offset-1  { margin-left:  8.33333%; }
.small-offset-2  { margin-left: 16.66667%; }
.small-offset-3  { margin-left: 25%; }

.grid-margin-x > .small-1  { width: calc(8.33333% - 1.25rem); }
.grid-margin-x > .small-2  { width: calc(16.66667% - 1.25rem); }
.grid-margin-x > .small-3  { width: calc(25% - 1.25rem); }
.grid-margin-x > .small-4  { width: calc(33.33333% - 1.25rem); }
.grid-margin-x > .small-6  { width: calc(50% - 1.25rem); }
.grid-margin-x > .small-12 { width: calc(100% - 1.25rem); }

@media screen and (min-width: 40em) {
    .medium-1 { width: 8.33333%; }   .medium-2 { width: 16.66667%; }
    .medium-3 { width: 25%; }        .medium-4 { width: 33.33333%; }
    .medium-5 { width: 41.66667%; }  .medium-6 { width: 50%; }
    .medium-7 { width: 58.33333%; }  .medium-8 { width: 66.66667%; }
    .medium-9 { width: 75%; }        .medium-10 { width: 83.33333%; }
    .medium-11 { width: 91.66667%; } .medium-12 { width: 100%; }
    .medium-offset-1 { margin-left:  8.33333%; }
    .medium-offset-2 { margin-left: 16.66667%; }
    .medium-offset-3 { margin-left: 25%; }

    .grid-margin-x > .medium-1  { width: calc(8.33333% - 1.25rem); }
    .grid-margin-x > .medium-3  { width: calc(25% - 1.25rem); }
    .grid-margin-x > .medium-4  { width: calc(33.33333% - 1.25rem); }
    .grid-margin-x > .medium-6  { width: calc(50% - 1.25rem); }
    .grid-margin-x > .medium-10 { width: calc(83.33333% - 1.25rem); }
}

@media screen and (min-width: 64em) {
    .large-1 { width: 8.33333%; }   .large-2 { width: 16.66667%; }
    .large-3 { width: 25%; }        .large-4 { width: 33.33333%; }
    .large-5 { width: 41.66667%; }  .large-6 { width: 50%; }
    .large-7 { width: 58.33333%; }  .large-8 { width: 66.66667%; }
    .large-9 { width: 75%; }        .large-10 { width: 83.33333%; }
    .large-11 { width: 91.66667%; } .large-12 { width: 100%; }
    .large-offset-1 { margin-left:  8.33333%; }
    .large-offset-2 { margin-left: 16.66667%; }
    .large-offset-3 { margin-left: 25%; }

    .grid-margin-x > .large-3  { width: calc(25% - 1.25rem); }
    .grid-margin-x > .large-4  { width: calc(33.33333% - 1.25rem); }
    .grid-margin-x > .large-8  { width: calc(66.66667% - 1.25rem); }
}


/* --- 3. Cards, Button, Show-for-SR ----------------------------------------- */

.card {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-bottom: 1rem;
    background: #fefefe;
    color: #0a0a0a;
}
.card > :last-child { margin-bottom: 0; }
.card-section { padding: 1rem; flex: 1 0 auto; }

.button {
    display: inline-block;
    padding: .85em 1rem;
    margin: 0 0 1rem;
    line-height: 1;
    font-family: inherit;
    font-size: .9rem;
    font-weight: normal;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
    color: inherit;
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
    text-decoration: none;
    transition: background-color .25s ease-out, color .25s ease-out;
}

.show-for-sr,
.show-on-focus {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* --- 4. Boxicons (Subset) -------------------------------------------------- */

@font-face {
    font-family: 'boxicons';
    font-style: normal;
    font-weight: normal;
    src: url('/fonts/boxicons.woff2') format('woff2'),
         url('/fonts/boxicons.woff') format('woff'),
         url('/fonts/boxicons.ttf') format('truetype');
}
.bx {
    font-family: 'boxicons' !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    display: inline-block;
    text-transform: none;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Nur die im Code referenzierten Icons — Header, Footer, Front-Page-Icons. */
.bx-chevron-right:before  { content: "\ea50"; }
.bx-menu:before           { content: "\eb5f"; }
.bx-search:before         { content: "\ebf7"; }
.bx-x:before              { content: "\ec8d"; }
.bxs-bolt:before          { content: "\ecd1"; }
.bxs-book-bookmark:before { content: "\ecd9"; }
.bxs-chevron-down:before  { content: "\ed35"; }
.bxs-contact:before       { content: "\ed63"; }
.bxs-file:before          { content: "\edad"; }


/* --- 5. Theme-Styles (übernommen aus app.css) ------------------------------ */

textarea, input.text, input[type="text"], input[type="button"],
input[type="search"], input[type="submit"], .input-checkbox {
    -webkit-appearance: none;
    border-radius: 0;
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('/fonts/barlow-v11-latin-regular.woff2') format('woff2'),
         url('/fonts/barlow-v11-latin-regular.woff') format('woff'),
         url('/fonts/barlow-v11-latin-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    src: local(''),
         url('/fonts/barlow-v11-latin-600.woff2') format('woff2'),
         url('/fonts/barlow-v11-latin-600.woff') format('woff'),
         url('/fonts/barlow-v11-latin-600.ttf') format('truetype');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 800;
    src: local(''),
         url('/fonts/barlow-v11-latin-800.woff2') format('woff2'),
         url('/fonts/barlow-v11-latin-800.woff') format('woff'),
         url('/fonts/barlow-v11-latin-800.ttf') format('truetype');
}

body { font-family: 'Barlow', sans-serif; background: #f0f0f0; }

#text-over-img { text-align: center; }

article p a, article li a {
    color: #e1001a;
    border-bottom: 2px solid transparent;
}
.card-section a { color: #e1001a; }
article p a:hover, article li a:hover { border-bottom: 2px solid #e1001a; }

.scn-section h2 { color: #0c328d; }

.meta {
    font-size: 1rem;
    display: table;
    margin: 0 auto 10px;
    color: #0c328d;
    padding: 0 0 10px;
    border-bottom: 2px solid #0c328d;
}

.center { text-align: center; }

h1, h2, .h1, .h2, table b { font-weight: 800; }
h3, .h3, .title, .meta, .button, table, .funktion, .taetigkeit { font-weight: 600; }
.funktion, .taetigkeit { line-height: 1.2; }
.ort, .time { font-weight: 400; }

#text-over-img h1 { margin-bottom: 6px; }

h1, .h1 {
    font-size: calc(16px * 1.618);
    word-spacing: -1.5px;
    margin: calc(16px*1.618*1.618) 0 0 0;
}
#text-over-img h1 { margin: calc(16px/1.2) 16px calc(16px / 1.168 / 1.168); }
#big-header-headline { margin-left: 10%; margin-right: 10%; }

h2, .h2 { font-size: calc(16px * 1.1 * 1.2); }
section h2 { margin: calc(16px * 1.618) 0 calc(16px / 1.3333); }
table { color: #2d2d2d; margin-top: calc(16px / 1.3333); }
article h2, article h3 { margin-top: calc(16px * 1.618); }
article h2 { margin-bottom: 0; }
h3, .lst-articles ul, .h3 { margin-bottom: 0; font-size: calc(16px * 1.1); }
.icons h3 { text-align: center; }
.card-section h3 { margin-top: 0; }
h2 + p, h3 + p { margin-top: 6px; }

p { margin-bottom: 0; }
p + p { margin-top: 10px; }
.meta { font-size: 16px; font-weight: 600; }
p, article ul li, table { color: #171717; font-size: 16px; line-height: 1.35; }
article ul li { max-width: 85%; }
.orbit-container li { max-width: 100%; }
p:last-of-type, article ul li:last-of-type, table caption {
    margin-bottom: calc(16px * 1.168 * 1.168 * 1.168);
}
.icons .card h3 { margin-bottom: calc(16px *1); }
b, article p a, .orbit-caption, article li a, card-section a { font-weight: 600; }
nav .navbar .nav-links .links li a { font-size: 16px; }
.orbit-caption { letter-spacing: 0.4px; text-shadow: 1px 1px 1px #303030; }

/* Basic Styleling */
header { z-index: 10; position: relative; }
#accordion header { z-index: auto; position: inherit; }
main { margin-top: 70px; }
#big-img-container, #header-img-container { position: relative; }
#small-img-container { max-width: 1000px; margin: 0 auto; position: relative; }
.bg-article, .horizontal-card, .big-card { background: #fefefe; }
.card { border: none; }
.section-group + .section-group { margin-top: 16px; }

#main-footer {
    margin-top: calc(1rem * 1.618 * 1.618);
    background: #2d2d2d;
    padding: 1rem;
}

.scn-section { max-width: 62.5rem; margin: 0 auto; }
.icons .cell:nth-of-type(3) .card,
.icons .cell:nth-of-type(4) .card { margin-bottom: 0; }
.funktion + .taetigkeit:before { content: ' und '; }

table { width: 100%; caption-side: bottom; }
td { padding: 1rem; background-color: #e5e5e5; }
table caption { text-align: left; max-width: 85%; }
tr td:first-of-type { width: 80%; }
tr td:last-of-type { width: 20%; text-align: right; }

.left { text-align: left; }

/* Interaktive Elemente */
a { text-decoration: none; }
header nav, footer nav { font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }

/* Aufgelistete Artikel */
.lst-articles ul { list-style-type: none; line-height: 1.1; margin: 0; padding: 0; }
.lst-articles ul li a { padding: 16px; width: 100%; display: block; color: #171717; }
.lst-articles ul li + li { border-top: 2px solid #0c328d; }
.lst-articles span { font-size: 16px; }

/* Navigation */
nav ul { padding: 0; margin: 0; }
header nav {
    padding: 0; margin: 0;
    box-sizing: border-box;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 70px;
    background: #0c328d;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
nav ul li ul li { text-transform: none; letter-spacing: normal; }
nav .navbar {
    height: 100%; max-width: 62.5rem;
    background: #0c328d; margin: auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 50px;
}
nav .navbar .logo a { font-size: 30px; text-decoration: none; font-weight: 800; }
nav .navbar .nav-links { height: 100%; line-height: 70px; }
nav .navbar .nav-links .links { display: flex; }
nav .navbar .nav-links .links li {
    position: relative;
    display: flex; align-items: center;
    list-style-type: none;
    padding: 0 14px;
}
nav .navbar .nav-links .links li a {
    height: 100%; color: white;
    text-decoration: none; white-space: nowrap;
    font-weight: 800;
}
nav .navbar .nav-links .links li .arrow {
    color: #e1001a;
    height: 100%;
    text-align: center;
    line-height: 70px;
    transition: all 0.3s ease;
}

.navbar .nav-links .links .sub-menu {
    position: absolute;
    top: 70px;
    left: 0;
    background: #1453eb;
    line-height: 40px;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 80;
}
.navbar .nav-links .links .sub-menu li {
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: block;
}
.navbar .nav-links .links .sub-menu li a {
    display: block;
    width: 100%;
    padding: 0 22px;
    font-size: 16px;
    font-weight: 600;
}

#main-footer ul { text-align: center; }
#main-footer ul li {
    display: inline-block;
    margin: 0 1rem;
    padding: 10px 0;
    border-bottom: 2px solid transparent;
}
#main-footer a { color: #fefefe; }
#main-footer ul li:hover { border-bottom: 2px solid #e1001a; }

/* Search box */
.navbar .search-box { position: relative; height: 40px; width: 40px; }
.navbar .search-box i {
    color: white; position: absolute;
    height: 100%; width: 100%;
    line-height: 40px; text-align: center;
    font-size: 22px; font-weight: 600;
}
.navbar .search-box .input-box {
    height: 60px; width: 300px;
    background: #0c328d;
    position: absolute;
    top: 80px;
    right: calc(100% - 40px);
    opacity: 0; pointer-events: none;
    transition: all 0.3s ease;
    z-index: 25;
    padding: 10px;
}
.navbar.showInput .search-box .input-box { top: 65px; opacity: 1; pointer-events: auto; }
.navbar .search-box .input-box::before {
    content: ''; position: absolute;
    height: 20px; width: 20px;
    background: #0c328d;
    right: 10px; top: -6px;
    transform: rotate(45deg);
}
.search-form input { position: relative; z-index: 50; }
.navbar .bx-menu,
.nav-links .sidebar-logo .logo_name,
.nav-links .sidebar-logo .bx-x { display: none; }

#nav-search .search-action,
.search-detail-content .search-action {
    background-color: #e1001a;
    font-family: inherit; font-size: 14px;
    color: #ffffff; font-weight: 600;
    cursor: pointer;
    padding: 0 12px; margin: 0;
    border: 1px solid rgba(0, 0, 0, .1);
    border-bottom-width: 2px;
    border-radius: 2px;
}

#nav-search .search-form,
.search-detail-content .search-form {
    width: 100%; height: 38px;
    background-color: rgba(155, 155, 155, 0.03);
    display: flex; overflow: hidden;
    box-sizing: border-box; padding: 2px;
    border: 1px solid rgba(155, 155, 155, 0.2);
    border-radius: 2px;
}
#nav-search .search-input,
.search-detail-content .search-input {
    width: 100%; color: #ffffff;
    margin: 0; padding: 0 10px;
    background-color: transparent;
    font-family: inherit; font-size: 14px; font-weight: 400;
    box-sizing: border-box; border: 0;
}
::placeholder { color: white; opacity: 1; }
.search-detail-content .search-form { margin-top: 1rem; background: #0c328d; }

/* Animierte Teaser */
.anm-teaser { position: relative; overflow: hidden; }
.teaser { position: relative; overflow: hidden; }
.anm-teaser-headline {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.62) 100%);
    width: 100%; height: 100%;
    position: absolute; bottom: 0;
    transition: opacity .5s ease-out;
}
.anm-teaser-headline h3 {
    letter-spacing: .8px;
    position: absolute; bottom: 0;
    padding: .85em 1rem;
    color: #fff;
    line-height: 1.1;
    text-shadow: 1px 1px 1px #303030;
    hyphens: auto;
    transition: ease .5s;
}
.anm-teaser-headline:hover, .card-hover-on .anm-teaser-headline { opacity: 0; }
.anm-teaser-headline:hover h3, .card-hover-on .anm-teaser-headline h3 { transform: translateY(40px); }

.button {
    color: #e1001a; background: none;
    margin-top: 1rem; border-radius: 0;
    padding: 0 0 0.625rem;
    border-bottom: 2px solid transparent;
}
.button:hover { color: #e1001a; border-bottom: 2px solid #e1001a; background: none; }
.container-button { text-align: center; }

/* Image slider */
.orbit-container { width: 100%; padding: 0; }
#slider { max-width: 62.5rem; margin: 0 auto; }
.orbit-caption {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.62) 100%);
}
.orbit-previous, .orbit-next { z-index: 2; }
.orbit-previous:hover, .orbit-next:hover,
.orbit-previous:active, .orbit-next:active,
.orbit-previous:focus, .orbit-next:focus { background: rgba(0, 0, 0, 0.7); }
button, .card { border-radius: 0; }

/* Icon Cards */
.icons .bx { font-size: 8rem; text-align: center; margin-top: 1rem; color: #e1001a; }
.icons h3 { display: inline-block; }
.icons .card, .icons .cell:hover .bx { transition: all .3s ease-in; }
.icons .cell:hover .card { background: #e1001a; color: #fefefe; }
.icons .cell:hover .bx { color: #fefefe; }

/* Accordion */
.open { color: #e1001a; }
#accordion { max-width: 62.5em; margin: 1rem auto 0; }
#accordion article { background: #fefefe; }
.acc-header, .search-header { padding: 1rem; }
#accordion article + article, #accordion a + a { margin-top: 16px; }
.search-list a { display: block; color: #171717; }
.acc-header h3, .search-header h2 { display: inline-block; margin-top: 0; max-width: 70%; }
#accordion header span { display: block; }
.detail-content, .search-detail-content { padding: 0 1rem 1rem; }
#accordion p { margin: 0; line-height: 1.2; }
#accordion .arrow { transition: all 0.3s ease; }
.open .arrow { transform: rotate(180deg); }
.acc-header i { float: right; }
.termine header:after { clear: both; content: ''; }
.ort, .time { margin-top: 1rem; display: inline-block; }
.date, .title { display: block; }
.ort:before { content: 'I'; padding: 6px; }
.page-termine #accordion article { scroll-margin-top: 4rem; }
#accordion header { cursor: pointer; }
.detail-content { display: none; }

.content-container { position: relative; }

#logo { top: 20px; width: 80px; position: relative; z-index: 99; }
#header-img-large { display: block; margin: 0 auto; }

figure { padding: 0; margin: 1rem 0 0.625rem; max-width: 100%; }
figure img { max-width: 100%; }

/* Galleries (WP-Pattern – derzeit nicht aktiv genutzt, Orbit-Slider zeigt) */
.gallery { margin: 1.5em 0; display: grid; grid-gap: 1.5em; }
.gallery-item { display: inline-block; text-align: center; width: 100%; margin: 0; }
.gallery-item img { display: block; width: 100%; height: auto; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-caption { display: block; }


/* --- Media-Queries (Typografie-Skalierung + Mobile-Nav) ------------------- */

@media screen and (max-width: 370px) {
    nav .navbar .nav-links { max-width: 100%; }
}

@media screen and (max-width: 799px) {
    nav .navbar .nav-links {
        display: block;
        position: fixed;
        background: #0c328d;
        top: 0; left: -100%;
        max-width: 270px; width: 100%;
        padding: 20px;
        line-height: 40px;
        transition: all 0.5s ease;
        z-index: 100;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
    nav .navbar .nav-links .sidebar-logo {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .navbar .nav-links .links .sub-menu { background: #0c328d; }
    .navbar .bx-menu,
    .nav-links .sidebar-logo .logo_name,
    .nav-links .sidebar-logo .bx-x {
        color: #fff;
        font-size: 25px;
        font-weight: 800;
        display: block;
    }
    nav .navbar .nav-links .links { display: block; margin-top: 20px; }
    nav .navbar .nav-links .links li { display: block; }
    .navbar .nav-links .links .sub-menu {
        display: none; position: relative;
        top: 0; left: 0; box-shadow: none;
    }
    .navbar .nav-links .links .sub-menu li { border-bottom: none; }
    nav .navbar .nav-links .links li .arrow { line-height: 40px; }
    .navbar .nav-links .links li.show .sub-menu { display: block; }
    .navbar .nav-links .links li.show .dropdown-arrow { transform: rotate(180deg); }

    .navbar .search-box .input-box {
        height: 100vh; width: 100vw;
        background: rgba(0, 0, 0, 0.9);
        right: -25px;
    }
    .navbar.showInput .search-box .input-box { top: 55px; padding-top: 46px; }
    .navbar .search-box .input-box::before { display: none; }
}

@media screen and (min-width: 400px) {
    #text-over-img h1 { margin: calc(17px / 1.2) 17px calc(17px / 1.168 / 1.168); }
    h1, .h1 { margin-top: calc(17px * 1.618 * 1.618); font-size: calc(17px * 1.618); }
    h2, .h2 { font-size: calc(17px * 1.1 * 1.2); }
    section h2 { margin: calc(17px * 1.618) 0 calc(17px / 1.3333); }
    article h2, article h3 { margin-top: calc(17px * 1.618); }
    article h2 { margin-bottom: 0; }
    h3, .lst-articles ul, .h3 { font-size: calc(17px * 1.1); }
    h2 + p, h3 + p { margin-top: calc(17px / 2.617924); }
    p + p { margin-top: calc(17px * 1.2 / 1.618); }
    .meta, p, nav .navbar .nav-links .links li a, .navbar .nav-links .links .sub-menu li a, .orbit-caption, nav .navbar .nav-links .links li .arrow, .lst-articles span, #accordion span, .button, article ul li, table, ol { font-size: 17px; }
    p:last-of-type, article ul li:last-of-type { margin-bottom: calc(17px * 1.168 * 1.168 * 1.168); }
    .icons .card h3 { margin-bottom: 17px; }
}

@media screen and (min-width: 600px) {
    #text-over-img h1 { margin: calc(19px / 1.2) 19px calc(19px / 1.168 / 1.168); }
    h1, .h1 { margin-top: calc(19px*1.618*1.618); font-size: calc(19px * 1.618); }
    h2, .h2 { font-size: calc(19px * 1.1 * 1.2); }
    section h2 { margin: calc(19px * 1.618) 0 calc(19px / 1.3333); }
    article h2, article h3 { margin-top: calc(19px * 1.618); }
    article h2 { margin-bottom: 0; }
    h3, .lst-articles ul, .h3 { font-size: calc(19px * 1.1); line-height: 1.2; }
    h2 + p, h3 + p { margin-top: calc(19px / 2.617924); }
    p + p { margin-top: calc(19px * 1.2 / 1.618); }
    .meta, p, nav .navbar .nav-links .links li a, .navbar .nav-links .links .sub-menu li a, .orbit-caption, nav .navbar .nav-links .links li .arrow, .lst-articles span, #accordion span, .button, article ul li, table, ol { font-size: 19px; }
    p:last-of-type, article ul li:last-of-type, caption { margin-bottom: calc(19px * 1.168 * 1.168 * 1.168); }
    .icons .card h3 { margin-bottom: 19px; }
    #logo { top: 29px; width: 90px; }
}

@media screen and (min-width: 750px) {
    #text-over-img h1 { margin: calc(20px / 1.2) calc(20px / 1.618) calc(20px / 1.168 / 1.168); }
    h1, .h1 { margin-top: calc(20px * 1.618 * 1.618); font-size: calc(20px * 1.618 * 1.2); }
    h2, .h2 { font-size: calc(20px * 1.1 * 1.2); }
    section h2 { margin: calc(20px * 1.618) 0 calc(20px / 1.3333); }
    article h2, article h3 { margin-top: calc(20px * 1.618); }
    article h2 { margin-bottom: 0; }
    h3, .lst-articles ul, .h3 { font-size: calc(20px * 1.1); }
    h2 + p, h3 + p { margin-top: calc(20px / 2.617924); }
    p + p { margin-top: calc(20px * 1.2 / 1.618); }
    .meta, p, nav .navbar .nav-links .links li a, .orbit-caption, nav .navbar .nav-links .links li .arrow, .lst-articles span, #accordion span, .button, article ul li, table, ol { font-size: 20px; }
    .navbar .nav-links .links .sub-menu li a { font-size: calc(20px / 1.1); }
    p:last-of-type, article ul li:last-of-type, table caption { margin-bottom: calc(20px * 1.168 * 1.168 * 1.168); }
    .icons .card h3 { margin-bottom: 20px; }
}

@media screen and (min-width: 799px) {
    #text-over-img h1 { color: #fefefe; margin-left: 10%; margin-right: 10%; }
    #text-over-img { position: absolute; bottom: 0; z-index: 2; left: 0; right: 0; }
    .meta, #text-over-img h1 { text-shadow: 1px 1px 1px #303030; }
    .meta { color: #fefefe; border-bottom: 2px solid #fefefe; letter-spacing: 0.5px; }

    .navbar .nav-links .links li:hover .sub-menu { display: block; }
    .navbar .nav-links .links li:hover .arrow { transform: rotate(180deg); }
    .navbar .nav-links .links .sub-menu li:hover { background: #e1001a; }

    #img-bg {
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.42) 100%);
        height: 100%; width: 100%;
        position: absolute; z-index: 1;
        color: white;
    }
}

@media screen and (min-width: 900px) {
    #text-over-img h1 { margin: calc(21px / 1.2) 20% calc(21px / 1.168 / 1.168); }
    h1, .h1 { margin-top: calc(21px * 1.618 * 1.618); font-size: calc(21px * 1.618 * 1.2); }
    h2, .h2 { font-size: calc(21px * 1.1 * 1.2); }
    section h2 { margin: calc(21px * 1.618) 0 calc(21px / 1.3333); }
    article h2, article h3 { margin-top: calc(21px * 1.618); }
    article h2 { margin-bottom: 0; }
    h3, .lst-articles ul, .h3 { font-size: calc(21px * 1.1); }
    h2 + p, h3 + p { margin-top: calc(21px / 2.617924); }
    p + p { margin-top: calc(21px * 1.2 / 1.618); }
    .meta, p, nav .navbar .nav-links .links li a, .orbit-caption, nav .navbar .nav-links .links li .arrow, .lst-articles span, #accordion span, .button, article ul li, table, ol { font-size: 21px; }
    .navbar .nav-links .links .sub-menu li a { font-size: calc(21px / 1.1); }
    p:last-of-type, article ul li:last-of-type, table caption { margin-bottom: calc(21px * 1.168 * 1.168 * 1.168); }
    .icons .card h3 { margin-bottom: 21px; }
}

@media screen and (min-width: 954px) { /* desktop nav-tweaks */ }
@media screen and (max-width: 954px) {
    nav .navbar { max-width: 100%; padding: 0 25px; }
    nav .navbar .logo a { color: #fff; font-size: 14px; }
    nav .navbar .nav-links .links li { padding: 0 10px; }
}

@media screen and (min-width: 1000px) {
    #img-container, #big-img-container {
        position: relative;
        z-index: 9;
        width: 100%;
        max-width: 2000px;
        margin-left: auto;
        margin-right: auto;
    }
    #img-container { overflow: hidden; }
    #bg-blurry {
        width: 110%;
        position: absolute;
        top: -19px;
        filter: blur(12px) grayscale(10%);
        height: 110%;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        left: -10px;
    }
}

@media screen and (max-width: 1020px) {
    .teaser, .card-articles { padding: 0 1.25rem; }
}

@media screen and (min-width: 1024px) {
    .icons .card { margin-bottom: 0; }
}