:root{
  --schwarz:#0f0f10;
  --anthrazit:#1c1c1e;
  --grau:#4a4a4d;
  --hellgrau:#9a9a9c;
  --weiss:#f5f5f5;
  --linie:#2a2a2c;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Montserrat', -apple-system, system-ui, sans-serif;
  --lese:'Mulish', -apple-system, system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--schwarz);color:var(--weiss);font-family:var(--sans);font-weight:300;line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Kopf / Navigation ---------- */
header.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:flex-end;
  padding:18px 40px;background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);border-bottom:0.5px solid var(--linie);transition:background .3s}
.nav nav{display:flex;gap:34px}
.nav nav a{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--hellgrau);transition:color .25s}
.nav nav a:hover{color:var(--weiss)}
.nav .burger{display:none;background:none;border:none;color:var(--weiss);font-size:22px;cursor:pointer}

/* ---------- Hero (Kopf: so hoch wie das Porträt) ---------- */
.hero{display:flex;align-items:center;justify-content:center;background:#000;padding:44px 24px}
.hero-band{display:flex;align-items:center;justify-content:center;gap:clamp(28px,5vw,72px);width:100%;max-width:1080px}
.hero-portrait{flex:0 0 auto;width:clamp(210px,30vw,360px);height:clamp(280px,40vw,440px);overflow:hidden}
.hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:22% center;display:block}
.hero-logo{flex:0 1 auto;width:clamp(290px,40vw,540px);height:auto}

/* ---------- Farbband ---------- */
.farbband{display:flex;width:100%;background:#000}
.farbband a{flex:1 1 0;aspect-ratio:3/2;overflow:hidden;display:block;min-width:0}
.farbband img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.08);transition:transform .6s ease,filter .6s ease}
.farbband a:hover img{transform:scale(1.06);filter:saturate(1.25)}

/* ---------- Abschnitte ---------- */
section{padding:110px 24px}
.inner{max-width:820px;margin:0 auto}
.inner-wide{max-width:1200px;margin:0 auto}
.label{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--hellgrau);text-align:center;margin-bottom:20px}
h2.titel{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,46px);text-align:center;color:var(--weiss);margin-bottom:48px;letter-spacing:1px}
.ueber p{font-family:var(--lese);font-size:clamp(16px,1.8vw,18px);font-weight:400;line-height:1.55;color:#d7d7d9;margin-bottom:16px;text-align:center}
.ueber .mehr{text-align:center;margin-top:14px}
.trenner{width:60px;height:1px;background:var(--grau);margin:0 auto 48px}
.knopf{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--hellgrau);border:0.5px solid var(--linie);padding:12px 24px;border-radius:2px;transition:all .25s}
.knopf:hover{color:var(--weiss);border-color:var(--grau)}

/* ---------- Galerie ---------- */
.filter{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:44px}
.filter button{background:none;border:0.5px solid var(--linie);color:var(--hellgrau);font-family:var(--sans);font-weight:300;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:9px 20px;border-radius:2px;cursor:pointer;transition:all .25s}
.filter button:hover{color:var(--weiss);border-color:var(--grau)}
.filter button.aktiv{color:var(--schwarz);background:var(--weiss);border-color:var(--weiss)}

.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kachel{display:block;position:relative;overflow:hidden;background:var(--anthrazit);aspect-ratio:4/3;cursor:pointer}
.kachel img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease, opacity .4s;opacity:.92}
.kachel:hover img{transform:scale(1.05);opacity:1}
.kachel .cap{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(to top,rgba(15,15,16,.85),transparent);
  font-family:var(--serif);font-style:italic;font-size:16px;color:var(--weiss);opacity:0;transform:translateY(8px);transition:all .35s}
.kachel:hover .cap{opacity:1;transform:translateY(0)}
.kachel.platzhalter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--grau);cursor:default}
.kachel.platzhalter .ph-cat{font-family:var(--sans);font-size:11px;letter-spacing:3px;text-transform:uppercase}

.galerie-hinweis{text-align:center;color:var(--hellgrau);font-family:var(--serif);font-style:italic;font-size:18px;margin-top:36px}

/* ---------- Kategorie-Vorschau (Startseite) ---------- */
.kategorie-block{margin-bottom:64px}
.kategorie-block:last-child{margin-bottom:0}
.kategorie-kopf{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px;gap:16px}
.kategorie-titel{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(22px,3vw,28px);color:var(--weiss);letter-spacing:.5px}
.kategorie-alle{font-family:var(--sans);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--hellgrau);white-space:nowrap;border-bottom:0.5px solid var(--linie);padding-bottom:2px;transition:color .25s,border-color .25s}
.kategorie-alle:hover{color:var(--weiss);border-color:var(--grau)}
.vorschau-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vorschau-grid .kachel img{opacity:.92}

@media(max-width:820px){.vorschau-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.vorschau-grid{grid-template-columns:repeat(3,1fr);gap:6px}}

/* ---------- Unterseite: Artikel ---------- */
.seitenkopf{background:#000;text-align:center;padding:130px 24px 72px}
.seitenkopf .klein{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--hellgrau);margin-bottom:18px}
.seitenkopf h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,6vw,58px);color:var(--weiss);letter-spacing:1px}
.seitenkopf .lead{font-family:var(--serif);font-style:italic;font-size:clamp(20px,3vw,26px);color:var(--hellgrau);margin-top:16px}
.artikel{max-width:760px;margin:0 auto;padding:78px 24px 20px}
.artikel h3{font-family:var(--serif);font-weight:500;font-size:clamp(25px,3.4vw,34px);color:#fff;margin:58px 0 16px;letter-spacing:.3px}
.artikel h3:first-child{margin-top:0}
.artikel p{font-family:var(--lese);font-size:clamp(15.5px,1.7vw,17px);font-weight:400;line-height:1.54;color:#d3d3d5;margin-bottom:15px}
.artikel .zurueck-wrap{text-align:center;padding:20px 0 10px}
.artikel figure{margin:46px 0}
.artikel figure img{width:100%;height:auto;display:block;border-radius:2px}
.artikel figure.hoch{max-width:430px;margin-left:auto;margin-right:auto}
.artikel figcaption{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--hellgrau);text-align:center;margin-top:12px}

/* ---------- Footer ---------- */
footer{padding:90px 24px 70px;text-align:center;border-top:0.5px solid var(--linie)}
footer .fserif{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,30px);color:var(--weiss);margin-bottom:14px}
footer .fdaten{color:var(--hellgrau);letter-spacing:1px;font-size:15px}
footer .fklein{margin-top:34px;color:var(--grau);font-size:12px;letter-spacing:1px}
footer .frecht{margin-top:16px;font-family:var(--sans);font-size:12px;letter-spacing:1px}
footer .frecht a{color:var(--hellgrau);transition:color .25s}
footer .frecht a:hover{color:var(--weiss)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(10,10,11,.96);display:none;align-items:center;justify-content:center;padding:40px}
.lightbox.auf{display:flex}
.lightbox img{max-width:92vw;max-height:82vh;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox .lb-cap{position:absolute;bottom:34px;left:0;right:0;text-align:center;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--weiss)}
.lightbox .lb-close{position:absolute;top:26px;right:34px;background:none;border:none;color:var(--weiss);font-size:34px;cursor:pointer;line-height:1}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--weiss);font-size:44px;cursor:pointer;padding:20px;opacity:.6;transition:opacity .25s}
.lightbox .lb-nav:hover{opacity:1}
.lightbox .lb-prev{left:10px}
.lightbox .lb-next{right:10px}

/* ---------- Mobil ---------- */
@media(max-width:820px){
  .galerie{grid-template-columns:repeat(2,1fr)}
  .nav{padding:18px 22px}
  .nav nav{gap:22px}
  section{padding:80px 20px}
  .seitenkopf{padding:110px 20px 56px}
  .artikel{padding:60px 20px 10px}
}
@media(max-width:560px){
  .galerie{grid-template-columns:1fr}
  .hero-band{flex-direction:column;gap:30px}
  .hero-portrait{width:min(280px,72vw);height:min(340px,86vw)}
  .hero-logo{width:min(320px,84vw)}
  .nav nav{display:none}
  .nav nav.offen{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--schwarz);border-bottom:0.5px solid var(--linie)}
  .nav nav.offen a{padding:16px 22px;border-top:0.5px solid var(--linie)}
  .nav .burger{display:block}
}
@media (max-width:700px){.farbband{flex-wrap:wrap}.farbband a{flex:1 1 25%}}

/* ---------- Shop-Hinweis & Herzens-Organisationen ---------- */
.nav nav a.nav-shop{color:var(--weiss);border:0.5px solid var(--grau);padding:6px 16px;border-radius:2px;transition:all .25s}
.nav nav a.nav-shop:hover{background:var(--weiss);color:var(--schwarz)}
.shop-band{background:#000;border-top:0.5px solid var(--linie);border-bottom:0.5px solid var(--linie);padding:90px 24px;text-align:center}
.shop-band .inner{max-width:720px}
.shop-band h2.titel{margin-bottom:28px}
.shop-band p{font-family:var(--lese);font-size:clamp(16px,1.8vw,18px);color:#d7d7d9;line-height:1.55;margin-bottom:34px}
.knopf-shop{display:inline-block;font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:3px;text-transform:uppercase;padding:20px 44px;border-radius:2px;background:var(--weiss);color:var(--schwarz);transition:all .25s}
a.knopf-shop:hover{background:#fff;letter-spacing:3.5px}
.knopf-shop.bald{background:none;color:var(--hellgrau);border:0.5px solid var(--grau);cursor:default}
.shop-hinweis{text-align:center;margin-top:70px;padding-top:56px;border-top:0.5px solid var(--linie)}
.shop-hinweis p{font-family:var(--lese);font-size:17px;color:#d7d7d9;line-height:1.55;margin-bottom:26px}
.herzen{background:var(--anthrazit)}
.herzen-intro{text-align:center;max-width:640px;margin:0 auto 52px;font-family:var(--lese);color:#d7d7d9;font-size:clamp(16px,1.8vw,18px);line-height:1.55}
.herzen-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.herz-karte{display:flex;flex-direction:column;background:var(--schwarz);border:0.5px solid var(--linie);padding:34px 28px}
.herz-karte h3{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.2;color:#fff;margin-bottom:8px}
.herz-karte .ort{font-family:var(--sans);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--hellgrau);margin-bottom:20px}
.herz-karte p{font-family:var(--lese);font-size:15.5px;line-height:1.55;color:#d3d3d5;margin-bottom:28px;flex:1}
.herz-karte .knopf{align-self:flex-start;white-space:nowrap;font-size:11px;letter-spacing:1.5px;padding:11px 18px}
@media(max-width:1020px){.herzen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.herzen-grid{grid-template-columns:1fr}.knopf-shop{padding:18px 28px}}