/* SECPLAN kontakt.secplan.de – gemeinsames Design für alle Formularseiten */
:root{
  --sec-blue:#1d3661; --sec-blue-dark:#152a4d; --sec-accent:#2f6fb3;
  --ink:#1f2937; --muted:#6b7280; --line:#d7deea; --bg:#eef2f8; --card:#ffffff;
  --ok:#15803d; --err:#b91c1c;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--sec-accent)}
.wrap{max-width:720px;margin:0 auto;padding:0 20px}
header.top{background:var(--sec-blue);color:#fff}
header.top .wrap{display:flex;align-items:center;gap:14px;padding:16px 20px}
header.top img{height:40px;width:auto;display:block}
header.top .tag{margin-left:auto;font-size:.8rem;opacity:.85;letter-spacing:.02em}
.hero-banner{display:block;width:100%;height:auto;border-radius:10px;margin-bottom:26px;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.hero{background:linear-gradient(160deg,var(--sec-blue) 0%,var(--sec-blue-dark) 100%);color:#fff;
  padding:44px 0 40px}
.hero h1{margin:0 0 10px;font-size:1.75rem;line-height:1.2}
.hero p{margin:0;font-size:1.05rem;opacity:.92;max-width:52ch}
.hero .meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.hero .meta span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:6px 14px;font-size:.85rem}
main{padding:34px 0 60px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 3px rgba(20,42,77,.06);padding:26px 24px;margin-bottom:22px}
.card h2{margin:0 0 4px;font-size:1.15rem;color:var(--sec-blue)}
.card .hint{margin:0 0 18px;color:var(--muted);font-size:.9rem}
form{display:flex;flex-direction:column;gap:0}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>label{flex:1 1 220px}
label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;font-weight:600;
  color:var(--sec-blue);margin-bottom:14px}
input[type=text],input[type=email],input[type=tel],textarea{
  font:inherit;font-weight:400;color:var(--ink);background:#fff;border:1px solid #cbd5e1;
  border-radius:9px;padding:11px 13px;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--sec-blue);
  box-shadow:0 0 0 3px rgba(29,54,97,.14)}
textarea{resize:vertical;min-height:96px}
.ticket{border:1px solid var(--line);border-radius:11px;padding:16px 16px 2px;margin-bottom:14px;
  background:#f8fafc;position:relative}
.ticket .thead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ticket .tnum{font-size:.8rem;font-weight:700;color:var(--sec-blue);text-transform:uppercase;
  letter-spacing:.04em}
.ticket .rm{background:none;border:0;color:var(--err);font-size:.82rem;font-weight:600;cursor:pointer;
  padding:2px 4px}
.ticket .rm:hover{text-decoration:underline}
.addbtn{align-self:flex-start;background:#eef4fb;color:var(--sec-blue);border:1px dashed var(--sec-accent);
  border-radius:9px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer;margin-bottom:6px}
.addbtn:hover{background:#e2edf9}
.addbtn[disabled]{opacity:.5;cursor:not-allowed}
.consent{flex-direction:row;align-items:flex-start;gap:.6rem;font-weight:400;color:#374151;font-size:.85rem}
.consent input{margin-top:.2rem;flex:0 0 auto;width:auto}
.submit{align-self:flex-start;background:var(--sec-blue);color:#fff;border:0;border-radius:10px;
  padding:14px 30px;font:inherit;font-weight:700;cursor:pointer;font-size:1rem}
.submit:hover{background:var(--sec-blue-dark)}
.note{font-size:.8rem;color:var(--muted);font-weight:400;margin:14px 0 0}
.warn{color:var(--err);font-size:.85rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin:6px 0 4px}
footer{border-top:1px solid var(--line);padding:22px 0;color:var(--muted);font-size:.82rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:6px 18px}
/* Danke-Seite */
.danke{max-width:620px;margin:60px auto;padding:0 20px;text-align:center}
.danke .icon{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;font-size:2.2rem}
.danke .icon.ok{background:#dcfce7;color:var(--ok)}
.danke .icon.err{background:#fee2e2;color:var(--err)}
.danke h1{color:var(--sec-blue);font-size:1.5rem;margin:0 0 10px}
.danke p{color:var(--muted);font-size:1rem;margin:0 auto 26px;max-width:44ch}
.danke a.btn{display:inline-block;background:var(--sec-blue);color:#fff;text-decoration:none;
  border-radius:10px;padding:12px 26px;font-weight:600}
.danke a.btn:hover{background:var(--sec-blue-dark)}
@media(max-width:560px){.hero h1{font-size:1.45rem}}