/*
 * Hilfe-Seiten – Helper-Styles für die statischen hilfe*.html-Seiten
 *
 * Wird von hilfe.html, hilfe-korpussuche.html, hilfe-playground.html,
 * hilfe-daten.html eingebunden. Enthält Tailwind-Utility-Klassen, die vom
 * Tailwind-Purge aus tailwind-output.css entfernt wurden, weil sie nur
 * auf den neuen Hilfe-Seiten verwendet werden.
 *
 * Alle Werte folgen der Tailwind-Default-Skala (rem-basiert, root = 16px).
 */

/* ============================================================
 * Layout – Width & Height
 * ============================================================ */
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }

/* ============================================================
 * Layout – Margins & Padding
 * ============================================================ */
.mb-10 { margin-bottom: 2.5rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-6 { margin-top: 1.5rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.ml-4 { margin-left: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.-mb-px { margin-bottom: -1px; }

/* ============================================================
 * Listen – Bullet- und Nummerierungs-Styles
 * ============================================================ */
.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }
.list-inside { list-style-position: inside; }

/* ============================================================
 * Layout – Flex/Grid Gaps
 * ============================================================ */
.gap-x-8 { column-gap: 2rem; }
.gap-y-2 { row-gap: 0.5rem; }

/* ============================================================
 * Borders
 * ============================================================ */
.border-b-2 { border-bottom-width: 2px; }
.border-l-4 { border-left-width: 4px; }
.border-transparent { border-color: transparent; }
.border-blue-400 { border-color: rgb(96, 165, 250); }

/* ============================================================
 * Border Radius – einzelne Ecken
 * ============================================================ */
.rounded-r-lg {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* ============================================================
 * Scroll-Margin für Anker-Links – kompensiert den 72px hohen
 * Sticky-Header plus etwas Atemluft (6rem = 96px)
 * ============================================================ */
.scroll-mt-24 { scroll-margin-top: 6rem; }

/* ============================================================
 * Hover-Varianten – brauchen \: Escape für den Selektor
 * ============================================================ */
.hover\:border-brand-400:hover { border-color: rgb(127, 164, 232); }
.hover\:border-slate-300:hover { border-color: rgb(203, 213, 225); }
.hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.hover\:text-brand-600:hover { color: rgb(38, 92, 196); }
.hover\:text-brand-700:hover { color: rgb(31, 74, 162); }
.hover\:text-slate-900:hover { color: rgb(15, 23, 42); }

/* ============================================================
 * Group-Hover – wirkt auf Kind-Elemente beim Hover des Containers
 * ============================================================ */
.group:hover .group-hover\:text-brand-700 { color: rgb(31, 74, 162); }

/* ============================================================
 * Sticky TOC Layout – zweispaltig ab 1280px (xl)
 *
 * Struktur:
 *   <div class="hilfe-main-grid">
 *     <div class="hilfe-content">...Inhalt...</div>
 *     <aside class="hilfe-toc-aside">...TOC...</aside>
 *   </div>
 *
 * Unter xl: einspaltig, aside unsichtbar, Inline-TOC sichtbar.
 * Ab xl: zweispaltig, aside sticky rechts, Inline-TOC ausgeblendet.
 * ============================================================ */
.hilfe-main-grid {
    max-width: 56rem; /* = max-w-4xl */
    margin-left: auto;
    margin-right: auto;
}
.hilfe-content {
    min-width: 0;
}
.hilfe-toc-aside {
    display: none;
}
@media (min-width: 1280px) {
    .hilfe-main-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 3rem;
        max-width: 72rem; /* ~1152px */
    }
    .hilfe-toc-aside {
        display: block;
        position: sticky;
        top: 6rem;
        align-self: start;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
    }
    .hilfe-toc-inline {
        display: none;
    }
}

/* ============================================================
 * Help-Icon – kleines Fragezeichen-Icon für Inline-Hilfe
 * in korpus.html und playground/index.html
 * ============================================================ */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: rgb(148, 163, 184); /* slate-400 */
    transition: color 0.15s ease;
    flex-shrink: 0;
}
.help-icon:hover,
.help-icon:focus-visible {
    color: rgb(38, 92, 196); /* brand-600 */
}
.help-icon svg {
    width: 1rem;
    height: 1rem;
}

/* ============================================================
 * Stand-Zeile – Frischesignal am Ende jeder Hilfe-Seite
 * ============================================================ */
.hilfe-stand {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(226, 232, 240); /* slate-200 */
    text-align: center;
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(100, 116, 139); /* slate-500 */
}
.hilfe-stand a {
    color: rgb(100, 116, 139);
    text-decoration: underline;
    text-decoration-color: rgb(203, 213, 225);
}
.hilfe-stand a:hover {
    color: rgb(38, 92, 196); /* brand-600 */
    text-decoration-color: currentColor;
}