/* Das Handbuch sieht aus wie die Anwendung.
 *
 * Es trug eine eigene Farbwelt: eigene Grautoene, eigene Blautoene, eigene
 * Schrift, ein Banner mit Farbverlauf. Wer aus dem Nachrichtenvordruck
 * herueberkam, landete sichtbar in einem anderen Programm -- und musste sich
 * neu zurechtfinden, um nachzulesen, wie das erste funktioniert.
 *
 * Deshalb steht hier keine einzige Farbe mehr. Die Seite traegt die Klassen
 * der Anwendung -- estab-tool-page, estab-tool-main, estab-tool-hero,
 * estab-tool-panel -- und bekommt von estab-ui.css Grund, Schrift, Abstaende
 * und den Seitenkopf als eine Zeile. Was hier steht, ist nur, was ein
 * Handbuch mehr braucht als eine Arbeitsseite: ein Inhaltsverzeichnis
 * daneben, Kapitel, ein Glossar und eine saubere Papierausgabe.
 */

.estab-handbook-page {
    min-width: 0;
}

.estab-handbook-page *,
.estab-handbook-page *::before,
.estab-handbook-page *::after {
    box-sizing: border-box;
}

.estab-handbook-page a:focus-visible,
.estab-handbook-page button:focus-visible,
.estab-handbook-page input:focus-visible,
.estab-handbook-page summary:focus-visible,
.estab-handbook-page [tabindex="0"]:focus-visible {
    outline: 3px solid var(--handlung-kante);
    outline-offset: 3px;
}

/* Der Sprungverweis ist fuer die Tastatur da und sonst unsichtbar. */
.estab-handbook-skip {
    background: var(--grund-tafel);
    border: 2px solid var(--handlung-kante);
    border-radius: 0 0 var(--radius-3) 0;
    color: var(--handlung-dunkel);
    font-weight: var(--stark-voll);
    left: 0;
    padding: var(--abstand-5) var(--abstand-6);
    position: fixed;
    top: 0;
    transform: translateY(-130%);
    transition: transform 120ms ease;
    z-index: 4000;
}

.estab-handbook-skip:focus {
    transform: translateY(0);
}

/* Der Kopf ist eine Zeile.
 *
 * Flaeche, Schatten, Titelgroesse und Unterlinie kommen aus der
 * Kopfzeilenregel von estab-ui.css, die fuer .estab-tool-hero gilt. Hier
 * steht nur, was das Handbuch zusaetzlich braucht: ein Rand nach aussen,
 * weil der Kopf ausserhalb von .estab-tool-main sitzt. */
.estab-handbook-hero {
    margin: 0 auto;
    max-width: 90rem;
    padding: var(--abstand-6) var(--abstand-6) var(--abstand-3);
}

.estab-handbook-main {
    padding-top: var(--abstand-6);
}

/* --- Suche ------------------------------------------------------------ */

.estab-handbook-search h2 {
    font-size: var(--schrift-5);
}

.estab-handbook-search-control label {
    display: block;
    font-weight: var(--stark-halb);
    margin-bottom: var(--abstand-3);
}

.estab-handbook-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-4);
}

.estab-handbook-search-row input {
    flex: 1 1 18rem;
    min-width: 0;
}

.estab-handbook-search-row button {
    background: var(--grund-tafel);
    border: 1px solid var(--rand-bedienelement);
    border-radius: var(--radius-2);
    color: var(--handlung-dunkel);
    cursor: pointer;
    font: inherit;
    padding: var(--abstand-3) var(--abstand-6);
}

.estab-handbook-search-row button:hover {
    background: var(--handlung-sanft);
}

.estab-handbook-search-hint,
.estab-handbook-search-status {
    color: var(--tinte-neben);
    font-size: var(--schrift-2);
    margin: var(--abstand-4) 0 0;
}

/* --- Aufteilung: Inhalt daneben, Kapitel daneben ---------------------- */

.estab-handbook-layout {
    display: grid;
    gap: var(--abstand-7);
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
}

.estab-handbook-toc {
    background: var(--grund-tafel);
    border: 1px solid var(--linie);
    border-radius: var(--radius-3);
    position: sticky;
    top: var(--abstand-6);
}

.estab-handbook-toc summary {
    cursor: pointer;
    font-weight: var(--stark-voll);
    padding: var(--abstand-5) var(--abstand-6);
}

.estab-handbook-toc nav {
    padding: 0 var(--abstand-6) var(--abstand-5);
}

.estab-handbook-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.estab-handbook-toc li + li {
    margin-top: var(--abstand-2);
}

.estab-handbook-toc a {
    display: block;
    font-size: var(--schrift-3);
    padding: var(--abstand-2) 0;
}

/* Die Gruppen sind die einzige Ordnung im Inhaltsverzeichnis. Ohne sie
   stehen einundzwanzig Zeilen untereinander, und man liest sie alle. */
.estab-handbook-toc-group {
    border-top: 1px solid var(--linie);
    color: var(--tinte-neben);
    display: block;
    font-size: var(--schrift-1);
    font-weight: var(--stark-voll);
    letter-spacing: 0.08em;
    margin-top: var(--abstand-5);
    padding-top: var(--abstand-4);
    text-transform: uppercase;
}

.estab-handbook-toc li:first-child .estab-handbook-toc-group {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.estab-handbook-chapters {
    display: grid;
    gap: var(--abstand-6);
    grid-template-columns: minmax(0, 1fr);
}

/* --- Kapitel ---------------------------------------------------------- */

.estab-handbook-chapter {
    background: var(--grund-tafel);
    border: 1px solid var(--linie);
    border-radius: var(--radius-3);
    box-shadow: var(--schatten-tafel);
    padding: var(--abstand-7);
}

.estab-handbook-chapter[hidden] {
    display: none;
}

.estab-handbook-chapter > header {
    align-items: baseline;
    border-bottom: 1px solid var(--linie);
    display: flex;
    gap: var(--abstand-5);
    margin-bottom: var(--abstand-6);
    padding-bottom: var(--abstand-4);
}

.estab-handbook-chapter > header > span {
    color: var(--tinte-neben);
    font-size: var(--schrift-5);
    font-weight: var(--stark-voll);
    min-width: 1.5rem;
}

.estab-handbook-chapter h2 {
    color: var(--handlung-dunkel);
    font-size: var(--schrift-6);
    line-height: var(--zeile-6);
    margin: 0;
}

.estab-handbook-chapter h3 {
    font-size: var(--schrift-5);
    margin: var(--abstand-7) 0 var(--abstand-4);
}

/* Eine Zeile ueber neunzig Zeichen verliert beim Ruecksprung ihren Anfang. */
.estab-handbook-chapter p,
.estab-handbook-chapter li {
    max-width: 34rem;
    overflow-wrap: anywhere;
}

.estab-handbook-chapter ul,
.estab-handbook-chapter ol {
    margin: 0 0 var(--abstand-6);
    padding-left: var(--abstand-7);
}

.estab-handbook-chapter li + li {
    margin-top: var(--abstand-4);
}

.estab-handbook-steps {
    counter-reset: handbuch-schritt;
    list-style: none;
    padding-left: 0;
}

.estab-handbook-steps > li {
    counter-increment: handbuch-schritt;
    padding-left: var(--abstand-7);
    position: relative;
}

.estab-handbook-steps > li::before {
    color: var(--handlung-dunkel);
    content: counter(handbuch-schritt) ".";
    font-weight: var(--stark-voll);
    left: 0;
    position: absolute;
}

.estab-handbook-chapter code {
    background: var(--grund-gedaempft);
    border-radius: var(--radius-1);
    font-size: 0.95em;
    padding: 0 var(--abstand-2);
}

.estab-handbook-chapter pre {
    background: var(--grund-gedaempft);
    border: 1px solid var(--linie);
    border-radius: var(--radius-2);
    margin: 0 0 var(--abstand-6);
    overflow-x: auto;
    padding: var(--abstand-5);
}

.estab-handbook-chapter pre code {
    background: none;
    padding: 0;
}

/* --- Kaesten ---------------------------------------------------------- */

.estab-handbook-callout {
    background: var(--hinweis-flaeche);
    border-left: 4px solid var(--hinweis-kante);
    border-radius: var(--radius-2);
    color: var(--hinweis-tinte);
    margin: 0 0 var(--abstand-6);
    max-width: 40rem;
    padding: var(--abstand-5) var(--abstand-6);
}

.estab-handbook-callout strong {
    display: block;
    margin-bottom: var(--abstand-3);
}

.estab-handbook-callout p {
    color: var(--tinte);
    margin: 0;
}

.estab-handbook-callout-important {
    background: var(--achtung-flaeche);
    border-left-color: var(--achtung-kante);
    color: var(--achtung-tinte);
}

.estab-handbook-callout-danger {
    background: var(--fehler-flaeche);
    border-left-color: var(--fehler-kante);
    color: var(--fehler-tinte);
}

.estab-handbook-facts,
.estab-handbook-compare,
.estab-handbook-admin-grid {
    display: grid;
    gap: var(--abstand-5);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 0 0 var(--abstand-6);
}

.estab-handbook-facts > div,
.estab-handbook-compare > section,
.estab-handbook-admin-grid > a {
    background: var(--grund-seite);
    border: 1px solid var(--linie);
    border-radius: var(--radius-2);
    padding: var(--abstand-5);
}

.estab-handbook-facts strong,
.estab-handbook-admin-grid strong {
    display: block;
    margin-bottom: var(--abstand-3);
}

.estab-handbook-facts span,
.estab-handbook-admin-grid span {
    color: var(--tinte-neben);
    display: block;
    font-size: var(--schrift-3);
}

.estab-handbook-admin-grid > a {
    display: block;
    text-decoration: none;
}

.estab-handbook-admin-grid > a:hover {
    background: var(--handlung-sanft);
}

.estab-handbook-admin-grid strong {
    text-decoration: underline;
}

.estab-handbook-compare h3 {
    margin-top: 0;
}

.estab-handbook-flow-summary {
    align-items: center;
    background: var(--grund-seite);
    border: 1px solid var(--linie);
    border-radius: var(--radius-2);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--schrift-3);
    gap: var(--abstand-3);
    margin: 0 0 var(--abstand-6);
    padding: var(--abstand-5);
}

.estab-handbook-flow-summary b {
    color: var(--tinte-neben);
}

/* --- Tabelle, Glossar, Fehlerliste ------------------------------------ */

.estab-handbook-table-wrap {
    border: 1px solid var(--linie);
    border-radius: var(--radius-2);
    margin: 0 0 var(--abstand-6);
    overflow-x: auto;
}

/* Die Tabelle rollt in ihrem eigenen Kasten, nicht die Seite. 26rem ist die
   Breite, unter der die zweite Spalte zu Wortsalat wird -- darueber passt
   sie in die Kapitelspalte, ohne dass jemand schieben muss. */
.estab-handbook-table-wrap table {
    border-collapse: collapse;
    min-width: 26rem;
    width: 100%;
}

.estab-handbook-table-wrap th,
.estab-handbook-table-wrap td {
    border-bottom: 1px solid var(--linie);
    padding: var(--abstand-4) var(--abstand-5);
    text-align: left;
    vertical-align: top;
}

.estab-handbook-table-wrap th {
    background: var(--grund-gedaempft);
    font-size: var(--schrift-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.estab-handbook-table-wrap tr:last-child td {
    border-bottom: 0;
}

.estab-handbook-glossary {
    display: grid;
    gap: var(--abstand-4);
    margin: 0 0 var(--abstand-6);
}

.estab-handbook-glossary > div {
    border-left: 3px solid var(--linie-kraeftig);
    padding-left: var(--abstand-5);
}

.estab-handbook-glossary dt {
    font-weight: var(--stark-voll);
}

.estab-handbook-glossary dd {
    color: var(--tinte-neben);
    margin: var(--abstand-2) 0 0;
    max-width: 34rem;
}

.estab-handbook-troubleshooting {
    display: grid;
    gap: var(--abstand-4);
    margin-bottom: var(--abstand-6);
}

.estab-handbook-troubleshooting details {
    background: var(--grund-seite);
    border: 1px solid var(--linie);
    border-radius: var(--radius-2);
}

.estab-handbook-troubleshooting summary {
    cursor: pointer;
    font-weight: var(--stark-halb);
    padding: var(--abstand-4) var(--abstand-5);
}

.estab-handbook-troubleshooting details > * {
    max-width: 40rem;
}

.estab-handbook-troubleshooting details > p {
    margin: 0;
    padding: 0 var(--abstand-5) var(--abstand-5);
}

.estab-handbook-no-results {
    background: var(--achtung-flaeche);
    border: 1px solid var(--achtung-kante);
    border-radius: var(--radius-2);
    color: var(--achtung-tinte);
    padding: var(--abstand-5) var(--abstand-6);
}

.estab-handbook-footer {
    border-top: 1px solid var(--linie);
    color: var(--tinte-neben);
    font-size: var(--schrift-2);
    margin: 0 auto;
    max-width: 90rem;
    padding: var(--abstand-6);
}

.estab-handbook-footer p {
    margin: 0 0 var(--abstand-2);
}

/* --- Schmale Bildschirme ---------------------------------------------- */

@media (max-width: 64rem) {
    .estab-handbook-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .estab-handbook-toc {
        position: static;
    }

    /* Einundzwanzig Zeilen untereinander schoeben das erste Kapitel unter
       den Rand. Nebeneinander bleibt das Verzeichnis eine Uebersicht. */
    .estab-handbook-toc ol {
        columns: 2;
        column-gap: var(--abstand-7);
    }

    .estab-handbook-toc li {
        break-inside: avoid;
    }
}

@media (max-width: 48rem) {
    .estab-handbook-hero {
        padding: var(--abstand-5) var(--abstand-5) var(--abstand-3);
    }

    .estab-handbook-meta {
        margin-left: 0;
    }

    .estab-handbook-chapter {
        padding: var(--abstand-6);
    }
}

@media (max-width: 32rem) {
    .estab-handbook-toc ol {
        columns: 1;
    }

    .estab-handbook-chapter > header {
        gap: var(--abstand-4);
    }

    .estab-handbook-chapter pre {
        font-size: var(--schrift-2);
    }

    .estab-handbook-search-row button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .estab-handbook-skip {
        transition: none;
    }
}

/* --- Papier ------------------------------------------------------------ */

@media print {
    .estab-handbook-skip,
    .estab-handbook-search,
    .estab-handbook-toc,
    .estab-session-bar,
    .estab-navigation {
        display: none !important;
    }

    .estab-handbook-page {
        background: var(--grund-tafel);
    }

    .estab-handbook-chapter {
        border: 0;
        box-shadow: none;
        break-inside: avoid;
        padding: 0 0 var(--abstand-7);
    }

    .estab-handbook-troubleshooting details {
        break-inside: avoid;
    }

    .estab-handbook-troubleshooting details > p {
        display: block;
    }
}