/* --- BASIS STYLES --- */
body { font-family: -apple-system, sans-serif; background: #f4f4f7; margin: 0; padding: 20px; text-align: center; color: #333; }

.hero { padding: 20px 0 20px 0; }
.hero h1 { font-size: 2.5rem; margin: 0; color: #000; }

.menu { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; margin: 0 auto; }
.menu-btn { background: white; color: #333; padding: 18px; border-radius: 15px; text-decoration: none; box-shadow: 0 4px 10px rgba(0,0,0,0.05); font-weight: bold; border: 1px solid #eee; transition: 0.2s; }
.menu-btn:hover { background: #fafafa; transform: translateY(-2px); }

/* --- INFO BOXEN & FAQ --- */
.info-box { margin: 40px auto; padding: 20px; max-width: 460px; background: #fff; border-radius: 15px; font-size: 0.95rem; border-left: 5px solid #e74c3c; text-align: left; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.info-box1 { margin: 40px auto; padding: 20px; max-width: 460px; background: #fff; border-radius: 15px; font-size: 0.95rem; text-align: left; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 1px solid #eee; }

.faq-item { border-bottom: 1px solid #ccc; padding: 10px 0; margin-bottom: 8px; }
.faq-question { cursor: pointer; font-weight: bold; background-color: #f5f5f5; padding: 14px; border-radius: 5px; font-size: 1rem; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }

/* --- FORMULAR STYLES --- */
.form-card { background: white; max-width: 450px; margin: 20px auto; padding: 30px; border-radius: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); text-align: left; }
.btn-submit { display: block; width: 100%; background: #007AFF; color: white; padding: 16px; border: none; border-radius: 15px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: transform 0.2s, background 0.2s; margin-top: 10px; }
.btn-submit:hover { background: #0056b3; transform: translateY(-2px); }

/* --- VISITENKARTEN LOGIK (DETAILS EIN/AUSBLENDEN) --- */

/* 1. Die Info-Kästchen standardmäßig unsichtbar */
.contact-info { 
    display: none; 
    background: #f0f0f0; 
    padding: 8px; 
    border-radius: 8px; 
    margin-bottom: 8px; 
    font-family: monospace; 
    font-size: 0.85rem; 
    border: 1px solid #ddd;
    color: #333;
    word-break: break-all;
    text-align: center;
}

/* 2. WENN die Checkbox im HTML angehakt ist, zeige die Infos */
#showDetails:checked ~ .content .contact-info { 
    display: block !important; 
}

/* 3. Den Text im Umschalter-Button tauschen */
#showDetails:checked ~ .content .show-text { 
    display: none; 
}
#showDetails:checked ~ .content .hide-text { 
    display: inline !important; 
}

/* 4. Styling für den Umschalter-Button */
.toggle-container {
    display: block;
    margin: 15px 0;
    padding: 12px;
    background: #eef2f7;
    border-radius: 10px;
    color: #007AFF;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    border: 1px solid #d1d9e6;
    transition: background 0.2s;
}
.toggle-container:hover { background: #e2e8f0; }

footer { margin-top: 50px; font-size: 0.85rem; color: #888; }
footer a { color: #888; text-decoration: none; margin: 0 10px; }