/* ═══════════════════════════════════════════════
   HANDWERKEASY – LEGAL PAGES STYLESHEET
   legal.css · v1.1 · FLUID-LAYOUT (Amazon-style)
   Statt harter Breakpoints adaptiv über clamp(),
   min(), max(), grid-auto-flow.
   Setzt auf handwerkeasy.css (Tokens, Nav, Footer) auf.
   ═══════════════════════════════════════════════ */

/* ── HERO (kompakt, fluid) ──────────────────── */
.legal-hero{
  background:var(--g);
  color:#fff;
  padding:clamp(32px,5vw,56px) clamp(16px,4vw,28px) clamp(40px,6vw,64px);
}
.legal-hero-inner{
  max-width:var(--max);
  margin:0 auto;
  text-align:center;
}
.legal-hero-eyebrow{
  display:inline-block;
  font-size:clamp(11px,1vw,12px);
  font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  padding:6px 14px;border-radius:999px;
  margin-bottom:clamp(14px,2vw,20px);
}
.legal-hero h1{
  color:#fff;
  font-size:clamp(26px,5.5vw,46px);
  font-weight:800;
  line-height:1.15;letter-spacing:-.02em;
  margin:0 0 clamp(10px,1.5vw,14px);
}
.legal-hero h1 .hl{color:var(--gm)}
.legal-hero-sub{
  color:rgba(255,255,255,.85);
  font-size:clamp(14px,1.6vw,17px);
  line-height:1.6;
  max-width:min(640px,92%);
  margin:0 auto;
}
.legal-hero-meta{
  margin-top:clamp(14px,2vw,18px);
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.legal-hero-meta-pill{
  font-size:clamp(11px,1vw,12px);
  font-weight:700;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  padding:5px 12px;border-radius:999px;
}

/* ── DRAFT-BANNER ───────────────────────────── */
.legal-draft-banner{
  background:var(--warn-bg);
  border-bottom:1px solid var(--warn-border);
  color:var(--warn-text);
  padding:clamp(10px,1.5vw,14px) clamp(16px,4vw,28px);
  text-align:center;
  font-size:clamp(12px,1.3vw,13px);
  font-weight:700;
  line-height:1.5;
}
.legal-draft-banner strong{font-weight:900}

/* ── LAYOUT-CONTAINER (fluid, kein fixer Breakpoint) ─ */
.legal-main{
  max-width:1100px;
  margin:0 auto;
  padding:clamp(28px,4vw,48px) clamp(16px,4vw,28px) clamp(48px,7vw,80px);
  display:grid;
  /* Fluid grid: ToC nur sichtbar wenn ≥ 220px Breite frei.
     Auf engen Devices stapelt automatisch. */
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,3vw,40px);
}
@media(min-width:880px){
  .legal-main{
    grid-template-columns:minmax(200px,240px) minmax(0,1fr);
    gap:clamp(28px,4vw,56px);
  }
}

/* ── INHALTSVERZEICHNIS ────────────────────── */
.legal-toc{
  font-size:13px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:clamp(14px,2vw,20px);
  box-shadow:var(--shadow);
}
@media(min-width:880px){
  .legal-toc{
    position:sticky;top:88px;
    align-self:start;
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
  }
}
.legal-toc-label{
  font-size:11px;font-weight:800;
  color:var(--gray);
  text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:clamp(10px,1.5vw,14px);
}
.legal-toc ol{
  list-style:none;padding:0;margin:0;
  counter-reset:toc;
}
.legal-toc li{
  counter-increment:toc;
  margin:0 0 4px;
}
.legal-toc a{
  display:flex;align-items:flex-start;gap:8px;
  padding:7px 10px;
  color:var(--gray);
  font-weight:600;font-size:13px;line-height:1.4;
  border-radius:var(--rs);
  text-decoration:none;
  transition:all var(--ease);
}
.legal-toc a::before{
  content:counter(toc) ".";
  flex-shrink:0;
  font-weight:800;color:var(--gray-mid);
  min-width:22px;
}
.legal-toc a:hover{background:var(--gl);color:var(--g)}
.legal-toc a.is-active{background:var(--gl);color:var(--g)}
.legal-toc a.is-active::before{color:var(--g)}

/* ── ARTIKEL / PROSE ────────────────────────── */
.legal-article{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--rl);
  padding:clamp(20px,3.5vw,48px);
  box-shadow:var(--shadow);
  /* Fluid: Inhalte überlaufen nie horizontal */
  min-width:0;
  overflow-wrap:break-word;
}
.legal-article > section + section{margin-top:clamp(28px,4vw,40px)}
.legal-article h2{
  font-size:clamp(19px,2.6vw,26px);
  font-weight:800;color:var(--text);
  letter-spacing:-.01em;line-height:1.2;
  margin:0 0 clamp(10px,1.5vw,14px);
  padding-top:8px;
  scroll-margin-top:88px;
}
.legal-article h2:first-child{padding-top:0}
.legal-article h3{
  font-size:clamp(15px,1.7vw,17px);
  font-weight:800;color:var(--text);
  margin:clamp(18px,2.5vw,24px) 0 10px;
  letter-spacing:-.005em;
}
.legal-article h4{
  font-size:14px;font-weight:800;color:var(--text);
  text-transform:uppercase;letter-spacing:.05em;
  margin:18px 0 8px;
}
.legal-article p{
  font-size:clamp(14px,1.5vw,15px);
  line-height:1.7;color:var(--text);
  margin:0 0 14px;
}
.legal-article ul,
.legal-article ol{
  margin:0 0 16px;padding-left:22px;
}
.legal-article li{
  font-size:clamp(14px,1.5vw,15px);
  line-height:1.7;color:var(--text);
  margin-bottom:6px;
}
.legal-article li::marker{color:var(--g)}
.legal-article a{
  color:var(--g);font-weight:700;
  text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:2px;
  /* Lange URLs auf engen Geräten brechen */
  word-break:break-word;
}
.legal-article a:hover{color:var(--gd)}
.legal-article strong{font-weight:800;color:var(--text)}
.legal-article hr{
  border:0;border-top:1px solid var(--border);
  margin:clamp(24px,3vw,32px) 0;
}

/* Adress-Block */
.legal-address{
  background:var(--gl);
  border:1px solid #C9E5D2;
  border-radius:var(--r);
  padding:clamp(14px,2vw,18px) clamp(16px,2.5vw,22px);
  margin:0 0 18px;
  font-size:clamp(14px,1.5vw,15px);
  line-height:1.7;
  color:var(--text);
}
.legal-address strong{color:var(--g);font-weight:800}

/* Highlight-Box */
.legal-callout{
  background:var(--info-bg);
  border:1px solid var(--info-border);
  border-radius:var(--r);
  padding:clamp(14px,2vw,18px) clamp(16px,2.5vw,22px);
  margin:0 0 18px;
  font-size:clamp(13px,1.4vw,14px);
  line-height:1.6;color:var(--info-text);
}
.legal-callout strong{color:var(--info-text);font-weight:800}

/* Warn-Box */
.legal-warn{
  background:var(--warn-bg);
  border:1px solid var(--warn-border);
  border-radius:var(--r);
  padding:clamp(14px,2vw,18px) clamp(16px,2.5vw,22px);
  margin:0 0 18px;
  font-size:clamp(13px,1.4vw,14px);
  line-height:1.6;color:var(--warn-text);
}
.legal-warn strong{color:var(--warn-text);font-weight:800}

/* Tabelle (Storno-Staffel, Speicherdauer, AVV)
   Fluid: horizontal scrollbar Container statt feste min-width */
.legal-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--r);
  margin:0 0 22px;
  background:var(--white);
}
.legal-table{
  width:100%;
  border-collapse:collapse;
  font-size:clamp(13px,1.4vw,14px);
  line-height:1.5;
}
.legal-table th,
.legal-table td{
  text-align:left;
  padding:clamp(9px,1.3vw,11px) clamp(10px,1.5vw,14px);
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.legal-table th{
  background:var(--gl);
  color:var(--g);
  font-weight:800;
  font-size:clamp(11px,1.2vw,13px);
  text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;
}
.legal-table tr:last-child td{border-bottom:none}

/* Pre-Block für Muster-Widerrufsformular */
.legal-formblock{
  background:var(--bg);
  border:1px dashed var(--border);
  border-radius:var(--r);
  padding:clamp(16px,2.5vw,22px);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(12px,1.3vw,13px);
  line-height:1.7;
  color:var(--text);
  white-space:pre-wrap;
  margin:0 0 18px;
  overflow-x:auto;
  /* Lange Wörter brechen sauber */
  word-break:break-word;
}

/* Skip-Link */
.legal-skip{
  position:absolute;left:-9999px;top:auto;
  background:var(--g);color:#fff;
  padding:10px 16px;border-radius:var(--rs);
  font-weight:800;text-decoration:none;
  z-index:9999;
}
.legal-skip:focus{left:20px;top:20px}

/* Anker-Hover für Heading-Sprungmarken */
.legal-article h2[id]{position:relative}
.legal-article h2[id]:hover::after{
  content:"#";
  position:absolute;left:-22px;top:.05em;
  color:var(--gm);font-weight:900;
  opacity:.6;
}

/* Print-Optimierung — wichtig für AGB-Druck */
@media print{
  .legal-draft-banner,
  .nav-stack,
  .footer,
  .cookie-banner,
  .legal-toc,
  .legal-skip{display:none !important}
  .legal-hero{background:#fff;color:#000;padding:0 0 16px}
  .legal-hero h1,.legal-hero h1 .hl,.legal-hero-sub{color:#000 !important}
  .legal-hero-eyebrow,.legal-hero-meta-pill{
    background:none;border:1px solid #999;color:#333;
  }
  .legal-main{grid-template-columns:1fr;padding:0}
  .legal-article{box-shadow:none;border:none;padding:0}
}