/* =========================================================
   CHOR RAPPACH – AKTUELLES DETAIL HEADER
   ========================================================= */

.article-header{
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;

  width:100% !important;
  height:auto !important;
  min-height:88px !important;

  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;

  padding:7px clamp(32px,6.5vw,118px) !important;

  background:rgba(255,255,255,.98) !important;

  box-shadow:
    0 8px 28px rgba(6,63,38,.08) !important;
}


/* Logo links */

.article-brand{
  justify-self:start;

  display:flex;
  align-items:center;

  margin:0;
}

.article-header .article-brand img{
  display:block !important;

  width:150px !important;
  height:auto !important;

  max-width:none !important;
  max-height:76px !important;

  object-fit:contain;
}


/* Navigation mittig */

.article-main-nav{
  justify-self:center;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:24px;

  white-space:nowrap;
}

.article-main-nav a{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:10px 0;

  color:#19231d;

  font-size:16px;
  font-weight:700;
  line-height:1;

  text-decoration:none;

  transition:color .2s ease;
}

.article-main-nav a i{
  color:#c79a42;

  font-size:12px;
}

.article-main-nav a:hover{
  color:#0b5b37;
}


/* Telefon / E-Mail rechts */

.article-header-right{
  justify-self:end;

  display:flex;
  align-items:center;

  gap:10px;
}

.article-contact-link{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border:1px solid rgba(6,63,38,.12);
  border-radius:50%;

  background:#f7f3e9;
  color:#063f26;

  font-size:15px;

  text-decoration:none;

  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease;
}

.article-contact-link:hover{
  transform:translateY(-2px);

  background:#063f26;
  color:#fff;
}


/* Burger nur mobil */

.article-menu-toggle{
  display:none;

  width:46px;
  height:42px;

  border:1px solid rgba(6,63,38,.12);
  border-radius:10px;

  background:#f7f3e9;
  color:#063f26;

  font-size:18px;

  cursor:pointer;
}


/* Zurück-Link gehört zum Artikel, nicht in den Header */

.article-back-row{
  margin:0 0 34px;
}

.article-back-row a{
  display:inline-flex;
  align-items:center;
  gap:8px;

  color:#063f26;

  font-size:13px;
  font-weight:800;

  text-decoration:none;
}

.article-back-row a:hover{
  color:#c59435;
}


/* etwas kleinere Desktopbreite */

@media(max-width:1280px){

  .article-header{
    padding-left:28px !important;
    padding-right:28px !important;
  }

  .article-main-nav{
    gap:17px;
  }

  .article-main-nav a{
    font-size:14px;
  }

  .article-header .article-brand img{
    width:128px !important;
  }

}


/* Mobile Navigation */

@media(max-width:1050px){

  .article-header{
    grid-template-columns:auto 1fr auto !important;

    min-height:78px !important;

    padding:
      6px 18px !important;
  }

  .article-header .article-brand img{
    width:115px !important;
    max-height:65px !important;
  }

  .article-header-right{
    gap:8px;
  }

  .article-contact-link{
    width:40px;
    height:40px;
  }

  .article-menu-toggle{
    display:grid;
    place-items:center;
  }

  .article-main-nav{
    position:absolute;

    top:100%;
    left:14px;
    right:14px;

    display:none;

    padding:12px;

    background:#fff;

    border:1px solid rgba(6,63,38,.10);
    border-radius:0 0 14px 14px;

    box-shadow:
      0 18px 40px rgba(6,63,38,.13);
  }

  .article-header.menu-open .article-main-nav{
    display:flex;
    flex-direction:column;
    align-items:stretch;

    gap:0;
  }

  .article-main-nav a{
    width:100%;

    padding:14px 12px;

    border-bottom:
      1px solid rgba(6,63,38,.08);

    font-size:14px;
  }

  .article-main-nav a:last-child{
    border-bottom:0;
  }

}


@media(max-width:600px){

  .article-header{
    min-height:72px !important;

    padding-left:14px !important;
    padding-right:14px !important;
  }

  .article-header .article-brand img{
    width:98px !important;
  }

  .article-contact-link{
    display:none;
  }

  .article-back-row{
    margin-bottom:24px;
  }

}

/* ======================================================= */

/* ARTICLE GREEN HEADER START */

.article-header{
  background:#063f26 !important;

  box-shadow:
    0 8px 28px rgba(0,0,0,.14) !important;
}


/* Logo weiß/gold */
.article-header .article-brand img{
  filter:none !important;
  opacity:1 !important;
}


/* Navigation */
.article-main-nav a{
  color:#ffffff !important;
}

.article-main-nav a i{
  color:#d7ae56 !important;
}

.article-main-nav a:hover{
  color:#d7ae56 !important;
}


/* Telefon / E-Mail */
.article-contact-link{
  background:rgba(255,255,255,.07) !important;

  border-color:rgba(255,255,255,.30) !important;

  color:#ffffff !important;
}

.article-contact-link:hover{
  background:#d7ae56 !important;
  color:#063f26 !important;

  border-color:#d7ae56 !important;
}


/* Burger */
.article-menu-toggle{
  background:rgba(255,255,255,.07) !important;

  border-color:rgba(255,255,255,.30) !important;

  color:#ffffff !important;
}


/* Mobile aufgeklapptes Menü */
@media(max-width:1050px){

  .article-main-nav{
    background:#063f26 !important;

    border-color:rgba(255,255,255,.12) !important;
  }

  .article-main-nav a{
    color:#ffffff !important;

    border-bottom-color:
      rgba(255,255,255,.10) !important;
  }

  .article-main-nav a:hover{
    color:#d7ae56 !important;
  }

}

/* ARTICLE GREEN HEADER END */