/*
Theme Name: alpa-ka-theme 3
Theme URI: https://akabasakal.de
Author: Alparslan
Description: Ein einziger, endloser Bildlauf. Links Titel, about und Projektliste mit Infos, rechts alle Projekte als dichtes Bildraster. Zweisprachig (DE/EN).
Version: 3.6.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: alpa-ka
*/

/* ------------------------------------------------------------------
   Schriften: lokal eingebunden, Auswahl im Customizer (Lizenzen: assets/fonts)
   Geladen wird nur die gewählte Schrift.
------------------------------------------------------------------ */
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url("assets/fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url("assets/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Syne";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("assets/fonts/syne-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Syne";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("assets/fonts/syne-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Familjen Grotesk";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/familjen-grotesk-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Familjen Grotesk";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/newsreader-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Newsreader";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/newsreader-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   Basis
------------------------------------------------------------------ */
:root {
	--paper: #ebebea;
	--ink: #000;
	--mute: #6e6e6e;
	--sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fs: 12.5px;
	--pad: clamp(12px, 1.6vw, 24px);
	--gap: clamp(8px, 1.1vw, 18px);
	--tile: clamp(5px, .55vw, 9px);
	--cell: 230px;
	--bar: 3rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--fs);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 400; margin: 0; font-size: inherit; }
p { margin: 0 0 .9em; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.menu-type { color: var(--mute); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--paper); padding: .5em 1em; z-index: 100; }
.skip-link:focus { left: var(--pad); top: var(--pad); }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprachumschaltung: ohne JS bleiben beide Sprachen sichtbar */
html.is-de .lang-en { display: none; }
html.is-en .lang-de { display: none; }

/* ------------------------------------------------------------------
   Gerüst: drei Spalten
------------------------------------------------------------------ */
.shell {
	display: grid;
	grid-template-columns: minmax(10rem, 13vw) minmax(17rem, 27vw) minmax(0, 1fr);
	height: 100vh;
	height: 100dvh;
}

/* Spalte 1: Titel oben, Sprache mittig, unten Kontakt, about, Impressum */
.col-meta {
	display: grid; grid-template-rows: 1fr auto 1fr;
	min-height: 0; padding: var(--pad) .4rem var(--pad) var(--pad);
}
.meta-top { align-self: start; }
.meta-mid { align-self: center; }
.meta-bottom { align-self: end; display: flex; flex-direction: column; gap: 1.1em; color: var(--mute); }
.meta-bottom a { color: var(--ink); }
.contact div, .legal a, .about-link { white-space: nowrap; } /* E-Mail und Links nie umbrechen */
.site-title { display: block; }
.about-link { display: block; text-transform: lowercase; }
.about-link.is-current { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.lang-switch { color: var(--mute); }
.lang-switch button { color: var(--mute); }
.lang-switch button[aria-pressed="true"] { color: var(--ink); }
.lang-switch button:hover { color: var(--ink); }
.legal .menu { display: flex; flex-direction: column; }
.legal a, .legal button { text-transform: lowercase; }
.legal button { color: var(--ink); }
.legal button:hover, .list__legal button:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.list-toggle, .list-close { display: none; text-transform: lowercase; }

/* Spalte 2: Liste und Infos, vollständig sichtbar (die Schrift passt sich der Höhe an, siehe main.js) */
.col-list {
	display: flex; flex-direction: column; min-height: 0;
	padding: var(--pad) var(--gap) var(--pad) 0;
}
.list { flex: none; margin-bottom: 3.8em; font-size: calc(var(--fs) * var(--fit-list, 1)); }
.list a, .menu-toggle { text-transform: lowercase; }
.list a.is-active { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.list .menu-item { line-height: 1.45; }

/* Kategorien (z. B. Essay): beim Überfahren klappen die Projekte darunter auf, ohne die Liste zu verschieben */
.menu-item-has-children { position: relative; }
.menu-toggle::after { content: " +"; color: var(--mute); }
.sub-menu {
	display: none; position: absolute; left: 1.1em; top: 100%; z-index: 5;
	min-width: 12em; padding: .15em 0 .5em; background: var(--paper);
}
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu,
.menu-item-has-children.is-open > .sub-menu { display: block; }
/* enthält die Kategorie das aktuelle Projekt, steht sie dauerhaft offen */
.menu-item-has-children.has-active > .sub-menu { display: block; position: static; margin: .1em 0 .4em 1.1em; padding: 0; }

.info {
	flex: none; margin-top: auto; /* Infos stehen unten in der Spalte */
	font-size: calc(var(--fs) * .96 * var(--fit-info, 1));
	line-height: 1.5;
}
.info.is-clipped { overflow-y: auto; scrollbar-width: none; }
.info.is-clipped::-webkit-scrollbar { display: none; }
.info:empty { display: none; }
.info__title { margin-bottom: .6em; }
.info__facts { color: var(--mute); margin-bottom: 1em; }
.info__facts p:last-child, .info__text p:last-child { margin-bottom: 0; }
.list__legal { display: none; }

/* Spalte 3 */
.col-main { min-width: 0; min-height: 0; position: relative; }

body.alpa-home .col-main { overflow: hidden; }
body:not(.alpa-home) .col-main { overflow-y: auto; padding: var(--pad); }
.notice { padding: var(--pad); color: var(--mute); }

/* ------------------------------------------------------------------
   Bildlauf: pro Projekt ein dichtes Raster
------------------------------------------------------------------ */
.stream {
	position: relative; height: 100%;
	overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none;
	scrollbar-width: none;
}
.stream::-webkit-scrollbar { display: none; }
.stream__inner { position: relative; will-change: transform; }

.block { padding: 6vh var(--pad) 6vh 0; }
.block__head { margin-bottom: 1.1em; color: var(--mute); text-transform: lowercase; }

/* Spalten füllen sich nacheinander; verschieden hohe Bilder rücken dicht zusammen */
.shots { column-width: var(--cell); column-gap: var(--tile); }
.shots.is-cols { display: flex; align-items: flex-start; column-width: auto; gap: var(--tile); }
.shots__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--tile); }
.shots.is-cols .shot, .lb__grid.is-cols .lb__thumb { margin: 0; }
.shot {
	margin: 0 0 var(--tile);
	break-inside: avoid; -webkit-column-break-inside: avoid;
	aspect-ratio: var(--ar);
}
.shot a { display: block; height: 100%; cursor: zoom-in; }
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------
   Seiten (about, Impressum, …) in der dritten Spalte
------------------------------------------------------------------ */
.entry {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
	column-gap: var(--gap); row-gap: 1em; max-width: 1000px;
}
.entry__title { grid-column: 1; }
.entry__content { grid-column: 2; max-width: 66ch; }
.entry__content > :last-child { margin-bottom: 0; }
.entry__content a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.entry__content h2, .entry__content h3, .entry__content h4 { margin: 1.8em 0 .4em; color: var(--mute); }
.entry__content h2:first-child, .entry__content h3:first-child { margin-top: 0; }
.entry__content ul { list-style: disc; padding-left: 1.2em; margin: 0 0 1em; }
.entry__content ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 1em; }
.entry__content figure { margin: 0 0 1em; }
.entry__content figcaption { color: var(--mute); }
.entry__content blockquote { margin: 0 0 1em; padding-left: 1em; border-left: 1px solid var(--mute); }
.entry__content img { max-width: 100%; height: auto; }

/* about: kleines Bild links, Text rechts */
.about__img { grid-column: 1; grid-row: 1 / span 2; margin: 0; max-width: 200px; }
.about__img img { width: 100%; height: auto; }
.about__text { grid-row: 1; }
.about__more { grid-row: 2; }

/* about: Tabelle mit Ausstellungen, Ausbildung … */
.cv { grid-column: 1 / -1; margin-top: calc(var(--gap) * 2); }
.cv__section {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
	column-gap: var(--gap); margin-bottom: calc(var(--gap) * 1.8);
}
.cv__heading { grid-column: 1; color: var(--mute); }
.cv__table { grid-column: 2; border-collapse: collapse; width: 100%; max-width: 70ch; }
.cv__table th {
	width: 5.5em; padding: 0 1em .35em 0; text-align: left; font-weight: 400;
	color: var(--mute); vertical-align: top; font-variant-numeric: tabular-nums;
}
.cv__table td { padding: 0 0 .35em; vertical-align: top; }
.cv__table a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

/* ------------------------------------------------------------------
   Handy: oben eine schmale Leiste, Projektliste als Fläche
------------------------------------------------------------------ */
@media (max-width: 899px) {
	.shell { display: block; height: auto; }

	.col-meta {
		position: sticky; top: 0; z-index: 40; background: var(--paper);
		display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em 1.2em;
		padding: .8rem var(--pad);
	}
	.meta-top, .meta-mid { align-self: auto; display: flex; gap: 1.2em; }
	.meta-bottom { display: contents; }
	.contact, .legal { display: none; }
	.about-link { order: 3; }
	.list-toggle { display: inline; }

	.col-list { display: contents; }
	.list {
		display: none; position: fixed; inset: 0; z-index: 50; margin: 0;
		background: var(--paper); padding: 3.4rem var(--pad) var(--pad); overflow-y: auto;
	}
	body.list-open .list { display: block; }
	body.list-open { overflow: hidden; }
	.list-close { display: none; position: fixed; top: .8rem; right: var(--pad); z-index: 60; }
	body.list-open .list-close { display: block; }
	.sub-menu { position: static; padding: 0; margin: .1em 0 .4em 1.1em; }
	.list__legal { display: block; margin-top: 2.2em; color: var(--mute); }
	.list__legal a, .list__legal button { text-transform: lowercase; color: var(--ink); }
	.list__legal .menu { display: flex; gap: 1.2em; }

	/* Projekttext: untere Bildschirmhälfte, der Bildlauf liegt darüber */
	.info { display: none; }
	body.alpa-split .info {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
		height: calc(var(--info-h, 34) * 1vh); margin: 0; padding: .8rem var(--pad);
		font-size: calc(var(--fs) * .92);
		background: var(--paper); border-top: 1px solid rgba(0, 0, 0, .14);
		overflow-y: auto; scrollbar-width: none;
	}
	body.alpa-split .info::-webkit-scrollbar { display: none; }
	body.alpa-home.alpa-split .col-main { height: calc((100 - var(--info-h, 34)) * 1vh - var(--bar)); }
	@supports (height: 1dvh) {
		body.alpa-split .info { height: calc(var(--info-h, 34) * 1dvh); }
		body.alpa-home.alpa-split .col-main { height: calc((100 - var(--info-h, 34)) * 1dvh - var(--bar)); }
	}

	body.alpa-home .col-main { height: calc(100vh - var(--bar)); height: calc(100dvh - var(--bar)); }
	body:not(.alpa-home) .col-main { overflow: visible; }
	.block { padding-left: var(--pad); }
	.shots { column-width: 8.5rem; } /* ohne JavaScript; mit JavaScript gilt die Spaltenaufteilung unten */

	.entry { grid-template-columns: 1fr; }
	.entry__title, .entry__content, .about__text, .about__more { grid-column: 1; grid-row: auto; }
	.about__img { grid-column: 1; grid-row: auto; max-width: min(55%, 220px); }
	.cv__section { grid-template-columns: 1fr; }
	.cv__heading, .cv__table { grid-column: 1; }
	.cv__heading { margin-bottom: .4em; }
}

/* ------------------------------------------------------------------
   Cookie-Hinweis: gleiche Gewichtung für zustimmen und ablehnen
------------------------------------------------------------------ */
.consent {
	position: fixed; right: var(--pad); bottom: var(--pad); z-index: 90;
	width: min(27rem, calc(100vw - 2 * var(--pad)));
	padding: 1rem 1.1rem 1.1rem;
	background: var(--paper); color: var(--ink);
	border: 1px solid var(--ink);
	font-size: var(--fs); line-height: 1.5;
}
.consent[hidden], .consent__opts[hidden], .consent__actions button[hidden] { display: none; }
.consent:focus { outline: none; }
.consent__title { margin: 0 0 .6em; color: var(--mute); text-transform: lowercase; }
.consent__text { margin: 0 0 1em; }
.consent__text a { margin-left: .3em; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; text-transform: lowercase; }
.consent__opts { display: grid; gap: .7em; margin: 0 0 1em; }
.consent__opt { display: flex; align-items: flex-start; gap: .7em; cursor: pointer; }
.consent__opt input { margin: .3em 0 0; accent-color: var(--ink); }
.consent__note { display: block; color: var(--mute); }
.consent__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.consent__actions button {
	flex: 1 1 auto; padding: .55em .9em; text-align: center; text-transform: lowercase;
	border: 1px solid var(--ink);
}
.consent__actions button:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 899px) {
	.consent {
		left: 0; right: 0; bottom: 0; width: auto; border-width: 1px 0 0;
		padding: .9rem var(--pad) calc(.9rem + env(safe-area-inset-bottom, 0px));
		max-height: 75vh; overflow-y: auto;
	}
}

/* ------------------------------------------------------------------
   Bildansicht (Overlay): großes Bild, darunter die Texte, darunter das Raster
------------------------------------------------------------------ */
.lb {
	position: fixed; inset: 0; z-index: 200; background: var(--paper);
	overflow-y: auto; overscroll-behavior: contain;
}
.lb[hidden] { display: none; }
.lb__inner { max-width: 1500px; margin: 0 auto; padding: var(--pad) var(--pad) calc(var(--pad) * 3); }

.lb__stage { position: relative; height: clamp(260px, 72vh, 860px); }
.lb__img { width: 100%; height: 100%; object-fit: contain; }
.lb__zone { position: absolute; top: 0; bottom: 0; width: 50%; padding: 0; border: 0; background: none; outline: none; -webkit-tap-highlight-color: transparent; }
.lb__zone:focus, .lb__zone:focus-visible { outline: none; }
.lb__zone--prev {
	left: 0;
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M26 16H8M15 9l-7 7 7 7' fill='none' stroke='%23fff' stroke-width='5'/%3E%3Cpath d='M26 16H8M15 9l-7 7 7 7' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 16 16, w-resize;
}
.lb__zone--next {
	right: 0;
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 16H24M17 9l7 7-7 7' fill='none' stroke='%23fff' stroke-width='5'/%3E%3Cpath d='M6 16H24M17 9l7 7-7 7' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 16 16, e-resize;
}
.lb__head[hidden], .lb__grid[hidden] { display: none; }
.lb__stage[data-out] .lb__zone { cursor: zoom-out; }
.lb--single .lb__zone, .lb--single .lb__count, .lb--single [data-lb="prev"], .lb--single [data-lb="next"] { display: none; }

.lb__bar {
	display: grid; grid-template-columns: 1fr 2fr 1fr; gap: var(--gap);
	padding-top: .8em; align-items: baseline;
}
.lb__count { color: var(--mute); font-variant-numeric: tabular-nums; }
.lb__caption { text-align: center; }
.lb__ctrl { justify-self: end; display: flex; gap: 1.2em; }
.lb__ctrl button:hover { text-decoration: underline; text-underline-offset: .2em; }

.lb__head {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
	column-gap: var(--gap); row-gap: 1em; margin-top: calc(var(--gap) * 3);
}
.lb__head .info__title { grid-column: 1; }
.lb__more { grid-column: 2; max-width: 66ch; }

.lb__grid { margin-top: calc(var(--gap) * 3); column-width: 9rem; column-gap: var(--tile); }
.lb__thumb {
	display: block; width: 100%; margin: 0 0 var(--tile); padding: 0;
	aspect-ratio: var(--ar); break-inside: avoid;
}
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb__grid.is-cols { display: flex; align-items: flex-start; column-width: auto; gap: var(--tile); }
.lb__thumb.is-current { outline: 1px solid var(--ink); outline-offset: 2px; }

@media (max-width: 899px) {
	.lb__bar { grid-template-columns: 1fr auto; }
	.lb__caption { grid-column: 1 / -1; grid-row: 2; text-align: left; }
	.lb__head { grid-template-columns: 1fr; }
	.lb__head .info__title, .lb__more { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
}