@font-face {
    font-family: 'Material Symbols Outlined';
    src: url('../fonts/MaterialSymbolsOutlined-VariableFont_FILL,GRAD,opsz,wght.ttf') format('truetype');
    font-weight: 100 700;
    font-style: normal;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;

    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: favorites;
    src: url(fonts/favorites.eot);
}

@font-face {
    font-family: favorites;
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBwcAAAC8AAAAYGNtYXClTaJoAAABHAAAAIxnYXNwAAAAEAAAAagAAAAIZ2x5Ztq6v+MAAAGwAAAEVGhlYWQN7PEkAAAGBAAAADZoaGVhB8IDzgAABjwAAAAkaG10eCoAAgwAAAZgAAAANGxvY2EE9AZcAAAGlAAAABxtYXhwABEAdQAABrAAAAAgbmFtZWwpt2EAAAbQAAABnnBvc3QAAwAAAAAIcAAAACAAAwPNAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADqEAPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAcAAAABgAEAADAAgAAQAg5gHofeia6Nzo5ul76dnqEP/9//8AAAAAACDmAOh96Jro3Ojm6Xvp2eoQ//3//wAB/+MaBBeJF20XLBcjFo8WMhX8AAMAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAIAIP/2A+ADigARABsAAAEfATMPAR8BLwEPAT8BLwEzNxMDIQUDJQUDLQECADMN1oknDTOJJyaKNw0nidYQQHP+kwEmcAEqASZwASr+kwK9oy1jGi2jYxoaY6MtHWYtAWr+o9r+o9fXAV3XAwAAAAABACD/9gPgA4oACQAAAQ0BEyUFEyUhEwJzAW3+1nD+2v7WcP7aAW1zAi0D1/6j19MBXNcBXQAAAAEAVgAdA6oDKwAbAAAlJy4DNTQ+AjMyFhc+ATMyHgIVFA4CBwIAPlKHXzQkP1UyN2YjImY4MVY/JDRfhlMdOEt/dHE9MVY/JDIoKDIkP1YxPXF2f0sAAAADAFYAAQOqA1UAFQAhADsAAAE+ATU0JiMiBg8BJy4BIyIGFRQWHwEBMjY1NCYjIgYVFBYFHgEVFAYHAQ4BIyImJwEuATURNDYzITIWFwLgDxE+LBYnDyAeDyYXKz8PD7b+wBslJRsbJSUCwwwMDAz+1AweEhIeDP6ADAwxIwEsEh4MAR8PJhcrPw8PICAPDz8rFyYPtgIYJRsbJSUbGyXEDB4SEh4M/tQMDAwMAYAMHhIBLCIyDAwAAgAqACsD1gOBABwAIAAAAQczFRQGBwMOASMhIiY1ETQ2NwEXHgEdAQchMhYBETMRA9YCAgMDggkqG/6AIjQODAEYLgkJKgEOIjT8VKwCAQRSCRAH/tQXHTMjAaoSHgwBGi4JFg0OxDL+CAIA/gAAAAEA1gArAyoDKwAKAAABMhYVESUFETQ2MwLWIjL+1v7WMSMDKzQi/VaAgAKqIjQAAAIAIP/wBAADsAA6AHIAAAEuAScuAScuAScuAQcOAQcOAQcOAQcOARceARceARceARceATc+ATc+ATc+ATc+ATc6ATMyNjU8ATUxBw4BBw4BBw4BJy4BJy4BJy4BJy4BNz4BNz4BNz4BNz4BFx4BFx4BFx4BFx4BBzEcARUUFhcOAQcEAAEVFRQ5JCNULi1hMTFfLC1PISE0ERIQAQEUExM2ISJOKytaLi5ZKSlLHh8xEAkOAwECARslZhEzHx9JKChVKipTJyZFHR0sDw8OAQESEBEuHR5DJSVPJydNJCNAGhspDg0NASEYBQ8LAcAyYy0uUiIjNRISEQEBFRMUNyMiUS0sXi8vXCsrTSAgMhAREAEBFBISNCEgTCkZNBslGwEDAaooRx4eLhAPDwEBEhERMR4eRyYnUSkpUCUlQhwbKw4PDQEBERAQLRwcQSQjSyYBAwEZJAMaMxgAAAEAAP/ZBAADpwAKAAABJQsBDQEDJQUDJQQA/p6env6eAQA8ATwBPDwBAAIzMwFB/r8z+v6gpqYBYPoAAAEAAAAgBAADQAAFAAAJAScHCQEDYP4g4KABgAKAA0D+IOCg/oACgAABAAAAAQAAvj/AY18PPPUACwQAAAAAANVm1k8AAAAA1WbWTwAA/9kEAAOwAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAANBAAAAAAAAAAAAAAAAgAAAAQAACAEAAAgBAAAVgQAAFYEAAAqBAAA1gQAACAEAAAABAAAAAAAAAAACgAUAB4AVgByAJ4A+gEyAUoB+AIWAioAAQAAAA0AcwADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAkAAAABAAAAAAACAAcAcgABAAAAAAADAAkAPAABAAAAAAAEAAkAhwABAAAAAAAFAAsAGwABAAAAAAAGAAkAVwABAAAAAAAKABoAogADAAEECQABABIACQADAAEECQACAA4AeQADAAEECQADABIARQADAAEECQAEABIAkAADAAEECQAFABYAJgADAAEECQAGABIAYAADAAEECQAKADQAvGZhdm9yaXRlcwBmAGEAdgBvAHIAaQB0AGUAc1ZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGZhdm9yaXRlcwBmAGEAdgBvAHIAaQB0AGUAc2Zhdm9yaXRlcwBmAGEAdgBvAHIAaQB0AGUAc1JlZ3VsYXIAUgBlAGcAdQBsAGEAcmZhdm9yaXRlcwBmAGEAdgBvAHIAaQB0AGUAc0ZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format("truetype");
    font-weight: 400;
    font-style: normal;
}

[class^="sf-icon-"], [class*=" sf-icon-"] {
    font-family: favorites !important;
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sf-icon-favorite:before {
    content: "\e9d9";
}

:root {
    --color-black: #000000;
	--color-medium-gray: #CCCCCC;
    --color-white: #FFFFFF;
	
    --color-off-white: #EFEFEF;
    --color-dark-gray: #373C46;
    --color-dark-blue: #1E2F40;

    --color-light-blue: #59c2fb;
    --color-yellow: #FFD302;
    --color-green: #85CA59;
    --color-orange: #FF9800;
    --color-red: #E80707;
	
	--radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-soft: 0 2px 4px rgba(30, 47, 64, 0.08);
    --shadow-medium: 0 8px 18px rgba(30, 47, 64, 0.18);
	--shadow-hard: 0 2px 8px rgba(30, 47, 64, 0.38);

    --focus-outline: 3px solid var(--color-yellow);
    --focus-shadow: 0 0 0 4px rgba(255, 211, 2, 0.4);

    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
	
	--card-min-width: 260px;
	
	--color-light-gray: var(--color-medium-gray);
	--color-border: color-mix(in srgb, var(--color-dark-gray) 35%, transparent);
	--color-border-strong: color-mix(in srgb, var(--color-dark-gray) 60%, transparent);

	--color-surface: var(--color-dark-blue);
	--color-surface-accent: color-mix(in srgb, var(--color-yellow) 18%, var(--color-white));

	--color-text-muted: color-mix(in srgb, var(--color-dark-gray) 55%, transparent);

	--color-danger: var(--color-red);
	--toolbar-group-gap: 8px;

    --modal-backdrop-color: rgba(0, 0, 0, 0.6);
    --modal-backdrop-blur: 6px;
    --modal-bg: #1e2f40;
    --modal-text: #ffffff;
    --modal-radius: var(--radius-md);
    --modal-padding: 18px;
    --modal-gap: 12px;
    --modal-padding-mobile: 12px;
    --modal-gap-mobile: 10px;
    --modal-actions-gap: 10px;
    --modal-button-padding: 8px 14px;
    --modal-button-radius: 8px;
    --modal-button-border: 1px solid rgba(255, 255, 255, 0.18);
    --modal-button-bg: rgba(255, 255, 255, 0.08);
    --modal-button-text: rgba(255, 255, 255, 0.95);
    --modal-button-bg-hover: rgba(255, 255, 255, 0.16);
    --modal-button-primary-bg: var(--color-light-blue);
    --modal-button-danger-bg: rgba(255, 92, 92, 0.2);
    --modal-button-danger-border: 1px solid rgba(255, 92, 92, 0.45);
	  
}

.trainingsplaner-wrapper,
.trainingsplaner-wrapper * {
  box-sizing: border-box!important;
}

.trainingsplaner-wrapper h1,
.trainingsplaner-wrapper h2,
.trainingsplaner-wrapper h3,
.trainingsplaner-wrapper h4,
.trainingsplaner-wrapper h5,
.trainingsplaner-wrapper h6,
.trainingsplaner-wrapper p,
.trainingsplaner-wrapper ul,
.trainingsplaner-wrapper ol,
.trainingsplaner-wrapper li {
  margin: 0;
  padding: 0;
}

.theme-surface {
    background: var(--color-white);
    color: var(--color-dark-blue);
}

.theme-contrast {
    background: var(--color-dark-gray);
    color: var(--color-white);
}

.theme-pill {
    border-radius: 999px;
    padding: 4px 10px;
    background: var(--color-off-white);
    color: var(--color-dark-gray);
}

.theme-outline {
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}

:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
    box-shadow: var(--focus-shadow);
}



.trainingsplaner-wrapper {
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    border-radius: var(--radius-lg);
    margin: 0 auto;
    color: var(--color-dark-gray);
    width: 100%;
}

.trainingsplaner-app,
.trainingsplaner-layout,
.trainingsplaner-main,
.trainingsplaner-sidebar,
.trainingsplaner-columns,
.trainingsplaner-plan {
    width: 100%;
}

.trainingsplaner-filters {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.trainingsplaner-filters .filter-field.is-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.trainingsplaner-action-group {
    display: inline-flex;
    align-items: center;
    gap: 0px;
    padding: 0 10px;
    border-radius: 50px;
	background: 
	color-mix(in srgb, var(--color-white) 88%, transparent);
	border-color:  color-mix(in srgb, var(--color-border) 70%, transparent);
}

.trainingsplaner-toolbar {
    display: flex;
    justify-content: space-between;
	gap:var(--toolbar-group-gap);
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.trainingsplaner-topbar {
    align-items: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: visible;
}
.taxonomie-filter {
	display: flex;
    flex-wrap: wrap;
    flex: 1 1 520px;
    min-width: 0;
    width: 100%;
	align-items: flex-end;
	gap:var(--toolbar-group-gap);
}

.taxonomie-filter > .filter-field {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.taxonomie-filter > .filter-field > .tp-select {
    width: max-content;
    max-width: 100%;
}

.taxonomie-filter > .filter-field > .tp-select .tp-select__trigger {
    width: auto;
    max-width: 100%;
}

.trainingsplaner-topbar__group {
    display: flex;
	width:100%;
    gap:var(--toolbar-group-gap);
    flex-wrap: wrap;
    align-items: center;
}

.trainingsplaner-topbar__item {
	/*flex: 1 1 150px;
    min-width: 100px;*/
}

.tp-filter-group__label {
    display: block;
    margin: 0 0 4px 10px;
    color: var(--color-dark-gray);
    font-size: clamp(0.68rem, 0.64rem + 0.2vw, 0.78rem);
    font-weight: 700;
    line-height: 1;
}

.tp-player-range {
    min-width: 210px;
}

.tp-player-range__fields {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tp-select--range {
    min-width: 90px;
}

.tp-player-range__separator {
    color: var(--color-dark-gray);
    font-weight: 700;
}

.tp-player-range__hint {
    display: block;
    margin: 6px 8px 0;
    color: var(--color-dark-gray);
    font-size: clamp(0.66rem, 0.62rem + 0.18vw, 0.76rem);
    line-height: 1.3;
}

.tp-advanced-filters {
    position: relative;
    flex: 0 1 auto;
    min-width: 155px;
}

.tp-advanced-filters > summary {
    list-style: none;
}

.tp-advanced-filters > summary::-webkit-details-marker {
    display: none;
}

.tp-advanced-filters__trigger {
    min-height: 32px;
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    border-radius: 50px;
    background: color-mix(in srgb, var(--color-white) 88%, transparent);
    color: var(--color-dark-gray);
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 700;
    box-shadow: var(--shadow-soft);
    line-height: 1.2;
    text-align: left;
    white-space: normal;
}

.tp-advanced-filters__trigger::after {
    content: "▾";
    transition: transform var(--transition-fast);
}

.tp-advanced-filters[open] .tp-advanced-filters__trigger::after {
    transform: rotate(180deg);
}

.tp-advanced-filters__panel {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 1000;
    width: min(620px, calc(100vw - 48px));
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-medium);
}

.tp-advanced-filters__panel .tp-select__popover {
    z-index: 1002;
}

.tp-active-filters {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tp-active-filters__label {
    color: var(--color-off-white);
    font-size: clamp(0.68rem, 0.64rem + 0.2vw, 0.78rem);
    font-weight: 700;
    white-space: nowrap;
}

.tp-active-filters__chips {
    display: flex;
    flex: 1 1 320px;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
}

.tp-filter-chip {
    min-height: 26px;
    padding: 3px 9px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid color-mix(in srgb, var(--color-yellow) 45%, var(--color-border));
    border-radius: 50px;
    background: color-mix(in srgb, var(--color-yellow) 12%, var(--color-white));
    color: var(--color-dark-gray);
    cursor: pointer;
    font-size: clamp(0.68rem, 0.64rem + 0.2vw, 0.78rem);
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.tp-filter-chip:hover {
    background: color-mix(in srgb, var(--color-yellow) 20%, var(--color-white));
}

.tp-active-filters__clear {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--color-yellow);
    cursor: pointer;
    font-size: clamp(0.68rem, 0.64rem + 0.2vw, 0.78rem);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.tp-active-filters__clear:hover,
.tp-active-filters__clear:focus-visible {
    color: var(--color-white);
}

.trainingsplaner-filters .filter-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

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

.tp-select__trigger {
    width: 100%;
    min-height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-light-gray);
    background: var(--color-white);
    color: var(--color-dark-gray);
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: var(--shadow-soft);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tp-select--filter .tp-select__trigger {
    background: color-mix(in srgb, var(--color-white) 88%, transparent);
    border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
    font-weight: 600;
    padding: 5px 15px;
    border-radius: 50px;
}

.tp-select--compact .tp-select__trigger {
    min-height: 30px;
    font-size: clamp(0.7rem, 0.65rem + 0.3vw, 0.8rem);
    padding: 0 10px;
    border-radius: 5px;
    box-shadow: none;
}

.tp-select__trigger::after {
    content: "▾";
    font-size: clamp(0.8rem, 0.7rem + 0.4vw, 0.95rem);
    margin-left: 10px;
    color: var(--color-dark-gray);
    display: inline-block;
    transition: transform var(--transition-fast);
}

.tp-select.is-open .tp-select__trigger::after {
    transform: rotate(180deg);
}

.tp-select__popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-dark-blue);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 0;
    /*max-height: 240px;*/
	width: fit-content;
    max-width: min(320px, calc(100vw - 32px));
    max-height: min(320px, 55vh);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1001;
}


.tp-select__option {
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
	color:var(--color-dark-gray);
	font-size: clamp(0.72rem, 0.66rem + 0.35vw, 0.85rem);
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

.tp-select__option.is-selected {
    background: color-mix(in srgb, var(--color-dark-gray) 18%, transparent);
    font-weight: 600;
}

.tp-select__option.is-active {
    background: color-mix(in srgb, var(--color-dark-gray) 12%, transparent);
}

.tp-select__option:hover {
    background: color-mix(in srgb, var(--color-dark-gray) 10%, transparent);
}

.tp-multi-select > summary {
    list-style: none;
}

.tp-multi-select > summary::-webkit-details-marker {
    display: none;
}

.tp-multi-select[open] .tp-select__trigger::after {
    transform: rotate(180deg);
}

.tp-multi-select__popover {
    min-width: 190px;
    max-height: 260px;
    padding: 6px;
    background: var(--color-white);
    color: var(--color-dark-gray);
}

.trainingsplaner-filters .filter-field .tp-multi-select__option {
    display: flex;
    margin: 0;
    font-weight: 500;
    color: var(--color-dark-gray) !important;
    background: var(--color-white);
    white-space: normal;
    overflow-wrap: anywhere;
}

.trainingsplaner-filters .filter-field .tp-multi-select__option span {
    color: var(--color-dark-gray) !important;
}

.trainingsplaner-filters .filter-field .tp-multi-select__option:hover {
    background: color-mix(in srgb, var(--color-dark-gray) 10%, var(--color-white));
}


.trainingsplaner-columns {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    transition: opacity var(--transition-fast);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    position: relative;
}

.trainingsplaner-columns-wrapper {
    position: relative;
}
.tp-load-more-button {
	background-color:#ffd302!important;
	color:#1e2f40!important;
	margin-bottom:20px;
	box-shadow: var(--shadow-hard);
}

@media (max-width: 640px) {
    .trainingsplaner-card {
        will-change: transform;
        content-visibility: auto;
        contain: layout paint;
    }

    .trainingsplaner-column .tp-load-more-button {
        margin: 6px auto 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.trainingsplaner-columns-indicator {
    position: absolute;
    top: 0;
    transform: none;
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    border-radius: 0;
    color: var(--color-white);
    border: none;
    padding: 0;
    cursor: pointer;
    touch-action: pan-x;
    z-index: 20;
    box-shadow: none;
}

.trainingsplaner-columns-indicator.is-right {
    right: -12px;
    background: linear-gradient(270deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .7) 50%, rgba(0, 0, 0, 0) 100%);
}

.trainingsplaner-columns-indicator.is-left {
    left: -12px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .7) 50%, rgba(0, 0, 0, 0) 100%);
}

.trainingsplaner-columns-indicator .material-symbols-outlined {
    font-size: 32px;
    line-height: 1;
}

.trainingsplaner-columns-indicator.is-right:hover {
    background: linear-gradient(270deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 100%);
}

.trainingsplaner-columns-indicator.is-left:hover {
    background: linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, 0) 100%);
}

.trainingsplaner-columns-indicator:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

.trainingsplaner-columns.is-loading {
    opacity: 0.6;
    pointer-events: none;
}


.trainingsplaner-column {
    border-radius: var(--radius-md);
	--trainingsplaner-column-bg: rgba(0,0,0,.5);
	background: var(--trainingsplaner-column-bg);
    color: var(--color-white);
    padding: 10px;
    flex: 0 0 min(300px, 85vw);
    max-width: 300px;
    min-width: 60px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 6px 18px rgba(30, 47, 64, 0.14);
    position: relative;
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.column-header-main {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
}

.trainingsplaner-column h3 {
    margin: 0;
    padding: 0;
    font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.3rem);
    font-weight: 700;
	text-transform:uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.trainingsplaner-column h3 .column-title {
    margin-right: 6px;
}
.trainingsplaner-column h3 .column-debug-count {
    font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.9rem);
    font-weight: 500;
    color: red;
	top:50px;
	position:absolute;
}

.player-select-row {
    /*flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 8px;*/
}

.player-select-row .tp-select {
    /*min-width: 120px;
    width: auto;*/
}

.tp-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
	align-self:center;
    gap: 4px;
    width: 80px;
}

.tp-toggle__icons {
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-size: clamp(0.65rem, 0.6rem + 0.3vw, 0.75rem);
    color: color-mix(in srgb, var(--color-white) 70%, transparent);
    padding: 0 6px;
}

.tp-toggle__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    width: 100%;
    padding: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent);
}

.tp-toggle__knob {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 3);
    border-radius: 999px;
    background: 
 	color-mix(in srgb, var(--color-white) 18%, transparent);
    transition: transform var(--transition-fast);
}

.tp-toggle[data-state='any'] .tp-toggle__knob {
    transform: translateX(100%);
}

.tp-toggle[data-state='unequal'] .tp-toggle__knob {
    transform: translateX(200%);
}

.tp-toggle__button {
    position: relative;
    z-index: 1;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-white);
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
	line-height: 1.1;
}

.tp-toggle.is-locked .tp-toggle__button {
    opacity: 0.5;
    cursor: not-allowed;
}

.tp-toggle.is-locked .tp-toggle__track {
    opacity: 0.7;
}

.tp-toggle__button.is-active {
    color: color-mix(in srgb, var(--color-white) 92%, transparent);
}

.tp-toggle__button:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

.trainingsplaner-column-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 12px 0;
    scroll-snap-type: x proximity;
    touch-action: pan-y pan-x;
}

.trainingsplaner-column-list-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 6px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.trainingsplaner-scroll-arrow {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 16px;
	border:transparent;
    background: transparent;
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast), background var(--transition-fast);
    z-index: 1;
}

.trainingsplaner-scroll-arrow:hover {
    transform: translateY(-3px);
    background: color-mix(in srgb, var(--color-surface) 85%, transparent);
}

.trainingsplaner-scroll-arrow.is-down:hover {
    transform: translateY(3px);
}

.trainingsplaner-scroll-arrow .material-symbols-outlined {
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    line-height: 1;
}

.trainingsplaner-scroll-arrow.is-up {
    top: 0;
}

.trainingsplaner-scroll-arrow.is-down {
    bottom: 0;
}

.trainingsplaner-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: rgba(255, 255, 255, 0.9);
    animation: trainingsplaner-spin 0.8s linear infinite;
    margin: 12px auto;
}

@keyframes trainingsplaner-spin {
    to {
        transform: rotate(360deg);
    }
}

.trainingsplaner-card {
    border-radius: var(--radius-lg);
    cursor: grab;
    box-shadow: 0 10px 24px rgba(30, 47, 64, 0.18);
    border: 3px solid transparent;
    transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-medium);
    min-width: 150px;
    position: relative;
    touch-action: pan-y;
}


.trainingsplaner-card.is-selected {
    border: 3px solid #ffd302;
}

.trainingsplaner-card .card-image {
    position: relative;
    background-size: cover;
    background-position: center;
	border-radius: var(--radius-lg);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.trainingsplaner-card .card-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    z-index: 9;
	color: var(--color-white);
    pointer-events: auto;
}

.trainingsplaner-card .card-filter-badges {
    position: absolute;
    top: 46px;
    left: 8px;
    right: 46px;
    z-index: 8;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
}

.trainingsplaner-card .card-filter-badge {
    max-width: 100%;
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: rgba(30, 47, 64, 0.9);
    color: var(--color-white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    font-size: clamp(0.62rem, 0.58rem + 0.18vw, 0.72rem);
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: auto;
}

.trainingsplaner-card .card-filter-badge--setup {
    border-color: #ff9800;
    background: #ff9800;
    color: var(--color-dark-blue);
}

.trainingsplaner-card .card-actions .trainingsplaner-icon-button,
.trainingsplaner-card .card-actions .material-symbols-outlined,
.trainingsplaner-card .card-actions .sf-icon-favorite {
    color: var(--color-white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.trainingsplaner-card .card-action-button--favorite .sf-icon-favorite {
    color: #ffffff;
}

.trainingsplaner-card .card-action-button--favorite .sf-icon-favorite.active {
    color: #ffd302;
}

.trainingsplaner-card .card-action-button--mute.is-muted .material-symbols-outlined {
    animation: tp-muted-icon-pulse 1.6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes tp-muted-icon-pulse {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.18);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.9;
    }
}

.trainingsplaner-card .card-overlay {
	border-radius: var(--radius-lg);
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%);
    display: flex;
    align-items: flex-end;
    padding: 10px;
    z-index: 3;
    opacity: 1;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    pointer-events: none;
}

.plan-preview-card .card-overlay {
    flex-direction: column;
    align-items: flex-start;
	justify-content: flex-end;
	background: linear-gradient(180deg, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.92) 100%);
    border-radius: var(--radius-lg);
}

article.plan-preview-card  {
	box-shadow:0 4px 9px rgba(0,0,0,.3);
}

.plan-preview-card .card-action-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    pointer-events: auto;
}

.trainingsplaner-card .card-preview-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 1;
    pointer-events: none;
}

.trainingsplaner-card .card-preview-fullscreen {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 4;
}

.trainingsplaner-card .card-preview-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.trainingsplaner-card .card-preview-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.trainingsplaner-card .card-preview-frame.is-hidden {
    opacity: 0;
}

.trainingsplaner-card .card-preview-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.25);
}

.trainingsplaner-card .card-preview-loading .trainingsplaner-spinner {
    width: 26px;
    height: 26px;
}

.trainingsplaner-card.is-previewing .card-overlay {
    opacity: 1;
    visibility: visible;
    background: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,0.86) 100%);
    padding: 10px 12px 42px;
}

.trainingsplaner-card.is-previewing .card-preview-layer {
    opacity: 1;
}

.trainingsplaner-card.is-previewing .card-title {
    display: -webkit-box;
    max-width: calc(100% - 8px);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.86rem;
    line-height: 1.15;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}



.trainingsplaner-card .card-preview-frame {
    position: absolute;
    inset: 0;
}

.trainingsplaner-card .card-preview-controls {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 1;
    transition: opacity var(--transition-fast);
    z-index: 8;
    pointer-events: auto;
    visibility: visible;
}

html[data-tp-tour='on'] .trainingsplaner-card .card-preview-controls,
.trainingsplaner-card:active .card-preview-controls,
.trainingsplaner-card:focus-visible .card-preview-controls,
.trainingsplaner-card.is-previewing .card-preview-controls {
    opacity: 1;
}


.trainingsplaner-card .card-preview-timeline {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 6px;
}

.trainingsplaner-card .card-preview-timeline input[type='range'] {
    width: auto;
    flex: 1;
    height: 18px;
    border-radius: 999px;
    background: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 2px;
	padding:0px;
    appearance: none;
    border: none;
    outline: none;
    box-shadow: none;
}

.trainingsplaner-card .card-preview-timeline input[type='range']::-webkit-slider-runnable-track {
    height: 2px;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    border: none;
    box-shadow: none;
}

.trainingsplaner-card .card-preview-timeline input[type='range']::-moz-range-track {
    height: 2px;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    border: none;
    box-shadow: none;
}

.trainingsplaner-card .card-preview-timeline input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffd302;
    border: none;
    margin-top: -6px;
}

.trainingsplaner-card .card-preview-timeline input[type='range']::-moz-range-progress {
    height: 2px;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
}

.trainingsplaner-card .card-preview-play {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.trainingsplaner-card .card-preview-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
}

.trainingsplaner-card .card-preview-play:hover,
.trainingsplaner-card .card-preview-play:focus-visible {
    background: rgba(0, 0, 0, 0.7);
    transform: none;
}

.trainingsplaner-card .card-preview-play:active,
.trainingsplaner-card .card-preview-play:focus-visible {
    transform: none;
}

.trainingsplaner-card .card-preview-pause-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: var(--radius-lg);
    line-height: 1;
}

.trainingsplaner-card .card-preview-pause-overlay .material-symbols-outlined {
    font-size: 36px;
    color: rgba(255, 255, 255, 0);
    display: block;
    margin: auto;
}

.trainingsplaner-card .card-preview-center {
    transform: translate(-50%, -50%);
    will-change: auto;
}

.trainingsplaner-exercise-popover {
    position: fixed;
    z-index: 9999;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.25);
    overflow: hidden;
	top: 40px;
    display: flex;
    flex-direction: column;
    color: #373c46 !important;
}

.trainingsplaner-exercise-popover,
.trainingsplaner-exercise-popover * {
    color: #373c46 !important;
}

.trainingsplaner-exercise-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trainingsplaner-exercise-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
}

body.tp-exercise-popover-open {
    overflow: hidden;
}

body.tp-fullscreen-open {
    overflow: hidden;
}

.trainingsplaner-native-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 10060;
    background: #000000;
    display: none;
}

.trainingsplaner-native-fullscreen.is-active {
    display: block;
}

.trainingsplaner-native-fullscreen iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.trainingsplaner-native-fullscreen__exit {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 2147483647;
    width: 88px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 24px 0 0 0;
    color: #ffd302;
    background: rgba(0, 0, 0, 0.02);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
    cursor: pointer;
    pointer-events: auto;
}

.trainingsplaner-native-fullscreen__exit:hover,
.trainingsplaner-native-fullscreen__exit:focus-visible {
    color: #1e2f40;
    background: #ffd302;
    text-shadow: none;
}

.trainingsplaner-native-fullscreen__exit .material-symbols-outlined {
    font-size: 30px;
    line-height: 1;
}

.trainingsplaner-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.trainingsplaner-fullscreen__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.82);
}

.trainingsplaner-fullscreen__player {
    position: relative;
	aspect-ratio: 16 / 9;
    z-index: 1;
    width: min(100vw, 1280px);
    max-height: calc(100vh - 64px);
    height: auto;
    background: #0b0f14;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.trainingsplaner-fullscreen__frame {
    width: 100%;
    height: 100%;
}

.trainingsplaner-fullscreen__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

.trainingsplaner-fullscreen__loading .trainingsplaner-spinner {
    width: 32px;
    height: 32px;
}

.trainingsplaner-fullscreen__close {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    color: #1e2f40;
    border: none;
	background: #ffd302;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.trainingsplaner-fullscreen__close:hover,
.trainingsplaner-fullscreen__close:focus-visible {
    background: rgba(255, 255, 255, 0.25);
}

.trainingsplaner-fullscreen__close .material-symbols-outlined {
	font-size: 30px;
	left: 8px;
	position: absolute;
	top: 8px;
}

.trainingsplaner-exercise-popover__header {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(16, 24, 40, 0.08);
    font-weight: 600;
    color: #373c46 !important;
}

.trainingsplaner-exercise-popover__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trainingsplaner-exercise-popover__course {
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(55, 60, 70, 0.6) !important;
    text-decoration: none;
}

.trainingsplaner-exercise-popover__course:hover {
    text-decoration: none;
}

.trainingsplaner-exercise-popover__spacer {
    display: block;
    width: 40px;
    height: 40px;
}

.trainingsplaner-exercise-popover__content {
    padding: 16px;
    overflow: auto;
    font-size: 15px;
    line-height: 1.5;
    color: #373c46 !important;
    flex: 1;
}

.trainingsplaner-exercise-popover__content img {
    max-width: 100%;
    height: auto;
}

.trainingsplaner-exercise-popover__content .img-style,
.trainingsplaner-exercise-foldout__content .img-style {
    display: block;
    margin: 12px auto;
    border: 1px solid #d8d8d8;
    overflow: hidden;
    width: 100%;
}

.trainingsplaner-exercise-popover__content .img-style img,
.trainingsplaner-exercise-foldout__content .img-style img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.trainingsplaner-exercise-popover__status {
    padding: 16px;
    font-size: 14px;
    color: #373c46 !important;
}

.trainingsplaner-exercise-popover__status.is-error {
    color: #b42318;
}

.trainingsplaner-exercise-foldout {
    margin-top: 8px;
    padding: 12px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.15);
}

.trainingsplaner-exercise-foldout__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 600;
}

.trainingsplaner-exercise-foldout__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trainingsplaner-exercise-foldout__content {
    font-size: 14px;
    line-height: 1.5;
    color: #373c46 !important;
}

.trainingsplaner-exercise-foldout__content img {
    max-width: 100%;
    height: auto;
}

.trainingsplaner-exercise-foldout__status {
    font-size: 14px;
    color: #373c46 !important;
}

.trainingsplaner-exercise-popover * {
    color: inherit;
}

.trainingsplaner-exercise-popover__close {
    min-width: 40px;
    min-height: 40px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
}

.trainingsplaner-exercise-popover__close .material-symbols-outlined {
    font-size: 40px;
}

.trainingsplaner-exercise-overlay__close {
    position: fixed;
    bottom: 20px;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    color: #1e2f40;
    border: none;
	background: #ffd302;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.trainingsplaner-exercise-overlay__close .material-symbols-outlined {
	font-size: 30px;
	left: 8px;
	position: absolute;
	top: 8px;
}

.trainingsplaner-exercise-popover__status.is-error {
    color: #b42318 !important;
}

.trainingsplaner-exercise-detail-close {
    background: transparent!important;
    color: #373c46!important;
    border: none!important;
}

.trainingsplaner-exercise-detail-close .material-symbols-outlined {
    color: #373c46;
}

.trainingsplaner-exercise-foldout__status.is-error {
    color: #b42318;
}

.trainingsplaner-card .card-preview-timeline input[type='range']::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffd302;
    border: none;
}

.trainingsplaner-card .card-action-button {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
	background: var(--color-yellow);
	color: var(--color-dark-blue);
}







.trainingsplaner-card .card-action-button--mute {
    background: transparent;
    color: var(--color-white);
}

.trainingsplaner-card .card-title {
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
    line-height: 1.2;
    font-size: clamp(0.95rem, 0.9rem + 0.6vw, 1.2rem);
}

.trainingsplaner-card .card-id-label {
    letter-spacing: 0.02em;
}

.trainingsplaner-card .card-id-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.45);
    border-radius: 999px;
    padding: 2px 6px;
}

.trainingsplaner-card .card-id-copy {
    border: none;
    background: transparent;
    color: var(--color-white);
    padding: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.trainingsplaner-card .card-id-copy .material-symbols-outlined {
    font-size: 14px;
    line-height: 1;
}

.trainingsplaner-card .card-source-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8ff0cf;
    line-height: 1;
}

.trainingsplaner-card .card-source-badge .material-symbols-outlined {
    font-size: 14px;
    line-height: 1;
}

.trainingsplaner-plan {
    border: 2px dashed var(--color-off-white);
    padding: 12px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
	margin-top: 20px;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.trainingsplaner-plan.is-over {
    border-color: var(--color-yellow);
    background-color: var(--color-surface-accent);
    box-shadow: 0 0 0 3px rgba(255, 211, 2, 0.25);
}

.plan-header {
	margin-bottom:20px;
	display:flex;
	flex:1 1 auto;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
}

.plan-header__group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.plan-header__title {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 220px;
}

.plan-header__date {
    flex: 1 1 100%;
    width: 100%;
}

.plan-header__actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex: 0 1 auto;
    gap: 8px;
}

.plan-header label {
	display:block;
    font-weight:600;
	font-size:1.4em;
	margin-bottom:10px;
}

.plan-selected-date {
    flex-direction: column;
    gap: 4px;
    font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
    color: var(--color-text-muted);
}

.plan-selected-date__label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
	color:white;
	display:inline-block;
}

.plan-selected-date__value {
    color: white;
    font-weight: 700;
}

.plan-calendar {
    position: relative;
}

.tp-single-calendar {
    position: relative;
    overflow: visible;
}

.tp-single-calendar .plan-calendar {
    display: inline-flex;
    align-items: center;
}

.plan-calendar--inline .plan-calendar-popover {
    position: static;
    width: 100%;
    margin-top: 0;
}

.plan-calendar-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    background: rgba(30, 47, 64, 0.95);
    color: var(--color-white);
    border-radius: var(--radius-md);
    padding: 12px;
    box-shadow: var(--shadow-medium);
    z-index: 1001;
    min-width: 260px;
}

.plan-calendar-accordion {
    background: rgba(30, 47, 64, 0.95);
    color: var(--color-white);
    border-radius: var(--radius-md);
    padding: 12px;
    box-shadow: var(--shadow-medium);
    margin-top: 8px;
    width: 100%;
}

.plan-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 6px;
}

.plan-calendar-title {
    font-weight: 700;
    text-transform: capitalize;
    font-size: clamp(0.8rem, 0.75rem + 0.4vw, 0.95rem);
}

.plan-calendar-weekdays,
.plan-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}

.plan-calendar-weekdays {
    font-size: clamp(0.65rem, 0.6rem + 0.3vw, 0.75rem);
    opacity: 0.8;
    margin-bottom: 6px;
}

.plan-calendar-day {
    width: 100%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    padding: 6px 0;
    cursor: pointer;
    font-weight: 600;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.plan-calendar-day:hover {
    background: rgba(255, 211, 2, 0.3);
    transform: translateY(-1px);
}

.plan-calendar-day.is-draft {
    background: rgba(255, 211, 2, 0.3);
    transform: translateY(-1px);
}

.plan-calendar-day.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.05);
    transform: none;
}

.plan-calendar-day.is-disabled:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: none;
}

.plan-calendar-day.is-empty {
    background: transparent;
    cursor: default;
}

.plan-calendar-day.is-planned {
    background: color-mix(in srgb, var(--color-light-blue) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-light-blue) 55%, transparent);
}

.plan-calendar-day.is-planned.is-incomplete {
    background: color-mix(in srgb, var(--color-orange) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-orange) 55%, transparent);
    color: #1b1b1b;
}

.plan-calendar-day.is-selected {
    background: rgba(89, 194, 251, 0.6);
    border: 1px solid rgba(89, 194, 251, 0.8);
}

.plan-calendar-day.is-holiday {
    position: relative;
}
button.is-holiday {	
	background: color-mix(in srgb, var(--color-green) 10%, transparent)!important;
}

.plan-calendar-day.is-holiday::after {
    content: '';
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    opacity: 0.55;
}

.plan-calendar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    gap: 8px;
    font-size: clamp(0.7rem, 0.65rem + 0.35vw, 0.85rem);
}

.plan-calendar-selected {
    font-weight: 600;
}

.plan-calendar-confirm {
    margin-left: auto;
}

.plan-header input[type="text"] {
	min-width: 250px;
	border-radius: 5px;
	min-height: 30px;
	padding: 5px 10px;
}

.plan-dropzone {
    min-height: 80px;
}

.plan-dropzone .placeholder {
    color: var(--color-text-muted);
    margin: 0;
}

.plan-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-preview-wrapper {
    margin-top: 14px;
}

.plan-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
}

.plan-preview.trainingsplaner-columns {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.plan-preview-card {
    min-width: 0;
    background: color-mix(in srgb, var(--color-dark-blue) 92%, #000000);
    flex: 1 1 auto;
}

.plan-preview-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 var(--card-min-width);
    min-width: var(--card-min-width);
    max-width: 100%;
}

.plan-preview-item.is-empty .plan-preview-card {
    background: color-mix(in srgb, var(--color-black) 5%, var(--color-dark-blue));
}

.plan-preview-item.is-empty .plan-preview-meta {
    opacity: 0.85;
}

.plan-preview-item.is-empty .card-overlay {
    opacity: 0.9;
}

.trainingsplaner-modal-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.trainingsplaner-modal-checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
    font-weight: 500;
}

.trainingsplaner-modal-checkbox.is-disabled {
    opacity: 0.6;
}

.trainingsplaner-modal-checkbox__hint {
    grid-column: 2 / 3;
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.plan-preview-meta {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    z-index: 4;
}

.plan-preview-remove {
    min-width: 36px;
    min-height: 36px;
    font-size: clamp(0.9rem, 0.85rem + 0.5vw, 1.05rem);
	background:var(--color-yellow)!important;
	color:var(--color-dark-blue)!important;
}

.plan-preview-label {
    font-size: clamp(0.7rem, 0.65rem + 0.35vw, 0.85rem);
    text-transform: uppercase;
	font-weight:600;
	background:var(--color-dark-blue);
	padding:2px 7px;
	border-radius:var(--radius-sm);
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.plan-preview-title {
    margin: 0;
    font-size: clamp(0.95rem, 0.9rem + 0.6vw, 1.2rem);
    font-weight: 600;
}

.plan-preview-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.75rem, 0.7rem + 0.4vw, 0.95rem);
    color: var(--color-white) !important;
    background: transparent;
    border: none;
    box-shadow: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    min-width: 28px;
    min-height: 28px;
}

.plan-preview-link:hover {
    text-decoration: none;
    opacity: 0.8;
}

.plan-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    border-radius: var(--radius-sm);
}

.plan-item .item-label {
    font-weight: 600;
    margin-right: 8px;
}

.plan-item .item-actions {
    display: flex;
    gap: 6px;
}

.plan-item button.button-link {
    color: var(--color-danger);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
}

.trainingsplaner-existing h3 {
    margin-top: 0;
}

.existing-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.existing-plan {
	border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, .5);
	padding: 15px 10px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	box-shadow: 0 10px 24px rgba(30, 47, 64, 0.16);
	color: white;
	font-weight: 700;
	font-size: clamp(1rem, 0.95rem + 0.7vw, 1.35rem);
}

.existing-plan__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 16px;
}

.existing-plan--incomplete {
	border: 1px dashed rgba(255, 255, 255, 0.6);
}

.existing-status {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.75em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.9);
}

.existing-status.is-incomplete {
	background: rgba(255, 181, 66, 0.2);
	color: #ffb542;
}

.existing-title {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.existing-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

.existing-plan__main,
.existing-plan__side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.existing-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.existing-row--title {
    flex-wrap: nowrap;
}
.existing-row--meta {
    flex-wrap: wrap;
    gap: 6px;
    font-size: clamp(0.8rem, 0.75rem + 0.45vw, 1rem);
    color: rgba(255, 255, 255, 0.85);
}
.existing-row--actions {
    justify-content: flex-start;
}
 .tp-area--existing .existing-title-action {
	color:var(--color-light-blue);
	padding:0px;
}
.existing-title-input {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.35);
    color: var(--color-white);
    padding: 6px 10px;
    font-size: inherit;
    font-weight: 700;
}
.existing-title-action {
    min-width: 32px;
    min-height: 32px;
}
.existing-title-action.is-confirm {
    color: var(--color-green);
}

.existing-meta-item {
    display: inline-flex;
    gap: 6px;
    align-items: self-end;
}

.existing-meta-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
	font-size:.8em;
    color: rgba(255, 255, 255,.75);
	font-weight:500;
}
.existing-meta-value {
	margin-right:10px;
}

.plan-calendar--compact {
    display: inline-flex;
    align-items: center;
}

.trainingsplaner-icon-button.is-compact {
    min-width: 22px;
    min-height: 22px;
    font-size: clamp(0.8rem, 0.75rem + 0.4vw, 0.95rem);
    border-radius: 6px;
}

.existing-actions {
    display: flex;
	margin-top:10px;
    gap: 16px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.existing-filter {
    display: grid;
    gap: 8px;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.35);
}

.existing-filter__title {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.existing-filter__mode {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.existing-filter__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.existing-filter__mode-button {
    border: 1px solid color-mix(in srgb, var(--color-yellow) 55%, transparent);
    background: color-mix(in srgb, var(--color-yellow) 80%, transparent);
    color: var(--color-dark-blue);
	opacity:.3;
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
}

.existing-filter__mode-button.is-active {
    opacity:1;
}

.existing-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tp-label-chip--filter {
    border: var(--tp-chip-border);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.tp-label-chip--filter.is-active {
    border-color: transparent;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 8px 18px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.existing-filter__summary {
    margin-top: 6px;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.85);
}

.existing-filter__summary.is-empty {
    color: rgba(255, 255, 255, 0.6);
}

.existing-filter__clear {
    justify-self: flex-start;
    border: none;
    background: transparent;
    color: var(--color-yellow);
    font-weight: 600;
    cursor: pointer;
}

.existing-filter__empty {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.6);
}

.trainingsplaner-toast {
    margin: 10px 0 12px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.85em;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.trainingsplaner-toast--success {
    background: color-mix(in srgb, var(--color-green) 16%, var(--color-white));
    color: var(--color-green);
    border: 1px solid color-mix(in srgb, var(--color-green) 35%, transparent);
}

.trainingsplaner-toast--error {
    background: color-mix(in srgb, var(--color-red) 16%, var(--color-white));
    color: var(--color-red);
    border: 1px solid color-mix(in srgb, var(--color-red) 35%, transparent);
}

.existing-labels,
.existing-notes {
    display: grid;
    gap: 8px;
    font-size: 0.85em;
    font-weight: 600;
}

.trainingsplaner-existing {
    --tp-label-font-size: 0.85em;
    --tp-label-font-weight: 600;
    --tp-chip-radius: 7px;
    --tp-chip-padding: 1px 10px;
    --tp-chip-gap: 6px;
    --tp-chip-border:transparent;
}

.existing-labels__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.existing-labels__header,
.existing-notes__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.existing-labels__title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.existing-labels__status,
.existing-notes__count {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.6);
}

.existing-notes__count {
    text-align: right;
}

.existing-labels__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tp-label-chip-wrap {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.tp-label-chip {
    border: var(--tp-chip-border);
    border-radius: var(--tp-chip-radius);
    padding: var(--tp-chip-padding);
    font-size: var(--tp-label-font-size);
    font-weight: var(--tp-label-font-weight);
    display: inline-flex;
    align-items: center;
    gap: var(--tp-chip-gap);
    width: max-content;
}

.tp-label-chip.is-active {
    background: rgba(255, 255, 255, 0.18);
	font-weight:bold;
}

.tp-label-chip__label {
    border: none;
    background: transparent;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    cursor: pointer;
    padding: 0;
}

.tp-label-chip__remove {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-weight: 700;
    padding: 0 2px 0 0 ;
}

.existing-labels__empty {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85em;
}

.existing-labels__select,
.existing-labels__new {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.existing-labels__select {
    position: relative;
}

.existing-labels__dropdown-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 180px;
    cursor: pointer;
}

.existing-labels__dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 12;
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: rgba(12, 21, 32, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    min-width: 220px;
    max-width: 280px;
}

.existing-labels__dropdown-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
}

.existing-labels__dropdown-label {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.95);
    text-align: left;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 6px;
}

.existing-labels__dropdown-label:hover,
.existing-labels__dropdown-label:focus {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.existing-labels__dropdown-edit {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    cursor: pointer;
}

.existing-labels__dropdown-edit:hover,
.existing-labels__dropdown-edit:focus {
    border-color: rgba(255, 255, 255, 0.5);
    outline: none;
}

.existing-labels__new {
    position: relative;
}

.existing-labels__add {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
}

.trainingsplaner-existing .existing-labels__add {
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.existing-labels__popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 10;
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: rgba(12, 21, 32, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    min-width: 220px;
    max-width: 250px;
}

.existing-labels__popover-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}

.existing-labels__dropdown {
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.35);
    color: var(--color-white);
    padding: 6px 28px 6px 10px;
    font-size: 0.85em;
    font-weight: 600;
    min-height: 36px;
    width: 300px;
}

.existing-labels__input {
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.35);
    color: var(--color-white) !important;
    padding: 6px 10px;
    font-size: 0.85em;
    font-weight: 600;
    min-height: 36px;
}

.existing-labels__input:focus {
    color: var(--color-white) !important;
    outline: none;
}

.existing-labels__color-picker {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
}

.existing-labels__color-picker input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.existing-labels__error {
    color: #ffb542;
    font-size: 0.75em;
}

.existing-labels__pool-title {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.6);
}

.existing-label-pool-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.existing-label-delete {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0;
}

.existing-label-delete:hover {
    color: #ff5c5c;
}

.existing-labels__edit {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
}

.existing-labels__edit--inline {
    margin-top: 8px;
    width: 100%;
}

.existing-labels__edit-title {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.7);
}

.existing-labels__edit-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.existing-labels__edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.existing-notes__textarea {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.35);
    color: var(--color-white) !important;
    padding: 6px 10px;
    font-size: 0.85em;
    font-weight: 600;
    resize: vertical;
}

.existing-notes__textarea:focus {
    color: var(--color-white) !important;
    outline: none;
}

.trainingsplaner-existing .existing-labels__input:focus-visible,
.trainingsplaner-existing .existing-notes__textarea:focus-visible {
    color: var(--color-white) !important;
}

.existing-labels__enter-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8em;
}

.existing-labels__enter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 0;
}

.existing-labels__enter-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.existing-labels__enter-button:focus-visible {
    outline: 2px solid rgba(89, 194, 251, 0.65);
    outline-offset: 2px;
}

.existing-labels__row .trainingsplaner-text-button,
.existing-labels__row .existing-labels__input,
.existing-labels__row .existing-labels__dropdown {
    min-height: 36px;
}

.trainingsplaner-existing .tp-input,
.trainingsplaner-existing .tp-select,
.trainingsplaner-existing .tp-textarea {
    border-radius: var(--radius-sm) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: rgba(0, 0, 0, 0.35) !important;
    color: var(--color-white) !important;
    font-weight: 400 !important;
}

.trainingsplaner-existing .existing-labels__select .existing-labels__dropdown-button.tp-select {
    padding-right: 28px !important;
    width: 200px !important;
}


.trainingsplaner-existing .tp-input,
.trainingsplaner-existing .tp-select {
    min-height: 36px !important;
}

.trainingsplaner-existing .tp-textarea {
    resize: vertical;
}

.trainingsplaner-existing .tp-input:focus,
.trainingsplaner-existing .tp-select:focus,
.trainingsplaner-existing .tp-textarea:focus,
.trainingsplaner-existing .tp-input:focus-visible,
.trainingsplaner-existing .tp-select:focus-visible,
.trainingsplaner-existing .tp-textarea:focus-visible {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: var(--color-white) !important;
    box-shadow: none !important;
}

.existing-notes__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.6);
}

.existing-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    color: var(--color-white);
    font-weight: 600;
    padding: 2px 5px;
    cursor: pointer;
    text-decoration: none;
}

.existing-action-link.trainingsplaner-text-button {
    padding: 0;
    text-transform: none;
    box-shadow: none;
}
 .tp-area--existing .existing-action-link.trainingsplaner-text-button {
	padding: 3px 5px;
	border:1px solid rgba(255,255,255,.2);
}
.existing-action-link:hover {
    color: var(--color-yellow);
}
.existing-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}
.existing-pagination-label {
    font-size: clamp(0.8rem, 0.75rem + 0.45vw, 1rem);
    color: rgba(255, 255, 255, 0.8);
}
.plan-calendar-wrapper {
    display: inline-flex;
}

.plan-calendar-action-popover {
    position: fixed;
    background: rgba(30, 47, 64, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    padding: 10px;
    box-shadow: 0 12px 24px rgba(30, 47, 64, 0.2);
    color: var(--color-text, #fff);
    display: grid;
    gap: 8px;
    z-index: 10002;
    max-width: min(220px, 90vw);
}

.plan-calendar-action-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.plan-calendar-action-title {
    font-weight: 700;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
}

.plan-calendar-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.plan-calendar-action-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.existing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.existing-hint {
    font-size: clamp(0.7rem, 0.65rem + 0.35vw, 0.85rem);
    color: var(--color-text-muted);
}

.muted {
    color: var(--color-text-muted);
    margin: 0;
}

.trainingsplaner-status {
    position: fixed;
    top: 22vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    margin: 0;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-weight: 700;
    background: var(--color-white);
    color: var(--color-dark-blue);
    box-shadow: var(--shadow-medium);
    max-width: min(420px, 90vw);
    text-align: center;
}

.trainingsplaner-wrapper .button,
.trainingsplaner-card,
.trainingsplaner-plan input,
.trainingsplaner-plan select,
.tp-select__trigger,
.trainingsplaner-plan button {
    outline: none;
}

.trainingsplaner-wrapper .button:focus-visible,
.trainingsplaner-icon-button:focus-visible,
.trainingsplaner-text-button:focus-visible,
.trainingsplaner-card:focus-visible,
.trainingsplaner-plan input:focus-visible,
.trainingsplaner-plan select:focus-visible,
.tp-select__trigger:focus-visible,
.trainingsplaner-plan button:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 3px;
    box-shadow: var(--focus-shadow);
}

.trainingsplaner-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--color-yellow);
}


.trainingsplaner-status.is-error {
    background: color-mix(in srgb, var(--color-red) 18%, var(--color-white));
    color: var(--color-red);
}

.trainingsplaner-status.is-success {
    background: color-mix(in srgb, var(--color-green) 16%, var(--color-white));
    color: var(--color-green);
}

.trainingsplaner-toast {
    position: fixed;
    top: 22vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10005;
    margin: 0;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-weight: 700;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-dark-blue);
    box-shadow: var(--shadow-medium);
    max-width: min(420px, 90vw);
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.trainingsplaner-toast--success {
    background: color-mix(in srgb, var(--color-green) 16%, var(--color-white));
    color: var(--color-green);
    border: 1px solid color-mix(in srgb, var(--color-green) 35%, transparent);
}

.trainingsplaner-toast--error {
    background: color-mix(in srgb, var(--color-red) 16%, var(--color-white));
    color: var(--color-red);
    border: 1px solid color-mix(in srgb, var(--color-red) 35%, transparent);
}

.trainingsplaner-plan-view-wrapper {
    margin-top: 20px;
}

.trainingsplaner-plan-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trainingsplaner-plan-view .plan-view-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.trainingsplaner-plan-view .plan-view-nav a {
    text-decoration: none;
}

.trainingsplaner-plan-view .plan-view-nav a:hover {
    text-decoration: none;
}

.trainingsplaner-plan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    position: sticky;
    top: calc(12px + var(--wp-admin--admin-bar--height, 0px) + var(--tp-header-offset, 0px));
    z-index: 40;
    background: var(--color-dark-blue);
    box-shadow: var(--shadow-medium);
    padding: 10px 12px;
    border-radius: var(--radius-md);
}

.tp-plan-actions__handle {
    display: none;
    border: none;
    background: var(--color-black);
    color: var(--color-yellow);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    padding: 8px 6px;
    cursor: pointer;
}

.tp-plan-actions__panel {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.tp-plan-actions__buttons,
.tp-plan-actions__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tp-plan-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--color-light-blue);
    color: var(--color-dark-blue);
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    transition: background-color var(--transition-medium), color var(--transition-medium), box-shadow var(--transition-medium), transform var(--transition-fast);
}

.tp-plan-action-link:hover {
    background: var(--color-white);
    color: var(--color-dark-blue);
    box-shadow: var(--shadow-medium);
	text-decoration:none;
}

.trainingsplaner-plan-actions .tp-plan-action {
    background: var(--color-yellow);
    color: var(--color-dark-blue);
}

.trainingsplaner-plan-actions .tp-plan-action .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tp-calendar-popover {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
}

.tp-calendar-popover[hidden] {
    display: none;
}

.tp-calendar-popover__backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: auto;
}

.tp-calendar-popover__content {
    position: absolute;
    padding: 0;
    margin: 0;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    pointer-events: auto;
}

.tp-calendar-popover__content .trainingsplaner-calendar {
    box-shadow: var(--shadow-medium);
    border-radius: var(--radius-lg);
}

.tp-calendar-popover__close {
    position: absolute;
    top: 12px;
    right: 12px;
}

body.tp-calendar-popover-open {
    overflow: hidden;
}

body.single-user_einheit h2#aktivierung,
body.single-user_einheit h2#spielform-1,
body.single-user_einheit h2#uebungsform,
body.single-user_einheit h2#spielform-2 {
	text-transform: uppercase;
	color: inherit;
	border-radius: 0px;
	border-bottom:3px dashed #59c2fb;
	margin-top:20px;
	padding: 0px !important;
	background-color: unset !important;
}
.trainingsplaner-plan-actions .tp-plan-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-yellow);
    color: var(--color-dark-blue);
    transition: background-color var(--transition-medium), color var(--transition-medium), box-shadow var(--transition-medium), transform var(--transition-fast);
}

.trainingsplaner-plan-actions .tp-plan-action.trainingsplaner-icon-button {
    background: var(--color-yellow);
    color: var(--color-dark-blue);
	width:36px;
	height:36px;
	padding:0;
	margin:0;
	justify-content:center;
}

.trainingsplaner-plan-actions .tp-plan-action:hover {
    background: var(--color-white);
    color: var(--color-dark-blue);
    box-shadow: var(--shadow-medium);
}

.trainingsplaner-icon-button {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: transparent;
    background: var(--color-dark-gray);
    color: var(--color-white);
    border-radius: 7px;
	border:1px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
	padding:0px 7px;
	text-transform:uppercase;
    font-size: clamp(.9rem, 0.90rem + 0.6vw, 1.15rem);
	font-weight:700;
    line-height: 1;
}

.trainingsplaner-text-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 7px;
    cursor: pointer;
    padding: 6px 12px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.trainingsplaner-text-button:hover {
    transform: translateY(-1px);
}

.trainingsplaner-text-button:active {
    transform: translateY(0);
}

.trainingsplaner-text-button[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
    box-shadow: none;
}

.trainingsplaner-text-button.is-primary {
    background: var(--color-light-blue);
    color: var(--color-white);
    box-shadow: 0 8px 18px rgba(30, 47, 64, 0.14);
}

.trainingsplaner-text-button.is-primary:hover {
    box-shadow: var(--shadow-medium);
}

.trainingsplaner-text-button.is-danger {
    color: #ffe2e2;
    background: rgba(255, 92, 92, 0.2);
    border: 1px solid rgba(255, 92, 92, 0.4);
}

.trainingsplaner-text-button.is-active {
    background: color-mix(in srgb, var(--color-yellow) 25%, transparent);
    color: var(--color-dark-blue);
}

.tp-area--plan .plan-header .trainingsplaner-icon-button {
	background: rgba(255, 255, 255, 0.12);
	    color: var(--color-white);
	    border: 1px solid rgba(255, 255, 255, 0.18);
	    box-shadow: none;
}

.tp-area--plan .plan-header .trainingsplaner-icon-button .material-symbols-outlined {
    color: currentColor;
}

.tp-area--plan .plan-header .trainingsplaner-icon-button.is-primary {
    /*margin-right: 5px;*/
	padding:0px 7px 0px 3px;

}
.trainingsplaner-icon-button:hover {
    border-color: var(--color-yellow);
    transform: translateY(-1px);
}

.trainingsplaner-icon-button:active {
    transform: translateY(0);
    background: var(--color-surface-accent);
}

.trainingsplaner-icon-button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.trainingsplaner-icon-button.is-primary {
    background: var(--color-light-blue);
    color:  var(--color-white);
    border-color: transparent;
	
}

.trainingsplaner-icon-button.is-primary:hover {
    box-shadow: var(--shadow-medium);
	text-decoration:none;
}

.tp-area--toolbar .trainingsplaner-icon-button,
.tp-area--column .trainingsplaner-icon-button,
.tp-area--plan-actions .trainingsplaner-icon-button {
    background: unset;
    color: var(--color-dark-gray);
	box-shadow:unset;
}

.tp-area--card .trainingsplaner-icon-button {
    background: transparent;
    color: var(--color-white);
    border: none;
    box-shadow: none;
}
.card-preview-controls button.trainingsplaner-icon-button.card-action-button.tp-action-button {
	background:var(--color-yellow);
	color:var(--color-dark-blue);
}
.tp-area--card .trainingsplaner-icon-button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.tp-area--calendar .trainingsplaner-icon-button,
.tp-area--popover .trainingsplaner-icon-button:not(.trainingsplaner-exercise-popover__close),
.tp-area--existing .trainingsplaner-icon-button:not(.existing-labels__add) {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

.tp-area--calendar .trainingsplaner-icon-button:hover,
.tp-area--popover .trainingsplaner-icon-button:not(.trainingsplaner-exercise-popover__close):hover,
.tp-area--existing .trainingsplaner-icon-button:not(.existing-labels__add):hover {
    background: rgba(255, 255, 255, 0.2);
}
button.trainingsplaner-shortcode-button {
	margin:10px 0px;
}

button.trainingsplaner-shortcode-button--icon,
a.trainingsplaner-shortcode-button--icon {
    padding: 6px;
    min-width: 36px;
    min-height: 36px;
    line-height: 1;
}

.trainingsplaner-shortcode-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.trainingsplaner-shortcode-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}
.trainingsplaner-icon-button.is-danger {
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
}

.trainingsplaner-icon-button.is-danger:hover {
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

.trainingsplaner-icon-button.is-active {
    background: color-mix(in srgb, var(--color-yellow) 25%, transparent);
    color: var(--color-dark-blue);
}

.trainingsplaner-wrapper [data-tooltip],
.trainingsplaner-plan-actions [data-tooltip] {
    position: relative;
}

.trainingsplaner-wrapper [data-tooltip]::before,
.trainingsplaner-wrapper [data-tooltip]::after,
.trainingsplaner-plan-actions [data-tooltip]::before,
.trainingsplaner-plan-actions [data-tooltip]::after {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    transition-delay: 0.05s;
}

.trainingsplaner-wrapper[data-tooltip-layer='true'] [data-tooltip]::before,
.trainingsplaner-wrapper[data-tooltip-layer='true'] [data-tooltip]::after {
    display: none;
}

.trainingsplaner-wrapper [data-tooltip]::after,
.trainingsplaner-plan-actions [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translate(-50%, -6px);
    background: var(--color-yellow);
    color: var(--color-dark-blue);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(30, 47, 64, 0.18);
    z-index: 30;
}

.trainingsplaner-wrapper [data-tooltip]::before,
.trainingsplaner-plan-actions [data-tooltip]::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    transform: translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent var(--color-yellow) transparent;
    z-index: 29;
}

.trainingsplaner-wrapper [data-tooltip]:hover::before,
.trainingsplaner-wrapper [data-tooltip]:hover::after,
.trainingsplaner-wrapper [data-tooltip]:focus-visible::before,
.trainingsplaner-wrapper [data-tooltip]:focus-visible::after,
.trainingsplaner-plan-actions [data-tooltip]:hover::before,
.trainingsplaner-plan-actions [data-tooltip]:hover::after,
.trainingsplaner-plan-actions [data-tooltip]:focus-visible::before,
.trainingsplaner-plan-actions [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.trainingsplaner-tooltip-layer {
    position: fixed;
    max-width: min(320px, 90vw);
    background: var(--color-yellow);
    color: var(--color-dark-blue);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    line-height: 1.25;
    z-index: 9999;
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
    box-shadow: 0 6px 14px rgba(30, 47, 64, 0.18);
    text-align: center;
}

.existing-action-link.is-danger {
    color: color-mix(in srgb, var(--color-danger) 80%, transparent);
}

.existing-action-link.is-danger:hover {
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

.trainingsplaner-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop-color);
    backdrop-filter: blur(var(--modal-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 10000;
}

.trainingsplaner-modal {
    background: var(--modal-bg);
    color: var(--modal-text);
    border-radius: var(--modal-radius);
    max-width: 440px;
    width: min(440px, 95vw);
    box-shadow: var(--shadow-medium);
    padding: var(--modal-padding);
    display: flex;
    flex-direction: column;
    gap: var(--modal-gap);
    font-size: 14px;
}
.trainingsplaner-shortcode-modal .trainingsplaner-modal {
    background: var(--modal-bg);
    
}
.trainingsplaner-shortcode-modal .trainingsplaner-modal h3 {
	padding:0px;
}
.trainingsplaner-shortcode-modal .trainingsplaner-modal button.trainingsplaner-modal-option  {
	color:white;
	margin-right:5px;
}
button.trainingsplaner-text-button.trainingsplaner-modal-close {
	color: var(--modal-text);
}
.trainingsplaner-modal h3,
.trainingsplaner-modal p,
.trainingsplaner-modal ul,
.trainingsplaner-modal li {
    margin: 0;
	color: var(--modal-text);
}
.trainingsplaner-modal h3 {
	font-size:1.5em;
}
.trainingsplaner-modal-content ul {
    padding-left: 16px;
    display: grid;
    gap: 4px;
	margin-left:0px!important;
}
.trainingsplaner-modal-content ul li,
.trainingsplaner-modal p {
	font-size: 14px !important;
}

.trainingsplaner-modal-stand {
    font-weight: 600;
    margin-top: 4px;
}

.trainingsplaner-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--modal-actions-gap);
}

.trainingsplaner-modal-actions.is-stacked {
    flex-direction: column;
    align-items: stretch;
}

.trainingsplaner-modal-actions.is-stacked > .trainingsplaner-text-button {
    width: 100%;
}

.trainingsplaner-modal-actions__split {
    display: inline-flex;
    gap: var(--modal-actions-gap);
}
p.trainingsplaner-modal-stand {
	font-size:12px;
}
.trainingsplaner-modal-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
}
.trainingsplaner-modal-checkbox input {
    margin: 0;
}

.tp-area--modal .trainingsplaner-text-button {
    padding: var(--modal-button-padding);
    border-radius: var(--modal-button-radius);
    border: var(--modal-button-border);
    background: var(--modal-button-bg);
    color: var(--modal-button-text);
    box-shadow: none;
}

.trainingsplaner-modal button.trainingsplaner-modal-option {
    padding: var(--modal-button-padding);
    border-radius: var(--modal-button-radius);
    border: var(--modal-button-border);
    background: var(--modal-button-bg);
    color: var(--modal-button-text);
    box-shadow: none;
    font-weight: 700;
    text-transform: uppercase;
}

.tp-area--modal .trainingsplaner-text-button:hover {
    background: var(--modal-button-bg-hover);
}

.trainingsplaner-modal button.trainingsplaner-modal-option:hover {
    background: var(--modal-button-bg-hover);
}

.tp-area--modal .trainingsplaner-text-button.is-primary {
    background: var(--modal-button-primary-bg);
    border-color: transparent;
    color: var(--color-white);
}

.tp-area--modal .trainingsplaner-text-button.is-danger {
    background: var(--modal-button-danger-bg);
    border: var(--modal-button-danger-border);
    color: var(--modal-text);
}
.trainingsplaner-tour {
    position: fixed;
    inset: 0;
    z-index: 10001;
    pointer-events: none;
}

.trainingsplaner-tour-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 18, 28, 0.75);
}

.trainingsplaner-tour-spotlight {
    position: absolute;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-yellow);
    box-shadow: 0 0 0 9999px rgba(9, 18, 28, 0.75);
    pointer-events: none;
}

.trainingsplaner-tour-card {
    position: absolute;
    right: 24px;
    bottom: 24px;
    background: var(--color-dark-blue);
    color: var(--color-white);
    padding: 18px;
    border-radius: var(--radius-md);
    max-width: 320px;
    box-shadow: var(--shadow-medium);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.trainingsplaner-tour-card h4, 
.trainingsplaner-tour-card p {
	padding:0px;
}
.tp-area--tour button.trainingsplaner-icon-button,
.tp-area--tour button.trainingsplaner-text-button {
	background: color-mix(in srgb, var(--color-yellow)50%, transparent);
	padding:2px 10px;
}
.trainingsplaner-tour-card.is-top {
    top: 24px;
    bottom: auto;
}

.trainingsplaner-tour-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.column-random-button {
    min-width: 40px;
    min-height: 40px;
}
.trainingsplaner-column .material-symbols-outlined,
.plan-calendar .material-symbols-outlined {
	/*color:var(--color-white);*/
}
.trainingsplaner-column .trainingsplaner-icon-dice,
.plan-calendar .trainingsplaner-icon-dice {
	color: var(--color-white);
}
.trainingsplaner-icon-dice {
	display: inline-block;
	width: 1.8rem;
	height: 1.8rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 722.06 687.48'><path fill-rule='evenodd' clip-rule='evenodd' d='M179.03,0L15.03,117.6c-3.27,2.34-2.43,7.41,1.42,8.58l137.84,41.87c1.51.46,3.15.15,4.4-.82L322.46,39.08c3.24-2.53,2.05-7.69-1.97-8.56L179.03,0h0ZM355.57,48.57l-181.54,138.35c-1.72,1.31-2.36,3.6-1.58,5.62l75.96,195.01c1.22,3.13,5.18,4.1,7.71,1.89l7.02-6.13c.72-.63,1.24-1.46,1.49-2.39l5.37-19.96c.49-1.82-.12-3.75-1.56-4.97-7.8-6.59-12.59-18.58-11.77-30.15.88-12.33,7.91-21.11,17.18-21.45,1.87-.07,3.77.21,5.66.83.02,0,.03.01.05.02,2.7.91,5.61-.55,6.35-3.29l10.87-40.37c.15-.55.33-1.1.55-1.62.03-.07.06-.13.09-.2.15-.36.32-.72.5-1.07.05-.08.09-.16.14-.24.18-.33.37-.66.58-.98.26-.39.54-.77.83-1.13.03-.04.07-.08.1-.12.27-.32.55-.63.84-.93.32-.33.66-.63,1.02-.93,0,0,0,0,0,0,.23-.19.47-.36.72-.53.14-.11.28-.21.42-.31.26-.16.52-.32.78-.47.14-.08.28-.17.42-.25.23-.11.46-.22.69-.32.2-.1.39-.19.59-.28.23-.08.45-.16.68-.24.21-.08.43-.15.64-.22.21-.06.42-.11.63-.16.24-.07.49-.13.73-.18.26-.04.53-.08.8-.11.19-.03.38-.06.58-.08h.02s.01,0,.02,0l49.34-4.22c1.86-.16,3.45-1.37,4.12-3.11,2.88-7.49,8.52-12.18,15.21-12.43,1.87-.07,3.77.21,5.66.83,4.38,1.45,8.5,4.66,11.79,9.16,1.02,1.39,2.66,2.19,4.38,2.05l11.48-.98c3.1-.26,5.15-3.34,4.21-6.3l-59.78-187.62h0ZM176.61,60.45c13.63.28,21.99,5.99,20,13.65-2.32,8.89-17.66,17.28-34.28,18.75-16.62,1.47-28.21-4.55-25.89-13.44,0,0,0,0,0,0,2.31-8.89,17.66-17.28,34.27-18.75h0c2.01-.18,3.98-.24,5.89-.2h0ZM333.22,97.2s0,0,0,0c1.87-.07,3.77.21,5.66.83,11.53,3.77,20,19.12,18.92,34.28-1.08,15.16-11.31,24.39-22.84,20.62,0,0,0,0,0,0-11.53-3.77-20.01-19.12-18.93-34.28,0,0,0,0,0,0,.88-12.33,7.91-21.11,17.18-21.45h0ZM0,150.58l72.67,176.49c.48,1.17,1.41,2.11,2.57,2.61l135.1,57.89c3.91,1.67,7.93-2.13,6.46-6.13l-67.16-183.38c-.52-1.43-1.69-2.53-3.14-2.97L0,150.57h0ZM231.07,177.81c1.87-.07,3.77.21,5.66.82,11.53,3.77,20,19.12,18.92,34.28-1.08,15.16-11.3,24.39-22.84,20.62,0,0,0,0,0,0-11.53-3.77-20-19.12-18.92-34.28.88-12.33,7.91-21.11,17.18-21.45h0ZM113.69,198.15c8.02-.44,19.48,9.75,26.49,23.56,7.55,14.85,7.25,28.48-.66,30.45,0,0,0,0,0,0-7.91,1.96-20.45-8.49-27.99-23.34-7.54-14.85-7.24-28.47.66-30.44.48-.12.98-.2,1.5-.22h0ZM525.24,260.98l-161.87,13.83c-4.51.39-6.08,6.2-2.38,8.8l165.26,116.1c1.02.72,2.27,1.01,3.5.83l162.64-24.28c4.45-.66,5.68-6.5,1.87-8.9l-169.02-106.39h0ZM72.81,276.06c8.02-.44,19.48,9.74,26.5,23.56,7.55,14.85,7.25,28.48-.66,30.44-7.91,1.96-20.44-8.49-27.99-23.34-7.54-14.85-7.25-28.48.66-30.44.48-.12.98-.19,1.5-.22h0ZM318.72,288.27l-64.11,237.97c-.49,1.8.11,3.72,1.52,4.94l172.56,148.44c2.69,2.32,6.88,1.05,7.83-2.37l70.69-252.59c.55-1.98-.2-4.09-1.88-5.28l-186.61-131.11h0ZM517.13,305.72c9.84.18,21.36,2.98,30.77,7.47,15.75,7.52,21.07,17.48,11.89,22.26,0,0,0,0,0,0-9.18,4.77-29.39,2.55-45.13-4.97h0c-15.75-7.52-21.07-17.48-11.89-22.26,3.35-1.74,8.36-2.61,14.37-2.5h0ZM716.49,401.1l-177.94,26.56c-1.89.28-3.44,1.65-3.95,3.49l-70.01,250.17c-1.02,3.63,2.31,6.98,5.95,5.99l170.96-46.7c1.56-.43,2.81-1.6,3.32-3.14l76.99-230.02c1.15-3.43-1.73-6.87-5.31-6.34ZM440.24,416.81c2.21,0,4.43.5,6.62,1.47,13.37,5.96,22.37,28.15,20.11,49.56,0,0,0,0,0,0-2.26,21.41-14.92,33.92-28.29,27.96-13.37-5.96-22.37-28.15-20.12-49.56,0,0,0,0,0,0,1.84-17.41,10.7-29.45,21.67-29.43ZM681,434.99c5.1-.15,9.32,2.12,11.99,6.45,6.52,10.6,2.2,30.49-9.65,44.43-11.85,13.94-26.74,16.65-33.26,6.06-6.52-10.59-2.2-30.49,9.65-44.43,6.55-7.7,14.38-12.31,21.27-12.51h0ZM573.66,451.65c5.1-.15,9.32,2.12,11.99,6.45,6.52,10.6,2.2,30.49-9.65,44.43-11.85,13.94-26.74,16.65-33.26,6.06-6.52-10.6-2.2-30.49,9.65-44.43,6.55-7.7,14.38-12.31,21.27-12.51h0ZM301.79,472.44c2.21,0,4.44.5,6.63,1.48,13.37,5.97,22.37,28.15,20.11,49.56,0,0,0,0,0,0-2.26,21.41-14.92,33.93-28.29,27.96h0c-13.37-5.96-22.37-28.15-20.11-49.56,0,0,0,0,0,0,1.84-17.41,10.7-29.45,21.67-29.44h0ZM633.47,567.55c5.1-.15,9.32,2.12,11.98,6.45,6.52,10.59,2.2,30.48-9.65,44.43-11.85,13.94-26.74,16.65-33.26,6.06-6.52-10.59-2.2-30.49,9.65-44.43,6.55-7.7,14.38-12.31,21.27-12.51h0ZM523.58,598c5.1-.15,9.32,2.13,11.98,6.46,6.52,10.59,2.2,30.48-9.65,44.43-11.85,13.94-26.74,16.65-33.26,6.05,0,0,0,0,0,0-6.52-10.6-2.2-30.49,9.65-44.43,6.55-7.7,14.38-12.31,21.27-12.51h0Z'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 722.06 687.48'><path fill-rule='evenodd' clip-rule='evenodd' d='M179.03,0L15.03,117.6c-3.27,2.34-2.43,7.41,1.42,8.58l137.84,41.87c1.51.46,3.15.15,4.4-.82L322.46,39.08c3.24-2.53,2.05-7.69-1.97-8.56L179.03,0h0ZM355.57,48.57l-181.54,138.35c-1.72,1.31-2.36,3.6-1.58,5.62l75.96,195.01c1.22,3.13,5.18,4.1,7.71,1.89l7.02-6.13c.72-.63,1.24-1.46,1.49-2.39l5.37-19.96c.49-1.82-.12-3.75-1.56-4.97-7.8-6.59-12.59-18.58-11.77-30.15.88-12.33,7.91-21.11,17.18-21.45,1.87-.07,3.77.21,5.66.83.02,0,.03.01.05.02,2.7.91,5.61-.55,6.35-3.29l10.87-40.37c.15-.55.33-1.1.55-1.62.03-.07.06-.13.09-.2.15-.36.32-.72.5-1.07.05-.08.09-.16.14-.24.18-.33.37-.66.58-.98.26-.39.54-.77.83-1.13.03-.04.07-.08.1-.12.27-.32.55-.63.84-.93.32-.33.66-.63,1.02-.93,0,0,0,0,0,0,.23-.19.47-.36.72-.53.14-.11.28-.21.42-.31.26-.16.52-.32.78-.47.14-.08.28-.17.42-.25.23-.11.46-.22.69-.32.2-.1.39-.19.59-.28.23-.08.45-.16.68-.24.21-.08.43-.15.64-.22.21-.06.42-.11.63-.16.24-.07.49-.13.73-.18.26-.04.53-.08.8-.11.19-.03.38-.06.58-.08h.02s.01,0,.02,0l49.34-4.22c1.86-.16,3.45-1.37,4.12-3.11,2.88-7.49,8.52-12.18,15.21-12.43,1.87-.07,3.77.21,5.66.83,4.38,1.45,8.5,4.66,11.79,9.16,1.02,1.39,2.66,2.19,4.38,2.05l11.48-.98c3.1-.26,5.15-3.34,4.21-6.3l-59.78-187.62h0ZM176.61,60.45c13.63.28,21.99,5.99,20,13.65-2.32,8.89-17.66,17.28-34.28,18.75-16.62,1.47-28.21-4.55-25.89-13.44,0,0,0,0,0,0,2.31-8.89,17.66-17.28,34.27-18.75h0c2.01-.18,3.98-.24,5.89-.2h0ZM333.22,97.2s0,0,0,0c1.87-.07,3.77.21,5.66.83,11.53,3.77,20,19.12,18.92,34.28-1.08,15.16-11.31,24.39-22.84,20.62,0,0,0,0,0,0-11.53-3.77-20.01-19.12-18.93-34.28,0,0,0,0,0,0,.88-12.33,7.91-21.11,17.18-21.45h0ZM0,150.58l72.67,176.49c.48,1.17,1.41,2.11,2.57,2.61l135.1,57.89c3.91,1.67,7.93-2.13,6.46-6.13l-67.16-183.38c-.52-1.43-1.69-2.53-3.14-2.97L0,150.57h0ZM231.07,177.81c1.87-.07,3.77.21,5.66.82,11.53,3.77,20,19.12,18.92,34.28-1.08,15.16-11.3,24.39-22.84,20.62,0,0,0,0,0,0-11.53-3.77-20-19.12-18.92-34.28.88-12.33,7.91-21.11,17.18-21.45h0ZM113.69,198.15c8.02-.44,19.48,9.75,26.49,23.56,7.55,14.85,7.25,28.48-.66,30.45,0,0,0,0,0,0-7.91,1.96-20.45-8.49-27.99-23.34-7.54-14.85-7.24-28.47.66-30.44.48-.12.98-.2,1.5-.22h0ZM525.24,260.98l-161.87,13.83c-4.51.39-6.08,6.2-2.38,8.8l165.26,116.1c1.02.72,2.27,1.01,3.5.83l162.64-24.28c4.45-.66,5.68-6.5,1.87-8.9l-169.02-106.39h0ZM72.81,276.06c8.02-.44,19.48,9.74,26.5,23.56,7.55,14.85,7.25,28.48-.66,30.44-7.91,1.96-20.44-8.49-27.99-23.34-7.54-14.85-7.25-28.48.66-30.44.48-.12.98-.19,1.5-.22h0ZM318.72,288.27l-64.11,237.97c-.49,1.8.11,3.72,1.52,4.94l172.56,148.44c2.69,2.32,6.88,1.05,7.83-2.37l70.69-252.59c.55-1.98-.2-4.09-1.88-5.28l-186.61-131.11h0ZM517.13,305.72c9.84.18,21.36,2.98,30.77,7.47,15.75,7.52,21.07,17.48,11.89,22.26,0,0,0,0,0,0-9.18,4.77-29.39,2.55-45.13-4.97h0c-15.75-7.52-21.07-17.48-11.89-22.26,3.35-1.74,8.36-2.61,14.37-2.5h0ZM716.49,401.1l-177.94,26.56c-1.89.28-3.44,1.65-3.95,3.49l-70.01,250.17c-1.02,3.63,2.31,6.98,5.95,5.99l170.96-46.7c1.56-.43,2.81-1.6,3.32-3.14l76.99-230.02c1.15-3.43-1.73-6.87-5.31-6.34ZM440.24,416.81c2.21,0,4.43.5,6.62,1.47,13.37,5.96,22.37,28.15,20.11,49.56,0,0,0,0,0,0-2.26,21.41-14.92,33.92-28.29,27.96-13.37-5.96-22.37-28.15-20.12-49.56,0,0,0,0,0,0,1.84-17.41,10.7-29.45,21.67-29.43ZM681,434.99c5.1-.15,9.32,2.12,11.99,6.45,6.52,10.6,2.2,30.49-9.65,44.43-11.85,13.94-26.74,16.65-33.26,6.06-6.52-10.59-2.2-30.49,9.65-44.43,6.55-7.7,14.38-12.31,21.27-12.51h0ZM573.66,451.65c5.1-.15,9.32,2.12,11.99,6.45,6.52,10.6,2.2,30.49-9.65,44.43-11.85,13.94-26.74,16.65-33.26,6.06-6.52-10.6-2.2-30.49,9.65-44.43,6.55-7.7,14.38-12.31,21.27-12.51h0ZM301.79,472.44c2.21,0,4.44.5,6.63,1.48,13.37,5.97,22.37,28.15,20.11,49.56,0,0,0,0,0,0-2.26,21.41-14.92,33.93-28.29,27.96h0c-13.37-5.96-22.37-28.15-20.11-49.56,0,0,0,0,0,0,1.84-17.41,10.7-29.45,21.67-29.44h0ZM633.47,567.55c5.1-.15,9.32,2.12,11.98,6.45,6.52,10.59,2.2,30.48-9.65,44.43-11.85,13.94-26.74,16.65-33.26,6.06-6.52-10.59-2.2-30.49,9.65-44.43,6.55-7.7,14.38-12.31,21.27-12.51h0ZM523.58,598c5.1-.15,9.32,2.13,11.98,6.46,6.52,10.59,2.2,30.48-9.65,44.43-11.85,13.94-26.74,16.65-33.26,6.05,0,0,0,0,0,0-6.52-10.6-2.2-30.49,9.65-44.43,6.55-7.7,14.38-12.31,21.27-12.51h0Z'/></svg>") no-repeat center / contain;
}
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: clamp(1.4rem, 1.2rem + 1.2vw, 1.5rem);
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.trainingsplaner-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.trainingsplaner-column-list,
.trainingsplaner-columns {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.trainingsplaner-column-list::-webkit-scrollbar,
.trainingsplaner-columns::-webkit-scrollbar {
    display: none;
}

/*.trainingsplaner-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.trainingsplaner-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}*/

.trainingsplaner-swipe-hint {
    margin: 0 0 8px;
    font-size: clamp(0.85rem, 0.8rem + 0.5vw, 1.05rem);
    font-weight: 600;
    color: var(--color-white);
    display: none;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--color-dark-blue) 70%, transparent);
    padding: 6px 10px;
    border-radius: 999px;
    width: fit-content;
}

.trainingsplaner-swipe-hint::after {
    content: '➜';
    display: inline-block;
    animation: trainingsplaner-swipe-bounce 1.6s ease-in-out infinite;
}

@keyframes trainingsplaner-swipe-bounce {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(6px);
    }
}

body.single-user_einheit {
    scroll-behavior: smooth;
}
html:has(body.single-user_einheit) {
    scroll-behavior: smooth;
}

/* Media Queries */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html:has(body.single-user_einheit),
    body.single-user_einheit {
        scroll-behavior: smooth !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    .trainingsplaner-card:hover .card-preview-layer {
        opacity: 1;
    }
}

@media (hover: hover) and (pointer: fine) {
    .trainingsplaner-card:hover .card-preview-controls {
        opacity: 1;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .trainingsplaner-exercise-popover {
        position: relative;
        width: min(80vw, 640px);
        max-height: 85vh;
        aspect-ratio: auto;
    }
}

@media (min-width: 641px) and (max-width: 1024px) and (orientation: landscape) {
    .trainingsplaner-exercise-overlay__backdrop {
        background: rgba(0, 0, 0, 0.4);
    }
}

@media (max-width: 640px) {
    .trainingsplaner-exercise-popover {
        position: relative;
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
		margin-top:150px;
        border-radius: 0;
        aspect-ratio: auto;
    }

}

@media (max-width: 767px) {
    .trainingsplaner-plan-actions {
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 60;
        background: transparent;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
        display: inline-flex;
        align-items: center;
    }

    .tp-plan-actions__flyout {
        --tp-flyout-handle-width: 32px;
        position: relative;
        display: flex;
        align-items: center;
        transform: translateX(calc(100% - var(--tp-flyout-handle-width)));
        transition: transform var(--transition-medium);
    }

    .tp-plan-actions__handle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        right: auto;
        top: 50%;
        transform: translateY(-50%);
        border-radius: var(--radius-md) 0 0 var(--radius-md);
        z-index: 1;
    }

    .tp-plan-actions__panel {
        width: 90px;
        background: var(--color-black);
        padding: 12px;
        margin-left: var(--tp-flyout-handle-width);
        border-radius: var(--radius-md) 0 0 var(--radius-md);
        box-shadow: var(--shadow-medium);
        flex-direction: column;
        align-items: flex-start;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        position: relative;
    }

    .trainingsplaner-plan-actions.is-open .tp-plan-actions__flyout {
        transform: translateX(0);
    }
    .trainingsplaner-plan-actions.is-open .tp-plan-actions__handle {
        left: 0;
    }
	.trainingsplaner-plan-actions .tp-plan-action.trainingsplaner-icon-button {
		width:30px;
		height:30px;

	}
    .tp-plan-actions__buttons {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 32px);
        grid-auto-rows: 32px;
        gap: 8px;
        justify-content: space-around;
    }

    .tp-plan-actions__links {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .tp-plan-actions__buttons .trainingsplaner-icon-button {
        width: 32px;
        height: 32px;
        justify-content: center;
    }

    .tp-plan-actions__links .tp-plan-action-link {
        justify-content: flex-start;
    }
}

@media (max-width: 1100px) {
    .tp-advanced-filters {
        flex: 1 0 100%;
        width: 100%;
    }

    .tp-advanced-filters__trigger {
        justify-content: space-between;
        width: 100%;
    }

    .tp-advanced-filters__panel {
        position: static;
        width: 100%;
        max-width: none;
        margin-top: 8px;
        transform: none;
    }
}

@media (max-width: 640px) {
    .trainingsplaner-topbar {
        overflow-x: visible;
    }

    .trainingsplaner-topbar__group {
        flex-wrap: wrap;
        gap: 8px;
    }

    .trainingsplaner-topbar__item {
        min-width: min(100%, 150px);
        flex: 1 1 150px;
    }

    .taxonomie-filter > .filter-field {
        flex: 1 1 150px;
    }

    .taxonomie-filter > .filter-field > .tp-select,
    .taxonomie-filter > .filter-field > .tp-select .tp-select__trigger {
        width: 100%;
    }

    .taxonomie-filter {
        width: 100%;
    }

    .tp-player-range {
        width: 100%;
    }

    .tp-player-range__fields .tp-select {
        flex: 1 1 0;
    }

    .tp-advanced-filters {
        width: 100%;
    }

    .tp-advanced-filters__trigger {
        justify-content: space-between;
    }

    .tp-advanced-filters__panel {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .tp-active-filters {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .tp-active-filters__label {
        width: 100%;
    }

    .tp-active-filters__clear {
        margin-left: 0;
    }

    .trainingsplaner-topbar__item .tp-select__trigger {
        min-height: 34px;
        padding: 6px 10px;
    }

    .trainingsplaner-topbar__item .tp-select--filter .tp-select__trigger {
        padding: 6px 10px;
    }

    .plan-header {
		display:flex;
		align-items: flex-end;
		gap: 16px;
		flex-wrap: wrap;
	}

    .plan-calendar-popover {
        position: absolute;
        width: calc(100vw - 24px);
        max-width: 100%;
        margin: 0;
    }

    .plan-calendar-action-popover {
        width: auto;
        max-width: calc(100vw - 24px);
        left: auto;
        right: auto;
        transform: none;
    }

    /*.trainingsplaner-column {
        min-width: calc(100% - 36px);
        flex: 0 0 calc(100% - 36px);
    }*/

    .trainingsplaner-filters .filter-field.is-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .trainingsplaner-action-group {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .trainingsplaner-icon-button {
        min-width: 30px;
        min-height: 30px;
        font-size: clamp(0.9rem, 0.85rem + 0.4vw, 1.1rem);
    }

    .trainingsplaner-card .card-preview-controls {
        opacity: 1;
    }

    .trainingsplaner-card .card-preview-controls .card-action-button {
        min-width: 38px;
        min-height: 38px;
    }

    .trainingsplaner-card .card-preview-timeline {
        bottom: 10px;
    }

    .trainingsplaner-swipe-hint {
        display: inline-flex;
    }

    .trainingsplaner-columns-indicator {
        display: inline-flex;
    }

    .trainingsplaner-column-list {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-snap-type: y proximity;
        max-height: 60vh;
    }

    .existing-list {
        grid-template-columns: 1fr;
    }
	.existing-plan__grid {
		grid-template-columns: 1fr;
	}
    .existing-plan__main {
        order: 1;
    }
    .existing-plan__side {
        order: 2;
    }
    .existing-actions {
        margin-left: 0;
        flex-wrap: wrap;
    }
    .existing-row--meta {
        gap: 5px;
    }

    .plan-preview {
        --card-min-width: 140px;
    }

    .plan-preview-item {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
    }

    .trainingsplaner-modal-backdrop {
        padding: 12px;
    }

    .trainingsplaner-modal {
        width: 100%;
        padding: var(--modal-padding-mobile);
        gap: var(--modal-gap-mobile);
        max-height: 90vh;
        overflow-y: auto;
    }

    .trainingsplaner-tour-card.is-top {
        top: 12px;
        right: 12px;
        max-width: min(320px, 90vw);
    }
}

@media (max-width: 480px) {
    .taxonomie-filter > .filter-field {
        flex-basis: 100%;
        width: 100%;
    }

    .tp-active-filters__chips,
    .tp-filter-chip,
    .tp-active-filters__clear {
        width: 100%;
    }

    .tp-filter-chip {
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    .plan-preview {
        --card-min-width: 110px;
    }

    .plan-preview-item {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
    }
}

@media (min-width: 641px) and (max-width: 899px) {
    .trainingsplaner-columns {
        gap: 8px;
        overflow-x: visible;
        flex-wrap: wrap;
        scroll-snap-type: none;
        align-content: flex-start;
    }

    .plan-preview {
    }

    .trainingsplaner-column {
        height: 80vh;
        display: flex;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.5);
        flex: 1 1 calc(50% - 8px);
        max-width: none;
        min-width: 0;
    }

    .trainingsplaner-column-list {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow-y: auto;
        scrollbar-width: none;
        overflow-x: hidden;
    }

    .trainingsplaner-column-list::-webkit-scrollbar {
        display: none;
    }

    .trainingsplaner-column-list-wrapper {
        flex: 1 1 auto;
        min-height: 0;
    }
}

@media (min-width: 900px) {
    /*.trainingsplaner-layout {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 1.35fr);
        align-items: start;
        gap: 18px;
    }*/

    .trainingsplaner-columns {
        gap: 8px;
        overflow-x: visible;
        scrollbar-width: none;
        flex-wrap: wrap;
    }
    .trainingsplaner-columns::-webkit-scrollbar {
        display: none;
    }
    .trainingsplaner-column {
		height: 60vh;              /* steuert sichtbare Card-Anzahl */
		display: flex;
		flex-direction: column;
		background:rgba(0,0,0,.5);
        flex: 1 1 min(280px, 25%);
        max-width: none;
        min-width: 0;
    }
    .trainingsplaner-column-list-wrapper {
        flex: 1 1 auto;
        min-height: 0;
    }
	
    .trainingsplaner-column-list {
		flex: 1 1 auto;
		min-height: 0;             /* DAS war der fehlende Schlüssel */

		display: flex;
		flex-direction: column;    /* vertikale Cards */
		gap: 12px;

		overflow-y: auto;          /* vertikal scrollen */
		scrollbar-width: none;
		overflow-x: hidden;
    }
	.trainingsplaner-column-list::-webkit-scrollbar {
	    display: none;
	}
    .existing-list {
        grid-template-columns: 1fr;
    }

}

@media (min-width: 900px) and (max-width: 1199px) {
    .trainingsplaner-columns {
        gap: 8px;
        overflow-x: visible;
        flex-wrap: wrap;
        scroll-snap-type: none;
        align-content: flex-start;
    }

    .plan-preview {
    }

    .trainingsplaner-column {
        flex: 1 1 calc(50% - 8px);
        max-width: none;
        min-width: 0;
    }
}