/* -------------------------------------------- */
/* VAPAGUIDE 24 */
/* Version: 56 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* StyleSheet Scope: 
Standard components */
/* -------------------------------------------- */

/* -------------------------------------------- */
/* !Initialization of all interactive elements */
/* -------------------------------------------- */

/* !--- Initalize abstract buttons */
.tt-eins button {
	border: none;
	border-radius: 0;
	display: inline-block;
	margin: 0;
	padding: 0;
	background: none;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	text-align: inherit;
    color: inherit;
	cursor: pointer;
	overflow: hidden;
	-webkit-appearance: none;
}

.tt-eins button:not([class]):active {
	color: inherit;
}

/* !--- Initalize abstract links */
.tt-eins a {
	display: inline-block;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}


/* -------------------------------------------- */
/* !COMPONENT: Links */
/* Only used within .substance-richtext */
/* -------------------------------------------- */

.tt-eins .link-action {
    color: var(--textcolor-flow-link);
    display: inline;
    transition: var(--transition-universal);
}

.tt-eins .link-action:before {
    content: "";
    display: inline-block;
    vertical-align: baseline;
    height: calc(1cap + 4px);
    width: 20px;
    margin-right: 5px;
    margin-bottom: -2px;
    background: var(--backcolor-flow-link) center center var(--asset-action-link) no-repeat;
    background-size: 72%;
    transition: var(--transition-universal);
}

/* Links to external websites */
.tt-eins .link-action:is(.action-external, .external-link):before {
    background-image: var(--asset-action-link-external);
    background-size: 50%;
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .link-action:hover {
        color: var(--textcolor-flow-link-hover);
        text-decoration: underline;
        transition: var(--transition-universal);
        
        &:before {
            background-color: var(--backcolor-flow-link-hover);
            transition: var(--transition-universal);
        }
    }
}

.tt-eins .link-action:active, 
.tt-eins .link-action:focus-visible {
    outline: none;
    color: var(--textcolor-flow-link-focus);
    text-decoration: underline;
    transition: var(--transition-universal);
    
    &:before {
        background-color: var(--backcolor-flow-link-focus);
    }
}


/* -------------------------------------------- */
/* !COMPONENT: Expander actions */
/* -------------------------------------------- */

.tt-eins .expand-action {
    position: relative;
    padding-left: 18px;
    overflow: visible;
}

.tt-eins .expand-action:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 9px;
    height: 18px;
    background: transparent center url("./img/icons/icon_arrow_right_land.svg") no-repeat;
    transition: var(--transition-universal);
}

.tt-eins .expand-action.item-active:before {
    transform: rotateZ(90deg);
    transition: var(--transition-universal);
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .expand-action:hover {
        color: var(--textcolor-link-hover);
        text-decoration: underline;
        transition: var(--transition-universal);
    }
}

.tt-eins .expand-action:active, 
.tt-eins .expand-action:focus-visible {
    outline: none;
    color: var(--textcolor-link-focus);
    text-decoration: underline;
    transition: var(--transition-universal);
}


/* -------------------------------------------- */
/* !COMPONENT: Menu actions */
/* -------------------------------------------- */

/* !--- Standard menu entry */
.tt-eins .menu-action {
    font: var(--textset-m);
    text-wrap: pretty;
    color: var(--textcolor-link);
    width: 100%;
    max-width: 100%;
    padding: 6px 0 6px 0;
}

/* External menu links */
.tt-eins .menu-action.action-external {
    text-decoration: underline;
}

/* Annotations */
.tt-eins .menu-action mark {
    display: block;
    font: var(--textset-s);
    color: var(--textcolor-link-low);
    margin-top: 3px;
}

/* Selected menu entry */
 .tt-eins .item-active .menu-action {
    transition: var(--transition-universal);
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .menu-action:hover {
        color: var(--textcolor-link-hover);
        text-decoration: underline;
        transition: var(--transition-universal);
    }
}

.tt-eins .menu-action:active, 
.tt-eins .menu-action:focus-visible {
    outline: none;
    color: var(--textcolor-link-focus);
    text-decoration: underline;
    transition: var(--transition-universal);
}


/* !--- Menu entries with standard icon */
.tt-eins .menu-action.action-icon {
    position: relative;
    padding-left: 18px;
    --iconcolor-standard: var(--vapa-general);
    --iconcolor-highlight: var(--vapa-nature-100);
}

.tt-eins .section-land .menu-action.action-icon, 
.tt-eins .expression-land .menu-action.action-icon {
    --iconcolor-standard: var(--vapa-earth-50);
    --iconcolor-highlight: var(--vapa-earth-100);
}

.tt-eins .section-water .menu-action.action-icon, 
.tt-eins .expression-water .menu-action.action-icon {
    --iconcolor-standard: var(--vapa-marine-50);
    --iconcolor-highlight: var(--vapa-marine-100);
}

.tt-eins .section-hybrid .menu-action.action-icon, 
.tt-eins .expression-hybrid .menu-action.action-icon {
    --iconcolor-standard: var(--vapa-accent-50);
    --iconcolor-highlight: var(--vapa-accent-100);
}

.tt-eins .menu-action.action-icon:before {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: var(--iconcolor-standard);
}

.tt-eins .menu-action.action-icon.icon-search:before {
    width: 16px;
    height: 16px;
    top: 6px;
    left: -3px;
    background: transparent url("./img/icons/icon_search_global.svg") no-repeat;
}

/* Interaction states */
.tt-eins .menu-action:active:before, 
.tt-eins .menu-action:focus-visible:before {
    background-color: var(--iconcolor-highlight);
}


/* !--- Backlink menu entries */
.tt-eins .menu-action.action-icon.icon-back {
    font: var(--textset-l);
    font-weight: 400;
    padding-left: 28px;
}

.tt-eins .menu-action.action-icon.icon-back:before {
    content: "";
    position: absolute;
    top: 10px;
    left: -4px;
    width: 24px;
    height: 12px;
    background: transparent center no-repeat;
    background-size: 17px;
}

.tt-eins .menu-action.action-icon.icon-back:before {
    background-image: url("./img/icons/icon_arrow_left.svg");
}

.tt-eins .menu-action.action-icon.icon-back:focus-visible:before {
    background-color: transparent;
}


/* !--- Menu entries with captioned content images */
.tt-eins .menu-action.action-qualifier {
    padding-top: 4px;
    padding-bottom: 4px;
}

.tt-eins .menu-section.qualifier-large .menu-action.action-qualifier {
    padding-top: 0;
    padding-bottom: 0;
}

.tt-eins .menu-action.action-qualifier .substance-media {
    display: flex;
    column-gap: 10px;
    align-items: center;
}

.tt-eins .menu-section.qualifier-large .menu-action.action-qualifier .substance-media {
    flex-direction: column;
}

.tt-eins .menu-action.action-qualifier .substance-media .media-image {
    width: 40px;
    height: 40px;
}

.tt-eins .menu-section.qualifier-large  .menu-action.action-qualifier .substance-media .media-image {
    width: auto;
    height: 80px;
    margin-bottom: 8px;
}

.tt-eins .menu-section.qualifier-large  .menu-action.action-qualifier .substance-media figcaption {
    text-align: center;
}

@media only screen and (max-width: 736px) {
    .tt-eins .menu-section.qualifier-large  .menu-action.action-qualifier .substance-media .media-image {
        width: 100%;
    }
}


/* !--- Illustrated menu entries */
.tt-eins .menu-action.action-illu {
    position: relative;
    padding: 8px 0 8px 30px;
    font: var(--textset-l);
    font-weight: 400;
    min-height: 23px;
    border-bottom: var(--line-light);
}

.tt-eins .menu-item:last-child > .menu-action.action-illu {
    border-bottom: none;
}

.tt-eins .menu-action.action-illu:before {
    content: "";
    position: absolute;
    top: 4px;
    left: -4px;
    width: 24px;
    height: 24px;
    background: transparent center no-repeat;
    background-size: 24px;
}

/* Icons */
.tt-eins .menu-action.action-illu.illu-emergency:before {
    background-image: url("./img/illus/navigation/aspect_emergency_external.svg");
}

.tt-eins .menu-action.action-illu.illu-doctors:before {
    background-image: url("./img/illus/navigation/aspect_doctors_external.svg");
}

.tt-eins .menu-action.action-illu.illu-diagnosis:before {
    background-image: url("./img/illus/navigation/aspect_diagnosis_external.svg");
}

.tt-eins .menu-action.action-illu.illu-biomedical:before {
    background-image: url("./img/illus/navigation/aspect_biomedical_external.svg");
}

.tt-eins .menu-action.action-illu.illu-identification:before {
    background-image: url("./img/illus/navigation/aspect_general_external.svg");
}

.tt-eins .menu-action.action-illu.illu-distribution:before {
    background-image: url("./img/illus/navigation/aspect_distribution_external.svg");
}


/* -------------------------------------------- */
/* !COMPONENT: Primary actions */
/* -------------------------------------------- */

/* !--- Standard button */
.tt-eins .primary-action {
    position: relative;
    font: var(--textset-m);
    color: var(--text-primary);
    background-color: var(--back-primary);
    line-height: var(--primary-action-height);
    height: var(--primary-action-height);
    border: none;
    padding: 0 15px 0 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: var(--transition-universal);
    
    --back-primary: transparent;
    --back-primary-hover: var(--vapa-black-10-alpha);
    --back-primary-focus: var(--vapa-black-100);
    --text-primary: var(--textcolor-link);
    --text-primary-hover: var(--textcolor-link-hover);
    --text-primary-focus: var(--textcolor-link-focus);
}

.tt-eins .primary-action.icon-confirm, 
.tt-eins .primary-action.icon-menu, 
.tt-eins .primary-action.icon-search-global {
    --back-primary: var(--vapa-black-100);
    --back-primary-focus: var(--vapa-white);
    --text-primary: var(--vapa-white);
}

.tt-eins .primary-action.icon-close {
    --back-primary: var(--vapa-black-100);
    --back-primary-focus: var(--vapa-black-30);
    --text-primary: var(--vapa-white);
}

.tt-eins .primary-action[disabled] {
    --back-primary: transparent;
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .primary-action[disabled]:hover {
        cursor: initial;
    }
    
    .tt-eins .primary-action:not([disabled]):hover {
        color: var(--text-primary-hover);
        background-color: var(--back-primary-hover);
        transition: var(--transition-universal);
    }
}

.tt-eins .primary-action:not([disabled]):active, 
.tt-eins .primary-action:not([disabled]):focus-visible {
    outline: none;
    color: var(--text-primary-focus);
    background-color: var(--back-primary-focus);
    transition: var(--transition-universal);
}


/* !--- Icons */
/* Icon positioning */
.tt-eins .primary-action.action-icon {
    margin-left: calc(var(--primary-icon-width) + 2px);
    padding-left: 8px;
    overflow: visible;
}

.tt-eins .primary-action.action-icon:before {
    content: "";
    position: absolute;
    left: -52px;
    top: 0;
    width: var(--primary-icon-width);
    height: var(--primary-action-height);
    background: var(--back-primary) 0 0 no-repeat;
    transition: var(--transition-color);
}

/* Icon-only button */
.tt-eins .primary-action.action-icon.icon-only {
    border: none;
    margin-left: 0;
    width: 50px;
    padding: 0;
    overflow: hidden;
    color: transparent !important;
}

.tt-eins .primary-action.action-icon.icon-only:before {
    left: 50%;
    margin-left: calc(-1 * var(--primary-icon-width) / 2);
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .primary-action.action-icon:not([disabled]):hover:before {
        background-position: 0 -70px;
        background-color: var(--back-primary-hover);
        transition: var(--transition-color);
    }
}

.tt-eins .primary-action.action-icon:not([disabled]):active:before, 
.tt-eins .primary-action.action-icon:not([disabled]):focus-visible:before {
    background-position: 0 -140px;
    background-color: var(--back-primary-focus);
    transition: var(--transition-color);
}

/* Icon symbols */
.tt-eins .primary-action.icon-confirm:before {
    background-image: url("./img/icons/iconsprite_primary_confirm.svg");
}

.tt-eins .primary-action.icon-search:before {
    background-image: url("./img/icons/iconsprite_primary_search.svg");
}

.tt-eins .primary-action.icon-search-global:before {
    background-image: url("./img/icons/iconsprite_primary_search_global.svg");
}

.tt-eins .primary-action.icon-menu:before {
    background-image: url("./img/icons/iconsprite_primary_menu_v2.svg");
}

.tt-eins .primary-action.icon-top:before {
    background-image: url("./img/icons/iconsprite_primary_top_v2.svg");
}

.tt-eins .primary-action.icon-close:before {
    background-image: url("./img/icons/iconsprite_primary_close.svg");
}

.tt-eins .primary-action.icon-more:before {
    background-image: url("./img/icons/iconsprite_primary_showmore.svg");
}

.tt-eins .primary-action.icon-less:before, 
.tt-eins .primary-action.icon-more.item-active:before {
    background-image: url("./img/icons/iconsprite_primary_showless.svg");
}


/* -------------------------------------------- */
/* !COMPONENT: View actions */
/* -------------------------------------------- */

/* !--- Standard view switcher */
.tt-eins .view-action {
    position: relative;
    padding-right: 24px;
    color: var(--textcolor-link);
    transition: var(--transition-color);
}

.tt-eins .view-action[disabled] {
    cursor: default;
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .view-action:not([disabled]):not(.primary-action):hover {
        text-decoration: underline;
        color: var(--textcolor-link-hover);
        transition: var(--transition-color);
    }
}

.tt-eins .view-action:not([disabled]):not(.primary-action):active, 
.tt-eins .view-action:not([disabled]):not(.primary-action):focus-visible {
    outline: none;
    text-decoration: underline;
    color: var(--textcolor-link-focus);
    transition: var(--transition-color);
}

/* Arrow icon */
.tt-eins .view-action:not([disabled]):after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -8px;
    background: transparent center 4px url("./img/icons/icon_arrow_down.svg") no-repeat;
    transform-origin: center center;
    transition: var(--transition-transform);
}

.tt-eins .view-action:not(.primary-action):after {
    right: 0;
}

.tt-eins .view-action.item-active:after {
    transform: rotateX(180deg);
    transition: var(--transition-transform);
}


/* -------------------------------------------- */
/* !COMPONENT: Form components */
/* -------------------------------------------- */

/* !--- Generic field containers */
.tt-eins .field-entry {
    position: relative;
}

.tt-eins .field-entry .field-container {
    display: grid;
    position: relative;
}


/* !--- Labels */
/* Label for global search field is treated specially below */
.tt-eins .field-entry label {
    grid-row: 1;
    font: var(--textset-s);
    margin: 0 0 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-eins .field-entry.entry-unlabeled label {
    display: none;
}


/* !--- Field comments */
.tt-eins .field-entry .field-comment {
    margin-top: 8px;
    font: var(--textset-s);
}


/* !--- Text input fields */
.tt-eins input {
    font: var(--textset-m);
    outline: none;
    color: var(--vapa-black);
    border-radius: 0;
    padding: 4px 8px 4px 8px;
    height: 37px;
    background: var(--field-backcolor);
    border: var(--field-border);
    width: 100%;
    transition: var(--transition-universal);
}

@media only screen and (max-width: 736px) {
    .tt-eins input {
        font: var(--textset-l);
        font-weight: 400;
    }
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins input:hover {
        border: var(--field-border-hover);
        transition: var(--transition-universal);
    }
}

.tt-eins input:focus {
    border: var(--field-border-focus);
    transition: var(--transition-universal);
}

.tt-eins .ensemble.expression-land input:focus {
    border-color: var(--vapa-earth-100);
}

.tt-eins .ensemble.expression-water input:focus {
    border-color: var(--vapa-marine-100);
}

.tt-eins .ensemble.expression-general input:focus {
    border-color: var(--vapa-nature-100);
}

/* Remove all default browser chrome/buttons from dedicated search fields */
.tt-eins input[type="search"]::-webkit-search-decoration,
.tt-eins input[type="search"]::-webkit-search-cancel-button,
.tt-eins input[type="search"]::-webkit-search-results-button,
.tt-eins input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/* Associated field actions */
.tt-eins .field-container.field-action input {
    padding-right: 44px;
}

.tt-eins .field-container.field-action .primary-action {
    position: absolute;
    bottom: 1px;
    right: 1px;
}


/* -------------------------------------------- */
/* !COMPONENT: Tables */
/* -------------------------------------------- */

/* --- Abstract table container */
.tt-eins .substance-table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
    
    tr:not(:last-child) {
        border-bottom: var(--table-line-horizontal-body);
    }
    
    td {
        padding: 4px 0 4px 0;
        font: var(--textset-table-m);
    }
    
    td:not(:last-child) {
        padding-right: 4px;
    }
    
    td:not(:first-child) {
        padding-left: 4px;
    }
    
    td .substance-media:last-child {
        margin-bottom: 0;
    }
}


/* --- Custom CMS tables: Standard content */
.tt-eins .substance-table.content-table {
    /* Sticky pseudo column headers */
    &:not(:is(.richtext-table:has(.substance-table.symptom-table) + .richtext-table .substance-table.content-table, .richtext-table:has(.substance-table.symptom-table) + .richtext-table + .richtext-table .substance-table.content-table)) tr:first-child, 
    &:not(:is(.richtext-table:has(.substance-table.symptom-table) + .richtext-table .substance-table.content-table, .richtext-table:has(.substance-table.symptom-table) + .richtext-table + .richtext-table .substance-table.content-table)) tr:first-child:has(td[rowspan="2"]) + tr {
        position: sticky;
        top: 0;
        border-bottom: none;
        background: var(--vapa-white);
        z-index: 1;
        
        /* Fake border lines (offsets renderings bugs in Safari and Firefox) */
        td {
            border-right: none;
            padding-bottom: 8px;
            box-shadow: var(--table-line-vertical-head-sticky), var(--table-line-horizontal-head-sticky);
            
            &:first-child {
                box-shadow: var(--table-line-horizontal-head-sticky);
            }
        }
        
        td:is(.graybody, .darkbody, .yellowbody, .greenbody) {
            box-shadow: var(--table-line-vertical-head-sticky), var(--table-line-horizontal-head-sticky);
            
            &:first-child {
                box-shadow: var(--table-line-horizontal-head-sticky);
            }
        }
    }
    
    tr:first-child td, 
    tr:first-child td > *, 
    tr:first-child:has(td[rowspan="2"]) + tr td, 
    tr:first-child:has(td[rowspan="2"]) + tr td > * {
        font-weight: 600;
        padding-top: 4px;
        vertical-align: bottom;
    }
    
    /* Body cells */
    td {
        padding: 6px 4px 6px 4px;
        min-width: 15ch;
        max-width: 85ch;
        border-right: var(--table-line-horizontal-body-light);
        
        &:first-child {
            pading-left: 0;
        }
        
        &:last-child {
            pading-right: 0;
            border-right: none;
        }
    }
    
    &:has(:is(td.graybody, td.darkbody, td.yellowbody, td.greenbody)) td {
        border-right: var(--table-line-vertical-body);
        
        &:last-child {
            border-right: none;
        }
    }
    
    /* Cell colorization */
    td.graybody {
        background-color: var(--table-backcolor-light);
    }
    
    td.darkbody {
        background-color: var(--table-backcolor-medium);
    }
    
    td.yellowbody {
        background-color: var(--table-backcolor-signal-light);
    }
    
    td.greenbody {
        background-color: var(--table-backcolor-signal-medium);
    }

    /* Neutralize abuse: embedded headlines */
    &:has(tr:only-child td:only-child) tr {
        border-bottom: none;
    }
    
    &:has(tr:only-child td:only-child) td {
        &:not(:is(.graybody, .darkbody, .yellowbody, .greenbody)) {
            padding: 0;
        }
        
        :is(h2, h3) {
            margin-bottom: calc(0.6 * var(--margin-standard));
        }
    }
}


/* --- Custom CMS tables: Flowcharts */
/* Initialization */
.tt-eins .substance-table.process-table {
    border-collapse: separate;

    tr {
        border-bottom: none;
    }
    
    /* Body cells */
    td {
        padding: 6px;
        min-width: 20ch;
                
        --list-index-color: var(--marker-order-color);
        --list-bullet-color: var(--marker-bullet-color);
    }
    
    /* Body cells: text & color management */
    td.white {
        border: var(--table-process-line-box);
    }
    
    td.lightgray {
        background: var(--table-backcolor-light);
        
        --list-bullet-color: var(--vapa-white);
    }
    
    td.darkgray {
        background: var(--table-backcolor-dark);
        font-weight: 600;
        color: var(--vapa-white);
        
        --list-index-color: var(--vapa-white);
        --list-bullet-color: var(--vapa-white);
        --textcolor-emphasis: var(--vapa-white);
        
        --asset-action-link: var(--asset-action-link-white);
        --asset-action-link-external: var(--asset-action-link-external-white);
        
        --textcolor-flow-link: var(--textcolor-flow-link-inverse);
        --textcolor-flow-link-hover: var(--textcolor-flow-link-inverse-hover);
        --textcolor-flow-link-focus: var(--textcolor-flow-link-inverse-focus);
    }
    
    td.lightred {
        background: var(--table-backcolor-signal-light);
    }
    
    td.darkred {
        background: var(--table-backcolor-signal-medium);
    }
    
    /* Distances */
    td.hspace, 
    td.vspace {
        padding: 0;
        border: none;
        min-width: 0;
    }
    
    /* Flow arrows */
    td.aright, 
    td.aleft, 
    td.aup, 
    td.adown {
        background: transparent center no-repeat;
        min-width: 0;
    }
    
    td.aright {
        padding: 10px;
        min-width: 30px;
        background-size: 20px;
        background-image: url("./img/flowchart/arrow_right_grey.svg");
    }
    td.aleft {
        padding: 10px;
        min-width: 30px;
        background-size: 20px;
        background-image: url("./img/flowchart/arrow_left_grey.svg");
    }
    td.aup {
        padding: 10px;
        min-height: 30px;
        background-size: 12px;
        background-image: url("./img/flowchart/arrow_up_grey.svg");
    }
    td.adown {
        padding: 10px;
        min-height: 30px;
        background-size: 12px;
        background-image: url("./img/flowchart/arrow_down_grey.svg");
    }
}

@media only screen and (max-width: 736px) {
    .tt-eins .substance-table.process-table {
        td.aright {
            padding: 7px;
            min-width: 20px;
            background-size: 15px;
        }
        td.aleft {
            padding: 7px;
            min-width: 20px;
            background-size: 15px;
        }
        td.aup {
            padding: 5px;
            min-height: 20px;
            background-size: 8px;
        }
        td.adown {
            padding: 5px;
            min-height: 20px;
            background-size: 8px;
        }
    }
}


/* --- Custom CMS tables: Geographic distrbution (contains tick-off cells) */
.tt-eins .expression-land .substance-table.distribution-table  {
    table-layout: fixed;
    
    /* Animal name */
    td:nth-child(1) {
        width: 70%;
    }
    
    /* Geographic markers */
    td.cell-marked:not(:last-child) {
        font: var(--textset-table-l);
        font-weight: 600;
        min-width: 10ch;
    }
    
    /* optional comments */
    td.cell-marked + td {
        font: var(--textset-table-m);
        width: 20%;
    }
    
    /* Edge case: some tables contain a pseudo title row (as a country/region wrapper) */
    tr:has(+ tr.with-states) {
        border-bottom: none;
    }
    
    tr.with-states {
        border-bottom-width: 4px;
        
        td {
            font-weight: 600;
            padding-top: 24px;
        }
        
        &:first-child td {
            padding-top: 0;
        }
    }
    
    tr.state:has(+ tr:not([class])) {
        border-bottom: none;
    }
    
    tr.state + tr:not([class]) {
        td {
            padding-top: 32px;
        }
    }
}

/* Distribution tables for water + hybrid animals */
.tt-eins :is(.expression-hybrid, .expression-water) .substance-table.distribution-table {
    table-layout: fixed;
    
    /* Sticky pseudo column headers */
    tr:first-child {
        position: sticky;
        top: 0;
        border-bottom: none;
        background: var(--vapa-white);
        
        /* Sticky pseudo border */
        td {
            box-shadow: var(--table-line-horizontal-head-sticky);
            padding-bottom: 8px;
        }
        
        td, 
        td > * {
            font-weight: 600;
            padding-top: 4px;
            text-align: left;
            vertical-align: bottom;
        }
        
        td p {
            margin-bottom: 0;
        }
    }
    
    /* Cell content */
    td:not(:nth-child(1)) {
        min-width: 5ch;
    }

    td:nth-child(1) {
        width: 20%;
    }
}

/* Phone viewports: vertical dividers because we can't have sticky headers */
@media only screen and (max-width: 736px) {
    .tt-eins :is(.expression-hybrid, .expression-water) .substance-table.distribution-table {
        /* Cell content */
        td:not(:nth-child(1)) {
            border-left: var(--table-line-vertical-body); 
        }
    }
}


/* --- Custom CMS tables: Complex symptoms tables with shaded markers */
.tt-eins .substance-table.symptom-table {
    /* Sticky pseudo column headers */
    tr:first-child {
        position: sticky;
        top: 0;
        border-bottom: none;
        background: var(--vapa-white);
        
        /* Sticky pseudo border */
        td {
            box-shadow: var(--table-line-horizontal-head-sticky);
            padding-bottom: 8px;
        }
    }

    tr:first-child td, 
    tr:first-child td > * {
        font-weight: 600;
        padding-top: 4px;
        text-align: left;
        vertical-align: bottom;
    }
}

/* These tables can have up to 2 follow-up tables with peculiarties */
.tt-eins .richtext-table:has(.substance-table.symptom-table) + .richtext-table .substance-table.content-table, 
.tt-eins .richtext-table:has(.substance-table.symptom-table) + .richtext-table + .richtext-table .substance-table.content-table {
    /* No real column headers */
    tr:first-child {
        border-bottom-width: 1px;
    }
    
    tr:first-child:has(td:is(.hspace, .vspace)) {
        border-bottom: none;
        
        td:not(:is(.hspace, .vspace)) {
            border-bottom: var(--table-line-horizontal-body);
        }
    }
    
    tr:first-child td, 
    tr:first-child td > * {
        font-weight: unset;
        padding-top: 0;
        vertical-align: middle;
    }
    
    tr:first-child td:is(.hspace, .vspace) {
        padding-left: 8px;
        padding-right: 8px
    }
    
    td {
        min-width: 0;
    }
}

/* --- Custom CMS tables: structured image legends */
/* Initialization */
.tt-eins .substance-table.legend-table {
    tr {
        border-bottom: none;
    }
    
    td {
        padding-left: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    td:first-child {
        width: 1px;
        padding-right: 8px;
    }
}