/* MOBILE ANPASSUNGEN für Bildschirme bis 600px Breite
   Optimiert die Darstellung für Smartphones und kleine Tablets */
@media (max-width: 600px) {
    /* Horizontale Gruppen werden vertikal gestapelt
       - Checkboxen und Labels untereinander statt nebeneinander */
    .horizontal-group {
        flex-direction: column;    /* Vertikale Anordnung statt horizontal */
        align-items: flex-start;   /* Links ausrichten statt zentrieren */
        gap: 15px;                 /* Vergrößerter Abstand zwischen Elementen */
    }
    
    /* Container-Anpassungen für mobile Geräte
       - Reduzierte Abstände für mehr Platz */
    .container {
        padding: 10px;             /* Weniger Padding für mehr Bildschirmplatz */
        margin-top: 10px;          /* Reduzierter oberer Abstand */
    }
    
    /* SPEZIELLE CAPTCHA-ANPASSUNGEN FÜR MOBILE
       Captcha-Bild und Eingabefeld bleiben nebeneinander */
    .captcha-container {
        flex-direction: row;       /* Bleibt nebeneinander (nicht untereinander) */
        align-items: flex-start;   /* Oben ausrichten für saubere Optik */
        gap: 10px;                 /* Abstand zwischen Bild und Input */
        flex-wrap: nowrap;         /* Verhindert Umbruch auf neue Zeile */
    }
    
    /* Captcha-Bild Anpassungen für Mobile
       - Feste Größe und Positionierung */
    .captcha-image {
        flex-shrink: 0;            /* Bild behält seine Größe bei */
        width: 140px;              /* Feste Breite für mobile Ansicht */
        height: 40px;              /* Feste Höhe für mobile Ansicht */
        vertical-align: top;       /* Oben ausrichten */
    }
    
    /* Captcha-Eingabefeld Anpassungen für Mobile
       - Nimmt restlichen Platz ein und passt sich an Bildgröße an */
    .captcha-input {
        flex: 1;                   /* Nimmt den gesamten restlichen Platz ein */
        max-width: none;           /* Entfernt die Desktop-Breitenbegrenzung */
        min-width: 80px;           /* Mindestbreite für brauchbare Eingabe */
        height: 40px;              /* Gleiche Höhe wie Captcha-Bild */
        padding: 0 8px;            /* Nur horizontales Padding für Zentrierung */
        font-size: 16px;           /* Verhindert automatisches Zoomen auf iOS */
        box-sizing: border-box;    /* Padding wird in Gesamthöhe eingerechnet */
        margin: 0;                 /* Entfernt alle Außenabstände */
        vertical-align: top;       /* Oben ausrichten wie das Bild */
        line-height: 40px;         /* Zentriert den Text vertikal im Feld */
        -webkit-appearance: none;  /* Explicitly disable spinner for Webkit */
    	-moz-appearance: textfield;/* Disable spinner for Firefox */
    }
    
    /* MOBILE OPTIMIERUNG - Verstecken überflüssiger Texte
       Spart Platz und reduziert visuelle Überladung */
    .form-description {
        display: none;             /* Längere Beschreibungen ausblenden */
    }
    
    .email-note {
        display: none;             /* Email-Hinweise ausblenden */
    }
    
    /* Label-Hinweise ausblenden (z.B. "50-2000 Zeichen")
       Versteckt Zusatzinformationen in Labels */
    .form-group label span {
        display: none;             /* Span-Elemente in Labels ausblenden */
    }
}

/* ====================================
   NUMBER INPUT SPINNER DEAKTIVIERUNG
   ==================================== */

/* Entfernt die Rauf-/Runter-Schalter bei number inputs
   Verhindert ungewolltes Klicken bei großen Zahlen wie 114 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;      /* Webkit-Browser (Chrome, Safari, Edge) */
    margin: 0;                     /* Entfernt Margin */
}

/* Firefox-spezifische Spinner-Deaktivierung */
input[type="number"] {
    -moz-appearance: textfield;    /* Firefox: Macht number input wie text input */
}

/* SEHR KLEINE BILDSCHIRME (unter 360px Breite)
   Für sehr kleine Smartphones - erst hier Captcha untereinander *//* ====================================
   CONTACT FORM STYLES - contact.css
   Dokumentierte Version mit Erklärungen
   ==================================== */

/* ====================================
   CONTAINER UND LAYOUT
   ==================================== */
/* Haupt-Container für das Kontaktformular
   - Begrenzt die maximale Breite auf 800px
   - Zentriert den Container horizontal
   - Verwendet CSS Grid für das Layout
   - Fügt Abstände zwischen Elementen hinzu */
.container {
    max-width: 800px;          /* Maximale Breite für bessere Lesbarkeit */
    margin: 0 auto;            /* Horizontale Zentrierung */
    padding: 20px;             /* Innenabstand um den Container */
    display: grid;             /* CSS Grid Layout verwenden */
    grid-template-columns: 1fr; /* Eine Spalte, die den ganzen Platz einnimmt */
    gap: 20px;                 /* Abstand zwischen Grid-Elementen */
    align-items: start;        /* Elemente oben ausrichten */
    margin-top: 20px;          /* Abstand vom oberen Bildschirmrand */
}

/* ====================================
   FORM GROUPS UND LAYOUT
   ==================================== */
/* Standard-Gruppe für Formularfelder
   - Definiert Abstände zwischen Feldern
   - Setzt die Textfarbe auf Blau */
.form-group {
    margin-bottom: 15px;       /* Abstand zum nächsten Element */
    color: #3c8be8;           /* Blaue Textfarbe */
}

/* Horizontales Layout für Elemente nebeneinander
   - Wird für Checkboxen und Labels verwendet */
.horizontal-group {
    display: flex;             /* Flexbox für horizontale Anordnung */
    align-items: center;       /* Vertikale Zentrierung der Elemente */
    margin-top: 12px;          /* Abstand nach oben */
    margin-bottom: 12px;       /* Abstand nach unten */
    gap: 20px;                 /* Abstand zwischen den Flex-Elementen */
}

/* ====================================
   LABELS UND BESCHRIFTUNGEN
   ==================================== */
/* Styling für alle Formular-Labels
   - Macht Labels zu Block-Elementen (neue Zeile)
   - Fügt Abstand zwischen Label und Input hinzu
   - Macht Text fett und blau */
.form-group label {
    display: block;            /* Label nimmt ganze Zeile ein */
    margin-bottom: 5px;        /* Abstand zum darunterliegenden Input */
    font-weight: bold;         /* Fetter Text für bessere Sichtbarkeit */
    color: #3c8be8;           /* Blaue Farbe passend zum Design */
}

/* ====================================
   INPUT FELDER UND TEXTAREAS
   ==================================== */
/* Styling für alle Input-Felder und Textareas
   - Dunkles Design mit grauen Hintergründen
   - Einheitliche Größe und Abstände
   - Box-Sizing verhindert Größenprobleme durch Padding */
.form-group input,
.form-group textarea {
    width: 100%;               /* Volle Breite des Containers */
    padding: 8px;              /* Innenabstand für bessere Bedienbarkeit */
    background-color: #555555; /* Dunkler grauer Hintergrund */
    border: 1px solid #444444; /* Dunkelgraue Umrandung */
    border-radius: 4px;        /* Abgerundete Ecken */
    color: #cccccc;           /* Helle Textfarbe für Kontrast */
    font-size: 14px;          /* Einheitliche Schriftgröße */
    font-family: inherit;      /* Schriftart vom Parent übernehmen */
    box-sizing: border-box;    /* Padding wird in Gesamtbreite eingerechnet */
}

/* Spezielle Einstellungen für Textareas
   - Erlaubt nur vertikale Größenänderung
   - Definiert minimale und maximale Höhe */
.form-group textarea {
    resize: vertical;          /* Nur vertikale Größenänderung erlaubt */
    min-height: 100px;         /* Mindesthöhe für bessere Benutzererfahrung */
    max-height: 300px;         /* Maximalhöhe um Layout zu erhalten */
}

/* Spezielle Einstellungen für Checkboxen
   - Automatische Breite statt 100%
   - Rechter Abstand zum Label */
.form-group input[type="checkbox"] {
    width: auto;               /* Automatische Breite, nicht 100% */
    margin-right: 10px;        /* Abstand zum nachfolgenden Text */
}

/* ====================================
   FOCUS-ZUSTÄNDE UND INTERAKTIVITÄT
   ==================================== */
/* Styling wenn ein Input-Feld fokussiert ist
   - Blaue Umrandung und Glow-Effekt
   - Entfernt Standard-Browser-Fokus-Ring */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;                                    /* Standard-Browser-Fokus entfernen */
    border-color: #3c8be8;                           /* Blaue Umrandung bei Fokus */
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.3);   /* Blauer Glow-Effekt um das Feld */
}

/* ====================================
   PLACEHOLDER-TEXTE
   ==================================== */
/* Styling für Placeholder-Texte in Input-Feldern
   - Graue, kursive Schrift für Hinweistexte */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #888888;            /* Mittleres Grau für dezente Hinweise */
    font-style: italic;        /* Kursive Schrift zur Unterscheidung */
}

/* ====================================
   SUBMIT BUTTON
   ==================================== */
/* Styling für den Absende-Button
   - Blauer Hintergrund mit Hover-Effekt
   - Übergänge für sanfte Animationen */
.submit-btn {
    background-color: #3c8be8;     /* Blauer Hintergrund */
    color: #ffffff;                /* Weißer Text */
    width: 140px;				   /* Gleiche Breite wie Captcha-Bild */
    height: 40px;              	   /* Gleiche Höhe wie Captcha-Bild */
    padding: 10px 20px;            /* Innenabstand für angemessene Größe */
    border: none;                  /* Keine Umrandung */
    border-radius: 4px;            /* Abgerundete Ecken */
    cursor: pointer;               /* Hand-Cursor bei Hover */
    font-size: 16px;              /* Größere Schrift für Button */
    transition: background-color 0.3s ease; /* Sanfter Farbübergang */
    box-sizing: border-box;        /* Padding in Gesamtgröße einrechnen */
}

/* Button-Zustand beim Hover (Maus darüber)
   - Dunklere blaue Farbe für visuelles Feedback */
.submit-btn:hover {
    background-color: #357abd;     /* Dunkleres Blau bei Hover */
}

/* Button-Zustand wenn deaktiviert
   - Graue Farbe und gesperrter Cursor */
.submit-btn:disabled {
    background-color: #666666;     /* Grauer Hintergrund wenn deaktiviert */
    cursor: not-allowed;           /* Gesperrter Cursor */
}

/* ====================================
   NACHRICHTEN UND FEEDBACK
   ==================================== */
/* Basis-Styling für Feedback-Nachrichten
   - Standardmäßig versteckt, wird per JavaScript angezeigt
   - Einheitliche Formatierung für alle Nachrichtentypen */
.message {
    margin-top: 15px;          /* Abstand vom oberen Element */
    padding: 15px;             /* Innenabstand für bessere Lesbarkeit */
    border-radius: 4px;        /* Abgerundete Ecken */
    display: none;             /* Standardmäßig versteckt */
    font-weight: bold;         /* Fetter Text für Aufmerksamkeit */
}

/* Erfolgsnachrichten in Grün
   - Bestätigt erfolgreiche Formular-Übermittlung */
.message.success {
    background-color: #2ecc71;   /* Grüner Hintergrund für Erfolg */
    color: #ffffff;              /* Weißer Text für Kontrast */
    border-left: 5px solid #27ae60; /* Dunklerer grüner Rand links */
}

/* Fehlernachrichten in Rot
   - Zeigt Probleme bei der Formular-Verarbeitung */
.message.error {
    background-color: #e74c3c;   /* Roter Hintergrund für Fehler */
    color: #ffffff;              /* Weißer Text für Kontrast */
    border-left: 5px solid #c0392b; /* Dunklerer roter Rand links */
}

/* ====================================
   EMAIL-HINWEISE UND BESCHREIBUNGEN
   ==================================== */
/* Kleine Hinweistexte neben Labels
   - Erscheint inline neben dem Haupttext
   - Dezente graue Farbe und kleinere Schrift */
.email-note {
    display: inline;           /* Erscheint in derselben Zeile */
    margin-left: 4px;          /* Kleiner Abstand zum Haupttext */
    font-size: 0.9em;          /* Etwas kleinere Schrift */
    color: #bbbbbb;            /* Helles Grau für dezente Hinweise */
    font-style: italic;        /* Kursive Schrift zur Unterscheidung */
}

/* ====================================
   CAPTCHA-CONTAINER UND -ELEMENTE
   ==================================== */
/* Container für Captcha-Elemente (Bild + Eingabefeld)
   - Flexbox-Layout für nebeneinander liegende Elemente
   - Kann bei Bedarf umbrechen (flex-wrap) */
.captcha-container {
    display: flex;             /* Flexbox für horizontale Anordnung */
    align-items: center;       /* Vertikale Zentrierung */
    gap: 10px;                 /* Abstand zwischen Captcha-Bild und Input */
    flex-wrap: wrap;           /* Erlaubt Umbruch bei kleinen Bildschirmen */
}

/* Das Captcha-Bild selbst
   - Umrandung und Hover-Effekte
   - Klickbar zum Neuladen */
.captcha-image {
	width: 140px;              /* Feste Breite für Desktop */
    height: 40px;              /* Feste Höhe für Desktop */
    border: 1px solid #aaa;    /* Graue Umrandung */
    border-radius: 4px;        /* Abgerundete Ecken */
    cursor: pointer;           /* Hand-Cursor zeigt Klickbarkeit */
    transition: opacity 0.3s ease; /* Sanfter Übergang bei Hover */
}

/* Hover-Effekt für Captcha-Bild
   - Wird leicht transparent bei Mouse-Over */
.captcha-image:hover {
    opacity: 0.8;              /* Leichte Transparenz bei Hover */
}

/* Input-Feld für Captcha-Eingabe
   - Begrenzte Breite für Desktop */
.captcha-input {
    max-width: 100px;          /* Maximale Breite für Desktop-Ansicht */
    height: 40px;              /* Gleiche Höhe wie Captcha-Bild */
    padding: 0 8px;            /* Reduziertes Padding für exakte Größe */
    line-height: 40px;         /* Vertikale Text-Zentrierung */
}

/* reCAPTCHA Element (Google)
   - Verhindert Schrumpfung im Flex-Container */
#html_element {
    flex-shrink: 0;            /* Behält ursprüngliche Größe bei */
}

/* ====================================
   ZEICHEN-ZÄHLER FÜR TEXTAREAS
   ==================================== */
/* Basis-Styling für Zeichen-Zähler
   - Zeigt aktuelle Zeichenanzahl in Textareas
   - Rechtsbündig positioniert mit sanften Farbübergängen */
.char-counter {
    text-align: right;         /* Rechtsbündige Ausrichtung */
    font-size: 0.8em;          /* Kleinere Schrift */
    margin-top: 5px;           /* Abstand zur Textarea */
    transition: color 0.3s ease; /* Sanfter Farbwechsel */
}

/* Zeichen-Zähler wenn zu wenig Text eingegeben
   - Rote Farbe signalisiert Mindestanforderung nicht erfüllt */
.char-counter.too-short {
    color: #e74c3c;            /* Rot - zu wenig Zeichen */
}

/* Zeichen-Zähler im optimalen Bereich
   - Grüne Farbe signalisiert ideale Textlänge */
.char-counter.optimal {
    color: #2ecc71;            /* Grün - optimale Zeichenanzahl */
}

/* Zeichen-Zähler bei Warnung (fast Maximum erreicht)
   - Orange Farbe warnt vor Überschreitung */
.char-counter.warning {
    color: #f39c12;            /* Orange - Warnung vor Maximum */
}

/* Zeichen-Zähler bei Überschreitung
   - Rote Farbe mit Hervorhebung bei zu vielen Zeichen */
.char-counter.danger {
    color: #e74c3c;            /* Rot - zu viele Zeichen */
    font-weight: bold;         /* Fetter Text für Aufmerksamkeit */
    text-shadow: 0 0 5px rgba(231, 76, 60, 0.5); /* Roter Glow-Effekt */
}

/* ====================================
   SICHERHEITS-INFORMATIONSBOX
   ==================================== */
/* Informationsbox für Sicherheitshinweise
   - Dunkler Hintergrund mit blauem Akzent
   - Strukturierte Darstellung von Sicherheitsinformationen */
.security-info {
    background-color: #444;     /* Dunkelgrauer Hintergrund */
    padding: 15px;              /* Innenabstand für Lesbarkeit */
    border-radius: 4px;         /* Abgerundete Ecken */
    margin-top: 20px;           /* Abstand vom oberen Element */
    border-left: 6px solid #3c8be8; /* Blauer Akzent-Rand links */
}

/* Überschrift in der Sicherheitsbox
   - Blaue Farbe passend zum Akzent-Rand */
.security-info h4 {
    color: #3c8be8;            /* Blaue Überschrift */
    margin-top: 0;             /* Entfernt Standard-Margin oben */
}

/* Listen in der Sicherheitsbox
   - Helle graue Schrift für gute Lesbarkeit */
.security-info ul {
    color: #ccc;               /* Helles Grau für Listentext */
    font-size: 0.9em;          /* Etwas kleinere Schrift */
    line-height: 1.5;          /* Erhöhter Zeilenabstand für Lesbarkeit */
    margin-left: 10px;         /* Einrückung für Listen */
}

/* Hervorgehobene Elemente in der Sicherheitsbox
   - Orange Farbe für wichtige Informationen */
.security-info .highlight {
    color: #f39c12;            /* Orange für hervorgehobene Texte */
}

/* ====================================
   FELD-FEHLERMELDUNGEN
   ==================================== */
/* Individuelle Fehlermeldungen für Formularfelder
   - Erscheinen direkt unter dem jeweiligen Feld
   - Rote Farbe für eindeutige Kennzeichnung von Problemen */
.field-error {
    color: #e74c3c;            /* Rote Schrift für Fehleranzeige */
    font-size: 0.9em;          /* Etwas kleinere Schrift */
    margin-top: 5px;           /* Kleiner Abstand zum Eingabefeld */
}

/* ====================================
   MOBILE RESPONSIVENESS
   Priorität: PHP-Version Settings
   ==================================== */
@media (max-width: 600px) {
    .horizontal-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .container {
        padding: 10px;
        margin-top: 10px;
    }
    
    /* Mobile Captcha-Anpassung - Eingabefeld NEBEN dem Bild */
    .captcha-container {
        flex-direction: row; /* Bleibt nebeneinander */
        align-items: flex-start; /* Oben ausrichten */
        gap: 10px;
        flex-wrap: nowrap; /* Verhindert Umbruch */
    }
    
    .captcha-image {
        flex-shrink: 0; /* Bild behält seine Größe */
        width: 140px;
        height: 40px;
        vertical-align: top; /* Oben ausrichten */
    }
    
    .captcha-input {
        flex: 1; /* Nimmt den restlichen Platz ein */
        max-width: none;
        min-width: 80px; /* Mindestbreite für Eingabe */
        height: 40px; /* Gleiche Höhe wie Captcha-Bild */
        padding: 0 8px; /* Nur horizontales Padding */
        font-size: 16px; /* Verhindert Zoom auf iOS */
        box-sizing: border-box; /* Padding in Höhe einrechnen */
        margin: 0; /* Kein Margin */
        vertical-align: top; /* Oben ausrichten */
        line-height: 40px; /* Zentriert den Text vertikal */
    }
    
    /* Hinweistexte mobil verstecken */
    .form-description {
        display: none;
    }
    
    .email-note {
        display: none;
    }
    
    /* Nachrichten-Hinweis (50-2000 Zeichen) verstecken */
    .form-group label span {
        display: none;
    }
}

/* Für sehr kleine Bildschirme - erst dann untereinander */
@media (max-width: 360px) {
    .captcha-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .captcha-input {
        width: 100%;
        margin-top: 5px;
        height: 40px; /* Behalte die Höhe auch bei */
        line-height: 40px; /* Behalte die Line-Height bei */
    }
}

/* Safari-spezifische Fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .form-group input,
    .form-group textarea {
        -webkit-appearance: none;
        -webkit-border-radius: 4px;
    }
    
    .submit-btn {
        -webkit-appearance: none;
        -webkit-border-radius: 4px;
    }
    
    #html_element {
        -webkit-transform: translateZ(0);
    }
}