/* Basis-CSS Portale v1.0 2025 */ 

/* Farben und Variablen */
:root {
    --site_bg: white;
    --site_color: black;
    --cit_color: #0071bc;
    --cit_bg: #99c6e4;
    --cit_bg_hover: #8eb7d3;
    --link_hover: #0071bc;
    --btn_bg: #0071bc;
    --btn_bg_hover: #004b7e;
    --hr_color: #b31018;
    --hr_bg: #cc000350;
    --hr_bg_hover: #cc000365;
    --alert_text: #cc0003;
    --alert_bg: #cc000350;
    --highlight_border: #969696;
    --highlight_bg: #c0c0c0;
    --status_gruen: #cefcca;
    --status_gelb: #fffdc5;
    --status_rot: #cc000350;
}

/* versteckte asp-Elemente ausblenden */
.aspNetHidden {
    display: none !important;
}

/* Globale Stile */
* {
    box-sizing: border-box;
}
html {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    background-color: var(--site_bg);
    color: var(--site_color);
    -webkit-text-size-adjust: none;
}
a {
    text-decoration: underline;
    color: var(--site_color);
}
a:hover {
    color: var(--link_hover);
}

/* Textstile */
p, h1, h2, h3 {
    margin-bottom: 0.7rem; /* alt: 1rem;  */
    line-height: 1.4;
}
h1, .h1, h2, h3, b, .b, strong {
    font-weight: 700;
}
p, td, th, li, label, span, #status {
    font-size: 0.9rem; /* alt: 1rem;	*/
    font-weight: 400;
    line-height: 1.4;
}
span {/* alt: li, span { */
    /*font-size: inherit;*/
}
ul, ol {
    padding-left: 1.5rem;
}
li {
    margin-bottom: 0.5rem;
}
h1, .h1 {
    font-size: 1.7rem;
    /* alt: margin-bottom: 1.5rem; */
}
h2, .h2 {
    font-size: 1.5rem;
}
h3, .h3 {
    font-size: 1.3rem;
}

.Ueberschrift {
    font-size: 1.5rem
}
/* Layout und Struktur */
.content {
    margin: 0 auto;
    width: 100%;
    max-width: 1024px;
}
.flex {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.block {
    display: block;
}
.align-start {
    align-self: flex-start;
}
.wrap {
    flex-wrap: wrap;
}
.justify-between {
    justify-content: space-between;
}
.text-center {
    text-align: center;
}


/* Komponenten */
header, main {
    padding: 0 2rem;
    margin-bottom: 2rem;
}
header {
    margin-top: 1rem;
    margin-bottom: 4rem;
}
.logo img {
    height: 100px;/* alt: height: 120px; */
}
.home_icon {
    margin-right: 0.25rem;
    height: 1.1rem;
}
.info_icon {
    margin-right: 0.5rem;
    height: 1.1rem;
}
.user_icon {
    margin-right: 0.5rem;
    height: 1.7rem;
}
.breadcrumbs a, .breadcrumbs span, .small-text {
    font-size: 0.875rem !important;
}
.breadcrumbs .trenner {
    margin: 0 0.5rem;
}
.grid {
    display: grid;
    grid-gap: 2rem;
    align-items: center;
}
.column-1 {
    grid-template-columns: auto;
}
.column-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.column-2-ungleich {
    grid-template-columns: auto 20%;
}
.column-2-ungleich-reversed {
    grid-template-columns: 25% auto;
}
.gap-1-fixed {
    grid-gap: 1rem !important;
}
.gap-2-fixed {
    grid-gap: 2rem !important;
}
.gap-4 {
    grid-gap: 4rem;
}
.column-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.column-span-2 {
    grid-column: 1 / span 2;
}
.column-span-3 {
    grid-column: 1 / span 3;
}
.kachel {
    padding: 0.5rem;
    border-radius: 8px;
    height: 100%;
    position: relative;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.20);
    text-align: center;
}
.kachel .icon {
    width: 100%;
    max-width: 80px;
}
.kachel p {
    margin: 1rem 0 0 0;
}
.kachel a {
    color: var(--site_color);
    text-decoration: none;
}
.kachel.hr {
    background-color: var(--hr_bg);
}
.kachel.hr:hover {
    background-color: var(--hr_bg_hover);
}
h1.hr, h2.hr {
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--hr_color);
}
.kachel.cit {
    background-color: var(--cit_bg);
}
.kachel.cit:hover {
    background-color: var(--cit_bg_hover);
}
h1.cit, h2.cit {
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--cit_color);
}
.small-margin-top {
    margin-top: 0.5rem;
}
.small-margin-right {
    margin-right: 0.5rem;
}
.small-margin-bottom {
    margin-bottom: 0.5rem;
}
.margin-bottom {
    margin-bottom: 1rem;
}
.medium-margin-bottom {
    margin-bottom: 2rem;
}
.big-margin-bottom {
    margin-bottom: 4rem;
}
.no-margin {
    margin: 0 !important;
}
.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
    box-sizing: border-box;
}
hr {
    border: 1px solid var(--highlight_bg);
    width: 100%;
    margin: 0;
    border-radius: 5px;
}

/* Formulare und Eingaben */
input:not([type='submit']):not([type="checkbox"]):not([type="radio"]):not([type="button"]), select, textarea {
    height: calc(2.2rem + 2px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    font-family: inherit;
    color: var(--site_color);
    background-color: var(--site_bg);
    border: 1px solid var(--highlight_border);
    border-radius: 5px;
    padding: 0.5rem 0.7rem;
    min-width: 10px;
    width: 100%;
}
textarea {
    height: 100%;
}
input[type='number']:read-only {
    border: none !important;
    border-bottom: 1px solid var(--highlight_border) !important;
    border-radius: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    text-align: center;
}
input[type='number']:read-only {
    outline: none;
    cursor: not-allowed;
}
input[type='submit'], .submit_btn, .inversed_btn, input::file-selector-button {
    background-color: var(--btn_bg);
    color: var(--site_bg);
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;/* alt: 1rem; */
    display: inline-block;
    font-family: inherit;
    border: 1px solid transparent;
    outline: none;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
}
input[type="file"] {
    height: auto !important;
    border: none !important;
    padding: 0 !important;
}
input::file-selector-button {
    padding: 0.25rem 0.5rem !important;
}
.btn_icon {
    margin-right: 0.5rem;
    height: 1.2rem;
    vertical-align: sub;
}
.inversed_btn, input::file-selector-button {
    background-color: var(--highlight_bg);
    color: var(--site_color);
}
.inversed_btn:hover, input::file-selector-button:hover {
    background-color: var(--highlight_border);
    color: var(--site_color);
}
input[type='submit']:hover, .submit_btn:hover {
    background-color: var(--btn_bg_hover);
    color: var(--site_bg);
}
input[type='checkbox'], input[type='radio'] {
    margin-right: 0.7rem;
    cursor: pointer;
}
*:disabled {
    cursor: not-allowed;
    background-color: var(--highlight_bg);
}
.column-2-ungleich-reversed select {
    max-width: 130px;
    display: block;
}
.column-2-ungleich-reversed input[type="file"] {
    max-width: 500px;
    display: block;
}
fieldset {
    padding-top: 1rem;
}
legend, .legend {
    padding: 0.5rem 0.7rem;
    background-color: var(--highlight_bg);
    border-radius: 5px;
    font-weight: bold;
}
.stretch {
    align-self: stretch;
}
progress, progress::-webkit-progress-bar {
    -webkit-appearance: none;
    appearance: none;
    height: 1rem;
    border-radius: 5px;
    background-color: var(--highlight_bg);
    border: none;
    width: 100%;
}
progress::-moz-progress-bar {
    background-color: var(--btn_bg);
    border-radius: 5px;
}
progress[value]::-webkit-progress-value {
    background-image: -webkit-linear-gradient(left, var(--btn_bg), var(--btn_bg));
    border-radius: 5px;
    background-size: cover;
}
details {
    border: 1px solid var(--highlight_bg);
    border-radius: 5px;
    padding: 0.5rem 0.5rem 0;
    margin-bottom: 0.5rem;
}
details[open] {
    padding: 0.5rem;
}
summary {
    font-weight: bold;
    background-color: var(--highlight_bg);
    margin: -0.5rem -0.5rem 0;
    padding: 0.5rem;
    cursor: pointer;
}
details[open] summary {
    margin-bottom: 0.5rem;
    background-color: var(--site_bg);
    border-radius: 5px;
}
table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid var(--highlight_border);
}
th {
    font-weight: bold;
    border-bottom: 1px solid var(--highlight_border);
}
th, td {
    padding: 0.4rem 0.4rem 0.2rem 0;/* alt:  0.5rem 0.7rem 0.5rem 0; */
    text-align: left;
}

/* Status und Nachrichten */
.alert_msg, .info_msg {
    padding: 0.5rem;
    border-radius: 8px;
}
.alert_msg p:last-of-type, .info_msg p:last-of-type {
    margin: 0;
}
.alert_msg {
    background-color: var(--alert_bg);
}
.alert_text {
    color: var(--alert_text);
}
.cancel_btn {
    padding: 0.5rem 0.7rem;
    text-align: center;
    display: inline-block;
}
.info_msg {
    background-color: var(--highlight_bg);
}
.status_gruen {
    background-color: var(--status_gruen);
}
.status_gelb {
    background-color: var(--status_gelb);
}
.status_rot {
    background-color: var(--status_rot);
}

.info-grid {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0.5rem 1rem;
}

#status {
    word-break: break-word;
}

/* Medienanfragen */
@media screen and (max-width: 990px) {
    .column-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .column-span-3 {
        grid-column: 1 / span 2;
    }
}
@media screen and (max-width: 796px) {
    .column-2:not(.kein_umbruch), .column-2-ungleich, .column-2-ungleich-reversed {
        grid-template-columns: 1fr;
    }
    .column-span-2 {
        grid-column: 1 / span 1;
    }
    .grid {
        grid-gap: 1rem;
    }
    .gap-4 {
        grid-gap: 3rem;
    }
    .column-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .column-span-3 {
        grid-column: 1 / span 3;
    }
    .logo img {
        height: 52px;
    }
}
@media screen and (max-width: 630px) {
    .column-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .column-span-3 {
        grid-column: 1 / span 2;
    }
    .flex-column {
        flex-direction: column;
    }
    .logo, .breadcrumbs {
        align-self: flex-start;
    }
    .breadcrumbs {
        margin-top: 1rem;
    }
    
}