/* ---------------------------------------------------- */
/* FARBANPASSUNG: SCHWIMMSCHULE (BLAU/ORANGE)           */
/* ---------------------------------------------------- */
:root {
    --primary-color: #007bff; /* Hauptfarbe - Klares Blau */
    --secondary-color: #e6f3ff; /* Sekundärfarbe - Sehr helles Pastellblau */
    --accent-color: #ffa800; /* Akzentfarbe - Orange */
    --text-color: #333;
    --white: #fff;
    --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

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

body {
    font-family: "Poppins", sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--secondary-color);
}

.container {
    max-width: 1100px;
    margin: auto;
    padding: 0 20px;
    position: relative; 
}

/* ---------------------------------------------------- */
/* HEADERS: Hauptseite und Legal-Seiten */
/* ---------------------------------------------------- */
.header, .legal-header {
    background: var(--primary-color);
    color: var(--white);
    padding: 60px 0 30px; 
    text-align: center;
}

/* Sprachauswahl - KORRIGIERT: Position und Text-Labels */
.language-switcher {
    position: absolute;
    top: 5px; /* Nach oben in die Ecke verschoben, überlappt die Überschrift nicht */
    right: 20px;
    display: flex;
    gap: 10px; /* Etwas weniger Abstand */
    z-index: 10;
}
 
.language-switcher a {
    font-size: 1rem; /* KLEINERE Schriftgröße für DE/EN Text */
    text-decoration: none;
    transition: all 0.2s;
    
    /* Farben für Kontrast beibehalten */
    color: var(--text-color); /* DUNKLE SCHRIFT AUF HELLEM GRUND */
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.9); /* HALBTRANSPARENT WEISSER HINTERGRUND */
    padding: 8px 12px; /* Angepasst, um wie ein Button auszusehen */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
    text-shadow: none;
    opacity: 1; 
    min-width: 45px; /* Mindestbreite für Konsistenz */
    text-align: center;
}
 
.language-switcher a:hover {
    background-color: var(--white); /* Volles Weiß beim Hover */
    transform: translateY(-1px); 
}
 
.language-switcher .active-lang {
    /* Hebt die aktive Sprache mit einem blauen Rahmen hervor */
    background-color: var(--white);
    border: 3px solid var(--primary-color); 
    padding: 5px 9px; /* Padding angepasst, um den Rand zu kompensieren */
    pointer-events: none;
    font-weight: 700;
    transform: none;
}
 
/* Header Flex Container */
.header-main-flex {
    display: flex;
    justify-content: center; 
    align-items: center; 
    margin-bottom: 25px; 
    text-align: left; 
}

.header-titles {
    flex-grow: 0; 
    min-width: 250px;
    text-align: center; 
}
 
.main-title {
    font-size: 4rem; 
    font-family: "Arial", sans-serif;
    color: var(--white); 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
    line-height: 1.1;
    text-align: center; 
}

.main-title .centered-break-line {
    display: block; 
    font-size: 0.7em; 
    margin-top: 5px;
    font-weight: 400; 
}

.slogan-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #004085; 
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8); 
    margin-top: 5px;
    margin-bottom: 0;
    line-height: 1.2;
    text-align: center; 
}

/* Styling für das neue linke Bild im Header */
.header-left-image {
    width: 180px; /* <--- WICHTIG: Breiten-Definition */
    height: 180px; /* <--- WICHTIG: Höhen-Definition */
    min-width: 180px;
    border-radius: 50%; /* Macht es rund */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 0 40px 0 0;
    display: block;
    overflow: hidden;
}
 
.header .logo {
    width: 180px; 
    height: 180px; 
    min-width: 180px; 
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 0; 
    display: block; 
    overflow: hidden; 
    margin-left: 40px; 
    margin-right: 0; 
    transform: none; 
}

.header-info-text {
    font-size: 1.3rem; 
    font-weight: 400;
    color: var(--white); 
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); 
    margin-top: 20px; 
    line-height: 1.4; 
}

/* Hauptinhalt */
.main-content {
    padding: 30px 0 60px; 
}
 
.main-page-title {
    font-size: 2rem; 
    font-weight: 700;
    color: var(--text-color);
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.1;
}

/* FLEX CONTAINER FÜR DIE DREI BOXEN */
.contact-section {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap; 
}

.contact-form-container,
.faq-section { 
    background: var(--white);
    padding: 30px;
    border-radius: 10px; 
    box-shadow: var(--box-shadow);
    flex: 1 1 0; 
    min-width: 300px;
    transition: height 0.3s ease-out; 
}
 
.faq-section {
    overflow-y: auto; 
}
 
.call-button-container {
    background: var(--white);
    padding: 30px;
    border-radius: 10px; 
    box-shadow: var(--box-shadow);
    flex: 0 0 250px; 
    max-width: 250px; 
    min-width: 250px;
    height: auto; 
    overflow-y: hidden;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center;
    align-self: flex-start;
}


.contact-section h3 {
    text-align: center;
    margin-bottom: 25px;
    color: var(--primary-color);
}

/* Formular-Styling */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.form-group input,
.form-group textarea,
.form-group select { 
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--white);
    /* Pfeil für Select */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23333333" d="M10 4L6 8 2 4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px; 
}

/* HONEYPOT */
.honeypot-group {
    position: absolute; 
    left: -9999px; 
    opacity: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none; 
}


/* Button-Styling */
.btn {
    display: inline-block;
    background: var(--accent-color); 
    color: var(--white);
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    cursor: pointer;
    transition:
        background-color 0.3s,
        transform 0.3s;
    width: 100%;
    text-align: center;
}

.btn:hover {
    background: #e59400; 
    transform: translateY(-2px);
}
 
.call-btn {
    text-align: center;
    margin-bottom: 5px; 
    margin-top: 20px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.call-btn .icon {
    font-size: 1.5rem;
}
 
.phone-display {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color); 
    margin-top: 15px;
    margin-bottom: 15px; 
}

/* FAQ Styling */
.faq-item {
    margin-bottom: 10px;
}

.faq-question {
    display: block; 
    padding: 10px;
    background-color: #f0f0f0; 
    border-left: 5px solid var(--primary-color); 
    cursor: pointer;
    font-weight: 600;
    border-radius: 5px;
}

.faq-answer {
    padding: 10px 15px;
    background-color: #ffffff;
    border: 1px solid #eee;
    border-top: none;
    border-radius: 0 0 5px 5px;
    display: none; 
}
 
/* ---------------------------------------------------- */
/* NEU: AJAX STATUS/FEEDBACK STYLING */
/* ---------------------------------------------------- */
.response-message {
    padding: 15px; /* Etwas mehr Polsterung */
    margin-bottom: 20px; /* Mehr Abstand zum Formular */
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease-out; /* Für sanftes Ein-/Ausblenden */
}

.success-msg {
    background-color: #d4edda; /* Grüner Hintergrund */
    color: #155724; /* Grüner Text */
    border: 1px solid #c3e6cb;
}

.error-msg {
    background-color: #f8d7da; /* Roter Hintergrund */
    color: #721c24; /* Roter Text */
    border: 1px solid #f5c6cb;
}
 
/* Optional: Spinner-Basis-Styling (für das Ladesymbol) */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.spinner-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}
/* ---------------------------------------------------- */


/* Spezifische Stile für die Legal-Seite (Überschreiben der Standardstile) */

.legal-container {
    background-color: var(--white); /* Weißer Hintergrund für den Lesebereich */
    padding: 30px;
    border-radius: 10px;
    /* Dekorative Linie oben am Container */
    border-top: 10px solid var(--primary-color); 
    /* Den Schatten im Container lassen */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); 
}

.legal-content h2 {
    font-size: 2rem;
    margin-top: 30px;
    /* Dickerer Trennbalken in Akzentfarbe */
    border-bottom: 4px solid var(--primary-color); 
    padding-bottom: 8px;
    margin-bottom: 25px;
    color: var(--text-color);
    font-weight: 700;
}

.legal-content h3 {
    font-size: 1.5rem; /* Etwas größer */
    margin-top: 35px; /* Mehr Abstand nach oben */
    margin-bottom: 10px;
    color: var(--text-color); /* Schwarz statt Orange, um es ruhiger zu halten */
    font-weight: 600;
    /* Vertikaler Akzentbalken links */
    border-left: 5px solid var(--primary-color); 
    padding-left: 15px;
}

.legal-content p, .legal-content li {
    font-size: 1.05rem; /* Minimal größerer Text */
    line-height: 1.7; /* Besserer Zeilenabstand */
    margin-bottom: 15px;
    text-align: justify;
    /* Limitierte Breite für optimale Lesbarkeit (Chained-Effekt) */
    max-width: 800px; 
    margin-left: auto;
    margin-right: auto;
}

.legal-content ul {
    margin-left: 20px;
    padding-left: 5px;
}
/* Footer Link-Farbe angleichen */
footer a {
    color: var(--primary-color) !important;
}


/* ---------------------------------------------------- */
/* Responsive Design */
/* ---------------------------------------------------- */
@media (max-width: 1050px) {
    .contact-form-container,
    .faq-section {
        flex: 1 1 250px; 
    }
    .call-button-container {
        min-width: 200px;
        max-width: 200px;
        flex: 0 0 200px;
    }
}

@media (max-width: 900px) {
    .contact-section {
        flex-direction: column;
    }

    .contact-form-container,
    .call-button-container,
    .faq-section { 
        height: auto !important; 
        flex: none;
        width: 100%;
        align-self: auto;
        min-width: 100%; 
    }
     
    .faq-section {
        overflow-y: visible;
    }
     
    .header-main-flex {
        flex-direction: column;
        justify-content: center;
    }
     
    .header .logo {
        margin: 15px auto 0 auto; 
        width: 150px;
        height: 150px;
        min-width: 150px;
    }
     
    .header-titles {
        text-align: center;
    }
     
}
 
@media (max-width: 600px) {
    .header, .legal-header {
        padding: 30px 0;
    }
     
    .header-main-flex {
        flex-direction: column;
        text-align: center;
        margin-bottom: 20px;
        justify-content: center;
    }

    .header-titles {
        width: 100%;
        text-align: center;
        margin-bottom: 15px; 
    }
     
    .main-title {
        font-size: 2.5rem; 
        margin-bottom: 5px;
    }

    .main-title .centered-break-line {
        font-size: 0.8em; 
    }
     
    .slogan-title {
        font-size: 1.4rem;
        margin-bottom: 5px; 
    }
     
    .header-info-text {
        font-size: 1rem;
        margin-top: 10px; 
    }


    .header .logo {
        margin: 15px auto 0; 
        width: 100px; 
        height: 100px;
        min-width: 100px;
        transform: none; 
    }

    .main-page-title {
        font-size: 1.5rem;
    }

    .contact-form-container,
    .call-button-container,
    .faq-section {
        padding: 20px;
    }
     
    .phone-display {
        font-size: 1.3rem; 
    }
     
    .language-switcher {
        top: 5px; 
        right: 5px;
        flex-direction: row; /* Hält DE/EN nebeneinander auf Mobile */
        gap: 5px; 
        align-items: flex-end; 
    }
    .language-switcher a {
        font-size: 1rem; 
        padding: 5px 8px; /* Kleineres Padding für Mobile */
    }
}
```eof

### 2. Datei: Impressum/Datenschutz (DE) (legal.php)

```html:Impressum/Datenschutz (DE):legal.php
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Impressum und Datenschutz – Freds Schwimmschule</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <header class="legal-header">
        <div class="container">

            <div class="language-switcher">
                <a href="legal.php" class="active-lang" aria-label="Zur deutschen Version wechseln">DE</a> 
                <a href="en-legal.php" aria-label="Switch to English version">EN</a>
            </div>

            <h1>Impressum &amp; Datenschutz</h1>
        </div>
    </header>

    <div class="main-content">
        <div class="container legal-container">
            <div class="legal-content">

                <h2>Impressum</h2>
                <p><strong>Dienstanbieter:</strong><br>
                Fred Mustermann<br>
                Musterstraße 123<br>
                1010 Wien, Österreich
                </p>

                <p><strong>Kontakt:</strong><br>
                Telefon: +43 1 23456789<br>
                E-Mail: <a href="mailto:info@freds-schwimmschule.at">info@freds-schwimmschule.at</a><br>
                Web: <a href="index.html">www.freds-schwimmschule.at</a>
                </p>

                <p><strong>Umsatzsteuer-Identifikationsnummer:</strong><br>
                ATU99999999 (Nicht zutreffend, da Kleinunternehmer)</p>

                <p><strong>Gewerbeberechtigung:</strong><br>
                Schwimmlehrer, freiberuflich tätig</p>

                <h2>Datenschutzerklärung</h2>
                <p>Der Schutz Ihrer persönlichen Daten ist uns ein besonderes Anliegen. Wir verarbeiten Ihre Daten ausschließlich auf Grundlage der gesetzlichen Bestimmungen (DSGVO, TKG 2003).</p>

                <h3>1. Kontakt mit uns</h3>
                <p>Wenn Sie per Formular auf der Website oder per E-Mail Kontakt mit uns aufnehmen, werden Ihre angegebenen Daten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen sechs Monate bei uns gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.</p>

                <h3>2. Cookies</h3>
                <p>Unsere Website verwendet keine Cookies, die eine Analyse des Surfverhaltens der Nutzer ermöglichen. Wir nutzen lediglich technisch notwendige Session-Cookies, die zur Funktionalität der Seite (z.B. Sprachauswahl) erforderlich sind und nach dem Schließen des Browsers automatisch gelöscht werden.</p>

                <h3>3. Ihre Rechte</h3>
                <p>Ihnen stehen grundsätzlich die Rechte auf Auskunft, Berichtigung, Löschung, Einschränkung, Datenübertragbarkeit, Widerruf und Widerspruch zu. Wenn Sie glauben, dass die Verarbeitung Ihrer Daten gegen das Datenschutzrecht verstößt oder Ihre datenschutzrechtlichen Ansprüche sonst in einer Weise verletzt worden sind, können Sie sich bei der Aufsichtsbehörde beschweren. In Österreich ist dies die Datenschutzbehörde.</p>
                <br>
            </div>
        </div>
    </div>
    
    <footer style="background-color: var(--primary-color); color: var(--white); text-align: center; padding: 20px 0;">
        <p>&copy; 2024 Freds Schwimmschule | <a href="index.html" style="color: var(--secondary-color);">Startseite</a></p>
    </footer>
</body>
</html>
```eof

### 3. Datei: Legal Notice and Privacy (EN) (en-legal.php)

```html:Legal Notice and Privacy (EN):en-legal.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Legal Notice and Privacy Policy – Fred's Swim Academy</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <header class="legal-header">
        <div class="container">

            <div class="language-switcher">
                <a href="legal.php" aria-label="Zur deutschen Version wechseln">DE</a> 
                <a href="en-legal.php" class="active-lang" aria-label="Switch to English version">EN</a>
            </div>

            <h1>Legal Notice &amp; Privacy Policy</h1>
        </div>
    </header>

    <div class="main-content">
        <div class="container legal-container">
            <div class="legal-content">

                <h2>Legal Notice (Imprint)</h2>
                <p><strong>Service Provider:</strong><br>
                Fred Mustermann<br>
                Musterstraße 123<br>
                1010 Vienna, Austria
                </p>

                <p><strong>Contact:</strong><br>
                Phone: +43 1 23456789<br>
                Email: <a href="mailto:info@freds-schwimmschule.at">info@freds-schwimmschule.at</a><br>
                Web: <a href="index.html">www.freds-schwimmschule.at</a>
                </p>

                <p><strong>VAT Identification Number:</strong><br>
                ATU99999999 (Not applicable as small business operator)</p>

                <p><strong>Trade Authorization:</strong><br>
                Swimming Instructor, self-employed</p>

                <h2>Privacy Policy</h2>
                <p>The protection of your personal data is important to us. We process your data exclusively on the basis of legal regulations (GDPR, TKG 2003).</p>

                <h3>1. Contacting Us</h3>
                <p>If you contact us via the website form or by email, the data you provide will be stored by us for six months for the purpose of processing the request and in case of follow-up questions. We will not share this data without your consent.</p>

                <h3>2. Cookies</h3>
                <p>Our website does not use cookies that enable analysis of user browsing behavior. We only use technically necessary session cookies that are required for the functionality of the site (e.g., language selection) and are automatically deleted when the browser is closed.</p>

                <h3>3. Your Rights</h3>
                <p>You are generally entitled to the rights of access, rectification, deletion, restriction, data portability, revocation, and objection. If you believe that the processing of your data violates data protection law or your data protection claims have otherwise been violated, you can complain to the supervisory authority. In Austria, this is the Austrian Data Protection Authority.</p>
                <br>
            </div>
        </div>
    </div>
    
    <footer style="background-color: var(--primary-color); color: var(--white); text-align: center; padding: 20px 0;">
        <p>&copy; 2024 Fred's Swim Academy | <a href="index.html" style="color: var(--secondary-color);">Home</a></p>
    </footer>
</body>
</html>