/* separate speicherung zum testen */
.bc-big {
    /*border: 1px solid rgb(193, 193, 255);*/
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4rem;
    /*box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.1);*/
    padding-bottom: 2em;
}

.auth-big {
    width: 80vw;
    font-size: var(--title-fontsize);
    margin-left: auto;
    margin-right: auto;
    margin-top: 4em;
    padding-right: 3em;
    padding-bottom: 2em;
}

.main-topics {
    margin-left: 0;
    display: flex;
    flex-flow: wrap;
}

section#project h1 {
    font-size: 2.5rem;
    margin: 1rem 0;
}

@media (max-width: 700px) {
    .main-topics {
        flex-flow: row wrap;
    }
    section#project h1 {
        font-size: 1.5rem;
        margin: 1rem 0;
    }
}

.subtitle-container {
    padding-bottom: .5em;
    border-bottom: 1px solid darkgray;
    line-height: 1em;
}

.contact-type {
    /*width: 80vw;*/
    margin-left: 10vw;
    margin-right: 10vw;
    margin-top: 10vh;
    display: flex;
    flex-flow: column;
}
.contact-header {
    text-decoration: underline;
}
.contact {
    font-size: 2rem;
    margin: 0.2em 0.2em 1rem;
    background: rgba(240, 240, 240, 0.4);
    padding: 0.5em;
    border-radius: 0.5em;
}

.settokenform {
    align-content: center;
    font-size: calc(var(--title-fontsize) / 2);
}

.bottom-margin {
    margin-bottom: 10vh;
}

.settokenform * {
    font-size: calc( var(--title-fontsize) / 2);
    margin: 0.5rem;
    padding: 0 .5em;
}

.settokenform button {
    font-size: 1rem;
    float: right;
}

.highlight div {
    /*komischer umbruch im code-plugin, hier explizit die hintergrundfarbe setzen, so wie der code bereich sein soll*/
    background-color: #272822;
}

/*#meta {*/
/*    padding: 4vh 5vw calc( var(--footer-height) + var(--project-footer-padding));*/
/*}*/

#project-content code {
    word-break: keep-all;
    white-space: pre-wrap;
}

.col-panel {
    margin-left: 10vw;
    margin-right: 10vw;
    padding: 1rem;
    padding-bottom: 3rem;
}
.col-panel .formheader {
    background-color: lavender;
    font-size: 2rem;
}

.col-panel .jdform {
    font-size: 1rem;
}

.col-panel .jdform label {
    margin-bottom: .1rem;
    font-size: .8rem;
    display: inline-block;
}

.focushack .jdform {
    display: none;
}

.focushack .formspace {
    display: block;
    height: 10rem;
}

.focushack:focus-within .formspace {
    display: none;
}

div.jdform div {
    width: 100%;
    padding: .5rem 0;
}

.jdform div input, .jdform div textarea {
    width: calc(100% - .5rem);
    font-size: 1.5rem;
}
/*.jdform div textarea {*/
/*    height: 5rem;*/
/*}*/

.focushack:focus-within .formheader {
    background-color: #ffb49870;
}

.focushack:focus-within .jdform {
    display: block;
}

.focushack:focus-within .formheader::before {
    /*content: "\25BC ";*/
    content: "- ";
}

.focushack .formheader::before {
    /*content: "\25B6 ";*/
    content: "+ ";
}

.col-panel button {
    font-size: 1rem;
}

.motv {
    font-size: 2rem;
    margin-left: 10vw;
    margin-right: 10vw;
    margin-top: 1rem;
}

.arrow {
    font-size: 1.5rem;
    font-weight: 900;
    vertical-align: -0.2rem;
}

.naventry {
    display: flex;
    justify-content: space-between;
}

#offer-content {
    background-color: var(--offer-content-bgcolor);
    padding: .5rem 2rem 2rem;
    margin: 1rem 0;
    border-radius: 1rem;
    font-size: clamp(1rem, 2vw, 1.25rem);
}
#offer-content code {
    transform: scale(.9, 1);
    display: inline-block;
    font-family: inherit;
    text-decoration: underline;
}

section h1 {
    font-size: 2rem;
    margin: 1em 0;
}

#content #main.add-page-bottom-margin {
    margin-bottom: 5rem;
}

.tabs {
    margin-top: 2rem;
}

.tab-panel {
    display: none;
}
#tab1:checked ~ .tab-panels #content1,
#tab2:checked ~ .tab-panels #content2 {
    display: block;
}

.tab-panels {
    margin-top: 10vh;
}

.tablabels {
    font-size: var(--title-fontsize);
    letter-spacing: -3px;
    /*font-weight: bold;*/
    /*text-shadow: rgba(0, 0, 0, 0.25) 5px 5px 8px;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 10vw;
}

.tabs [type="radio"] {
    display: none;
}

#tab1:checked ~ .tablabels .lab1, #tab2:checked ~ .tablabels .lab2 {
    font-weight: bold;
    text-decoration: underline;
    text-shadow: rgba(0, 0, 0, 0.25) 5px 5px 8px;
    transform: scaleX(1.1);
}

#tab1 ~ .tablabels .lab1, #tab2 ~ .tablabels .lab2 {
    text-shadow: none;
    font-weight: 100;
    transform: scaleX(.9);
}

.lab1:hover, .lab2:hover {
    color: var(--highlight-color);
}

#offer-content a {
    color: orangered;
}

#offer-content a:hover {
    text-decoration: underline;
}

#offer-content p:last-of-type a {
}

a.offercontactlink {
    font-size: 1.5rem;
}


#offer-content .tabs {
    margin-bottom: 1rem;
}

#offer-content .tablabels {
    font-size: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 1rem 0 0;
    letter-spacing: 1px;
}

#offer-content .tab-panels {
    margin-top: 1rem;
}

#acccontent2 {
    background-color: azure;
    padding: .1rem 1rem;
    font-size: smaller;
}

#tab1:checked ~ .tab-panels #acccontent1,
#tab2:checked ~ .tab-panels #acccontent2 {
    display: block;
}