/* Impressum and Datenschutzerklaerung in the Shop-Construct design (TASK-067).
   Loaded after styles.css and extra.css; only content styles live here, header and footer come from those. */
.legal-header .nav-wrap{height:72px}
.nav-back{margin-left:auto;font-size:14px;font-weight:650;color:var(--muted);display:inline-flex;align-items:center;gap:0}
.nav-back:hover{color:var(--blue)}

main.legal{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:64px 0 96px}
.page-tag{font-size:12px;letter-spacing:.24em;font-weight:800;color:var(--blue);text-transform:uppercase;margin-bottom:14px}
main.legal h1{font-size:clamp(32px,4.4vw,48px);line-height:1.08;letter-spacing:-.035em;margin:0 0 36px;color:var(--ink);hyphens:manual}
.last-updated{margin:-20px 0 32px;font-size:14px;color:var(--muted)}

/* Impressum cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 34px;margin-bottom:20px;box-shadow:0 10px 30px rgba(15,23,42,.04)}
.card h2{font-size:17px;line-height:1.3;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line);color:var(--ink);letter-spacing:-.01em}
.info-row{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.info-row:last-child{border-bottom:0}
.info-label{flex:0 0 180px;font-size:13px;font-weight:600;color:var(--muted)}
.info-value{font-size:14px;line-height:1.6;color:var(--ink)}
.info-value a,main.legal a{color:var(--blue);border-bottom:1px solid rgba(37,99,235,.3)}
.info-value a:hover,main.legal a:hover{border-bottom-color:var(--blue)}
.notice{background:#EFF6FF;border:1px solid #DBEAFE;border-radius:14px;padding:18px 22px;font-size:14px;line-height:1.7;color:var(--muted);margin-bottom:20px}
.notice strong{color:var(--ink)}
p.legal-text{font-size:14.5px;line-height:1.8;color:var(--muted);margin:0 0 16px}
p.legal-text:last-child{margin-bottom:0}

/* Datenschutz */
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 30px;margin-bottom:36px}
.toc h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.toc ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px}
.toc li a{border-bottom:0}
.toc li a:hover{text-decoration:underline}
.ds-section{margin-bottom:40px;scroll-margin-top:96px}
.ds-section h2{font-size:clamp(22px,2.6vw,28px);line-height:1.2;letter-spacing:-.02em;margin:0 0 14px;color:var(--ink)}
.ds-section h3{font-size:17px;margin:24px 0 8px;color:var(--ink)}
.ds-section p,.ds-section li{font-size:15.5px;line-height:1.75;color:#334155}
.ds-section p{margin:0 0 14px}
.ds-section ul,.ds-section ol{margin:0 0 14px;padding-left:22px}
.ds-section li{margin-bottom:6px}
.ds-section strong{color:var(--ink)}
.highlight-box{background:#EFF6FF;border:1px solid #DBEAFE;border-left:4px solid var(--blue);border-radius:14px;padding:16px 20px;margin:18px 0}
.highlight-box p{margin:0;font-size:14.5px}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:8px 26px;margin:14px 0 22px}
.contact-card .row{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.contact-card .row:last-child{border-bottom:0}
.contact-card .lbl{flex:0 0 150px;font-size:13px;font-weight:600;color:var(--muted)}
.contact-card .val{font-size:14.5px;color:var(--ink);line-height:1.6}

@media (max-width:640px){
  .card{padding:22px 20px}
  .info-row,.contact-card .row{flex-direction:column;gap:2px}
  .info-label,.contact-card .lbl{flex:none}
  .legal-header .nav-wrap{gap:12px}
}

/* wide layout (TASK-067): same width as the start page */
.legal-imp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.legal-imp>.page-tag,.legal-imp>h1,.legal-imp>.notice{grid-column:1/-1}
.legal-imp>.page-tag{margin-bottom:-6px}
.legal-imp>h1{margin-bottom:12px}
.legal-imp>.card{margin-bottom:0}

.legal-ds{display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:56px;align-items:start}
.legal-ds>.page-tag,.legal-ds>h1,.legal-ds>.last-updated{grid-column:1/-1}
.legal-ds>.toc{grid-column:1;grid-row:4/span 40;position:sticky;top:96px;margin-bottom:0}
.legal-ds>.ds-section{grid-column:2}

@media (max-width:900px){
  .legal-imp{grid-template-columns:1fr}
  .legal-ds{display:block}
  .legal-ds>.toc{position:static;margin-bottom:32px}
}