@charset "utf-8";


/*	B A S I C S
----------------------------------------------- */

@font-face {
    font-family: "SignifierWebRegular";
    src: url("fonts/signifier-web-regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SpaceGrotesk-Medium";
    src: url("fonts/SpaceGrotesk-Medium.eot");
    src: url("fonts/SpaceGrotesk-Medium.eot?#iefix") format("embedded-opentype"),
        url("fonts/SpaceGrotesk-Medium.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    color: #040f83;
    background: #fcfbf8;
    font-family: "SpaceGrotesk-Medium", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

em, i {
    font-style: normal;
}

.ui-page {
    background: #fff url("images/tintenkleckse-1.jpg") center center no-repeat;
    background-size: cover;
}

#login, #correspondence {
    background: #fff url("images/tintenkleckse-2.jpg") center center no-repeat;
    background-size: cover;
}

#imprint {
    background: #fff url("images/tintenkleckse-3.jpg") center center no-repeat;
    background-size: cover;
}

#manual {
    background: #fff url("images/tintenkleckse-4.jpg") center center no-repeat;
    background-size: cover;
}

#message-send {
    background: #fff url("images/tintenkleckse-5.jpg") center center no-repeat;
    background-size: cover;
}

#portrait {
    background: #fff url("images/tintenkleckse-6.jpg") center center no-repeat;
    background-size: cover;
}

#mypoems {
    background: #fff url("images/tintenkleckse-7.jpg") center center no-repeat;
    background-size: cover;
}

#editpoem {
    background: #fff url("images/tintenkleckse-8.jpg") center center no-repeat;
    background-size: cover;
}


img, video {
    max-width: 100%;
    height: auto;
}

.poem-sheet {
    position: absolute;
    display: none;
}

a {
    color: #040f83;
}

.ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a, .ui-page-theme-a a:visited, html .ui-bar-a a:visited, html .ui-body-a a:visited, html body .ui-group-theme-a a:visited {
    color: #040f83;
    font-weight: inherit;
    text-decoration: none;
    border-bottom: 1px solid #040f83;
    padding-bottom: 2px;
}


.ui-page-theme-a a:hover, html .ui-bar-a a:hover, html .ui-body-a a:hover, html body .ui-group-theme-a a:hover, .ui-page-theme-a a:active, html .ui-bar-a a:active, html .ui-body-a a:active, html body .ui-group-theme-a a:active {
    color: #ff6842;
    border-bottom-color: #ff6842;
}


/*	R E S E T
----------------------------------------------- */

.ui-overlay-shadow, .ui-shadow-inset, .ui-body-a, .ui-page-theme-a .ui-body-inherit, html .ui-bar-a .ui-body-inherit, html .ui-body-a .ui-body-inherit, html body .ui-group-theme-a .ui-body-inherit, html .ui-panel-page-container-a, .ui-shadow {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.ui-body-a {
    border: none;
}

.ui-body-a a {
    padding-bottom: 0 !important;
}

.ui-dialog-contain {
    margin: 20px 0 0 0;
    width: 100%;
}

h1, h2, h3 {
    font-weight: normal;
}

h1 {
    margin: 10px 0 20px 0;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

h2 {
    margin: 40px 0 20px 0;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

h3 {
    margin: 20px 0 20px 0;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

#manual h1, #imprint h1 {
    margin-top: 40px;
}

#popupMenu {
    border-top: 1px solid #fff;
    padding-bottom: 30px;
}

.ui-header .ui-title {
    margin: 0 !important;
    padding-top: 8px;
    padding-bottom: 14px;
}

.ui-body-a, .ui-page-theme-a .ui-body-inherit, html .ui-bar-a .ui-body-inherit, html .ui-body-a .ui-body-inherit, html body .ui-group-theme-a .ui-body-inherit, html .ui-panel-page-container-a, .ui-page-theme-a .ui-btn:hover, html .ui-bar-a .ui-btn:hover, html .ui-body-a .ui-btn:hover, html body .ui-group-theme-a .ui-btn:hover, html head+body .ui-btn.ui-btn-a:hover, .ui-page-theme-a .ui-btn, html .ui-bar-a .ui-btn, html .ui-body-a .ui-btn, html body .ui-group-theme-a .ui-btn, html head+body .ui-btn.ui-btn-a, .ui-page-theme-a .ui-btn:visited, html .ui-bar-a .ui-btn:visited, html .ui-body-a .ui-btn:visited, html body .ui-group-theme-a .ui-btn:visited, html head+body .ui-btn.ui-btn-a:visited {
    background: transparent;
    border: none;
    color: inherit;
}

.ui-bar-a {
    border: none;
}

.ui-dialog-contain, .ui-content {
    padding-bottom: 10px;
}

.ui-page-active .logo {
    margin-left: auto;
    margin-right: auto;
    width: 66%;
    max-width: 400px;
    display: block;
    margin-top: 40px;
}

.maincont {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.ui-header .ui-btn-left {
    margin-left: 9px;
}

b {
    font-weight: normal;
    letter-spacing: inherit;
}

#anthology-list {
    font-size: 20px;
}

#anthology-list li {
    margin-bottom: 20px;
}

.poem-sheet p, #anthology-list p {
    font-family: "SignifierWebRegular", "Georgia", "Times New Roman", "Times", serif;
    font-size: 20px;
    letter-spacing: 0.02em;
    line-height: 25px;
}

.poem-sheet .poem-user-specs {
    margin-top: 40px;
}

.poem-sheet .poem-user-specs, .poem-sheet .poem-location, #anthology-list li p:last-child {
    font-family: "SpaceGrotesk-Medium", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 20px;
}

.ui-listview > .ui-li-static {
    padding: .7em 0;
}

.ui-listview > li p {
    font-size: 16px;
}

.ui-footer .ui-btn-right {
    margin-right: 8px;
}

.ui-icon-arrow-r, .ui-icon-arrow-l {
    width: 50px;
    height: 50px;
    margin-top: -6px;
    box-shadow: none !important;
    background-color: transparent !important;
}

.ui-icon-arrow-r:after {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6 19.6' style='enable-background:new 0 0 19.6 19.6;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FF6842;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='5.2,9.5 12.1,9.5 10.4,6.5 14.5,9.8 10.4,13.2 12.1,10.1 5.2,10.1 '/%3E%3Cpath class='st0' d='M0,9.8C0,4.4,4.4,0,9.8,0c5.4,0,9.8,4.4,9.8,9.8c0,5.4-4.4,9.8-9.8,9.8C4.4,19.6,0,15.2,0,9.8z M0.5,9.8 c0,5.1,4.2,9.3,9.3,9.3c5.1,0,9.3-4.2,9.3-9.3c0-5.1-4.2-9.3-9.3-9.3C4.7,0.5,0.5,4.7,0.5,9.8z'/%3E%3C/svg%3E%0A");
    width: 36px;
    height: 36px;
}

.ui-footer .ui-btn-left {
    margin-left: -4px;
}

.ui-icon-arrow-l:after {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6 19.6' style='enable-background:new 0 0 19.6 19.6;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FF6842;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='14.5,9.5 7.5,9.5 9.2,6.5 5.2,9.8 9.2,13.2 7.5,10.1 14.5,10.1 '/%3E%3Cpath class='st0' d='M9.8,19.6C4.4,19.6,0,15.2,0,9.8C0,4.4,4.4,0,9.8,0c5.4,0,9.8,4.4,9.8,9.8C19.6,15.2,15.2,19.6,9.8,19.6z M9.8,0.5c-5.1,0-9.3,4.2-9.3,9.3c0,5.1,4.2,9.3,9.3,9.3c5.1,0,9.3-4.2,9.3-9.3C19.1,4.7,15,0.5,9.8,0.5z'/%3E%3C/svg%3E%0A");
    width: 36px;
    height: 36px;
}

.ui-btn-icon-notext::after {
    background-color: transparent;
}

.ui-icon-delete::after {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6 19.6' style='enable-background:new 0 0 19.6 19.6;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FF6842;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M9.8,0C4.4,0,0,4.4,0,9.8s4.4,9.8,9.8,9.8s9.8-4.4,9.8-9.8S15.2,0,9.8,0z M9.8,19.1c-5.1,0-9.3-4.2-9.3-9.3 s4.2-9.3,9.3-9.3s9.3,4.2,9.3,9.3C19.1,15,15,19.1,9.8,19.1z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st0' d='M9.8,10.6l-3.5,3.5l-0.8-0.8L9,9.8L5.5,6.3l0.8-0.8L9.8,9l3.5-3.5l0.8,0.8l-3.5,3.5l3.5,3.5l-0.8,0.8L9.8,10.6 z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.ui-icon-delete {
    box-shadow: none !important;
    background-color: transparent !important;
}

.ui-icon-minus::after {
    background-image: url("images/minus.svg")
}

.ui-icon-minus {
    box-shadow: none !important;
    background-color: transparent !important;
}

.ui-icon-plus::after {
    background-image: url("images/plus.svg")
}

.ui-icon-plus {
    box-shadow: none !important;
    background-color: transparent !important;
}

.ui-icon-location {
    height: 36px;
    margin-bottom: 70px
}

#footer {
    position: fixed;
}

#footer .ui-title .ui-link {
    border: none;
    top: 1px;
    top: 1.5px;
    position: relative;
}

#footer .ui-title .ui-link img {
    width: 36px;
    height: auto;
}

.ui-page-active .centerdiv .btnred {
    display: none;
}

.ui-collapsible-inset.ui-collapsible-themed-content .ui-collapsible-content {
    border: none;
}

#listcorresps h2 {
    font: inherit;
    font-size: 20px;
    letter-spacing: -0.02em;
}

#listcorresps p {
    text-overflow: initial !important;
    overflow: inherit !important;
    white-space: normal !important;
}

#listcorresps .ui-icon-carat-r {
    display: inline-block;
    padding-right: 50px;
}

.ui-btn-icon-right::after {
    background-color: #040f83;
}

#listcorresps .ui-collapsible-heading-toggle {
    padding-left: 50px;
}

.ui-listview .ui-li-aside {
    position: inherit;
    top: inherit;
    right: inherit;
    margin: 0;
    text-align: left;
}

#anthology-list p {
    text-overflow: initial !important;
    overflow: inherit !important;
    white-space: normal !important;
}

#list-mypoems li {
    margin-bottom: 10px;
}

.ui-content, .wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 600px;
}

.ui-dialog-contain {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#correspondence #listcorresps ul li {
    margin-left: 41px;
}

#correspondence #listcorresps ul {
    margin-bottom: 40px;
}


/*	H E A D E R
----------------------------------------------- */

#header {
    background-color: #ff6842;
}

#header a {
    border-bottom: none;
}

#header-img {
    max-width: 5em;
    margin: auto;
    padding: 5px;
    display: inline-block;
}

#btnMenu {
    background: transparent !important;
    margin-left: 0;
    box-shadow: none !important;
}

#btnMenu svg {
    fill: #fff;
    width: 19px;
    height: auto;
}

#popupMenu-popup {
    left: 0 !important;
    top: 43px !important;
    width: 100% !important;
    max-width: 800px !important;
}

#popupMenu {
    background-color: #ff6842;
}

#popupMenu .ui-btn {
    color: #fff;
    background-color: #ff6842;
    border: none;
    border-radius: 0;
    font: inherit;
    font-size: 150%;
    padding: 10px 10px 10px 17px;
    box-shadow: none !important;
}

#popupMenu a[href="#manual"] {
    margin-top: 40px;
}

#popupMenu a[href="#manual"], #popupMenu a[href="#imprint"], #popupMenu a[href="#logout"] {
    font-size: 100%;
    padding-bottom: 0;
}

#popupMenu a[href="#logout"] {
    padding-bottom: 20px;
}


/*	F O R M S
----------------------------------------------- */

input {
    font: inherit;
}

.ui-mobile label, div.ui-controlgroup-label {
    font: inherit;
    color: #999;
    padding-left: 7px;
}

.ui-input-text input, .ui-input-text[disabled], .ui-input-search input, textarea {
    border: 1px solid #bbb !important;
    border-bottom-color: #040f83 !important;
    border-radius: 2px !important;
    font-family: "SignifierWebRegular", "Georgia", "Times New Roman", "Times", serif;
    font-size: 20px;
    letter-spacing: 0.02em;
}

.ui-content .ui-btn {
    font: inherit;
    letter-spacing: 0.03em;
    text-align: center;
    color: #fff !important;
    background: #ff6842 !important;
    border: none;
    border-radius: 50px !important;
    display: inline-block;
    padding: .5em 2em .7em 2em !important;
    position: relative;
    left: -1px;
    box-shadow: none !important;
}

.ui-content .ui-btn:hover {
    background: #040f83 !important;
}

.ui-content .ui-btn-icon-right {
    font: inherit;
    letter-spacing: 0.03em;
    text-align: left;
    color: #040f83 !important;
    background: transparent !important;
    border: none;
    border-radius: 0 !important;
    display: inline-block;
    padding: .5em 2em .7em 0 !important;
    position: relative;
    left: 0;
    box-shadow: none !important;
}

.ui-content .ui-btn-icon-right:hover {
    background: transparent !important;
    color: #ff6842 !important;
}

#correspondence #listcorresps ul .ui-btn {
    font: inherit;
    letter-spacing: 0.03em;
    text-align: center;
    color: #fff !important;
    background: #ff6842 !important;
    border: none;
    border-radius: 50px !important;
    display: inline-block;
    padding: .5em 2.5em .7em 1.25em !important;
    position: relative;
    left: -1px;
    box-shadow: none !important;
}

#correspondence #listcorresps ul .ui-content .ui-btn:hover {
    background: #040f83 !important;
}

#correspondence #listcorresps a.ui-collapsible-heading-toggle.ui-btn {
    color: #040f83 !important;
    background-color: transparent !important;
}


/*	L A R G E   S C R E E N
----------------------------------------------- */

@media screen and (min-width: 634px) {

#btnMenu {
    display: block;
    left: calc(50% - 312px);
}

#footer .ui-btn-left {
    margin-left: calc(50% - 321px);
    display: block;
}

#footer .ui-btn-right {
    margin-right: calc(50% - 321px);
    display: block;
}

.ui-header .ui-btn-left {
    margin-left: calc(50% - 308px);
    display: block;
}

.maincont {
    max-width: 100%;
}

#popupMenu-popup {
    margin-left: calc(50% - 300px);
    max-width: 250px !important;
}

}