body {
    font-family: 'Segoe UI', sans-serif;
    background-image: url("../assets/img/header-bg.jpg"); /* Pfad zum Bild */
  background-repeat: no-repeat; /* Verhindert Wiederholung des Bildes */
  background-size: cover; /* Bild wird so skaliert, dass es den gesamten Bereich abdeckt */
  background-attachment: fixed;
   backdrop-filter: blur(5px);
   margin: 0;
}

/* Forms */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="date"], 
textarea, 
select {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border: 1px solid #ddd;
    border-radius: 12px;
    outline: none;
    font-size: 16px;
    background: #fafafa;
}
input:focus, 
textarea:focus, 
select:focus {
    border-color: #ff385c;
}

/* Modern Form */
.modern-form input, 
.modern-form textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fafafa;
}
.modern-form select, 
.modern-form input[type="date"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.modern-form button {
    margin-top: 10px;
}

/* Auth Form */
.auth-form input {
    width: 100%;
    padding: 12px 16px;  /* gleiche Werte links und rechts */
    margin: 8px 0;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: #fafafa;
    box-sizing: border-box; /* wichtig, damit Padding korrekt gezählt wird */
}

.auth-form textarea {
    width: 100%;
    padding: 12px 16px;  /* gleiche Werte links und rechts */
    margin: 8px 0;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: #fafafa;
    box-sizing: border-box; /* wichtig, damit Padding korrekt gezählt wird */
}
.auth-form button {
    width: 100%;
    margin-top: 10px;
}

/* Authentifizierungslogo (Login/Registrierung) */
.auth-logo {
    width: 80px;
    margin-bottom: 10px;
}

/* Authentifizierungscontainer */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Karte um das Formular */
.auth-card {
    background: white;
    padding: 2rem;
    width: 350px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
}

/* Verlinkungen unterhalb des Formulars */
.auth-card a {
    display: block;
    margin-top: 10px;
    color: #555;
}

/* Basis-Button */
.btn {
    background: #ff385c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}
.btn:hover {
    background: #e31c5f;
}

/* Login-Button Orange */
.btn-login {
    background: #f37126; /* Orange */
    color: white;
}
.btn-login:hover {
    background: #e68900; /* Dunkleres Orange beim Hover */
}

/* ===========================
   LOGIN – MOBILE OPTIMIERUNG
   (nur Phones, ≤ 430px Breite)
   =========================== */
@media (max-width: 430px){

  /* 1) Basislesbarkeit & Performance auf iOS */
  html, body{ font-size: 18px; }                 /* verhindert iOS-Zoom, +größer */
  body{
    background-attachment: scroll;               /* iOS: smoother als fixed */
    /* blur ist teuer auf phones – etwas runterdrehen */
    backdrop-filter: blur(2px);
  }

  /* 2) Container & Card */
  .auth-container{
    min-height: 100dvh;
    padding: 20px 16px;                           /* mehr Rand, weniger „gequetscht“ */
  }
  .auth-card{
    width: 100%;
    max-width: 440px;                             /* statt fix 350px */
    padding: 22px;                                 /* größere Touch-Luft */
    border-radius: 16px;
  }
  .auth-logo{ width: 90px; margin-bottom: 12px; }

  /* 3) Inputs & Labels – größere Tap-Targets */
  .auth-form label{ font-size: 1rem; margin-bottom: 6px; }
  .auth-form input,
  .auth-form textarea,
  .auth-form select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  textarea,
  select{
    padding: 16px 18px;                           /* mehr Innenabstand */
    min-height: 52px;                             /* Tap-Target ≥ 48px */
    font-size: 16px;                              /* wichtig für iOS */
    border-width: 1.5px;
    border-radius: 14px;
  }

  /* 4) Reihen / Remember-Me */
  .auth-form .row-inline{ gap: 14px; }
  .auth-form .checkbox{ font-size: 1rem; }
  .auth-form .checkbox input[type="checkbox"]{ width: 22px; height: 22px; }

  /* 5) Buttons */
  .btn,
  .auth-form button,
  .btn-login{
    padding: 16px 20px;
    min-height: 52px;
    font-weight: 800;
    border-radius: 999px;
    font-size: 1rem;
  }

  /* 6) Hilfstexte/Links */
  .auth-card a{ margin-top: 14px; font-size: .95rem; }
}

/* iOS-Safe-Area unten (Home-Indikator) */
@media (max-width: 430px){
  .auth-container{ padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}