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

    :root {
      --bg:        var(--bg-gray);
      --surface:   var(--app-white);
      --border:    var(--bg-gray);
      --accent:    var(--primary);
      --accent-lt: #e8673a;
      --text:      #1e1812;
      --muted:     #9a8f84;
      --error:     #c0392b;
      --success:   #2d7a4f;
      --radius:    99px;
      --trans:     .25s cubic-bezier(.4,0,.2,1);
    }

    html, body { height:100%; background:var(--bg); color:var(--text);
      font-family:'Outfit',sans-serif; font-weight:300; -webkit-font-smoothing:antialiased; }

    /* ── Background ── */
    .bg-grid { display:none; }
    .bg-glow {
      position:fixed; inset:0; z-index:0; pointer-events:none;
      background:
        radial-gradient(ellipse 55% 45% at 15% 20%, rgba(194,82,26,.08), transparent 60%),
        radial-gradient(ellipse 40% 35% at 85% 80%, rgba(230,160,80,.10), transparent 55%);
    }

    .page { position:relative; z-index:1; min-height:100dvh;
      display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
      padding: 0 24px; }

    .card { width:100%; max-width:420px; background:var(--surface);
      border:1px solid var(--border); border-radius:24px; padding:24px;
      animation:cardIn .5s cubic-bezier(.16,1,.3,1) both; }
    @keyframes cardIn {
      from{opacity:0;transform:translateY(24px) scale(.97)}
      to{opacity:1;transform:translateY(0) scale(1)}
    }

    .logo-dot { display: none; }

    .card-title { display: none; }
    .card-sub { font-size:.875rem;color:var(--muted);margin-bottom:32px; }

    .tabs { display:flex;background:var(--bg);border:1px solid var(--border);
      border-radius:10px;padding:4px;margin-bottom:28px;gap:4px; }
    .tab-btn { flex:1;padding:8px;background:none;border:none;border-radius:7px;
      color:var(--muted);font-family:'Outfit',sans-serif;font-size:.8125rem;
      font-weight:500;cursor:pointer;transition:var(--trans); }
    .tab-btn.active { background:var(--surface);color:var(--text);
      box-shadow:0 1px 4px rgba(30,24,18,.1); }

    .panel { display:none; }
    .panel.active { display:block;animation:fadeSlide .22s ease both; }
    @keyframes fadeSlide {
      from{opacity:0;transform:translateY(8px)}
      to{opacity:1;transform:translateY(0)}
    }

    .field { margin-bottom:16px; }
    label { display:block;font-size:.72rem;font-weight:500;color:var(--muted);
      text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px; }
    input[type="email"],input[type="password"],input[type="text"] {
      width:100%;background:var(--bg);border:1px solid var(--border);
      border-radius:var(--radius);padding:13px 16px;color:var(--text);
      font-family:'Outfit',sans-serif;font-size:.9375rem;font-weight:300;
      outline:none;transition:border-color var(--trans),box-shadow var(--trans); }
    input:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(194,82,26,.1); }
    input::placeholder { color:#c8bcb0; }

    .field-row { display:flex;gap:12px; }
    .field-row .field { flex:1;margin-bottom:0; }

    .forgot { display:block;text-align:right;font-size:.78rem;color:var(--muted);
      text-decoration:none;margin-top:-8px;margin-bottom:20px;transition:color var(--trans); }
    .forgot:hover { color:var(--accent); }

    .btn { width:100%;padding:14px;border:none;border-radius:var(--radius);
      font-family:'Outfit',sans-serif;font-size:.9375rem;font-weight:500;
      cursor:pointer;transition:var(--trans);position:relative;overflow:hidden; }
    .btn-primary { background:var(--primary-red);color:#fff; }
    .btn-primary:hover:not(:disabled) { background:var(--accent-lt);
      box-shadow:0 6px 20px rgba(194,82,26,.3); }
    .btn-primary:active:not(:disabled) { transform:scale(.98); }
    .btn-primary:disabled { opacity:.45;cursor:not-allowed; }

    .btn-google { display:flex;align-items:center;justify-content:center;gap:10px;
      background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);margin-top:10px; }
    .btn-google:hover { border-color:#c8b8a8;background:#f9f4ee; }
    .btn-google:active { transform:scale(.98); }

    .divider { display:flex;align-items:center;gap:12px;margin:20px 0;
      color:var(--muted);font-size:.78rem; }
    .divider::before,.divider::after { content:'';flex:1;height:1px;background:var(--border); }

    .spinner { display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);
      border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite; }
    .btn-primary.loading .spinner { display:inline-block; }
    .btn-primary.loading .btn-text { display:none; }
    @keyframes spin { to{transform:rotate(360deg)} }

    .msg { display:none;padding:12px 14px;border-radius:10px;font-size:.85rem;
      line-height:1.5;margin-bottom:16px; }
    .msg.error   { display:block;background:rgba(192,57,43,.07);
      border:1px solid rgba(192,57,43,.2);color:var(--error); }
    .msg.success { display:block;background:rgba(45,122,79,.07);
      border:1px solid rgba(45,122,79,.2);color:var(--success); }

    .strength-bar { height:3px;background:var(--border);border-radius:99px;
      margin-top:8px;overflow:hidden; }
    .strength-fill { height:100%;border-radius:99px;width:0;transition:width .3s,background .3s; }

    .pw-wrap { position:relative; }
    .pw-toggle { position:absolute;right:14px;top:50%;transform:translateY(-50%);
      background:none;border:none;cursor:pointer;color:var(--muted);
      display:grid;place-items:center;padding:4px;transition:color var(--trans); }
    .pw-toggle:hover { color:var(--text); }

    /* ── Reset ── */
    .reset-back { background:none;border:none;color:var(--muted);
      font-family:'Outfit',sans-serif;font-size:.85rem;cursor:pointer;
      display:flex;align-items:center;gap:6px;margin-bottom:24px;padding:0;
      transition:color var(--trans); }
    .reset-back:hover { color:var(--text); }
    
    /* ── Eingabefelder (Email & Passwort) ── */
.input-group input {
  width: 100%;
  padding: 14px 20px;
  background: var(--bg-gray); /* oder ein sehr helles Grau */
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill); /* Macht die Felder rund */
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  transition: all 0.2s ease;
  outline: none;
}

.input-group input:focus {
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px rgba(255, 127, 80, 0.15);
}

/* ── Login Button ── */
.btn-login {
  width: 100%;
  padding: 14px;
  background-color: var(--primary-red);
  color: white;
  border: none;
  border-radius: var(--radius-pill); /* Macht den Button rund */
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 10px;
}

.btn-login:hover {
  background-color: #e66e44;
  box-shadow: 0 4px 12px rgba(255, 127, 80, 0.3);
  transform: translateY(-1px);
}

/* ── Google Login Button (Optional: auch rund) ── */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  background: white;
  border: 1px solid #ddd;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: #555;
  font-weight: 500;
  margin-top: 15px;
  transition: background 0.2s;
}

.btn-google:hover {
  background: #f9f9f9;
}