/* Basis-Tabelle */
.blocktable {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    -webkit-border-horizontal-spacing: 2px;
    -webkit-border-vertical-spacing: 2px;
    border-top-color: gray;
    table-layout: fixed;
}

.blocktable td,
.blocktable th {
    vertical-align: middle;
    padding: 12px 16px;
}

/* Kopfzeilen-Stil */
.blocktable th {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .33);
    font-weight: 600;
    background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 100%);
    text-align: left;
    white-space: nowrap;
}


.blocktable td {
    border-top: 1px solid rgba(0, 0, 0, .066);
    vertical-align: middle;
}

.blocktable th.align-right,
.blocktable td.align-right {
    text-align: right !important;
}

.blocktable th.align-center,
.blocktable td.align-center {
    text-align: center !important;
}

.blocktable.valigntop th,
.blocktable th.valigntop,
.blocktable.valigntop td,
.blocktable td.valigntop,
.blocktable td.valigntop > * {
    vertical-align: top !important;
}

/* Stripes nur auf Datenzellen anwenden */
.blocktable.striped tr:nth-of-type(even) > td {
    background: rgba(0, 0, 0, 0.022);
}

/* Zeilen-Header (Header-Spalte) NIE stripen */
.blocktable.striped tr:nth-of-type(even) > th[scope="row"] {
    background: #f5f5f5 !important;
}

/* Header-Spalte visuell abheben (immer) */
.blocktable th[scope="row"] {
    background: #f5f5f5;
    border-right: 1px solid rgba(0, 0, 0, .1);
}

/* Kopfzeilen erste Zelle: Haarlinie ausblenden */
.blocktable thead th[scope="col"]:first-child {
    border-right: none;
}

/* Optional: Zeilen-Header immer fett */
.blocktable th[scope="row"] strong {
    font-weight: 600;
}

/* Stripe-Selektion */
.blocktable.striped tr.selected > td {
    background: var(--us-highlight-color-20p) !important;
}

/* Hover-Linie */
.blocktable.hoverline > tbody > tr:hover > td {
    background: linear-gradient(180deg, rgba(246, 246, 246, 0) 0%, rgba(246, 246, 246, 1) 100%);
    color: #000000;
    transition: var(--us-transition);
}

/* Hover selektierter Zeile */
.blocktable.hoverline > tbody > tr.selected:hover > td {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%);
    color: #000000;
    transition: var(--us-transition);
}

.blocktable th > .caption {
    display: block;              /* Sicherstellen, dass die Caption auf neuer Zeile ist */
    font-weight: 300 !important;
    white-space: normal !important;  /* Zeilenumbruch erlauben */
    max-width: 100%;                /* Begrenze die Breite */
    word-break: break-word;          /* Worte umbrechen, wenn nötig */
    text-align: inherit;            /* Textausrichtung erben */
}

/* Horizontale Ausrichtung */
.blocktable th.align-left,
.blocktable td.align-left {
    text-align: left !important;
}

.blocktable th.align-center,
.blocktable td.align-center {
    text-align: center !important;
}

.blocktable th.align-right,
.blocktable td.align-right {
    text-align: right !important;
}

/* Vertikale Ausrichtung */
.blocktable th.align-top,
.blocktable td.align-top,
.blocktable td.align-top > * {
    vertical-align: top !important;
}

.blocktable th.align-middle,
.blocktable td.align-middle,
.blocktable td.align-middle > * {
    vertical-align: middle !important;
}

.blocktable th.align-bottom,
.blocktable td.align-bottom,
.blocktable td.align-bottom > * {
    vertical-align: bottom !important;
}

/* Fallback: Alle unbekannten align-*-Klassen verhalten sich wie top/left */
.blocktable th[class*="align"]:not(.align-left):not(.align-center):not(.align-right):not(.align-top):not(.align-middle):not(.align-bottom),
.blocktable td[class*="align"]:not(.align-left):not(.align-center):not(.align-right):not(.align-top):not(.align-middle):not(.align-bottom) {
    text-align: left !important;
    vertical-align: top !important;
}
.blocktable [contenteditable="true"]:focus {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important; /* Für Safari */
}

.blocktable .general-purpose-element-selection {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
}
.current-block .blocktable th > strong[contenteditable="true"],
.current-block .blocktable td > span[contenteditable="true"]:not(.caption) {
    display: block;
    max-width: 100%;
    word-break: break-word;
    text-align: inherit;
}

/* Responsive Design */
@media (max-width: 768px) {
    .blocktable {
        display: block;
        width: 100%;
        overflow: hidden;
    }

    .blocktable thead {
        display: none;
    }

    .blocktable tbody {
        display: block;
    }

    .blocktable tr {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        padding: 0.75rem;
    }

    .blocktable td,
    .blocktable th[scope="row"] {
        display: grid;
        grid-template-columns: 40% 60%;
        padding: 0.5rem 0;
        border: none;
        align-items: start;
    }

    .blocktable td::before,
    .blocktable th[scope="row"]::before {
        content: attr(aria-label);
        font-weight: bold;
        padding-right: 1rem;
        text-align: left;
        display: block;
    }

    .blocktable th[scope="row"] {
        background: #f5f5f5;
    }

    .blocktable .caption {
        font-size: 0.9em;
        margin-top: 0.2em;
    }
}