/* =======================================
   LINEA Vereinsportal
   Auslagenerstattung
======================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    background:#eef2f5;

    color:#2d3436;

    line-height:1.5;
}


/* =======================================
   HEADER
======================================= */

header{

    background:#2e7d32;

    color:white;

    padding:25px 50px;

    box-shadow:
    0 4px 12px rgba(0,0,0,.15);
}

.header-container{

    max-width:1300px;

    margin:auto;

    display:flex;

    align-items:center;

    gap:30px;
}

.logo-box{

    width:190px;

    min-width:190px;

    height:115px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:white;

    border-radius:16px;

    padding:12px;
}

.logo-box img{

    width:100%;

    height:100%;

    object-fit:contain;
}

#clubLogo{

    display:block;

    width:165px;

    height:95px;

    object-fit:contain;
}

#logoPlaceholder{

    display:none;
}

.header-text h1{

    font-size:32px;

    margin-bottom:3px;
}

.header-text h2{

    font-weight:400;

    margin-bottom:7px;
}

.header-text p{

    opacity:.9;
}


/* =======================================
   CONTAINER
======================================= */

.container{

    max-width:1300px;

    margin:35px auto;

    padding:0 20px;
}


/* =======================================
   KARTEN
======================================= */

.card{

    background:white;

    border-radius:18px;

    padding:30px;

    margin-bottom:25px;

    box-shadow:
    0 8px 24px rgba(0,0,0,.08);
}

.card h2{

    color:#2e7d32;

    margin-bottom:20px;

    font-size:22px;
}


/* =======================================
   GRID
======================================= */

.grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:20px;
}

.field{

    display:flex;

    flex-direction:column;
}

.full{

    grid-column:1/-1;
}

label{

    font-weight:600;

    margin-bottom:7px;
}


/* =======================================
   INPUTS
======================================= */

input,
textarea,
select{

    width:100%;

    padding:11px 13px;

    border:
    1px solid #cfd8dc;

    border-radius:10px;

    font-size:15px;

    transition:.25s;

    background:white;
}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:#2e7d32;

    box-shadow:
    0 0 0 4px rgba(46,125,50,.12);
}


/* =======================================
   TABELLE
======================================= */

.table-wrapper{

    width:100%;

    overflow-x:auto;
}

table{

    width:100%;

    min-width:900px;

    border-collapse:collapse;

    margin-top:18px;
}

thead{

    background:#2e7d32;

    color:white;
}

th{

    padding:13px 10px;

    text-align:left;

    font-size:14px;
}

td{

    padding:9px;

    border-bottom:
    1px solid #eceff1;
}

tbody tr:nth-child(even){

    background:#fafafa;
}

tbody tr:hover{

    background:#f4fbf5;
}

td input,
td select{

    font-size:14px;

    padding:8px;
}

.belegNumber{

    font-weight:600;

    color:#2e7d32;

    text-align:center;
}

.amountInput{

    text-align:right;
}

.totalLabel{

    text-align:right;

    font-weight:bold;

    color:#2e7d32;

    padding:16px;
}

.grandTotal{

    text-align:right;

    font-size:18px;

    font-weight:bold;

    color:#2e7d32;

    white-space:nowrap;
}


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

button{

    cursor:pointer;

    border:none;

    transition:.25s;

    font-size:15px;
}

.primaryButton{

    margin-top:20px;

    background:#2e7d32;

    color:white;

    padding:13px 21px;

    border-radius:10px;

    font-weight:600;
}

.primaryButton:hover{

    background:#256428;

    transform:translateY(-2px);
}

.secondaryButton{

    background:#eceff1;

    color:#2d3436;

    padding:11px 17px;

    border-radius:10px;

    font-weight:600;
}

.secondaryButton:hover{

    background:#d9e1e5;
}

.deleteBtn{

    background:#eceff1;

    color:#555;

    padding:8px 10px;

    border-radius:8px;
}

.deleteBtn:hover{

    background:#d9e1e5;
}

.pdfButton{

    width:100%;

    margin-top:5px;

    background:#2e7d32;

    color:white;

    font-size:19px;

    font-weight:bold;

    padding:17px;

    border-radius:12px;
}

.pdfButton:hover{

    background:#256428;

    transform:translateY(-2px);
}


/* =======================================
   INFORMATION
======================================= */

.infoBox{

    background:#f8f9fa;

    border-left:
    5px solid #2e7d32;

    padding:16px;

    border-radius:8px;

    line-height:1.6;

    margin-bottom:5px;
}


/* =======================================
   BESTÄTIGUNG
======================================= */

.confirmationText{

    line-height:1.6;
}

.confirmationText p{

    margin-bottom:15px;
}

.checkboxRow{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-top:18px;

    cursor:pointer;
}

.checkboxRow input{

    width:20px;

    height:20px;

    margin-top:2px;
}


/* =======================================
   UNTERSCHRIFT
======================================= */

.signatureGrid{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:25px;

    margin-bottom:20px;
}

.signatureContainer{

    margin-top:5px;
}

#signaturePad{

    width:100%;

    height:170px;

    border:
    2px dashed #bdbdbd;

    border-radius:12px;

    background:white;

    display:block;

    touch-action:none;
}

.signatureButtons{

    margin-top:12px;
}


/* =======================================
   STAMMDATENSPEICHERUNG
======================================= */

.saveDataBox{

    margin-top:24px;

    padding:20px;

    background:#f7f9fb;

    border:
    1px solid #e1e6eb;

    border-radius:14px;
}

.saveDataInfo{

    margin:
    10px 0
    18px
    30px;

    font-size:.9rem;

    line-height:1.5;

    color:#68737d;
}

.saveDataButtons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;
}


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

footer{

    text-align:center;

    color:#888;

    padding:30px;
}


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

@media(max-width:900px){

    .grid{

        grid-template-columns:1fr;
    }

    .signatureGrid{

        grid-template-columns:1fr;
    }

    .header-container{

        flex-direction:column;

        text-align:center;
    }

    .card{

        padding:20px;
    }
}