/* ============================================================
   Wiener Tischlerei — legal.css
   Impressum & Datenschutz (prefix: leg-)
   Loads after main.css and reuses its design tokens
   ============================================================ */

.page-legal{background:var(--paper)}

/* ---------- hero ---------- */
.leg-hero{
  position:relative;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  padding:54px 0 44px;
}
.leg-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:8px;
  background-image:repeating-linear-gradient(to right,var(--line-2) 0 1px,transparent 1px 24px);
  opacity:.7;
}
.leg-hero__container,
.leg-main__container{width:min(920px,100% - 48px);margin-inline:auto}

.leg-hero__breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:.84rem;color:var(--ink-3);margin-bottom:20px;
}
.leg-hero__breadcrumb a{color:var(--moss);font-weight:600}
.leg-hero__breadcrumb a:hover{text-decoration:underline}
.leg-hero__breadcrumb-sep{color:var(--line-2)}

.leg-hero__title{
  font-family:var(--font-d);font-size:clamp(1.9rem,4vw,2.8rem);
  font-weight:600;letter-spacing:-.02em;color:var(--ink);
}
.leg-hero__subtitle{margin-top:12px;color:var(--ink-2);font-size:1.02rem;max-width:62ch}

/* ---------- layout ---------- */
.leg-main{padding:64px 0 84px}
.leg-content{display:flex;flex-direction:column;gap:52px}

/* ---------- table of contents ---------- */
.leg-toc{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--moss);
  padding:24px 26px;
}
.leg-toc h2,.leg-toc h3{font-family:var(--font-d);font-size:1.1rem;margin-bottom:14px}
.leg-toc ul,.leg-toc ol{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 26px}
.leg-toc li{min-width:0}
.leg-toc a{
  display:block;font-size:.92rem;color:var(--ink-2);
  padding-left:16px;position:relative;
}
.leg-toc a::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  background:var(--oak);transform:rotate(45deg);
}
.leg-toc a:hover{color:var(--moss)}

/* ---------- section ---------- */
.leg-section{scroll-margin-top:96px}
.leg-section__title{
  font-family:var(--font-d);font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:600;
  padding-bottom:14px;margin-bottom:26px;border-bottom:2px solid var(--wood);
}

/* ---------- card ---------- */
.leg-card{
  background:var(--card);border:1px solid var(--line);
  padding:26px 28px;margin-bottom:16px;
}
.leg-card:last-child{margin-bottom:0}
.leg-card__title{
  font-family:var(--font-d);font-size:1.14rem;font-weight:600;margin-bottom:14px;
  padding-left:16px;position:relative;
}
.leg-card__title::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:2px;background:var(--oak);
}
.leg-card__body{color:var(--ink-2);font-size:.97rem}
.leg-card__body p{margin-bottom:12px}
.leg-card__body p:last-child{margin-bottom:0}
.leg-card__body strong{color:var(--ink)}
.leg-card__body em{color:var(--ink-3)}

/* ---------- contact rows ---------- */
.leg-contact{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.leg-contact__item{
  display:grid;grid-template-columns:130px 1fr;gap:18px;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.leg-contact__label{
  font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);padding-top:3px;min-width:0;
}
.leg-contact__value{color:var(--ink-2);font-size:.96rem;min-width:0}
a.leg-contact__value{color:var(--moss);font-weight:600}
a.leg-contact__value:hover{text-decoration:underline}

/* ---------- highlight ---------- */
.leg-highlight{
  background:var(--wood);color:rgba(255,255,255,.78);
  padding:28px 30px;border-left:4px solid var(--oak);
}
.leg-highlight__title{
  font-family:var(--font-d);font-size:1.16rem;font-weight:600;color:#fff;margin-bottom:12px;
}
.leg-highlight p{font-size:.97rem}
.leg-highlight strong{color:#fff}
.leg-highlight--info{
  background:var(--moss-soft);color:var(--ink-2);border-left-color:var(--moss);
}
.leg-highlight--info .leg-highlight__title{color:var(--moss-d)}
.leg-highlight--info strong{color:var(--ink)}

/* ---------- lists ---------- */
.leg-list{display:flex;flex-direction:column;gap:9px;margin:14px 0}
.leg-list li{
  position:relative;padding-left:22px;font-size:.95rem;color:var(--ink-2);
}
.leg-list li::before{
  content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  background:var(--oak);transform:rotate(45deg);
}
.leg-list--check li::before{
  content:"";left:0;top:6px;width:11px;height:6px;background:none;transform:rotate(-45deg);
  border-left:2px solid var(--moss);border-bottom:2px solid var(--moss);
}
.leg-list--numbered{counter-reset:legnum}
.leg-list--numbered li{counter-increment:legnum;padding-left:30px}
.leg-list--numbered li::before{
  content:counter(legnum);left:0;top:1px;width:20px;height:20px;
  background:var(--moss-soft);color:var(--moss-d);transform:none;
  border-radius:50%;font-size:.7rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- misc ---------- */
.leg-note{
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-2);
  font-size:.86rem;color:var(--ink-3);
}
.leg-link{color:var(--moss);font-weight:600;border-bottom:1px solid rgba(79,107,58,.35)}
.leg-link:hover{border-bottom-color:var(--moss)}
.leg-footer-note{
  margin-top:8px;padding:22px 24px;background:var(--paper-2);
  border:1px solid var(--line);font-size:.88rem;color:var(--ink-3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .leg-hero{padding:44px 0 38px}
  .leg-main{padding:52px 0 68px}
  .leg-content{gap:44px}
}

@media (max-width:768px){
  .leg-hero{padding:34px 0 30px}
  .leg-hero__container,.leg-main__container{width:min(920px,100% - 32px)}
  .leg-main{padding:42px 0 56px}
  .leg-content{gap:36px}
  .leg-toc ul,.leg-toc ol{grid-template-columns:1fr}
  .leg-card{padding:22px 20px}
  .leg-highlight{padding:24px 22px}
  .leg-contact__item{grid-template-columns:1fr;gap:3px;padding:11px 0}
}

@media (max-width:480px){
  .leg-hero{padding:28px 0 26px}
  .leg-hero__container,.leg-main__container{width:min(920px,100% - 26px)}
  .leg-section__title{margin-bottom:20px}
  .leg-card{padding:20px 17px}
  .leg-card__body{font-size:.94rem}
  .leg-highlight{padding:20px 18px}
  .leg-toc{padding:20px 18px}
}

@media (max-width:375px){
  .leg-hero__container,.leg-main__container{width:min(920px,100% - 20px)}
  .leg-card__title{font-size:1.06rem}
  .leg-list li{font-size:.91rem}
}