@import url("css/variables.css");
@import url("css/fonts.css");
@import url("css/shared.css");

@import url("css/templates/header.css");
@import url("css/templates/footer.css");

@import url("css/modules/ankerblock.css");
@import url("css/modules/textblock.css");
@import url("css/modules/headerblock.css");
@import url("css/modules/gridblock.css");
@import url("css/modules/teaserblock.css");
@import url("css/modules/immobilien.css");
@import url("css/fragments/neues.css");

* {
    box-sizing: border-box;
}

img,
video,
iframe,
table {
    max-width: 100%;
    height: auto;
}

html {
    font-size: var(--fontsize-base);
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: var(--fontweight-base);
    color: var(--color-tertiary);
    background-color: var(--bg-body);
    margin: 0;
}

a:not(.btn) {
    color: inherit;
    text-decoration: none;
}
a:not(.btn):hover {
    text-decoration: underline;
}

hr {
    height: 1px;
    background-color: var(--bg-dark);
    border: 0;
}
p + hr {
    margin-top: -0.5rem;
}

.screen-reader-text {
    clip: rect(1px,1px,1px,1px);
    word-wrap: normal !important;
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    overflow-wrap: normal !important;
    padding: 0;
    position: absolute !important;
    width: 1px;
}

.maxwidth,
.maxwidth-s,
.maxwidth-m,
.maxwidth-l,
.maxwidth-xl {
    position: relative;
    width: 100%;
    max-width: var(--maxwidth-l);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

@media (min-width: 481px) {
    .maxwidth,
    .maxwidth-s,
    .maxwidth-m,
    .maxwidth-l,
    .maxwidth-xl {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.maxwidth-s {
    max-width: var(--maxwidth-s);
}
.maxwidth-m {
    max-width: var(--maxwidth-m);
}
.maxwidth-l {
    max-width: var(--maxwidth-l);
}
.maxwidth-xl {
    max-width: var(--maxwidth-xl);
}

.btn {
    display: inline-block;
    color: var(--btn-default-color);
    font-size: var(--fontsize-base);
    font-weight: var(--fontweight-medium);
    text-decoration: none;
    padding: 0.5rem 1.5rem;
    background-color: var(--btn-default-bg-color);
    border-radius: var(--btn-border-radius);
    border: 0;
    transition: background 0.3s;
    cursor: pointer;
}
.btn:hover {
    background-color: var(--btn-default-bg-hover);
}

.btn-sm {
    font-size: 0.9rem;
}

.btn-lg {
    padding: 0.6rem 3rem;
}

.btn-secondary {
    background-color: var(--color-secondary);
}
.btn-secondary:hover {
    background-color: var(--color-primary);
}

.btn-outline {
    border: 1px solid var(--color-quaternary);
}

.bg-white {
    background-color: var(--bg-white);
}
.bg-light {
    background-color: var(--bg-light);
}
.bg-medium {
    background-color: var(--bg-medium);
}
.bg-dark {
    background-color: var(--bg-dark);
}

main {
    min-height: calc(100vh - 16rem);
    line-height: 1.4;
    margin-top: 0.1rem;
    padding-top: 1px;
}

main h1,
main .h1,
main h2,
main .h2,
main h3,
main .h3,
main h4,
main .h4 {
    color: var(--headline-color);
    font-weight: var(--fontweight-medium);
    margin: 1rem 0;
}
main h2,
main .h2 {
    font-size: 1.6rem;
}
main h3,
main .h3 {
    font-size: 1.4rem;
}
main h4,
main .h4 {
    font-size: 1.2rem;
}

main a {
    color: inherit;
}

main p {
    margin-bottom: 1.5rem;
}

main strong {
    font-weight: var(--fontweight-bold);
}

main > article {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
main > article:first-child {
     padding-top: 1px;
}
main > article:last-child {
    padding-bottom: 2rem;
}
main > article.no-margins {
    padding-top: 1px;
    padding-bottom: 1px;
}
main > article.no-margin-top {
    padding-top: 1px;
}
main > article.no-margin-bottom {
    padding-bottom: 1px;
}

/* TODO define style in CKE5 somehow */
main ul.plus-style {
    list-style-type: '+';
    padding-left: 0.75rem;
}
main ul.plus-style li {
    padding-left: 0.5rem;
    margin-bottom: 0.75rem;
}
main ul.plus-style li::marker {
    color: var(--color-primary);
    font-weight: var(--fontweight-bold);
}