<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Irinas Bilder</title>

  <!-- Webfont -->
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700;900&display=swap" rel="stylesheet">

  <style>
    body {
      font-family: 'Nunito', 'Arial Rounded MT Bold', Arial, sans-serif;
      margin: 0;
      background-color: #000;
      color: #f7f7c0;
    }

    /* --- Kopfbereich mit Banner --- */
    header {
      position: relative;
      background: url('banner3.png') center center / cover no-repeat;
      width: 100%;
      height: 120px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      box-sizing: border-box;
      padding: 0 2rem 0.5rem 2rem;
    }

    header::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 60%);
      z-index: 0;
    }

    header h1 {
      font-size: 3.4rem;
      font-weight: 900;
      color: #fffecb;
      margin: 0;
      text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.9);
      position: relative;
      z-index: 1;
      letter-spacing: 3px;
      align-self: flex-end;
    }

    nav {
      position: absolute;
      top: 50%;
      right: 2rem;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.4rem;
      z-index: 1;
    }

    nav a {
      color: #fffecb;
      text-decoration: none;
      font-size: 1.6rem;
      font-weight: 700;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
      transition: transform 0.2s, color 0.3s;
    }

    nav a:hover {
      color: #ffe866;
      transform: scale(1.05);
    }

    section {
      max-width: 1000px;
      margin: 2rem auto;
      padding: 1rem 2rem;
      background-color: #111;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(255,255,255,0.05);
      line-height: 1.7;
    }

    h2 {
      color: #ffe866;
      border-left: 5px solid #ffe866;
      padding-left: 0.5rem;
    }

    p {
      margin-bottom: 1rem;
    }

    /* --- Startseite mit Bild rechts --- */
    .start-content {
      display: flex;
      align-items: flex-start;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .start-text {
      flex: 2;
    }

    .start-image {
      flex: 1;
      text-align: center;
    }

    .start-image img {
      width: 100%;
      max-width: 350px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(255, 255, 204, 0.3);
    }

    /* --- Galerie --- */
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }

    .gallery img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 8px;
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .gallery img:hover {
      transform: scale(1.05);
      box-shadow: 0 0 10px #ffe866;
    }

    footer {
      text-align: center;
      padding: 1rem;
      background-color: #111;
      color: #f7f7c0;
      border-top: 1px solid #333;
      font-size: 0.9rem;
    }

    footer a {
      color: #ffe866;
      text-decoration: none;
    }

    footer a:hover {
      text-decoration: underline;
    }

    /* --- Responsive --- */
    @media (max-width: 700px) {
      header {
        height: 100px;
        padding: 0 1rem 0.4rem 1rem;
      }
      header h1 {
        font-size: 2rem;
      }
      nav {
        right: 1rem;
      }
      nav a {
        font-size: 1.1rem;
      }
      .start-content {
        flex-direction: column;
        align-items: center;
      }
    }
  </style>

  <script>
    function showPage(id) {
      document.querySelectorAll('section').forEach(sec => sec.style.display = 'none');
      document.getElementById(id).style.display = 'block';
    }
    window.onload = () => showPage('start');
  </script>
</head>

<body>

  <header>
    <h1>IRINAS BILDER</h1>
    <nav>
      <a href="index.html">start</a>
      <a href="galerie.html">galerie</a>
      <a href="index.html#ueber">über mich</a>
    </nav>
  </header>

  <section id="start">
    <div class="start-content">
      <div class="start-text">
        <p>
          Willkommen in meiner kleinen Galerie!<br>
          Ich male mit Aquarell und Pastellkreide.<br>
          Das Malen ist für mich eine Art Meditation und Entspannung.<br>
          Ich freue mich auf meine Bilder – wenn sie gelingen ;) <br>
          und ich genieße den Weg zum Ergebnis :)<br>
          . . . . . . . . . .
        </p>
        <p>
          Добро пожаловать в мою маленькую галерею!<br>
          Я рисую акварелью и пастельными мелками.<br>
          Для меня это своего рода медитация и отдых.<br>
          Меня радуют мои картины — когда они удаются ;) <br>
          но создание приносит мне не меньше удовольствия, чем результат :) <br>
        </p>
      </div>
      <div class="start-image">
        <img src="regal-i.jpg" alt="Kirschblüten-Gemälde">
      </div>
    </div>
  </section>

  <section id="galerie" style="display:none;">
    <h2>Galerie</h2>
    <div class="gallery">
      <img src="https://via.placeholder.com/400x300?text=Bild+1" alt="Bild 1">
      <img src="https://via.placeholder.com/400x300?text=Bild+2" alt="Bild 2">
      <img src="https://via.placeholder.com/400x300?text=Bild+3" alt="Bild 3">
    </div>
  </section>

  <section id="ueber" style="display:none;">
    <h2>Über mich</h2>
    <p>Ich male mit Leidenschaft seit vielen Jahren und lasse mich von Farben, Licht und Natur inspirieren.  
    Meine Werke entstehen in Aquarell, Pastell und Mischtechniken.</p>
  </section>

  <footer>
    © 2025 Irinas Bilder · <a href="#">Impressum</a>
  </footer>

</body>
</html>