@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

* { box-sizing: border-box; }

body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; background-color: #ffffff; color: #1a1a1a; line-height: 1.6; }
header { background-color: #004080; color: white; text-align: center; padding: 2em 1em; }
header h1 { margin: 0; font-size: 2.5em; }
header p { font-size: 1.2em; margin-top: 0.5em; }
.top-nav { background-color: #003366; position: relative; }
.menu-toggle { display: none; }
.hamburger { display: none; flex-direction: column; cursor: pointer; padding: 10px; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.hamburger span { display: block; width: 30px; height: 4px; background-color: white; margin: 5px 0; border-radius: 2px; transition: 0.3s; }
.top-nav ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.top-nav li { margin: 0; }
.top-nav a { display: block; padding: 1em; color: white; text-decoration: none; transition: background-color 0.3s ease; outline: none; }
.top-nav a:hover, .top-nav a:focus { background-color: #0059b3; }
.hero-banner { position: relative; width: 100%; overflow: hidden; } .hero-banner img { width: 100%; height:auto; display: block; }

main { max-width: 1000px; margin: 2em auto; padding: 0 1em; }
main h2, main h3 { color: #004080; }
.teaser-grid { display: flex; flex-wrap: wrap; gap: 1em; margin-top: 2em; }
.teaser { background-color: #f9f9f9; border-radius: 10px; overflow: hidden; flex: 1 1 30%; display: flex; flex-direction: column; }
.teaser img { width: 100%; height: auto; display: block; }
.teaser-content { padding: 1em; }
.teaser-content h3 { margin-top: 0; }
.teaser-content a { display: inline-block; margin-top: 0.5em; color: #004080; text-decoration: underline; }
.teaser-content a:hover { color: #0059b3; }
footer { background-color: #f2f2f2; color: #333; text-align: center; padding: 1em; font-size: 0.9em; }
footer a { color: #004080; }

@media (max-width: 768px) {
  .teaser-grid { flex-direction: column; }
  .hero-text { bottom: 2%; left: 4%; right: 4%; padding: 0.8em 1em; font-size: 0.95em; }
  .hero-text h2 { font-size: 1.5em; }
  .hero-text p { font-size: 1em; }
  .hamburger { display: flex; }
  .top-nav ul { flex-direction: column; display: none; width: 100%; }
  .menu-toggle:checked ~ ul { display: flex; }
  .top-nav a { text-align: center; border-top: 1px solid rgba(255,255,255,0.2); }
  .top-nav { display: flex; flex-direction: column; align-items: flex-start; }
}