/* Ritzer Hof – Anmeldeformular Kindergeburtstag
   Farben aus dem Original-PDF entnommen. Keine externen Ressourcen (DSGVO). */

:root{
  --dunkel:#192b1d;
  --gruen:#2d6233;
  --gruen-hell:#e7efe7;
  --gold:#f2b90b;
  --rot:#b52125;
  --creme:#f5efe3;
  --karte:#ffffff;
  --text:#2b2b28;
  --grau:#6b6f6a;
  --rahmen:#ddd6c7;
  --radius:10px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--creme);
  color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
}

.wrap{max-width:900px;margin:0 auto;padding:24px 16px 48px}

/* ---------- Kopf ---------- */
.hero{
  background:var(--dunkel);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:28px 28px 24px;
  display:flex;
  align-items:center;
  gap:20px;
}
.hero-text{flex:1;min-width:0}
.hero h1{
  margin:0 0 6px;
  color:var(--gold);
  font-size:clamp(1.5rem,4.2vw,2.25rem);
  line-height:1.15;
  font-weight:800;
  letter-spacing:.2px;
}
.hero p{margin:0;color:#d8ded6;font-size:.95rem}
.hero-logo{
  width:96px;height:96px;flex:0 0 auto;border-radius:50%;
}

/* ---------- Blatt ---------- */
.sheet{
  background:var(--creme);
  border:1px solid var(--rahmen);
  border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  padding:24px 28px 32px;
}
.lead{margin:0 0 22px;color:#444}

/* ---------- Abschnittsbalken ---------- */
.section{
  background:var(--gruen);
  color:#fff;
  font-size:1.05rem;
  font-weight:700;
  margin:30px 0 18px;
  padding:9px 16px;
  border-radius:6px;
}
.section:first-of-type{margin-top:10px}

/* ---------- Raster & Felder ---------- */
.grid{display:flex;flex-wrap:wrap;gap:16px}
.f{flex:1 1 100%;min-width:0}
.col-3{flex:1 1 calc(25% - 12px)}
.col-6{flex:1 1 calc(50% - 8px)}
.col-12{flex:1 1 100%}

label{display:block;font-weight:600;font-size:.9rem;margin-bottom:5px;color:#333}
.req{color:var(--rot);font-weight:700}

input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--rahmen);
  border-radius:6px;
  background:var(--karte);
  font:inherit;
  color:var(--text);
}
textarea{resize:vertical;min-height:92px}
input:focus,textarea:focus{
  outline:none;
  border-color:var(--gruen);
  box-shadow:0 0 0 3px rgba(45,98,51,.16);
}
input.fehler,textarea.fehler{border-color:var(--rot);background:#fdf4f4}

/* ---------- Pakete ---------- */
.pakete{display:flex;flex-direction:column;gap:12px}
.paket{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:var(--karte);
  border:1px solid var(--rahmen);
  border-radius:var(--radius);
  padding:16px;
  cursor:pointer;
  font-weight:400;
  margin:0;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.paket:hover{border-color:var(--gruen)}
.paket:has(input:checked){
  border-color:var(--gruen);
  background:var(--gruen-hell);
  box-shadow:0 0 0 2px rgba(45,98,51,.25);
}
.paket:has(input:focus-visible){box-shadow:0 0 0 3px rgba(45,98,51,.35)}
.paket input[type=radio]{
  margin:4px 0 0;
  width:20px;height:20px;
  accent-color:var(--gruen);
  flex:0 0 auto;
}
.badge{
  flex:0 0 auto;
  width:34px;height:34px;
  border-radius:50%;
  color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.badge-rot{background:var(--rot)}
.badge-gruen{background:var(--gruen)}
.paket-body{display:block;min-width:0}
.paket-titel{display:block;font-weight:700;font-size:1.05rem;color:var(--dunkel)}
.paket-sub{display:block;font-weight:700;font-size:.85rem;color:var(--gruen);text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
.paket-meta{display:block;font-weight:700;font-size:.85rem;color:#3c3c38;margin:4px 0 6px}
.paket-text{display:block;font-size:.88rem;color:#55554f}
.pakete.fehler-gruppe .paket{border-color:var(--rot)}

/* ---------- Checkboxen ---------- */
.check{
  display:flex;align-items:flex-start;gap:11px;
  font-weight:400;font-size:.92rem;margin-bottom:12px;cursor:pointer;
}
.check:last-child{margin-bottom:0}
.check input[type=checkbox]{
  width:19px;height:19px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--gruen);
}
.check input.fehler{outline:2px solid var(--rot);outline-offset:2px}

.bestaetigung{
  background:var(--karte);
  border:1px solid var(--rahmen);
  border-radius:var(--radius);
  padding:18px;
  margin:20px 0;
}
.consent-inline{
  margin-top:10px;
  background:#fffaf0;
  border:1px solid #efdca8;
  border-radius:6px;
  padding:12px 14px;
}

/* ---------- Datenschutz ---------- */
.datenschutz{
  background:var(--karte);
  border-left:4px solid var(--gruen);
  border-radius:6px;
  padding:18px 20px;
  margin:24px 0;
  font-size:.88rem;
}
.datenschutz h3{margin:0 0 8px;font-size:1rem;color:var(--dunkel)}
.datenschutz p{margin:0 0 12px;color:#4a4a45}

/* ---------- Meldungen ---------- */
.alert{border-radius:var(--radius);padding:20px 22px;margin-bottom:22px}
.alert h2{margin:0 0 8px;font-size:1.15rem}
.alert p{margin:0 0 6px}
.alert .mb-0{margin-bottom:0}
.alert-success{background:#e7efe7;border:1px solid var(--gruen);color:#1d3f23}
.alert-error{background:#fdf0f0;border:1px solid var(--rot);color:#7c1519}
.fehler-text{color:var(--rot);font-size:.88rem;font-weight:600;margin:8px 0 0}

/* ---------- Absenden ---------- */
.submit-zeile{text-align:center;margin:28px 0 6px}
.btn{
  background:var(--gruen);color:#fff;border:none;
  padding:14px 34px;font:inherit;font-weight:700;font-size:1.05rem;
  border-radius:999px;cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.btn:hover:not(:disabled){background:#24502a;transform:translateY(-1px)}
.btn:disabled{opacity:.65;cursor:progress}
.hinweis-klein{font-size:.82rem;color:var(--grau);margin:10px 0 0}
.hinweis-klein.mt{margin-top:12px}

/* ---------- Kontakt & Fuß ---------- */
.kontaktbox{
  background:var(--dunkel);color:#e6e9e3;
  border-radius:var(--radius);
  padding:22px 24px;margin-top:32px;
}
.kontaktbox h3{margin:0 0 12px;color:var(--gold);font-size:1.05rem}
.kontakt-grid{display:flex;flex-wrap:wrap;gap:20px}
.kontakt-grid>div{flex:1 1 260px}
.kontaktbox p{margin:0 0 8px;font-size:.92rem}
.kontaktbox a{color:var(--gold)}

.fuss{margin-top:22px;padding-top:14px;border-top:2px solid var(--rahmen);font-size:.8rem;color:var(--grau)}
.fuss p{margin:0 0 4px}
.fuss-akzent{color:var(--rot);font-weight:700}

/* Honeypot: für Menschen unsichtbar, aber nicht display:none (Bots prüfen darauf) */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- Mobil ---------- */
@media (max-width:760px){
  .wrap{padding:12px 10px 32px}
  .hero{flex-direction:column;text-align:center;padding:22px 18px}
  .hero-logo{width:80px;height:80px}
  .sheet{padding:18px 16px 24px}
  .col-3,.col-6{flex:1 1 100%}
  .paket{flex-wrap:wrap}
}

/* ---------- Druck ---------- */
@media print{
  body{background:#fff}
  .submit-zeile,.datenschutz .check{display:none}
  .wrap{max-width:none}
}

/* Nachtrag: PDF-Hinweis unter dem Einleitungstext */
.lead-klein{font-size:.86rem;color:var(--grau)}
.lead-klein a{color:var(--gruen)}