/* Die Seite hat einen Brake-Point bei 1000px Breite, um zwischen PC-Screens und Handy-Screens umzuschalten */
/* Allgemeine Defintionen */
@font-face { font-family:TexGyre; src:url(fonts/texgyreadventor-regular.woff); }
@font-face { font-family:TexGyre; src:url(fonts/texgyreadventor-bold.woff); font-weight:bold; }
@font-face { font-family:TexGyre; src:url(fonts/texgyreadventor-italic.woff); font-style:italic; }
@font-face { font-family:TexGyre; src:url(fonts/texgyreadventor-bolditalic.woff); font-weight:bold; font-style:italic; }

html { height: 100%; }
body { font-family: 'TexGyre', 'Open Sans', sans-serif; font-size: 18px; height: 100%; margin: 0; }
a { text-decoration:none; color:inherit; }

#main { display: grid; grid-row-gap: 12px; background-color: #eee; margin: 0 auto; grid-template-rows: auto 1fr auto; min-height: 98%; }
@media screen and (max-width: 1000px) {
  #main { grid-template-columns: 90% auto; grid-template-areas: 'head nav' 'cont cont' 'foot foot'; align-items: stretch; }
}
@media screen and (min-width: 1001px) {
  #main { grid-template-columns: 260px 740px; grid-template-areas: 'head head' 'nav cont' 'foot foot'; width:1000px; }
}


/* Titel-Bereich */
#header { grid-area: head; background-color: #fff; padding: 24px 0; }
@media screen and (max-width: 1000px) {
  #maintitle { font-size: 7vw; }
  #subleft, #subright { display: none; }
}
@media screen and (min-width: 1001px) {
  #maintitle { margin-left: 260px; font-size: 62px; }
  #subleft { display: inline-block; font-size: 19px; width: 260px; }
  #subright { display: inline-block; font-size: 28px; text-align-last: justify; width: 734px; }
}


/* Navigationsbereich */
#menu { grid-area: nav; background-color: #fff; }
@media screen and (max-width: 1000px) {
  #menu { align-self: center; }
  #expander { color: #aaa; text-align: center; font-size: 6vw; background-color: #eee; cursor: pointer; }
  #navlist { display:none; position:absolute; right:8px; box-shadow: -5px 5px 10px #eee;  z-index:5; }
}
@media screen and (min-width: 1001px) {
  #menu { padding: 36px 0; }
  #expander { display: none; }
  .nov { font-weight: bold; }
}
.nav, .nov { padding: 24px 82px 24px 24px; text-align: right; cursor: pointer; background-color: #fff; }
.nav:hover { background-color: #eee; }


/* Inhaltsbereich allgemein */
#content { grid-area: cont; padding: 60px 8px; background-color: #fff; }
#content p:first-child { margin-top: 0; }
.lefthead { font-weight:bold; margin: 40px 0 20px 0; }
.lefthead:first-child { margin-top:0; }
.midhead { text-align: center; }

/* Unterseite StrategInnen */
#strats { padding: 12px; position: relative; }
@media screen and (max-width: 1000px) {
  #strats { text-align: left; }
}
@media screen and (min-width: 1001px) {
  #strats { text-align: justify; text-align-last: justify; }
}
.strat { display: inline-block; padding: 24px; cursor: pointer; text-align: center; text-align-last: center; vertical-align: top; }
.strat:hover { box-shadow: 0 0 16px #bbb; }
.strshort { display: inline-block; }
.strimg { color: #eee; }
@media screen and (max-width: 1000px) {
  .strshort { width: 120px; }
  .strimg { font-size: 24px; }
}
@media screen and (min-width: 1001px) {
  .strshort { width: 180px; }
  .strimg { font-size: 36px; }
}
.strimg img { width: 100%; }
.strleg { color:#999; font-weight: bold; }
.strlong { display: none; }
.strdet { position: absolute; background-color: #fff; box-shadow: 0 0 16px #bbb; }
.strdet .strat { width:auto; display: grid; grid-template-columns: auto auto; }
.strdet .strlong { display: inline-block; padding: 12px; vertical-align: top; text-align: justify; text-align-last: left;}

/* Unterseite Wirksamkeiten */
.meeting div, .bibliography div { display: inline-block; vertical-align: top; }
.meeting div:first-child { width: 180px; }
.bibliography div:first-child { width: 100px; text-align: center; }
.bibliography div:last-child { width: 612px; }
.bibliography img { width: 60px; }

/* Abspann */
#footer { grid-area: foot; background-color: #eee; padding: 0 6px; margin-top: -12px; font-size: 14px; }
@media screen and (max-width: 1000px) {
  #footer {  }
}
@media screen and (min-width: 1001px) {
  #footer { width: 740px; margin-left: 260px; }
}
.logo { vertical-align: middle; height: 64px; }
#impressum { display: inline-block; float: right; margin: 20px 40px; }