enthält genau ein
![]()
. Bild austauschen =
in der index.html das src="…" des
![]()
ändern. Größe/Position der einzelnen
Fotos wird in den jeweiligen Abschnitten (Hero, Trips, …) gesetzt. */
.photo {
position: relative;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
}
.photo img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; /* füllt die Karte ohne Verzerrung */
}
/* leerer Platzhalter, bis ein echtes Foto eingesetzt wird */
.photo--placeholder {
background: var(--color-placeholder);
display: flex; align-items: center; justify-content: center;
}
.photo--placeholder::after {
content: "photo";
font: 500 9px/1 var(--font-mono);
letter-spacing: .12em; text-transform: uppercase;
color: #5b6b73;
}
/* --- Schwebe-Animation der Fotos -----------------------------------------
Fünf leicht unterschiedliche Bewegungen (a–e), damit die Fotos nicht
synchron wippen. Auf ein Foto wird z. B. class="photo float-a" gesetzt. */
@keyframes float-a { from { transform: rotate(-4deg) translate(0,0); } to { transform: rotate(-2.4deg) translate(5px,-16px); } }
@keyframes float-b { from { transform: rotate(5deg) translate(0,0); } to { transform: rotate(3.2deg) translate(-7px,-13px); } }
@keyframes float-c { from { transform: rotate(3deg) translate(0,0); } to { transform: rotate(5deg) translate(6px,-11px); } }
@keyframes float-d { from { transform: rotate(-2deg) translate(0,0); } to { transform: rotate(-4deg) translate(-6px,-15px); } }
@keyframes float-e { from { transform: rotate(1.5deg) translate(0,0); } to { transform: rotate(-1deg) translate(5px,-9px); } }
.float-a { animation: float-a 7s ease-in-out infinite alternate; }
.float-b { animation: float-b 8.5s ease-in-out infinite alternate; }
.float-c { animation: float-c 7.6s ease-in-out infinite alternate; }
.float-d { animation: float-d 9.4s ease-in-out infinite alternate; }
.float-e { animation: float-e 7.9s ease-in-out infinite alternate; }
/* --- Einblenden beim Scrollen --------------------------------------------
Elemente mit class="reveal" starten unsichtbar und gleiten beim Scrollen
herein. Das JavaScript fügt dazu die Klasse .is-visible hinzu. */
.reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .08s; } /* leicht verzögert (Staffelung) */
.reveal--d2 { transition-delay: .12s; }
/* ============================================================================
6. SEITEN-LAYOUT
============================================================================ */
/* Eine "Seite" = ein Abschnitt der Single-Page-Site. Per JavaScript wird
immer nur eine sichtbar geschaltet (Home / Trips / About / Contact). */
.page[hidden] { display: none; }
/* zentrierter Inhalts-Container mit Innenabstand */
.wrap {
width: 100%;
max-width: var(--maxwidth);
margin: 0 auto;
padding: 0 28px;
}
.wrap--narrow { max-width: 760px; } /* schmaler (Preise, Newsletter) */
.wrap--cta { max-width: 820px; } /* Schluss-Aufruf */
/* vertikaler Abstand zwischen den Sektionen */
.section { padding: 52px 0; }
.section--tight-top { padding-top: 34px; }
.section--tight-bottom { padding-bottom: 38px; }
/* Hero = der große Kopfbereich oben auf jeder Seite */
.hero {
position: relative;
min-height: 100vh;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
gap: clamp(34px, 6vh, 68px);
padding: 120px 22px 60px; /* oben Platz für den fixierten Header */
overflow: hidden;
}
.hero--sub { min-height: 66vh; gap: clamp(28px,5vh,52px); padding-bottom: 48px; }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Reihe schwebender Fotos im Hero */
.photo-row {
display: flex; justify-content: center; align-items: flex-start;
gap: clamp(12px,1.8vw,26px);
width: 100%; max-width: 1040px; flex-wrap: nowrap;
}
.photo-row--sub { max-width: 520px; }
/* ============================================================================
7. HOME
============================================================================ */
/* --- Hero-Fotos der Startseite (4 Stück, leicht versetzt) ----------------- */
.hero-photos-home .photo:nth-child(1) { width: clamp(112px,19vw,238px); aspect-ratio: 5/6; margin-top: 40px; }
.hero-photos-home .photo:nth-child(2) { width: clamp(94px,16vw,196px); aspect-ratio: 1/1; margin-top: 8px; }
.hero-photos-home .photo:nth-child(3) { width: clamp(110px,19vw,228px); aspect-ratio: 5/6; margin-top: 56px; }
.hero-photos-home .photo:nth-child(4) { width: clamp(88px,14.5vw,186px);aspect-ratio: 14/15; margin-top: 22px; }
/* --- Reel / Video ---------------------------------------------------------
Hochkant-Videofläche. Noch ist hier ein Platzhalter. Um ein Video
einzusetzen, in der index.html ein src in das