/*----- Schriften -----*/
@font-face {
    font-family: 'BrandingMedium';
    src: url('../fonts/branding-medium-webfont.woff2') format('woff2'),
         url('../fonts/branding-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'BrandingMediumItalic';
    src: url('../fonts/branding-mediumitalic-webfont.woff2') format('woff2'),
         url('../fonts/branding-mediumitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'BrandingSemiBold';
    src: url('../fonts/branding-semibold-webfont.woff2') format('woff2'),
         url('../fonts/branding-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'BrandingSemiBoldItalic';
    src: url('../fonts/branding-semibolditalic-webfont.woff2') format('woff2'),
         url('../fonts/branding-semibolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'BrandingSemiLight';
    src: url('../fonts/branding-semilight-webfont.woff2') format('woff2'),
         url('../fonts/branding-semilight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'BrandingSemiLightItalic';
    src: url('../fonts/branding-semilightitalic-webfont.woff2') format('woff2'),
         url('../fonts/branding-semilightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}



/*----- Allgemeine Einstellungen -----*/
:root {
    --T:1.618;
    --n:3; /* h4 soll gleich groß sein wie die Basisschrift */
    --f_max:3;
    --f_min:1.5;
    --res_max:1920;
    --res_min:320;

    --f_Angleich:clamp(var(--f_min),calc((var(--f_max) - var(--f_min)) / (var(--res_max) - var(--res_min)) * (100vw - var(--res_min)) + var(--f_min)),var(--f_max));
    --f_Korrektur:calc(pow(var(--f_Angleich),1 / var(--n)) / var(--T));

    --f_KorrT:calc(var(--f_Korrektur) * var(--T));

    --GrundfarbeHell: #f2f8f9;
    --GrundfarbeDunkel: #175b84;
    --GrundfarbeRand: #317fae;
    --GrundfarbeSchmuck: #429cb0;
    --GrundfarbeSchmuck2: #4cc87f;
    --GrundfarbeSchrift: #02213c;
    --GrundfarbeSchriftMenue: #03748e;
}

:root {
	--faktor:;
	--size_max:16;
	--size_min:calc(var(--size_max) * var(--faktor));
	--k:calc((var(--size_max) - var(--size_min))/(var(--res_max) - var(--res_min)));
	--d:calc(var(--size_max) - var(--res_max) * var(--k));
     min-height: 100%;
}



html, body {
    height: 100%;
    background: var(--GrundfarbeRand);
    font-family: 'BrandingMedium', helvetica, arial, sans-serif;
    -webkit-hyphens: auto;
    hyphens: auto;
}

html.fluid {
    font-size:1em;
	font-size:clamp(var(--size_min),calc(100vw * var(--k) + var(--d)),var(--size_max));
   font-size:clamp(calc(var(--size_min) * 1px),calc(100vw * var(--k) + var(--d) * 1px),calc(var(--size_max) * 1px));
}

strong {
    font-family: 'BrandingSemiBold', helvetica, arial, sans-serif;
}

h1 { font-size:calc(pow(var(--f_KorrT),var(--n)) * 100%); }
h2 { font-size:calc(pow(var(--f_KorrT),var(--n) - 1) * 100%); }
h3 { font-size:calc(pow(var(--f_KorrT),var(--n) - 2) * 100%); }
h4 { font-size:calc(pow(var(--f_KorrT),var(--n) - 3) * 100%); }
h5 { font-size:calc(pow(var(--f_KorrT),var(--n) - 4) * 100%); }
h6 { font-size:calc(pow(var(--f_KorrT),var(--n) - 5) * 100%); }

.Platzhalter { font-size: 0px; }

p.Kastentext {
    align-content: center;
    text-align: center;
    background-color: var(--GrundfarbeSchmuck);
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    border: solid 0.08em;
}

.Farbstreifen p.Kastentext {
    align-content: center;
    text-align: center;
    background-color: var(--GrundfarbeSchmuck);
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    border: solid 0.08em;
}

p.MaxHoehe { height: -webkit-fill-available; }

.Rund {
    border-radius: 10px;
    hyphens: none;
}

.Einzelzeichen {
    align-content: center;
    text-align: center;
    color: var(--GrundfarbeSchmuck);
    padding: 10px;
}

.Anfuehrungszeichen-links {
    background: url(../img/anfuehrungszeichen-links.svg) no-repeat scroll 50% 50%;
    background-size: 1em;
    font-size: 1.5em;
}

.Farbstreifen .Anfuehrungszeichen-links {
    background: url(../img/anfuehrungszeichen-links-hell.svg) no-repeat scroll 50% 50%;
    background-size: 1em;
    font-size: 1.5em;
}

.Anfuehrungszeichen-rechts {
    background: url(../img/anfuehrungszeichen-rechts.svg) no-repeat scroll 50% 50%;
    background-size: 1em;
    font-size: 1.5em;
}

.Farbstreifen .Anfuehrungszeichen-rechts {
    background: url(../img/anfuehrungszeichen-rechts-hell.svg) no-repeat scroll 50% 50%;
    background-size: 1em;
    font-size: 1.5em;
}


.ZentrierterText {
    align-content: center;
    text-align: center;
    padding: 10px;
}

.hell {
    background-color: #fff0;
}



/*----- umfassendes Grid -----*/
.grid {
    --maxwidth:65rem;
    --gap:1em;

    max-width:var(--maxwidth);
    margin:auto;
    min-height: calc(100vh + 1px); /* um die Seitenhöhe auf mind. Bildschirm bzw. Inhalt zu strecken */

    display:grid;
    grid-template-columns:repeat(12,1fr);
    grid-template-rows: 6em 1.5em auto 5em;
    gap:var(--gap);
    background-color: var(--GrundfarbeHell);

    color: var(--GrundfarbeSchrift);
}

.grid.nogap { gap:0px; }
.grid.nogap > * { box-sizing:border-box; }
.grid.fullwidth { --maxwidth:auto; }

.Kopf {
    grid-row: 1/3;
    grid-column: 1/-1;
}



/*----- Inhalts-Grid -----*/
.grid2 {
    margin:auto;
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:0em;
}

.grid2 div {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.grid2 div.Grosses-Bild { padding: 0em; }

.grid2 div.Inline { display: inline; }


/*---------------------*/
/*----- Slideshow -----*/
/*---------------------*/
.content {
    max-width:980px;
    margin-left: auto;
    margin-right: auto;
}

.css-slides {
    position:relative;
    height:auto;
    border: 1px solid green;
    display:block;
}

@keyframes fade {
    0%      { opacity: 0; }  /** fadeIn beginnt            **/
    11.11%  { opacity: 1; }  /** Bild steht                **/
    33.33%  { opacity: 1; }  /** Bild bleibt zwei Sekunden **/
    44.44%  { opacity: 0; }  /** fadeOut beendet           **/
    100%    { opacity: 0; }
}

.css-slides img {
    opacity:0;
    width: 100%;
    animation-name: fade;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    position:absolute;
    left:0;
    right:0;
}

.css-slides img:nth-child(1) { animation-delay: 0s; }
.css-slides img:nth-child(2) { animation-delay: 5s; }
.css-slides img:nth-child(3) { animation-delay: 10s; }
/*---------------------*/
/*---------------------*/
/*---------------------*/


/*------------------------------*/
/*----- Medienfestlegungen -----*/
/*------------------------------*/

/*----------- all --------------*/
/*------------------------------*/
@media all {

    .grid .Logo {
      grid-area:Logo;
      align-content: end;
      text-align: center;
    }

    .grid .Logo svg {
      padding: 1.5em;
      padding-bottom: 0em;
      margin-bottom: -0.1em;
    }

    .grid img.hochformat, img.querformat {
        width: auto;
        height: auto;
        max-height: 14em;
    }

    a {
      text-decoration: none;
    }

    .Nav1 ul, .Nav2 ul {
        margin: 0px;
        padding: 0px;
        padding-bottom: 10px;
        font-size: 1.2em;
        hyphens: none;
    }

    .Nav1 li, .Nav2 li {
        display: inline;
        list-style-type: none;
        padding-left: 4px;
    }

    .Nav1 li.active, .Nav2 li.active {
        font-family: 'BrandingSemiBold';
    }

    .Nav1 li a, .Nav2 li a {
        color: var(--GrundfarbeSchriftMenue);
    }

    .Nav1 li a:hover, .Nav2 li a:hover {
        background-color: #c8e1e5;
    }

    #Fuss {
      background-color: var(--GrundfarbeSchmuck);
      border-top: 2px solid var(--GrundfarbeSchmuck2);
      position: relative;
    }

    .img {
      text-align: center;
    }

    .Farbstreifen {
        background: var(--GrundfarbeDunkel);
        color: var(--GrundfarbeHell);
    }

    .Zeichen-vor-Text-hell {
        padding-left: 1.1em;
        background-image: url(../img/anfuehrungszeichen-links-hell.svg);
        background-repeat: no-repeat;
        background-size: .66em;
        background-position: left 0.23em top 0.23em;

   }

    .Zeichen-vor-Text {
        padding-left: 1.1em;
        background-image: url(../img/anfuehrungszeichen-links.svg);
        background-repeat: no-repeat;
        background-size: .66em;
        background-position: left 0.23em top 0.23em;

   }

    .eingerueckter-Text {
        padding-left: 1.1em;
   }
}
/*------------------------------*/
/*------------------------------*/

/*---- [1]   min 75 rem --------*/
/*------------------------------*/
@media screen and (min-width:75rem) {
	/* Desktop */
    html:not(.fluid) {
        font-size:1.5em;
    }

    .grid {
      grid-template-areas:
        "Logo Logo Logo Logo Nav1 Nav1 Nav1 Nav1 Nav1 Nav1 Nav1 Nav1"
        "Logo2 Logo2 Logo2 Logo2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2"
        "Main Main Main Main Main Main Main Main Main Main Main Main"
    }

    .grid img.Foerderschwerpunkte {
      width: auto;
      height: 25em;
    }

    .grid .Nav1 {
      grid-area:Nav1;
      align-self: flex-end;
    }
    .grid .Nav2 {
      grid-area:Nav2;
    }
    .grid .Main {
      grid-area:Main;
      border-top: 2px solid var(--GrundfarbeSchmuck2);
    }

    #Fuss {
      grid-row: 4;
      grid-column: 1/-1;
    }

    .grid2 .col-xl-1 {
        grid-column:span 1;
    }
    .grid2 .col-xl-2 {
        grid-column:span 2;
    }
    .grid2 .col-xl-3 {
        grid-column:span 3;
    }
    .grid2 .col-xl-4 {
        grid-column:span 4;
    }
    .grid2 .col-xl-5 {
        grid-column:span 5;
    }
    .grid2 .col-xl-6 {
        grid-column:span 6;
    }
    .grid2 .col-xl-7 {
        grid-column:span 7;
    }
    .grid2 .col-xl-8 {
        grid-column:span 8;
    }
    .grid2 .col-xl-9 {
        grid-column:span 9;
    }
    .grid2 .col-xl-10 {
        grid-column:span 10;
    }
    .grid2 .col-xl-11 {
        grid-column:span 11;
    }
    .grid2 .col-xl-12 {
        grid-column:span 12;
    }
    .grid2 div.Kastentext {
        font-size: calc(1em * 26 / 21);
        padding: 0.5em;
    }

    .Grosses-Bild {
        grid-row: 1;
        grid-column: 1/-1;
    }

    .Grosses-Bild img {
        width: 100%;
        height: auto;
    }

    .Bildtext {
        grid-row: 1;
        grid-column: 4/-4;
        align-content: end;
    }
}
/*------------------------------*/
/*------------------------------*/

/*---- [2]   max 75 rem --------*/
/*------------------------------*/
@media screen and (max-width:calc(75rem - 1px)) {
	/* Notebook */
    html:not(.fluid) {
        font-size:calc(1.5em * 18 / 21);
    }

.grid {
      grid-template-areas:
        "Logo Logo Logo Logo Nav1 Nav1 Nav1 Nav1 Nav1 Nav1 Nav1 Nav1"
        "Logo2 Logo2 Logo2 Logo2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2"
        "Main Main Main Main Main Main Main Main Main Main Main Main"
    }

    .grid img.Foerderschwerpunkte {
        width: auto;
        height: 25em;
    }

    .grid .Nav1 {
        grid-area:Nav1;
        align-self: flex-end;
    }
    .grid .Nav2 {
        grid-area:Nav2;
    }
    .grid .Main {
        grid-area:Main;
        border-top: 2px solid var(--GrundfarbeSchmuck2);
    }

    #Fuss {
        grid-row: 4;
        grid-column: 1/-1;
    }

    .grid2 .col-lg-1 {
        grid-column:span 1;
    }
    .grid2 .col-lg-2 {
        grid-column:span 2;
    }
    .grid2 .col-lg-3 {
        grid-column:span 3;
    }
    .grid2 .col-lg-4 {
        grid-column:span 4;
    }
    .grid2 .col-lg-5 {
        grid-column:span 5;
    }
    .grid2 .col-lg-6 {
        grid-column:span 6;
    }
    .grid2 .col-lg-7 {
        grid-column:span 7;
    }
    .grid2 .col-lg-8 {
        grid-column:span 8;
    }
    .grid2 .col-lg-9 {
        grid-column:span 9;
    }
    .grid2 .col-lg-10 {
        grid-column:span 10;
    }
    .grid2 .col-lg-11 {
        grid-column:span 11;
    }
    .grid2 .col-lg-12 {
        grid-column:span 12;
    }
    .grid2 div.Kastentext {
        font-size: calc(1em * 26 / 21);
    }

    .Grosses-Bild {
        grid-row: 1;
        grid-column: 1/-1;
    }

    .Grosses-Bild img {
        width: 100%;
        height: auto;
    }

    .Bildtext {
        grid-row: 1;
        grid-column: 3/-3;
        align-content: end;
    }
}
/*------------------------------*/
/*------------------------------*/

/*---- [3]   max 62 rem --------*/
/*------------------------------*/
@media screen and (max-width:calc(62rem - 1px)) {
	/* Tablet */
    html:not(.fluid) {
        font-size:calc(1.5em * 16 / 21);
    }

    .grid {
        grid-template-areas:
        "Logo Logo Logo Logo Nav1 Nav1 Nav1 Nav1 Nav1 Nav1 Nav1 Nav1"
        "Logo2 Logo2 Logo2 Logo2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2"
        "Main Main Main Main Main Main Main Main Main Main Main Main"
    }

    .grid img.querformat {
        max-height: none;
        max-width: 100%;
    }


    .grid img.Foerderschwerpunkte {
        width: auto;
        height: 20em;
    }

    .grid .Nav1 {
        grid-area:Nav1;
        align-self: flex-end;
    }
    .grid .Nav2 {
        grid-area:Nav2;
    }
    .grid .Main {
        grid-area:Main;
        border-top: 2px solid var(--GrundfarbeSchmuck2);
    }

    #Fuss {
        grid-row: 4;
        grid-column: 1/-1;
    }

    .grid2 .col-md-1 {
        grid-column:span 1;
    }
    .grid2 .col-md-2 {
        grid-column:span 2;
    }
    .grid2 .col-md-3 {
        grid-column:span 3;
    }
    .grid2 .col-md-4 {
        grid-column:span 4;
    }
    .grid2 .col-md-5 {
        grid-column:span 5;
    }
    .grid2 .col-md-6 {
        grid-column:span 6;
    }
    .grid2 .col-md-7 {
        grid-column:span 7;
    }
    .grid2 .col-md-8 {
        grid-column:span 8;
    }
    .grid2 .col-md-9 {
        grid-column:span 9;
    }
    .grid2 .col-md-10 {
        grid-column:span 10;
    }
    .grid2 .col-md-11 {
        grid-column:span 11;
    }
    .grid2 .col-md-12 {
        grid-column:span 12;
    }
    .grid2 div.Kastentext {
        font-size: calc(1em * 26 / 21);
    }

    .Grosses-Bild {
        grid-row: 1;
        grid-column: 1/-1;
    }

    .Grosses-Bild img {
        width: 100%;
        height: auto;
    }

    .Bildtext {
        grid-row: 1;
        grid-column: 1/-1;
        align-content: end;
    }

}
/*------------------------------*/
/*------------------------------*/

/*---- [4]   max 50 rem --------*/
/*------------------------------*/
@media screen and (max-width:calc(50rem - 1px)) {
	/* Smartphone */
    html:not(.fluid) {
        font-size:calc(1.5em * 14 / 21);
    }
/*
    body {
        min-width: 160px;
    }
*/
    .grid {

        grid-template-rows: 8.5em 6em 0em auto 5em;
        grid-template-areas:
        "Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo"
        "Nav1 Nav1 Nav1 Nav1 Nav1 Nav1 Nav1 Nav1 Nav1 Nav1 Nav1 Nav1"
        "Nav2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2 Nav2"
        "Main Main Main Main Main Main Main Main Main Main Main Main"
    }

    .grid img.querformat {
        max-height: none;
        max-width: 100%;
    }

    .grid img.Foerderschwerpunkte {
        width: auto;
        height: 20em;
    }

    .grid .Nav1 {
        grid-area:Nav1;
        align-self: flex-end;
    }
    .grid .Nav2 {
        grid-area:Nav2;
    }
    .grid .Main {
        grid-area:Main;
        border-top: 2px solid var(--GrundfarbeSchmuck2);
    }

    #Fuss {
        grid-row: 5;
        grid-column: 1/-1;
    }

    .grid2 .col-sm-1 {
        grid-column:span 1;
    }
    .grid2 .col-sm-2 {
        grid-column:span 2;
    }
    .grid2 .col-sm-3 {
        grid-column:span 3;
    }
    .grid2 .col-sm-4 {
        grid-column:span 4;
    }
    .grid2 .col-sm-5 {
        grid-column:span 5;
    }
    .grid2 .col-sm-6 {
        grid-column:span 6;
    }
    .grid2 .col-sm-7 {
        grid-column:span 7;
    }
    .grid2 .col-sm-8 {
        grid-column:span 8;
    }
    .grid2 .col-sm-9 {
        grid-column:span 9;
    }
    .grid2 .col-sm-10 {
        grid-column:span 10;
    }
    .grid2 .col-sm-11 {
        grid-column:span 11;
    }
    .grid2 .col-sm-12 {
        grid-column:span 12;
    }
    .grid2 div.Kastentext {
        font-size: calc(1em * 26 / 21);
    }

    .Grosses-Bild {
        grid-row: 1;
        grid-column: 1/-1;
    }

    .Grosses-Bild img {
        width: 100%;
        height: auto;
    }

    .Bildtext {
        grid-row: 2;
        grid-column: 1/-1;
        align-content: end;
    }

}
/*------------------------------*/
/*------------------------------*/

/*------------------------------*/
/*------------------------------*/
/*------------------------------*/


/*--------------------------------------------*/
/* ---- Formatierung (nicht essenziell): ---- */
/*--------------------------------------------*/
.container-main {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 20px;
}
.container-inner {
    display: grid;
    grid-gap: 10px;
}

.container-nav {
    display: grid;
    grid-gap: 5px;
}
/*--------------------------------------------
/*--------------------------------------------
/*--------------------------------------------*/