/* Bootstrap 5 PoC - brand overrides on top of the Bootstrap 5 CDN build.
   Colors lifted from the legacy comps/basic.css + comps/navigation.css palette
   so the PoC still reads as "Elektro Borst", not as generic Bootstrap. */

:root {
    --brand-ink: #150862;      /* legacy body text color */
    --brand-primary: #5444b4;  /* legacy hover/link accent */
    --brand-accent: #8f8ed7;   /* legacy topnavi background */
    --brand-danger: #cc0000;   /* legacy #alertphone color */

    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 84, 68, 180;
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-danger);
    --bs-body-color: var(--brand-ink);
    --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #f4f4f8;
}

.btn-brand {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}
.btn-brand:hover {
    background-color: var(--brand-ink);
    border-color: var(--brand-ink);
    color: #fff;
}

.site-header {
    background-color: #fff;
    border-bottom: 1px solid #e2e0f2;
}
.brand-logo {
    min-width: 0;
}
.brand-logo img {
    height: 47px;
    max-width: 100%;
}

.site-header .navbar-nav .nav-link {
    color: var(--brand-ink);
    font-weight: 500;
}
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus {
    color: var(--brand-danger);
}

.sidebar .nav-link {
    color: var(--brand-ink);
}
.sidebar .nav-link.active,
.sidebar .nav-link:hover {
    color: var(--brand-danger);
}
.sidebar .stoerungsdienst-link {
    color: var(--brand-danger);
}
.sidebar .card-header {
    background-color: var(--brand-accent);
    color: #fff;
    font-weight: bold;
}
.sidebar .knx-badge {
    display: flex;
    justify-content: center;
    margin: .75rem;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #e2e0f2;
    border-radius: .5rem;
}
.sidebar .knx-badge img {
    height: 85px;
}

.content-card .stoerungsdienst {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
}
.content-card .stoerungsdienst .content-pic {
    margin: 0 auto 1rem;
}

.alertphone-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background-color: #fdeaea;
    border: 1px solid #f3b8b8;
    border-radius: .5rem;
}
.alertphone-icon {
    flex-shrink: 0;
    color: var(--brand-danger);
}
.alertphone-link {
    display: inline-block;
    color: var(--brand-danger);
    font-size: 1.8rem;
    font-weight: bold;
    text-decoration: none;
}
.alertphone-link:hover {
    color: var(--brand-ink);
}

.shoutfield-bs {
    color: #900;
    border: 1px solid #ffc;
    border-radius: .375rem;
}

/* The legacy html/*.htm fragments reuse <h3> both as a lead-in paragraph and
   as small picture captions ("Vorher:", "Hubs / Switches"...) - Bootstrap's
   default h3 size (1.75rem) is far too heavy for that role, so it's toned
   down here instead of touching the markup. */
.content-card {
    font-size: 1.05rem;
    line-height: 1.7;
}
.content-card h1 {
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--brand-ink);
    margin-bottom: 1rem;
}
.content-card h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--brand-ink);
    margin: 1.5rem 0 .75rem;
}
.content-card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 1rem 0 .75rem;
}
.content-card p {
    margin-bottom: 1rem;
}

.content-card img.rightpic {
    float: right;
    margin: .25rem 0 .5rem 1rem;
    max-width: 45%;
    height: auto;
}
.content-card img.leftpic {
    float: left;
    margin: 0 1rem .5rem 0;
    max-width: 45%;
    height: auto;
}

/* Redesigned image handling for the Leistungsspektrum content fragments
   (html/*.htm), replacing the old ad-hoc float/clr markup with a small,
   consistent set of patterns: a single framed figure floated beside text,
   a plain callout box instead of a floated "shoutfield", a responsive
   grid for photo galleries, and a tidy row/grid for partner logos. */
.content-card .content-pic {
    max-width: 45%;
    height: auto;
}
.content-card .content-hint {
    background-color: #f6f5fc;
    border: 1px solid #e2e0f2;
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin: 1rem 0;
    font-size: .92rem;
}

/* Wraps a floated product image + heading + text as one self-contained
   block (flow-root instead of a manual clearfix div) so a sequence of
   products can be separated by a simple border instead of <hr>. */
.content-card .product-block {
    display: flow-root;
    margin-bottom: 1.75rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid #e2e0f2;
}
.content-card .product-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
/* Same float-containment as .product-block, without the separator border -
   for continuous prose that just happens to have a floated image in it. */
.content-card .float-wrap {
    display: flow-root;
}

.reference-card {
    height: 100%;
    padding: 1.25rem;
    background-color: #f6f5fc;
    border: 1px solid #e2e0f2;
    border-radius: .5rem;
}
.reference-icon {
    color: var(--brand-primary);
    margin-bottom: .5rem;
}
.reference-name {
    font-weight: 600;
    color: var(--brand-ink);
    margin-bottom: .5rem;
}
.reference-services {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.reference-badge {
    background-color: var(--brand-accent);
    color: #fff;
    font-weight: 500;
    font-size: .8rem;
    padding: .4em .7em;
}

.about-intro {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}
.about-portrait {
    flex: 0 0 180px;
    text-align: center;
}
.about-portrait img {
    width: 100%;
    height: auto;
    border-radius: .5rem;
    display: block;
}
.about-portrait-caption {
    margin-top: .5rem;
    font-weight: 600;
    color: var(--brand-ink);
    font-size: .9rem;
}
.about-portrait-caption span {
    display: block;
    font-weight: 400;
    color: #726ba0;
    font-size: .85rem;
}
.about-intro-text {
    flex: 1 1 300px;
}
.about-intro-text p {
    font-size: 1.15rem;
    line-height: 1.6;
}

.impressum-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .6rem 1.5rem;
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background-color: #f6f5fc;
    border: 1px solid #e2e0f2;
    border-radius: .5rem;
}
.impressum-facts dt {
    font-weight: 600;
    color: var(--brand-ink);
    white-space: nowrap;
}
.impressum-facts dd {
    margin: 0;
}

.timeline {
    position: relative;
    margin: 1.5rem 0 .5rem;
    padding-left: 1.75rem;
    border-left: 2px solid var(--brand-accent);
}
.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -2.1rem;
    top: .3rem;
    width: .7rem;
    height: .7rem;
    background-color: var(--brand-primary);
    border-radius: 50%;
    border: 2px solid #fff;
}
.timeline-date {
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: .15rem;
}
.timeline-content {
    color: var(--brand-ink);
}
/* Most legacy product photos are small (well under 300px) - these were
   shot/scaled for the old 500px-wide layout. Capping with max-width instead
   of forcing width:100% keeps them at their native size instead of
   upscaling them into blurry giants. .gallery-cell gives each one the same
   height (no visible frame - just for alignment) so a row of differently
   sized photos still lines up, and captions below a row start at the same
   baseline. */
.content-card .gallery-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 170px;
}
.content-card .gallery-img {
    max-width: 100%;
    max-height: 220px;
    width: auto;
    height: auto;
}
/* Small diagonal, overlapping two-photo collage - floats beside intro text
   as a quiet context illustration (e.g. TV-Empfangsanlagen: receiver +
   dish), instead of competing for attention as a full-width gallery row. */
.content-card .tv-photo-collage {
    position: relative;
    width: 230px;
    height: 200px;
}
.content-card .tv-photo-collage img {
    position: absolute;
    border-radius: .375rem;
}
.content-card .tv-photo-collage .photo-1 {
    top: 10px;
    left: 0;
    width: 185px;
    transform: rotate(-6deg);
    z-index: 1;
}
.content-card .tv-photo-collage .photo-2 {
    bottom: 0;
    right: 0;
    width: 125px;
    transform: rotate(7deg);
    z-index: 2;
    box-shadow: 0 6px 14px rgba(21, 8, 98, .18);
}
.content-card .partner-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    margin: 1rem 0;
}
.content-card .partner-row img {
    max-height: 55px;
    width: auto;
}
.content-card .partner-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1.25rem 1rem;
    background-color: #f6f5fc;
    border-radius: .5rem;
    text-align: center;
}
.content-card .partner-card img {
    max-height: 50px;
    max-width: 100%;
    width: auto;
}
.content-card .partner-card .partner-label {
    font-size: .85rem;
    color: var(--brand-ink);
}

footer.site-footer {
    background-color: var(--brand-ink);
    color: #cfcaf0;
    font-size: .875rem;
    line-height: 1.9;
}
footer.site-footer a {
    color: #fff;
}
footer.site-footer .footer-heading {
    color: #fff;
    font-weight: bold;
    margin-bottom: .25rem;
}
footer.site-footer .footer-bottom {
    border-color: rgba(255, 255, 255, .15) !important;
}
footer.site-footer .footer-map {
    border-radius: .375rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
}
footer.site-footer .footer-map iframe {
    border: 0;
}

.captcha-input {
    max-width: 140px;
}

/* Bootstrap's default .form-check floats the checkbox against the label,
   so it stays pinned to the first line when the label text wraps onto
   several lines. Flexbox keeps it centered against the full label height
   instead, regardless of how many lines it wraps to. */
.form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 0;
}
.form-check .form-check-input {
    float: none;
    flex-shrink: 0;
    margin: 0;
}