/* ===== Farbwelt (angepasst) ===== */
:root{
  --mint:#a8d5c8;
  --mint-strong:#7fbdaa;
  --mint-dark:#2f6f64;
  --ink:#1f2a2e;
  --ink-soft:#405055;
  --bg:#f3f6f5;
  --card:#ffffff;
  --border:#d9e8e3;
  --header-dark:#2e343a;      /* dunkler Kopfbereich fürs Logo */
  --header-dark-2:#3a4148;
}

/* ===== Basis ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
.container{max-width:980px;margin:0 auto;padding:16px}

/* ===== Header (dunkel/grau hinter Logo) ===== */
.site-header{
  background: linear-gradient(180deg, var(--header-dark), var(--header-dark-2));
  color:#fff; position:sticky; top:0; z-index:20;
  box-shadow:0 4px 18px rgba(0,0,0,.15);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px; min-height:76px}
.brand-logo{height:62px; display:block; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.header-meta .tel{font-weight:700; letter-spacing:.3px}

/* ===== Footer ===== */
.site-footer{margin-top:48px;border-top:1px solid var(--border);background:#fff}
.footer-inner{padding:14px 16px;color:#5b6a6e}
.footer-inner a{color:#4a7e74;text-decoration:none}
.footer-inner a:hover{text-decoration:underline}

/* ===== Card / Gruppen (besser erkennbar) ===== */
.card{
  background:var(--card);
  border-radius:18px;
  border:2px solid var(--border);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  padding:22px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:6px;
  background:linear-gradient(90deg, var(--mint-strong), var(--mint-dark));
  opacity:.9;
}
.card-title{margin:0 0 6px; font-size:1.7rem}
.lead{margin:.25rem 0 1rem; color:var(--ink-soft)}

.group{
  border:2px solid var(--border);
  border-radius:14px;
  padding:16px; margin:16px 0;
  background:#fff;
  position:relative;
}
.group:hover{border-color:#cfe6df; box-shadow:0 6px 16px rgba(0,0,0,.05)}
.group>legend{margin:0 0 8px; padding:0; border:0}
.legend-badge{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background: rgba(168,213,200,.25); color:#234a43; font-weight:700;
  border:1px solid rgba(127,189,170,.65);
  backdrop-filter:saturate(1.1);
}
.legend-badge.accent{background:rgba(127,189,170,.25); border-color:var(--mint-strong)}

/* ===== Form ===== */
.form-grid{display:block}
label{display:block;font-weight:600;margin:10px 0 6px}
input,select,textarea{
  width:100%; padding:12px 12px; border:2px solid var(--border); border-radius:10px;
  background:#fbfdfc; font:inherit; color:inherit; outline:none;
  transition:border .15s, box-shadow .15s, transform .08s ease;
}
input:hover,textarea:hover,select:hover{border-color:#cfe6df}
input:focus,textarea:focus,select:focus{
  border-color:var(--mint-strong);
  box-shadow:0 0 0 5px rgba(127,189,170,.25);
  transform:translateY(-1px);
}
input[type="checkbox"],input[type="radio"]{width:auto;margin-right:8px;transform:translateY(1px)}
.check{display:flex;align-items:center;gap:10px;font-weight:600}
.radio .radio-row{display:flex;gap:16px;margin-top:8px;font-weight:600}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:760px){ .grid-2,.grid-3{grid-template-columns:1fr} }

.note{margin:.25rem 0 .6rem;color:#566a6f;font-weight:500}

/* ===== Buttons ===== */
.actions{margin-top:14px}
.btn{
  appearance:none;border:0;background:var(--mint-strong);color:#fff;font-weight:800;
  padding:13px 22px;border-radius:14px;cursor:pointer;
  box-shadow:0 10px 24px rgba(127,189,170,.35);
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(127,189,170,.4)}
.btn:active{transform:translateY(0)}
.btn:focus{outline:4px solid rgba(47,111,100,.3)}
.btn-cta{background:linear-gradient(180deg, var(--mint-strong), var(--mint-dark))}

/* ===== Flash ===== */
.flash-stack{margin-bottom:12px}
.alert{padding:12px 14px;border-radius:10px;margin:8px 0;border:1px solid transparent}
.alert.success{background:#e8f7f1;border-color:#cdeee0;color:#1d4a3f}
.alert.warning{background:#fff6e5;border-color:#ffe2a8;color:#553f10}
.alert.danger{background:#ffeaea;border-color:#ffb9b9;color:#7a1f1f}

/* ===== Effekte / Animationen (dezent) ===== */
.elevate{box-shadow:0 10px 26px rgba(0,0,0,.08)}
.elevate-sm{box-shadow:0 6px 16px rgba(0,0,0,.06)}
.fade-in{opacity:0; animation:fadeIn .45s forwards ease-out}
.page-enter{opacity:0; animation:rise .5s .05s forwards ease-out}
.fade-pop{animation:pop .22s ease-out}

@keyframes fadeIn{to{opacity:1}}
@keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
@keyframes pop{from{transform:scale(.98)} to{transform:scale(1)}}

/* Bewegungen reduzieren respektieren */
@media (prefers-reduced-motion: reduce){
  .fade-in,.page-enter,.fade-pop{animation:none}
}

/* ===== Kleinigkeiten ===== */
.privacy-hint{margin-top:12px;color:#64777b}
a{color:#2f6f64} a:hover{text-decoration:underline}