:root, :root[data-theme="light"] {
/* Variables from public/style.css */
    --transition-time: 0.3s;
    --bg-image: url("../image/bg.jpg");
    --primary-color: #00004d;
    --accent-color: #800000;
    --accent-hover: #B40404;
    --text-dark: #202020;
    --text-light: #fafafa;
    --text-link: #203a7a;
    --text-active: #00004d;
    --text-gray: #666666;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-bg-b: rgba(241, 241, 241, 0.8);
    --glass-modal: rgba(204, 204, 204, 0.6);
    --prog-background: rgba(128, 0, 0, 0.03);
    --glass-accent: rgba(128, 0, 0, 0.6);
    --glass-accent-hover: rgba(128, 0, 0, 0.8);
    --glass-primary: rgba(0, 0, 77, 0.6);
    --glass-active: rgba(159, 159, 188, 0.5);
    --glass-tabelle: rgba(128, 0, 0, 0.95);
    --table-header-bg: rgba(180, 180, 180, 0.95);
    --input-bg: rgba(250, 250, 250, 0.8);
    --input-bg1: rgba(250, 250, 250, 1.0);
    --input-bg-focus: rgba(255, 255, 255, 0.9);
    --shadow-std: rgba(0, 0, 0, 0.2);
    --shadow-strong: rgba(0, 0, 0, 0.3);
    --shadow-light: rgba(0, 0, 0, 0.15);
    --shadow-glass: rgba(150, 150, 182, 0.4);
    --shadow-primary: rgba(0, 0, 77, 0.5);
    --shadow-primary-light: rgba(0, 0, 77, 0.3);
    --shadow-accent: rgba(128, 0, 0, 0.4);
    --shadow-accent-hover: rgba(128, 0, 0, 0.8);
    --border-primary: #00004d;
    --border-dark: #00004d;
    --border-hover: #a0a0a0;
    --input-border: #222222;
    --border-contact: var(--border-primary);
    --close-text: #000000;
    --close-bg: #fafafa;
    --arrow-icon: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300004d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    --arrow-icon-focus: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23800000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    --header-gap: 0.4rem;
    --nav-tab-gap: 15%;
    --unified-spacing: 1.5rem;
    --clamp-h1: clamp(1.85rem, 2.06vw, 2.47rem);
    --clamp-h2: clamp(1.46rem, 1.62vw, 1.94rem);
    --clamp-h3: clamp(1.14rem, 1.28vw, 1.53rem);
    --clamp-l: clamp(0.90rem, 1.00vw, 1.20rem);
    --clamp-m: clamp(0.71rem, 0.78vw, 0.94rem);
    --clamp-s: clamp(0.56rem, 0.62vw, 0.74rem);

    /* removed --glass-modal (from public) */    /* removed --glass-accent (from public) */    /* removed --accent-color (from public) */    /* removed --text-light (from public) */    /* removed --text-dark (from public) */    /* removed --input-bg (from public) */
    /* removed --input-bg-focus (from public) */    /* removed --input-border (from public) */    /* removed --shadow-light (from public) */    /* removed --shadow-accent (from public) */    /* removed --shadow-primary (from public) */
    --success-bg: rgba(21, 87, 36, 0.15);
    --success-text: #155724;
    --success-border: rgba(21, 87, 36, 0.4);
    
    --error-bg: rgba(220, 53, 69, 0.15);
    --error-text: #dc3545;
    --error-border: rgba(220, 53, 69, 0.4);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary-color: #9999ff;
        --accent-color: #800000;
        --accent-hover: #B40404;
        --text-dark: #f0f0f0;
        --text-light: #fafafa;
        --text-link: #8ab4f8;
        --text-active: #fafafa;
        --text-gray: #bbbbbb;
        --glass-bg: rgba(31, 31, 31, 0.85);
        --glass-bg-b: rgba(17, 17, 17, 0.85);
        --glass-modal: rgba(30, 30, 35, 0.85);
        --prog-background: rgba(128, 0, 0, 0.03);
        --glass-accent: rgba(128, 0, 0, 0.5);
        --glass-accent-hover: rgba(160, 20, 20, 0.6);
        --glass-primary: rgba(40, 40, 100, 0.5);
        --glass-active: rgba(70, 70, 90, 0.6);
        --glass-tabelle: rgba(128, 0, 0, 0.95);
        --table-header-bg: rgba(30, 30, 30, 0.95);
        --input-bg: rgba(20, 20, 30, 0.8);
        --input-bg1: rgba(20, 20, 30, 1.0);
        --input-bg-focus: rgba(25, 25, 35, 0.9);
        --shadow-std: rgba(0, 0, 0, 0.5);
        --shadow-strong: rgba(0, 0, 0, 0.7);
        --shadow-light: rgba(0, 0, 0, 0.4);
        --shadow-glass: rgba(0, 0, 0, 0.5);
        --shadow-primary: rgba(0, 0, 0, 0.6);
        --shadow-primary-light: rgba(0, 0, 0, 0.4);
        --shadow-accent: rgba(0, 0, 0, 0.5);
        --shadow-accent-hover: rgba(0, 0, 0, 0.7);
        --border-primary: #00004d;
        --border-dark: #00004d;
        --border-hover: #909090;
        --input-border: #dddddd;
        --border-contact: var(--input-border);
        --arrow-icon: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dddddd' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        --arrow-icon-focus: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B40404' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    }
}

:root[data-theme="dark"] {
/* Dark mode variables from public/style.css */
    --primary-color: #9999ff;
    --accent-color: #800000;
    --accent-hover: #B40404;
    --text-dark: #f0f0f0;
    --text-light: #fafafa;
    --text-link: #8ab4f8;
    --text-active: #fafafa;
    --text-gray: #bbbbbb;
    --glass-bg: rgba(31, 31, 31, 0.85);
    --glass-bg-b: rgba(17, 17, 17, 0.85);
    --glass-modal: rgba(30, 30, 35, 0.85);
    --prog-background: rgba(128, 0, 0, 0.03);
    --glass-accent: rgba(128, 0, 0, 0.5);
    --glass-accent-hover: rgba(160, 20, 20, 0.6);
    --glass-primary: rgba(40, 40, 100, 0.5);
    --glass-active: rgba(70, 70, 90, 0.6);
    --glass-tabelle: rgba(128, 0, 0, 0.95);
    --table-header-bg: rgba(30, 30, 30, 0.95);
    --input-bg: rgba(20, 20, 30, 0.8);
    --input-bg1: rgba(20, 20, 30, 1.0);
    --input-bg-focus: rgba(25, 25, 35, 0.9);
    --shadow-std: rgba(0, 0, 0, 0.5);
    --shadow-strong: rgba(0, 0, 0, 0.7);
    --shadow-light: rgba(0, 0, 0, 0.4);
    --shadow-glass: rgba(0, 0, 0, 0.5);
    --shadow-primary: rgba(0, 0, 0, 0.6);
    --shadow-primary-light: rgba(0, 0, 0, 0.4);
    --shadow-accent: rgba(0, 0, 0, 0.5);
    --shadow-accent-hover: rgba(0, 0, 0, 0.7);
    --border-primary: #00004d;
    --border-dark: #00004d;
    --border-hover: #909090;
    --input-border: #dddddd;
    --border-contact: var(--input-border);
    --arrow-icon: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dddddd' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    --arrow-icon-focus: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B40404' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");

    /* removed --glass-modal (from public) */    /* removed --glass-accent (from public) */    /* removed --accent-color (from public) */    /* removed --text-dark (from public) */    /* removed --text-light (from public) */    /* removed --input-bg (from public) */
    /* removed --input-bg-focus (from public) */    /* removed --input-border (from public) */    /* removed --shadow-light (from public) */    /* removed --shadow-accent (from public) */
}

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

body {
    font-family: 'Nunito', Arial, Helvetica, sans-serif;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 3.625rem;
    padding-bottom: 6vh;
    box-sizing: border-box;
}

body::before {
    content: '';
    position: fixed;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    background-image: url("../image/bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(5px);
    z-index: -1;
}

.attachment-view-container {
    width: 90%;
    min-width: 20rem;
    max-height: calc(94vh - 3.625rem);
    max-height: calc(94dvh - 3.625rem);
    margin-top: auto;
    margin-bottom: auto;
    background: var(--glass-modal);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    border: 1px solid var(--accent-color);
    border-radius: 3px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
    position: relative;
    box-sizing: border-box;
}

.modal-body {
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    color: var(--text-dark);
}

.saveForm {
    display: flex;
    flex-direction: column;
}

.attachment-status-wrapper,
.modal-tab-footer .attachment-status-wrapper,
.modal-tab-footer .status-container {
    flex: 1;
    margin: 0 1rem;
    padding: 0;
    height: auto;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.success-box {
    background-color: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    text-align: center;
}

.error-box {
    background-color: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    text-align: center;
}

.url-row {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    width: 100%;
    flex-shrink: 0;
}

.unified-button {
    height: 3rem;
    padding: 0.5rem 1rem;
    font-size: clamp(1.28rem, 1.42vw, 1.7rem);
    font-weight: bold;
    font-family: 'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    border: 1px solid var(--accent-color);
    border-radius: 6px;
    background: var(--glass-accent);
    color: var(--text-light);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 10px var(--shadow-accent);
    cursor: pointer;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.unified-button:hover:not(:disabled):not(.btn-disabled-state) {
    background: rgba(128, 0, 0, 0.8) !important;
    box-shadow: 0px 0px 15px rgba(128, 0, 0, 0.7) !important;
    transform: scale(1.02) !important;
    border-color: #a0a0a0 !important;
}

:disabled,
[disabled],
.btn-disabled-state,
.input-disabled-state,
:disabled *,
.btn-disabled-state *,
.input-disabled-state * {
    cursor: not-allowed !important;
}

.unified-button:disabled,
.unified-button.btn-disabled-state,
.btn-disabled-state,
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
    background-color: #888 !important;
    background: #888 !important;
    color: #ccc !important;
    border-color: #555 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

.unified-button:disabled:hover,
.unified-button.btn-disabled-state:hover,
.btn-disabled-state:hover,
button:disabled:hover,
input[type="button"]:disabled:hover,
input[type="submit"]:disabled:hover {
    background-color: #888 !important;
    background: #888 !important;
    color: #ccc !important;
    border-color: #555 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

.unified-button.btn-active-state:not(:disabled):not(.btn-disabled-state) {
    background: rgba(128, 0, 0, 0.8) !important;
    box-shadow: 0px 0px 10px var(--shadow-accent) !important;
    border-color: #a0a0a0 !important;
}

.unified-button.btn-active-state:disabled,
.unified-button.btn-active-state.btn-disabled-state {
    background-color: #888 !important;
    background: #888 !important;
    color: #ccc !important;
    border-color: #555 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

.tab-button:disabled,
.tab-button.btn-disabled-state {
    background: transparent !important;
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.tabfooter.btn-disabled-state {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

.btn-aufrufe:disabled,
.btn-aufrufe.btn-disabled-state {
    background: transparent !important;
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    transform: none !important;
    filter: none !important;
}

.btn-aufrufe:disabled:hover,
.btn-aufrufe.btn-disabled-state:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.btn-aufrufe:disabled svg,
.btn-aufrufe:disabled svg polyline,
.btn-aufrufe.btn-disabled-state svg,
.btn-aufrufe.btn-disabled-state svg polyline {
    color: var(--input-border) !important;
    stroke: var(--input-border) !important;
    cursor: not-allowed !important;
}

.btn-password-copy:disabled,
.btn-password-copy.btn-disabled-state {
    background: transparent !important;
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    transform: translateY(-50%) !important;
}

.btn-password-copy:disabled:hover,
.btn-password-copy.btn-disabled-state:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: translateY(-50%) !important;
}

.slot-delete-btn:disabled,
.slot-delete-btn.btn-disabled-state,
.slots-container.slots-locked .slot-delete-btn {
    background-color: #888 !important;
    background: #888 !important;
    color: #ccc !important;
    border-color: #555 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.slot-delete-btn:disabled:hover,
.slot-delete-btn.btn-disabled-state:hover,
.slots-container.slots-locked .slot-delete-btn:hover {
    cursor: not-allowed !important;
    transform: none !important;
    border-color: #555 !important;
    color: #ccc !important;
}

.btn-slot-plus:disabled,
.btn-slot-plus.btn-disabled-state {
    background-color: #888 !important;
    background: #888 !important;
    color: #ccc !important;
    border-color: #555 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-slot-plus:disabled:hover,
.btn-slot-plus.btn-disabled-state:hover,
.slots-container.slots-locked .btn-slot-plus,
.slots-container.slots-locked .btn-slot-plus:hover {
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    color: #ccc !important;
    border-color: #555 !important;
}

.btn-slot-plus:disabled svg,
.btn-slot-plus.btn-disabled-state svg,
.slots-container.slots-locked .btn-slot-plus svg {
    fill: #ccc !important;
    cursor: not-allowed !important;
}

.slots-container.uploading .slot-item,
.slots-container.uploading .slot-preview-box,
.slots-container.uploading .slot-preview-box img,
.slots-container.uploading .empty-slot,
.slots-container.uploading .btn-slot-plus,
.slots-container.uploading .slot-delete-btn,
.slots-container.slots-locked .slot-item,
.slots-container.slots-locked .slot-preview-box,
.slots-container.slots-locked .slot-preview-box img,
.slots-container.slots-locked .empty-slot,
.slots-container.slots-locked .empty-slot .slot-preview-box,
.slots-container.slots-locked .empty-slot .slot-preview-box img,
.slots-container.slots-locked .btn-slot-plus,
.slots-container.slots-locked .slot-delete-btn {
    cursor: not-allowed !important;
}

.slots-container.slots-locked .slot-item .slot-preview-box:hover img,
.slots-container.uploading .slot-item .slot-preview-box:hover img {
    transform: none !important;
}

.modalbody-buttons {
    margin-right: 1rem;
    font-size: clamp(0.9rem, 2vw, 1.2rem) !important;
}

.btn-loeschung-hidden {
    display: none !important;
}

.unified-input {
    height: 3rem;
    padding: 0.5rem 1rem;
    font-size: clamp(0.8rem, 2vw, 1rem);
    font-family: 'Nunito', Arial, Helvetica, sans-serif;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    width: 100%;
    flex: 1;
    background-color: var(--input-bg);
    color: var(--text-dark);
    outline: none;
}

#website_url {
    transition: background-color var(--transition-time) ease;
}

#website_url:not(.has-link) {
    cursor: not-allowed !important;
}

#website_url.has-link,
#website_url:not(:placeholder-shown) {
    background-color: var(--success-bg) !important;
}


.content-row {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
    gap: 0;
}

.attachmentname {
    margin-bottom: 0;
    width: 100%;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.attachmentname input {
    width: 100%;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0.25rem 1rem;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    font-family: 'Nunito', Arial, Helvetica, sans-serif;
    border: 1px solid var(--input-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background-color: var(--input-bg);
    color: var(--text-dark);
    box-shadow: 0px 4px 6px -4px rgba(0,0,0,0.3);
    outline: none;
    text-align: center;
    flex-shrink: 0;
}

.attachmenttextarea {
    width: 100%;
    height: 30vh;
    min-height: 2.25rem;
    padding: 1rem;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    font-family: 'Nunito', Arial, Helvetica, sans-serif;
    border: 1px solid var(--input-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: var(--input-bg);
    color: var(--text-dark);
    box-shadow: 0px 0px 8px var(--shadow-light);
    resize: vertical;
    outline: none;
}


.attachmentname input:focus {
    outline: none !important;
    border: 1px solid var(--accent-color) !important;
    border-bottom: none !important;
    box-shadow: 0 -2px 6px 0px var(--shadow-accent), 0px 0px 8px var(--shadow-light) !important;
}



.attachmenttextarea:focus {
    outline: none !important;
    border: 1px solid var(--accent-color) !important;
    border-top: none !important;
    box-shadow: 0 0 8px var(--shadow-accent) !important;
}

.attachmentname input:disabled,
.attachmentname input.input-disabled-state,
.attachmentname input:disabled:hover,
.attachmentname input.input-disabled-state:hover {
    background-color: var(--input-bg) !important;
    color: var(--text-dark) !important;
    -webkit-text-fill-color: var(--text-dark) !important;
    opacity: 1 !important;
    border: 1px solid var(--input-border) !important;
    border-bottom: none !important;
    cursor: not-allowed !important;
    outline: none !important;
}

.attachmenttextarea:disabled,
.attachmenttextarea.input-disabled-state,
.attachmenttextarea:disabled:hover,
.attachmenttextarea.input-disabled-state:hover {
    background: var(--input-bg) !important;
    color: var(--text-dark) !important;
    -webkit-text-fill-color: var(--text-dark) !important;
    opacity: 1 !important;
    border: 1px solid var(--input-border) !important;
    border-top: none !important;
    cursor: not-allowed !important;
    resize: none !important;
    outline: none !important;
}

.password-input:disabled,
.password-input.input-disabled-state,
#geheim_passwort:disabled,
#geheim_passwort.input-disabled-state,
#geheim_email:disabled,
#geheim_email.input-disabled-state,
.password-input:disabled:hover,
.password-input.input-disabled-state:hover,
#geheim_passwort:disabled:hover,
#geheim_passwort.input-disabled-state:hover,
#geheim_email:disabled:hover,
#geheim_email.input-disabled-state:hover {
    background-color: var(--input-bg) !important;
    color: var(--text-dark) !important;
    -webkit-text-fill-color: var(--text-dark) !important;
    opacity: 1 !important;
    border: 1px solid var(--input-border) !important;
    cursor: not-allowed !important;
    outline: none !important;
}


#geheim_fileinfo {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 0.35rem;
    padding: 0rem;
    font-size: clamp(0.80rem, 1.50vw, 1.00rem);
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 5;
}

#geheim_fileinfo:empty {
    display: none;
}

.fileinfo-line {
    display: inline;
}

.fileinfo-line:not(:last-child)::after {
    content: " | ";
}

.options-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
    align-items: flex-end;
    margin: 2.5rem auto 0rem auto;
    gap: 0rem;
    justify-content: center;
    height: 6rem;
    min-height: 6rem;
    flex-shrink: 0;
}

.options-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    margin: 0rem;
    padding: 0rem;
    gap: 0rem;
    flex-shrink: 0;
}

.options-col label {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    text-align: center;
}


.slots-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 6rem;
    box-sizing: border-box;
}

.slots-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.6rem;
    width: 100%;
    height: 6rem;
    min-height: 6rem;
    padding: 0.4rem 0.5rem;
    border: 2px dashed #888888;
    background: rgba(136, 136, 136, 0.14);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.5s ease, background-color 0.5s ease;
}

.slots-container.no-transition {
    transition: none !important;
}

.slots-container:has(.slot-item.empty-slot .slot-preview-box:hover),
.slots-container:has(.slot-item.empty-slot.slot-zoom-active),
.slots-container.slot-hover-fade {
    border-color: transparent;
    background-color: transparent;
}

.slots-container.drag-active {
    border-color: var(--accent-color) !important;
    border-style: dashed !important;
    background: rgba(128, 0, 0, 0.05) !important;
}

.slots-container.drag-active * {
    pointer-events: none;
}

.slots-container.drag-active .btn-slot-plus {
    display: none !important;
}

.slots-container[data-drag-mode="true"] ~ #slot_context_menu {
    display: none !important;
}

.slots-container[data-drag-mode="true"] .btn-slot-plus {
    display: none !important;
}

.slot-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.2rem;
    height: 5.2rem;
    max-width: 5.2rem;
    max-height: 5.2rem;
    flex: 0 0 auto;
}

.slot-item.empty-slot {
    width: 3.50rem;
    height: 3.50rem;
    max-width: 3.50rem;
    max-height: 3.50rem;
}

.slot-preview-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.slot-preview-box img {
    width: 100%;
    height: 100%;
    max-width: 5.2rem;
    max-height: 5.2rem;
    object-fit: contain;
    cursor: pointer;
    transition: opacity 0.5s ease;
    border-radius: 4px;
}

.slot-item.empty-slot .slot-preview-box img {
    max-width: 3.50rem;
    max-height: 3.50rem;
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform-origin: center center;
}

.slot-item.empty-slot .slot-preview-box:hover img,
.slot-item.empty-slot.slot-zoom-active .slot-preview-box img {
    transform: scale(1.20);
}

.slot-delete-btn {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    width: 1.4rem;
    height: 1.4rem;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--input-border);
    background: var(--close-bg);
    color: var(--close-text);
    box-shadow: 0px 0px 4px var(--shadow-strong);
    cursor: pointer;
    font-size: clamp(0.75rem, 1.5vw, 0.95rem);
    font-weight: bold;
    line-height: 1;
    padding: 0rem;
    z-index: 10;
    transition: all 0.2s ease;
}

.slot-delete-btn:hover {
    color: #dc3545;
    border-color: #dc3545;
    transform: scale(1.2);
}

.btn-slot-plus {
    position: relative;
    font-weight: bold;
    border: 1px solid var(--input-border);
    width: 2.0rem;
    height: 2.0rem;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--close-text);
    background: var(--close-bg);
    box-shadow: 0px 0px 6px var(--shadow-strong);
    transition: transform 0.5s ease, box-shadow 0.5s ease, color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    box-sizing: border-box;
    padding: 0rem;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    user-select: none;
}

.btn-slot-plus svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
    display: block;
    pointer-events: none;
}

.btn-slot-plus:hover, .btn-slot-plus:focus, .btn-slot-plus.slot-zoom-active {
    color: var(--accent-hover);
    text-decoration: none;
    border: 1px solid var(--accent-color);
    cursor: pointer;
    box-shadow: 0px 0px 15px rgba(128, 0, 0, 0.6);
    transform: scale(1.15);
}

.slot-context-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    box-shadow: 0px 0px 10px var(--shadow-strong);
    display: flex;
    flex-direction: column;
    padding: 0.4rem;
    gap: 0.3rem;
    z-index: 100;
    width: max-content;
    min-width: 11rem;
    max-width: 14rem;
    box-sizing: border-box;
}

.slot-menu-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-dark);
    font-size: clamp(0.85rem, 1.8vw, 1rem);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    white-space: nowrap;
}

.slot-menu-btn:hover {
    background: var(--input-bg-focus);
    color: var(--accent-hover);
    border-color: var(--accent-color);
}

.slot-menu-btn svg {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.5rem;
    flex: 0 0 auto;
}

.download-slot-row {
    width: 100%;
    text-align: left;
    padding: 0.2rem 1rem;
    box-sizing: border-box;
}

.download-slot-row .download-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    word-break: break-all;
    cursor: pointer;
    text-decoration: none;
}

.download-slot-row .download-custom img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    flex: 0 0 auto;
    border-radius: 4px;
}

.slider-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 12rem;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    height: 3rem;
    box-sizing: border-box;
    box-shadow: 0px 0px 8px var(--shadow-light);
    margin: 0rem !important;
}

.slider-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    margin: 0rem !important;
    padding: 0rem;
    box-sizing: border-box;
    text-align: center;
    color: var(--text-dark);
    line-height: 1.1;
    font-size: clamp(0.71rem, 0.78vw, 0.94rem);
    font-family: 'Nunito', Arial, Helvetica, sans-serif;
}

.slider-label span,
.label {
    text-align: center;
    color: var(--text-dark);
    line-height: 1.1;
    font-size: clamp(0.71rem, 0.78vw, 0.94rem);
    font-family: 'Nunito', Arial, Helvetica, sans-serif;
}

.password-input {
    width: 100%;
    max-width: 12rem;
    height: 3rem;
    padding: 0.5rem 1rem;
    font-size: clamp(0.8rem, 2vw, 1rem);
    font-family: 'Nunito', Arial, Helvetica, sans-serif;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background-color: var(--input-bg);
    color: var(--text-dark);
    box-shadow: 0px 0px 8px var(--shadow-light);
    outline: none;
    text-align: center;
    margin: 0rem !important;
    box-sizing: border-box;
}

.password-input-wrapper {
    position: relative;
    width: 100%;
    max-width: 12rem;
    height: 3rem;
    display: flex;
    align-items: center;
}

.password-input-wrapper .password-input {
    width: 100%;
    max-width: 100%;
    height: 3rem;
    padding: 0.5rem 2.2rem 0.5rem 1rem;
}

.btn-password-copy {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.4rem;
    height: 1.4rem;
    min-height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0rem;
    margin: 0rem;
    cursor: pointer;
    color: var(--text-dark);
    opacity: 0.8;
    z-index: 2;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-password-copy:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.15);
    cursor: pointer;
}

.btn-password-copy svg {
    width: 100%;
    height: auto;
    display: block;
}

.btn-aufrufe {
    background: transparent;
    border: none;
    color: var(--input-border);
    font-family: 'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    height: 100%;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-aufrufe svg {
    color: var(--input-border);
    stroke: var(--input-border);
}

.btn-aufrufe svg polyline {
    stroke: var(--input-border);
}

.btn-aufrufe:hover {
    color: var(--accent-color);
    transform: scale(1.15);
    filter: drop-shadow(0px 0px 8px var(--shadow-primary));
}

.btn-aufrufe:hover svg,
.btn-aufrufe:hover svg polyline {
    color: var(--accent-color);
    stroke: var(--accent-color);
}

.aufrufe-container {
    position: relative;
    display: inline-block;
    height: 100%;
    width: 100%;
    min-width: 3rem;
    overflow: hidden;
}

.aufrufe-number {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    font-weight: bold;
    color: var(--text-dark);
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.slide-up {
    transform: translateX(-100%);
    opacity: 0;
}

.slide-down {
    transform: translateX(100%);
    opacity: 0;
}

.slide-center {
    transform: translateX(0);
    opacity: 1;
}

.modal-tab-footer {
    padding: 1rem 1rem;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.modal-tab-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.cancel-btn-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 45%;
    max-width: 10rem;
    box-sizing: border-box;
}

.save-btn-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 45%;
    max-width: 10rem;
    box-sizing: border-box;
}



/* Top Controls */
.top-controls-left { position: absolute; top: 0rem; left: 0rem; display: flex; z-index: 10; }
.top-controls-center { position: absolute; top: 0rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; padding: 0.5rem; height: 3.25rem; width: 100%; max-width: 12rem; z-index: 10; }
.top-controls-right { position: absolute; top: 0rem; right: 0rem; display: flex; z-index: 201; }

.tab-button { cursor: pointer; padding: 0.5rem; border: none; background: transparent; transition: transform 0.2s ease; }
.tab-button img { height: 2.25rem; width: 2.25rem; object-fit: contain; display: block; }
.top-controls-center img { width: 100%; height: auto; object-fit: contain; display: block; }
.login-btn img { border-radius: 50%; height: 2.25rem; width: 2.25rem; }

#btn_loeschung,
#btn_passwort_toggle,
#btn_lesebestaetigung {
    margin: 0rem !important;
    min-height: 3rem;
    height: 3rem;
    width: 100%;
    max-width: 12rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
}
#btn_passwort_toggle::after {
    content: attr(data-text-show);
    height: 0rem;
    line-height: 0;
    visibility: hidden;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}
#btn_loeschung::after {
    content: attr(data-text-off);
    height: 0rem;
    line-height: 0;
    visibility: hidden;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}
#btn_lesebestaetigung::after {
    content: attr(data-text-off);
    height: 0rem;
    line-height: 0;
    visibility: hidden;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}
#geheim_passwort,
#geheim_email {
    transition: all 0.3s ease;
}
#geheim_passwort:focus::placeholder,
#geheim_email:focus::placeholder {
    opacity: 0.2;
}
@media screen and (max-width: 768px) {
    body {
        align-items: flex-start;
        overflow-x: hidden;
        padding-top: 0rem;
        padding-bottom: 0rem;
    }
    .attachment-view-container {
        margin-top: 3.625rem;
        margin-bottom: 6vh;
        height: calc(94vh - 3.625rem);
        height: calc(94dvh - 3.625rem);
        min-height: 0 !important;
        flex: 1;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 1fr;
        width: 100%;
        max-width: 100%;
        min-width: 0rem;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    .admin-tab-pane,
    #tab-attachment,
    #tab-list,
    #tab-log,
    #tab-set {
        grid-area: 1 / 1;
        flex: 1;
        min-height: 0rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0rem;
        box-sizing: border-box;
    }
    .modal-body,
    #tab-list .modal-body,
    #tab-log .modal-body,
    #tab-set .modal-body {
        flex: 1;
        min-height: 0rem;
        display: flex;
        flex-direction: column;
        padding: 1.50rem 1.00rem 0.50rem 1.00rem;
        width: 100%;
        max-width: 100%;
        min-width: 0rem;
        box-sizing: border-box;
    }
    #tab-attachment .modal-body {
        flex: 1;
        min-height: 0rem;
        display: flex;
        flex-direction: column;
        padding: 1.00rem 1.00rem 0rem 1.00rem;
        width: 100%;
        max-width: 100%;
        min-width: 0rem;
        box-sizing: border-box;
    }
    .saveForm,
    #saveForm2,
    #saveFormList,
    #saveFormLog,
    #saveFormSet {
        flex: 1;
        min-height: 0rem;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0rem;
        box-sizing: border-box;
    }
    .url-row {
        flex-shrink: 0;
        margin-bottom: 0.50rem;
        width: 100%;
        max-width: 100%;
        min-width: 0rem;
        box-sizing: border-box;
    }
    .content-row {
        flex: 1 1 0;
        min-height: 0rem;
        min-width: 0rem;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    .attachmentname {
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0rem;
        box-sizing: border-box;
    }
    .attachmenttextarea {
        flex: 1 1 0 !important;
        min-height: 2.25rem !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0rem !important;
        resize: none;
        box-sizing: border-box;
    }
    #geheim_fileinfo {
        position: static;
        flex-shrink: 0;
        min-height: 0rem;
        min-width: 0rem;
        width: 100%;
        max-width: 100%;
        margin-top: 0.35rem;
        padding: 0rem;
        font-size: clamp(0.75rem, 2.50vw, 0.85rem);
        line-height: 1.35;
        text-align: left;
        box-sizing: border-box;
    }
    #geheim_fileinfo:empty {
        display: none;
    }
    .fileinfo-line {
        display: block;
        width: 100%;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }
    .fileinfo-line:not(:last-child)::after {
        content: "";
    }
    .options-row {
        flex-shrink: 0;
        display: grid;
        grid-template-columns: 45% 45%;
        justify-content: space-between;
        row-gap: 0.50rem;
        margin-top: 0.50rem !important;
        margin-bottom: 0rem;
        width: 100%;
        max-width: 100%;
        min-width: 0rem;
        height: auto !important;
        min-height: 0rem !important;
        box-sizing: border-box;
    }
    .options-col {
        width: 100%;
        max-width: 100%;
        min-width: 0rem;
        box-sizing: border-box;
    }
    .slots-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0rem;
        box-sizing: border-box;
    }
    .slots-container {
        width: 100%;
        max-width: 100%;
        min-width: 0rem;
        height: 6.00rem;
        min-height: 6.00rem;
        padding: 0.20rem clamp(0.15rem, 0.80vw, 0.25rem);
        gap: clamp(0.15rem, 0.80vw, 0.25rem);
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
    }
    .slots-container .slot-item {
        flex: 0 1 auto;
        min-width: 0rem;
    }
    .slots-container .slot-item.empty-slot {
        width: 3.50rem;
        height: 3.50rem;
        max-width: 3.50rem;
        max-height: 3.50rem;
    }
    .slots-container .slot-item.empty-slot .slot-preview-box img {
        max-width: 3.50rem;
        max-height: 3.50rem;
    }
    .slots-container[data-slot-count="1"] .slot-item {
        width: clamp(3.60rem, 13.00vw, 4.40rem);
        height: clamp(3.60rem, 13.00vw, 4.40rem);
        max-width: 4.40rem;
        max-height: 4.40rem;
    }
    .slots-container[data-slot-count="1"] .slot-delete-btn {
        width: 1.30rem;
        height: 1.30rem;
        top: -0.30rem;
        right: -0.30rem;
        font-size: 0.90rem;
    }
    .slots-container[data-slot-count="2"] .slot-item {
        width: clamp(2.80rem, 9.20vw, 3.30rem);
        height: clamp(2.80rem, 9.20vw, 3.30rem);
        max-width: 3.30rem;
        max-height: 3.30rem;
    }
    .slots-container[data-slot-count="2"] .slot-delete-btn {
        width: 1.20rem;
        height: 1.20rem;
        top: -0.25rem;
        right: -0.25rem;
        font-size: 0.80rem;
    }
    .slots-container[data-slot-count="3"] .slot-item {
        width: clamp(2.60rem, 8.20vw, 3.00rem);
        height: clamp(2.60rem, 8.20vw, 3.00rem);
        max-width: 3.00rem;
        max-height: 3.00rem;
    }
    .slots-container[data-slot-count="3"] .slot-delete-btn {
        width: 1.15rem;
        height: 1.15rem;
        top: -0.25rem;
        right: -0.25rem;
        font-size: 0.80rem;
    }
    .slots-container .btn-slot-plus {
        width: 1.80rem;
        height: 1.80rem;
        flex-shrink: 0;
    }

    .password-input,
    .password-input-wrapper,
    .slider-box,
    #btn_lesebestaetigung,
    #btn_passwort_toggle,
    #btn_loeschung {
        width: 100%;
        max-width: none;
        height: 3rem;
        margin-right: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }
    .btn-loeschung-hidden {
        display: none !important;
    }
    .slider-label,
    .options-col label,
    .options-col .label {
        width: 100%;
        text-align: center;
        display: block;
    }
    #tab-attachment .cancel-btn-wrapper,
    #tab-attachment .save-btn-wrapper {
        width: 45%;
        max-width: none;
        flex-shrink: 0;
    }
    #tab-attachment #btn_attachment_cancel_1,
    #tab-attachment #save_attachment {
        width: 100%;
        max-width: none;
        min-width: 0;
    }
    #tab-attachment .modal-tab-footer .attachment-status-wrapper {
        margin: 0;
        min-width: 0;
    }
    .modal-tab-footer,
    #tab-attachment .modal-tab-footer,
    #tab-log .modal-tab-footer,
    #tab-set .modal-tab-footer {
        flex-shrink: 0;
    }
    #tab-attachment .modal-tab-footer {
        padding: 1.0rem 1rem;
    }
}

@media screen and (min-width: 769px) {
    .url-row {
        margin-bottom: clamp(0.50rem, calc(8vh - 2.25rem), 1.50rem);
        margin-bottom: clamp(0.50rem, calc(8dvh - 2.25rem), 1.50rem);
    }
    .options-row {
        margin-top: clamp(2.00rem, calc(16vh - 5.00rem), 2.50rem) !important;
        margin-top: clamp(2.00rem, calc(16dvh - 5.00rem), 2.50rem) !important;
        margin-bottom: 0rem;
    }
    #tab-attachment .modal-body {
        padding-top: clamp(1.00rem, calc(4vh - 0.375rem), 1.50rem) !important;
        padding-top: clamp(1.00rem, calc(4dvh - 0.375rem), 1.50rem) !important;
        padding-bottom: clamp(0rem, calc(10vh - 3.4375rem), 1.25rem) !important;
        padding-bottom: clamp(0rem, calc(10dvh - 3.4375rem), 1.25rem) !important;
    }
    #geheim_fileinfo {
        position: absolute;
        top: 100%;
        left: 0rem;
        margin-top: 0.35rem;
    }
}

@media screen and (min-width: 769px) and (max-height: 34.375rem) {
    .attachmenttextarea {
        height: clamp(2.25rem, calc(94vh - 22rem), 30vh) !important;
        height: clamp(2.25rem, calc(94dvh - 22rem), 30vh) !important;
        min-height: 2.25rem !important;
        padding: 0.25rem 1rem;
        resize: none;
    }
}

@media screen and (min-width: 769px) and (max-height: 25.7978rem) {
    #tab-attachment .modal-body {
        overflow-y: auto;
    }
}



/* --- ADDED FOR MODAL AND FOOTER --- */
:root {
    /* removed --transition-time (from public) */
    /* removed --text-active (from public) */
    /* removed --shadow-std (from public) */
    /* removed --shadow-strong (from public) */
    /* removed --border-primary (from public) */
    /* removed --close-text (from public) */
    /* removed --close-bg (from public) */
    /* removed --clamp-h1 (from public) */
    /* removed --clamp-l (from public) */
    /* removed --clamp-s (from public) */
    /* removed --clamp-h2 (from public) */
    /* removed --clamp-h3 (from public) */
    /* removed --glass-primary (from public) */
    /* removed --accent-hover (from public) */
    /* removed --text-link (from public) */
}
:root[data-theme="dark"] {
    /* removed --text-active (from public) */
    /* removed --shadow-std (from public) */
    /* removed --shadow-strong (from public) */
    /* removed --text-link (from public) */
    /* removed --glass-primary (from public) */
}

.modal-footer {
	font-family: Nunito, Arial, Helvetica;
	font-size: var(--clamp-l);
	display: none;
	position: fixed;
	z-index: 300;
	padding-top: 5rem;
	left: 0rem;
	right: 0rem;
	top: 0rem;
	bottom: 0rem;
	margin-left: auto;
	margin-right: auto;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden;
	backdrop-filter: blur(0.5rem);
	box-shadow: 10px 10px 15px var(--shadow-std);
}

.modal-footer .modal-content {
	position: relative;
	background: var(--glass-modal);
	margin: auto;
	border: 1px solid var(--border-primary);
	border-radius: 3px;
	width: 80%;
	box-shadow: 0px 10px 30px var(--shadow-strong);
	animation-name: slideIn;
	animation-duration: 0.4s;
}

.modal-footer .modal-head {
	padding: 0.2rem 1rem;
	text-align: center;
	background: var(--glass-primary);
	box-shadow: 0px 0px 10px rgba(0, 0, 77, 0.4);
	color: white;
	border-top-left-radius: 1px;
	border-top-right-radius: 1px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.modal-footer .modal-head .ueberschrift {
	margin: 0rem;
}

.modal-footer .modal-body {
	display: block;
	padding: 0.25rem 1rem;
	background: var(--glass-modal);
	height: 60vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	color: var(--text-dark);
}

.modal-footer .close {
	position: absolute; font-weight: bold; border: 1px solid var(--input-border);
	top: 0rem; right: 0rem; transform: translate(33.33%, -33.33%);
	font-size: var(--clamp-h1); width: 2.8rem; height: 2.8rem; aspect-ratio: 1 / 1;
	display: flex; align-items: center; justify-content: center; border-radius: 50%;
	color: var(--close-text); background: var(--close-bg); box-shadow: 0px 0px 6px var(--shadow-strong);
	transition: all 0.3s ease; box-sizing: border-box; padding-bottom: 0.2rem; cursor: pointer;
}
.modal-footer .close:hover, .modal-footer .close:focus {
	color: var(--accent-hover);
	text-decoration: none;
	border: 1px solid var(--accent-color);
	cursor: pointer;
	user-select: none;
	box-shadow: 0px 0px 15px rgba(128, 0, 0, 0.6);
	transform: translate(33.33%, -33.33%) scale(1.2) rotate(90deg);
}

@media screen and (max-width: 768px) {
	.modal-footer {
		padding-top: 0rem;
	}
	.modal-footer .modal-content {
		width: 96%;
		height: calc(100% - 2.5rem);
		margin: 0.8rem auto;
		position: relative;
		top: 0rem;
		transform: none;
		display: flex;
		flex-direction: column;
	}
	.modal-footer .modal-body {
		flex: 1;
		height: auto;
		overflow-y: auto;
	}
}

@keyframes slideIn {
	from { bottom: -30%; opacity: 0; }
	to { bottom: 0rem; opacity: 1; }
}
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-2vh); }
	to { opacity: 1; transform: translateY(0); }
}

footer {
	position: fixed;
	z-index: 1;
	margin-left: auto;
	margin-right: auto;
	width: 100% !important;
	bottom: 0rem;
	transition: transform var(--transition-time) .1s ease-in-out;
}
body.up footer { transform: translate3d(0, 6vh, 0); }
.footer-container {
	display: flex; justify-content: center; width: 100%; gap: 0.3rem; padding: 0rem 10rem; box-sizing: border-box;
}
.tabfooter {
	height: 5vh; display: flex; align-items: center; justify-content: center;
	background: var(--glass-modal); border-top-left-radius: 3px; border-top-right-radius: 3px;
	border-bottom: none; padding: 0rem 0.5rem !important; box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(0.25rem); transition: all 0.3s ease; cursor: pointer;
	user-select: none; text-decoration: none !important; color: inherit;
}
#footer-agb { padding: 0rem 1.5rem !important; }
.tabfooter:hover, .tabfooter.active {
	background: var(--glass-modal); box-shadow: 0px -4px 16px var(--shadow-light);
	transform: translateY(-0.4vh); color: var(--text-active);
}
.mbutton {
	font-family: Yanone Kaffeesatz, Arial, Helvetica; font-size: var(--clamp-l); font-weight: 600;
	display: flex; align-items: center; justify-content: center; color: var(--text-dark);
	text-shadow: 0.5px 0.5px 1px rgba(255, 255, 255, 0.4); text-decoration: none; cursor: pointer; user-select: none;
}
.tabfooter:hover .mbutton, .tabfooter.active .mbutton {
	color: var(--text-active); font-weight: 900;
}

#btn_attachment_cancel_1,
#save_attachment,
#search_log,
#save_log {
    min-width: 9rem;
    width: 100%;
    max-width: 10rem;
    height: 3rem;
    margin: 0;
    box-sizing: border-box;
}

.cancel-btn-wrapper,
.save-btn-wrapper {
    width: 45%;
    max-width: 10rem;
}



/* --- ADDED FOR MODAL FORMATTING & SCROLLBAR --- */
.modal-footer .headline-modal {
	font-size: var(--clamp-h2);
	font-weight: bold;
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
}

.modal-footer .ueberschrift {
	font-size: var(--clamp-h3);
	font-weight: bold;
	margin-top: 0.5rem;
	margin-bottom: 0.25rem;
}

.modal-footer .unterueberschrift {
	font-size: var(--clamp-l);
	font-weight: bold;
	margin-top: 0rem;
	margin-bottom: 0.25rem;
}

.modal-footer p {
	margin-top: 0rem;
	margin-bottom: clamp(1rem, 1.25vw, 1.5rem);
}

.modal-footer .grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0rem 0.6rem;
	align-items: center;
	width: 100%;
}

.modal-footer .modal-body {
	scrollbar-width: thin !important;
	scrollbar-color: rgba(0, 0, 77, 0.5) transparent !important;
}

.modal-footer .modal-body::-webkit-scrollbar {
	display: block !important;
	width: 0.5rem !important;
	height: 0.5rem !important;
	background: transparent !important;
}

.modal-footer .modal-body::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 77, 0.5) !important;
	border-radius: 3px;
}



/* --- LOGIN MODAL CSS --- */
.modal-admin {
	font-family: Nunito, Arial, Helvetica; font-size: var(--clamp-l); display: none; position: fixed; z-index: 300;
	padding-top: 5rem; padding-bottom: 5rem; left: 0%; right: 0%; top: 0%; bottom: 0%; margin-left: auto;
	margin-right: auto; width: 100% !important; height: 100% !important;
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.modal-admin .close {
	position: absolute; font-weight: bold; border: 1px solid var(--input-border); top: 0rem; right: 0rem;
	transform: translate(33.33%, -33.33%); font-size: var(--clamp-h1); width: 2.8rem; height: 2.8rem; aspect-ratio: 1 / 1;
	display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--close-text);
	background: var(--close-bg); box-shadow: 0px 0px 6px var(--shadow-strong); cursor: pointer; transition: all 0.3s ease;
    box-sizing: border-box; padding-bottom: 0.2rem;
}
.modal-admin .close:hover, .modal-admin .close:focus { 
    color: var(--accent-hover); text-decoration: none; border: 1px solid var(--accent-color);
    box-shadow: 0px 0px 15px rgba(128, 0, 0, 0.6); transform: translate(33.33%, -33.33%) scale(1.2) rotate(90deg); 
}
.inputtext { margin-bottom: 1rem; text-align: left; }
.inputtext label { font-weight: bold; margin-bottom: 0rem; display: block; color: var(--text-dark); }
.inputtext input {
	width: 100%; padding: 0.5rem; border: 1px solid var(--input-border); border-radius: 3px; margin-top: 0rem;
	background: var(--input-bg); color: var(--text-dark); font-size: var(--clamp-l); box-sizing: border-box;
}
.inputtext input:focus { border-color: var(--accent-color) !important; box-shadow: 0px 0px 8px rgba(128, 0, 0, 0.3) !important; outline: none !important; background-color: var(--input-bg-focus) !important; }
.status-container { height: 5.5vh; display: flex; justify-content: center; align-items: center; flex-shrink: 0; margin: 0.2rem 0rem 0.2rem 0rem; }

.text-modal-link { color: var(--text-link); text-decoration: underline; font-weight: bold; cursor: pointer; }
.text-modal-link:hover { color: var(--accent-hover); }

.modal-body a, .modal-body a:link, .modal-body a:visited {
    color: var(--text-link); text-decoration: underline; font-weight: bold; cursor: pointer;
    overflow-wrap: break-word;
    word-break: break-all;
}
.modal-body a:hover, .modal-body a:active { color: var(--accent-hover); }
.modal-footer .modal-body a:hover, .modal-footer .text-modal-link:hover { color: var(--primary-color); text-decoration: underline; }
.modal-footer .modal-body a:active, .modal-footer .text-modal-link:active { color: #505050; text-decoration: underline; }

@media screen and (max-width: 768px) {
    .modal-admin { padding-top: 4.5rem; }
}

/* --- LIST FORMATTING IN MODAL --- */
.modal-footer ul {
    padding-left: 2.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.modal-footer li {
    margin-bottom: 0.5rem;
}







/* --- FIX FOR ATTACHMENTLNK.PHP --- */
.standalone-body .modal-admin-standalone {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: fixed !important;
    top: 0vh !important;
    bottom: 5vh !important;
    left: 0% !important;
    right: 0% !important;
    width: 100% !important;
    height: 95vh !important;
    height: calc(100vh - 5vh) !important;
    height: calc(100dvh - 5vh) !important;
    max-height: 95vh !important;
    max-height: calc(100vh - 5vh) !important;
    max-height: calc(100dvh - 5vh) !important;
    padding: 0rem !important;
    margin: 0rem !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
.standalone-body .modal-admin-standalone.is-hidden {
    display: none !important;
}
.standalone-body footer.is-hidden,
.standalone-body .copyright.is-hidden {
    display: none !important;
}

/* --- STANDALONE LOADER (3 PUNKTE) --- */
.standalone-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    position: fixed;
    top: 0vh;
    left: 0%;
    width: 100%;
    height: 100vh;
    z-index: 1000;
}
.standalone-loader.is-hidden {
    display: none !important;
}
.access-pending-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}
.standalone-loader .loading-dot,
.access-pending-loader .loading-dot {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background-color: var(--glass-modal);
    backdrop-filter: blur(0.3125rem);
    box-shadow: 0px 0px 4px var(--shadow-strong);
    border: 1px solid rgba(128, 128, 128, 0.4);
    animation: dotPulse 1.2s infinite ease-in-out both;
}
.standalone-loader .loading-dot:nth-child(1),
.access-pending-loader .loading-dot:nth-child(1) {
    animation-delay: -0.32s;
}
.standalone-loader .loading-dot:nth-child(2),
.access-pending-loader .loading-dot:nth-child(2) {
    animation-delay: -0.16s;
}
.standalone-loader .loading-dot:nth-child(3),
.access-pending-loader .loading-dot:nth-child(3) {
    animation-delay: 0s;
}

@keyframes dotPulse {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: scale(0.75);
    }
    40% {
        opacity: 1;
        transform: scale(1.15);
    }
}
.modal-content-admin {
    position: relative;
    margin: auto;
    border: 1px solid var(--accent-color);
    border-radius: 3px;
    width: 80%;
    background: var(--glass-modal);
    backdrop-filter: blur(10px);
    box-shadow: 0px 10px 30px var(--shadow-strong);
    display: flex;
    flex-direction: column;
}
.standalone-body footer {
    z-index: 301;
}
.standalone-body .copyright {
    z-index: 301;
}
.standalone-body .modal-footer {
    z-index: 350;
}
.lang-switch-modal {
    position: absolute;
    top: 0rem;
    left: 0rem;
    transform: translate(-33.33%, -33.33%);
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0px 0px 6px var(--shadow-strong);
    transition: all 0.3s ease;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 51;
    padding: 0;
    border: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lang-switch-modal img {
    width: 120%;
    height: 120%;
    object-fit: cover;
}
.lang-switch-modal:hover,
.lang-switch-modal:focus-visible {
    box-shadow: 0px 0px 15px rgba(128, 0, 0, 0.6), 0 0 0 1px var(--accent-color);
    transform: translate(-33.33%, -33.33%) scale(1.2);
}
.modal-head {
    padding: 0.2rem 1rem;
    text-align: center;
    background: var(--glass-primary);
    box-shadow: 0px 0px 10px rgba(0, 0, 77, 0.4);
    color: white;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
}
.standalone-body .modal-content-admin .modal-head {
    padding: 0.4375rem 0.9375rem 0.21875rem 0.9375rem !important;
    text-align: center;
    background: transparent !important;
    box-shadow: none !important;
}
.standalone-body .modal-head-logo {
    max-width: 13.75rem;
    width: 100%;
    height: auto;
}
.standalone-body .modal-body.auto-height {
    padding: 0.75rem 1rem 1.5rem 1rem;
}
.auto-height {
    flex: 1 1 auto;
    min-height: 0;
}
.msg-text {
    text-align: center;
    font-size: var(--clamp-l);
    color: var(--text-dark);
}
.msg-text.msg-error {
    color: var(--error-text);
}
.msg-text.msg-warning {
    color: #ffc107;
}
.standalone-body #last-download-notice {
    font-weight: normal;
}
.standalone-body .modal-content-admin {
    width: 96% !important;
    max-width: 56.25rem;
    margin: auto !important;
    height: auto;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border-color: var(--accent-color) !important;
}
#message_container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
}



html.modal-open, body.modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


.standalone-body textarea {
    width: 100%;
    flex: 1;
    margin: 0rem !important;
    box-sizing: border-box;
    min-height: 16.6rem;
    border: 1px solid var(--input-border);
    border-radius: 6px !important;
    background: var(--input-bg);
    color: var(--text-dark);
    padding: 0.5rem;
    resize: vertical;
    font-family: Nunito, Arial, Helvetica, sans-serif;
    font-size: var(--clamp-l);
    box-shadow: 0px 0px 8px var(--shadow-light);
    display: block;
}
.standalone-body textarea:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 8px var(--shadow-accent) !important;
    outline: none !important;
    background-color: var(--input-bg-focus) !important;
}
.standalone-body .logintextarea {
    box-sizing: border-box;
    margin: 0rem 0rem 1rem 0rem !important;
    width: 100%;
    height: 16.6rem !important;
    min-height: 16.6rem !important;
    max-height: 16.6rem !important;
    resize: none !important;
    overflow-y: auto !important;
    display: block;
    flex: none !important;
}
.standalone-body .download-slot-row {
    width: 100%;
    text-align: left;
    padding: 0rem;
    box-sizing: border-box;
    height: 3.85rem;
    min-height: 3.85rem;
    max-height: 3.85rem;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.standalone-body .download-custom,
.standalone-body .download-custom:link,
.standalone-body .download-custom:visited,
.standalone-body .download-custom:hover,
.standalone-body .download-custom:active,
.standalone-body .download-custom:focus {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    color: var(--text-link);
    font-weight: bold;
    font-size: var(--clamp-h3);
    margin-bottom: 0rem;
    height: 3.85rem;
    min-height: 3.85rem;
    max-height: 3.85rem;
    transition: color 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.standalone-body .download-custom img,
.standalone-body .download-custom .slot-text-wrapper,
.standalone-body .download-custom .slot-name,
.standalone-body .download-custom .slot-status,
.standalone-body .download-custom .slot-status-text {
    cursor: pointer;
}
.standalone-body .download-custom .slot-name {
    text-decoration: none;
    color: var(--text-link);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    display: block;
    width: 100%;
    min-width: 0rem;
}
.standalone-body .download-custom:not(.downloading):not(.download-completed):not(.download-aborted):not(.dl-waiting) .slot-status {
    text-decoration: none;
    color: var(--text-link);
}
.standalone-body .download-custom:not(.downloading):not(.download-completed):not(.download-aborted):not(.dl-waiting):hover {
    opacity: 0.8;
    color: var(--primary-color);
    text-decoration: none;
}
.standalone-body .download-custom:not(.downloading):not(.download-completed):not(.download-aborted):not(.dl-waiting):hover .slot-name,
.standalone-body .download-custom:not(.downloading):not(.download-completed):not(.download-aborted):not(.dl-waiting):hover .slot-status {
    color: var(--primary-color);
    text-decoration: none;
}
.standalone-body .download-custom.downloading,
.standalone-body .download-custom.downloading img,
.standalone-body .download-custom.downloading .slot-text-wrapper,
.standalone-body .download-custom.downloading .slot-name,
.standalone-body .download-custom.downloading .slot-status,
.standalone-body .download-custom.downloading .slot-status-text {
    text-decoration: none;
    cursor: default;
}
.standalone-body .download-custom .cancel-dl-btn,
.standalone-body .download-custom .cancel-dl-btn * {
    cursor: pointer;
}
.standalone-body .download-custom.download-completed,
.standalone-body .download-custom.download-aborted {
    text-decoration: none;
}
.standalone-body .download-custom.downloading:hover {
    color: var(--text-link);
    text-decoration: none;
    opacity: 1;
}
.standalone-body .download-custom.download-completed:hover,
.standalone-body .download-custom.download-aborted:hover {
    color: var(--text-link);
    text-decoration: none;
}
.standalone-body .download-custom.downloading .slot-name,
.standalone-body .download-custom.download-completed .slot-name,
.standalone-body .download-custom.download-aborted .slot-name {
    color: var(--text-link);
    text-decoration: none;
}
.standalone-body .download-custom.downloading .slot-status,
.standalone-body .download-custom.download-completed .slot-status {
    color: var(--text-dark);
    text-decoration: none;
}
.standalone-body .download-custom.download-aborted .slot-status {
    color: #dc3545;
    text-decoration: none;
}
.standalone-body .download-custom img {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    flex: 0 0 auto;
}

.standalone-body .slot-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    flex: 1;
    min-width: 0rem;
    width: 100%;
    height: 100%;
}
.standalone-body .slot-status-row {
    position: absolute;
    top: calc(50% + 0.85rem);
    left: 0rem;
    right: 0rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0rem;
    height: 1.05rem;
    min-height: 1.05rem;
    max-height: 1.05rem;
    line-height: 1.05;
    overflow: hidden;
}
.standalone-body .slot-status-row.slot-status-idle {
    display: none;
}
.standalone-body .download-custom .slot-status {
    flex: 1;
    min-width: 0rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.76rem, 0.85vw, 0.95rem);
    line-height: 1.05;
    height: 1.05rem;
}
.standalone-body .slot-status.slot-status-error {
    color: var(--error-text);
    text-decoration: none;
}
.standalone-body .pw-prompt-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 10rem;
    width: 100%;
}
.standalone-body .pw-prompt-box {
    width: 100%;
    max-width: 15rem;
    text-align: center;
    margin-bottom: 0rem;
}
.standalone-body .pw-prompt-box label,
.standalone-body .pw-prompt-box input {
    text-align: center;
}
.standalone-body #sec-pw-error {
    color: var(--error-text);
    font-size: clamp(0.71rem, 0.78vw, 0.85rem);
    margin-top: 0.5rem;
    display: none;
}

.cancel-dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    text-decoration: none;
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1;
}
.cancel-dl-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #dc3545;
    font-family: Arial, Nunito, sans-serif;
    font-weight: bold;
    font-size: clamp(1.01rem, 1.13vw, 1.36rem);
    line-height: 1;
    text-decoration: none;
    transition: transform 0.3s ease;
    transform-origin: center;
}
.cancel-dl-btn:hover .cancel-dl-x {
    transform: scale(1.15);
}




.download-all-container {
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0.8rem;
    min-height: 3rem;
    height: 3rem;
    max-height: 3rem;
    display: flex;
    flex-shrink: 0;
}

.download-all-btn {
    min-height: 3rem;
    height: 3rem;
    max-height: 3rem;
    padding: 0.5rem 1rem;
    font-size: clamp(1.28rem, 1.42vw, 1.7rem);
    font-weight: bold;
    font-family: 'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    border: 1px solid var(--accent-color);
    border-radius: 6px;
    background: var(--glass-accent);
    color: var(--text-light);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 10px var(--shadow-accent);
    cursor: pointer;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    width: 100%;
    flex-shrink: 0;
}

.download-all-btn:hover:not(:disabled):not(.btn-disabled-state) {
    background: rgba(128, 0, 0, 0.8) !important;
    box-shadow: 0px 0px 15px rgba(128, 0, 0, 0.7) !important;
    transform: scale(1.01) !important;
    border-color: #a0a0a0 !important;
}

.download-all-btn:disabled,
.download-all-btn.btn-disabled-state,
.download-all-btn:disabled:hover,
.download-all-btn.btn-disabled-state:hover {
    background-color: #888 !important;
    background: #888 !important;
    color: #ccc !important;
    border-color: #555 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

.standalone-body .download-custom.dl-blocked {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
}

.standalone-body .download-custom.dl-waiting,
.standalone-body .download-custom.dl-waiting:hover {
    cursor: default;
    pointer-events: none;
    text-decoration: none !important;
}

.standalone-body .download-custom.dl-waiting .slot-name {
    text-decoration: none !important;
    color: var(--text-link) !important;
}

.standalone-body .download-custom.dl-waiting .slot-status-row,
.standalone-body .download-custom.dl-waiting .slot-status,
.standalone-body .download-custom.dl-waiting .slot-status-text {
    text-decoration: none !important;
    text-decoration-line: none !important;
    color: var(--text-dark) !important;
}

.standalone-body .download-custom .cancel-dl-btn,
.standalone-body .download-custom .cancel-dl-btn *,
.standalone-body .cancel-dl-btn,
.standalone-body .cancel-dl-x {
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none !important;
    text-decoration-line: none !important;
}

.copyright {
	font-family: Nunito, Arial, Helvetica;
	font-size: var(--clamp-s);
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	position: fixed;
	z-index: 1;
	bottom: 0rem;
	left: 0rem;
	color: #909090;
	user-select: none;
}

/* Zoom-Effekt fuer Dark Mode, Login und Sprache Icons */
.theme-toggle-img, .login-img, .lang-toggle-img { transition: transform 0.3s ease; }
.theme-toggle-btn:hover .theme-toggle-img, .login-btn:hover .login-img, .lang-toggle-btn:hover .lang-toggle-img, .login-btn.active-zoom .login-img { transform: scale(1.15); }


.theme-toggle-img, .login-img, .lang-toggle-img { transform-origin: center; }



@media screen and (max-width: 768px) {
    .copyright {
        writing-mode: horizontal-tb;
        transform: none;
        position: fixed;
        bottom: 0;
        left: 0;
        width: auto;
        text-align: left;
        z-index: 0;
        padding-left: 0.2rem;
        padding-bottom: 0.2rem;
    }
}




.logged-in-user {
    display: flex;
    align-items: center;
}
.user-display {
    margin-right: 1rem;
    font-weight: bold;
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #f0f0f0;
}

/* Zoom-Effekt fuer neue Icons (Log, List, Logout, Attachment) */
.log-img, .set-img, .list-img, .logout-img, .attachment-img { 
    transition: transform 0.3s ease; 
    transform-origin: center; 
}
.log-btn:hover .log-img, .set-btn:hover .set-img, .list-btn:hover .list-img, .logout-btn:hover .logout-img, .attachment-btn:hover .attachment-img { 
    transform: scale(1.15); 
}

.top-controls-right {
    transition: opacity 0.3s ease;
}


.seo-info-container {
    width: 90%;
    margin: 2rem auto;
    padding: 1rem;
}
.seo-info-title {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    margin-bottom: 1rem;
}
.seo-info-text {
    margin-bottom: 1.5rem;
}
.seo-info-subtitle {
    font-size: clamp(1rem, 2vw, 1.4rem);
    margin-bottom: 1rem;
}
.seo-info-question {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    margin-bottom: 0.5rem;
}

/* Zoom-Effekt fuer Info Button */
.info-img { transition: transform 0.3s ease; transform-origin: center; }
.info-btn:hover .info-img { transform: scale(1.15); }







/* Handymodus Anpassungen fuer Header */
@media screen and (max-width: 768px) {
    /* 1. Symbole generell auf 2.75rem Breite/Hoehe reduzieren */
    .tab-button {
        padding: 0.25rem !important;
    }
    .tab-button img {
        height: 2.25rem !important;
        width: 2.25rem !important;
    }
    .login-btn img {
        height: 2.25rem !important;
        width: 2.25rem !important;
    }
    
    /* 2. Logo direkt neben die 3 linken Buttons setzen (Breite = 3 * 2.75 = 8.25rem) */
    .top-controls-center {
        left: 8.25rem !important;
        transform: none !important;
        width: auto !important;
        justify-content: flex-start !important;
        padding-left: 0.25rem !important;
        height: 2.75rem !important;
        padding: 0.25rem !important;
    }
    
    .top-controls-center .logo-img {
        max-width: 7.5rem !important;
    }
    
    /* 3. Logo KOMPLETT ausblenden, ABER NUR, wenn eingeloggt */
    .top-controls-center.is-logged-in,
    body:has(.logged-in-user) .top-controls-center {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* 4. Benutzername unter dem rechten Block platzieren */
    .logged-in-user {
        position: relative;
    }
    .user-display {
        position: absolute;
        top: 2.75rem !important; 
        right: 0.25rem !important;
        font-size: 0.7rem !important;
        margin-right: 0 !important;
        white-space: nowrap;
        color: #f0f0f0 !important;
    }
}

/* --- Admin Tab Umschaltung & Überblendeffekt (CSS Grid Stacking) --- */
.admin-tab-pane {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
}

.admin-tab-pane.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.admin-tab-pane.fade-out {
    opacity: 0;
}

.admin-tab-pane.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* --- Modul: Log (log.php) --- */
#tab-attachment,
#tab-log {
    grid-area: 1 / 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

#tab-log {
    height: 100%;
}

#tab-attachment .modal-body {
    padding: 1.5rem 1rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    color: var(--text-dark);
}

#tab-log .modal-body {
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    color: var(--text-dark);
}

#tab-log .saveForm {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#tab-log .textarea-container {
    padding: 0;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

#tab-log .logintextarea {
    width: 100% !important;
    box-sizing: border-box;
    flex: 1;
    height: 100%;
    min-height: 10rem;
    resize: none;
    overflow-y: auto;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-dark);
    font-family: Nunito, Arial, Helvetica, sans-serif;
    font-size: var(--clamp-l);
    padding: 0.5rem;
    line-height: 1.4;
}

#tab-log .logintextarea:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0px 0px 8px var(--shadow-accent) !important;
    outline: none !important;
    background-color: var(--input-bg-focus) !important;
}

#tab-log .picker-container {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    margin-top: 1rem;
}

#tab-attachment .modal-tab-footer {
    padding: 1.25rem 1rem 1.00rem 1rem;
    flex-shrink: 0;
}

#tab-log .modal-tab-footer {
    flex-shrink: 0;
}

.log-picker-container {
    flex: 1;
    min-width: 8.125rem;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.log-search-label {
    font-size: clamp(0.8rem, 1vw, 1rem);
    color: var(--text-dark);
    margin-bottom: 0.2rem;
    font-weight: bold;
    text-align: left;
}

.log-search-group {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    width: 100%;
}

.log-search-group .unified-input {
    flex: 1;
    min-height: 2.8rem !important;
    height: 2.8rem !important;
}

.fancy-input {
    margin: 0;
    position: relative;
    user-select: none;
}

.custom-select-container {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    min-height: 2.8rem;
    height: 2.8rem;
    padding: 0rem 0.5rem;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-dark);
    font-family: Nunito, Arial, Helvetica, sans-serif !important;
    font-size: var(--clamp-l) !important;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 4px 4px 8px var(--shadow-light);
    box-sizing: border-box;
}

.custom-select-trigger::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-image: var(--arrow-icon);
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}

.custom-select-trigger:hover::after {
    background-image: var(--arrow-icon-focus);
    transform: translateY(-50%) scale(1.15);
    filter: drop-shadow(0px 0px 8px var(--shadow-primary));
}

.custom-select-container.open .custom-select-trigger::after {
    transform: translateY(-50%) rotate(180deg);
}

.custom-select-container.open .custom-select-trigger:hover::after {
    transform: translateY(-50%) rotate(180deg) scale(1.15);
}

.custom-options {
    position: absolute;
    top: calc(100% - 0.06rem);
    left: 0rem;
    right: 0rem;
    z-index: 100;
    background: var(--input-bg);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    border: 1px solid var(--accent-color);
    border-radius: 6px;
    margin-top: 0rem;
    overflow: hidden;
    box-shadow: 0px 0px 10px var(--shadow-accent);
    display: none;
}

.custom-select-container.open .custom-select-trigger {
    border-color: var(--accent-color);
    box-shadow: none;
    background-color: var(--input-bg-focus);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-select-container.open .custom-options {
    display: block;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.custom-option {
    min-height: 2.8rem;
    padding: 0rem 0.5rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-dark);
    font-family: Nunito, Arial, Helvetica, sans-serif;
    font-size: var(--clamp-l);
    background: transparent;
    transition: background 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.custom-option:hover {
    background: var(--glass-accent);
    color: #ffffff;
}

.custom-option.selected {
    font-weight: bold;
}

.log-type-select {
    width: clamp(10rem, 15vw, 15.625rem);
    margin: 0;
}

.log-type-select .custom-options {
    top: auto !important;
    bottom: calc(100% - 0.06rem) !important;
    border-bottom: none !important;
    border-top: 1px solid var(--accent-color) !important;
    border-radius: 6px 6px 0 0 !important;
}

.log-type-select .custom-select-trigger {
    min-height: 2.8rem !important;
    height: 2.8rem !important;
    border-radius: 6px;
}

.log-type-select .custom-select-container.open .custom-select-trigger {
    border-radius: 0 0 6px 6px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--accent-color) !important;
}

.set-status-padding {
    flex: 1;
    text-align: center;
    margin: 0 1rem;
    padding: 0;
}

@media screen and (max-width: 768px) {
    #tab-log .modal-body,
    #tab-set .modal-body {
        padding: 1.5rem 1rem 0.5rem 1rem;
    }
    #tab-attachment .modal-body {
        padding: 1.0rem 1rem 0rem 1rem;
    }
    #tab-attachment .modal-tab-footer {
        padding: 1.00rem 1.00rem;
    }
    #tab-log .textarea-container {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    #tab-log .logintextarea {
        flex: 1 !important;
        min-height: 4rem !important;
        height: 100% !important;
        resize: none;
    }
    #tab-log .picker-container {
        flex-shrink: 0;
    }
}
/* --- Modul: Set (set.php) --- */
#tab-set {
    grid-area: 1 / 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0rem;
}

#tab-set .modal-body {
    flex: 1;
    min-height: 0rem;
    overflow-y: auto;
    padding: 1.50rem 1.00rem 0.50rem 1.00rem;
}

#tab-set .saveForm {
    flex: 1;
    min-height: 0rem;
}

#tab-set .modal-tab-footer {
    flex-shrink: 0;
}

.set-form-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}

.set-block {
    width: 45%;
    margin: 0rem 0rem 1.50rem 0rem;
    padding: 0rem;
    box-sizing: border-box;
}

.set-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 3.00rem;
    margin: 0rem 0rem 0.50rem 0rem;
    padding: 0.25rem 0.50rem;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.04);
}

.set-title-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.set-title {
    font-size: clamp(1.08rem, 1.20vw, 1.44rem);
    font-weight: bold;
    color: var(--text-dark);
}

.set-subtitle {
    font-size: clamp(0.47rem, 0.52vw, 0.63rem);
    color: var(--text-gray);
}

.set-storage-group {
    display: flex;
    align-items: center;
    gap: 1.00rem;
}

.set-storage-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.set-storage-val-wrap {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(1.08rem, 1.20vw, 1.44rem);
    font-weight: bold;
    color: var(--text-dark);
}

.set-storage-value {
    font-family: inherit;
    font-size: clamp(1.08rem, 1.20vw, 1.44rem);
    font-weight: bold;
    color: var(--text-dark);
    white-space: nowrap;
    display: inline-block;
    transition: opacity 0.4s ease-in-out;
}

.set-storage-value.crossfade-in {
    opacity: 0 !important;
    transition: none !important;
}

.set-storage-value.crossfade-active {
    opacity: 1 !important;
    transition: opacity 0.4s ease-in-out !important;
}

.set-storage-clone {
    position: absolute;
    left: 0rem;
    right: 0rem;
    top: 0rem;
    bottom: 0rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    user-select: none;
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
    font-family: inherit;
    font-size: clamp(1.08rem, 1.20vw, 1.44rem);
    font-weight: bold;
    color: var(--text-dark);
    white-space: nowrap;
}

.set-storage-clone.fade-out {
    opacity: 0;
}

.set-storage-item .set-subtitle {
    white-space: nowrap;
}

.set-value {
    font-size: clamp(1.08rem, 1.20vw, 1.44rem);
    font-weight: bold;
    color: var(--text-dark);
    text-align: right;
    white-space: nowrap;
}

.set-dots {
    display: inline-block;
    text-align: left;
    min-width: 2.00rem;
}

.set-control-group {
    display: grid;
    grid-template-columns: max-content auto;
    column-gap: 0.50rem;
    row-gap: 0.40rem;
    width: max-content;
    margin: 0rem 0rem 0.60rem 0.50rem;
}

#tab-set .pol-row {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 0.50rem;
    margin: 0rem;
    padding: 0rem;
    width: max-content;
}

#tab-set .pol-check-box-container {
    width: 1.50rem !important;
    min-width: 1.50rem !important;
    height: 1.50rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    margin: 0rem !important;
    padding: 0rem !important;
    box-sizing: border-box !important;
}

#tab-set .pol-label {
    font-size: clamp(0.90rem, 1.00vw, 1.20rem);
    color: var(--text-dark);
    margin: 0rem;
    cursor: pointer;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.set-input-row {
    display: contents;
}

.set-limit-input {
    grid-column: 1;
    width: 100%;
    min-height: 2.00rem;
    padding: 0.25rem 0.50rem;
    box-sizing: border-box;
    font-family: 'Nunito', Arial, Helvetica, sans-serif;
    font-size: clamp(0.90rem, 1.00vw, 1.20rem);
    color: var(--text-dark);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background-color: var(--input-bg);
    margin: 0rem;
}

.set-limit-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0px 0px 8px var(--shadow-accent);
    outline: none;
    background-color: var(--input-bg-focus);
}

.set-limit-input:disabled {
    background-color: rgba(180, 180, 180, 0.4);
    color: #666666;
    border-color: #888888;
    cursor: not-allowed;
}

:root[data-theme="dark"] .set-limit-input:disabled {
    background-color: rgba(60, 60, 70, 0.5);
    color: #777777;
    border-color: #555555;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .set-limit-input:disabled {
        background-color: rgba(60, 60, 70, 0.5);
        color: #777777;
        border-color: #555555;
    }
}

.set-unit {
    grid-column: 2;
    align-self: center;
    font-size: clamp(0.71rem, 0.78vw, 0.94rem);
    color: var(--text-dark);
    white-space: nowrap;
}

/* --- Checkbox (aus area.mcit-service.at, pol.php) --- */
.pol-row {
    display: flex;
    align-items: center;
    gap: 0.50rem;
    margin-bottom: 0.40rem;
    width: 100%;
    flex-wrap: wrap;
}

.pol-label {
    font-size: clamp(0.90rem, 1.00vw, 1.20rem);
    color: var(--text-dark);
    margin: 0rem 0rem 0rem 0.50rem;
    cursor: pointer;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.pol-check-box-container {
    width: 3.00rem !important;
    min-width: 3.00rem !important;
    height: 1.50rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0rem !important;
    padding: 0rem !important;
    box-sizing: border-box !important;
}

.pol-check-box-container .user-checkbox {
    margin: 0rem !important;
}

.pol-row input[type="checkbox"]:disabled {
    cursor: not-allowed;
    filter: grayscale(1) brightness(0.8) opacity(0.6);
}

.pol-row input[type="checkbox"]:disabled+.pol-label {
    color: #888888;
    cursor: not-allowed;
}

input[type="checkbox"].user-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 1.50rem !important;
    height: 1.50rem !important;
    min-width: 1.50rem !important;
    min-height: 1.50rem !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    border: 1px solid var(--input-border, #cccccc) !important;
    border-radius: 6px !important;
    background: var(--input-bg1) !important;
    box-shadow: 0px 0px 8px var(--shadow-light) !important;
    cursor: pointer !important;
    margin: 0rem !important;
    padding: 0rem !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
}

input[type="checkbox"].user-checkbox::before {
    content: none !important;
}

input[type="checkbox"].user-checkbox::after {
    content: "" !important;
    position: absolute !important;
    top: 0rem !important;
    left: 0rem !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='inner-grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%239bd940' /%3E%3Cstop offset='100%25' stop-color='%2318863a' /%3E%3C/linearGradient%3E%3ClinearGradient id='bevel-grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23c1f067' /%3E%3Cstop offset='100%25' stop-color='%2314752e' /%3E%3C/linearGradient%3E%3Cfilter id='shadow' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='2' dy='5' stdDeviation='3' flood-color='%230e5420' flood-opacity='0.6' /%3E%3C/filter%3E%3C/defs%3E%3Crect x='10' y='14' width='180' height='180' rx='40' fill='%231b8532' /%3E%3Crect x='10' y='10' width='180' height='180' rx='40' fill='%2342a838' /%3E%3Crect x='22' y='22' width='156' height='156' rx='30' fill='url(%23inner-grad)' /%3E%3Crect x='22' y='22' width='156' height='156' rx='30' fill='none' stroke='url(%23bevel-grad)' stroke-width='4' opacity='0.7'/%3E%3Cpath d='M 65 105 L 88 128 L 138 68' fill='none' stroke='%23f2f5f2' stroke-width='22' stroke-linecap='round' stroke-linejoin='round' filter='url(%23shadow)' /%3E%3C/svg%3E") !important;
    background-size: 115% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    display: block !important;
}

input[type="checkbox"].user-checkbox:checked::after {
    opacity: 1 !important;
}

input[type="checkbox"].user-checkbox:checked {
    border-style: solid !important;
}

@media screen and (max-width: 768px) {
    .set-block {
        width: 100%;
    }
    .standalone-body .modal-admin-standalone {
        top: 0vh !important;
        bottom: 5vh !important;
        height: 95vh !important;
        height: calc(100vh - 5vh) !important;
        height: calc(100dvh - 5vh) !important;
        max-height: 95vh !important;
        max-height: calc(100vh - 5vh) !important;
        max-height: calc(100dvh - 5vh) !important;
        padding: 0rem !important;
    }
    .standalone-body .modal-content-admin {
        margin: auto !important;
    }
    .standalone-body .logintextarea {
        height: 8.5rem !important;
        min-height: 6rem !important;
        max-height: 10rem !important;
        margin: 0rem 0rem 0.6rem 0rem !important;
    }
    .standalone-body .modal-body.auto-height {
        padding: 0.3rem 0.6rem 0.6rem 0.6rem !important;
    }
}

/* --- Modul: List (list.php - Offene Nachrichten) --- */
:root {
    --grid-row-even: rgba(0, 0, 0, 0.03);
    --grid-row-odd: transparent;
    --grid-cell-readonly: rgba(0, 0, 0, 0.06);
    --attachment-spalte1: minmax(5.2rem, 14%);
    --attachment-spalte2: minmax(2.7rem, 8.5%);
    --attachment-spalte3: minmax(3.3rem, 1fr);
    --attachment-spalte4: minmax(2.1rem, 5.5%);
    --attachment-spalte5: minmax(4.1rem, 11%);
    --attachment-spalte6: minmax(2.7rem, 9%);
    --attachment-spalte7: minmax(4.9rem, 11.5%);
    --attachment-spalte8: minmax(1.9rem, 4.5%);
}

#tab-list {
    grid-area: 1 / 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 0rem;
    min-height: 100%;
    overflow: hidden;
}

#tab-list .list-modal-body {
    flex: 1;
    min-height: 0rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1.00rem 1.00rem 0.50rem 1.00rem;
}

.attachment-form-flex {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0rem;
}

.list-headline-wrap {
    text-align: center;
    margin-bottom: 0.35rem;
    flex-shrink: 0;
}

.list-headline {
    color: var(--text-dark);
    margin: 0rem;
    font-size: clamp(1.08rem, 1.20vw, 1.44rem);
}

.custom-scrollbar {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 77, 0.5) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 0.50rem;
    height: 0rem;
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 77, 0.5);
    border-radius: 3px;
}

.attachment-table-wrapper {
    container-type: inline-size;
    container-name: tableWrapper;
    width: 100%;
    max-width: 100%;
    flex: 0 1 auto;
    min-height: 0rem;
    margin: 0rem auto;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: relative;
    border: 1px solid var(--input-border);
    border-radius: 3px;
    box-shadow: 0px 0px 8px var(--shadow-light);
    background: var(--input-bg);
}

.data-grid-inner {
    width: 100%;
    max-width: 100%;
    display: block;
    overflow: hidden;
}

.attachment-grid {
    display: grid;
    grid-template-columns: var(--attachment-spalte1) var(--attachment-spalte2) var(--attachment-spalte3) var(--attachment-spalte4) var(--attachment-spalte5) var(--attachment-spalte6) var(--attachment-spalte7) var(--attachment-spalte8);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.grid-header-row {
    position: sticky;
    top: 0rem;
    background-color: var(--table-header-bg);
    color: var(--text-dark);
    font-family: Nunito, Arial, Helvetica, sans-serif;
    font-size: var(--clamp-l);
    font-weight: bold;
    z-index: 10;
    border-bottom: 1px solid var(--input-border);
}

.grid-row {
    border-bottom: 1px solid var(--input-border);
}

.grid-row:nth-child(even) {
    background-color: var(--grid-row-even);
}

.grid-row:nth-child(odd) {
    background-color: var(--grid-row-odd);
}

.grid-row:last-child {
    border-bottom: none;
}

.grid-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--input-border);
    overflow: hidden;
}

.grid-cell:last-child {
    border-right: none;
}

.grid-row .grid-cell.readonly-cell {
    background-color: var(--grid-cell-readonly);
}

.grid-header-row .grid-cell {
    padding: 0.25rem 0rem;
    text-align: center;
    min-height: 2.80rem;
    white-space: nowrap;
}

.grid-row .grid-cell {
    min-height: 2.50rem;
}

.readonly-text {
    padding: 0rem 0.40rem;
    margin: 0rem;
    color: var(--text-dark);
    height: 100%;
    min-height: 2.50rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    width: 100%;
    min-width: 0rem;
    font-size: var(--clamp-l);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: transparent;
}

.grid-row .readonly-text.link-cell-text {
    justify-content: center !important;
    text-align: center !important;
}

.btn-table-copy {
    background: transparent;
    border: none;
    padding: 0rem;
    margin: 0rem;
    cursor: pointer;
    color: var(--text-dark);
    opacity: 0.8;
    width: 1.4rem;
    height: 1.4rem;
    min-height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-table-copy:hover {
    opacity: 1;
    transform: scale(1.15);
    cursor: pointer;
}

.btn-table-copy svg {
    width: 1.4rem;
    height: 1.4rem;
    display: block;
    pointer-events: none;
}

.copy-attachment-link {
    cursor: pointer;
}

.file-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 2.50rem;
}

.file-icon-wrapper img {
    width: 1.20rem;
    height: 1.20rem;
    margin: 0rem 0.08rem;
    object-fit: contain;
}

.trash-btn {
    background: transparent;
    border: none;
    padding: 0rem;
    margin: 0rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 2.50rem;
}

.trash-btn img {
    width: 1.20rem;
    height: 1.20rem;
    object-fit: contain;
    transition: transform 0.2s ease-in-out;
}

.trash-btn:hover img {
    transform: scale(1.15);
}

.grid-body > .empty-row:last-child .trash-btn {
    display: none !important;
}

.col-downloads .txt-downloads-short {
    display: none;
}

.col-downloads .txt-downloads-full {
    display: inline;
}

.attachment-grid.compact-dls {
    --attachment-spalte7: var(--attachment-spalte4);
}

.attachment-grid.compact-dls .col-downloads .txt-downloads-full {
    display: none !important;
}

.attachment-grid.compact-dls .col-downloads .txt-downloads-short {
    display: inline !important;
}

@container tableWrapper (max-width: 27rem) {
    .attachment-grid {
        --attachment-spalte7: var(--attachment-spalte4);
    }

    .attachment-grid .col-downloads .txt-downloads-full {
        display: none !important;
    }

    .attachment-grid .col-downloads .txt-downloads-short {
        display: inline !important;
    }
}

@media screen and (max-width: 768px) {
    .attachment-grid {
        grid-template-columns: var(--attachment-spalte1) var(--attachment-spalte2) var(--attachment-spalte3) var(--attachment-spalte4) var(--attachment-spalte6) var(--attachment-spalte7) var(--attachment-spalte8);
    }

    .attachment-grid > .col-anhang,
    .attachment-grid > .grid-cell:nth-child(5) {
        display: none !important;
    }
}


/* Einheitliche Variablen: Statusmeldungen (success/error) und Statusinformationen (info) */
:root {
	--status-message-duration: 10000;
	--status-message-display: block;
	--status-info-display: block;
}

.success-box,
.error-box {
	display: var(--status-message-display) !important;
}

.info-box {
	display: var(--status-info-display) !important;
}

/* Handyansicht: Statusmeldungen aus, Statusinformationen ein */
@media screen and (max-width: 768px) {
	:root {
		--status-message-display: none;
		--status-info-display: block;
	}
}