/* Páginas legales (plantilla «Rechtliches»).
   Portado de legal.css del prototipo: allí dependía de shop.css y usaba selectores
   globales (main, h1, p); aquí todo va acotado a .legal para no afectar a nav ni pie.
   Los tokens (--brand, --muted…) vienen de site.css; --demo y --demo-bg, de shop.css. */
:root{--demo:#8A6A28;--demo-bg:#FFF7E3;}

.legal{max-width:960px;margin:0 auto;padding:56px 6% 80px;line-height:1.7;font-size:16.5px;}

.legal h1{font-size:36px;line-height:1.2;margin-bottom:10px;}
.legal h2{font-size:23px;margin:38px 0 12px;}
.legal h3{font-family:'DM Sans',sans-serif;font-size:17px;font-weight:600;margin:24px 0 8px;}
.legal p,.legal li{color:var(--muted);margin-bottom:12px;}
.legal ul,.legal ol{padding-left:22px;margin-bottom:12px;}
.legal .eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--brand);margin-bottom:10px;}
.legal .section-sub{font-size:17px;margin-bottom:4px;}
.legal .updated{font-size:14px;color:var(--muted);margin-bottom:8px;}
.legal .note{font-size:14px;}

.legal dl{background:var(--white);border:1px solid rgba(63,98,162,.14);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px;}
.legal dt{font-weight:600;color:var(--text);font-size:14px;text-transform:uppercase;letter-spacing:.6px;margin-top:14px;}
.legal dt:first-child{margin-top:0;}
.legal dd{margin:2px 0 0;color:var(--muted);}

.legal .grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0 20px;}
.legal .card{background:var(--white);border:1px solid rgba(63,98,162,.14);border-radius:var(--radius);padding:22px 24px;}
.legal .card h2{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text);margin:0 0 14px;}
.legal .card p{margin-bottom:6px;}
.legal .card p:last-child{margin-bottom:0;}
.legal .card-wide{margin-bottom:26px;}

.legal .kv{width:100%;border-collapse:collapse;}
.legal .kv th{text-align:left;vertical-align:top;font-weight:600;color:var(--text);font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;padding:9px 14px 9px 0;border-top:1px solid rgba(63,98,162,.10);}
.legal .kv td{vertical-align:top;color:var(--muted);font-size:15.5px;padding:9px 0;border-top:1px solid rgba(63,98,162,.10);}
.legal .kv tr:first-child th,.legal .kv tr:first-child td{border-top:0;padding-top:0;}

.legal .doc-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.legal .doc-link{display:flex;flex-direction:column;gap:2px;border:1px solid rgba(63,98,162,.18);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--brand-dark);background:var(--cream);}
.legal .doc-link:hover{border-color:var(--brand);background:var(--white);}
.legal .doc-link strong{font-size:15px;}
.legal .doc-link small{color:var(--muted);font-size:13px;line-height:1.45;}
.legal .doc-link[aria-disabled="true"]{opacity:.6;cursor:default;}

.legal .todo{background:var(--demo-bg);border-left:3px solid var(--gold);padding:14px 16px;border-radius:0 8px 8px 0;font-size:15px;color:var(--demo);margin:18px 0;}
.legal .todo code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;font-size:14px;}
.legal mark{background:#FFF0C7;color:var(--demo);padding:0 4px;border-radius:3px;font-weight:500;}

@media(max-width:760px){.legal .grid{grid-template-columns:1fr;}.legal .doc-links{grid-template-columns:1fr;}}
@media(max-width:620px){.legal h1{font-size:28px;}.legal{padding:40px 5% 60px;}}