/* ==========================================================================
   HandwerkFox – Gemeinsames Auth-Stylesheet
   Verwendet von: login.php, register.php, kunde-register.php,
                  passwort-vergessen.php, passwort-zuruecksetzen.php
   Ziel: ein einheitliches, warmes Orange-Branding mit klaren, großen
   Touch-Targets auf Mobilgeräten und einer ruhigen zweispaltigen
   Ansicht auf Desktop.
   ========================================================================== */

:root{
  --hf-orange: #ff8500;
  --hf-orange-light: #ff9a1f;
  --hf-orange-dark: #d86400;
  --hf-text: #24170e;
  --hf-text-muted: #5f4632;
  --hf-border: rgba(255,145,25,.40);
  --hf-border-soft: rgba(255,145,25,.28);
  --hf-bg-grad: linear-gradient(180deg,#fffaf4 0%,#fff2e4 52%,#ffe0b8 100%);
  --hf-card-grad: linear-gradient(180deg,#ffffff 0%,#fffaf4 58%,#fff1df 100%);
  --hf-radius-lg: 24px;
  --hf-radius-md: 13px;
  --hf-shadow-card: 0 22px 58px rgba(120,70,20,.12), inset 0 1px 0 rgba(255,255,255,.9);
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:#fffaf4}

body{
  min-height:100vh;
  font-family:Arial,sans-serif;
  color:var(--hf-text);
  background:var(--hf-bg-grad) fixed;
  display:flex;
  flex-direction:column;
}

/* ----- Seiten-Layout ----- */

.auth-page{
  flex:1;
  width:100%;
  padding:46px 22px 34px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.auth-wrap{
  width:100%;
  max-width:1160px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px;
  align-items:stretch;
}

/* Einspaltige Variante für Seiten ohne Markenspalte (Passwort vergessen etc.) */
.auth-wrap-single{
  max-width:480px;
  grid-template-columns:1fr;
}

/* ----- Markenspalte (links, nur Desktop) ----- */

.auth-brand-card,
.auth-card{
  min-height:680px;
  border:1px solid rgba(255,145,25,.46);
  border-radius:var(--hf-radius-lg);
  background:var(--hf-card-grad);
  box-shadow:var(--hf-shadow-card);
  overflow:hidden;
  color:var(--hf-text);
}

.auth-wrap-single .auth-card{
  min-height:auto;
}

.auth-brand-card{
  position:relative;
  padding:38px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.auth-brand-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,154,31,.18), transparent 24%),
    radial-gradient(circle at 86% 88%, rgba(255,122,0,.12), transparent 32%);
  pointer-events:none;
}

.auth-brand-card > *{position:relative;z-index:1}

.auth-brand-logo{display:flex;align-items:center;gap:16px;margin-bottom:52px}
.auth-brand-logo img{width:86px;height:58px;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.34))}
.auth-brand-logo strong{font-size:34px;line-height:1}
.auth-brand-logo b{color:var(--hf-orange)}

.auth-eyebrow{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,177,74,.44);
  background:#ffffff;
  color:#c85f00;
  font-weight:900;
  font-size:14px;
  margin-bottom:20px;
}

.auth-brand-card h1{max-width:520px;font-size:46px;line-height:1.08;margin-bottom:18px;color:var(--hf-orange)}
.auth-brand-card p{max-width:560px;color:var(--hf-text-muted);font-size:17px;line-height:1.62}

.auth-team-photo{
  margin:24px 0 0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(230,106,0,.24);
  background:#fff;
  box-shadow:0 18px 42px rgba(84,45,12,.14);
}
.auth-team-photo img{display:block;width:100%;height:168px;object-fit:cover;object-position:center}

.auth-trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.auth-trust-item{min-height:120px;padding:17px;border-radius:18px;background:#ffffff;border:1px solid rgba(255,145,25,.30)}
.auth-trust-item strong{display:block;font-size:22px;color:var(--hf-orange-light);margin-bottom:8px}
.auth-trust-item span{display:block;color:var(--hf-text);font-weight:bold;line-height:1.45;font-size:13px}

/* ----- Formularspalte (rechts auf Desktop, einzige Spalte auf Mobil) ----- */

.auth-card-inner{
  width:100%;
  max-width:430px;
  margin:0 auto;
  text-align:center;
  padding:38px;
}

.auth-logo{display:none;text-align:center;margin-bottom:22px}
.auth-logo img{width:112px;height:74px;object-fit:contain}

.auth-title{font-size:32px;line-height:1.15;color:var(--hf-orange);margin:0 auto 10px;text-align:center}
.auth-subtitle{color:var(--hf-text-muted);line-height:1.55;margin:0 auto 26px;text-align:center;font-size:15px}

.auth-success{
  background:#eefbf2;
  border:1px solid #9bd9ad;
  color:#17632d;
  padding:14px 16px;
  border-radius:var(--hf-radius-md);
  font-weight:700;
  line-height:1.5;
  margin-bottom:18px;
  text-align:left;
}

.auth-error{
  background:#fde8e8;
  border:1px solid #f0b4b4;
  color:#a32020;
  padding:14px 16px;
  border-radius:var(--hf-radius-md);
  font-weight:700;
  line-height:1.5;
  margin-bottom:18px;
  text-align:left;
}

/* Google OAuth Button */
.auth-oauth-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  min-height:52px;
  padding:13px 16px;
  border-radius:var(--hf-radius-md);
  background:#ffffff;
  color:var(--hf-text);
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(36,23,14,.16);
}
.auth-oauth-link:hover{background:#fff7ed}
.auth-oauth-icon{width:22px;height:22px;display:inline-block;flex:0 0 22px}

.auth-divider{
  display:flex;
  align-items:center;
  gap:13px;
  margin:22px 0 18px;
  color:var(--hf-text-muted);
  font-size:13px;
  font-weight:bold;
}
.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:rgba(120,70,20,.18)}

/* ----- Formularfelder ----- */

.auth-form{text-align:left}

.auth-form-group{margin-bottom:16px;text-align:left}
.auth-form-group label{display:block;font-size:14px;font-weight:900;color:var(--hf-text);margin-bottom:8px}

.auth-form input,
.auth-form-group input{
  width:100%;
  min-height:52px;
  padding:14px 15px;
  border-radius:var(--hf-radius-md);
  border:1px solid var(--hf-border);
  background:#ffffff;
  color:var(--hf-text);
  font-size:16px; /* 16px verhindert Auto-Zoom beim Fokus auf iOS */
  outline:none;
  -webkit-appearance:none;
}
.auth-form input::placeholder{color:#7b6250}
.auth-form input:focus{border-color:var(--hf-orange-light);box-shadow:0 0 0 3px rgba(255,133,0,.18)}

.auth-submit-btn{
  width:100%;
  min-height:54px;
  margin-top:6px;
  border-radius:var(--hf-radius-md);
  border:1px solid rgba(255,180,80,.68);
  background:linear-gradient(180deg,#ff8a00 0%,#d86400 58%,#9b4300 100%);
  color:#ffffff;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(0,0,0,.20);
  -webkit-tap-highlight-color:transparent;
}
.auth-submit-btn:hover,
.auth-submit-btn:active{filter:brightness(1.04)}

/* ----- Links / Footer-Bereich der Karte ----- */

.auth-links-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:17px 0 0;
  font-size:13px;
  color:var(--hf-text-muted);
  text-align:center;
  flex-wrap:wrap;
}

.auth-link{color:var(--hf-orange-light);text-decoration:none;font-weight:900}
.auth-link:hover{text-decoration:underline}
.auth-link-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  border-radius:10px;
  background:linear-gradient(180deg,#ff9a22 0%,#ff8500 100%);
  color:#ffffff !important;
  font-weight:900;
}

.auth-forgot-row{
  display:flex;
  justify-content:flex-end;
  margin-top:-6px;
  margin-bottom:16px;
}
.auth-forgot-row a{font-size:13px;color:var(--hf-orange-light);text-decoration:none;font-weight:800}
.auth-forgot-row a:hover{text-decoration:underline}

.auth-quick-card{
  margin-top:24px;
  padding:18px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(255,145,25,.32);
  text-align:center;
}
.auth-quick-card p{color:var(--hf-text-muted);line-height:1.45;margin-bottom:14px;font-size:14px}

.auth-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-quick-actions a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 10px;
  border-radius:12px;
  border:1px solid rgba(255,145,25,.38);
  background:rgba(255,133,0,.08);
  color:var(--hf-text);
  text-decoration:none;
  font-weight:900;
  text-align:center;
  font-size:14px;
}
.auth-quick-actions a:hover{background:rgba(255,133,0,.16)}

.auth-home-row{text-align:center;margin-top:22px}
.auth-home-row a{color:var(--hf-orange-light);text-decoration:none;font-weight:900}
.auth-home-row a:hover{text-decoration:underline}

.auth-privacy-note{
  margin-top:16px;
  font-size:12px;
  color:var(--hf-text-muted);
  text-align:center;
}
.auth-privacy-note a{color:var(--hf-orange-light);text-decoration:none}

/* ----- Checkbox-Raster für Berufs-/Kategorieauswahl (Registrierung) ----- */

.auth-category-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin:8px 0 18px;
}
.auth-category-check{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:46px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--hf-border-soft);
  background:#ffffff;
  font-size:13px;
  font-weight:700;
  color:var(--hf-text);
  cursor:pointer;
}
.auth-category-check:has(input:checked){
  border-color:var(--hf-orange-light);
  background:rgba(255,133,0,.08);
}
.auth-category-check input{width:18px;height:18px;flex:0 0 18px;accent-color:var(--hf-orange);min-height:0}

/* ==========================================================================
   Footer (gemeinsam mit footer.php)
   ========================================================================== */

.auth-page + .hf-footer,
.hf-footer{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:26px 16px 32px;
  background:rgba(255,255,255,.96);
  border-top:1px solid rgba(255,145,25,.24);
  text-align:center;
  color:var(--hf-text-muted);
}
.hf-footer-links{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center}
.hf-footer-links a{color:#a94d00;font-weight:900;text-decoration:none}
.hf-footer-links a:hover{text-decoration:underline}
.hf-footer-links span{color:rgba(36,23,14,.52);font-weight:800}
.hf-footer-socials{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto}
.hf-footer .hf-footer-social-link{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;min-width:46px;min-height:46px;border:1px solid rgba(255,145,25,.28);border-radius:10px;background:#fff7ed}
.hf-footer .hf-footer-social-link svg{width:34px;height:34px}

/* ==========================================================================
   Responsive – Tablet (zweispaltiges Layout wird einspaltig)
   ========================================================================== */

@media(max-width:1040px){
  .auth-wrap{grid-template-columns:1fr;max-width:620px}
  .auth-brand-card{display:none}
  .auth-card{min-height:auto}
  .auth-logo{display:block}
}

/* ==========================================================================
   Responsive – Mobil
   Ziel: großzügige Touch-Targets (min. 46–48px), genug Abstand zwischen
   tippbaren Elementen, keine horizontalen Scrollbalken, lesbare Schriftgrößen.
   ========================================================================== */

@media(max-width:600px){
  .auth-page{padding:20px 14px 28px}
  .auth-card-inner{padding:26px 20px}
  .auth-card{border-radius:20px}
  .auth-title{font-size:26px}
  .auth-subtitle{font-size:14px}

  .auth-links-row{flex-direction:column;align-items:center;text-align:center;gap:8px}
  .auth-quick-actions{grid-template-columns:1fr}
  .auth-category-grid{grid-template-columns:1fr}

  .auth-oauth-link,
  .auth-submit-btn,
  .auth-form input,
  .auth-form-group input{min-height:50px}

  .auth-quick-card{padding:16px}

  .auth-forgot-row{justify-content:center;margin-top:4px}

  /* Footer-Icons auf Mobil etwas kompakter */
  .hf-footer .hf-footer-social-link{width:36px;height:36px;min-width:36px;min-height:36px}
  .hf-footer .hf-footer-social-link svg{width:27px;height:27px}
}

/* Sehr kleine Bildschirme (ältere/kleine Smartphones) */
@media(max-width:360px){
  .auth-card-inner{padding:20px 16px}
  .auth-title{font-size:23px}
}