/* FRAMEBUDDY – Login, Registrierung, Abmeldung */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/instrument-sans-400.woff") format("woff")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600 800;font-display:swap;src:url("../fonts/instrument-sans-700.woff") format("woff")}
:root{
  --wine:#861536;--wine-dark:#68102a;--wine-soft:#f7e9ee;--wine-line:#e6c3cf;
  --canvas:#f3f2f0;--surface:#fff;--sunken:#f7f6f4;--line:#e8e5e1;--line-strong:#d6d1cb;
  --ink:#1b1a1d;--muted:#66616a;
  --ok:#2f6b3a;--ok-soft:#e7f2e9;--err:#9b1c2e;--err-soft:#fbeaec;--warn:#7d4a05;--warn-soft:#fdf3dc;
  --r-md:12px;--r-lg:16px;--r-xl:24px;
  --shadow:0 1px 2px rgba(27,26,29,.04),0 12px 32px -14px rgba(27,26,29,.18);
  --font:"Instrument Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--canvas);color:var(--ink);font:400 16px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--wine);outline-offset:2px;border-radius:4px}
.ic{width:18px;height:18px;flex:none}

.auth-top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1120px;width:100%;margin:0 auto;padding:22px 24px}
.fb-logo{display:flex;align-items:center;line-height:0;text-decoration:none}
.fb-logo svg{height:28px;width:auto;display:block}
.fb-logo .fb-logo-mark{display:none}
.auth-toplink{font-weight:600;font-size:15px;text-decoration:none;padding:10px 14px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface)}
.auth-toplink:hover{background:var(--sunken)}

.auth-main{flex:1;width:100%;max-width:460px;margin:0 auto;padding:24px 24px 48px}
.auth-main.is-wide{max-width:980px}
.auth-main.is-mid{max-width:580px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:36px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wine)}
.card h1{font-size:32px;line-height:1.1;letter-spacing:-.02em;font-weight:700;margin:10px 0 10px}
.lead{color:var(--muted);margin-bottom:24px}

.field{margin-top:16px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field .opt{font-weight:400;color:var(--muted)}
.field input[type=email],.field input[type=password],.field input[type=text]{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:#fff;font:400 16px var(--font);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 3px rgba(134,21,54,.12)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row2 .field{margin-top:16px}
.hint{font-size:13px;color:var(--muted);margin-top:6px}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:14px;color:var(--muted)}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--wine);flex:none}
.check a{color:var(--wine);font-weight:600}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.turnstile{margin-top:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-md);border:1px solid transparent;font:600 16px/1 var(--font);text-decoration:none;cursor:pointer}
.btn-primary{background:var(--wine);color:#fff}
.btn-primary:hover{background:var(--wine-dark)}
.btn-secondary{background:#fff;color:var(--wine);border-color:var(--wine-line)}
.btn-secondary:hover{background:var(--wine-soft)}
.btn-block{width:100%;margin-top:24px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

.alert{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-md);padding:12px 14px;font-size:14px;line-height:1.45;margin-bottom:18px}
.alert .ic{margin-top:1px}
.alert-err{background:var(--err-soft);color:var(--err)}
.alert-ok{background:var(--ok-soft);color:var(--ok)}
.alert-info{background:var(--sunken);color:var(--muted)}

.alt{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--muted);text-align:center}
.alt a{color:var(--wine);font-weight:600;text-decoration:none}
.alt a:hover{text-decoration:underline}
.small-links{margin-top:14px;font-size:14px;text-align:center;color:var(--muted)}

/* Registrierung: zweispaltig */
.split{display:grid;grid-template-columns:.9fr 1.1fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden}
.split .side{background:var(--wine);color:#fff;padding:40px 36px;display:flex;flex-direction:column;gap:22px;position:relative;overflow:hidden}
.split .side::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:48px;border:26px solid rgba(255,255,255,.08);transform:rotate(12deg)}
.split .side h2{font-size:26px;line-height:1.15;letter-spacing:-.01em;font-weight:700}
.split .side p{color:rgba(255,255,255,.82);font-size:15px}
.plan{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-lg);padding:16px 18px}
.plan small{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:700}
.plan b{display:block;font-size:22px;margin-top:4px}
.plan span{font-size:14px;color:rgba(255,255,255,.82)}
.plan a{color:#fff;font-size:13px;font-weight:600}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
.steps li{display:flex;gap:12px;align-items:flex-start;font-size:15px;counter-increment:s}
.steps li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-weight:700;font-size:13px}
.steps li.done::before{content:"✓"}
.split .main{padding:40px 40px 36px}
.split .main h1{font-size:30px;line-height:1.1;letter-spacing:-.02em;font-weight:700;margin:10px 0 8px}

/* Abmeldung */
.bye{text-align:center;padding:48px 40px}
.bye .badge{width:64px;height:64px;border-radius:20px;background:var(--wine-soft);color:var(--wine);display:grid;place-items:center;margin:0 auto 18px}
.bye .badge .ic{width:30px;height:30px}
.bye h1{font-size:36px}
.bye .quote{margin:26px auto 0;max-width:420px;background:var(--sunken);border-radius:var(--r-lg);padding:20px 22px;text-align:left}
.bye .quote b{display:block;font-size:18px;margin-bottom:6px}
.bye .quote p{color:var(--muted);font-size:15px}
.bye .moment{margin-top:18px;font-weight:600}
.bye .actions{justify-content:center}
.bye .safety{margin-top:26px;font-size:13px;color:var(--muted);display:flex;gap:8px;justify-content:center;align-items:center}
.bye .safety .ic{width:15px;height:15px}

.auth-foot{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;padding:18px 24px 28px;font-size:13px;color:var(--muted)}
.auth-foot a{text-decoration:none}
.auth-foot a:hover{color:var(--ink)}

@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .split .side{padding:28px 24px;gap:16px}
  .split .side .steps,.split .side p{display:none}
  .split .main{padding:28px 24px}
}
@media (max-width:520px){
  .auth-top{padding:16px}
  .auth-main{padding:12px 16px 36px}
  .card{padding:26px 20px}
  .card h1,.split .main h1{font-size:27px}
  .row2{grid-template-columns:1fr;gap:0}
  .bye{padding:36px 20px}
  .bye h1{font-size:30px}
  .fb-logo svg{height:24px}
}