* {
    box-sizing: border-box;
    margin: 0;
}

body,
input,
select,
textarea {
    font: 1.2vw sans-serif;
    color: #333;
}

body.o {
    overflow-y: hidden;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
    margin: 0 0 1em 0;
}

h3 {
    font-size: 1.5em;
    margin: 1em 0 0.5em 0;
}

h4 {
    font-size: 1.25em;
    margin: 1em 0 0.5em 0;
}

p {
    margin: 0.5em 0 1em 0;
}

ul {
    padding: 1em 0 1em 1em;
}

label {
    display: block;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
    color: #777;
}

a:hover {
    color: #aaa;
}

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.transparent {
    opacity: 0 !important;
}

.opaque {
    opacity: 1 !important;
}

.view {
    overflow: hidden;
}

.legal {
    padding: 5vw 25vw 10vw 25vw;
}

.legal ul {
    padding: 0 0 0 1em;
    list-style-type: none;
}

.legal ul ul {
    list-style-type: disc;
}

.backgrounds {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
}

.background {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.flag {
    display: inline-block;
    width: 2vw;
    height: 1.33vw;
    margin: 0 0 0 1vw;
    background-size: 100% 100%;
    cursor: pointer;
}

.de.flag {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/flags/de.png);
}

.by.flag {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/flags/by.png);
}

.en.flag {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/flags/en.png);
}

.xx.flag {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/flags/xx.png);
}

.icon {
    width: 3vw;
    height: 3vw;
    border-radius: 1.5vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    cursor: pointer;
}

.green.icon {
    background-color: #493;
}

.green.icon:hover {
    background-color: #382;
}

.red.icon {
    background-color: #b20;
}

.red.icon:hover {
    background-color: #a10;
}

.blue.icon {
    background-color: #059;
}

.blue.icon:hover {
    background-color: #048;
}

.grey.icon {
    background-color: #aaa;
}

.grey.icon:hover {
    background-color: #999;
}

.accept.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/accept.png);
}

.cancel.icon,
.close.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/cancel.png);
}

.prev.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/prev.png);
}

.next.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/next.png);
}

.configure.icon,
.edit-permission.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/edit.png);
}

.move.up.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/up.png);
}

.move.down.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/down.png);
}

.move.right.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/next.png);
}

.move.left.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/prev.png);
}

.delete.icon,
.remove.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/remove.png);
}

.add.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/add.png);
}

.restore.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/restore.png);
}

.bold.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/bold.png);
}

.italic.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/italic.png);
}

.link.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/link.png);
}

.select.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/select.png);
}

.web.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/web.png);
}

.mailto.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/mailto.png);
}

.tel.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/tel.png);
}

.area-properties.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/properties.png);
}

.view-permission.icon {
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/view.png);
}

.configure-new-area {
    position: absolute;
    z-index: 1;
}

#facebook {
    position: relative;
    width: 500px;
    height: calc(100vh - 11vw);
    margin: 2vw calc(50vw - 250px);
    overflow: hidden;
}

#facebook .cover {
    position: absolute;
    top: 130px;
    right: 1px;
    width: 9px;
    height: calc(100vh - 11vw - 130px);
    background-color: #f5f7f9;
}

#log {
    margin: 5vw;
    padding: 2vw;
    border: 2px solid #eee;
}

#log td {
    padding: 0.5vw 1vw;
}

#log .info {
    color: #493;
}

#log .warning {
    color: #fb0;
}

#log .error {
    color: #b20;
}

#log .message {
    color: #555;
}

#error {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40vw;
    height: 22vw;
    padding: 2.5vw;
    margin: -11vw -20vw;
    border-radius: 0.5vw;
    background: #eee;
}

#error .title {
    margin: 2vw 1vw;
    font-size: 2em;
}

#error .message,
#error .home {
    margin: 2vw 1vw;
    font-size: 1.5em;
}



@media screen and (orientation: portrait) and (max-width: 800px),
screen and (orientation: portrait) and (max-device-width: 800px) {

    body,
    input,
    select,
    textarea {
        font-size: 3vw;
    }

    .legal {
        padding: 5vw 10vw 15vw 10vw;
    }

    .flag {
        width: 5vw;
        height: 3.33vw;
        margin: 0 0 0 2.5vw;
    }

    #facebook {
        height: calc(100vh - 30vw);
        margin: 5vw calc(50vw - 250px);
    }

    #error {
        width: 100%;
        height: 68vw;
        padding: 6.25vw;
        margin: -34vw -50vw;
        border-radius: 0;
    }

    #error .title {
        margin: 8vw 4vw;
        font-size: 3em;
    }

    #error .message,
    #error .home {
        margin: 4vw;
    }
}



.zoned.article {
    width: 100%;
    height: 100vh;
}

.article input {
    border: none;
}

.article .zone {
    float: left;
    position: relative;
    width: 0;
    height: 100vh;
    overflow: hidden;
    transition: width 2s;
}

.ie .article .zone {
    transition: width 0s;
}

.article .active.zone {
    width: 100%;
}

.article .zone img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article .dots {
    position: absolute;
    bottom: 1.5vw;
    left: 0;
    width: 100%;
    text-align: center;
}

.article .dot {
    display: inline-block;
    width: 1vw;
    height: 1vw;
    margin: 0 0 0 0.5vw;
    border-radius: 0.5vw;
    background: #fff;
    cursor: pointer;
}

.article .active.dot {
    background: #555;
}



.article .changeable-value,
.article .editable.content {
    position: relative;
}

.article .edit-area.buttons,
.article .edit-zone.buttons,
.article .edit-image {
    position: absolute;
}

.article .change-value.buttons,
.article .edit-content.buttons {
    display: none;
    position: absolute;
    z-index: 1;
}

.article .button {
    border: none;
    outline: none;
}

.article .bold.button,
.article .italic.button,
.article .link.button {
    opacity: 0.5;
    cursor: default;
}

.article .active.button {
    opacity: 1;
    cursor: pointer;
}

.article .editable-image {
    position: relative;
}

.article .editable-image img {
    width: 100%;
    height: 100%;
}

.article .zone .editable-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.field {
    width: 50vw;
    margin: 5vw 25vw;
}

.field .collection {
    margin: 1.5vw 0;
}

.field .hint {
    margin: 2vw 0;
}

.field label {
    position: relative;
    width: 50vw;
    min-height: calc(3vw + 2px);
    margin: 0 0 1vw 0;
    overflow: hidden;
}

.field input,
.field select,
.field textarea,
.field .response {
    width: 30vw;
    padding: 0.5em;
    margin: 0 0 0 20vw;
}

.field input,
.field select,
.field textarea {
    border: 1px solid #ddd;
    outline: none;
    border-radius: 0;
    background: transparent;
    -webkit-appearance: none;
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled {
    color: #aaa;
}

.field input,
.field select {
    height: 3vw;
}

.field textarea {
    height: 8vw;
    padding-bottom: 0;
    resize: none;
}

.field .response {
    margin-top: 2vw;
    text-align: right;
}

.field .error input,
.field .error select,
.field .error textarea {
    border-color: #b20;
}

.field input[type=checkbox],
.field input[type=radio] {
    float: left;
    position: relative;
    width: 1.5vw;
    height: 1.5vw;
    padding: 0;
    margin: 0 0.75vw 0 0;
    overflow: hidden;
}

.field input[type=radio] {
    border-radius: 0.75vw;
}

.field input[type=checkbox]:checked:after,
.field input[type=radio]:checked:after {
    position: absolute;
    top: 0;
    font-size: 1.2vw;
}

.field input[type=checkbox]:checked:after {
    content: "\2713";
    left: 0.3vw;
}

.field input[type=radio]:checked:after {
    content: "\2717";
    left: 0.4vw;
}

.field .caption {
    position: absolute;
    left: 0;
    height: 3vw;
    line-height: 3vw;
}

.field .collection .caption {
    position: static;
    float: left;
    display: block;
    max-width: calc(100% - 2.25vw);
    height: auto;
    line-height: normal;
}

.field .send {
    height: 4.5vw;
    margin-top: 1.5vw;
    border: none;
    background: #aaa;
    color: #fff;
}

.field .send:disabled {
    background: #ddd;
    color: #fff;
}

.field .send:not(:disabled):hover {
    background: #999;
    cursor: pointer;
}



@media screen and (orientation: portrait) and (max-width: 800px),
screen and (orientation: portrait) and (max-device-width: 800px) {

    .field {
        width: 80vw;
        margin: 20vw 10vw;
    }

    .login.field {
        display: none;
    }

    .field .heading {
        margin: 0 0 2.5vw 0;
    }

    .field label {
        width: 80vw;
        min-height: calc(6vw + 2px);
        padding: 0 0 3vw 0;
    }

    .field input,
    .field select,
    .field textarea,
    .field .response {
        width: 50vw;
        margin: 0 0 0 30vw;
    }

    .field input,
    .field select {
        height: 6vw;
        font-size: 3.5vw;
    }

    .field select {
        padding: 0 0.5em;
    }

    .field textarea {
        height: 18vw;
    }

    .field input[type=checkbox],
    .field input[type=radio] {
        width: 3vw;
        height: 3vw;
        margin: 0 1.5vw 0 0;
    }

    .field input[type=radio] {
        border-radius: 1.5vw;
    }

    .field input[type=checkbox]:checked:after,
    .field input[type=radio]:checked:after {
        font-size: 2.4vw;
    }

    .field input[type=checkbox]:checked:after {
        left: 0.5vw;
    }

    .field input[type=radio]:checked:after {
        left: 0.7vw;
    }

    .field .caption {
        height: 6vw;
        line-height: 6vw;
    }

    .field .collection .caption {
        max-width: calc(100% - 4.5vw);
    }

    .field .send {
        height: 10vw;
        margin-top: 2vw;
    }

    .field .stats {
        display: none;
    }

    .field .response {
        margin-top: 4vw;
    }
}



footer {
    position: relative;
    width: 100%;
    text-align: center;
}

footer .bar .entry {
    display: inline-block;
    margin: 0 0 0 2vw;
}

footer .bar .entry:first-child {
    margin: 0;
}

footer .flags {
    margin: 1vw;
}



@media screen and (orientation: portrait) and (max-width: 800px),
screen and (orientation: portrait) and (max-device-width: 800px) {

    footer .bar .entry {
        margin: 0 0 0 5vw;
    }
}



header {
    width: 100%;
    height: 7vw;
    overflow: hidden;
}

#logo {
    float: left;
    width: 20vw;
    height: 5vw;
    margin: 1vw;
}

#logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left;
}

#title {
    float: left;
    margin: 2vw;
}

#nav {
    display: none;
    position: absolute;
    top: 4vw;
    right: 4vw;
    width: 9vw;
    height: 9vw;
    background-size: 100% 100%;
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/nav.png);
    cursor: pointer;
}

header .bar {
    position: absolute;
    top: 2vw;
    right: 2vw;
}

header .bar .entry {
    display: inline-block;
    margin: 0 0 0 2vw;
}

header .flags {
    position: absolute;
    top: 3vw;
    right: 0;
}

header .cart {
    position: absolute;
    background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/basic/img/icons/cart.png);
    background-color: #aaa;
}



@media screen and (orientation: portrait) and (max-width: 800px),
screen and (orientation: portrait) and (max-device-width: 800px) {

    header {
        height: 20vw;
    }

    #logo {
        width: 50vw;
        height: 15vw;
        margin: 2.5vw;
    }

    #nav {
        display: block;
    }

    header .bar {
        display: none;
        z-index: 1;
        top: 20vw;
        left: 0;
        width: 100%;
        height: auto;
        padding: 5vw 0;
        background: #aaa;
    }

    header .bar .entry {
        width: 80vw;
        height: 10vw;
        margin: 0 10vw;
        font-size: 5vw;
        line-height: 10vw;
        color: #fff;
    }

    header .bar .active.entry,
    header .bar .entry:hover {
        color: #ccc;
    }

    header .flags {
        position: static;
        margin: 5vw 0 0 7.5vw;
    }
}



.menu {
    width: 100%;
    text-align: right;
}

.menu .entry {
    display: inline-block;
    margin: 0.5vw 2vw 0.5vw 0;
}



@media screen and (orientation: portrait) and (max-width: 800px),
screen and (orientation: portrait) and (max-device-width: 800px) {

    .menu .entry {
        display: inline-block;
        margin: 1.5vw 5vw 1.5vw 0;
    }
}



#overlay {
    display: none;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
}

#overlay input,
#overlay select {
    height: 3vw;
    padding: 0.75vw;
    border: 0.1vw solid #fff;
    border-radius: 0.25vw;
    background: #fff;
    font-size: 1.4vw;
}

#overlay input.error {
    border-color: #b20;
}

#overlay .button {
    position: absolute;
    width: 3vw;
    height: 3vw;
    border-radius: 1.5vw;
}

#overlay .accept.button {
    right: 2vw;
    bottom: 1.5vw;
}

#overlay .cancel.button {
    right: 6vw;
    bottom: 1.5vw;
}

.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 2.5vw 2vw 1.5vw 2vw;
    border-radius: 0.5vw;
    background: rgba(255,255,255,0.9);
    overflow: auto;
}

.confirm.overlay {
    width: 24vw;
    height: 12vw;
    margin: -6vw -12vw;
}

.link.overlay,
.recycle.overlay {
    width: 36vw;
    height: 12vw;
    margin: -6vw -18vw;
}

.link.overlay input {
    width: 32vw;
}

.link.overlay .button {
    bottom: 1.5vw;
}

.link.overlay .web.button {
    left: 2vw;
}

.link.overlay .mailto.button {
    left: 6vw;
}

.link.overlay .tel.button {
    left: 10vw;
}

.link.overlay .active.button {
    background-color: #555;
}

.configure.overlay {
    width: 30vw;
    height: 20vw;
    margin: -10vw -12vw;
}

.configure.overlay label {
    width: 26vw;
    height: 4vw;
}

.configure.overlay span,
.configure.overlay select {
    float: left;
}

.configure.overlay select {
    width: 22vw;
}

.configure.overlay .icon.caption {
    display: inline-block;
    width: 3vw;
    height: 3vw;
    margin: 0 1vw 0 0;
    border-radius: 0.25vw;
    background-color: #aaa;
    cursor: default;
}

.recycle.overlay {
    width: 30vw;
    height: 12vw;
    margin: -6vw -15vw;
}

.recycle.overlay select {
    width: 26vw;
}

.select.overlay {
    top: 3vw;
    left: calc(3vw - 10px);
    width: calc(92vw + 20px);
    height: calc(100vh - 6vw);
}

.select.overlay .entry {
    float: left;
    position: relative;
    width: 13vw;
    height: 18vw;
    margin: 0 2vw 2vw 0;
    border-radius: 0.5vw;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
}

.select.overlay .entry:nth-child(6n) {
    margin-right: 0;
}

.select.overlay .entry:hover {
    background-color: #f7f7f7;
}

.select.overlay .image,
.select.overlay .caption {
    display: block;
    width: 13vw;
}

.select.overlay .image {
    height: 13vw;
    object-fit: cover;
    border-radius: 0.5vw 0.5vw 0 0;
}

.select.overlay .caption {
    height: 5vw;
    padding: 1vw;
    font-weight: 500;
    overflow: hidden;
}

.select.overlay .delete {
    position: absolute;
    opacity: 0;
    top: 0.5vw;
    right: 0.5vw;
    width: 2vw;
    height: 2vw;
    border-radius: 1vw;
}

.select.overlay .entry:hover .delete {
    opacity: 1;
}

.select.overlay .upload .image,
.select.overlay .unselect .image {
    width: 9vw;
    height: 9vw;
    padding: 2vw;
    margin: 2vw;
    border-radius: 0.5vw;
}

.select.overlay .upload .image {
    background: #059;
}

.select.overlay .unselect .image {
    background: #b20;
}

.select.overlay .progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 1vw;
    border-radius: 0.5vw 0.5vw 0 0;
    background-color: #059;
}



.stats,
.stats select {
    font: 1.2vw "Ubuntu", sans-serif;
    font-weight: 400;
    color: #555;
}

.stats header {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: transparent;
}

.stats #logo {
    width: 15vw;
    height: 3vw;
    margin: 1vw;
}

.stats .numbers {
    position: absolute;
    top: 2vw;
    right: 15vw;
}

.stats .period {
    position: absolute;
    top: 2vw;
    right: 3vw;
}

.stats .numbers div,
.stats .period div {
    float: left;
}

.stats .numbers .visits {
    margin: 0 1vw 0 0;
    color: #8af;
}

.stats .numbers .visitors {
    color: #35a;
}

.stats .period .button {
    width: 1.5vw;
    height: 1.5vw;
    background-color: #555;
}

.stats .period .current {
    margin: 0 0.5vw;
    color: #333;
    cursor: default;
}

.stats #summary {
    position: relative;
    width: 100%;
    height: 100vh;
}

.stats .axis,
.stats .grid,
.stats #chart {
    position: absolute;
}

.stats .grid,
.stats #chart {
    bottom: calc(4vw + (100vh - 10vw) / 22);
    left: 5vw;
    width: 93vw;
    height: calc((100vh - 10vw) / 11 * 10);
}

.stats .x.axis {
    bottom: 2vh;
    left: 5vw;
    width: 93vw;
    height: 3vw;
}

.stats .y.axis {
    bottom: 4vw;
    left: 1.5vw;
    width: 2.5vw;
    height: calc(100vh - 10vw);
}

.stats .x.axis .label {
    position: absolute;
    height: 3vw;
    text-align: center;
}

.stats .y.axis .label {
    width: 2.5vw;
    height: calc((100vh - 10vw) / 11);
    line-height: calc((100vh - 10vw) / 11);
}

.stats .line {
    width: 100%;
    height: calc((100vh - 10vw) / 11);
    border-top: 1px solid #eee;
}

.stats .line:last-child {
    border-bottom: 1px solid #eee;
}

.stats #chart .bar {
    position: absolute;
    bottom: 0;
}

.stats #chart .visits.bar {
    z-index: 1;
    background: #8af;
}

.stats #chart .visitors.bar {
    z-index: 2;
    background: #35a;
}

.stats #details {
    padding: 8vw 0 0 0;
}

.stats .container {
    width: 96vw;
    padding: 0 0 6vw 0;
    margin: 0 4vw;
    border-top: 1px solid #eee;
    overflow: hidden;
}

.stats .container .title {
    width: 100%;
    margin: 2vw 0 0 2vw;
    font-size: 2vw;
    font-weight: 500;
}

.stats .entry {
    float: left;
    width: 20vw;
    margin: 4vw 4vw 0 0;
}

.stats .entry .circle {
    position: relative;
    width: 20vw;
    height: 20vw;
    margin: 0 0 2vw 0;
    border-radius: 10vw;
    background: #eee;
}

.stats .entry .indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 10vw;
}

.stats .entry .visits.indicator {
    z-index: 1;
    background: #8af;
}

.stats .entry .visitors.indicator,
.stats .entry .duration.indicator {
    z-index: 2;
    background: #35a;
}

.stats .entry .subtitle {
    height: 2vw;
    margin: 0 0 0 2vw;
    font-size: 1.5vw;
    font-weight: 500;
    overflow: hidden;
}

.stats .entry .number {
    margin: 0.5vw 0 0 2vw;
    color: #35a;
}

.stats .entry .visits.number {
    color: #8af;
}



@font-face {
    font-family: "Source Sans Pro";
    src: url("../themes/landwehr/fonts/sourcesanspro-regular.woff2") format("woff2"),
         url("../themes/landwehr/fonts/sourcesanspro-regular.woff") format("woff");
    font-weight: 400;
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("../themes/landwehr/fonts/sourcesanspro-semibold.woff2") format("woff2"),
         url("../themes/landwehr/fonts/sourcesanspro-semibold.woff") format("woff");
    font-weight: 600;
}

@font-face {
    font-family: "Roboto Slab";
    src: url("../themes/landwehr/fonts/robotoslab.woff2") format("woff2"),
         url("../themes/landwehr/fonts/robotoslab.woff") format("woff");
}

body,
input,
select,
textarea {
    font-family: "Source Sans Pro", sans-serif;
    color: #333;
}

body {
    background: #aac0c2;
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

h1,
h2,
h3,
h4 {
    font-family: "Roboto Slab", serif;
}

a {
    color: #558284;
    font-weight: 600;
}

a:hover {
    color: #84a4a6;
}

.page {
    min-height: calc(100vh - 12vw);
}

.legal {
    padding: 5vw;
    margin: 0 20vw 2vw 20vw;
    background: #fff;
    font-size: 1.5vw;
}


@media screen and (min-width: 1200px) {

    .legal {
        padding: 60px;
        margin: 0 240px 48px 240px;
        font-size: 18px;
    }
}



@media screen and (orientation: portrait) and (max-width: 800px),
screen and (orientation: portrait) and (max-device-width: 800px) {

    .page {
        min-height: calc(100vh - 30vw);
    }

    .legal {
        padding: 5vw;
        margin: 0 0 5vw 0;
        font-size: 3.5vw;
    }
}



.article .image {
    display: block;
    width: 100%;
    height: 50vw;
    max-width: 1200px;
    max-height: 600px;
    margin: 2vw auto;
}

.article .container {
    width: 100%;
    max-width: 1200px;
    padding: 3vw 9vw;
    margin: 0 auto 2vw auto;
    background: #fff;
    overflow: hidden;
}

.article .title {
    font-size: 2.5vw;
    color: #558284;
}

.article .text {
    column-count: 2;
    column-gap: 4vw;
    font-size: 1.5vw;
    line-height: 1.5;
    text-align: justify;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.article .broad.text {
    width: 65%;
    column-count: 1;
    text-align: left;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

.article .column {
    float: left;
    width: 50%;
}

.article .subtitle {
    margin: 0.5vw 0;
    font-size: 2vw;
}

.article .list {
    font-size: 1.5vw;
    line-height: 1.5;
}

.article .logo {
    margin: 3vw 0 0.5vw 0;
}

.article .bbh.logo {
    width: 10vw;
    max-width: 120px;
}

.article .agenda.logo {
    width: 15vw;
    max-width: 180px;
}

.article .portal.logo {
    width: 30vw;
    max-width: 360px;
}

.article .anton-murr.logo {
    width: 20vw;
    max-width: 240px;
}


@media screen and (min-width: 1200px) {

    .article .image {
        margin: 24px auto;
    }

    .article .container {
        padding: 36px 108px;
        margin: 0 auto 24px auto;
    }

    .article .title {
        font-size: 30px;
    }

    .article .text {
        column-gap: 48px;
        font-size: 18px;
    }

    .article .subtitle {
        margin: 6px 0;
        font-size: 24px;
    }

    .article .list {
        font-size: 18px;
    }

    .article .logo {
        margin: 36px 0 6px 0;
    }
}



@media screen and (orientation: portrait) and (max-width: 800px),
screen and (orientation: portrait) and (max-device-width: 800px) {

    .article .image {
        width: 200%;
        height: 100vw;
        margin: 5vw -50%;
    }

    .article .container {
        padding: 7.5vw 10vw;
        margin: 0 auto 5vw auto;
    }

    .article .title {
        font-size: 7.5vw;
    }

    .article .text {
        column-count: 1;
        font-size: 4vw;
    }

    .article .broad.text {
        width: 100%;
    }

    .article .broad.text br,
    .article .broad.text br:after {
        content: " ";
    }

    .service.article .broad.text br,
    .service.article .broad.text br:after,
    .contact.article .broad.text br,
    .contact.article .broad.text br:after {
        content: normal;
    }

    .article .column {
        width: 100%;
    }

    .article .second.column {
        margin: 4vw 0 0 0;
    }

    .article .subtitle {
        margin: 1vw 0;
        font-size: 6vw;
    }

    .article .list {
        font-size: 4vw;
    }

    .article .logo {
        margin: 7.5vw 0 1vw 0;
    }

    .article .bbh.logo {
        width: 30vw;
    }

    .article .agenda.logo {
        width: 45vw;
    }

    .article .portal.logo {
        width: 80vw;
    }

    .article .anton-murr.logo {
        width: 60vw;
    }
}



footer {
    width: 100%;
    max-width: 1200px;
    height: 4vw;
    margin: 0 auto;
    border-top: 0.25vw solid #558283;
}

footer .bar {
    padding: 1vw 0;
}

footer .bar .entry {
    font-size: 1.5vw;
}



@media screen and (min-width: 1200px) {

    footer {
        height: 48px;
        border-top-width: 3px;
    }

    footer .bar {
        padding: 12px 0;
    }

    footer .bar .entry {
        font-size: 18px;
    }
}



@media screen and (orientation: portrait) and (max-width: 800px),
screen and (orientation: portrait) and (max-device-width: 800px) {

    footer {
        height: 10vw;
        border-top-width: 0.5vw;
    }

    footer .bar {
        padding: 2.5vw 0;
    }

    footer .bar .entry {
        font-size: 3vw;
    }
}



header {
    height: 8vw;
    background: #558284;
}

header .bar {
    top: 3vw;
    right: 3vw;
}

header .bar .entry {
    margin: 0 0 0 2.5vw;
    font-size: 1.75vw;
    color: #fff;
}

header .bar .entry:hover,
header .bar .active.entry {
    color: #aac0c1;
}

#logo {
    width: 24vw;
    height: 6vw;
}



@media screen and (min-width: 1200px) {

    header {
        height: 96px;
    }

    header .bar {
        top: 36px;
        right: 36px;
    }

    header .bar .entry {
        margin: 0 0 0 30px;
        font-size: 21px;
    }

    #logo {
        width: 288px;
        height: 72px;
    }
}



@media screen and (orientation: portrait) and (max-width: 800px),
screen and (orientation: portrait) and (max-device-width: 800px) {

    header {
        height: 20vw;
    }

    header .bar {
        top: 20vw;
        padding: 6vw 0;
        background: #555;
    }

    header .bar .entry {
        font-size: 4vw;
    }

    #logo {
        width: 60vw;
        height: 15vw;
    }

    #nav {
        top: 5.25vw;
        right: 5.25vw;
        background-image: url(https://www.buchhaltungsservice-landwehr.de/psk/themes/landwehr/img/icons/nav.png);
    }
}