@font-face {
  font-family: 'OpenSans'; /* Name, den Sie frei wählen */
  src: url('/template/opensans.ttf') format('truetype'); /* Pfad zu Ihrer Datei */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Baloo'; /* Name, den Sie frei wählen */
  src: url('/template/baloo.ttf') format('truetype'); /* Pfad zu Ihrer Datei */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Baloobold'; /* Name, den Sie frei wählen */
  src: url('/template/baloobold.woff') format('woff'); /* Pfad zu Ihrer Datei */
  font-weight: normal;
  font-style: normal;
}

* {box-sizing:border-box; border-width:0; border-style:solid; border-color:var(--glassbox-border-color)}

body {
    font-family:'OpenSans'; overflow:hidden; min-height:100vh; display:flex; margin:0; background-color:var(--body-bg-color); color:var(--body-text-color)
}
body::selection {
    background-color:#e0e7ff; color:#4338ca
}

a {
    color:var(--action-color-orange); text-decoration:none; transition-property:all; transition-timing-function:ease-in-out; transition-duration:300ms;
}
a:hover {
    font-weight:900;
}
a:visited {
    color:var(--action-color-green)
}

#sidebar-backdrop {
    pointer-events:none; backdrop-filter:blur(4px); opacity:0; background-color: rgb(17 24 39 / 0.2); z-index:45; inset:0; position:fixed;
    transition-property:opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms
}

/*
TRANSITION
*/
.trans {
    transition-property:all; transition-timing-function:ease-in-out; transition-duration:300ms;
}

.transfast {
    transition-property:all; transition-timing-function:ease-in-out; transition-duration:150ms;
}

/*
FORMEN
*/
.glassbox {background-color: var(--glassbox-bg-color); box-shadow:0 0 #000000, 0 0 #000000, 0 1px 2px 0 #0000000d;
    box-sizing:border-box; border-color:var(--glassbox-border-color); border-width:1px; border-radius:24px; overflow:hidden}

.glassboxtransparent {background-color: var(--glassbox-bg-color)d9; box-shadow:0 0 #000000, 0 0 #000000, 0 1px 2px 0 #0000000d;
    box-sizing:border-box; border-color:var(--glassbox-border-color); border-width:1px; border-radius:24px; overflow:hidden}

/*
FARBEN
*/
:root {
    --body-bg-color:#f8fafc;
    --body-text-color:#0F172A;
    --body-subtext-color:#666978;
    --glassbox-bg-color: #ffffff;
    --glassbox-border-color:#e4e4e5;

    --action-color-indigo: #5048e5; /* Standard-Button für wichtige Funktionen */
    --action-color-green: #10B981; /* Positive Aktion oder Rückmeldung (alles gelesen bspw) */
    --action-color-orange: #f97316; /* Augenmerk, kann noch gelesen werden */
    --action-color-indigo-hover: #443ab3; /* Standard-Button für wichtige Funktionen */
    --action-color-green-hover: #1c9166; /* Positive Aktion oder Rückmeldung (alles gelesen bspw) */
    --action-color-orange-hover: #c35c17; /* Augenmerk, kann noch gelesen werden */
}

@media (prefers-color-scheme: dark) {:root {
    --body-bg-color:#0b0f19;
    --body-text-color:#f3f4f6;
    --body-subtext-color:#9A9DAA;
    --glassbox-bg-color: #1f2937;
    --glassbox-border-color:#6261A6;

    body {background-image:radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.12) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.1) 0px, transparent 50%); background-attachment:fixed}

    #headerbar-logo span {
        text-shadow:0 0 1px #ffffff, 0 0 5px #fff,    0 0 10px #5048e5,    0 0 20px #5048e5,    0 0 40px #5048e5
    }
}}

/*
BUTTONS
*/
.button {
    color:#ffffff; font-weight:700; font-size:1rem; padding-top:0.625rem; padding-bottom:0.625rem; padding-left:1.5rem; padding-right:1.5rem; cursor:pointer;
    display:flex; gap:0.5rem; align-items:center; justify-content:flex-start; border-radius:9999px; border-width:1px;
    svg {width:1.25rem; height:1.25rem; display:block; fill:none; stroke:currentColor}
}
.button-indigo {
    background-color:var(--action-color-indigo);
    border-color:var(--action-color-indigo);
    &:hover {background-color:var(--action-color-indigo-hover)}
}
.button-green {
    background-color:var(--action-color-green);
    border-color:var(--action-color-green);
    &:hover {background-color:var(--action-color-green-hover)}
}
.button-orange {
    background-color:var(--action-color-orange);
    border-color:var(--action-color-orange);
    &:hover {background-color:var(--action-color-orange-hover)}
}
.button-switch span, .button-switch path {display:none /* Alle Child ausblenden, um sie nachher einblenden zu können */
}
.button-switch[data-status="active"] {
    .text-active {display:inline}
    .icon-active {display:inline}
}
.button-switch[data-status="active"]:hover {
    .text-active-hover {display:inline}
    .icon-active-hover {display:inline}
    background-color:#ffffff;
    color:#000000;
}
.button-switch[data-status="active"]:has(.text-active-hover):hover {.text-active {display:none}} /* Ist Hover definiert, den Standard ausblenden */
.button-switch[data-status="active"]:has(.icon-active-hover):hover {.icon-active {display:none}} /* Ist Hover definiert, den Standard ausblenden */
.button-switch[data-status="inactive"] {
    .text-inactive {display:inline}
    .icon-inactive {display:inline}
}
.button-switch[data-status="inactive"]:hover {
    .text-inactive-hover {display:inline}
    .icon-inactive-hover {display:inline}
}
.button-switch[data-status="inactive"]:has(.text-inactive-hover):hover {.text-inactive {display:none}} /* Ist Hover definiert, den Standard ausblenden */
.button-switch[data-status="inactive"]:has(.icon-inactive-hover):hover {.icon-inactive {display:none}} /* Ist Hover definiert, den Standard ausblenden */

/*
SIDEBAR
*/
#sidebar {
    width:72px; height:100%; display:flex; z-index:50; position:fixed; top:0px; left:0px; background-color:var(--glassbox-bg-color); border-color:var(--glassbox-border-color); border-right-width:1px; overflow:hidden; flex-direction:column;
    transition-property: width; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms 
}

#sidebar-top {
    padding-left:18px; padding-right:18px; border-bottom-width:1px; align-items:center; flex-shrink:0; height:4rem; display:flex
}

#sidebar-hamburger {
    background-color:transparent; color:#4b5563; border:0; border-radius:100%; justify-content: center; align-items:center; width:2.25rem; height:2.25rem; cursor:pointer; 
}
#sidebar-hamburger:hover {background-color:#f3f4f6
}

#sidebar-main {
    padding-top:1rem; padding-bottom:1rem; padding-left:0.75rem; padding-right:0.75rem; overflow-x:hidden; overflow-y:auto; gap:0.5rem; flex-direction:column; flex:1 1 0%; display:flex
}
#sidebar-main::-webkit-scrollbar {width:4px}
#sidebar-main::-webkit-scrollbar-thumb {background-color:transparent; border-radius:4px}
#sidebar-main:hover::-webkit-scrollbar-thumb {background-color:#372a6f; border-radius:4px}

.sidebar-link {
    width:48px; box-sizing:border-box; padding-top:0.75rem; color:#888888; padding-bottom:0.75rem; padding-left:0.75rem; padding-right:0.75rem; border-radius:0.75rem; align-items:center; display:flex; position:relative; cursor:pointer;
    transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration:150ms;
}
.sidebar-link:hover {background-color:#f9fafb; color:#000000}
.sidebar-link-fixed {
    background-color:#eef2ff
}

.sidebar-link-icon {
    flex-shrink:0; width:1.5rem; height:1.5rem; vertical-align:middle; background-color:#ff0000
}

.sidebar-link-text {
    opacity:0; font-weight:600; white-space:nowrap; width:0px; margin-left:1rem;
    transition-property:opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration:300ms
}


.sidebar-open #sidebar {width:16rem !important}
.sidebar-open #sidebar-backdrop {opacity:1; pointer-events:auto}
.sidebar-open .sidebar-link {width:100%}
.sidebar-open .sidebar-link-text {opacity:1; width:inherit}

/*
MAINBORDER
*/
#mainborder {
    overflow-y:auto; flex-direction:column; flex:1 1 0%; height:100vh; display:flex; margin-left:72px; position:relative
}

#maincontent {
    margin-left:auto; margin-right:auto
}
.maincontent-small {width:100%; max-width:50rem} /*42rem*/
.maincontent-big {width:95%; max-width:50rem} /*56rem*/
.maincontent-full {width:95%}

#headerbar {
    padding-left:1rem; padding-right:1rem; gap:2rem; background-color:var(--glassbox-bg-color); border-color:var(--glassbox-border-color); border-bottom-width:1px; justify-content:space-between; align-items:center; height:4rem; display:flex; z-index:30; position:sticky; top:0px;
    backdrop-filter:blur(12px)
}

#headerbar-logo {
    width:100px; flex-shrink:0; font-family:'Baloobold'; font-size:40px; font-weight:900;
}

#headerbar-main {
    width:100%; max-width:50rem; padding-left:1rem; padding-right:1rem
}
#headerbar-main[data-mode="profile"] {
    #headerbar-main-minr {display:none}
    #headerbar-main-profile {display:flex}
}

#headerbar-main-minr {
}
#headerbar-main-profile {
    display:none;
}
#headerbar-main-profile * {
    transition-property:all; transition-timing-function:ease-in-out; transition-duration:300ms;
}
#headerbar-main-profile-pic {
    position:relative; 
}
#headerbar-main-profile-pic-image {
    border-radius:100%;position:absolute;top:0px;left:0px;width:calc(100% - 1rem); aspect-ratio:1;background-position: center center;background-size: cover; border-color:var(--body-text-color);
}
#headerbar-main-profile-search {
    flex:1
}
.headerbar-main-profile-partial {
    #headerbar-main-profile-pic {width:0rem}
    #headerbar-main-profile-pic-image {border-width:0px}
}
.headerbar-main-profile-full {
    #headerbar-main-profile-pic {width:6rem}
    #headerbar-main-profile-pic-image {border-width:2px}
}

#headerbar-account {
    width:100px; justify-content:flex-end; flex-shrink:0; display:flex; position:relative; align-items:center
}
#headerbar-account button {
    background-color:#ff0000; border-color:transparent; border-width:2px; border-radius:100%; overflow:hidden; width:2.25rem; height:2.25rem; cursor:pointer
}

#fab {
    border:0; right:2.5rem; bottom:2.5rem; color:#ffffff; line-height:24px; font-size:30px; font-weight:400; border-radius:100%; background-color:#4f46e5; justify-content:center; align-items:center; width:3.5rem; height:3.5rem; display:flex; z-index:40; position:fixed;cursor:pointer; text-transform:none;
    transition-property:all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration:150ms
}
#fab:hover {
    transform: translate(0, -0.25rem) scaleX(1.05) scaleY(1.05) skewX(0) skewY(0); background-color:#4338ca
}

#viewprofile-tabs {
    width:100%; max-width:42rem; margin-left:auto; margin-right:auto; margin-top:1rem; display:flex; justify-content:flex-start;
    border-color:#e5e7eb; border-bottom-width:1px
}
.viewprofile-tab {
    padding-top:0.75rem; padding-bottom:0.75rem; padding-left:1.5rem; padding-right:1.5rem; color:#6b7280; font-weight:600;
    background-color:transparent; cursor:pointer;
    transition-property:all; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); transition-duration:150ms
}
.viewprofile-tab:hover:not(.viewprofile-tab-active) {
    color:#111827; border-color:#111827; border-bottom-width:1px
}
.viewprofile-tab-active {
    color:#4f46e5; border-color:#4f46e5; border-bottom-width:2px
}



/*
STREAM
*/
#streamborder {
    margin-left:auto; margin-right:auto; margin-top:1rem; display:flex; flex-wrap:wrap; row-gap:0.5rem
}

#stream {
    display:flex; width:100%; flex-grow:1; flex-direction:column; gap:2rem
}

#streamfilter {
    margin-top:0.5rem; margin-bottom:0.5rem; padding-left:0.5rem; padding-right:0.5rem; padding-top:1rem; padding-bottom:1rem; border-color:#e5e7eb99; border-bottom-width:1px; gap:0.75rem; justify-content:space-between; align-items:center; flex-wrap:wrap; display:flex; z-index:30; top:4rem; position:sticky;
    backdrop-filter:blur(12px)
}
#streamfilter-filter {
    display:flex;
}
#streamfilter-view {
    display:flex; justify-content:flex-end; gap:0.5rem
}
#streamfilter-viewbuttons {
    background-color:#f3f4f6cc; border-color:#e5e7eb99; border-width:1px; border-radius:0.75rem;
    display:flex; gap:0.25rem; align-items:center; 
}
.streamfilter-button {
    color:#4b5563; background-color:#ffffff; border-color:#e5e7eb; border-width:1px; border-radius:0.5rem; gap:0.375rem; align-items:center; display:flex; cursor:pointer;
    font-weight:500; font-size:0.875rem; line-height:1.25rem;
    padding-top:0.375rem; padding-bottom:0.375rem; padding-left:0.75rem; padding-right:0.75rem;
}
.streamfilter-button svg {
    width:1rem; height:1rem; display:block
}
.streamfilter-button span {
    font-weight:500
}
.streamfilter-button:hover {
    color:#4f46e5; background-color:#f9fafb
}
.streamfilter-buttonswitch {
    color:#6b7280; background-color:transparent; border-radius:0.5rem; justify-content:center; align-items:center; width:2.25rem; height:2rem; display:flex; cursor:pointer
}
.streamfilter-buttonswitch-active {
    background-color:#ffffff; color:#111827; box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05)
}
.streamfilter-buttonswitch:hover {
    color:#4f46e5
}

/*
STREAMPOST
*/
.streampost, .streampost *{
    transition-property:all; transition-timing-function:ease-in-out; transition-duration:300ms;
}
.streampost:hover {
    box-shadow:0 0 #0000, 0 0 #0000, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a
}
.stream-view-full {
}
.stream-view-list {gap:0.5rem !important}
.stream-view-list .streampost:not(.streampost-view-full) .streampost-cover {aspect-ratio:32/0.001}
.stream-view-list .streampost:not(.streampost-view-full) .streampost-media {display:none}
.stream-view-list .streampost:not(.streampost-view-full) .streampost-actions {display:none}
.stream-view-list .streampost:not(.streampost-view-full) .streampost-header {margin:0}
.stream-view-list .streampost:not(.streampost-view-full) .streampost-header-info {display:none}
.stream-view-list .streampost:not(.streampost-view-full) .streampost-header-publisher-image {width:1.5rem; height:1.5rem}
.stream-view-list .streampost:not(.streampost-view-full) .streampost-content {display:flex; align-items:center; gap:0.5rem; padding:0.5rem}
.stream-view-list .streampost:not(.streampost-view-full) .streampost-main {display:flex; align-items:baseline; gap:0.25rem; margin-right:80px; flex:1; overflow:hidden}
.stream-view-list .streampost:not(.streampost-view-full) .streampost-title {font-size:1rem !important; display:none}
.stream-view-list .streampost:not(.streampost-view-full) .streampost-text {margin:0 !important; white-space:nowrap; overflow:hidden; text-overflow: ellipsis}
.stream-view-list .streampost:not(.streampost-view-full) .streampost-text br{display:none}
.stream-view-list .streampost:not(.streampost-view-full) .streampost-readmore {display:none}
.stream-view-list .streampost:not(.streampost-view-full) .streampost-bookmark {top:0.5rem}

.streampost-is-read .streampost-bookmark path {
    stroke-width:4px; stroke:#10b981
}

.streampost-cover {
    background-color:#f3f4f6; overflow:hidden; width:100%; aspect-ratio:16/8; position:relative;
}
.streampost-cover-image {
    background-image:url(https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&w=800&q=80);
    background-position:center; background-size:cover; width:100%; height:100%;
    transition-property:transform; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); transition-duration:500ms
}
.streampost:hover .streampost-cover-image { transform:scaleX(1.05) scaleY(1.05)}

.streampost-content {
    padding:1rem; position:relative;
}

.streampost-header {
    gap:0.75rem; align-items:center; display:flex; margin-bottom:1rem
}
.streampost-header a {text-decoration:none; color:inherit}
.streampost-header-publisher-image {
    object-fit:cover; border-radius:100%; width:2.5rem; height:2.5rem; max-width:100%; display:block
}
.streampost-header-publisher-name {
    color:var(--body-text-color); font-weight:700; font-size:0.875rem; line-height:1.25rem; gap:0.25rem; align-items:center; display:flex
}
.streampost-header-details {
    color:var(--body-subtext-color); font-size:0.75rem; line-height:1rem
}
.streampost-header-details svg {
    width:1rem; height:1rem; display:inline; vertical-align:middle
}
.streampost:not(.streampost-is-read) .streampost-header-details svg
{
    display:none
}

.streampost-bookmark {
    position:absolute; right:1rem; top:1rem;
}
.streampost-bookmark button {
    background-color:transparent; color:#9ca3af; cursor:pointer
}

.streampost-title {
    line-height:1.25; font-weight:700; font-size:1.5rem; margin:0; color:var(--body-text-color);
    transition-property:all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
}
.streampost:hover .streampost-title {color:#4f46e5}
.streampost-title a {
    text-decoration:none; color:inherit;
}

.streampost-text {
    color:var(--body-text-color); line-height:1.625; margin-bottom:1rem; font-size:1rem;
}

.streampost-media {
    overflow:hidden; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.2rem; margin-bottom:0.5rem
}
.streampost-media:has(> :last-child:nth-child(1)) {grid-template-columns:repeat(1, minmax(0, 1fr))} /* Nur ein Bild */
.streampost-media-imagecontainer {
    width:100%; overflow:hidden; cursor:pointer;
}
.streampost-media-image {
    background-position:center; background-size:cover; width:100%; height:100%;
    transition-property:transform; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); transition-duration:500ms
}
.streampost-media-image:hover {transform:scaleX(1.05) scaleY(1.05)}
.streampost-media-imagecontainer:nth-child(1):nth-last-child(1) { /* 1 Bild */
    aspect-ratio:16/9; border-radius:0.75rem} 
.streampost-media-imagecontainer:nth-child(1):nth-last-child(2) { /* 2 Bilder - Bild 1 */
    aspect-ratio:4/5; border-top-left-radius:0.75rem; border-bottom-left-radius:0.75rem; 
    border-top-right-radius:0.125rem; border-bottom-right-radius:0.125rem}
.streampost-media-imagecontainer:nth-child(2):nth-last-child(1) { /* 2 Bilder - Bild 2 */
    aspect-ratio:4/5; border-top-left-radius:0.125rem; border-bottom-left-radius:0.125rem; 
    border-top-right-radius:0.75rem; border-bottom-right-radius:0.75rem}
.streampost-media-imagecontainer:nth-child(1):nth-last-child(3) { /* 3 Bilder - Bild 1*/
    aspect-ratio:21/9; grid-column:span 2 / span 2; border-top-left-radius:0.75rem; border-bottom-left-radius:0.125rem; 
    border-top-right-radius:0.75rem; border-bottom-right-radius:0.125rem}
.streampost-media-imagecontainer:nth-child(2):nth-last-child(2) { /* 3 Bilder - Bild 2*/
    aspect-ratio:4/3; border-top-left-radius:0.125rem; border-bottom-left-radius:0.75rem; 
    border-top-right-radius:0.125rem; border-bottom-right-radius:0.125rem}
.streampost-media-imagecontainer:nth-child(3):nth-last-child(1) { /* 3 Bilder - Bild 3*/
    aspect-ratio:4/3; border-top-left-radius:0.125rem; border-bottom-left-radius:0.125rem; 
    border-top-right-radius:0.125rem; border-bottom-right-radius:0.75rem}
.streampost-media-imagecontainer:nth-child(1):nth-last-child(4) { /* 4 Bilder - Bild 1*/
    aspect-ratio:1/1; border-top-left-radius:0.75rem; border-bottom-left-radius:0.125rem; 
    border-top-right-radius:0.125rem; border-bottom-right-radius:0.125rem}
.streampost-media-imagecontainer:nth-child(2):nth-last-child(3) { /* 4 Bilder - Bild 2*/
    aspect-ratio:1/1; border-top-left-radius:0.125rem; border-bottom-left-radius:0.125rem; 
    border-top-right-radius:0.75rem; border-bottom-right-radius:0.125rem}
.streampost-media-imagecontainer:nth-child(3):nth-last-child(2) { /* 4 Bilder - Bild 3*/
    aspect-ratio:1/1; border-top-left-radius:0.125rem; border-bottom-left-radius:0.75rem; 
    border-top-right-radius:0.125rem; border-bottom-right-radius:0.125rem}
.streampost-media-imagecontainer:nth-child(4):nth-last-child(1) { /* 4 Bilder - Bild 4*/
    aspect-ratio:1/1; border-top-left-radius:0.125rem; border-bottom-left-radius:0.125rem; 
    border-top-right-radius:0.125rem; border-bottom-right-radius:0.75rem}

.streampost-actions {
    justify-content:flex-start; display:flex; align-items:center; margin-top:1.5rem; gap:1rem
}

.streampost-action {
    transition-property:all; background-color:transparent; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration:150ms; color:#9ca3af; gap:0.375rem; align-items:center; display:flex; cursor:pointer
}
.streampost-action:hover {color:#4f46e5}
.streampost-action svg {
    width:1.25rem; height:1.25rem; display:block
}
.streampost-action span {
    font-weight:500; font-size:0.875rem; line-height:1.25rem
}

/*
PROFILEHEADER
*/
.profileheader {
    width:100%; margin-left:auto; margin-right:auto; margin-top:2rem; padding:1rem;
}

.profileheader-personal {
    margin-bottom:1rem; display:flex; justify-content:space-between
}

.profileheader-profile {
    display:flex; gap:1rem
}

.profileheader-profile-image {
    width:7rem; height:7rem; flex-shrink:0; border-color:#ffffff; border-width:4px; border-radius:100%; background-position:center; background-size:cover; box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
}

.profileheader-profile-data
{
    display:flex; flex-direction:column; gap:1rem; justify-content:space-evenly
}

.profileheader-profile-name {
    margin:0; font-size:2.25rem; line-height:2.25rem; letter-spacing:-0.025em; font-weight:900
}

.profileheader-profile-stats {
    display:flex; font-size:0.875rem; line-height:1.25rem; gap:1.5rem; align-items:center; justify-content:flex-start
}
.profileheader-profile-stats-divider {
    background-color:#e5e7eb; width:1px; height:2rem

}
.profileheader-profile-stats-container {
    display:flex; flex-direction:column; justify-content:flex-start
}
.profileheader-profile-stats-value {
    line-height:1; font-weight:700; font-size:1.125rem
}
.profileheader-profile-stats-text {
    margin-top:0.25rem; color:var(--body-subtext-color)
}