﻿@charset "UTF-8"; /*==INFO==
V=2.2 an sich OK, nur 118px müsste wg. Pg0 zunächst bleiben => Pg0 anpassen an V2.1 (vorsichtig)

.XX class="XX"
#XX id="XX"
XX  <XX>    <- Tag

Zusammesetzung (d=Def
d1, d2  {}  "Komma" = d1 ODER d2 (unabhängig)
d1 d2   {}  "blank" = d1 UND d2 (beide müssen wirken)
.d1 > li > a {} .d1 --- wenn Child=<li>-Em --- wenn Child=<a>-Em

font-size: 10px    ohne Pkt 
font-size: 10.9px  mit Pkt => NPkt-Wert muss sein = Breite?
1em  = relativ zu der Parent-Container-Parent Größe (CntP)
1rem = relativ zu der Root-Parent Größe (das <HTML>)

2. Strategien:
    CSS, die einzelne Eigenschaftsgruppen beschreiben (zB soBtn_inTab, soBtn-Big)
    CSS, die einzelne Anwendung beschreiben (dann werden sie zu den einzelnen Eigenschaftsgruppen dazu geschrieben => mit Unterstrich: zB _soKontakt)

Reihenfolge der Ausführung: wie hier: die nachfolgenden ÜBERSCHREIBEN die vorherigen

- Menu
    - Lv
    0 = Root: bei <nav> 
    1 = Start-Lv (zZt horizontal /wenn volle Breite/)
    2 = 1. dropdown-Menu
    3 = 2. dropdown-Menu
    - 
    Sns     -> bezieht sich auf <a> o.Ä.
    Mnu     -> bezieht sich auf <ul>
    MnuEm   -> bezieht sich auf <li>
*/
/*--Andere-Chk?	@-moz-document(){}*/
/*== Variablen (root = Media-unabhängig, höchste Pio) */

@layer priority {
    /* ToDo alle Styles in diese Ebene */
    /* --- Fonts --- */
    /*p, h1, h2, h3, h4, ul, ol, li, div, td, th, address, blockquote, nobr, b, i, input {
        font-family: 'Quicksand', 'Century Gothic', 'Verdana', sans-serif;
    }*/
    /*==ANF*/
    /*-- ENT mf_FntDef: 'www.s....de/x/res'*/
    /*@font-face {
        font-family: 'Roboto';
        src: url('../ResQu/Srv/Roboto-latin_latin-ext-regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }*/

    @font-face {
        font-family: 'Roboto'; /*, mfRoboto, Arial, sans-serif;*/
        /*src: url("/-_-/common/fonts/Roboto-latin_latin-ext-regular.eot");
        src: local("Roboto Regular"), local("Roboto-Regular");
        src: url("/-_-/common/fonts/Roboto-latin_latin-ext-regular.eot?#iefix") format("embedded-opentype");
        src: url("/-_-/common/fonts/Roboto-latin_latin-ext-regular.woff2") format("woff2");*/
        /*src: url("/-_-/common/fonts/Roboto-latin_latin-ext-regular.woff") format("woff");*/
        src: url('../ResQu/Srv/Roboto-Goo.woff2') format('woff2');
        src: url('../ResQu/Srv/Roboto-latin_latin-ext-regular.woff') format('woff');
        /*src: url("/-_-/common/fonts/Roboto-latin_latin-ext-regular.ttf") format("truetype");
        src: url("/-_-/common/fonts/Roboto-latin_latin-ext-regular.svg#Roboto") format("svg");*/
        font-style: normal;
        font-weight: 400, normal;
        /*font-display: swap;*/

    }

    @font-face {
        font-family: 'Roboto'; /*, mfRoboto, Arial, sans-serif;*/
        /*src: url("/-_-/common/fonts/Roboto-latin_latin-ext-600.eot");
        src: local("Roboto SemiBold"), local("Roboto-SemiBold");
        src: url("/-_-/common/fonts/Roboto-latin_latin-ext-600.eot?#iefix") format("embedded-opentype");
        src: url("/-_-/common/fonts/Roboto-latin_latin-ext-600.woff2") format("woff2");
        src: url("/-_-/common/fonts/Roboto-latin_latin-ext-600.woff") format("woff");*/
        src: url('../ResQu/Srv/Roboto-Goo.woff2') format('woff2');
        src: url('../ResQu/Srv/Roboto-latin_latin-ext-600.woff') format('woff');
        /*src: url("/-_-/common/fonts/Roboto-latin_latin-ext-600.ttf") format("truetype");
        src: url("/-_-/common/fonts/Roboto-latin_latin-ext-600.svg#Roboto") format("svg");*/
        font-style: normal;
        font-weight: 600;
        font-display: swap;
    }

    @font-face {
        font-family: 'Roboto'; /*, mfRoboto, Arial, sans-serif;*/
        /*src: url("/-_-/common/fonts/Roboto-latin_latin-ext-700.eot");
        src: local("Roboto Bold"), local("Roboto-Bold");
        src: url("/-_-/common/fonts/Roboto-latin_latin-ext-700.eot?#iefix") format("embedded-opentype");
        src: url("/-_-/common/fonts/Roboto-latin_latin-ext-700.woff2") format("woff2");*/
        src: url('../ResQu/Srv/Roboto-Goo.woff2') format('woff2');
        src: url( "../ResQu/Srv/Roboto-latin_latin-ext-700.woff") format("woff");
        /*src: url("/-_-/common/fonts/Roboto-latin_latin-ext-700.svg#Roboto") format("svg");*/
        font-style: normal;
        font-weight: 700;
        font-display: swap;
    }


    body {
        /*font-family: 'Roboto', sans-serif;*/
        font-family: var(--mf_FntFam), sans-serif;
    }
    /*==END*/
    @font-face {
        font-family: 'Quicksand';
        font-style: normal;
        font-weight: 300;
        src: url('/X/Res/quicksand-v7-latin-ext_latin-300.eot');
        /* IE9 Compat Modes */
        src: local('Quicksand Light'), local('Quicksand-Light'), url('/X/Res/quicksand-v7-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/X/Res/quicksand-v7-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers, bei VS2013 unbekannt? */ url('/X/Res/quicksand-v7-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */ url('/X/Res/quicksand-v7-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('/X/Res/quicksand-v7-latin-ext_latin-300.svg#Quicksand') format('svg');
        /* Legacy iOS */
        /*font-display: swap; sonst Err: not valid in Validation CSS 3.0*/
    }
    /* quicksand-regular - latin-ext_latin */
    @font-face {
        font-family: 'Quicksand';
        font-style: normal;
        font-weight: 400;
        src: url('/X/Res/quicksand-v7-latin-ext_latin-regular.eot');
        /* IE9 Compat Modes */
        src: local('Quicksand Regular'), local('Quicksand-Regular'), url('/X/Res/quicksand-v7-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/X/Res/quicksand-v7-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/X/Res/quicksand-v7-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */ url('/X/Res/quicksand-v7-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/X/Res/quicksand-v7-latin-ext_latin-regular.svg#Quicksand') format('svg');
        /* Legacy iOS */
    }
    /* quicksand-500 - latin-ext_latin */
    @font-face {
        font-family: 'Quicksand';
        font-style: normal;
        font-weight: 500;
        src: url('/X/Res/quicksand-v7-latin-ext_latin-500.eot');
        /* IE9 Compat Modes */
        src: local('Quicksand Medium'), local('Quicksand-Medium'), url('/X/Res/quicksand-v7-latin-ext_latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/X/Res/quicksand-v7-latin-ext_latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('/X/Res/quicksand-v7-latin-ext_latin-500.woff') format('woff'), /* Modern Browsers */ url('/X/Res/quicksand-v7-latin-ext_latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('/X/Res/quicksand-v7-latin-ext_latin-500.svg#Quicksand') format('svg');
        /* Legacy iOS */
    }
    /* quicksand-700 - latin-ext_latin */
    @font-face {
        font-family: 'Quicksand';
        font-style: normal;
        font-weight: 700;
        src: url('/X/Res/quicksand-v7-latin-ext_latin-700.eot');
        /* IE9 Compat Modes */
        src: local('Quicksand Bold'), local('Quicksand-Bold'), url('/X/Res/quicksand-v7-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/X/Res/quicksand-v7-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/X/Res/quicksand-v7-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */ url('/X/Res/quicksand-v7-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/X/Res/quicksand-v7-latin-ext_latin-700.svg#Quicksand') format('svg');
        /* Legacy iOS */
    }
}


/* --- mf = Märkische Fotografen --- */
.mfHID {
    height: 0 !important;
    width: 0 !important;
    visibility: hidden !important;
    display: none;
}
html {
    --mfBc0_Pic: url(Media/Bc0_Pic.jpg?mfVer=4.0); /*OK ->  Adr->rel. zu der Caller-Pg;  style="background-image: var(--mfBc0_Pic)"*/
    /*zZt UnUsed -> direkt in hDoc => fixe Na*/
    /*--mfBc1_Pic: url(Media/Bc1_Pic.jpg) + "?o=crop:1080:1080:nowe:270:0/width:1080/height:1080/";
    --mfBc2_Pic: url(Media/Bc2_Pic.jpg);
    --mfBc3_Pic: url(Media/Bc3_Pic.jpg);
    --mfBc4_Pic: url(Media/Bc4_Pic.jpg);
    --mfBc5_Pic: url(Media/Bc5_Pic.jpg);
    --mfBc6_Pic: url(Media/Bc6_Pic.jpg);
    --mfBc7_Pic: url(Media/Bc7_Pic.jpg);*/
    
    --mf_FntFam: 'Roboto';
    --mfFrbHgMotiv: rgba(33,150,243,1); /* < blau: #2196f3,   grün: rgb(34, 166, 164)= #22a6a4; = #157372;*/
    --mfFrbHgDark: rgb(0,0,0);

    --header-height: 118px; /*-> 102px*/
    --navigation-color: rgb(228, 240, 237); /*weiß*/
    --website-theme-color: var(--mfFrbHgMotiv);
    --font-family: var(--mf_FntFam); /*Gbl*/
}

/*body*/
#mfPg :is(page-root, heading-root, .mfFmt) {
    /*--font-family: var(--mf_FntFam); /*Gbl*/*/
    --heading-color-h1: var(--mfFrbHgMotiv); 
    --font-family-h1: var(--mf_FntFam); /*Roboto;*/
    --font-size-h1: 45px;
    --font-weight-h1: normal;
    --word-wrap-h1: break-word;
    --overflow-wrap-h1: break-word;
    --font-style-h1: normal;
    --text-decoration-h1: none;
    --letter-spacing-h1: normal;
    --line-height-h1: normal;
    --text-transform-h1: none;
    --tablet-font-downscale-h1: 0.875;
    --mobile-font-downscale-h1: 0.875;
    --heading-color-h2: var(--mfFrbHgMotiv);
    --font-family-h2: var(--mf_FntFam);
    --font-size-h2: 37px;
    --font-weight-h2: normal;
    --word-wrap-h2: break-word;
    --overflow-wrap-h2: break-word;
    --font-style-h2: normal;
    --text-decoration-h2: none;
    --letter-spacing-h2: normal;
    --line-height-h2: normal;
    --text-transform-h2: none;
    --tablet-font-downscale-h2: 0.875;
    --mobile-font-downscale-h2: 0.875;
    --heading-color-h3: var(--mfFrbHgMotiv);
    --font-family-h3: var(--mf_FntFam);
    --font-size-h3: 31px;
    --font-weight-h3: normal;
    --word-wrap-h3: break-word;
    --overflow-wrap-h3: break-word;
    --font-style-h3: normal;
    --text-decoration-h3: none;
    --letter-spacing-h3: normal;
    --line-height-h3: normal;
    --text-transform-h3: none;
    --tablet-font-downscale-h3: 0.875;
    --mobile-font-downscale-h3: 0.875;
    --heading-color-h4: var(--mfFrbHgMotiv);
    --font-family-h4: var(--mf_FntFam);
    --font-size-h4: 26px;
    --font-weight-h4: normal;
    --word-wrap-h4: break-word;
    --overflow-wrap-h4: break-word;
    --font-style-h4: normal;
    --text-decoration-h4: none;
    --letter-spacing-h4: normal;
    --line-height-h4: normal;
    --text-transform-h4: none;
    --tablet-font-downscale-h4: 0.875;
    --mobile-font-downscale-h4: 0.875;
    --heading-color-h5: #090a0a;
    --font-family-h5: var(--mf_FntFam);
    --font-size-h5: 22px;
    --font-weight-h5: normal;
    --word-wrap-h5: break-word;
    --overflow-wrap-h5: break-word;
    --font-style-h5: normal;
    --text-decoration-h5: none;
    --letter-spacing-h5: normal;
    --line-height-h5: normal;
    --text-transform-h5: none;
    --tablet-font-downscale-h5: 0.875;
    --mobile-font-downscale-h5: 0.875;
    --heading-color-h6: #090a0a;
    --font-family-h6: var(--mf_FntFam);
    --font-size-h6: 18px;
    --font-weight-h6: normal;
    --word-wrap-h6: break-word;
    --overflow-wrap-h6: break-word;
    --font-style-h6: normal;
    --text-decoration-h6: none;
    --letter-spacing-h6: normal;
    --line-height-h6: normal;
    --text-transform-h6: none;
    --tablet-font-downscale-h6: 0.875;
    --mobile-font-downscale-h6: 0.875;
    --text-container-color: #090a0a;
    --text-container-anchor-color: var(--mfFrbHgMotiv);
    /*--font-family: Roboto;*/
    --font-size: 18px;
    --font-weight: normal;
    --word-wrap: normal; /*break-word;*/
    --overflow-wrap: break-word;
    --font-style: normal;
    --text-decoration: none;
    --letter-spacing: normal;
    --line-height: normal;
    --text-transform: none;
    --tablet-font-downscale: 1; /*0.875;*/
    --mobile-font-downscale: 1; /*0.875;*/
    --tablet-custom-font-size:1;
    --mobile-custom-font-size: 1;
    --section-geometry: section-geometry-perspective1;
    /*--header-height: 118px; -> 102*/

    /*Extrakt aus Pg0*/
    --theme-fonts-pair-body-family: var(--mf_FntFam); /*Roboto;*/
}

#mfPg {
    p {
        hyphens: none;
    }

    h2 {
        font-family: var(--mf_FntFam) !important;
    }

    #mfBc2 h3{
        color: var(--theme-colors-palette-light);
    }

    #mfBc_Info, #footer {
        --text-container-color: #e4f0ed;
        --text-container-anchor-color: #e4f0ed;
    }
	


        /*#mfBc_Info, #mfBc_Termin,*/
        h2.mfBcHeadLv0 {
            color: #e4f0ed; /*<- weiße schrift;    // variiert => ungeeignet var(--text-container-color);*/
        }

    .mfBcHeadLv1 {
        font-weight: 400;
        color: var(--text-container-color);
    }
}




.section-geometry[data-shape]:not([data-shape=rectangle]) + .section-geometry {
    opacity: 1 !important;
}

.section-geometry[data-shape]:not([data-shape=rectangle]) {
.section-geometry-perspective1 {
    padding-bottom: 200px;
}
.section {
    position: relative;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .section-root {
        padding-top: 0;
        margin-top: -1px;
    }
}
.section-root {
*, *:before, *:after {
    box-sizing: inherit;
}
                     }

                     .page-root {
    position: relative;
    z-index: 1;
    background-color: var(--page-background-color);
    color: var(--mfFrbHgMotiv);
    display: flex;
    flex-direction: column;
}

                     html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    -moz-osx-font-smoothing: grayscale;
}
*, *:before, *:after {
    box-sizing: inherit;
}

        #webview-container {
            overflow-x: hidden;
            height: 100%;
            user-select: none;
            visibility: hidden;
        }
strong, b {
    font-weight: bolder;
}


#mfHead {
    background-color: var(--mfFrbHgMotiv); 
    color: var(--navigation-color); background-image: unset; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; background-attachment: fixed; opacity: 1;
}
header, #mfHead, #mfHeadLv1 {
    max-height: var(--header-height);
}
#mfHeadLogoTx, .logo-text-level-5  {
        color: var(--navigation-color);
        font-family: var(--font-family-h5);
        font-size: var(--font-size-h5);
        font-weight: var(--font-weight-h5);
        font-style: var(--font-style-h5);
        word-wrap: var(--word-wrap-h5);
        overflow-wrap: var(--overflow-wrap-h5);
        text-decoration: var(--text-decoration-h5);
        letter-spacing: var(--letter-spacing-h5);
        line-height: var(--line-height-h5);
        text-transform: var(--text-transform-h5);
    }

/*head*/
.grid-column-root {
    flex-grow: 0;
    position: relative;
    box-sizing: border-box;
    padding-top: var(--grid-column-vertical-spacing);
    padding-right: var(--grid-column-spacing-unit);
    padding-bottom: var(--grid-column-vertical-spacing);
    padding-left: var(--grid-column-spacing-unit);
}

.section-sticky, header.section.section-root {
  position: sticky !important;
  top: 0;
  z-index: 1000;
}
.section {
    position: relative;
}

.text-root {
    color: var(--text-container-color);
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    word-wrap: var(--word-wrap);
    overflow-wrap: var(--overflow-wrap);
    text-decoration: var(--text-decoration);
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
    text-transform: var(--text-transform);
}

.heading-root h1, .heading-root .logo-text-level-1 {
    color: var(--heading-color-h1);
    font-family: var(--font-family-h1);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-h1);
    font-style: var(--font-style-h1);
    word-wrap: var(--word-wrap-h1);
    overflow-wrap: var(--overflow-wrap-h1);
    text-decoration: var(--text-decoration-h1);
    letter-spacing: var(--letter-spacing-h1);
    line-height: var(--line-height-h1);
    text-transform: var(--text-transform-h1);
}