/* ==========================================================================
   Salzburger Holzwerk — Impressum & Datenschutz (leg-)
   Loads after main.css and reuses its tokens.
   ========================================================================== */

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

/* ---------- hero band ---------- */
.leg-hero {
    background: var(--linen);
    border-bottom: 1px solid var(--line);
    padding: 54px 0 46px;
}

.leg-hero__container,
.leg-main__container {
    width: min(1000px, 100% - 56px);
    margin-inline: auto;
}

.leg-hero__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: 24px;
}

.leg-hero__breadcrumb a { color: var(--muted); }
.leg-hero__breadcrumb a:hover { color: var(--petrol); }
.leg-hero__breadcrumb-sep { color: var(--line-2); }

.leg-hero__content { max-width: 78ch; }

.leg-hero__title {
    font-size: clamp(1.9rem, 1.35rem + 2vw, 2.8rem);
    margin-bottom: 14px;
}

.leg-hero__subtitle {
    font-size: 1.02rem;
    color: var(--ink-3);
    max-width: 66ch;
}

/* ---------- main ---------- */
.leg-main { padding: 60px 0 96px; }

.leg-content { min-width: 0; }

.leg-section { margin-bottom: 52px; }
.leg-section:last-child { margin-bottom: 0; }

.leg-section__title {
    font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
    padding-top: 18px;
    border-top: 2px solid var(--ink);
    margin-bottom: 22px;
}

.leg-section > p { font-size: 1rem; line-height: 1.75; margin-bottom: 1.05em; }

/* ---------- table of contents ---------- */
.leg-toc {
    background: var(--linen);
    border-left: 3px solid var(--honey);
    padding: 26px 28px 28px;
    margin-bottom: 48px;
}

.leg-toc__title {
    font-family: var(--ff-d);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
}

.leg-toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 26px;
}

.leg-toc__list a {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: .92rem;
    color: var(--ink-3);
}
.leg-toc__list a:hover { color: var(--petrol); }

/* ---------- cards ---------- */
.leg-card {
    background: var(--white);
    border: 1px solid var(--line);
    padding: 26px 28px 28px;
    margin-bottom: 20px;
}
.leg-card:last-child { margin-bottom: 0; }

.leg-card__title {
    font-size: 1.08rem;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.leg-card__body { font-size: .97rem; line-height: 1.72; }
.leg-card__body p { margin-bottom: .95em; }
.leg-card__body p:last-child { margin-bottom: 0; }

/* ---------- contact rows ---------- */
.leg-contact { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }

.leg-contact__item {
    background: var(--white);
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    gap: 14px;
    padding: 13px 16px;
    align-items: baseline;
}

.leg-contact__label {
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    min-width: 0;
}

.leg-contact__value {
    font-size: .95rem;
    color: var(--ink-2);
    min-width: 0;
    overflow-wrap: anywhere;
}

a.leg-contact__value { color: var(--petrol); }
a.leg-contact__value:hover { color: var(--honey-d); }

/* ---------- lists ---------- */
.leg-list { display: grid; gap: 10px; margin: 6px 0 0; }

.leg-list li {
    position: relative;
    padding-left: 22px;
    font-size: .95rem;
    line-height: 1.65;
}

.leg-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .68em;
    width: 6px;
    height: 6px;
    background: var(--honey);
}

.leg-list--check li::before {
    content: "";
    left: 0;
    top: .42em;
    width: 12px;
    height: 7px;
    background: transparent;
    border-left: 2px solid var(--petrol);
    border-bottom: 2px solid var(--petrol);
    transform: rotate(-45deg);
}

/* ---------- highlight blocks ---------- */
.leg-highlight {
    background: var(--ink);
    color: rgba(255, 255, 255, .82);
    padding: 26px 28px 28px;
}

.leg-highlight__title {
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: 1.08rem;
    color: #fff;
    margin-bottom: 10px;
}

.leg-highlight p { font-size: .96rem; line-height: 1.72; }
.leg-highlight p:last-child { margin-bottom: 0; }
.leg-highlight b, .leg-highlight strong { color: #fff; }
.leg-highlight a { color: var(--honey); }
.leg-highlight a:hover { color: #fff; }

.leg-highlight--info {
    background: var(--petrol-l);
    color: var(--body);
    border-left: 3px solid var(--petrol);
}
.leg-highlight--info .leg-highlight__title { color: var(--petrol-d); }
.leg-highlight--info b, .leg-highlight--info strong { color: var(--ink-2); }
.leg-highlight--info a { color: var(--petrol); }
.leg-highlight--info a:hover { color: var(--honey-d); }

/* ---------- misc ---------- */
.leg-note {
    font-size: .87rem;
    color: var(--muted);
    border-left: 2px solid var(--line-2);
    padding-left: 14px;
    margin-top: 14px;
}

.leg-updated {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: .87rem;
    color: var(--muted);
}

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
    .leg-hero__container,
    .leg-main__container { width: min(1000px, 100% - 44px); }
}

@media (max-width: 1024px) {
    .leg-main { padding: 48px 0 76px; }
}

@media (max-width: 768px) {
    .leg-hero { padding: 40px 0 36px; }
    .leg-hero__container,
    .leg-main__container { width: min(1000px, 100% - 32px); }
    .leg-hero__breadcrumb { margin-bottom: 16px; }
    .leg-main { padding: 38px 0 64px; }
    .leg-section { margin-bottom: 40px; }
    .leg-card { padding: 22px 20px 24px; }
    .leg-toc { padding: 22px 20px 24px; margin-bottom: 36px; }
    .leg-toc__list { grid-template-columns: 1fr; }
    .leg-contact__item { grid-template-columns: 1fr; gap: 4px; }
    .leg-highlight { padding: 22px 20px 24px; }
}

@media (max-width: 480px) {
    .leg-hero__container,
    .leg-main__container { width: min(1000px, 100% - 26px); }
    .leg-card__body,
    .leg-section > p { font-size: .94rem; }
}

@media (max-width: 375px) {
    .leg-hero__container,
    .leg-main__container { width: min(1000px, 100% - 20px); }
}