/* FARBEN GLOBAL */
:root {
    --hintergrundFarbe: #ffe;
    --headerFarbe: #f2e394;
    --copyLeisteFarbe: #f2ae72;
    --helleSchriftFarbe: white;
    --modalFarbe: rgb(165, 214, 245);
    --dunklerHintergrundFarbe: #0e6757;
    --schatten: 4px 8px 10px rgba(0, 0, 0, 0.2);
    --helleGradFarbe: linear-gradient(135deg,#f2e394,#f2ae72);
    --dunkleGradFarbe: linear-gradient(135deg,#0e6757,#009b77);
}

/* BODY FORMATE */
body {
    background-color: var(--hintergrundFarbe);
    max-width: 972px;
    margin: 0 auto;
    padding: 16pt 0pt;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16pt;
}

/* BILDER RECHTSBÜNDIG */
img {float:right; margin-left:16px; cursor:pointer;}

/* MERKKASTEN */
.merke { margin-left:1em; margin-right:1em; border-left:4px double red; padding:10px;}

/* NAVIGATION AM SEITENENDE */
.navi {font-size: 150%; text-align: center;}

/* HEAD OHNE MENU */
.inhalt {
    width: 86%;
    background: var(--helleGradFarbe);
    font-weight: 600;
    font-size: 17pt;
    padding: 4px 8px;
    border-radius: 12px 0 0 0;
}

/* HEADMENU */
.dropdown {
    position: relative;
    width: 86%;
}

.dropdown:hover {
    box-shadow: var(--schatten);
}

.dropbtn {
    background: var(--helleGradFarbe);
    font-weight: 600;
    font-size: 17pt;
    padding: 4px;
    border-radius: 12px 0 0 0;
}

.dropbtn::after {
    content: '\025BC';
    font-size: 16px;
    float: right;
    margin-top: 4px;
    margin-left: 5px;
    margin-right: 5px;
    transition: rotate 0.4s;
}

.dropdown:hover .dropbtn::after {
    rotate: -180deg;
}

.dropdown-content {
    overflow: hidden;
    max-height: 0;
    border-radius: 0 0 12px 12px;
    position: absolute;
    top: 100%;
    background-color: var(--headerFarbe);
    min-width: 60%;
    padding-left: 1em;
    padding-right: 1em;
    z-index: 1;
    box-shadow: var(--schatten);
    transition: max-height linear 0.4s;
}

.dropdown:hover .dropdown-content {
    max-height: 480px;
}

/* LINKS */
a:link {
    text-decoration: none;
}

a:hover {
    color: green;
}

/* APPLETS ZENTRIEREN */
[id^="applet_container"] {
    margin: auto;
}

/* (c) C. WOLFSEHER FUßLEISTE */
.copy {
    float: right;
    width: 60%;
    background: var(--helleGradFarbe);
    padding: 4px 1rem;
    border-radius:0 0 12px 0;
    text-align: right;
}

/* TOOLTIP */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted blue;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 160px;
    background-color: var(--dunklerHintergrundFarbe);
    font-size: 12pt;
    color: var(--helleSchriftFarbe);
    text-align: center;
    border-radius: 6px;
    padding: 5px 5px;
    position: absolute;
    z-index: 2;
    bottom: 225%;
    left: 50%;
    margin-left: -80px;
    opacity: 0;
    transition: opacity 0.2s, bottom 0.4s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: var(--dunklerHintergrundFarbe) transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    bottom: 125%;
}
/* TOOLTIP ENDE */


/* MODAL BOXEN MIT POPOVER */
.notiz-btn {
    float: right;
    border: none;
    font-size: 16pt;
    color: var(--helleSchriftFarbe);
    background: transparent;
    cursor: pointer;
}

.notiz-btn:hover {
    color: #D0D0D7;
}

[popover] {
    position: fixed;
    top: 40px;
    margin: 0 auto;
    width: 800px;
    background-color: var(--modalFarbe);
    font-family: Georgia, Times, serif;
    padding: 0rem;
    border: none;
    border-radius: 12px;
    box-shadow: var(--schatten);
}

[popover] p {
    padding: 0rem 1rem;
}

[popover]:popover-open {animation: slideIn 300ms ease-out;}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-400px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[popover]::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}

.modalKopf {
    padding: 0.8rem 1rem;
    background: var(--dunkleGradFarbe);
    font-variant: small-caps;
    color: var(--helleSchriftFarbe);
}

/* AKKORDION */
 /* Style the buttons that are used to open and close the accordion panel */
 .accordion {
    background-color: #E9E9ED;
    cursor: pointer;
    padding: 4px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    font-size:16pt;
    font-family:"Trebuchet MS",sans-serif;
    transition: 0.4s;
  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .accordion:hover {
    background-color: #D0D0D7;
  }
  
  .accordion:after {
    content: '\025BC';
    font-size: 16px;
    color: #777;
    float: right;
    margin-top: 2px;
    margin-left: 5px;
    margin-right: 5px;
    transition: rotate 0.4s;
  }
  
  .active:after {
    rotate: -180deg;
  }
  
  /* Style the accordion panel. Note: hidden by default */
  .panel {
    padding: 0 18px;
    background-color: #eeffee;
    max-height: 0;
    overflow: hidden;
    border-radius: 0 0 12px 12px;
    transition: max-height 0.4s ease-out;
  }