/* =======================
   Grundfarben und Variablen
======================= */
:root{
  --bg:#0e1a14;
  --bg2:#0c1712;
  --brand:#2f6d47;
  --brand2:#9ecaa9;
  --text:#eef5ef;
  --muted:#cfe3d4;
  --accent:#c2a667;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.3);
  --tile-caption-inset: calc(var(--radius) + 6px);
}

/* =======================
   Reset und Basis
======================= */
*{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
  overflow-x:hidden;
}
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand2); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ margin:0 0 10px; line-height:1.2; }
h1{ font-weight:800; }
h2{ font-weight:600; }
p{ margin:0 0 12px; color:var(--muted); }

.container{ width:min(1150px,94%); margin:0 auto; padding:0 10px; }
section { padding: 48px 0; }

/* =======================
   Header & Navigation
======================= */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(14,26,20,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

@supports(padding: env(safe-area-inset-top)){
  header{ padding-top: env(safe-area-inset-top); }
}
@supports(padding: constant(safe-area-inset-top)){
  header{ padding-top: constant(safe-area-inset-top); }
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
}
.logo{
  width:34px;
  height:34px;
  border-radius:8px;
  background:conic-gradient(from 90deg at 50% 50%,#2f6d47,#9ecaa9,#2f6d47);
  box-shadow:inset 0 0 20px rgba(0,0,0,.35);
}

nav ul{
  display:flex;
  gap:22px;
  list-style:none;
  margin:0;
  padding:0;
}
nav a{
  display:inline-block;
  padding:8px 10px;
  border-radius:10px;
}
nav a:hover{
  background:rgba(255,255,255,.06);
  text-decoration:none;
}

/* =======================
   Mobile Navigation Button
======================= */
.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  padding:6px 10px;
  font-size:22px;
  color:#fff;
  cursor:pointer;
}

/* =======================
   Hero-Bereich
======================= */
.hero{ position:relative; margin-bottom:28px; }
.hero img{
  width:100%;
  height:52vh;
  min-height:340px;
  object-fit:cover;
  filter:brightness(1.06) contrast(1.02) saturate(1.04);
}
.hero .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 70%);
  pointer-events:none;
}
@supports (mix-blend-mode: multiply){
  .hero{ isolation:isolate; }
  .hero .overlay{
    mix-blend-mode: normal;
    background: rgba(0,0,0,.35);
  }
  .hero .overlay::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.18) 70%);
    pointer-events:none;
  }
}

.hero .headline h1,
.hero .headline p,
.hero .headline .btn,
.hero .headline .badge,
.hero .headline strong,
.hero .headline a{
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

.hero .headline{
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  width:min(1150px,94%);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:20px;
}

/* =======================
   Karten, Buttons, Layout
======================= */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.badge{
  display:inline-block;
  background:rgba(194,166,103,.18);
  color:#f6ead2;
  border:1px solid rgba(194,166,103,.5);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}
.lead{ color:#f1f6f2; }
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
}
.btn:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
}

/* =======================
   Grid-System
======================= */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.tile{
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  transition:transform .25s ease;
}
.tile:hover{ transform:translateY(-2px); }
.tile img{ width:100%; height:220px; object-fit:cover; }

/* Kachel-Beschriftungen – überall genug Abstand links */
.tile .p{ padding:14px 16px 16px var(--tile-caption-inset); }
.tile h3{ margin:10px 16px 6px var(--tile-caption-inset); }
.tile p{  margin:0 16px 16px var(--tile-caption-inset);  }

/* =======================
   Kontaktformular
======================= */
form.contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
}
form.contact label{ display:flex; flex-direction:column; gap:6px; }
form.contact input,
form.contact textarea{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:10px 12px;
  font-size:15px;
}
form.contact textarea{
  resize:vertical;
  grid-column:1/-1;
}
form.contact .btn{
  grid-column:1/-1;
  justify-self:start;
}

/* =======================
   Footer
======================= */
footer{
  background:rgba(14,26,20,.9);
  padding:30px 0 20px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footgrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

/* =======================
   Lightbox
======================= */
.zoomable{ cursor: zoom-in; }

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:92vw;
  max-height:92vh;
  object-fit:contain;
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}
.lightbox__close{
  position:fixed;
  top:12px;
  right:16px;
  font-size:28px;
  color:var(--text);
  cursor:pointer;
  user-select:none;
}

/* =======================
   Responsive Design
======================= */

/* Tablet */
@media (max-width:920px){
  .hero .headline{
    grid-template-columns:1fr;
    gap:12px;
    bottom:18px;
  }
  .grid{ grid-template-columns:repeat(2,1fr); }
  #profil .grid{ grid-template-columns:1fr !important; }
  section{ padding:40px 0; }
}

/* Smartphone */
@media (max-width:700px){
  .container{ padding:0 14px; }
  h1{ font-size:24px; margin-bottom:6px; font-weight:800; }
  .hero { padding-top:6px; margin-bottom:20px; }
  .hero img{ height:32vh; min-height:200px; }

  .nav{ position:relative; flex-wrap:wrap; }
  .nav-toggle{ display:inline-block; position:relative; z-index:55; }
  #mainmenu{
    display:none;
    position:absolute;
    right:10px;
    top:58px;
    background:rgba(14,26,20,.96);
    border:1px solid rgba(255,255,255,.15);
    border-radius:14px;
    padding:10px;
    flex-direction:column;
    gap:10px;
    width:max(58vw,220px);
    box-shadow:0 8px 20px rgba(0,0,0,.4);
  }
  #mainmenu.open{ display:flex; }
  #mainmenu a{
    display:block;
    padding:10px 12px;
    border-radius:10px;
  }
  #mainmenu a:hover{
    background:rgba(255,255,255,.08);
    text-decoration:none;
  }

  .grid{ grid-template-columns:1fr; gap:14px; }
  .tile img{ height:200px; }

  :root{ --tile-caption-inset: calc(var(--radius) + 8px); }

  .footgrid{ grid-template-columns:1fr; gap:12px; }

  section { padding:34px 0; }
}


/* === Zusätzliche Luft für die Abschnitte "Über Buchonia Forst" und "Bilder aus unserer Arbeit" === */
/* Mehr Top-Padding für #profil und für den direkt folgenden Abschnitt (Bilder) */
#profil { padding-top: 56px; }
#profil + section { padding-top: 56px; }

/* Safari-Schutz: Überschriften nicht direkt am Rand kleben lassen */
section > h2 { margin-top: 12px; }

@media (max-width:700px){
  #profil { padding-top: 40px; }
  #profil + section { padding-top: 40px; }
  section > h2 { margin-top: 10px; }
}