@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

/* client-workspace.css */
#client-workspace-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#client-workspace-login-box {
    display:none;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    max-width: 400px;
    width: 90%;
    position: relative;
}

/* Inline spinner styling */
#client-workspace-spinner {
    margin-left: 10px;
    vertical-align: middle;
}

.spinner {
    animation: rotate 2s linear infinite;
}

.path {
    stroke: #0073aa;
    stroke-dasharray: 90,150;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
}

#client-workspace-area .row {
    min-height: 10vw;
}

#client-workspace-area .hero-section {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 0px;
    color: #fff;
    border:1px solid grey;
}

#client-workspace-area .hero-content {
	display: flex;
    flex-direction:column;
	max-width: 100%;
	margin: 0 auto;
	background: rgba(0,0,0,0.5);
	align-items: center;
    min-height:35vw;
}

#client-workspace-area .intro-section,
#client-workspace-area .ausblick-section,
#client-workspace-area .einblick-section,
#client-workspace-area .inhalt-section,
#client-workspace-area .autor-section,
#client-workspace-area .abschluss-section {
	padding-top: 100px;
    padding-bottom:100px;
}

#client-workspace-area .ausblick-section,
#client-workspace-area .inhalt-section,
#client-workspace-area .abschluss-section {
	background-color:#dddddd;
}

#client-workspace-area .intro-content,
#client-workspace-area .ausblick-content,
#client-workspace-area .einblick-content,
#client-workspace-area .inhalt-content,
#client-workspace-area .autor-content,
#client-workspace-area .abschluss-content {
    position: relative;
    max-width:1280px;
    left:50%;
    transform:translateX(-50%);
}

#client-workspace-area .hero-content .full_row {
    border-bottom:1px solid lightgrey;
    width:100%;
}

#client-workspace-area .half_row {
    display:grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    width:100%;
    gap:20px;
}

#client-workspace-area .tripple_row {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    width:100%;
    gap:10px;
}

#client-workspace-area .hero-column {
    flex: 1;
    width:100%;
}

#client-workspace-area .hero-column-image,
#client-workspace-area .autor-column-image,
#client-workspace-area .intro-column-video {
    position:relative;
    max-width: 533px;
}

#client-workspace-area .hero-column-image .image_placeholder,
#client-workspace-area .autor-column-image .image_placeholder {
    position:relative;
    aspect-ratio: 1/1.5;
    border:1px solid lightgrey;
    border-radius:20px;
}

#client-workspace-area .intro-column-video .video_placeholder {
    position:relative;
    aspect-ratio: 16/9;
    border:1px solid lightgrey;
    border-radius:20px;
}

#client-workspace-area .editable {
	min-height: 2em;
	border: 1px dashed gray !important;
    border-radius:10px;
}

#client-workspace-area .ausblick-column .editable {
    background-color: #fff;
    min-height: 10em;
    display: grid;
    place-content:center;
}

#client-workspace-area .editable h2:empty:before,
#client-workspace-area .editable p:empty:before,
#client-workspace-area .editable button:empty:before {
    content: attr(data-placeholder);
    color: #999;
    z-index: 2;
    position: relative;
}

#client-workspace-area .editable button {
    color: #000!important;
    background: #DDDDDD;
    background: linear-gradient(90deg, rgba(221, 221, 221, 1) 0%, rgba(163, 163, 163, 1) 100%);
    padding: 5px 10px;
}

.center {
    position:relative;
    left:50%;
    transform:translateX(-50%);
}

@keyframes rotate {
    100% { transform: rotate(360deg); }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124px;
    }
}