/* =========================================================
   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;
}

/* Deutsche Trennung statt harter Wortbrüche. Ohne das brach
   "Gelsenkirchen" in schmalen Karten zu "Gelsenkirch|en".
   Greift nur mit lang="de" am <html> -- ist gesetzt. */
h1, h2, h3, h4, p, li {
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* E-Mail-Adressen sind keine Fließtextwörter -- nicht silbentrennen. */
a[href^="mailto:"] {
    hyphens: manual;
    -webkit-hyphens: manual;
}

/* Der Footer setzt auf die Adresse Tailwinds break-all
   (word-break: break-all). Das trennt stur nach Zeichen und ergab
   "info@fenerbahce-gelsenkirchen.d | e" -- die Adresse passt in
   Wahrheit fast genau in die Karte. Etwas kleinere Schrift plus
   Umbruch nur an sinnvollen Stellen loest das. */
a[href^="mailto:"].break-all,
a[href^="mailto:"] .break-all {
    word-break: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 420px) {
    a[href^="mailto:"].break-all,
    a[href^="mailto:"] .break-all {
        font-size: 0.8125rem;
        letter-spacing: -0.01em;
    }
}

/* ---------------------------------------------------------
   6) Abstand zum fixierten Header

   #mainHeader ist position:fixed mit top:1rem und ca. 68-74px
   Höhe, endet also bei rund 90px. Seiten ohne eigenen Hero
   schoben ihre Überschrift darunter.
   --------------------------------------------------------- */
:root {
    --gefb-header-space: 6.5rem;
}

/* Sprungmarken landen nicht mehr unter dem Header */
html {
    scroll-padding-top: var(--gefb-header-space);
}

/* Seitenkopf ohne Vollbild-Hero (z.B. kontakt.php) */
.gefb-page-hero {
    padding-top: calc(var(--gefb-header-space) + 1.5rem);
}

/* ---------------------------------------------------------
   7) Rechtstexte: agb.php / datenschutz.php / impressum.php

   Diese Seiten benutzen .page-header und .page-content --
   beides existiert im kompilierten style.css NICHT (0 Treffer).
   Die Seiten waren daher voellig ungestylt: schwarze Serifen-
   Ueberschrift oben links, zur Haelfte hinter dem Header.

   .page-content wird bewusst nur als direkter Nachbar von
   .page-header angesprochen, damit kontakt.php -- das dieselbe
   Klasse zusaetzlich zu echten Tailwind-Utilities traegt --
   keine doppelten Abstaende bekommt.
   --------------------------------------------------------- */
.page-header {
    padding: calc(var(--gefb-header-space) + 2rem) 1.25rem 2.5rem;
    text-align: center;
    background: linear-gradient(to bottom, #f3f4f6, #f9fafb);
    border-bottom: 1px solid #e5e7eb;
}

.page-header h1 {
    margin: 0 auto;
    max-width: 60rem;
    color: #002749;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-size: clamp(2rem, 7vw, 3rem);
}

/* Gelber Balken wie auf den uebrigen Seiten */
.page-header h1::after {
    content: "";
    display: block;
    width: 6rem;
    height: 0.375rem;
    margin: 1.25rem auto 0;
    border-radius: 999px;
    background: #ffed00;
}

.page-header + .page-content {
    max-width: 48rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
    color: #374151;
    font-size: 1.0625rem;
    line-height: 1.75;
}

.page-header + .page-content > * + * { margin-top: 1.15em; }

.page-header + .page-content h2 {
    margin-top: 2em;
    color: #002749;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

.page-header + .page-content a {
    color: #0b3161;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Heller Seitenhintergrund, damit der dunkle Footer sauber absetzt */
body:has(> .page-header) {
    background: #f9fafb;
}

/* ---------------------------------------------------------
   8) Shop-Karten auf schmalen Screens

   Im 2-Spalten-Raster bleiben bei 375px nur ca. 123px
   Inhaltsbreite. Preis (text-2xl) und der 40px-Button passten
   nicht nebeneinander: der Preis brach auf zwei Zeilen um, der
   Button wurde auf 24px zusammengequetscht.
   --------------------------------------------------------- */
@media (max-width: 480px) {
    #shopGrid .text-2xl {
        font-size: 1.25rem;
        line-height: 1.2;
    }
    #shopGrid > div > div:last-child { padding: 1rem; }
}

/* Preis nie umbrechen, Button nie schrumpfen -- beides
   unabhaengig von der Breite */
#shopGrid .text-2xl { white-space: nowrap; }
#shopGrid button { flex-shrink: 0; }

/* ---------------------------------------------------------
   9) Dekorative Wasserzeichen-Logos einfangen

   satzung.php und kontakt.php legen ein 384px grosses Logo
   (w-96 h-96) absolut positioniert in den Seitenkopf. Auf
   Screens <=414px ragte es aus dem Container heraus.
   --------------------------------------------------------- */
@media (max-width: 640px) {
    .page-header img.w-96,
    section img.w-96 {
        width: 16rem;
        height: 16rem;
    }
}

/* ---------------------------------------------------------
   10) Touch-Ziele vergroessern (WCAG 2.5.8: min. 24px)
   --------------------------------------------------------- */
@media (max-width: 767px) {
    /* Checkbox der Datenschutz-Zustimmung war 13x16px */
    input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
    }
    /* Textlinks in Absaetzen bekommen mehr vertikale Trefferflaeche */
    .page-header + .page-content a,
    label a {
        display: inline-block;
        padding-block: 0.25rem;
    }
}