/* KlickWeiser – Stylesheet (keine externen Ressourcen) */
@font-face{font-family:"Poppins";src:url("fonts/Poppins-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --navy-d:#041434; --navy:#06214d; --card:#0b2d63; --card-2:#0f3a7a;
  --mint:#3DDC97; --mint-d:#2bbf80; --text:#F5F7FA; --muted:#C3D0E0;
  --line:rgba(255,255,255,.14); --focus:#FFD34D; --radius:18px;
}
*{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.125rem;line-height:1.65;color:var(--text);
  background:linear-gradient(180deg,var(--navy-d) 0%,#061c46 100%) fixed;}
a{color:var(--mint);text-underline-offset:3px}
a:hover{color:#7ff0bf}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--mint);color:var(--navy-d);padding:.75rem 1rem;font-weight:600;z-index:10}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:560px;margin:0 auto;padding:2.5rem 1.25rem 2rem}
.wrap.wide{max-width:780px}

/* Kopf */
.hero{text-align:center}
.logo{width:132px;height:132px;border-radius:50%;display:block;margin:0 auto 1rem;
  box-shadow:0 0 0 4px rgba(61,220,151,.25),0 10px 30px rgba(0,0,0,.35);object-fit:cover}
.hero h1{font-size:2.1rem;line-height:1.2;margin:.25rem 0 .5rem;font-weight:700;letter-spacing:-.01em}
.hero h1 .accent{color:var(--mint)}
.tagline{font-size:1.15rem;color:var(--muted);margin:0 auto 1.25rem;max-width:30em}
.badge{display:inline-block;font-size:1rem;font-weight:600;color:var(--navy-d);background:var(--mint);
  border-radius:999px;padding:.3rem .9rem;margin-bottom:1.5rem}

/* Hinweis Werbelinks */
.note{background:rgba(61,220,151,.08);border:1px solid rgba(61,220,151,.35);border-radius:var(--radius);
  padding:1rem 1.1rem;font-size:1rem;line-height:1.55;color:var(--text);margin:0 0 1.5rem}
.note strong{color:var(--mint)}

/* Buttons */
.links{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.btn{display:flex;align-items:center;gap:.9rem;min-height:64px;padding:.9rem 1.2rem;border-radius:var(--radius);
  background:var(--card);border:2px solid var(--line);color:var(--text);text-decoration:none;
  font-size:1.2rem;font-weight:600;line-height:1.3;transition:transform .12s,border-color .12s,background .12s}
.btn:hover{border-color:var(--mint);background:var(--card-2);color:var(--text);transform:translateY(-1px)}
.btn .ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(61,220,151,.14)}
.btn .ico svg{width:24px;height:24px;fill:var(--mint)}
.btn .label{flex:1}
.btn .sub{display:block;font-size:1rem;font-weight:400;color:var(--muted)}
.btn.primary{background:var(--mint);color:var(--navy-d);border-color:var(--mint)}
.btn.primary .ico{background:rgba(4,20,52,.12)}
.btn.primary .ico svg{fill:var(--navy-d)}
.btn.primary .sub{color:#0b2d4d}
.btn.primary:hover{background:#6ae8b1;color:var(--navy-d)}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;border-style:dashed;pointer-events:none}
.pill{font-size:.95rem;font-weight:600;border-radius:999px;padding:.15rem .65rem;background:rgba(255,255,255,.12);color:var(--text);white-space:nowrap}
.btn.primary .pill{background:rgba(4,20,52,.15);color:var(--navy-d)}

/* Icon-Reihe */
.social{display:flex;justify-content:center;gap:1rem;margin:1.75rem 0 0;padding:0;list-style:none}
.social a{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--card);border:2px solid var(--line)}
.social a:hover{border-color:var(--mint)}
.social svg{width:26px;height:26px;fill:var(--text)}

/* Textseiten */
.page-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.page-head img{width:56px;height:56px;border-radius:50%}
.page-head a{text-decoration:none;color:var(--text);font-weight:700;font-size:1.3rem}
.back{display:inline-flex;align-items:center;min-height:48px;padding:.5rem 1rem;border-radius:12px;border:2px solid var(--line);color:var(--text);text-decoration:none;font-weight:500;margin-bottom:1rem}
.back:hover{border-color:var(--mint);color:var(--text)}
.legal h1{font-size:1.9rem;line-height:1.25;margin:.5rem 0 1rem}
.legal h2{font-size:1.3rem;margin:2rem 0 .5rem;color:var(--mint)}
.legal h3{font-size:1.1rem;margin:1.25rem 0 .35rem}
.legal p,.legal li{color:var(--text)}
.legal address{font-style:normal}
.card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;margin:1rem 0}
.ph{background:#FFD34D;color:#041434;font-weight:600;padding:0 .3rem;border-radius:4px}
.muted{color:var(--muted)}
.empty{border:2px dashed var(--line);border-radius:var(--radius);padding:1.25rem;text-align:center;color:var(--muted)}

/* Formular */
.form{display:grid;gap:1.1rem}
.field label{display:block;font-weight:600;margin-bottom:.35rem}
.field input,.field textarea{width:100%;font:inherit;font-size:1.1rem;color:var(--text);background:var(--navy);
  border:2px solid rgba(255,255,255,.3);border-radius:12px;padding:.8rem 1rem;min-height:56px}
.field textarea{min-height:170px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--mint);outline:none;box-shadow:0 0 0 3px rgba(61,220,151,.35)}
.check{display:flex;gap:.75rem;align-items:flex-start;font-size:1.05rem}
.check input{width:28px;height:28px;flex:0 0 28px;margin-top:.15rem;accent-color:var(--mint)}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
button.btn{justify-content:center;cursor:pointer;font-family:inherit;width:100%}
.status{border-radius:12px;padding:.9rem 1rem;font-weight:500}
.status.ok{background:rgba(61,220,151,.15);border:2px solid var(--mint)}
.status.err{background:rgba(255,90,110,.15);border:2px solid #ff5a6e}
.status[hidden]{display:none}

/* Footer */
footer{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line);text-align:center;font-size:1rem;color:var(--muted)}
footer nav ul{list-style:none;padding:0;margin:0 0 .75rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1rem}
footer nav a{display:inline-block;padding:.6rem .4rem;min-height:44px;color:var(--text)}
footer nav a:hover{color:var(--mint)}

/* Consent-Hinweis */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:1rem;display:flex;justify-content:center}
.consent[hidden]{display:none}
.consent .box{max-width:620px;width:100%;background:#0b2d63;border:2px solid var(--mint);border-radius:var(--radius);
  padding:1.1rem 1.2rem;box-shadow:0 -8px 40px rgba(0,0,0,.45);font-size:1rem;line-height:1.55}
.consent h2{font-size:1.15rem;margin:0 0 .4rem}
.consent p{margin:0 0 .9rem}
.consent .row{display:flex;flex-wrap:wrap;gap:.75rem}
.consent button{flex:1 1 180px;min-height:52px;font:inherit;font-weight:600;font-size:1.05rem;border-radius:12px;cursor:pointer;padding:.6rem 1rem}
.consent .yes{background:var(--mint);color:var(--navy-d);border:2px solid var(--mint)}
.consent .no{background:transparent;color:var(--text);border:2px solid rgba(255,255,255,.5)}

@media (min-width:900px){ .wrap{padding-top:4rem} .logo{width:150px;height:150px} .hero h1{font-size:2.5rem} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }