:root {
    --padding-horizontal: 1rem;
    --max-width: 90vw;
}

.contact-button {
      background-color: #1abc9c;
      border: none;
      padding: 20px;
      border-radius: 8px;
      color: #2c3e50;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      min-height: 60px;
      width: 80%;
      transition: background-color 0.3s ease, color 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
 /* Verhindert Text-/Bildauswahl generell im Slider-Bereich und Wrapper */
        #vorbestellung,
        #vorbestellung .slider-wrapper {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-touch-callout: none; /* Verhindert auch Long-Press-Menü auf Touch */
            overflow: hidden; /* Verhindert Überlaufen */
            /* ** NEU: Verhindert Scroll-Kettenreaktion (z.B. Seite scrollt, wenn Slider am Ende) ** */
            overscroll-behavior-y: contain;
            /* touch-action wird dynamisch per JS gesetzt ('none' mobil, 'pan-x' desktop) */
        }

        #vorbestellung h2,
        #vorbestellung .vorbestellung-link,
        #vorbestellung .vorbestellung-link a {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        #sliderTrack img {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-user-drag: none;
            user-drag: none;
            -webkit-touch-callout: none; /* Verhindert Long-Press-Menü (iOS etc.) */
            pointer-events: auto;
            max-width: none;
            /* Rechtsklick wird per JS verhindert (oncontextmenu) */
        }

        .slider-track.dragging {
            cursor: grabbing;
        }
        .slider-track.dragging img {
            pointer-events: none;
        }

   
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; touch-action: manipulation; }
html { height: 100%; }
body {
    margin: 0; font-family: 'Segoe UI', sans-serif; background-color: #2c3e50;
    color: #ecf0f1; line-height: 1.6; overflow-x: hidden;
}
main {
    padding: 1rem var(--outer-spacing); /* Äußerer Abstand hinzugefügt */
}
.section {
    background-color: #1f2d3d; margin: 2rem auto; padding: 2.5rem var(--padding-horizontal);
    max-width: var(--max-width); border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    position: relative; overflow: hidden; 
}

@media (min-width: 1200px) {
    .section {
        max-width: 1000px;
    }
}

#infos {
    margin: 0 auto auto auto;
}

#vorbestellung {
    margin: auto auto 0 auto;
}
.section h2 {
    color: #1abc9c; margin-top: 0; margin-bottom: 1.5rem; text-align: center;
    font-size: clamp(1.6rem, 4vw, 1.8rem); border-bottom: 2px solid #1abc9c; padding-bottom: 0.5rem;
}
.section p, .section li { font-size: 1.05rem; }

.info-flex {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch;
    text-align: center; gap: 1.5rem;
}
.info-box {
    flex: 1 1 180px; background-color: #273849; padding: 1.5rem; border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; justify-content: center;
}
.info-box h3 { margin: 0; font-size: clamp(1.8rem, 5vw, 2rem); color: #1abc9c; }
.info-box p { margin: 0.5rem 0 0; font-size: 1rem; color: #bdc3c7; }
.info-text {
    flex: 2 1 300px; background-color: #273849; padding: 1.5rem; border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); font-size: 1.05rem; color: #ecf0f1;
    text-align: left; display: flex; flex-direction: column; justify-content: center;
}

#news-container {
    max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding-right: 0.5rem;
}
#news-container::-webkit-scrollbar { width: 8px; }
#news-container::-webkit-scrollbar-track { background: #2c3e50; border-radius: 10px; }
#news-container::-webkit-scrollbar-thumb { background-color: #1abc9c; border-radius: 10px; }
.news-item {
    background-color: #273849; padding: 1.2rem 1.5rem; border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25); font-size: 1rem; transition: background 0.2s;
}
.news-item:hover { background-color: #2d4158; }

.slider-wrapper {
    overflow: hidden; margin-top: 2rem; position: relative; 
    transition: height 0.3s ease-out; user-select: none; touch-action: none; /* Verhindert das Scrollen der gesamten Seite auf Touch-Geräten */
}
.slider-track {
    display: flex; flex-wrap: nowrap; gap: 1.5rem; position: relative; align-items: center;
    will-change: transform; cursor: grab; transform: translate(0px, 0px); user-select: none;
}
.slider-track.dragging { cursor: grabbing; }
.slider-track img {
    flex-shrink: 0; display: block; width: auto; height: auto; max-height: 300px; max-width: none;
    border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.35); user-select: none; -webkit-user-drag: none;
}

@media (max-width: 768px) {
    .section { padding: 2rem var(--padding-horizontal); }
    .info-flex { flex-direction: column; }
    .info-text { text-align: center; }
    /* Reduziertes vertikales Padding für Info-Boxen auf Mobile */
    .info-box, .info-text {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .slider-wrapper { min-height: 150px; }
    .slider-track { gap: 1rem; }
    .slider-track img { max-height: 250px; max-width: 90%; margin-left: auto; margin-right: auto; }
}

 /* Verhindert Text-/Bildauswahl generell im Slider-Bereich und Wrapper */
        #vorbestellung, /* Wichtig: Auch auf dem gesamten Abschnitt anwenden */
        #vorbestellung .slider-wrapper {
            user-select: none; /* Standard */
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE 10+ */
            -webkit-touch-callout: none; /* Verhindert iOS Kontextmenü bei langem Druck */
            /* touch-action wird dynamisch per JS gesetzt: pan-y mobil, pan-x desktop */
        }

        /* Verhindert Textauswahl auf Überschrift und Link */
        #vorbestellung h2,
        #vorbestellung .vorbestellung-link,
        #vorbestellung .vorbestellung-link a {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        /* Verhindert Bildauswahl und natives Dragging */
        #sliderTrack img {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-user-drag: none; /* Verhindert natives Bild-Ziehen in Webkit */
            user-drag: none; /* Standard für natives Bild-Ziehen */
            -webkit-touch-callout: none; /* Doppelt sicher für iOS */
            pointer-events: auto; /* Wichtig, damit Klicks auf Bilder funktionieren, wenn *nicht* gedraggt wird */
            /* Verhindert, dass Browser das Bild als Ziel für Drag&Drop anzeigt */
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
        }

         /* Verhindert Interaktion mit Bildern WÄHREND des Ziehens */
        .slider-track.dragging {
            cursor: grabbing; /* Visuelles Feedback */
        }
        .slider-track.dragging img {
            pointer-events: none; /* Verhindert Klicks/etc. auf Bilder *während* des aktiven Ziehens */
        }

        /* Korrekte touch-action Initialisierung für mobile (vertikal) */
        #vorbestellung .slider-wrapper {
             touch-action: pan-y; /* Standard für Mobile: Nur vertikales Panning erlauben */
        }

        /* Spezifische Anpassung für horizontalen Desktop-Slider */
        @media (min-width: 769px) {
             #vorbestellung .slider-wrapper {
                 touch-action: pan-x; /* Desktop: Nur horizontales Panning erlauben */
             }
        }


.error-message {
    display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100px;
    color: #e74c3c; padding: 1rem; font-size: 1rem; text-align: center;
}
.vorbestellung-link a { color: #1abc9c; text-decoration: none; font-weight: bold; transition: color 0.2s; }
.vorbestellung-link a:hover { color: #1dd2af; text-decoration: underline; }