div.hinweis,div.fehler{background-color:#B9FFB9;font-weight:bold;display:block;text-align:left;padding:12px;border:2px solid #00ff00;border-radius:7px;margin-bottom:10px;}
div.fehler{background-color:#FEC6C6;border:2px solid #ff0000;}


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

    body
    {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      color: #333333;
      background-color: #f9f9f9;
    }

    .container
    {
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 15px;
    }

    /* --- HEADER & NAVIGATION --- */
    header
    {
      background-color: #ffffff;
      border-bottom: 3px solid #e30613;
      padding: 15px 0;
    }

    .header-flex
    {
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: center;
      text-align: center;
    }

    @media (min-width: 768px)
    {
      .header-flex
      {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
      }
    }

    .logo-img
    {
      display: block;
      height: 45px;
      width: auto;
    }

    .header-contact
    {
      font-size: 14px;
    }

    .header-contact a
    {
      color: #111111;
      text-decoration: none;
      font-weight: bold;
    }

    /* --- HERO SECTION --- */
    .hero
    {
      background-color: #333333;
      color: #ffffff;
      padding: 40px 15px;
      text-align: center;
    }

    @media (min-width: 768px)
    {
      .hero
      {
        padding: 60px 0;
      }
    }

    .hero h1
    {
      font-size: 28px;
      line-height: 1.2;
      margin-bottom: 20px;
      color: #ffffff;
    }

    @media (min-width: 768px)
    {
      .hero h1
      {
        font-size: 40px;
      }
    }

    .hero h1 span
    {
      color: #e30613;
    }

    .hero p
    {
      font-size: 16px;
      max-width: 800px;
      margin: 0 auto;
      color: #cccccc;
    }

    @media (min-width: 768px)
    {
      .hero p
      {
        font-size: 18px;
      }
    }

    /* --- MAIN CONTENT SECTIONS --- */
    main
    {
      padding: 20px 0;
    }

    @media (min-width: 768px)
    {
      main
      {
        padding: 40px 0;
      }
    }

    section
    {
      background: #ffffff;
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 4px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    @media (min-width: 768px)
    {
      section
      {
        padding: 30px;
        margin-bottom: 30px;
      }
    }

    h2
    {
      font-size: 22px;
      color: #111111;
      margin-bottom: 15px;
      border-left: 4px solid #e30613;
      padding-left: 12px;
    }

    @media (min-width: 768px)
    {
      h2
      {
        font-size: 26px;
        margin-bottom: 20px;
        padding-left: 15px;
      }
    }

    p
    {
      margin-bottom: 15px;
    }

    .grid-2
    {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: 15px;
    }

    @media (min-width: 768px)
    {
      .grid-2
      {
        grid-template-columns: 1fr 1fr;
        grid-gap: 30px;
      }
    }

    ul.check-list
    {
      list-style: none;
      margin-bottom: 15px;
    }

    ul.check-list li
    {
      position: relative;
      padding-left: 25px;
      margin-bottom: 12px;
    }

    ul.check-list li::before
    {
      content: "✓";
      position: absolute;
      left: 0;
      color: #e30613;
      font-weight: bold;
    }

    /* --- IN-CONTENT CTA BUTTONS --- */
    .content-cta-container
    {
      margin-top: 25px;
      text-align: left;
    }

    .section-cta-btn
    {
      display: inline-block;
      background-color: #e30613;
      color: #ffffff;
      text-decoration: none;
      padding: 12px 25px;
      font-size: 16px;
      font-weight: bold;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(227, 6, 19, 0.2);
      transition: background-color 0.2s ease, transform 0.1s ease;
      text-align: center;
    }

    .section-cta-btn:hover
    {
      background-color: #bd050f;
    }

    .section-cta-btn:active
    {
      transform: scale(0.98);
    }

    @media (max-width: 768px)
    {
      .section-cta-btn
      {
        display: block;
        width: 100%;
      }
    }

    /* --- SLIDESHOW / HORIZONTALES AKKORDEON STYLES --- */
    .slideshow-wrapper
    {
      position: relative;
      margin: 20px 0;
    }

    .slideshow-container
    {
      display: flex;
      overflow-x: auto;
      scroll-behavior: smooth;
      gap: 15px;
      padding: 10px 5px;
      scrollbar-width: none; /* Firefox */
    }

    .slideshow-container::-webkit-scrollbar
    {
      display: none; /* Chrome, Safari, Opera */
    }

    .slideshow-item
    {
      flex: 0 0 75%; /* Mobile-First: Größteil sichtbar, Rest ragt rein */
      max-width: 280px;
      transition: transform 0.3s ease, flex 0.3s ease;
    }

    @media (min-width: 768px)
    {
      .slideshow-item
      {
        flex: 0 0 calc(25% - 12px); /* Desktop: Zeigt 4 Elemente standardmäßig */
      }

      /* Sanfter Akkordeon-Effekt im Desktop-Modus bei Hover */
      .slideshow-container:hover .slideshow-item:not(:hover)
      {
        opacity: 0.7;
        transform: scale(0.98);
      }
    }

    .slideshow-item:hover
    {
      transform: scale(1.03);
    }

    .slideshow-item img
    {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 4px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.1);
      display: block;
      cursor: pointer;
    }

    /* Navigations-Pfeile */
    .slide-arrow
    {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(223, 6, 19, 0.85);
      color: #ffffff;
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      transition: background-color 0.2s;
    }

    .slide-arrow:hover
    {
      background-color: rgba(189, 5, 15, 1);
    }

    .arrow-left
    {
      left: -15px;
    }

    .arrow-right
    {
      right: -15px;
    }

    @media (max-width: 768px)
    {
      .slide-arrow
      {
        display: none; /* Auf Smartphones wischt man intuitiv mit dem Daumen */
      }
    }

    /* --- IMAGE LIGHTBOX OVERLAY --- */
    .image-lightbox
    {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      z-index: 2000;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 20px;
    }

    .image-lightbox.active
    {
      display: flex;
    }

    .lightbox-img
    {
      max-width: 95%;
      max-height: 80vh;
      object-fit: contain;
      border-radius: 4px;
      box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    }

    .lightbox-caption
    {
      color: #ffffff;
      margin-top: 15px;
      font-size: 16px;
      text-align: center;
      background: rgba(227, 6, 19, 0.8);
      padding: 6px 16px;
      border-radius: 4px;
      font-weight: 600;
    }

    /* --- FOOTER & KONTAKT-DATEN --- */
    footer
    {
      background-color: #1a1a1a;
      color: #ffffff;
      padding: 30px 15px;
      font-size: 14px;
    }

    @media (min-width: 768px)
    {
      footer
      {
        padding: 40px 0;
      }
    }

    .footer-grid
    {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: 25px;
    }

    @media (min-width: 768px)
    {
      .footer-grid
      {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }

    footer h3
    {
      color: #e30613;
      margin-bottom: 12px;
    }

    footer p, footer a
    {
      color: #bbbbbb;
      text-decoration: none;
    }

    footer a:hover
    {
      color: #ffffff;
    }
    footer a {text-decoration:underline;}

    /* --- STICKY CALL TO ACTION (SIDEBAR) WITH BLINK ANIMATION --- */
    .sticky-cta
    {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 999;
      animation: blink-animation 0.4s infinite alternate;
    }

    @keyframes blink-animation
    {
      0%
      {
        opacity: 1.0;
      }
      100%
      {
        opacity: 0.2;
      }
    }

    .cta-button
    {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      background-color: #e30613;
      color: #ffffff;
      text-decoration: none;
      padding: 15px 12px;
      font-size: 12px;
      font-weight: bold;
      writing-mode: vertical-rl;
      letter-spacing: 1px;
      border-radius: 4px 0 0 4px;
      cursor: pointer;
      box-shadow: -2px 2px 10px rgba(0,0,0,0.2);
      transition: background-color 0.2s ease;
    }

    @media (min-width: 768px)
    {
      .cta-button
      {
        padding: 20px 15px;
        font-size: 14px;
      }
    }

    .cta-button:hover
    {
      background-color: #bd050f;
    }

    /* --- MODAL DIALOG (FORMULAR) --- */
    .modal-overlay
    {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 1000;
      padding: 10px;
      justify-content: center;
      align-items: center;
    }

    .modal-overlay.active
    {
      display: flex;
    }

    .modal-content
    {
      background-color: #ffffff;
      padding: 20px;
      border-radius: 6px;
      width: 100%;
      max-width: 500px;
      position: relative;
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
      max-height: 95vh;
      overflow-y: auto;
    }

    @media (min-width: 768px)
    {
      .modal-content
      {
        padding: 30px;
      }
    }

    .modal-close
    {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      background: none;
      border: none;
      cursor: pointer;
      color: #666666;
    }

    .modal-content h3
    {
      margin-bottom: 10px;
      color: #111111;
      font-size: 22px;
      padding-right: 20px;
    }

    .modal-info-link
    {
      display: inline-block;
      font-size: 14px;
      /* margin-bottom: 20px; */
      color: #e30613;
      text-decoration: none;
      font-weight: bold;
    }

    .modal-info-link:hover
    {
      text-decoration: underline;
    }

    .form-group
    {
      margin-bottom: 15px;
    }

    .form-group label
    {
      display: block;
      margin-bottom: 5px;
      font-weight: 600;
      font-size: 14px;
    }

    .form-group input[type=text],
    .form-group input[type=email],
    .form-group textarea
    {
      width: 100%;
      padding: 10px;
      border: 1px solid #cccccc;
      border-radius: 4px;
      font-family: inherit;
      font-size: 16px;
    }

    #message
    {
      min-height: 100px;
    }

    .form-group textarea
    {
      resize: vertical;
      height: 80px;
    }

    .submit-btn
    {
      background-color: #e30613;
      color: #ffffff;
      border: none;
      padding: 12px 20px;
      font-size: 16px;
      font-weight: bold;
      border-radius: 4px;
      width: 100%;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .submit-btn:hover
    {
      background-color: #bd050f;
    }

    /* --- ANPASSUNG DER PFEILE INNERHALB DER LIGHTBOX --- */
    .image-lightbox .slide-arrow
    {
      /* Positioniert die Pfeile vertikal exakt mittig */
      top: 50%;
      transform: translateY(-50%);
    }

    /* Setzt den linken Pfeil sauber in den sichtbaren Bereich */
    .image-lightbox .arrow-left
    {
      left: 20px;
    }

    /* Setzt den rechten Pfeil sauber in den sichtbaren Bereich */
    .image-lightbox .arrow-right
    {
      right: 20px;
    }

    /* Sorgt dafür, dass die Pfeile auf Mobilgeräten im Popup bedienbar bleiben */
    @media (max-width: 768px)
    {
      .image-lightbox .slide-arrow
      {
        /* Hebt das 'display: none' der normalen Slideshow für das Popup auf */
        display: flex !important;
        /* Macht die Pfeile auf Touchscreens ein Stückchen kleiner */
        width: 35px;
        height: 35px;
        font-size: 14px;
      }
    }