@charset "UTF-8";/*!
 * CSS Stadtportale
 *
 * @site         stadtpprtale
 * @version      1.0.0
 * @date         2026-01-02
 * @author       Olaf Thiel, pitcom GmbH https://www.pitcom.de/
 * @copyright    2026 by the author
 * @lastmodified 2026-03-30
 */

.box, .box.box-image {
    width: 100% -1.3125em;
    padding: 0 0.65625em;
}

.box > h2:first-of-type {
    margin-top: 0;
}

figcaption {
    font-size: .875em;
    color: #555;
    margin-top: 4px;
}

.box[class*="color-"] {
    margin: 0 0.65625em;
    padding: 1.3125em;
}

.box.teaser {
    padding: 0;
    margin: 0 0.65625em;
}

.boxes:has(.teaser) {
    margin: 0;
}

.box:last-child {
    padding-bottom: 0;
}

@media only screen and (min-width: 48.0625em) {
    .content-text > p {
        font-size: 1.125em;
        line-height: 1.5em;
        text-align: center;
        hyphens: none;
    }
}

p {
    hyphens: auto;
}

.content > header {
    margin: 2em auto;
}

.boxes {
    margin-bottom: 2.625em;
}

ul {
    list-style: '—';
    padding-left: 1em;
}

li {
    padding-left: 0.5em;
}

.content > :last-child {
    margin-bottom: 3em;
}

.content.content .section {
    padding: 1.5em 0 0;
}

.section-header {
    position: relative; /* wichtig für ::after */
    display: inline-block; /* damit die Linie nicht die volle Breite einnimmt */
}

.section-header::after {
    content: "";               /* Pseudoelement braucht content */
    display: block;            /* Zeilenblock unter dem Text */
    width: 100px;              /* gewünschte Länge */
    height: 8px;               /* Höhe der Linie */
    background-color: transparent;   /* Farbe der Linie */
    margin: 8px auto 0 auto; /* 8px Abstand oben, horizontal zentriert */
}

.stadt.color-1 .section-header::after {
    background-color: var(--cities-color-custom-1,#565656);;   /* Farbe der Linie */
}

.stadt.color-2 .section-header::after {
    background-color: var(--cities-color-custom-2,#565656);;   /* Farbe der Linie */
}

.stadt.color-3 .section-header::after {
    background-color: var(--cities-color-custom-3,#565656);;   /* Farbe der Linie */
}

.stadt.color-4 .section-header::after {
    background-color: var(--cities-color-custom-4,#565656);;   /* Farbe der Linie */
}

Element {
}
@media only screen and (min-width: 64.0625em) {
    .opener-item > figcaption {
        position: absolute;
        height: 100%;
        padding: 1em 2em;

        display: flex;
    }
}
.opener-item > figcaption {
    margin-top: 0;
}

.breadcrumbs.breadcrumbs {
    max-width: 116em;
    margin: 0 auto;
    padding: 2em 0 0;
}

.breadcrumbs.breadcrumbs li {
    color: #565656
}

.breadcrumbs.breadcrumbs a {
    border-bottom: 1px dotted #565656;
    padding-bottom: 2px;
}

.breadcrumbs.breadcrumbs a:hover {
    border-bottom: 1px solid #000;
    color: #000;
}

.breadcrumbs li::after {
    content: "\e5cc"/'';
    font-size: 1.5em;
    font-family: "Material" !important;
    line-height: 1;
    display: inline-block;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.breadcrumbs li:not(:first-child) {
    padding-left: 0;
}

.opener, .opener figure {
    margin-bottom: 0;
}

.opener + .content {
    padding-top: 2em;
}

.header .menu-toggle::before {
    font: 4em/.81 Material;
    content: "\e5d2"/'';
}

.header .menu-panel > .close {
    font: 4em/.81 Material;
    content: "\e5cd"/'';
    top: 0;
    right: 0;
}

/**
 * open e5d8 e316
 * close e5d8 e313
 */

.header .menu-panel .menu-item-up > button::after {
    font: 1.5em/.81 Material;
    content: "\e316"/'';
}

.header .menu-panel .menu-item-up > button::after {
    content: "\e316"/'';
    font: 1.5em/.81 Material;
}

@media only screen and (max-width: 64.0625em) {
    .header .menu-panel .menu-item:has(.submenu) .menu-item-toggle::after {
        content: "\e313"/'';
        font: 1.5em/.81 Material;
    }
}

.header .menu-panel .menu-item-toggle {
    padding-left: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.header .menu-panel .menu-item-toggle

.header .menu-panel .menu-item:has(.submenu) .menu-item-toggle::after {
    left: .25em;
}

@media only screen and (min-width: 30.0625em) {
    .menu-close::after {
        position: static;
        padding: 0;
    }
}
.header .menu-panel > .close::after {
    content: "\e5cd"/'';
    position: absolute;
    top: 0;
    right: 0;
    font-family: "Material" !important;
    display: inline-block;
    width: .9375em;
    padding: .46875em;
    margin-left: .46875em;
}

.header > div {
    flex-wrap: nowrap;
}

.footer-nav li {
    margin: .2em .3em .2em 0;
}


.footer-nav li::after {
    right: -.5em;
    top: .2em;
}