/* elaConnect Callstation - Produktseite.
   Ergänzt ../css/global.css (Navigation, Kopfbereich, Fußzeile) um die
   Inhaltsabschnitte dieser Seite. Die Bilder liegen in img/. */

:root {
    --brand: #F10358;
    --ink: #111318;
    --slate: #666572;
    --hair: #d7dbe2;
    --mist: #f1f3f6;
}

/* ---------- Navigation: Rückweg zur Startseite ---------- */
nav {
    justify-content: space-between;
}
nav .home {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.5px;
}
nav .home .c {
    color: var(--brand);
}

/* ---------- Kopfbereich ---------- */
.header .product {
    font-weight: 400;
}
.header p.claim {
    max-width: 720px;
    text-align: center;
    color: #c9ccd3;
    font-size: 18px;
    line-height: 30px;
    margin: 0 0 1.5rem;
}
.header p.claim em {
    font-style: normal;
    color: #fff;
    font-weight: 600;
}

/* ---------- Aufmacherbild unter dem Kopfbereich ---------- */
.hero {
    background: linear-gradient(180deg, rgb(17, 16, 19) 0%, rgb(17, 16, 19) 50%, #fff 50%);
    padding: 0 50px;
}
.hero img {
    display: block;
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
    border: 1px solid #2a2e37;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

/* ---------- Inhaltsabschnitte ---------- */
main.product {
    display: block;
    padding: 0;
}
.section {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 50px 0;
}
.section:last-of-type {
    padding-bottom: 100px;
}
/* Grauer Hintergrund über die volle Breite, der Inhalt bleibt im Raster:
   der Schatten malt den Hintergrund nach außen, clip-path begrenzt ihn
   auf die Zeilenhöhe. */
.section.alt {
    background: var(--mist);
    box-shadow: 0 0 0 100vmax var(--mist);
    clip-path: inset(0 -100vmax);
    margin-top: 80px;
    padding-top: 80px;
    padding-bottom: 80px;
}
.section h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1px;
    color: #000;
    margin: 0 0 1rem;
}
.section h2::before {
    content: "";
    display: block;
    width: 48px;
    height: 5px;
    background: var(--brand);
    margin-bottom: 1rem;
}
.section h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 0.4rem;
}
.section p {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 0.9rem;
}
.section p.lead {
    font-size: 20px;
    line-height: 1.5;
    color: var(--slate);
    max-width: 820px;
    margin-bottom: 2rem;
}
.section strong {
    font-weight: 600;
}
.section .muted {
    color: var(--slate);
}
.section .small {
    font-size: 14px;
    line-height: 1.5;
}
sup.fn {
    font-size: 62%;
    line-height: 0;
    vertical-align: super;
    color: var(--slate);
    font-weight: 500;
    margin-left: 0.2em;
}

/* ---------- Kennzahlen ---------- */
.facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 2rem 0 3rem;
}
.fact {
    border-top: 3px solid #000;
    padding-top: 1rem;
}
.fact b {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.4rem;
}
.fact span {
    font-size: 15px;
    color: var(--slate);
    line-height: 1.5;
}

/* ---------- Bilder ---------- */
.shot {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--hair);
}
figure {
    margin: 0;
}
figcaption {
    font-size: 14px;
    color: var(--slate);
    margin-top: 0.6rem;
    line-height: 1.5;
}

/* ---------- Beschriftetes Bedienfenster ---------- */
.annot {
    position: relative;
}
.annot .pin {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .85);
    transform: translate(-50%, -50%);
}
.legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2.5rem;
    margin-top: 1.5rem;
}
.legend div {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 15px;
    line-height: 1.5;
}
.legend .n {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

/* ---------- Drei Schritte ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 1rem 0 2.5rem;
}
.step .frame {
    height: 240px;
    overflow: hidden;
    border: 1px solid var(--hair);
    background: var(--mist);
    display: flex;
    align-items: center;
    justify-content: center;
}
.step .frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}
.step .frame.center img {
    object-position: center;
}
.step .frame.panel {
    background: #617058;
    border-color: #617058;
}
.step .frame.panel img {
    object-fit: contain;
}
.step h3 {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}
.step h3 .n {
    color: var(--brand);
    font-weight: 700;
}
.step p {
    font-size: 15px;
}
.cols {
    column-count: 2;
    column-gap: 3rem;
}
.cols p {
    break-inside: avoid;
}

/* ---------- Symbolerklärung ---------- */
.symbols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem 1.5rem;
    background: var(--mist);
    padding: 1.5rem;
    margin-top: 0.5rem;
}
.sym {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.sym img {
    flex: none;
    height: 36px;
    width: auto;
}
.sym .icon {
    flex: none;
    position: relative;
    height: 36px;
}
.sym .icon img.over {
    position: absolute;
    left: 0;
    top: 0;
}
.sym span {
    font-size: 14px;
    line-height: 1.4;
}
.sym span b {
    display: block;
    font-weight: 600;
}

/* ---------- Zwei Spalten: Text und Bild ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
/* Die erste Spalte bekommt drei Fünftel: beim Notzustand der Text,
   bei den Layouts das Bild. */
.split.text-first,
.split.figure-first {
    grid-template-columns: 3fr 2fr;
}
.split + h2 {
    margin-top: 4rem;
}

/* ---------- Kasten ---------- */
.note {
    border-left: 5px solid var(--brand);
    background: var(--mist);
    padding: 1rem 1.25rem;
    font-size: 15px;
    line-height: 1.5;
    margin: 1.5rem 0 0;
}
.section.alt .note {
    background: #fff;
}
.note b {
    font-weight: 600;
}

/* ---------- Vier Bereiche, zwei Rollen ---------- */
.areas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 3rem;
    margin: 2.5rem 0 2rem;
}
.area {
    border-top: 1px solid var(--hair);
    padding-top: 0.75rem;
}
.area p {
    font-size: 15px;
    margin: 0;
}
.roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.role {
    border: 1px solid var(--hair);
    background: #fff;
    padding: 1rem 1.25rem;
}
.role ul {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
    font-size: 15px;
    line-height: 1.5;
}

/* ---------- Tabellen ---------- */
.table-wrap {
    overflow-x: auto;
}
table.spec {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
}
table.spec th,
table.spec td {
    text-align: left;
    vertical-align: top;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--hair);
}
table.spec th {
    width: 200px;
    font-weight: 600;
    white-space: nowrap;
}
table.spec tr:first-child th,
table.spec tr:first-child td {
    border-top: 3px solid #000;
}
table.prices th {
    font-family: Consolas, "Courier New", monospace;
    font-weight: 400;
    width: 170px;
}
table.prices td b {
    font-weight: 600;
}
table.prices td.price {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    width: 120px;
}

/* ---------- Abschluss: Kontakt und Kleingedrucktes ---------- */
.closing {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: end;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--hair);
}
.closing .contact b {
    display: block;
    font-size: 18px;
    font-weight: 700;
}
.closing .buttons {
    margin-left: -0.5rem;
    flex-wrap: wrap;
}
.closing button {
    white-space: nowrap;
}
.closing .solid-button {
    border: 1px solid var(--brand);
    background-color: var(--brand);
    color: #fcfdff;
    font-size: 16px;
    font-weight: 700;
}
.closing .solid-button:hover {
    border: 1px solid #000;
    background-color: rgba(234, 232, 242, 0.2);
    color: #000;
}
.closing .outline-button {
    border: 1px solid #000;
    background-color: transparent;
    color: #000;
    font-size: 16px;
    font-weight: 700;
}
.closing .outline-button:hover {
    border: 1px solid var(--brand);
    background-color: var(--brand);
    color: #fcfdff;
}
.fine p {
    font-size: 12px;
    line-height: 1.5;
    color: var(--slate);
    margin: 0 0 0.5rem;
}

/* ---------- Schmale Bildschirme ---------- */
@media screen and (max-width: 999px) {
    .hero {
        padding: 0 30px;
    }
    .section {
        padding: 60px 30px 0;
    }
    .section.alt {
        margin-top: 60px;
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .section h2 {
        font-size: 28px;
    }
    .section p.lead {
        font-size: 18px;
    }
    .facts,
    .steps,
    .split,
    .split.text-first,
    .split.figure-first,
    .areas,
    .roles,
    .closing {
        grid-template-columns: 1fr;
    }
    .split figure {
        order: 2;
    }
    .cols {
        column-count: 1;
    }
    .symbols {
        grid-template-columns: 1fr 1fr;
    }
    .legend {
        grid-template-columns: 1fr;
    }
    .header p.claim {
        font-size: 16px;
        line-height: 26px;
    }
}

@media screen and (max-width: 499px) {
    .hero {
        padding: 0 15px;
    }
    .section {
        padding: 40px 20px 0;
    }
    .section.alt {
        padding-left: 20px;
        padding-right: 20px;
    }
    .section h2 {
        font-size: 24px;
    }
    .symbols {
        grid-template-columns: 1fr;
    }
    .annot .pin {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }
    nav .home {
        font-size: 16px;
    }
    .closing .buttons {
        flex-direction: column;
        align-items: flex-start;
    }
}