/* ================================
   Profingo – Auth Styles (Register & Login)
   Palette: #1D1F20 (ink), #1294F2 (blue), #2A9C8C (teal)
   ================================ */

/* ---------- Tokens ---------- */
:root{
  --ink:#1D1F20;
  --ink-2:#30343a;
  --blue:#1294F2;
  --blue-600:#1e6fa8;
  --teal:#1294F2;
  --bg:#f6f8fa;
  --surface:#ffffff;
  --muted:#6b7280;

  --radius:12px;
  --radius-lg:18px;
  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
  --shadow:0 18px 40px rgba(0,0,0,.10);
  --ring:0 0 0 3px rgba(42,156,140,.22);
}

/* ---------- Base / Page ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%,rgba(18,148,242,.10),transparent 60%),
    radial-gradient(1000px 500px at 110% 10%,rgba(42,156,140,.10),transparent 60%),
    linear-gradient(to right,#eef5f7,#ffffff);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Sticky Footer kompatibel mit bestehendem Layout */
body{min-height:100dvh;display:flex;flex-direction:column}
.page-main{flex:1 0 auto;display:block;padding:16px}

/* ---------- Auth Wrapper ---------- */
.auth-page{
  display:grid;
  place-items:start center;
  padding:clamp(16px,3vw,32px);
}

.auth-card{
  width:min(960px,92vw);
  margin:clamp(24px,6vh,72px) auto;
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:clamp(24px,5vw,44px);
  position:relative;
  overflow:hidden;
}

/* Glanz */
.auth-card::after{
  content:"";
  position:absolute;
  inset:-20% -10% auto auto;
  width:280px;height:280px;
  background:radial-gradient(closest-side,rgba(18,148,242,.12),rgba(42,156,140,.08),transparent 70%);
  filter:blur(6px);
  pointer-events:none;
}

/* ---------- Headings ---------- */
.auth-card h2{
  margin:0 0 12px;
  text-align:center;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--ink);
  font-size:clamp(22px,2.2vw,32px);
}
.auth-card .subtitle{
  margin:0 0 24px;
  text-align:center;
  color:var(--muted);
  font-size:14.5px;
}

/* ---------- Status Banner ---------- */
.success-message,.error-message{
  margin:0 0 18px;
  padding:14px 16px;
  border-radius:12px;
  font-weight:600;
  text-align:center;
  border:1px solid;
}
.success-message{background:#eaf9f1;border-color:#2ecc71;color:#2b8a57}
.error-message{background:#ffecec;border-color:#ff6b6b;color:#b33a3a}

/* ---------- Form Grid ---------- */
.auth-card form{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

/* Registrierung: 2 Spalten ab 860px */
.auth-page.is-register .auth-card form{ grid-template-columns:1fr; }
@media (min-width:860px){
  .auth-page.is-register .auth-card form{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 18px;
  }
  /* Checkbox & Button volle Breite */
  .auth-page.is-register .auth-card form .checkbox-label,
  .auth-page.is-register .auth-card form button[type="submit"]{
    grid-column:1 / -1;
  }
}

/* Login: immer 1 Spalte */
.auth-page.is-login .auth-card form{ grid-template-columns:1fr !important; }
@media (min-width:860px){
  .auth-page.is-login .auth-card form > *{
    grid-column:1 / -1 !important;
  }
}

/* Sicherheit: Nichts sprengt die Spalten */
.auth-card form > *{min-width:0}

/* ---------- Inputs & Selects ---------- */
.auth-card input,
.auth-card select{
  width:100%;
  height:52px;
  padding:12px 14px;
  font-size:15px;
  color:var(--ink-2);
  background:#fff;
  border:1px solid #d8dee6;
  border-radius:var(--radius);
  transition:border-color .18s ease,box-shadow .18s ease,transform .05s ease;
  outline:none;
}
.auth-card input:hover,
.auth-card select:hover{border-color:#cdd5df}
.auth-card input:focus,
.auth-card select:focus{border-color:var(--teal);box-shadow:var(--ring)}
.auth-card input[required]::placeholder{color:#9aa3af}

/* Select Placeholder (erfordert <option value="" disabled selected>) */
.auth-card select:required:invalid{color:#9aa3af}
.auth-card select:valid{color:var(--ink-2)}
.auth-card select option[disabled][value=""]{color:#9aa3af}

/* Custom Arrow */
.auth-card select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'><path d='M5 7.5l5 5 5-5' stroke='%231294F2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px;
  padding-right:42px;
}

/* Iconic Inputs */
.auth-card input[name="email"]{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16v16H4z'/><path d='m4 6 8 7 8-7'/></svg>");
  background-repeat:no-repeat;background-position:12px center;padding-left:40px;
}
.auth-card input[name="passwort"],
.auth-card input[name="passwort_repeat"]{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='10' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
  background-repeat:no-repeat;background-position:12px center;padding-left:40px;
}
.auth-card input[name="telefon"]{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2A19.8 19.8 0 0 1 3.1 8.18 2 2 0 0 1 5 6h3a2 2 0 0 1 2 1.72c.12.9.33 1.77.63 2.6a2 2 0 0 1-.45 2.11l-1.27 1.27a16 16 0 0 0 6.88 6.88l1.27-1.27a2 2 0 0 1 2.11-.45c.83 .3 1.7 .51 2.6 .63A2 2 0 0 1 22 16.92z'/></svg>");
  background-repeat:no-repeat;background-position:12px center;padding-left:40px;
}

/* In der 2-Spalten-Register-Ansicht sollen Firma/Email nicht erzwungen Full-Width sein */
@media (min-width:860px){
  .auth-page.is-register .auth-card input[name="firma"],
  .auth-page.is-register .auth-card input[name="email"]{
    grid-column:auto;
  }
}

/* ---------- Checkbox & Links ---------- */
.checkbox-label{
  display:flex;align-items:center;gap:10px;
  font-size:14.5px;color:var(--ink-2);line-height:1.3;padding:4px 0 2px;
}
.checkbox-label input[type="checkbox"]{width:18px;height:18px;border-radius:4px;accent-color:var(--teal)}
.checkbox-label a{color:var(--teal);text-decoration:none;font-weight:600}
.checkbox-label a:hover{text-decoration:underline}

/* ---------- Button ---------- */
.auth-card button[type="submit"]{
  height:54px;border:0;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--blue),var(--blue-600));
  color:#fff;font-weight:700;letter-spacing:.2px;font-size:16px;cursor:pointer;
  box-shadow:0 10px 22px rgba(18,148,242,.28);
  transition:transform .06s ease,box-shadow .18s ease,filter .18s ease;
  width:100%;
}
.auth-card button[type="submit"]:hover{filter:brightness(1.03);box-shadow:0 14px 30px rgba(18,148,242,.34)}
.auth-card button[type="submit"]:active{transform:translateY(1px)}

/* ---------- Links unter dem Formular ---------- */
.below-link{
  display:block;margin-top:16px;text-align:center;color:var(--teal);
  text-decoration:none;font-weight:600;font-size:14.5px;
}
.below-link:hover{text-decoration:underline}

/* ---------- Zarter Divider (optional) ---------- */
.hr{
  height:1px;background:linear-gradient(to right,transparent,#e7edf3,transparent);
  margin:12px 0 6px;grid-column:1 / -1;
}

/* ---------- Mobile Nav Fallback ---------- */
@media (max-width:780px){
  .nav-links{display:none}
  .menu-toggle{display:block}
}

/* ---------- Reduce Motion ---------- */
@media (prefers-reduced-motion:reduce){
  .auth-card button[type="submit"],
  .auth-card input, .auth-card select{transition:none}
}

/* Optional: Pflichtstern ohne HTML-Änderung (nur moderne Browser) */
label:has(+ input[required]),
label:has(+ select[required])::after{content:" *";color:#e74c3c;font-weight:700}

.checkbox-label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:10px;
  font-size:0.92rem;
  line-height:1.45;
  color:#0f172a;
}

.checkbox-label input[type="checkbox"]{
  flex:0 0 auto;
  margin-top:3px; /* damit Checkbox oben sauber sitzt */
}

.checkbox-label .legal-text{
  display:block;           /* saubere Zeilenumbrüche */
  flex:1 1 auto;
  min-width:0;             /* wichtig für Flex-Wrapping */
  word-break:normal;
  overflow-wrap:anywhere;  /* falls sehr lange Wörter/URLs kommen */
}

.checkbox-label a{
  color:#1294F2;
  font-weight:700;
  text-decoration:none;
}

.checkbox-label a:hover{
  text-decoration:underline;
}