/* ===== Header / Navbar ===== */
.hw-header {
  background-color: var(--ground);
}

.hw-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.hw-wordmark {
  font-family: var(--font-wordmark);
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
}

.hw-wordmark:hover {
  color: var(--ink);
  text-decoration: none;
}

.hw-wordmark__sub {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

/* Hauptmenü (rechtsbündig am Seitenrand) */
.hw-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  justify-content: flex-end;
}

.hw-nav .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}

.hw-nav .nav-item {
  position: relative;
}

.navbar-expand-lg .hw-nav .nav-link {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-edge);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hw-nav .nav-link:hover,
.hw-nav .nav-link:focus {
  background-color: var(--ground-alt);
  color: var(--ink);
  text-decoration: none;
}

.hw-nav .nav-link.active,
.hw-nav .nav-item--active > .nav-link {
  background-color: var(--accent);
  color: var(--on-accent);
}

.hw-nav .nav-link.active:hover {
  background-color: var(--accent);
  color: var(--on-accent);
}

/* Dropdown */
.hw-nav .dropdown-menu {
  background-color: var(--surface);
  border: var(--card-border) solid var(--hairline);
  border-radius: var(--radius-edge);
  box-shadow: none;
  padding: var(--space-2) 0;
  min-width: 200px;
}

.hw-nav .dropdown-item {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  padding: var(--space-3) var(--space-4);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
}

.hw-nav .dropdown-item:hover,
.hw-nav .dropdown-item:focus {
  background-color: var(--beam);
  color: var(--on-beam);
}

@media (min-width: 992px) {
  .hw-nav .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* Mobile Toggler */
.hw-toggler {
  border: var(--card-border) solid var(--hairline);
  border-radius: var(--radius-edge);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  cursor: pointer;
}

.hw-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%232a1f17' stroke-width='2' stroke-linecap='round' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* ===== Fachwerk-Band ===== */
.hw-band {
  display: block;
  width: 100%;
  height: var(--band-height);
  line-height: 0;
}

.hw-band svg {
  display: block;
  width: 100%;
  height: var(--band-height);
}

/* ===== Hero / Titelbild ===== */
.hw-hero {
  position: relative;
  height: var(--hero-home);
  overflow: hidden;
}

.hw-hero--sub {
  height: var(--hero-sub);
}

.hw-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.hw-hero__soft {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(var(--hero-blur));
  mask-image: radial-gradient(ellipse 65% 75% at 42% 58%, transparent 55%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 65% 75% at 42% 58%, transparent 55%, #000 100%);
}

.hw-hero__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-8) var(--space-4);
  background: linear-gradient(transparent 40%, var(--hero-scrim));
}

.hw-hero__text h1 {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.1;
  color: var(--on-beam);
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

/* ===== Breadcrumb (im Content-Block) ===== */
.hw-breadcrumb {
  padding: 0 0 var(--space-2);
}

.hw-breadcrumb .breadcrumb {
  margin: 0;
  padding: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-muted);
}

.hw-breadcrumb .breadcrumb-item a {
  color: var(--ink-muted);
}

.hw-breadcrumb .breadcrumb-item a:hover {
  color: var(--accent);
}

.hw-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--ink-muted);
}

/* ===== Haupt-Layout (CSS Grid) ===== */
.hw-main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-8);
}

.hw-main__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr) var(--sidebar-second);
  grid-template-areas: "content sidebar-second";
}

.hw-main__grid.has-sidebar-first {
  grid-template-columns: var(--sidebar-first) minmax(0, 1fr) var(--sidebar-second);
  grid-template-areas: "sidebar-first content sidebar-second";
  gap: var(--space-7);
}

.hw-main__grid.has-sidebar-first.no-sidebar-second {
  grid-template-columns: var(--sidebar-first) minmax(0, 1fr);
  grid-template-areas: "sidebar-first content";
}

.hw-main__grid.no-sidebar-second {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "content";
}

.hw-content {
  grid-area: content;
  min-width: 0;
}

.hw-sidebar-first {
  grid-area: sidebar-first;
  min-width: 0;
}

.hw-sidebar-second {
  grid-area: sidebar-second;
  min-width: 0;
}

/* ===== Sidebar Blöcke ===== */
.hw-sidebar-first .block,
.hw-sidebar-second .block {
  background-color: var(--surface);
  border: var(--card-border) solid var(--hairline);
  border-radius: var(--radius-edge);
  margin-bottom: var(--space-6);
}

.hw-sidebar-first .block > .block-title,
.hw-sidebar-second .block > .block-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--on-beam);
  background-color: var(--beam);
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-edge) var(--radius-edge) 0 0;
}

.hw-sidebar-first .block > .block-title a,
.hw-sidebar-second .block > .block-title a {
  color: var(--on-beam);
  text-decoration: none;
}

.hw-sidebar-first .block > .block-content,
.hw-sidebar-second .block > .block-content {
  padding: var(--space-5);
}

/* ===== Sidebar-first: Untermenü ===== */
.hw-sidebar-first nav.block-menu {
  border: none;
  background: none;
}

.hw-sidebar-first nav.block-menu .block-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--on-beam);
  background-color: var(--beam);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-edge) var(--radius-edge) 0 0;
  margin: 0;
}

.hw-sidebar-first nav.block-menu .block-content {
  padding: 0;
}

.hw-sidebar-first nav.block-menu .nav {
  flex-direction: column;
}

.hw-sidebar-first nav.block-menu .nav-link {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  padding: var(--space-3) var(--space-5);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hw-sidebar-first nav.block-menu .nav-link:hover,
.hw-sidebar-first nav.block-menu .nav-link:focus {
  background-color: var(--ground-alt);
  color: var(--ink);
  text-decoration: none;
}

.hw-sidebar-first nav.block-menu .nav-link.is-active,
.hw-sidebar-first nav.block-menu .nav-link[aria-current="page"] {
  background-color: var(--beam);
  color: var(--on-beam);
}

.hw-sidebar-first nav.block-menu .nav-item:last-child .nav-link {
  border-bottom: none;
}

/* ===== Footer ===== */
.hw-footer {
  background-color: var(--beam);
  color: var(--on-beam);
}

.hw-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

.hw-footer a {
  color: var(--on-beam);
}

.hw-footer a:hover {
  color: var(--on-beam);
  text-decoration: underline;
}

.hw-footer .nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: 0;
  margin: 0;
}

.hw-footer .nav-link {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--on-beam);
  padding: var(--space-2);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
}

.hw-footer .nav-link:hover {
  color: var(--on-beam);
  text-decoration: underline;
}

/* ===== Responsive Umbrüche ===== */

/* Unter 1100px: Sidebar-second unter Content */
@media (max-width: 1099px) {
  .hw-main__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "content" "sidebar-second";
  }

  .hw-main__grid.has-sidebar-first {
    grid-template-columns: var(--sidebar-first) minmax(0, 1fr);
    grid-template-areas:
      "sidebar-first content"
      "sidebar-first sidebar-second";
  }

  .hw-sidebar-second {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
  }

  .hw-sidebar-second .block {
    flex: 1 1 250px;
  }
}

/* Unter 900px: Alles einspaltig, Untermenü als Buttonreihe */
@media (max-width: 899px) {
  .hw-main__grid,
  .hw-main__grid.has-sidebar-first,
  .hw-main__grid.has-sidebar-first.no-sidebar-second {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sidebar-first"
      "content"
      "sidebar-second";
    gap: var(--space-5);
  }

  .hw-sidebar-first nav.block-menu .nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .hw-sidebar-first nav.block-menu .nav-link {
    border-bottom: none;
    border: var(--card-border) solid var(--hairline);
    border-radius: var(--radius-edge);
    padding: var(--space-2) var(--space-4);
  }

  .hw-sidebar-first nav.block-menu .nav-link.is-active,
  .hw-sidebar-first nav.block-menu .nav-link[aria-current="page"] {
    border-color: var(--beam);
  }

  .hw-hero__text h1 {
    font-size: 32px;
  }

  .hw-hero {
    height: 280px;
  }

  .hw-hero--sub {
    height: 140px;
  }
}

/* Unter 560px: Kompakt */
@media (max-width: 559px) {
  .hw-sidebar-second {
    flex-direction: column;
  }

  .hw-sidebar-second .block {
    flex-basis: auto;
  }
}