/* =====================================================
   Sebastian Dela – Portfolio
   Galerie-Ruhe mit feinem Farb-Akzent je Kategorie.
   ===================================================== */

:root{
	--papier:#FFFBF2;
	--tinte:#15130F;
	--c-foto:#2348E5;
	--c-film:#FF4D2E;
	--c-malerei:#FFC700;
	--c-gedanken:#0E8A5F;

	--font-display:"Bricolage Grotesque", system-ui, sans-serif;
	--font-body:"Space Grotesk", system-ui, sans-serif;
	--font-mono:"Space Mono", monospace;

	--linie:1px solid rgba(21,19,15,.18);
	--rand:2px solid var(--tinte);          /* wird von der Timeline genutzt */
	--schatten:8px 8px 0 var(--tinte);      /* wird von der Timeline genutzt */
	--max:1200px;
	--gutter:clamp(1.25rem, 4vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
	margin:0;
	background:var(--papier);
	color:var(--tinte);
	font-family:var(--font-body);
	font-size:1.0625rem;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

.mono{
	font-family:var(--font-mono);
	font-size:.78rem;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.skip-link{
	position:absolute; left:-999px; top:0;
	background:var(--tinte); color:var(--papier);
	padding:.5rem 1rem; z-index:1000;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{
	outline:2px solid var(--c-foto);
	outline-offset:3px;
}

/* =====================================================
   Header
   ===================================================== */
.site-header{
	position:fixed; inset:0 0 auto 0;
	display:flex; align-items:center; justify-content:space-between;
	padding:1.4rem var(--gutter);
	z-index:100;
	pointer-events:none;
}
.site-header > *{ pointer-events:auto; }

.site-title{
	font-family:var(--font-display);
	font-weight:600;
	font-size:1.05rem;
	letter-spacing:.01em;
	text-decoration:none;
	transition:opacity .2s ease;
}
.site-title:hover{ opacity:.6; }
.site-title .punkt{ color:var(--c-film); }

.menu-toggle{
	background:transparent;
	border:none;
	width:44px; height:44px;
	display:grid; place-items:center;
	cursor:pointer;
	padding:0;
}
.burger{ display:grid; gap:6px; }
.burger i{
	width:26px; height:2px;
	background:var(--tinte);
	transition:transform .25s ease, opacity .2s ease, background .2s ease;
}
.menu-toggle:hover .burger i{ background:var(--c-film); }
.menu-toggle[aria-expanded="true"] .burger i:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger i:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .burger i:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* =====================================================
   Overlay-Menü – hell und ruhig
   ===================================================== */
.overlay-menu{
	position:fixed; inset:0;
	background:var(--papier);
	color:var(--tinte);
	z-index:90;
	display:grid;
	place-content:center;
	text-align:center;
	overflow:hidden;
	opacity:0;
	transition:opacity .25s ease;
}
.overlay-menu[hidden]{ display:none; }
.overlay-menu.offen{ opacity:1; }

.overlay-liste{ list-style:none; margin:0; padding:0; position:relative; z-index:2; }
.overlay-liste li{ margin:.5em 0; }
.overlay-liste a{
	font-family:var(--font-display);
	font-weight:600;
	font-size:clamp(1.8rem, 5.5vw, 3rem);
	line-height:1.1;
	text-decoration:none;
	padding-bottom:.1em;
	background-image:linear-gradient(currentColor, currentColor);
	background-repeat:no-repeat;
	background-size:0% 2px;
	background-position:0 100%;
	transition:background-size .3s ease, color .2s ease;
}
.overlay-liste a:hover{ background-size:100% 2px; }
.overlay-liste li:nth-child(4n+1) a:hover{ color:var(--c-foto); }
.overlay-liste li:nth-child(4n+2) a:hover{ color:var(--c-film); }
.overlay-liste li:nth-child(4n+3) a:hover{ color:var(--c-malerei); }
.overlay-liste li:nth-child(4n+4) a:hover{ color:var(--c-gedanken); }

.overlay-fuss{ position:relative; z-index:2; opacity:.45; margin-top:3rem; }

/* Ein einzelner stiller Akzent im Menü */
.overlay-shapes .shape{ position:absolute; }
.overlay-shapes .s-kreis{
	width:46vmin; height:46vmin; border-radius:50%;
	border:1px solid var(--c-malerei);
	background:transparent;
	top:50%; left:50%;
	transform:translate(-50%,-50%);
	z-index:1;
}
.overlay-shapes .s-balken, .overlay-shapes .s-dreieck{ display:none; }

/* =====================================================
   Werk-Reihen (Startseite)
   ===================================================== */
.werk-reihe{
	max-width:var(--max);
	margin:0 auto;
	padding:clamp(3.5rem, 8vw, 6rem) var(--gutter) 0;
}
.werk-reihe-erste{ padding-top:clamp(7rem, 14vw, 9rem); }

.reihe-kopf{
	display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap;
	border-bottom:var(--linie);
	padding-bottom:1.1rem;
	margin-bottom:2.2rem;
}
.kicker{
	margin:0;
	opacity:.55;
}
.kicker::before{
	content:"";
	display:inline-block;
	width:22px; height:2px;
	background:var(--cat, var(--tinte));
	margin-right:.6rem;
	vertical-align:middle;
}
.kicker-hell{ opacity:.55; }

.reihe-titel{
	margin:0;
	font-family:var(--font-display);
	font-weight:600;
	font-size:clamp(1.7rem, 4vw, 2.6rem);
	line-height:1.05;
}

.pop-link{
	margin-left:auto;
	font-family:var(--font-mono);
	font-size:.78rem;
	letter-spacing:.08em;
	text-transform:uppercase;
	text-decoration:none;
	padding-bottom:.2rem;
	border-bottom:2px solid var(--cat, var(--tinte));
	transition:opacity .2s ease;
}
.pop-link:hover{ opacity:.6; }
.pop-link span{ display:inline-block; transition:transform .2s ease; }
.pop-link:hover span{ transform:translateX(4px); }

.werk-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:clamp(1.6rem, 3.5vw, 2.6rem);
}

/* =====================================================
   Werk-Karte – Galerie-Stil
   ===================================================== */
.werk-karte, .masonry-karte{
	display:block;
	text-decoration:none;
}

.werk-bild{
	display:block;
	position:relative;
	overflow:hidden;
	background:#EDE8DC;
}
.werk-bild img{
	width:100%;
	transition:transform .5s ease;
}
.werk-karte:hover .werk-bild img,
.masonry-karte:hover .werk-bild img{ transform:scale(1.025); }

.werk-platzhalter{
	display:block;
	aspect-ratio:4/5;
	background:
		radial-gradient(rgba(21,19,15,.18) 1px, transparent 1.5px) 0 0/14px 14px,
		#EDE8DC;
}

.werk-meta{
	display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
	padding:.9rem .1rem 0;
}
.werk-titel{
	font-family:var(--font-display);
	font-weight:600;
	font-size:1rem;
	line-height:1.3;
}
.werk-titel::after{
	content:"";
	display:block;
	width:0; height:2px;
	background:var(--cat, var(--tinte));
	margin-top:.3rem;
	transition:width .3s ease;
}
.werk-karte:hover .werk-titel::after,
.masonry-karte:hover .werk-titel::after{ width:34px; }

.werk-datum{ opacity:.5; white-space:nowrap; }

/* Play-Hinweis für Filme – zurückhaltend */
.play-badge{
	position:absolute;
	right:.9rem; bottom:.9rem;
	width:44px; height:44px;
	display:grid; place-items:center;
	background:rgba(255,251,242,.92);
	color:var(--tinte);
	border-radius:50%;
	transition:transform .25s ease, background .25s ease, color .25s ease;
}
.play-badge svg{ width:20px; height:20px; }
.werk-karte:hover .play-badge,
.masonry-karte:hover .play-badge,
.tl-karte:hover .play-badge{ background:var(--c-film); color:var(--papier); transform:scale(1.06); }

/* =====================================================
   Gedanken-Teaser – ruhig, mit grünem Akzent
   ===================================================== */
.gedanken-teaser{
	max-width:var(--max);
	margin:clamp(3.5rem, 8vw, 6rem) auto 0;
	padding:0 var(--gutter);
	color:var(--tinte);
}

.gedanken-grid{
	display:grid; grid-template-columns:1fr 1fr;
	gap:clamp(1.6rem, 3.5vw, 2.6rem);
}
.gedanke-karte{
	text-decoration:none;
	border-left:2px solid var(--cat, var(--c-gedanken));
	padding:.3rem 0 .3rem 1.4rem;
}
.gedanke-karte h3{
	font-family:var(--font-display);
	font-weight:600;
	font-size:clamp(1.2rem, 2.2vw, 1.45rem);
	margin:.5rem 0 .55rem;
	line-height:1.2;
}
.gedanke-karte p{ margin:0 0 .9rem; opacity:.85; }
.gedanke-datum{ opacity:.5; }

.weiterlesen{
	text-decoration:none;
	border-bottom:2px solid var(--cat, var(--tinte));
	padding-bottom:.15rem;
}
.weiterlesen span{ display:inline-block; transition:transform .2s ease; }
.gedanke-karte:hover .weiterlesen span,
.tl-karte:hover .weiterlesen span{ transform:translateX(4px); }

/* =====================================================
   Kategorie-Seite
   ===================================================== */
.kategorie-kopf{
	max-width:var(--max);
	margin:0 auto;
	padding:clamp(8rem, 16vw, 10rem) var(--gutter) clamp(2rem, 4vw, 3rem);
}
.kategorie-titel{
	font-family:var(--font-display);
	font-weight:600;
	font-size:clamp(2.6rem, 7vw, 4.6rem);
	line-height:1;
	margin:.7rem 0 .5rem;
	display:inline-block;
}
.kategorie-titel::after{
	content:"";
	display:block;
	width:56px; height:3px;
	background:var(--cat, var(--tinte));
	margin-top:.9rem;
}
.kategorie-anzahl{ opacity:.5; margin:0; }

.kategorie-grid-wrap{
	max-width:var(--max);
	margin:0 auto;
	padding:clamp(2rem, 5vw, 3.5rem) var(--gutter) 0;
}

/* Masonry über CSS-Columns: natürliche Bildformate bleiben erhalten */
.masonry{
	columns:3;
	column-gap:clamp(1.6rem, 3.5vw, 2.6rem);
}
.masonry-karte{
	display:inline-block;
	width:100%;
	margin:0 0 clamp(1.8rem, 4vw, 2.8rem);
	break-inside:avoid;
}

.leer-hinweis{
	max-width:var(--max);
	margin:3rem auto;
	padding:0 var(--gutter);
	opacity:.7;
}

/* =====================================================
   Einzelbeitrag
   ===================================================== */
.beitrag{
	max-width:820px;
	margin:0 auto;
	padding:clamp(8rem, 15vw, 10rem) var(--gutter) 0;
}

.cat-chip{
	display:inline-flex;
	align-items:center;
	gap:.55rem;
	text-decoration:none;
	opacity:.7;
	transition:opacity .2s ease;
}
.cat-chip::before{
	content:"";
	width:9px; height:9px; border-radius:50%;
	background:var(--cat, var(--tinte));
}
.cat-chip:hover{ opacity:1; }

.beitrag-titel{
	font-family:var(--font-display);
	font-weight:600;
	font-size:clamp(2rem, 5.5vw, 3.4rem);
	line-height:1.08;
	margin:1rem 0 .5rem;
}
.beitrag-datum{ opacity:.5; margin:0 0 2.2rem; }

.beitrag-bild{ margin:0 0 2.5rem; }

.beitrag-inhalt{ font-size:1.1rem; }
.beitrag-inhalt p{ margin:0 0 1.4em; }
.beitrag-inhalt h2, .beitrag-inhalt h3{
	font-family:var(--font-display);
	font-weight:600;
	line-height:1.2;
	margin:1.8em 0 .6em;
}
.beitrag-inhalt img{ margin:1.8rem 0; }
.beitrag-inhalt blockquote{
	margin:2rem 0;
	padding:.2rem 0 .2rem 1.4rem;
	border-left:2px solid var(--cat, var(--tinte));
	font-style:italic;
	opacity:.9;
}
.beitrag-inhalt a{
	color:inherit;
	text-decoration-color:var(--cat, var(--c-foto));
	text-decoration-thickness:2px;
	text-underline-offset:3px;
}

.beitrag-inhalt .wp-block-embed,
.beitrag-inhalt iframe{ max-width:100%; }
.wp-block-embed{ margin:2rem 0; }
.beitrag-film .wp-block-embed__wrapper,
.beitrag-film iframe{ background:var(--tinte); }

.beitrag-nav{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1.2rem;
	margin:3.5rem 0 0;
	border-top:var(--linie);
	padding-top:1.8rem;
}
.nav-karte{
	text-decoration:none;
	display:grid; gap:.3rem;
	transition:opacity .2s ease;
}
.nav-karte:hover{ opacity:.6; }
.nav-karte .mono{ opacity:.5; }
.nav-karte strong{ font-family:var(--font-display); font-weight:600; }
.nav-karte-rechts{ text-align:right; }

/* =====================================================
   Pagination
   ===================================================== */
.pagination{
	max-width:var(--max);
	margin:0 auto;
	padding:3rem var(--gutter);
	display:flex; justify-content:center;
}
.pagination .nav-links, .pagination > *{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; align-items:center; }
.pagination a, .pagination .current, .pagination span.page-numbers{
	text-decoration:none;
	padding:.3rem .2rem;
}
.pagination a{ border-bottom:2px solid transparent; transition:border-color .2s ease; }
.pagination a:hover{ border-color:var(--tinte); }
.pagination .current{ border-bottom:2px solid var(--tinte); }

/* =====================================================
   Footer
   ===================================================== */
.site-footer{
	margin-top:clamp(4rem, 9vw, 7rem);
	border-top:var(--linie);
}
.footer-inner{
	max-width:var(--max);
	margin:0 auto;
	padding:2.2rem var(--gutter) 2.6rem;
	display:flex; flex-wrap:wrap; align-items:baseline; gap:1.5rem;
}
.footer-inner .mono{ opacity:.5; margin:0; }
.footer-menu{
	list-style:none; margin:0 0 0 auto; padding:0;
	display:flex; gap:1.6rem; flex-wrap:wrap;
}
.footer-menu a{
	text-decoration:none;
	opacity:.7;
	transition:opacity .2s ease;
}
.footer-menu a:hover{ opacity:1; }

/* =====================================================
   Scroll-Reveal
   ===================================================== */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.sichtbar{ opacity:1; transform:none; }

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width:1024px){
	.werk-grid{ grid-template-columns:repeat(2, 1fr); }
	.masonry{ columns:2; }
}

@media (max-width:768px){
	.gedanken-grid{ grid-template-columns:1fr; }
	.beitrag-nav{ grid-template-columns:1fr; }
	.nav-karte-rechts{ text-align:left; }
	.pop-link{ margin-left:0; }
}

@media (max-width:480px){
	.werk-grid{ grid-template-columns:1fr; }
	.masonry{ columns:1; }
	.play-badge{ width:40px; height:40px; }
}

/* =====================================================
   Reduzierte Bewegung
   ===================================================== */
@media (prefers-reduced-motion: reduce){
	*{ animation:none !important; transition:none !important; }
	.reveal{ opacity:1; transform:none; }
	html{ scroll-behavior:auto; }
}