/* ==========================================================================
   Révfülöpi Általános Iskola – revsuli.hu
   Design rendszer és stíluslap  |  v0.1 (demo)
   Készítette: Herczeg Zoltán – InforMan Számítástechnika
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Betűtípusok – saját kiszolgálásból, külső szolgáltatás nélkül
   Így a honlap offline is helyesen jelenik meg, és nem függ a Google
   betűkészlet-szolgáltatásától. Együtt kb. 95 kB.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-medium.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Design tokenek (színek, tipográfia, térközök)
   Az arculati szín egyetlen helyen, itt cserélhető.
   -------------------------------------------------------------------------- */
:root {
  /* Alapszín – balatoni mélykék */
  --kek-900: #0a2536;
  --kek-800: #0d3550;
  --kek-700: #10456b;
  --kek-600: #16587f;
  --kek-500: #1f7099;
  --kek-200: #bcd8e8;
  --kek-100: #e7f1f7;
  --kek-50:  #f3f8fb;

  /* Kiemelő szín – meleg arany (a régi honlap sárgájának kortárs változata) */
  --arany-700: #96601a;
  --arany-600: #b8791a;
  --arany-500: #dc9b23;
  --arany-300: #f0c96a;
  --arany-100: #fcf1da;

  /* Semlegesek */
  --homok:   #fbf8f3;
  --feher:   #ffffff;
  --vonal:   #e6e0d6;
  --vonal-halvany: #f0ebe3;
  --szoveg:  #1c2a33;
  --szoveg-kozep: #4e626f;
  --szoveg-halvany: #7b8b96;

  /* Állapotszínek */
  --zold:    #2f7d55;
  --zold-100:#e4f3ea;
  --piros:   #b3352b;
  --piros-100:#fbeae8;

  /* Tipográfia */
  --font-cim: "Lora", Georgia, "Times New Roman", serif;
  --font-szoveg: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

  /* Térközök */
  --ter-1: 4px;
  --ter-2: 8px;
  --ter-3: 12px;
  --ter-4: 16px;
  --ter-5: 24px;
  --ter-6: 32px;
  --ter-7: 48px;
  --ter-8: 64px;
  --ter-9: 96px;

  /* Formák */
  --ker-s: 6px;
  --ker-m: 12px;
  --ker-l: 18px;
  --ker-xl: 28px;

  --arnyek-s: 0 1px 2px rgba(12, 40, 58, .06), 0 2px 6px rgba(12, 40, 58, .05);
  --arnyek-m: 0 2px 6px rgba(12, 40, 58, .06), 0 10px 24px rgba(12, 40, 58, .08);
  --arnyek-l: 0 4px 12px rgba(12, 40, 58, .08), 0 24px 48px rgba(12, 40, 58, .12);

  --konteneres: 1180px;
  --atmenet: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Alapok
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--homok);
  color: var(--szoveg);
  font-family: var(--font-szoveg);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--kek-600); text-decoration: none; transition: color var(--atmenet); }
a:hover { color: var(--arany-600); }

h1, h2, h3, h4 {
  font-family: var(--font-cim);
  font-weight: 600;
  color: var(--kek-900);
  line-height: 1.22;
  margin: 0 0 var(--ter-4);
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--ter-4); max-width: 74ch; }

ul, ol { margin: 0 0 var(--ter-4); padding-left: 1.3em; }
li { margin-bottom: var(--ter-2); }

hr { border: 0; border-top: 1px solid var(--vonal); margin: var(--ter-7) 0; }

strong { font-weight: 600; }

::selection { background: var(--arany-300); color: var(--kek-900); }

:focus-visible {
  outline: 3px solid var(--arany-500);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Kihagyó link – billentyűzetes navigációhoz */
.kihagyo-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--kek-700); color: #fff;
  padding: var(--ter-3) var(--ter-5); z-index: 200;
  border-radius: 0 0 var(--ker-s) 0;
}
.kihagyo-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Elrendezés – konténerek, szekciók, rácsok
   -------------------------------------------------------------------------- */
.konteneres {
  width: 100%;
  max-width: var(--konteneres);
  margin: 0 auto;
  padding: 0 var(--ter-5);
}
.konteneres--keskeny { max-width: 860px; }

.szekcio { padding: var(--ter-9) 0; }
.szekcio--kicsi { padding: var(--ter-8) 0; }
.szekcio--feher { background: var(--feher); }
.szekcio--kek { background: var(--kek-50); }

.szekcio-fejlec { margin-bottom: var(--ter-7); max-width: 720px; }
.szekcio-fejlec--kozep { margin-left: auto; margin-right: auto; text-align: center; }
.szekcio-fejlec p { color: var(--szoveg-kozep); margin-bottom: 0; }
.szekcio-fejlec--kozep p { margin-left: auto; margin-right: auto; }

.szekcio-fejlec-sor {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--ter-5); flex-wrap: wrap; margin-bottom: var(--ter-7);
}
.szekcio-fejlec-sor .szekcio-fejlec { margin-bottom: 0; }

/* Kis, aranyszínű felcím a szekciók fölött */
.felcim {
  display: inline-flex; align-items: center; gap: var(--ter-2);
  font-family: var(--font-szoveg);
  font-size: .78rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--arany-600);
  margin-bottom: var(--ter-3);
}
.felcim::before {
  content: ""; width: 26px; height: 2px;
  background: var(--arany-500); border-radius: 2px;
}
.szekcio-fejlec--kozep .felcim::before { display: none; }

.racs { display: grid; gap: var(--ter-5); }
.racs--2 { grid-template-columns: repeat(2, 1fr); }
.racs--3 { grid-template-columns: repeat(3, 1fr); }
.racs--4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   4. Gombok
   -------------------------------------------------------------------------- */
.gomb {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ter-2);
  font-family: var(--font-szoveg);
  font-size: .97rem; font-weight: 600; line-height: 1;
  padding: 15px var(--ter-6);
  border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-align: center;
  transition: background-color var(--atmenet), color var(--atmenet),
              border-color var(--atmenet), transform var(--atmenet),
              box-shadow var(--atmenet);
}
.gomb svg { width: 18px; height: 18px; flex: none; }

.gomb--elsodleges { background: var(--arany-500); color: var(--kek-900); }
.gomb--elsodleges:hover {
  background: var(--arany-300); color: var(--kek-900);
  transform: translateY(-2px); box-shadow: var(--arnyek-m);
}

.gomb--masodlagos {
  background: transparent; color: var(--feher); border-color: rgba(255,255,255,.5);
}
.gomb--masodlagos:hover {
  background: rgba(255,255,255,.12); color: var(--feher);
  border-color: var(--feher); transform: translateY(-2px);
}

.gomb--kek { background: var(--kek-700); color: var(--feher); }
.gomb--kek:hover {
  background: var(--kek-600); color: var(--feher);
  transform: translateY(-2px); box-shadow: var(--arnyek-m);
}

.gomb--vonalas { background: transparent; color: var(--kek-700); border-color: var(--kek-200); }
.gomb--vonalas:hover { background: var(--kek-50); border-color: var(--kek-500); color: var(--kek-700); }

.gomb--kicsi { padding: 10px var(--ter-5); font-size: .88rem; }

/* Szöveges "tovább" link nyíllal */
.tovabb-link {
  display: inline-flex; align-items: center; gap: var(--ter-2);
  font-weight: 600; font-size: .95rem; color: var(--kek-600);
}
.tovabb-link::after {
  content: "→"; transition: transform var(--atmenet); font-size: 1.05em;
}
.tovabb-link:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Fejléc – szolgáltatói sáv, logó, navigáció
   -------------------------------------------------------------------------- */
.info-sav {
  background: var(--kek-900); color: rgba(255,255,255,.82);
  font-size: .82rem;
}
.info-sav .konteneres {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ter-4); min-height: 40px; flex-wrap: wrap;
}
.info-sav a { color: rgba(255,255,255,.82); }
.info-sav a:hover { color: var(--arany-300); }
.info-sav-bal, .info-sav-jobb {
  display: flex; align-items: center; gap: var(--ter-5); flex-wrap: wrap;
}
.info-sav-elem { display: inline-flex; align-items: center; gap: 7px; }
.info-sav-elem svg { width: 15px; height: 15px; opacity: .75; }
.info-sav-kreta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--arany-500); color: var(--kek-900) !important;
  font-weight: 600; padding: 5px var(--ter-4); border-radius: 999px;
}
.info-sav-kreta:hover { background: var(--arany-300); color: var(--kek-900) !important; }
.info-sav-kreta { white-space: nowrap; }
.info-sav-kreta svg { width: 15px; height: 15px; flex: none; opacity: 1; }

.fejlec {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--vonal);
  transition: box-shadow var(--atmenet);
}
.fejlec.gorgetve { box-shadow: var(--arnyek-m); }
.fejlec .konteneres {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ter-5); min-height: 84px;
}

/* Logó */
.logo { display: flex; align-items: center; gap: var(--ter-3); flex: none; }
.logo:hover { color: inherit; }
.logo-jel { width: 46px; height: 46px; flex: none; }
.logo-szoveg { display: flex; flex-direction: column; line-height: 1.12; }
.logo-fo {
  font-family: var(--font-cim); font-weight: 600;
  font-size: 1.22rem; color: var(--kek-900); letter-spacing: -.01em;
}
.logo-al {
  font-size: .68rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--arany-600);
}

/* Fő navigáció */
.fo-menu { display: flex; align-items: center; gap: var(--ter-2); }
.fo-menu > li { position: relative; margin: 0; list-style: none; }
.fo-menu ul { list-style: none; }
.menu-lista { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }

.menu-link {
  display: flex; align-items: center; gap: 5px;
  padding: 10px var(--ter-3); border-radius: var(--ker-s);
  font-size: .95rem; font-weight: 500; color: var(--szoveg);
  white-space: nowrap;
}
.menu-link:hover, .menu-elem:focus-within > .menu-link { background: var(--kek-50); color: var(--kek-700); }
.menu-link[aria-current="page"] { color: var(--kek-700); font-weight: 600; }
.menu-link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--ter-3); right: var(--ter-3); bottom: 2px;
  height: 2px; background: var(--arany-500); border-radius: 2px;
}
.menu-nyil { width: 11px; height: 11px; opacity: .5; transition: transform var(--atmenet); }
.menu-elem:hover .menu-nyil { transform: rotate(180deg); }

/* Legördülő almenü */
.almenu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 246px; margin: 0; padding: var(--ter-2);
  background: var(--feher); border: 1px solid var(--vonal);
  border-radius: var(--ker-m); box-shadow: var(--arnyek-l);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--atmenet), transform var(--atmenet), visibility var(--atmenet);
}
.menu-elem:hover > .almenu,
.menu-elem:focus-within > .almenu { opacity: 1; visibility: visible; transform: translateY(0); }
.almenu li { margin: 0; }
.almenu a {
  display: block; padding: 10px var(--ter-4); border-radius: var(--ker-s);
  font-size: .93rem; color: var(--szoveg);
}
.almenu a:hover { background: var(--kek-50); color: var(--kek-700); }

.fejlec-muvelet { display: flex; align-items: center; gap: var(--ter-3); flex: none; }

/* A menüben lévő gombok csak mobilnézetben jelennek meg */
.mobil-menu-gombok { display: none; }

/* Hamburger gomb */
.menu-gomb {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: var(--kek-50); border: 1px solid var(--vonal);
  border-radius: var(--ker-s); cursor: pointer;
}
.menu-gomb span {
  display: block; position: relative; width: 20px; height: 2px;
  background: var(--kek-900); border-radius: 2px; transition: background var(--atmenet);
}
.menu-gomb span::before, .menu-gomb span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: var(--kek-900); border-radius: 2px; transition: transform var(--atmenet);
}
.menu-gomb span::before { top: -6px; }
.menu-gomb span::after { top: 6px; }
.menu-gomb[aria-expanded="true"] span { background: transparent; }
.menu-gomb[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-gomb[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Közlemény sáv
   -------------------------------------------------------------------------- */
.kozlemeny {
  background: var(--arany-100);
  border-bottom: 1px solid var(--arany-300);
  font-size: .92rem;
}
.kozlemeny .konteneres {
  display: flex; align-items: center; gap: var(--ter-4);
  padding-top: var(--ter-3); padding-bottom: var(--ter-3);
}
.kozlemeny-ikon { flex: none; width: 22px; height: 22px; color: var(--arany-700); }
.kozlemeny-szoveg { flex: 1; max-width: none; color: var(--arany-700); }
.kozlemeny-szoveg strong { color: var(--kek-900); }
.kozlemeny-bezar {
  flex: none; width: 30px; height: 30px; padding: 0;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--arany-700); cursor: pointer; font-size: 1.15rem; line-height: 1;
}
.kozlemeny-bezar:hover { background: rgba(0,0,0,.07); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--kek-900);
  color: var(--feher);
  padding: var(--ter-9) 0 calc(var(--ter-9) + 60px);
}
.hero-hatter {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
  opacity: .72;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg,
              rgba(10,37,54,.92) 0%, rgba(10,37,54,.72) 48%, rgba(10,37,54,.34) 100%);
}
.hero .konteneres { position: relative; z-index: 2; }
.hero-tartalom { max-width: 660px; }
.hero .felcim { color: var(--arany-300); }
.hero .felcim::before { background: var(--arany-300); }
.hero h1 { color: var(--feher); margin-bottom: var(--ter-5); }
.hero-lead {
  font-size: clamp(1.02rem, .97rem + .35vw, 1.2rem);
  color: rgba(255,255,255,.9); margin-bottom: var(--ter-7); max-width: 56ch;
}
.hero-gombok { display: flex; gap: var(--ter-4); flex-wrap: wrap; }

/* Kisebb, belső oldali fejrész */
.oldalfej {
  position: relative; overflow: hidden;
  background: var(--kek-800); background-image: linear-gradient(120deg, var(--kek-900), var(--kek-700));
  color: var(--feher); padding: var(--ter-8) 0;
}
.oldalfej::before {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: rgba(220,155,35,.12);
}
.oldalfej .konteneres { position: relative; z-index: 2; }
.oldalfej h1 { color: var(--feher); margin-bottom: var(--ter-3); }
.oldalfej p { color: rgba(255,255,255,.85); margin-bottom: 0; }

/* Morzsa */
.morzsa {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--ter-2);
  list-style: none; margin: 0 0 var(--ter-5); padding: 0;
  font-size: .85rem; color: rgba(255,255,255,.65);
}
.morzsa li { margin: 0; display: flex; align-items: center; gap: var(--ter-2); }
.morzsa li + li::before { content: "›"; opacity: .55; }
.morzsa a { color: rgba(255,255,255,.8); }
.morzsa a:hover { color: var(--arany-300); }

/* --------------------------------------------------------------------------
   8. Gyorselérési csempék (a hero alá csúsztatva)
   -------------------------------------------------------------------------- */
.gyorseleres { position: relative; z-index: 5; margin-top: -60px; }
.gyorseleres-racs {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--ter-4);
}
.gyors-csempe {
  display: flex; flex-direction: column; align-items: center; gap: var(--ter-3);
  padding: var(--ter-5) var(--ter-3);
  background: var(--feher); border: 1px solid var(--vonal);
  border-radius: var(--ker-l); box-shadow: var(--arnyek-s);
  text-align: center; color: var(--kek-900);
  transition: transform var(--atmenet), box-shadow var(--atmenet), border-color var(--atmenet);
}
.gyors-csempe:hover {
  transform: translateY(-5px); box-shadow: var(--arnyek-m);
  border-color: var(--arany-300); color: var(--kek-900);
}
.gyors-csempe-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--kek-50); color: var(--kek-600);
  transition: background var(--atmenet), color var(--atmenet);
}
.gyors-csempe:hover .gyors-csempe-ikon { background: var(--arany-100); color: var(--arany-700); }
.gyors-csempe-ikon svg { width: 25px; height: 25px; }
.gyors-csempe-cim { font-size: .92rem; font-weight: 600; line-height: 1.3; }

/* --------------------------------------------------------------------------
   9. Számok / statisztika
   -------------------------------------------------------------------------- */
.szamok { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ter-5); }
.szam-elem {
  padding: var(--ter-5) 0; text-align: center;
  border-left: 1px solid var(--vonal);
}
.szam-elem:first-child { border-left: 0; }
.szam-ertek {
  font-family: var(--font-cim); font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
  font-weight: 600; color: var(--kek-700); line-height: 1; margin-bottom: var(--ter-2);
}
.szam-cimke {
  font-size: .84rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--szoveg-halvany);
}

/* --------------------------------------------------------------------------
   10. Kártyák (hír, galéria, osztály, általános)
   -------------------------------------------------------------------------- */
.kartya {
  display: flex; flex-direction: column;
  background: var(--feher); border: 1px solid var(--vonal);
  border-radius: var(--ker-l); overflow: hidden;
  transition: transform var(--atmenet), box-shadow var(--atmenet), border-color var(--atmenet);
}
.kartya:hover { transform: translateY(-4px); box-shadow: var(--arnyek-m); border-color: var(--kek-200); }

.kartya-kep { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kek-100); }
.kartya-kep img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.kartya:hover .kartya-kep img { transform: scale(1.045); }

.kartya-torzs { display: flex; flex-direction: column; flex: 1; padding: var(--ter-5); }
.kartya-torzs h3 { margin-bottom: var(--ter-3); }
.kartya-torzs h3 a { color: inherit; }
.kartya-torzs h3 a:hover { color: var(--kek-600); }
.kartya-torzs p { font-size: .95rem; color: var(--szoveg-kozep); margin-bottom: var(--ter-4); }
.kartya-lab { margin-top: auto; padding-top: var(--ter-2); }

/* Címke / chip */
.cimke {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; letter-spacing: .04em;
  background: var(--kek-100); color: var(--kek-700);
  margin-bottom: var(--ter-3);
}
.cimke--arany { background: var(--arany-100); color: var(--arany-700); }
.cimke--zold { background: var(--zold-100); color: var(--zold); }
.cimke-lebego {
  position: absolute; left: var(--ter-4); top: var(--ter-4); margin: 0;
  background: rgba(255,255,255,.94); color: var(--kek-900);
  box-shadow: var(--arnyek-s);
}

/* --------------------------------------------------------------------------
   11. Események lista
   -------------------------------------------------------------------------- */
.esemeny-lista { list-style: none; margin: 0; padding: 0; }
.esemeny-lista li { margin: 0; }
.esemeny {
  display: flex; align-items: flex-start; gap: var(--ter-5);
  padding: var(--ter-5) var(--ter-5) var(--ter-5) var(--ter-4);
  background: var(--feher); border: 1px solid var(--vonal);
  border-radius: var(--ker-m); margin-bottom: var(--ter-3);
  transition: border-color var(--atmenet), box-shadow var(--atmenet), transform var(--atmenet);
}
.esemeny:hover { border-color: var(--arany-300); box-shadow: var(--arnyek-s); transform: translateX(3px); }
.esemeny-datum {
  flex: none; width: 66px; text-align: center;
  padding: var(--ter-3) 0; border-radius: var(--ker-s);
  background: var(--kek-50); border: 1px solid var(--kek-100);
}
.esemeny-nap {
  display: block; font-family: var(--font-cim); font-size: 1.55rem;
  font-weight: 600; color: var(--kek-700); line-height: 1;
}
.esemeny-honap {
  display: block; font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--szoveg-halvany);
  margin-top: 3px;
}
.esemeny-torzs { flex: 1; min-width: 0; }
.esemeny-torzs h3 { font-size: 1.08rem; margin-bottom: 6px; }
.esemeny-torzs p { font-size: .92rem; color: var(--szoveg-kozep); margin: 0; }
.esemeny-meta {
  display: flex; align-items: center; gap: var(--ter-4); flex-wrap: wrap;
  margin-top: var(--ter-3); font-size: .85rem; color: var(--szoveg-halvany);
}
.esemeny-meta span { display: inline-flex; align-items: center; gap: 6px; }
.esemeny-meta svg { width: 15px; height: 15px; opacity: .7; }

/* --------------------------------------------------------------------------
   12. Galéria
   -------------------------------------------------------------------------- */
.galeria-mozaik {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 178px; gap: var(--ter-4);
}
.galeria-mozaik a {
  position: relative; overflow: hidden; border-radius: var(--ker-m);
  background: var(--kek-100); display: block;
}
.galeria-mozaik a:first-child { grid-column: span 2; grid-row: span 2; }
.galeria-mozaik img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease; }
.galeria-mozaik a:hover img { transform: scale(1.06); }
.galeria-mozaik a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,37,54,.55), transparent 55%);
  opacity: 0; transition: opacity var(--atmenet);
}
.galeria-mozaik a:hover::after { opacity: 1; }

.galeria-racs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--ter-4);
}
.galeria-racs a {
  position: relative; display: block; aspect-ratio: 4/3;
  overflow: hidden; border-radius: var(--ker-m); background: var(--kek-100);
}
.galeria-racs img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.galeria-racs a:hover img { transform: scale(1.06); }

/* Nagyító (lightbox) */
.nagyito {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  background: rgba(6,22,33,.94); padding: var(--ter-5);
}
.nagyito.nyitva { display: flex; }
.nagyito img {
  max-width: min(1100px, 92vw); max-height: 82vh;
  border-radius: var(--ker-m); box-shadow: var(--arnyek-l);
}
.nagyito-felirat {
  position: absolute; bottom: var(--ter-6); left: 0; right: 0;
  text-align: center; color: rgba(255,255,255,.85); font-size: .92rem; padding: 0 var(--ter-5);
}
.nagyito-gomb {
  position: absolute; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); border: 0; border-radius: 50%;
  color: #fff; font-size: 1.6rem; cursor: pointer; transition: background var(--atmenet);
}
.nagyito-gomb:hover { background: rgba(255,255,255,.24); }
.nagyito-bezar { top: var(--ter-5); right: var(--ter-5); }
.nagyito-elozo { left: var(--ter-5); top: 50%; transform: translateY(-50%); }
.nagyito-kovetkezo { right: var(--ter-5); top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   13. Szakkörök / foglalkozások
   -------------------------------------------------------------------------- */
.szakkor-racs {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--ter-5);
}
.szakkor {
  display: flex; flex-direction: column; align-items: center; gap: var(--ter-3);
  text-align: center; color: var(--kek-900);
}
.szakkor-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--feher); border: 2px solid var(--vonal);
  color: var(--kek-600);
  transition: transform var(--atmenet), border-color var(--atmenet),
              background var(--atmenet), color var(--atmenet);
}
.szakkor-ikon svg { width: 38px; height: 38px; }
.szakkor:hover .szakkor-ikon {
  transform: translateY(-5px); border-color: var(--arany-500);
  background: var(--arany-100); color: var(--arany-700);
}
.szakkor-nev { font-size: .93rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   14. Kiemelt sávok (alapítvány, hírlevél, CTA)
   -------------------------------------------------------------------------- */
.sav-kek {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--kek-900) 0%, var(--kek-700) 100%);
  color: var(--feher); padding: var(--ter-8) 0;
}
.sav-kek::before {
  content: ""; position: absolute; left: -60px; bottom: -120px;
  width: 340px; height: 340px; border-radius: 50%; background: rgba(220,155,35,.1);
}
.sav-kek .konteneres { position: relative; z-index: 2; }
.sav-kek h2 { color: var(--feher); }
.sav-kek p { color: rgba(255,255,255,.85); }
.sav-tartalom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ter-7); flex-wrap: wrap;
}
.sav-szoveg { flex: 1 1 460px; }
.sav-szoveg p:last-child { margin-bottom: 0; }
.sav-muvelet { flex: none; }

.adoszam {
  display: inline-block; margin-top: var(--ter-4);
  font-family: var(--font-cim); font-size: 1.7rem; font-weight: 600;
  color: var(--arany-300); letter-spacing: .04em;
}

/* Hírlevél */
.hirlevel-doboz {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ter-7); flex-wrap: wrap;
  padding: var(--ter-7); background: var(--feher);
  border: 1px solid var(--vonal); border-radius: var(--ker-xl);
  box-shadow: var(--arnyek-s);
}
.hirlevel-szoveg { flex: 1 1 420px; }
.hirlevel-szoveg h2 { margin-bottom: var(--ter-2); }
.hirlevel-szoveg p { margin-bottom: 0; color: var(--szoveg-kozep); font-size: .96rem; }
.hirlevel-urlap { flex: 1 1 380px; display: flex; gap: var(--ter-3); flex-wrap: wrap; }
.hirlevel-urlap input { flex: 1 1 200px; }

/* --------------------------------------------------------------------------
   15. Támogatók
   -------------------------------------------------------------------------- */
.tamogato-sor {
  display: flex; align-items: center; justify-content: center;
  gap: var(--ter-7); flex-wrap: wrap;
}
.tamogato-sor img {
  height: 80px; width: auto; opacity: .85;
  filter: grayscale(1); transition: opacity var(--atmenet), filter var(--atmenet);
}
.tamogato-sor a:hover img { opacity: 1; filter: grayscale(0); }

/* --------------------------------------------------------------------------
   16. Idővonal (iskolatörténet)
   -------------------------------------------------------------------------- */
.idovonal { position: relative; margin: 0; padding: 0 0 0 var(--ter-7); list-style: none; }
.idovonal::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(to bottom, var(--arany-500), var(--kek-200));
  border-radius: 2px;
}
.idovonal li { position: relative; margin: 0 0 var(--ter-7); }
.idovonal li::before {
  content: ""; position: absolute; left: calc(-1 * var(--ter-7) + 5px); top: 7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--feher); border: 3px solid var(--arany-500);
  box-shadow: 0 0 0 4px var(--homok);
}
.idovonal-ev {
  display: inline-block; font-family: var(--font-cim);
  font-size: 1.32rem; font-weight: 600; color: var(--arany-600);
  margin-bottom: var(--ter-2);
}
.idovonal h3 { font-size: 1.12rem; margin-bottom: var(--ter-2); }
.idovonal p { margin-bottom: 0; color: var(--szoveg-kozep); font-size: .96rem; }

/* --------------------------------------------------------------------------
   17. Táblázatok
   -------------------------------------------------------------------------- */
.tabla-keret {
  overflow-x: auto; background: var(--feher);
  border: 1px solid var(--vonal); border-radius: var(--ker-m);
}
table.tabla {
  width: 100%; border-collapse: collapse; font-size: .95rem;
}
table.tabla th {
  text-align: left; padding: var(--ter-4) var(--ter-5);
  background: var(--kek-50); color: var(--kek-900);
  font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 1px solid var(--vonal); white-space: nowrap;
}
table.tabla td {
  padding: var(--ter-4) var(--ter-5);
  border-bottom: 1px solid var(--vonal-halvany); vertical-align: middle;
}
table.tabla tbody tr:last-child td { border-bottom: 0; }
table.tabla tbody tr:hover { background: var(--kek-50); }

/* Csengetési rend – kompakt */
.tabla--csengetes td:first-child { font-weight: 600; color: var(--kek-700); width: 56px; }

/* --------------------------------------------------------------------------
   18. Tanárok
   -------------------------------------------------------------------------- */
.tanar-racs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: var(--ter-5);
}
.tanar {
  background: var(--feher); border: 1px solid var(--vonal);
  border-radius: var(--ker-l); overflow: hidden; text-align: center;
  transition: transform var(--atmenet), box-shadow var(--atmenet);
}
.tanar:hover { transform: translateY(-4px); box-shadow: var(--arnyek-m); }
.tanar-kep { aspect-ratio: 1/1; background: var(--kek-100); }
.tanar-kep img { width: 100%; height: 100%; object-fit: cover; }
.tanar-torzs { padding: var(--ter-5) var(--ter-4); }
.tanar-nev { font-family: var(--font-cim); font-size: 1.05rem; font-weight: 600; color: var(--kek-900); margin-bottom: 5px; }
.tanar-szerep { font-size: .88rem; color: var(--szoveg-kozep); line-height: 1.5; }
.tanar-kiemelt { border-color: var(--arany-300); box-shadow: 0 0 0 1px var(--arany-300); }

/* --------------------------------------------------------------------------
   19. Osztály kártyák
   -------------------------------------------------------------------------- */
.osztaly {
  display: flex; align-items: center; gap: var(--ter-5);
  padding: var(--ter-5); background: var(--feher);
  border: 1px solid var(--vonal); border-radius: var(--ker-l);
  transition: transform var(--atmenet), box-shadow var(--atmenet), border-color var(--atmenet);
}
.osztaly:hover { transform: translateY(-4px); box-shadow: var(--arnyek-m); border-color: var(--arany-300); }
.osztaly-jel {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: var(--ker-m);
  background: linear-gradient(140deg, var(--kek-700), var(--kek-500));
  color: var(--feher); font-family: var(--font-cim);
  font-size: 1.5rem; font-weight: 600;
}
.osztaly-torzs { min-width: 0; }
.osztaly-torzs h3 { font-size: 1.1rem; margin-bottom: 4px; }
.osztaly-torzs h3 a { color: inherit; }
.osztaly-torzs p { font-size: .9rem; color: var(--szoveg-kozep); margin: 0; }

/* --------------------------------------------------------------------------
   20. Dokumentumtár
   -------------------------------------------------------------------------- */
.kereso-sor {
  display: flex; gap: var(--ter-3); flex-wrap: wrap;
  margin-bottom: var(--ter-6);
}
.kereso-mezo { position: relative; flex: 1 1 320px; }
.kereso-mezo svg {
  position: absolute; left: var(--ter-4); top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--szoveg-halvany); pointer-events: none;
}
.kereso-mezo input { padding-left: 46px; }

.szuro-gombok { display: flex; gap: var(--ter-2); flex-wrap: wrap; }
.szuro-gomb {
  padding: 11px var(--ter-5); border-radius: 999px;
  background: var(--feher); border: 1px solid var(--vonal);
  font-family: var(--font-szoveg); font-size: .9rem; font-weight: 500;
  color: var(--szoveg-kozep); cursor: pointer; transition: all var(--atmenet);
}
.szuro-gomb:hover { border-color: var(--kek-500); color: var(--kek-700); }
.szuro-gomb.aktiv { background: var(--kek-700); border-color: var(--kek-700); color: var(--feher); }

.dok-lista { list-style: none; margin: 0; padding: 0; }
.dok-lista li { margin: 0 0 var(--ter-3); }
.dok {
  display: flex; align-items: center; gap: var(--ter-4);
  padding: var(--ter-4) var(--ter-5);
  background: var(--feher); border: 1px solid var(--vonal);
  border-radius: var(--ker-m); color: var(--szoveg);
  transition: border-color var(--atmenet), box-shadow var(--atmenet), transform var(--atmenet);
}
.dok:hover { border-color: var(--kek-500); box-shadow: var(--arnyek-s); transform: translateX(3px); color: var(--szoveg); }
.dok-ikon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--ker-s);
  background: var(--piros-100); color: var(--piros);
}
.dok-ikon svg { width: 21px; height: 21px; }
.dok-torzs { flex: 1; min-width: 0; }
.dok-nev { font-weight: 600; font-size: .98rem; margin-bottom: 2px; }
.dok-meta { font-size: .83rem; color: var(--szoveg-halvany); }
.dok-toltes { flex: none; color: var(--kek-600); }
.dok-toltes svg { width: 20px; height: 20px; }

.nincs-talalat {
  padding: var(--ter-7); text-align: center; color: var(--szoveg-halvany);
  background: var(--feher); border: 1px dashed var(--vonal); border-radius: var(--ker-m);
}

/* --------------------------------------------------------------------------
   21. GYIK (harmonika)
   -------------------------------------------------------------------------- */
.gyik { list-style: none; margin: 0; padding: 0; }
.gyik li {
  margin: 0 0 var(--ter-3); background: var(--feher);
  border: 1px solid var(--vonal); border-radius: var(--ker-m); overflow: hidden;
}
.gyik-kerdes {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ter-4);
  width: 100%; padding: var(--ter-5); background: transparent; border: 0;
  font-family: var(--font-cim); font-size: 1.05rem; font-weight: 600;
  color: var(--kek-900); text-align: left; cursor: pointer;
}
.gyik-kerdes:hover { background: var(--kek-50); }
.gyik-jel {
  flex: none; width: 26px; height: 26px; position: relative;
  border-radius: 50%; background: var(--kek-50);
}
.gyik-jel::before, .gyik-jel::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--kek-600); border-radius: 2px; transition: transform var(--atmenet);
}
.gyik-jel::before { width: 11px; height: 2px; transform: translate(-50%, -50%); }
.gyik-jel::after { width: 2px; height: 11px; transform: translate(-50%, -50%); }
.gyik-kerdes[aria-expanded="true"] .gyik-jel::after { transform: translate(-50%, -50%) rotate(90deg); }
.gyik-valasz { display: none; padding: 0 var(--ter-5) var(--ter-5); }
.gyik-valasz p:last-child { margin-bottom: 0; }
.gyik-kerdes[aria-expanded="true"] + .gyik-valasz { display: block; }

/* --------------------------------------------------------------------------
   22. Űrlapok
   -------------------------------------------------------------------------- */
label {
  display: block; margin-bottom: 6px;
  font-size: .88rem; font-weight: 600; color: var(--kek-900);
}
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="search"], input[type="password"], select, textarea {
  width: 100%; padding: 13px var(--ter-4);
  font-family: var(--font-szoveg); font-size: .97rem; color: var(--szoveg);
  background: var(--feher); border: 1px solid var(--vonal);
  border-radius: var(--ker-s);
  transition: border-color var(--atmenet), box-shadow var(--atmenet);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--kek-500);
  box-shadow: 0 0 0 3px var(--kek-100);
}
textarea { min-height: 150px; resize: vertical; }
.mezo { margin-bottom: var(--ter-5); }
.mezo-sor { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ter-5); }
.mezo-sugo { font-size: .84rem; color: var(--szoveg-halvany); margin-top: 6px; }

.urlap-doboz {
  padding: var(--ter-7); background: var(--feher);
  border: 1px solid var(--vonal); border-radius: var(--ker-l);
  box-shadow: var(--arnyek-s);
}

/* --------------------------------------------------------------------------
   23. Kapcsolat
   -------------------------------------------------------------------------- */
.kapcsolat-racs { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--ter-8); align-items: start; }
.kapcsolat-adat { list-style: none; margin: 0 0 var(--ter-6); padding: 0; }
.kapcsolat-adat li {
  display: flex; align-items: flex-start; gap: var(--ter-4);
  margin-bottom: var(--ter-5);
}
.kapcsolat-adat-ikon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--kek-50); color: var(--kek-600);
}
.kapcsolat-adat-ikon svg { width: 19px; height: 19px; }
.kapcsolat-adat-cimke {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--szoveg-halvany); margin-bottom: 3px;
}
.kapcsolat-adat-ertek { font-weight: 500; }
.terkep {
  border: 0; width: 100%; height: 420px;
  border-radius: var(--ker-l); box-shadow: var(--arnyek-s);
}

/* --------------------------------------------------------------------------
   24. Lapozó
   -------------------------------------------------------------------------- */
.lapozo {
  display: flex; align-items: center; justify-content: center; gap: var(--ter-2);
  margin-top: var(--ter-8); list-style: none; padding: 0;
}
.lapozo li { margin: 0; }
.lapozo a, .lapozo span {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 var(--ter-3);
  border-radius: var(--ker-s); font-weight: 600; font-size: .95rem;
  background: var(--feher); border: 1px solid var(--vonal); color: var(--szoveg-kozep);
}
.lapozo a:hover { border-color: var(--kek-500); color: var(--kek-700); }
.lapozo .aktiv { background: var(--kek-700); border-color: var(--kek-700); color: var(--feher); }

/* --------------------------------------------------------------------------
   25. Cikk / szövegtörzs
   -------------------------------------------------------------------------- */
.cikk { max-width: 760px; }
.cikk-meta {
  display: flex; align-items: center; gap: var(--ter-5); flex-wrap: wrap;
  padding-bottom: var(--ter-5); margin-bottom: var(--ter-6);
  border-bottom: 1px solid var(--vonal);
  font-size: .9rem; color: var(--szoveg-halvany);
}
.cikk-meta span { display: inline-flex; align-items: center; gap: 7px; }
.cikk-meta svg { width: 16px; height: 16px; opacity: .7; }
.cikk-bevezeto {
  font-size: 1.12rem; color: var(--kek-800); font-weight: 500;
  padding-left: var(--ter-5); border-left: 3px solid var(--arany-500);
  margin-bottom: var(--ter-6);
}
.cikk-kep { border-radius: var(--ker-l); margin-bottom: var(--ter-6); width: 100%; }
.cikk h2 { margin-top: var(--ter-7); }

.oldalsav-doboz {
  padding: var(--ter-5); background: var(--feher);
  border: 1px solid var(--vonal); border-radius: var(--ker-l); margin-bottom: var(--ter-5);
}
.oldalsav-doboz h3 { font-size: 1.05rem; margin-bottom: var(--ter-4); }
.oldalsav-doboz ul { list-style: none; margin: 0; padding: 0; }
.oldalsav-doboz li { margin-bottom: var(--ter-3); font-size: .94rem; }
.oldalsav-doboz li:last-child { margin-bottom: 0; }

.tartalom-racs { display: grid; grid-template-columns: 1fr 320px; gap: var(--ter-8); align-items: start; }

/* --------------------------------------------------------------------------
   26. Lábléc
   -------------------------------------------------------------------------- */
.lablec {
  background: var(--kek-900); color: rgba(255,255,255,.72);
  padding: var(--ter-9) 0 0; font-size: .93rem;
}
.lablec-racs {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--ter-7); padding-bottom: var(--ter-8);
}
.lablec h3 {
  font-family: var(--font-szoveg); font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--arany-300); margin-bottom: var(--ter-5);
}
.lablec ul { list-style: none; margin: 0; padding: 0; }
.lablec li { margin-bottom: var(--ter-3); }
.lablec a { color: rgba(255,255,255,.72); }
.lablec a:hover { color: var(--arany-300); }
.lablec p { color: rgba(255,255,255,.72); }

.lablec-logo { display: flex; align-items: center; gap: var(--ter-3); margin-bottom: var(--ter-5); }
.lablec-logo .logo-fo { color: var(--feher); }
.lablec-logo .logo-al { color: var(--arany-300); }

.lablec-kozossegi { display: flex; gap: var(--ter-3); margin-top: var(--ter-5); }
.lablec-kozossegi a {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.85);
  transition: background var(--atmenet), transform var(--atmenet);
}
.lablec-kozossegi a:hover { background: var(--arany-500); color: var(--kek-900); transform: translateY(-3px); }
.lablec-kozossegi svg { width: 19px; height: 19px; }

.lablec-alj {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ter-4); flex-wrap: wrap;
  padding: var(--ter-5) 0; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .86rem; color: rgba(255,255,255,.55);
}
.lablec-alj a { color: rgba(255,255,255,.55); }

/* --------------------------------------------------------------------------
   27. Demo jelölés (csak a bemutató verzióban)
   -------------------------------------------------------------------------- */
.demo-sav {
  background: repeating-linear-gradient(135deg, #23313b, #23313b 12px, #2b3a45 12px, #2b3a45 24px);
  color: rgba(255,255,255,.9); font-size: .8rem; text-align: center;
  padding: var(--ter-2) var(--ter-5);
}
.demo-sav strong { color: var(--arany-300); }

/* --------------------------------------------------------------------------
   28. Finom megjelenítő animáció
   -------------------------------------------------------------------------- */
/* Alaphelyzetben minden látszik; a rejtést csak a JS kapcsolja be,
   így JavaScript nélkül is teljes a tartalom. */
.js-animal .feltunik {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.js-animal .feltunik.lathato { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js-animal .feltunik { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   29. Reszponzivitás
   -------------------------------------------------------------------------- */

/* Nagy tablet / kis laptop */
@media (max-width: 1080px) {
  .gyorseleres-racs { grid-template-columns: repeat(3, 1fr); }
  .szakkor-racs { grid-template-columns: repeat(3, 1fr); }
  .tartalom-racs { grid-template-columns: 1fr; }
  .lablec-racs { grid-template-columns: 1fr 1fr; gap: var(--ter-6); }
}

/* Tablet – itt vált mobilmenüre */
@media (max-width: 960px) {
  .menu-gomb { display: flex; }
  .fejlec .konteneres { min-height: 72px; }
  .fejlec-muvelet .gomb { display: none; }

  .fo-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - 72px); overflow-y: auto;
    padding: var(--ter-4) var(--ter-5) var(--ter-6);
    background: var(--feher); border-bottom: 1px solid var(--vonal);
    box-shadow: var(--arnyek-l);
  }
  .fo-menu.nyitva { display: flex; }
  .menu-lista { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .menu-elem { border-bottom: 1px solid var(--vonal-halvany); }
  .menu-link {
    justify-content: space-between; padding: var(--ter-4) var(--ter-2);
    font-size: 1.02rem; border-radius: 0;
  }
  .menu-link[aria-current="page"]::after { display: none; }
  .menu-elem:hover .menu-nyil { transform: none; }
  .menu-elem.kinyitva .menu-nyil { transform: rotate(180deg); }

  .almenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; min-width: 0; margin: 0 0 var(--ter-3);
    padding: 0 0 0 var(--ter-4); background: transparent;
    border: 0; border-left: 2px solid var(--kek-100); border-radius: 0; box-shadow: none;
  }
  .menu-elem.kinyitva > .almenu { display: block; }
  .menu-elem:hover > .almenu { opacity: 1; visibility: visible; }
  .menu-elem:not(.kinyitva):hover > .almenu { display: none; }
  .almenu a { padding: 11px var(--ter-3); }

  .mobil-menu-gombok {
    display: flex !important; flex-direction: column;
    gap: var(--ter-3); margin-top: var(--ter-5);
  }

  .kapcsolat-racs { grid-template-columns: 1fr; gap: var(--ter-7); }
  .galeria-mozaik { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .racs--4 { grid-template-columns: repeat(2, 1fr); }
  .racs--3 { grid-template-columns: repeat(2, 1fr); }
  .szamok { grid-template-columns: repeat(2, 1fr); }
  .szam-elem:nth-child(3) { border-left: 0; }
  .szam-elem { border-top: 1px solid var(--vonal); }
  .szam-elem:nth-child(-n+2) { border-top: 0; }
}

/* Mobil */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .szekcio { padding: var(--ter-8) 0; }
  .szekcio--kicsi { padding: var(--ter-7) 0; }
  .konteneres { padding: 0 var(--ter-4); }

  .info-sav { font-size: .78rem; }
  .info-sav .konteneres { justify-content: center; padding-top: 7px; padding-bottom: 7px; }
  .info-sav-bal { display: none; }
  .info-sav-jobb { gap: var(--ter-4); }

  .hero { padding: var(--ter-8) 0 calc(var(--ter-8) + 50px); }
  .hero-gombok { flex-direction: column; align-items: stretch; }
  .hero-gombok .gomb { width: 100%; }

  .gyorseleres { margin-top: -50px; }
  .gyorseleres-racs { grid-template-columns: repeat(2, 1fr); gap: var(--ter-3); }
  .gyors-csempe { padding: var(--ter-4) var(--ter-2); }
  .gyors-csempe-ikon { width: 44px; height: 44px; }
  .gyors-csempe-cim { font-size: .84rem; }

  .racs--2, .racs--3, .racs--4 { grid-template-columns: 1fr; }
  .szakkor-racs { grid-template-columns: repeat(2, 1fr); gap: var(--ter-4); }
  .galeria-mozaik { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 118px; gap: var(--ter-3); }
  .galeria-mozaik a:first-child { grid-column: span 2; grid-row: span 2; }
  .galeria-racs { grid-template-columns: repeat(2, 1fr); gap: var(--ter-3); }

  .esemeny { gap: var(--ter-4); padding: var(--ter-4); }
  .esemeny-datum { width: 56px; }
  .esemeny-nap { font-size: 1.3rem; }

  .osztaly { padding: var(--ter-4); gap: var(--ter-4); }
  .osztaly-jel { width: 52px; height: 52px; font-size: 1.25rem; }

  .hirlevel-doboz { padding: var(--ter-5); border-radius: var(--ker-l); }
  .urlap-doboz { padding: var(--ter-5); }
  .mezo-sor { grid-template-columns: 1fr; gap: 0; }
  .sav-tartalom { gap: var(--ter-5); }
  .sav-muvelet, .sav-muvelet .gomb { width: 100%; }

  .lablec { padding-top: var(--ter-8); }
  .lablec-racs { grid-template-columns: 1fr; gap: var(--ter-6); }
  .lablec-alj { flex-direction: column; text-align: center; gap: var(--ter-2); }

  .idovonal { padding-left: var(--ter-6); }
  .idovonal li::before { left: calc(-1 * var(--ter-6) + 4px); }

  .nagyito-elozo { left: var(--ter-3); }
  .nagyito-kovetkezo { right: var(--ter-3); }
  .kereso-sor { flex-direction: column; }
  .szuro-gombok { overflow-x: auto; padding-bottom: 4px; }
  .szuro-gomb { white-space: nowrap; }
  .terkep { height: 300px; }
}


/* ===== FŐOLDAL V2 – egyeztetett koncepció ===== */
.fejlec .konteneres{justify-content:flex-start;}
.fejlec nav{margin-left:8px;}
.projekt-logo{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;max-width:180px;flex:none;}
.projekt-logo img{display:block;max-width:170px;max-height:64px;width:auto;height:auto;object-fit:contain;}
.fejlec-muvelet{margin-left:0;}

.hero-slider{height:clamp(500px,58vw,680px);padding:0;position:relative;background:var(--kek-900);}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 1s ease;}
.hero-slide.aktiv{opacity:1;visibility:visible;}
.hero-slide .hero-hatter{opacity:1;object-position:center;}
.hero-slide:first-child .hero-hatter{object-position:center 48%;}
.hero-arnyek{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,37,54,.78) 0%,rgba(10,37,54,.45) 45%,rgba(10,37,54,.10) 75%,rgba(10,37,54,.04) 100%);}
.hero-slider::after{display:none;}
.hero-slide-tartalom{position:relative;z-index:3;height:100%;display:flex;align-items:center;padding-bottom:60px;}
.hero-slider .hero-tartalom{max-width:620px;}
.hero-slider h1,.hero-slider h2{color:#fff;font-size:clamp(2rem,1.45rem + 2.2vw,3.7rem);margin:0 0 var(--ter-6);text-shadow:0 2px 20px rgba(0,0,0,.25);}
.hero-pontok{position:absolute;z-index:8;left:50%;bottom:82px;transform:translateX(-50%);display:flex;gap:10px;}
.hero-pont{width:11px;height:11px;border:1px solid rgba(255,255,255,.85);border-radius:50%;padding:0;background:rgba(255,255,255,.15);cursor:pointer;}
.hero-pont.aktiv{background:#fff;}

.minta-jelzes{display:block;font-size:.7rem;font-weight:400;color:var(--szoveg-halvany);margin-top:2px;}
.hir-racs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ter-5);}
.hir-kartya{display:flex;flex-direction:column;min-height:280px;padding:var(--ter-6);background:#fff;border:1px solid var(--vonal);border-top:4px solid var(--kek-600);border-radius:var(--ker-l);box-shadow:var(--arnyek-s);}
.hir-kartya time,.galeria-kartya time{font-size:.82rem;color:var(--szoveg-halvany);margin-bottom:10px;}
.hir-kartya h3{font-size:1.24rem;margin-bottom:var(--ter-4);}
.hir-kartya h3 a{color:inherit;}
.hir-kartya p{color:var(--szoveg-kozep);font-size:.94rem;margin-bottom:var(--ter-5);}
.hir-kartya .tovabb-link{margin-top:auto;}

.esemeny-racs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ter-4);}
.esemeny-racs .esemeny{height:100%;margin:0;}
.esemeny-racs .esemeny:hover{transform:translateY(-2px);}

.galeria-kartya-racs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ter-5);}
.galeria-kartya{display:flex;flex-direction:column;background:#fff;border:1px solid var(--vonal);border-radius:var(--ker-l);overflow:hidden;box-shadow:var(--arnyek-s);color:inherit;transition:transform var(--atmenet),box-shadow var(--atmenet);}
.galeria-kartya:hover{transform:translateY(-4px);box-shadow:var(--arnyek-m);color:inherit;}
.galeria-kartya img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.galeria-kartya-torzs{display:flex;flex-direction:column;flex:1;padding:var(--ter-5);}
.galeria-kartya h3{margin:0 0 var(--ter-3);font-size:1.15rem;}
.galeria-kartya p{color:var(--szoveg-kozep);font-size:.92rem;margin-bottom:var(--ter-4);}
.galeria-kartya .tovabb-link{margin-top:auto;}

.sav-kek--alapitvany::before{background-image:radial-gradient(circle at 15% 25%,rgba(240,201,106,.18) 0 2px,transparent 3px),radial-gradient(circle at 85% 70%,rgba(255,255,255,.08) 0 2px,transparent 3px);background-size:52px 52px,68px 68px;opacity:1;}

@media (max-width:1180px){
  .projekt-logo{max-width:130px}.projekt-logo img{max-width:125px;max-height:52px}
  .menu-link{padding-left:8px;padding-right:8px;font-size:.9rem}
}
@media (max-width:960px){
  .fejlec .konteneres{justify-content:space-between;}
  .fejlec nav{margin-left:0;}
  .projekt-logo{margin-left:auto;margin-right:8px;max-width:115px;}
  .projekt-logo img{max-width:110px;max-height:48px;}
  .hero-slider{height:560px;}
  .hir-racs,.galeria-kartya-racs{grid-template-columns:1fr 1fr;}
  .hir-racs>*:last-child,.galeria-kartya-racs>*:last-child{grid-column:1/-1;}
}
@media (max-width:700px){
  .projekt-logo{max-width:90px}.projekt-logo img{max-width:86px;max-height:42px}
  .hero-slider{height:520px;}
  .hero-slide-tartalom{align-items:flex-end;padding-bottom:105px;}
  .hero-arnyek{background:linear-gradient(0deg,rgba(10,37,54,.88) 0%,rgba(10,37,54,.48) 52%,rgba(10,37,54,.10) 100%);}
  .hero-pontok{bottom:76px;}
  .hir-racs,.esemeny-racs,.galeria-kartya-racs{grid-template-columns:1fr;}
  .hir-racs>*:last-child,.galeria-kartya-racs>*:last-child{grid-column:auto;}
}

/* --------------------------------------------------------------------------
   Főoldal V3 finomhangolások – 2026-09-15
   -------------------------------------------------------------------------- */
/* A hírek a törtfehér/homok alapszínt kapják, így jobban elkülönülnek
   a fehér hírszekció hátterétől. */
.hir-kartya {
  background: var(--homok);
  border-color: #ded5c7;
}

/* A szakköri jelek a kártyák méretéhez igazodva hangsúlyosabbak. */
.szakkor-ikon {
  width: 94px;
  height: 94px;
  font-size: 2.15rem;
  line-height: 1;
}
.szakkor-ikon svg { width: 44px; height: 44px; }

/* Az 1%-os blokk világos lezáró CTA; a sötét vizuális lezárást a lábléc adja. */
.tamogatas-sav {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--arany-100) 0%, var(--homok) 72%, var(--kek-50) 100%);
  color: var(--szoveg);
  padding: var(--ter-8) 0;
  border-top: 1px solid var(--vonal);
}
.tamogatas-sav::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(220,155,35,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 70%, rgba(16,69,107,.08) 0 2px, transparent 3px);
  background-size: 52px 52px, 68px 68px;
  pointer-events: none;
}
.tamogatas-sav .konteneres { position: relative; z-index: 2; }
.tamogatas-sav h2 { color: var(--kek-900); }
.tamogatas-sav p { color: var(--szoveg-kozep); }
.tamogatas-sav .felcim { color: var(--arany-700); }
.tamogatas-sav .adoszam { color: var(--kek-700); }


/* ===== Publikus PHP 1.0 kiegészítések ===== */
.oldalfej--foto{position:relative;background:linear-gradient(90deg,rgba(248,246,239,.98) 0%,rgba(248,246,239,.92) 42%,rgba(248,246,239,.34) 72%,rgba(248,246,239,.16) 100%),url('../img/belso-fejlec.webp') center 48%/cover no-repeat;padding:56px 0 62px;overflow:hidden;}
.oldalfej--foto::before{content:none}.oldalfej--foto h1{color:var(--kek-900);font-size:clamp(2.1rem,4vw,4rem);margin-bottom:12px}.oldalfej--foto p{color:var(--szoveg-kozep);max-width:650px;font-size:1.05rem}.oldalfej--foto .morzsa{color:var(--szoveg-kozep)}.oldalfej--foto .morzsa a{color:var(--kek-700)}
.hir-lista-racs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ter-5)}.hir-lista-racs .hir-kartya{height:100%}.hir-lista-racs h2{font-size:1.2rem}
.lapozas{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:var(--ter-7)}.lapozas a,.lapozas span{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--vonal);border-radius:8px;background:#fff}.lapozas span[aria-current="page"]{background:var(--kek-700);color:#fff;border-color:var(--kek-700)}
.hir-reszlet-racs{display:grid;grid-template-columns:minmax(0,3fr) minmax(250px,1fr);gap:var(--ter-7);align-items:start}.hir-reszlet{max-width:900px}.hir-reszlet>time{color:var(--szoveg-halvany)}.hir-ajanlo{font-size:1.15rem;font-weight:500;color:var(--szoveg-kozep);padding:18px 22px;background:var(--homok-50,#f7f2e8);border-left:4px solid var(--arany-400);margin:18px 0 28px}.tovabbi-hirek time{display:block;font-size:.78rem;color:var(--szoveg-halvany)}.tovabbi-hirek a{display:block;font-weight:600;margin-top:3px}
.galeria-lista-racs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ter-5)}.galeria-lista-racs .galeria-kartya h2{font-size:1.15rem}.kartya-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:.82rem;color:var(--szoveg-halvany);margin-bottom:10px}.galeria-ures-kep{aspect-ratio:16/10;background:var(--homok-100,#f1eadb)}.galeria-meta{display:flex;gap:18px;color:var(--szoveg-halvany);margin-bottom:20px}.galeria-leiras{max-width:900px;margin-bottom:28px}.foto-racs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.foto-racs a{display:block;overflow:hidden;border-radius:10px;background:var(--homok-100,#f1eadb);aspect-ratio:4/3}.foto-racs img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}.foto-racs a:hover img{transform:scale(1.025)}
.korabbi-esemenyek{margin-top:var(--ter-8);padding-top:var(--ter-7);border-top:1px solid var(--vonal)}.esemeny-mult{opacity:.62;filter:saturate(.65)}
.dok-eszkoztar{margin-bottom:var(--ter-6)}.dok-kereso-wrap{position:relative;display:block;max-width:720px;margin-bottom:18px}.dok-kereso-wrap input{width:100%;padding:15px 18px 15px 48px;border:1px solid var(--vonal);border-radius:10px;font:inherit;background:#fff}.dok-kereso-ikon{position:absolute;left:17px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--szoveg-halvany);pointer-events:none}.dok-szurok{display:flex;gap:8px;flex-wrap:wrap}.szuro-gomb{border:1px solid var(--vonal);background:#fff;padding:9px 14px;border-radius:999px;cursor:pointer}.szuro-gomb.aktiv{background:var(--kek-700);color:#fff;border-color:var(--kek-700)}.dokumentum-lista{list-style:none;margin:0;padding:0;display:grid;gap:14px}.dokumentum-lista--2{grid-template-columns:repeat(2,minmax(0,1fr))}.dokumentum-lista--1{grid-template-columns:1fr}.dokumentum-sor{height:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 20px;border:1px solid var(--vonal);border-radius:12px;background:#fff}.dokumentum-sor h2{font-size:1rem;margin:0 0 8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dolgozo-csoport+.dolgozo-csoport{margin-top:var(--ter-8)}.dolgozo-racs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ter-5)}.dolgozo-kartya{background:#fff;border:1px solid var(--vonal);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;height:100%}.dolgozo-kephely{aspect-ratio:4/3;background:var(--homok-100,#f1eadb)}.dolgozo-kephely img{width:100%;height:100%;object-fit:cover}.dolgozo-torzs{padding:18px}.dolgozo-torzs h3{font-size:1.05rem;margin:0 0 6px}.dolgozo-beosztas{font-weight:600;color:var(--kek-700)}
.osztaly-kartya-racs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ter-5)}.osztaly-kartya{display:flex;flex-direction:column;background:#fff;border:1px solid var(--vonal);border-radius:14px;overflow:hidden;color:inherit}.osztaly-kephely{aspect-ratio:4/3;background:var(--homok-100,#f1eadb)}.osztaly-kephely img{width:100%;height:100%;object-fit:cover}.osztaly-kartya-torzs{padding:18px;display:flex;flex-direction:column;flex:1}.osztaly-kartya-torzs h2{font-size:1.15rem}.osztaly-kartya-torzs .tovabb-link{margin-top:auto}.osztaly-reszlet{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.6fr);gap:var(--ter-7);align-items:start}.osztaly-reszlet-kep img{width:100%;border-radius:14px}.adatlista{display:grid;gap:8px;margin:0 0 24px}.adatlista>div{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--vonal)}.adatlista dt{font-weight:600}.adatlista dd{margin:0}
.kapcsolat-adatok{max-width:800px}.terkep-szekcio{padding:0 0 var(--ter-8)}.terkep-hely iframe{width:100%;height:420px;border:0;border-radius:14px}
.vissza-link{margin-top:var(--ter-7);font-weight:600}
.szerkesztett-tartalom img{max-width:100%;height:auto}.szerkesztett-tartalom table{max-width:100%}
@media(max-width:1000px){.galeria-lista-racs{grid-template-columns:repeat(2,1fr)}.foto-racs{grid-template-columns:repeat(3,1fr)}.dolgozo-racs,.osztaly-kartya-racs{grid-template-columns:repeat(2,1fr)}.hir-reszlet-racs{grid-template-columns:1fr}.oldalsav-doboz{margin-top:0}}
@media(max-width:720px){.oldalfej--foto{padding:38px 0 42px;background:linear-gradient(rgba(248,246,239,.93),rgba(248,246,239,.93)),url('../img/belso-fejlec.webp') center/cover no-repeat}.hir-lista-racs,.galeria-lista-racs,.dokumentum-lista--2{grid-template-columns:1fr}.foto-racs{grid-template-columns:repeat(2,1fr)}.dolgozo-racs,.osztaly-kartya-racs{grid-template-columns:1fr}.dokumentum-sor{align-items:flex-start;flex-direction:column}.osztaly-reszlet{grid-template-columns:1fr}.adatlista>div{grid-template-columns:1fr}.terkep-hely iframe{height:320px}}

/* --------------------------------------------------------------------------
   Publikus PHP 1.1 finomhangolások – 2026-09-16
   -------------------------------------------------------------------------- */

/* Valódi iskolai címer a fejlécben és a láblécben. */
.iskola-logo-kep {
  width: 52px;
  height: 62px;
  object-fit: contain;
  flex: none;
}
.lablec-iskola-logo {
  width: 48px;
  height: 58px;
  object-fit: contain;
  flex: none;
}

/* A széles támogatói logó kapjon valódi helyet a menü jobb oldalán. */
.projekt-logo {
  max-width: 240px;
}
.projekt-logo img {
  max-width: 235px;
  max-height: 54px;
}

/* Kiemelt hír: az eredeti demo figyelmeztető ikonja és elkülönített linkje. */
.kozlemeny-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.kozlemeny-ikon svg {
  width: 24px;
  height: 24px;
}
.kozlemeny-ajanlo {
  margin-left: .35rem;
}
.kozlemeny-reszletek {
  display: inline-flex;
  align-items: center;
  margin-left: var(--ter-4);
  padding: 5px 10px;
  border: 1px solid rgba(16, 69, 107, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  color: var(--kek-800);
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
}
.kozlemeny-reszletek:hover {
  background: var(--feher);
  color: var(--kek-900);
}

/* Gyorselérések: az eredeti demo SVG ikonjai, hangsúlyosabb méretben. */
.gyors-csempe-ikon {
  width: 64px;
  height: 64px;
}
.gyors-csempe-ikon svg {
  width: 32px;
  height: 32px;
}

/* Eredeti demo láblécének finom tipográfiai részletei. */
.lablec-fenntarto {
  margin-top: 16px;
}
.lablec-fenntarto strong {
  color: var(--arany-300);
}
.lablec-alj p {
  margin: 0;
}
.lablec-elvalaszto {
  display: inline-block;
  margin: 0 .55rem;
  opacity: .55;
}

@media (max-width: 1180px) {
  .projekt-logo { max-width: 185px; }
  .projekt-logo img { max-width: 180px; max-height: 42px; }
}

@media (max-width: 960px) {
  .iskola-logo-kep { width: 44px; height: 53px; }
  .projekt-logo { max-width: 130px; }
  .projekt-logo img { max-width: 125px; max-height: 32px; }
}

@media (max-width: 640px) {
  .gyors-csempe-ikon {
    width: 54px;
    height: 54px;
  }
  .gyors-csempe-ikon svg {
    width: 28px;
    height: 28px;
  }
  .kozlemeny-szoveg {
    line-height: 1.55;
  }
  .kozlemeny-reszletek {
    margin-left: .35rem;
    margin-top: 4px;
  }
}

/* --------------------------------------------------------------------------
   Mobil fejléc finomhangolás – 2026-09-21
   --------------------------------------------------------------------------
   Keskeny kijelzőn az iskola teljes szöveges logója + a széles projektlogó
   + a hamburger gomb együtt már nem fér el biztonságosan egy sorban.
   Mobilon ezért az iskolai címer marad meg önállóan, a projektlogó kisebb
   méretet kap, a hamburger gomb pedig fixen látható marad.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .fejlec .konteneres {
    gap: 10px;
  }

  .logo {
    gap: 8px;
    min-width: 0;
  }

  /* Mobilon is maradjon látható az iskola neve, csak kompaktabb méretben. */
  .logo-szoveg {
    display: flex;
    min-width: 0;
    line-height: 1.05;
  }

  .logo-fo {
    font-size: .95rem;
    white-space: nowrap;
  }

  .logo-al {
    font-size: .52rem;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  .iskola-logo-kep {
    width: 40px;
    height: 48px;
  }

  .fejlec nav {
    width: 0;
    flex: 0 0 0;
    margin: 0;
  }

  .projekt-logo {
    flex: 0 1 100px;
    min-width: 0;
    max-width: 100px;
    margin-left: auto;
    margin-right: 0;
  }

  .projekt-logo img {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 30px;
  }

  .fejlec-muvelet,
  .menu-gomb {
    flex: none;
  }
}

@media (max-width: 380px) {
  .fejlec .konteneres {
    gap: 6px;
  }

  .logo {
    gap: 6px;
  }

  .logo-fo {
    font-size: .82rem;
  }

  .logo-al {
    font-size: .46rem;
    letter-spacing: .05em;
  }

  .iskola-logo-kep {
    width: 36px;
    height: 44px;
  }

  .projekt-logo {
    flex-basis: 72px;
    max-width: 72px;
  }

  .projekt-logo img {
    max-width: 72px;
    max-height: 24px;
  }
}