:root { --content-max: 900px; }

* { box-sizing: border-box; }

body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f4f4f4;
  color: #333;
}

/* közös fejléc/lábléc */
header, footer {
  background: #333;
  color: #fff;
  padding: 1rem;
}

/* fejléc sor: balra cím, jobbra nyelvváltó */
.site-header {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.site-title h1 {
  margin: 0 0 .25rem 0;
  color: #fff;
  font-size: 1.6rem;
}
.site-title p { margin: 0; opacity: .9; }

/* nyelvváltó – zászlók jobbra */
.lang-switch { display: flex; gap: .5rem; align-items: center; }
.lang-switch a { display: inline-block; }
.lang-switch img { display: block; width: 56px; height: 39px; }
@media (max-width: 480px) {
  .lang-switch img { width: 42px; height: 29px; }
}

/* breadcrumb */
.breadcrumbs {
  max-width: var(--content-max);
  margin: .5rem auto 0;
  padding: 0 1rem;
  font-size: .95rem;
  color: #666;
}
.breadcrumbs a { color:#007bff; text-decoration:none; }
.breadcrumbs a:hover { text-decoration:underline; }
.breadcrumbs span { color:#999; }

/* fejléc GIF sáv */
.header-gif-wrap { background: #333; }
.header-gif {
  max-width: var(--content-max);
  margin: 0 auto;
  display:flex;
  justify-content:center;
  padding: 0 1rem 1rem;
}
.header-gif img {
  width:100%;
  height:auto;
  max-width: var(--content-max);
  display:block;
}

/* fő tartalomdoboz */
main {
  max-width: var(--content-max);
  margin: 2rem auto;
  padding: 1rem;
  background: #fff;
}

h1 { color: #272; }
h2 { color: #222; margin: 1.25rem 0 .5rem; }

/* kiemelés és alap gomb – projektszínek felülírhatók body osztállyal */
.highlight {
  background: #eef;
  padding: .5rem;
  margin: 1rem 0;
  border-left: 5px solid #007bff;
}
.centered { text-align: center; }
.button {
  display: inline-block;
  background: #007bff;
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
}

/* lábléc szöveg igazítás */
footer p {
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}

/* ====== PROJEKT-TÉMÁK (színek) ====== */
/* komfortindex – mindhárom nyelvnél ugyanaz a téma */
.project-komfortindex header,
.project-komfortindex .header-gif-wrap { background: #2f3747; }
.project-komfortindex .highlight { border-left-color: #0a84ff; }
.project-komfortindex .button { background: #0a84ff; }