/* =========================================================
       GRUNDLAGEN
    ========================================================= */

    :root {
      --primary: #23597D;
      --primary-dark: #194761;
      --white: #FFFFFF;
      --text: #17232b;
      --light: #f5f7f8;

      --container: 1500px;
      --radius: 12px;

      --shadow:
        0 12px 35px rgba(0, 0, 0, 0.10);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

      color: var(--text);
      background: var(--white);
      line-height: 1.6;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
    }

    button,
    input {
      font: inherit;
    }

    .container {
      width: min(
        calc(100% - 40px),
        var(--container)
      );

      margin-inline: auto;
    }

    /* =========================================================
       HERO / INTRO
    ========================================================= */

    .hero {
      padding: 40px 0 60px;
      background: var(--light);
    }

    .hero-intro {
      margin-bottom: 30px;
    }

    .hero-intro .logo {
      background: url("/img/logo.png");
	  width: 52px;
      height: 52px;
      object-fit: contain;
}

    .hero-intro h1 {
      color: var(--primary);

      font-size: clamp(
        1.4rem,
        4vw,
        2.5rem
      );

      line-height: 1.05;
      letter-spacing: -0.035em;

      margin-bottom: 12px;
    }

    .hero-intro p {
      max-width: 760px;

      font-size: 1.1rem;
      color: #4b5961;
    }


    /* =========================================================
       2 × 3 KACHELN
    ========================================================= */

    .intro-grid {
      display: grid;

      grid-template-columns:
        repeat(3, minmax(0, 1fr));

      grid-template-rows:
        repeat(3, minmax(320px, 1fr)) 60px;


      gap: 18px;
    }

    .intro-tile {
      position: relative;

      display: flex;
      align-items: flex-end;

      min-height: 120px;

      padding: 42px;

      overflow: hidden;

      color: var(--white);
      text-decoration: none;

      background-color: var(--primary);

      background-size: cover;
      background-position: center;

      border-radius: 0;

      isolation: isolate;

      box-shadow: var(--shadow);

      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    }

    /*
      Farbiger Overlay:
      Dadurch bleibt der Text auch auf hellen Bildern
      gut lesbar.
    */

    .intro-tile::before {
      content: "";

      position: absolute;
      inset: 0;

      z-index: -1;

      background:
        linear-gradient(
          135deg,
          rgba(35, 89, 125, 0.92),
          rgba(35, 89, 125, 0.55)
        );

      transition:
        background 0.3s ease;
    }

    .intro-tile:hover {
      transform: translateY(-5px);

      box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.18);
    }

    .intro-tile:hover::before {
      background:
        linear-gradient(
          135deg,
          rgba(35, 89, 125, 0.84),
          rgba(35, 89, 125, 0.40)
        );
    }

    .intro-tile h2 {
      position: relative;

      max-width: 90%;

      font-size: 2rem;

      font-weight: 800;
      line-height: 1.05;

      letter-spacing: -0.025em;
    }


    /* Bilder */

    .tile-members {
      background-image:
        url("/img/mitgliederverwaltung.jpg");
    }

    .tile-fussball {
      background-image:
        url("/img/fussball-erwachsene.jpg");
    }

    .tile-fussball-junioren {
      background-image:
        url("/img/fussball-junioren.jpg");
    }

    .tile-tischtennis {
      background-image:
        url("/img/tischtennis-erwachsenejpg");
    }

    .tile-schiedsrichter {
      background-image:
        url("/img/schiedsrichter.jpg");
    }

    .tile-clubkollektion {
      background-image:
        url("/img/clubkollektion.jpg");
    }

    .tile-tischtennis-junioren {
      background-image:
        url("/img/tischtennis-junioren.jpg");
    }

    .tile-archiv {
        
    }


    /* =========================================================
       CONTENT
    ========================================================= */

    .content-section {
      padding: 80px 0;
    }

    .content-section h2 {
      margin-bottom: 15px;

      color: var(--primary);

      font-size: clamp(
        1.8rem,
        3vw,
        2.5rem
      );

      line-height: 1.1;
    }

    .content-section p {
      max-width: 850px;
      color: #4b5961;
    }


    /* =========================================================
       FOOTER
    ========================================================= */

    .site-footer {
      padding: 45px 0;

      color: var(--primary);
      background: var(--white);
    }

    .footer-inner {
      display: flex;

      align-items: center;
      justify-content: space-between;

      gap: 30px;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;

      list-style: none;
    }

    .footer-links a {
      color: var(--primary);
      text-decoration: none;
      opacity: 0.9;
    }

    .footer-links a:hover {
      opacity: 1;
      text-decoration: underline;
    }


    /* =========================================================
       FOCUS / ACCESSIBILITY
    ========================================================= */

    :focus-visible {
      outline: 3px solid #111;
      outline-offset: 4px;
    }


    /* =========================================================
       TABLET
    ========================================================= */

    @media (max-width: 900px) {

      .main-nav,
      .header-button {
        display: none;
      }

      .menu-toggle {
        display: block;
      }

      .header-inner {
        min-height: 72px;
      }

      .intro-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
      }

      .intro-tile {
        min-height: 120px;
      }

      .footer-inner {
        flex-direction: column;
        align-items: flex-start;
      }
    }


    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 600px) {

      .container {
        width: min(
          calc(100% - 24px),
          var(--container)
        );
      }

      .hero {
        padding: 25px 0 35px;
      }

      .hero-intro {
        margin-bottom: 20px;
      }

      .hero-intro p {
        font-size: 1rem;
      }

      .intro-grid {
        gap: 12px;
      }

      .intro-tile {
        min-height: 210px;
        padding: 25px;

        border-radius: 0px;
      }

      .intro-tile span {
        font-size: 2rem;
      }

      .content-section {
        padding: 55px 0;
      }
    }


    /* =========================================================
       REDUZIERTE BEWEGUNG
    ========================================================= */

    @media (prefers-reduced-motion: reduce) {

      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
      }
    }