/* =====================
   Variablen & Basis
   ===================== */
:root {
  --glass-bg:
    radial-gradient(40% 40% at 50% 52%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 70%),
    radial-gradient(120% 120% at 30% 30%, #ffffff 0%, #eef7ff 40%, #dbeeff 70%, #cfe6ff 100%);
  --glass-border: 2px solid rgba(70,130,180,0.35);
  --glass-shadow:
    inset 0 2px 8px rgba(255,255,255,0.9),
    inset 0 -10px 20px rgba(70,130,180,0.18),
    0 10px 24px rgba(17,63,102,0.22);
  --text-color: #0f2542;

  --link-color: #0b63ff;
  --link-hover: #084bc5;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(to top, #87ceeb 0%, #b0e0e6 50%, #ffffff 100%);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text-color);
}

/* =====================
   Header
   ===================== */
.site-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 21px 32px 0;
  backdrop-filter: blur(6px);
}
.logo { height: 150px; flex-shrink: 0; }
.header-actions { flex: 1 1 auto; display: flex; align-items: center; padding-left: 230px; }

.back-link {
  width: 150px; height: 140px; border-radius: 50%;
  display: flex; justify-content: center; align-items: center; text-align: center;
  padding: 10px; color: #0f2542; font-weight: bold; font-size: 22px; text-decoration: none;
  background: var(--glass-bg); border: var(--glass-border); box-shadow: var(--glass-shadow);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7), 0 0 6px rgba(15,37,66,0.22);
  animation: float 6s ease-in-out infinite; transition: transform .15s ease, color .15s ease;
}
.back-link:hover { color: #ff4500; transform: translateY(-2px); }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

@media (max-width:780px){
  .site-header{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"logo back"; padding:12px 16px 0; }
  .logo{ grid-area:logo; height:70px; }
  .header-actions{ grid-area:back; padding-left:0; justify-content:end; }
  .back-link{ width:auto; height:auto; border-radius:999px; padding:8px 14px; font-size:16px; animation:none; }
}

/* =====================
   Hauptinhalt
   ===================== */
.page-main { padding: 40px 24px; flex: 1 0 auto; }
.content-box {
  max-width: 1000px; margin: 20px auto; padding: 32px; border-radius: 24px;
  background: var(--glass-bg); border: var(--glass-border); box-shadow: var(--glass-shadow);
  color: var(--text-color);
}

/* =====================
   Formular
   ===================== */
.form-glass { width: 100%; }
.form-rows { margin: 0; padding: 0; border: 0; }

.row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px;
}
.field { display: flex; flex-direction: column; }
.span-2 { grid-column: 1 / -1; }

label { font-weight: 600; font-size: 14px; margin-bottom: 6px; }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(70,130,180,0.35); background: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); font-size: 16px; color: var(--text-color);
}
textarea { resize: vertical; }
input::placeholder { color: rgba(15,37,66,0.55); }

.actions { display: flex; gap: 10px; margin-top: 8px; }
.btn-primary, .btn-ghost {
  padding: 12px 18px; border-radius: 14px; font-weight: 800; font-size: 16px; cursor: pointer;
}
.btn-primary {
  border: 2px solid rgba(70,130,180,0.35);
  background: radial-gradient(100% 100% at 30% 20%, #ffffff 0%, #eef7ff 50%, #dbeeff 100%);
  box-shadow: var(--glass-shadow); color: #0f2542;
}
.btn-primary:hover { color: #ff4500; }
.btn-ghost { border: 2px dashed rgba(70,130,180,0.35); background: rgba(255,255,255,0.6); color:#0f2542; }
.btn-ghost:hover { border-style: solid; }

/* =====================
   Kombi: Date + Auswertung im selben Feld
   ===================== */
.date-age-wrap{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(70,130,180,0.35);
  background: rgba(255,255,255,0.96);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
  box-sizing: border-box;
  min-width:0;
}

/* Der Date-Input „nahtlos“ in der Box */
.date-age-wrap input[type="date"]{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0;
  font-size:16px; line-height:1;
  color: var(--text-color);
  outline:none;
  flex:1 1 auto;
  min-width:0;
}

/* Anzeige Jahre/Monate rechts im selben Feld */
.age-badge{
  font-weight:600;
  color: var(--text-color);
  white-space:nowrap;
  flex:0 0 auto;
}

/* Mobile 1-spaltig */
@media (max-width: 720px){ .row { grid-template-columns: 1fr; } }

/* z. B. bis 600px Breite als "Handy" */
@media (max-width: 600px) {
  .date-age .age-badge {
    display: none;     /* Badge verschwindet */
  }

  /* optional etwas kompakter */
  .date-age .date-age-wrap {
    gap: 0.25rem;
  }
}


/* Einheitliches Styling Date/Number */
input[type="date"], input[type="number"]{
  appearance: none; -webkit-appearance: none; -moz-appearance: textfield;
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(70,130,180,0.35); background: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); font-size: 16px; color: var(--text-color);
}
/* Nur wenn direktes Kind von .field */
.field > input[type="date"],
.field > input[type="number"] {
  appearance: none; -webkit-appearance: none; -moz-appearance: textfield;
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(70,130,180,0.35); background: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
  font-size: 16px; color: var(--text-color);
}

/* ===================== */
 /* Checkbox + Text linksbündig mit schönem Umbruch */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  line-height: 1.4;
  text-align: left;
}
.checkbox-row input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0;
}
.field.span-2.checkbox-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px; width: 100%; text-align: left;
}
.field.span-2.checkbox-row label {
  margin: 0; display: block; flex: 1 1 0; min-width: 0;
  white-space: normal; word-break: break-word; text-align: left;
}

/* =====================
   Modal (A4 Desktop, Fullscreen Mobile)
   ===================== */
.doc-modal { display: none; border: 0; padding: 0; background: transparent; }
.doc-modal[open]{
  display: flex; position: fixed; inset: 0;
  align-items: center; justify-content: center;
  padding: 2vh; z-index: 10000; background: transparent;
}
.doc-modal::backdrop { background: rgba(0,0,0,.55); }
.doc-modal[open]::before{
  content:""; position: fixed; inset:0; background: rgba(0,0,0,.55); z-index:-1;
}
.doc-modal-inner{
  aspect-ratio: 210 / 297;
  width: min(90vw, 210mm, calc(90vh * 210 / 297));
  height: auto; max-height: 90vh;
  background: #fff; border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  overflow: hidden; position: relative; display: block;
}
.doc-image, .doc-pdf{
  width: 100%; height: 100%;
  object-fit: contain; display: block; border: 0;
}
.doc-actions{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .65rem 1rem; background: #fafafa; border-top: 1px solid #eee;
  text-align: center; font-size: .95rem;
}
.doc-actions .sep{ margin: 0 .5rem; color: #999; }
.doc-close{
  position: absolute; top: .5rem; right: .5rem;
  width: 36px; height: 36px; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.85); font-size: 1.3rem; line-height: 1; cursor: pointer;
}

@media (max-width: 720px){
  .doc-modal[open]{ padding: 0; }
  .doc-modal-inner{
    width: 100vw;
    height: 100vh;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .doc-image, .doc-pdf{ width: 100%; height: 100%; object-fit: contain; }
  .doc-close{ top: 12px; right: 12px; }
}

/* A11y Helper */
.visually-hidden {
  position: absolute !important; height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* Optionale Kleinigkeiten */
.sex-group { display: flex; gap: 16px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }

/* =====================
   Honeypot (unsichtbar)
   ===================== */
.honeypot{
  position:absolute!important;
  left:-9999px!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
  visibility:hidden;
}

/* Honeypot wirklich unsichtbar – auch mobil */
.honeypot,
.honeypot input,
input[name="firma_hp"] {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}
es ist weg, wow


/* =====================
   FINAL OVERRIDES: Geburtsdatum
   ===================== */

/* Date-Input in der Kombibox bleibt randlos und bricht nicht aus */
.field.date-age .date-age-wrap input[type="date"]{
  border:0 !important; background:transparent !important;
  padding:0 !important; margin:0; outline:none;
  width:auto; flex:1 1 auto; min-width:0;
}

/* =====================
   FINAL OVERRIDES: Versteckte Steuerfelder
   ===================== */
/* Das Hidden-Feld fürs PHP-Routing wirklich unsichtbar halten – auch wenn globale Input-Styles greifen */
input[name="FormularTitel"],
input[type="hidden"] {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}