@font-face {
font-family: 'bornabold';
src:
url('../fonts/borna-bold-webfont.woff2') format('woff2'),
url('../fonts/borna-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'bornaregular';
src:
url('../fonts/borna-regular-webfont.woff2') format('woff2'),
url('../fonts/borna-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'GrueneTypeNeue';
src:
url('../fonts/GrueneTypeNeue-Regular.woff2') format('woff2'),
url('../fonts/GrueneTypeNeue-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
/* Auswählbare Schriften (site.json -> headFont/textFont). boot.php setzt
--headfont/--textfont inline am auf eine dieser Variablen; die
Stacks selbst bleiben hier, damit Schriftnamen nicht in PHP wandern.
Borna hat zwei Schnitte als eigene Familien -> je Rolle eine Variable. */
--font-borna-head: bornabold, system-ui, sans-serif;
--font-borna-text: bornaregular, 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
--font-sans: system-ui, sans-serif;
--font-gruenetype: 'GrueneTypeNeue', system-ui, sans-serif;
--font-serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
--headfont: var(--font-borna-head);
--headfont-style: normal;
--headfont-weight: normal;
--textfont: var(--font-borna-text);
--textcolor: 13, 13, 13;
--white: 255,255,255;
--pagemargin: 4vw;
}
* {
font-family: var(--textfont);
font-weight: 300;
font-style: normal;
color: rgb(var(--textcolor));
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: rgb(var(--primary));
scroll-behavior: smooth;
}
body {
position: relative;
}
p {
padding-bottom: 1em;
font-size: 1rem;
}
h1,
strong,
b {
font-weight: 700;
font-style: normal;
}
h1 {
font-family: var(--headfont);
font-style: var(--headfont-style);
font-weight: var(--headfont-weight);
font-size: 6rem;
line-height: 0.8em;
color: #111;
margin: 0;
padding-top: 1.5rem;
white-space: nowrap;
}
h2 {
font-family: var(--textfont);
font-size: 2em;
color: rgb(var(--primary));
font-weight: normal;
margin: 0;
}
a {
color: rgba( 81, 117, 181, 100%);
text-decoration: none;
transition: all 0.3s;
}
a:hover {
color: rgba( 28, 63, 106, 100%);
}
#heroinebg {
display: block;
background-color: rgb(var(--secondary));
}
#heroine {
display: none;
height: 90svh;
position: relative;
background: none;
transition: all 0.3s;
}
body.home #heroine {
display: block;
}
body.half #heroine {
height: 96svh;
}
body.half #heroine::before {
content: '';
position: fixed;
z-index: 11;
display: block;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-image: var(--hero);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: rgb(var(--primary));
transition: all 0.3s;
}
/*
body.gruene #heroine {
background: var(--hero-ls, var(--hero)) no-repeat center center;
background-size: cover;
background-attachment: fixed;
background-color: rgb(var(--primary));
}
*/
body.gruene #heroine::before {
content: '';
position: fixed;
z-index: 0;
display: block;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-image: var(--hero-ls, var(--hero));
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
transition: all 0.3s;
}
body.half #heroine::before {
top: 48svh;
position: absolute;
}
#heroine > span#filterspan {
display: block;
height: 100%;
width: 100%;
position: absolute;
backdrop-filter: contrast(70%) saturate(0%) brightness(50%);
-webkit-backdrop-filter: contrast(70%) saturate(0%) brightness(50%);
}
body.half #heroine > span#filterspan {
height: 48svh;
top: 48svh;
z-index: 12;
}
body.gruene #heroine div#heads {
/* aspect-ratio: 1 / 1; */
min-height: 0;
position: absolute;
top: 42.5%;
left: 50%;
transform-origin: center;
transform: translate(-50%, 0);
z-index: 100;
/* background: #fff; */
text-align: center;
padding: 3rem;
/* border-radius: 1000px;
display: flex;
flex-direction: column;
justify-content: center;*/
}
body.half #heroine div#heads {
background-color: rgb(var(--primary));
width: 100%;
height: 48svh;
position: fixed;
top: 0;
left: 0;
z-index: -10;
padding: 2rem;
display: flex;
flex-direction:column;
justify-content: center;
z-index: 0;
}
body.half #heroine div#heads::before {
content: url('../img/viagems.svg');
width: 25px;
position: absolute;
top: 2rem;
opacity: 0.5;
}
body.gruene #heroine div#heads h1,
body.gruene #heroine div#heads h2 {
transform: skew(-12deg);
display: inline-block;
}
body.gruene #heroine div#heads h1 div,
body.gruene #heroine div#heads h2 div {
font-family: var(--headfont);
font-style: var(--headfont-style);
font-weight: var(--headfont-weight);
transform: skew(12deg);
color: #fff;
font-weight: normal;
}
body.gruene #heroine div#heads h1 {
font-family: var(--headfont);
font-style: var(--headfont-style);
font-weight: var(--headfont-weight);
font-size: 2.5rem;
line-height: 1.3em;
color: rgb(var(--textcolor));
margin: 0;
padding-top: 1rem;
white-space: normal;
text-align: center;
background: rgb(var(--primary));
padding: .2em .3em .0em .3em;
}
body.gruene #heroine div#heads h1 span {
font-family: var(--headfont);
font-style: var(--headfont-style);
font-weight: var(--headfont-weight);
font-size: 3rem;
line-height: 0.5em;
color: rgb(var(--textcolor));
margin: 0;
display: block;
padding: 0 0 0.5rem 0;
white-space: normal;
text-align: center;
}
body.gruene #heroine div#heads h2 {
font-size: 1.3rem;
/*font-variant-numeric: oldstyle-nums;*/
/* line-height: 3rem; */
letter-spacing: 0.02rem;
background: rgb(var(--secondary));
padding: .1em .5em .0em .5em;
}
body.half #heroine div#heads h1 {
font-size: 2.5rem;
margin: 0;
white-space: normal;
text-align: left;
background: none;
padding: .2em .3em .1em .0em;
}
body.half #heroine div#heads h1 div {
font-family: var(--headfont);
font-style: var(--headfont-style);
font-weight: var(--headfont-weight);
font-size: 2.5rem;
line-height: 1.05em;
color: rgb(var(--white));
margin: 0;
white-space: normal;
text-align: left;
background: none;
padding: 0;
}
body.half #heroine div#heads h2 {
font-size: 1.3rem;
padding: .0em .5em .1em .0em;
}
body.half #heroine div#heads h2 div {
font-size: 1.5rem;
font-variant-numeric: oldstyle-nums;
letter-spacing: 0.02rem;
color: rgb(var(--secondary));
padding: 0;
}
section#header {
width: 100vw;
height: 50px;
position: fixed;
top: 0;
left: 0;
padding: 0 1rem;
background: rgba(255,255,255,0.85);
z-index: 1000;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
body.home section#header {
opacity: 0;
}
section#header #homelink {
display: block;
height: 1.1rem;
padding-block-start: 0.1rem;
justify-self: start;
}
body.home section#header #homelink {
opacity: 0.2;
}
section#header #homelink svg {
height: 100%;
width: auto;
}
section#header #homelink svg path {
fill: rgb(var(--primary));
}
/* Admin-Modus verlassen: einziger Weg heraus, denn der Modus hängt am Cookie und
nicht an der URL. Landet in der dritten Grid-Spalte, die sonst leer bleibt.
Nur das Icon — als Maske über background-color eingefärbt (Muster wie
.icon-eye), damit es die Primärfarbe der Site trägt wie das Haus-Icon links. */
section#header .admin-logout {
grid-column: 3;
justify-self: end;
width: 1.15rem;
height: 1.15rem;
background-color: rgb(var(--primary));
opacity: 0.75;
transition: opacity 0.2s;
-webkit-mask: url('../img/log-out.svg') center / contain no-repeat;
mask: url('../img/log-out.svg') center / contain no-repeat;
}
section#header .admin-logout:hover,
section#header .admin-logout:focus-visible {
opacity: 1;
}
section#header strong {
font-family: var(--headfont);
font-style: var(--headfont-style);
font-weight: var(--headfont-weight);
font-size: 1.4rem;
line-height: 50px;
color: rgb(var(--primary));
/* margin: 0 2rem 0 0; */
}
section#header a:nth-child(2) {
grid-column: 2;
text-align: center;
}
/* Albumtitel in der Titelzeile: mobil allein, ab 700px neben dem Seitentitel */
section#header .albumtitle {
font-family: var(--textfont);
font-size: 1.4rem;
line-height: 50px;
color: rgb(var(--primary));
}
/* Mobil zählt nur der Albumtitel — Seitentitel weicht (sofern ein Album da ist) */
section#header.has-album strong {
display: none;
}
@media only screen and (min-width: 700px) {
section#header.has-album strong {
display: inline;
}
section#header .albumtitle::before {
content: " ";
}
}
div#maindiv {
background-color: #fff;
padding: var(--pagemargin);
hyphens: auto;
z-index: 10;
position: relative;
}
div.ggpics {
/* max-width: 950px; */
background-color: #fff;
padding: 0px 0vw 0px 0px;
margin-bottom: 40px;
}
/* Bildposition: SimpleLightbox zentriert .sl-image senkrecht per Inline-Style
(adjustImage(): top = (innerHeight − Bildhöhe) / 2, Höhe = innerHeight × heightRatio).
Die Caption mit dem Copyright hängt 1rem *unter* dem Bild und lag damit genau in der
fixierten Button-Leiste (.sl-download, bottom: 5px, ~36px hoch). Also das Bild anheben.
transform statt top: das Inline-top schreibt die Bibliothek bei jedem Resize neu, das
transform fasst sie nie an — Zoom/Pan setzt sein eigenes transform auf das ![]()
darin,
nicht auf diesen Container. Der Platz dafür kommt aus heightRatio 0.85 (page.php);
bei 0.9 bliebe auf niedrigen Fenstern oben nichts mehr übrig. */
.sl-wrapper.simple-lightbox .sl-image {
transform: translateY(-28px);
}
.sl-wrapper.simple-lightbox .sl-image .sl-caption {
background: rgba(0,0,0,0.0);
font-family: sans-serif;
font-size: 0.6rem;
bottom: -1rem;
color: rgb(var(--textcolor));
padding: 0;
}
.sl-wrapper.simple-lightbox .sl-image .sl-caption a {
font-family: sans-serif;
font-size: 0.6rem;
color: rgb(var(--textcolor));
float: right;
}
/* Native Download-Option (SimpleLightbox ab 2.12.0): .sl-download ist ein
fixierter, volle Breite spannender Container am unteren Rand; darin liegt der
. Wir stylen den Link als deutlich sichtbaren Button.
Wichtig: Der volle Balken (z-index 10060) liegt sonst über der Caption und
verschluckt Klicks auf den "Bild melden"-Link rechts. Darum den Container
klick-transparent schalten und nur den Button selbst klickbar lassen. */
.sl-wrapper.simple-lightbox .sl-download {
pointer-events: none;
}
.sl-wrapper.simple-lightbox .sl-download a {
pointer-events: auto;
display: inline-block;
font-family: sans-serif;
font-size: 0.95rem;
line-height: 1;
color: rgb(var(--white));
background: rgb(var(--primary));
padding: 0.7em 1.4em;
border-radius: 999px; /* Pille — gilt für Download- und Verkaufsgalerie-Button */
white-space: nowrap;
}
.sl-wrapper.simple-lightbox .sl-download a:hover {
background: rgb(var(--secondary));
color: rgb(var(--white)) !important;
text-decoration: none !important;
}
/* Verkaufsgalerie-Button: liegt in derselben Leiste wie der Download-Button und
erbt dessen Button-Styling; abgesetzte Farbe, damit die beiden unterscheidbar
bleiben. Auf schmalen Schirmen brechen sie untereinander um. */
.sl-wrapper.simple-lightbox .sl-download a + a {
margin-left: 0.6em;
}
.sl-wrapper.simple-lightbox .sl-download a.sl-shop {
background: rgb(var(--secondary));
}
.sl-wrapper.simple-lightbox .sl-download a.sl-shop:hover {
background: rgb(var(--primary));
}
@media (max-width: 480px) {
.sl-wrapper.simple-lightbox .sl-download a {
font-size: 0.85rem;
padding: 0.6em 0.9em;
}
.sl-wrapper.simple-lightbox .sl-download a + a {
margin-left: 0.4em;
}
}
.sl-wrapper.simple-lightbox div a:hover {
color: rgb(var(--primary)) !important;
text-decoration: underline;
}
div#navidiv {
position: sticky;
top: 50px; /* overridden by JS to hide thumbs when stuck */
z-index: 500;
width: 100%;
padding-top: 50px;
background-color: rgb(var(--secondary));
}
body.home div#navidiv {
padding-top: 0px;
}
div#navidiv a.naviscroll {
display: none;
justify-content: center;
text-align: center;
width: 2rem;
height: 2rem;
line-height: 2rem;
border-radius: 8rem;
position: absolute;
top: 40%;
background: #fff;
z-index: 100000;
font-weight: bold;
box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}
a#naviscroll1 {
left: 10px;
}
a#naviscrollx {
right: 10px;
}
@media only screen and (min-width: 500px) and (max-width: 850px) {
div#navidiv.morethan4 a.naviscroll {
display: flex;
}
}
section#navi {
scroll-margin-block-start: 50px;
padding: 2rem var(--pagemargin) 0 var(--pagemargin);
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
background-color: rgb(var(--primary));
}
body.half section#navi {
background-color: rgb(var(--secondary));
}
ul#albumlinks {
list-style: none;
display: flex;
gap: 10px;
}
ul#albumlinks.morethan4 {
min-width: 900px;
}
ul#albumlinks > * {
/* flex: 1; */
}
ul#albumlinks li a {
display: block;
padding: 0;
transition: all 0.3s;
font-size: 1rem;
font-size: clamp(12px, calc(0.7vw + 0.3rem), 20px);
text-align: left;
color: rgb(var(--textcolor));
text-transform: uppercase;
letter-spacing: 0.08em;
border-bottom: clamp(4px, 1vw, 5px) solid rgb(var(--primary));
scroll-snap-align: start;
scroll-margin-left: var(--pagemargin);
scroll-margin-right: var(--pagemargin);
text-shadow: 0 0 30px rgba(0,0,0,0.4);
}
body.half ul#albumlinks li a {
border-color: rgb(var(--white),0);
text-transform: none;
letter-spacing: 0em;
}
ul#albumlinks li a span {
padding: 0.5em 0 0.5em 0;
display: block;
color: rgb(var(--textcolor-on-primary));
line-height: 1.1em;
}
body.half ul#albumlinks li a span {
color: rgb(var(--textcolor-on-secondary));
word-break: break-word;
}
.gruene ul#albumlinks li a span {
font-family: var(--headfont);
font-style: var(--headfont-style);
font-weight: var(--headfont-weight);
}
ul#albumlinks li a:hover {
border-color: rgb(var(--white),0.5);
}
body.half ul#albumlinks li a:hover {
color: rgb(var(--primary), 0.5);
border-color: rgb(var(--primary), 0.5);
}
body ul#albumlinks li a:hover img {
transition: all 0.3s;
opacity: 0.6;
}
ul#albumlinks li.active a {
border-color: rgb(var(--secondary));
}
body.half ul#albumlinks li.active a {
border-color: rgb(var(--primary));
}
ul#albumlinks li.active a span {
/* font-weight: bold; */
color: rgb(var(--secondary));
}
body.half ul#albumlinks li.active a span {
/* font-weight: bold; */
color: rgb(var(--primary));
}
body.half ul#albumlinks li a:hover span {
color: rgb(var(--primary), 0.7);
}
ul#albumlinks li a img {
width: 100%;
max-height: 150px;
aspect-ratio: 3 / 2;
display: block;
overflow: hidden;
/* Ohne object-fit gilt "fill": ein hochkantes Cover wurde in den 3:2-Kasten
gequetscht. cover schneidet stattdessen zu — wie bei .album-tile und
a.nextLink img. Der Thumbnailer liefert dazu passend beschnitten (c=1). */
object-fit: cover;
object-position: center;
}
body ul#albumlinks li.active a {
pointer-events: none;
}
#disclaimer {
position: relative;
background: rgb(var(--white));
}
footer {
background-color: rgb(var(--primary));
position: relative;
}
footer #imp {
display: flex;
background: rgb(var(--textcolor));
padding: 1rem;
gap: 20px;
align-items: center;
}
/* Logo + Firmenname verlinken auf die Hauptsite. Der Link ist selbst ein Flex-Container
mit demselben gap wie #imp — sonst rutschten Logo und Name zusammen, weil sie als ein
einziges Flex-Kind zählen. */
footer #imp .imp-brand {
display: flex;
align-items: center;
gap: 20px;
text-decoration: none;
}
footer #imp .imp-brand:hover span {
text-decoration: underline;
}
footer #imp img {
height: 35px;
}
footer #imp span {
color: #fff;
font-family: sans-serif;
font-weight: bold;
font-size: 0.8rem;
line-height: 1.2em;
}
footer #imp span a {
color: #fff;
font-family: sans-serif;
}
footer .footernav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
footer a.startLink {
display: flex;
align-items: center;
gap: 10px;
color: rgb(var(--textcolor-on-primary));
/* text-transform: uppercase; */
letter-spacing: 0.08em;
text-decoration: none;
white-space: nowrap;
}
footer a.startLink span {
color: rgb(var(--textcolor-on-primary));
}
footer a.nextLink {
display: flex;
align-items: center;
text-align: right;
gap: 10px;
color: rgb(var(--textcolor-on-primary));
/* text-transform: uppercase; */
letter-spacing: 0.08em;
}
footer a.nextLink span {
color: rgb(var(--textcolor-on-primary));
}
/* Beide Thumbs randabfallend im 3:2-Querformat */
footer a.startLink img,
footer a.nextLink img {
height: 80px;
aspect-ratio: 2 / 3;
width: auto;
object-fit: cover;
display: block;
}
/* Verkaufsgalerie-Knopf auf der Albumseite: fest unten mittig, Pille wie in der
Lightbox. z-index bewusst niedrig — die Lightbox (ab 10000) legt sich darüber,
sonst schwebte der Knopf über dem geöffneten Foto.
.download-fab = derselbe Knopf im Admin-Modus (Komplett-Download statt Verkauf).
Bewusst eine eigene Klasse statt einer zweiten am selben Element: der Statistik-
Handler in page.php hört auf 'a.sl-shop, a.shop-fab' und würde den Download sonst
als Shop-Klick zählen, sobald im Admin-Modus je geloggt würde. */
.shop-fab,
.download-fab {
position: fixed;
bottom: 1.4rem;
left: 50%;
transform: translateX(-50%);
z-index: 50;
display: inline-flex;
align-items: center;
gap: 0.55em;
font-family: sans-serif;
font-size: 0.95rem;
font-weight: bold;
line-height: 1;
white-space: nowrap;
color: rgb(var(--white));
background: rgb(var(--primary));
/* Feste Höhe statt Padding: exakt so hoch wie der Hochscroll-Knopf (3rem). */
height: 3rem;
padding: 0 1.5em;
border-radius: 999px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
text-decoration: none;
}
/* Icon = engine/assets/img/image.svg. Als Maske eingebunden statt als ![]()
: die Datei
zeichnet mit stroke="currentColor" und käme als Bild schwarz heraus. So nimmt sie über
background: currentColor die Textfarbe des Knopfs an und macht den Hover mit. */
.shop-fab::before,
.download-fab::before {
content: "";
flex: none;
width: 1.15em;
height: 1.15em;
background: currentColor;
-webkit-mask: url('../img/image.svg') no-repeat center / contain;
mask: url('../img/image.svg') no-repeat center / contain;
}
.download-fab::before {
-webkit-mask-image: url('../img/download.svg');
mask-image: url('../img/download.svg');
}
.shop-fab:hover,
.download-fab:hover {
background: rgb(var(--secondary));
color: rgb(var(--white)) !important;
text-decoration: none !important;
}
@media (max-width: 480px) {
.shop-fab,
.download-fab {
font-size: 0.85rem;
padding: 0 1.2em;
}
}
/* Die festen Knöpfe liegen am Seitenende über dem Footer. Auf schmalen Schirmen füllt
die #imp-Leiste die Breite, der mittige Kaufen-Knopf verdeckt sie also — unten Platz
schaffen. Über :has() nur auf Seiten mit Knopf, sonst stünde überall tote Fläche.
Maß: Knopf-Unterkante 1.4rem + Höhe 3rem + Luft. */
@media (max-width: 700px) {
body:has(.shop-fab) footer #imp,
body:has(.download-fab) footer #imp {
padding-bottom: 5.5rem;
}
}
.scrolltop-wrap {
box-sizing: border-box;
position: absolute;
z-index: 10;
top: 12rem;
right: 1rem;
bottom: 0;
pointer-events: none;
backface-visibility: hidden;
}
.scrolltop-wrap #scrolltop-bg {
fill: rgb(var(--primary), 0.7);
}
.scrolltop-wrap #scrolltop-arrow {
fill: white;
}
.scrolltop-wrap a:hover #scrolltop-bg {
fill: rgb(var(--primary));
}
.scrolltop-wrap a:hover #scrolltop-arrow {
fill: white;
}
@supports (-moz-appearance: meterbar) {
clip: rect(0, 3rem, auto, 0);
}
/* Sticky-Trick: top schiebt den Knopf über den Fensterrand, translateY(100vh) wieder
eine Fensterhöhe nach unten. Die Unterkante liegt damit bei |top| − Höhe über dem
unteren Rand — 4.4rem − 3rem = 1.4rem, also gleichauf mit .shop-fab (bottom: 1.4rem).
Wer die Höhe ändert, muss top mitziehen. */
.scrolltop-wrap a {
position: fixed;
position: sticky;
top: -4.4rem;
width: 3rem;
height: 3rem;
margin-bottom: -4.4rem;
/* 100vh ist auf iOS Safari das *große* Viewport (Toolbar eingeklappt) und ändert
sich nie — bei ausgefahrener Toolbar schob es den Knopf darunter, er wurde
abgeschnitten. 100dvh folgt dem sichtbaren Viewport und wandert damit mit dem
Browser-Chrome, genau wie der fixierte .shop-fab. vh bleibt als Fallback stehen. */
transform: translateY(100vh);
transform: translateY(100dvh);
backface-visibility: hidden;
display: inline-block;
text-decoration: none;
user-select: none;
pointer-events: all;
outline: none;
overflow: hidden;
}
.scrolltop-wrap a svg {
display: block;
border-radius: 50%;
width: 100%;
height: 100%;
}
.scrolltop-wrap a svg path {
transition: all 0.1s;
}
.scrolltop-wrap a #scrolltop-arrow {
transform: scale(0.66);
transform-origin: center;
}
@media print {
.scrolltop-wrap {
display: none !important;
}
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 4px;
column-gap: 2%;
opacity: 0;
transition: opacity 0.4s ease;
}
.grid.is-ready {
opacity: 1;
}
.grid-item {
display: block;
position: relative;
/* Abstand zur nächsten Reihe. Als Variable, weil der Verstecken-Knopf ihn
herausrechnen muss (absolut positioniert = am Rand der Padding-Box). */
--tilegap: 8px;
padding-bottom: var(--tilegap);
z-index: 1;
}
.grid-item img {
width: 100%;
height: auto;
display: block;
transition: all 0.3s;
}
.grid-item img:hover {
outline: 8px solid rgb(var(--primary));
cursor: zoom-in;
}
.grid-item img.lazy {
filter: blur(20px);
opacity: 0.3 !important;
transform: scale(0.9) !important;
margin-top: 50px;
transition: outline 0.3s, opacity 0.6s ease, transform 0.6s ease, margin 0.6s ease;
}
.grid-item img.lazy.loaded {
filter: blur(0px);
opacity: 1 !important;
transform: scale(1) !important;
margin-top: 0px;
}
.sl-overlay {
opacity: 0.95 !important;
}
#disclaimer p {
font-family: sans-serif;
color: rgba(var(--textcolor),0.5);
font-size: 0.7rem;
text-align: center;
line-height: 1.4em;
background: #fff;
padding: 2rem;
}
@media only screen and (min-width: 500px) {
#heroine,
body.gruene #heroine {
height: 90vh;
background: rgb(var(--primary)) var(--hero) no-repeat center center;
background-size: cover;
background-attachment: fixed;
}
body.half #heroinebg {
position: fixed;
top: 0;
}
body.half #heroine {
height: 98vh;
width: 50vw;
background-attachment: scroll;
/* background-position: top; */
background-color: rgb(var(--primary));
/* position: fixed; */
}
body.half #heroine::before,
body.gruene #heroine::before {
display: none;
}
#heroine::before {
display: none;
}
#heroine div#heads {
top: 25%;
/* padding: 4rem; */
}
body.half #heroine div#heads::before {
width: 25px;
right: auto;
}
body.half #heroine div#heads {
top: 0;
left: auto;
height: 98vh;
width: 50vw;
margin-left: 50vw;
position: absolute;
z-index: 10;
}
#heroine div#heads h1 {
font-size: 5rem;
padding: 1rem 2rem 1.5rem 1.5rem;
padding: .2em .3em .3em .3em;
}
body.gruene #heroine div#heads h1 {
font-size: 5rem;
padding: 1rem 2rem 1.5rem 1.5rem;
padding: .2em .3em .0em .3em;
}
#heroine div#heads h2 {
font-size: 2rem;
padding: .2em .5em .1em .5em;
}
body.gruene #heroine div#heads h2 {
font-size: 2rem;
padding: .2em .5em 0em .5em;
}
body.half #heroine div#heads h2 div {
font-size: 2rem;
padding: 0;
}
section#header a strong:hover {
color: rgb(var(--secondary));
transition: all 0.3s;
}
section#header #homelink:hover svg path {
fill: rgb(var(--secondary));
transition: all 0.3s;
}
ul#albumlinks li a {
width: 100%;
}
div#navidiv {
padding-top: 30px;
display: block; /* inline-block breaks sticky positioning */
}
body.home div#navidiv {
margin-block: 98vh 0px;
display: flow-root;
/* border-bottom: 1px solid transparent; */
}
body.gruene.home div#navidiv {
margin-block: 0vh 0px;
}
div#navidiv a.naviscroll {
opacity: 0.8;
}
div#navidiv a.naviscroll:hover {
transform: scale(120%);
opacity: 1;
}
.grid {
grid-template-columns: repeat(3, 1fr);
column-gap: 1.6%;
}
.grid-item {
--tilegap: 12px;
}
body.half #heroine span#filterspan {
height: 100%;
top: 0;
}
div#maindiv {
margin: 0;
}
}
.grid-item.deferred {
display: none;
}
#loadmore-wrap {
text-align: center;
padding: 1.5rem var(--pagemargin) 2.5rem;
background: #fff;
}
#loadmore-btn {
font-family: var(--textfont);
font-size: 0.9rem;
padding: 0.7em 2em;
border: 2px solid rgb(var(--primary));
border-radius: 100vw;
background: rgb(var(--primary));
color: rgb(var(--white));
cursor: pointer;
transition: all 0.3s;
letter-spacing: 0.03em;
}
#loadmore-btn:hover {
background: transparent;
color: rgb(var(--primary));
}
button.toggle-btn {
font-size: 1.8rem;
border-radius: 100vw;
display: flex;
height: 1.3em;
color: #000;
background: rgb(255,255,255,0.9);
border: none;
aspect-ratio: 1 / 1;
position: absolute;
/* Die Padding-Box der Kachel reicht bis unter das Bild (--tilegap) — ohne den
Aufschlag hinge der Knopf unter der Bildkante. */
bottom: calc(10px + var(--tilegap, 0px));
right: 10px;
z-index: 100;
align-content: center;
flex-wrap: wrap;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
}
button.toggle-btn:hover {
color: #fff;
background: rgb(0,0,0,0.7);
}
/* Auge auf = Bild sichtbar, Auge zu = ausgeblendet. Als Maske über die
background-color eingefärbt — explizit statt currentColor, weil das geerbte
currentColor bei der Farbtransition des Buttons nicht zuverlässig nachzieht
(Icon blieb im Hover schwarz auf schwarz). Schwarz auf weißem Knopf, im Hover
weiß auf schwarzem. Löst das frühere Kreuz ab, das im ausgeblendeten Zustand
nur um 45° gedreht wurde. */
button.toggle-btn .icon-eye {
display: block;
width: 0.55em;
height: 0.55em;
background-color: #000;
transition: background-color 0.3s;
-webkit-mask: url('../img/eye.svg') center / contain no-repeat;
mask: url('../img/eye.svg') center / contain no-repeat;
}
button.toggle-btn:hover .icon-eye {
background-color: #fff;
}
a.hidden button.toggle-btn .icon-eye {
-webkit-mask-image: url('../img/eye-off.svg');
mask-image: url('../img/eye-off.svg');
}
a.hidden img.lazy.loaded {
opacity: 0.2 !important;
}
/* ============================================================
Home-Layout "bigAlbums": großes Album-Übersichtsraster
(kein Album vorausgewählt)
============================================================ */
/* Auf der Übersicht sind die horizontale Album-Navi und der
Bildrechte-Hinweis überflüssig -> ausblenden. */
body.home.bigAlbums div#navidiv,
body.home.bigAlbums #disclaimer {
display: none;
}
/* Bei fixiertem Hero (half-Layout ab 500px) den Platz nachbilden,
den sonst die Navi mit margin-block:98vh reserviert. */
@media only screen and (min-width: 500px) {
body.half.home.bigAlbums div#maindiv.albums-overview {
margin-top: 98vh;
}
}
.albumsgrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(10px, 2vw, 22px);
}
@media only screen and (min-width: 700px) {
.albumsgrid { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (min-width: 1100px) {
.albumsgrid { grid-template-columns: repeat(4, 1fr); }
}
.album-tile {
display: flex;
align-items: flex-end;
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
background: rgb(var(--primary));
text-decoration: none;
}
.album-tile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease, opacity 0.3s ease;
}
.album-tile:hover img {
transform: scale(1.05);
opacity: 0.82;
}
.album-tile-label {
position: relative;
z-index: 1;
width: 100%;
padding: 1.6em 0.8em 0.7em 0.8em;
font-family: var(--headfont);
font-style: var(--headfont-style);
font-weight: var(--headfont-weight);
font-size: clamp(0.95rem, 1.3vw, 1.35rem);
line-height: 1.05em;
color: #fff;
background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 100%);
text-shadow: 0 1px 14px rgba(0,0,0,0.55);
}
/* Platzhalter-Kachel (noch kein Cover): einfarbig, nur Titel */
.album-tile.no-cover .album-tile-label {
background: none;
color: rgb(var(--textcolor-on-primary));
text-shadow: none;
padding: 0.8em;
}
/* Markierung für Alben, die nur Admin/Betreiber sehen (.album.json → visibility:
"admin"). Gäste bekommen diese Kacheln gar nicht erst geliefert — die Pille sagt
dem privilegierten Blick, dass er hier mehr sieht als die Gäste. Sitzt auf dem
der Navi-Leiste und auf der -Kachel des Rasters, beide sonst ohne
eigenen Positionskontext. */
.nuradmin { position: relative; }
.nuradmin::after {
content: "nur Admin";
position: absolute;
top: 0;
left: 0;
z-index: 2;
padding: 0.25em 0.7em;
font-family: var(--textfont);
font-size: 0.7rem;
letter-spacing: 0.04em;
text-transform: none;
color: rgb(var(--textcolor-on-primary));
background: rgba(var(--primary), 0.92);
pointer-events: none;
}
/* Hinweisleiste auf nicht öffentlichen Sites (site.json "public": false).
Sieht nur der eingeloggte Betreiber — alle anderen bekommen gar keine Seite,
sondern engine/render/baustelle.php. */
.privathinweis {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 3000;
padding: 0.35em 1em;
font-size: 0.8rem;
letter-spacing: 0.02em;
text-align: center;
color: rgb(var(--textcolor-on-primary));
background: rgba(var(--primary), 0.92);
pointer-events: none;
}