/* ============================================================
   A mag elrendezése.

   A design-rendszer komponens-CSS-e FÖLÉ rétegződik. Itt csak az van,
   amit az nem fed le: a keret, az oldalsáv, az űrlapcsoportok, a
   kártyarészek és a segédosztályok. Kizárólag tokenekből dolgozik —
   konkrét szín, betűtípus és px-méret nem fordulhat elő benne.

   BETÖLTÉSI SORREND (kötött):
       tokenek.css -> komponensek.css -> elrendezes.css -> modul-CSS

   Ami ITT nincs: minden alkalmazás-specifikus felület. Azok a saját
   modul-CSS-ükbe tartoznak, és utánunk töltődnek be.
   ============================================================ */

/* ============================================================
   1. ELRENDEZÉSI TOKENEK

   Ezek NEM arculati döntések, ezért nincsenek a design-rendszer
   `tokenek.css`-ében: a keret méreteit a FUNKCIÓ szabja meg, nem a
   tervező. Egy szélesebb oldalsáv nem más márkaélmény, hanem más
   menühosszúság.

   Azért vannak mégis tokenként és nem a szabályokba írva, mert több
   helyen kellenek, és együtt kell mozogniuk: a `fejlec-magas` a
   rácsban, a lenyíló menü maximális magasságában és a tapadó pozíció
   eltolásában is szerepel. Három helyen leírva előbb-utóbb elcsúszna.
   ============================================================ */

:root {
    --oldalsav-szel: 15rem;
    --oldalsav-szuk: 4rem;
    --fejlec-magas: 3.5rem;
    --tartalom-max: 80rem;
    --betu-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --sor-suru: 1.25;
    --sor-alap: 1.5;
}

/* A színsémát a böngészőnek is jelezzük: ebből dolgozik a görgetősáv,
   a legördülő lista és a beépített űrlapvezérlők színe. Enélkül sötét
   témában világos görgetősáv marad. */
:root,
[data-tema="vilagos"] { color-scheme: light; }

[data-tema="sotet"],
[data-tema="esemeny"] { color-scheme: dark; }

/* ============================================================
   2. ALAPRÉTEG — ÁTMENETI

   A design-rendszer jelenlegi `komponensek.css`-e még a prototípus
   változata: a törzs tipográfiáját egy `.emik` gyökérosztályra teszi,
   nem a `body`-ra. Azt az osztályt nem tehetjük a `<body>`-ra, mert
   `overflow: hidden`-t és `position: relative`-t is hoz magával — a
   prototípus keretének maradványait —, és ettől az egész oldal
   görgethetetlen lenne.

   Ezért a törzs alaptipográfiája ITT áll. Minden értéke tokenből jön,
   tehát a témaváltás ugyanúgy működik.

   EZT A BLOKKOT TÖRÖLNI KELL, amint a design-rendszer `body`-ra
   kötött komponens-CSS-t ad (a testvérprojektben már ilyen van).
   ============================================================ */

body {
    font-family: var(--betu-szoveg);
    color: var(--szin-szoveg);
    background: var(--szin-hatter);
    font-size: var(--meret-alap);
    line-height: var(--sor-alap);
}

h1, h2, h3, h4 {
    font-family: var(--betu-cim);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -.01em;
}

p { margin: 0; }

/* ============================================================
   3. SEGÉDOSZTÁLYOK
   ============================================================ */

.halvany  { color: var(--szin-szoveg-halvany); }
.kicsi    { font-size: var(--meret-sm); }
.apro     { font-size: var(--meret-xs); }
.kozepre  { text-align: center; }
.jobbra   { text-align: right; }
.vastag   { font-weight: 700; }
.mono     { font-family: var(--betu-mono); font-size: var(--meret-sm); }
.rejtett  { display: none !important; }

/* Hosszabb, szabad szöveg olvasható tördelése (bemutatkozás, kivonat).
   NE keverd az `.olvaso-szoveg`-gel: az a képernyőolvasónak szól, és
   láthatatlanná tesz — ebbe a csapdába a testvérprojekt egyik
   részletlapja már beleszaladt. */
.szoveg-blokk {
    max-width: 44rem;
    overflow-wrap: break-word;
    /* `white-space: pre-line` SZÁNDÉKOSAN nincs: a nézetek `nl2br()`-rel
       írják ki ezeket a szövegeket, és a kettő együtt duplázná a
       sortörést. */
}

/* Csak a képernyőolvasónak. Nem `display: none`: azt a felolvasó sem
   mondja ki, pedig épp az a célja, hogy kimondja. */
.olvaso-szoveg {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Egy „szó", ami sosem törne meg magától: e-mail cím, hosszú azonosító,
   fájlútvonal. Szűk kijelzőn ez tolja ki a lapot — inkább tördeljen. */
.tordelheto { overflow-wrap: anywhere; }

/* A kiadás száma a lap alján. Halvány és kicsi: tájékoztat, de nem
   versenyez a tartalommal. */
.verzio-sav {
    margin: var(--terkoz-6) 0 var(--terkoz-4);
    text-align: center;
    font-size: var(--meret-xs);
    color: var(--szin-szoveg-halvany);
}
.verzio-sav a { color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.verzio-sav a:hover { color: var(--szin-akcens); text-decoration: underline; }

.sor         { display: flex; gap: var(--terkoz-3); align-items: center; }
.sor--kozott { justify-content: space-between; }
.sor--vege   { justify-content: flex-end; }
.sor--tord   { flex-wrap: wrap; }
.oszlop      { display: flex; flex-direction: column; gap: var(--terkoz-4); }
.tolto       { flex: 1 1 auto; min-width: 0; }

/* Egy sorban álló mező és gomb („cím + Módosítás", „választó +
   Hozzáadás"): a mező nőjön ki a maradék helyre, de NE kérje a teljes
   szélességet. A komponens-CSS `.mezo`-ja `width: 100%`, és
   flex-elemként ebből lesz a flex-basis is — emiatt a mellé tett gomb
   mindig a következő sorba tördelődött, pedig bőven volt hely. */
.sor > .mezo.tolto { width: auto; }

.racsos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--terkoz-4);
}

/* Keskeny oldalsáv BALRA, a tartalom jobbra (lista + részletek).
   A `.racsos` erre nem jó: az egyforma hasábokat ad, itt viszont a
   jobb oldal a főszereplő. 768 px alatt egymás alá kerülnek — a
   lista előbb, mert abból választ a felhasználó. */
.hasabok-balsav {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
    gap: var(--terkoz-4);
    align-items: start;
}
@media (max-width: 768px) {
    .hasabok-balsav { grid-template-columns: 1fr; }
}

/* ============================================================
   4. ŰRLAP

   A design-rendszer a `.mezo` osztályt magára a beviteli elemre teszi,
   ezért a köré kerülő csoportnak külön név kell.
   ============================================================ */

.mezo-csoport { margin-bottom: var(--terkoz-4); }
.mezo-csoport:last-child { margin-bottom: 0; }

.cimke--kotelezo::after { content: " *"; color: var(--szin-hiba); }

.mezo-parok {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--terkoz-4);
}

.gomb--teljes { width: 100%; }

/* Címke-sor: felirat balra, mellé egy apró művelet. A gomb
   SZÁNDÉKOSAN a címkén KÍVÜL van: a `<label>` nem tartalmazhat
   interaktív elemet, és egy label-en belüli gomb kattintása a mezőre
   is hatna. */
.cimke-sor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--terkoz-2);
    margin-bottom: .375rem;   /* ugyanannyi, mint a `.cimke` alatt */
    flex-wrap: wrap;
}
.cimke-sor .cimke { margin-bottom: 0; }

/* Kötött mező ÉRTÉKE — amit a felhasználó lát, de nem írhat át.
   SZÁNDÉKOSAN nem letiltott beviteli elem: egy `disabled` választó úgy
   néz ki, mintha elromlott volna, és a böngésző el sem küldi. Itt az
   érték közlés, nem beviteli lehetőség — ezért szöveg, a mező
   magasságával igazítva, hogy a mellette álló szerkeszthető mezővel egy
   vonalban álljon. */
.kotott-ertek {
    margin: 0;
    padding: var(--terkoz-2) 0;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    gap: var(--terkoz-2);
    flex-wrap: wrap;
    color: var(--szin-szoveg);
}

/* Vágólap-tartalék mező: csak akkor jelenik meg, ha a böngésző nem
   engedte a másolást — onnan Ctrl+C-vel kimásolható. Keskeny, mert nem
   olvasásra való; a lényeg, hogy kijelölhető legyen. */
.masolo-mezo {
    margin: 0 0 var(--terkoz-4);
    font-family: var(--betu-mono);
    font-size: var(--meret-sm);
    resize: vertical;
}

/* ============================================================
   5. KÁRTYA ÉS TÁBLÁZAT
   ============================================================ */

.kartya__fej {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--terkoz-3);
    padding: var(--terkoz-4) var(--terkoz-5);
    border-bottom: 1px solid var(--szin-keret);
}
.kartya__fej h2, .kartya__fej h3 { font-size: var(--meret-md); }
.kartya__torzs { padding: var(--terkoz-5); }
.kartya__lab {
    padding: var(--terkoz-3) var(--terkoz-5);
    border-top: 1px solid var(--szin-keret);
    background: var(--szin-felulet-sullyedt);
    border-radius: 0 0 var(--radius-nagy) var(--radius-nagy);
}

.tabla-keret { overflow-x: auto; }
.tabla tbody tr:last-child td { border-bottom: 0; }

/* A táblázatok SZÁM-oszlopai (dátum, óra, sorszám) nem törhetnek. A
   `2026. 09. 24. 02:14` három sorba tördelve olvashatatlan, és egyetlen
   ilyen cella a táblázat harmadát elviszi — pont azt a
   végigfuthatóságot rontja el, amiért a lista van. A táblázat
   `.tabla-keret`-ben áll, tehát szűk kijelzőn inkább gördül. */
.tabla td.szam,
.tabla th.szam { white-space: nowrap; }

.ures-allapot {
    padding: var(--terkoz-12) var(--terkoz-4);
    text-align: center;
    color: var(--szin-szoveg-halvany);
}

/* ============================================================
   6. FÜLEK

   Lapfülek egy képernyőn belül. A design-rendszer kér füleket, de a
   komponens-CSS-e nem tartalmazza őket — ezért itt vannak, és NEM a
   modul-CSS-ekben: két helyen már duplikálódtak, és a harmadik
   használatnál a másolatok elkezdtek volna elcsúszni egymástól. Ha egy
   későbbi design-verzió felveszi, ez a blokk onnan felülírható.
   ============================================================ */

/* A fülek TÖRNEK, nem gördülnek. Korábban `overflow-x: auto` volt, és a
   tizenkét fülből álló sor vízszintes görgetősávot kapott. Két baja van
   ennek: a görgetősáv elcsúfítja a fejlécet, és ami fontosabb — a
   látható sávon TÚLI fülek nem látszanak, tehát az olvasó nem tudja,
   hol tart a tizenkettőből. Tördeléssel egyszerre látszik mind. */
.fulek {
    display: flex;
    flex-wrap: wrap;
    gap: var(--terkoz-1);
    margin-bottom: var(--terkoz-5);
    border-bottom: 1px solid var(--szin-keret);
}

.fulek__elem {
    display: inline-flex;
    align-items: center;
    gap: var(--terkoz-2);
    padding: var(--terkoz-3) var(--terkoz-4);
    border-bottom: .1875rem solid transparent;
    color: var(--szin-szoveg-halvany);
    font-weight: 600;
    font-size: var(--meret-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--atmenet-gyors), border-color var(--atmenet-gyors);
}

.fulek__elem:hover { color: var(--szin-szoveg); }

.fulek__elem[aria-current="page"] {
    color: var(--szin-akcens);
    border-bottom-color: var(--szin-akcens);
}

/* ============================================================
   7. KPI CSEMPE
   ============================================================ */

.kpi { padding: var(--terkoz-5); }
.kpi__cimke {
    font: 700 var(--meret-xs)/1.2 var(--betu-szoveg);
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--szin-szoveg-halvany);
}
.kpi .kpi-szam { margin-top: var(--terkoz-2); display: block; }
.kpi__lab {
    margin-top: var(--terkoz-1);
    font-size: var(--meret-sm);
    color: var(--szin-szoveg-halvany);
}

/* ============================================================
   8. BELÉPÉS / PUBLIKUS KÁRTYA
   ============================================================ */

.auth {
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: var(--terkoz-8) var(--terkoz-4);
}

.auth__doboz {
    width: 100%; max-width: 26rem;
    background: var(--szin-felulet);
    border: 1px solid var(--szin-keret);
    border-radius: var(--radius-nagy);
    box-shadow: var(--arnyek-kozepes);
    padding: var(--terkoz-8);
}
.auth__doboz--szeles { max-width: 42rem; }

.auth__fejlec { text-align: center; margin-bottom: var(--terkoz-6); }

.auth__logo {
    display: inline-block;
    font: 800 var(--meret-lg)/1.1 var(--betu-cim);
    letter-spacing: .02em;
    color: var(--szin-elsodleges);
    text-decoration: none;
}
.auth__logo:hover { color: var(--szin-elsodleges); }

.auth__cim { margin-top: var(--terkoz-2); font-size: var(--meret-md); font-weight: 600; }

.auth__labjegyzet {
    margin-top: var(--terkoz-5);
    font-size: var(--meret-sm);
    color: var(--szin-szoveg-halvany);
}

/* ============================================================
   9. BELSŐ KERET: fejléc + oldalsáv + tartalom
   ============================================================ */

/* A `1fr` sáv minimuma a CSS szerint `min-content`, ezért egy széles
   táblázat vagy egy hosszú navigációs sor SZÉTFESZÍTI az egész keretet
   — akkor is, ha a saját dobozán ott van az `overflow-x: auto`. A
   `minmax(0, 1fr)` engedi a sávot a tartalomnál szűkebbre, és ilyenkor
   a belső görgetés tényleg működik. A testvérprojektben ez volt az oka
   annak, hogy telefonon MINDEN belső lap vízszintesen kilógott. */
.elrendezes {
    display: grid;
    grid-template-columns: var(--oldalsav-szel) minmax(0, 1fr);
    grid-template-rows: var(--fejlec-magas) 1fr;
    grid-template-areas: "fejlec fejlec" "oldalsav tartalom";
    min-height: 100vh;
}

.fejlec {
    grid-area: fejlec;
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: var(--terkoz-4);
    padding: 0 var(--terkoz-5);
    background: var(--szin-nav-hatter);
    color: var(--szin-nav-szoveg);
    min-width: 0;          /* ld. az `.elrendezes` megjegyzését */
}

.fejlec__nev {
    font: 800 var(--meret-md)/1 var(--betu-cim);
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--szin-nav-szoveg);
    text-decoration: none;
    white-space: nowrap;
}
.fejlec__nev:hover { color: var(--szin-nav-szoveg); }

.oldalsav {
    grid-area: oldalsav;
    background: var(--szin-felulet);
    border-right: 1px solid var(--szin-keret);
    padding: var(--terkoz-4) var(--terkoz-3);
    overflow-y: auto;
    display: flex; flex-direction: column; gap: .125rem;
    min-width: 0;          /* ld. az `.elrendezes` megjegyzését */
}
.oldalsav .szakasz-cim { padding: var(--terkoz-3) var(--terkoz-3) var(--terkoz-1); }

/* Elválasztó az oldalsávban: a súgót leválasztja a munkaeszközöktől.
   Dekoráció, ezért `role="presentation"` van rajta a jelölésben — a
   felolvasónak nincs mit mondania róla. */
.nav-elvalaszto {
    flex: 0 0 auto;
    height: 1px;
    margin: var(--terkoz-3) var(--terkoz-3);
    background: var(--szin-keret);
}

.tartalom {
    grid-area: tartalom;
    padding: var(--terkoz-5) var(--terkoz-6) var(--terkoz-6);
    max-width: var(--tartalom-max);
    width: 100%;
    min-width: 0;          /* ld. az `.elrendezes` megjegyzését */
}
.tartalom > * + * { margin-top: var(--terkoz-4); }

.oldal-fej {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--terkoz-4); flex-wrap: wrap;
}
.oldal-fej h1 { font: 700 var(--meret-xl)/1.15 var(--betu-cim); }
.oldal-fej__leiras {
    margin-top: var(--terkoz-1);
    font-size: var(--meret-sm);
    color: var(--szin-szoveg-halvany);
}

/* ============================================================
   10. PRÓBAMÓD SÁV

   A sáv MINDEN lap tetején ott van, amíg a próbamód tart. A dolga
   egyetlen mondat: „nem a saját fiókodban vagy". Ezért

     - tapad a lap tetejére, hogy görgetés közben se essen ki a
       látóterből — egy elgörgetett figyelmeztetés nem figyelmeztetés;
     - FIGYELMEZTETŐ színt kap, nem semlegeset, mert ez nem információ,
       hanem egy állapot, amit meg kell szüntetni;
     - a legfelső réteg, de a modálok ALATT: egy nyitott modal fölé
       tolakodva letakarná a mentés gombot.
   ============================================================ */

.probamod-sav {
    position: sticky;
    top: 0;
    z-index: 60;

    display: flex;
    align-items: center;
    gap: var(--terkoz-3);
    padding: var(--terkoz-2) var(--terkoz-4);

    font-size: var(--meret-sm);
    color: var(--szin-figyelem);
    background: var(--szin-figyelem-hatter);
    border-bottom: 1px solid currentColor;
}

.probamod-sav__szoveg { flex: 1 1 auto; min-width: 0; }

/* A hátralévő idő halványabb: tudni kell róla, de nem ez a lényeg. */
.probamod-sav__ido { opacity: .75; white-space: nowrap; }

/* Az űrlap csak a gombot tartja — ne kapjon saját térközt. */
.probamod-sav form { flex: 0 0 auto; margin: 0; }

/* ============================================================
   11. BUBORÉK (TOAST) TÁROLÓ
   ============================================================ */

.toast-tarolo {
    position: fixed; left: 50%; bottom: var(--terkoz-6);
    transform: translateX(-50%);
    z-index: 100;
    display: flex; flex-direction: column; gap: var(--terkoz-2);
    align-items: center;
    pointer-events: none;
}
.toast-tarolo .toast { position: static; transform: none; }

/* ============================================================
   12. ÚJDONSÁG-KÁRTYA — „mi történt a legutóbbi belépésed óta?"

   Nem értesítő sáv (`.ertesito`), mert nem teendő és nem hiba: egy
   kártya, amit el lehet olvasni és le lehet tudni. A bal szélén
   akcens-csík, hogy a többi kártya közül kiemelkedjen, de ne
   kiabáljon.
   ============================================================ */

.ujdonsag-kartya {
    margin-bottom: var(--terkoz-5);
    border-left: .1875rem solid var(--szin-akcens);
}
.ujdonsag-kartya__tartomany { margin: 0 0 var(--terkoz-4); }

.ujdonsag-kiadas { padding-top: var(--terkoz-3); }

/* A kiadások közti vonal: az elsőnél nem kell, mert a tartomány-sor
   már elválasztja. */
.ujdonsag-kiadas + .ujdonsag-kiadas {
    margin-top: var(--terkoz-3);
    border-top: 1px solid var(--szin-keret);
}
.ujdonsag-kiadas__fej { margin: 0 0 var(--terkoz-2); font-size: var(--meret-md); }
.ujdonsag-kiadas__fej .kicsi {
    margin-left: var(--terkoz-2);
    color: var(--szin-szoveg-halvany);
    font-weight: 400;
}

/* AZ ÖSSZEFOGLALÓ a kártya vezérszövege, ezért nem `.kicsi`: ez az,
   amit el kell olvasni. A tételek listája alatta halványabb. */
.ujdonsag-kiadas__szoveg { margin: 0 0 var(--terkoz-2); }
.ujdonsag-kiadas__lista {
    margin: 0;
    padding-left: var(--terkoz-5);
    color: var(--szin-szoveg-halvany);
    font-size: var(--meret-sm);
    line-height: 1.8;
}
.ujdonsag-kiadas__reszletek { font-size: var(--meret-sm); }
.ujdonsag-kiadas__reszletek summary { color: var(--szin-akcens); cursor: pointer; }
.ujdonsag-kiadas__reszletek ul {
    margin: var(--terkoz-2) 0 0;
    padding-left: var(--terkoz-5);
    color: var(--szin-szoveg-halvany);
    line-height: 1.8;
}

.ujdonsag-kartya__lab {
    display: flex;
    flex-wrap: wrap;
    gap: var(--terkoz-3);
    align-items: center;
}
.ujdonsag-kartya__lab form { margin: 0; }

/* ============================================================
   13. A `hidden` ATTRIBÚTUM TÉNYLEG REJTSEN

   A böngésző `[hidden] { display: none }` szabálya a LEGGYENGÉBB:
   bármely osztály saját `display`-e felülírja. Egy `.badge`
   (inline-flex) vagy egy `.sor` (flex) elem tehát `hidden`-nel is
   LÁTSZIK — a JS hiába állítja be.

   A testvérprojektben ez ötször okozott hibát, és négyszer külön
   szabállyal kerülték meg, modulonként. Ez a szabály a közös réteg
   VÉGÉN áll, tehát a komponens-CSS-t és a fenti osztályokat is
   legyőzi, `!important` nélkül. A modul-CSS-ek utána töltődnek:
   azoknak továbbra is a saját `[hidden]` szabályuk a dolguk.
   ============================================================ */

[hidden] { display: none; }

/* ============================================================
   14. RESZPONZÍV — kizárólag 768 / 600 / 480 px
   ============================================================ */

@media (max-width: 768px) {
    .elrendezes {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "fejlec" "oldalsav" "tartalom";
    }
    .oldalsav {
        border-right: 0; border-bottom: 1px solid var(--szin-keret);
        flex-direction: row; overflow-x: auto;
        padding: var(--terkoz-2);
    }
    .oldalsav .szakasz-cim { display: none; }
    /* Vízszintes sávban a vonal is elfordul — különben az egész
       menüsor szélességében húzna egy csíkot a nav közepén. */
    .nav-elvalaszto {
        height: auto; width: 1px;
        margin: var(--terkoz-1) var(--terkoz-2);
        align-self: stretch;
    }
    .nav-elem { white-space: nowrap; }
    .tartalom { padding: var(--terkoz-4); }
    .fejlec { padding: 0 var(--terkoz-4); }
}

@media (max-width: 600px) {
    /* A fejléc vezérlői csak ikonok: a felhasználónév és a „Kilépés"
       felirat együtt szétfeszítette a keretet. A feliratot NEM
       `display: none`-nal tüntetjük el, hanem a vizuálisan-rejtett
       mintával — különben a gomb elveszítené a hozzáférhető nevét, és
       a felolvasó csak egy ikont találna. A `#temaIkon` kivétel: az
       maga az ikon, nem felirat. */
    .fejlec .gomb--nav span:not(#temaIkon) {
        position: absolute; width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .fejlec .gomb--nav { padding: 0; width: 2rem; }
    .mezo-parok { grid-template-columns: 1fr; }
    .auth__doboz { padding: var(--terkoz-5); }
    .oldal-fej { flex-direction: column; }
    .racsos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .tartalom { padding: var(--terkoz-3); }
    .racsos { grid-template-columns: 1fr; }
    .auth { padding: var(--terkoz-4) var(--terkoz-3); }

    /* A teljes szélességű gomb a TARTALOMRA és a belépőlapra szól. Egy
       szűrés nélküli `.gomb { width: 100% }` a fejléc ikonos vezérlőit
       is szétnyújtaná, és azzal vízszintesen kilógna az egész keret.
       Az ikongombok mindenhol kimaradnak. */
    .tartalom .gomb:not(.gomb--ikon),
    .auth .gomb:not(.gomb--ikon) { width: 100%; }

    .sor--vege, .kartya__lab { flex-wrap: wrap; }

    /* A próbamód sávjában a szöveg és a gomb egymás alá kerül: egy
       sorban a gomb felirata elvágódna, és pont az nem érhető el,
       amivel ki kell lépni. */
    .probamod-sav { flex-wrap: wrap; gap: var(--terkoz-2); }
    .probamod-sav__szoveg { flex: 1 1 100%; }
    .probamod-sav form    { flex: 1 1 100%; }
    .probamod-sav .gomb   { width: 100%; }

    /* Az újdonság-kártya két gombja egymás alá kerül: egymás mellett
       mindkettő elkeskenyedne. */
    .ujdonsag-kartya__lab,
    .ujdonsag-kartya__lab form { width: 100%; }
    .ujdonsag-kartya__lab .gomb { width: 100%; justify-content: center; }
}

/* ============================================================
   15. HAMBURGER MENÜ TELEFONON

   Telefonon a navigáció különben vízszintesen görgethető sáv, húsz
   menüponttal. Aki a lista végét keresi, annak oldalra kell húznia —
   és közben nem látja, hol tart benne.

   A `js-nav` osztályt a JS teszi a `<body>`-ra. Enélkül minden marad a
   régiben: ha a szkript nem fut le, a görgethető sáv kényelmetlen, de
   MŰKÖDIK; egy JS nélkül eltűnő menü nem.

   A gomb maga csak 768 px alatt látszik — fölötte az oldalsáv úgyis
   mindig kint van, és egy nyitogatható menü ott csak munkát adna.
   ============================================================ */

.fejlec__menu { display: none; }

@media (max-width: 768px) {
    .fejlec__menu { display: inline-flex; }

    /* Zárt állapot: az oldalsáv kikerül a folyamatból, nem csak
       láthatatlan lesz. A `display: none` azért kell a `height: 0`
       helyett, mert különben a benne lévő hivatkozások tabbal
       elérhetők maradnának egy becsukott menüben. */
    body.js-nav .oldalsav { display: none; }

    /* Nyitva FÜGGŐLEGES lista, nem vízszintes sáv: a hamburger lényege
       pont az, hogy ne kelljen oldalra húzni. És a tartalom FÖLÉ
       kerül, nem tolja lejjebb — így a görgetési pozíció nem ugrik el
       a lapon. */
    body.js-nav.nav-nyitva .oldalsav {
        display: flex;
        flex-direction: column;
        overflow-x: visible;
        overflow-y: auto;
        max-height: calc(100vh - var(--fejlec-magas));
        padding: var(--terkoz-3);
        position: sticky;
        top: var(--fejlec-magas);
        z-index: 25;
        box-shadow: var(--arnyek-kozepes);
    }
    body.js-nav.nav-nyitva .oldalsav .szakasz-cim { display: block; }
    body.js-nav.nav-nyitva .nav-elvalaszto {
        height: 1px; width: auto;
        margin: var(--terkoz-2) var(--terkoz-2);
        align-self: auto;
    }
}