/* Reset */
* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}


/* Variablen */
:root {
    --hg_hell: #fff0d3;
    --hg_dunkel: #333;
    --schriftfarbe_dunkel: #050505;
    --schriftfarbe_hell: #7A7A7A;
    --hg_body: var(--hg_hell)
}


/*  --- Navigation --- */
.logo {
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.logobild {
    height: 50px;
    border-radius: 1rem;
}

nav {   
    height: 70px;
}

.navbar {  
    display: flex;
    background-color: var(--hg_dunkel);
}

.navbar ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar ul li {
    list-style: none;
    padding: 3vw;
}

.navi {   
    visibility: visible; 
}


/* Navigation - Links */
.navbar ul li a {
    text-decoration: none;
    color: #666;
    /* padding: 10px; */
}

#nav_aktiv a {
    color: #ddd;
}

/* Hamburgermenü */
.navbar_hamburger {
    visibility: hidden;
    height: 0;
}

.menu-wrap {
    position: fixed;
    top: 0;
    right:0;
    z-index: 1;
}

/* Aktive Seite */
.navbar ul li a[aria-current="page"], footer p a[aria-current="page"] {
    color: #ddd;
}


.navbar ul li a:hover {
    border-bottom: #8f5d14 solid 2px;
    border-top: #8F5D14 solid 2px;

    /* Hoveranimation */
    animation: HoverAni 0.75s;
    animation-fill-mode: forwards;
}

@keyframes HoverAni {
    0% { padding: 10px 0px ;  color:#666; border-color: rgba(143, 93, 20,0);}
    100% { padding: 5px 0px ;  color: #ddd; border-color: rgba(143, 93, 20,1);}
  }


/* --- generelle Tags --- */
body {
    background-color: var(--hg_body);
    color: var(--schriftfarbe_hell);
    font-family: Merienda;
    line-height: 1.5;
}

section {
    margin: 0px 0px;
    padding: 1vw 15vw;
}

/* --- Footer --- */
footer {
    background-color: #111;
    padding: 2vw 5vw;
}

footer a {
    text-decoration: none;
    color: var(--schriftfarbe_hell)
}

/* --- Überschriften --- */
h1, h2, h3, h4 {
    color: #8F5D14;
    font-family: Libre Baskerville;
}

h1 {
    padding: 10px;
}

h2 {
    padding: 5px;
}

.padfree {
    padding: 0;
    margin: 0;
}

/* --- HG-Farben --- */

.hglight {
    background-color: var(--hg_hell);
}

.hgmiddle {
    background-color: #444;
}

.hgdark {
    background-color: var(--hg_dunkel);
}

.vglight {
    color: var(--hg_hell);
}


/* --- Texte --- */
/* Primär: Libre Baskerville - Sekundär: Libre Bodoni - Text: Merienda - Nothing You Could Do V2 */

p {
    padding: 5px 0px;
}

/* normaler Fließtext */
.text {
    font-family: Merienda;
    line-height: 1.5;
    padding: 10px 20px;
}

.text_dunkel {
    color: var(--schriftfarbe_dunkel);
}

/* horizentale Zentrierung */
.text_c {
    text-align: center;
}

.text_l {
    text-align: left;
}

.text_flex_start {
    align-items: self-start;
}




/* Zitat */
.zitat  {
    font-family: Nothing You Could Do V2;
    transform: rotate(-3deg);
}

/* Text mit Fade-in-Animation */
.fade-in-text {
    animation: fadeIn 5s;
  }

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }


/* --- nur Home --- */

.homebox {
}

/* .homebox::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: rgba(0,0,0,0.7);
}  */

.welcome {
    margin: 10px;
    display: block;
}

#welcome1 {
    padding-left: 10%;   
}

#welcome2 {
    text-align: center;
    left: 50vw;
        
}
#welcome3 {
    text-align: right;
    padding-right: 10%;        
}

.empfangsbild {
    height:20vw;
    width: 100%;
    padding: 0 0;
    margin: 0;
    object-fit: cover;
    vertical-align: middle;
} 

/* --- Weitere --- */

.eyecatcher {
    padding-bottom: 2vw;
}

/* --- Flex Spaltenboxen horizontal und vertikal --- */
.spalten {
    display: flex;
    justify-content: center;
    justify-content: space-around; 
    align-items: center;
    text-align: center;
}

.spalten_umbruch {
    display: flex;
    justify-content: center;
    justify-content: space-around; 
    align-items: center;
    text-align: center;
}

.spalten-v {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 1vw;
    padding: 1vw;
    margin: 1vw;
    height: 100%;
}

.spalten_box {
    padding: 1vw;
    border-radius: 15px;
    background: rgba(0, 3, 0, 0.2);
    margin: 0rem;

}

.v-center {
    align-items: center;
}

.justy_c {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.flex_up {
    align-items: start;
}

.flex25 {
    width: 25vw;
    flex: 1;
}

.flex75 {
    width: 75vw;
    flex: 3;
}

.halbhalb {
    width: 40vw;
}

/* --- Grid --- */
.gridbox_Tabelle {
    display: grid;
    grid-template-columns: 1fr 5fr;
}

.gridbox_halbhalb {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1rem;
}

.gridbox_halbhalb div {
    text-align: center; 
}

.gridbox_ablauf {
    display: grid;
    grid-template-columns: 10fr 1fr 10fr 1fr 10fr;
    column-gap: 1rem;
    row-gap: 1rem;
    margin: 1vw;    
}

.gridbox_ablauf div ul {
    padding: 0vw 2vw;
    text-align: left;
}

.gridbox_ablauf div.spalten_box .fa-solid, 
.grid_3er div .fa-solid,
.icon_trans {
    color: var(--hg_hell);
}

.chevron_r {
    align-self: center;
    
}


.chevron_u {
    display: none;
    align-self: center;

}

.grid_3er {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2rem;
    row-gap: 1rem;
    margin: 25px;
    /* width: 220px;
    height: 180px;
    padding: 20px;
    text-align: center;
    background-color: var(--hg_dunkel);
    border-radius: 10px; */
}

/* --- Foto --- Bilder --- */
.foto {
    border-radius: 1vw;
    border-style: groove;
    border-width: 5px;
}

.bild25 {
    width: 25vw; 
    border-radius: 1vw;
}

.box30 {
    background-color: #666;
    width: 30vw;
    height: 30vh;
    border-radius: 1rem;
}

.box10 {
    background-color: #666;
    width: 10vw;
    height: 10vh;
    border-radius: 1rem;
}

.icon {
    background-color: #666;
    height: 5vw;
    border-radius: 1rem;
} 

.icon_mini {
    height: 2vw;
}

.icon_sm {
    height: 40px;
}

/* vertikale Boxen */



.box33 i {
    margin-bottom: 20px;
}

/* --- Akkordeon --- */
.akk { 
}

/* Akkordeon - Erklärungsbox */
details {
}

/* Akkordeon - Überschriftbox */
summary {
    /* background: rgb(145, 109, 42);
    color: #fff;  */
    cursor: pointer; 
    padding: 1rem;
    border: dashed 1px;
    border-radius: 0.3vw; 
    margin: 0;
}

.akk_content {
    padding: 0rem 1rem 0.5rem 1rem;
    border-left: dashed 1px;
    border-right: dashed 1px;  
}

/* Akkordeon - verzögerungseffekt */
/* details[open] summary ~ * {animation: sweep .7s ease-in-out;}

@keyframes sweep {
  0%    {opacity: 0; margin-left: -20px}
  100%  {opacity: 1; margin-left: 0px} */

/* Akkordeon - Animation mit JS */

details > div {
    overflow: hidden;
    display: grid;
    /* intentionally independent from .animation as Safari 16
    would otherwise ignore the expansion animation. */
    animation-duration: 0.2s;
  }
  
  details > .animation {
    animation-name: grid-expand;
    animation-timing-function: ease-out;
  }
  
  details > .collapsing {
    animation-direction: reverse;
    animation-timing-function: ease-in;
  }
  
  details > div > div {
    min-height: 0;
  }
  
  @keyframes grid-expand {
    0% {
      grid-template-rows: 0fr;
    }
    100% {
      grid-template-rows: 1fr;
    }
  }





 /* Grundlegende Styles */
 /* body {padding: 2rem;}
 details {background: #eee; border: 1px solid #666; border-radius: 3px; margin-bottom: 1.5rem;}
 summary {background: #666; color: #fff; cursor: pointer; padding: 1rem;}
 .akkordeon-inhalt {padding: 1rem 1rem 1px 1rem;} */