/* ===========================================================================
   heimwerken.at – Kopf- und Fußzeile
   Setzt basis.css voraus.
   ======================================================================== */

/* --------------------------------------------------------------------------
   Kopfzeile
   Auf der Startseite liegt sie über dem Hero und ist durchsichtig. Überall
   sonst steht sie auf dunklem Grund. Deshalb zwei Zustände statt einem.
   ----------------------------------------------------------------------- */

.hw-kopf{
  position:relative;
  z-index:20;
  background:var(--tief);
}
.home .hw-kopf{
  position:absolute;
  inset:0 0 auto 0;
  background:transparent;
}
.hw-kopf-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:18px;
}

.hw-marke{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:-.02em;
  color:#fff !important;
  text-decoration:none !important;
  display:inline-flex;
  align-items:baseline;
  gap:.12em;
  white-space:nowrap;
}
.hw-marke em{font-style:normal;color:var(--akzent)}

/* Navigation ------------------------------------------------------------- */

.hw-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:clamp(14px,1.8vw,30px);
}
.hw-nav a{
  color:rgba(255,255,255,.88) !important;
  text-decoration:none !important;
  font-size:.95rem;
  font-weight:600;
  padding-block:6px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.hw-nav a:hover,
.hw-nav .current-menu-item > a{
  color:#fff !important;
  border-bottom-color:var(--akzent);
}

/* Untermenü: einfache Klappliste, ohne Skript. */
.hw-nav li{position:relative}
.hw-nav .sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:-14px;
  min-width:230px;
  flex-direction:column;
  gap:0;
  background:var(--tief-2);
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;
  padding:8px 0;
}
.hw-nav li:hover > .sub-menu,
.hw-nav li:focus-within > .sub-menu{display:flex}
.hw-nav .sub-menu a{
  display:block;
  padding:8px 18px;
  border-bottom:0;
  font-weight:500;
}
.hw-nav .sub-menu a:hover{background:rgba(255,255,255,.07)}

/* Mobiler Umschalter ------------------------------------------------------
   Ohne Skript umgesetzt: ein verstecktes Kontrollkästchen schaltet die Liste.
   Das funktioniert auch dann, wenn JavaScript blockiert ist. */

.hw-nav-schalter{display:none}
.hw-nav-knopf{
  display:none;
  cursor:pointer;
  padding:10px;
  margin:-10px;
  color:#fff;
}
.hw-nav-knopf span{
  display:block;
  width:24px;
  height:2px;
  background:#fff;
  margin:5px 0;
  transition:transform .2s ease,opacity .2s ease;
}

@media (max-width:900px){
  .hw-nav-knopf{display:block}
  .hw-nav{
    position:absolute;
    inset:100% 0 auto 0;
    background:var(--tief-2);
    border-top:1px solid rgba(255,255,255,.12);
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }
  .hw-nav-schalter:checked ~ .hw-nav{max-height:80vh;overflow:auto}
  .hw-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 0}
  .hw-nav a{display:block;padding:12px var(--rand);border-bottom:0}
  .hw-nav .sub-menu{
    display:flex;position:static;border:0;background:transparent;
    padding:0 0 0 16px;min-width:0;
  }
  .hw-nav-schalter:checked ~ .hw-nav-knopf span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hw-nav-schalter:checked ~ .hw-nav-knopf span:nth-child(2){opacity:0}
  .hw-nav-schalter:checked ~ .hw-nav-knopf span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* --------------------------------------------------------------------------
   Fußzeile
   ----------------------------------------------------------------------- */

.hw-fuss{
  background:var(--tief);
  color:rgba(255,255,255,.72);
  padding-block:clamp(44px,6vw,72px) clamp(24px,3vw,36px);
  font-size:.92rem;
}
.hw-fuss-raster{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,48px);
}
.hw-fuss .hw-label{color:#E8A48D;margin-bottom:.9rem}
.hw-fuss ul{list-style:none;margin:0;padding:0}
.hw-fuss li{margin-bottom:.5rem}
.hw-fuss a{color:rgba(255,255,255,.82);text-decoration:none}
.hw-fuss a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hw-fuss p{margin:0 0 .8rem;line-height:1.6}
.hw-fuss .hw-marke{font-size:1.15rem;margin-bottom:.8rem}

.hw-fuss-schluss{
  margin-top:clamp(30px,4vw,52px);
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  align-items:center;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.05em;
  color:rgba(255,255,255,.55);
}

/* Der Werbehinweis gehört in die Fußzeile jeder Seite, nicht nur dorthin,
   wo gerade ein Partnerlink steht. */
.hw-fuss-werbung{
  margin-top:18px;
  font-size:.84rem;
  line-height:1.6;
  color:rgba(255,255,255,.62);
  max-width:80ch;
}

@media (max-width:900px){
  .hw-fuss-raster{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .hw-fuss-raster{grid-template-columns:1fr;gap:28px}
  .hw-fuss-schluss{flex-direction:column;align-items:flex-start}
}