/* =========================================================
   GeFB – Responsive- & Darstellungs-Korrekturen (Mobile First)

   WICHTIG: Auf dem Server existiert kein Tailwind-Build
   (kein package.json / node_modules). assets/css/style.css ist ein
   fertig kompiliertes Artefakt. Neue Tailwind-Klassen im Markup
   greifen deshalb NICHT. Alles hier ist bewusst reines CSS.

   Diese Datei ersetzt Utilities, die im Markup benutzt werden,
   aber im kompilierten style.css fehlen, und behebt Layoutprobleme
   auf kleinen Screens.
   ========================================================= */

/* ---------------------------------------------------------
   0) Kein horizontales Scrollen auf Mobilgeräten
   --------------------------------------------------------- */
body {
    overflow-x: hidden;
}

/* ---------------------------------------------------------
   1) Fehlende Utilities aus dem Markup nachbilden
   --------------------------------------------------------- */

/* Schriftart (font-inter fehlt im Build; Preflight setzt Inter bereits,
   hier nur zur Sicherheit für Elemente mit expliziter Klasse) */
.font-inter {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

/* Gelbe Glow-Schatten (arbitrary values fehlen im Build) */
.shadow-\[0_0_30px_rgba\(255\,237\,0\,0\.15\)\] {
    box-shadow: 0 0 30px rgba(255, 237, 0, .15);
}
.shadow-\[0_0_40px_rgba\(255\,237\,0\,0\.15\)\] {
    box-shadow: 0 0 40px rgba(255, 237, 0, .15);
}
.shadow-\[0_10px_30px_rgba\(255\,237\,0\,0\.2\)\] {
    box-shadow: 0 10px 30px rgba(255, 237, 0, .2);
}
.hover\:shadow-\[0_0_20px_rgba\(255\,237\,0\,0\.4\)\]:hover {
    box-shadow: 0 0 20px rgba(255, 237, 0, .4);
}

/* Animationen, die im Markup referenziert werden */
.animate-spin-slow {
    animation: gefbSpinSlow 8s linear infinite;
}
@keyframes gefbSpinSlow {
    to { transform: rotate(360deg); }
}

.animate-fade-in-up {
    animation: gefbFadeInUp .6s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes gefbFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dezente Scrollbar in Modals (custom-scrollbar fehlt im Build) */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 237, 0, .45) transparent;
    -webkit-overflow-scrolling: touch;
}
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 237, 0, .4);
    border-radius: 999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 237, 0, .7); }

/* Ersatz für das fehlende Typography-Plugin (prose / prose-invert / prose-lg)
   -> Nachrichten-Modal war ohne Absatzabstände und Bildbegrenzung */
#newsModalContent {
    font-size: 1rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}
#newsModalContent > * + * { margin-top: 1.1em; }
#newsModalContent p { margin: 0; }
#newsModalContent h1,
#newsModalContent h2,
#newsModalContent h3,
#newsModalContent h4 {
    color: #fff;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 1.6em;
}
#newsModalContent h1 { font-size: 1.5rem; }
#newsModalContent h2 { font-size: 1.3rem; }
#newsModalContent h3 { font-size: 1.15rem; }
#newsModalContent a {
    color: #ffed00;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#newsModalContent ul,
#newsModalContent ol { padding-left: 1.4em; }
#newsModalContent ul { list-style: disc; }
#newsModalContent ol { list-style: decimal; }
#newsModalContent li + li { margin-top: .4em; }
#newsModalContent img,
#newsModalContent video,
#newsModalContent iframe {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: .75rem;
}
#newsModalContent blockquote {
    border-left: 3px solid #ffed00;
    padding-left: 1em;
    color: #d1d5db;
    font-style: italic;
}
#newsModalContent table { display: block; width: 100%; overflow-x: auto; }

@media (min-width: 768px) {
    #newsModalContent { font-size: 1.125rem; }
}

/* Eingebettete Karte/Video mit festem Seitenverhältnis
   (aspect-w-16 / aspect-h-9 fehlen im Build) */
.gefb-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.gefb-embed > iframe,
.gefb-embed > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------------------------------------------------------
   2) Mobiles Menü: darf auf niedrigen Displays scrollen
      (vorher konnten Links unten abgeschnitten werden)
   --------------------------------------------------------- */
#mobileMenu {
    justify-content: flex-start;
    padding: 5.5rem 1.5rem 3rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
#mobileMenu > * { flex-shrink: 0; }

/* Auf niedrigen Screens kompakter */
@media (max-height: 720px) {
    #mobileMenu { gap: 0; }
    #mobileMenu > * + * { margin-top: 1.25rem !important; }
    #mobileMenu img { height: 4.5rem; }
    #mobileMenu a[href] { font-size: 1.875rem; }
}

/* Ab mittlerer Höhe wieder zentriert */
@media (min-height: 721px) {
    #mobileMenu {
        justify-content: center;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* ---------------------------------------------------------
   3) Kleine Screens: Header kompakter, damit nichts umbricht
   --------------------------------------------------------- */
@media (max-width: 380px) {
    #mainHeader > div > div {
        padding-left: 1rem;
        padding-right: 0.75rem;
        gap: 0.5rem;
    }
}

/* ---------------------------------------------------------
   4) Horizontale Slider: sauberes Snapping + Touch-Scroll
   --------------------------------------------------------- */
#newsItemsContainer,
#homeGalleryGrid,
#boardContainer {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-padding-left: 1rem;
}

/* ---------------------------------------------------------
   5) Lange Wörter/URLs brechen statt zu überlaufen
   --------------------------------------------------------- */
h1, h2, h3, h4, p, li, td, a {
    overflow-wrap: break-word;
}