/* Rechtsseiten, geladen über $page_css = ['legal']. Markup des Kopfs: includes/legal-head.php. */

@layer components {
    .legal-hero {
        background: var(--flame); color: var(--hard);
        border-bottom: 4px solid var(--hard); padding-block: 72px 64px;
    }
    .legal-hero-in { position: relative; }
    .legal-hero .lbl { color: var(--hard); }
    .legal-hero h1 {
        color: var(--hard); font-size: clamp(2.6rem, 8vw, 7rem);
        line-height: .88; letter-spacing: -.05em; max-width: 12ch; hyphens: manual;
    }
    .legal-intro { margin-top: 24px; font-size: 21px; font-weight: 500; line-height: 1.4; max-width: 40ch; }
    .legal-seal {
        position: absolute; right: 0; top: 50%; translate: 0 -50%;
        width: 170px; height: 170px; border-radius: 50%;
        display: grid; place-items: center; text-align: center;
        background: var(--hard); color: var(--bone);
        font-size: 26px; font-weight: 800; line-height: 1.02; letter-spacing: -.02em;
        rotate: calc(var(--tilt) * -8deg);
    }

    .legal-layout {
        display: grid; grid-template-columns: 250px minmax(0, 1fr);
        gap: 64px; align-items: start; padding-block: 72px 96px;
    }
    .legal-layout--solo { grid-template-columns: minmax(0, 1fr); }
    .toc { position: sticky; top: 100px; }
    .toc ol { border-top: 4px solid var(--rule); }
    .toc a {
        display: flex; align-items: center; min-height: 44px; padding: 8px 8px;
        border-bottom: 2px solid var(--hair);
        font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--ink);
        transition: background-color .18s, color .18s, padding-left .2s;
    }
    .toc a:hover, .toc a:focus-visible { background: var(--acid); color: var(--hard); padding-left: 14px; }

    .legal-body { max-width: 72ch; }
    .legal-body > :first-child { margin-top: 0; }
    .legal-body h2 {
        font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -.035em;
        margin: 56px 0 18px; padding-top: 20px; border-top: 4px solid var(--rule);
    }
    .legal-body h2:first-child { margin-top: 0; }
    .legal-body h3 { font-size: 1.15rem; margin: 26px 0 8px; }
    .legal-body p, .legal-body li { font-size: 17px; margin-bottom: 13px; }
    .legal-body ul { list-style: disc; padding-left: 22px; }
    .legal-body address { font-style: normal; margin-bottom: 13px; }
    .legal-body a { font-weight: 700; color: var(--ink); box-shadow: inset 0 -3px 0 var(--flame); }
    .legal-body a:hover { background: var(--acid); color: var(--hard); box-shadow: inset 0 -3px 0 var(--hard); }

    .legal-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block: 8px 24px; }
    .legal-card {
        padding: 22px 24px; background: var(--paper); color: var(--ink);
        border: 4px solid var(--rule); box-shadow: calc(var(--shadow) * .8) calc(var(--shadow) * .8) 0 var(--ink);
        rotate: calc(var(--tilt) * -.4deg);
    }
    .legal-card:nth-child(even) { rotate: calc(var(--tilt) * .4deg); }
    .legal-card.tint--flame { background: var(--flame); color: var(--hard); }
    .legal-card.tint--acid  { background: var(--acid);  color: var(--hard); }
    .legal-card.tint--ink   { background: var(--ink);   color: var(--paper); box-shadow: calc(var(--shadow) * .8) calc(var(--shadow) * .8) 0 var(--flame); }
    .legal-body .legal-card h3 {
        margin: 0 0 12px; font-family: var(--mono); font-size: 12px; font-weight: 600;
        line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: inherit;
    }
    .legal-card p, .legal-card address { margin-bottom: 0; color: inherit; }
    .legal-body .legal-card a { color: inherit; box-shadow: inset 0 -3px 0 currentColor; }
    .legal-body .legal-card a:hover { background: var(--acid); color: var(--hard); box-shadow: inset 0 -3px 0 var(--hard); }

    .legal-summary {
        padding: 28px 32px; margin-bottom: 16px;
        border: 4px solid var(--hard); box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
    }
    .legal-summary .lead { color: var(--hard); max-width: none; margin-bottom: 0; }
    .legal-body .zeros { list-style: none; padding: 0; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
    .legal-body .zeros li {
        margin: 0; padding: 7px 11px; background: var(--hard); color: var(--bone);
        font-family: var(--mono); font-size: 12px; font-weight: 600;
        text-transform: uppercase; letter-spacing: .06em;
    }


    @media (max-width: 900px) {
        .legal-seal { display: none; }
        .legal-layout { grid-template-columns: 1fr; gap: 40px; padding-block: 48px 72px; }
        .toc { position: static; }
    }

    @media (max-width: 768px) {
        .legal-hero { padding-block: 44px 40px; }
        /* Inhaltsverzeichnis mobil als Chips, damit es nicht einen ganzen Bildschirm frisst. */
        .toc ol { display: flex; flex-wrap: wrap; gap: 8px; border-top: 0; }
        .toc a { min-height: 44px; padding: 8px 12px; border: 2px solid var(--rule); font-size: 14px; }
        .toc a:hover, .toc a:focus-visible { padding-left: 12px; }
        .legal-intro { font-size: 18px; }
        .legal-cards { grid-template-columns: 1fr; gap: 20px; }
        .legal-summary { padding: 20px; }
    }
}

@media print {
    .legal-hero, .legal-summary, .legal-card { background: #fff !important; color: #000 !important; }
    .toc, .legal-seal { display: none !important; }
    .legal-card, .legal-summary { box-shadow: none; border: 1pt solid #000; break-inside: avoid; }
}