*, ::before, ::after {
  box-sizing: border-box;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cinzel-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/cinzel-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cinzel-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cinzel-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cinzel-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cinzel-v10-latin-regular.svg#Cinzel') format('svg'); /* Legacy iOS */
}

body {
  max-width: 72em;
  width: 98%;
  margin: 0 auto;
  padding: 0 1em;
  font: normal 1em "Lucida Grande", "Lucida Sans", verdana, arial, helvetica, sans-serif;
  background-color: #ffffff;
}

/* -------------------   Kopfzeile   -------------  */

img.schmal {
  display: flex;
}

img.breit {
  display: none;
}

header section {
  height: 113px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  background-image: url('pics/hintergrund.jpg');
  background-repeat: repeat-x;
  background-size: auto 113px;
  cursor: pointer;
}

header section img {
  height: 113px;
}


/* -------------------   Main   -------------  */

main {
  display: flex;
  flex-flow: column;
  color: #6d6e71;
}

main a {
  text-decoration: none;
  color: #6d6e71;
}

#merkzettel {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}

.merkzettelbutton {
  background-color: #f9f9f7;
  color: #000000;
  cursor: pointer;
  margin: 0.5em 0.25em;
  padding: 0em 1em;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  border: 1px solid #c8c5bd;
  font-size: 0.8em;
  border-collapse: collapse;
  height: 4em;
}

div.merkzettelzahl {
  height: 2.2em;
  width: 2.2em;
  background-image: url('pics/kreis.svg');
  background-size: cover;
  color: #ffffff;
  margin-left: 0.8em;
  text-align: center;
  padding: 0.3em 0em;
}

img.iconmerkzettel {
  height: 2em;
  margin-right: 0.8em;
}

.navigationsection {
  display: flex;
  flex-flow: column nowrap;
  border-collapse: collapse;
}

nav {
  background-color: #f9f9f7;
  color: #000000;
  cursor: pointer;
  margin: 0.25em 0em;
  padding: 0.25em 0em 0em 0em;
  display: flex;
  flex-flow: column;
  border: 1px solid #c8c5bd;
  font-size: 0.8em;
  width: 100%;
  max-width: 28em;
  border-collapse: collapse;
  line-height: 1.6em;
  align-self: flex-start;
  position: relative;
}

nav table {
  width: 100%;
  padding: 0em;
  margin: 0em;
  height: 2.5em;
  border-spacing: 0em;
}

nav td {
  text-align: left;
  padding: 0em;
}

td.iconzelle {
  min-width: 2.5em;
  text-align: center;
}

nav img {
  height: 1.5em;
}

.breitezelle {
  width: 100%;
  padding-right: 0.5em;
}

.leiste {
  background-color: #f9f9f7;
  color: #000000;
  cursor: pointer;
  margin: 0.5em 0.25em;
  padding: 0em 1em;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  border: 1px solid #c8c5bd;
  font-size: 0.59em;
  max-width: 32em;
  min-height: 2em;
  border-collapse: collapse;
}

section.main .leiste {
  justify-content: center;
  font-size: 0.8em;
  line-height: 1.6em;
  padding: 0em;
}

section.main .leiste svg {
  height: 0.6em;
  enable-background:new 0 0 38.35 20.43;
}

section.main .leiste polyline {
  fill:none;
  stroke: #000000;
  stroke-width: 4;
  stroke-linecap: butt;
  stroke-linejoin: bevel;
  stroke-miterlimit: 10;
}

table.suchfeld {
  background-image: url('pics/suchfeldhintergrund.svg');
  background-size: auto 2em;
  background-repeat: repeat-x;
  background-origin: content-box;
  padding: 0em;
  margin: 0em 0.5em;
  border-collapse: collapse;
  max-size: 100%;
  height: 2em;
}

table.filter {
  background-image: url('pics/filterhintergrund.svg');
  background-size: auto 2em;
  background-repeat: repeat-x;
  background-origin: content-box;
  padding: 0em;
  margin: 0.2em 0.2em 0em 0em;
  border-collapse: collapse;
  max-size: 100%;
  cursor: pointer;
}

table.filter tr td {
  height: 2em;
  padding: 0em;
  vertical-align: middle;
}

#filter_auswahl {
  display: none;
  padding: 0em;
  margin: 0em;
}

.filter_kategorien {
}

#filter_kategorien_mehr {
  cursor: pointer;
}

.filter_kategorien_lang {
  display: none;
}

#filter_kategorien_weniger {
  cursor: pointer;
}

.filter_komponist {
}

#filter_komponist_mehr {
  cursor: pointer;
}

.filter_komponist_lang {
  display: none;
}

#filter_komponist_weniger {
  cursor: pointer;
}

.filter_arrangeur {
}

#filter_arrangeur_mehr {
  cursor: pointer;
}

.filter_arrangeur_lang {
  display: none;
}

#filter_arrangeur_weniger {
  cursor: pointer;
}

section.filterleiste {
  display: flex;
  flex-flow: row wrap;
  font-size: 0.9em;
}

.sonderseiten {
  font-size: 0.8em;
}

h2 {
  font-family: 'Cinzel', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 2em;
}

div.sonderseiten p {
}


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

nav ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 0em;
  flex: auto;
  margin: 0em;
}

nav ul li {
  cursor: auto;
  line-height: 2em;
  list-style-type: none;
  width: 100%;
  border-top: 2px solid #bebbb0;
  font-variant: normal;
  margin-left: 0em;
  flex: auto;
}

#katalog ul li {
  cursor: pointer;
}

#suche form {
  max-width: 100%;
}

nav ul li ul li {
  cursor: pointer;
  line-height: 1.6em;
  border-top: 2px solid #f3f2f0;
  color: #6d6e71;
  background-color: #ffffff;
  padding: 0em 1em;
}

.pfeilnavigation {
  padding: 0em 0.5em;
  max-height: 2em;
  text-align: right;
  width: 1em;
}

.navigationpfeiloff {
  display: none;
}

.breitezelle {
  width: 100%;
}

.untermenu {
  display: none;
}

.menueintrag {
  padding: 0em 0.5em;
  max-height: 2em;
}

nav svg {
  height: 0.6em;
  enable-background:new 0 0 38.35 20.43;
}

nav polyline {
  fill:none;
  stroke-width:4;
  stroke-linecap:butt;
  stroke-linejoin:bevel;
  stroke-miterlimit:10;
  stroke: #000000;
}

li.Menu1 {
  color: #dcc300;
  background-color: #f9f7e4;
}

li.Menu1 polyline {
  stroke: #dcc300;
}

li.Menu2 {
  color: #668642;
  background-color: #ebeee3;
}

li.Menu2 polyline {
  stroke: #668642;
}

li.Menu3 {
  color: #c6d92c;
  background-color: #f8fae9;
}

li.Menu3 polyline {
  stroke: #c6d92c;
}

li.Menu4 {
  color: #c6d92c;
  background-color: #f5f8df;
}

li.Menu4 polyline {
  stroke: #c6d92c;
}

li.Menu5 {
  color: #faa61a;
  background-color: #fef5e4;
}

li.Menu5 polyline {
  stroke: #faa61a;
}

li.Menu6 {
  color: #b72a22;
  background-color: #f6e5d8;
}

li.Menu6 polyline {
  stroke: #b72a22;
}

li.Menu7 {
  color: #b72a22;
  background-color: #f6e5d8;
}

li.Menu7 polyline {
  stroke: #b72a22;
}

li.Menu8 {
  color: #b72a22;
  background-color: #f6e5d8;
}

li.Menu8 polyline {
  stroke: #b72a22;
}

li.Menu9 {
  color: #774d05;
  background-color: #efe7d9;
}

li.Menu9 polyline {
  stroke: #774d05;
}

#suchbegriff {
  border-width: 0em;
  padding: 0em;
  margin: 0em;
  width: 100%;
  height: 1.5em;
}


/* -------------------   Listeneintrag   -------------  */

.clickbereich {
  cursor: pointer;
}

section.main {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
}

article.ListenArtikel {
  display: flex;
  flex-flow: column;
  color: #6d6e71;
  padding: 0.5em 0em;
}

div.listenbild {
  width: 10em;
  margin-right: 1em;
}

div.listenbild > img {
  width: 9em;
  margin: 0.5em;
  box-shadow: 0.3em 0.3em 0.2em #e7e6e0;
}

div.beschreibung {
  margin: 0.5em 0em;
  flex: auto;
  line-height: 1.2em;
}

/* Für Farbschemata in der Liste siehe index.php */

img.wiedergabeliste {
  width: 1em;
  height: 1em;
}


/* -------------------   Item   -------------  */

article.listennavigation {
  display: flex;
  flex-flow: row nowrap;
  padding: 0.5em 0em;
  justify-content: center;
}

div.link {
  color: #6d6e71;
}

div.keinlink {
  color: #c6c7c8;
}

div.listenplatz {
  width: 8em;
  text-align: center;
}

article.Artikel {
  display: flex;
  flex-flow: column;
  color: #6d6e71;
  padding: 0.5em 0em;
}

div.itembild {
  width: 100%;
  max-width: 19em;
  margin-right: 1em;
  position: relative;
}

div.itembild > img {
  position: relative;
  top: 0;
  left: 0;
  width: 95%;
  max-width: 18em;
  margin: 0.5em;
  box-shadow: 0.4em 0.4em 0.2em #e7e6e0;
}

div.itembild > img.bildauswahl {
  position: absolute;
  top: 0;
  left: 0;
}

div.beschreibungstext {
  padding: 1em 0.8em 0em 0.8em;
  display: flex;
  flex-flow: row nowrap;
  min-width: 2em;
  font-size: 0.8em;
}

.beschreibung p {
  padding: 0em 0.8em;
}

div.listemerkzettel {
  padding: 0.3em 0.8em 0em 0.8em;
  display: flex;
  flex-flow: row nowrap;
  min-width: 2em;
  cursor: pointer;
}

div.beispielnoten {
  margin-top: 0.3em;
}

img.icons {
  height: 2em;
}

img.icons4 {
  height: 2em;
  cursor: pointer;
}

div.beispielnoten2 {
  margin-top: 0em;
  cursor: pointer;
}

div.beispielnoten3 {
  margin-top: 0.3em;
  cursor: pointer;
}

img.icons2 {
  height: 1.35em;
  cursor: pointer;
}

img.icons3 {
  height: 1.2em;
  cursor: pointer;
}

div.mp3pause {
  display: none;
}

table.trackliste {
  font-size: 0.7em;
  line-height: normal;
  margin-left: 0.5em;
  width: 100%;
  border-collapse: collapse;
}

table.trackliste td {
  vertical-align: top;
  padding-right: 0.8em;
  margin-top: 0.3em;
}

tr.tracklinie td {
  margin-top: 1em;
  padding-top: 1em;
/*  border-top: 1px solid #f9f9f7; */
}

.CDarrangeur {
  font-size: smaller;
  font-style: italic;
}

.gesamtpreis {
  padding: 0.5em 0em;
  font-weight: bold;
  border-top: 1px solid black;
  padding: 0em 0em 0em 0.5em;
  margin: 0em 0em 1em 0em;
  border-collapse: collapse;
  width: 100%;
}

.gesamtpreis tr {
  margin: 0em;
  padding: 0em;
}

.gesamtpreis td {
  margin: 0em;
  padding: 0.5em 0em 0em 0.8em;
  font-size: 0.8em;
}

.linkzu {
  line-height: 1.6em;
}

table.emailbuttons {
  padding: 0em;
  margin: 0em;
  border-collapse: collapse;
}

table.emailbuttons tr td {
  padding: 0em;
  margin: 0em;
  height: 2em;
  color: black;
  font-size: 0.8em;
}

.pointer {
  cursor: pointer;
}

td.emailbuttonbackground {
  background: #c8c5bc;
}

td.halbkreislinks {
  background-image: url('pics/halbkreislinks.svg');
  background-size: auto 2em;
  width: 1em;
}

td.halbkreisrechts {
  background-image: url('pics/halbkreisrechts.svg');
  background-size: auto 2em;
  width: 1em;
}

td.emailbuttonbackground img {
  height: 1em;
}


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

footer {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  background: #ebeae6;
  padding: 0.5em 0em;
  margin-top: 0.5em;
  font-size: 0.8em;
}

footer div {
  margin: 0.5em 1em;
  text-align: left;
}

footer a {
  text-decoration: none;
  color: #6d6e71;
}


/* -------------------   verschiedene Auflösungen   -------------  */

@media screen and (min-width: 24em) {
  footer {
    flex-flow: row wrap;
    padding: 0.5em 1em;
  }
}

@media screen and (min-width: 32em) {
  .leiste {
    font-size: 0.8em;
  }
  div.beschreibung {
    line-height: 1.5em;
  }
  div.beschreibungstext {
    font-size: 1em;
  }
  .gesamtpreis td {
    font-size: 1em;
  }
  table.emailbuttons tr td {
    font-size: 1em;
  }
  .sonderseiten {
    font-size: 1em;
  }
  footer {
    font-size: 1em;
  }
}

@media screen and (min-width: 36em) {
  img.schmal {
    display: none;
  }
  img.breit {
    display: flex;
  }
}

@media screen and (min-width: 44em) {
  section.main {
    flex-flow: row wrap;
  }
  article.ListenArtikel {
    flex-grow: 1;
    width: 22.5em;
    margin: 0em 0.5em;
  }
  article.Artikel {
    display: flex;
    flex-flow: row;
    color: #6d6e71;
    padding: 0.5em 0em;
  }
  .gesamtpreis {
    width: 22.5em;
  }
  h2 {
    margin: 0.8em 0.25em;
  }
  div.sonderseiten p {
    margin: 0em 0.5em;
  }
  div.sonderseiten h3 {
    margin: 1em 0.5em 0.8em 0.5em;
  }
  p.sonderseiten {
    padding: 0em 0.5em;
  }
}

@media screen and (min-width: 50em) {
  footer {
    justify-content: space-around;
  }
}

@media screen and (min-width: 64em) {
  table.trackliste {
    font-size: 1em;
  }
}

@media screen and (min-width: 74em) {
  .nav {
    min-width: auto;
  }
  .navigationsection {
    flex-flow: row nowrap;
    justify-content: center;
  }
  #suche {
    margin-left: 1em;
  }
  #sucheeingrenzen {
    margin-left: 1em;
  }
  article.ListenArtikel {
    max-width: 22em;
  }
  .gesamtpreis {
    width: 22em;
  }
  section.filterleiste {
    justify-content: center;
  }
}