/**
 * Jonny B GmbH – Responsive CSS (Mobile First)
 *
 * Hier nur noch komponentenübergreifende Anpassungen
 * die nicht direkt in layout.css oder gallery.css gehören.
 *
 * Alle Breakpoints verwenden min-width (Mobile First):
 *   sm:  600px
 *   md:  900px
 *   lg: 1280px
 *   xl: 1400px
 */

/* --------------------------------------------------------
 * Typografie – wächst mit dem Viewport
 * -------------------------------------------------------- */

/* Mobil: kompaktere Überschriften */
h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl);  }
h3 { font-size: var(--font-size-lg);  }

@media (min-width: 600px) {
    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
}

@media (min-width: 900px) {
    h1 { font-size: var(--font-size-4xl); }
}

/* --------------------------------------------------------
 * Galerie – Mobil: 1 Spalte → wächst
 * -------------------------------------------------------- */
.gallery {
    max-width:  var(--container-max);
    margin:     0 auto;
    padding:    0 var(--container-pad) var(--space-10);
    display:    grid;
    grid-template-columns: 1fr;             /* Mobil: 1 Spalte */
    gap:        var(--gallery-gap);
}

@media (min-width: 600px) {
    .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1400px) {
    .gallery { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------
 * Cookie-Banner – Mobil: gestapelt
 * -------------------------------------------------------- */
.cookie-banner__inner {
    flex-direction: column;
    align-items:    stretch;
    gap:            var(--space-3);
}

.cookie-banner__btn {
    width: 100%;
}

@media (min-width: 600px) {
    .cookie-banner__inner {
        flex-direction: row;
        align-items:    center;
    }

    .cookie-banner__btn {
        width: auto;
        white-space: nowrap;
    }
}

/* --------------------------------------------------------
 * Fehlerseite
 * -------------------------------------------------------- */
.error-page {
    padding: var(--space-8) var(--container-pad);
    margin:  var(--space-8) auto;
}

/* --------------------------------------------------------
 * Text-Seiten (Impressum, Datenschutz)
 * -------------------------------------------------------- */
.text-page {
    padding: var(--space-6) var(--container-pad);
}

@media (min-width: 900px) {
    .text-page {
        max-width: 800px;
        margin:    0 auto;
        padding:   var(--space-8) var(--container-pad);
    }
}

/* --------------------------------------------------------
 * Lightbox – Touch-friendly auf Mobil
 * -------------------------------------------------------- */
.lightbox-close { top: var(--space-3); right: var(--space-3); }
.lightbox-prev  { left: var(--space-2); }
.lightbox-next  { right: var(--space-2); }

@media (min-width: 600px) {
    .lightbox-close { top: -16px; right: -16px; }
    .lightbox-prev  { left: -16px; }
    .lightbox-next  { right: -16px; }
}

@media (min-width: 900px) {
    .lightbox-close { top: -22px; right: -22px; }
    .lightbox-prev  { left: -22px; }
    .lightbox-next  { right: -22px; }
}