/*
Theme Name: Noir Portfolio
Theme URI: https://example.com
Author: (dein Name)
Description: Minimalistisches, zeitgenössisches Portfolio-Theme (Dark) für Kunst/Künstlerinnen. Hero (Bild/Video), Customizer Farben/Typo, Kunstwerke (CPT) mit Kategorien, Homepage-Teaser via Shortcode.
Version: 1.4.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noir-portfolio
Tags: portfolio, dark, minimalist, responsive
*/

:root{
  --bg: #0b0b0c;
  --surface: rgba(255,255,255,0.04);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.68);
  --accent: #e7d7b5;

  /* Modern/Sans defaults */
  --body-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --heading-font: "Space Grotesk", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --nav-height: 76px;
  --container: 1120px;

  --radius: 18px;
  --shadow: 0 18px 55px rgba(0,0,0,0.35);
  --line: rgba(255,255,255,0.12);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body-font);
  line-height: 1.55;
  letter-spacing: 0.2px;
  text-rendering: geometricPrecision;
}

a{ color: inherit; text-decoration: none; }
a:hover{ opacity: 0.92; }
img{ max-width: 100%; height: auto; display:block; }
video{ max-width: 100%; display:block; }

.container{ width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }

/* Accessibility */
.skip-link{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left: 18px; top: 18px; width:auto; height:auto; padding: 10px 12px; background: #fff; color:#000; border-radius: 10px; z-index: 9999; }

/* Header / Navigation */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,10,12,0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: transform 260ms ease, background 260ms ease;
  will-change: transform;
}
.site-header.header-hidden{ transform: translateY(calc(-1 * var(--nav-height))); }

.navbar{ height: var(--nav-height); display:flex; align-items:center; justify-content: space-between; gap: 18px; }

.brand{ display:flex; align-items:center; gap: 12px; min-width: 180px; }
.site-title{ font-family: var(--heading-font); letter-spacing: 0.06em; font-size: 18px; margin:0; text-transform: uppercase; }
.site-description{ margin:0; font-size: 12px; color: var(--muted); }

.menu-toggle{ display:none; border: 1px solid var(--line); background: transparent; color: var(--text); padding: 10px 12px; border-radius: 12px; cursor:pointer; margin-left: auto; }

.primary-menu{ display:flex; align-items:center; justify-content: flex-end; gap: 26px; list-style:none; margin:0; padding:0; }
.primary-menu a{ display:inline-block; padding: 10px 2px; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); opacity: 0.88; position: relative; }
.primary-menu a::after{ content:""; position:absolute; left:0; bottom: 6px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; opacity: 0.85; }
.primary-menu a:hover{ opacity: 1; }
.primary-menu a:hover::after{ transform: scaleX(1); }
.current-menu-item > a,.current_page_item > a{ opacity: 1; }
.current-menu-item > a::after,.current_page_item > a::after{ transform: scaleX(1); }



.menu-toggle::before{
  content: "☰";
  font-size: 24px;
}

.site-header.is-open .menu-toggle::before{
  content: "✕";
}

.menu-toggle{
  margin-left: auto;
  background: none;
  border: none;
  font-size: 24px;
}





/* Hero */
.hero{ position: relative; width: 100%; min-height: calc(100vh - var(--nav-height)); overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-media{ position:absolute; inset:0; width: 100%; height: 100%; }
.hero-media img,.hero-media video{ width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.05); }
.hero-overlay{ position:absolute; inset:0; background: radial-gradient(1200px 520px at 18% 22%, rgba(231,215,181,0.13), transparent 60%), linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.82)); }
.hero-content{ position: relative; height: 100%; display:flex; align-items:flex-end; padding: 64px 0; }
.hero-inner{ width: min(var(--container), calc(100% - 48px)); margin-inline:auto; display:flex; flex-direction: column; gap: 14px; max-width: 860px; }
.hero-kicker{ font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.hero-title{ margin: 0; font-family: var(--heading-font); font-weight: 500; font-size: clamp(34px, 4.2vw, 62px); line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase; }
.hero-subtitle{ margin: 0; font-size: clamp(15px, 1.35vw, 18px); color: rgba(255,255,255,0.84); max-width: 60ch; }
.hero-cta{ display:flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--text); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; transition: transform .15s ease, background .25s ease, border-color .25s ease; }
.btn:hover{ transform: translateY(-1px); border-color: rgba(231,215,181,0.4); background: rgba(231,215,181,0.06); }
.btn--accent{ border-color: rgba(231,215,181,0.35); background: rgba(231,215,181,0.10); }

/* Content areas */
.content{ padding: 54px 0 86px; }

/* Artwork grid (used by shortcode & archives) */
.art-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 22px; }
.art-item{ grid-column: span 4; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.02); overflow:hidden; box-shadow: var(--shadow); transition: transform 180ms ease, border-color 220ms ease; }
.art-item:hover{ transform: translateY(-3px); border-color: rgba(231,215,181,0.35); }
.art-thumb{ aspect-ratio: 4 / 3; background: rgba(255,255,255,0.03); }
.art-thumb img{ width:100%; height:100%; object-fit: cover; }
.art-body{ padding: 16px 18px 18px; }
.art-title{ margin:0 0 8px; font-family: var(--heading-font); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.art-meta{ margin:0; color: var(--muted); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }

/* Artwork detail */
.art-detail{ padding: 54px 0 86px; }
.art-header{ display:grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: start; }
.art-info{ border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.02); box-shadow: var(--shadow); padding: 18px 18px; }
.art-info h1{ margin: 0 0 10px; font-family: var(--heading-font); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.art-info .art-meta{ margin-bottom: 14px; }
.art-spec{ margin: 0; padding: 0; list-style: none; display:flex; flex-direction: column; gap: 8px; }
.art-spec li{ color: var(--muted); }
.art-spec strong{ color: var(--text); font-weight: 500; }
.art-gallery{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.art-gallery figure{ margin: 0; grid-column: span 6; overflow:hidden; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.art-gallery img{ width:100%; height:100%; object-fit: cover; }

/* Footer */
.site-footer{ border-top: 1px solid var(--line); padding: 36px 0; color: var(--muted); font-size: 13px; }

/* Reveal Animations */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 800ms cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.divider{ height: 1px; background: var(--line); position: relative; overflow:hidden; border-radius: 999px; }
.divider::after{ content:""; position:absolute; left:-30%; top:0; height: 100%; width: 30%; background: linear-gradient(90deg, transparent, rgba(231,215,181,0.55), transparent); transform: translateX(0); opacity: 0; }
.divider.is-visible::after{ opacity: 1; animation: sweep 1.5s ease forwards; }
@keyframes sweep{ from { transform: translateX(0); } to { transform: translateX(520%); } }

/* Responsive */
@media (max-width: 980px){
  .art-item{ grid-column: span 6; }
  .art-header{ grid-template-columns: 1fr; }
}
@media (max-width: 860px){
  .menu-toggle{ display:inline-flex; }
  .primary-menu{ position: absolute; display:none !important; 
    right: 0px; top: calc(var(--nav-height) - 8px); flex-direction: column; 
    align-items: flex-start; gap: 0; padding: 12px; 
      background: #fff; border: 1px solid var(--line);
     /*border-radius: 16px; 
     
     */
     min-width: 240px; max-height: 0; display: none; 
     transition: max-height 0.35s ease; }
  .primary-menu.is-open{ display:flex !important; max-height: 1000px;width:100%;  padding-left:24px;}
  .primary-menu a{ width: 100%; padding: 12px 10px; letter-spacing: 0.18em; }
  .art-item{ grid-column: span 12; }
  .art-gallery figure{ grid-column: span 12; }


.site-header.is-open .menu-toggle::before{
  content: "✕";
}


.header-bar{
  display: flex;
  width:100%; 
  
}
/* Menü offen */
.site-header.is-open .primary-menu{
  max-height: 100vh; /* 🔑 über ganzen Screen */
}

#content{
  transition: transform 0.35s ease;
}

/* Wenn Menü offen */
.site-header.is-open ~ #content{
  transform: translateY(100vh);
}


}


/* --- Startseite: Kategorie-Teaser (Shortcode [np_category_teasers]) --- */
.np-cat-teasers{
  width:100%;
  display:grid;
  gap:18px;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  margin-top:22px;
}
.np-cat-teasers .art-item{ grid-column:auto; }
.np-cat-desc{ margin:8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.np-art-short{ margin:10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

@media (max-width: 980px){
  .np-cat-teasers{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .np-cat-teasers{ grid-template-columns: 1fr; }
}

/* Anpassung galerie auf kategoriewahl kunstwerk */
/* Thumbnail Grid in Kategorie-Teaser */
.np-thumb-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}

.np-thumb-img,
.np-thumb-placeholder{
  width:100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  display:block;
}
.art-meta {
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
}

/* -------------------------------------------------------
   Kategorie-Teaser: Multi-Mode (mehr als 1 Kunstwerk)
   - mind. 3 pro Zeile, dann Umbruch
   - Karten bleiben "wie sie sind", aber kompakter
-------------------------------------------------------- */

.np-cat-teasers {
  display: grid;
  gap: 22px;
}

/* Default: falls Theme schon Grid nutzt, überschreibt das nur im Multi-Mode */
.np-cat-teasers--multi {
  /* min 3 pro Zeile, wächst auf mehr wenn Platz */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Größere Screens: gern 4+ pro Zeile möglich */
@media (min-width: 1100px) {
  .np-cat-teasers--multi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1400px) {
  .np-cat-teasers--multi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Kleine Screens: 2/1 Spalten */
@media (max-width: 820px) {
  .np-cat-teasers--multi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .np-cat-teasers--multi {
    grid-template-columns: 1fr;
  }
}

/* Karten im Multi-Mode etwas kompakter, sonst unverändert */
.np-cat-teasers--multi .art-item {
  transform: none;            /* falls Hover-Scale existiert */
}

/* Bildbereich etwas kleiner (nur Multi) */
.np-cat-teasers--multi .art-thumb {
  /* falls dein Theme fixe Höhen nutzt: */
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Typografie kompakter (nur Multi) */
.np-cat-teasers--multi .art-body {
  padding: 14px 16px;         /* kleiner als evtl. default */
}

.np-cat-teasers--multi .art-title {
  font-size: 15px;            /* etwas kleiner */
  line-height: 1.25;
  margin: 8px 0 4px;
}

.np-cat-teasers--multi .art-meta {
  font-size: 12px;
  margin: 0;
}

/* Optional: wenn Titel sehr lang sind → sauber kürzen */
.np-cat-teasers--multi .art-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; 
  overflow: hidden;
}

/* -------------------------------------------
   Shortcode: [np_artwork_list] – Vertical List
-------------------------------------------- */

.np-art-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Cards (einspaltig) */
.np-art-list--cards .np-art-card{
  display:flex;
  gap:14px;
  align-items:stretch;
  text-decoration:none;
  color:inherit;

  /* sehr zurückhaltend, sollte zu deinem Noir-Stil passen */
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  overflow:hidden;
}

.np-art-card__thumb{
  width: 140px;
  flex: 0 0 140px;
  aspect-ratio: 4 / 3;
  overflow:hidden;
}

.np-art-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.np-art-placeholder{
  width:100%;
  height:100%;
  background: rgba(255,255,255,0.04);
}

.np-art-card__body{
  padding: 12px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  min-width:0;
}

.np-art-card__title{
  font-weight:600;
  line-height:1.25;
  /* lange Titel elegant abschneiden */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.np-art-card__meta{
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.np-art-card__desc{
  color: var(--muted);
  font-size: 13px;
  line-height:1.35;
}

/* Hover subtil */
.np-art-list--cards .np-art-card:hover{
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
}

/* Textliste */
.np-art-textlist{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.np-art-textitem{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

.np-art-textitem a{
  text-decoration:none;
  color: inherit;
  font-weight: 600;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.np-art-textitem:hover{
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
}

.np-art-date{
  color: var(--muted);
  font-size: 12px;
  white-space:nowrap;
}

/* "Alle Werke zeigen" Link */
.np-art-all{
  margin-top: 6px;
}

.np-art-all__link{
  color: var(--accent);
  text-decoration:none;
  font-weight:600;
}

.np-art-all__link:hover{
  text-decoration:underline;
}

/* Mobile: Karten untereinander mit Bild oben */
@media (max-width: 560px){
  .np-art-list--cards .np-art-card{
    flex-direction:column;
  }
  .np-art-card__thumb{
    width:100%;
    flex: 0 0 auto;
  }
}

/* ------------------------------------
   Kunstwerk Navigation (oben)
------------------------------------ */

.art-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:24px;
}

.art-nav__btn{
  text-decoration:none;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  padding:8px 12px;
  border-radius:8px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  transition:all .15s ease;
  white-space:nowrap;
}

.art-nav__btn:hover{
  color:var(--text);
  background:rgba(255,255,255,0.07);
  border-color:rgba(255,255,255,0.18);
}

.art-nav__btn--right{
  margin-left:auto;
}

/* Mobile Anpassung */
@media (max-width:600px){
  .art-nav{
    flex-direction:column;
    align-items:flex-start;
  }
  .art-nav__btn--right{
    margin-left:0;
  }
}


/* Fixe Spalte links */
.np-aktuelles-thumb-wrap{
  width: 80px;
  flex: 0 0 80px;
  text-decoration:none;
}



/* Datum-Ersatz */
.np-aktuelles-datebox{
  width: 80px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.np-aktuelles-datebox .day{
  font-size: 20px;
}

.np-aktuelles-datebox .month{
  font-size: 12px;
  text-transform: uppercase;
  opacity: .7;
}

/* Text rechts */
.np-aktuelles-body{
  flex: 1 1 auto;
  min-width: 0; /* wichtig für lange Titel */
}
/* === Detail Navigation === */
.np-aktuelles-nav{
  margin-bottom: 20px;
  font-size: 14px;
}

/* Box wie Kunstwerke */
.np-aktuelles-single-box{
  border: 1px solid rgba(0,0,0,0.1);
  padding: 24px;
  background: #fff;
}

/* Layout */
.np-aktuelles-layout{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.np-aktuelles-meta{
  font-size: 14px;
  line-height: 1.5;
  opacity: .85;
}

.np-aktuelles-meta > div{
  margin-bottom: 16px;
}

/* Mobile */
@media (max-width: 800px){
  .np-aktuelles-layout{
    grid-template-columns: 1fr;
  }
}


.reveal {
  max-width: none;
}
.reveal p,
.reveal h1,
.reveal h2,
.reveal h3 {
  max-width: 72ch;
}

/* Reveal darf Container nicht begrenzen */
.container > .reveal,
.content > .reveal,
.art-grid.reveal,
.np-aktuelles-list.reveal {
  max-width: none !important;
}
/* === Aktuelles Liste === */
/* === Aktuelles Liste – fix horizontal === */

.np-aktuelles-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  font-family: var(--body-font), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.np-aktuelles-item{
  display:flex;
  align-items:flex-start;
  gap:16px;
  border-bottom:1px solid rgba(0,0,0,.08);
  padding-bottom:12px;
}

.np-aktuelles-item:last-child{
  border-bottom:none;
}

/* Linke Spalte: Bild oder Datum */
.np-aktuelles-thumb-wrap,
.np-aktuelles-datebox{
  width:90px;
  flex:0 0 90px;
  display:block;
}

/* Bild */
.np-aktuelles-thumb{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* Datum‑Ersatz */
.np-aktuelles-datebox{
  aspect-ratio:1/1;
  border:1px solid rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.np-aktuelles-datebox .day{
  font-size:18px;
  font-weight:600;
}
.np-aktuelles-datebox .month{
  font-size:11px;
  text-transform:uppercase;
  opacity:.7;
}

/* Text rechts */
.np-aktuelles-body{
  flex:1 1 auto;
  min-width:0;
}

.np-aktuelles-title{
  margin:0 0 4px;
  font-size:1.05em;
}

.np-aktuelles-dates{
  font-size:.9em;
  opacity:.8;
  margin-bottom:6px;
}