:root {
    --bg-color: #f8f8f8;  /* Changed to green in light mode */
    --text-color: #333333;
    --p-color: #000000;
    --section-bg:white;  /* No background in light mode */
    --primary-bg-color: #ffffff;
    --primary-text-color: #333333;
    --accent-color: #28a745;
    --border-color: #dddddd;
}

[data-theme="dark"] {
    --bg-color: #333333;
    --text-color: #ffffff;
    --p-color: #ffffff;
    --section-bg: #000000;  /* Black background in dark mode */
    --li: #000000;
    --primary-bg-color: #222222;
    --primary-text-color: #f0f0f0;
    --accent-color: #2a9d8f;
    --border-color: #444444;
}

[data-theme="dark"] li:hover {
    background-color: rgb(34, 34, 34);
}

[data-theme="dark"] figure {
    background-color: rgb(0, 0, 0);
}

[data-theme="dark"] figcaption {
    color:darkgrey;
}
[data-theme="dark"] figcaption a {
    color: darkgrey;
}
[data-theme="dark"] .bt-local i {
    color: #000;
}

[data-theme="dark"] .theme-toggle .light-icon {
    display: none;
}

[data-theme="dark"] .theme-toggle .dark-icon {
    display: inline-block;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] sup,
[data-theme="dark"] sup a {
    color:darkgrey;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}
header {
    background: linear-gradient(to bottom,  #0d1b2a, #0a1622) no-repeat;
    overflow: hidden;
    color: #ffffff;
    padding: 60px 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
header h1 {
   font-weight: 600;
   text-shadow: 2px 2px 4px #ffcc008d;
}
header h3 {
    font-weight: 400;
    margin-top: 10px;
}

@media screen and (max-width: 1080px) {
   header h1 {
      font-size: 1.5em;
   }
}
@media screen and (max-width: 480px) {
   header h1 {
      font-size: 1em;
   }
}

footer {
    background-color: #2b2b2b;
    color: #e0e1dd;
    padding: 20px 0;
    margin-top: 60px;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
}
footer ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
footer li {
    padding: 0px 10px;
}

footer li {
    padding: 0px 10px;
}

footer li:hover {
    background-color:transparent;
    color: #ffcc00;
}
footer a:hover {
    color: #ffcc00;
}
li a{
    color: white;
    text-decoration: none;
}
.nav-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #2b2b2b;
    padding: 15px 0;
}

nav {
    color: #ffffff;
    text-align: center;
    margin: 0 auto;
}

nav a {
    color: #ffffff;
    margin: 0 15px;
    text-decoration: none;
    transition: color 0.3s;
    font-weight: 200;
}

nav a:hover {
    color: #ffcc00;
}

nav span {
    margin-right: 15px;
}

@media screen and (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        padding: 10px 0;
    }
    
    nav a {
        margin: 0 10px;
        font-size: 0.9em;
    }
}

@media screen and (max-width: 480px) {
    nav a {
        margin: 0 5px;
        font-size: 0.8em;
    }
    
    nav span {
        margin-right: 8px;
    }
}
section {
    padding: 25px;
    margin: 15px auto;
    background-color: var(--section-bg);
    border-radius: 12px;
    max-width: 900px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: var(--section-color);
    transition: background-color 0.3s;
}
img {
    width: 60%;
    height: auto;
    border-radius: 8px;
}

li {
    list-style:none;           
    padding: 10px 15px;
    margin: 10px 0;
    transition: background-color 0.3s;
}
li:hover {
   background-color: #ffcc00;
   border-radius: 5px;
}

ul {
    padding: 0;
}
figcaption {   
    padding:0 12px;
    font-size: 0.9em;
    color: #555;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    width: 40%;
}

 figure {
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 8px;
    margin: 20px 0;
}
@media (max-width: 720px) {
    figcaption {
        padding: 10px 0;
        width: 100%;
    }

    img {
        width: 100%;
    }

    figure {
        flex-direction: column;
    }
    section {
    border-radius: 0;
    }
}       
/* Hide/show icons based on theme */
.theme-toggle .dark-icon {
    display: none;
}

p {
    color: var(--p-color);
    transition: color 0.3s;
}

section i {
    color: var(--text-color); /* Use theme color */
}
nav button
{
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
sup {
    font-size: 0.8em;
    color:#333;
    margin-top: 20px;
    line-height: normal;
}

sup a {
    color:#333;;
    text-decoration: none;
    margin-top: 0px;
}
#footnote-link {
   display: block;
    border-top: 1px solid var(--border-color);
}

.pdf {
    color: #ffcc00;
}
.read-more-btn {
    background: none;
    border: none;
    color: #866c00;
    cursor: pointer;
    padding: 0;
    font-size: 0.9em;
    text-decoration: underline;
}

/* Hide/show text based on class 
.short-text {
    display: inline;
}

.full-text {
    display: none;
}
 
.hidden {
    display: none !important;
}
    */
.bt-local {
    background-color: lightgray !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    margin: 10px 0 !important;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.bt-local:hover,
.bt-local:focus {
    background-color: #ffcc00 !important;
    color: #000 !important;
    border-color: #ffcc00 !important;
}

.bt-local:focus-visible {
    outline: 2px solid #ffcc00;
    outline-offset: 2px;
}

/* Ensure icons inside button adapt on hover */
.bt-local i { color: inherit; }

/* Dark mode hover tweak for better contrast */
[data-theme="dark"] .bt-local:hover,
[data-theme="dark"] .bt-local:focus {
    background-color: #ffcc00 !important;
    color: #000 !important;
    border-color: #ffcc00 !important;
}

h2 i {
   font-size: 0.7em;
}

h3 i {
    font-size: 0.7em;
 }

 .credit-1 a {
    color: inherit;
    text-decoration: none;
 }
.credit-1 a:hover {
    text-decoration: underline;
    color: var(--accent-color); /* Using theme variable instead of hard-coded blue */
}

 
/* become member page: scope modal styles to #myModal to avoid clashes with 3rd-party .modal rules online */
#myModal.modal {
    display: none;
    position: fixed;
    /* Ensure modal overlays cookie banner and any other overlays in all browsers */
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    color: #000;
}
#myModal .modal-content {
    margin: auto;
    width: 60%;
    max-width: 720px;
    padding: 20px;
}
#myModal .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin: 10px 20px;
}
#myModal .close:hover,
#myModal .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

@media screen and (max-width: 1080px) {
    #myModal .modal-content {
        width: 75%;
    }
}

@media screen and (max-width: 720px) {
    #myModal .modal-content {
        width: 85%;
        padding: 15px;
    }
}

@media screen and (max-width: 480px) {
    #myModal .modal-content {
        width: 95%;
        padding: 10px;
    }
    #myModal .close {
        font-size: 24px;
        margin: 5px 10px;
    }
}

  /*mail chimp */

  #mc_embed_signup
  {width: 90%;}
        /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
           We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

       

        #mc_embed_shell {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h2 {
            text-align: center;
            color: #333;
        }

        .mc-field-group {
            margin-bottom: 15px;
        }

        .mc-field-group label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }

        .mc-field-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .button {
            background-color: #28a745;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            display: block;
            width: 100%;
            text-align: center;
        }

        .button:hover {
            background-color: #218838;
        }

        .indicates-required {
            text-align: center;
            margin-bottom: 20px;
            color: #999;
        }

        .refferal_badge {
            margin-top: 20px;
            width: 220px;
            height: 40px;
            display: flex;
            padding: 2px 0px;
            justify-content: center;
            align-items: center;
        }

        .asterisk {
            color: red;
        }

/* New class for impressum and inprint pages */
.impressum-section {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px;
    margin: 0 auto;
    max-width: 800px;
}

.impressum-section sup a{
    text-decoration: none;
}

.impressum-section p {
    font-size: 12pt;
    line-height: 1.6;
    margin-bottom: 15px;
}

.impressum-section a {
    color: var(--accent-color);
    text-decoration: underline;
}

.impressum-section a:hover {
    opacity: 0.8;
    text-decoration: none;
}

.impressum-section li:hover {
    background-color:transparent !important;
}
.impressum-section ul li:hover {
    background-color: transparent !important;
}

.impressum-section li {
   line-height:inherit;
   padding: 5px 0;
   margin: 0;
}
.impressum-section ul {
    padding-left: 20px;
    margin-bottom: 15px;
}
.impressum-section ul li {
    list-style: disc;
    margin-left: 20px;
}
/* Mailchimp and utility helpers to avoid inline styles */
.mc-fullwidth { width: 100%; }
.mc-hidden { display: none; }
.mc-honeypot { position: absolute; left: -5000px; }
.mc-referral { margin: 0 auto; }
.mc-referral-badge-wrapper { display: inline-block; background-color: transparent; border-radius: 4px; }
.mc-standalone { max-width: 600px; margin: 30px auto; }
/* Cookie Consent Banner Styles */
.cookie-consent {
    position: fixed;
    bottom:0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width:960px;
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
    padding: 15px;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.cookie-consent-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    /* Do not block page interactions; banner itself remains clickable */
    pointer-events: none;
}

.cookie-consent-content {
    flex: 1;
}
.cookie-consent-content a {
    color: var(--accent-color);
    text-decoration: none;
}


.cookie-consent-buttons {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}

.cookie-consent button {
    padding: 8px 15px;
    margin-left: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.cookie-consent .accept {
    background-color: var(--accent-color);
    color: white;
}

.cookie-consent .decline {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--primary-text-color);
}

.cookie-consent.hidden {
    display: none;
}

.cookie-consent-overlay.hidden {
    display: none;
}

@media (max-width: 720px) {
    .cookie-consent {
        flex-direction: column;
    }
    
    .cookie-consent-buttons {
        margin-left: 0;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .cookie-consent button {
        flex: 1;
        margin: 0 5px;
    }
}