body {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  padding-bottom: 0;
}

.main-header { grid-area: header; }
.workshop-main { grid-area: main; }
.workshop-footer { grid-area: footer; }

.workshop-container {
  width: 92vw;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.workshop-container-tight { max-width: 860px; }


.main-header {
  display: flex;
  align-items: center;
  gap: 3vw;
  padding: 1.8vh 4vw;
  background: #a5d2f2;
  color: #141414;
  border-bottom: 3px solid #8fc2e8;
}
.brand-logo { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo img { height: 2.4rem; width: auto; }
.main-navigation { margin-left: auto; }
.navigation-list { display: flex; }
.navigation-link {
  color: #141414;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 0.96rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.header-menu-trigger { margin-left: auto; }
.menu-close-control {
  background: none;
  border: none;
  font-size: 1.9rem;
  line-height: 1;
  color: #141414;
  cursor: pointer;
  padding: 4px 8px;
}


.navigation-branch { position: static; }
.branch-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4vh 1.4vw;
  padding: 0 0 1.2vh 1.2rem;
}
.branch-link {
  display: block;
  padding: 10px 0;
  color: #141414;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(20, 20, 20, 0.1);
}
.branch-link:hover, .branch-link:focus { color: #8f2c4f; }


.workshop-main { width: 100%; }

.content-area {
  padding: 6.4vh 4vw;
  background: #1c1c1c;
}
.content-area:nth-of-type(odd) { background: #242424; }
.content-area.workbench-intro { background: #141414; }


.content-area.what-we-solve { background: #1c1c1c; }
.content-area.why-handmade { background: #242424; }
.content-area.goods-shelf { background: #161616; }
.content-area.from-raw-to-ready { background: #242424; }
.content-area.guarantee-note { background: #1c1c1c; }
.content-area.asked-often { background: #191919; }

.area-heading { margin-bottom: 3.2vh; }
.area-eyebrow {
  display: block;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #e07a9a;
  margin-bottom: 1.8vh;
}
.area-body p { color: #c0c0c0; }

.area-body .step-text { color: #c0c0c0; }

.section-divider {
  height: 1px;
  background: #343434;
  max-width: 1100px;
  margin: 0 auto;
}


.paired-band { display: flex; flex-direction: column; gap: 4vh 3vw; }
.paired-band .area-body { order: 2; }
.paired-band .area-figure { order: 1; }


.workshop-footer {
  background: #101010;
  color: #c0c0c0;
  padding: 0 0 3vh;
  border-top: 3px solid #bd3d65;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.contact-information {
  min-height: 220px;
  background: #1f1f24;
  padding: 4vh 6vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4vh;
}
.footer-links-column { padding: 4vh 6vw 0; }
.footer-column-heading {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #ffffff;
  margin-bottom: 1.8vh;
}
.footer-link-list { display: flex; flex-direction: column; gap: 1.1vh; }
.footer-link-list a { color: #c0c0c0; font-size: 0.94rem; }
.footer-link-list a:hover { color: #e07a9a; }
.footer-brandmark { margin-bottom: 2.4vh; }
.footer-brandmark img { height: 2.1rem; width: auto; filter: brightness(0) invert(1); }
.footer-note {
  padding: 3vh 6vw 0;
  font-size: 0.83rem;
  line-height: 1.6;
  color: #888888;
}
.copyright-bar {
  margin-top: 3vh;
  padding: 2.4vh 6vw 0;
  border-top: 1px solid #262626;
  font-size: 0.8rem;
  color: #888888;
}


.legal-sheet { padding: 6.4vh 4vw; background: #1c1c1c; }

.legal-sheet h1 { overflow-wrap: break-word; hyphens: auto; margin-bottom: 2.6vh; }
.legal-sheet h2 { margin-top: 4.4vh; }
.legal-sheet h2:first-of-type { margin-top: 2.4vh; }
.legal-sheet p, .legal-sheet li { color: #c0c0c0; }
.legal-sheet ul { margin: 0 0 1.25rem 1.2rem; }
.legal-sheet li { list-style: disc; margin-bottom: 0.6rem; }
.legal-lead { color: #ffffff; font-size: 1.05rem; }
.legal-updated { margin-top: 4vh; font-size: 0.85rem; color: #888888; }


@media (max-width: 767px) {
  .content-area {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
  }
  .workshop-main { scroll-snap-type: y proximity; }
  .section-divider { display: none; }
  .figure-panel.ornament-only { display: none; }
  .legal-sheet { min-height: 100vh; }
}

@media (min-width: 768px) {
  .content-area {
    padding: 11vh 4vw;
  }
  .navigation-branch { position: relative; }
  .branch-panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 30vw;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4vh 1.6vw;
    padding: 1.6vh 1.6vw;
    background: #a5d2f2;
    border: 1px solid #8fc2e8;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .navigation-branch:hover .branch-panel,
  .navigation-branch:focus-within .branch-panel { opacity: 1; visibility: visible; }
  .branch-link { border-bottom: none; white-space: nowrap; }

  .paired-band { flex-direction: row; align-items: center; }
  .paired-band > * { flex: 1 1 0; min-width: 0; }
  .content-area:nth-of-type(odd) .area-body { order: 1; }
  .content-area:nth-of-type(odd) .area-figure { order: 2; }
  .content-area:nth-of-type(even) .area-body { order: 2; }
  .content-area:nth-of-type(even) .area-figure { order: 1; }

  .footer-top { grid-template-columns: 1.2fr 1fr 1fr; }
  .contact-information { padding: 4vh 2.6vw; }
  .footer-links-column { padding: 4vh 2.6vw 0; }
  .footer-note { padding: 3vh 2.6vw 0; }
  .copyright-bar { padding: 2.4vh 2.6vw 0; }
  .legal-sheet { padding: 9vh 4vw; }
  body.hat-hinweis { padding-bottom: 24vh; }
}

@media (min-width: 1024px) {
  .content-area { padding: 13vh 4vw; }
}