/* ==========================================================
   EVERYONE ASSEMBLE
   TYPOGRAFIE UND ÜBERSCHRIFTEN
   ========================================================== */

:root{
    --ea-heading-bg:#010914;
    --ea-heading-panel:#04192b;
    --ea-heading-panel-soft:#082b45;
    --ea-heading-line:#1d5f8f;
    --ea-heading-accent:#218bd0;
    --ea-heading-light:#75d0ff;
    --ea-heading-text:#c4d8e4;
    --ea-heading-text-light:#e1f1fa;
    --ea-heading-muted:#8fa9bc;
}

/* ==========================================================
   GEMEINSAME GRUNDLAGEN
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
h7,
h8,
h9,
h10,
h11,
h12,
h13,
h14,
h15,
h16,
h17,
h21,
h22{
    box-sizing:border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
h7 a,
h8 a,
h9 a,
h10 a,
h11 a,
h12 a,
h13 a,
h14 a,
h15 a,
h16 a,
h17 a,
h21 a,
h22 a{
    color:inherit;
    text-decoration:none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
h7 a:hover,
h8 a:hover,
h9 a:hover,
h10 a:hover,
h11 a:hover,
h12 a:hover,
h13 a:hover,
h14 a:hover,
h15 a:hover,
h16 a:hover,
h17 a:hover,
h21 a:hover,
h22 a:hover{
    color:var(--ea-heading-light);
    text-decoration:none;
}

/* ==========================================================
   ÜBERSCHRIFT #01
   KLEINE INLINE-ÜBERSCHRIFT
   ========================================================== */

h1{
    display:inline;

    margin:0;
    padding:0;

    color:var(--ea-heading-text);

    font-family:Antonio,Arial,sans-serif;
    font-size:12px;
    font-weight:600;
    line-height:1.55;

    letter-spacing:.8px;
    text-transform:uppercase;
}

/* ==========================================================
   ÜBERSCHRIFT #02
   GROSSE ABSCHNITTSÜBERSCHRIFT
   ========================================================== */

h2{
    position:relative;

    display:block;

    margin:0 0 14px;
    padding:0 0 9px 17px;

    color:var(--ea-heading-light);

    border-bottom:1px solid rgba(33,139,208,.28);

    font-family:Antonio,Arial,sans-serif;
    font-size:22px;
    font-weight:700;
    line-height:1.3;

    letter-spacing:1.5px;
    text-transform:uppercase;

    text-shadow:0 0 18px rgba(33,139,208,.16);
}

h2:before{
    content:"";

    position:absolute;
    top:3px;
    bottom:10px;
    left:0;

    width:4px;
    padding:0;
    margin:0;

    background:
        linear-gradient(
            180deg,
            var(--ea-heading-light),
            var(--ea-heading-accent)
        );
}

h2:after{
    content:"";

    position:absolute;
    bottom:-1px;
    left:17px;

    width:75px;
    height:2px;

    background:var(--ea-heading-accent);
}

h2.sub{
    padding-bottom:0;

    border-bottom:0;
}

h2.sub:after{
    display:none;
}

h2.sub span{
    display:block;

    margin:7px 0 0;
    padding:7px 0 0;

    color:var(--ea-heading-muted);

    border-top:1px solid rgba(33,139,208,.20);

    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:600;
    line-height:1.5;

    letter-spacing:1.3px;
    text-shadow:none;
    text-transform:uppercase;
}

/* ==========================================================
   ÜBERSCHRIFT #03
   MITTLERE ABSCHNITTSÜBERSCHRIFT
   ========================================================== */

h3{
    position:relative;

    display:block;

    margin:0 0 11px;
    padding:0 0 7px;

    color:var(--ea-heading-text-light);

    font-family:Antonio,Arial,sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:1.2px;
    text-transform:uppercase;
}

h3:after{
    content:"";

    display:block;

    width:48px;
    height:2px;
    margin:6px 0 0;
    padding:0;

    background:
        linear-gradient(
            90deg,
            var(--ea-heading-accent),
            rgba(33,139,208,.12)
        );
}

h3.sub:after{
    display:none;
}

h3.sub span{
    display:block;

    margin-top:6px;
    padding-top:6px;

    color:var(--ea-heading-muted);

    border-top:1px solid rgba(33,139,208,.16);

    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:600;
    line-height:1.5;

    letter-spacing:1.2px;
    text-align:right;
    text-transform:uppercase;
}

h3.sub span:before{
    display:none;
}

/* ==========================================================
   ÜBERSCHRIFT #04
   GROSSE PANELÜBERSCHRIFT
   ========================================================== */

h4{
    position:relative;

    display:block;

    margin:10px auto;
    padding:16px 15px 12px;

    overflow:hidden;

    color:var(--ea-heading-light);

    background:
        radial-gradient(
            circle at 50% 150%,
            rgba(33,139,208,.20),
            transparent 55%
        ),
        linear-gradient(
            90deg,
            rgba(33,139,208,.08),
            transparent 65%
        ),
        var(--ea-heading-bg);

    border-left:4px solid var(--ea-heading-accent);
    border-bottom:2px solid #1674b5;

    font-family:Antonio,Arial,sans-serif;
    font-size:23px;
    font-weight:700;
    line-height:1.3;

    letter-spacing:1.8px;
    text-align:center;
    text-transform:uppercase;

    text-shadow:0 0 18px rgba(33,139,208,.18);
}

h4:before{
    content:"";

    position:absolute;
    top:0;
    left:50%;

    width:150px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ea-heading-light),
            transparent
        );

    transform:translateX(-50%);
}

/* ==========================================================
   ÜBERSCHRIFT #05
   KLEINE ABSCHNITTSÜBERSCHRIFT
   ========================================================== */

h5{
    position:relative;

    display:block;

    margin:0 0 10px;
    padding:0 0 6px;

    color:var(--ea-heading-text-light);

    font-family:Antonio,Arial,sans-serif;
    font-size:14px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:1px;
    text-transform:uppercase;
}

h5:after{
    content:"";

    display:block;

    width:42px;
    height:2px;
    margin:5px 0 0;
    padding:0;

    background:var(--ea-heading-accent);
}

h5.sub:after{
    display:none;
}

h5.sub span{
    display:block;

    margin-top:6px;
    padding-top:5px;

    color:var(--ea-heading-muted);

    border-top:1px solid rgba(33,139,208,.16);

    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:600;
    line-height:1.5;

    letter-spacing:1.2px;
    text-align:right;
    text-transform:uppercase;
}

h5.sub span:before{
    display:none;
}

/* ==========================================================
   ÜBERSCHRIFT #06
   KLEINE STATUSLEISTE
   ========================================================== */

h6{
    display:block;

    margin:6px 0;
    padding:6px 9px;

    color:var(--ea-heading-text);

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.11),
            transparent 75%
        ),
        var(--ea-heading-panel);

    border-left:3px solid var(--ea-heading-accent);

    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:600;
    line-height:1.5;

    letter-spacing:.5px;
    text-align:left;
    text-shadow:none;
    text-transform:uppercase;
}

.alink6 a{
    color:var(--ea-heading-text);

    text-decoration:none;

    transition:
        color .25s ease,
        background-color .25s ease;
}

.alink6 a:hover{
    color:var(--ea-heading-light);
    background:transparent;

    opacity:1;
}

/* ==========================================================
   ÜBERSCHRIFT #07
   KARTENÜBERSCHRIFT
   ========================================================== */

h7{
    position:relative;

    display:block;

    margin:1px 0;
    padding:7px 9px 8px 11px;

    color:var(--ea-heading-light);

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.12),
            transparent 75%
        ),
        var(--ea-heading-bg);

    border:0;
    border-left:3px solid var(--ea-heading-accent);

    font-family:Antonio,Arial,sans-serif;
    font-size:13px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.8px;
    text-transform:uppercase;
}

/* ==========================================================
   ÜBERSCHRIFT #08
   KOMPAKTE FELDÜBERSCHRIFT
   ========================================================== */

h8{
    display:block;

    margin:1px 0;
    padding:5px 8px;

    color:var(--ea-heading-text-light);
    background:rgba(1,9,20,.75);

    border:0;
    border-left:2px solid rgba(33,139,208,.55);

    font-family:Antonio,Arial,sans-serif;
    font-size:11px;
    font-weight:700;
    line-height:1.45;

    letter-spacing:.7px;
    text-transform:uppercase;
}

/* ==========================================================
   ÜBERSCHRIFT #09
   ALTERNATIVE ABSCHNITTSÜBERSCHRIFT
   ========================================================== */

h9{
    position:relative;

    display:block;

    margin:0 0 13px;
    padding:0 0 8px 15px;

    color:var(--ea-heading-light);

    border-bottom:1px solid rgba(117,208,255,.28);

    font-family:Antonio,Arial,sans-serif;
    font-size:18px;
    font-weight:700;
    line-height:1.35;

    letter-spacing:1.3px;
    text-transform:uppercase;
}

h9:before{
    content:"";

    position:absolute;
    top:3px;
    bottom:9px;
    left:0;

    width:3px;
    margin:0;
    padding:0;

    background:var(--ea-heading-accent);
}

h9:after{
    content:"";

    position:absolute;
    bottom:-1px;
    left:15px;

    width:60px;
    height:2px;

    background:var(--ea-heading-light);
}

h9.sub{
    border-bottom:0;
}

h9.sub:after{
    display:none;
}

h9.sub span{
    display:block;

    margin-top:7px;
    padding-top:6px;

    color:var(--ea-heading-muted);

    border-top:1px solid rgba(33,139,208,.18);

    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:600;
    line-height:1.5;

    letter-spacing:1.2px;
    text-shadow:none;
    text-transform:uppercase;
}

/* ==========================================================
   ÜBERSCHRIFT #10
   PANELZEILE
   ========================================================== */

h10{
    display:block;

    margin:1px 0;
    padding:6px 9px;

    color:var(--ea-heading-text-light);

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.10),
            transparent 78%
        ),
        var(--ea-heading-bg);

    border:0;
    border-left:2px solid var(--ea-heading-accent);

    font-family:Antonio,Arial,sans-serif;
    font-size:13px;
    font-weight:700;
    line-height:1.45;

    letter-spacing:.8px;
    text-transform:uppercase;
}

/* ==========================================================
   ÜBERSCHRIFT #11
   GROSSE DISPLAYÜBERSCHRIFT
   ========================================================== */

h11{
    display:inline;

    margin:0;
    padding:0;

    color:var(--ea-heading-light);

    font-family:Antonio,Arial,sans-serif;
    font-size:32px;
    font-weight:700;
    line-height:1.2;

    letter-spacing:2px;
    text-transform:uppercase;

    text-shadow:
        0 0 20px rgba(33,139,208,.20),
        0 2px 8px rgba(0,0,0,.45);
}

/* ==========================================================
   ÜBERSCHRIFT #12
   MITTLERE INLINE-ÜBERSCHRIFT
   ========================================================== */

h12{
    display:inline;

    margin:0;
    padding:0;

    color:var(--ea-heading-text-light);

    font-family:Antonio,Arial,sans-serif;
    font-size:18px;
    font-weight:700;
    line-height:1.35;

    letter-spacing:1.3px;
    text-transform:uppercase;
}

/* ==========================================================
   ÜBERSCHRIFT #13
   ZÄHLER UND STATISTIK
   ========================================================== */

h13{
    position:relative;

    display:block;

    margin:1px 0;
    padding:8px 11px;

    color:var(--ea-heading-light);

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.13),
            transparent 75%
        ),
        var(--ea-heading-bg);

    border:0;
    border-left:3px solid var(--ea-heading-accent);

    font-family:Antonio,Arial,sans-serif;
    font-size:24px;
    font-weight:700;
    line-height:1.25;

    letter-spacing:1.3px;
    text-transform:uppercase;

    text-shadow:0 0 17px rgba(33,139,208,.18);
}

/* ==========================================================
   ÜBERSCHRIFT #14
   KLEINES LABEL
   ========================================================== */

h14{
    display:inline;

    margin:0;
    padding:0;

    color:var(--ea-heading-muted);

    font-family:Antonio,Arial,sans-serif;
    font-size:11px;
    font-weight:700;
    line-height:1.45;

    letter-spacing:.8px;
    text-transform:uppercase;
}

/* ==========================================================
   ÜBERSCHRIFT #15
   CHARAKTER- UND BEREICHSKOPF
   ========================================================== */

h15{
    position:relative;

    display:block;

    margin:10px auto;
    padding:13px 15px 11px;

    overflow:hidden;

    color:var(--ea-heading-light);

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.13),
            transparent 50%,
            rgba(33,139,208,.07)
        ),
        var(--ea-heading-panel-soft);

    border-left:4px solid var(--ea-heading-accent);
    border-bottom:2px solid #1674b5;

    font-family:Antonio,Arial,sans-serif;
    font-size:19px;
    font-weight:700;
    line-height:1.35;

    letter-spacing:1.4px;
    text-align:center;
    text-transform:uppercase;

    text-shadow:0 0 16px rgba(33,139,208,.18);
}

h15:after{
    content:"";

    position:absolute;
    bottom:-2px;
    left:50%;

    width:85px;
    height:2px;

    background:var(--ea-heading-light);

    transform:translateX(-50%);
}

/* ==========================================================
   ÜBERSCHRIFT #16
   BETONTE INLINE-ÜBERSCHRIFT
   ========================================================== */

h16{
    display:inline;

    margin:0;
    padding:0;

    color:var(--ea-heading-light);

    font-family:Antonio,Arial,sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:1.2px;
    text-transform:uppercase;

    text-shadow:0 0 13px rgba(33,139,208,.16);
}

/* ==========================================================
   ÜBERSCHRIFT #17
   DUNKLE SCHRIFT FÜR HELLE FLÄCHEN
   ========================================================== */

h17{
    display:inline;

    margin:0;
    padding:0;

    color:#04192b;

    font-family:Antonio,Arial,sans-serif;
    font-size:13px;
    font-weight:700;
    line-height:1.45;

    letter-spacing:.9px;
    text-transform:uppercase;
}

/* ==========================================================
   ÜBERSCHRIFT #21
   ALTERNATIVE GROSSE PANELÜBERSCHRIFT
   ========================================================== */

h21{
    position:relative;

    display:block;

    margin:10px auto;
    padding:15px 14px 11px;

    overflow:hidden;

    color:var(--ea-heading-light);

    background:
        linear-gradient(
            135deg,
            rgba(33,139,208,.15),
            transparent 42%
        ),
        linear-gradient(
            90deg,
            var(--ea-heading-panel-soft),
            var(--ea-heading-bg)
        );

    border-left:4px solid var(--ea-heading-accent);
    border-bottom:2px solid #1674b5;

    font-family:Antonio,Arial,sans-serif;
    font-size:22px;
    font-weight:700;
    line-height:1.35;

    letter-spacing:1.7px;
    text-align:center;
    text-transform:uppercase;

    text-shadow:0 0 18px rgba(33,139,208,.18);
}

h21:after{
    content:"";

    position:absolute;
    bottom:-1px;
    left:50%;

    width:80px;
    height:2px;

    background:var(--ea-heading-light);

    transform:translateX(-50%);
}

/* ==========================================================
   ÜBERSCHRIFT #22
   SEHR GROSSE HERO-ÜBERSCHRIFT
   ========================================================== */

h22{
    position:relative;

    display:block;

    margin:10px auto;
    padding:20px 16px 16px;

    overflow:hidden;

    color:var(--ea-heading-light);

    background:
        radial-gradient(
            circle at 50% 140%,
            rgba(33,139,208,.24),
            transparent 50%
        ),
        linear-gradient(
            90deg,
            rgba(33,139,208,.08),
            transparent 50%,
            rgba(33,139,208,.05)
        ),
        var(--ea-heading-bg);

    border-left:5px solid var(--ea-heading-accent);
    border-bottom:2px solid #1674b5;

    font-family:Antonio,Arial,sans-serif;
    font-size:30px;
    font-weight:700;
    line-height:1.25;

    letter-spacing:2px;
    text-align:center;
    text-transform:uppercase;

    text-shadow:
        0 0 22px rgba(33,139,208,.23),
        0 3px 10px rgba(0,0,0,.45);
}

h22:before{
    content:"";

    position:absolute;
    top:0;
    left:50%;

    width:210px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ea-heading-light),
            transparent
        );

    transform:translateX(-50%);
}

h22:after{
    content:"";

    position:absolute;
    bottom:-1px;
    left:50%;

    width:105px;
    height:2px;

    background:var(--ea-heading-light);

    transform:translateX(-50%);
}

/* ==========================================================
   RESPONSIVE TYPOGRAFIE
   ========================================================== */

@media screen and (max-width:600px){

    h2{
        font-size:19px;
    }

    h4{
        font-size:20px;
    }

    h11{
        font-size:26px;
    }

    h13{
        font-size:20px;
    }

    h15{
        font-size:17px;
    }

    h21{
        font-size:19px;
    }

    h22{
        font-size:24px;
    }
}