.sci-live-kurs[data-sci-course-id] {
position: relative;
isolation: isolate;
cursor: pointer;
border-radius: inherit;
transition: transform 160ms ease, filter 160ms ease;
-webkit-tap-highlight-color: transparent;
}
.sci-live-kurs[data-sci-course-id]:not(.is-sci-selected):hover {
transform: translate(2px, -2px);
}
.sci-live-kurs[data-sci-course-id]::before {
content: "";
position: absolute;
inset: -4px;
z-index: 2;
border: 3px solid transparent;
border-radius: calc(var(--sci-rlk-radius, 12px) + 3px);
background: linear-gradient(135deg, #5167ff 0%, #7738e8 48%, #e235b8 100%) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease;
}
.sci-live-kurs[data-sci-course-id]::after {
content: "✓";
position: absolute;
top: 12px;
right: 12px;
z-index: 4;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 2px solid rgba(255, 255, 255, 0.9);
border-radius: 999px;
background: linear-gradient(135deg, #5167ff 0%, #7738e8 52%, #e235b8 100%);
color: #fff;
font: 700 24px/1 Arial, sans-serif;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.45);
opacity: 0;
transform: scale(0.72);
pointer-events: none;
transition: opacity 180ms ease, transform 180ms ease;
}
.sci-live-kurs[data-sci-course-id] img {
transition: filter 160ms ease;
}
.sci-live-kurs[data-sci-course-id]:not(.is-sci-selected):hover img {
filter: brightness(1.03);
}
.sci-live-kurs[data-sci-course-id]:focus-visible {
outline: 3px solid #5b72ff;
outline-offset: 5px;
}
.sci-live-kurs[data-sci-course-id].is-sci-selected::before,
.sci-live-kurs[data-sci-course-id].is-sci-selected::after {
opacity: 1;
}
.sci-live-kurs[data-sci-course-id].is-sci-selected::after {
transform: scale(1);
}
.sci-live-kurs[data-sci-course-id].is-sci-selected img {
filter: brightness(0.76) saturate(0.92);
}
.sci-live-kurs[data-sci-course-id].has-sci-course-error {
cursor: not-allowed;
}
.sci-live-kurs[data-sci-course-id].has-sci-course-error img {
filter: grayscale(0.7) brightness(0.7);
}
.sci-live-kurse-auswahlliste {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 1.25rem;
margin: 0;
padding: 0;
list-style: none;
}
.sci-live-kurse-auswahlliste li {
position: relative;
margin: 0;
padding-left: 1.15rem;
}
.sci-live-kurse-auswahlliste li::before {
content: "✓";
position: absolute;
left: 0;
color: #7c58ff;
font-weight: 700;
} .sci-live-kurse-sticky {
position: fixed;
right: 16px;
bottom: 16px;
left: 16px;
z-index: 9998;
display: flex;
justify-content: center;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(calc(100% + 24px));
transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.sci-live-kurse-sticky.is-visible {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition-delay: 0s;
}
.sci-live-kurse-sticky__inner {
display: flex;
align-items: baseline;
gap: 0.65rem 1.2rem;
width: min(1180px, 100%);
padding: 13px 18px;
border: 1px solid rgba(255, 255, 255, 0.58);
border-radius: 13px;
background: rgba(16, 16, 18, 0.96);
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.48);
color: #f4f4f4;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.sci-live-kurse-sticky__inner::before {
content: "";
align-self: stretch;
width: 4px;
min-height: 28px;
border-radius: 999px;
background: linear-gradient(180deg, #5167ff 0%, #7738e8 48%, #e235b8 100%);
flex: 0 0 auto;
}
.sci-live-kurse-sticky__title {
flex: 0 0 auto;
color: #f1ed00;
font-weight: 700;
line-height: 1.35;
}
.sci-live-kurse-sticky__names {
min-width: 0;
overflow: hidden;
color: #d7d7da;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 767px) {
.sci-live-kurs[data-sci-course-id]::after {
top: 8px;
right: 8px;
width: 32px;
height: 32px;
font-size: 20px;
}
.sci-live-kurse-auswahlliste {
display: grid;
gap: 0.35rem;
}
.sci-live-kurse-sticky {
right: 10px;
bottom: 10px;
left: 10px;
}
.sci-live-kurse-sticky__inner {
display: grid;
grid-template-columns: 4px minmax(0, 1fr);
gap: 2px 10px;
padding: 11px 13px;
}
.sci-live-kurse-sticky__inner::before {
grid-row: 1 / span 2;
width: 4px;
}
.sci-live-kurse-sticky__title,
.sci-live-kurse-sticky__names {
grid-column: 2;
}
.sci-live-kurse-sticky__names {
font-size: 0.9em;
}
}
@media (prefers-reduced-motion: reduce) {
.sci-live-kurs[data-sci-course-id],
.sci-live-kurs[data-sci-course-id]::before,
.sci-live-kurs[data-sci-course-id]::after,
.sci-live-kurs[data-sci-course-id] img,
.sci-live-kurse-sticky {
transition: none;
}
.sci-live-kurs[data-sci-course-id]:not(.is-sci-selected):hover {
transform: none;
}
} .sci-rlk-form-section {
margin-top: 28px;
padding: clamp(22px, 3vw, 38px);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 18px;
background: rgba(14, 14, 17, 0.92);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
color: #f2f2f3;
}
.sci-rlk-form-section[hidden] {
display: none !important;
}
.sci-rlk-form-section h3,
.sci-rlk-form-section h4 {
margin-top: 0;
color: #f1ed00;
}
.sci-rlk-form-intro {
max-width: 78ch;
margin-bottom: 24px;
}
.sci-rlk-form-course-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 8px 18px;
margin: 0 0 26px;
padding: 0;
list-style: none;
}
.sci-rlk-form-course-list li {
position: relative;
padding-left: 1.25rem;
}
.sci-rlk-form-course-list li::before {
content: "✓";
position: absolute;
left: 0;
color: #8b67ff;
font-weight: 700;
}
.sci-rlk-required-note,
.sci-rlk-form-stage-hint {
color: #c9c9cd;
font-size: 0.92rem;
}
.sci-rlk-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 22px;
}
.sci-rlk-field {
display: grid;
gap: 7px;
}
.sci-rlk-field--wide {
grid-column: 1 / -1;
}
.sci-rlk-field label {
font-weight: 650;
}
.sci-rlk-field input,
.sci-rlk-field textarea {
width: 100%;
min-height: 46px;
padding: 11px 13px;
border: 1px solid rgba(255, 255, 255, 0.36);
border-radius: 9px;
background: #fff;
color: #161619;
font: inherit;
}
.sci-rlk-field textarea {
resize: vertical;
}
.sci-rlk-field input:focus,
.sci-rlk-field textarea:focus {
outline: 3px solid rgba(91, 114, 255, 0.42);
border-color: #6d7cff;
}
.sci-rlk-checkboxes {
display: grid;
gap: 12px;
margin-top: 22px;
}
.sci-rlk-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.sci-rlk-checkbox input {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-top: 3px;
}
.sci-rlk-checkbox a {
color: #f1ed00;
text-decoration: underline;
}
.sci-rlk-form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
margin-top: 24px;
}
.sci-rlk-form-actions button {
min-height: 46px;
padding: 11px 20px;
border: 0;
border-radius: 9px;
background: linear-gradient(135deg, #5167ff 0%, #7738e8 52%, #e235b8 100%);
color: #fff;
font: 700 1rem/1.2 inherit;
}
.sci-rlk-form-actions button:disabled {
cursor: not-allowed;
filter: grayscale(0.65);
opacity: 0.62;
}
.sci-rlk-form-stage-hint {
margin: 0;
}
@media (max-width: 767px) {
.sci-rlk-form-grid {
grid-template-columns: 1fr;
}
.sci-rlk-field--wide {
grid-column: auto;
}
} .sci-rlk-honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.sci-rlk-form-status {
margin-top: 18px;
padding: 0;
border-radius: 10px;
font-weight: 600;
}
.sci-rlk-form-status.is-success,
.sci-rlk-form-status.is-error {
padding: 14px 16px;
}
.sci-rlk-form-status.is-success {
border: 1px solid rgba(94, 220, 137, 0.6);
background: rgba(31, 114, 60, 0.25);
color: #d9ffe6;
}
.sci-rlk-form-status.is-error {
border: 1px solid rgba(255, 112, 112, 0.7);
background: rgba(141, 34, 34, 0.28);
color: #ffe2e2;
}
.sci-rlk-field.has-error input,
.sci-rlk-field.has-error textarea,
.sci-rlk-checkbox.has-error {
outline: 2px solid #ff7373;
outline-offset: 2px;
}
.sci-rlk-field-error {
display: block;
margin-top: 6px;
color: #ffb1b1;
font-size: 0.9em;
}
.sci-rlk-form-section.is-submitted .sci-rlk-request-form > :not(.sci-rlk-form-status) {
display: none;
}