*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg,video,canvas{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
:where(h1,h2,h3,h4,p){margin:0}

:root{
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.15);
  --shadow-lg: 0 30px 60px rgba(0,0,0,.35);

  /* Hintergrundfarben (grün) */
  --bg: #0c1a12;
  --bg-soft: #11241a;
  --fg: #e8f2eb;
  --muted: #9cb8a7;
  --card: rgba(17, 36, 26, .85);
  --stroke: rgba(255,255,255,.08);

  /* Akzentfarben (grün) */
  --accent: #2ecc71;
  --accent-2: #27ae60;
}

/* Layout */
body {
  font-family: var(--font-sans);
  background: url("Plants.png") no-repeat center center fixed;
  background-size: cover;       /* fills screen edge to edge */
  background-position: center;  /* keep image centered */
  color: var(--fg);
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Header (zentriert) */
header{ position:relative; z-index:2; max-width:1200px; margin:24px auto 0; padding:0 20px; display:flex; align-items:center; justify-content:center; text-align:center; }
.brand{ display:grid; grid-auto-rows:auto; justify-items:center; gap:8px; text-decoration:none; color:inherit }
.logo{ width:50px; height:50px; border-radius:12px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:white;
  font-size:28px; font-weight:700; font-family:serif; box-shadow: var(--shadow-sm); }
.title-block{ display:grid; justify-items:center; }
.brand h1{ font-size:22px; font-weight:800; margin:0; }
.name{ font-size:16px; color: var(--muted); margin-top:4px }

/* Hero Card */
main{ position:relative; z-index:1; display:grid; place-items:center; padding: 16vh 20px 14vh }
.card{ width:min(880px, 100%); border:1px solid var(--stroke); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-lg); overflow:hidden; backdrop-filter: blur(22px) saturate(140%); }
.hero{ padding: clamp(32px, 6vw, 60px); display:grid; gap:18px; text-align:center; }
.title{ font-size: clamp(32px, 6vw, 50px); line-height:1.1; font-weight:800 }
.subtitle{ font-size: clamp(15px, 2.6vw, 18px); color: var(--muted); margin-top:6px }

/* Formular */
.form {
  display: flex;
  flex-direction: column; /* stack vertically */
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
  align-items: center; /* keep centered */
}
.input{ min-width:min(360px, 100%); padding:14px 14px; border-radius:12px; border:1px solid var(--stroke); background: rgba(255,255,255,.08); color:inherit; outline:none; }
.btn {
  padding:14px 15px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.15);
  background: #ffffff;      /* white background */
  color: #222222;           /* dark text for contrast */
  font-weight:700;
  cursor:pointer;
  transition: transform .15s ease, filter .2s ease;
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  transform: translateY(-1px);
  filter: brightness(0.95); /* subtle hover dim */
}


/* Footer (derzeit deaktiviert/auskommentiert in HTML) */
footer{ position:relative; z-index:1; padding:24px 20px; color:var(--muted); }
.foot-inner{ max-width: 1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px }
.links a{ color:inherit; text-decoration:none; border-bottom:1px dashed rgba(127,127,127,.35); padding-bottom:2px }
.links a:hover{ color:var(--fg) }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* space between spinner and text */
}
.btn svg {
  flex-shrink: 0;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Brand container spacing (optional, keeps it tidy) */
header .brand { gap: 12px; }


.full-logo {
  filter: brightness(0) invert(1);	
  display: block;
  max-width: 600px;
  height: auto;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  main { padding: 10vh 16px; }             /* less side padding */
  .hero { padding: 24px; gap: 14px; }       /* tighter card padding */
  header { margin-top: 12px; }

  /* Inputs/buttons must not have a desktop minimum */
  .form { width: 100%; }
  .input,
  .btn {
    width: 100%;
    min-width: 0;            /* override the 360px minimum */
    font-size: 16px;         /* prevent iOS zoom-on-focus */
  }

  /* Keep the logo from dominating */
  .full-logo { max-width: 80vw; }

  /* Optional: soften visuals on tiny screens */
  .card { border-radius: 12px; }
  .aurora { opacity: .45; }  /* can set to display:none; if you want max speed */
}

/* Also fix the desktop-enforcing min width globally */
.input { 
  /* was: min-width: min(360px, 100%); */
  width: 100%;
  min-width: 0;
}

/* Mobile-only: make button smaller */
@media (max-width: 600px) {
  .btn {
    width: auto;         /* shrink to fit text */
    min-width: 140px;    /* give it a consistent minimum */
    padding: 12px 18px;  /* slightly tighter spacing */
  }
}

/* Desktop-only: limit input width, keep button below */
@media (min-width: 768px) {
  .form {
    flex-direction: column;    /* stack vertically */
    align-items: center;
  }
  .input {
    max-width: 360px;          /* constrain width */
    width: 100%;
  }
  .btn {
    width: auto;               /* button hugs text */
    min-width: 140px;
    margin-top: 10px;          /* spacing below input */
  }
}

/* Center text inside the email box */
.input {
  text-align: center;
}