/* Globale Stile */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background-color: #FFEE00;
    /* NEU: Moderne, systemübergreifende Schriftart für die gesamte Seite */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: black;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

/* --- Navigation Basis --- */
#main-nav { width: 100%; background-color: black; padding: 10px 15px; position: relative; display: flex; justify-content: center; align-items: center; min-height: 50px; z-index: 100; }
#mobile-menu-toggle { display: none; background: none; border: none; padding: 5px; cursor: pointer; z-index: 101; }
#mobile-menu-toggle span { display: block; width: 25px; height: 3px; background-color: #FFEE00; margin: 5px 0; transition: transform 0.3s ease, opacity 0.3s ease; }
#nav-list { list-style: none; display: flex; justify-content: center; align-items: center; gap: 30px; }
#nav-list a { color: #FFEE00; text-decoration: none; font-weight: bold; font-size: 1.1em; padding: 5px 10px; transition: color 0.3s ease; display: block; }
#nav-list a:hover { color: #FFFFFF; }

/* --- Dropdown Submenu --- */
.has-submenu { position: relative; }
.submenu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); list-style-type: none; padding: 0; margin-top: 10px; background-color: black; border: 1px solid #333; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); min-width: 180px; z-index: 110; }
.has-submenu.open .submenu { display: block; }
.submenu li a { padding: 12px 20px; font-size: 1em; white-space: nowrap; text-align: left; border-bottom: 1px solid #333; }
.submenu li:last-child a { border-bottom: none; }
.submenu li a:hover { background-color: #333; }
.has-submenu > a { cursor: pointer; }
.has-submenu > a::after { content: ' ▼'; font-size: 0.7em; display: inline-block; margin-left: 5px; transition: transform 0.3s ease; }
.has-submenu.open > a::after { transform: rotate(180deg); }

/* --- Zentrierter Inhalt & Logo --- */
.content-center { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; }
.logo-container { position: relative; display: inline-block; }
/* #brand-name bleibt ohne font-family, um die Standard-Browser-Schrift (oder eine spezielle Logo-Schrift) zu verwenden, wie gewünscht */
#brand-name { position: absolute; left: 45%; top: 60%; transform: translate(-50%, -50%); z-index: 1; font-size: 4em; font-weight: bold; color: black; white-space: nowrap; }
#brand-image { display: block; height: auto; transition: opacity 0.5s ease-in-out; }
.hidden { opacity: 0; pointer-events: none; }
.latin-quote { font-style: italic; margin-top: 15px; font-size: 1.3em; text-align: center; }

/* --- Info Popup (OPTIMIERT FÜR HÖHE) --- */
#info-popup-trigger { position: fixed; bottom: 20px; right: 20px; width: 72px; height: 72px; background-color: transparent; border: none; cursor: pointer; z-index: 1000; transition: transform 0.2s ease; padding: 0; }
#info-popup-trigger:hover { transform: scale(1.1); }
#info-popup-trigger img { width: 100%; height: 100%; }
#info-popup { display: none; position: fixed; bottom: 100px; right: 20px; width: 350px; max-width: 90vw; background-color: #ffeb3b; border: 2px solid black; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 999; padding: 15px; /* Padding reduziert */ font-size: 0.85em; /* Schriftgröße leicht reduziert */ line-height: 1.5; /* Zeilenhöhe reduziert */ }
#info-popup.active { display: block; }
#info-popup h3 { margin-top: 0; margin-bottom: 8px; /* Abstand reduziert */ border-bottom: 1px solid #555; padding-bottom: 6px; /* Padding reduziert */ }
#info-popup .popup-section { margin-bottom: 12px; /* Abstand reduziert */ }
#info-popup .close-button { position: absolute; top: 8px; right: 12px; font-size: 22px; font-weight: bold; color: #333; cursor: pointer; }

/* --- Kontaktformular (OPTIMIERT FÜR HÖHE) --- */
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 6px; /* Padding reduziert */ margin-bottom: 8px; /* Abstand reduziert */ border: 1px solid #aaa; border-radius: 4px; box-sizing: border-box; font-size: 1em; /* Stellt sicher, dass die Schriftgröße einheitlich ist */ }
.contact-form label { display: block; margin-bottom: 4px; /* Abstand reduziert */ font-weight: bold; text-align: left; font-size: 0.9em; /* Label etwas kleiner */ }
.contact-form button { background: none; border: none; padding: 0; cursor: pointer; width: 100%; margin-top: 5px; /* Kleiner Abstand oben */ }
.contact-form button img { max-width: 100px; /* Senden-Button kleiner gemacht */ display: block; margin: auto; transition: opacity 0.2s ease; }
.contact-form button:hover img { opacity: 0.8; }
#custom-subject-wrapper { display: none; }

/* --- Feedback-Nachricht (unverändert) --- */
.mail-message { padding: 15px 20px; margin: 20px auto; max-width: 500px; border-radius: 8px; text-align: center; font-weight: bold; color: #000; background-color: #f9f9f9; border: 2px solid #000; box-shadow: 4px 4px 8px rgba(0,0,0,0.2); transition: opacity 0.5s ease-out; }
.mail-message.fade-out { opacity: 0; }

/* --- Media Queries für Mobile (unverändert) --- */
@media (max-width: 768px) {
    #main-nav { justify-content: flex-end; }
    #mobile-menu-toggle { display: block; }
    #nav-list { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: black; flex-direction: column; padding: 10px 0; gap: 0; border-top: 1px solid #333; }
    #nav-list.active { display: flex; }
    #nav-list li { width: 100%; text-align: center; }
    #nav-list a { padding: 15px 10px; border-bottom: 1px solid #333; width: 100%; }
    #nav-list li:last-child a { border-bottom: none; }
    .submenu { position: static; background-color: #444; box-shadow: none; transform: none; left: auto; min-width: 100%; margin-top: 0; }
    #mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    #mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    #mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
@media (max-width: 480px) {
    #brand-name { font-size: 3em; }
}