@charset "utf-8";
/* CSS Document */

@import url("https://use.typekit.net/vad4sbj.css");


/* RESETTINGS */

/* Eric Meyers Reset | http://meyerweb.com/eric/tools/css/reset/  | v2.0 | 20110126 | License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
    /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* myResets */
header, footer, body, section, div, article, h1, h2, h3, h4, h5, p {margin: 0px; padding: 0px; border: none;}
* {box-sizing: border-box;}



/* Farbdefinitionen

    color: Standard-Blau-PBMT: rgb (13,0,130)
    color: Standard-Background "Smokewhiteblue": rgb (253,251,255)
    color: Standard-Background grey: 'darkgrey' [rgb (169,169,169)]
    color: Standard-Background mygrey: 'darkgrey' [rgb (165,165,165)]
    color: Standard-Schriftfarbe grey: 'dimgray' [rgb (105,105,105)]
    color: Standard-Background Seiteninhalt "blanchedalmond": rgb (255,235,205)
    color: Standard-Background Seiteninhalt: rgb (255,248,237)


Fußzeile funktioniert bis zu einer Minimalbreite von 270px
Kopfzeile funktioniert bis zu einer Minimalbreite von 300px

*/



/* Blockformate, übergreifend, Site-Struktur entsprechend */

html {
    font-size: 10px;
	box-sizing: border-box;}
body {
    margin: 0px ;
    padding: 0px;
    width: 100%;
    line-height: 1.25em;
    font-size: 1.6em;
    font-family: karmina-sans, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-variant-ligatures: normal;
    font-variant-ligatures: discretionary-ligatures;
    background-color: rgb(165,165,165);
    background-size: 100% 100%;
    background-repeat: no-repeat;}
header {
    position: fixed;
    text-align: center;
    top: 0px;
    left: 0px;
    width: 92%;
    margin-left: 4%;
    margin-right: 4%;
    padding: 0px;
    height: 110px;
    z-index: 100;
    background-color: none;
    border-bottom-color: black;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    transition: 0.3s;}
#header-background {
    background-color: rgb(253,251,255);
    position: fixed;
    top: 0px;
    width: 100%;
    height: 150px;
    z-index: 90;
    transition: 0.3s;}
#main {
    margin: 150px 0px 0px 0px;
    padding: 35px 8% 75px 8%;
    background-color: rgb(255,248,237);
    transition: 0.3s;}
footer {
    background-color: rgb(165,165,165);
    width: 100%;
    margin: 0px;
    padding: 75px 0px 0px 0px;}



/* Standard-Link-Format */

:link, :visited, :focus, :hover, :active {
    text-decoration: none;}
a {
    color: currentColor;
    cursor: pointer;}
a:link {
    color: currentColor;}
a:visited {
    color: currentColor;}
a:focus {
    color: rgb(13,0,130);}
a:hover {
    color: rgb(13,0,130);}
a:active {
    color: rgb(13,0,130);
    font-style: italic;}



/* Standard-Absatzformate */

h1 {
    font-family: karmina-sans, sans-serif;
    font-variant-ligatures: normal;
    font-style: normal;
    font-weight: 500;
    font-size: 1.3em;
    letter-spacing: .01em;
    line-height: 1.15em;
    color: rgb(13,0,130);
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0.7em;}
h2 {
    font-family: museo-sans-rounded, sans-serif;
    font-variant-ligatures: normal;
    font-style: normal;
    font-weight: 500;
    font-size: 2.0em;
    letter-spacing: .01em;
    line-height: 1.15em;
    color: rgb(13,0,130);
    text-align: center;
    margin-top: 50px;
    margin-bottom: 35px;}
h3 {
    font-family: museo-sans-rounded, sans-serif;
    font-variant-ligatures: normal;
    font-style: normal;
    font-weight: 500;
    font-size: 1.6em;
    letter-spacing: .01em;
    line-height: 1.15em;
    color: rgb(13,0,130);
    margin-top: 0px;
    margin-bottom: 0.7em;}
h3.Zwischentitel {
    font-size: 1.0em;
    padding: 0px 0px 3px 45px;
    margin: 20px 10px 7px 0px;
    border-bottom: 1px solid rgb(13,0,130);}
h3.Zwischentitel:first-child {
    margin-top: 10px;}

h4 {
    font-family: museo-sans-rounded, sans-serif;
    font-variant-ligatures: normal;
    font-style: normal;
    font-weight: 500;
    font-size: 1.1em;
    letter-spacing: .01em;
    line-height: 1.15em;
    color: rgb(13,0,130);
    margin-top: 0px;
    margin-bottom: 0.7em;}
.accordion h4 {
    font-family: karmina-sans;
    font-variant-ligatures: normal;
    font-variant-ligatures: discretionary-ligatures;
    letter-spacing: 0em;
    font-size: 1.3em;
    font-weight: 300;
    margin: 0px;
    padding: 0px;
    padding-left: 1.5em;
    text-indent: -1.5em;
    color: black;
    transition: 0.3s;}
.accordion h4::before {
    content: "+\2000";}


h5 {
    font-family: museo-sans-rounded, sans-serif;
    font-variant-ligatures: normal;
    font-style: normal;
    font-weight: 500;
    font-size: 1.1em;
    letter-spacing: .01em;
    line-height: 1.15em;
    color: rgb(13,0,130);
    margin-top: 0px;
    margin-bottom: 0.7em;}
h6 {
    font-family: museo-sans-rounded, sans-serif;
    font-variant-ligatures: normal;
    font-style: normal;
    font-weight: 500;
    font-size: 1.1em;
    letter-spacing: .01em;
    line-height: 1.15em;
    color: rgb(13,0,130);
    margin-top: 0px;
    margin-bottom: 0.7em;}
h1#Rubrum {    
    font-family: karmina-sans, sans-serif;
    font-variant-ligatures: normal;
    font-style: normal;
    font-weight: 600;
    font-size: 1.3em;
    text-align: right;
    line-height: 1.2em;
    letter-spacing: .01em;
	color: rgb(13,0,130);}
h2.Langtext {
    font-family: karmina-sans, sans-serif;
    font-variant-ligatures: normal;
    font-variant-ligatures: discretionary-ligatures;
    font-style: normal;
    font-weight: 400;
    font-size: 1.4em;
    letter-spacing: .008em;
    line-height: 1.13em;
    color: rgb(13,0,130);
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0.55em;
    margin-right: 5%;
    text-indent: -5em;}
p {
    margin-top: 0px;
    margin-bottom: 0.3em;}
p.emphasis {
    margin-bottom: 0.5em;
    margin-right: 15%;
    text-align: center;
    color: rgb(13,0,130);
    font-weight: 400;
    letter-spacing: 0.03em;}

#Marginalie h3 {
	font-family: karmina-sans, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.1em;
	font-variant-caps: small-caps;
    letter-spacing: 0.01em;
    line-height: 1.15em;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0.3em;}
#Marginalie section {
    margin-bottom: 1em;}
footer h3 {
    font-family: Basel Neue;
    font-style: normal;
    font-weight: 400;
    font-size: 1em;
    letter-spacing: .01em;
    color: rgb(13,0,130);
    margin-top: 0px;
    margin-bottom: 0.5em;
    white-space: pre-wrap;}
#Marginalie li {
	margin-bottom: 3px;;
	text-indent: -0.4em;
    white-space: pre-wrap;}
#Marginalie li::before {
	content: "•  ";}

    /* -- Flip-Box Absatzformate -- */

.flip-box h2 {
    width: 290px;
    margin: 55px auto 17px auto;
    text-align: center;
    text-indent: 0px;
    font-family: museo-sans-rounded;
    font-weight: 500;
    font-size: 26px;
    letter-spacing: 0.02em;
    padding: 12px 0px 9px 0px;
    border-top: 1px solid antiquewhite;
    border-bottom: 1px solid antiquewhite;}
#flip-box-big h2 {
    font-weight: 300;
    font-size: 37px;
    letter-spacing: 0.02em;
    color: white;
    border-top: 2px solid antiquewhite;
    border-bottom: 2px solid antiquewhite;}
.flip-box-front section {            /* Da sind exakt sieben Zeilen Text Platz, notfalls acht!!!! */
    width: 325px;
    margin: 0px auto;
    font-family: source-sans-pro;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    letter-spacing: 0.02em;}
.flip-box-back section {            /* Da sind exakt elf Zeilen Text Platz, notfalls zwölf!!!! */
    width: 325px;
    margin: 67px auto 0px auto;}
.flip-weiterlesen {
    position: relative;
    top: 325px;
    width: 250px;
    margin: 0px auto;
    z-index: 1;
    padding: 12px 0px 9px 0px;
    text-align: center;
    border-top: 1px solid antiquewhite;
    border-bottom: 1px solid antiquewhite;
    font-family: source-sans-pro;
    color: white;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    letter-spacing: 0.05em;}
.flip-weiterlesen+.flip-weiterlesen {
    border-top: none;
    border-bottom-width: 2px;}

    /* -- Hover-Box Absatzformate -- */

.button-standard h3 {
    position: absolute;
    top: 75px;
    left: 25px;
    width: 300px;
    margin: 0px;
    box-sizing: border-box;
    text-align: center;
    text-indent: 0px;
    font-family: museo-sans-rounded;
    font-weight: 300;
    font-size: 26px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: white;
    padding: 5px 5px 1px 5px;
    border-top: 1px solid antiquewhite;
    border-bottom: 1px solid antiquewhite;}
article.button-text {
    padding: 20px 20px 20px 30px;
    color: rgba(87,87,87,1.00);
    font-size: 16px;
    text-align: left;
    font-family: karmina-sans, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-variant-ligatures: normal;
    font-variant-ligatures: discretionary-ligatures;}
.button-onhover h3 {
    position: absolute;
    top: 280px;
    left: 75px;
    width: 250px;
    margin: 0px;
    text-align: right;
    text-indent: 0px;
    font-family: museo-sans-rounded;
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 0.02em;
    color: rgba(87,87,87,1.00);
    padding: 5px 2px 0px 0px;
    border-top: 1px solid rgba(87,87,87,1.00);}

    /* -- Set-Card Absatzformate -- */

.set-card-category h3 {
    color: dimgray;
    text-align: center;
    font-family: source-sans-pro;
    font-size: 26px;
    text-transform: uppercase;
    margin: 0px auto;
    padding: 0px;}
.set-card-category h4 {
    color: dimgray;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    margin: 3px 0px 0px 0px;
    padding: 0px;}
.set-card h5 {
    font-family: karmina-sans, sans-serif;
    font-variant: small-caps;
    font-variant-ligatures: normal;
    font-style: normal;
    font-weight: 300;
    font-size: 1.25em;
    letter-spacing: 0.01em;
    line-height: 1em;
    color: rgb(13,0,130);
    margin-top: 0px;
    margin-bottom: 0.45em;}
.set-card p {
    line-height: 1.25em;}
p.Angebot {
    line-height: 1.15em;
    font-weight: 600;}
.set-card-description p {
    margin-bottom: 0.25em;}
p.Angebotsbeschreibung {
    line-height: 1.2em;
    font-style: italic;
    margin-bottom: 0.5em;}



/* Zeichenformate */

em {
    font-style: italic;}
i {
    font-style: italic;}




/* Navigation */

nav {
    font-family: Basel-Neue;
    font-weight: 400;
    font-size: 15px;
    font-variant-ligatures: common-ligatures;    
    font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: historical-ligatures;
    font-variant-ligatures: contextual;}
nav ul {
    margin: 0px;
    list-style-type: none;
    padding: 0px;}
nav ul li {
    margin: 0px;
    padding: 0px 15px;}
.MOP {
    padding: 0px 10px;
    margin-bottom: 11px;}
.dropdown1-item {
    padding: 0px;
    margin-bottom: 10px;}
.NavBar {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 max-size;
    justify-content: center;}
#TopNavigation {
    position: relative;
    top: 86px;
    max-width: 75%;
    margin: auto;
    text-align: center;
    transition: 0.3s;}

#einblenden4 {
    display: none;}

.BottomNavigation {
    margin: 0px 10%;
    padding-bottom: 45px;
    text-align: center;}


/* Dropdown Navigation */

.dropdown {    /* The container <div> - needed to position the dropdown content */
    position: relative;
    display: inline-block;}
.dropdown-content {    /* Dropdown Content (Hidden by Default) */
    display: none;
    position: absolute;
    top: 20px;
    left: 0px;
    padding: 25px 35px;
    min-width: 150px;
    background-color: rgb(253,251,255);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;}

.dropdown:focus ul.dropdown-content, .dropdown:hover ul.dropdown-content, .dropdown:active ul.dropdown-content {
    display: block;}

.dropdown1-item {}    /* scheint eine bislang unnötige Definition zu sein - eventuell abschließend löschen, dann auch im html entfernen */


/* Alternative Navigation */

#NavTrigger {
    display: none;
    width: 35px;
    height: 38px;
    position: absolute;
    top: 28px;
    right: 0px;
    margin: 0px;
    padding:  1px 0px;
    border: 1px solid dimgray;
    border-radius: 7%;
    cursor: pointer;
    transition: 0.5s;}
#NavTrigger:focus, #NavTrigger:hover, #NavTrigger:active {
    color: rgb(13,0,130);}

.overlay {    /* The Overlay (background) */
    height: 0;
    width: 100%;
    position: fixed;    /* Stay in place */
    z-index: 100;         /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(253,251,255);         /* Black fallback color */
    background-color: rgba(253,251,255,0.97);    /* Black mit Transparenz */
    overflow-x: hidden;                         /* Disable horizontal scroll */
    transition: 0.7s;}                           /* transition effect to slide down the overlay */
.overlay-content {    /* Position the content inside the overlay */
    position: relative;
    top: 95px;        /* 95px top margin to avoid conflict with the close button on smaller screens */
    width: 100%;
    text-align: center;}
.overlay li {    /* The navigation links inside the overlay */
    padding-bottom: 13px;
    text-decoration: none;
    font-size: 24px;
    color: dimgray;
    transition: 0.3s;} /* Transition effects on hover (color) */
.overlay .closebtn {    /* Position and style the close button (top right corner) */
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 50px;}


.alternativeNav-Trigger {    /* The container <div> - needed to position the dropdown content */
    position: relative;
    display: block;}

.dropdown-content-alternate {    /* Dropdown Content (Hidden by Default) */
    display: none;
    margin: 15px 0px 0px 0px;    
    transition: all 0.9s ease-in-out;}

.dropdown2-item {
    display: block;
    padding: 0px;
    margin: 0px;
    font-weight: 300;
    line-height: 0.9em;}
.dropdown-content-alternate li {
    font-size: 18px;
    font-style: normal;}
.overlay-content>li:last-child {
    padding-bottom: 100px;}

.alternativeNav-Trigger:focus .dropdown-content-alternate, .alternativeNav-Trigger:hover .dropdown-content-alternate, .alternativeNav-Trigger:active .dropdown-content-alternate {
    display: block;}


/* Navigation - Link-Formate */

a.Navigation {
    color: dimgray;}
a.Navigation:link {
    color: dimgray;}
a.Navigation:selected {    /* Der Status funktioniert nicht???!!! */
    color: rgb(13,0,130);
    font-style: italic;}
a.Navigation:visited {
    color: dimgray;}
a.Navigation:focus {
    color: rgb(13,0,130);}
a.Navigation:hover {
    color: rgb(13,0,130);}
a.Navigation:active {
    color: rgb(13,0,130);}

a.NavigationBottom:link {
    color: antiquewhite;}
a.NavigationBottom:visited {
    color: antiquewhite;}
a.NavigationBottom:focus {
    color: red;}
a.NavigationBottom:hover {
    color: red;}
a.NavigationBottom:active {
    color: red;}

div#SeitenTitel a:active {
    font-style: normal;}

a.currentlink{            /* Ist nur ein vorläufiger Workaround */
    color: rgb(13,0,130); /* Farbe funktioniert nicht???!!! */
    font-style: italic;}



/* Kopfzeilenelemente */

#Logo {
    width: 130px;
    position: absolute;
    top: 5px;
    left: -31px;
    transition: 0.3s;}
#SeitenTitel {
    position: fixed;
    top: 42px;
    width: inherit;
    margin: 0px auto;
    text-align: center;
    font-family: Basel Neue;
    font-style: normal;
    font-weight: normal;
    font-size: 2em;
    transition: 0.5s;}
#TitelName {
    font-weight: 500;
    font-size: 1.07em;
    color: rgb(13,0,130);}
.TitelBenennung {
    font-family: Politica;
    font-weight: 400;
    color: #7F7F7F;}
.einblenden1 {
    display: none;}
#SocialMedia {
    position: absolute;
    right: 0.1%;
    transition: 0.5s;}
.SocialMediaLink {
    width: 25px;
    margin: 0px 3px 3px 0px;
    transition: 0.3s;}
.SocialMediaLink:focus, .SocialMediaLink:hover, .SocialMediaLink:active {
    transform: scale(1.3) translateY(2px);}



/* Fusszeilenelemente */

div#Fusszeile {
    display: flex;
    justify-content: center;
    position: static;
    width: 100%;
    margin: 0px 0px 35px 0px;}
div#FusszeilePortfolio {
    text-align: right;
    width: 300px;
    margin: 1px 0px;
    padding-right: 20px;
    padding-left: 20px;}
div#FusszeileImpressum {
    text-align: left;
    width: 300px;
    margin: 1px 0px;
    padding-right: 20px;
    padding-left: 20px;}
#Bildspalte-footer {
    width: 350px;
    margin: 0px;}
#GalerieFooter {
    width: 100%;
    margin: 0px;}
.DekoBild-footer {
    width: 350px;
    margin: 0px auto;
    padding: 0px;}



/* Seiteninhalte */

/* Level 1 - Inhalte - Flipping-Boxes-Design  */

.flipbox-Container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    max-width: 2000px;
    margin: 0px auto 50px auto;
    z-index: 30;}

.flip-box {                    /* Flip-box container - set the width and height to whatever you want. */
    background-color: transparent;
    width: 400px;
    min-width: 400px;
    flex: none;
    height: 450px;
    min-height: 450px;
    max-height: 450px;
    margin: 25px 35px;
    perspective: 1000px;     /* 3D effect */
    z-index: 35;}
#flip-box-big {
    order: 2;
    flex: none;
    height: 500px;
    min-height: 500px;
    max-height: 500px;}
.flip-box-inner {               /* This container is needed to position the front and back side */
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;}

.flip-box:focus .flip-box-inner, .flip-box:hover .flip-box-inner, .flip-box:active .flip-box-inner {            /* Do an horizontal flip when you move the mouse over the flip box container */
    transform: rotateX(180deg);}

.flip-box-front, .flip-box-back {            /* Position the front and back side */
    position: absolute;
    width: 100%;
    height: 100%;}
.flip-box-front {            /* Style the front side */
    background-color: rgb(2,164,228);
    color: white;}
.flip-box-back {            /* Style the back side */
    background-color: rgb(202,202,194);
    color: black;
    transform: rotateX(180deg);}

.image-divider {
    position: relative;
    height: 550px;
    width: 300px;
    flex: none;
    margin-right: -50px;
    margin-left: -50px;
    text-align: center;
    overflow-x: hidden;
    overflow-y: hidden;
    border: 0px solid black;}
.soft-border {
    position: relative;
    color: transparent;
    width: 100%;
    height: 100%;
    background: radial-gradient(transparent 25%, rgb(255,248,237)), transparent;
    z-index: 20;}
.Zen-Bild {
    position: relative;
    top: -550px;
    height: 100%;
    z-index: 15;}

#flip-box-big {
    order: 3;}
#flip-box-2 {
    order: 1;
    position: relative;
    top: -5px;}
#flip-box-3 {
    order: 5;
    position: relative;
    top: -5px;}
#flip-box-4 {
    order: 7;}
#flip-box-5 {
    order: 9;}
#image-divider-1 {
    order: 6;}
#image-divider-2 {
    order: 10;}
#image-divider-3 {
    order: 8;}
#image-divider-4 {
    order: 4;}
#image-divider-5 {
    order: 2;}
#Zen-3 {
    position: relative;
    left: -120px;}


/* Level 2 - Inhalte - State-Buttons mit den Merkmalen  */

.button-Container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0px auto 25px auto;}

.button-style {
    position: relative;
    flex: none;
    width: 350px;
    height: 350px;
    border: none;
    text-align: center;
    padding: 0px;
    margin: 0px 25px 25px 25px;
    background-color: rgb(253,251,255);}
.button-standard {
    position: absolute;
    top: 0px;
    left: 0px;}
.button-onhover {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 0;
    overflow: hidden;
    border: 1px solid transparent;
    background-color: rgb(253,251,255);
    transition: all 0.5s ease-in-out;}

.button-style:focus .button-onhover, .button-style:hover .button-onhover, .button-style:active .button-onhover {
    height:100%;
    border: 1px solid black;}

.button-picture-frame {
    width: 350px;
    height: 290px;
    position: absolute;
    overflow: hidden;
    top: 0px;
    left: 0px;}
.button-picture {
    height: 100%;
    position: relative;}

#button-picture-1 {
    top: 0px;
    left: 0px;}
#button-picture-2 {
    height: 105%;
    top: 0px;
    left: -55px;}
#button-picture-3 {
    top: 0px;
    left: 0px;}
#button-picture-4 {
    height: 105%;
    top: -10px;
    left: -25px;}
#button-picture-5 {
    top: 0px;
    left: -25px;}

.Lupe-picture {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 300px;
    left: 157px;
    margin: 0px auto;}


/* Level 2 - Die Modell-Menüs */

.set-card-Container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0px auto 25px auto;}

div.set-card {
    position: relative;
    box-sizing: border-box;
    flex: none;
    width: 180px;
    height: 375px;
    border: 0px solid black;
    text-align: center;
    padding: 0px;
    margin: 10px 25px 25px 25px;}
    div.set-card-picture-frame {
        position: absolute;
        box-sizing: border-box;
        top: -1px;
        left: -7px;
        width: 194px;
        height: 272px;
        overflow: hidden;
        border: 2px solid rgb(2,164,228);
        border-radius: 50%;
        transition-duration: 0.5s;}

        img.set-card-picture {
            position: relative;
            box-sizing: border-box;}
    section.set-card-category {
        position: absolute;
        box-sizing: border-box;
        top: 130px;
        left: 0px;
        width: 180px;
        height: 240px;
        text-align: center;
        color: dimgray;
        padding-top: 170px;
        border: 1px solid black;
        border-top: none;
        background: none;    }
    .set-card-description {
        display: none;
        position: relative;
        top: 255px;
        box-sizing: border-box;
        width: 450px;
        font-size: 14px;
        padding: 15px 25px 25px 25px;
        margin: 0px;
        background: rgb(253,251,255);
        box-shadow: 2px 2px 2px 1px dimgray;
        z-index: 100;}

#set-card-picture-1 {
    height: 300px;
    top: -0px;
    left: -0px;}
#set-card-picture-2 {
    height: 275px;
    width: 280px;
    top: 0px;
    left: -27px;}
#set-card-picture-3 {
    height: 272px;
    top: 0px;
    left: -85px;
    filter: grayscale(1) contrast(2) brightness(95%);}
#set-card-picture-4 {
    height: 285px;
    top: -10px;
    left: -112px;
    filter: grayscale(1) contrast(1.1) brightness(95%);
    transform: rotate(-0deg);}
#set-card-picture-5 {
    height: 350px;
    top: -10px;
    left: -40px;}

.set-card:focus .set-card-picture-frame, .set-card:hover .set-card-picture-frame, .set-card:active .set-card-picture-frame {
    transform: scale(104%);}
.set-card:focus .set-card-description, .set-card:hover .set-card-description, .set-card:active .set-card-description {
    display: block;}

#description-1 {
    left: -10px;}
#description-2 {
    left: -75px;}
#description-3 {
    left: -113px;}
#description-4 {
    left: -195px;}
#description-5 {
    left: -260px;}


/* Level 3 - Inhalte */

div#wrapper-main, div#wrapper-content, div#Bildspalte, div#Textspalte, aside#Marginalie {
    margin: 0px;
    padding: 0px;
    border: 0px solid black;}        /* dient nur der visuellen Layout-Kontrolle, sollte abschließend gelöscht werden */
div#wrapper-main {
	display: flex;
    justify-content: center;
	margin: 0px auto 50px auto;}
	div#wrapper-content {
		display: flex;
		flex: 0 1 1150px;}
		div#Bildspalte {
			margin-top: 67px;
			text-align: right;
			flex-basis: 400px;
			min-width: 250px;
			max-width: 400px;}
		div#Textspalte {
			padding-left: 20px;
			padding-right: 0px;
			flex-basis: 750px;
			min-width: 450px;
			max-width: 750px;
			height: auto;}
	aside#Marginalie {
		margin-top: 61px;
		padding-top: 00px;	/* dient der vertikalen Textanordnung */
		padding-left: 25px;
		flex: 0 1 400px;
		min-width: 200px;
		max-width: 400px;}

div.Scrollbox {
    max-height: 1200px;   /* maximale Höhe vor Scrollen definieren */
    overflow-y: scroll;
	width: 100%;}
div.Scrollbox::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;}
div.Scrollbox::-webkit-scrollbar-thumb {
    box-shadow: inset 0px 4px 4px white;
    border-radius: 10px;
    background-color: lightgray;}

.Scrollbox article {
    margin-right: 7px;}
.DekoBild {
    width: 100%;
    margin: 0px;}
div#Galerie {
    width: 100%;
    margin-bottom: 7px;}
div#stickyBlock {
    position: sticky;
    top: 133px;
	width: 100%;}
div#stickyBlockAside {
    position: sticky;
    top: 134px;
	width: 100%;}


    /* Die Accordion-Auswahl und Panels innerhalb der Textspalte */
    .accordion {  /* Style the buttons that are used to open and close the accordion panel */
        background-color: transparent;
        cursor: pointer;
        padding: 10px 15px 5px 5px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.5s;}
    .accordion:first-child {
        padding-top: 5px;}

    .panel {    /* Style the accordion panel. Note: hidden by default */
        padding: 15px 7px 10px 20px;
        background-color: none;
        display: none;
        overflow: hidden;}

    .activeAccord, .accordion:focus, .accordion:hover {    /* Add a style to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
      background-color: none;}
    .activeAccord {
        width: 85%;
        border-bottom: 1px solid rgb(13,0,130);}
    .activeAccord h4::before {
        content: none;}
    .activeAccord h4, .accordion:focus h4, .accordion:hover h4 {
        font-weight: 600;
        color: rgb(13,0,130);}



/* Level 3 - Kalender-Darstellung */

#google-calendar-frame {
    margin: 50px auto;
    height: 750px;}






/* BREAKPOINTS AND RESPONSIVE-DESIGN */


@media (max-width: 2170px) {

    /* Seiteninhalte */
.flipbox-Container {    
    max-width: 1250px;}
#flip-box-big {
    order: 2;}
#flip-box-2 {
    order: 4;
    position: relative;
    top: 0px;}
#flip-box-3 {
    order: 6;
    position: relative;
    top: 0px;}
#flip-box-4 {
    order: 8;}
#flip-box-5 {
    order: 9;}
#image-divider-1 {
    order: 7;
    margin-right: -150px;
    margin-top: -30px;}
#image-divider-2 {
    order: 10;
    margin-left: -150px;
    margin-top: -28px;}
#image-divider-3 {
    order: 5;
    width: 380px;
    height: 750px;
    top: 95px;
    left: 10px;
    margin: -150px -50px;}
#image-divider-4 {
    order: 3;}
#image-divider-5 {
    order: 1;}
#Zen-3 {    
    position: relative;
    left: -190px;
    top: -750px;}    
}



@media (max-width: 1425px) {

    /* Seiteninhalte */
.flipbox-Container {    
    max-width: 900px;}
#flip-box-big {
    order: 2;}
#flip-box-2 {
    order: 3;
    position: relative;
    top: 0px;}
#flip-box-3 {
    order: 6;
    position: relative;
    top: 0px;}
#flip-box-4 {
    order: 7;
    margin-left: 65px;}
#flip-box-5 {
    order: 10;}
#image-divider-1 {
    order: 9;
    margin: -75px -35px -75px 55px;}
#image-divider-2 {
    order: 8;
    margin: -75px 0px -75px -40px;}
#image-divider-3 {
    order: 5;
    width: min-content;
    height: 550px;
    top: 0;
    left: 0px;
    margin: -75px -125px -75px 35px;
    overflow: visible;}
#image-divider-4 {
    order: 4;
    margin: -75px 0px -75px -50px;}
#image-divider-5 {
    order: 1;
    margin: -50px -75px -50px 0px;
    width: min-content;
    overflow: visible;}
#Zen-3 {    
    position: relative;
    left: -00px;
    top: -550px;
    transform: scaleX(-1);}   
}



@media (max-width: 1257px) {

    /* Kopfzeilenelemente */
#TopNavigation {
    widows: 561px;
    max-width: 561px;
    flex: none;}
#MOP-1 {order: 1;}
#MOP-2 {order: 2;}
#MOP-3 {order: 7;}
#MOP-4 {order: 8;}
#MOP-5 {order: 9;}
#MOP-6 {order: 3;}
#MOP-7 {order: 4;}
#MOP-8 {order: 5;}
#MOP-9 {order: 6;}
}



@media (max-width: 1065px) {

#main {
padding: 35px 5% 125px 5%;}

    /* Seiteninhalte */
#stickyBlock {
    display: contents;}
div#wrapper-main {
    position: relative;
    top: -35px;}
#wrapper-content {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 500px;    /* Die Breite der linken Box */
    justify-content: flex-start;
    width: 60%;
    min-width: 400px;
    max-width: 600px;
    order: 1;}
        #Bildspalte {
            display: contents;}
    h1#Rubrum {
        order: 1;
        width: 100%;
        position: sticky;
        top: 98px;
        text-align: center;
        padding: 35px 0px 15px 0px;
        margin-bottom: -0px;
        background-color: rgb(255,248,237);}
    div#Galerie {
        order: 2;
        width: 100%;
        text-align: center;
        margin-bottom: 22px;}
        .DekoBild {
            max-width: 350px;
            margin: 0px auto;}
    div#Textspalte {
        order: 3;
        width: 100%;
        flex: 1 1 100px;    /* Die Höhe der Box */
        padding-left: 0px;
        max-width: none;
        min-width: 400px;}

aside#Marginalie {
    width: 40%;
    order: 2;
    margin-top: 68px;
    padding-top: 00px;	/* dient der vertikalen Textanordnung */
    min-width: 200px;
    max-width: 400px;}
div#stickyBlockAside {
    top: 139px;}

#headline-break {
    display: none;}
}



@media (max-width: 1000px) {

    /* Fusszeilen-Umbau */
div#Fusszeile {
    flex-flow: wrap;
    width: 600px;
    margin: 0px auto 35px auto;}
div#FusszeilePortfolio {
    text-align: left;
    order: 3;
    flex: auto;
    padding-top: 25px;
    margin: 0px;}
div#FusszeileImpressum {
    text-align: right;
    order: 2;
    flex: auto;
    padding-top: 25px;
    margin: 0px;}
div#Bildspalte-footer {
    order: 1;
    width: 100%;
    text-align: center;}
}



@media (max-width: 965px) {

#main {
    margin-top: 125px;}

    /* Kopfzeilenelemente */
#header-background {
    height: 125px;}
header {
    height: 98px;}
#Logo {
    width: 115px;
    left: -27px;}
#SeitenTitel {
    top: 25px;
    font-size: 1.5em;}
.MOP {
    margin-bottom: 1px;}
#TopNavigation {
    top: 55px;
    max-width: 72%;}
.SocialMediaLink {
    display: block;
    width: 19px;
    margin-right: 1px;}
#SocialMedia {
    top: 10px;
    z-index: 99;}
#SocialMedia:focus, #SocialMedia:hover {
    transform: scale(1.7) translateY(20px);}
.SocialMediaLink:focus, .SocialMediaLink:hover, .SocialMediaLink:active {
    transform: scale(1.3) translateX(-2px) translateY(2px);}
}



@media (max-width: 800px) {

#main {
    margin-top: 103px;}

    /* Kopfzeilenelemente */
#header-background {
    height: 103px;}
header {
    height: 69px;}
#Logo {
    width: 85px;
    top: 0px;
    left: -20px;}
#SeitenTitel {
    top: 20px;
    font-size: 1.2em;}
.MOP {
    margin-bottom: 7px;}
#TopNavigation {
    top: 48px;
    font-size: 14px;
    max-width: 79%;}
.SocialMediaLink {
    width: 19px;
    display: inline;}
#SocialMedia {
    top: 72px;
    width: 100px;
    left: 0px;
    right: 0px;
    margin: 0px auto;}
#SocialMedia:focus, #SocialMedia:hover {
    transform: scale(1.8) translateY(7px);}
.SocialMediaLink:focus, .SocialMediaLink:hover, .SocialMediaLink:active {
    transform: scale(1.3) translateX(0px) translateY(5px);}

.ausblenden1 {
    display: none;}
#NavTrigger {
    display: block;}

    /* Seiteninhalte */
h1#Rubrum {
    top: 50px;}
}



@media (max-width: 770px) {

    /* Seiteninhalte */
#wrapper-main {
    flex-direction: column;
    justify-content: flex-start;
    max-width: 550px;}

#wrapper-content {
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    flex: 1 1 auto;    /* Die Höhe der Box */
    min-width: 350px;
    max-width: 750px;}
    #Galerie {
        width: 350px;
        flex: 0 0 auto;}
    div#Textspalte {
        width: 100%;
        min-width: 350px;
        flex: 1 1 auto;}    /* Die Höhe der Box */
aside#Marginalie {
    width: 100%;
    min-width: 350px;
    padding-left: 10px;
    margin-top: 35px;
    max-width: 750px;
    flex: 1 1 100px;    /* Die Höhe der Box */
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;}

#Marginalie section {
    flex: 1 1 225px;
    padding: 0px 30px 0px 0px;}

div#stickyBlockAside {
    display: contents;}

    /* Fusszeilen-Navigation */
.BottomNavigation {
    max-width: 400px;
    margin: 0px auto}
nav.BottomNavigation ul li {
    padding: 0px 10px;
    width: 200px;}
.left {
    text-align: right;
    margin-bottom: 10px;}
.right {
    text-align: left;
    margin-bottom: 10px;}
.center {
    text-align: center;}
}



@media (max-width: 650px) {

#main {
    margin-top: 85px;}

    /* Kopfzeilenelemente */
#header-background {
    height: 85px;}
header {
    height: 58px;}
#Logo {
    width: 65px;
    top: 5px;
    left: -15px;}
#SeitenTitel {
    top: 15px;
    font-size: 1.1em;}
#SocialMedia {
    top: 60px;}
#TopNavigation {
    top: 39px;
    max-width: 75%;}
#NavTrigger {
    top: 17px;}

    /* Seiteninhalte */
h1#Rubrum {
    top: 45px;}
}



@media (max-width: 625px) {

    /* Fusszeilen-Umbau */
footer {
    padding-top: 50px;}
div#Fusszeile {
    flex-flow: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;}
div#FusszeilePortfolio {
    text-align: center;
    order: 1;
    padding: 0px 0px 20px 0px;
    margin: 0px;}
div#FusszeileImpressum {
    text-align: center;
    order: 3;
    width: 300px;
    padding: 25px 0px 0px 0px;
    margin: 0px;}
div#Bildspalte-footer {
    order: 2;
    text-align: center;}
.DekoBild-footer {
    width: 300px;
    margin: 0px auto;
    padding: 0px;}
#footer-title-break {
    display: none;}
footer h3 {
    white-space: normal;}
}



@media (max-width: 500px) {
    .ausblenden2 {
        display: none;}
    .TitelBenennung {
        font-family: politica-condensed;
        font-weight: 400;}
}



@media (max-width: 450px) {

    /* Fusszeilen-Umbau */
.ausblenden3 {
    display: none;}
.einblenden1 {
    display: inline;}
}



@media (max-width: 425px) {

    /* Fusszeilen-Umbau */
.BottomNavigation .NavBar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center}
.left, .right, .center {
    text-align: center;}
.DekoBild-footer {
    width: 275px;}
}



@media (max-width: 380px) {
    #TopNavigation {
        display: none;}
    .ausblenden3 {
        display: inline;}
    .einblenden1 {
        display: none;}
    .ausblenden4 {
        display: none;}
    #einblenden4 {
        display: inline;}
}



@media (max-width: 325px) {
    #footer-title-break {
        display: inline;}
    .DekoBild-footer {
    width: 250px;}
    #Fusszeile div {
        width: 250px;
    }
}