/* ============================================================
   muybjoern — Fotoportfolio
   Helles, ruhiges Design · weiches Scrollen · Masonry-Raster
   ============================================================ */

:root{
  --ink:      #1b1b1b;
  --ink-soft: #55555a;
  --muted:    #9a9a9f;
  --line:     #ececE8;
  --bg:       #ffffff;
  --bg-soft:  #f7f6f2;   /* warmes Off-White */
  --teal:     #3d8ea3;   /* aus dem Logo */
  --teal-dk:  #2f7285;
  --yellow:   #f3c23c;   /* aus dem Logo */
  --maxw:     1280px;
  --gap:      20px;
  --ease:     cubic-bezier(.22,.68,.16,1);
}

*{ box-sizing:border-box; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:300;
  line-height:1.6;
  overflow-x:clip;
}

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

h1,h2,h3{ font-weight:400; letter-spacing:-.01em; }

section{ padding:clamp(64px,10vw,140px) clamp(20px,5vw,64px); }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,64px);
  background:rgba(255,255,255,0);
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
}
.site-header.scrolled{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 var(--line);
  padding-top:12px; padding-bottom:12px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.brand-logo{ width:42px; height:42px; border-radius:50%; transition:transform .6s var(--ease); }
.brand:hover .brand-logo{ transform:rotate(-8deg) scale(1.05); }
.brand-name{ font-size:1.05rem; letter-spacing:.04em; font-weight:500; }

.site-nav{ display:flex; gap:34px; }
.site-nav a{
  position:relative; text-decoration:none; color:var(--ink);
  font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; font-weight:400;
}
.site-nav a::after{
  content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--teal); transition:width .4s var(--ease);
}
.site-nav a:hover::after{ width:100%; }

/* Instagram im Menü (nur Icon) */
.nav-ig{ display:inline-flex; align-items:center; color:var(--ink); }
.nav-ig svg{ width:21px; height:21px; transition:color .35s var(--ease), transform .4s var(--ease); }
.nav-ig:hover{ color:var(--teal); }
.nav-ig:hover svg{ transform:scale(1.12); }
.site-nav a.nav-ig::after{ content:none; }

/* Über-mich- und Mail-Icon im Header (nur mobil sichtbar) */
.nav-mail, .nav-about{ display:none; align-items:center; color:var(--ink); }
.nav-mail svg, .nav-about svg{ width:22px; height:22px; transition:color .35s var(--ease), transform .4s var(--ease); }
.nav-mail:hover, .nav-about:hover{ color:var(--teal); }
.nav-mail:hover svg, .nav-about:hover svg{ transform:scale(1.12); }
.site-nav a.nav-mail::after, .site-nav a.nav-about::after{ content:none; }

/* Instagram-Icon im Text (Kontakt/Impressum) */
.ig-link{ display:inline-flex; align-items:center; gap:7px; }
.ig-icon{ width:1.05em; height:1.05em; flex:0 0 auto; }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; width:34px; height:34px; }
.nav-toggle span{ display:block; height:2px; width:24px; margin:5px auto; background:var(--ink); transition:.35s var(--ease); }

/* ---------- Hero ---------- */
.hero{
  min-height:66vh; display:flex; align-items:center; justify-content:center;
  text-align:center; background:var(--bg-soft);
  padding:clamp(120px,16vh,170px) 20px clamp(48px,7vh,80px); position:relative;
}
.hero-inner{ max-width:760px; }
.hero-kicker{
  margin:0 0 26px; color:var(--teal-dk);
  font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; font-weight:500;
}
.hero-title{
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(3.2rem,9vw,6.6rem);
  line-height:1.02; margin:0; letter-spacing:-.01em;
}
.hero-title em{ font-style:italic; color:var(--teal); }
.hero-sub{
  margin:30px auto 0; max-width:520px;
  color:var(--ink-soft); font-size:1.08rem;
}

/* ---------- Section-Köpfe ---------- */
.section-head{ max-width:var(--maxw); margin:0 auto 48px; text-align:center; }
.section-head h2,
.about h2, .contact h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.2rem,5vw,3.4rem); margin:0;
}
.section-sub{ color:var(--muted); margin:.5rem 0 0; letter-spacing:.02em; }

/* ---------- Filter ---------- */
.filters{
  max-width:var(--maxw); margin:0 auto 44px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.filter-btn{
  background:none; border:1px solid var(--line); cursor:pointer;
  padding:9px 20px; border-radius:100px; color:var(--ink-soft);
  font-family:inherit; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  transition:.35s var(--ease);
}
.filter-btn:hover{ border-color:var(--ink); color:var(--ink); }
.filter-btn.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.filter-btn .cnt{ opacity:.5; margin-left:6px; font-size:.75em; }

/* Mobil: Filterleiste bleibt beim Scrollen unter dem Header kleben */
@media (max-width:720px){
  .filters{
    position:sticky; top:66px; z-index:40;
    margin:0 -20px 26px; padding:11px 10px;
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:0.5px solid var(--line);
    flex-wrap:nowrap; justify-content:center; gap:6px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .filters::-webkit-scrollbar{ display:none; }
  .filter-btn{ flex:0 0 auto; padding:7px 12px; font-size:.7rem; letter-spacing:.04em; }
  .filter-btn .cnt{ display:none; }   /* Zähler mobil ausblenden, damit alle vier passen */
}

/* Hoch-Button (zurück zur Auswahl) */
.to-top{
  position:fixed; bottom:22px; right:22px; z-index:45;
  width:46px; height:46px; border-radius:50%;
  background:var(--teal); color:#fff; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .3s var(--ease);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.4);
}
.to-top.visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--teal-dk); }
.to-top svg{ width:22px; height:22px; }

/* ---------- Galerie (Masonry via CSS columns) ---------- */
.gallery-status{ text-align:center; color:var(--muted); padding:40px 0; letter-spacing:.03em; }
.gallery{
  max-width:var(--maxw); margin:0 auto;
  column-count:3; column-gap:var(--gap);
}
@media (max-width:1024px){ .gallery{ column-count:2; } }
@media (max-width:600px){ .gallery{ column-count:1; } }

.card{
  break-inside:avoid; margin:0 0 var(--gap);
  position:relative; overflow:hidden; border-radius:6px;
  background:var(--bg-soft); cursor:pointer;
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), box-shadow .5s var(--ease);
}
.card.visible{ opacity:1; transform:none; }
.card img{
  width:100%; height:auto; display:block;
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
}
.card:hover img{ transform:scale(1.045); }
.card:hover{ box-shadow:0 18px 50px -18px rgba(0,0,0,.35); }
.card .card-cap{
  position:absolute; inset:auto 0 0 0; padding:26px 18px 16px;
  color:#fff; font-size:.85rem; letter-spacing:.05em;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
  opacity:0; transform:translateY(8px); transition:.45s var(--ease);
}
.card:hover .card-cap{ opacity:1; transform:none; }

.empty-note{
  grid-column:1/-1; text-align:center; color:var(--muted);
  padding:60px 20px; border:1px dashed var(--line); border-radius:10px;
}

/* Demo-Kacheln (nur wenn PHP nicht erreichbar, z.B. lokale Vorschau) */
.demo-tile{ background:linear-gradient(135deg,var(--bg-soft),#e9e7e0); }
.demo-tile .ph{ display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- Über / Kontakt ---------- */
.about{ background:var(--bg-soft); }
.about-inner{ max-width:var(--maxw); margin:0 auto; }
.about-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(30px,6vw,72px);
  align-items:start;
}
.about-photo{
  position:relative; margin:0; aspect-ratio:3/4; border-radius:10px; overflow:hidden;
  background:#eceae3;
}
.about-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.about-photo-ph{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center; text-align:center;
  color:var(--muted); font-size:.95rem; line-height:1.5; padding:20px;
  border:1px dashed var(--line); border-radius:10px;
}
.about-photo-ph small{ font-size:.78rem; }
.about-photo.is-empty .about-photo-ph{ display:flex; }
.about-text h2{
  font-family:'Cormorant Garamond',serif; font-size:clamp(2.2rem,5vw,3.4rem); margin:0 0 18px;
}
.about-text p{ color:var(--ink-soft); font-size:1.1rem; margin:0 0 16px; }
.about-inner code{ background:#fff; padding:2px 7px; border-radius:5px; font-size:.82em; color:var(--teal-dk); }

@media (max-width:760px){
  .about-grid{ grid-template-columns:1fr; text-align:center; }
  .about-photo{ max-width:340px; margin:0 auto; }
}

.contact{ text-align:center; }
.contact-inner{ max-width:620px; margin:0 auto; }
.contact-sub{ color:var(--ink-soft); margin-top:18px; }
.contact-mail{
  margin:22px 0 10px;
  font-family:'Cormorant Garamond',serif; font-size:clamp(1.8rem,5vw,2.8rem);
  line-height:1.1;
}
.contact-mail-link{
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);
  transition:.4s var(--ease);
}
.contact-mail-link:hover{ color:var(--teal); border-color:var(--teal); }

.contact-details{ margin-top:26px; color:var(--ink-soft); font-size:1.02rem; }
.contact-details p{ margin:8px 0; }
.contact-label{
  display:inline-block; min-width:96px; text-align:right; margin-right:14px;
  color:var(--muted); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
}
.contact-inline-link{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); transition:.35s var(--ease); }
.contact-inline-link:hover{ color:var(--teal); border-color:var(--teal); }

/* Kopier-/Markierschutz für Kontaktdaten */
.no-copy, .no-copy *{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.no-copy a{ cursor:pointer; }

@media (max-width:520px){
  .contact-label{ display:block; min-width:0; text-align:center; margin:0 0 2px; }
}

/* ---------- Rechtsseite (Impressum) ---------- */
.legal{ max-width:720px; margin:0 auto; padding-top:60px; }
.legal h1{
  font-family:'Cormorant Garamond',serif; font-size:clamp(2.4rem,6vw,3.6rem); margin:0 0 8px;
}
.legal .legal-sub{ color:var(--muted); margin:0 0 40px; letter-spacing:.02em; }
.legal h2{
  font-size:1.05rem; letter-spacing:.02em; margin:36px 0 10px; font-weight:500;
}
.legal p{ color:var(--ink-soft); margin:6px 0; }
.legal a{ color:var(--teal-dk); }
.legal .legal-block{ margin-bottom:8px; }
.back-link{
  display:inline-block; margin-top:48px; text-decoration:none; color:var(--ink);
  font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:3px; transition:.35s var(--ease);
}
.back-link:hover{ color:var(--teal); border-color:var(--teal); }

/* ---------- Footer ---------- */
.site-footer{
  text-align:center; padding:56px 20px; background:var(--ink); color:#fff;
}
.footer-logo{ width:52px; height:52px; border-radius:50%; margin:0 auto 18px; }
.site-footer p{ margin:6px 0; font-size:.85rem; letter-spacing:.05em; color:rgba(255,255,255,.72); }
.footer-links a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:2px; }

/* ---------- Reveal (Scroll) ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.visible{ opacity:1; transform:none; }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center;
  background:rgba(12,12,12,.94); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .4s var(--ease);
}
.lightbox.open{ display:flex; opacity:1; }
.lb-img{
  max-width:90vw; max-height:86vh; object-fit:contain; border-radius:4px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  transform:scale(.96); transition:transform .45s var(--ease);
}
.lightbox.open .lb-img{ transform:scale(1); }
.lb-close,.lb-prev,.lb-next{
  position:absolute; background:none; border:0; color:#fff; cursor:pointer;
  font-size:2.4rem; line-height:1; opacity:.7; transition:opacity .3s, transform .3s;
  user-select:none;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ opacity:1; }
.lb-close{ top:22px; right:30px; font-size:2.8rem; }
.lb-prev{ left:24px; top:50%; transform:translateY(-50%); }
.lb-next{ right:24px; top:50%; transform:translateY(-50%); }
.lb-prev:hover{ transform:translateY(-50%) translateX(-4px); }
.lb-next:hover{ transform:translateY(-50%) translateX(4px); }
.lb-caption{ position:absolute; bottom:24px; left:0; right:0; text-align:center;
  color:rgba(255,255,255,.8); font-size:.85rem; letter-spacing:.05em; }

/* ---------- Mobile Nav ----------
   Kein aufklappendes Menü mehr. Rechts oben nur Instagram- und Mail-Icon. */
@media (max-width:720px){
  .nav-toggle{ display:none; }
  .site-nav{ gap:18px; }
  .site-nav a:not(.nav-ig):not(.nav-mail):not(.nav-about){ display:none; }  /* Textlinks ausblenden */
  .nav-mail, .nav-about{ display:inline-flex; }
}

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