/* ===== Centy – Liquid Glass UI (Form + Danke) ===== */
:root{
  --bg1:#eef2f7;
  --bg2:#f8fafc;
  --fg:#0f172a;
  --muted:#475569;
  --brand:#0ea5e9;
  --ok:#16a34a;
  --err:#dc2626;
  --glass-bg: rgba(255,255,255,.35);
  --glass-brd: rgba(255,255,255,.4);
  --glass-blur: 16px;
  --shadow: 0 8px 30px rgba(15, 23, 42, .12);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg1:#0b1220;
    --bg2:#0f172a;
    --fg:#e2e8f0;
    --muted:#94a3b8;
    --glass-bg: rgba(15, 23, 42, .42);
    --glass-brd: rgba(148,163,184,.22);
    --shadow: 0 10px 34px rgba(2,6,23,.45);
  }
}

*{box-sizing:border-box}

/* Hintergrund mit leichtem Tilt-Gradient + subtiler Körnung */
body{
  margin:0;
  min-height:100dvh;
  display:grid;
  place-items:center;
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(14,165,233,.12), transparent 60%),
    radial-gradient(1000px 700px at 90% 90%, rgba(99,102,241,.10), transparent 60%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, system-ui, sans-serif;
  color:var(--fg);
  padding:24px;
}

/* zentrierter Rahmen */
.container{
  width:min(920px, 100%);
  display:flex;
  justify-content:center;
  align-items:center;
}

/* Liquid Glass Card */
.glass-container{
  width:min(440px, 100%);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  border:1px solid var(--glass-brd);
  border-radius: 22px;
  padding: 32px 26px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: pop .35s ease-out both;
}
.glass-container:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(2,6,23,.18);
}

@keyframes pop{
  from{ transform: scale(.985); opacity:0 }
  to{ transform: scale(1); opacity:1 }
}

/* Headings & Text */
.glass-container h1{
  margin:0 0 8px 0;
  font-size: clamp(22px, 3.6vw, 28px);
  letter-spacing:.2px;
}
.lead{
  margin:0 0 18px 0;
  color:var(--muted);
  font-size:14.5px;
}

/* Badges (optional) */
.badge{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  color:var(--brand);
  background: rgba(14,165,233,.12);
  border:1px solid rgba(14,165,233,.28);
  padding:4px 8px;
  border-radius:999px;
}

/* Formular */
form{ margin-top:10px }

input, textarea{
  width:100%;
  padding:12px 14px;
  margin:0 0 14px 0;
  border-radius:12px;
  border:1px solid var(--glass-brd);
  background: rgba(255,255,255,.55);
  color:var(--fg);
  outline:none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (prefers-color-scheme: dark){
  input, textarea{
    background: rgba(15,23,42,.55);
  }
}
input::placeholder, textarea::placeholder{ color: color-mix(in oklab, var(--muted) 85%, transparent) }

input:focus, textarea:focus{
  border-color: color-mix(in oklab, var(--brand) 60%, var(--fg));
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand) 16%, transparent);
  background: rgba(255,255,255,.7);
}
@media (prefers-color-scheme: dark){
  input:focus, textarea:focus{
    background: rgba(15,23,42,.72);
  }
}

textarea{
  min-height: 120px;
  resize: vertical;
}

/* Button */
button{
  width:100%;
  padding: 12px 16px;
  border:0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  color: var(--fg);
  cursor:pointer;
  font-weight: 600;
  letter-spacing:.2px;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 16px rgba(2,6,23,.12), inset 0 0 0 1px var(--glass-brd);
}
@media (hover:hover){
  button:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(2,6,23,.16), inset 0 0 0 1px rgba(14,165,233,.35);
  }
}
button:active{ transform: translateY(0) scale(.997) }

button:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Inline-Messages */
.msg{
  margin-top:10px;
  font-size:14px;
  color:var(--muted);
}
.msg.ok{ color:var(--ok) }
.msg.err{ color:var(--err) }

/* Danke-Seite Zusatz */
.success{
  text-align:center;
  padding-top: 10px;
}
.success .icon{
  width:72px; height:72px; margin:0 auto 12px auto;
  border-radius:20px;
  display:grid; place-items:center;
  background: rgba(22,163,74,.14);
  border:1px solid rgba(22,163,74,.25);
  box-shadow: 0 8px 24px rgba(22,163,74,.18) inset;
}
.success .icon svg{
  width:32px; height:32px;
}

/* Link zurück */
a.btn-link{
  display:inline-block;
  margin-top:12px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--glass-brd);
  text-decoration:none;
  color:var(--fg);
  background: rgba(255,255,255,.45);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
a.btn-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2,6,23,.14);
}

/* Kleinbildschirme */
@media (max-width:480px){
  .glass-container{ padding: 24px 18px; border-radius:18px }
}