/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sedan:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&display=swap');
/*colors*/
:root{
  --brand:#2f6bf0;
  --accent:#e64a4a;
  --muted:#6b6b6b;
  --card:#ffffff;
  --bg:#f7f9fc;
  --container-width:1100px;
  --radius:10px;
  --shadow:0 4px 18px rgba(31,41,55,0.04);
  --transition:.28s ease;
  --color-primary: #0073ff;
  --color-white: #e9e9e9;
  --color-black: #141d28;
  --color-black-1: #212b38;
  --color-bg: rgb(156, 156, 156);
  --color-rgb64: rgb(64, 64, 64);
  --color-lred: rgb(218, 88, 28);
  --color-lgreen: rgb(181, 238, 47);
  --color-rgb58: rgb(58, 58, 58);
  --color-rgb86: rgb(86, 86, 86);
  --color-lblue: rgb(33, 133, 255);
}
/*navbar*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{height:100%;}
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg);
  color:#1f2937;
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.logo {
  color: var(--color-white);
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
}
.logo span {
  color: var(--color-primary);
}
.menu-bar {
  background-color: var(--color-black);
  height: auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 4%;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.menu-bar ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.menu-bar ul li {
  /* width: 120px; */
  padding: 10px 30px;
  /* text-align: center; */
  position: relative;
}
.menu-bar ul li a {
  font-size: clamp(16px, 1.2vw, 20px);
  color: var(--color-white);
  text-decoration: none;
  transition: all 0.3s;
}
.menu-bar ul li a:hover {
  color: var(--color-primary);
}
.fas {
  float: right;
  margin-left: 10px;
  padding-top: 3px;
}
.site-header{
  background:#fff;
  border-bottom:1px solid #e6e9ef;
  position:sticky;
  top:0;
  z-index:1000;
}
.container{max-width:var(--container-width);margin:0 auto;padding:0 1rem}
.nav-logo img{height:56px;max-width:100%;display:block;}
.nav-links a{
  color:#333;
  text-decoration:none;
  padding:.5rem 1rem;
  display:inline-block;
  transition:color var(--transition);
}
.nav-links a:hover{color:var(--brand);}

/* mobile menu - hidden by default, reveal by toggling a header class */
.mobile-menu{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition: max-height 350ms ease, opacity 220ms ease;
  border-top:1px solid #eee;
  padding:0 1rem;
}
.site-header.mobile-open .mobile-menu{
  max-height:600px; /* plenty for the links */
  opacity:1;
  padding:.5rem 1rem;
}

/*Google maps*/
div.map {
  width: 100%;
  max-width: 1200px; /* tetszőleges érték a nagy képernyők korlátozásához */
  margin: 1.25rem auto; /* középre igazítás és vertikális távolság */
  padding: 0 1rem; /* oldalsó belső margó, hogy ne érjenek a szélekhez mobilon */
  box-sizing: border-box;
  display: block;
}
p.map {
  text-align: center;
  margin-bottom: 0.5rem;
}
iframe.map {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  max-height: 720px;
  border: 1px solid black;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
}
/*photos*/
 .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    padding: 0.5rem;
    margin-bottom: 10%;
  }
 .image-grid1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  padding: 0.5rem;
  }
 .image-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  padding: 0.5rem;
 }

 .image-container {
  text-align: center;
  margin-bottom: 0.5rem;
  padding: 0.25rem;
  }
  
  .image-container img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  margin: 0;
  border-radius: 8px;
  transition: transform 0.35s ease;
  }
  
  .image-container img:hover {
  transform: scale(1.03);
  }
  
  .image-container p {
  margin: 20% 0 0;
  font-size: 18px;
  color: #333;
  }


/*texts*/
  h1 {
    text-align: center;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    display: flex;
    margin: 2rem 1rem;
  }

  h4.neon {
    	text-shadow: 
	0 0 0.5px rgb(0, 255, 234),
	0 0 3px rgb(0, 255, 128),
	0 0 5px rgb(102, 255, 0);
  }
  
  h1.header{
    text-align: center;
    font-family: Poppins, monospace;
    animation: zoomInHeading 3s infinite;
    margin: 50px;
    text-shadow: 1px 1px 1px rgba(84, 84, 84, 0.85);
  }
  span.lred {
    color: var(--color-lred)
  }
  span.lgreen {
    color: var(--color-lgreen);
  }

 p.ár {
    font-family: Arvo;
    font-weight: bold;
    font-style: italic;
    color: var(--color-rgb86);
 }
 p.Leírás {
    font-family: Mukta;
    color: var(--color-rgb64);
 }
 p.Leírás1 {
  font-family: Mukta;
  color: var(--color-rgb64);
  font-size: 150%;
}

  a {
    text-decoration: none;
    color: inherit;
  }

  body {
    background-color: var(--color-bg);
  }
  ol {
    list-style: none; 
    font-size: 16px;
    padding: 0; 
  }
  ul {
    list-style: none; 
    font-size: 16px;
    padding: 0; 
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1;
  }
  
  li {
    list-style: none;
    margin-bottom: 5px;
  }
  li.language span{
    color:  var(--color-lblue);
  }

  ol.dokumentumok {

    margin-top: 26px;
    font-family: Sedan;
    font-size: 20px;
    width: 100%;
    height: 15%; 
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  li.dokumentumok {
    font-size: 17px;
  }

  .container {    
    margin: 1%;
    display: flex;
    flex-direction: row; /* egysoros elrendezés nagy képernyőn */
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
    gap: 1.5rem;
    background-color: #c8deef;
    padding: 1.25rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  section.dokumentumok {
    margin: 1rem;
    flex: 1 1 30%; /* három oszlop érzet */
    max-width: 33%;
    box-sizing: border-box;
  }

  a {
    transition: opacity 0.30s, text-shadow 0.40s;
    text-decoration: none; 
    color: inherit; 
    
  }
  a:hover {
    opacity: 0.6;
    text-shadow: 2px 3px 5px rgba(92, 92, 92, 0.85);
    text-decoration: none;
  }
/*@ things*/
@media only screen and (max-width: 1370px) {
  .addr_card{
      display: inline-block;
      
  }
  .map{

      width: calc(100% - 70px);
      margin-bottom: 30px;
      min-width:unset;

  }
  .mapi{
      min-width:unset;
  }
  .shop{
      width: calc(100% - 70px);
      margin-bottom: 30px;
      min-width:unset;
  }
  .addr_text{
      margin-top: 30px;
  }

}

@media only screen and (max-width: 1290px) {
  .new_cards{
      grid-template-columns: auto auto auto;
  }
}

@media only screen and (max-width: 950px) {
  .new_cards{
      grid-template-columns: auto auto;
  }
  .landing_text{
      color: black;
      text-shadow: 4px 4px 3px rgba(184, 252, 237, 0.92), -4px -4px 3px rgba(184, 252, 237, 0.92);
      font-style:normal;
      font-weight: 500;
      font-size: 20px;
      width: 80%;
  }
}

@media only screen and (max-width: 650px) {
  .footer .footer_text{
      display: inline-block;
      width: 100%;
  }
  .header2{
      display: none;
  }
  .new_cards{
      grid-template-columns: auto;
  }
  .new_flowers h1{
      font-size: 50px;
  }
  .landing_text h1{
      font-size: 50px;
          
  }
  .header a{
      padding: 4px 5px;
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 3px;
  }
}

/* --- Reszponzív kiegészítések --- */
/* Fluid base font-size és jobb alapértelmezés mobilon */
html {
  font-size: clamp(14px, 1.2vw + 12px, 18px); /* folyékony alapméret */
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body {
  /* ...existing code... */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Központi wrapper, hogy ne legyen túl széles nagy képernyőn */
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Menü és logó - folyékony méretezés, wrap viselkedés */
.menu-bar {
  /* ...existing code... */
  padding: 0.75rem 4%;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.logo {
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
}

/* Menü linkek kisebb méretre */
.menu-bar ul li a {
  font-size: clamp(16px, 1.2vw, 20px);
}

/* Képrácsok: minden grid automatikusan alkalmazkodik */
.image-grid,
.image-grid1,
.image-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  padding: 0.5rem;
}

/* Image container és képek: teljes szélesség, arány megtartva */
.image-container {
  text-align: center;
  margin-bottom: 0.5rem;
  padding: 0.25rem;
}
.image-container img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  margin: 0;
  border-radius: 8px;
  transition: transform 0.35s ease;
}

/* Kisebb nagyítás hover helyett enyhe effekt - mobilon letiltva */
.image-container img:hover {
  transform: scale(1.03);
}
@media (hover: none) {
  .image-container img:hover { transform: none; }
}

/* Google Maps iframe: arányos és responsív */
iframe.map {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  max-height: 720px;
  border: 1px solid black;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Konténer és dokumentum szekciók: max-width és rugalmas viselkedés */
.container {
  margin: 1%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  gap: 1.5rem;
  background-color: #c8deef;
  padding: 1.25rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Headings: folyékony méretezés */
h1 {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  margin: 2rem 1rem;
}

/* Finomhangolások különböző töréspontokra */
@media (max-width: 1200px) {
  .image-grid { grid-template-columns: repeat(3, 1fr); }
  .container { padding: 1rem; }
}

@media (max-width: 900px) {
  .menu-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .menu-bar ul {
    flex-direction: column;
    width: 100%;
  }
  .menu-bar ul li {
    padding: 10px 0;
    width: 100%;
  }
  .logo { margin-bottom: 6px; }

  .image-grid { grid-template-columns: repeat(2, 1fr); }
  section.dokumentumok {
    width: 100%;
    max-width: 900px;
    margin: 0.75rem auto;
    padding: 0 1rem;
  }

  .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 1rem 0;
    background-color: #c8deef;
    border-radius: 0;
  }
}

@media (max-width: 800px) {
  .image-grid { grid-template-columns: repeat(2, 1fr); }
  .image-container img { max-height: 220px; }
}

@media (max-width: 480px) {
  .image-grid { grid-template-columns: 1fr; }
  .menu-bar .logo { font-size: 1.15rem; }
  .menu-bar ul li a { font-size: 16px; }
  .image-container img { max-height: 160px; }
  .container { padding: 0.5rem; }
  h1 { margin: 1rem 0.5rem; }
}

/* Kisebb képernyőkön minimalizáljuk a képmargókat */
@media (max-width: 360px) {
  .image-container img { border-radius: 6px; }
}

/* Ensure the blue container background spans full viewport on narrow screens */
@media (max-width: 900px) {
  .container {
    width: 100%;
    margin: 0; /* remove side margins so background touches edges */
    padding: 1rem 0; /* vertical padding, horizontal handled by children */
    box-sizing: border-box;
    background-color: #c8deef; /* keep background visible */
    border-radius: 0; /* remove rounded corners so it spans edge-to-edge */
  }
  section.dokumentumok {
    margin: 0.75rem auto; /* center each section and remove large lateral margins */
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    padding: 0 1rem;
  }
}

/* --- Főoldal / homepage reszponzív finomítások --- */

/* Hero szekció: képpel + szöveggel kétoszlopról egyoszlopra vált mobilon */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: center;
  width: 100%;
  padding: 1rem 0;
  box-sizing: border-box;
}
.hero .hero-image,
.hero .hero-text {
  width: 100%;
}
.hero img,
.hero .hero-image img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Fő tartalom és oldalsáv rugalmas elrendezése */
.main {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0;
}
.main .content {
  flex: 2 1 60%;
  min-width: 0; /* tördeléshez fontos */
}
.main .sidebar {
  flex: 1 1 32%;
  min-width: 220px;
}

/* Lábléc egyszerűsítése mobilra */
.footer {
  padding: 1rem;
  width: 100%;
  box-sizing: border-box;
}

/* Menü finomhangolás kicsi képernyőn: kisebb padding, sorba rendezés */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 0.75rem; padding: 0.75rem 0; }
  .hero img { max-height: 320px; }

  .main { flex-direction: column; gap: 0.75rem; padding: 0.5rem; }
  .main .sidebar { order: 2; width: 100%; min-width: 0; }
  .main .content { order: 1; width: 100%; }

  .menu-bar {
    align-items: flex-start;
    padding: 0.5rem 3%;
  }
  .menu-bar ul {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }
  .menu-bar ul li {
    padding: 8px 12px;
    width: 100%;
  }
}

@media (max-width:900px){
  .wrapper-main{flex-direction:column}
  .menu-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-right:0;border-bottom:1px solid #eee}
  .menu-bar ul{display:none}
  .menu-toggle{display:block}
  .content-area{padding:.75rem 1rem}
  .wrapper-main.menu-open .menu-bar ul{display:block;margin-top:.75rem}
  .wrapper-main.menu-open .menu-bar ul li{padding:.35rem 0}
  .site-footer{position:static}
}

/* Center page headings in the content area (applies to index.html and startseite.html) */
.content-area .header,
.hero h1 {
  text-align: center;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/* Ensure content area has comfortable horizontal padding so images/titles don't touch viewport edge */
.content-area {
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* Small screens: keep headings centered and reduce side padding */
@media (max-width: 520px) {
  .content-area { padding-left: .75rem; padding-right: .75rem; }
  .content-area .header { font-size: 1.25rem; }
}
.menu-bar ul{list-style:none;padding:0;margin:0}
.menu-bar li{margin:0.4rem 0}
.menu-bar a{color:#222;text-decoration:none;font-weight:600}
.menu-bar .language a{font-weight:500;color:#444}

/* menu toggle for small screens */
.menu-toggle{
  display:none;
  position:absolute;
  right:0.5rem;
  top:0.5rem;
  background:transparent;border:0;font-size:1.25rem;
}
.content-area{flex:1;padding:1.25rem 1.5rem}
.header{font-size:1.2rem;margin:0 0 1rem 0;display:flex;align-items:center;gap:.5rem}
.main-block{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;width:100%;box-sizing:border-box}
.card{background:#fff;padding:1rem;border-radius:8px;border:1px solid #eee;max-width:900px;width:100%;box-sizing:border-box;margin-left:auto;margin-right:auto}
.lred{color:#e64a4a}
.lblue{color:var(--accent)}

/* footer */
.site-footer{border-top:2px solid #eee; margin-bottom:0px ; background: #eaf2ff;padding:.75rem 1rem;text-align:center;color:var(--muted);position:sticky;bottom:0}
.footer-note small{color:#0f1724}

/* responsive */
@media (max-width:900px){
  .wrapper-main{flex-direction:column}
  .menu-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-right:0;border-bottom:1px solid #eee}
  .menu-bar ul{display:none}
  .menu-toggle{display:block}
  .content-area{padding:.75rem 1rem}
  .wrapper-main.menu-open .menu-bar ul{display:block;margin-top:.75rem}
  .wrapper-main.menu-open .menu-bar ul li{padding:.35rem 0}
  .site-footer{position:static}
}

/* Center page headings in the content area (applies to index.html and startseite.html) */
.content-area .header,
.hero h1 {
  text-align: center;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/* Ensure content area has comfortable horizontal padding so images/titles don't touch viewport edge */
.content-area {
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* Small screens: keep headings centered and reduce side padding */
@media (max-width: 520px) {
  .content-area { padding-left: .75rem; padding-right: .75rem; }
  .content-area .header { font-size: 1.25rem; }
}