/* ============================================================
   BIOS::Collective - Flyer-/PayPal-Seiten (style_flyer.css)
   ------------------------------------------------------------
   Eigenstaendige Bild-/QR-Seiten (Flyer-Poster, PayPal-QR).
   Seit Runde 5 (Note 2223) wird auch general.css eingebunden
   (gemeinsames CSS fuer ALLE Seiten); hier werden dessen
   Basis-Styles (blaue Hauptflaeche, Table-Center-Hack) wieder
   neutralisiert, damit diese beiden Seiten ihr bisheriges
   schlichtes Aussehen (weisser Hintergrund) behalten.
   ============================================================ */

/* Table-Center-Hack aus general.css neutralisieren */
html {
    display: block;
    margin: 0;
}

html, body {
    height: auto;
    width: 100%;
}

body {
    margin: 0; /* Default-Margin (8px) entfernen, sonst 8px Ueberlauf */
    background-color: #ffffff; /* wie bisher: weisser Hintergrund */
    color: #000000;
    font-family: initial;
    display: block;
    vertical-align: baseline;
}

/* Link wieder in Standard-Optik (blaue Schrift) - general.css
   setzt a { color: white }, was auf weissem Grund unsichtbar waere */
a {
    color: #0000EE;
}

#flyer {
    height: 95vh;
    max-width: 100%;
    width: auto;
}

/* ============================================================
   Flyer-Seite: Link zum naechsten Event (Issue 2, Note 2271).
   Wrapper stapelt Bild und Link IMMER nur untereinander
   (flex-direction: column) - auf Mobile KEIN Zwei-Spalten-Layout.
   ============================================================ */
.flyer-wrap {
    display: flex;
    flex-direction: column; /* Note 2271: Mobile nur untereinander */
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    padding: clamp(12px, 2vw, 28px);
    box-sizing: border-box;
    min-height: 100vh;
    justify-content: center;
}

.flyer-wrap > a {
    display: flex; /* Bild-Link zentriert ausrichten */
    justify-content: center;
    max-width: 100%;
}

/* Flyer-Bild im Wrapper: proportional skalieren (max-height statt
   feste 95vh), damit Bild + Next-Event-Link zusammen sichtbar sind.
   Mobile-Regel (max-width: 800px, width: 100%) greift weiterhin. */
.flyer-wrap #flyer {
    height: auto;
    max-height: 82vh;
    max-width: 100%;
    width: auto;
}

.next-event-link {
    display: inline-block;
    color: #ffffff;
    background-color: rgb(0 1 179); /* BIOS-Blau wie Hauptseiten */
    font-family: OLD_BIOS;
    font-size: clamp(16px, 2.5vw, 26px);
    padding: clamp(10px, 1.5vw, 16px) clamp(20px, 3vw, 36px);
    text-decoration: none;
    border: 2px solid #0000EE;
    text-align: center;
}

.next-event-link:hover {
    background-color: darkred; /* konsistent mit a:hover aus general.css */
    border-color: darkred;
    text-decoration: underline;
}


/* PayPal-Seite: QR-Code wie bisher in 35% Breite anzeigen
   (nicht 95vh wie der Flyer) - Aussehen unveraendert */
body.paypal #flyer {
    height: auto;
    width: 35%;
}
/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
    #flyer {
        height: auto;
        width: 100%;
    }

    /* Mobile (Note 2271): Bild voll breit, Link darunter als grosses
       Touch-Target - alles weiterhin untereinander, keine Spalten. */
    .flyer-wrap #flyer {
        width: 100%;
    }

    .next-event-link {
        width: 100%;
        box-sizing: border-box;
    }
  }