/* =====================================================================
   Gemeinsames Stylesheet für /danke.html und /datenschutz.html
   (index.html trägt sein CSS inline in sections/00-head.html)
   ===================================================================== */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#0B0C0E;--bg-2:#121418;--surface:#171A1F;--surface-2:#1E2228;
  --line:rgba(255,255,255,.10);--line-strong:rgba(255,255,255,.20);
  --text:#F3F5F7;--muted:#9AA3AD;--cy:#00B0DB;--mg:#C65E9E;
  --grad:linear-gradient(115deg,#00B0DB 0%,#C65E9E 100%);
  --radius:16px;--radius-lg:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--cy)}
h1,h2,h3{line-height:1.18;font-weight:700;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,5vw,3rem)}
h2{font-size:clamp(1.25rem,3vw,1.6rem);margin-top:2.2em}
h3{font-size:1.08rem;margin-top:1.8em}
p{margin:0 0 1.1em}
.wrap{width:100%;max-width:860px;margin:0 auto;padding:0 22px}

.pg-hdr{border-bottom:1px solid var(--line);background:rgba(11,12,14,.9);position:sticky;top:0;z-index:10;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pg-hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}
.pg-hdr img{height:32px;width:auto}
.pg-hdr a.back{font-size:.94rem;color:var(--muted);text-decoration:none}
.pg-hdr a.back:hover{color:var(--text)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:16px 30px;min-height:56px;border:0;border-radius:999px;
  font-size:1rem;font-weight:700;text-decoration:none;cursor:pointer;
  background:var(--grad);color:#fff;box-shadow:0 10px 30px rgba(198,94,158,.28);
  transition:transform .18s ease,filter .18s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn--ghost{background:transparent;color:var(--text);border:1.5px solid var(--line-strong);box-shadow:none}

/* ---------- Dankesseite ---------- */
/* Nur vertikales Padding setzen – horizontal kommt es von .wrap */
.thanks{min-height:calc(100svh - 70px);display:flex;align-items:center;padding-top:64px;padding-bottom:64px}
.thanks__card{text-align:center}
.check{
  width:84px;height:84px;margin:0 auto 30px;border-radius:50%;
  background:var(--grad);display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 44px rgba(198,94,158,.35);
  animation:pop .55s cubic-bezier(.2,1.3,.4,1) both;
}
.check svg{stroke-dasharray:34;stroke-dashoffset:34;animation:draw .45s .3s ease forwards}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .check{animation:none}.check svg{stroke-dashoffset:0;animation:none}
}
.thanks p.lead{font-size:1.1rem;color:#C8CFD7;max-width:56ch;margin-inline:auto}
.hint-box{
  margin:36px auto 0;max-width:600px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 28px;
}
.hint-box__t{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:10px}
.hint-box__t svg{flex:none;color:var(--cy)}
.hint-box p{margin:0;color:#C8CFD7}
.hint-box .num{color:var(--text);font-weight:700;white-space:nowrap}
.thanks__foot{margin-top:34px;color:var(--muted)}
.thanks__actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- Rechtstext ---------- */
.legal{padding-top:56px;padding-bottom:90px}
.legal .meta{color:var(--muted);font-size:.94rem;margin-bottom:2.4em}
.legal ul{padding-left:1.2em;margin:0 0 1.2em}
.legal li{margin-bottom:.45em}
/* Breite Tabellen scrollen in ihrem eigenen Container, damit die Seite
   auf dem Handy nicht horizontal wegläuft. */
.legal .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.6em}
.legal table{width:100%;min-width:420px;border-collapse:collapse;margin:0;font-size:.94rem}
.legal th,.legal td{text-align:left;padding:11px 14px;border:1px solid var(--line);vertical-align:top}
.legal th{background:var(--surface-2);font-weight:600}
.legal hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}
.legal .box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin:0 0 1.6em}
.legal .box p:last-child{margin-bottom:0}
.legal code{background:var(--surface-2);padding:2px 6px;border-radius:5px;font-size:.9em}

.pg-ftr{border-top:1px solid var(--line);padding:36px 0;font-size:.9rem;color:var(--muted)}
.pg-ftr ul{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:0 0 10px;padding:0}
.pg-ftr a,.pg-ftr button{color:var(--muted);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.pg-ftr a:hover,.pg-ftr button:hover{color:var(--text)}

/* ---------- Klaro (identisch zur Landingpage) ---------- */
.klaro .cookie-notice{
  position:fixed!important;bottom:20px!important;right:20px!important;left:auto!important;top:auto!important;
  max-width:400px!important;border-radius:12px!important;
  box-shadow:0 8px 30px rgba(0,0,0,.5)!important;z-index:1000!important;
}
.klaro .cookie-notice .cn-body{padding:20px 24px!important}
@media(max-width:768px){
  .klaro .cookie-notice{bottom:12px!important;right:12px!important;left:12px!important;max-width:none!important}
}
.klaro{--font-family:'Source Sans 3',sans-serif;--border-radius:12px;
  --green1:#C65E9E;--green2:#C65E9E;--green3:#00B0DB;
  --dark1:#171A1F;--dark2:#1E2228;--dark3:#2A2F36;
  --light1:#F3F5F7;--light2:#C8CFD7;--light3:#9AA3AD;
  --button-text-color:#fff;
}
.klaro .cookie-modal a,.klaro .cookie-notice a{color:#00B0DB!important}
.klaro .cookie-modal .cm-btn,.klaro .cookie-notice .cm-btn{border-radius:999px!important;padding:10px 20px!important;font-weight:700!important}
.klaro .cookie-notice .cm-btn.cm-btn-success,.klaro .cookie-modal .cm-btn.cm-btn-success{
  background:linear-gradient(115deg,#00B0DB,#C65E9E)!important;color:#fff!important;
}