/* ============================================================
   262-php-15-micro-tabs — Reiter auf EINER Seite

   Die Leiste liegt links oben ueber dem Inhalt, so wie die
   Filterknoepfe der Listen (.x262-chip): gleiche Hoehe, gleiche
   Abstaende, gleiche Schrift — es soll wie dieselbe Website
   aussehen, nicht wie ein zugekaufter Reiter-Baustein.

   OHNE das Skript greift .x-tabs--ready nie, und dann steht hier
   praktisch nichts: die Panele bleiben untereinander stehen und
   behalten ihre Ueberschrift.
   ============================================================ */

.x-tabs__bar {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    margin-bottom: 1.5rem;
}
/* Ohne Reiter (kein JS, oder nur ein Panel) waere das eine nackte Linie. */
.x-tabs__bar:empty { display: none; }

.x-tabs__tab {
    appearance: none;
    padding: 10px 16px 9px;
    margin-bottom: -1px;                  /* sitzt auf der Linie */
    font: var(--w-heading, 500) var(--fs-btn)/1.2 var(--font-body);
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
}
.x-tabs__tab:hover { color: var(--text); }

/* Der offene Reiter: gruen unterstrichen, wie der aktive Menueeintrag. */
.x-tabs__tab[aria-selected="true"] {
    color: var(--text);
    border-bottom-color: var(--brand);
}
.x-tabs__tab:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

/* Panel-Ueberschrift: ohne Skript ist sie die Trennung zwischen den
   Bloecken, mit Skript steht dasselbe Wort schon auf dem Reiter. */
.x-tabs--ready .x-tabs__panel-title {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.x-tabs__panel-title { margin: 0 0 1rem; }

.x-tabs__panel:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

/* Zwischen zwei Panelen ohne Skript etwas Luft. */
.x-tabs__panel + .x-tabs__panel { margin-top: 2.5rem; }
.x-tabs--ready .x-tabs__panel + .x-tabs__panel { margin-top: 0; }