/* Compiled Less CSS File */
/* Generated from "post4y.css" */

/* LESS Document */
@charset "utf-8";
/* LESS Document */
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.ycnsme {
  display: none !important;
}
html {
  height: 101%;
}
body {
  position: relative;
  background-color: #eeeeee;
  width: 100%;
  height: 100%;
  min-height: 700px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  min-width: 320px;
}
header {
  position: absolute;
  top: 0px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: 100%;
  height: 100px;
}
header .container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
}
header .container #logo {
  width: 50%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  margin: 0px 20px;
}
header .container #logo img {
  align-self: center;
}
header .container #menu {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  width: 50%;
  height: 80px;
  margin: 0px 20px;
}
header .container #menu ul {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-self: flex-end;
}
header .container #menu ul li {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
  margin: 0px 30px 0px 0px;
}
header .container #menu ul li:first-child {
  margin: 0px 30px 0px 0px;
}
header .container #menu ul li a {
  color: #666666;
  font-size: 1rem;
  text-decoration: none;
}
header .container #menu ul li.abmelden {
  background-image: url(../images/design/abmelden.png);
  background-position: left center;
  background-repeat: no-repeat;
  padding: 0px 0px 0px 30px;
  height: 27px;
}
header .container #menu ul li.news {
  background-image: url(../images/design/news.png);
  background-position: left center;
  background-repeat: no-repeat;
  padding: 0px 0px 0px 30px;
  height: 27px;
}
header .container #menu ul li.passwort {
  background-image: url(../images/design/aendere_passwort.png);
  background-position: left center;
  background-repeat: no-repeat;
  padding: 0px 0px 0px 36px;
  height: 27px;
}
header .container #menu ul li.konto {
  background-image: url(../images/design/konto.png);
  background-position: left center;
  background-repeat: no-repeat;
  padding: 0px 0px 0px 36px;
  height: 27px;
}
main {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: 100%;
  min-height: 95%;
}
main .container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: 100%;
  max-width: 1280px;
}
main .container #p4ylogo {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-self: flex-start;
  width: 70%;
  height: auto;
  margin: 120px 0px 0px 0px;
}
main .container #p4ylogo img {
  width: 80%;
  max-width: 600px;
}
main .container #login {
  width: 30%;
  margin: 120px 0px 0px 0px;
}
main .container #login div,
main .container #login form {
  width: 80%;
  background: #59a2eb;
}
main .container #login div .fehler,
main .container #login form .fehler {
  font-size: 1rem;
  color: #ff0000;
}
main .container #login div h1,
main .container #login form h1 {
  color: #ffffff;
  padding: 20px 0px 20px 20px;
  font-size: 1.75rem;
  line-height: 1.3em;
}
main .container #login div h2,
main .container #login form h2 {
  color: #ffffff;
  padding: 20px 0px 5px 20px;
  font-size: 1.5rem;
  line-height: 1.3em;
}
main .container #login div h3,
main .container #login form h3 {
  color: #ffffff;
  padding: 5px 0px 0px 20px;
  font-size: 1.25rem;
  line-height: 1.3em;
}
main .container #login div #pwsicherheit,
main .container #login form #pwsicherheit {
  width: 90%;
  margin: 0% 5%;
  height: 20px;
  background-color: #eeeeee;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.3em;
  color: #000000;
}
main .container #login div #pwsicherheit.zukurz,
main .container #login form #pwsicherheit.zukurz {
  background-color: #ff0000 !important;
}
main .container #login div #pwsicherheit.schwach,
main .container #login form #pwsicherheit.schwach {
  background-color: #ff7123 !important;
}
main .container #login div #pwsicherheit.mittel,
main .container #login form #pwsicherheit.mittel {
  background-color: #fcff0c !important;
}
main .container #login div #pwsicherheit.stark,
main .container #login form #pwsicherheit.stark {
  background-color: #62ff24 !important;
}
main .container #login div p,
main .container #login form p {
  width: 90%;
  margin: 0% 5%;
  color: #ffffff;
  padding: 10px 0px 10px 0px;
  font-size: 1rem;
  line-height: 1.3em;
}
main .container #login div p.hinweis,
main .container #login form p.hinweis {
  font-size: 1rem;
  font-style: normal;
}
main .container #login div p a,
main .container #login form p a {
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  color: #666666;
}
main .container #login div p.konto,
main .container #login form p.konto {
  width: 100%;
}
main .container #login div p.konto a,
main .container #login form p.konto a {
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  background-color: #e4e4e4;
  color: #ba9e38;
  border-radius: 3px;
  margin: 2% 0% 10% 0%;
  font-size: 1.25rem;
  min-width: 250px;
  text-align: center;
  padding: 12px 3% 14px 3%;
  border: 1px solid #666666;
}
main .container #login div p.konto a:hover,
main .container #login form p.konto a:hover,
main .container #login div p.konto a:focus,
main .container #login form p.konto a:focus {
  border: 1px solid #ba9e38;
}
main .container #login div input[type=text],
main .container #login form input[type=text],
main .container #login div input[type=email],
main .container #login form input[type=email],
main .container #login div input[type=password],
main .container #login form input[type=password] {
  box-sizing: border-box;
  background-color: #eeeeee;
  color: #000000;
  border-radius: 3px;
  width: 90%;
  margin: 2% 5%;
  font-size: 1.25rem;
  padding: 2%;
  border: 1px solid #000000;
}
main .container #login div input[type=text]:hover,
main .container #login form input[type=text]:hover,
main .container #login div input[type=email]:hover,
main .container #login form input[type=email]:hover,
main .container #login div input[type=password]:hover,
main .container #login form input[type=password]:hover,
main .container #login div input[type=text]:focus,
main .container #login form input[type=text]:focus,
main .container #login div input[type=email]:focus,
main .container #login form input[type=email]:focus,
main .container #login div input[type=password]:focus,
main .container #login form input[type=password]:focus {
  border: 1px solid #59a2eb;
  color: #59a2eb;
}
main .container #login div .sbtbtn,
main .container #login form .sbtbtn {
  cursor: pointer;
  box-sizing: border-box;
  background-color: #e4e4e4;
  color: #000000;
  border-radius: 3px;
  width: 90%;
  margin: 2% 5% 10% 5%;
  font-size: 1.25rem;
  padding: 2%;
  border: 1px solid #000000;
}
main .container #login div .sbtbtn:hover,
main .container #login form .sbtbtn:hover,
main .container #login div .sbtbtn:focus,
main .container #login form .sbtbtn:focus {
  border: 1px solid #59a2eb;
  color: #59a2eb;
}
main .container #login div .unsichtbar,
main .container #login form .unsichtbar {
  display: none;
}
main .containerwrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
  max-width: 1280px;
}
main .containerwrap #kontoinfo {
  margin: 100px 20px 20px 20px;
  background: #ffffff;
  width: 100%;
}
main .containerwrap #kontoinfo h1 {
  display: block;
  width: 100%;
  color: #59a2eb;
  text-align: left;
  padding: 10px 0px 5px 20px;
  font-size: 1.75rem;
  line-height: 1.3em;
}
main .containerwrap #kontoinfo h2 {
  display: block;
  width: 100%;
  color: #59a2eb;
  padding: 5px 0px 5px 20px;
  font-size: 1.5rem;
  line-height: 1.3em;
}
main .containerwrap #kontoinfo h3 {
  display: block;
  width: 100%;
  color: #59a2eb;
  padding: 25px 0px 5px 20px;
  font-size: 1.25rem;
  line-height: 1.3em;
}
main .containerwrap #kontoinfo h4 {
  display: block;
  width: 100%;
  color: #59a2eb;
  margin: 10px 0px;
  padding: 10px 0px 10px 20px;
  font-size: 1.125rem;
  line-height: 1.3em;
}
main .containerwrap #kontoinfo input[type="checkbox"] {
  position: relative;
  margin: 0px 0px 0px 20px;
  z-index: 0;
  -webkit-appearance: none;
  cursor: pointer;
}
main .containerwrap #kontoinfo input[type="checkbox"] + label {
  position: absolute;
}
main .containerwrap #kontoinfo input[type="checkbox"] + label::before {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 2px solid #59a2eb;
  background-color: #ffffff;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
  z-index: 5;
  position: relative;
}
main .containerwrap #kontoinfo input[type="checkbox"]:checked + label::before {
  box-shadow: inset 0px 0px 0px 3px #ffffff;
  background-color: #59a2eb;
}
main .containerwrap #kontoinfo form {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  padding: 10px 0px 10px 20px;
}
main .containerwrap #kontoinfo form select {
  width: 100%;
  max-width: 300px;
  border-radius: 5px;
  border: 2px solid #59a2eb;
  background-color: #ffffff;
  color: #59a2eb;
  padding: 10px 0px 10px 20px;
  font-size: 1rem;
  line-height: 1.3em;
}
main .containerwrap #kontoinfo label {
  cursor: pointer;
  width: 100%;
  color: #59a2eb;
  padding: 10px 0px 10px 0px;
  font-size: 1rem;
  line-height: 1.3em;
}
main .containerwrap #kontoinfo p {
  display: block;
  width: 100%;
  color: #59a2eb;
  padding: 10px 0px 10px 20px;
  font-size: 1rem;
  line-height: 1.3em;
}
main .containerwrap #kontoinfo p.hinweis {
  font-size: 1rem;
  font-style: normal;
}
main .containerwrap #kontoinfo p a {
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  color: #666666;
}
main .containerwrap #kontoinfo .tabelle {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 100%;
}
main .containerwrap #kontoinfo .tabelle .th,
main .containerwrap #kontoinfo .tabelle .tr {
  box-sizing: border-box;
  margin: 0px 20px 0px 0px;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
main .containerwrap #kontoinfo .tabelle .th.even,
main .containerwrap #kontoinfo .tabelle .tr.even {
  background-color: #eeeeee;
}
main .containerwrap #kontoinfo .tabelle .th .thbschreibung,
main .containerwrap #kontoinfo .tabelle .tr .thbschreibung,
main .containerwrap #kontoinfo .tabelle .th .thvertrag,
main .containerwrap #kontoinfo .tabelle .tr .thvertrag {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.125em;
  box-sizing: border-box;
  padding: 0px 25px;
  margin: 5px 0px 15px 0px;
  width: 27%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  background-image: url("../images/blank.png");
  background-repeat: no-repeat;
  background-position: 20px 50%;
}
main .containerwrap #kontoinfo .tabelle .th .thdatum,
main .containerwrap #kontoinfo .tabelle .tr .thdatum {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.125em;
  box-sizing: border-box;
  padding: 0px 25px;
  margin: 5px 0px 15px 0px;
  width: 27%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  background-image: url("../images/blank.png");
  background-repeat: no-repeat;
  background-position: 20px 50%;
}
main .containerwrap #kontoinfo .tabelle .th .sortup,
main .containerwrap #kontoinfo .tabelle .tr .sortup {
  background-image: url("../images/sortup.png") !important;
}
main .containerwrap #kontoinfo .tabelle .th .sortdown,
main .containerwrap #kontoinfo .tabelle .tr .sortdown {
  background-image: url("../images/sortdown.png") !important;
}
main .containerwrap #kontoinfo .tabelle .th .tdbschreibung,
main .containerwrap #kontoinfo .tabelle .tr .tdbschreibung,
main .containerwrap #kontoinfo .tabelle .th .tdvertrag,
main .containerwrap #kontoinfo .tabelle .tr .tdvertrag {
  box-sizing: border-box;
  padding: 0px 25px;
  margin: 5px 0px 5px 0px;
  width: 27%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}
main .containerwrap #kontoinfo .tabelle .th .tdbschreibung p,
main .containerwrap #kontoinfo .tabelle .tr .tdbschreibung p,
main .containerwrap #kontoinfo .tabelle .th .tdvertrag p,
main .containerwrap #kontoinfo .tabelle .tr .tdvertrag p {
  font-weight: normal;
  text-decoration: none;
  color: #666666;
}
main .containerwrap #kontoinfo .tabelle .th .tdbschreibung p:hover,
main .containerwrap #kontoinfo .tabelle .tr .tdbschreibung p:hover,
main .containerwrap #kontoinfo .tabelle .th .tdvertrag p:hover,
main .containerwrap #kontoinfo .tabelle .tr .tdvertrag p:hover {
  cursor: pointer;
  color: #59a2eb;
}
main .containerwrap #kontoinfo .tabelle .th .tdbschreibung p.bold,
main .containerwrap #kontoinfo .tabelle .tr .tdbschreibung p.bold,
main .containerwrap #kontoinfo .tabelle .th .tdvertrag p.bold,
main .containerwrap #kontoinfo .tabelle .tr .tdvertrag p.bold {
  font-weight: bold;
}
main .containerwrap #kontoinfo .tabelle .th .tddatum,
main .containerwrap #kontoinfo .tabelle .tr .tddatum {
  box-sizing: border-box;
  font-weight: normal;
  padding: 0px 25px;
  margin: 5px 0px 5px 0px;
  width: 27%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
}
main .containerwrap #kontoinfo .tabelle .th .tddatum p,
main .containerwrap #kontoinfo .tabelle .tr .tddatum p {
  text-decoration: none;
  font-weight: normal;
  color: #666666;
}
main .containerwrap #kontoinfo .tabelle .th .tddatum p:hover,
main .containerwrap #kontoinfo .tabelle .tr .tddatum p:hover {
  cursor: pointer;
  color: #59a2eb;
}
main .containerwrap #kontoinfo .tabelle .th .tddatum p.bold,
main .containerwrap #kontoinfo .tabelle .tr .tddatum p.bold {
  font-weight: bold;
}
main .containerwrap #kontoinfo form img {
  cursor: pointer;
}
footer {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: 100%;
  height: 100%;
  height: 40px;
}
footer nav {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  width: 100%;
  max-width: 1280px;
}
footer nav ul {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  width: 85%;
}
footer nav ul li {
  margin: 0px 20px 0px 0px;
}
footer nav ul li:last-child {
  margin: 0px 0px 0px 0px;
}
footer nav ul li a {
  color: #666666;
  font-size: 1.25rem;
  text-decoration: none;
}
@media screen and (min-width: 640px) and (max-width: 979px) {
  body {
    min-height: auto;
  }
  main .container {
    max-width: 980px;
  }
  main .container #p4ylogo {
    margin: 90px 0px 0px 0px;
  }
  main .container #p4ylogo img {
    width: 80%;
    max-width: 679px;
  }
  main .container #login {
    margin: 90px 0px 0px 0px;
  }
  main .container #login form {
    width: 100%;
  }
  main .container #login form h1 {
    padding: 15px 0px 15px 15px;
    font-size: 1.5rem;
  }
  main .container #login form p a {
    font-size: 0.75rem;
    color: #ba9e38;
  }
  main .container #login form input[type=text],
  main .container #login form input[type=password] {
    font-size: 1rem;
  }
  main .container #login form .sbtbtn {
    font-size: 1rem;
  }
  footer {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: 100%;
    height: 100%;
    height: 40px;
  }
  footer nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    width: 100%;
    max-width: 1280px;
  }
  footer nav ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    width: 85%;
  }
  footer nav ul li {
    margin: 0px 20px 0px 0px;
  }
  footer nav ul li:last-child {
    margin: 0px 0px 0px 0px;
  }
  footer nav ul li a {
    color: #666666;
    font-size: 1rem;
    text-decoration: none;
  }
}
@media screen and (max-width: 639px) {
  body {
    min-height: auto;
  }
  main {
    height: auto;
  }
  main .container {
    flex-flow: column nowrap;
    justify-content: flex-start;
    max-width: 640px;
    min-height: auto;
    margin: 0px 0px 0px 0px;
  }
  main .container #p4ylogo {
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 5% 0px 5% 0px;
    height: auto;
  }
  main .container #p4ylogo img {
    width: 80%;
    max-width: 639px;
  }
  main .container #login {
    width: 100%;
    margin: 0px 0px 0px 0px;
  }
  main .container #login form {
    width: 100%;
  }
  main .container #login form h1 {
    color: #ffffff;
    padding: 20px 0px 20px 20px;
    font-size: 1.75rem;
  }
  main .container #login form p {
    width: 90%;
    margin: 0% 5%;
  }
  main .container #login form p a {
    text-decoration: none;
    font-size: 0.875rem;
    color: #ba9e38;
  }
  main .container #login form input[type=text],
  main .container #login form input[type=password] {
    box-sizing: border-box;
    background-color: #e4e4e4;
    color: #666666;
    border-radius: 3px;
    width: 90%;
    margin: 2% 5%;
    font-size: 1.25rem;
    padding: 2%;
    border: 1px solid #666666;
  }
  main .container #login form input[type=text]:hover,
  main .container #login form input[type=password]:hover,
  main .container #login form input[type=text]:focus,
  main .container #login form input[type=password]:focus {
    border: 1px solid #ba9e38;
    color: #ba9e38;
  }
  main .container #login form .sbtbtn {
    cursor: pointer;
    box-sizing: border-box;
    background-color: #e4e4e4;
    color: #ba9e38;
    border-radius: 3px;
    width: 90%;
    margin: 2% 5% 5% 5%;
    font-size: 1.25rem;
    padding: 2%;
    border: 1px solid #666666;
  }
  main .container #login form .sbtbtn:hover,
  main .container #login form .sbtbtn:focus {
    border: 1px solid #ba9e38;
    color: #ba9e38;
  }
  footer {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: 100%;
    height: 40px;
    margin: 20px 0px 0px 0px;
  }
  footer nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    width: 100%;
    max-width: 1280px;
  }
  footer nav ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    width: 85%;
  }
  footer nav ul li {
    margin: 0px 20px 0px 0px;
  }
  footer nav ul li:last-child {
    margin: 0px 0px 0px 0px;
  }
  footer nav ul li a {
    color: #666666;
    font-size: 1.125rem;
    text-decoration: none;
  }
}