body{
 background:#000;
 color:#fff;
 font-family:sans-serif;
 margin:0;
}

.wrap{
 max-width:500px;
 margin:40px auto;
 padding:20px;
}

.card{
 background:#111;
 padding:25px;
 border-radius:12px;
 box-shadow:0 0 25px rgba(0,0,0,.6);
}

h1{margin-top:0}

.lead{
 color:#aaa;
 font-size:14px;
 margin-bottom:15px;
}

.field{
 display:flex;
 flex-direction:column;
 margin-bottom:15px;
}

label{
 margin-bottom:5px;
 font-weight:bold;
}

input{
 background:#222;
 border:1px solid #333;
 border-radius:6px;
 padding:10px;
 color:#fff;
}

input[type=file]{margin-top:5px}

button{
 width:100%;
 background:#e10000;
 border:none;
 padding:14px;
 border-radius:6px;
 color:white;
 font-weight:700;
 cursor:pointer;
}

button:hover{
 background:#c00000;
}

.error{
 background:#600;
 padding:10px;
 border-radius:5px;
 margin-bottom:15px;
}

/* ===== SOCIAL BUTTONS ===== */

.social-label{
 color:#aaa;
 margin-bottom:8px;
}

.social-buttons{
 display:flex;
 flex-direction:column;
 gap:10px;
}

.btn-social{
 display:flex;
 align-items:center;
 gap:10px;
 padding:12px;
 text-decoration:none;
 color:white;
 border-radius:6px;
 font-weight:600;
}

.btn-icon{
 width:22px;
 height:22px;
}

.btn-facebook{ background:#1877f2; }
.btn-google{ background:#ea4335; }
.btn-apple{ background:#000; border:1px solid #333 }

/* ===== DIVIDER ===== */

.divider{
 margin:18px 0 15px;
 text-align:center;
 color:#777;
 position:relative;
}

.divider span{
 background:#111;
 padding:0 10px;
}

.divider::before,
.divider::after{
 content:"";
 position:absolute;
 top:50%;
 height:1px;
 background:#333;
 width:40%;
}

.divider::before{ left:0 }
.divider::after{ right:0 }

/* ===== CHECKBOX ===== */

.checkbox{
 flex-direction:row;
 gap:8px;
 font-size:13px;
}

.company-field{
 display:none;
}
.success {
  background:#0d2a15;
  border:1px solid #155;
  color:#c9f7c9;
  padding:10px 12px;
  border-radius:8px;
  margin-bottom:12px;
}
.error {
  background:#2a0d0d;
  border:1px solid #511;
  color:#f7c9c9;
  padding:10px 12px;
  border-radius:8px;
  margin-bottom:12px;
}
/* ============================
   Passwort-Auge Fix
============================ */
.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    padding-right: 45px !important; /* Platz fürs Auge */
}

.pw-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pw-toggle svg {
    width: 22px;
    height: 22px;
    fill: #bbb;
}

.pw-toggle.pw-visible svg {
    fill: #fff;
}
/* Große rote Fläche entfernen */
.pw-toggle {
    background: none !important;
    border: none !important;
    width: 34px;
    height: 34px;
    padding: 0;
}

/* Icon richtig klein halten */
.pw-toggle svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: #bbb;
}

/* Sichtbar-Modus */
.pw-toggle.pw-visible svg {
    fill: #fff;
}

/* Input rechts Platz für das Auge */
.password-wrapper input {
    padding-right: 40px !important;
}

/* Wrapper */
.password-wrapper {
    position: relative;
}

.pw-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}