/* Schriftarten */

.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.didact-gothic-regular {
  font-family: "Didact Gothic", system-ui;
  font-weight: 200;
  font-style: normal;
}


/* Generelles */

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "Monument Extended", Arial, Helvetica, sans-serif;
    background-color: white;  
}

body {
    background-color: #c28865;  
    color: #62493F;
    margin: 0;
    padding: 0;
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    width: 100%;
    font-size: 18px;
}

/* Schriftgrößen */

h1 {
    font-family: "Anton", sans-serif;
    font-weight:  3em;
    font-style: normal;
    text-align: center;
    text-shadow:  1px  1px 1px beige,
              1px -1px 1px beige,
             -1px  1px 1px beige,
             -1px -1px 1px beige;
}

h2 {
    font-family: "Anton", sans-serif;
    font-weight:  1.5em;
    font-style: normal;
    text-align: left;
    text-shadow:  1px  1px 1px #f88c13,
      1px -1px 1px #f88c13,
     -1px  1px 1px #f88c13,
     -1px -1px 1px #f88c13;
}

h3 {
    font-size: 0.5em;
    color: #62493F;
    font-family: 'didact-gothic-regular', sans-serif;
    text-align: center;
    text-transform: none;
}

h4 {
    font-size: 2em;
    color: #62493F;
    font-family: 'didact-gothic-regular', sans-serif;
    text-align: center;
    text-transform: none;
}

li {
    color: #62493F;
    font-family: 'didact-gothic-regular', sans-serif;
    text-align: left;
    font-size: 0.9em;
}
   

.container_inhalt {
    font-size: 0.8em;
    color: #62493F;
    text-align: left;
    font-family: 'didact-gothic-regular', sans-serif;
    text-transform: uppercase;
    vertical-align: top;
    text-shadow:  1px  1px 1px beige,
      1px -1px 1px beige,
     -1px  1px 1px beige,
     -1px -1px 1px beige;    
}

.big {
    font-size: 1.6em;
    color: #62493F;
    text-align: center;
    font-family: 'Fredericka the Great', cursive;
    text-transform: uppercase;
    vertical-align: top;
}

.big_left {
    font-size: 4.5em;
    color: #f88c13;
    text-align: left;
    font-family: 'Fredericka the Great', cursive;
    text-transform: uppercase;
    vertical-align: top;
    padding: 2%;
}

.bigw {
    font-size: 1.2em;
    color: #62493F;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    vertical-align: top;
    text-shadow:  1px  1px 1px beige,
      1px -1px 1px beige,
     -1px  1px 1px beige,
     -1px -1px 1px beige;    
}

.normal {
    font-size: 1.2em;
    color: white;
    text-align: center;
    font-family: 'Fredericka the Great', cursive;
    text-transform: uppercase;
    vertical-align: top;
}

.normal_braun{
    font-size: 1.2em;
    color: #62493F;
    text-align: left;
    font-family: 'Fredericka the Great', cursive;
    text-transform: uppercase;
    vertical-align: top;
    padding:1%;
}

.mini {
    font-size: 0.7em;
    color: #62493F;
    text-align: center;
    font-family: 'didact-gothic-regular', cursive;
    text-transform: uppercase;
    vertical-align: top;
}

blockquote {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    font-style: italic;
    background: white;
    border-left: 8px solid #62493F;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
    color: #62493F;
    content: open-quote;
    font-size: 2.5em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}
blockquote p {
    display: inline;
}

a  {
    text-decoration:none!important;
    color: #62493F !important;
    text-align: center;
}

/* Container */


.container_text {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row wrap;
    justify-content:center;
    flex-direction:row;
    justify-content: space-around;
    align-items: left;
    height: auto;
    width: 100%;
    padding: 1%;
    background-color: white;
    vertical-align: top;
 }

.container_text img { 
    transition: width 1s ease-in-out;
	-webkit-filter: grayscale(10%); /* Chrome, Opera, Safari  */
    filter: grayscale(10%);   
}

.container_text img:hover {
    width: 100%;
    -webkit-filter: grayscale(100%); /* Chrome, Opera, Safari  */
    filter: grayscale(100%);   
}

        /* Äußerer Container: Vollbild */
        .outer-container {
            display: flex;
            flex-wrap: wrap;
            flex-flow: row wrap;
            justify-content:center;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            height: auto;
            width: 100%;
            background-color: #c28865;
            vertical-align:top;
            background-color: #c28865; /* Beispielhintergrundfarbe */
        }

        /* Innerer Container: Zentriert */
        .inner-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%; /* Breite des inneren Containers */
            max-width: 1200px; /* Maximalbreite für den inneren Container */
            background-color: #c28865; /* Hintergrundfarbe */
            padding: 5%;
        }

        /* Überschrift und Liste links */
        .content {
            flex: 1;
            margin-right: 20px; /* Abstand zwischen Inhalt und Bild */
        }


        /* Bild rechts */
        .image-container img {
            width: 100%; /* Bildgröße: 80% des Containers */
            height: auto; /* Höhe passt sich dem Seitenverhältnis an */
        }

.container_bild_arbeitsrecht {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row wrap;
    justify-content:center;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 50%;
    width: 100%;
    background-color: white;
    vertical-align:top;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(images/ar.jpg);
    background-attachment: fixed;
}

.container_bild_familienrecht {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row wrap;
    justify-content:center;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 50%;
    width: 100%;
    background-color: white;
    vertical-align:top;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(images/fr.jpg);
    background-attachment: fixed;
}

.container_bild_strafrecht {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row wrap;
    justify-content:center;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 50%;
    width: 100%;
    background-color: white;
    vertical-align:top;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('images/sr.jpg');
    background-attachment: fixed;
}

.container_bild_verkehrsrecht {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row wrap;
    justify-content:center;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 50%;
    width: 100%;
    background-color: white;
    vertical-align:top;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(images/vr.jpg);
    background-attachment: fixed;
}

.container_bild_versicherungsrecht {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row wrap;
    justify-content:center;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 50%;
    width: 100%;
    background-color: white;
    vertical-align:top;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(images/vs.jpg);
    background-attachment: fixed;
}


.container_hellgruen_100 {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row wrap;
    justify-content:center;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-decoration: none;
    height: auto;
    width: 100%;
    background-color: #c28865;
    vertical-align:top;
 }


    /* Anpassung des Modals auf 90% der Fenstergröße */
    .modal-dialog {
        max-width: 90%;
        height: 90%;
        margin: 1.75rem auto;
    }
    .modal-content {
        height: 100%;
        border-radius: 0.5rem;
    }



/* Item */

.item_ohne_schatten {
    float:inherit;
    flex: 1 1 auto;
    margin: 1%;
    width: 600px;
    max-width: 100%;
    height:auto;
    text-align: left;
    align-self: center;
}

.item_ohne_schatten img { 
    transition: width 1s ease-in-out;
	-webkit-filter: grayscale(70%); /* Chrome, Opera, Safari  */
    filter: grayscale(70%);   
}

.item_ohne_schatten img:hover {
    width: 50%;
    -webkit-filter: grayscale(0%); /* Chrome, Opera, Safari  */
    filter: grayscale(0%);   
}


iframe
{
    width: 100%;
    height: 500px;
    max-height: auto;
    padding: 2%;
    -webkit-filter: grayscale(70%); /* Chrome, Opera, Safari  */
    filter: grayscale(70%);
}

iframe:hover
{
    width: 100%;
    height: 500px;
    max-height: auto;
    padding: 2%;
    -webkit-filter: grayscale(0%); /* Chrome, Opera, Safari  */
    filter: grayscale(0%);
}

.loader { 
 border: 5px solid #E3E3E3; /* Farbe-Kreis */ 
 border-top: 5px solid #FF8000; /* Farbe-Highlight */ 
 border-radius: 50%; 
 width: 10px; /* Breite */ 
 height: 10px; /* Höhe */ 
 line-height: 10px; /* Zeilenhöhe */ 
 margin: 0 auto; /* Ausrichtung */ 

 animation: loaderSpin 0.4s linear infinite; 
 /* 
  loaderSpin = Name der Animation 
  0.4s = Geschwindigkeit in Sekunden 
  linear = Geschwindigkeitskurve 
  infinite = Fortlaufend wiederholen 
  reverse = Rückwärts 
  alternate-reverse = Alternierend-Rückwärts 
 */ 
} 

@keyframes loaderSpin { 
 0% { 
  transform: rotate(0deg); 
 } 
 100% { 
  transform: rotate(360deg); 
 } 
} 





/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  text-align: left;
  background-color: #e1e1e1; /* White*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 0.9em;
    color: #62493F;
    font-family: 'Raleway', sans-serif;
    text-align: left;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    display: inherit;
    height: auto;
    min-height: 75%;
    width: 100%;
    background-color: white;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "Monument Extended", Arial, Helvetica, sans-serif;
}

body {
    background-color: white;  
    color: #A5A3A3;
    margin: 0;
    padding: 0;
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 20px;
    scroll-snap-type: y mandatory; /* Vertikal Scrollen und Snap Points streng einhalten */
}

h1 {
    font-size: 2em;
    color: #62493F;
    font-family: 'Open Sans', sans-serif;
    
}

/* iMac */
@media screen and (min-width: 2000px)
{
    .mac
    {
    display:block;    
    }
    .desk
    {
    display:none;    
    }
    .tablet
    {
    display:none;    
    }
    .phone
    {
    display:none;
    }
}

/* Desktop */
@media screen and (min-width: 1200px) and (max-width: 2000px) 
{
    .mac
    {
    display:none;    
    }
    .desk
    {
    display:block;    
    }
    .tablet
    {
    display:none;    
    }
    .phone
    {
    display:none;
    }
}


    
/* iPad */
@media screen and (min-width: 480px) and (max-width: 1200px) 
{
    .mac
    {
    display:none;    
    }
    .desk
    {
    display:none;    
    }
    .tablet
    {
    display:block;    
    }
    .phone
    {
    display:none;
    }
}

/* iPhone */
@media screen and (max-width: 480px)     
{
    .mac
    {
    display:none;    
    }
    .desk
    {
    display:none;    
    }
    .tablet
    {
    display:none;    
    }
    .phone
    {
    display:block;
    }
}

/* Auflösung */
@media screen and (max-width: 480px)    
{
    .aufloesung
    {
    display:block;    
    color: #000000;    
    }
}

@media screen and (min-width: 480px) and (max-width: 1200px) 
{
    .aufloesung
    {
    display:block;
    color: #AA0000;    
    }
}

@media screen and (min-width: 1200px) and (max-width: 2000px) 
{
    .aufloesung
    {
    display:block;
    color: #00AA00;    
    }
}

@media screen and (min-width: 2000px)
{
    .aufloesung
    {
    display:block;
    color: #0000AA;    
    }
}

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  text-align: left;
  background-color: #e1e1e1; /* White*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 0.9em;
    color: #62493F;
    font-family: 'Raleway', sans-serif;
    text-align: left;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    display: inherit;
    height: auto;
    min-height: 75%;
    width: 100%;
    background-color: white;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}