/* ==========================================================================
   Innsbruck Tischler — legal.css (Impressum & Datenschutz, prefix leg-)
   Loads after main.css and reuses its tokens.
   ========================================================================== */

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

/* ---------- hero ---------- */
.leg-hero {
    background: var(--sand);
    border-bottom: 1px solid var(--line);
    padding: 54px 0 44px;
}
.leg-hero__container {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 28px;
}
.leg-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 22px;
}
.leg-hero__breadcrumb a { color: var(--muted); }
.leg-hero__breadcrumb a:hover { color: var(--rot); }
.leg-hero__breadcrumb-sep { color: var(--line-2); }

.leg-hero__content { max-width: 780px; }
.leg-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-d);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--rot);
    margin-bottom: 14px;
}
.leg-hero__tag i { width: 30px; height: 2px; background: var(--rot); display: block; }
.leg-hero__title {
    font-family: var(--ff-d);
    font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 14px;
}
.leg-hero__subtitle { font-size: 1rem; color: var(--ink-3); margin: 0; }

/* ---------- layout: sticky toc + content ---------- */
.leg-main { padding: 62px 0 92px; }
.leg-main__container {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 52px;
    align-items: start;
}

.leg-toc {
    position: sticky;
    top: 110px;
    min-width: 0;
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px 22px;
}
.leg-toc__h {
    display: block;
    font-family: var(--ff-d);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}
.leg-toc__nav { display: flex; flex-direction: column; }
.leg-toc__nav a {
    padding: 9px 0;
    font-size: .88rem;
    font-weight: 500;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line);
}
.leg-toc__nav a:last-child { border-bottom: 0; }
.leg-toc__nav a:hover { color: var(--rot); }

.leg-content { min-width: 0; max-width: 780px; }

/* ---------- sections ---------- */
.leg-section { margin-bottom: 46px; scroll-margin-top: 110px; }
.leg-section:last-child { margin-bottom: 0; }
.leg-section__title {
    font-family: var(--ff-d);
    font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ink);
}
.leg-section p { font-size: .98rem; margin: 0 0 16px; }
.leg-section p:last-child { margin-bottom: 0; }

.leg-link { color: var(--rot); text-decoration: underline; overflow-wrap: anywhere; }

/* ---------- cards ---------- */
.leg-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 26px 28px;
    margin-bottom: 18px;
}
.leg-card__title {
    font-family: var(--ff-d);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 16px;
}
.leg-card__body p { font-size: .95rem; }

.leg-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.leg-contact__item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--line-2);
}
.leg-contact__label {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.leg-contact__value {
    font-size: .95rem;
    color: var(--ink-2);
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* ---------- lists ---------- */
.leg-list { margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.leg-list li {
    position: relative;
    padding-left: 26px;
    font-size: .95rem;
}
.leg-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 11px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-2);
}
.leg-list--check li::before {
    background: var(--rot);
}

/* ---------- highlights & notes ---------- */
.leg-highlight {
    background: var(--rot-l);
    border-radius: var(--r);
    padding: 22px 26px;
    margin: 20px 0;
}
.leg-highlight__title {
    font-family: var(--ff-d);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
}
.leg-highlight p { font-size: .94rem; margin: 0; }
.leg-highlight--info { background: var(--sand); border-left: 3px solid var(--ink); }

.leg-note {
    margin: 14px 0 0;
    font-size: .86rem;
    color: var(--muted);
    font-style: italic;
}

.leg-footer-note {
    margin-top: 26px;
    padding: 20px 24px;
    background: var(--sand);
    border-radius: var(--r-s);
}
.leg-footer-note p { font-size: .88rem; color: var(--muted); margin: 0 0 4px; }
.leg-footer-note p:last-child { margin-bottom: 0; }
.leg-footer-note strong { color: var(--ink-2); }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
    .leg-hero__container,
    .leg-main__container { padding-left: 24px; padding-right: 24px; }
    .leg-main__container { grid-template-columns: 220px 1fr; gap: 38px; }
}

@media (max-width: 1024px) {
    .leg-hero { padding: 48px 0 38px; }
    .leg-main { padding: 52px 0 76px; }
    .leg-main__container { grid-template-columns: 1fr; gap: 28px; }
    .leg-toc { position: static; }
    .leg-toc__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
    .leg-content { max-width: none; }
}

@media (max-width: 768px) {
    .leg-hero { padding: 40px 0 32px; }
    .leg-hero__container,
    .leg-main__container { padding-left: 18px; padding-right: 18px; }
    .leg-main { padding: 42px 0 62px; }
    .leg-section { margin-bottom: 36px; }
    .leg-card { padding: 22px 20px; }
    .leg-contact { grid-template-columns: 1fr; gap: 12px; }
    .leg-highlight { padding: 20px 20px; }
}

@media (max-width: 480px) {
    .leg-hero__container,
    .leg-main__container { padding-left: 15px; padding-right: 15px; }
    .leg-toc { padding: 20px 18px; }
    .leg-toc__nav { grid-template-columns: 1fr; }
    .leg-section p,
    .leg-list li { font-size: .94rem; }
}

@media (max-width: 375px) {
    .leg-hero__container,
    .leg-main__container { padding-left: 13px; padding-right: 13px; }
    .leg-card { padding: 20px 15px; }
    .leg-footer-note { padding: 16px 15px; }
}