* { box-sizing: border-box; }
html { height: 100%; overflow-y: scroll; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #eaeaea;
  color: #313131;
}

/* Wrapper: früher #site 962px */
.ham-site {
  max-width: 962px;
  margin: 0 auto;
  min-height: 100vh;
  background: url(/fileadmin/templates/image/site.jpg) repeat-y 0 0;
}

/* Header */
.ham-header__banner {
  width: 100%;
  height: auto;
  display: block;
}

/* 2-Spalten Layout */
.ham-main {
  display: flex;
  align-items: flex-start;
}

.ham-aside {
  width: 180px;
  flex: 0 0 180px;
}

.ham-content {
  flex: 1 1 auto;
  padding-bottom: 20px;
}

/* TYPO3 Content-Box (dein frame-default) */
.frame-default {
  max-width: 731px;
  margin: 25px 10px 0 10px;
  background: #f3e6d1;
  color: #29475a;
  border-bottom: 2px solid #afafaf;
  padding: 20px;
}
.frame-default p { text-align: left; }

/* Navigation */
.ham-nav__list,
.ham-nav__sub { list-style: none; margin: 0; padding: 0; }

.ham-nav__link,
.ham-nav__sublink {
  display: block;
  width: 180px;
  text-decoration: none;
  position: relative;
}

/* Standardhöhen (passen zu euren Grafikbuttons) */
.ham-nav__link { height: 37px; }
.ham-nav__sublink { height: 29px; }

/* Text verstecken (Grafikbuttons zeigen) */
.ham-nav__label {
  position: absolute;
  left: -9999px;
}

/* Beispiel-Mapping: du ergänzt hier pro Menüpunkt die richtige Grafik */
/* Normal */
.ham-nav__link.nav-home {
  background: url(/typo3temp/assets/menu/Home_csm_button_ed2f3f4d6d_3c79b642bb.png) no-repeat;
}
/* Hover / Active */
.ham-nav__link.nav-home:hover,
.ham-nav__link.nav-home[aria-current="page"] {
  background-image: url(/typo3temp/assets/menu/Home_csm_button_ed2f3f4d6d_da4595e6ac.png);
}

/* Mobile */
@media (max-width: 768px) {
  .ham-main { flex-direction: column; }
  .ham-aside { width: 100%; flex: 0 0 auto; }
  .ham-content { padding: 0 10px 20px 10px; }

  /* Grafikbuttons auf Mobile sind ehrlich gesagt Mist.
     Übergang: volle Breite, aber skaliert => sieht je nach PNG ok/komisch aus. */
  .ham-nav__link,
  .ham-nav__sublink {
    width: 100%;
    background-size: cover;
  }

  .frame-default { max-width: none; margin: 15px 10px 0 10px; }
}

.ham-nav { width:180px; float:left; text-align:left; font-family: Verdana, Geneva, sans-serif; }
.ham-nav__list, .ham-nav__sub { list-style:none; margin:0; padding:0; }
.ham-nav__item, .ham-nav__subitem { margin:0; padding:0; }
.ham-nav__link, .ham-nav__sublink { display:block; padding:8px 10px; text-decoration:none; }