/* =========================================================================
   layout.css – Seitengerüst: Container, Grid-Ersatz, Header, Navbar, Footer.
   Marke Offenbach/ESO (rot-orange Header, Bootstrap-Grid nachgebaut).
   ========================================================================= */

/* ---- Zentrierter Container (Ersatz für Bootstrap .container) ---------- */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }

.containerBody {
    padding: 0 1em 7em;
}

#scroller-view {
    min-height: 100vh;
}

/* ---- Grid-Ersatz (die tatsächlich genutzten Bootstrap-Klassen) -------- */
.row {
    margin-left: -15px;
    margin-right: -15px;
}

    .row::after {
        content: "";
        display: block;
        clear: both;
    }

[class*="col-md-"] {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 992px) {
    [class*="col-md-"] { float: left; }
    .col-md-1  { width: 8.3333%; }
    .col-md-2  { width: 16.6667%; }
    .col-md-3  { width: 25%; }
    .col-md-4  { width: 33.3333%; }
    .col-md-5  { width: 41.6667%; }
    .col-md-6  { width: 50%; }
    .col-md-7  { width: 58.3333%; }
    .col-md-8  { width: 66.6667%; }
    .col-md-9  { width: 75%; }
    .col-md-10 { width: 83.3333%; }
    .col-md-11 { width: 91.6667%; }
    .col-md-12 { width: 100%; }
}

@media (max-width: 767px) {
    .hidden-xs { display: none !important; }
}

/* ---- Kopfbereich (rot-orange Leiste mit Logo + Stadtservice-Link) ------ */
header {
    background-color: var(--ofColor);
    color: var(--white);
    width: 100%;
    font-weight: normal;
}

    header a { color: var(--white); text-decoration: none; }
    header a:hover { color: var(--white); }

#firstHeaderDiv {
    background-color: var(--ofColor);
    color: var(--white);
    width: 100%;
    padding-top: 1em;
    padding-bottom: 1em;
}

/* max-width:none hebt das globale img{max-width:100%} auf, sonst wird das
   Logo in seiner schmalen Spalte horizontal zusammengedrückt/verpixelt. */
#headerImg { width: auto; height: 80px; max-width: none; }

.headerLink {
    color: var(--white);
    text-decoration: none;
    text-align: center;
    margin-top: 2em;
    font-weight: bolder;
    font-size: 1em;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    justify-content: flex-end;
}

.externalLinkIcon { flex: none; }

#blueBoder { border-top: solid 4px blue; }
#readBorder { border-bottom: solid 4px var(--ofColor); }

/* "responsive" Zeilenumbruch (Bootstrap-Helfer aus Alt-Site.css) */
br.responsive { display: none; }
@media (max-width: 991px) { br.responsive { display: inline; } }

/* ---- Formular-Gruppierung (Ersatz für Bootstrap .form-group) ---------- */
.form-group {
    margin-bottom: 15px;
}

.StartInputContainer {
    margin-top: 2em;
}

.summary-block {
    margin-top: 1em;
}

/* ---- Navigationsleiste (Fortschritt) ---------------------------------- */
#navbarCustom {
    list-style-type: none;
    margin: 1em 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
}

/* Alle Einträge gleich breit (flex:1 überschreibt die col-md-Breiten und den
   float), Text und Kreis mittig – unabhängig von der Textlänge. */
.navbarListEntitys {
    flex: 1 1 0;
    text-align: center;
    float: none;
}

.navbarlink {
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    line-height: 2.5em;
    background-color: var(--navbarIdle);
    cursor: pointer;
}

.navbarlinkComplete {
    background-color: var(--navbarComplete) !important;
}

#ShoppingcartNavBarButton {
    background-color: var(--navbarIdle);
    color: var(--white);
}

/* ---- Footer (ESO-Adresse, Bootstrap-Grid) -----------------------------
   Dunkle Leiste mit weißer Schrift (wie in der Alt-Site). */
footer {
    width: 100%;
    background-color: var(--footerBg);
    color: var(--white);
    padding: 0 1em 1em;
}

    footer a { color: var(--white); }

.footer {
    padding: 10px 0;
    width: 100%;
}

.footerTable {
    width: 100%;
}

    .footerTable a {
        color: var(--white);
        text-decoration: none;
    }

    .footerTable a:hover {
        text-decoration: underline;
    }

/* ---- Impressum-/Datenschutz-Fußzeile ---------------------------------- */
.ImpAndData {
    margin-top: 3em;
    text-align: center;
}