/*
Theme Name: Momente
Description: Responsives Foto-Portfolio-Theme mit Wasserzeichen und drei Bildgrößen (Thumb, Normal, Original/RAW).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: momente
*/

:root{
  --bg:#1c1f1b;
  --bg-soft:#252923;
  --text:#e7e5dc;
  --muted:#999d90;
  --line:#383d34;
  --accent:#a9bd8f;
  --gap:12px;
  --serif:ui-serif,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--sans)}
a{color:inherit}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%;height:auto}

/* Kopf */
.site-header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;padding:1.5rem clamp(1rem,4vw,3rem)}
.site-title{font:italic 400 clamp(1.5rem,4vw,2.2rem)/1.1 var(--serif);text-decoration:none;letter-spacing:.01em}
.site-nav ul{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;list-style:none;margin:0;padding:0}
.site-nav a{text-decoration:none;color:var(--muted)}
.site-nav a:hover,.site-nav .current-menu-item a{color:var(--text)}

.wrap{padding:0 clamp(1rem,4vw,3rem) 3rem;max-width:1800px;margin:0 auto}

/* Serien-Filter */
.filter{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;list-style:none;margin:0 0 1.5rem;padding:0 0 .75rem;border-bottom:1px solid var(--line)}
.filter a{text-decoration:none;color:var(--muted);padding:.25rem 0;display:inline-block}
.filter a:hover{color:var(--text)}
.filter a.is-active{color:var(--text);box-shadow:0 2px 0 var(--accent)}

/* Raster: Spalten passen sich der Breite an, Bilder behalten ihr Seitenverhältnis */
.grid{column-width:280px;column-gap:var(--gap)}
.grid__item{display:block;position:relative;break-inside:avoid;margin:0 0 var(--gap);text-decoration:none;background:var(--bg-soft)}
.grid__title{position:absolute;left:0;right:0;bottom:0;padding:2rem .75rem .6rem;line-height:1.3;font-size:.9rem;
  background:linear-gradient(transparent,rgba(0,0,0,.65));opacity:0;transition:opacity .2s;pointer-events:none}
.grid__item:hover .grid__title,.grid__item:focus-visible .grid__title{opacity:1}
@media (hover:none){.grid__title{display:none}}

/* Themen-Einstieg */
.topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--gap)}
.topic{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;text-decoration:none;background:var(--bg-soft)}
.topic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.topic:hover img,.topic:focus-visible img{transform:scale(1.04)}
.topic::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.7))}
.topic__name{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;z-index:1;font:italic 400 clamp(1.4rem,3vw,1.9rem)/1.15 var(--serif);color:#fff}
.topic__desc{position:absolute;left:1.1rem;right:1.1rem;bottom:.4rem;z-index:1;font-size:.8rem;color:rgba(255,255,255,.8)}
.topic__name:has(+ .topic__desc){bottom:1.8rem}
@media (prefers-reduced-motion:reduce){.topic img{transition:none}.topic:hover img{transform:none}}

.crumbs{color:var(--muted);font-size:.9rem;margin-bottom:.5rem}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--text)}
.archive-title{font:italic 400 clamp(1.8rem,4vw,2.6rem)/1.1 var(--serif);margin:0 0 .5rem}
.archive-desc{max-width:65ch;color:var(--muted);margin:0 0 1.25rem}
.foto-topic{margin:0 0 .75rem;color:var(--muted);font-size:.9rem}
.foto-topic a{text-decoration:none;color:var(--accent)}

/* Einzelbild */
.single-foto-view{max-width:1400px;margin:0 auto}
.single-img img{display:block;width:100%;height:auto}
.single-foto-view h1{font:italic 400 clamp(1.5rem,3.5vw,2.2rem)/1.2 var(--serif);margin:1.25rem 0 .5rem}
.entry{max-width:65ch;color:var(--text)}
.exif{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;list-style:none;padding:0;margin:1rem 0;color:var(--muted);font-size:.9rem}
.exif b{font-weight:600;color:var(--text);margin-right:.35em}
.foto-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line)}
.foto-nav a{text-decoration:none;color:var(--muted)}
.foto-nav a:hover{color:var(--text)}
.raw-link{display:inline-block;margin-top:.5rem;padding:.4rem .9rem;border:1px solid var(--accent);color:var(--accent);text-decoration:none;border-radius:2px}
.raw-link:hover{background:var(--accent);color:var(--bg)}

/* Seiten / Beiträge */
.page-content{max-width:70ch;margin:0 auto}
.page-content h1{font:italic 400 2rem/1.2 var(--serif)}

/* Blättern */
.pagination{margin-top:2rem}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}
.pagination a,.pagination .current{padding:.25rem .5rem;text-decoration:none;color:var(--muted)}
.pagination .current{color:var(--text);box-shadow:0 2px 0 var(--accent)}

.site-footer{padding:2rem clamp(1rem,4vw,3rem);border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.screen-reader-text{position:absolute;left:-9999px}