/* === Custom Fonts === */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('/fonts/Raleway-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('/fonts/Raleway-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}



/* ===== Base ===== */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #ffff;
    background: #fff;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    max-width: 220mm;
}




.block {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    gap: 5px;
    margin-top: 45px;
    margin-bottom: 10px;
    padding-bottom: 20px;
}

.charts-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    height: 250px;
    width: 100%;
}

    .charts-row img {
        max-width: 100%;
        height: auto;
        page-break-inside: avoid;
    }

        .charts-row img #chart9 {
            page-break-inside: avoid;

        }

#betrag-values {
    text-align: end;
}

.container {
    display: flex;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 7px;
    margin-top: 10px;
    width: 100%;
    max-width: 100%;
}

#line-chart {
    margin-top: 100px;
}

#chart9 {
    margin-top: 50px;
}


.card {
    background: #ffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 3px;
    max-width: 100%;
    page-break-inside: avoid;
    flex: 1;
    width: 100%;
}

    .card .title {
        background: #0c5cc0;
        color: #ffff;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 10px;
        padding: 5px;
    }


.table-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px; /* gleichmäßige Abstände überall */
    width: 100%;
    text-align: center;
    background: #fff;
    padding: 10px 0; /* kompaktere vertikale Abstände */
    box-sizing: border-box;
}

/* Titel über ganze Breite */
.grid-title {
    grid-column: 1 / 5;
    background-color: #0c5cc0;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 14px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Monat / Jahr Zeile */
.grid-header-left {
    grid-column: 1 / 3;
}

.grid-header-right {
    grid-column: 3 / 5;
}

.grid-header {
    background-color: #0c5cc0;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wertezeile */
.value-box {
    background-color: #0c5cc0;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    padding: 12px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-2px);    
}

/* Einheitliche Höhe & vertikale Balance */
.grid-title,
.grid-header,
.value-box {
    min-height: 40px;
}

.table-bordered {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border: 1px solid #e0e0e0;
}

    .table-bordered th {
        background-color: #3899dd;
        color: #ffffff;
        padding: 8px 4px;
        white-space: nowrap;
        font-weight: bold;
    }


    .table-bordered thead tr:first-child th:first-child {
        text-align: left;
    }

    .table-bordered thead tr:first-child th:not(:first-child) {
        text-align: center;
    }


    .table-bordered thead tr:nth-child(2) th {
        text-align: right;
    }

    .table-bordered td {
        text-align: left;
        padding: 8px 3px;
        color: #111827;
        word-break: break-all;
    }

        .table-bordered td:nth-child(n+2) {
            text-align: right;
        }


    .table-bordered tr:nth-child(odd) td {
        background-color: #ffffff;
        font-weight: normal;
    }

    .table-bordered tr:nth-child(even) td {
        background-color: #ececec;
    }

    .table-bordered tr:hover td {
        background-color: #e8f0fa;
    }

    .table-bordered tr:last-child td {
        border-bottom: none;
        font-weight: bold;
    }

#line-chart tr:last-child td {
    font-weight: normal;
}



@media print {

    @page {
        size: A4;
        margin: 2cm 1cm;
        font-family: 'Inter', 'Segoe UI', sans-serif;


        @top-right {
            content: "                                        ";
            margin-top: 20px;
            white-space: pre;
            background: url(../logo/FaircheckLogo.png) no-repeat 0 0;
            background-size: 100%;
        }

        @bottom-left {
            content: "Ersparnis = Forderung - ermittelte Schadenhöhe - Aufwand faircheck";
            white-space: pre;
            background-size: 100%;
        }

        @top-left {
            content: "GESAMTKENNZAHLEN AUFTRÄGE";
            color: #000;
            white-space: pre;
            font-weight: bold;
        }

        @bottom-right {
            content: counter(page);
        }
    }

    body {
        display: block;
        margin: 0;
        box-sizing: border-box;
    }

    .block {
        width: 100%;
        max-width: 100%;
    }

    @media print {
        .container {
            width: 100%;
            max-width: 100%;
            margin: 0;
        }
    }


    .page-break {
        display: block;
        page-break-before: always;
        break-before: page;
    }
}