/* ------------------------------------------
   Account-Button oben rechts in der Navigation
   ------------------------------------------ */
#account-btn {
     margin-left: 10px;
     padding: 8px 15px;
     background-color: var(--bg-light);
     color: var(--icon-light);
     border: none;
     border-radius: 50px;
     cursor: pointer;
     font-weight: 550;
     font-size: 15px;
}

/* Dark Mode Variante für Account-Button */
body.dark-mode #account-btn {
     background-color: var(--bg-dark);
     color: var(--icon-dark);
}

/* Hover-Effekt für Account-Button */
#account-btn:hover {
     background-color: var(--hover-light);
}

/* Hover-Effekt im Dark Mode */
body.dark-mode #account-btn:hover {
     background-color: var(--hover-dark);
}


/* ------------------------------------------
   Vollbild-Overlay für Authentifizierung
   ------------------------------------------ */
#auth-overlay {
     position: fixed;
     inset: 0;
     background-color: rgba(50, 50, 50, 0.4);
     backdrop-filter: blur(3px);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10000;
    overflow-y: auto;
}

/* ------------------------------------------
   Fix für sehr kleine Screens (z. B. iPhone 4) – Scroll & Abstand 
   ------------------------------------------- */
@media (max-width: 360px) and (max-height: 640px) {
  #auth-overlay {
    align-items: flex-start;
    overflow-y: auto;
     padding-bottom: 80px;
  }
}

/* ------------------------------------------
   Modal-Fenster (Login / Registrierung)
   ------------------------------------------ */
.auth-modal {
     background-color: var(--bg-light);
     padding: 30px 40px;
     border-radius: 20px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     animation: fadeIn 0.5s ease-in-out;
     width: 500px;
     text-align: center;
     max-width: 90%;
}

@media (max-width: 360px) and (max-height: 640px) {
  .auth-modal {
    /* vertikale Ausrichtung nach oben */
     align-items: flex-start;
    margin-top: 100px;
    overflow-y: auto;
  }
}


/* Dark Mode Variante des Modals */
body.dark-mode .auth-modal {
     background-color: var(--bg-dark);
}

/* ------------------------------------------
   Versteckte Elemente (z. B. für Toggle)
   ------------------------------------------ */
.hidden {
     display: none !important;
}


/* ------------------------------------------
   Titel im Modal
   ------------------------------------------ */
#auth-title {
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     gap: 8px;
     margin-bottom: 24px;
      white-space: nowrap;
}

/* ------------------------------------------
   Auth-Titel verkleinern auf kleinen Screens
   ------------------------------------------ */
@media (max-width: 391px) {
  #auth-title {
    font-size: 1.4rem; /* ≈ h3 */
  }
}

@media (max-width: 351px) {
  #auth-title {
    font-size: 1.2rem; /* ≈ kleiner als h3 */
  }
}


#auth-title .icon-left {
     width: 24px;
     height: 24px;
     flex-shrink: 0;
}

/* ------------------------------------------
   LOGIN-FORMULAR
   ------------------------------------------ */
#login-form input {
     width: 80%;
     margin: 0 auto 12px auto;
     display: block;
     background-color: var(--bg-light);
     color: var(--text-light);
}

/* Dark Mode Inputs */
body.dark-mode #login-form input {
     background-color: var(--bg-dark);
     color: var(--text-dark);
}

#login-form button {
     width: 80%;
     margin: 0 auto 12px auto;
     display: block;
     background-color: var(--button-filter-light);
     font-size: 1rem;
     font-weight: 600;
     color: var(--text-dark);
     white-space: nowrap;
     box-shadow: 0 7px 20px rgba(240, 98, 145, 0.5);
}

/* Button im Dark Mode */
body.dark-mode #login-form button {
     background-color: var(--button-filter-dark);
      box-shadow: 0 7px 20px rgba(216, 92, 135, 0.5);
}

/* Hover-Effekt für Button */
#login-form button:hover {
     background-color: var(--button-filter-hover-light);
      box-shadow: 0 9px 26px rgba(236, 64, 122, 0.7);
}

body.dark-mode #login-form button:hover {
     background-color: var(--button-filter-hover-dark);
     box-shadow: 0 9px 26px rgba(255, 114, 161, 0.7);
}


#login-form input:focus {
     border: 1px solid #6200ea;
     /* Lila Ton */
     box-shadow: 0 0 5px rgba(98, 0, 234, 0.8);
     outline: none;
}

/* ------------------------------------------
   Login: Inputs & Submit-Button optimiert für kleine Screens
   ------------------------------------------ */
@media (max-width: 409px) {
  /* E-Mail + Passwort (sichtbar + versteckt) Inputs */
  #login-form input[type="email"],
  #login-form input[type="password"],
  #login-form input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 12px;
    font-size: 16px;
    border-radius: 25px;
  }

  /* Submit-Button */
  #login-form button[type="submit"] {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    padding: 12px;
    font-size: 16px;
    border-radius: 25px;
  }

  /* Icon links im Button */
  #login-form button[type="submit"] .icon-left {
    margin-right: 8px;
  }
}


/* ------------------------------------------
    Linkbereich: "Passwort vergessen?"
   ------------------------------------------ */

#login-form .auth-forgot {
     width: 80%;
     margin: 0 auto 12px auto;
     display: block;
      white-space: nowrap;
}

@media (max-width: 409px) {
  #login-form .auth-forgot {
    width: 80%;           /* bleibt bei 80% Breite */
    margin: 0 0 12px 0;   /* oben 0, rechts 0, unten 12px, links 0 → linksbündig */
    display: block;
    white-space: nowrap;
    text-align: left;     /* Text links ausrichten */
  }
}


/* ------------------------------------------
   PASSWORT-ZURÜCKSETZEN-FORMULAR
   ------------------------------------------ */

/* Inputs */
.password-reset-form input {
     width: 80%;
     margin: 0 auto 12px auto;
     display: block;
     background-color: var(--bg-light);
     color: var(--text-light);
}

/* Inputs im Dark Mode */
body.dark-mode .password-reset-form input {
     background-color: var(--bg-dark);
     color: var(--text-dark);
}

 .password-reset-form button[type="submit"] {
     width: 80%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    border-radius: 25px;
     white-space: nowrap;
 }

/* Fokus-Styling */
.password-reset-form input:focus {
     border: 1px solid #6200ea;
     box-shadow: 0 0 5px rgba(98, 0, 234, 0.8);
     outline: none;
}

.password-reset-form input::placeholder {
     color: #333;
}

/* Button */
.btn-reset-password {
     width: 80%;
     margin: 0 auto 12px auto;
     display: block;
     background-color: var(--button-filter-light);
     color: var(--text-dark);
     font-size: 1rem;
     font-weight: 600;
     box-shadow: 0 7px 20px rgba(240, 98, 145, 0.5);
}

/* Button Hover */
.btn-reset-password:hover {
     background-color: var(--button-filter-hover-light);
     box-shadow: 0 9px 26px rgba(236, 64, 122, 0.7);
}

/* Button im Dark Mode */
body.dark-mode .btn-reset-password {
     background-color: var(--button-filter-dark);
     box-shadow: 0 7px 20px rgba(216, 92, 135, 0.5);
}

body.dark-mode .btn-reset-password:hover {
     background-color: var(--button-filter-hover-dark);
     box-shadow: 0 9px 26px rgba(255, 114, 161, 0.7);
}

.btn-reset-password .icon-left {
     width: 24px;
     height: 24px;
     flex-shrink: 0;
}


/* Linkbereich unten */
.password-reset-form p {
     font-size: 14px;
     color: var(--text-light);
     display: flex;
     justify-content: center;
     gap: 5px;
     margin-top: 20px;
     margin-bottom: -20px;
}

.password-reset-form p a {
     background: none;
     border: none;
     padding: 0;
     margin: 0;
     color: #007aff;
     font-size: 14px;
     text-decoration: underline;
     cursor: pointer;
}

.password-reset-form p a:hover {
     color: #005bb5;
     text-decoration: underline;
}

body.dark-mode .password-reset-form p a:hover {
     color: #00aeff;
}


/* Dark Mode für Linktext */
body.dark-mode .password-reset-form p {
     color: var(--text-dark);
}

.back-to-login-info{
white-space: nowrap;
}

/* ------------------------------------------
   Passwort zurücksetzen: Input & Button für kleine Screens
   ------------------------------------------ */
@media (max-width: 409px) {
  /* E-Mail-Feld */
  .password-reset-form input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 12px;
    font-size: 16px;
    border-radius: 25px;
  }

  /* Submit-Button */
  .password-reset-form button[type="submit"] {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    border-radius: 25px;
  }
}

/* ------------------------------------------
   NEUES PASSWORT-EINGEBEN-FORMULAR
   ------------------------------------------ */

/* Inputs */
.set-new-password-form input {
     width: 80%;
     margin: 0 auto 12px auto;
     display: block;
     background-color: var(--bg-light);
     color: var(--text-light);
     font-size: 1rem;
     padding: 10px 15px;
     border: 1px solid #ccc;
     border-radius: 25px;
}

.set-new-password-form input[type="password"] {
      width: 100%;
     margin: 0 auto 12px auto;
     display: block;
}

.set-new-password-form button[type="submit"] {
      width: 80%;
     margin: 0 auto 12px auto;
     display: block;
     font-size: 1rem;
     font-weight: 600;
      white-space: nowrap;
}

/* Inputs im Dark Mode */
body.dark-mode .set-new-password-form input {
     background-color: var(--bg-dark);
     color: var(--text-dark);
}

/* Fokus-Styling */
.set-new-password-form input:focus {
     border: 1px solid #6200ea;
     box-shadow: 0 0 5px rgba(98, 0, 234, 0.8);
     outline: none;
}

/* Placeholder Farbe */
.set-new-password-form input::placeholder {
     color: #333;
}

body.dark-mode

/* Placeholder Farbe */
.set-new-password-form input::placeholder {
     color: var(--text-dark);
}

/* Button */
.btn-set-new-password {
     width: 80%;
     margin: 0 auto 12px auto;
     display: block;
     background-color: var(--button-filter-light);
     color: var(--text-dark);
     font-size: 1rem;
     font-weight: 600;
     box-shadow: 0 7px 20px rgba(240, 98, 145, 0.5);
}

/* Button Hover */
.btn-set-new-password:hover {
     background-color: var(--button-filter-hover-light);
     box-shadow: 0 9px 26px rgba(236, 64, 122, 0.7);
}

/* Button im Dark Mode */
body.dark-mode .btn-set-new-password {
     background-color: var(--button-filter-dark);
     box-shadow: 0 7px 20px rgba(216, 92, 135, 0.5);
}

body.dark-mode .btn-set-new-password:hover {
     background-color: var(--button-filter-hover-dark);
     box-shadow: 0 9px 26px rgba(255, 114, 161, 0.7);
}

/* Icon in Button (falls du eines einfügst) */
.btn-set-new-password .icon-left {
     width: 24px;
     height: 24px;
     flex-shrink: 0;
}

/* Label Styling */
.set-new-password-form label {
     display: block;
     width: 80%;
     margin: 10px auto 6px auto;
     font-weight: 600;
     color: var(--text-light);
     font-size: 0.9rem;
}

/* Dark Mode Label */
body.dark-mode .set-new-password-form label {
     color: var(--text-dark);
}

/* Password Wrapper (für Input + Icon) */
.set-new-password-form .password-wrapper {
     position: relative;
     width: 80%;
     margin: 0 auto 12px auto;
}

/* Input bleibt 100% der Wrapper-Breite */
.set-new-password-form .password-wrapper input {
     width: 100%;
     padding-right: 36px;
     box-sizing: border-box;
}

/* Icon zum Umschalten der Passwortsicht */
.set-new-password-form .toggle-password-icon {
     position: absolute;
     padding: 2px;
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
     width: 29px;
     height: 29px;
     flex-shrink: 0;
     color: var(--text-light);

     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
}

.set-new-password-form .toggle-password-icon {
     stroke-width: 1.5;
}

body.dark-mode .set-new-password-form .toggle-password-icon {
     stroke: var(--text-dark);
}

/* ------------------------------------------
   Neues Passwort: Abstand und Position des Augen-Icons an kleine Screens anpassen
   ------------------------------------------ */

/* Media Queries für kleinere Bildschirme */
@media (max-width: 500px) {
  .password-wrapper .toggle-password-icon {
    right: -32px;
  }
}

@media (max-width: 470px) {
  .password-wrapper .toggle-password-icon {
    right: -30px;
  }
}

@media (max-width: 440px) {
  .password-wrapper .toggle-password-icon {
    right: -28px;
  }
}

@media (max-width: 410px) {
  .password-wrapper .toggle-password-icon {
    right: -26px;
  }
}

@media (max-width: 380px) {
  .password-wrapper .toggle-password-icon {
    right: -24px;
  }
}

@media (max-width: 350px) {
  .password-wrapper .toggle-password-icon {
    right: -22px;
  }
}

@media (max-width: 320px) {
  .password-wrapper .toggle-password-icon {
    right: -20px;
  }
}

/* Nachricht unten */
.set-new-password-form .set-password-message {
     width: 80%;
     margin: 10px auto;
     text-align: center;
     font-size: 0.9rem;
     color: var(--text-light);
}

/* Dark Mode Nachricht */
body.dark-mode .set-new-password-form .set-password-message {
     color: var(--text-dark);
}

.set-new-password-form input.invalid-input {
     border: 1px solid red;
     background-color: #ffeaea;
     outline: none;
     box-shadow: 0 0 5px #e74c3c !important;
     color: inherit;
}

/* Standard-Hellmodus */
.set-new-password-form .toggle-password-icon:hover {
     color: #000;
     background-color: #ececec;
     border-radius: 25px;
}

/* Darkmode */
body.dark-mode .set-new-password-form .toggle-password-icon:hover {
     color: var(--text-dark);
     background-color: #333333;
     border-radius: 25px;
}


/* ------------------------------------------
   Neues Passwort setzen: Inputs & Button für kleine Screens
   ------------------------------------------ */

@media (max-width: 499px) {
    .set-new-password-form input[type="text"],
  .set-new-password-form input[type="password"] {
    width: 130%;               /* größer als der Container */
    max-width: none;
    margin-left: -15%;         /* halb der Überbreite links */
    margin-right: -20%;        /* halb der Überbreite rechts */
    box-sizing: border-box;
    display: block;
  }

  .set-new-password-form button[type="submit"] {
    width: 105%;               /* größer als der Container */
    max-width: none;
    margin-left: -2%;         /* halb der Überbreite links */
    margin-right: 0%;        /* halb der Überbreite rechts */
    box-sizing: border-box;
    display: block;
  }
}



/* ------------------------------------------
   Register-FORMULAR
   ------------------------------------------ */

/* Dark Mode Variante */
body.dark-mode #register-form input {
     background-color: var(--bg-dark);
     color: var(--text-dark);
}

/* Registrieren-Button */
#register-form button {
     width: 80%;
     margin: 0 auto 12px auto;
     display: block;
     background-color: var(--button-search-light);
     font-size: 1rem;
     font-weight: 600;
     color: var(--text-dark);
      white-space: nowrap;
      box-shadow: 0 5px 15px rgba(137, 100, 239, 0.45);
}

/* Dark Mode für Registrieren-Button */
body.dark-mode #register-form button {
     background-color: var(--button-search-dark);
     box-shadow: 0 5px 15px rgba(145, 112, 255, 0.45);
}

/* Hover-Effekt für Button */
#register-form button:hover {
     background-color: var(--button-search-hover-light);
     box-shadow: 0 7px 20px rgba(122, 79, 224, 0.7);
}

body.dark-mode #register-form button:hover {
     background-color: var(--button-search-hover-dark);
     box-shadow: 0 7px 20px rgba(168, 140, 255, 0.7);
}

#register-form input:focus {
     border: 1px solid #6200ea;
     /* Lila Ton */
     box-shadow: 0 0 5px rgba(98, 0, 234, 0.8);
     outline: none;
}

/* ------------------------------------------
   Register: Inputs & Submit-Button optimiert für kleine Screens
   ------------------------------------------ */
@media (max-width: 409px) {
  /* Vorname, Nachname, E-Mail, Passwort Inputs */
  #register-form input[type="text"],
  #register-form input[type="email"],
  #register-form input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 12px;
    font-size: 16px;
    border-radius: 25px;
  }

  /* Submit-Button */
  #register-form button[type="submit"] {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    padding: 12px;
    font-size: 16px;
    border-radius: 25px;
  }

  /* Optional: Icon links im Button, falls vorhanden */
  #register-form button[type="submit"] .icon-left {
    margin-right: 8px;
  }
}

/* ------------------------------------------
   Placeholder-Styling für Inputs
   ------------------------------------------ */
#login-form input::placeholder {
     color: #333;
}

body.dark-mode #login-form input::placeholder {
     color: var(--text-dark);
}

/* Placeholder-Farbe in Light Mode */
#register-form input::placeholder {
     color: #333;
}

/* Placeholder-Farbe in Dark Mode */
body.dark-mode #register-form input::placeholder {
     color: var(--text-dark);
}

/* Placeholder-Farbe in Light Mode */
input.reset-email::placeholder {
     color: #333;
}

/* Placeholder-Farbe in Dark Mode */
body.dark-mode input.reset-email::placeholder {
     color: var(--text-dark);
}

/* ------------------------------------------
   Passwort-Sichtbar/Verstecken
   ------------------------------------------ */

#login-form .password-wrapper {
     position: relative;
     width: 100%;
}

#login-form .toggle-password-icon {
     position: absolute;
     padding: 2px;
     width: 29px;
     height: 29px;
     top: 50%;
     right: 55px;
     transform: translateY(-50%);
     cursor: pointer;
     stroke-width: 1.5;
     transition: color 0.3s ease;
     user-select: none;
     flex-shrink: 0;
}

#login-form .toggle-password-icon svg {
     width: 29px !important;
     height: 29px !important;
     display: block;
     /* Verhindert, dass SVG als inline-block extra whitespace erzeugt */
}


#login-form .toggle-password-icon:hover {
     color: #000;
     background-color: #ececec;
     border-radius: 25px;
}

body.dark-mode #login-form .toggle-password-icon:hover {
     color: var(--text-dark);
     background-color: #333333;
     /* dunkler Hintergrund statt hell */
     border-radius: 25px;
}

/* ------------------------------------------
   Passwort-Vergessen Linkbereich
   ------------------------------------------ */
.auth-forgot {
     text-align: left;
     margin: 4px 0 12px;
}

.auth-forgot a {
     font-size: 0.9rem;
     color: var(--text-light);
     text-decoration: underline;
     cursor: pointer;
}

body.dark-mode .auth-forgot a {
     color: rgb(230, 230, 230);
}

.auth-forgot a:hover {
     color: #000;
}

body.dark-mode .auth-forgot a:hover {
     color: #FFFFFF;
}

/* ------------------------------------------
   Nachricht Passwort zurücksetzen für E-Mail-Link
   ------------------------------------------ */

.password-reset-message.success {
     width: 80%;
     margin-top: 20px;
     margin-bottom: 20px;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
     color: green;
}

.password-reset-message.error {
     color: red;
}

body.dark-mode .password-reset-message.success {
     color: white;
}

body.dark-mode .password-reset-message.error {
     color: #ff6b6b;
}

/* ------------------------------------------
   Umschalter: "Noch kein Konto?" mit Button
   ------------------------------------------ */
#toggle-auth {
     display: flex;
     justify-content: center;
     gap: 5px;
     margin-top: 20px;
}

#toggle-text {
     font-size: 14px;
     color: var(--text-light);
     white-space: nowrap;
}

body.dark-mode #toggle-text {
     color: var(--text-dark);
}

#toggle-auth-btn {
     background: none;
     border: none;
     padding: 0;
     margin: 0;
     color: #007aff;
     font-size: 14px;
     text-decoration: underline;
     cursor: pointer;
}

#toggle-auth-btn:hover {
     color: #005bb5;
}

body.dark-mode #toggle-auth-btn:hover {
     color: #00aeff;
}


/* ------------------------------------------
   REGISTER-FORMULAR
   ------------------------------------------ */
#register-form input,
#register-form button {
     width: 80%;
     margin: 0 auto 12px auto;
     display: block;
}


/* ------------------------------------------
   Eingabe für Vorname & Nachname nebeneinander
   ------------------------------------------ */
#register-form .name-row {
     display: flex;
     gap: 10px;
     width: 80%;
     margin: 4px auto 12px auto;
}

@media (max-width: 409px) {
     #register-form .name-row {
     display: flex;
     gap: 10px;
     width: 100%;
     margin: 4px auto 12px auto;
}
}

/* ------------------------------------------
   Eingabe E-Mail-Adresse
   ------------------------------------------ */

#register-form input.input-error {
     border: 1px solid red;
     background-color: #ffeaea;
     outline: none;
     box-shadow: 0 0 5px #e74c3c !important;
     /* wichtig, um Fokus zu überschreiben */
     color: inherit;
}

#login-form input.input-error {
     border: 1px solid red;
     background-color: #ffeaea;
     outline: none;
     box-shadow: 0 0 5px #e74c3c !important;
     /* wichtig, um Fokus zu überschreiben */
     color: inherit;
}


/* ------------------------------------------
   Passwort-Sichtbar/Verstecken
   ------------------------------------------ */

#register-form .password-wrapper {
     position: relative;
     width: 100%;
}

#register-form .toggle-password-icon {
     position: absolute;
     padding: 2px;
     width: 29px;
     height: 29px;
     top: 50%;
     right: 55px;
     transform: translateY(-50%);
     cursor: pointer;
     stroke-width: 1.5;
     transition: color 0.3s ease;
     user-select: none;
     flex-shrink: 0;
}

#register-form .toggle-password-icon svg {
     width: 29px !important;
     height: 29px !important;
     display: block;
}


#register-form .toggle-password-icon:hover {
     color: #000;
     background-color: #ececec;
     border-radius: 25px;
}


body.dark-mode #register-form .toggle-password-icon:hover {
     color: var(--text-dark);
     background-color: #333333;
     border-radius: 25px;
}



/* ------------------------------------------
   Register Snackbar
   ------------------------------------------ */

.register-snackbar {
     visibility: hidden;
     min-width: 250px;
     color: white;
     text-align: center;
     border-radius: 4px;
     padding: 12px;
     position: fixed;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 16px;
     z-index: 1000;
     transition: visibility 0s, opacity 0.5s ease-in-out;
     opacity: 0;
}

.register-snackbar.show {
     visibility: visible;
     opacity: 1;
}

.register-snackbar.success {
     background-color: #4BB543;
     /* Grün */
}

.register-snackbar.error {
     background-color: #E94B3C;
     /* Rot */
}

/* ------------------------------------------
   Trenner mit Linie und "oder"
   ------------------------------------------ */
.auth-divider {
     display: flex;
     align-items: center;
     text-align: center;
     margin: 20px 0;
     color: var(--text-light);
     font-weight: 600;
     font-size: 14px;
}

body.dark-mode .auth-divider {
     color: var(--text-dark);
}

.auth-divider::before,
.auth-divider::after {
     content: "";
     flex: 1;
     border-bottom: 1px solid var(--border-light);
     margin: 0 10px;
}

body.dark-mode .auth-divider::before,
body.dark-mode .auth-divider::after {
     border-bottom: 1px solid var(--border-dark);
}

.auth-divider span {
     white-space: nowrap;
}


/* ------------------------------------------
   Externe Login-Optionen
   ------------------------------------------ */
.auth-external {
     margin-top: 20px;
     display: flex;
     flex-direction: column;
     gap: 12px;
     align-items: center;
}


/* Basis-Stil für externe Buttons (Google etc.) */
.auth-external .external-btn {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     width: 80%;
     max-width: 320px;
     padding: 5px 15px;
     border: 1px solid #dadce0;
     border-radius: 25px;
     background-color: #FFFFFF;
     cursor: pointer;
     font-size: 15px;
     font-weight: 500;
     transition: background-color 0.3s ease;
}

body.dark-mode .auth-external .external-btn {
     box-shadow: 0 0 15px 3px rgba(255, 255, 255, 0.1);
     /* stärker beim Hover */
}


/* Icon im externen Button */
.auth-external .external-btn img {
     width: 40px;
     height: 40px;
     display: block;
}


/* Apple Login Button */
.auth-external .apple-btn {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     width: 80%;
     max-width: 320px;
     padding: 0px 15px;
     border: 1px solid #dadce0;
     border-radius: 25px;
     background-color: #FFFFFF;
     cursor: pointer;
     font-size: 15px;
     font-weight: 500;
     transition: background-color 0.3s ease;
}

/* Apple Logo Styling */
.auth-external .apple-btn img {
     width: 50px;
     height: 50px;
     display: block;
     margin-right: -5px;
     margin-left: -5px;
}


/* Facebook Login Button */
.auth-external .facebook-btn {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     width: 80%;
     max-width: 320px;
     padding: 14px 15px;
     border: 1px solid #dadce0;
     border-radius: 25px;
     background-color: #FFFFFF;
     cursor: pointer;
     font-size: 15px;
     font-weight: 500;
     transition: background-color 0.3s ease;
}

/* Facebook Logo Styling */
.auth-external .facebook-btn img {
     width: 22px;
     height: 22px;
     display: block;
     margin-right: 8px;
     margin-left: 10px;
}

/* ------------------------------------------
   Layout-Anpassung externe Login-Buttons (ab 534px)
   ------------------------------------------ */
@media (max-width: 534px) {
  .auth-external {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Abstand zwischen den Buttons */
  }

  /* Buttons auf volle Breite & Inhalte linksbündig */
  .auth-external .external-btn,
  .auth-external .apple-btn,
  .auth-external .facebook-btn {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
  }

  /* Icons in Buttons */
  .auth-external .external-btn img {
    width: 40px;
    height: 40px;
    display: block;
  }

  .auth-external .apple-btn img {
    width: 50px;
    height: 50px;
    display: block;
  }

  .auth-external .facebook-btn img {
    width: 22px;
    height: 22px;
    display: block;
    margin-right: 8px;
  }
}

/* ------------------------------------------
   Kleinere Screens – Textgröße & Umbruch verhindern
   ------------------------------------------ */
@media (max-width: 355px) {
  .auth-external .external-btn {
    min-width: 210px;
    white-space: nowrap;
    font-size: 13px;
  }
}

/* ------------------------------------------
   Login/Register: Abstand des Augen-Icons an kleine Screens anpassen
   ------------------------------------------ */

@media (max-width: 530px) {
  #login-form .toggle-password-icon,
  #register-form .toggle-password-icon {
    right: 52px;
  }
}

@media (max-width: 500px) {
  #login-form .toggle-password-icon,
  #register-form .toggle-password-icon {
    right: 50px;
  }
}

@media (max-width: 470px) {
  #login-form .toggle-password-icon,
  #register-form .toggle-password-icon {
    right: 48px;
  }
}

@media (max-width: 440px) {
  #login-form .toggle-password-icon,
  #register-form .toggle-password-icon {
    right: 44px;
  }
}

@media (max-width: 409px) {
  #login-form .toggle-password-icon,
  #register-form .toggle-password-icon {
    right: 10px;
  }
}