body {
    color: #ffffff;
    justify-content: center; /* vízszintesen középre */
    align-items: center;     /* függőlegesen középre, ha kell */
    min-height: 100vh;       /* teljes magasság */
    gap: 10px;
    padding: 20px;
    padding-bottom: 0px;
    background-color: #3e3e3e;
  }
.buttonkapcsolat {
background-color: #3e3e3e;
justify-content: center;
margin: 10px;
padding: 10px;
border-color: #252525;
cursor:pointer;
color: white;


  transition: 0.3s;

  max-height: 200px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}
.buttonkapcsolat:hover {
  transform: scale(1.05);
}

.elerhetosegek {
margin-top: 18px;
font-style: italic;
}
.footer {
  font-size: 16px;
  bottom: 0 !important;
  left: 0;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 10;
  font-style: italic;
  margin-top: 10px;
  color: #ababab;
}
.footer a{
  color: #ababab;
}
/* EZ EGY ÚJ SZABÁLY */
.header {
  position: relative; /* Pozicionálási kontextust ad neki */
  z-index: 2; /* A képrétegek (z-index: 1) fölé helyezi */
}
.header h1{
    display: flex;
    flex-wrap: wrap;
    min-height: 20vh;       /* teljes magasság */
    gap: 10px;
    padding: 20px;
    font-size: 60px;
    font-weight: normal;
    align-items: center;  
    justify-content: center;
}
.centered-caption {
  text-align: center;
}
.centered-caption figcaption {
  margin-top: 5px;
  font-style: italic;
}
p{
  text-align: center;
  margin: auto;
  font-size: 20px;
  margin-bottom: 6px;
}

h2 {

  text-align: center;
  margin: auto;
  font-size: 20px;
  margin-bottom: 6px;
  font-weight: normal;
}
.szovegdoboz {
    text-align: center;
    align-items: center;  
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    background-color: #ababab;   
}
img {
max-width: 3000px;
margin: 10px;
}
a {
  color: #ffffff;
  text-decoration:none;
  font-weight: normal;
}
.gallery-lejjebb {
  position: relative;

  margin-bottom: 20px;
}
.gallery-lejjebb2 {
  position: relative
}

/* --- LAZY LOAD STÍLUSOK --- */

/* Kezdeti állapot: a kép még "töltés alatt" */
img.lazy-image {
    display: block;
    min-height: 200px; /* FONTOS: Fenntartja a helyet a képnek, hogy ne ugráljon az oldal */
    background-color: #f0f0f0; /* Halványszürke háttér amíg tölt */

    opacity: 0.3; /* 0.1 helyett legyen kicsit láthatóbb a placeholder */
    transition: opacity 0.5s ease-in; 
    /* Tipp: tehetsz rá egy blur filtert is, nagyon profin néz ki: */
    filter: blur(5px);
}

img.lazy-image.loaded {
    opacity: 1;
    filter: blur(0); /* Élesedjen ki, amikor betöltött */
    background-color: transparent;
}

/* --- VIDEÓS SÁV STÍLUSOK --- */

/* A külső keret - ez határozza meg a méretet */
.video-box {
    border-radius: 30px;
    position: relative;
    width: 100%;
    height: 250px;   /* Itt állítsd be a sáv magasságát fixen! (Pl. 200px - 300px) */
    overflow: hidden;
    display: flex;
    align-items: center;     /* Függőleges középre igazítás */
    justify-content: center; /* Vízszintes középre igazítás */
    background-color: #000;  /* Ha nem töltene be a videó, ez legyen alatta */
}

/* A videó a háttérben */
.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Ez a kulcs: kitölti a dobozt, levágja a kilógó részeket */
    object-position: center; /* A videó közepét mutatja */
    z-index: 1;
}

/* Sötétítő réteg a videó és a szöveg közé */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 40%-os fekete áttetszőség */
    z-index: 2;
}

/* Maga a szöveg */
.video-text {
    position: relative;
    z-index: 3;          /* Ez legyen a legmagasabban */
    color: white;
    font-size: 2.5rem;   /* Betűméret */
    text-transform: uppercase; /* Opcionális: nagybetűsítés */
    text-align: center;
    margin: 0;
    padding: 0 20px;     /* Hogy mobilon ne érjen a széléig */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8); /* Erős árnyék a jobb olvashatóságért */
}

/* Mobilra optimalizálás: ha túl hosszú a szöveg, legyen kisebb */
@media screen and (max-width: 768px) {
    .video-text {
        font-size: 1.5rem;
    }
    .video-box {
        height: 200px; /* Mobilon lehet kicsit keskenyebb a sáv */
    }
}
/* ======================================================= */
/* === LEGKESKENYEBB NÉZET (pl. álló telefon)             === */
/* === (max-aspect-ratio: 2/3)                         === */
/* ======================================================= */

@media screen and (max-aspect-ratio: 2/3) { 

  /* 1. A .cimlapkep ÜRES KONTÉNER */
  .cimlapkep {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 100vh;
    z-index: 1; /* A szöveg mögé */
    background-repeat: no-repeat;
    background-position: center center;
  }

  /* 2. A KÉT KÉP rétegeinek közös stílusai (legkeskenyebb mobil) */
  .cimlapkep::before,
  .cimlapkep::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0; /* Alapból rejtve */
    z-index: 1; 
    
    /* EZ A KÉRT NAGYÍTÁS: a magasság 120%-ra állítása */
    background-size: auto 120%; 
  }

  /* 3. KÉP (a ::before elemen) */
  .cimlapkep::before {
    background-image: url("PetrasFoto_sportfoto_allo_0.jpg");
    animation: crossFadeTwoImages 12.0s linear infinite;
    animation-delay: 0s;
  }

  /* 4. KÉP (a ::after elemen) */
  .cimlapkep::after {
    background-image: url("PetrasFoto_sportfoto_allo_1.jpg");
    animation: crossFadeTwoImages 12.0s linear infinite;
    animation-delay: 6s;
  }

  /* 5. A tartalom lejjebb tolása */
  .lejjebbminden {
    position: relative;
    z-index: 2; /* A kép fölött */
    margin-top: 100vh; /* Lenyomja a kép alá a tartalmat */
  }

} /* <-- Itt zárul a (max-aspect-ratio: 2/3) @media blokk */



/* ======================================================= */
/* === KESKENY KIJELZŐS NÉZET (pl. telefon)             === */
/* === (max-aspect-ratio: 4/3)                         === */
/* ======================================================= */

/* Megjegyzés: a (max-aspect-ratio: 4/3) -ra váltottam, 
  mert az lefedi az összes képernyőt, ami keskenyebb, 
  mint ahol a 3-képes diavetítés (min-aspect-ratio: 4/3) elindul. 
  Így nincs "rés" a két nézet között.
*/
@media screen and (min-aspect-ratio: 2/3) and (max-aspect-ratio: 5/4) { 

  /* 1. A .cimlapkep ÜRES KONTÉNER lett, nincs saját képe */
  .cimlapkep {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 100vh;
    z-index: 1; /* A szöveg mögé */
    background-repeat: no-repeat;
    background-position: center center;
    /* KIVÉVE: background-image, background-size */
  }

  /* 2. A KÉT KÉP rétegeinek közös stílusai (mobilon) */
  /* (A <span>-t itt nem használjuk, csak a ::before és ::after-t) */
  .cimlapkep::before,
  .cimlapkep::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0; /* Alapból rejtve */
    z-index: 1; 
    background-size: cover; /* Mobilon a 'cover' a legjobb */
  }

  /* 3. KÉP (a ::before elemen) - CSERÉLD LE A KÉP NEVÉT! */
  .cimlapkep::before {
    background-image: url("PetrasFoto_sportfoto_allo_0.jpg");
    animation: crossFadeTwoImages 12.0s linear infinite;
    animation-delay: 0s;
  }

  /* 4. KÉP (a ::after elemen) - CSERÉLD LE A KÉP NEVÉT! */
  .cimlapkep::after {
    background-image: url("PetrasFoto_sportfoto_allo_1.jpg");
    animation: crossFadeTwoImages 12.0s linear infinite;
    animation-delay: 6s;
  }

  /* 5. A tartalom lejjebb tolása (ez már jó volt) */
  .lejjebbminden {
    position: relative;
    z-index: 2; /* A kép fölött */
    margin-top: 100vh; /* Lenyomja a kép alá a tartalmat */
  }

} /* <-- Itt zárul a (max-aspect-ratio: 4/3) @media blokk */

@media screen and (min-aspect-ratio: 5/4) { 
  
  /* --- 1. A DIAVETÍTÉS ALAPJAI --- */

  /* A szülő .cimlapkep ÜRES KONTÉNER */
  .cimlapkep {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 100vh;
    z-index: 1; /* A leghátsó réteg (a szöveg mögött) */
    background-repeat: no-repeat;
    background-position: center;
  }

  /* A HÁROM réteg közös stílusai */
  .cimlapkep::before,
  .cimlapkep::after,
  .cimlapkep span {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0; /* Alapból rejtve */
    z-index: 1; /* A szülő fölött, de a szöveg mögött */
  }


  /* 1. KÉP (a ::before elemen) */
  .cimlapkep::before {
    background-image: url("PetrasFoto_sportfoto_1.jpg");
    animation: crossFadeThreeImages 13.5s linear infinite;
    animation-delay: 0s;
  }

  /* 2. KÉP (a ::after elemen) */
  .cimlapkep::after {
    background-image: url("PetrasFoto_sportfoto_2.jpg");
    animation: crossFadeThreeImages 13.5s linear infinite;
    animation-delay: 4.5s;
  }

  /* 3. KÉP (a belső <span> elemen) */
  .cimlapkep span {
    background-image: url("PetrasFoto_sportfoto_3.jpg");
    animation: crossFadeThreeImages 13.5s linear infinite;
    animation-delay: 9.0s;
  }

  /* --- 2. KÉPARÁNYOK KEZELÉSE (MÉRETEZÉS) --- */
  /* (Ezek most már a fő @media blokkon BELÜL vannak) */

  @media screen and (min-aspect-ratio: 16/9) {
    .cimlapkep::before,
    .cimlapkep::after,
    .cimlapkep span {
      background-size: 100% auto;
    }
  }

  @media screen and (min-aspect-ratio: 3/2) and (max-aspect-ratio: 16/9) {
    .cimlapkep::before,
    .cimlapkep::after,
    .cimlapkep span {
      background-size: 120% auto;
    }
  }

  @media screen and (min-aspect-ratio: 5/4) and (max-aspect-ratio: 3/2) {
    .cimlapkep::before,
    .cimlapkep::after,
    .cimlapkep span {
      background-size: 142% auto;
    }
  }


  /* --- 3. TARTALOM ELTOLÁSA --- */
  /* (Ez tolja le a galériát, stb. a 100vh kép alá) */
  
  .lejjebbminden {
    position: relative;
    z-index: 2; /* A tartalom a diavetítés fölött van */
    margin-top: 100vh;
  }
  .gallery-lejjebb2 {
    position: absolute;
    top: 150vh;
    margin-top: 10px;
  }
  .gallery-lejjebb {
    position: absolute;
    top: 100vh;
    margin-top: 10px;
  }

} /* <-- Itt zárul a (min-aspect-ratio: 4/3) @media blokk */


.fejlec {
  z-index: 10;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}
.gallery img {
  margin: 10px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 8px;
  max-height: 200px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.gallery img:hover {
  transform: scale(1.05);
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

/* Az EGYETLEN @keyframes, amit a 3-képeshez használunk */
@keyframes crossFadeThreeImages {
  0%   { opacity: 0; }
  3.7% { opacity: 1; } /* 0.5s beúszás */
  33.3% { opacity: 1; } /* 4.5s (0.5 + 4.0) */
  37.0% { opacity: 0; } /* 5.0s (0.5s kiúszás) */
  100% { opacity: 0; }
}

/* AZ ÚJ @keyframes, amit a 2-képes (mobilos) diavetítéshez használunk */
@keyframes crossFadeTwoImages {
  0%     { opacity: 0; }
  5.55%  { opacity: 1; } /* 0.5s beúszás */
  50%    { opacity: 1; } /* 4.5s (0.5 + 4.0) */
  55.55% { opacity: 0; } /* 5.0s (0.5s kiúszás) */
  100%   { opacity: 0; }
}