/* Little Family Planner - InPrivy Branding (v2) */
/* Speziell auf InPrivys Markup angepasst: .logo, .btn, .bg-slate-100 */

:root {
  --lfp-bg: #f9fafb;
  --lfp-bg-card: #ffffff;
  --lfp-text: #111827;
  --lfp-text-muted: #6b7280;
  --lfp-brand-from: #2563eb;
  --lfp-brand-to: #9333ea;
  --lfp-border: #e5e7eb;
}

/* Body — InPrivy injiziert background-color INLINE nach uns. Mit !important und body
   selector forcen wir uns. Die spaeter geladene .logo-Sektion bekommt eigenes BG. */
html body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background-color: var(--lfp-bg) !important;
  color: var(--lfp-text);
}

/* Hero/Logo-Bereich: InPrivys .pb-[15vh].pt-[10vh].bg-slate-100 → unser Brand-Gradient */
.bg-slate-100 {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, var(--lfp-brand-from), var(--lfp-brand-to)) !important;
}

/* InPrivy-Logo verstecken UND durch unseres ersetzen */
.logo img {
  display: none !important;
}
.logo {
  min-height: 170px;
  padding-top: 10px;
  background-image: url('https://littlefamilyplanner.com/icons/icon-512-maskable-nobg.png');
  background-repeat: no-repeat;
  background-position: center 10px;
  background-size: 96px 96px;
  position: relative;
}
.logo::after {
  content: 'Little Family Planner';
  display: block;
  position: absolute;
  bottom: 18px;
  left: 0; right: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Buttons — InPrivys Inline-Style setzt .btn{background-color:#2249B3}.
   Wir nutzen html-prefix fuer hoehere Spezifitaet und !important. */
html .btn,
html button.btn,
html a.btn {
  background-color: var(--lfp-brand-from) !important;
  background-image: linear-gradient(135deg, var(--lfp-brand-from), var(--lfp-brand-to)) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  text-decoration: none !important;
  display: inline-block;
}
html .btn:hover,
html button.btn:hover,
html a.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35) !important;
}

/* Cards — die .max-w-2xl.bg-white.rounded-xl.shadow-2xl Karte */
.bg-white {
  background-color: var(--lfp-bg-card) !important;
}
.rounded-xl {
  border-radius: 16px !important;
}

/* Headings */
h1, h2, h3, h4 {
  color: var(--lfp-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Inputs (Passwort-Eingabe) */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  background-color: var(--lfp-bg-card) !important;
  color: var(--lfp-text) !important;
  border: 1px solid var(--lfp-border) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--lfp-brand-from) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Links */
a:not(.btn) {
  color: var(--lfp-brand-from);
  text-decoration: none;
}
a:not(.btn):hover {
  color: var(--lfp-brand-to);
  text-decoration: underline;
}

/* Footer-Branding */
body::after {
  content: 'Sicher geteilt via Little Family Planner - littlefamilyplanner.com';
  display: block;
  text-align: center;
  padding: 24px 16px;
  font-size: 11px;
  color: var(--lfp-text-muted);
  background: transparent;
}