:root{
    /* ---- Farb-Token: gegründet auf Waldlicht & Eichhörnchen-Fell ---- */
    --bg-deep:    #11140F;   /* Schattenmoos – fast schwarzes Waldgrün */
    --bg-panel:   #1B2116;   /* Tann – dunkles Kiefergrün für Karten/Flächen */
    --bg-panel-2: #222A1C;
    --accent:     #C97C3D;   /* Eichhorn-Rost – warmes Rotbraun */
    --accent-soft:#E3A56B;
    --text-light: #EDE7D6;   /* Raureif – warmes Off-White */
    --text-muted: #93A085;   /* Moosgrün – gedämpfter Fließtext/Captions */
    --frost:      #9FB8C9;   /* Frostblau – Winter-Akzent, sparsam */
    --line:       rgba(237,231,214,0.12);
    --radius:     3px;
    --gap:        1.5rem;
    --maxw:       1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg-deep);
    color:var(--text-light);
    font-family:'Work Sans', Arial, sans-serif;
    font-weight:400;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces', Georgia, serif;
    font-weight:500;
    margin:0 0 .4em;
    letter-spacing:.2px;
  }
  a{color:var(--accent-soft); text-decoration:none;}
  a:hover{color:var(--accent);}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.5rem;}
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--accent-soft);
    display:block;
    margin-bottom:.6em;
  }
  section{padding:5.5rem 0;}
  .btn{
    display:inline-block;
    padding:.85em 1.7em;
    border-radius:var(--radius);
    font-family:'Work Sans', sans-serif;
    font-weight:500;
    font-size:.95rem;
    border:1px solid var(--accent);
    transition:background .2s, color .2s, transform .15s;
  }
  .btn-fill{background:var(--accent); color:var(--bg-deep);}
  .btn-fill:hover{background:var(--accent-soft); transform:translateY(-2px); color:var(--bg-deep);}
  .btn-outline{color:var(--text-light); border-color:var(--line);}
  .btn-outline:hover{border-color:var(--accent); color:var(--accent-soft);}

  /* ============ NAV ============ */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:rgba(17,20,15,0.78);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:64px;
  }
  .brand{
    font-family:'Fraunces', serif;
    font-size:1.05rem;
    letter-spacing:.04em;
    color:var(--text-light);
  }
  .brand b{color:var(--accent-soft); font-style:italic; font-weight:500;}
  .nav-links{display:flex; gap:2rem; list-style:none; margin:0; padding:0;}
  .nav-links a{
    color:var(--text-muted); font-size:.9rem; font-weight:500;
  }
  .nav-links a:hover{color:var(--accent-soft);}
  .nav-toggle{display:none;}
  .nav-burger{display:none; cursor:pointer; flex-direction:column; gap:5px;}
  .nav-burger span{width:24px; height:2px; background:var(--text-light); display:block;}

  @media (max-width:780px){
    .nav-links{
      position:absolute; top:64px; left:0; right:0;
      background:var(--bg-panel);
      flex-direction:column; gap:0;
      max-height:0; overflow:hidden;
      transition:max-height .3s ease;
      border-bottom:1px solid var(--line);
    }
    .nav-links a{display:block; padding:1rem 1.5rem; border-top:1px solid var(--line);}
    .nav-toggle:checked ~ .nav-links{max-height:300px;}
    .nav-burger{display:flex;}
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center;
    overflow:hidden;
    padding-top:64px;
    background:
      radial-gradient(ellipse 80% 60% at 70% 20%, rgba(201,124,61,0.10), transparent 60%),
      linear-gradient(180deg, #0D0F0A 0%, var(--bg-deep) 60%);
  }
  .bokeh{
    position:absolute; border-radius:50%;
    filter:blur(2px);
    opacity:.55;
    animation:drift 22s ease-in-out infinite;
  }
  .bokeh.b1{width:140px; height:140px; background:var(--accent); top:18%; left:8%; animation-delay:0s; opacity:.18;}
  .bokeh.b2{width:90px;  height:90px;  background:var(--frost); top:60%; left:18%; animation-delay:-6s; opacity:.14;}
  .bokeh.b3{width:200px; height:200px; background:var(--accent-soft); top:8%; left:78%; animation-delay:-3s; opacity:.12;}
  .bokeh.b4{width:60px;  height:60px;  background:var(--text-light); top:75%; left:82%; animation-delay:-10s; opacity:.10;}
  .bokeh.b5{width:110px; height:110px; background:var(--accent); top:40%; left:55%; animation-delay:-14s; opacity:.10;}
  @keyframes drift{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(18px,-26px);}
  }
  @media (prefers-reduced-motion:reduce){ .bokeh{animation:none;} }

  .hero-inner{position:relative; z-index:2;}
  .hero h1{
    font-size:clamp(2.4rem, 6vw, 4.6rem);
    max-width:14ch;
    line-height:1.04;
  }
  .hero h1 em{color:var(--accent-soft); font-style:italic; font-weight:420;}
  .hero p.lead{
    color:var(--text-muted);
    max-width:42ch;
    font-size:1.05rem;
    margin:1.1em 0 2.2em;
  }
  .hero-actions{display:flex; gap:1rem; flex-wrap:wrap;}
  .scroll-cue{
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    font-family:'JetBrains Mono', monospace; font-size:.7rem;
    color:var(--text-muted); letter-spacing:.15em; text-transform:uppercase;
    display:flex; flex-direction:column; align-items:center; gap:.5em;
  }
  .scroll-cue::after{
    content:""; width:1px; height:34px; background:var(--line);
  }

  /* ============ SECTION HEADERS ============ */
  .sec-head{max-width:56ch; margin-bottom:3rem;}
  .sec-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);}
  .sec-head p{color:var(--text-muted); font-size:1rem;}

  /* ============ GALLERY ============ */
  .cat-nav{
    display:flex; gap:1.5rem; flex-wrap:wrap;
    font-family:'JetBrains Mono', monospace; font-size:.78rem;
    letter-spacing:.06em; text-transform:uppercase;
    margin-bottom:3.5rem; padding-bottom:1.2rem;
    border-bottom:1px solid var(--line);
  }
  .cat-nav a{color:var(--text-muted);}
  .cat-nav a:hover{color:var(--accent-soft);}

  .cat-block{margin-bottom:5rem; scroll-margin-top:90px;}
  .cat-block h3{font-size:1.5rem;}
  .cat-block .cat-desc{color:var(--text-muted); max-width:48ch; margin-bottom:2rem;}


/* ============ GALLERY ============ */

.grid{
  display:grid;
  grid-template-columns: 1.08fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap:24px;
  align-items:stretch;
  margin-top:2rem;
  height: calc(((min(1180px, 100vw - 3rem) - 24px) / 2) * 1.25);
}

.card{
  position:relative;
  overflow:hidden;
  min-height:0;
  border-radius:var(--radius);
  border:1px solid rgba(237,231,214,0.08);
  background:
    repeating-linear-gradient(
      135deg,
      var(--bg-panel) 0 14px,
      var(--bg-panel-2) 14px 28px
    );
}

.card.hero{
  grid-row: span 2 / span 2;
  min-height:0;
}

.card.side:nth-of-type(3){
  grid-column-start:2;
}

.card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card .tag{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:.8rem 1rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem;
  color:var(--text-light);
  background:none;
  z-index:2;
}

.card .tag::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:90px;              /* Höhe des Verlaufs */
  background:linear-gradient(
    to top,
    rgba(17,20,15,.92) 0%,
    rgba(17,20,15,.55) 40%,
    rgba(17,20,15,.20) 70%,
    transparent 100%
  );
  z-index:-1;
}

.card .tag b{
  color:var(--accent-soft);
  font-weight:500;
}

@media (max-width:900px){
  .grid{
    display:block;
    height:auto;
  }

  .card,
  .card.hero,
  .card.side{
    display:block;
    height:auto;
    min-height:0;
    aspect-ratio:unset;
    margin-bottom:20px;
    background:none;
    border:none;
    overflow:visible;
  }

  .card img,
  .card.hero img,
  .card.side img{
    position:static;
    width:100%;
    height:auto;
    object-fit:contain;
    display:block;
    border:1px solid rgba(237,231,214,0.08);
    border-radius:var(--radius);
  }
}

  /* ============ ABOUT ============ */
 .about {
  background: #182019;
  color: #e9e6da;
  padding: 4rem 2rem;
}

.about-intro {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.eyebrow {
  color: #cf7c4a;
  letter-spacing: 0.15em;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.about-intro h2 {
  font-size: 2rem;
  margin: 0.5rem 0 1.5rem;
}

.about-intro p {
  color: #b7c2ad;
  line-height: 1.7;
}

.about-pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.profile-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #cf7c4a;
}

.profile-name {
  font-size: 1.2rem;
  margin: 0;
}

.info-row {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  max-width: 700px;
}

.info-card {
  flex: 1;
  background: #1f2a20;
  border-left: 3px solid #cf7c4a;
  padding: 1.2rem 1.5rem;
  text-align: left;
}

.info-card--wide {
  width: 100%;
  max-width: 900px;
}

.info-label {
  display: block;
  color: #cf7c4a;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}

.info-value {
  color: #d7d2c4;
  line-height: 1.6;
  margin: 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  background: #2a352a;
  color: #cf7c4a;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .info-row {
    flex-direction: column;
  }
}

  /* ============ MASONRY-GALERIE (Unterseiten) ============ */
  /* Echtes Masonry über CSS-Spalten: behält Seitenverhältnis, kein Cropping */
  .masonry{
    column-count:4;
    column-gap:8px;
    margin-top:2rem;
  }
  .m-item{
    margin:0 0 8px;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid rgba(237,231,214,0.08);
    background:var(--bg-panel);
  }
  .m-item img{
    width:100%;
    height:auto;
    display:block;
    cursor:zoom-in;
    transition:opacity .2s ease;
  }
  .m-item img:hover{opacity:.9;}
  .m-item figcaption{
    padding:.75rem .9rem;
    font-family:'JetBrains Mono', monospace;
    font-size:.7rem;
    letter-spacing:.02em;
    color:var(--text-muted);
  }
  .m-item figcaption b{color:var(--accent-soft); font-weight:500;}

  @media (max-width:900px){
    .masonry{column-count:3;}
  }
  @media (max-width:600px){
    .masonry{column-count:2; column-gap:8px;}
    .m-item{margin-bottom:8px;}
  }

  /* ============ LIGHTBOX ============ */
  .lightbox{
    position:fixed;
    inset:0;
    z-index:200;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:rgba(13,15,10,.93);
    backdrop-filter:blur(8px);
    padding:2rem;
  }
  .lightbox.is-open{display:flex;}
  .lightbox figure{margin:0; display:flex; flex-direction:column; align-items:center;position:relative;}
  .lightbox figure::after{
  content:"BG Naturfotografie";
  position:absolute;
  right:1rem;
  bottom:3.2rem;
  z-index:5;
  font-family:'JetBrains Mono', monospace;
  font-size:.9rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(237,231,214,.58);
  text-shadow:0 1px 4px rgba(0,0,0,.65);
  pointer-events:none;
}
  .lightbox img{
    max-width:90vw;
    max-height:85vh;
    width:auto;
    height:auto;
    border-radius:var(--radius);
    box-shadow:0 25px 70px rgba(0,0,0,.55);
  }
  .lightbox figcaption{
    margin-top:1rem;
    font-family:'JetBrains Mono', monospace;
    font-size:.78rem;
    color:var(--text-muted);
    text-align:center;
  }
  .lightbox figcaption b{color:var(--accent-soft); font-weight:500;}
  .lightbox-close{
    position:absolute;
    top:1.4rem;
    right:1.6rem;
    width:42px;
    height:42px;
    border:1px solid var(--line);
    border-radius:50%;
    background:rgba(237,231,214,0.06);
    color:var(--text-light);
    font-size:1.6rem;
    line-height:1;
    font-family:'Work Sans', sans-serif;
    cursor:pointer;
    transition:border-color .2s, color .2s, background .2s;
  }
  .lightbox-close:hover{
    border-color:var(--accent);
    color:var(--accent-soft);
    background:rgba(237,231,214,0.1);
  }
  @media (max-width:600px){
  .lightbox figure::after{
    right:.8rem;
    bottom:3rem;
    font-size:.58rem;
  }
}

  /* ============ GALERIE: "MEHR ENTDECKEN" ============ */
  .cat-more{margin-top:1.8rem;}

  /* ============ ERHÄLTLICH ALS ============ */
  .avail-list{
    display:flex; flex-wrap:wrap; gap:.7rem 1.6rem;
    list-style:none; margin:1.8rem 0 2rem; padding:0;
    font-family:'JetBrains Mono', monospace; font-size:.85rem;
    color:var(--text-muted);
  }
  .avail-list li{position:relative; padding-left:1.1rem;}
  .avail-list li::before{content:"·"; position:absolute; left:0; color:var(--accent-soft);}
  .avail-note{color:var(--text-muted); font-size:.92rem; max-width:50ch; margin-bottom:1.8rem;}

  /* ============ CONTACT ============ */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem;}
  @media (max-width:780px){ .contact-grid{grid-template-columns:1fr;} }
  form{display:flex; flex-direction:column; gap:1rem;}
  label{font-size:.82rem; color:var(--text-muted); margin-bottom:.3rem; display:block;}
  input, textarea{
    width:100%; background:var(--bg-panel); border:1px solid var(--line);
    border-radius:var(--radius); color:var(--text-light);
    padding:.75em .9em; font-family:'Work Sans', sans-serif; font-size:.95rem;
  }
  input:focus, textarea:focus{outline:2px solid var(--accent); border-color:var(--accent);}
  textarea{min-height:120px; resize:vertical;}
  .socials{display:flex; gap:1.4rem; margin-top:1.2rem; font-size:.9rem;}

  footer{
    border-top:1px solid var(--line);
    padding:2.4rem 0;
    font-family:'JetBrains Mono', monospace; font-size:.75rem;
    color:var(--text-muted);
  }
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;}
  footer a{color:var(--text-muted);}
  footer a:hover{color:var(--accent-soft);}



  img{
  -webkit-user-drag:none;
  user-select:none;
}