/* =========================================================
   SETTINGS
   ========================================================= */
:root{
  --header-h: 86px;
  --row-max: 1280px;
}

/* =========================================================
   HEADER BASIS
   ========================================================= */
.kopfbereich {
  position: sticky;
  top: 0;
  z-index: 5000;
  min-height: var(--header-h);
  display: flex;
  align-items: center;

  /* Holz-Basis */
  background:
    linear-gradient(rgba(20,12,6,.75), rgba(20,12,6,.85)),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.03) 0 1px,
      transparent 1px 8px
    ),
    linear-gradient(135deg, #5a331a 0%, #3a2314 50%, #1f140c 100%);

  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);

  box-shadow:
    0 14px 40px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -8px 18px rgba(0,0,0,.35);

  border-bottom: 1px solid rgba(255,255,255,.08);

  position: sticky;
  overflow: visible;
}

/* leichte Maserung Overlay */
.kopfbereich::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    repeating-linear-gradient(
      92deg,
      rgba(255,255,255,.04) 0 2px,
      rgba(0,0,0,.04) 2px 6px,
      transparent 6px 16px
    );

  opacity:.35;
  mix-blend-mode:overlay;
}

/* dezenter Verlauf nach unten */
.kopfbereich::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:20px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35));
  pointer-events:none;
}
/* Bootstrap Container begrenzen */
.kopfbereich .container{
  max-width: var(--row-max);
}

/* Row Höhe */
.kopfbereich .row{
  min-height: var(--header-h);
}

/* =========================================================
   LOGO
   ========================================================= */
.header-logo{
  display:flex;
  align-items:center;
}

.header-logo .frame,
.header-logo figure{
  margin: 0 !important;
}

.header-logo .frame-group-container,
.header-logo .frame-container,
.header-logo .frame-inner{
  padding: 0 !important;
}

.header-logo img{
  max-width: 100%;
  height: auto;
  display: block;
}

.kopfbereich{
  min-height:72px;   /* war 86px → kompakter */
}

.kopfbereich .row{
  min-height:72px;
}


/* =========================================================
   RESPONSIVE HEADER
   ========================================================= */
@media (max-width: 992px){
  :root{
    --header-h: auto;
  }

  .kopfbereich{
    padding: 14px 0;
  }

  .kopfbereich .row{
    min-height: 0;
    row-gap: 12px;
  }

  .header-logo{
    justify-content: center;
  }
}

/* =========================================================
   FOOTER HOLZ STYLE
   ========================================================= */

#footer{
  position: relative;
  padding: 60px 0;

  color:#fff;

  /* Holz-Hintergrund */
  background:
    linear-gradient(rgba(20,12,6,.85), rgba(20,12,6,.95)),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.03) 0 1px,
      transparent 1px 8px
    ),
    linear-gradient(135deg, #4a2b17 0%, #2f1c10 50%, #1a1109 100%);

  box-shadow:
    inset 0 10px 30px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.08);

  border-top: 1px solid rgba(255,255,255,.08);
}

/* Maserung */
#footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    repeating-linear-gradient(
      92deg,
      rgba(255,255,255,.04) 0 2px,
      rgba(0,0,0,.04) 2px 6px,
      transparent 6px 16px
    );

  opacity:.35;
  mix-blend-mode:overlay;
}

/* =========================================================
   TYPOGRAFIE
   ========================================================= */

/* alles weiß */
#footer,
#footer p,
#footer li,
#footer span{
  color:#fff;
}

/* Links */
#footer a{
  color:#fff;
  text-decoration:none;
  transition:opacity .2s ease;
}

#footer a:hover{
  opacity:.7;
  text-decoration:underline;
}

/* Überschriften */
#footer h1,
#footer h2,
#footer h3,
#footer h4{
  color:#fff;
  font-weight:700;
}

/* Listen */
#footer ul{
  list-style:none;
  padding:0;
  margin:0;
}

#footer li{
  margin-bottom:8px;
}

/* =========================================================
   OPTIONAL: feine Trennlinie unten
   ========================================================= */

#footer .footer-bottom{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:14px;
  opacity:.85;
}