/* Stundenzettel-Upload – Fullscreen-Layout im aquaFamily-Design
   Alle Regeln mit !important, damit Elementor/Theme-Styles sie nicht überschreiben. */

:root {
        --aqfc-navy: #022d55 !important;
        --aqfc-navy-deep: #011c37 !important;
        --aqfc-blue: #1081e9 !important;
        --aqfc-blue-dark: #0b6ac4 !important;
        --aqfc-yellow: #ffc830 !important;
        --aqfc-text: #1f2124 !important;
        --aqfc-muted: #6b7a89 !important;
        --aqfc-border: #dde6ee !important;
        --aqfc-radius: 16px !important;
}

.aqfc-ts-body * {
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
}

.aqfc-ts-body {
        min-height: 100vh !important;
        background:
                radial-gradient(1100px 600px at 85% -10%, rgba(16, 129, 233, 0.35), transparent 60%),
                radial-gradient(900px 500px at -10% 110%, rgba(16, 129, 233, 0.25), transparent 55%),
                linear-gradient(160deg, var(--aqfc-navy-deep) 0%, var(--aqfc-navy) 55%, #05396b 100%) !important;
        font-family: "Figtree", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
        color: var(--aqfc-text) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
}

.aqfc-ts-main {
        width: 100% !important;
        max-width: 580px !important;
}

/* Weißer Logo-Kopf wie die Website-Kopfzeile */
.aqfc-ts-brand {
        background: #ffffff !important;
        border-radius: var(--aqfc-radius) var(--aqfc-radius) 0 0 !important;
        padding: 24px 24px 18px !important;
        text-align: center !important;
        border-bottom: 1px solid #eef3f8 !important;
}

.aqfc-ts-brand-logo {
        display: inline-block !important;
        max-height: 84px !important;
        max-width: 240px !important;
        width: auto !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
        background: #ffffff !important;
}

.aqfc-ts-card {
        background: #ffffff !important;
        border-radius: 0 0 var(--aqfc-radius) var(--aqfc-radius) !important;
        box-shadow: 0 30px 70px rgba(1, 18, 38, 0.5) !important;
        padding: 36px 38px 42px !important;
        position: relative !important;
}

/* Wellen-Deko wie auf der Website (hellblaue Wellen) */
.aqfc-ts-card::before {
        content: "" !important;
        display: block !important;
        height: 14px !important;
        margin: -10px 0 20px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14' viewBox='0 0 72 14'%3E%3Cpath d='M0 7 Q9 0 18 7 T36 7 T54 7 T72 7' fill='none' stroke='%23bcd9f7' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
        background-repeat: repeat-x !important;
        background-position: center !important;
        background-size: 72px 14px !important;
}

.aqfc-ts-title {
        font-family: "Figtree", sans-serif !important;
        font-size: 1.75rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        margin: 0 0 6px !important;
        color: var(--aqfc-navy) !important;
        letter-spacing: -0.3px !important;
        text-transform: none !important;
}

.aqfc-ts-subtitle {
        font-family: "Roboto", sans-serif !important;
        color: var(--aqfc-muted) !important;
        font-size: 0.95rem !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        margin: 0 0 28px !important;
}

.aqfc-ts-form .aqfc-ts-row {
        display: flex !important;
        gap: 14px !important;
}

.aqfc-ts-field {
        flex: 1 !important;
        margin: 0 0 18px !important;
}

.aqfc-ts-field label {
        display: block !important;
        font-family: "Figtree", sans-serif !important;
        font-weight: 700 !important;
        font-size: 0.85rem !important;
        margin: 0 0 6px !important;
        color: var(--aqfc-navy) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
}

.aqfc-ts-field input {
        width: 100% !important;
        padding: 13px 15px !important;
        border: 1.5px solid var(--aqfc-border) !important;
        border-radius: 10px !important;
        font-family: "Roboto", sans-serif !important;
        font-size: 1rem !important;
        line-height: 1.4 !important;
        color: var(--aqfc-text) !important;
        background: #fbfdff !important;
        box-shadow: none !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.aqfc-ts-field input:focus {
        outline: none !important;
        border-color: var(--aqfc-blue) !important;
        box-shadow: 0 0 0 4px rgba(16, 129, 233, 0.14) !important;
        background: #ffffff !important;
}

.aqfc-ts-dropzone {
        border: 2px dashed rgba(16, 129, 233, 0.45) !important;
        border-radius: 14px !important;
        padding: 36px 20px !important;
        text-align: center !important;
        cursor: pointer !important;
        color: var(--aqfc-muted) !important;
        background: linear-gradient(180deg, rgba(16, 129, 233, 0.04), rgba(16, 129, 233, 0.08)) !important;
        transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease !important;
        margin: 0 0 14px !important;
}

.aqfc-ts-dropzone:hover,
.aqfc-ts-dropzone:focus,
.aqfc-ts-dropzone.aqfc-ts-dragover {
        border-color: var(--aqfc-blue) !important;
        background: rgba(16, 129, 233, 0.12) !important;
        outline: none !important;
        transform: translateY(-1px) !important;
}

.aqfc-ts-dropzone-icon {
        width: 44px !important;
        height: 44px !important;
        color: var(--aqfc-blue) !important;
        margin: 0 auto 10px !important;
        display: block !important;
}

.aqfc-ts-dropzone-text {
        font-family: "Figtree", sans-serif !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: var(--aqfc-navy) !important;
        margin: 0 0 4px !important;
}

.aqfc-ts-dropzone-hint {
        font-family: "Roboto", sans-serif !important;
        font-size: 0.8rem !important;
        color: var(--aqfc-muted) !important;
        margin: 0 !important;
}

.aqfc-ts-filelist {
        list-style: none !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
}

.aqfc-ts-filelist li {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        background: #f5f9fd !important;
        border: 1px solid #e2ecf5 !important;
        border-left: 4px solid var(--aqfc-blue) !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        font-family: "Roboto", sans-serif !important;
        font-size: 0.88rem !important;
        margin: 0 0 7px !important;
        color: var(--aqfc-text) !important;
}

.aqfc-ts-filelist .aqfc-ts-filesize {
        color: var(--aqfc-muted) !important;
        white-space: nowrap !important;
        font-size: 0.8rem !important;
}

.aqfc-ts-filelist .aqfc-ts-remove {
        background: none !important;
        border: none !important;
        color: #c0392b !important;
        cursor: pointer !important;
        font-size: 1.05rem !important;
        line-height: 1 !important;
        padding: 2px 6px !important;
        box-shadow: none !important;
}

.aqfc-ts-button {
        width: 100% !important;
        background: linear-gradient(135deg, var(--aqfc-blue) 0%, var(--aqfc-blue-dark) 100%) !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 15px 18px !important;
        font-family: "Figtree", sans-serif !important;
        font-size: 1.02rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        letter-spacing: 0.2px !important;
        text-transform: none !important;
        cursor: pointer !important;
        box-shadow: 0 8px 18px rgba(16, 129, 233, 0.3) !important;
        transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease !important;
}

.aqfc-ts-button:hover {
        background: linear-gradient(135deg, var(--aqfc-blue) 0%, var(--aqfc-blue-dark) 100%) !important;
        filter: brightness(1.08) !important;
        color: #ffffff !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 14px 28px rgba(16, 129, 233, 0.4) !important;
}

.aqfc-ts-button:active {
        transform: translateY(0) !important;
}

.aqfc-ts-button:disabled {
        background: #9db4c6 !important;
        box-shadow: none !important;
        cursor: not-allowed !important;
        transform: none !important;
        filter: none !important;
}

/* Meldungen: in die Karte integriert (oberhalb des Formulars) */
.aqfc-ts-notice {
        margin: 0 0 22px !important;
        padding: 13px 16px !important;
        border-radius: 10px !important;
        font-family: "Roboto", sans-serif !important;
        font-size: 0.93rem !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
}

.aqfc-ts-notice--success {
        background: #e6f7ed !important;
        color: #1e7a44 !important;
        border: 1px solid #b7e4c8 !important;
        border-left: 4px solid #2eae63 !important;
}

.aqfc-ts-notice--error {
        background: #fdeceb !important;
        color: #b0362a !important;
        border: 1px solid #f3c2bd !important;
        border-left: 4px solid #c0392b !important;
}

/* Erfolgsansicht: ersetzt das Formular in der Karte */
.aqfc-ts-success {
        text-align: center !important;
        padding: 14px 6px 6px !important;
}

.aqfc-ts-success-icon {
        width: 72px !important;
        height: 72px !important;
        margin: 0 auto 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: #e6f7ed !important;
        border: 2px solid #2eae63 !important;
}

.aqfc-ts-success-icon svg {
        width: 36px !important;
        height: 36px !important;
        color: #2eae63 !important;
}

.aqfc-ts-success-title {
        font-family: "Figtree", sans-serif !important;
        font-size: 1.55rem !important;
        font-weight: 800 !important;
        color: var(--aqfc-navy) !important;
        margin: 0 0 8px !important;
}

.aqfc-ts-success-text {
        font-family: "Roboto", sans-serif !important;
        font-size: 0.97rem !important;
        color: var(--aqfc-muted) !important;
        line-height: 1.55 !important;
        margin: 0 0 26px !important;
}

.aqfc-ts-success .aqfc-ts-button {
        background: #ffffff !important;
        color: var(--aqfc-blue) !important;
        border: 2px solid var(--aqfc-blue) !important;
        box-shadow: none !important;
}

.aqfc-ts-success .aqfc-ts-button:hover {
        background: rgba(16, 129, 233, 0.08) !important;
        color: var(--aqfc-blue-dark) !important;
        filter: none !important;
}

/* Fußzeile unter der Karte */
.aqfc-ts-footer {
        text-align: center !important;
        margin: 18px 0 0 !important;
        color: rgba(255, 255, 255, 0.55) !important;
        font-family: "Roboto", sans-serif !important;
        font-size: 0.78rem !important;
}

@media (max-width: 540px) {
        .aqfc-ts-card {
                padding: 30px 22px !important;
        }

        .aqfc-ts-form .aqfc-ts-row {
                flex-direction: column !important;
                gap: 0 !important;
        }

        .aqfc-ts-brand-logo {
                max-height: 60px !important;
        }
}