/* ----------------------------------------------------------
   more than harmony
   ----------------------------------------------------------
   Description    Design studio in Hamburg, Berlin and Mallorca
   Design & Code  More Than Harmony, https://morethanharmony.com/
   Powered by     NIBS™, https://asknibs.com/
   Version        1.0
   License        All rights reserved
   ---------------------------------------------------------- */
/* Einfache Galerie – Grundlage für den Medien-Baustein. Farben, Schrift und Ecken wie die Endlos-Galerie. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--grund, #0d0d0d); color: #e9e9e9; color-scheme: dark; }
html.hell { color: #1a1a1a; color-scheme: light; }
body { margin: 0; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--grund, #0d0d0d); }
@font-face { font-family: "The Future"; src: url("fonts/TheFuture-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
:root { --schrift: "The Future", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --luecke: 20px; }

/* Wand: Spalten nebeneinander, in jeder Spalte die Medien in ihrer natürlichen Höhe (Masonry). Das Skript verteilt der Reihe nach.
   Die Kacheln stehen ohne Abstand am Rand (Oli, 11.10.2026), auf jeder Breite; frei bleibt nur, was das Gerät selbst verdeckt. */
main { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.galerie { display: flex; align-items: flex-start; gap: var(--luecke); }
.spalte { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--luecke); }
.kachel { margin: 0; background: var(--kachelgrund, #1a1a1a); opacity: 0; transition: opacity 450ms ease; }
.kachel.da { opacity: 1; }
.kachel img, .kachel video { display: block; width: 100%; height: auto; }
/* Anordnung „Raster“ (im Builder wählbar): gleich hohe Zellen statt Masonry; das Bild steht ganz darin oder füllt die Zelle */
.galerie.raster .kachel { aspect-ratio: 1 / 1.2; background: none; }
.galerie.raster .kachel img, .galerie.raster .kachel video { height: 100%; object-fit: contain; }
.galerie.raster.fuellt .kachel { aspect-ratio: 1 / 1.12; }
.galerie.raster.fuellt .kachel img, .galerie.raster.fuellt .kachel video { object-fit: cover; }
/* Kachelform „Rund“ (Oli, 11.10.2026): Die Kachel ist ein Kreis, so breit wie hoch; das Bild füllt ihn. Der Kreis liegt am Bild, nicht an
   der Kachel, damit im Builder nichts abgeschnitten wird, was an der Kachel hängt. */
.galerie .kachel.rund { aspect-ratio: 1 / 1; background: none; }
.galerie .kachel.rund img, .galerie .kachel.rund video, .galerie.raster .kachel.rund img, .galerie.raster .kachel.rund video { height: 100%; object-fit: cover; border-radius: 50%; }
/* Anordnung „Bündig“ (Oli, 11.10.2026): Alle Spalten enden unten auf einer Höhe. Die Bilder behalten ihre Form; in jeder Spalte
   verteilen sich die Abstände so, dass es aufgeht (der eingestellte Abstand ist der kleinste). */
.galerie.buendig { align-items: stretch; }
.galerie.buendig .spalte { justify-content: space-between; }

/* Ecken wie bei der Endlos-Galerie: fest am Fenster, Großbuchstaben, 14 px */
.ecken { position: fixed; inset: 0; pointer-events: none; z-index: 4; font-family: var(--schrift); font-size: 14px; line-height: 20px; letter-spacing: .06em; text-transform: uppercase; }
.ecke { position: absolute; pointer-events: auto; color: #f9f9f9; text-decoration: none; mix-blend-mode: difference; }
.ecke:hover, .ecke:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.ecke:focus-visible { outline: 2px solid #f9f9f9; outline-offset: 4px; }
.ecke.ol { left: calc(16px + env(safe-area-inset-left)); top: calc(16px + env(safe-area-inset-top)); }
.ecke.or { right: calc(16px + env(safe-area-inset-right)); top: calc(16px + env(safe-area-inset-top)); }
.ecke.ul { left: calc(16px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); }
.ecke.ur { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
.ecke.logo { mix-blend-mode: normal; }
html.hell .ecke.logo img { filter: invert(1); }
/* auf hellem Grund ist weiße Schrift unsichtbar: Menüpunkte ohne eigene Farbe (die Voreinstellung) werden dunkel; eigene Farben (.navi-eigenfarbe) bleiben */
html.hell .ecke:not(.logo):not(.navi-eigenfarbe), html.hell .navi-burger:not(.navi-eigenfarbe) { color: #1a1a1a; mix-blend-mode: normal; }
.ecke.logo img { display: block; height: 60px; width: auto; }
.ohne-js { text-align: center; padding: 40px 20px; }

@media (max-width: 767px) { :root { --luecke: 10px; } .ecke.logo img { height: 46px; } }
@media (prefers-reduced-motion: reduce) { .kachel { transition: none; } }

/* ---------- Endlos-Galerie: eigene Bühne über der Seite, Vollbild, nichts scrollt. Die Ecken (z 4) liegen darüber. ---------- */
html.endlos-an, html.endlos-an body { overflow: hidden; height: 100%; overscroll-behavior: none; }
.endlos { position: fixed; inset: 0; z-index: 2; overflow: hidden; background: var(--grund, #0d0d0d); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; contain: strict; opacity: 0; transition: opacity 450ms ease; }
.endlos.bereit { opacity: 1; }
.endlos.zieht { cursor: grabbing; }
.e-kachel { position: absolute; left: 0; top: 0; margin: 0; will-change: transform; }
.e-kachel img, .e-kachel video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--kachelgrund, #1a1a1a); pointer-events: none; -webkit-user-drag: none; }
.e-kachel[data-sicht="0"] { visibility: hidden; }
.e-kachel.rund img, .e-kachel.rund video { border-radius: 50%; }
/* im Builder als Vorschau hinter dem Einstell-Feld: über der Seite samt ihren Ecken, unter den Bedienelementen des Werkzeugs */
html.endlos-vorschau .endlos { z-index: 5; }
/* der Satz vor der Galerie: gleiche Typografie wie die Ecken, zügiger Aufbau Wort für Wort */
.intro { position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; background: var(--grund, #0d0d0d); transition: opacity 350ms ease; }
.intro-inhalt { width: 100%; max-width: 660px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.intro-text { margin: 0; padding: 28px; max-width: 660px; font-family: var(--schrift); font-size: 14px; line-height: 1.8; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.intro-wort { display: inline-block; opacity: 0; animation: wort-an 260ms cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--verzug); }
@keyframes wort-an { from { opacity: 0; transform: translateY(4px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.intro-wait { width: fit-content; margin: 32px auto 0; text-align: center; font-family: var(--schrift); font-size: 14px; line-height: 1.8; letter-spacing: .06em; opacity: .25; animation: wait-atmen 1.8s ease-in-out infinite; transform-origin: center; }
@keyframes wait-atmen { 0%, 100% { opacity: .25; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }
.intro.fertig { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .endlos, .intro { transition: none; } .intro-wort { animation: none; opacity: 1; } .intro-wait { animation: none; opacity: .65; } }

/* ---------- Navigation aus dem Builder (Eingang NAVI): Menüpunkte oben, unten, in den Ecken oder hinter einem Hamburger. Größe und Farbe
   trägt jeder Menüpunkt selbst. Die Ecken (ol, or, ur) stehen weiter oben; unten links sitzt das Logo. ---------- */
.navi-punkte { pointer-events: none; }
/* eine eigene Farbe steht für sich; die Vorgabe der Seite mischt sich mit dem Bild dahinter */
.navi-eigenfarbe { mix-blend-mode: normal; }
.navi-oben .navi-punkte, .navi-unten .navi-punkte { position: absolute; left: calc(16px + env(safe-area-inset-left)); right: calc(16px + env(safe-area-inset-right)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; }
.navi-oben .navi-punkte { top: calc(16px + env(safe-area-inset-top)); }
.navi-unten .navi-punkte { bottom: calc(16px + env(safe-area-inset-bottom)); }
.navi-oben .navi-punkt, .navi-unten .navi-punkt, .navi-hamburger .navi-punkt { position: static; }
.navi-mitte .navi-punkte { justify-content: center; }
.navi-links .navi-punkte { justify-content: flex-start; }
.navi-rechts .navi-punkte { justify-content: flex-end; }
.navi-breit .navi-punkte { justify-content: space-between; }
/* Hamburger: drei Striche (Länge --bl, Abstand --ba, Stärke --bs), darunter klappt das Menü weich auf */
.navi-burger { position: absolute; top: calc(16px + env(safe-area-inset-top)); width: var(--bl, 26px); display: grid; gap: var(--ba, 7px); padding: 10px 0; margin: -10px 0; border: 0; background: none; color: #f9f9f9; cursor: pointer; pointer-events: auto; mix-blend-mode: difference; -webkit-appearance: none; appearance: none; }
.navi-burger.navi-eigenfarbe { mix-blend-mode: normal; }
.navi-burger i { display: block; height: var(--bs, 1px); background: currentColor; }
.navi-burger:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.navi-hamburger.navi-rechts .navi-burger { right: calc(16px + env(safe-area-inset-right)); }
.navi-hamburger.navi-links .navi-burger { left: calc(16px + env(safe-area-inset-left)); }
.navi-hamburger.navi-mitte .navi-burger { left: 50%; transform: translateX(-50%); }
.navi-hamburger .navi-punkte { position: absolute; top: calc(52px + env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 14px; opacity: 0; visibility: hidden; transition: opacity 320ms ease, visibility 0s linear 320ms; }
.navi-hamburger.navi-rechts .navi-punkte { right: calc(16px + env(safe-area-inset-right)); align-items: flex-end; }
.navi-hamburger.navi-links .navi-punkte { left: calc(16px + env(safe-area-inset-left)); align-items: flex-start; }
.navi-hamburger.navi-mitte .navi-punkte { left: 0; right: 0; align-items: center; }
.navi-hamburger.offen .navi-punkte { opacity: 1; visibility: visible; transition: opacity 320ms ease, visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) { .navi-hamburger .navi-punkte { transition: none; } }

/* Slider (Oli, 20.10.2026): mehrere Bilder an einem Platz, sie wechseln von selbst. Fade: das neue blendet über das alte;
   Slide: das neue schiebt das alte hinaus (html.slider-slide). Dauer des Wechsels: --slider-tempo. */
.slider { position: relative; overflow: hidden; width: 100%; height: 100%; }
.slider .slider-bild { display: block; width: 100%; height: auto; }
.slider .slider-bild:not(:first-child) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.e-kachel .slider .slider-bild, .galerie.raster .kachel .slider .slider-bild { height: 100%; object-fit: cover; }
.slider .slider-bild { opacity: 0; transition: opacity var(--slider-tempo, 520ms) cubic-bezier(.25, .1, .25, 1); }
.slider .slider-bild.an { opacity: 1; z-index: 2; }
.slider .slider-bild.geht { opacity: 1; z-index: 1; }
.slider .slider-bild.still { transition: none; }
html.slider-slide .slider .slider-bild { opacity: 1; transform: translateX(100%); transition: transform var(--slider-tempo, 520ms) cubic-bezier(.65, 0, .35, 1); }
html.slider-slide .slider .slider-bild.an { transform: none; }
html.slider-slide .slider .slider-bild.geht { transform: translateX(-100%); }
html.slider-slide .slider .slider-bild.still { transition: none; }
@media (prefers-reduced-motion: reduce) { .slider .slider-bild { transition: none !important; } }
.slider .slider-bild:first-child { position: relative; }