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

*{
    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:35px 50px;

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

}

.header-container{

    max-width:1300px;

    margin:auto;

    display:flex;

    align-items:center;

    gap:35px;

}

.logo-box {
    width: 220px;
    min-width: 220px;
    height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: white;
    border-radius: 18px;

    padding: 15px;
    box-sizing: border-box;
}

.logo-box img{

    width:100%;

    height:100%;

    object-fit:contain;

}

#clubLogo {
    display: block;

    width: 190px;
    height: 120px;

    object-fit: contain;
}

#logoPlaceholder{

    display:none;

}

.header-text h1{

    font-size:34px;

    margin-bottom:6px;

}

.header-text h2{

    font-weight:400;

    margin-bottom:12px;

}

.header-text p{

    opacity:.9;

}

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

.container{

    max-width:1300px;

    margin:40px auto;

    padding:0 20px;

}

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

.card{

    background:white;

    border-radius:18px;

    padding:30px;

    margin-bottom:28px;

    box-shadow:

    0 8px 24px rgba(0,0,0,.08);

}

.card h2{

    color:#2e7d32;

    margin-bottom:22px;

}

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

.grid{

    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:22px;

}

.field{

    display:flex;

    flex-direction:column;

}

.full{

    grid-column:1/-1;

}

label{

    font-weight:600;

    margin-bottom:8px;

}

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

input,
textarea,
select{

    width:100%;

    padding:12px 14px;

    border:

    1px solid #cfd8dc;

    border-radius:10px;

    font-size:15px;

    transition:.25s;

    background:white;

}

textarea{

    resize:vertical;

    min-height:60px;

}

input:focus,
textarea:focus{

    outline:none;

    border-color:#2e7d32;

    box-shadow:

    0 0 0 4px rgba(46,125,50,.12);

}

/* =======================================
   STUNDENLOHN
======================================= */

.currency-input{

    display:flex;

    align-items:center;

    gap:12px;

}

.currency-input span{

    white-space:nowrap;

    font-weight:600;

}

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

.table-wrapper{

    width:100%;

    overflow-x:auto;

}

table{

    width:100%;

    min-width:980px;

    border-collapse:collapse;

    margin-top:15px;

}

thead{

    background:#2e7d32;

    color:white;

}

th{

    padding:15px;

    text-align:left;

    font-size:15px;

}

td{

    padding:10px;

    border-bottom:1px solid #eceff1;

}

tbody tr:nth-child(even){

    background:#fafafa;

}

tbody tr:hover{

    background:#f4fbf5;

}

td input,
td textarea{

    font-size:14px;

    padding:8px;

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

button{

    cursor:pointer;

    border:none;

    transition:.25s;

    font-size:15px;

}

.primaryButton{

    margin-top:20px;

    background:#2e7d32;

    color:white;

    padding:14px 22px;

    border-radius:10px;

    font-weight:600;

}

.primaryButton:hover{

    background:#256428;

    transform:translateY(-2px);

}

.secondaryButton{

    background:#eceff1;

    color:#2d3436;

    padding:12px 18px;

    border-radius:10px;

    font-weight:600;

}

.secondaryButton:hover{

    background:#d9e1e5;

}

.pdfButton{

    width:100%;

    margin-top:25px;

    background:#2e7d32;

    color:white;

    font-size:20px;

    font-weight:bold;

    padding:18px;

    border-radius:12px;

}

.pdfButton:hover{

    background:#256428;

    transform:translateY(-2px);

}

/* =======================================
   ZUSAMMENFASSUNG
======================================= */

.summaryBox{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px;

    border-radius:14px;

    background:#f3faf4;

    border:2px solid #b8dfbc;

}

.summaryLabel{

    display:block;

    font-size:18px;

    font-weight:bold;

    color:#2e7d32;

}

.summaryValue{

    font-size:34px;

    font-weight:bold;

    color:#2e7d32;

}

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

.infoBox{

    background:#f8f9fa;

    border-left:5px solid #2e7d32;

    padding:18px;

    border-radius:8px;

    line-height:1.6;

}

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

.confirmationText{

    line-height:1.8;

}

.confirmationText p{

    margin-bottom:15px;

}

.checkboxRow{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-top:20px;

    cursor:pointer;

}

.checkboxRow input{

    width:20px;

    height:20px;

    margin-top:2px;

}

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

.signatureGrid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

    margin-bottom:25px;

}

.signatureContainer{

    margin-top:10px;

}

#signaturePad{

    width:100%;

    height:220px;

    border:2px dashed #bdbdbd;

    border-radius:12px;

    background:white;

    display:block;

    touch-action:none;

}

.signatureButtons{

    margin-top:15px;

}

/* =======================================
   SMALL
======================================= */

small{

    color:#757575;

    margin-top:6px;

}

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

footer{

    text-align:center;

    color:#888;

    padding:35px;

}

/* =======================================
   SCROLLBAR
======================================= */

::-webkit-scrollbar{

    height:10px;

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#b0bec5;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#90a4ae;

}

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

@media(max-width:900px){

.grid{

    grid-template-columns:1fr;

}

.signatureGrid{

    grid-template-columns:1fr;

}

.header-container{

    flex-direction:column;

    text-align:center;

}

.summaryBox{

    flex-direction:column;

    gap:15px;

    text-align:center;

}

.header{

    padding:25px;

}

.card{

    padding:20px;

}

}

/* =======================================
   KLEINE ANIMATIONEN
======================================= */

.card{

    transition:.25s;

}

.card:hover{

    transform:translateY(-2px);

}.offerName{

    min-height:42px;

    resize:none;

    overflow:hidden;

}.totalHours{

    text-align:right;

    font-weight:600;

}.amount{

    text-align:right;

    font-weight:bold;

    color:#2e7d32;

}
/* =====================================================
   Stammdatenspeicherung
   ===================================================== */

.saveDataBox {

    margin-top: 25px;

    padding: 20px;

    background: #f7f9fb;

    border: 1px solid #e1e6eb;

    border-radius: 14px;

}


.saveDataInfo {

    margin: 10px 0 18px 30px;

    font-size: 0.9rem;

    line-height: 1.5;

    color: #68737d;

}


.saveDataButtons {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}


.saveDataButtons .secondaryButton {

    cursor: pointer;

}
/* =====================================================
   BESTÄTIGUNG – volle Breite
   ===================================================== */

.confirmationText{
    width:100%;
}

.confirmationText p{
    width:100%;
}

.checkboxRow{
    width:100%;
    padding:16px 18px;
    background:#f3faf4;
    border:1px solid #b8dfbc;
    border-radius:10px;
}


/* =====================================================
   PDF / DRUCK – saubere Fußzeile
   ===================================================== */

@media print{

    footer{
        padding-top:20px;
        padding-bottom:20px;
        line-height:1.8;
    }

}