/* ==========================================================
SeaColors Gallery 3.0
Premium Gallery
Module 1
(korrigierte Version - Masonry-Fix)
==========================================================*/
/**********************
Variables
**********************/
:root{
--sea-dark:#031826;
--sea-blue:#0d3c57;
--sea-light:#4bb7d8;
--sea-white:#ffffff;
--sea-sand:#f6f8fb;
--radius:24px;
--shadow-small:
0 8px 20px rgba(0,0,0,.08);
--shadow-large:
0 25px 60px rgba(0,0,0,.18);
}
/**********************
Background
**********************/
body{
background:
linear-gradient(
180deg,
#031826 0%,
#08324d 30%,
#0f5678 55%,
#eef5f9 100%
);
}
/**********************
Gallery Wrapper
**********************/
#galleryWrapper{
/* Volle Bildschirmbreite statt max-width:1500px - Seitenabstand
nur noch über Padding, nicht mehr über eine Breitenbegrenzung */
max-width:100%;
margin:auto;
padding:80px clamp(20px,4vw,60px);
}
/**********************
Grid
**********************/
/* ==========================================================
Premium Grid
FIX: grid-auto-flow: dense hinzugefügt, damit der Browser
Lücken rückwirkend auffüllt statt Karten strikt in
Lesereihenfolge zu platzieren. Ohne "dense" entsteht bei
unterschiedlich hohen Karten (siehe JS Smart Masonry) ab
der zweiten Reihe ein unsauberes, "verrutschtes" Layout.
==========================================================*/
.gallery-grid{
display:grid;
grid-template-columns:repeat(12,1fr);
grid-auto-rows:12px;
grid-auto-flow: dense;
gap:22px;
/* FIX: "stretch" statt "start" - zwingt jede Karte auf die vom
JS berechnete grid-row-end Höhe. Mit "start" wurde die Karte
nur so hoch wie ihr Bildinhalt, unabhängig vom reservierten
Platz - das führte je nach Abweichung zu Überlappungen (Karte
größer als reserviert) oder Lücken (Karte kleiner als
reserviert). object-fit:cover am ![]()
sorgt weiterhin für
sauberen Bildausschnitt ohne Verzerrung. */
align-items:stretch;
}
/**********************
Card
**********************/
.gallery-card{
/* span 3 von 12 Spalten = 4 Karten pro Reihe (vorher span 4 = 3/Reihe) */
grid-column:span 3;
overflow:hidden;
border-radius:26px;
background:white;
box-shadow:
0 12px 40px rgba(0,0,0,.10);
transition:
transform .35s,
box-shadow .35s;
position:relative;
}
/**********************
Image
**********************/
.gallery-image{
position:relative;
overflow:hidden;
height:100%;
}
.gallery-image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:1s;
}
/**********************
Different Heights
**********************/
/* Die Kartenhöhen werden dynamisch per JavaScript
(gallery-premium.js, resizeGridItem) anhand des echten
Bildseitenverhältnisses gesetzt (inline style grid-row-end).
Die früher hier vorhandenen statischen
.gallery-card:nth-child(12n+X){grid-row:span N;}
Regeln wurden entfernt, da sie mit dem JS kollidierten:
Beim ersten Rendern galten die statischen Werte, das JS
überschrieb sie kurz danach wieder - das erzeugte ein
sichtbares Layout-Flackern und stand im Widerspruch zu den
tatsächlichen Bildhöhen. */
/**********************
Overlay
**********************/
.gallery-overlay{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
display:flex;
align-items:flex-end;
padding:30px;
background:
linear-gradient(
transparent,
rgba(0,20,40,.78)
);
opacity:0;
transition:.45s;
}
/**********************
Text
**********************/
.gallery-content{
width:100%;
color:white;
}
.gallery-tag{
display:inline-block;
padding:9px 18px;
border-radius:40px;
background:
rgba(255,255,255,.16);
backdrop-filter:blur(15px);
border:
1px solid
rgba(255,255,255,.20);
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:16px;
}
.gallery-content h3{
font-size:32px;
font-weight:700;
margin-bottom:14px;
line-height:1.2;
}
.gallery-content p{
font-size:15px;
opacity:.85;
margin-bottom:22px;
}
/**********************
Button
**********************/
.gallery-button{
display:inline-flex;
align-items:center;
gap:10px;
padding:14px 26px;
border-radius:60px;
background:rgba(255,255,255,.18);
backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.25);
color:white;
font-weight:700;
transition:.35s;
}
.gallery-button i{
font-size:16px;
}
.gallery-button:hover{
background:var(--sea-light);
color:white;
}
/**********************
Hover
**********************/
.gallery-card:hover{
transform:
translateY(-12px)
scale(1.02);
box-shadow:
0 30px 80px rgba(0,0,0,.20);
z-index:20;
}
.gallery-card:hover img{
transform:
scale(1.08);
filter:
saturate(115%)
contrast(105%);
}
.gallery-card:hover .gallery-overlay{
opacity:1;
}
/**********************
Glass Border
**********************/
.gallery-card::before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
border-radius:var(--radius);
border:
1px solid
rgba(255,255,255,.18);
pointer-events:none;
z-index:10;
}
/**********************
Pagination
**********************/
.gallery-pagination{
margin-top:80px;
text-align:center;
}
.gallery-pagination ul{
display:inline-flex;
gap:12px;
list-style:none;
padding:0;
}
.gallery-pagination a{
display:block;
padding:14px 20px;
border-radius:50px;
background:white;
color:#00344b;
transition:.35s;
box-shadow:var(--shadow-small);
text-decoration:none;
}
.gallery-pagination a:hover{
background:var(--sea-light);
color:white;
}
/* FIX: Elemente ohne href (Titel "Seite X von Y", deaktivierter
Pfeil am Anfang/Ende, aktuelle Seite) werden im Template als
statt gerendert (siehe defaultGallery.php). Die
obige Regel gilt nur für , daher blieben diese drei
Zustände bisher komplett ungestylt (reiner Fließtext). Jeder
Zustand bekommt jetzt eine eigene, zur Pillenoptik passende
Darstellung. */
.gallery-pagination li{
display:flex;
}
/* Titel-Element ("Seite 1 von 3") - informativ, nicht klickbar,
dezente Pille mit Glass-Look statt reinweißem Button */
.gallery-pagination .title span{
display:flex;
align-items:center;
padding:14px 20px;
border-radius:50px;
background:rgba(255,255,255,.55);
backdrop-filter:blur(10px);
color:#00344b;
font-weight:600;
font-size:14px;
white-space:nowrap;
}
/* Aktuelle Seite - hervorgehoben gefüllt statt weißer Pille */
.gallery-pagination .current span{
display:block;
padding:14px 20px;
border-radius:50px;
background:var(--sea-light);
color:white;
font-weight:700;
box-shadow:var(--shadow-small);
}
/* Deaktivierter Pfeil (erste/letzte Seite) - gleiche Pillenform,
aber sichtbar ausgegraut statt aktiv wirkend */
.gallery-pagination .inactive span{
display:block;
padding:14px 20px;
border-radius:50px;
background:rgba(255,255,255,.4);
color:rgba(0,52,75,.35);
box-shadow:none;
cursor:not-allowed;
}
/**********************
Responsive
**********************/
@media(max-width:1600px){
.gallery-card{
grid-column:span 4;
/* 3 pro Reihe */
}
}
@media(max-width:1200px){
.gallery-card{
grid-column:span 6;
/* 2 pro Reihe */
}
}
@media(max-width:700px){
.gallery-card{
grid-column:span 12;
/* 1 pro Reihe */
}
}
/**********************
Animation
**********************/
.gallery-card{
opacity:0;
transform:
translateY(70px);
transition:
opacity .8s,
transform .8s;
}
.gallery-card.visible{
opacity:1;
transform:none;
}
.gallery-link{
display:block;
text-decoration:none;
color:inherit;
}
.gallery-empty{
text-align:center;
padding:120px 30px;
color:white;
}
.gallery-empty h2{
font-size:48px;
margin-bottom:20px;
}
.gallery-empty p{
font-size:20px;
opacity:.85;
}
/*======================================
Gallery Loading (Async-Platzhalter)
======================================*/
.gallery-loading{
display:flex;
align-items:center;
justify-content:center;
/* "bildschirmfüllend" unterhalb des Headers - orientiert sich an
der restlichen sichtbaren Höhe, nicht an der vollen 100vh, da
Header/Nav und Hero bereits Platz einnehmen */
min-height:70vh;
width:100%;
color:white;
}
.gallery-loading-inner{
text-align:center;
}
.gallery-loading-spinner{
width:56px;
height:56px;
margin:0 auto 26px;
border-radius:50%;
border:4px solid rgba(255,255,255,.2);
border-top-color:var(--sea-light);
animation:gallerySpin .9s linear infinite;
}
@keyframes gallerySpin{
to{transform:rotate(360deg);}
}
.gallery-loading-inner p{
font-size:20px;
letter-spacing:.5px;
opacity:.9;
}
.gallery-retry-btn{
margin-top:10px;
padding:14px 32px;
border:none;
border-radius:50px;
background:var(--sea-light);
color:white;
font-weight:700;
font-size:15px;
cursor:pointer;
transition:.3s;
}
.gallery-retry-btn:hover{
background:white;
color:#00344b;
}
/*======================================
Hero
======================================*/
.galleryHero{
height:100vh;
min-height:700px;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
position:relative;
background:
linear-gradient(
rgba(0,20,40,.30),
rgba(0,20,40,.70)
),
url(img/gallery-header.jpg);
background-size:cover;
background-position:center;
background-attachment:fixed;
overflow:hidden;
}
/* FIX: siehe gallery2.php - background-attachment:fixed ist auf
iOS/iPadOS Safari fehlerhaft und lässt das Bild riesig/verzerrt
erscheinen. Auf Touch-Geräten und kleineren/mittleren Screens
deaktivieren. */
@media (max-width:1024px), (pointer:coarse){
.galleryHero{
background-attachment:scroll !important;
}
}
.heroContent{
text-align:center;
max-width:900px;
padding:40px;
color:white;
}
.heroBadge{
display:inline-block;
padding:10px 22px;
border-radius:40px;
background:
rgba(255,255,255,.16);
backdrop-filter:blur(12px);
letter-spacing:3px;
text-transform:uppercase;
margin-bottom:25px;
}
.heroContent h1{
font-size:clamp(50px,7vw,92px);
font-weight:700;
line-height:1.05;
}
.heroContent p{
font-size:24px;
line-height:1.8;
margin-bottom:45px;
}
.heroButton{
display:inline-block;
padding:18px 40px;
border-radius:50px;
background:#4bb7d8;
color:white;
font-weight:700;
transition:.35s;
text-decoration:none;
}
.heroButton:hover{
background:white;
color:#00354d;
}
.scrollIndicator{
position:absolute;
bottom:40px;
font-size:36px;
color:white;
animation:bounce 2s infinite;
}
@keyframes bounce{
0%{transform:translateY(0);}
50%{transform:translateY(10px);}
100%{transform:translateY(0);}
}
/************************************/
.waveDivider{
margin-top:-1px;
line-height:0;
}
.waveDivider svg{
width:100%;
display:block;
}
/*====================================
Lightbox
====================================*/
.gslide-title{
font-size:30px;
font-weight:700;
}
.gslide-desc{
font-size:17px;
opacity:.8;
}
.gclose{
transform:scale(1.2);
}
.gnext,
.gprev{
transform:scale(1.15);
}
/* =====================================
Dynamic Sizes
FIX: Die statischen nth-child Höhenregeln
(:nth-child(12n+1) bis :nth-child(12)) wurden
entfernt. Sie kollidierten mit der dynamischen
Smart-Masonry-Berechnung in gallery-premium.js
(resizeGridItem setzt grid-row-end per Inline-Style
anhand der echten Bildmaße). Die statischen Werte
waren beim ersten Rendern kurz aktiv und wurden dann
vom JS überschrieben - das führte zu Layout-Flackern
und stand im Widerspruch zu den echten Seitenverhältnissen.
=====================================*/
.gallery-card::after{
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.10),
transparent 40%
);
pointer-events:none;
opacity:0;
transition:.5s;
}
.gallery-card:hover::after{
opacity:1;
}