@charset "UTF-8";
/* CSS Document */
* {
  box-sizing: border-box;
}

/* --------------------- STRUCTURE --------------------- */
html, body {
  margin: 0;
  padding: 0;
  font-size: 82%;
  background-color: #333; /* fallback colour */
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: none; /* important: remove duplicate background */
}

/* Fixed background layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../site/hvgbeton2026.jpg") no-repeat left top / cover;
  z-index: -1;
}
#wrapper {
  width: 1000px;
  margin: 0 auto;
  padding: 0;
}

#wrapper::after {
  content: "";
  display: table;
  clear: both;
}

#wrapper #nav {
  width: 190px;
  float: left;
  font-size: 1.5em;
}
#content {
  width: 810px;
  margin-left: 0;
  padding-bottom: 10px;
  float: left;
}
#logo {
  width: 810px;
  max-width: 95%;
  height: auto;
  margin: 10px auto 0 190px;
  text-align: center;
}
#lang {
  width: 810px;
  margin: 4px 0 0 190px;
  text-align: center;
  position: relative;
  top: -2px;
  z-index: 75;
}
#lang img {
  margin: 0 6px 0 6px;
}
#section {
  width: 810px;
  margin-top: 0;
}
#pagenavtop, #pagenavbottom {
  background: rgba(255, 255, 255, 0.65);
  font-size: 1.1em;
  letter-spacing: 0.05em;
  min-height: 24px;
  overflow: hidden;
  color: #333;
  }

#pagenavtop {
  padding: 6px 2px 0 4px;
  border-radius: 6px 6px 0 0;
  margin: 2px 0 0;
}

#pagenavbottom {
  text-align: right;
  padding: 6px 4px 4px 2px;
  border-radius: 0 0 6px 6px;
  margin-top: 0;
}

#pagenavtop a:link, #pagenavtop a:visited, #pagenavbottom a:link, #pagenavbottom a:visited, .anchorsplit a:link, .anchorsplit a:visited {
  text-decoration: none;
  color: #cf1439;
  font-weight: 500;
}
#pagenavtop a:active, #pagenavtop a:hover, #pagenavbottom a:active, #pagenavbottom a:hover, .anchorsplit a:active, .anchorsplit a:hover {
  text-decoration: none;
  color: #737373;
}
.article {
  padding: 4px 10px;
  background: #fff;
  margin: 6px 0;
  overflow: auto;
}
.source {
  border-top: solid 2px #cbcbcb;
  font-size: 1em;
  color: #808080;
  text-align: left;
  padding: 4px 0;
}
.source a {
  text-decoration: none;
  color: #966;
}
.source a:active, .source a:hover {
  color: #999;
}
.artwrap {
  margin: 0 0 6px 0;
  padding: 0;
  display: block;
}
.anchorsplit {
  padding: 6px 2px 2px 4px;
  background: rgba(255, 255, 255, 0.65);
  font-size: 1.1em;
  letter-spacing: 0.05em;
  color: #333;
  min-height: 24px;
  overflow: hidden;
  margin: 0;
}
/* --------------------- NAVIGATION --------------------- */
#nav {
  padding: 0 4px 0 0;
}
#nav .head {
  font-size: 1.8em;
  letter-spacing: 0.1em;
  color: #FFF;
  margin: 6px 0 6px 0;
  padding-left: 0;
font-family: battery-park, sans-serif;
font-style: normal;
font-weight: 400;
  list-style: none;
  border-bottom: solid 1px #000;
  background: none !important;
  border-radius: 0 !important;
 text-shadow: #000 0 0 0.1em; 
}
#nav ul {
  font-size: 0.9em;
  list-style: none;
  padding: 10px 8px 6px 0;
  margin: 6px;
}
#nav li {
  line-height: 1.4em;
  padding-left: 6px;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.4);
}
.rad { border-radius: 6px; }

#nav a, .social i {
  text-decoration: none;
  color: #000;
  letter-spacing: 0.03em;
  text-shadow: #fff 0 0 0.3em;
}

#nav a:hover, #nav a:active, .social i:hover, .social i:active {
  color: #fff;
  text-shadow: #000 0 0 0.2em;
}
body#news #nav a.news,
body#updates #nav a.updates,
body#tv #nav a.tv,
body#tour #nav a.tour,
body#bio #nav a.bio,
body#hvgdesk #nav a.hvgdesk,
body#stromlinien #nav a.stromlinien,
body#music #nav a.music,
body#musicindex #nav a.music,
body#disc #nav a.disc,
body#lyrics #nav a.lyrics,
body#film #nav a.film,
body#misc #nav a.misc,
body#links #nav a.links,
body#media #nav a.media,
body#contact #nav a.contact,
body#kulturpreis #nav a.kulturpreis,
body#fluechtig #nav a.fluechtig {
  color: #DE173E;
}

body#news #nav a.news:hover,
body#news #nav a.news:active,
body#updates #nav a.updates:hover,
body#updates #nav a.updates:active,
body#tv #nav a.tv:hover,
body#tv #nav a.tv:active,
body#tour #nav a.tour:hover,
body#tour #nav a.tour:active,
body#bio #nav a.bio:hover,
body#bio #nav a.bio:active,
body#hvgdesk #nav a.hvgdesk:hover,
body#hvgdesk #nav a.hvgdesk:active,
body#stromlinien #nav a.stromlinien:hover,
body#stromlinien #nav a.stromlinien:active,
body#music #nav a.music:hover,
body#music #nav a.music:active,
body#musicindex #nav a.music:hover,
body#musicindex #nav a.music:active,
body#disc #nav a.disc:hover,
body#disc #nav a.disc:active,
body#lyrics #nav a.lyrics:hover,
body#lyrics #nav a.lyrics:active,
body#film #nav a.film:hover,
body#film #nav a.film:active,
body#misc #nav a.misc:hover,
body#misc #nav a.misc:active,
body#links #nav a.links:hover,
body#links #nav a.links:active,
body#media #nav a.media:hover,
body#media #nav a.media:active,
body#contact #nav a.contact:hover,
body#contact #nav a.contact:active,
body#kulturpreis #nav a.kulturpreis:hover,
body#kulturpreis #nav a.kulturpreis:active,
body#fluechtig #nav a.fluechtig:hover,
body#fluechtig #nav a.fluechtig:active {
  color: #fff;
}

body#news .collapsible-menu a.news,
body#updates .collapsible-menu a.updates,
body#tv .collapsible-menu a.tv,
body#tour .collapsible-menu a.tour,
body#bio .collapsible-menu a.bio,
body#hvgdesk .collapsible-menu a.hvgdesk,
body#stromlinien .collapsible-menu a.stromlinien,
body#music .collapsible-menu a.music,
body#musicindex .collapsible-menu a.music,
body#disc .collapsible-menu a.disc,
body#lyrics .collapsible-menu a.lyrics,
body#film .collapsible-menu a.film,
body#misc .collapsible-menu a.misc,
body#links .collapsible-menu a.links,
body#media .collapsible-menu a.media,
body#contact .collapsible-menu a.contact,
body#kulturpreis .collapsible-menu a.kulturpreis,
body#fluechtig .collapsible-menu a.fluechtig {
  color: #DE173E;
}

body#news .collapsible-menu a.news:hover,
body#news .collapsible-menu a.news:active,
body#updates .collapsible-menu a.updates:hover,
body#updates .collapsible-menu a.updates:active,
body#tv .collapsible-menu a.tv:hover,
body#tv .collapsible-menu a.tv:active,
body#tour .collapsible-menu a.tour:hover,
body#tour .collapsible-menu a.tour:active,
body#bio .collapsible-menu a.bio:hover,
body#bio .collapsible-menu a.bio:active,
body#hvgdesk .collapsible-menu a.hvgdesk:hover,
body#hvgdesk .collapsible-menu a.hvgdesk:active,
body#stromlinien .collapsible-menu a.stromlinien:hover,
body#stromlinien .collapsible-menu a.stromlinien:active,
body#music .collapsible-menu a.music:hover,
body#music .collapsible-menu a.music:active,
body#musicindex .collapsible-menu a.music:hover,
body#musicindex .collapsible-menu a.music:active,
body#disc .collapsible-menu a.disc:hover,
body#disc .collapsible-menu a.disc:active,
body#lyrics .collapsible-menu a.lyrics:hover,
body#lyrics .collapsible-menu a.lyrics:active,
body#film .collapsible-menu a.film:hover,
body#film .collapsible-menu a.film:active,
body#misc .collapsible-menu a.misc:hover,
body#misc .collapsible-menu a.misc:active,
body#links .collapsible-menu a.links:hover,
body#links .collapsible-menu a.links:active,
body#media .collapsible-menu a.media:hover,
body#media .collapsible-menu a.media:active,
body#contact .collapsible-menu a.contact:hover,
body#contact .collapsible-menu a.contact:active,
body#kulturpreis .collapsible-menu a.kulturpreis:hover,
body#kulturpreis .collapsible-menu a.kulturpreis:active,
body#fluechtig .collapsible-menu a.fluechtig:hover,
body#fluechtig .collapsible-menu a.fluechtig:active {
  color: #DE173E;
}

.social {
  font-size: 1.8em;
  line-height: 1.2em;
  color: #fff;
  margin: 6px 14px 6px auto;
  padding: 0 10px 0 10px;
  display: flex;
  justify-content: space-around;
  width: 165px;
  background: rgba(197, 197, 197, 0.4);
  border-radius: 6px;
}
.social i {
  padding-top: 2px;
  padding-right: 6px;
  text-shadow: #aaa 0 0 0.1em;
  color: #000;
}

i.fa-youtube {
  padding-right: 2px;
}
i.fa-vimeo-v {
  padding-right: 0;
}
.impressum {
  width: auto;
  color: #fff;
  font-size: 0.6em;
  padding: 4px 14px;
  clear: both;
}
/* --------------------- COLLAPSIBLE MENU --------------------- */
.collapsible-menu {
  color: #fff;
  background: #666;
  font-size: 1.8em;
  width: 2em !important;
  position: absolute;
  z-index: 100;
  border-bottom-right-radius: 4px;
}
.menu-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 0 0 20px;
}
.collapsible-menu .head {
  font-size: 1.2em;
  letter-spacing: 0.1em;
  color: #000;
  margin: 5px 0 5px 0;
  padding: 0 0 4px 0;
  font-family: battery-park, sans-serif;
font-style: normal;
font-weight: 400;
  list-style: none;
  border-bottom: solid 1px #000;
}
.collapsible-menu ul {
  font-size: 0.9em;
  list-style: none;
  font-weight: 400;
  padding: 0 30px 0 0;
  margin: 4px 0 0 0;
  width: 48%;
}
.collapsible-menu li {
  padding-left: 14px;
  margin-right: 14px;
}
.collapsible-menu a {
  text-decoration: none;
  color: #000;
  display: inline-block;
  padding: 10px 0;
}
.collapsible-menu a:hover, .collapsible-menu a:active {
  color: #DE173E;
}
.collapsible-menu .social {
  font-size: 1.6em;
  line-height: 1.1em;
  color: #000;
  margin: 2px auto 2px 0;
  width: 95%;
}
.collapsible-menu .social i {
  padding: 6px 14px 2px 14px;
}
.collapsible-menu .impressum {
  width: auto;
  color: #000;
  font-size: 0.6em;
  padding: 0 10px 10px 0;
  clear: both;
}
.collapsible-menu label {
  display: block;
  cursor: pointer;
  padding: 10px 0 10px 10px;
  width: 2em;
}
input#menu {
  display: none !important;
}
input:checked + label {
  width: calc(100vw - 15px);
  background-color: #fff;
  color: #000;
  box-shadow: 2px 0 12px rgba(170, 170, 170, 0.7);
}
/* Toggle Effect */
input:checked ~ .menu-content {
  max-height: 100%;
  width: calc(100vw - 15px);
  background-color: #fff;
  border-bottom-right-radius: 12px;
  box-shadow: 2px 5px 12px rgba(170, 170, 170, 0.7);
}
input:checked ~ .collapsible-menu {
  width: calc(100vw - 15px);
  overflow-y: scroll;
}
/* --------------------- INDEX PAGE --------------------- */
body#index {
height: 100vh;  /* fallback */
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background: url("../site/hvgsplash2026.jpg") no-repeat fixed center #333;
background-size: cover;
}
body#index img {
  width: 95%;
  max-width:1000px;
  height: auto;
  padding-top: 10px;
    display:inline-block;
    text-align: center;
}
body#index .enter {
  font-family: battery-park, sans-serif;
font-style: normal;
font-weight: 400;
  font-size: 3.4em;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.9);
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem);
  margin: 0;            /* kill margin-top:auto etc */
  text-align: center;
    
}
body#index a:link, body#index a:visited {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}
body#index a:hover, body#index a:active {
  color: #DE173E;
  text-decoration: none;
}
/* --------------------- PROJECT INDEX PAGES --------------------- */
#indeximg {
  box-shadow: inset 0px 0px 0px 0px #fff;
  margin: 6px auto;
  padding: 0;
  width: 100%;
  max-width: 810px;
  height: calc(100vw / 1.5);
  max-height: 540px;
  background-size: contain;
  border-radius: 4px;
  display: flex;
}
#indeximg ul {
  margin: 20px;
  padding: 10px;
  list-style-type: none;
  overflow: hidden;
  width: auto;
  min-width: 200px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  border: 1px solid #eee;
}
#indeximg li {
  display: block;
  line-height: 1.8em;
  font-size: 1.4em;
  font-weight: bold;
  letter-spacing: 1px;
}
#indeximg.topright ul, #indeximg.bottomright ul {
  text-align: right;
}
#indeximg ul a:link, #indeximg ul a:visited {
  color: #000;
}
#indeximg ul a:hover, #indeximg ul a:active, #indeximg.dark ul a:hover, #indeximg.dark ul a:active {
  color: #DE173E;
}
.dark > ul {
  background: rgba(000, 000, 000, 0.5) !important;
  border: 1px solid #000 !important;
}
.dark > ul a:link, .dark > ul a:visited {
  color: #fff !important;
}
.dark > ul a:hover, .dark > ul a:active {
  color: #DE173E !important;
}
.topic {
  max-width: 300px;
  width: auto;
  margin: 0;
}
.topleft {
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-end;
}
.topright {
  justify-content: flex-end;
  align-items: flex-start;
  align-content: flex-start;
}
.bottomleft {
  justify-content: flex-start;
  align-items: flex-end;
  align-content: flex-end;
}
.bottomright {
  justify-content: flex-end;
  align-items: flex-end;
  align-content: flex-end;
}
.liedtexte_index {
  background-image: url("../indexpics/liedtexte.jpg") no-repeat center;
}
.lyrics_index {
  background: url("../indexpics/lyrics.jpg") no-repeat center;
}
.alpinkatzen_index {
  background: url("../indexpics/alpinkatzen.jpg") no-repeat center;
}
.tibet_index {
  background: url("../indexpics/tibet.jpg") no-repeat center;
}
.afrika_index {
  background: url("../indexpics/afrika.jpg") no-repeat center;
}
.africa_index {
  background: url("../indexpics/africa.jpg") no-repeat center;
}
.foen_index {
  background: url("../indexpics/foen.jpg") no-repeat center;
}
.trad_index {
  background: url("../indexpics/trad.jpg") no-repeat center;
}
.grenzenlos_index {
  background: url("../indexpics/grenzenlos.jpg") no-repeat center;
}
.iwasig_index {
  background: url("../indexpics/iwasig.jpg") no-repeat center;
}
.iwasig2003_index {
  background: url("../indexpics/iwasig2003.jpg") no-repeat center;
}
.grenzenlos2003_index {
  background: url("../indexpics/grenzenlos2003.jpg") no-repeat center;
}
.tradii_index {
  background: url("../indexpics/tradii.jpg") no-repeat center;
}
.tradtour_index {
  background: url("../indexpics/tradtour.jpg") no-repeat center;
}
.ausland_index {
  background: url("../indexpics/ausland.jpg") no-repeat center;
}
.derweil_index {
  background: url("../indexpics/derweil.jpg") no-repeat center;
}
.linztour_index {
  background: url("../indexpics/linztour.jpg") no-repeat center;
}
.linztour2_index {
  background: url("../indexpics/linztour2.jpg") no-repeat center;
}
.snix_index {
  background: url("../indexpics/snix.jpg") no-repeat center;
}
.hautundhaar_index {
  background: url("../indexpics/hautundhaar.jpg") no-repeat center;
}
.tour2011_index {
  background: url("../indexpics/tour2011.jpg") no-repeat center;
}
.entwederundoder_index {
  background: url("../indexpics/entwederundoder.jpg") no-repeat center;
}
.brennatuats_index {
  background: url("../indexpics/brennatuats.jpg") no-repeat center;
}
.imjahrdesdrachen_index {
  background: url("../indexpics/imjahrdesdrachen.jpg") no-repeat center;
}
.tour2014_index {
  background: url("../indexpics/tour2014.jpg") no-repeat center;
}
.tour2015_index {
  background: url("../indexpics/tour2015.jpg") no-repeat center;
}
.federn_index {
  background: url("../indexpics/federn.jpg") no-repeat center;
}
.brennatuatsschonlang_index {
  background: url("../indexpics/brennatuatsschonlang.jpg") no-repeat center;
}
.federntour_index {
  background: url("../indexpics/federntour.jpg") no-repeat center;
}
.federnlive_index {
  background: url("../indexpics/federnlive.jpg") no-repeat center;
}
.zeitenundzeichen_index {
  background: url("../indexpics/zeitenundzeichen.jpg") no-repeat center;
  box-shadow: inset 0px 0px 0px 3px #666 !important;
}
.fluechtig_index {
  background: url("../indexpics/fluechtig.jpg") no-repeat center;
}
.neuezeiten_index {
  background: url("../indexpics/neuezeiten.png") no-repeat center;
}
.derweil2_index {
  background: url("../indexpics/derweil2.jpg") no-repeat center;
}
.zeitenundzeichenlive_index {
  background: url("../indexpics/zeitenundzeichenlive.jpg") no-repeat center;
}
/* --------------------- TEXT STYLES --------------------- */
p {
  font-size: 1.3em;
  color: #000;
  text-align: left;
  line-height: 1.4em;
  margin: 11px 0;
  font-weight: normal;
}
h1 {
  font-size: 2em;
  line-height: normal;
  text-align: center;
  color: #000;
  margin-top: 0;
  margin-bottom: 0;
  text-shadow: #fff 0 0 0.3em;
}
h2 {
  font-size: 1.8em;
  margin: 10px 0;
  font-weight: bold;
  color: #DE173E;
  padding-left: 36px;
  background-size: 30px 21px !important;
  text-align: left;
  padding-top: 8px;
  padding-bottom: 6px;
  margin-top: 6px;
  margin-bottom: 0;
  background: url(../site/lindwurm.png) no-repeat left;
  -webkit-font-smoothing: antialiased;
}
h3 {
  font-size: 1.5em;
  color: #DE173E;
  text-align: left;
  font-weight: bold;
  margin-top: 6px;
  margin-bottom: 2px;
  -webkit-font-smoothing: antialiased;
}
h4 {
  font-size: 1.4em;
  color: #DE173E;
  text-align: left;
  font-weight: bold;
  margin: 0 0 2px 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}
blockquote {
  width: 90%;
  margin: 8px auto;
  padding: 8px 12px;
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  overflow-y: auto;
}
.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}
.textmid {
  text-align: center;
}
.textmidita {
  text-align: center;
  font-style: italic;
}
.textright {
  text-align: right;
}
.justify {
  text-align: justify;
}
.small {
  font-size: 0.85em !important;
}
p.small {
  font-size: 1.1em !important;
}
.grey {
  color: #666 !important;
}
.white {
  color: #fff !important;
}
.blue {
  color: #0077c2 !important;
}
 .orange {
  color: #DE173E !important;
}
.linethrough {
  text-decoration-line: line-through;
}
/* --------------------- IMAGES --------------------- */
a img {
  border: none;
}
img {
  font-weight: normal;
  font-size: 0.9em;
}
img.corners {
  border-radius: 12px;
}
.imgleft {
  float: left;
  margin: 4px 14px 14px 0;
  display: inline-block;
}
.imgright {
  float: right;
  margin: 4px 0 14px 14px;
  display: inline-block;
}
img.centre {
  display: block;
  margin: 6px auto 6px auto;
}
img.banner {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 6px auto 6px auto;
}
img.centre2 {
  display: inline;
  margin: 6px;
}
.article img {
  border: solid 3px #ccc;
  font-size: 0.8em;
  color: #000;
  text-align: center;
}
.cap {
  display: none;
  padding: 0;
  margin: 0;
}
a.caplink:link, a.caplink:visited {
  text-decoration: none;
  color: #966;
}
a.caplink:active, a.caplink:hover {
  color: #999;
}
img#reise {
  width: 100%;
  height: auto;
}
/* --------------------- LINKS --------------------- */
a {
  text-decoration: none;
}
a img {
  border: none;
}
.article a:link, .article a:visited, .separate a:link, .separate a:visited {
  color: #f20836;
}
.article a:active, .article a:hover, .separate a:active, .separate a:hover {
  color: #999;
}
/* --------------------- CAPTIONS / BARS --------------------- */
.infobar {
  width: 90%;
  background-color: #f0f0f0;
  border: 1px solid #CCCCCC;
  padding: 0 4px;
  border-radius: 2px;
}
.infobar p {
  font-size: 1.3em;
  color: #666666;
  text-align: center;
}
div.infobar, div.infobar_left, div.infobar_right {
  display: block;
  margin: 8px auto;
}
.infobar_left {
  width: 50%;
  float: left;
}
.infobar_right {
  width: 50%;
  float: right;
}
span.infobar {
  background-color: #f0f0f0;
  border: 1px solid #CCCCCC;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 1.2em;
  color: #666666;
  text-align: center;
}
span.infobar a {
  font-size: 0.8em !important;
}
.infobar_left, .infobar_right {
  background-color: #f0f0f0;
  border: 1px solid #CCCCCC;
  padding: 0;
}
.captionleft {
  float: left;
  width: 100px;
  max-width: 100%;
  margin: 10px;
  display: inline-block;
}
.captioncentre {
  margin: 10px auto;
  width: 500px;
  max-width: 100%;
  display: block;
}
.captionright {
  float: right;
  margin: 10px;
  width: 100px;
  max-width: 100%;
  display: inline-block;
}
.captionleft img, .captioncentre img, .captionright img {
  border: 3px solid #CCCCCC;
  margin: 0;
}
.captionleft p, .captioncentre p, .captionright p, .columnleft .captionleft p, .columnleft .captioncentre p, .columnleft .captionright p, .columnright .captionleft p, .columnright .captioncentre p, .columnright .captionright p {
  background-color: #f0f0f0;
  border: 1px solid #CCCCCC;
  font-size: 1.2em !important;
  color: #666666;
  text-align: center;
  margin: 5px 0 0 0;
  padding: 4px;
  max-width: 100%;
}
body#media .captionleft p {
  font-size: 1.1em !important;
}
.newsblock {
  max-width: 100%;
  height: auto;
  padding: 0;
  margin: 6px auto -4px;
  clear: both;
  overflow: hidden;
}
.newsblock img {
  border: 1px solid #CCCCCC;
  width: 100%;
  height: auto;
}
.intro {
  width: 100%;
  background: #FAFAFA;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}
.intro p {
  font-size: 1.1em;
  font-style: italic;
  color: #742F87;
  text-align: justify;
}
div.leftbar {
  float: left;
}
div.rightbar {
  float: right;
}
div.leftbar, div.rightbar {
  width: 250px;
  margin: 0 10px;
}
.leftbar p, .rightbar p {
  background-color: #f0f0f0;
  border: 1px solid #CCCCCC;
  font-size: 1.2em;
  color: #666666;
  text-align: left;
  padding: 6px;
}
/* --------------------- GALLERIES --------------------- */
.gallery {
  width: 650px;
  font-size: 1em;
  color: #000;
  padding-top: 6px;
  padding-bottom: 3px;
  text-align: center;
  margin: auto;
}
.w550 {
  width: 550px;
  margin: auto;
}
.w450 {
  width: 450px;
  margin: auto;
}
.w350 {
  width: 350px;
  margin: auto;
}
.gallery img {
  border: solid 2px #ccc;
  margin: 0 1px 4px 1px;
  font-size: 0.8em;
  color: #000;
  text-align: center;
  vertical-align: middle;
}
.cap {
  display: none;
  padding: 0;
  margin: 0;
}
h4 {
  font-size: 1.4em;
}
a.caplink:link, a.caplink:visited {
  text-decoration: none;
  color: #966;
}
a.caplink:active, a.caplink:hover {
  color: #999;
}

.band img {margin-bottom: 8px;}
/* --------------------- LISTS --------------------- */
ul.list, ol {
  padding-left: 10px;
  margin-left: 20px;
  font-size: 1.3em;
  line-height: 1.4em;
}
ul.list2, ul.list2 li {
  font-size: 1.2em;
  line-height: 1.3em;
}
ul.list {
  list-style-type: circle;
}
ol {
  margin-left: 20px;
}
ul.list li, ol li {
  margin-bottom: 4px;
}
ul.artists {
  width: 99%;
  margin: 0 auto;
  display: block;
  padding: 0;
}
ul.artists li {
  width: 100%;
  list-style-type: none;
  list-style-position: inside;
  display: inline-block;
  overflow: auto;
}
ul.artists li p {
  font-size: 1.3em;
  color: #000;
}
ul.artists img {
  margin: 0px 10px 14px 0;
  text-align: center;
  border: 2px solid #ccc;
  float: left;
  height: 75px;
  width: 75px;
  border-radius: 12px;
}
/* --------------------- COLUMNS --------------------- */
.columnleft {
  width: 48%;
  float: left;
  margin-right: 6px;
  margin-top: 10px;
  clear: both;
}
.columnright {
  width: 48%;
  float: right;
  clear: right;
  margin-top: 10px;
}
.columnleft p, .columnright p {
  margin-left: 10px;
}
.border {
  border: 2px #ccc solid;
}

/* --------------------- UPDATES --------------------- */
#updates table {
  width: 98%;
  margin: 0 auto;
  border: none;
  border-spacing: 3px;
  border-collapse: separate;
  max-width: 99% !important;
  font-size: 1.2em;
  line-height: 1.2em;
}
#updates td, #updates th {
  padding: 4px 2px 2px 2px;
}
#updates th {
  font-weight: bold;
  background-color: #ececec;
  text-align: center;
  border: solid 1px #c5c5c5;
  width: 10%;
  max-width: 10% !important;
}
#updates .project {
  padding-left: 4px;
  width: 32%;
  max-width: 32% !important;
}
#updates .entry {
  width: auto;
  max-width: 58% !important;
}
/* --------------------- TV AND RADIO --------------------- */
#tv table {
  width: 100%;
  margin: 0 auto !important;
  border: none;
  border-spacing: 2px;
  border-collapse: separate;
  max-width: 99% !important;
  font-size: 1.2em;
}
#tv td, #tv th {
  padding: 6px;
}
#tv th {
  font-weight: bold;
  line-height: 1.4em;
  background-color: #ececec;
  text-align: center;
  border: solid 1px #c5c5c5;
}
#tv .date {
  width: 12%;
  font-weight: bold;
}
#tv .time {
  width: 13%;
  font-weight: bold;
}
#tv .channel {
  width: 30%;
  font-weight: bold;
}
#tv .prog {
  width: auto;
  font-weight: bold;
}
#tv .desc {
  border-bottom: solid 1px #c5c5c5;
  padding-bottom: 6px;
  width: 100%;
}
body#tv p.small {
  padding-left: 10px;
}
/* --------------------- TOURPLAN / TABLES --------------------- */
table {
  width: 100%;
  max-width: 100%!important;
  margin: 0 auto;
  border-spacing: 2px;
  border-collapse: separate;
  font-size: 1.3em;
}

td {
  padding: 10px;
  vertical-align: top !important;
}

/*
td.tourdatum[colspan="3"] {
  border-bottom: solid 1px #c5c5c5;
  padding: 0 !important;
  border-collapse: collapse;
}
*/

th {
  font-weight: bold;
  text-align: left;
  background-color: #ececec;
  font-size: 1em;
  line-height: 1.1em;
  border: solid 1px #c5c5c5;
  padding: 4px;
}
th tr {
  border: solid 1px #c5c5c5;
  padding: 4px 4px 2px 4px;
}
td.tourdatum {
  padding: 10px 10px 0 10px;
  text-align: left;
  font-weight: bold;
  width: 20%;
}

/*
body#tour td.tourort {
 padding: 10px 10px 0 10px;
 width: 50%;
}

td.tourtickets {
  padding: 10px;
  width: 30%;
 }

table td.tourtickets a {
  padding: 14px 6px;
  background-color: #DC5100;
  color: #fff!important;
  text-decoration: none;
  display: block;
  text-align: center;
}
*/
body#tour td.tourspacer{
    padding: 6px 10px; 
}

td.tourspacer[colspan="3"] {
  border-bottom: solid 1px #c5c5c5;
  padding: 4px !important;
 border-collapse: collapse;
}

body#tour td.tourort {
 padding: 10px 10px 0 10px;
 width: 45%!important;
}

td.tourtickets {
  padding: 10px 6px 4px 6px;
  width: 15%!important;
 }

table td.tourtickets a {
  padding: 14px 6px;
  background-color: #DE173E;
  color: #fff!important;
  text-decoration: none;
  display: block;
  text-align: center;
  border-radius: 4px;
}

td.tourtickets a:hover, td.tourtickets a:active {
  background-color: #999;
  text-decoration: none;
}
body#tour td.tourdatum p {
  font-size: 1em;
  text-align: center;
}

.vorverkauf {
  width: 70%;
    margin: 0 auto 8px;
  background: #d88898;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
    font-size: 1.2em;
}
td.tourtickets .ausverkauft {
  padding: 14px 8px;
  background-color: #ccc;
  color: #fff;
  text-decoration: none;
  display: block;
  text-align: center;
}
body#tour td.tourtickets .free {
  padding: 8px;
  background-color: #cb7692;
  color: #fff;
  text-decoration: none;
  vertical-align: middle;
  display: block;
  text-align: center;
}
.past {
  color: #888;
  font-size: 0.9em;
  line-height: 0.9em;
}

body#tour a[href="#"] {
  background-color: #ccc;   /* or whatever "inactive" colour */
  color: #666;
  pointer-events: none;     /* makes it non-clickable */
  cursor: default;
}

.col2 {column-count: 2;}

.col2 li {margin-right: 4px;
    break-inside: avoid-column!important;
    break-after: avoid-column!important;
    page-break-inside: avoid!important;
    page-break-after: avoid!important;
    -webkit-column-break-inside: avoid!important;
    -webkit-column-break-after: avoid!important;
list-style: circle;
list-style-type: circle;
}

.col2 ul:first-child {margin-top: 3px;}

/* --------------------- TOURPLAN FILTER --------------------- */

.filter {
    margin: 0 auto;
}

.filter p {
    text-align: center;
    font-size: 1em;
}
 
button {
    font-size: 1.2em;
    font-weight: bold;
    background: #ecaf00;
    color: #000;
    text-align: center;
    padding: 8px 12px;
    margin: 0 4px 4px;
    border-radius: 10px;
    border: 1px;
    cursor: pointer;
}

button.active {
  background: #222;
  color: #fff;
}


/* --------------------- MUSIC / FILM / BAND INDEX --------------------- */

#projectindex.article img {
  width: 188px;
  height: auto;
  border-radius: 10px;
  margin: 0 2px 6px 2px;
}
#bandindex.article img {
  width: 175px;
  height: auto;
  border-radius: 10px;
  margin: 0 6px 6px 6px;
}
#projectindex.article a:link img, #projectindex.article a:visited img, #bandindex.article a:link img, #bandindex.article a:visited img {
  border: 3px solid #ccc !important;
}
#projectindex.article a:hover img, #projectindex.article a:active img, #bandindex.article a:hover img, #bandindex.article a:active img {
  border: 3px solid #DE173E !important;
}
/* --------------------- DISCOGRAPHY --------------------- */
.cd p {
  border: 1px solid #CCCCCC;
  font-size: 0.9em;
  line-height: 1.1em;
  background-color: #f0f0f0;
  color: #666666;
  text-align: center;
  margin: 5px 0 0 0;
  padding: 4px;
}
.cd {
  float: left;
  margin: 10px 10px 0 10px;
  width: 200px;
}
.single {
  width: 125px;
}
.dvd {
  width: 150px;
}
.cd img {
  border: 3px solid #CCCCCC;
  margin: 0;
}
.musiclinks {
  background-color: transparent !important;
  border: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cd i {
  font-size: 2.1em;
  padding: 5px;
}
.cd a img, svg {
  border: none;
  margin-left: 6px;
}
path {
  fill: #DE173E;
}
path:hover, path:active {
  fill: #ccc;
}
.cdwrap {
  padding: 4px 8px;
  max-width: 100%;
  font-size: 1.2em;
  color: #333;
  text-align: left;
  overflow-y: auto;
  margin-bottom: 8px;
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}
.cdwrap:after, .cdwrap li.cdlink2:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: auto;
}
.cdwrap ul {
  width: 32%;
  display: inline-block;
  list-style-type: none;
  margin: 10px;
  padding: 4px;
  float: left;
}
.cdwrap ul.wide {
  width: 65%;
}
.cdwrap ul.single {
  width: 36%;
}
.cdwrap li {
  padding-left: 4px;
  display: block;
  line-height: 1.3em;
}
.cd1 {
  width: 200px;
  float: left;
  vertical-align: top;
}
.cd2 {
  width: 200px;
  float: left;
  vertical-align: top;
}
.cd3 {
  clear: both;
  width: 198px;
  padding: 2px 4px;
  margin: 2px 15px 0 0;
  background-color: #eaeaea;
  color: #666666;
  position: relative;
  font-size: 0.9em;
  text-align: center;
  bottom: 0;
  left: 7px;
}
.cdwrap li.cdlink {
  margin: 8px 8px 2px 6px;
  padding: 0 10px 5px 10px;
  background: #f0f0f0;
  border: 1px solid #CCCCCC;
  color: #333;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
li.cdlink h3 {
  font-size: 1.1em;
}
li.cdlink p {
  font-size: 0.9em !important;
}
.cdwrap li.cdlink2 {
  margin: 8px 4px 2px 4px;
  padding: 0 6px 6px 6px;
  background: #f0f0f0;
  border: 1px solid #CCCCCC;
  color: #333;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.cdwrap li.cdlink2 img {
  float: left;
  display: inline-block;
  margin: 4px;
}
li.cdlink2 h3 {
  font-size: 1.1em;
}
ul.discnote {
  width: 95%;
  color: #999;
  font-size: 0.9em;
  float: left;
}
.code {
  color: #EC7600;
  padding: 0 2px 0 6px;
}

.singlewrap {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
    align-content: space-between
}

.singlebox {
    width: 49%;  
}

/* --------------------- LYRICS --------------------- */
.engtrans {
  width: 40%;
  float: right;
  background: #eaeaea;
  font-size: inherit;
  text-align: center;
  padding: 4px 2px;
  margin-bottom: 2px;
}
.lyricsmob {
  display: none;
}
/* --------------------- FILM --------------------- */
table#filmmusik {
  width: 98%;
  max-width: 99% !important;
  margin: 8px auto;
  font-size: 1.2em;
  padding: 4px;
  border-collapse: collapse;
  border-spacing: 2px;
}
table#filmmusik th {
  padding: 6px;
  font-size: 1.4em;
  color: #DC5100;
  text-align: left;
  font-weight: bold;
  margin-top: 6px;
  margin-bottom: 2px;
  -webkit-font-smoothing: antialiased;
  background: #FAFAFA;
}
#fm1 {
  width: 33%;
}
#fm2 {
  width: 66%;
}
table#filmmusik tr {
  border-top: 1px solid #ccc !important;
  padding: 4px;
}
table#filmmusik td {
  padding: 6px;
  vertical-align: top;
}
table#filmmusik .small {
  margin-left: 6px;
}
table#filmmusik a img {
  border: none;
  height: 12px;
  width: auto;
}
table#filmmusik a {
  margin-left: 2px;
}
/* --------------------- KULTURPREIS --------------------- */
#kulturpreis h2, #conditions h2 {
  background: url(../kulturpreispics/gustl.png) no-repeat left;
  padding-left: 34px;
  background-size: 30px 22px;
}
#kulturpreis h2.danke {
  background: none !important;
  padding: 0;
  text-align: center;
}
#kulturpreis h3 {
  margin-bottom: 8px;
  text-align: center;
  font-size: 1.4em;
}
#jury p {
  text-align: justify;
  text-align-last: left;
}
#jury .bio {
  width: 47%;
  float: left;
  padding: 4px 10px;
}
#jury .chair {
  width: auto;
  display: block;
  margin: 0 auto;
  padding: 4px 10px;
  overflow: auto;
}
#prevkp .captionleft, #bisherigegewinner .captionleft {
  width: 160px;
  margin: 4px;
}
#prevkp .captionleft p, #bisherigegewinner .captionleft p {
  font-size: 1.1em;
}
#prevkp .prevkpwrap, #bisherigegewinner .prevkpwrap {
  width: 518px;
  margin: 0 auto;
}
.apply a {
  width: 80%;
  margin: 4px auto;
  display: block;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 4px;
  background: #eee;
  color: #d00600;
  line-height: 3em;
  border: 1px solid #ddd;
}
.apply a:active, .apply a:hover {
  background: #efefef;
  border: 1px solid #ccc;
}
.apply p {
  text-align: center;
  font-weight: bold;
}
body#kulturpreis.popup {
  background: none !important;
  width: 98%;
  margin: 0 auto;
}
#kulturpreis form {
  margin: 0 auto;
  width: 95%;
  padding: 8px 10px;
}
#kulturpreis form p {
  font-size: 1em;
  color: #000;
  text-align: left;
  line-height: 1.4em;
  margin: 11px 0;
}
#kulturpreis textarea {
  width: 98%;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 8px;
}
#kulturpreis input {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 8px;
}
#kulturpreis input[type=email], body#kulturpreis input[type=date], #kulturpreis input[type=tel], #kulturpreis input[type=url] {
  width: 50%
}
#kulturpreis input[type=url] {
  width: 75%
}
#kulturpreis input[type=text] {
  width: 98%
}
#kulturpreis input[type=submit] {
  background: #ccc;
  color: #000;
  border-radius: 4px;
  box-sizing: border-box;
}
#kulturpreis input:hover[type=submit] {
  background: #eee;
}
#kulturpreis .counter-text {
  font-size: 0.9em;
  color: #666;
  clear: both;
  margin-top: 3px;
  display: block;
}
#kulturpreis .counter-warning {
  font-size: 0.9em;
  color: #9b1c18;
  clear: both;
  margin-top: 3px;
  display: block;
}
ol.conditions {
  padding: 10px 20px;
  width: 95%;
  display: block;
  margin: 0 auto;
  font-size: 1.3em;
}
ol.conditions li {
  padding-bottom: 8px !important;
}

/* --------------------- STEILKLÄNGE --------------------- */

#episodes .captionleft {
  width: 180px;
  margin: 8px 4px;
}
#episodes .captionleft p {
  font-size: 1.1em;
}


/* --------------------- BIOGRAPHY --------------------- */
.biodate {
  margin-right: 6px;
  padding-bottom: 4px;
  background: url(../site/date.png) no-repeat center top;
  background-size: 45px 32px;
  height: 65px;
  width: 85px;
  float: left;
}
.biodate p {
  color: #dc0034;
  font-weight: bold;
  text-align: center;
  font-size: 1.1em;
  margin-top: 35px;
}
#bio .article ul {
  list-style: none;
  color: #000;
  font-size: 1.2em;
  line-height: 1.4em;
  margin: 0;
  padding: 0;
}
#bio .article li {
  margin-bottom: 4px;
  border-bottom: solid 2px #EEE;
  padding-top: 4px;
  padding-bottom: 8px;
  clear: both;
  overflow: auto;
}
/* --------------------- MISC INDEX PAGE --------------------- */
.hvgtext {
  text-transform: lowercase;
}
.hvg80er {
  background: url(../hvgpics/hubert_80er@2x.jpg) no-repeat center;
  background-color: #ccc;
  background-size: 290px 359px;
  padding: 5px 4px;
  width: 290px;
  height: 359px;
}
ul.etc {
  width: 98%;
  margin: 8px auto;
  display: block;
  padding: 0;
}
ul.etc li {
  width: 98%;
  list-style-type: none;
  list-style-position: inside;
  padding-bottom: 6px;
  display: inline-block;
  overflow: auto;
}
ul.etc li a:link, ul.etc li a:visited {
  font-weight: bold;
  font-size: 1.6em;
  text-decoration: none;
  color: #DE173E;
}
ul.etc li a:active, ul.etc li a:hover {
  color: #999;
}
ul.etc li p {
  font-size: 1.3em;
  color: #000;
}
ul.etc img {
  margin: 0px 10px 14px 0;
  text-align: center;
  border: 2px solid #ccc;
  float: left !important;
  height: 75px;
  width: 75px;
  border-radius: 12px;
}
/* --------------------- BOOKS PAGE --------------------- */
ul.books {
  margin: 0 auto;
  list-style: none;
  width: 99%;
  padding: 0;
}
ul.books li {
  margin-left: 0;
  margin-bottom: 10px;
  clear: both;
}
/* --------------------- LINKS PAGE --------------------- */
ul.links {
  width: 98%;
  margin: 2px auto;
  font-size: 1em;
  list-style: none;
}
ul.links li {
  width: 48%;
  float: left;
  display: inline-block;
  padding-bottom: 10px;
}
ul.links li img {
  margin-right: 8px;
}
ul.links li p {
   font-size: 1.1em;
}
/* --------------------- MEDIA PLAYER --------------------- */
#media .article ul {
  padding-left: 10px;
  margin-left: 0px;
  font-size: 1.3em;
  list-style: none;
}
#media .article li {
  padding-bottom: 4px;
}
audio {
  width: 100%;
  min-width: 20%;
  overflow: hidden;
  box-shadow: none;
  border-radius: 8px;
  transform: scale(0.9);
  filter: sepia(100%) saturate(100%) grayscale(1) contrast(200%) !important;
}
table#audiosamples {
  border: none;
  border-spacing: 0;
  border-collapse: separate;
  max-width: 99% !important;
  padding-bottom: 0;
}
.audio1 {
  font-weight: bold;
  width: 25%
}
.audio2 {
  width: auto;
}
.audio3 {
  width: 30%;
  color: #666;
}
iframe {
  margin: 8px auto;
  display: block;
  max-width: 99%;
  text-align: center;
  padding: 0;
  border: none;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  max-width: 100%;
  margin-bottom: 16px;
}
.embed-container iframe, .embed-container object, .embed-container embed {
  /* position: absolute;
  top: 0;
  left: 4px;
  width: 100%;
  height: 100%;*/
  position: absolute;
  top: 0;
  left: 4px;
  width: calc(100% - 4px) !important;
  height: calc(100% - 4px) !important;
  border: none !important;
}
.instagram-media {
  margin: 4px auto 0 auto !important;
}
/* --------------------- MISC --------------------- */
.clear {
  clear: both;
}
.clearleft {
  clear: left;
}
.clearright {
  clear: right;
}
.floatleft {
  float: left;
}
.floatright {
  float: right;
}
.autowidth {
  width: auto !important;
}
.noborder {
  border: none !important;
}
.w50 {
  width: 50%;
}
.w33 {
  width: 33%;
}
.wrap {
  margin: 4px auto 2px auto;
  padding: inherit;
  overflow: auto;
  width: auto;
}
.wrap100 {
  margin: 4px auto 2px auto;
  padding: 0;
  width: 100%!important;
max-width: 100%!important;
  overflow: hidden!important;
}

.spacearound {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.spaceevenly {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.spacebetween {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.justifyleft {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.hidden {
  visibility: hidden;
}
.nodisplay {
  display: none;
}
.instacaption {
  max-width: 725px;
  margin: -4px auto 15px auto;
  border: 1px solid #DBDBDB;
  border-radius: 4px;
  padding: 6px 4px 4px 4px;
}

/* --------------------- RESPONSIVE --------------------- */

@media screen and (min-width: 1001px) {
  .collapsible-menu {
    display: none;
  }
}

/* --------------------- MAX WIDTH 400 --------------------- */
@media screen and (max-width: 400px) {
  body#index .enter {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 3rem); /* Adjust for safe areas */
  }
    
body::before {background-image: url("../site/hvgbeton2026_600.jpg");}
    
  #projectindex.article img, #bandindex.article img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 4px auto;
  }
    
 .col2 {column-count: 1;}
    
p.japansocial {text-align: center;}  
}
/* --------------------- MAX WIDTH 600 --------------------- */
@media screen and (max-width: 600px) {

body::before {background-image: url("../site/hvgbeton2026_900.jpg");}
    
  body#index img {
   display: block;
  width: 90vw;        /* use viewport width directly */
  max-width: 1000px;
  height: auto;
  margin: 10px auto 0; /* <-- centers regardless of flex quirks */
  padding-top: 0;      /* move spacing into margin so it can't skew layout */
}

#logo {
    width: 95% !important;
    height: auto;
  }    
    
  body#index .enter {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 3rem); /* Adjust for safe areas */
  }
  body#index {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    background: url("../site/hvgsplash2026_900.jpg") no-repeat fixed center #333;
    background-size: cover;
  }
    
 p {font-size: 1.4em;}
    
  ul.links li {
    width: 98%;
  }
  h1 {
    font-size: 4vw; /* 3.6*/
    max-width: 99%;
  }
  h3 {text-align: center;}
    
  body#tour table {
    width: 100%!important;
      max-width: 100%!important;
      /* font-size: 1.2em;*/
      border-spacing: 1px;
  }
    
td {padding: 4px!important;
    }

table td.tourdatum {width: 15%;}
table td.tourort {width: 50%;}
table td.tourtickets {width: 30%;}

    table td.tourtickets a {
    width: 100%; 
    padding: 8px;
    display: block;
    font-size: 1em;}

td.tourtickets .ausverkauft {
  padding: 8px;
  background-color: #ccc;
  color: #fff;
  display: block;
  text-align: center;}
    
  #indeximg ul {
    font-size: 2vw;
    width: auto;
    min-width: 100px;
  }
  .cd {
    margin: 8px auto;
    float: none;
  }
  .cd img {
    max-width: 100%;
  }
  .cd h3 {
    clear: both;
  }
  .cdwrap ul, .cdwrap ul.wide, .cdwrap ul.single, .cdwrap ul li.cdlink2 {
    width: 99% !important;
    clear: left;
    margin: auto;
  }
  ul.lyricsmenu {
    display: none !important;
  }
  #indeximg ul.lyricsmob {
    display: inline-block !important;
    width: 50% !important;
    float: left;
  }
  #indeximg.topright ul.lyricsmob {
    text-align: left;
  }
  .columnleft, .columnright {
    width: 100%;
    display: block;
  }
  .captionleft, .captionright {
    display: block;
    float: none;
    margin: 8px auto;
  }
  body#media .captionleft, body#media .captionright {
    display: block;
    float: none;
    margin: 10px;
  }
  .columnleft {
    margin-bottom: 0 !important;
  }
  .columnright {
    margin-top: -10px !important;
  }
  div.leftbar, div.rightbar {
    width: 98%;
    margin: 0 auto;
    float: none;
  }
  .w33 {width: 100%;}
    
p.japansocial {text-align: center;}    
}

/* --------------------- MAX WIDTH 810 --------------------- */
@media screen and (max-width: 810px) {
  #indeximg {
    margin-bottom: 0;
  }
  #content {
    padding-bottom: 0;
  }
  .cdwrap ul li.cdlink2 {
    width: auto !important;
    clear: left;
    margin: auto;
  }
}
/* --------------------- BETWEEN 810 AND 1000 --------------------- */
@media screen and (min-width: 810px) and (max-width: 1000px) {
  #content, #lang, #section, #pagenavtop, #pagenavbottom, .article {
    width: 810px;
    margin: 0 auto !important;
    float: none !important;
  }
  #wrapper {
    width: 100%;
  }
    

}
/* --------------------- MAX WIDTH 1000 --------------------- */
@media screen and (max-width: 1000px) {
  body#index .enter {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 3.5rem); /* Adjust for safe areas */
  }
  #logo img {
    width: 92% !important;
    height: auto;
    margin: 0 auto !important;
    padding-left: 1.5em !important;
    display: inline-block !important;
  }
body::before {background-image: url("../site/hvgbeton2026_1100.jpg");}    
        
  #nav {
    display: none;
  }
  input:checked ~ label {
    width: calc(100vw - 15px);
  }
  .collapsible-menu ul {
    display: inline-block;
    width: 45%;
  }
  .collapsible-menu .social {
    clear: both;
  }
  #logo, #wrapper, #content, #lang, #section, #pagenavbottom, .article {
    margin: 0 auto !important;
    width: 100%;
  }
  #pagenavtop {
    margin: 2px auto 0 auto !important;
    width: 100%;
  }
  #pagenavbottom {
    margin-top: -4px !important;
  }
  #pagenavtop, #pagenavbottom {
    min-height: 30px;
    }
  #pagenavtop a, #pagenavbottom a, .anchorsplit a {
    padding: 2px 4px 2px 4px
  }
  .article {
    margin-bottom: 4px;
  }
  img.centre2 {
    display: block !important;
    margin: 8px auto;
  }
  .imgright, .imgleft {
    display: block !important;
    float: none !important;
    margin: 8px auto;
    clear: both;
  }
  .cdwrap ul, .cdwrap ul.wide, .cdwrap ul.single, .cdwrap ul li.cdlink2 {
    width: 99% !important;
    clear: left;
    margin: auto;
  }
    
    .singlebox {
    width: 100%!important;  
}
  ul.etc img {
    display: inline-block !important;
    float: left !important;
  }
  .article img, .article img.centre, .article img.centre2 {
    max-width: 100% !important;
    height: auto !important;
  }
  table#filmmusik a img {
    width: 12px;
  }
  .gallery {
    max-width: 90%;
  }
  .w550, .w450, .w350 {
    width: auto;
  }
  #updates th {
    width: 15% !important;
    margin: 4px;
    padding: 4px 8px;
  }
  #updates table {
    border-spacing: 6px;
  }
  #updates th, #updates tr, #updates .project, #updates .entry, #tv th, #tv tr, #tv tr.desc {
    width: 99%;
    max-width: 99% !important;
  }
  #updates td {
    display: block;
  }
  ul.artists img {
    float: left !important;
  }
  #jury .bio {
    width: 100%;
  }
  #kulturpreis #jury h3 {
    clear: both;
  }
  body#links img {
    margin: 0 auto;
  }
  body#links p {
    text-align: center;
  }
}
/* --------------------- PRINT STYLES --------------------- */
@media print {
  body {
    background-image: none !important;
    background-color: #fff;
  }
  #logo {
    margin: 0 auto;
    max-width: 95%;
  }
  #lang {
    display: none;
  }
  #nav, .collapsible-menu {
    display: none;
  }
  #wrapper, #content {
    width: 99%;
    overflow-x: hidden !important;
  }
  #section {
    margin: 25px auto -10px auto;
    width: 99%;
    overflow-x: hidden !important;
  }
  h1 {
    color: #000;
  }
  #pagenavtop, #pagenavbottom {
    display: none;
  }
  p {
    widows: 3 !important;
    orphans: 3 !important;
  }
}