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

  }

  .page-container {
    flex: 1 1 1200px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;

  }

  a:link {
    color: #000000;
    text-decoration: none;
    font-size: 1.2rem;
    font-family: "Noto Sans";
  }

  a[href^="mailto:"] {
    color: #6620f4;
    font-size: 24px;
    ;
    font-weight: 900;
    text-decoration: underline;
  }

  a:visited {
    color: #6b716b;
    /*  */
  }

  a:hover {
    color: #e41f57;
  }

  a:active {

    color: #ffffff;
  }

  body {
    font-family: "Noto Sans", Helvetica, sans-serif;
    font-size: clamp(1.3rem, calc(1vw + 0.9rem), 1.8rem);
    background-color: #e4e2f5;
    margin: 0;
    padding: 10px;
    color: #2d2d2dd4;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  header {
    max-height: 300px;
    padding: 0px 0px;
    text-align: center;
    background: url("Logos/punkte-start.png");
    background-color: #f2f1f8;
    border: 0px solid #808080;
    display: flex;
  }

  .box-header {
    flex: 1 1;
    display: flex;
    width: 100%;
    border: 0px solid #3d1abc;
  }

  .nvbar {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #2c3e50;
    /* Moderner, dunkler Blauton */
    padding: 0;
    font-size: clamp(0.875rem, 0.458rem + 1.39vw, 1.8rem);
    width: 100%;
    align-self: flex-start;
    position: sticky;
    top: 0;
    background-color: #b8bbcc;
    box-shadow: 0 2px 5px rgb(189, 180, 237);
    z-index: 1000;
    border-radius: 12px;
    border: none;
    margin-bottom: 0px;
  }

  .nvbar a {
    font-size: clamp(1.1rem, calc(1vw + 0.5rem), 1.5rem);
    /*font-size: clamp(0.875rem, 0.458rem + 1.39vw, 1.8rem);*/
    display: inline-block;
    color: white;
    text-decoration: none;
    border: none;
    /* Fehler korrigiert */
    border-radius: 8px;
    font-family: "Open Sans", Helvetica, sans-serif;
    /*font-size: clamp(1.0rem, calc(1vw + 0.5rem), 1.4rem);
  /* Clamp-Formel angepasst */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
  }

  .nvbar a:hover {
    color: #e41f57;
    background-color: #7b819c;
  }

  /* Grundaufbau für Desktop bleibt gleich */
  .nav-container {
    display: flex;
    justify-content: space-around;
  }

  .nav-item {
    padding: 15px;
    color: white;
    text-decoration: none;
  }

  .nav-toggle {
    display: none;
    /* Versteckt die Checkbox */
  }

  .nav-toggle-label {
    display: none;
    /* Versteckt das Icon auf dem Desktop */
  }

  .content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 0px solid #e50a0a;
    border-radius: 12px;
  }

  .box-container-hg {
    background: url("Logos/punkte-start.png");
    background-color: #f2f1f8;
    display: flex;
    width: 100%;
    border-radius: 12px;
    border: 0px solid #3d1abc;
    max-width: 1200px;
    margin: 20px auto;
    justify-content: center;
    align-items: center;
  }

  .box-container {
    background-color: #f2f1f8;
    display: flex;
    width: 100%;
    border-radius: 12px;
    border: 0px solid #3d1abc;
    max-width: 1200px;
    margin: 20px auto;
    justify-content: center;
    align-items: center;
  }

  .box-container2 {
    background-color: #f2f1f8;
    display: flex;
    width: 100%;
    border-radius: 12px;
    border: 0px solid #3d1abc;
    max-width: 1200px;
    margin: 0 auto;
  }

  .box-container-border {
    background-color: #f2f1f8;
    display: block;
    width: 100%;
    border-radius: 12px;
    border: 0px solid #3d1abc;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
  }

  .boxx {
    flex: 1 1 900px;
    padding: 20px;
    min-height: 1px;
  }

  .box3 {
    flex: 1 1 300px;
    padding: 20px;
    min-height: 10px;
    display: flex;
    flex-direction: column;
    /* Stapelt Bild und Text untereinander */
    align-items: center;
    /* Zentriert Bild und Text horizontal */
    justify-content: flex-end;
    /* Richtet den Inhalt am unteren Rand aus (falls der Container eine feste Höhe hat) */
    text-align: center;
    /* Zentriert den Text zusätzlich */
    margin-top: auto;
  }

  .box3 img {
    width: auto;
    height: 100px;
    margin-top: 10px;
  }

  .box-large {
    flex: 1 1 600px;
    padding: 20px;
    min-height: 150px;
    border: 0px solid #3d1abc;
  }

  .box-small,
  .box-europe {
    flex: 1 1 300px;
    padding: 20px;
    min-height: 100px;
    border: 0px solid #19e70a;
  }

  .box-europe img {
    display: flex;
    justify-content: flex-start;
    height: clamp(75px, 14vw, 200px);
    width: auto;
  }

  .box-small img {
    max-width: 300px;
  }


  .responsive-map-container {
    position: relative;
    display: inline-block;
    width: 100%;

  }

  /* Das Hintergrundbild passt sich flexibel an */
  .map-image {
    width: 100%;
    min-width: 250px;
    height: auto;
    display: block;
  }

  /* Gemeinsame Basis für alle unsichtbaren Klick-Flächen */
  .map-link {
    position: absolute;
    display: block;
    text-decoration: none;
    /* Zum Testen: Ändern Sie rgba auf (255, 0, 0, 0.3), um die Flächen rot zu sehen */
    background-color: rgba(255, 255, 255, 0);
    cursor: pointer;
  }

  /* =================================================================
   BEISPIEL-KOORDINATEN (Bitte an Ihr Logo anpassen!)
   Die Werte bestimmen Position (top/left) und Größe (width/height) 
   ================================================================= */

  /* Bereich 1: Flügelrad (z.B. oben links) */
  .area-1 {
    top: 5%;
    left: 35%;
    width: 20%;
    height: 35%;
  }

  /* Bereich 2: Freundeskreis Eisenbahn Süddeutschland (z.B. mittig) */
  .area-2 {
    top: 50%;
    left: 30%;
    width: 15%;
    height: 35%;
  }

  /* Bereich 3: Schwule Eisenbahnfreunde Hamburg (z.B. unten) */
  .area-3 {
    top: 30%;
    left: 50%;
    width: 15%;
    height: 35%;
  }


  footer {
    background-color: #2c3e50;
    color: white;
    max-height: 100px;
    padding: 20px;
    text-align: center;
    margin-top: auto;
  }

  /* Responsive Anpassungen für Tablets und kleinere Bildschirme */
  @media (max-width: 770px) {

    .responsive-map-container,
    .box-container,
    .box-container2,
    .box-container-hg {
      flex-direction: column;
    }

    .content-area,
    .responsive-map-container,
    .box-europe,
    .box-large,
    .box-small,
    .boxx,
    .box1,
    .box2,
    .box3 {
      flex: 1 1 auto;
      max-width: 100%;

    }
  }

  /* Responsive Anpassungen für Smartphones */
  @media (max-width: 768px) {

    .responsive-map-container,
    .content-area {
      flex-direction: column;
    }

    .box-container2,
    .box-container-hg,
    .content-area,
    .responsive-map-container,
    .box-europe,
    .box-large,
    .box-small,
    .boxx,
    .box1,
    .box2,
    .box3 {
      flex: 1 1 auto;
      max-width: 100%;

    }

    .nav-container {
      display: none;
      /* Versteckt die Links standardmäßig */
      flex-direction: column;
      /* Links untereinander */
      width: 100%;
    }

    /* Wenn die Checkbox aktiv ist, zeige die Links an */
    .nav-toggle:checked~.nav-container {
      display: flex;
    }

    /* Styling für das Hamburger-Icon */
    .nav-toggle-label {
      display: flex;
      align-items: center;
      padding: 15px;
      cursor: pointer;
    }

    /* Drei Striche für das Menü-Icon erzeugen */
    .nav-toggle-label span,
    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
      display: block;
      background: white;
      height: 3px;
      width: 25px;
      position: relative;
    }

    .nav-toggle-label span::before {
      content: '';
      top: -8px;
      left: 0;
      position: absolute;
    }

    .nav-toggle-label span::after {
      content: '';
      bottom: -8px;
      left: 0;
      position: absolute;
    }
  }

  h1 {
    /*font-size: 6rem;*/
    font-size: clamp(2.4rem, calc(4vw + 1rem), 6rem);
    font-weight: 900;
  }

  h2 {
    /*font-size: 3rem;*/
    font-size: clamp(1.8rem, calc(4vw + 1rem), 3rem);
    font-weight: 700;
  }

  h3 {
    font-size: 2rem;
    font-weight: 600;
    display: inline;
  }

  h4 {
    font-size: 1.7rem;
    font-weight: 400;
    margin: 0;
    padding: 0;
    display: flex;
  }

  h5 {
    font-size: 1.5rem;
    font-weight: 300;
    display: inline;
  }

  h6 {
    font-size: 1.2rem;
    font-weight: 600;
  }

  .Impressum {
    font-size: 0.85rem;
    font-weight: 500;
  }

  .containerupd {
    font-size: 0.85rem;
    font-weight: 500;
    border: 0px solid;
    border-radius: 8px;
    background-color: #f2f1f8;
    border-color: #808080;
    display: flex;
  }

  .crossfd3 {
    display: inline-block;
    background-size: cover;
  }

  .crossfd3 img {
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }

  .crossfd3 img:hover {
    transform: translate(20px, 70px) scale(1.5);
  }

  hr {
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, transparent, #c907de, #036de5, #03e58e, #f2fa0d, #e9b109, #fa8282, transparent);
  }

  h4 {
    font-size: 1.7rem;
    font-weight: 400;
  }

  h3 {
    font-size: clamp(1.5rem, calc(4vw + 0.1rem), 2rem);
    font-weight: 600;
  }

  .SVGBG-email {

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M19.5 4h-15A2.5 2.5 0 0 0 2 6.5v11A2.5 2.5 0 0 0 4.5 20h15a2.5 2.5 0 0 0 2.5-2.5v-11A2.5 2.5 0 0 0 19.5 4ZM12 12 4 8.67V6.5c0-.28.22-.5.5-.5h15c.28 0 .5.22.5.5v2.17l-8 3.32Zm0 2.16 8-3.31v6.66a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-6.66l8 3.31Z"/></svg>');
  }

  a:not(.selected):hover .SVGBG-email {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path fill="%23E9070E" d="m3 9 9 4 9.09-4v10.03H3V9z"/><path d="M19.5 4h-15A2.5 2.5 0 0 0 2 6.5v11A2.5 2.5 0 0 0 4.5 20h15a2.5 2.5 0 0 0 2.5-2.5v-11A2.5 2.5 0 0 0 19.5 4ZM12 12 4 8.67V6.5c0-.28.22-.5.5-.5h15c.28 0 .5.22.5.5v2.17l-8 3.32Zm0 2.16 8-3.31v6.66a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-6.66l8 3.31Z"/></svg>');
  }

  .selected .SVGBG-email {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M2 10.02v7.48A2.5 2.5 0 0 0 4.5 20h15a2.5 2.5 0 0 0 2.5-2.5v-7.48l-10 4.14-10-4.14ZM19.5 4h-15A2.5 2.5 0 0 0 2 6.5v1.34l10 4.15 10-4.15V6.5A2.5 2.5 0 0 0 19.5 4Z"/></svg>');
  }

  i[class^=SVGBG-] {
    width: 28px;
    height: 28px;
    background-size: cover;
    display: inline-block;
    vertical-align: top;
    /* Zentriert den Text sauber mittig zum Bild */
    margin-right: 8px;
  }

  .SVGBG-email2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='40px' viewBox='0 -960 960 960' width='40px' fill='%231f1f1f'%3E%3Cpath d='M561.33-522.67h272v-190.66h-272v190.66ZM698-564l-103.33-76v-40l102.66 76L800-680v40l-102 76ZM66.67-120q-27 0-46.84-19.83Q0-159.67 0-186.67v-586.66q0-27 19.83-46.84Q39.67-840 66.67-840h826.66q27 0 46.84 19.83Q960-800.33 960-773.33v586.66q0 27-19.83 46.84Q920.33-120 893.33-120H66.67ZM606-186.67h287.33v-586.66H66.67v586.66h6q43.33-71 113.66-111.83 70.34-40.83 153-40.83 82.67 0 153 40.83Q562.67-257.67 606-186.67ZM424.33-435q35-35 35-85t-35-85q-35-35-85-35t-85 35q-35 35-35 85t35 85q35 35 85 35t85-35ZM156-186.67h366.67q-35.07-40.85-83.04-63.42-47.96-22.58-100.3-22.58-52.33 0-100 22.67-47.66 22.67-83.33 63.33Zm145.17-295.16Q286-497 286-520t15.17-38.17q15.16-15.16 38.16-15.16 23 0 38.17 15.16Q392.67-543 392.67-520t-15.17 38.17q-15.17 15.16-38.17 15.16t-38.16-15.16ZM480-480Z'/%3E%3C/svg%3E");
  }

  .SVGBG-world {
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.88 119.94'%3E%3Ctitle%3Eweb%3C/title%3E%3Cpath d='M70.63,95.17q-2.62,2.52-5.56,5l.54-.09,1.69-.3h0a46.44,46.44,0,0,0,4.54-1.16l.34-.1,1.07,2.29,1.2,2.58-1.07.34a51.79,51.79,0,0,1-5.08,1.3q-2.58.53-5.25.79c-1.78.17-3.59.26-5.42.26s-3.62-.09-5.4-.26-3.52-.44-5.25-.79a47.41,47.41,0,0,1-5-1.26A51.35,51.35,0,0,1,37.13,102L37,102l-.09-.06q-2.34-1-4.55-2.21c-1.53-.82-3-1.72-4.44-2.67a45.3,45.3,0,0,1-4-3c-1.33-1.09-2.59-2.24-3.8-3.44v0a46.1,46.1,0,0,1-3.4-3.73,49.84,49.84,0,0,1-3-4.08A51.23,51.23,0,0,1,11,78.4c-.29-.53-.57-1.07-.84-1.61H63.36a13.65,13.65,0,0,0,.6,3c.09.27.18.55.29.82l.62,1.52H60.33V97.24c2.88-2.4,5.54-4.81,8-7.23.77,1.72,1.56,3.44,2.35,5.16ZM6,65.14,0,41H8.68l2.76,14.72h.19L14.71,41h8.43l3.21,14.59h.18L29.18,41h8.67l-6,24.15H22.45l-3.4-13H18.8l-3.39,13Zm38.73,0L38.74,41h8.67l2.77,14.72h.19L53.45,41h8.43l3.21,14.59h.18L67.91,41h8.68l-6,24.15H61.18l-3.39-13h-.25l-3.4,13Zm38.74,0L77.48,41h8.67l2.77,14.72h.18L92.19,41h8.43l3.21,14.59H104L106.65,41h8.68l-6,24.15H99.92l-3.39-13h-.25l-3.4,13Zm33.12,50.49a3.12,3.12,0,0,1-.9.61l0,0a3.32,3.32,0,0,1-1.05.27,3.2,3.2,0,0,1-1.23-.14,3.09,3.09,0,0,1-1.08-.59l-8.91-7.56-3,7.51a10.46,10.46,0,0,1-.91,1.73,7.39,7.39,0,0,1-1.16,1.35,3.67,3.67,0,0,1-5.76-.63,7.05,7.05,0,0,1-.71-1.25C86.51,103.51,79.32,90.13,74,76.68a2.39,2.39,0,0,1,2.65-3.25c12.89,2.39,29.58,7.83,42.69,11.31,4.07,1.07,4.73,4.66,1.72,7.44a9,9,0,0,1-1.56,1.17c-2.31,1.31-4.65,2.82-6.93,4.21l8.87,7.6a3.2,3.2,0,0,1,.76,1l0,.06a3,3,0,0,1,.3,1.13v0a3.6,3.6,0,0,1-.13,1.18,3.56,3.56,0,0,1-.55,1.08,71.32,71.32,0,0,1-5.17,6Zm-2.29-2.95,4.29-5c-1.89-1.63-9.95-7.91-10.83-9.43a1.84,1.84,0,0,1,.65-2.49c2.8-1.56,6.42-3.74,9.08-5.52a6.18,6.18,0,0,0,.94-.68,3.47,3.47,0,0,0,.58-.67l.12-.23-.24-.14a3.51,3.51,0,0,0-.58-.2L78.42,77.71l16.76,37.76a4.08,4.08,0,0,0,.29.53l.17.22.21-.15a3.06,3.06,0,0,0,.57-.68,5.72,5.72,0,0,0,.52-1c1.26-3.08,2.68-7.28,4.15-10.12l.18-.25a1.83,1.83,0,0,1,2.58-.21l10.49,8.89ZM50.29,100.2a112.82,112.82,0,0,1-9.15-8.66,81.1,81.1,0,0,1-7.72-9.45H19.74c.56.75,1.15,1.47,1.76,2.17.76.88,1.56,1.74,2.39,2.57q1.63,1.64,3.38,3.06a44.79,44.79,0,0,0,3.65,2.71A44.28,44.28,0,0,0,34.86,95q2,1.11,4.26,2l.08,0,.06,0c1.41.59,2.85,1.12,4.31,1.57a42.08,42.08,0,0,0,4.52,1.14c.56.11,1.13.21,1.69.3l.51.08ZM19.68,24H34.21a91.67,91.67,0,0,1,7.58-9.41,123.79,123.79,0,0,1,8.9-8.8l-.77.11c-.63.1-1.25.21-1.86.34h0a46.11,46.11,0,0,0-4.56,1.16,41.55,41.55,0,0,0-4.4,1.63q-2.21.94-4.24,2t-4,2.38a44.79,44.79,0,0,0-3.65,2.71c-1.17.95-2.29,2-3.38,3.06-.83.83-1.63,1.69-2.39,2.57-.62.71-1.22,1.44-1.79,2.2Zm45-18.17q4.89,4.39,8.87,8.76A90.07,90.07,0,0,1,81.12,24h14.5c-.56-.74-1.15-1.47-1.76-2.17-.75-.87-1.56-1.73-2.4-2.57q-1.63-1.63-3.37-3.06a44.2,44.2,0,0,0-3.65-2.71q-1.89-1.27-3.94-2.38T76.24,9.09L76.15,9l0,0c-1.42-.59-2.86-1.12-4.32-1.57A42.69,42.69,0,0,0,67.27,6.3h0C66.63,6.17,66,6.06,65.39,6l-.7-.11ZM47,1.05Q49.58.52,52.25.26C54,.09,55.84,0,57.66,0s3.62.09,5.41.26,3.52.44,5.25.79a48.07,48.07,0,0,1,5,1.27A51.27,51.27,0,0,1,78.2,4.09l.11,0,.09.05Q80.74,5.2,83,6.4h0c1.52.83,3,1.72,4.42,2.66a46.8,46.8,0,0,1,4,3q2,1.63,3.79,3.44l0,0a47.85,47.85,0,0,1,3.4,3.73,49.84,49.84,0,0,1,3,4.08c1,1.42,1.84,2.88,2.66,4.39.29.53.57,1.07.84,1.61h-95c.28-.54.56-1.09.85-1.62.82-1.51,1.71-3,2.64-4.38s1.93-2.74,3-4,2.24-2.6,3.44-3.8l0,0a49.93,49.93,0,0,1,3.73-3.4,50.63,50.63,0,0,1,4.09-3c1.41-1,2.88-1.84,4.38-2.65S35.39,4.85,37,4.17a48.92,48.92,0,0,1,5-1.82A51.79,51.79,0,0,1,47,1.05ZM60.33,9.11V24H74.56a95,95,0,0,0-6.37-7.4q-3.57-3.73-7.86-7.52ZM55,97.24V82.09H40a82.53,82.53,0,0,0,6.67,7.56A112.06,112.06,0,0,0,55,97.24ZM55,24V9.11q-4.29,3.78-7.86,7.52A95,95,0,0,0,40.77,24Z'/%3E%3C/svg%3E");
  }