/* Hilfe — Bausteine der Seiten (Überschriften, Abschnitte, Tabellen, Hinweis-Kästen,
   Wegweiser, Querverweise). Gilt nur innerhalb von .content-inner.
   Farben ausschliesslich aus den Gestaltungswerten der Oberfläche (/css/style.css). */

.content-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding-bottom: 1em;
    font-size: 14px;
    line-height: 1.65;
    color: var(--aic-text);
}

/* Überschriften deutlich vom Fliesstext abgesetzt: Grösse UND Gewicht, Stufen klar getrennt
   (Fliesstext 14 · h3 17 · h2 21 · h1 28). */
.content-inner h1 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    padding-bottom: 10px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--aic-accent);
}
.content-inner h2 { font-size: 21px; font-weight: 600; line-height: 1.3; margin: 30px 0 14px; }
.content-inner h3 { font-size: 17px; font-weight: 600; line-height: 1.35; margin: 26px 0 10px; }

.content-inner p { margin-bottom: 14px; }
.content-inner ul,
.content-inner ol { margin-bottom: 16px; padding-left: 24px; }
/* Luft zwischen Aufzählungspunkten, damit jeder Punkt für sich steht. */
.content-inner li { margin-bottom: 10px; padding-left: 2px; }
.content-inner li:last-child { margin-bottom: 0; }
.content-inner li > ul,
.content-inner li > ol { margin-top: 8px; margin-bottom: 0; }

.content-inner a { color: var(--aic-accent); text-decoration: none; }
.content-inner a:hover { text-decoration: underline; }

.content-inner img { max-width: 100%; border-radius: var(--aic-radius-sm); margin: 12px 0; }

.content-inner code {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--aic-surface-inset-3);
}

/* Bezeichnung eines Bedienelements, so wie sie in der Oberfläche steht */
.content-inner .ui {
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--aic-border-2);
    background: var(--aic-surface);
    white-space: nowrap;
}

/* Symbol eines Knopfs im Text — klein wie ein Knopf der Oberfläche, mittig zur Schrift (`help.js#symboleEinsetzen`).
   Masse in em: in Überschriften wächst es mit. Der Kasten ist für alle Symbole gleich (Nutzer 2026-10-11: einheitlich). */
.content-inner .ui-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55em;
    height: 1.55em;
    vertical-align: -0.17em;
    line-height: 1;
    border-radius: 4px;
    border: 1px solid var(--aic-border-2);
    background: var(--aic-surface);
    color: var(--aic-icon);
}
.content-inner .ui-symbol svg { width: 1.05em; height: 1.05em; }

/* ---------- Abschnitte: help.js legt jeden h2-Abschnitt in einen Block ---------- */

.help-section-block {
    background: var(--aic-surface);
    border: 1px solid var(--aic-border-2);
    border-radius: var(--aic-radius-sm);
    padding: 18px;
    margin-bottom: 14px;
    overflow-x: auto;
}
.help-section-block > h2:first-child { margin-top: 0; }
.help-section-block > :last-child { margin-bottom: 0; }

/* ---------- Tabellen ---------- */

.content-inner table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 13px;
}
.content-inner th,
.content-inner td {
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--aic-border-2);
}
.content-inner th { background: var(--aic-tabellenkopf); font-weight: 500; }

/* ---------- Hinweis-Kästen ---------- */

.content-inner .tipp,
.content-inner .warnung,
.content-inner .in-entwicklung {
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: var(--aic-radius-sm);
    border-left: 4px solid var(--aic-accent);
    background: var(--aic-accent-wash-4);
    font-size: 13px;
    line-height: 1.6;
}
.content-inner .warnung { border-left-color: var(--aic-warn); background: var(--aic-warn-wash); }
.content-inner .in-entwicklung { border-left-color: var(--aic-text-dim); background: var(--aic-surface-inset-3); }

/* ---------- Wegweiser: Kacheln auf Eingangsseiten ---------- */

.content-inner .wegweiser {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
/* Kachel wie ein Bereich der Oberfläche: blauer Kopf mit weisser Schrift, Beschreibung darunter. */
.content-inner .wegweiser a {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--aic-border-2);
    border-radius: var(--aic-radius-sm);
    background: var(--aic-surface);
    color: var(--aic-text);
    transition: border-color .15s, box-shadow .15s;
}
.content-inner .wegweiser a:hover,
.content-inner .wegweiser a:focus-visible { border-color: var(--aic-accent); box-shadow: var(--aic-shadow-md); text-decoration: none; }
.content-inner .wegweiser strong {
    display: block;
    padding: 10px 14px;
    background: var(--aic-accent);
    color: var(--aic-text-inverse);
    font-weight: 600;
    line-height: 1.35;
}
.content-inner .wegweiser a:hover strong { background: var(--aic-accent-2); }
.content-inner .wegweiser span { display: block; padding: 10px 14px 12px; font-size: 13px; color: var(--aic-text-muted); }

/* ---------- Siehe auch: Querverweise am Seitenende ----------
   Blaue Leiste wie die Kopfzeile der Oberfläche, die Verweise als Knöpfe im Stil ihrer
   Kopfzeilen-Knöpfe (Aktualisieren, Neustart). help.js stellt sie als eigenen Abschluss unter
   die Abschnitte. */

.content-inner .siehe-auch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
    padding: 12px 14px;
    border-radius: var(--aic-radius-sm);
    background: var(--aic-accent);
    color: var(--aic-text-inverse);
    font-size: 13px;
}
.content-inner .siehe-auch strong { margin-right: 4px; font-weight: 500; }
.content-inner .siehe-auch a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--aic-text-inverse) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--aic-text-inverse) 30%, transparent);
    color: var(--aic-text-inverse);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s;
}
.content-inner .siehe-auch a:hover,
.content-inner .siehe-auch a:focus-visible { background: color-mix(in srgb, var(--aic-text-inverse) 25%, transparent); text-decoration: none; }

/* ---------- Hinweis, wenn eine Seite aus einer anderen Sprache kommt ---------- */

.hinweis-sprache {
    max-width: 1120px;
    margin: 0 auto 14px;
    padding: 8px 12px;
    border-radius: var(--aic-radius-sm);
    background: var(--aic-warn-wash);
    border-left: 4px solid var(--aic-warn);
    font-size: 12px;
    color: var(--aic-text);
}

/* Touch (Tablet, Handy): Tippziele mindestens 44 px, unabhängig von der Breite. */
@media (pointer: coarse) {
    .content-inner .siehe-auch a { height: 44px; padding: 0 16px; font-size: 13px; }
    .content-inner .wegweiser strong { padding: 12px 16px; }
}

@media (max-width: 768px) {
    .content-inner .wegweiser { grid-template-columns: 1fr; }
    .content-inner h1 { font-size: 23px; }
    .content-inner h2 { font-size: 19px; }
    .content-inner h3 { font-size: 16px; }
    .help-section-block { padding: 14px; }
    .content-inner table { display: block; overflow-x: auto; }
}