/* ======================================================
   LINEA Vereinsportal
   Übungsleiterpauschale
   ====================================================== */


* {
    box-sizing: border-box;
}


body {

    margin: 0;

    padding: 30px 15px;

    background: #f3f4f6;

    color: #111;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    line-height: 1.45;

}


.page {

    max-width: 900px;

    margin: 0 auto;

    background: #fff;

    padding: 34px 48px 45px;

    box-shadow:
        0 2px 12px
        rgba(0,0,0,0.08);

}


/* ======================================================
   KOPF
   ====================================================== */


.header-container {

    display: flex;

    align-items: center;

    min-height: 78px;

}


.logo-box {

    width: 72px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

}


.logo-box img {

    max-width: 62px;

    max-height: 58px;

    width: auto;

    height: auto;

    object-fit: contain;

}


.club-info {

    margin-left: 15px;

    font-size: 11px;

    line-height: 1.35;

}


.club-name {

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 3px;

}


.document-title {

    margin-left: auto;

    font-size: 17px;

    font-weight: 700;

    text-align: right;

}


.header-line {

    height: 1px;

    background: #b8b8b8;

    margin-top: 8px;

}


/* ======================================================
   ABSCHNITTE
   ====================================================== */


.section {

    margin-top: 25px;

}


.section h1 {

    margin: 0 0 11px;

    font-size: 17px;

    line-height: 1.2;

}


.section h2 {

    margin: 0 0 12px;

    font-size: 13px;

    line-height: 1.2;

}


.section h3 {

    margin:

        17px

        0

        5px;

    font-size: 13px;

}


/* ======================================================
   FORMULAR
   ====================================================== */


.form-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 13px 18px;

}


.form-group {

    display: flex;

    flex-direction: column;

}


.form-group.full-width {

    grid-column:
        1 / -1;

}


.form-group label {

    margin-bottom: 4px;

    font-size: 11px;

    font-weight: 700;

}


input,
select,
textarea {

    width: 100%;

    padding: 8px 9px;

    border:

        1px solid #c9cdd1;

    border-radius: 4px;

    background: #fff;

    color: #111;

    font-family: inherit;

    font-size: 13px;

}


input:focus {

    outline: none;

    border-color: #777;

}


.amount-field {

    max-width: 120px;

    margin-left: 5px;

}


/* ======================================================
   DOKUMENTTEXT
   ====================================================== */


.document-text {

    font-size: 12px;

    line-height: 1.48;

}


.document-text p {

    margin:

        0

        0

        9px;

}


.document-text ul {

    margin:

        5px

        0

        11px

        22px;

    padding: 0;

}


.document-text li {

    margin-bottom: 3px;

}


.important-text {

    font-weight: 600;

    margin-top: 13px !important;

}


.subtitle {

    margin:

        -2px

        0

        13px;

    font-size: 11.5px;

    line-height: 1.4;

}


/* ======================================================
   CHECKBOX
   ====================================================== */


.checkbox-row {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 15px;

    font-size: 12px;

    font-weight: 600;

}


.checkbox-row input {

    width: auto;

    margin-top: 3px;

}


/* ======================================================
   AUSWAHL ÜBUNGSLEITERPAUSCHALE
   ====================================================== */


.choice-box {

    margin:

        10px

        0

        15px;

    padding:

        12px

        14px;

    border:

        1px solid #d0d3d6;

    border-radius: 5px;

}


.radio-row {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin: 7px 0;

    font-size: 12px;

}


.radio-row input[type="radio"] {

    width: auto;

}


.radio-row input[type="number"] {

    width: 105px;

    padding: 5px 7px;

}


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


.signature-section {

    margin-top: 24px;

}


.signature-container {

    width: 100%;

    height: 130px;

    border-bottom:

        1px solid #777;

    background: #fff;

}


#signaturePad {

    width: 100%;

    height: 130px;

    display: block;

    touch-action: none;

}


.signature-controls {

    margin-top: 7px;

}


.secondary-button {

    padding:

        6px

        10px;

    border:

        1px solid #bbb;

    border-radius: 4px;

    background: #f4f4f4;

    cursor: pointer;

    font-size: 11px;

}


.signature-data {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

    margin-top: 14px;

}


/* ======================================================
   BUTTON
   ====================================================== */


.button-section {

    margin-top: 28px;

    text-align: center;

}


.primary-button {

    border: none;

    border-radius: 5px;

    padding:

        11px

        22px;

    background: #222;

    color: white;

    cursor: pointer;

    font-size: 13px;

    font-weight: 700;

}


.primary-button:hover {

    background: #444;

}


.primary-button:disabled {

    opacity: 0.6;

    cursor: wait;

}


/* ======================================================
   FUSSNOTE
   ====================================================== */


.footnote {

    margin-top: 25px;

    padding-top: 10px;

    border-top:

        1px solid #ddd;

    font-size: 8.5px;

    line-height: 1.35;

    color: #555;

}


.footnote p {

    margin: 0;

}


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


@media (max-width: 700px) {


    body {

        padding: 0;

    }


    .page {

        padding:

            22px

            20px

            35px;

        box-shadow: none;

    }


    .header-container {

        align-items: flex-start;

    }


    .document-title {

        font-size: 14px;

        margin-top: 4px;

    }


    .form-grid {

        grid-template-columns:
            1fr;

    }


    .form-group.full-width {

        grid-column: auto;

    }


    .signature-data {

        grid-template-columns:
            1fr;

    }

}


@media print {


    body {

        padding: 0;

        background: white;

    }


    .page {

        max-width: none;

        box-shadow: none;

        padding: 20px 35px;

    }


    .button-section,
    .secondary-button {

        display: none;

    }

}