/* elaConnect Client - Produktseite.
   Ergänzt ../css/global.css (Navigation, Kopfbereich, Fußzeile) um die
   Inhaltsabschnitte dieser Seite. Die Fensterabbildungen sind keine
   Bildschirmfotos, sondern in HTML nachgebildete Fenster der Anwendung
   (Abschnitt "Nachgebildete Fenster" unten). */

:root {
    --brand: #F10358;
    --ink: #111318;
    --slate: #666572;
    --hair: #d7dbe2;
    --mist: #f1f3f6;
    /* Zustandsfarben der Anwendung (VCL: clLime, clRed, clYellow, clSkyBlue) */
    --st-ok: #3fd84a;
    --st-new: #e0212b;
    --st-ack: #f7d31c;
    --st-offline: #8ccff2;
    --st-link: #f7d31c;
}

/* ---------- 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 span.product {
    font-weight: 400;
    color: #fff; /* Produktname weiß, das Rot bleibt der Wortmarke vorbehalten */
}
.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;
}

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

/* ---------- 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;
}

/* ---------- 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;
}

/* ---------- Abbildungen ---------- */
figure {
    margin: 0;
}
figcaption {
    font-size: 14px;
    color: var(--slate);
    margin-top: 0.6rem;
    line-height: 1.5;
}

/* ---------- Beschriftetes Fenster ----------
   Die Markierungen sitzen im Element, das sie erklären (.pinned), am rechten
   oberen Rand. So bleiben sie bei jeder Fensterbreite an ihrem Platz. */
.annot .pinned {
    position: relative;
}
/* Platz für die Markierung, damit der Text lesbar bleibt; die Selektoren
   müssen die Fensterregeln (.win .statusbar span, .win .tab, .win .btn) schlagen */
.annot .win .menu .pinned,
.annot .win .statusbar .pinned,
.annot .win .tab.pinned,
.annot .win .btn.pinned {
    padding-right: 30px;
}
.annot .pin {
    position: absolute;
    right: 3px;
    top: -9px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    font-family: "Montserrat", sans-serif;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
    z-index: 1;
}
/* In der Reiterleiste (overflow hidden) bleibt die Markierung in der Zeile */
.annot .tab .pin {
    top: 50%;
    transform: translateY(-50%);
}
.annot .box.pinned {
    padding-right: 8px;
}
.annot .box .pin {
    right: 8px;
    top: 6px;
}
.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;
}

/* ---------- Zustandslegende ---------- */
.states {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem 1.5rem;
    background: #fff;
    padding: 1.5rem;
    margin-top: 0.5rem;
}
.state {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.state .sw {
    flex: none;
    width: 36px;
    height: 24px;
    border: 1px solid rgba(0, 0, 0, .25);
}
.state span {
    font-size: 14px;
    line-height: 1.4;
}
.state span b {
    display: block;
    font-weight: 600;
}

.cols {
    column-count: 2;
    column-gap: 3rem;
    margin-top: 2rem;
}
.cols p {
    break-inside: avoid;
}

/* ---------- Zwei Spalten: Text und Bild ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.split.text-first {
    grid-template-columns: 2fr 3fr;
}
.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 ---------- */
.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;
}

/* ---------- Download ---------- */
.download {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.download .version {
    border: 1px solid var(--hair);
    background: #fff;
    padding: 1.25rem 1.5rem;
}
.download .version b {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate);
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.download .version .no {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}
.download .version p {
    font-size: 15px;
    margin: 0.5rem 0 1rem;
}
.download .version .buttons {
    margin-left: -0.5rem;
    flex-wrap: wrap;
}
.download .solid-button {
    border: 1px solid var(--brand);
    background-color: var(--brand);
    color: #fcfdff;
    font-size: 16px;
    font-weight: 700;
}
.download .solid-button:hover {
    border: 1px solid #000;
    background-color: rgba(234, 232, 242, 0.2);
    color: #000;
}
.download .solid-button[disabled] {
    opacity: .5;
    cursor: default;
}
.download .history {
    font-size: 14px;
    line-height: 1.5;
    color: var(--slate);
    margin: 0;
    padding-left: 1.25rem;
}
.download .history b {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- 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 {
    width: 170px;
    white-space: normal;
}
table.prices td b {
    font-weight: 600;
}
table.prices td.price {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    width: 130px;
}
table.prices td.price small {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: var(--slate);
}
.download .small a {
    color: var(--brand);
    font-weight: 600;
}

/* ---------- 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 .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;
}

/* =====================================================================
   Nachgebildete Fenster der Anwendung
   Gleiche Struktur wie in brochure.html, in Bildschirmeinheiten.
   ===================================================================== */
.win {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.3;
    color: #1a1c22;
    background: #f6f7f9;
    border: 1px solid #a9aeb8;
    display: block;
    width: 100%;
    overflow: hidden;
}
.win * {
    font-family: inherit;
}
.win .tb {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 6px 10px;
    border-bottom: 1px solid var(--hair);
    font-weight: 600;
}
.win .tb .dots {
    margin-left: auto;
    display: flex;
    gap: 9px;
    color: #7c818b;
    font-size: 13px;
    letter-spacing: .1em;
}
.win .menu {
    display: flex;
    gap: 16px;
    padding: 4px 10px;
    background: #eef0f4;
    border-bottom: 1px solid var(--hair);
    color: #2a2e37;
}
.win .tabs {
    display: flex;
    gap: 0;
    padding: 6px 10px 0;
    background: #eef0f4;
    border-bottom: 1px solid #c6cbd4;
    overflow: hidden;
    white-space: nowrap;
}
.win .tab {
    padding: 4px 10px;
    border: 1px solid transparent;
    border-bottom: none;
    color: #3a3f4a;
}
.win .tab.on {
    background: #fff;
    border-color: #c6cbd4;
    color: #111;
    font-weight: 600;
    margin-bottom: -1px;
}
.win .body {
    padding: 10px;
}
.win .btn {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #9aa0ab;
    background: #fff;
    border-radius: 2px;
    white-space: nowrap;
}
.win .chk {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.win .chk i {
    width: 11px;
    height: 11px;
    border: 1px solid #6a707c;
    background: #fff;
    display: inline-block;
}
.win .chk i.on {
    background: #2f6fd6;
    border-color: #2f6fd6;
}
.win .grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.win .box {
    border: 1px solid #c6cbd4;
    background: #fff;
    padding: 8px;
}
.win .box b {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}
.win .box div + div {
    margin-top: 2px;
}
.win .box .sub {
    color: #3a3f4a;
}
.win .box .act {
    margin-top: 6px;
}

/* Statusleiste des Systemfensters */
.win .statusbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 10px;
    background: #eef0f4;
    border-bottom: 1px solid #c6cbd4;
}
.win .statusbar span {
    padding: 3px 12px;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, .12);
}
.st-ok { background: var(--st-ok); color: #111; }
.st-new { background: var(--st-new); color: #fff; }
.st-ack { background: var(--st-ack); color: #111; }
.st-none { background: #e2e5ea; color: #111; }

/* Kacheln der Systemübersicht */
.tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.tile {
    height: 64px;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #111;
}
.tile b {
    font-weight: 600;
    font-size: 14px;
}
.tile small {
    font-size: 12px;
    opacity: .85;
}
.tile.ok { background: var(--st-ok); }
.tile.fault { background: var(--st-new); color: #fff; }
.tile.offline { background: var(--st-offline); }
.tile.link { background: var(--st-link); }
.tile.wait { background: repeating-linear-gradient(45deg, #f7d31c 0 8px, #e6e8ec 8px 16px); }
.tile.new {
    background: #fff;
    border-style: dashed;
    color: #555b68;
    justify-content: center;
    text-align: center;
}
.win .legendrow {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
    color: #3a3f4a;
    align-items: center;
}
.win .legendrow i {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 1px solid rgba(0, 0, 0, .25);
    vertical-align: -2px;
    margin-right: 4px;
}
.win .legendrow .push {
    margin-left: auto;
}
.win .ticker {
    margin-top: 10px;
}

/* Fehlerliste */
.win .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    margin-bottom: 8px;
}
.win .badge {
    padding: 3px 12px;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, .12);
}
.win .tree {
    background: #fff;
    border: 1px solid #c6cbd4;
}
.win .row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-bottom: 1px solid #edf0f4;
    white-space: nowrap;
    overflow: hidden;
}
.win .row .tw {
    flex: none;
    width: 9px;
    color: #6a707c;
    font-size: 9px;
}
.win .row.l1 { padding-left: 24px; }
.win .row.l2 { padding-left: 40px; }
.win .row.r-new { background: var(--st-new); color: #fff; }
.win .row.r-ack { background: var(--st-ack); color: #111; }
.win .row.r-res { background: var(--st-ok); color: #111; }
.win .row.r-reset { background: #fff; color: #111; }
.win .row .ts {
    margin-left: auto;
    opacity: .8;
    font-size: 12px;
    padding-left: 12px;
}

/* Logbuch-Tabelle */
.win table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.win th,
.win td {
    text-align: left;
    padding: 3px 7px;
    border-bottom: 1px solid #edf0f4;
    white-space: nowrap;
}
.win th {
    background: #eef0f4;
    font-weight: 600;
    border-bottom: 1px solid #c6cbd4;
}
.win td.new {
    color: #b3141d;
    font-weight: 600;
}
.win td.ev {
    white-space: normal;
}
.win .filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    color: #3a3f4a;
}
.win .filter .push {
    margin-left: auto;
}

/* ---------- 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,
    .split,
    .split.text-first,
    .areas,
    .download,
    .closing {
        grid-template-columns: 1fr;
    }
    .split figure {
        order: 2;
    }
    .cols {
        column-count: 1;
    }
    .states {
        grid-template-columns: 1fr 1fr;
    }
    .legend {
        grid-template-columns: 1fr;
    }
    .header p.claim {
        font-size: 16px;
        line-height: 26px;
    }
    .win {
        font-size: 12px;
    }
    .tiles {
        grid-template-columns: repeat(2, 1fr);
    }
    .win .grid2 {
        grid-template-columns: 1fr;
    }
    .win .row .ts {
        display: none;
    }
    .win .tabs {
        flex-wrap: wrap;
    }
}

@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;
    }
    .states {
        grid-template-columns: 1fr;
    }
    .annot .pin {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }
    nav .home {
        font-size: 16px;
    }
    .closing .buttons,
    .download .version .buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    .hero .tiles,
    .tiles {
        grid-template-columns: 1fr;
    }
    .hero .tile,
    .tile {
        height: auto;
        gap: 2px;
    }
}