/* =========================================================
   4PIPES – Layout & Design
   ========================================================= */
   @charset "UTF-8";

   @font-face {
       font-family: "Inter"; /* regular font */
       src: url("Schrift/Inter_18pt-Regular.ttf") format('truetype');
       font-weight: normal; font-style: normal; }
   @font-face {
       font-family: "Inter"; /* bold font */
       src: url("Schrift/Inter_18pt-Bold.ttf") format('truetype');
       font-weight: 600; font-style: normal; }
     
   @font-face {
       font-family: "Inter"; /* medium font */
       src: url("Schrift/Inter_18pt-Medium.ttf") format('truetype');
       font-weight: 500; font-style: normal; }
   
   @font-face {
       font-family: "Inter"; /* medium font */
       src: url("Schrift/Inter_18pt-Italic.ttf") format('truetype');
       font-weight: normal; font-style: italic; }
   
   @font-face {
       font-family: "Inter Light"; /* medium font */
       src: url("Schrift/Inter_18pt-Light.ttf") format('truetype');
       font-weight: normal; font-style: light; }

/* =========================================================
   CSS VARIABLES
   ========================================================= */

:root {
    --primary: #279b37;
    --primary-dark: #0d6b2c;
    --accent: #8bc923;

    --bg: #f4f7f4;
    --card: #fff;

    --text: #122033;
    --muted: #667085;

    --border: #d7e4d6;

    --danger: #b91c1c;
    --warning: #92400e;

    --shadow: 0 8px 20px rgba(20, 107, 46, 0.07);
}


/* =========================================================
   GLOBAL
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;

    font-family: 'Inter';

    background: var(--bg);
    color: var(--text);

    line-height: 1.45;
}


/* =========================================================
   GENERAL CONTENT
   ========================================================= */

main {
    max-width: 1180px;

    margin: 24px auto;
    margin-top:0px;
}


/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */

.card {
    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 18px;

    padding: 22px;

    margin-bottom: 18px;

    box-shadow: var(--shadow);
    margin-top:60px;
}

.searchInputField {border-radius:0px; margin-top:0px;}
.searchForm button {padding:0px;}


/* ---------------------------------------------------------
   Card Titles
   --------------------------------------------------------- */

.card-title {
    display: flex;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 16px;
}

.card-title h1,
.card-title h2 {
    margin: 0;

    color: var(--primary-dark);
}


/* ---------------------------------------------------------
   Muted Text
   --------------------------------------------------------- */

.muted {
    color: var(--muted);
}


/* =========================================================
   INPUT AREA
   ========================================================= */

.input-hint {
    margin: -6px 0 14px 0;

    color: var(--primary-dark);

    font-size: 0.9rem;
    font-weight: 700;

    background: #f2faf0;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 8px 10px;
}


/* ---------------------------------------------------------
   Grid
   --------------------------------------------------------- */

.grid,
.technical-grid {
    display: grid;

    gap: 14px;
}

.grid.two {
    grid-template-columns: repeat(
        2,
        minmax(0, 1fr)
    );
}

.technical-grid {
    grid-template-columns: repeat(
        3,
        minmax(0, 1fr)
    );

    align-items: end;
}


/* ---------------------------------------------------------
   Hidden
   --------------------------------------------------------- */

.hidden {
    display: none !important;
}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

label {
    font-weight: 700;

    font-size: 0.92rem;
}

input,
textarea,
select {
    width: 100%;

    margin-top: 6px;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 11px 12px;

    font: inherit;

    background: white;
}

textarea {
    resize: none;

    min-height: 92px;
    max-height: 92px;
}


/* ---------------------------------------------------------
   Checkbox
   --------------------------------------------------------- */

.checkbox-label {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 6px;

    min-height: 44px;
}

.checkbox-label input {
    width: auto;

    margin: 0;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.actions {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 18px;
}

button {
    border: 0;

    border-radius: 999px;

    padding: 11px 18px;

    font-weight: 800;

    cursor: pointer;

    background: #e6efe6;

    color: var(--primary-dark);
}

button.primary {
    background: var(--primary-dark);

    color: white;
}

button:disabled {
    opacity: 0.45;
}


/* =========================================================
   ALERTS
   ========================================================= */

.alert {
    border-radius: 14px;

    padding: 14px 16px;

    margin-bottom: 16px;
}

.alert strong {
    display: block;

    margin-bottom: 4px;
}


/* ---------------------------------------------------------
   Success
   --------------------------------------------------------- */

.alert-ok {
    background: #edf8ed;

    border: 1px solid #bfe8bf;

    color: #14532d;
}


/* ---------------------------------------------------------
   Error
   --------------------------------------------------------- */

.alert-error {
    background: #fef2f2;

    border: 1px solid #fecaca;

    color: var(--danger);
}


/* ---------------------------------------------------------
   Warning
   --------------------------------------------------------- */

.alert-warning {
    background: #fffbeb;

    border: 1px solid #fde68a;

    color: var(--warning);
}


/* =========================================================
   RESULT AREA
   ========================================================= */

.result-grid {
    display: grid;

    grid-template-columns: repeat(
        5,
        minmax(120px, 1fr)
    );

    gap: 10px;

    margin: 8px 0 24px;
}


/* ---------------------------------------------------------
   Metrics
   --------------------------------------------------------- */

.metric {
    background: #f8fbf8;

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 14px;
}

.metric span {
    display: block;

    color: var(--muted);

    font-size: 0.82rem;
}

.metric strong {
    font-size: 1.35rem;

    color: var(--primary-dark);
}


/* =========================================================
   STEP HEIGHTS
   ========================================================= */

.steghoehen {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 8px 0 28px;
}

.chip-button {
    border: 1px solid var(--border);

    border-radius: 999px;

    padding: 9px 14px;

    background: #f7faf7;

    color: #111827;

    font-weight: 800;
}

.chip-button.active {
    background: #e6f7df;

    border-color: var(--accent);

    color: var(--primary-dark);
}


/* =========================================================
   DETAILS PANEL
   ========================================================= */

.details-panel {
    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 12px 16px;

    background: #fbfdfb;

    margin: 18px 0;
}

.details-panel summary {
    cursor: pointer;

    font-weight: 800;

    color: var(--primary-dark);
}


/* ---------------------------------------------------------
   Detail Grid
   --------------------------------------------------------- */

.detail-grid {
    display: grid;

    grid-template-columns: repeat(
        4,
        minmax(0, 1fr)
    );

    gap: 10px;

    margin-top: 14px;
}

.detail-grid div {
    border: 1px solid var(--border);

    border-radius: 12px;

    background: white;

    padding: 12px;
}

.detail-grid span {
    display: block;

    color: var(--muted);

    font-size: 0.82rem;
}


/* =========================================================
   TABLES
   ========================================================= */

.tables-row {
    display: grid;

    grid-template-columns:
        minmax(320px, 1fr)
        minmax(320px, 1fr);

    gap: 28px;
}


/* ---------------------------------------------------------
   Ring Parts
   --------------------------------------------------------- */

.je-ring-parts {
    display: flex;

    flex-wrap: wrap;

    gap: 24px;

    margin: 0 0 24px;
}


/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */

table {
    width: 100%;

    border-collapse: collapse;

    margin-top: 8px;

    background: white;
}

th,
td {
    border: 1px solid var(--border);

    padding: 10px;

    text-align: left;
}

th {
    background: #eef8ee;

    color: var(--primary-dark);
}


/* =========================================================
   PRINT-ONLY ELEMENTS
   ========================================================= */

.print-customer-project,
.print-case-number {
    display: none;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    background: #eef4ee;

    border-top: 1px solid var(--border);

    margin-top: 28px;
}

.footer-inner {
    max-width: 1180px;

    margin: 0 auto;

    padding: 22px 18px;

    display: flex;

    justify-content: space-between;

    gap: 18px;

    flex-wrap: wrap;

    color: #345;
}

.footer-inner a {
    color: var(--primary-dark);

    text-decoration: none;

    font-weight: 700;
}

.footer-inner nav {
    display: flex;

    gap: 18px;
}


/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 900px) {

    .grid.two,
    .technical-grid,
    .result-grid,
    .detail-grid,
    .tables-row {
        grid-template-columns: 1fr;
    }

    .logo {
        width: 175px;
    }

    .brandbar {
        height: 125px;
    }
}


/* =========================================================
   PRINT STYLES
   ========================================================= */

@media print {

    /* -----------------------------------------------------
       Hide screen-only elements
       ----------------------------------------------------- */

    .topbar,
    .social-links,
    .site-footer,
    .actions,
    .hero-card,
    .input-card,
    .project-card,
    .details-panel {
        display: none !important;
    }


    /* -----------------------------------------------------
       General print layout
       ----------------------------------------------------- */

    body {
        background: #fff;

        color: #111;

        font-size: 11pt;

        -webkit-print-color-adjust: exact;

        print-color-adjust: exact;
    }


    /* -----------------------------------------------------
       Header
       ----------------------------------------------------- */

    .site-header {
        box-shadow: none;

        border-bottom: 3px solid #0d6b2c;

        margin-bottom: 7mm;
    }

    .brandbar {
        height: auto;

        max-width: none;

        padding: 0 0 7mm 0;

        justify-content: flex-start;
    }

    .logo {
        width: 150px;
    }


    /* -----------------------------------------------------
       Cards
       ----------------------------------------------------- */

    .card {
        box-shadow: none;

        border: 0;

        border-radius: 0;

        margin: 0;

        padding: 0;
    }


    /* -----------------------------------------------------
       Case Number
       ----------------------------------------------------- */

    .print-case-number {
        display: block;

        border: 1px solid #b7d7b6;

        background: #f3faf3;

        color: #0d4f1f;

        padding: 8px 10px;

        margin: 0 0 9mm 0;

        font-weight: 700;

        font-size: 12pt;
    }


    /* -----------------------------------------------------
       Customer / Project
       ----------------------------------------------------- */

    .print-customer-project {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 9mm;

        margin: 0 0 8mm 0;
    }

    .print-block {
        border: 1px solid #b7c8b7;

        padding: 7px 8px;

        background: #fff;
    }


    /* -----------------------------------------------------
       Alerts
       ----------------------------------------------------- */

    .alert {
        border: 1px solid #b7d7b6;

        background: #f3faf3 !important;

        color: #0d4f1f;

        padding: 8px 10px;

        margin-bottom: 10px;
    }


    /* -----------------------------------------------------
       Result Metrics
       ----------------------------------------------------- */

    .result-grid {
        grid-template-columns: repeat(5, 1fr);

        gap: 6px;

        margin: 8px 0 12px;
    }

    .metric {
        padding: 7px;

        border: 1px solid #cfd8cf;

        background: #fff;
    }

    .metric strong {
        font-size: 11pt;
    }

    .metric span {
        font-size: 8.5pt;
    }


    /* -----------------------------------------------------
       Step Height Buttons
       ----------------------------------------------------- */

    .steghoehen {
        display: flex !important;

        gap: 5px;

        margin: 4px 0 9px;
    }

    .chip-button {
        border: 1px solid #9fb79f !important;

        background: #fff !important;

        color: #111 !important;

        padding: 4px 8px;

        border-radius: 10px;

        font-size: 9pt;
    }

    .chip-button.active {
        border: 1.5px solid #0d6b2c !important;

        background: #e8f3e7 !important;

        color: #0d4f1f !important;
    }


    /* -----------------------------------------------------
       Tables
       ----------------------------------------------------- */

    .tables-row {
        grid-template-columns: 1fr 1fr;

        gap: 9mm;

        page-break-inside: avoid;
    }

    h3 {
        font-size: 12pt;

        margin: 10px 0 5px;

        color: #0d6b2c;
    }

    table {
        width: 100% !important;

        font-size: 9.5pt;

        border-collapse: collapse !important;

        border: 1.2pt solid #4b5563 !important;

        background: #fff !important;
    }

    th,
    td {
        border: 1pt solid #4b5563 !important;

        padding: 5px 6px !important;
    }

    th {
        background: #e8f3e7 !important;

        color: #0d4f1f !important;
    }


    /* -----------------------------------------------------
       Page Setup
       ----------------------------------------------------- */

    @page {
        size: A4;

        margin: 14mm;
    }
}