/*--------------------------------------------------------------
# login.css
--------------------------------------------------------------*/

.icon {
        font-size: 24px;
        text-decoration: none;
        color: black;
        transition: color 0.3s ease;
    }

    .icon.active i {
        color: #00937a; /* Farbe für das markierte loginIcon */
    }

    /* GLOBAL FIXES */
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html, body {
        overflow-x: hidden; /* wichtig für iOS */
        margin: 0;
        padding: 0;
        background-color: #fff;
    }

    .form-control:focus {
        border-color: #00937a;
        box-shadow: 0 0 0 0.2rem rgba(0, 147, 122, 0.25);
    }

    .input-icon-wrapper {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        border: 1px solid #ced4da;
        border-radius: 0.5rem;
        padding: 0 1.25rem;
        height: 40px;
        width: 100%;
        max-width: 100%;
        min-width: 0; /* für Grid-Shrink */
        background-color: white; /* Standard */
        transition: background-color 0.2s ease;
        overflow: hidden; /* gegen Scroll */
    }

    /* Bei Eingabe */
    .input-icon-wrapper.has-value {
        background-color: #f1f1f1 !important;
    }

    /* Bei Fokus */
    .input-icon-wrapper:focus-within {
        background-color: #f1f1f1;
    }

    .input-icon-wrapper input {
        border: none;
        outline: none;
        font-size: 15px;
        background-color: transparent !important;
        width: 100%;
        min-width: 0;
    }

    .input-icon-wrapper input:focus {
        box-shadow: none;
    }

    #togglePassword {
        background: none;
        border: none;
        color: #6c757d;
        cursor: pointer;
        font-size: 1rem;
        padding: 0;
    }

    .placeholder-button {
        display: inline-block;
        width: 24px;
        height: 24px;
    }

    .card {
        max-width: 100vw; /* wichtig für Safari-Stretch-Fix */
        overflow: hidden;
    }

    /* Optional: iOS Safari Target Hack */
    @supports (-webkit-touch-callout: none) {
        html, body {
            max-width: 100vw;
            overflow-x: hidden;
        }

        .input-icon-wrapper {
            max-width: 100%;
            overflow-x: hidden;
        }
    }

    /* Navigation fixiert halten - ergänzt bestehende .header Regeln */
    .header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000; /* Erhöht von 997, damit Header über allem liegt */
    }

    /* Main-Content nach unten verschieben */
    .main {
        margin-top: 90px; /* Angepasst an Ihre Header-Höhe (70px Logo + 2x10px Padding + Reserve) */
    }

    /* Page-Title ebenfalls anpassen, falls vorhanden */
    .page-title {
        margin-top: 0;
    }

    /* Für mobile Geräte */
    @media (max-width: 1200px) {
        .main {
            margin-top: 80px;
        }
    }