/* legal.css — gemeinsame Gestaltung für Impressum & Datenschutz
   Athlon Orthopedics — passend zur Hauptseite */
:root{
  --accent:#c8102e;
  --paper:#f6f5f2;
  --ink:#111111;
  --ink-2:#2a2a2a;
  --mute:#6b6b68;
  --line:#e4e2db;
  --card:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter', -apple-system, system-ui, sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
}
.wrap{max-width:1360px; margin:0 auto; padding:0 40px}
@media (max-width:720px){ .wrap{padding:0 20px} }
a{color:inherit}

.display{
  font-family:'Milo Office Pro','Milo OT','Asap','Source Sans 3','Inter Tight', sans-serif;
  letter-spacing:-0.025em; font-weight:600; line-height:1.08;
}
.mono{font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase}

/* ============ NAV (identisch zur Startseite) ============ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,10,0.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  color:#e9e7df;
}
.nav.scrolled{border-bottom-color:rgba(255,255,255,0.1)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:80px; gap:24px}
.brand{display:flex; align-items:center; flex-shrink:0}
.brand-logo{height:40px; width:auto; display:block}
.nav-links{display:flex; align-items:center; gap:28px; font-size:13px; color:#d3d1ca; font-family:'Milo Office Pro','Asap','Source Sans 3','Milo Office Pro','Milo OT','Asap','Source Sans 3','Inter Tight', sans-serif; font-weight:500; letter-spacing:0.005em}
.nav-links a{position:relative; padding:8px 0; transition:color .15s; text-decoration:none; color:inherit}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff}
.nav-links a.active::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--accent)}
.nav-lang{display:inline-flex; align-items:center; gap:8px; padding-left:24px; border-left:1px solid rgba(255,255,255,0.12); margin-left:4px}
.flag-ch{
  position:relative; display:inline-block; width:16px; height:16px;
  background:#d52b1e; border-radius:2px; flex-shrink:0;
}
.flag-ch-cross::before,
.flag-ch-cross::after{
  content:''; position:absolute; background:#fff;
}
.flag-ch-cross::before{left:50%; top:25%; width:22%; height:50%; transform:translateX(-50%); border-radius:1px}
.flag-ch-cross::after{top:50%; left:25%; height:22%; width:50%; transform:translateY(-50%); border-radius:1px}
.nav-cta{
  background:var(--accent); color:#fff;
  padding:11px 18px; border-radius:999px; font-size:13px; font-weight:500;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .15s; flex-shrink:0; text-decoration:none;
  font-family:'Milo Office Pro','Asap','Source Sans 3','Milo Office Pro','Milo OT','Asap','Source Sans 3','Inter Tight', sans-serif;
}
.nav-cta:hover{background:#a60d23}
@media (max-width:1100px){ .nav-links{gap:18px; font-size:12px} .nav-lang{padding-left:14px} }

/* ---- Burger ---- */
.nav-burger{
  display:none; width:42px; height:42px; flex-shrink:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px solid rgba(255,255,255,0.14); border-radius:10px; padding:0;
  background:none; cursor:pointer;
}
.nav-burger span{
  display:block; width:20px; height:1.8px; background:#e9e7df; border-radius:2px;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
body.drawer-open .nav-burger span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
body.drawer-open .nav-burger span:nth-child(2){opacity:0}
body.drawer-open .nav-burger span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ---- Off-canvas drawer (slides from left) ---- */
.drawer-overlay{
  position:fixed; inset:0; z-index:60;
  background:rgba(8,8,8,0.55); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .3s ease;
}
body.drawer-open .drawer-overlay{opacity:1}
.mobile-drawer{
  position:fixed; top:0; left:0; z-index:70;
  width:min(330px, 84vw); height:100%;
  background:#0a0a0a; color:#e9e7df;
  border-right:1px solid rgba(255,255,255,0.08);
  display:flex; flex-direction:column;
  padding:22px 26px 30px;
  transform:translateX(-100%);
  transition:transform .34s cubic-bezier(.4,0,.1,1);
  box-shadow:none;
}
body.drawer-open .mobile-drawer{transform:none; box-shadow:0 0 80px -20px rgba(0,0,0,0.7)}
.drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px}
.drawer-logo{height:34px; width:auto; display:block}
.drawer-close{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  color:#b8b6b0; border:1px solid rgba(255,255,255,0.12); border-radius:10px;
  background:none; cursor:pointer;
  transition:color .15s, border-color .15s;
}
.drawer-close:hover{color:#fff; border-color:rgba(255,255,255,0.3)}
.drawer-links{display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,0.08)}
.drawer-links a{
  padding:17px 0; font-family:'Inter Tight', sans-serif; font-size:19px; font-weight:500;
  letter-spacing:-0.01em; color:#e9e7df; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:space-between;
  transition:color .15s, padding-left .2s;
}
.drawer-links a::after{content:'→'; color:var(--accent); opacity:0; transform:translateX(-6px); transition:opacity .2s, transform .2s}
.drawer-links a:hover{color:#fff; padding-left:6px}
.drawer-links a:hover::after{opacity:1; transform:none}
.drawer-foot{margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:18px}
.drawer-cta{
  background:var(--accent); color:#fff; text-align:center; text-decoration:none;
  padding:15px 20px; border-radius:999px; font-size:15px; font-weight:500;
  font-family:'Inter Tight', sans-serif; transition:background .15s;
}
.drawer-cta:hover{background:#a60d23}
.drawer-lang{display:inline-flex; align-items:center; gap:10px; font-size:14px; color:#b8b6b0; align-self:center; text-decoration:none}
.drawer-lang:hover{color:#fff}

@media (max-width:1000px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}
@media (max-width:480px){
  .nav-cta{display:none}
}

/* ---------- Content ---------- */
.legal-main{padding:80px 0 100px}
@media (max-width:720px){ .legal-main{padding:48px 0 64px} }
.legal-col{max-width:820px}

.legal-kicker{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent); margin:0 0 18px;
}
.legal-h1{
  font-size:clamp(36px,5vw,58px); margin:0 0 24px;
}
.legal-lead{
  font-size:18px; color:var(--ink-2); margin:0 0 8px; max-width:680px;
}

.legal-col h2{
  font-family:'Milo Office Pro','Milo OT','Asap','Source Sans 3','Inter Tight', sans-serif;
  font-size:clamp(22px,2.4vw,30px); font-weight:600; letter-spacing:-0.02em; line-height:1.15;
  margin:64px 0 18px; padding-top:28px; border-top:1px solid var(--line);
}
.legal-col h3{
  font-family:'Milo Office Pro','Milo OT','Asap','Source Sans 3','Inter Tight', sans-serif;
  font-size:18px; font-weight:600; letter-spacing:-0.01em;
  margin:36px 0 10px; color:var(--ink);
}
.legal-col p{font-size:15.5px; color:var(--ink-2); margin:0 0 18px; text-wrap:pretty}
.legal-col ul{margin:0 0 18px; padding-left:22px; color:var(--ink-2); font-size:15.5px}
.legal-col li{margin-bottom:9px}
.legal-col a[href]{
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(200,16,46,0.35);
  transition:border-color .15s;
  word-break:break-word;
}
.legal-col a[href]:hover{border-color:var(--accent)}

.legal-address{
  background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  padding:24px 28px; margin:0 0 24px;
  font-size:16px; line-height:1.75; color:var(--ink);
}
.legal-address strong{font-weight:600}
.legal-address a{color:var(--accent); text-decoration:none}

.legal-updated{
  margin-top:56px; font-size:13px; color:var(--mute);
  font-family:'JetBrains Mono', monospace; letter-spacing:0.04em;
}

/* ---------- Footer ---------- */
.footer{background:#0a0a0a; color:#807e78; padding:40px 0; font-size:13px}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px}
.footer a{color:inherit; text-decoration:none; transition:color .15s}
.footer a:hover{color:var(--paper)}
.site-credit{margin:0; font-size:13px}
.site-credit a{border:none}
.site-credit a:hover{color:var(--accent) !important}
@keyframes klariano-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 166, 90, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(0, 166, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 166, 90, 0); }
}


/* ============ COOKIE NOTICE ============ */
.cookie-notice{
  position:fixed; left:24px; bottom:24px; z-index:1200;
  max-width:380px; width:calc(100% - 48px);
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 18px 50px -18px rgba(17,17,17,0.35);
  padding:24px 26px 26px;
  transform:translateY(140%); opacity:0;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.cookie-notice.show{transform:translateY(0); opacity:1}
.cookie-notice::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent)}
.cookie-text{font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:0 0 18px; text-wrap:pretty}
.cookie-actions{display:flex; gap:10px; flex-wrap:wrap}
.cookie-accept,.cookie-decline{
  padding:11px 24px; border-radius:999px;
  font-family:'Inter Tight', sans-serif;
  font-size:13px; font-weight:500; letter-spacing:0.01em; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s;
}
.cookie-accept{background:var(--accent); color:#fff; border:1px solid var(--accent)}
.cookie-accept:hover{background:transparent; color:var(--accent)}
.cookie-decline{background:transparent; color:var(--ink-2); border:1px solid var(--line)}
.cookie-decline:hover{border-color:var(--accent); color:var(--accent)}
@media (max-width:560px){
  .cookie-notice{left:12px; right:12px; bottom:12px; width:auto; padding:20px 20px 22px}
}