html {
box-sizing: border-box;
font-size: 16px;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
margin: 0;
padding: 0;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
button,
input,
select,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button {
border: none;
background: none;
padding: 0;
cursor: pointer;
}
a {
text-decoration: none;
color: inherit;
}
:root {
/* Base Colors */
--black: #000000;
--white: #ffffff;
/* Primary Color System ("Klee") - Limited digital use, mainly illustrations */
--primary-50: #e8f5e8;
--primary-100: #c8e6c8;
--primary-200: #a3d4a3;
--primary-300: #7dc17d;
--primary-400: #60b260;
--primary-500: #42a342;
--primary-600: #008939; /* Base "Klee" color */
--primary-700: #007230;
--primary-800: #005c27;
--primary-900: #004019;
--primary-950: #002d12;
/* Secondary Color System ("Tanne") - Primary digital interaction color */
--secondary-50: #e8f2ee;
--secondary-100: #c8dfd5;
--secondary-200: #a3c9b8;
--secondary-300: #7db39a;
--secondary-400: #60a183;
--secondary-500: #428f6c;
--secondary-600: #005538; /* Base "Tanne" color */
--secondary-700: #004a2f;
--secondary-800: #003e26;
--secondary-900: #00321d;
--secondary-950: #002315;
/* Grey Color System */
--grey-50: #f9f9f9;
--grey-100: #efefef;
--grey-200: #dcdcdc;
--grey-300: #bdbdbd;
--grey-400: #989898;
--grey-500: #7c7c7c;
--grey-600: #656565;
--grey-700: #525252;
--grey-800: #464646;
--grey-900: #3d3d3d;
--grey-950: #262626;
/* Neutral Color System ("Sand") - Backgrounds and subtle hover */
--neutral-500: #f8f4ec;
--neutral-600: #F5F1E9; /* Base "Sand" color */
--neutral-700: #e8e0d4;
/* Legacy compatibility - maintaining old variable names */
--primary: var(--secondary-600);
--klee: var(--primary-600);
--secondary: var(--neutral-600);
/* Semantic color mapping based on brand guidelines */
--primary: var(--secondary-600); /* Tanne - main digital interactions */
--secondary: var(--neutral-600); /* Sand - backgrounds, subtle hover */
--accent: var(--primary-600); /* Klee - limited use, illustrations */
--weiß: var(--white);
--dunkelgruen: var(--secondary-700);
--dunkelgruen-alt: var(--secondary-800);
--error-red: #D32F2F;
--backgroundgruen: var(--primary-50);
--backgroundgruen-dark: var(--primary-100);
--background-red-light: #f5e8e8; /* Very light red for preview mode */
--dunkelgrau: var(--grey-900);
--anthrazit: var(--grey-950);
/* Semantic Color Variables - Theme-aware */
--background-color: var(--white);
--background-color-pure: var(--white);
--background-color-alt: var(--backgroundgruen);
--background-color-sand: var(--neutral-600);
--hover-color-alt: var(--secondary-50);
--font-color: var(--grey-800);
--font-color-h: var(--secondary-600);
--font-color-h3: var(--secondary-600);
--link-color: var(--secondary-600);
--button-background-color: var(--grey-200);
--button-color: var(--secondary-600);
--button-color-hover: var(--neutral-600);
--button-text-color: var(--black);
--button-hover-color: var(--secondary-50);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
--border-subtle: 1px solid rgba(0, 0, 0, 0.1);
--spacing-xxsmall: 4px;
--spacing-xsmall: 8px;
--spacing-small: 12px;
--spacing-medium: 16px;
--spacing-large: 24px;
--spacing-xlarge: 32px;
--spacing-xxlarge: 48px;
--interactive-accent-color: var(--secondary-600);
--font-color-disabled: var(--grey-400);
--border-color-disabled: var(--grey-200);
/* Scrollbar variables */
--scrollbar-track-color: var(--background-color-alt);
--scrollbar-thumb-color: var(--grey-600);
--scrollbar-thumb-hover-color: var(--grey-700);
/* Custom Chat variables */
--chat-background-light: var(--backgroundgruen);
--ai-message-background-light: var(--white);
--ai-message-text-color-light: var(--grey-800);
--assistant-icon-background-light: var(--white);
--assistant-icon-color-light: var(--grey-800);
--chat-message-user-name-color-light: var(--grey-600);
--chat-input-background-light: var(--white);
--chat-input-text-color-light: var(--font-color);
--chat-input-border-color-light: var(--background-color-alt);
--chat-background: var(--chat-background-light);
--ai-message-background: var(--ai-message-background-light);
--ai-message-text-color: var(--ai-message-text-color-light);
--assistant-icon-background: var(--assistant-icon-background-light);
--assistant-icon-color: var(--assistant-icon-color-light);
--chat-message-user-name-color: var(--chat-message-user-name-color-light);
--chat-input-background: var(--chat-input-background-light);
--chat-input-text-color: var(--chat-input-text-color-light);
--chat-input-border-color: var(--chat-input-border-color-light);
/* Card Styles */
--card-border-radius-small: 8px;
--card-border-radius-medium: 12px;
--card-border-radius-large: 16px;
--card-shadow-none: none;
--card-shadow-subtle: var(--shadow-sm);
--card-shadow-elevated: var(--shadow-md);
--card-shadow-floating: var(--shadow-lg);
--card-shadow-dramatic: var(--shadow-xl);
--card-background: var(--background-color);
--card-background-alt: var(--background-color-alt);
--card-border: var(--border-subtle);
--card-hover-shadow: var(--shadow-xl);
--card-hover-transform: translateY(-2px);
/* Form Input Styles */
--input-background: var(--grey-100);
--input-border: var(--border-subtle);
--input-border-focus: 2px solid var(--interactive-accent-color);
--input-border-error: 2px solid var(--error-red);
--input-text-color: var(--font-color);
--input-placeholder-color: var(--font-color-disabled);
--input-shadow-focus: 0 0 0 3px rgba(0, 85, 56, 0.1);
--input-transition: all 0.25s ease-out;
/* Form Element Dimensions */
--form-element-font-size: 12px;
--form-element-line-height: 1.5;
--form-element-padding-y: var(--spacing-small);
--form-element-padding-x: var(--spacing-small);
--form-element-min-height: 44px;
}
[data-theme="dark"] {
--background-color: var(--grey-950);
--background-color-pure: var(--grey-900);
--background-color-alt: var(--grey-950);
--background-color-sand: var(--grey-950);
--hover-color-alt: var(--grey-700);
--font-color: var(--neutral-600);
--font-color-h: var(--neutral-600);
--font-color-h3: var(--neutral-600);
--link-color: var(--neutral-600);
--button-background-color: var(--secondary-600);
--button-color: var(--neutral-600);
--button-color-hover: var(--primary-600);
--button-text-color: var(--white);
--button-hover-color: var(--grey-700);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.6);
--border-subtle: 1px solid rgba(255, 255, 255, 0.1);
--interactive-accent-color: var(--white);
--font-color-disabled: var(--grey-500);
--border-color-disabled: var(--grey-600);
/* Scrollbar variables for dark theme */
--scrollbar-track-color: var(--background-color-alt);
--scrollbar-thumb-color: var(--neutral-600);
--scrollbar-thumb-hover-color: var(--white);
/* Custom Chat variables for dark theme */
--chat-background: var(--background-color);
--ai-message-background: var(--background-color-alt);
--ai-message-text-color: var(--font-color);
--assistant-icon-background: var(--background-color-alt);
--assistant-icon-color: var(--font-color);
--chat-message-user-name-color: var(--grey-400);
--chat-input-background: var(--background-color);
--chat-input-text-color: var(--font-color);
--chat-input-border-color: var(--background-color-alt);
/* Form Input Styles for dark theme */
--input-background: var(--background-color-alt);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--background-color: var(--grey-950);
--background-color-pure: var(--grey-900);
--background-color-alt: var(--grey-800);
--background-color-sand: var(--secondary-700);
--hover-color-alt: var(--grey-700);
--font-color: var(--neutral-600);
--font-color-h: var(--neutral-600);
--font-color-h3: var(--neutral-600);
--link-color: var(--neutral-600);
--button-background-color: var(--secondary-600);
--button-color: var(--neutral-600);
--button-color-hover: var(--primary-600);
--button-text-color: var(--white);
--button-hover-color: var(--grey-700);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.6);
--border-subtle: 1px solid rgba(255, 255, 255, 0.1);
--interactive-accent-color: var(--white);
--font-color-disabled: var(--grey-500);
--border-color-disabled: var(--grey-600);
/* Scrollbar variables for prefers-color-scheme: dark */
--scrollbar-track-color: var(--background-color-alt);
--scrollbar-thumb-color: var(--neutral-600);
--scrollbar-thumb-hover-color: var(--white);
/* Custom Chat variables for prefers-color-scheme: dark */
--chat-background: var(--background-color);
--ai-message-background: var(--background-color-alt);
--ai-message-text-color: var(--font-color);
--assistant-icon-background: var(--background-color-alt);
--assistant-icon-color: var(--font-color);
--chat-message-user-name-color: var(--grey-400);
--chat-input-background: var(--background-color);
--chat-input-text-color: var(--font-color);
--chat-input-border-color: var(--background-color-alt);
/* Form Input Styles for prefers-color-scheme: dark */
--input-background: var(--background-color-alt);
}
}
body {
background-color: var(--background-color);
color: var(--font-color);
transition: background-color 0.5s, color 0.5s;
}
a {
color: var(--link-color);
transition: color 0.5s;
}
button {
background-color: var(--button-background-color);
color: var(--button-text-color);
transition: background-color 0.5s, color 0.5s;
}
.container {
width: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
margin-top: 0;
margin-bottom: 0px;
}
}
@font-face {
font-family: 'PT Sans';
src: url('/assets/fonts/PTSans-Regular.BprM7otv.woff2') format('woff2'),
url('/assets/fonts/PTSans-Regular.Cs-f681R.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PT Sans';
src: url('/assets/fonts/PTSans-Bold.DmuHx-3e.woff2') format('woff2'),
url('/assets/fonts/PTSans-Bold.CN6y2quC.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PT Sans';
src: url('/assets/fonts/PTSans-Italic.CGsaK9X4.woff2') format('woff2'),
url('/assets/fonts/PTSans-Italic.DU4jJlUs.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'GrueneType';
src: url('/assets/fonts/GrueneType.CVNaQvhn.woff2') format('woff2'),
url('/assets/fonts/GrueneType.B542GIVp.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Typography Scale - Fluid responsive font sizes */
:root {
--font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
/* Typography Scale - Based on Major Third (1.25) ratio */
--font-size-xxs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
--font-size-xs: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
--font-size-sm: clamp(0.9375rem, 0.9rem + 0.1875vw, 1.0625rem);
--font-size-md: var(--font-size-base); /* 1rem → 1.125rem */
--font-size-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
--font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
--font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
--font-size-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);
--font-size-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
--font-size-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);
/* Line Height Scale */
--line-height-tight: 1.2;
--line-height-snug: 1.4;
--line-height-normal: 1.6;
--line-height-relaxed: 1.8;
--line-height-loose: 2;
/* Display Content Specific (for generated text) */
--display-font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--display-font-size-large: clamp(1.0625rem, 1rem + 0.3125vw, 1.1875rem);
--display-line-height: 1.7;
--display-paragraph-spacing: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
/* Reading Width Constraints */
--reading-max-width: 65ch;
--reading-optimal-width: clamp(45ch, 50vw, 65ch);
}
/* Desktop/Large Screen Overrides */
@media (min-width: 1920px) {
:root {
--font-size-base: 1.125rem;
--display-font-size: 1.1875rem;
--display-font-size-large: 1.25rem;
}
}
/* Ultra-wide Screen Support */
@media (min-width: 2560px) {
:root {
--font-size-base: 1.25rem;
--display-font-size: 1.3125rem;
--display-font-size-large: 1.375rem;
}
}
body {
font-family: 'PT Sans', Arial, sans-serif;
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
background-color: var(--background-color);
color: var(--font-color);
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.5s, color 0.5s;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2 {
font-family: 'GrueneType', Arial, sans-serif;
color: var(--font-color-h);
}
h1 {
font-size: var(--font-size-4xl);
line-height: var(--line-height-tight);
margin: 0 0 0.5em 0;
}
h2 {
font-size: var(--font-size-3xl);
line-height: var(--line-height-tight);
margin: 1.5em 0 0.5em 0;
}
h2:first-child {
margin-top: 0;
}
h3 {
font-family: 'GrueneType', Arial, sans-serif;
color: var(--font-color-h3);
font-size: var(--font-size-2xl);
line-height: var(--line-height-snug);
margin: 1.5em 0 0.5em 0;
}
h3:first-child {
margin-top: 0;
}
h4 {
font-family: 'GrueneType', Arial, sans-serif;
color: var(--font-color-h3);
font-size: var(--font-size-xl);
line-height: var(--line-height-snug);
font-weight: normal;
margin: 1.25em 0 0.5em 0;
}
h4:first-child {
margin-top: 0;
}
h5 {
font-family: 'PT Sans', Arial, sans-serif;
color: var(--font-color);
font-size: var(--font-size-lg);
line-height: var(--line-height-normal);
font-weight: 600;
margin: 1em 0 0.5em 0;
}
h5:first-child {
margin-top: 0;
}
h6 {
font-family: 'PT Sans', Arial, sans-serif;
color: var(--font-color-subtle);
font-size: var(--font-size-md);
line-height: var(--line-height-normal);
font-weight: 500;
margin: 1em 0 0.5em 0;
}
h6:first-child {
margin-top: 0;
}
/* Mobile adjustments - minimal since clamp() handles most scaling */
@media (max-width: 768px) {
:root {
--display-line-height: 1.6;
}
}
*, *:before, *:after { box-sizing: inherit; }
html { box-sizing: border-box; }
html {
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
overflow: auto;
}
body {
background-color: var(--background-color);
color: var(--font-color);
transition: background-color 0.5s, color 0.5s;
min-height: 100%;
}
a {
color: var(--link-color);
transition: color 0.5s;
}
button {
background-color: var(--button-background-color);
color: var(--button-text-color);
transition: background-color 0.5s, color 0.5s;
}
.container {
width: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
max-width: var(--container-max-width, 1200px);
margin-left: auto;
margin-right: auto;
}
/*
.with-header {
margin-top: 80px;
margin-bottom: 20px;
}
*/
@media (max-width: 768px) {
.container {
flex-direction: column;
margin-top: 0;
margin-bottom: 0px;
}
}
.antrag-text-content {
line-height: 1.6;
}
.antrag-text-content h1,
.antrag-text-content h2,
.antrag-text-content h3,
.antrag-text-content h4,
.antrag-text-content h5,
.antrag-text-content h6 {
font-family: 'GrueneType', Arial, sans-serif;
color: var(--font-color-h);
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-medium);
line-height: 1.3;
}
.antrag-text-content h1 { font-size: 2rem; font-weight: 600; }
.antrag-text-content h2 { font-size: 1.5rem; font-weight: 600; }
.antrag-text-content h3 { font-size: 1.25rem; font-weight: 600; color: var(--font-color-h3); }
.antrag-text-content h4 { font-size: 1.1rem; font-weight: 600; }
.antrag-text-content h5 { font-size: 1rem; font-weight: 600; }
.antrag-text-content h6 { font-size: 0.9rem; font-weight: 600; }
.antrag-text-content p {
margin-bottom: var(--spacing-medium);
color: var(--font-color);
}
.antrag-text-content ul,
.antrag-text-content ol {
margin-left: var(--spacing-large);
margin-bottom: var(--spacing-medium);
padding-left: 0;
}
.antrag-text-content li {
margin-bottom: var(--spacing-xsmall);
}
.antrag-text-content ul {
list-style-type: disc;
}
.antrag-text-content ol {
list-style-type: decimal;
}
.antrag-text-content ul ul,
.antrag-text-content ul ol,
.antrag-text-content ol ul,
.antrag-text-content ol ol {
margin-left: var(--spacing-medium);
margin-bottom: 0;
}
.antrag-text-content strong {
font-weight: bold;
}
.antrag-text-content em {
font-style: italic;
}
.antrag-text-content a {
color: var(--link-color);
text-decoration: underline;
}
.antrag-text-content a:hover {
text-decoration: none;
}
.antrag-text-content code {
font-family: monospace;
background-color: var(--background-color-alt);
padding: 0.1em 0.3em;
border-radius: 3px;
font-size: 0.9em;
}
.antrag-text-content pre {
background-color: var(--background-color-alt);
padding: var(--spacing-medium);
border-radius: 4px;
overflow-x: auto;
font-family: monospace;
font-size: 0.9em;
border: 1px solid var(--border-subtle);
}
.antrag-text-content pre code {
padding: 0;
background-color: transparent;
border-radius: 0;
}
.antrag-text-content blockquote {
margin-left: 0;
margin-right: 0;
padding-left: var(--spacing-medium);
border-left: 4px solid var(--border-subtle);
color: var(--font-color);
font-style: italic;
margin-bottom: var(--spacing-medium);
}
.antrag-text-content hr {
border: 0;
height: 1px;
background-color: var(--border-subtle);
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-large);
}
.content-wrapper {
min-height: calc(100vh - 160px);
margin-top: 80px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
}
.content-wrapper.no-header-footer {
min-height: 100vh;
margin-top: 0;
margin-bottom: 0;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
position: relative;
}
.footer {
background-color: var(--dunkelgruen);
padding: 30px 0;
color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.footer-content {
width: 100%;
}
.footer-main {
display: grid;
grid-template-columns: 170px 1fr;
gap: 30px;
margin-bottom: 30px;
}
.footer-logo {
display: flex;
align-items: flex-start;
}
.footer-logo img {
width: 100%;
}
.footer-sections {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.footer-section h3 {
color: var(--secondary);
margin-bottom: 15px;
font-size: 1.2em;
font-weight: bold;
text-align: center;
}
.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-section ul li {
margin-bottom: 10px;
}
.footer-section ul li a {
color: #fff;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section ul li a:hover,
.footer-section ul li a:focus {
color: var(--secondary);
text-decoration: underline;
}
.footer-section.combined-section {
display: flex;
flex-direction: column;
}
.footer-section.combined-section .subsection {
margin-bottom: 0;
}
.footer-section.combined-section .subsection:first-child {
margin-bottom: 10px;
}
.disabled-link {
color: rgba(255, 255, 255, 0.5);
cursor: not-allowed;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-social {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.footer-social-icon {
color: #fff;
font-size: 1.5em;
transition: color 0.3s ease;
}
.footer-social-icon:hover,
.footer-social-icon:focus {
color: var(--secondary);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
@media (min-width: 1400px) {
.footer-container {
max-width: 1320px;
}
.footer-main {
grid-template-columns: 90px 1fr;
gap: 40px;
}
.footer-logo img {
max-width: 150px;
}
.footer-sections {
gap: 40px;
}
}
@media (max-width: 1399px) and (min-width: 1200px) {
.footer-container {
max-width: 1140px;
}
}
@media (max-width: 1199px) and (min-width: 992px) {
.footer-container {
max-width: 960px;
}
.footer-main {
grid-template-columns: 70px 1fr;
gap: 25px;
}
.footer-logo img {
max-width: 120px;
}
.footer-sections {
gap: 25px;
}
}
@media (max-width: 991px) and (min-width: 768px) {
.footer-container {
max-width: 720px;
}
.footer-main {
grid-template-columns: 120px 1fr;
gap: 20px;
}
.footer-logo img {
max-width: 120px;
}
.footer-sections {
grid-template-columns: 1fr;
gap: 25px;
}
.footer-section {
text-align: center;
}
}
@media (max-width: 767px) {
.footer {
padding: 25px 0;
}
.footer-container {
max-width: 540px;
}
.footer-main {
grid-template-columns: 1fr;
gap: 20px;
}
.footer-logo {
justify-content: center;
}
.footer-logo img {
max-width: 110px;
}
.footer-sections {
grid-template-columns: 1fr;
gap: 25px;
}
.footer-section {
text-align: center;
}
}
@media (max-width: 575px) {
.footer {
padding: 20px 0;
}
.footer-container {
padding: 0 15px;
}
.footer-main {
margin-bottom: 20px;
}
.footer-logo img {
max-width: 100px;
}
.footer-section h3 {
font-size: 1.1em;
margin-bottom: 12px;
}
.footer-section.combined-section {
flex-direction: column;
gap: 25px;
}
.footer-social {
gap: 15px;
}
.footer-social-icon {
font-size: 1.3em;
}
.footer-bottom p {
font-size: 0.85em;
}
.skip-link {
display: none;
}
}
.header {
background-color: var(--background-color);
padding: 15px 25px;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: var(--container-max-width, 1200px);
width: 100%;
margin: 0 auto;
padding: 0 25px;
}
.header-logo a {
text-decoration: none;
display: flex;
align-items: center;
}
.header-logo img {
height: 40px;
width: auto;
margin-right: 20px;
}
.header-menu-checkbox {
display: none;
}
.header-menu-label {
display: none;
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
width: 30px;
height: 24px;
cursor: pointer;
z-index: 1001;
}
.header-menu-label .line {
width: 100%;
height: 4px;
background-color: var(--font-color-h);
margin: 4px 0;
transition: all 0.3s ease;
}
.header-menu-checkbox:checked + .header-menu-label .line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.header-menu-checkbox:checked + .header-menu-label .line:nth-child(2) {
opacity: 0;
}
.header-menu-checkbox:checked + .header-menu-label .line:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
.header-nav {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.header-nav ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.header-nav ul li {
position: relative;
margin: 0 20px;
}
.header-nav > ul > li > a,
.header-nav > ul > li > span,
.header-search__link,
.header-dropdown-trigger {
color: var(--font-color-h);
font-size: 0.95em;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: normal;
text-decoration: none;
transition: color 0.3s ease, background-color 0.3s ease;
display: flex;
align-items: center;
gap: 5px;
padding: 0.5rem 0.8rem;
border-radius: 0.5rem;
position: relative;
}
.header-nav > ul > li > a:hover,
.header-nav > ul > li > span:hover,
.header-dropdown-trigger:hover {
color: var(--font-color-h);
background-color: var(--background-color-alt);
}
/* Focus indicators for dropdown triggers - keyboard only */
.header-dropdown[tabindex]:focus-visible {
outline: 2px solid var(--klee);
outline-offset: 2px;
border-radius: 0.5rem;
}
/* Focus indicators for dropdown links - keyboard only */
.header-dropdown-content a:focus-visible {
outline: 2px solid var(--klee);
outline-offset: 2px;
background-color: var(--background-color-alt);
border-radius: 8px;
}
/* Ensure focus-within still works for keeping dropdown open */
.header-dropdown:focus-within {
/* No visual outline, just maintains dropdown open state */
}
.header-dropdown-content {
display: none;
position: absolute;
background-color: var(--background-color);
min-width: 280px;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
z-index: 1;
padding: 0.5rem;
border-radius: 12px;
opacity: 0;
transform: translateY(-10px) translateX(-50%);
transition: opacity 0.3s ease, transform 0.3s ease;
flex-direction: column;
justify-content: center;
left: 50%;
pointer-events: none;
gap: 0.25rem;
}
.header-dropdown:hover .header-dropdown-content,
.header-dropdown:focus-within .header-dropdown-content,
.header-dropdown-content.show {
display: flex;
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.header-dropdown-content li {
width: 100%;
margin: 0.2rem 0;
padding: 0;
}
.header-dropdown-content a {
padding: 0;
width: 100%;
display: block;
}
.header-dropdown-content li a {
padding: 0.6rem 0.8rem;
transition: color 0.3s ease, background-color 0.3s ease;
border-radius: 0.5rem;
width: 100%;
display: flex;
align-items: center;
}
.header-dropdown-content li a svg {
margin-right: 5px;
}
.header-dropdown-content li a:hover {
color: var(--font-color-h);
background-color: var(--background-color-alt);
border-radius: 8px;
}
.header-dropdown span {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
width: 100%;
}
.header-dropdown span svg {
transition: transform 0.3s ease;
display: flex;
align-items: center;
}
.header-dropdown span svg.open {
transform: rotate(180deg);
transition: transform 0.3s ease;
}
.header-search__link span {
font-size: inherit;
font-weight: inherit;
font-family: inherit;
}
@media (max-width: 768px) {
.header-nav {
display: none;
position: absolute;
top: 60px;
right: 0;
width: 100%;
background-color: var(--background-color);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
flex-direction: column;
align-items: center;
transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 10px 0;
}
.header-nav.active {
max-height: 500px;
opacity: 1;
}
.header-nav ul {
flex-direction: column;
width: 100%;
padding-left: 0;
}
.header-nav ul li {
width: 100%;
margin: 10px 0;
}
.header-nav ul li a,
.header-nav ul li span {
padding: 20px;
color: var(--font-color-h);
}
.header-nav ul li a:hover,
.header-nav ul li span:hover {
color: var(--weiß);
background-color: var(--klee);
}
.header-menu-label {
display: block;
}
.header-dropdown-content {
position: static;
box-shadow: none;
padding: 0;
min-width: 100%;
transform: none;
}
.header-dropdown:hover .header-dropdown-content {
display: none;
}
.header-dropdown-content li a {
padding: 15px;
color: var(--font-color-h);
}
.header-dropdown-content li a:hover {
background-color: var(--klee);
color: var(--weiß);
}
.header-dropdown span {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-dropdown-content li {
width: 100%;
margin: 5px 0;
}
}
.header-toggle {
margin-left: 20px;
margin-right: 20px;
display: flex;
align-items: center;
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 26px;
margin-right: 15px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 26px;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--font-color-h);
}
input:checked + .slider:before {
transform: translateX(24px);
}
.slider .icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: .4s;
color: #333;
font-size: 16px;
}
.slider .icon.sun {
left: 5px;
}
.slider .icon.moon {
right: 5px;
}
input:checked + .slider .icon.sun {
opacity: 0;
}
input:not(:checked) + .slider .icon.moon {
opacity: 0;
}
@media (max-width: 950px) and (min-width: 769px) {
.header-nav ul li {
margin: 0 10px;
}
.header-nav ul li a,
.header-nav ul li span {
font-size: 1em;
padding: 0px;
}
.header-toggle {
margin-left: 10px;
}
.switch {
padding: 0px;
margin-right: 0px;
}
}
@media (max-width: 900px) {
.header-nav {
display: none;
}
.header-menu-label {
display: block;
}
}
@media (max-width: 768px) {
.header-container {
padding: 0;
}
.burger {
display: block;
}
.header-nav {
display: none;
}
.header-toggle {
display: none;
}
}
@media (min-width: 769px) {
.header-menu-checkbox {
display: none;
}
.header-menu-label {
display: none;
}
.header-nav {
display: flex !important;
}
.header-nav ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.header-nav ul li {
margin: 0px;
margin-right: 45px;
}
.header-nav ul li a,
.header-nav ul li span {
color: var(--font-color-h);
font-size: 1.1em;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
text-decoration: none;
transition: color 0.3s ease, background-color 0.3s ease;
display: flex;
align-items: center;
gap: 5px;
}
.header-nav ul li a:hover {
color: var(--font-color-h);
background-color: var(--background-color-alt);
}
.header-dropdown:hover .header-dropdown-content,
.header-dropdown:focus-within .header-dropdown-content {
display: flex;
}
.header-dropdown-content {
display: none;
}
.header-dropdown-content.show {
display: flex;
}
.header-dropdown span svg {
transition: transform 0.3s ease;
}
.header-dropdown span svg.open {
transform: rotate(180deg);
}
.header-dropdown-content li {
width: 100%;
margin-bottom: 10px;
}
.header-nav ul li span {
display: flex;
align-items: center;
gap: 5px;
color: var(--font-color-h);
font-size: 1.1em;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
text-decoration: none;
transition: color 0.3s ease, background-color 0.3s ease;
padding-right: 10px;
}
.header-nav ul li span svg {
margin-left: 5px;
}
.header-nav ul li a svg {
margin-left: 5px;
font-size: 1em;
}
}
.disabled-link span {
color: var(--text-muted);
cursor: default;
padding: 10px 15px;
display: flex;
align-items: center;
gap: 8px;
}
.menu-item-content {
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem 1.2rem;
transition: background-color 0.2s ease;
border-radius: 0.5rem;
width: 100%;
margin: 0;
gap: 1.2rem;
}
.menu-item-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2rem;
height: 2rem;
color: var(--text-secondary);
}
.menu-item-icon svg {
width: 1.8rem;
height: 1.8rem;
transition: color 0.2s ease;
}
.menu-item-header {
display: flex;
flex-direction: column;
gap: 0.25rem;
flex: 1;
margin: 0;
padding: 0;
}
.menu-item-content:hover {
background-color: var(--hover-bg);
}
.menu-item-content:hover .menu-item-title,
.menu-item-content:hover .menu-item-icon {
color: var(--primary);
}
.nav-menu .menu-item-content {
padding: 0.9rem 1.2rem;
border-radius: 0;
border-bottom: 1px solid var(--border-color);
}
[data-theme='dark'] .menu-item-content:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.header-dropdown-content .menu-item-content .menu-item-header .menu-item-title {
font-family: 'GrueneType', Arial, sans-serif;
font-weight: normal;
font-size: 0.95em !important;
color: var(--text-primary);
margin: 0;
line-height: 1.2;
}
.header-dropdown-content .menu-item-content .menu-item-header .menu-item-description {
font-family: 'PT Sans', Arial, sans-serif;
font-size: 0.85rem;
color: var(--text-secondary);
margin: 0;
line-height: 1.4;
}
.header-dropdown-trigger {
cursor: pointer;
}
.header-dropdown-trigger svg {
transition: transform 0.3s ease;
}
.header-dropdown-trigger svg.open {
transform: rotate(180deg);
}
.header-nav-item {
color: var(--font-color-h);
font-size: 0.95em;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: normal;
text-decoration: none;
transition: color 0.3s ease, background-color 0.3s ease;
display: flex;
align-items: center;
gap: 5px;
padding: 0.5rem 0.8rem;
border-radius: 0.5rem;
position: relative;
cursor: pointer;
}
.header-nav-item:hover {
color: var(--font-color-h);
background-color: var(--background-color-alt);
}
.header-dropdown .header-nav-item svg.open {
transform: rotate(180deg);
transition: transform 0.3s ease;
}
.header-actions {
display: flex;
align-items: center;
gap: var(--spacing-small);
}
.theme-toggle-button {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--border-subtle);
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--background-color);
transition: background-color 0.3s ease, transform 0.2s ease;
position: relative;
overflow: hidden;
}
.theme-toggle-button:hover {
background-color: var(--hover-bg);
transform: scale(1.05);
}
.theme-toggle-button:active {
transform: scale(0.95);
}
.theme-toggle-icon-wrapper {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.theme-icon {
position: absolute;
font-size: 1.4rem;
color: var(--font-color-h);
transition: opacity 0.3s ease, transform 0.5s ease;
}
.theme-toggle-button.light .theme-icon.sun {
opacity: 1;
transform: rotate(0) scale(1);
}
.theme-toggle-button.light .theme-icon.moon {
opacity: 0;
transform: rotate(-90deg) scale(0);
}
.theme-toggle-button.dark .theme-icon.sun {
opacity: 0;
transform: rotate(90deg) scale(0);
}
.theme-toggle-button.dark .theme-icon.moon {
opacity: 1;
transform: rotate(0) scale(1);
}
@media (max-width: 768px) {
.header-toggle {
display: none;
}
.header-actions {
margin-right: 60px;
}
.header-actions .theme-toggle-button,
.header-actions .profile-label-button {
display: none;
}
}
.profile-icon {
font-size: 1.4rem;
color: var(--font-color-h);
}
/* Style for icons within direct header items (e.g., Suche Icon) */
.header-direct-item-icon {
margin-right: 8px;
font-size: 1.1em; /* Or inherit, or specific size */
}
.profile-label-button {
border: 1px solid var(--border-subtle);
border-radius: 50%;
width: 40px;
height: 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
overflow: hidden;
}
.profile-label-button:hover {
border-color: var(--klee);
transform: scale(1.05);
background-color: var(--background-color-alt);
}
.profile-label-button .profile-icon {
font-size: 1.2rem;
}
/* Profile Dropdown Component Styles
Enthält Styling für den Profil-Button und das Dropdown-Menü im Header */
.profile-button-container {
position: relative;
margin-left: var(--spacing-small);
}
.profile-button {
background: none;
border: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.profile-icon {
font-size: 1.8rem;
color: var(--font-color-h);
}
/* Roboter-Avatar im Header */
.profile-header-avatar-robot {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
}
.profile-header-robot-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.profile-button-loading {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--background-color-alt);
position: relative;
}
.profile-button-loading::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: var(--font-color);
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.login-button {
display: flex;
align-items: center;
gap: var(--spacing-xxsmall);
color: var(--font-color-h);
text-decoration: none;
padding: var(--spacing-small) var(--spacing-medium);
border-radius: var(--spacing-xxsmall);
transition: background-color 0.3s ease;
}
.login-button:hover {
background-color: var(--background-color-alt);
}
.login-button svg {
font-size: 1.2rem;
}
.profile-dropdown {
position: absolute;
top: 55px;
right: 0;
width: 260px;
background-color: var(--background-color);
border-radius: 12px;
box-shadow: var(--shadow-md);
z-index: 1000;
overflow: hidden;
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: top right;
transform: scale(0.95);
opacity: 0;
animation: dropdownFadeIn 0.2s ease forwards;
}
@keyframes dropdownFadeIn {
to {
opacity: 1;
transform: scale(1);
}
}
.profile-dropdown-header {
padding: var(--spacing-medium);
border-bottom: 1px solid var(--border-subtle);
background-color: var(--background-color-alt);
display: flex;
align-items: center;
gap: var(--spacing-medium);
}
.profile-dropdown-avatar {
flex-shrink: 0;
}
.profile-dropdown-avatar-robot {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.profile-dropdown-robot-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.profile-dropdown-avatar-icon {
font-size: 3rem;
color: var(--font-color-h);
}
.profile-dropdown-info {
flex: 1;
text-align: left;
}
.profile-dropdown-greeting {
font-size: 1.2rem;
font-weight: 600;
color: var(--font-color-h);
margin-bottom: var(--spacing-xxsmall);
font-family: 'GrueneType', Arial, sans-serif;
}
.profile-dropdown-email {
font-size: 0.85rem;
color: var(--font-color);
opacity: 0.8;
margin-bottom: var(--spacing-xsmall);
}
.profile-dropdown-links {
padding: 0;
}
.profile-dropdown-link {
display: flex;
align-items: center;
gap: var(--spacing-small);
padding: var(--spacing-small) var(--spacing-medium);
color: var(--font-color);
text-decoration: none;
transition: background-color 0.2s ease;
cursor: pointer;
width: 100%;
text-align: left;
border: none;
background: none;
font-size: 1rem;
}
.profile-dropdown-icon {
font-size: 1rem;
color: var(--font-color);
opacity: 0.8;
min-width: 18px;
}
.profile-dropdown-link:hover {
background-color: var(--background-color-alt);
}
.profile-dropdown-link.logout-link {
color: #e74c3c;
}
.profile-dropdown-link.logout-link .profile-dropdown-icon {
color: #e74c3c;
}
@media (max-width: 768px) {
.profile-button-container {
margin-right: 60px;
}
}
.nav-menu {
display: none;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background: var(--background-color);
height: 100vh;
text-align: left;
padding: 2rem;
position: absolute;
top: 60px;
left: 0;
width: 100%;
transition: transform 0.3s ease-in-out;
}
.nav-menu--open {
display: flex;
transform: translateX(0);
}
.nav-menu__dropdown,
.menu-item {
margin-bottom: 1rem;
width: 100%;
}
.nav-menu__dropdown-trigger {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.5rem;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
cursor: pointer;
padding: 0.5rem 0;
color: var(--font-color-h);
}
.nav-menu__icon {
color: var(--font-color-h);
font-size: 1.25rem;
margin-left: 0.5rem;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.nav-menu__icon--up {
transform: rotate(180deg);
}
.nav-menu__dropdown-content {
list-style: none;
padding: 0.5rem 0 0.5rem 0;
margin: 0;
width: 100%;
}
.menu-item {
width: 100%;
}
.menu-item__link {
text-decoration: none;
width: 100%;
display: block;
}
.menu-item__content {
display: flex;
align-items: center;
padding: 0.5rem;
transition: background-color 0.2s ease;
text-align: left;
width: 100%;
gap: 1rem;
}
.menu-item__content:hover {
background-color: var(--background-color-alt);
border-radius: 4px;
}
.menu-item__text {
display: flex;
flex-direction: column;
}
.menu-item__title {
font-weight: bold;
color: var(--font-color-h);
font-size: 1.2rem;
margin-bottom: 0.25rem;
}
.menu-item__description {
font-size: 1rem;
color: var(--font-color);
margin: 0;
}
.menu-item__icon {
font-size: 1.25rem;
color: var(--font-color-h);
flex-shrink: 0;
}
.menu-item--top-level .menu-item__content {
padding: 0.5rem 0;
}
.menu-item--top-level .menu-item__title {
font-size: 1.5rem;
margin-bottom: 0;
}
.menu-item--top-level .menu-item__icon {
font-size: 1.25rem;
}
.dropdown-enter {
max-height: 0;
opacity: 0;
overflow: hidden;
}
.dropdown-enter-active {
max-height: 500px;
opacity: 1;
transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}
.dropdown-exit {
max-height: 500px;
opacity: 1;
overflow: hidden;
}
.dropdown-exit-active {
max-height: 0;
opacity: 0;
transition: max-height 0.3s ease-in, opacity 0.3s ease-in;
}
.disabled-link span {
color: var(--text-muted);
cursor: default;
padding: 10px 15px;
display: flex;
align-items: center;
gap: 8px;
}
.nav-menu__profile {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border-color);
}
.nav-menu__theme-toggle {
margin-top: 1rem;
display: flex;
align-items: center;
display: none;
}
.nav-menu__divider {
width: 100%;
height: 1px;
background-color: var(--border-color);
margin: 1rem 0;
}
.nav-menu__item .menu-item__profile-wrapper {
margin-left: auto;
}
.nav-menu__item {
margin-bottom: 1rem;
}
:root {
--button-padding: 10px 20px;
--button-border-radius: 7px;
--button-font-size: 1em;
--button-transition: 0.3s ease;
/* Primary Button Variables */
--primary-button-bg: #005538;
--primary-button-hover-bg: #003d28;
--primary-button-text: #ffffff;
--primary-button-radius: 72px;
--primary-button-padding-s: 12px 24px;
--primary-button-padding-m: 16px 32px;
--primary-button-height-s: 40px;
--primary-button-height-m: 48px;
}
.button-container {
display: flex;
gap: 1rem;
width: 100%;
margin-bottom: 1rem;
}
.button-container .button-wrapper {
flex: 1;
}
.button {
padding: var(--button-padding);
border: none;
border-radius: var(--button-border-radius);
font-size: var(--button-font-size);
cursor: pointer;
transition: background-color var(--button-transition), transform var(--button-transition);
display: flex;
align-items: center;
justify-content: center;
}
.button:hover {
transform: scale(1.01);
}
.button:active {
transform: scale(0.98);
}
.button .icon {
margin-right: 8px;
}
.button.loading {
cursor: wait;
}
.button.loading .icon {
animation: spin 2s linear infinite;
}
.social-media-baseform .copy-button {
background-color: transparent;
border: none;
cursor: pointer;
padding: 5px;
transition: opacity 0.3s ease;
width: auto;
}
.form-buttons {
width: 100%;
min-width: 0;
}
.back-button .form-button {
flex: 1;
min-width: 0;
}
.form-button, .generate-post-button, .submit-button {
background-color: var(--weiß);
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.form-button{
flex: 1;
border-radius: var(--button-border-radius);
display: flex;
align-items: center;
justify-content: center;
}
.back-button {
background-color: var(--weiß);
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.download-button {
background-color: var(--primary);
color: var(--weiß);
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.download-button,
.copy-button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: var(--primary);
color: white;
cursor: pointer;
font-size: 16px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.file-input-wrapper,
.unsplash-search-button {
background-color: var(--primary);
color: var(--weiß);
border: 2px solid var(--weiß);
}
.file-input-wrapper .unsplash-search-button {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
border-radius: var(--button-border-radius);
padding: 10px 15px;
background-color: var(--primary);
color: var(--weiß);
border: 2px solid var(--weiß);
}
.file-input-wrapper:hover {
background-color: var(--klee);
transform: scale(1.01);
}
.generate-post-button:hover,
.form-button:hover,
.copy-button:hover {
transform: scale(1.01);
}
.submit-button {
position: relative;
overflow: hidden;
padding: var(--button-padding, 10px 20px);
border: none;
border-radius: var(--button-border-radius, 5px);
font-size: var(--button-font-size, 1em);
cursor: pointer;
background: var(--secondary-600);
color: var(--weiß);
transition: all 0.25s ease-out;
z-index: 1;
}
.submit-button__gradient-layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1;
}
.submit-button__gradient-layer--1 {
background: linear-gradient(45deg, var(--primary-500) 0%, var(--secondary-600) 50%, var(--secondary-600) 100%);
}
.submit-button__gradient-layer--2 {
background: linear-gradient(135deg, var(--secondary-600) 0%, var(--primary-600) 50%, var(--secondary-600) 100%);
}
.submit-button__gradient-layer--3 {
background: linear-gradient(225deg, var(--primary-400) 0%, var(--secondary-500) 50%, var(--primary-600) 100%);
}
.submit-button__gradient-layer--4 {
background: linear-gradient(315deg, var(--secondary-600) 0%, var(--primary-500) 50%, var(--secondary-600) 100%);
}
.submit-button__gradient-layer--5 {
background: linear-gradient(90deg, var(--secondary-600) 0%, var(--primary-600) 25%, var(--secondary-600) 50%, var(--primary-600) 75%, var(--secondary-600) 100%);
}
.submit-button__content-wrapper {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.submit-button--loading {
cursor: loading;
}
.submit-button--success {
background: var(--success-color, #28a745);
}
.submit-button--success .submit-button__gradient-layer {
display: none;
}
.submit-button--clicked {
box-shadow: 0 0 20px rgba(0, 106, 78, 0.3);
}
.submit-button--with-status {
min-width: 180px;
}
.submit-button:disabled {
cursor: loading;
}
.submit-button__content {
display: flex;
align-items: center;
justify-content: center;
}
.submit-button__content--visible {
opacity: 1;
}
.submit-button__content--hidden {
opacity: 0;
}
.submit-button__icon {
margin-right: 8px;
display: flex;
align-items: center;
height: 100%;
}
.submit-button__status {
margin-left: 6px;
font-size: 0.9em;
white-space: nowrap;
}
.file-input-wrapper input[type="file"] {
position: absolute;
width: 100%;
height: 100%;
padding: 10px 20px;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
.file-input-text {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 42px;
padding: var(--button-padding);
border: 2px solid var(--weiß);
border-radius: var(--button-border-radius);
font-size: var(--button-font-size);
background-color: var(--primary);
color: var(--weiß);
cursor: pointer;
transition: background-color var(--button-transition), transform var(--button-transition);
}
.file-input-text:hover {
background-color: var(--klee);
transform: scale(1.01);
}
.file-input-text span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
padding: 0 8px;
}
.file-input-text svg {
flex-shrink: 0;
font-size: 1.2em;
}
.file-name {
display: none;
}
.file-upload {
border: 2px dashed var(--weiß);
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
position: relative;
margin-bottom: 20px;
background-color: transparent;
color: var(--weiß);
justify-content: center;
transition: border-color 0.3s, background-color 0.3s;
}
.file-upload.dragging {
border-color: var(--sonne);
}
.file-upload input[type="file"] {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
justify-content: center;
cursor: pointer;
background-color: var(--secondary)
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 768px) {
.button,
.form-button,
.submit-button,
.generate-post-button,
.back-button,
.download-button,
.copy-button,
.image-search-button,
.file-input-wrapper {
font-size: 0.85em;
padding: 8px 16px;
}
.download-button {
border-radius: 20px;
padding: 12px 10px;
}
}
.file-input-text,
.unsplash-search-button,
.show-alternatives-button {
width: 100%;
height: 42px;
padding: var(--button-padding);
border: 2px solid var(--weiß);
border-radius: var(--button-border-radius);
font-size: var(--button-font-size);
cursor: pointer;
transition: background-color var(--button-transition), transform var(--button-transition);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--primary);
color: var(--weiß);
gap: 8px;
white-space: nowrap;
}
.file-input-text:hover,
.unsplash-search-button:hover,
.show-alternatives-button:hover {
background-color: var(--klee);
transform: scale(1.01);
}
.file-input-text svg,
.unsplash-search-button svg {
font-size: 1.2em;
}
.file-name {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 768px) {
.file-input-text,
.unsplash-search-button,
.show-alternatives-button {
height: 48px;
font-size: 0.95em;
padding: 8px 16px;
}
}
.action-buttons {
display: flex;
gap: 1rem;
width: 100%;
margin-bottom: 1rem;
}
.action-buttons.three-buttons {
display: flex;
gap: 1rem;
width: 100%;
margin-bottom: 1rem;
margin-top: 1rem;
}
.action-buttons.three-buttons .button-wrapper {
flex: 1;
}
.alternatives-button {
width: 100%;
font-size: 0.9em;
padding: 0.5rem 1rem;
background-color: var(--primary);
color: var(--weiß);
border: 2px solid var(--weiß);
border-radius: var(--button-border-radius);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.alternatives-button:hover {
background-color: var(--klee);
}
.alternatives-button-wrapper {
position: relative;
height: 42px;
width: auto;
}
.button-wrapper {
display: flex;
align-items: center;
}
@media (max-width: 768px) {
.action-buttons.three-buttons {
flex-wrap: wrap;
gap: 0.75rem;
}
.action-buttons.three-buttons .button-wrapper {
flex: 1 1 100%;
}
.action-buttons.three-buttons .button-wrapper:nth-child(2),
.action-buttons.three-buttons .button-wrapper:nth-child(3) {
flex: 1 1 calc(50% - 0.375rem);
}
}
.alternatives-button-wrapper {
position: relative;
flex: 1;
min-width: 0;
height: 42px;
}
.show-alternatives-button,
.hide-alternatives-button {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: var(--button-padding);
border: 2px solid var(--weiß);
border-radius: var(--button-border-radius);
font-size: var(--button-font-size);
cursor: pointer;
transition: all var(--button-transition);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--primary);
color: var(--weiß);
gap: 8px;
white-space: nowrap;
}
.show-alternatives-button:hover,
.hide-alternatives-button:hover {
background-color: var(--klee);
transform: scale(1.01);
}
.button-fade-enter {
opacity: 0;
transform: translateY(-10px);
}
.button-fade-enter-active {
opacity: 1;
transform: translateY(0);
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
.button-fade-exit {
opacity: 1;
transform: translateY(0);
}
.button-fade-exit-active {
opacity: 0;
transform: translateY(10px);
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
@media (max-width: 768px) {
.alternatives-button-wrapper {
height: 48px;
}
.show-alternatives-button,
.hide-alternatives-button {
font-size: 0.95em;
padding: 8px 16px;
}
}
.sharepic-download-button {
width: 100%;
height: 42px;
padding: var(--button-padding);
border: none;
border-radius: var(--button-border-radius);
font-size: var(--button-font-size);
line-height: 1;
cursor: pointer;
transition: background-color var(--button-transition), transform var(--button-transition);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--primary);
color: var(--weiß);
gap: 8px;
white-space: nowrap;
text-decoration: none;
}
.sharepic-download-button:hover {
background-color: var(--klee);
transform: scale(1.01);
}
.sharepic-download-button svg {
font-size: 1.2em;
}
@media (max-width: 768px) {
.sharepic-download-button {
height: 48px;
font-size: 0.95em;
padding: 8px 16px;
line-height: 1;
}
.sharepic-download-button svg {
font-size: 1.2em;
}
}
.copy-button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: var(--primary);
color: white;
cursor: pointer;
font-size: 16px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.copy-button-compact {
padding: 8px;
width: 36px;
height: 36px;
border-radius: 4px;
background-color: transparent;
color: var(--klee);
border: 1px solid var(--klee);
display: flex;
align-items: center;
justify-content: center;
}
.copy-button-compact:hover {
background-color: rgba(0, 137, 57, 0.1);
}
.copy-button-compact.copied {
background-color: var(--klee);
color: white;
}
.copy-icon {
font-size: 18px;
}
.copy-button:not(.copy-button-compact) .copy-icon {
margin-right: 8px;
}
.submit-button__loading-spinner {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
}
.submit-button__loading-spinner .spinner-small {
width: 14px;
height: 14px;
border-width: 2px;
}
.button.button-primary {
background-color: var(--primary);
color: var(--weiß);
}
.button.button-primary:hover {
background-color: var(--klee);
}
.btn.btn-tanne-bordered {
background-color: var(--primary, #006A4E);
border: 2px solid var(--weiß, #ffffff);
border-radius: 10px;
color: var(--weiß, #ffffff);
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
}
.btn.btn-tanne-bordered:hover {
background-color: var(--klee, #008939);
border-color: var(--weiß, #ffffff);
color: var(--weiß, #ffffff);
}
/* New Primary Button Design System */
.btn-primary {
background-color: var(--primary-button-bg);
color: var(--primary-button-text);
border: none;
border-radius: var(--primary-button-radius);
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
font-family: inherit;
}
.btn-primary.size-s {
padding: var(--primary-button-padding-s);
height: var(--primary-button-height-s);
font-size: 14px;
}
.btn-primary.size-m {
padding: var(--primary-button-padding-m);
height: var(--primary-button-height-m);
font-size: 16px;
}
.btn-primary:hover:not(:disabled) {
background-color: var(--primary-button-hover-bg);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 85, 56, 0.3);
}
.btn-primary:focus {
outline: 2px solid var(--primary-button-bg);
outline-offset: 2px;
}
.btn-primary:disabled {
background-color: #cccccc;
color: #666666;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-primary .icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/*
* Gemeinsame Spinner-Stile für alle Komponenten
* Diese Datei sollte in allen Komponenten importiert werden, die einen Spinner verwenden
*/
.spinner {
border-radius: 50%;
animation: spinner-rotate 1s linear infinite;
}
.spinner-medium {
width: 30px;
height: 30px;
border: 3px solid rgba(0, 0, 0, 0.1);
border-top-color: var(--font-color-h, #005538);
}
.spinner-small {
width: 16px;
height: 16px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-top-color: var(--font-color-h, #005538);
}
.spinner-large {
width: 40px;
height: 40px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-top-color: var(--font-color-h, #005538);
}
.spinner-white {
border-color: rgba(255, 255, 255, 0.3);
border-top-color: white;
}
.spinner-with-background {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--klee, #46a758);
border-radius: 8px;
width: 36px;
height: 36px;
padding: 0;
margin: 0;
}
[data-theme="dark"] .spinner {
border-color: rgba(255, 255, 255, 0.1);
border-top-color: var(--font-color-h, #005538);
}
@keyframes spinner-rotate {
to {
transform: rotate(360deg);
}
}
.image-slider {
position: relative;
width: 100%;
height: 100%;
background: var(--background-color);
}
.template-gallery-slider {
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.image-gallery {
width: 100%;
height: 100%;
}
.image-gallery-slide {
background: var(--background-color);
}
.image-gallery-image {
object-fit: contain;
width: 100%;
height: 100%;
background: var(--background-color);
cursor: pointer;
}
.image-gallery-content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.image-gallery-content.fullscreen {
background: rgba(0, 0, 0, 0.9);
}
.image-gallery-content.fullscreen .image-gallery-image {
max-height: 90vh;
width: auto;
}
.image-gallery-left-nav,
.image-gallery-right-nav {
opacity: 0;
transition: all 0.2s ease;
}
.image-gallery-left-nav svg,
.image-gallery-right-nav svg {
width: 34px !important;
height: 34px !important;
}
.image-gallery-left-nav:hover,
.image-gallery-right-nav:hover {
transform: translateY(-50%) scale(1.1);
color: var(--primary) !important;
}
.image-slider:hover .image-gallery-left-nav,
.image-slider:hover .image-gallery-right-nav {
opacity: 1;
}
.image-gallery-bullets {
bottom: 10px;
}
.image-gallery-bullet {
background-color: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin: 0 3px;
padding: 4px;
transition: all 0.2s ease;
}
.image-gallery-bullet:hover {
background-color: rgba(255, 255, 255, 0.8);
transform: scale(1.1);
}
.image-gallery-bullet.active {
background-color: white;
transform: scale(1.2);
}
.image-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--background-color);
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--border-color);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.image-gallery.fullscreen-modal {
background: rgba(0, 0, 0, 0.9);
padding: 40px;
}
.image-gallery.fullscreen-modal .image-gallery-content {
top: 50%;
transform: translateY(-50%);
}
.image-gallery.fullscreen-modal .image-gallery-image {
max-height: calc(100vh - 80px);
width: auto;
margin: 0 auto;
}
@media (max-width: 768px) {
.image-gallery-left-nav,
.image-gallery-right-nav {
opacity: 1;
}
.image-gallery-left-nav svg,
.image-gallery-right-nav svg {
width: 30px !important;
height: 30px !important;
}
}
.template-card-image {
position: relative;
padding-top: 75%;
overflow: hidden;
}
.template-card-image .image-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.quote-form {
padding: 1rem;
background-color: var(--background-color);
border-radius: var(--border-radius);
}
.quote-form .form-group {
margin-bottom: 1.5rem;
}
.quote-form label {
display: block;
margin-bottom: 0.5rem;
color: var(--text-color);
font-weight: 500;
}
.quote-form .required {
color: var(--error-color);
margin-left: 0.25rem;
}
.quote-form textarea,
.quote-form input[type="text"] {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
background-color: var(--input-background);
color: var(--text-color);
font-size: 1rem;
transition: border-color 0.2s ease;
}
.quote-form textarea {
min-height: 120px;
resize: vertical;
}
/* Quote-form input focus styles - DISABLED to prevent conflicts with main form-inputs.css */
/*
.quote-form textarea:focus,
.quote-form input[type="text"]:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px var(--primary-color-light);
}
*/
.quote-form .error {
border-color: var(--error-color);
}
.quote-form .error-message {
color: var(--error-color);
font-size: 0.875rem;
margin-top: 0.25rem;
display: block;
}
.quote-form .character-count {
text-align: right;
color: var(--text-color-light);
font-size: 0.875rem;
margin-top: 0.25rem;
}
.quote-form .font-size-control {
display: flex;
align-items: center;
gap: 1rem;
}
.quote-form .font-size-buttons {
display: flex;
gap: 0.5rem;
}
.quote-form .font-size-buttons button {
padding: 0.5rem 1rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
background-color: var(--background-color);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s ease;
}
.quote-form .font-size-buttons button.active {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.quote-form .font-size-buttons button:hover:not(.active) {
background-color: var(--hover-color);
}
.quote-form .generate-button {
width: 100%;
padding: 0.75rem;
margin: 1rem 0;
background-color: #005538;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: background-color 0.2s;
}
.quote-form .generate-button:hover:not(:disabled) {
background-color: #004428;
}
.quote-form .generate-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
:root {
--checkbox-size-base: 1rem;
--checkbox-size-mobile: 0.875rem;
--checkbox-padding-base: 0.5rem;
--checkbox-border-radius: 0.5rem;
--checkbox-touch-target: 2.75rem;
}
.checkbox-wrapper-28 {
--size: clamp(var(--checkbox-size-mobile), 2.5vw, var(--checkbox-size-base));
position: relative;
display: inline-flex;
padding: clamp(0.15rem, 0.5vw, 0.3rem);
min-height: var(--checkbox-touch-target);
}
/* Radix Checkbox.Root styling */
.checkbox-wrapper-28 .promoted-input-checkbox {
position: absolute;
margin-left: 0.75rem;
top: 40%;
transform: translateY(-50%);
width: var(--size);
height: var(--size);
border: 0.125rem solid var(--font-color);
border-radius: 0.25rem;
background-color: transparent;
transition: all 0.2s ease-in-out;
cursor: pointer;
z-index: 2;
/* Ensure Radix checkbox is clickable */
pointer-events: auto;
/* Flex for centering indicator */
display: flex;
align-items: center;
justify-content: center;
min-width: 1.125rem;
min-height: 1.125rem;
}
.checkbox-wrapper-28 .checkbox-indicator-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.checkbox-wrapper-28 .checkbox-label-wrapper {
color: var(--font-color);
cursor: pointer;
position: relative;
display: flex;
align-items: center;
border: 0.125rem solid var(--font-color-h) !important;
border-radius: var(--checkbox-border-radius);
padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.75rem, 3vw, 1rem) clamp(0.5rem, 2vw, 0.75rem) clamp(2.25rem, 6vw, 2.5rem);
transition: all 0.25s ease-out;
white-space: nowrap;
z-index: 1;
min-height: var(--checkbox-touch-target);
font-size: clamp(0.875rem, 2.5vw, 1rem);
}
.checkbox-wrapper-28 .checkbox-label-wrapper:hover {
background-color: var(--hover-color-alt);
}
.checkbox-wrapper-28 .checkbox-svg {
width: calc(var(--size) - 0.375rem);
height: calc(var(--size) - 0.375rem);
stroke: var(--font-color);
stroke-width: 0.1875rem;
fill: none;
pointer-events: none;
min-width: 0.75rem;
min-height: 0.75rem;
}
.checkbox-wrapper-28 .promoted-input-checkbox[data-state="checked"] ~ .checkbox-label-wrapper .checkbox-svg {
stroke: var(--button-background-color);
}
.platform-checkboxes {
margin: clamp(1rem, 4vw, 1.25rem) 0;
display: flex;
flex-wrap: wrap;
}
@media (max-width: 480px) {
.checkbox-wrapper-28:not(.checkbox-simple) {
margin: 0 0 0.5rem 0;
padding: 0;
--size: var(--checkbox-size-mobile);
width: 100%;
max-width: 100%;
}
.checkbox-wrapper-28:not(.checkbox-simple) .checkbox-label-wrapper {
font-size: 0.875rem;
border-radius: 0.375rem;
white-space: normal;
word-wrap: break-word;
max-width: 100%;
box-sizing: border-box;
}
.checkbox-wrapper-28:not(.checkbox-simple) .promoted-input-checkbox {
min-width: 1rem;
min-height: 1rem;
}
.platform-checkboxes {
flex-direction: column;
width: 100%;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.checkbox-wrapper-28:not(.checkbox-simple) {
--size: calc(var(--checkbox-size-mobile) + 0.125rem);
}
.checkbox-wrapper-28:not(.checkbox-simple) .checkbox-label-wrapper {
font-size: 0.9375rem;
}
.checkbox-wrapper-28:not(.checkbox-simple) .promoted-input-checkbox {
/* left wird durch clamp() im base style definiert */
}
.platform-checkboxes {
flex-direction: row;
flex-wrap: wrap;
}
}
@media (max-width: 768px) {
.checkbox-simple {
margin: 0;
padding: 0.25rem;
--size: var(--checkbox-size-mobile);
width: 100%;
max-width: 100%;
}
.checkbox-simple .checkbox-label-wrapper {
padding: 0.5rem 0.75rem 0.5rem 2rem;
font-size: 0.875rem;
min-height: 2.5rem;
white-space: normal;
word-wrap: break-word;
max-width: 100%;
box-sizing: border-box;
}
.checkbox-simple .promoted-input-checkbox {
min-width: 1rem;
min-height: 1rem;
}
}
@media (min-width: 769px) {
.checkbox-simple {
--size: var(--checkbox-size-base);
padding: var(--checkbox-padding-base);
}
.checkbox-simple .checkbox-label-wrapper {
padding: 0.75rem 1rem 0.75rem 2.5rem;
font-size: 1rem;
}
.checkbox-simple .promoted-input-checkbox {
/* left wird durch clamp() im base style definiert */
}
}
/* Styles for LaborTab specific checkboxes */
.labor-tab-checkbox-container .checkbox-wrapper-28 .checkbox-label-wrapper {
border-color: var(--font-color-h) !important;
color: var(--font-color);
}
.labor-tab-checkbox-container .checkbox-wrapper-28 .checkbox-label-wrapper:hover {
background-color: var(--hover-color-alt);
}
.labor-tab-checkbox-container .checkbox-wrapper-28 .promoted-input-checkbox {
top: 55%;
}
.labor-tab-checkbox-container .checkbox-wrapper-28 .promoted-input-checkbox[data-state="checked"] ~ .checkbox-label-wrapper .checkbox-svg {
stroke: var(--interactive-accent-color);
}
/* Enhanced styling for checkboxes in form containers */
.form-container .checkbox-wrapper-28 .checkbox-label-wrapper,
.form-container .checkbox-wrapper-28 .checkbox-label-wrapper .checkbox-label {
color: var(--font-color);
}
.form-container .checkbox-wrapper-28 .promoted-input-checkbox {
border-color: var(--font-color);
}
.form-container .checkbox-wrapper-28 .checkbox-svg {
stroke: var(--font-color);
}
.form-container .checkbox-wrapper-28 .promoted-input-checkbox[data-state="checked"] ~ .checkbox-label-wrapper .checkbox-svg {
stroke: var(--button-background-color);
}
/* Radix UI specific overrides */
.checkbox-wrapper-28 .promoted-input-checkbox:focus-visible {
outline: 2px solid var(--button-background-color);
outline-offset: 2px;
}
.checkbox-wrapper-28 .promoted-input-checkbox:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.checkbox-wrapper-28 .promoted-input-checkbox:disabled ~ .checkbox-label-wrapper {
opacity: 0.5;
cursor: not-allowed;
}
.form-collapse-button {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background-color: var(--dunkelgruen);
color: var(--weiß);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.form-collapse-button:hover {
background-color: var(--klee);
}
.form-collapse-icon {
font-size: 24px;
transition: transform 0.3s ease;
}
.form-collapse-icon.collapsed {
transform: rotate(180deg);
}
@media (max-width: 768px) {
.form-collapse-button {
position: fixed;
left: 20px;
bottom: 20px;
top: auto;
transform: none;
}
.form-collapse-icon.collapsed {
transform: rotate(90deg);
}
}
.feature-toggle {
position: relative;
display: flex;
flex-direction: column;
padding: var(--spacing-medium);
border-radius: var(--card-border-radius-small);
border: var(--card-border);
transition: var(--input-transition);
}
/* .feature-toggle:hover {
background-color: var(--hover-color-alt);
border-color: var(--border-subtle);
box-shadow: var(--card-shadow-subtle);
} */
.feature-section {
margin: var(--spacing-large) 0;
}
.feature-header {
display: flex;
align-items: center;
width: 100%;
gap: var(--spacing-small);
}
.feature-description {
margin: var(--spacing-small) 0 0 0;
font-size: 0.9rem;
color: var(--font-color);
line-height: 1.5;
opacity: 0.8;
}
.feature-switch {
all: unset;
width: 46px;
height: 22px;
background-color: var(--input-background);
border: var(--input-border);
border-radius: 22px;
position: relative;
box-shadow: var(--shadow-sm);
transition: var(--input-transition);
cursor: pointer;
flex-shrink: 0;
}
.feature-switch:focus-visible {
outline: 2px solid var(--interactive-accent-color);
outline-offset: 2px;
}
.feature-switch[data-state="checked"] {
background-color: var(--interactive-accent-color);
border-color: var(--interactive-accent-color);
box-shadow: var(--shadow-md);
}
.feature-switch-thumb {
all: unset;
display: block;
width: 16px;
height: 16px;
background-color: var(--background-color);
border-radius: 50%;
box-shadow: var(--shadow-sm);
transition: var(--input-transition);
transform: translateX(3px);
will-change: transform;
}
.feature-switch[data-state="checked"] .feature-switch-thumb {
transform: translateX(27px);
background-color: var(--background-color-pure);
}
.feature-label {
display: flex;
align-items: center;
font-size: 0.9rem;
color: var(--font-color);
font-weight: 400;
flex-grow: 1;
}
.feature-icon {
margin-right: var(--spacing-xsmall);
font-size: 1.1rem;
color: var(--font-color);
opacity: 0.7;
transition: var(--input-transition);
}
.feature-icon.active {
color: var(--interactive-accent-color);
opacity: 1;
}
.form-container:not(.visible) .form-feature-toggle {
display: none !important;
}
.feature-icons {
display: flex;
flex-direction: column;
gap: var(--spacing-xsmall);
border: 1px solid var(--font-color);
border-radius: var(--card-border-radius-small);
background-color: transparent;
transition: var(--input-transition);
padding: var(--spacing-xsmall);
}
.feature-icons-row {
display: flex;
justify-content: center;
gap: var(--spacing-small);
}
.feature-icon-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
background-color: transparent;
border: 1px solid transparent;
border-radius: var(--card-border-radius-small);
cursor: pointer;
transition: var(--input-transition);
outline: none;
}
.feature-icon-button:hover {
}
.feature-icon-button:focus-visible {
outline: 2px solid var(--interactive-accent-color);
outline-offset: 2px;
}
.feature-icon-button.active {
background-color: var(--secondary-50);
border-color: var(--interactive-accent-color);
}
.feature-icon-button.active .feature-icon {
color: var(--interactive-accent-color);
}
/* Click animation */
.feature-icon-button.clicked {
animation: iconClick 0.3s ease-out;
}
@keyframes iconClick {
0% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}
.feature-icons .feature-icon {
font-size: 1.4rem;
color: var(--font-color);
opacity: 0.7;
transition: var(--input-transition);
margin: 0; /* Override any margin from FeatureToggle */
}
.feature-icon-button:hover .feature-icon,
.feature-icon-button.active .feature-icon {
opacity: 1;
}
/* Button Label (unique class name to avoid tooltip CSS conflicts) */
.feature-icons-button__label {
position: absolute;
bottom: -28px;
left: 50%;
transform: translateX(-50%);
padding: var(--spacing-xxsmall) var(--spacing-xsmall);
background-color: var(--grey-900);
color: var(--white);
font-size: 0.75rem;
white-space: nowrap;
border-radius: 4px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-out;
z-index: 1000;
}
.feature-icon-button:hover .feature-icons-button__label {
opacity: 0.9;
}
/* Dark mode adjustments */
[data-theme="dark"] .feature-icons {
background-color: transparent;
}
[data-theme="dark"] .feature-icon-button.active {
background-color: var(--grey-700);
}
[data-theme="dark"] .feature-icons-button__label {
background-color: var(--grey-700);
color: var(--neutral-600);
}
/* Attachment badge removed */
/* Hidden file input */
.feature-icons .attachment-file-input {
display: none;
}
/* Privacy info inline message */
.feature-icons__privacy-info {
margin-top: var(--spacing-xsmall);
color: var(--font-color);
font-size: 0.85rem;
line-height: 1.4;
}
.feature-icons__info-link {
background: none;
border: none;
color: var(--interactive-accent-color);
padding: 0;
margin: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
font: inherit;
}
.feature-icons__info-link:hover {
opacity: 0.9;
}
.feature-icons__info-link:focus-visible {
outline: 2px solid var(--interactive-accent-color);
outline-offset: 2px;
border-radius: var(--card-border-radius-small);
}
.feature-icons__websearch-info {
margin-top: var(--spacing-xxsmall);
color: var(--font-color);
font-size: 0.85rem;
line-height: 1.4;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.feature-icons {
gap: var(--spacing-xsmall);
padding: var(--spacing-xxsmall);
}
.feature-icon-button {
width: 32px;
height: 32px;
}
.feature-icons .feature-icon {
font-size: 1.1rem;
}
.feature-icon-button .attachment-badge {
width: 16px;
height: 16px;
font-size: 0.6rem;
min-width: 16px;
}
.attachment-badge .attachment-remove-button {
width: 10px;
height: 10px;
top: -5px;
right: -5px;
}
.attachment-badge .attachment-remove-button .remove-icon {
font-size: 0.45rem;
}
}
/* Minimal styling for attached files list */
.attached-files-list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xsmall);
margin-top: var(--spacing-small);
}
.file-tag {
display: inline-flex;
align-items: center;
padding: var(--spacing-xxsmall) var(--spacing-xsmall);
background-color: var(--secondary-50);
border: 1px solid var(--secondary-200);
border-radius: var(--card-border-radius-small);
font-size: 0.8rem;
max-width: 600px;
}
.file-tag .file-name {
/* Allow the filename to take available space without CSS truncation */
flex: 1 1 auto;
min-width: 0;
display: block;
color: var(--font-color);
max-width: none !important;
overflow: visible !important;
text-overflow: initial !important;
white-space: normal !important;
/* Removed CSS truncation since we handle it in JavaScript */
}
.file-remove-btn {
margin-left: var(--spacing-xxsmall);
padding: 0;
background: none;
border: none;
cursor: pointer;
color: var(--error-500);
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
transition: var(--input-transition);
}
.file-remove-btn:hover {
background-color: var(--error-50);
}
/* Warning state for privacy mode conflicts */
.file-tag--warning {
border-color: var(--error-500) !important;
background-color: rgba(211, 47, 47, 0.05);
position: relative;
}
.file-tag.file-tag--warning .file-name {
color: var(--error-700) !important;
}
.file-tag--warning .file-remove-btn {
color: var(--error-600);
}
.file-tag--warning .file-remove-btn:hover {
background-color: var(--error-100);
color: var(--error-700);
}
/* Dark theme */
[data-theme="dark"] .file-tag {
background-color: var(--grey-700);
border-color: var(--grey-600);
}
[data-theme="dark"] .file-remove-btn:hover {
background-color: var(--grey-600);
}
/* Dark theme warning state */
[data-theme="dark"] .file-tag--warning {
background-color: rgba(211, 47, 47, 0.1);
border-color: var(--error-400) !important;
}
[data-theme="dark"] .file-tag.file-tag--warning .file-name {
color: var(--error-300) !important;
}
[data-theme="dark"] .file-tag--warning .file-remove-btn {
color: var(--error-400);
}
[data-theme="dark"] .file-tag--warning .file-remove-btn:hover {
background-color: var(--error-900);
color: var(--error-300);
}
.log-level-selector {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
font-family: 'Arial', sans-serif;
font-size: 12px;
background-color: #f5f5f5;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
transition: all 0.3s ease;
max-width: 200px;
}
.log-level-selector-toggle {
padding: 8px 12px;
background-color: #4CAF50;
color: white;
cursor: pointer;
font-weight: bold;
text-align: center;
user-select: none;
}
.log-level-selector-content {
padding: 10px;
background-color: white;
border-top: 1px solid #ddd;
}
.log-level-selector h4 {
margin: 0 0 10px 0;
font-size: 14px;
color: #333;
}
.log-level-options {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.log-level-button {
padding: 4px 8px;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #f9f9f9;
cursor: pointer;
font-size: 11px;
transition: all 0.2s ease;
}
.log-level-button:hover {
background-color: #e9e9e9;
}
.log-level-button.active {
background-color: #4CAF50;
color: white;
border-color: #4CAF50;
}
@media (max-width: 768px) {
.log-level-selector {
bottom: 10px;
right: 10px;
max-width: 150px;
}
.log-level-selector-toggle {
padding: 6px 8px;
}
}
#action-tooltip {
background-color: var(--dunkelgruen) !important;
color: white !important;
border-radius: 4px !important;
font-size: 14px !important;
padding: 8px 12px !important;
z-index: 9999 !important;
opacity: 1 !important;
}
#action-tooltip.react-tooltip::before {
border-bottom-color: var(--grau) !important;
border-top-color: transparent !important;
}
/* Help Tooltip Component Styles */
.help-tooltip-container {
position: relative;
display: inline-block;
margin-left: var(--spacing-small);
}
.help-tooltip-trigger {
background: none;
border: none;
color: var(--font-color-subtle);
cursor: pointer;
padding: var(--spacing-xxsmall);
border-radius: 50%;
transition: all 0.2s ease;
opacity: 0.7;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.help-tooltip-trigger:hover {
opacity: 1;
color: var(--interactive-accent-color);
background-color: var(--background-color-alt);
}
.help-tooltip-trigger:focus {
outline: 2px solid var(--interactive-accent-color);
outline-offset: 2px;
}
.help-tooltip-content {
position: absolute;
top: calc(100% + var(--spacing-xxsmall));
left: 50%;
transform: translateX(-50%);
background: var(--background-color);
border: 1px solid var(--border-subtle);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-medium);
box-shadow: var(--shadow-md);
z-index: 1000;
max-width: 300px;
min-width: 250px;
font-size: 0.9rem;
line-height: 1.4;
color: var(--font-color-subtle);
}
.help-tooltip-arrow {
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: var(--background-color);
border: 1px solid var(--border-subtle);
border-bottom: none;
border-right: none;
transform: translateX(-50%) rotate(45deg);
}
.help-tooltip-content p {
margin: 0 0 var(--spacing-small) 0;
}
.help-tooltip-content p:last-child {
margin-bottom: 0;
}
.help-tooltip-content strong {
color: var(--font-color);
}
/* Header with help tooltip */
.header-with-help {
display: flex;
align-items: center;
margin-bottom: 0;
padding-bottom: 0;
}
.header-with-help .form-group-title {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.help-tooltip-content {
max-width: 250px;
min-width: 200px;
left: 0;
transform: none;
}
.help-tooltip-arrow {
left: var(--spacing-medium);
transform: rotate(45deg);
}
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
.help-tooltip-trigger {
transition: none;
}
}
/* Delete Warning Tooltip Component Styles */
.delete-warning-tooltip-container {
position: relative;
display: inline-block;
}
.delete-warning-trigger {
background: none;
border: none;
color: var(--font-color-subtle);
cursor: pointer;
padding: var(--spacing-xxsmall);
border-radius: 50%;
transition: all 0.2s ease;
opacity: 0.7;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.delete-warning-trigger:hover:not(:disabled) {
opacity: 1;
color: var(--error-red, #dc3545);
background-color: var(--background-color-alt);
}
.delete-warning-trigger:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.delete-warning-trigger:focus {
outline: 2px solid var(--error-red, #dc3545);
outline-offset: 2px;
}
.delete-warning-tooltip-content {
position: absolute;
background: var(--background-color);
border: 2px solid var(--error-red, #dc3545);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-medium);
box-shadow: var(--shadow-lg);
z-index: 1000;
max-width: 320px;
min-width: 280px;
font-size: 0.9rem;
line-height: 1.4;
}
.delete-warning-arrow {
position: absolute;
top: -7px;
right: var(--spacing-medium);
width: 12px;
height: 12px;
background: var(--background-color);
border: 2px solid var(--error-red, #dc3545);
border-bottom: none;
border-right: none;
transform: rotate(45deg);
}
.delete-warning-header {
display: flex;
align-items: center;
gap: var(--spacing-small);
margin-bottom: var(--spacing-medium);
}
.delete-warning-icon {
color: var(--error-red, #dc3545);
font-size: 1.3rem;
flex-shrink: 0;
}
.delete-warning-title {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--font-color);
}
.delete-warning-body {
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
}
.delete-warning-message {
margin: 0;
color: var(--font-color);
line-height: 1.5;
}
.delete-warning-actions {
display: flex;
gap: var(--spacing-small);
justify-content: flex-end;
}
.delete-warning-button {
padding: var(--spacing-xsmall) var(--spacing-medium);
border: 1px solid;
border-radius: var(--border-radius-small);
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.2s ease;
white-space: nowrap;
}
.delete-warning-button.cancel {
background: var(--background-color);
border-color: var(--border-subtle);
color: var(--font-color);
}
.delete-warning-button.cancel:hover {
background: var(--background-color-alt);
border-color: var(--interactive-accent-color);
}
.delete-warning-button.confirm-first {
background: var(--warning-orange, #ffc107);
border-color: var(--warning-orange, #ffc107);
color: var(--primary);
}
.delete-warning-button.confirm-first:hover {
background: var(--warning-orange-dark, #e0a800);
border-color: var(--warning-orange-dark, #e0a800);
}
.delete-warning-button.confirm-final {
background: var(--error-red, #dc3545);
border-color: var(--error-red, #dc3545);
color: white;
}
.delete-warning-button.confirm-final:hover {
background: var(--error-red-dark, #c82333);
border-color: var(--error-red-dark, #c82333);
}
/* Responsive adjustments for delete warning */
@media (max-width: 768px) {
.delete-warning-tooltip-content {
max-width: 280px;
min-width: 240px;
left: auto;
right: 0;
}
.delete-warning-arrow {
right: var(--spacing-small);
}
.delete-warning-actions {
flex-direction: column;
}
.delete-warning-button {
width: 100%;
text-align: center;
}
}
/* Styles for the FormSelect component */
.form-field-wrapper {
margin-bottom: var(--spacing-medium);
}
.form-select {
display: block;
width: 100%;
padding: var(--form-element-padding-y, var(--spacing-small)) var(--form-element-padding-x, var(--spacing-small));
font-size: var(--form-element-font-size, 14px);
font-family: 'PT Sans', Arial, sans-serif;
line-height: var(--form-element-line-height, 1.5);
color: var(--input-text-color);
background-color: var(--input-background);
background-clip: padding-box;
border: var(--input-border);
border-radius: var(--card-border-radius-small);
box-shadow: none;
min-height: var(--form-element-min-height, 44px);
transition: var(--input-transition);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* Custom dropdown arrow for light mode - using font-color for proper contrast */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right var(--form-element-padding-x, var(--spacing-small)) center;
background-size: 16px 12px;
padding-right: calc(var(--form-element-padding-x, var(--spacing-small)) * 2.5);
}
.form-select:focus {
border-color: transparent;
outline: 0;
box-shadow: var(--input-shadow-focus);
}
.form-select.error-input {
border: var(--input-border-error);
background-color: var(--input-background);
}
.form-select.error-input:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.25);
}
.form-select:disabled {
background-color: var(--border-color-disabled);
color: var(--font-color-disabled);
opacity: 0.7;
cursor: not-allowed;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
/* Styling for the label */
.form-field-wrapper label {
display: block;
margin-bottom: var(--spacing-xsmall);
font-weight: 500;
color: var(--font-color);
}
/* Styling for the help text */
.help-text {
display: block;
margin-top: var(--spacing-xxsmall);
font-size: 0.875rem;
color: var(--font-color-disabled);
}
/* Dark theme adjustments for the custom arrow */
[data-theme="dark"] .form-select,
:root:not([data-theme="light"]) .form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f5f1e9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
[data-theme="dark"] .form-select:disabled,
:root:not([data-theme="light"]) .form-select:disabled {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23777777' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
/* Required asterisk styling */
.form-field-required-asterisk {
color: var(--error-red);
margin-left: var(--spacing-xxsmall);
}
.inline-validation-message {
font-size: 0.9em;
margin-bottom: 15px;
display: flex; /* Ensures proper block-level behavior for margins */
align-items: center; /* Vertically align icon and text */
/* Color will be typically applied by utility classes like .text-danger or .text-warning */
}
.validation-icon {
margin-right: 6px;
flex-shrink: 0; /* Prevent icon from shrinking */
/* vertical-align and display: inline-block are not needed for flex items */
}
/* Modern Form Input Styles - Card-based Design with Theme Support */
/* ===== Form Field Wrapper ===== */
.form-field-wrapper {
margin-bottom: var(--spacing-large);
}
.form-field-wrapper:last-child {
margin-bottom: 0;
}
/* ===== Base Input Styles ===== */
.form-input,
.form-textarea,
.form-select {
width: 100%;
font-family: 'PT Sans', Arial, sans-serif;
font-size: var(--form-element-font-size, 14px);
line-height: var(--form-element-line-height, 1.5);
color: var(--input-text-color, var(--font-color));
background-color: var(--input-background);
border: 0px solid var(--font-color-h);
border-radius: var(--card-border-radius-small);
padding: var(--form-element-padding-y, var(--spacing-small)) var(--form-element-padding-x, var(--spacing-small));
min-height: var(--form-element-min-height, 44px);
transition: var(--input-transition, all 0.25s ease-out);
box-sizing: border-box;
outline: none;
}
/* ===== Focus States ===== */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
box-shadow: none;
}
/* Enhanced focus ring for keyboard navigation */
.user-is-tabbing .form-input:focus,
.user-is-tabbing .form-textarea:focus,
.user-is-tabbing .form-select:focus,
.user-is-tabbing .form-checkbox:focus {
outline: 1px solid var(--interactive-accent-color);
outline-offset: 1px;
}
/* ===== Error States ===== */
.form-input.error-input,
.form-textarea.error-input,
/* .form-select.error-input { */
/* box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1); */
/* } */
.form-input.error-input:focus,
.form-textarea.error-input:focus,
/* .form-select.error-input:focus { */
/* box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2); */
/* } */
/* ===== Disabled States ===== */
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
background-color: var(--background-color-alt);
color: var(--font-color);
cursor: not-allowed;
opacity: 0.8;
border-color: var(--border-color-disabled);
}
/* ===== Placeholder Styles ===== */
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--font-color) !important;
opacity: 0.95;
}
/* Browser-specific placeholder styles for better compatibility */
.form-input::-webkit-input-placeholder,
.form-textarea::-webkit-input-placeholder {
color: var(--font-color) !important;
opacity: 0.95;
}
.form-input::-moz-placeholder,
.form-textarea::-moz-placeholder {
color: var(--font-color) !important;
opacity: 0.95;
}
.form-input:-ms-input-placeholder,
.form-textarea:-ms-input-placeholder {
color: var(--font-color) !important;
opacity: 0.95;
}
/* ===== Autofill Styles - Remove browser defaults ===== */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px var(--input-background) inset !important;
-webkit-text-fill-color: var(--input-text-color) !important;
background-color: var(--input-background) !important;
border: 0px solid var(--font-color-h) !important;
transition: var(--input-transition, all 0.25s ease-out);
}
/* ===== Label Styles ===== */
.form-field-label {
display: block;
font-weight: 600;
color: var(--font-color);
margin-bottom: var(--spacing-xsmall);
font-size: 14px;
line-height: 1.4;
}
.form-field-label.required::after {
content: ' *';
color: var(--error-red);
font-weight: bold;
}
/* ===== Help Text ===== */
.form-field-help {
display: block;
font-size: 13px;
color: var(--font-color-disabled);
margin-top: var(--spacing-xxsmall);
line-height: 1.4;
}
/* ===== Error Message ===== */
.form-field-error {
display: block;
font-size: 13px;
color: var(--error-red);
margin-top: var(--spacing-xxsmall);
line-height: 1.4;
font-weight: 500;
animation: error-slide-in 0.3s ease-out;
}
@keyframes error-slide-in {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== Textarea Specific ===== */
.form-textarea {
min-height: auto;
resize: none;
overflow: hidden;
}
/* ===== Select Specific ===== */
.form-select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--form-element-padding-x, var(--spacing-small)) center;
background-size: 16px;
padding-right: calc(var(--form-element-padding-x, var(--spacing-small)) * 2.5);
appearance: none;
cursor: pointer;
}
.form-select:focus {
cursor: pointer;
}
/* ===== Checkbox Styles ===== */
.checkbox-wrapper {
margin-bottom: var(--spacing-medium);
}
.checkbox-input-wrapper {
display: flex;
align-items: flex-start;
gap: var(--spacing-xsmall);
}
.form-checkbox {
width: 20px;
height: 20px;
border: 2px solid var(--border-subtle);
border-radius: 4px;
background-color: transparent;
cursor: pointer;
position: relative;
margin: 0;
flex-shrink: 0;
appearance: none;
transition: var(--input-transition, all 0.25s ease-out);
}
.form-checkbox:checked {
background-color: var(--interactive-accent-color);
border-color: var(--interactive-accent-color);
}
.form-checkbox:checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 14px;
font-weight: bold;
}
.form-checkbox:focus {
box-shadow: none;
}
.checkbox-label {
cursor: pointer;
font-size: 14px;
line-height: 1.4;
color: var(--font-color);
margin: 0;
flex-grow: 1;
}
.required-marker {
color: var(--error-red);
font-weight: bold;
}
/* ===== Card-based Form Container ===== */
.form-card {
background-color: var(--card-background, var(--background-color-alt));
border: 1px solid var(--card-border, var(--border-subtle));
border-radius: var(--spacing-small);
padding: var(--spacing-large);
box-shadow: var(--shadow-sm);
transition: var(--input-transition, all 0.25s ease-out);
}
/* ===== Skip Link Styles ===== */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--interactive-accent-color);
color: white;
padding: 8px 12px;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
z-index: 9999;
transition: top 0.3s ease;
}
.skip-link:focus {
top: 6px;
}
/* ===== Accessibility Preference Classes ===== */
.reduce-motion .form-input,
.reduce-motion .form-textarea,
/* .reduce-motion .form-select, */
.reduce-motion .form-checkbox,
.reduce-motion .form-field-error {
transition: none;
animation: none;
}
.high-contrast .form-input,
.high-contrast .form-textarea {
border-width: 2px;
border-color: currentColor;
}
.high-contrast .form-input:focus,
.high-contrast .form-textarea:focus {
outline: 3px solid currentColor;
outline-offset: 2px;
}
/* ===== Responsive Design ===== */
@media (max-width: 768px) {
.form-field-wrapper {
margin-bottom: var(--spacing-medium);
}
.form-input {
font-size: 16px;
min-height: 44px;
}
.form-textarea {
font-size: 16px;
min-height: auto;
}
.form-checkbox {
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
}
}
/* ===== Phase 5: High Contrast Mode & Forced Colors Support ===== */
@media (forced-colors: active) {
.form-input,
.form-textarea,
/* .form-select { */
/* border: 1px solid ButtonText; */
/* background: ButtonFace; */
/* color: ButtonText; */
/* forced-color-adjust: none; */
/* } */
.form-input:focus,
.form-textarea:focus,
/* .form-select:focus { */
/* border: 2px solid Highlight; */
/* outline: 2px solid Highlight; */
/* outline-offset: 2px; */
/* background: ButtonFace; */
/* } */
.form-input:disabled,
.form-textarea:disabled,
/* .form-select:disabled { */
/* border-color: GrayText; */
/* background: ButtonFace; */
/* color: GrayText; */
/* } */
.form-checkbox {
border: 2px solid ButtonText;
background: ButtonFace;
forced-color-adjust: none;
}
.form-checkbox:checked {
background: Highlight;
border-color: Highlight;
}
.form-checkbox:checked::after {
color: HighlightText;
}
.form-checkbox:focus {
outline: 2px solid Highlight;
outline-offset: 2px;
}
.form-field-label {
color: ButtonText;
}
.form-field-error {
color: ButtonText;
font-weight: bold;
}
.form-field-help {
color: ButtonText;
}
.form-card {
border: 1px solid ButtonText;
background: ButtonFace;
}
.skip-link {
background: Highlight;
color: HighlightText;
border: 2px solid ButtonText;
}
}
/* ===== Prefers High Contrast Support ===== */
@media (prefers-contrast: high) {
.form-input,
.form-textarea,
/* .form-select { */
/* border-width: 2px; */
/* border-color: var(--font-color); */
/* } */
.form-input:focus,
.form-textarea:focus,
/* .form-select:focus { */
/* border-width: 3px; */
/* box-shadow: 0 0 0 2px var(--interactive-accent-color); */
/* } */
.form-field-error {
font-weight: bold;
text-decoration: underline;
}
.form-checkbox {
border-width: 3px;
}
}
/* ===== Screen Reader Only Elements ===== */
.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;
}
/* ===== Form Navigation Landmarks ===== */
form[role="form"] {
position: relative;
}
.form-section-title {
margin-bottom: var(--spacing-medium);
font-weight: 600;
color: var(--font-color);
}
/* ===== Error Animation with Reduced Motion Support ===== */
@media (prefers-reduced-motion: no-preference) {
.form-field-error {
animation: error-slide-in 0.3s ease-out;
}
.form-input.error-input,
.form-textarea.error-input {
animation: error-shake 0.4s ease-out;
}
}
@keyframes error-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px); }
75% { transform: translateX(2px); }
}
/* ===== Color Scheme Declaration ===== */
:root {
color-scheme: light dark;
}
/* ===== Touch Target Optimization ===== */
@media (pointer: coarse) {
.form-input,
/* .form-select, */
.form-checkbox,
.checkbox-label {
min-height: 44px;
}
.form-textarea {
min-height: auto;
}
.checkbox-input-wrapper {
min-height: 44px;
align-items: center;
}
}
/* File Upload Styles - Matching Form Input Design */
/* File Upload Button - Styled to match form inputs */
.file-upload-button {
width: 100%;
font-family: 'PT Sans', Arial, sans-serif;
font-size: var(--form-element-font-size, 12px);
line-height: var(--form-element-line-height, 1.5);
color: var(--input-text-color, var(--font-color));
background-color: var(--input-background);
border: 0px solid var(--font-color-h);
border-radius: var(--card-border-radius-small);
padding: var(--form-element-padding-y, var(--spacing-small)) var(--form-element-padding-x, var(--spacing-small));
min-height: var(--form-element-min-height, 44px);
transition: var(--input-transition, all 0.25s ease-out);
box-sizing: border-box;
outline: none;
cursor: pointer;
text-align: left;
display: flex;
align-items: center;
justify-content: flex-start;
}
/* File Upload Button with selected file */
.file-upload-button--with-file {
justify-content: space-between;
padding-right: var(--spacing-xsmall);
}
/* File Upload Filename Display */
.file-upload-filename {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: var(--spacing-small);
}
/* File Upload Remove Button (X) */
.file-upload-remove {
background: none;
border: none;
color: var(--font-color-disabled);
cursor: pointer;
padding: var(--spacing-xxsmall);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
transition: var(--input-transition, all 0.25s ease-out);
flex-shrink: 0;
}
.file-upload-remove:hover:not(:disabled) {
background-color: var(--error-red);
color: var(--white);
}
.file-upload-remove:focus {
outline: 1px solid var(--interactive-accent-color);
outline-offset: 1px;
}
.file-upload-remove:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.file-upload-remove svg {
width: 12px;
height: 12px;
}
/* Hover state */
.file-upload-button:hover:not(:disabled) {
background-color: var(--hover-color-alt);
}
/* Focus state - matching form inputs */
.file-upload-button:focus {
box-shadow: none;
}
/* Enhanced focus ring for keyboard navigation */
.user-is-tabbing .file-upload-button:focus {
outline: 1px solid var(--interactive-accent-color);
outline-offset: 1px;
}
/* Disabled state */
.file-upload-button:disabled {
background-color: var(--background-color-alt);
color: var(--font-color-disabled);
cursor: not-allowed;
opacity: 0.7;
}
/* Loading state */
.file-upload-button:disabled {
cursor: not-allowed;
}
/* File Upload Input Wrapper */
.file-upload-input-wrapper {
position: relative;
width: 100%;
}
/* Sharepic Upload Fields Container - ensure proper spacing */
.sharepic-upload-fields {
width: 100%;
/* Ensure motion container doesn't interfere with form field wrapper spacing */
}
/* Selected file styling - make filename stand out */
.file-upload-button:not(:disabled):not(:hover) {
/* When file is selected, we could add some visual indication */
}
/* Mobile responsive */
@media (max-width: 768px) {
.file-upload-button {
font-size: 16px;
min-height: 44px;
}
.file-upload-remove {
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
}
.file-upload-remove svg {
width: 14px;
height: 14px;
}
}
/* High contrast mode support */
@media (forced-colors: active) {
.file-upload-button {
border: 1px solid ButtonText;
background: ButtonFace;
color: ButtonText;
forced-color-adjust: none;
}
.file-upload-button:focus {
border: 2px solid Highlight;
outline: 2px solid Highlight;
outline-offset: 2px;
background: ButtonFace;
}
.file-upload-button:disabled {
border-color: GrayText;
background: ButtonFace;
color: GrayText;
}
.file-upload-remove {
border: 1px solid ButtonText;
color: ButtonText;
forced-color-adjust: none;
}
.file-upload-remove:focus {
outline: 2px solid Highlight;
outline-offset: 2px;
}
.file-upload-remove:hover:not(:disabled) {
background: Highlight;
color: HighlightText;
border-color: Highlight;
}
}
@media (prefers-contrast: high) {
.file-upload-button {
border-width: 2px;
border-color: var(--font-color);
}
.file-upload-button:focus {
border-width: 3px;
box-shadow: 0 0 0 2px var(--interactive-accent-color);
}
.file-upload-remove {
border: 2px solid var(--font-color);
}
.file-upload-remove:focus {
border-width: 3px;
box-shadow: 0 0 0 2px var(--interactive-accent-color);
}
}
/* Accessibility - Screen reader support */
.file-upload-button[aria-label],
.file-upload-button[title] {
/* Ensure proper accessibility attributes are supported */
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.file-upload-button {
transition: none;
}
}
/* Touch target optimization */
@media (pointer: coarse) {
.file-upload-button {
min-height: 44px;
}
.file-upload-remove {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
}
.file-upload-remove svg {
width: 16px;
height: 16px;
}
}
/* Display action section with modern spacing */
.display-action-section {
margin-top: var(--spacing-large);
padding-top: var(--spacing-medium);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.display-action-section .save-action-element {
margin-top: var(--spacing-medium);
}
.save-action-element .antrag-save-button {
margin-top: var(--spacing-small);
}
/* Modern error message styling */
.display-content .form-error-message {
color: var(--error-red);
background-color: rgba(211, 47, 47, 0.1);
border: 1px solid var(--error-red);
border-radius: var(--card-border-radius-small);
padding: var(--spacing-small) var(--spacing-medium);
margin-top: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
font-weight: 500;
display: flex;
align-items: center;
transition: var(--input-transition);
}
/* Dark mode adjustments for error messages */
[data-theme="dark"] .display-content .form-error-message {
background-color: rgba(211, 47, 47, 0.15);
border-color: rgba(211, 47, 47, 0.6);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .display-content .form-error-message {
background-color: rgba(211, 47, 47, 0.15);
border-color: rgba(211, 47, 47, 0.6);
}
}
/* FormCard Base Styles */
.form-card {
background-color: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
overflow: hidden;
}
/* FormCard Header Styles */
.form-card__header {
background-color: var(--card-background);
padding: var(--spacing-medium) var(--spacing-xlarge) var(--spacing-medium);
border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
margin: calc(-1 * var(--spacing-medium)) calc(-1 * var(--spacing-xlarge)) 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-card__title {
margin: 0;
font-size: 1.4em;
}
.form-card__hide-button {
background: none;
border: none;
color: var(--font-color);
cursor: pointer;
padding: var(--spacing-xxsmall);
border-radius: var(--card-border-radius-small);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
opacity: 0.6;
transition: var(--input-transition);
}
.form-card__hide-button:hover {
opacity: 1;
background-color: var(--background-color-alt);
transform: scale(1.01);
}
.form-card__hide-button:focus {
outline: 2px solid var(--interactive-accent-color);
outline-offset: 2px;
}
.form-card__content {
flex: 1;
}
.form-card--elevated {
box-shadow: var(--card-shadow-elevated);
}
.form-card--floating {
box-shadow: var(--card-shadow-floating);
}
.form-card--subtle {
box-shadow: var(--card-shadow-subtle);
}
.form-card--small {
padding: var(--spacing-medium);
}
.form-card--medium {
padding: var(--spacing-large);
}
.form-card--large {
padding: var(--spacing-xlarge);
}
/* FormSection Modern Layout */
.form-section {
display: flex;
flex-direction: column;
min-height: 400px;
background-color: var(--card-background);
color: var(--font-color);
}
/* Split Layout Container */
.form-section__container {
display: flex;
gap: var(--spacing-large);
height: 100%;
}
/* Input Section Styles */
.form-section__inputs {
flex: 2;
min-width: 0;
}
.form-inputs__form {
display: flex;
flex-direction: column;
height: 100%;
}
.form-inputs__content {
flex: 1;
display: flex;
flex-direction: column;
}
.form-inputs__fields {
flex: 1;
margin-bottom: var(--spacing-large);
}
.form-inputs__buttons {
display: flex;
gap: var(--spacing-medium);
justify-content: flex-end;
align-items: center;
padding-top: var(--spacing-medium);
border-top: var(--border-subtle);
margin-top: auto;
}
.form-inputs__back-button {
background-color: transparent;
border: 2px solid var(--interactive-accent-color);
color: var(--interactive-accent-color);
padding: var(--spacing-small) var(--spacing-large);
border-radius: var(--card-border-radius-small);
font-family: 'PT Sans', Arial, sans-serif;
font-size: 0.9em;
cursor: pointer;
transition: var(--input-transition);
}
.form-inputs__back-button:hover {
background-color: var(--interactive-accent-color);
color: var(--background-color-pure);
}
.form-inputs__submit {
flex-shrink: 0;
}
/* Extras Section Styles */
.form-section__extras {
flex: 1;
min-width: 0;
border-radius: var(--card-border-radius-small);
align-self: flex-start;
}
.form-extras__content {
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
}
.form-extras__item {
padding-bottom: 0;
margin-bottom: 0;
}
.form-extras__notice {
border-radius: var(--card-border-radius-small);
}
.form-extras__notice .custom-prompt-notice,
.form-extras__notice .neutral-notice {
margin-top: -10px;
font-size: 0.6em;
line-height: 1.3;
}
.form-extras__notice .custom-prompt-notice .info-icon,
.form-extras__notice .neutral-notice .info-icon {
font-size: 0.9em;
margin-right: var(--spacing-xxsmall);
opacity: 0.7;
}
.form-extras__custom {
padding: 0;
}
.form-extras__submit {
padding: 0;
margin-top: var(--spacing-medium);
}
.form-extras__submit-button {
width: 100%;
border: 0px solid var(--font-color-h) ;
color: var(--weiß);
background-color: var(--klee);
border-radius: 20px;
}
/* Form Field Layouts */
.form-section .form-field {
margin-bottom: var(--spacing-medium);
}
.form-section .form-field:last-child {
margin-bottom: 0;
}
.form-section label {
display: block;
margin-bottom: var(--spacing-small);
color: var(--font-color);
font-weight: 500;
}
.form-section .help-text,
.form-section .subtext,
.form-section p {
color: var(--font-color);
font-size: 0.9em;
margin-top: var(--spacing-xsmall);
line-height: 1.4;
}
/* Error States */
.form-section .inline-validation-message {
color: var(--error-red);
font-size: 0.85em;
margin-top: var(--spacing-xsmall);
display: flex;
align-items: center;
gap: var(--spacing-xxsmall);
}
/* Responsive Design */
@media (max-width: 768px) {
.form-card--large {
padding: var(--spacing-medium);
}
.form-section {
min-height: 300px;
margin-top: var(--spacing-medium);
}
.form-card__header {
margin: calc(-1 * var(--spacing-small)) calc(-1 * var(--spacing-medium)) 0;
padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
}
/* Split Layout Mobile */
.form-section__container {
flex-direction: column;
gap: var(--spacing-medium);
}
.form-section__inputs,
.form-section__extras {
flex: 1 1 auto;
}
.form-section__extras {
order: 2;
}
.form-inputs__buttons {
flex-direction: column;
gap: var(--spacing-small);
}
.form-inputs__back-button,
.form-inputs__submit {
width: 100%;
text-align: center;
}
/* Legacy buttons for compatibility */
.form-section__buttons {
flex-direction: column;
gap: var(--spacing-small);
}
.form-section__back-button,
.form-section__submit {
width: 100%;
text-align: center;
}
}
@media (max-width: 480px) {
.form-card--large {
padding: var(--spacing-small);
}
}
/* Focus and accessibility improvements */
.form-section__back-button:focus {
outline: 2px solid var(--interactive-accent-color);
outline-offset: 2px;
}
/* Input focus handled by main form-section focus styles above */
/* High contrast mode support */
@media (forced-colors: active) {
.form-card {
border: 1px solid ButtonText;
background: ButtonFace;
}
.form-section {
background: Canvas;
color: CanvasText;
}
.form-section__back-button {
border: 1px solid ButtonText;
background: ButtonFace;
color: ButtonText;
}
}
/* New styles for the bottom section */
.form-section__bottom {
border-top: 1px solid var(--border-subtle);
padding: var(--spacing-medium) 0 var(--spacing-small);
margin-top: var(--spacing-small);
}
.form-section__bottom h3 {
margin-top: 0;
}
/* Mobile first extras styles */
.form-section__mobile-first-extras {
display: none;
}
@media (max-width: 768px) {
.form-section__mobile-first-extras {
display: block;
margin-bottom: var(--spacing-large);
}
}
/* Press release fields animation container */
.press-release-fields .form-field {
margin-bottom: var(--spacing-large);
}
.press-release-fields .form-field:last-child {
margin-bottom: 0;
}
/* Section headers for conditional form sections */
.sharepic-upload-fields h4,
.press-release-fields h4 {
margin: 0 0 var(--spacing-medium) 0;
padding: 0;
}
/* Add spacing when press release follows another conditional section */
.press-release-fields.has-preceding-section {
margin-top: var(--spacing-large);
}
.press-release-fields.has-preceding-section h4 {
margin-top: 0;
}
/* Motion wrapper layout classes */
.form-section-motion-wrapper {
flex: 2;
min-width: 0;
overflow: hidden;
}
.display-section-motion-wrapper {
min-width: 0;
display: flex;
}
.display-section-motion-wrapper.form-visible {
flex: 1;
justify-content: flex-start;
}
.display-section-motion-wrapper.form-hidden {
flex: 1;
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
max-width: none;
margin: 0;
}
.display-section-motion-wrapper.form-hidden .display-container {
max-width: 900px;
width: 100%;
margin: 0 auto;
}
/* Form Toggle Floating Action Button */
.form-toggle-fab {
position: fixed;
bottom: var(--spacing-large);
left: var(--spacing-large);
width: 56px;
height: 56px;
border-radius: 50%;
background-color: var(--primary);
color: var(--weiß);
border: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
cursor: pointer;
z-index: 1000;
transition: background-color 0.25s ease-out;
}
.form-toggle-fab:focus {
outline: 2px solid var(--interactive-accent-color);
outline-offset: 2px;
}
/* Profile Tab Skeleton Styles */
.profile-skeleton-container {
width: 100%;
padding: var(--spacing-medium);
}
/* Gemeinsame Basis für alle Skeleton-Elemente */
.profile-skeleton-container [class^="profile-skeleton-"] {
background: linear-gradient(90deg,
var(--background-color-alt) 0%,
var(--background-color) 20%,
var(--background-color-alt) 40%
);
background-size: 1000px 100%;
border-radius: var(--spacing-xxsmall);
overflow: hidden;
}
/* Default Skeleton */
.profile-skeleton-header {
height: 2.5rem;
width: 60%;
margin-bottom: var(--spacing-large);
}
.profile-skeleton-block {
height: 1.25rem;
margin-bottom: var(--spacing-medium);
}
.profile-skeleton-block:nth-child(1) {
width: 100%;
}
.profile-skeleton-block:nth-child(2) {
width: 90%;
}
.profile-skeleton-block:nth-child(3) {
width: 75%;
}
/* List Skeleton */
.profile-skeleton-list-item {
display: flex;
justify-content: space-between;
padding: var(--spacing-medium);
border-radius: var(--spacing-xxsmall);
margin-bottom: var(--spacing-small);
align-items: center;
}
.profile-skeleton-item-content {
flex: 1;
}
.profile-skeleton-title {
height: 1.5rem;
width: 60%;
margin-bottom: var(--spacing-small);
background-color: var(--background-color-alt);
border-radius: var(--spacing-xxsmall);
}
.profile-skeleton-meta {
height: 0.875rem;
width: 40%;
background-color: var(--background-color-alt);
border-radius: var(--spacing-xxsmall);
}
.profile-skeleton-actions {
display: flex;
gap: var(--spacing-small);
}
.profile-skeleton-button {
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: var(--background-color-alt);
}
/* Form Skeleton */
.profile-skeleton-form-title {
height: 2rem;
width: 50%;
margin-bottom: var(--spacing-large);
}
.profile-skeleton-form-group {
margin-bottom: var(--spacing-medium);
}
.profile-skeleton-label {
height: 1rem;
width: 30%;
margin-bottom: var(--spacing-small);
}
.profile-skeleton-input {
height: 2.5rem;
width: 100%;
border-radius: var(--spacing-xxsmall);
}
.profile-skeleton-form-actions {
margin-top: var(--spacing-large);
display: flex;
justify-content: flex-end;
}
.profile-skeleton-button-primary {
height: 2.5rem;
width: 10rem;
border-radius: var(--spacing-xxsmall);
}
/* Tabs Skeleton */
.profile-skeleton-tabs {
display: flex;
flex-direction: column;
}
.profile-skeleton-tabs-navigation {
display: flex;
gap: var(--spacing-small);
margin-bottom: var(--spacing-medium);
}
.profile-skeleton-tab {
height: 2.5rem;
width: 8rem;
border-radius: var(--spacing-xxsmall);
}
.profile-skeleton-tabs-panel {
height: 20rem;
width: 100%;
border-radius: var(--spacing-xxsmall);
}
/* Responsive Anpassungen */
@media (max-width: 768px) {
.profile-skeleton-header,
.profile-skeleton-form-title {
width: 80%;
}
.profile-skeleton-title {
width: 80%;
}
.profile-skeleton-button-primary {
width: 100%;
}
}
.editor-chat {
width: 100%;
min-width: 280px;
max-width: 450px;
height: calc(100vh - 40px);
background: var(--chat-background);
border-radius: 12px;
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
overflow: hidden;
position: sticky;
top: 0;
flex-shrink: 0;
position: relative;
transition: all 0.3s ease;
padding: 0;
}
.editor-chat-header {
padding: 12px 16px;
background: var(--background-color-alt);
border-bottom: var(--border-subtle);
display: flex;
justify-content: space-between;
align-items: center;
}
.editor-chat-header h3 {
margin: 0;
font-size: 16px;
color: var(--font-color);
}
.close-button {
background: none;
border: none;
font-size: 20px;
color: var(--font-color);
cursor: pointer;
padding: 0 4px;
}
.close-button:hover {
color: var(--button-color-hover);
}
.editor-chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px 16px 100px 16px;
display: flex;
flex-direction: column;
gap: 8px;
background: var(--chat-background);
scrollbar-width: thin; /* For Firefox */
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); /* For Firefox */
}
.editor-chat-messages::-webkit-scrollbar {
width: 8px;
}
.editor-chat-messages::-webkit-scrollbar-track {
background: var(--scrollbar-track-color);
border-radius: 10px;
}
.editor-chat-messages::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color);
border-radius: 10px;
border: 2px solid var(--scrollbar-track-color); /* Creates padding around thumb */
}
.editor-chat-messages::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover-color);
}
.chat-message {
max-width: 90%;
padding: 8px 12px;
border-radius: 12px;
font-size: 14px;
line-height: 1.4;
word-break: break-word;
}
.chat-message.user {
align-self: flex-end;
background: var(--user-message-background, var(--klee));
color: var(--weiß);
border-bottom-right-radius: 4px;
margin-top: 20px;
position: relative;
}
.chat-message-user-name {
position: absolute;
top: -18px;
right: 10px;
font-size: 0.7rem;
color: var(--chat-message-user-name-color);
padding: 0 4px;
white-space: nowrap;
}
.chat-message.assistant {
align-self: flex-start;
background: var(--ai-message-background);
color: var(--ai-message-text-color);
border-bottom-left-radius: 4px;
margin-left: 40px;
position: relative;
}
.assistant-icon {
position: absolute;
left: -36px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
background: var(--assistant-icon-background);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--assistant-icon-color);
padding: 6px;
}
.chat-message-quote {
background-color: rgba(0, 0, 0, 0.05);
padding: 8px 12px;
border-radius: 4px;
margin-top: 5px;
margin-bottom: 8px;
font-style: italic;
color: var(--secondary);
border-left: 3px solid #ccc;
font-size: 0.9em;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
[data-theme="dark"] .chat-message-quote {
color: var(--secondary);
box-shadow: inset 0 0 0 2000px rgba(0,0,0,0.15);
}
.chat-message.error {
align-self: center;
background: #dc3545;
color: var(--weiß);
text-align: center;
}
/* Floating input with glass design and layout */
.floating-input {
position: absolute;
bottom: var(--spacing-medium);
left: var(--spacing-medium);
right: var(--spacing-medium);
background-color: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 24px;
box-shadow: var(--shadow-lg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
z-index: 100;
}
[data-theme="dark"] .floating-input {
background-color: rgba(0, 0, 0, 0.25);
border-color: rgba(255, 255, 255, 0.1);
}
.floating-input .input-elements {
padding: 12px 12px;
display: flex;
align-items: center;
gap: 12/px;
background: transparent;
}
.floating-input input.form-input {
flex: 1;
margin-bottom: 0; /* Override form-input default margin */
min-height: 20px; /* Keep original size */
border-radius: 20px; /* Keep original rounded style */
font-size: 14px;
margin-left: 10px;
margin-right: 10px;
}
.floating-input input.form-input:focus {
box-shadow: 0 0 0 1px var(--user-accent-color, var(--klee));
}
/* Dark mode specific override for chat input visibility */
[data-theme="dark"] .floating-input input.form-input {
background-color: var(--grey-800);
border: 1px solid var(--grey-700);
}
.color-picker-container {
position: relative;
display: flex;
}
.color-picker-menu {
position: absolute;
bottom: calc(100% + 2px);
background-color: var(--background-color-alt);
border-radius: var(--spacing-small);
box-shadow: var(--shadow-lg);
padding: var(--spacing-small);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-xsmall);
width: auto;
min-width: 80px;
z-index: 10;
border: solid var(--border-subtle);
}
.color-menu-item {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.1);
cursor: pointer;
padding: 0;
transition: transform 0.1s ease-out;
}
[data-theme="dark"] .color-menu-item {
border: 1px solid rgba(255,255,255,0.1);
}
.color-picker-button {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--border-subtle);
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
.floating-input button {
color: var(--weiß);
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s;
}
.floating-input button:hover:not(:disabled) {
filter: brightness(90%);
}
.floating-input button:disabled {
background: var(--background-color-alt);
cursor: not-allowed;
opacity: 0.5;
}
.selected-text-display {
font-size: 0.75rem;
color: #666;
margin: 12px 16px 8px;
padding: 12px 16px;
background: var(--secondary);
border-radius: 16px;
white-space: pre-wrap;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
line-height: 1.4;
max-height: 5.6em;
width: calc(100% - 32px);
border: 1px solid var(--hellgrau);
word-break: break-word;
}
@media (max-width: 1200px) {
.editor-chat {
max-width: 380px;
}
}
@media (max-width: 992px) {
.editor-chat {
max-width: 320px;
}
.chat-message {
max-width: 95%;
}
.chat-message.assistant {
margin-left: 32px;
}
.assistant-icon {
left: -30px;
width: 24px;
height: 24px;
font-size: 14px;
}
}
@media (max-width: 768px) {
.editor-chat {
position: fixed;
bottom: 0;
top: auto;
left: 0;
right: 0;
max-width: 100%;
width: 100%;
height: 50vh;
border-radius: 12px 12px 0 0;
z-index: 1000;
}
.editor-chat-messages {
padding: 16px 16px 120px 16px;
}
.floating-input {
bottom: var(--spacing-large);
left: var(--spacing-large);
right: var(--spacing-large);
}
}
@media (max-width: 480px) {
.editor-chat {
height: 70vh;
}
.editor-chat-header h3 {
font-size: 14px;
}
.floating-input .input-elements {
padding: 12px;
}
.floating-input input {
font-size: 12px;
}
}
.success-screen-container {
border: var(--border-subtle);
border-radius: 8px;
padding: var(--spacing-large, 24px);
margin: var(--spacing-large, 24px) auto;
max-width: 600px;
text-align: center;
background-color: rgba(var(--klee-rgb), 0.1);
border-color: var(--klee);
animation: fadeIn 0.5s ease-out;
display: flex;
flex-direction: column;
align-items: center;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.success-icon {
font-size: 2.5rem;
color: var(--klee);
margin-bottom: var(--spacing-medium, 16px);
}
.success-title {
color: var(--font-color-h);
margin-bottom: var(--spacing-small, 8px);
font-weight: 600;
}
.success-message-content {
color: var(--font-color);
margin-bottom: var(--spacing-large, 24px);
white-space: pre-wrap;
word-wrap: break-word;
width: 100%;
background-color: var(--background-color);
padding: var(--spacing-medium, 16px);
border-radius: 6px;
border: var(--border-subtle);
}
.success-actions {
display: flex;
justify-content: center;
gap: var(--spacing-medium, 16px);
margin-top: var(--spacing-medium, 16px);
}
.success-actions .button {
}
.success-actions .button-secondary {
}
.segmented-control-wrapper {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-medium);
border: 1px solid var(--border-subtle, #ddd);
border-radius: 8px;
padding: var(--spacing-small);
background-color: var(--background-color);
width: 100%;
box-sizing: border-box;
}
.segmented-control-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--font-color);
white-space: nowrap;
flex-shrink: 0;
}
.segmented-control-container {
display: inline-flex;
border-radius: 6px;
overflow: hidden;
flex-grow: 1;
box-sizing: border-box;
border: 1px solid var(--border-subtle, #ccc);
}
.segmented-control-button {
flex-grow: 1;
flex-basis: 0;
padding: 0.6rem 1rem;
border: none;
background-color: var(--background-color, #fff);
color: var(--font-color, #333);
font-size: 0.9rem;
cursor: pointer;
text-align: center;
white-space: nowrap;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
border-right: 1px solid var(--border-subtle, #ccc);
}
.segmented-control-button:last-child {
border-right: none;
}
.segmented-control-button:not(.active):not(:disabled):hover {
background-color: var(--background-color-alt, #f0f0f0);
}
.segmented-control-button.active {
background-color: var(--primary, #4CAF50);
color: white;
font-weight: 500;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.segmented-control-button.disabled {
cursor: not-allowed;
}
.segmented-control-wrapper.disabled {
opacity: 0.7;
}
.segmented-control-button:focus-visible {
outline: 2px solid var(--himmel, #0BA1DD);
outline-offset: -1px;
z-index: 1;
position: relative;
}
.discrete-slider-container {
position: relative;
width: 100%;
padding: 10px 0 20px;
margin: var(--spacing-medium) 0;
}
.discrete-slider-container::before {
content: "";
position: absolute;
top: 17px;
left: 8px;
right: 8px;
height: 2px;
background-image: repeating-linear-gradient(to right,
#adadad,
#adadad 1px,
transparent 1px,
transparent 10%
);
pointer-events: none;
z-index: 0;
opacity: 0.7;
}
.discrete-slider-input {
width: 100%;
cursor: pointer;
margin: 0;
height: 4px;
background: #e0e0e0;
border-radius: 2px;
appearance: none;
-webkit-appearance: none;
position: relative;
z-index: 1;
}
.discrete-slider-input::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
background: var(--grashalm);
border-radius: 50%;
cursor: pointer;
border: none;
margin-top: -6px;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.discrete-slider-input::-moz-range-thumb {
width: 16px;
height: 16px;
background: var(--grashalm);
border-radius: 50%;
cursor: pointer;
border: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.discrete-slider-input:not(:disabled)::-webkit-slider-thumb:hover {
background: var(--klee);
}
.discrete-slider-input:not(:disabled)::-moz-range-thumb:hover {
background: var(--klee);
}
.discrete-slider-input:focus {
outline: none;
}
.discrete-slider-input:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(11, 161, 221, 0.5),
0 1px 3px rgba(0,0,0,0.2);
}
.discrete-slider-input:focus::-moz-range-thumb {
box-shadow: 0 0 0 3px rgba(11, 161, 221, 0.5),
0 1px 3px rgba(0,0,0,0.2);
}
.discrete-slider-container.disabled {
opacity: 0.6;
}
.discrete-slider-container.disabled .discrete-slider-input {
cursor: not-allowed;
}
.discrete-slider-container.disabled .discrete-slider-input::-webkit-slider-thumb {
cursor: not-allowed;
background: var(--secondary);
}
.discrete-slider-container.disabled .discrete-slider-input::-moz-range-thumb {
cursor: not-allowed;
background: var(--secondary);
}
.discrete-slider-labels {
display: flex;
justify-content: space-between;
padding: 0 5px;
margin-top: var(--spacing-xsmall);
position: relative;
width: 100%;
box-sizing: border-box;
}
.discrete-slider-label {
font-size: 0.8rem;
color: var(--font-color);
text-align: center;
position: absolute;
left: calc((var(--step-index) / (var(--total-steps) - 1)) * 100%);
transform: translateX(-50%);
transition: color 0.2s ease, font-weight 0.2s ease;
white-space: nowrap;
}
.discrete-slider-label:first-child {
left: 0;
transform: translateX(0%);
text-align: left;
}
.discrete-slider-label:last-child {
left: 100%;
transform: translateX(-100%);
text-align: right;
}
.discrete-slider-label.active {
font-weight: bold;
color: var(--klee);
}
.discrete-slider-label.disabled {
color: var(--secondary);
cursor: default;
opacity: 0.7;
}
#tickmarks {
display: none;
}
/* Menu Dropdown Component */
.menu-dropdown-container {
position: relative;
display: inline-block;
}
.menu-dropdown-content {
background: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--card-shadow-floating);
z-index: 1000;
min-width: 140px;
overflow: hidden;
animation: dropdown-appear 0.15s ease-out;
/* Initial position off-screen until calculated */
position: absolute;
top: -9999px;
left: -9999px;
}
@keyframes dropdown-appear {
from {
opacity: 0;
transform: translateY(-4px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.menu-dropdown-item {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
padding: var(--spacing-xsmall) var(--spacing-small);
font-size: 14px;
color: var(--font-color);
cursor: pointer;
transition: background-color 0.15s ease;
border: none;
background: none;
width: 100%;
text-align: left;
}
.menu-dropdown-item:hover {
background: var(--hover-color-alt);
}
.menu-dropdown-item.danger {
color: var(--error-red);
}
.menu-dropdown-item.danger:hover {
background: var(--hover-color-alt);
}
.menu-dropdown-separator {
height: 1px;
background: var(--card-border);
margin: 4px 0;
}
/* Submenu Styles */
.menu-dropdown-submenu-container {
position: relative;
}
.menu-dropdown-submenu-trigger {
position: relative;
}
.menu-dropdown-item.submenu-trigger {
justify-content: space-between;
padding-right: var(--spacing-small);
}
.submenu-arrow {
font-size: 12px;
color: var(--font-color-muted);
margin-left: auto;
transition: transform 0.15s ease;
}
.menu-dropdown-submenu-content {
position: absolute;
left: 100%;
top: 0;
background: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--card-shadow-floating);
min-width: 160px;
z-index: 1001;
opacity: 0;
visibility: hidden;
transform: translateX(-8px);
transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
overflow: hidden;
}
.menu-dropdown-submenu-trigger:hover .menu-dropdown-submenu-content {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.menu-dropdown-submenu-trigger:hover .submenu-arrow {
transform: rotate(90deg);
}
.menu-dropdown-item.submenu-item {
font-size: 13px;
padding: var(--spacing-xxsmall) var(--spacing-small);
gap: var(--spacing-xxsmall);
}
.menu-dropdown-item.submenu-item:hover {
background: var(--hover-color-alt);
}
/* Ensure submenu content appears above other elements */
.menu-dropdown-submenu-content .menu-dropdown-item {
white-space: nowrap;
}
.gallery-layout {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 2rem 2rem 2rem;
}
.gallery-header {
margin-bottom: 2rem;
text-align: center;
}
.gallery-header h1 {
font-size: 2rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--font-color-h);
}
.gallery-header p {
max-width: 800px;
margin: 0 auto 2rem;
font-size: 1.1rem;
line-height: 1.6;
color: var(--font-color);
text-align: center;
}
.gallery-search-controls {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: var(--spacing-large);
max-width: 900px;
margin: 0 auto 2rem;
}
.gallery-main-searchbar-section {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: var(--spacing-xlarge);
padding: 0 var(--spacing-medium);
box-sizing: border-box;
}
.gallery-content-type-selector-section {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: var(--spacing-large);
padding: 0 var(--spacing-medium);
box-sizing: border-box;
}
.gallery-filter {
margin-bottom: 3rem;
display: flex;
justify-content: center;
}
.gallery-category-filter {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
}
.gallery-category-filter .category-button {
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
border: 2px solid var(--button-background-color);
border-radius: 25px;
background: var(--background-color);
color: var(--font-color);
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
}
.gallery-category-filter .category-button:hover {
background: var(--background-color-alt);
transform: translateY(-1px);
}
.gallery-category-filter .category-button.active {
background: var(--background-color-alt);
color: var(--font-color);
border-color: var(--primary);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin: 0 auto;
}
.gallery-grid .no-results {
grid-column: 1 / -1;
text-align: center;
padding: 3rem;
color: var(--font-color);
font-size: 1.1rem;
}
@media (max-width: 1200px) {
.gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
@media (max-width: 768px) {
.gallery-layout {
padding: 80px 1rem 1rem 1rem;
}
.gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
.gallery-filter {
gap: 0.5rem;
}
.gallery-category-filter .category-button {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
}
.gallery-item-card.antrag-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 1rem;
background: var(--background-color);
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gallery-item-card.antrag-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.antrag-card-title {
margin-top: 0;
margin-bottom: 0.5rem !important;
color: var(--font-color-h);
font-size: 1.1rem;
font-weight: 600;
}
.antrag-card-tags {
margin-bottom: 1rem;
line-height: 1.4;
}
.antrag-card-tag {
display: inline-block;
background-color: var(--background-color-alt);
color: var(--font-color);
font-size: 0.8rem;
padding: 0.2rem 0.6rem;
border-radius: 4px;
margin-right: 0.4rem;
margin-bottom: 0.4rem;
font-weight: 500;
}
.antrag-card-tag-more {
font-size: 0.8em;
color: var(--primary);
margin-left: 0.2rem;
display: inline-block;
vertical-align: bottom;
padding-bottom: 0.4rem;
}
.antrag-card-date {
font-size: 0.8em;
color: #666;
margin-top: auto;
margin-bottom: 0;
padding-top: 0.75rem;
border-top: 1px solid var(--background-color-alt);
text-align: right;
}
.search-bar-container .search-depth-selector {
flex-shrink: 0;
margin-right: 0.5rem;
height: 100%;
display: flex;
align-items: center;
}
.search-bar-container .search-depth-selector .selector-button {
border: none;
background: transparent;
padding: 1rem 0.8rem;
border-radius: 0;
color: var(--font-color);
min-width: auto;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
font-size: 0.9rem;
}
.search-bar-container .search-depth-selector .selector-button:hover {
background: var(--background-color-alt);
}
.search-bar-container .search-depth-selector .selector-button:focus {
box-shadow: none;
outline: none;
}
/* Styling für CategoryFilter innerhalb von AdvancedSearchOptions */
.advanced-search-options .search-option-group .gallery-category-filter {
display: flex;
flex-wrap: wrap;
gap: 0.5rem; /* Etwas weniger Abstand als im Hauptfilter */
justify-content: flex-start; /* Links ausrichten innerhalb der Options */
padding-top: 0.5rem;
}
.advanced-search-options .category-button {
padding: 0.5rem 1rem; /* Kleinere Buttons */
font-size: 0.85rem;
border: 1px solid var(--border-subtle);
border-radius: 15px; /* Kleinere Radien */
background: var(--background-color);
color: var(--font-color);
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
}
.advanced-search-options .category-button:hover {
background: var(--background-color-alt);
border-color: var(--primary);
transform: translateY(-1px);
}
.advanced-search-options .category-button.active {
background: var(--primary);
color: var(--weiß);
border-color: var(--primary);
}
.search-bar-container {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
/* SearchBar input styles - DISABLED to prevent conflicts with main form-inputs.css */
/*
.gallery-search-input {
width: 100%;
padding: var(--spacing-medium) var(--spacing-large);
padding-right: calc(var(--spacing-large) * 2.5);
font-size: 1rem;
border: var(--border-subtle);
border-radius: 4px;
background-color: var(--background-color);
color: var(--font-color);
transition: all 0.2s ease-in-out;
}
.gallery-search-input:hover {
border-color: var(--klee);
}
.gallery-search-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 1px var(--klee);
}
*/
.search-options-toggle {
position: absolute;
right: var(--spacing-small);
top: 50%;
transform: translateY(calc(-50% )) !important;
background: transparent;
border: none;
padding: var(--spacing-small);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--font-color);
opacity: 0.7;
transition: all 0.3s ease;
}
.search-options-toggle:hover {
color: var(--klee);
opacity: 1;
}
.search-options-toggle.active {
color: var(--primary);
opacity: 1;
}
.advanced-search-options {
position: absolute;
top: calc(100% + var(--spacing-small));
right: 0;
width: 300px;
background-color: var(--background-color);
border: 1px solid var(--border-subtle);
border-radius: 4px;
box-shadow: var(--shadow-md);
padding: var(--spacing-medium);
z-index: 10;
}
.search-options-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-medium);
padding-bottom: var(--spacing-small);
border-bottom: 1px solid var(--border-subtle);
}
.search-options-header h3 {
margin: 0;
font-size: 1rem;
color: var(--font-color-h3);
}
.close-button {
background: transparent;
border: none;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
color: var(--font-color);
opacity: 0.7;
transition: opacity 0.2s ease;
}
.close-button:hover {
opacity: 1;
}
.search-option-group {
margin-bottom: var(--spacing-medium);
}
.search-option-label {
display: block;
font-weight: 500;
margin-bottom: var(--spacing-xsmall);
color: var(--font-color);
}
.radio-button-group {
display: flex;
gap: var(--spacing-small);
flex-wrap: wrap;
}
.radio-label {
display: flex;
align-items: center;
padding: var(--spacing-xsmall) var(--spacing-small);
border: 1px solid var(--border-subtle);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.9rem;
}
.radio-label:hover {
background-color: var(--background-color-alt);
}
.radio-label.active {
background-color: var(--primary);
color: white;
border-color: var(--primary);
}
.radio-label input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.search-hint {
font-size: 0.9rem;
color: var(--font-color);
margin: var(--spacing-xsmall) 0 0;
line-height: 1.4;
}
@media (max-width: 768px) {
.advanced-search-options {
width: 100%;
left: 0;
right: 0;
}
.radio-button-group {
flex-direction: column;
gap: var(--spacing-xsmall);
}
}
/*
* Styles für die multi-content Galerie
* Verwendet die vordefinierten Variablen aus variables.css
*/
/*
The .gallery-category-filter class from gallery-layout.css
is now used for the content type button wrapper in ContentGallery.jsx.
The buttons inside are .category-button and also pick up styles from gallery-layout.css.
*/
/* The .content-type-badge style can remain if it's still used with the new button structure */
.content-type-badge {
position: absolute;
top: -8px;
right: -8px;
background-color: var(--klee);
color: var(--weiß);
font-size: 0.7rem;
padding: 2px 6px;
border-radius: 10px;
font-weight: bold;
}
/* Gallery Controls Layouts */
.gallery-search-controls {
margin-bottom: var(--spacing-medium);
}
/* All Content Container */
.all-content-container {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
grid-column: 1 / -1; /* Ensure it spans all columns of the parent grid */
}
.content-section {
margin-bottom: var(--spacing-large);
}
.content-section-title {
margin-bottom: var(--spacing-medium);
padding-bottom: var(--spacing-xsmall);
border-bottom: 1px solid var(--border-subtle);
}
.content-section-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--spacing-medium);
}
/* Generator Card Styles */
.gallery-item-card.generator-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 1rem;
background: var(--background-color);
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.2s ease, box-shadow 0.2s ease;
height: 100%; /* Ensure it takes full height of the grid cell if needed */
}
.gallery-item-card.generator-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.generator-card-title {
margin-top: 0;
margin-bottom: 0.5rem; /* Match antrag-card-title */
color: var(--font-color-h);
font-size: 1.1rem;
font-weight: 600; /* Match antrag-card-title */
}
.generator-card-description {
margin-bottom: var(--spacing-small);
font-size: 0.9rem;
color: var(--font-color);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4; /* Consistent line height */
}
.generator-card-date {
font-size: 0.8em;
color: #666; /* Match antrag-card-date */
margin-top: auto;
margin-bottom: 0;
padding-top: 0.75rem; /* Match antrag-card-date */
border-top: 1px solid var(--background-color-alt); /* Match antrag-card-date */
text-align: right; /* Match antrag-card-date */
}
/* Loading State Styles */
.skeleton {
background-color: var(--background-color-alt);
position: relative;
overflow: hidden;
}
.skeleton::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0) 100%);
animation: shimmer 1.5s infinite;
}
.skeleton-title,
.skeleton-description,
.skeleton-date {
height: 1rem;
margin-bottom: var(--spacing-small);
border-radius: 4px;
}
.skeleton-title {
height: 1.5rem;
width: 80%;
}
.skeleton-description {
height: 4rem;
width: 100%;
}
.skeleton-date {
height: 0.8rem;
width: 50%;
margin-top: auto;
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
/* Coming Soon Message */
.coming-soon-message {
grid-column: 1 / -1;
text-align: center;
padding: var(--spacing-large);
background-color: var(--background-color-alt);
border-radius: 4px;
color: var(--font-color);
font-size: 1.1rem;
}
/* PR Texts Placeholder */
.pr-texts-placeholder {
grid-column: 1 / -1;
text-align: center;
padding: var(--spacing-large);
background-color: var(--background-color-alt);
border-radius: 4px;
margin-bottom: var(--spacing-medium);
}
/* Responsive adjustments */
/* The .content-type-selector media query is removed as the class is no longer in use here. */
/* @media (max-width: 768px) {
.content-type-selector {
margin-top: var(--spacing-small);
}
} */
/* @import url('../../components/common/KnowledgeSelector/style.css'); */
/* Styles for react-select component */
/* Overall container */
.react-select__control {
background-color: var(--input-background) !important;
border: var(--input-border) !important;
border-radius: var(--card-border-radius-small) !important;
box-shadow: none !important;
min-height: var(--form-element-min-height) !important;
padding: 0 !important;
transition: var(--input-transition) !important;
font-size: var(--form-element-font-size) !important;
}
.react-select__control--is-focused {
border: var(--input-border) !important;
box-shadow: none !important;
}
.react-select__control--menu-is-open.react-select__control--is-focused {
border: var(--input-border) !important;
box-shadow: none !important;
}
/* Placeholder text */
.react-select__placeholder {
color: var(--font-color) !important;
opacity: 0.95 !important;
margin-left: 2px !important;
margin-right: 2px !important;
font-size: var(--form-element-font-size) !important;
}
/* Input field itself */
.react-select__input-container {
color: var(--input-text-color) !important;
margin: 0 !important;
padding: 0 !important;
}
.react-select__input {
color: var(--input-text-color) !important;
font-size: var(--form-element-font-size) !important;
}
/* Value container - holds selected value(s) and input */
.react-select__value-container {
padding: var(--form-element-padding-y) var(--form-element-padding-x) !important;
}
/* Single selected value */
.react-select__single-value {
color: var(--input-text-color) !important;
margin-left: 2px !important;
margin-right: 2px !important;
font-size: var(--form-element-font-size) !important;
}
/* Multi-value selected items (tags) */
.react-select__multi-value {
background-color: var(--background-color-alt) !important;
border-radius: var(--card-border-radius-small) !important;
border: 1px solid var(--border-color-disabled) !important;
color: var(--font-color) !important;
margin: 2px var(--spacing-xxsmall) 2px 0 !important;
}
.react-select__multi-value__label {
color: var(--font-color) !important;
font-size: 0.875rem !important;
padding: var(--spacing-xxsmall) var(--spacing-xsmall) !important;
}
.react-select__multi-value__remove {
color: var(--font-color-disabled) !important;
border-radius: 0 var(--card-border-radius-small) var(--card-border-radius-small) 0 !important;
padding-left: 3px !important;
padding-right: 3px !important;
}
.react-select__multi-value__remove:hover {
background-color: var(--hover-color-alt) !important;
color: var(--font-color) !important;
}
/* Dropdown menu */
.react-select__menu {
background-color: var(--card-background) !important;
border: var(--card-border) !important;
border-radius: var(--card-border-radius-medium) !important;
box-shadow: var(--card-shadow-elevated) !important;
margin-top: var(--spacing-xxsmall) !important;
z-index: 9999 !important; /* High z-index for portal rendering */
}
.react-select__menu-list {
padding: var(--spacing-xsmall) 0 !important;
max-height: 400px !important;
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}
.react-select__menu-list::-webkit-scrollbar {
width: 8px;
}
.react-select__menu-list::-webkit-scrollbar-track {
background: var(--scrollbar-track-color);
}
.react-select__menu-list::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color);
border-radius: 4px;
}
.react-select__menu-list::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover-color);
}
/* Individual options in the dropdown */
.react-select__option {
background-color: transparent !important;
color: var(--font-color) !important;
padding: var(--spacing-small) var(--spacing-medium) !important;
font-size: var(--form-element-font-size) !important;
cursor: pointer;
transition: background-color 0.1s ease;
}
.react-select__option--is-selected {
background-color: var(--secondary-100) !important;
color: var(--secondary-700) !important;
font-weight: bold;
}
.react-select__option--is-selected:hover {
background-color: var(--secondary-100) !important;
color: var(--secondary-700) !important;
}
.react-select__option--is-focused {
background-color: var(--hover-color-alt) !important;
color: var(--font-color) !important;
}
.react-select__option:active {
background-color: var(--secondary-200) !important;
}
/* No options message */
.react-select__menu-notice--no-options {
color: var(--font-color-disabled) !important;
padding: var(--spacing-small) var(--spacing-medium) !important;
text-align: center;
font-size: var(--form-element-font-size) !important;
}
/* Dropdown indicators (arrow) */
.react-select__indicator-separator {
background-color: var(--border-color-disabled) !important;
margin: var(--spacing-xsmall) 0 !important;
}
.react-select__dropdown-indicator {
color: var(--font-color-disabled) !important;
padding: var(--spacing-xsmall) !important;
}
.react-select__dropdown-indicator:hover {
color: var(--font-color) !important;
}
.react-select__clear-indicator {
color: var(--font-color-disabled) !important;
padding: var(--spacing-xsmall) !important;
}
.react-select__clear-indicator:hover {
color: var(--error-red) !important;
}
/* Loading indicator */
.react-select__loading-indicator span {
background-color: var(--font-color-disabled) !important;
}
/* Focus/error state handling */
.react-select__control--has-value .react-select__control,
.react-select__control--is-focused .react-select__control {
border: var(--input-border) !important;
}
/* Error state - when error prop is passed */
.react-select.error .react-select__control {
border: var(--input-border-error) !important;
}
.react-select.error .react-select__control:hover,
.react-select.error .react-select__control--is-focused {
border: var(--input-border-error) !important;
box-shadow: none !important;
}
/* Knowledge Selector Specific Styles */
/* Extends react-select.css with knowledge-specific styling */
.knowledge-selector {
margin-bottom: var(--spacing-medium);
}
/* Knowledge Select - Use classNamePrefix="knowledge-select" */
.knowledge-select__control {
min-height: var(--form-element-min-height) !important;
font-size: var(--form-element-font-size) !important;
background-color: var(--input-background) !important;
border: var(--input-border) !important;
border-radius: var(--card-border-radius-small) !important;
box-shadow: none !important;
transition: var(--input-transition) !important;
}
.knowledge-select__control--is-focused {
border-color: var(--secondary-500) !important;
box-shadow: inset 0 0 0 1px var(--secondary-500) !important;
}
.knowledge-select__control:hover {
border-color: var(--secondary-300) !important;
}
.knowledge-select__value-container {
padding: var(--form-element-padding-y) var(--form-element-padding-x) !important;
}
.knowledge-select__placeholder {
color: var(--input-placeholder-color) !important;
}
.knowledge-select__input {
color: var(--input-text-color) !important;
}
.knowledge-select__menu {
background-color: var(--card-background) !important;
border: var(--card-border) !important;
border-radius: var(--card-border-radius-medium) !important;
box-shadow: var(--card-shadow-elevated) !important;
z-index: 1000 !important;
}
.knowledge-select__option {
background-color: transparent !important;
color: var(--font-color) !important;
padding: var(--spacing-small) var(--spacing-medium) !important;
cursor: pointer !important;
font-size: var(--form-element-font-size) !important;
}
.knowledge-select__option--is-selected {
background-color: var(--secondary-100) !important;
color: var(--secondary-700) !important;
}
.knowledge-select__option--is-focused {
background-color: var(--hover-color-alt) !important;
color: var(--font-color) !important;
}
.knowledge-select__option:active {
background-color: var(--secondary-200) !important;
}
.knowledge-select__multi-value {
background-color: var(--secondary-50) !important;
border-radius: var(--card-border-radius-small) !important;
border: 1px solid var(--secondary-200) !important;
}
.knowledge-select__multi-value__label {
color: var(--secondary-700) !important;
font-size: 0.875rem !important;
padding: var(--spacing-xxsmall) var(--spacing-xsmall) !important;
}
.knowledge-select__multi-value__remove {
color: var(--secondary-600) !important;
}
.knowledge-select__multi-value__remove:hover {
background-color: var(--secondary-200) !important;
color: var(--secondary-800) !important;
}
/* Knowledge option icons container */
.knowledge-option {
display: flex;
align-items: center;
gap: 8px;
}
.knowledge-option__icon {
flex-shrink: 0;
width: 16px;
height: 16px;
}
.knowledge-option__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.knowledge-option__label {
font-weight: 500;
line-height: 1.3;
}
.knowledge-option__subtitle {
font-size: 0.75rem;
color: var(--font-color-disabled);
line-height: 1.2;
}
/* Knowledge selector wrapper styles */
.knowledge-selector__wrapper {
margin-bottom: var(--spacing-medium);
}
.knowledge-selector__source {
margin-bottom: var(--spacing-medium);
}
.knowledge-selector__no-options {
color: var(--font-color-disabled);
font-size: 0.875rem;
margin: var(--spacing-small) 0;
}
.knowledge-selector__loading {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-small);
padding: var(--spacing-medium);
color: var(--font-color-disabled);
font-size: 0.875rem;
background-color: var(--input-background);
border: var(--input-border);
border-radius: var(--card-border-radius-small);
}
.knowledge-selector__loading::before {
content: '';
width: 16px;
height: 16px;
border: 2px solid var(--secondary-200);
border-top: 2px solid var(--secondary-500);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Document Content Extraction Status */
.knowledge-selector__extraction-status {
margin-top: var(--spacing-small);
padding: var(--spacing-small);
border-radius: var(--card-border-radius-small);
display: flex;
align-items: center;
gap: var(--spacing-small);
font-size: 0.875rem;
border: 1px solid var(--secondary-200);
background-color: var(--input-background);
}
.extraction-status--vector_search {
border-color: var(--secondary-300);
background-color: var(--secondary-50);
color: var(--secondary-700);
}
.extraction-status--success {
border-color: #10b981;
background-color: #ecfdf5;
color: #065f46;
}
.extraction-status--fallback {
border-color: #f59e0b;
background-color: #fefbf2;
color: #92400e;
}
.extraction-status--error {
border-color: #ef4444;
background-color: #fef2f2;
color: #991b1b;
}
.extraction-status__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
.extraction-status__spinner {
width: 16px;
height: 16px;
border: 2px solid var(--secondary-200);
border-top: 2px solid var(--secondary-500);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.extraction-status__message {
flex: 1;
font-weight: 500;
}
.extraction-status__details {
font-size: 0.75rem;
opacity: 0.8;
font-style: italic;
}
/* Source Tag System */
.source-tag {
display: inline-flex;
align-items: center;
gap: var(--spacing-xxsmall);
padding: var(--spacing-xxsmall) var(--spacing-xsmall);
border-radius: var(--card-border-radius-small);
font-size: 0.75rem;
font-weight: 500;
line-height: 1.2;
margin-left: var(--spacing-xsmall);
border: 1px solid var(--grey-300);
background-color: transparent;
color: var(--font-color);
}
.source-tag__icon {
flex-shrink: 0;
width: 12px;
height: 12px;
}
.source-tag--user {
background-color: transparent;
border-color: var(--secondary-200);
color: var(--font-color);
}
.source-tag--group {
background-color: transparent;
border-color: var(--primary-200);
color: var(--font-color);
}
/* Enhanced Knowledge Selector */
.enhanced-knowledge-selector {
margin-bottom: var(--spacing-medium);
}
.enhanced-knowledge-selector__loading {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-small);
padding: var(--spacing-small);
color: var(--font-color-disabled);
font-size: 0.875rem;
background-color: var(--input-background);
border: var(--input-border);
border-radius: var(--card-border-radius-small);
margin-top: var(--spacing-small);
}
.enhanced-knowledge-selector__errors {
padding: var(--spacing-small);
background-color: #fef2f2;
border: 1px solid #fecaca;
border-radius: var(--card-border-radius-small);
color: #991b1b;
font-size: 0.875rem;
margin-top: var(--spacing-small);
}
.enhanced-knowledge-selector__no-options {
color: var(--font-color-disabled);
font-size: 0.875rem;
margin: var(--spacing-small) 0;
text-align: center;
padding: var(--spacing-medium);
background-color: var(--input-background);
border: var(--input-border);
border-radius: var(--card-border-radius-small);
}
/* Enhanced Knowledge Select - Use classNamePrefix="enhanced-knowledge-select" */
.enhanced-knowledge-select__control {
min-height: var(--form-element-min-height) !important;
font-size: var(--form-element-font-size) !important;
background-color: var(--input-background) !important;
border: var(--input-border) !important;
border-radius: var(--card-border-radius-small) !important;
box-shadow: none !important;
transition: var(--input-transition) !important;
}
.enhanced-knowledge-select__control--is-focused {
border-color: var(--secondary-500) !important;
box-shadow: inset 0 0 0 1px var(--secondary-500) !important;
}
.enhanced-knowledge-select__control:hover {
border-color: var(--secondary-300) !important;
}
.enhanced-knowledge-select__value-container {
padding: var(--form-element-padding-y) var(--form-element-padding-x) !important;
}
.enhanced-knowledge-select__placeholder {
color: var(--font-color) !important;
opacity: 0.95 !important;
}
.enhanced-knowledge-select__input {
color: var(--input-text-color) !important;
}
.enhanced-knowledge-select__menu {
background-color: var(--card-background) !important;
border: var(--card-border) !important;
border-radius: var(--card-border-radius-medium) !important;
box-shadow: var(--card-shadow-elevated) !important;
z-index: 2000 !important; /* Higher than default for React Portal */
max-height: 400px !important; /* Increased from default ~300px to show more options */
min-width: 320px !important; /* Minimum width for readability */
max-width: 450px !important; /* Maximum width to prevent excessive expansion */
width: 400px !important; /* Fixed width for consistency */
transform: translateX(-20%) !important; /* Adjusted centering for new width */
}
.enhanced-knowledge-select__menu-list {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}
.enhanced-knowledge-select__menu-list::-webkit-scrollbar {
width: 8px;
}
.enhanced-knowledge-select__menu-list::-webkit-scrollbar-track {
background: var(--scrollbar-track-color);
}
.enhanced-knowledge-select__menu-list::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color);
border-radius: 4px;
}
.enhanced-knowledge-select__menu-list::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover-color);
}
.enhanced-knowledge-select__option {
background-color: transparent !important;
color: var(--font-color) !important;
padding: var(--spacing-xsmall) var(--spacing-small) !important;
cursor: pointer !important;
font-size: var(--form-element-font-size) !important;
}
.enhanced-knowledge-select__option--is-selected {
background-color: var(--secondary-100) !important;
color: var(--secondary-700) !important;
}
.enhanced-knowledge-select__option--is-focused {
background-color: var(--hover-color-alt) !important;
color: var(--font-color) !important;
}
.enhanced-knowledge-select__option:active {
background-color: var(--secondary-200) !important;
}
.enhanced-knowledge-select__multi-value {
background-color: var(--secondary-50) !important;
border-radius: var(--card-border-radius-small) !important;
border: 1px solid var(--secondary-200) !important;
}
.enhanced-knowledge-select__multi-value__label {
color: var(--secondary-700) !important;
font-size: 0.875rem !important;
padding: var(--spacing-xxsmall) var(--spacing-xsmall) !important;
}
.enhanced-knowledge-select__multi-value__remove {
color: var(--secondary-600) !important;
}
.enhanced-knowledge-select__multi-value__remove:hover {
background-color: var(--secondary-200) !important;
color: var(--secondary-800) !important;
}
/* Knowledge Selector Wrapper */
.knowledge-selector-wrapper {
margin-bottom: var(--spacing-medium);
}
/* Profile Selector */
.profile-selector {
margin-bottom: var(--spacing-medium);
}
/* Enhanced Knowledge Option Layout */
.knowledge-option-enhanced {
display: flex;
align-items: center;
gap: var(--spacing-small);
padding: var(--spacing-xxsmall) 0;
}
.knowledge-option-enhanced .knowledge-option__icon {
flex-shrink: 0;
width: 16px;
height: 16px;
}
.knowledge-option-enhanced .knowledge-option__content {
flex: 1;
min-width: 0; /* Allow flex items to shrink below content size */
max-width: 280px; /* Constrain content width to allow space for source tag */
}
.knowledge-option-enhanced .knowledge-option__label {
font-weight: 500;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%; /* Ensure ellipsis works within content container */
display: block;
}
.knowledge-option-enhanced .source-tag {
margin-left: var(--spacing-small);
align-self: center;
flex-shrink: 0;
max-width: 100px; /* Limit source tag width */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Selected Option Display */
.knowledge-selected-option {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
}
.knowledge-selected-source {
font-size: 0.75rem;
color: var(--font-color-disabled);
font-weight: normal;
}
/* Enhanced Extraction Status */
.enhanced-knowledge-selector__extraction-status {
margin-top: var(--spacing-small);
padding: var(--spacing-small);
border-radius: var(--card-border-radius-small);
display: flex;
align-items: center;
gap: var(--spacing-small);
font-size: 0.875rem;
border: 1px solid var(--secondary-200);
background-color: var(--input-background);
}
.enhanced-knowledge-selector__extraction-status.extraction-status--vector_search {
border-color: var(--secondary-300);
background-color: var(--secondary-50);
color: var(--secondary-700);
}
.enhanced-knowledge-selector__extraction-status.extraction-status--success {
border-color: #10b981;
background-color: #ecfdf5;
color: #065f46;
}
.enhanced-knowledge-selector__extraction-status.extraction-status--fallback {
border-color: #f59e0b;
background-color: #fefbf2;
color: #92400e;
}
.enhanced-knowledge-selector__extraction-status.extraction-status--error {
border-color: #ef4444;
background-color: #fef2f2;
color: #991b1b;
}
/* React Portal Menu Positioning */
.enhanced-knowledge-select__menu-portal {
z-index: 2000;
}
/* Dark theme support for new elements */
[data-theme="dark"] .source-tag {
background-color: transparent;
border-color: var(--grey-600);
color: var(--font-color);
}
[data-theme="dark"] .source-tag--user {
background-color: transparent;
border-color: var(--secondary-600);
color: var(--font-color);
}
[data-theme="dark"] .source-tag--group {
background-color: transparent;
border-color: var(--primary-600);
color: var(--font-color);
}
[data-theme="dark"] .enhanced-knowledge-selector__errors {
background-color: #7f1d1d;
border-color: #991b1b;
color: #fca5a5;
}
/* prefers-color-scheme: dark support */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .source-tag {
background-color: transparent;
border-color: var(--grey-600);
color: var(--font-color);
}
:root:not([data-theme="light"]) .source-tag--user {
background-color: transparent;
border-color: var(--secondary-600);
color: var(--font-color);
}
:root:not([data-theme="light"]) .source-tag--group {
background-color: transparent;
border-color: var(--primary-600);
color: var(--font-color);
}
:root:not([data-theme="light"]) .enhanced-knowledge-selector__errors {
background-color: #7f1d1d;
border-color: #991b1b;
color: #fca5a5;
}
}
/* Styling for the ErrorBoundary component */
.error-boundary {
padding: var(--spacing-large);
border: 1px solid var(--border-subtle);
border-radius: var(--spacing-xsmall);
background-color: var(--background-color-alt);
margin: var(--spacing-large) auto;
max-width: 800px;
text-align: center;
font-family: 'PT Sans', Arial, sans-serif;
color: var(--font-color);
}
.error-boundary h1 {
color: var(--font-color-h);
font-family: 'GrueneType', Arial, sans-serif;
font-size: 2em; /* Example size, adjust as needed */
margin-bottom: var(--spacing-medium);
}
.error-boundary p {
margin-bottom: var(--spacing-medium);
line-height: 1.6;
}
.error-boundary .error-id {
font-size: 0.9em;
color: var(--font-color); /* Or a more subtle color if needed */
margin-bottom: var(--spacing-medium);
padding: var(--spacing-xsmall);
background-color: var(--background-color);
border: 1px dashed var(--border-subtle);
display: inline-block;
}
.error-boundary details {
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-large);
text-align: left;
background-color: var(--background-color);
padding: var(--spacing-medium);
border-radius: var(--spacing-xsmall);
}
.error-boundary summary {
cursor: pointer;
font-weight: bold;
margin-bottom: var(--spacing-small);
color: var(--link-color);
}
.error-boundary pre {
white-space: pre-wrap;
word-wrap: break-word;
background-color: var(--background-color-alt);
padding: var(--spacing-medium);
border-radius: var(--spacing-xsmall);
border: 1px solid var(--border-subtle);
max-height: 200px;
overflow-y: auto;
font-size: 0.85em;
color: var(--font-color);
}
.error-boundary .error-actions {
margin-top: var(--spacing-large);
display: flex;
gap: var(--spacing-medium);
justify-content: center;
flex-wrap: wrap;
}
.error-boundary .error-actions button,
.error-boundary .error-actions .button {
background-color: var(--button-background-color);
color: var(--button-text-color);
padding: var(--spacing-small) var(--spacing-medium);
border: none;
border-radius: var(--spacing-xsmall);
cursor: pointer;
text-decoration: none;
font-size: 1em;
transition: all 0.2s ease;
}
.error-boundary .error-actions button:hover,
.error-boundary .error-actions .button:hover {
background-color: var(--button-hover-color);
}
.error-boundary .copy-button {
background-color: #6c757d;
color: white;
}
.error-boundary .copy-button:hover {
background-color: #5a6268;
}
.error-boundary .copy-button.copied {
background-color: #28a745;
color: white;
}
.error-boundary .copy-button.copied:hover {
background-color: #218838;
}
/* Minimal styling for links when they are not styled as buttons */
.error-boundary a:not(.button) {
color: var(--link-color);
text-decoration: underline;
}
.typing-indicator {
display: flex;
align-items: center;
padding-top: 10px; /* Ensure vertical alignment with icon */
padding-bottom: 10px; /* Ensure vertical alignment with icon */
}
/* The .assistant-icon is styled globally in EditorChat.css for .chat-message.assistant */
/* We can add specific adjustments if needed, but it should inherit positioning */
.typing-dot {
width: 8px;
height: 8px;
background-color: var(--font-color); /* Use theme variable */
border-radius: 50%;
display: inline-block;
margin: 0 2px; /* Adjust spacing between dots */
}
/* Citation Components */
.ask-citations-container {
margin-bottom: var(--spacing-xlarge);
}
.ask-citations-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-medium);
}
.ask-citations-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--font-color-h);
margin: 0;
}
.ask-citations-list {
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
}
.ask-citation-item {
background-color: var(--card-background);
padding: var(--spacing-medium);
border-radius: var(--card-border-radius-small);
border: 2px solid var(--interactive-accent-color);
position: relative;
transition: var(--input-transition);
}
.ask-citation-item:hover {
box-shadow: var(--card-shadow-elevated);
transform: var(--card-hover-transform);
border-color: var(--link-color);
}
.ask-citation-header {
display: flex;
align-items: center;
gap: var(--spacing-small);
margin-bottom: var(--spacing-small);
}
.ask-citation-document {
font-weight: 600;
color: var(--font-color-h);
flex: 1;
font-size: 0.95rem;
}
.ask-citation-score {
font-size: 0.85rem;
color: var(--font-color);
background-color: var(--background-color-alt);
padding: 2px 8px;
border-radius: 12px;
}
.ask-citation-link {
margin-top: var(--spacing-small);
background: none;
border: 1px solid var(--interactive-accent-color);
color: var(--interactive-accent-color);
padding: var(--spacing-xsmall) var(--spacing-small);
border-radius: var(--card-border-radius-small);
font-size: 0.85rem;
cursor: pointer;
transition: var(--input-transition);
font-weight: 500;
}
.ask-citation-link:hover {
background-color: var(--interactive-accent-color);
color: var(--button-text-color);
transform: scale(1.01);
}
/* Enhanced source items with citations */
.ask-source-item.has-citations {
border: 1px solid var(--interactive-accent-color);
background-color: var(--card-background-alt);
}
.ask-source-citation-count {
display: inline-block;
margin-left: var(--spacing-small);
background-color: var(--interactive-accent-color);
color: var(--button-text-color);
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
}
.ask-source-citations {
margin-top: var(--spacing-small);
font-size: 0.85rem;
color: var(--interactive-accent-color);
font-weight: 600;
}
/* Citation Badge Components */
.citation-badge-container {
position: relative;
display: inline-block;
}
.citation-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background-color: var(--interactive-accent-color);
color: var(--background-color);
font-size: 0.75rem;
font-weight: 600;
border-radius: 50%;
cursor: pointer;
transition: var(--input-transition);
margin: 0 2px;
position: relative;
top: -2px;
user-select: none;
}
.citation-badge:hover {
background-color: var(--link-color);
transform: scale(1.05);
}
/* Citation Popup */
.citation-popup {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-small);
box-shadow: var(--card-shadow-elevated);
padding: var(--spacing-small);
min-width: 200px;
max-width: 300px;
z-index: 100;
margin-bottom: 8px;
animation: popupFadeIn 0.2s ease-out;
font-size: 0.85rem;
}
.citation-popup::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--card-background);
}
@keyframes popupFadeIn {
from {
opacity: 0;
transform: translateX(-50%) translateY(5px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.citation-popup-text {
color: var(--font-color);
line-height: 1.4;
margin-bottom: var(--spacing-xsmall);
font-style: italic;
}
.citation-popup-source {
color: var(--font-color-h);
font-weight: 600;
font-size: 0.8rem;
border-top: 1px solid var(--card-border-color);
padding-top: var(--spacing-xsmall);
}
/* Citation Modal */
.citation-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1100;
padding: var(--spacing-medium);
}
.citation-modal {
background-color: var(--card-background);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--card-shadow-elevated);
border: var(--card-border);
max-width: 600px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
animation: modalSlideIn 0.2s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.citation-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-large);
border-bottom: 1px solid var(--card-border-color);
}
.citation-modal-header h4 {
margin: 0;
color: var(--font-color-h);
font-size: 1.2rem;
font-weight: 600;
}
.citation-modal-close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--font-color);
cursor: pointer;
padding: var(--spacing-xsmall);
border-radius: var(--card-border-radius-small);
transition: var(--input-transition);
line-height: 1;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.citation-modal-close:hover {
background-color: var(--background-color-alt);
color: var(--interactive-accent-color);
}
.citation-modal-content {
padding: var(--spacing-large);
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
}
.citation-text {
color: var(--font-color);
font-style: italic;
line-height: 1.6;
padding: var(--spacing-medium);
background-color: var(--background-color-alt);
border-radius: var(--card-border-radius-small);
font-size: 1rem;
}
.citation-source,
.citation-relevance {
color: var(--font-color);
font-size: 0.95rem;
}
.citation-actions {
margin-top: var(--spacing-small);
}
.citation-view-document {
background-color: var(--interactive-accent-color);
color: var(--button-text-color);
border: none;
padding: var(--spacing-small) var(--spacing-medium);
border-radius: var(--card-border-radius-small);
font-size: 0.9rem;
cursor: pointer;
transition: var(--input-transition);
font-weight: 500;
}
.citation-view-document:hover {
background-color: var(--link-color);
transform: scale(1.01);
}
/* Mobile responsiveness for modal */
@media (max-width: 768px) {
.citation-modal-overlay {
padding: var(--spacing-small);
}
.citation-modal {
max-height: 90vh;
}
.citation-modal-header,
.citation-modal-content {
padding: var(--spacing-medium);
}
.citation-text {
padding: var(--spacing-small);
font-size: 0.95rem;
}
}
/* Document Groups Layout - Minimalistic */
.ask-document-groups {
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
}
.ask-document-group {
padding: var(--spacing-medium);
border: var(--border-subtle);
border-radius: var(--card-border-radius-small);
}
.ask-document-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-small);
}
.ask-document-title {
font-weight: 600;
color: var(--font-color-h);
margin: 0;
flex: 1;
}
.ask-document-title.clickable-link {
cursor: pointer;
color: var(--interactive-accent-color);
text-decoration: underline;
transition: var(--input-transition);
}
.ask-document-title.clickable-link:hover {
color: var(--interactive-accent-color);
text-decoration-thickness: 2px;
}
.ask-document-relevance {
font-size: 0.85rem;
color: var(--font-color-disabled);
}
.ask-document-citations {
display: flex;
flex-direction: column;
gap: var(--spacing-xsmall);
}
.ask-citation-inline {
display: flex;
gap: var(--spacing-small);
padding: var(--spacing-small);
margin-left: var(--spacing-xsmall);
}
.citation-number {
font-weight: 600;
color: var(--interactive-accent-color);
font-size: 0.9rem;
min-width: 24px;
flex-shrink: 0;
}
.ask-document-context summary {
cursor: pointer;
color: var(--font-color-disabled);
font-size: 0.9rem;
margin: var(--spacing-small) 0 var(--spacing-xsmall);
}
.ask-document-context summary:hover {
color: var(--link-color);
}
.ask-document-excerpt {
color: var(--font-color);
line-height: 1.4;
font-size: 0.9rem;
margin-left: var(--spacing-medium);
}
.ask-document-link {
margin-top: var(--spacing-small);
color: var(--link-color);
text-decoration: none;
font-size: 0.9rem;
border: none;
background: none;
cursor: pointer;
padding: 0;
}
.ask-document-link:hover {
text-decoration: underline;
}
/* Cross-reference indicator */
.ask-cross-reference-info {
background-color: var(--background-color-alt);
padding: var(--spacing-small) var(--spacing-medium);
border-radius: var(--card-border-radius-small);
margin-top: var(--spacing-medium);
display: flex;
align-items: center;
gap: var(--spacing-small);
font-size: 0.9rem;
color: var(--font-color);
border: 1px solid var(--card-border-color);
}
.info-icon {
font-size: 1.2rem;
color: var(--interactive-accent-color);
}
/* Share Modal Styles */
.share-modal {
max-width: 500px;
}
.share-modal-title {
display: flex;
align-items: center;
gap: var(--spacing-small);
}
.share-modal-icon {
font-size: 1.2rem;
color: var(--interactive-accent-color);
}
.share-modal-content {
gap: var(--spacing-large);
}
.share-content-info {
background-color: var(--background-color-alt);
padding: var(--spacing-medium);
border-radius: var(--card-border-radius-small);
border-left: 4px solid var(--interactive-accent-color);
}
.share-content-label {
font-size: 0.85rem;
color: var(--font-color-disabled);
margin-bottom: var(--spacing-xsmall);
font-weight: 500;
}
.share-content-title {
font-weight: 600;
color: var(--font-color-h);
font-size: 1rem;
}
.share-form-section {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.share-form-label {
display: flex;
align-items: center;
gap: var(--spacing-small);
font-weight: 600;
color: var(--font-color-h);
font-size: 0.95rem;
}
.share-form-icon {
font-size: 1rem;
color: var(--interactive-accent-color);
}
.share-group-select {
padding: var(--spacing-small) var(--spacing-medium);
border: var(--input-border);
border-radius: var(--card-border-radius-small);
background-color: var(--card-background);
color: var(--font-color);
font-size: 0.95rem;
transition: var(--input-transition);
}
.share-group-select:focus {
outline: none;
border-color: var(--interactive-accent-color);
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-color-rgb), 0.1);
}
.share-group-select:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.share-loading {
display: flex;
align-items: center;
gap: var(--spacing-small);
color: var(--font-color-disabled);
font-size: 0.9rem;
padding: var(--spacing-medium);
}
.share-error {
color: var(--error-color);
font-size: 0.9rem;
padding: var(--spacing-medium);
background-color: var(--error-background);
border-radius: var(--card-border-radius-small);
border: 1px solid var(--error-color);
}
.share-no-groups {
color: var(--font-color);
font-size: 0.9rem;
padding: var(--spacing-medium);
background-color: var(--background-color-alt);
border-radius: var(--card-border-radius-small);
border: 1px solid var(--card-border-color);
text-align: center;
line-height: 1.5;
}
.share-permissions {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
background-color: var(--background-color-alt);
padding: var(--spacing-medium);
border-radius: var(--card-border-radius-small);
border: 1px solid var(--card-border-color);
}
.share-permission-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-small);
}
.share-permission-label {
display: flex;
align-items: flex-start;
gap: var(--spacing-small);
cursor: pointer;
font-size: 0.9rem;
line-height: 1.4;
}
.share-permission-label input[type="checkbox"] {
margin-top: 2px;
accent-color: var(--interactive-accent-color);
}
.share-permission-text {
color: var(--font-color);
}
.share-permission-text strong {
color: var(--font-color-h);
}
.share-modal-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-medium);
padding-top: var(--spacing-medium);
border-top: 1px solid var(--card-border-color);
}
.share-cancel-button {
background: none;
border: 1px solid var(--card-border-color);
color: var(--font-color);
padding: var(--spacing-small) var(--spacing-medium);
border-radius: var(--card-border-radius-small);
font-size: 0.9rem;
cursor: pointer;
transition: var(--input-transition);
font-weight: 500;
}
.share-cancel-button:hover:not(:disabled) {
background-color: var(--background-color-alt);
border-color: var(--interactive-accent-color);
}
.share-cancel-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.share-submit-button {
background-color: var(--interactive-accent-color);
color: var(--background-color);
border: none;
padding: var(--spacing-small) var(--spacing-medium);
border-radius: var(--card-border-radius-small);
font-size: 0.9rem;
cursor: pointer;
transition: var(--input-transition);
font-weight: 600;
display: flex;
align-items: center;
gap: var(--spacing-small);
min-width: 100px;
justify-content: center;
}
.share-submit-button:hover:not(:disabled) {
background-color: var(--link-color);
transform: scale(1.01);
}
.share-submit-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Mobile responsiveness for share modal */
@media (max-width: 768px) {
.share-modal {
max-width: 100%;
}
.share-modal-actions {
flex-direction: column;
gap: var(--spacing-small);
}
.share-cancel-button,
.share-submit-button {
width: 100%;
justify-content: center;
}
}
/* Add Template Modal Styles */
.add-template-modal {
max-width: 500px;
}
.add-template-modal-content {
gap: var(--spacing-large);
}
.add-template-form-section {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.add-template-form-label {
display: flex;
align-items: center;
gap: var(--spacing-small);
font-weight: 600;
color: var(--font-color-h);
font-size: 0.95rem;
}
.add-template-form-icon {
font-size: 1rem;
color: var(--interactive-accent-color);
}
.add-template-url-input-container {
position: relative;
display: flex;
align-items: center;
}
.add-template-url-input {
width: 100%;
padding: var(--spacing-medium);
border: var(--input-border);
border-radius: var(--card-border-radius-small);
background-color: var(--card-background);
color: var(--font-color);
font-size: 0.95rem;
transition: var(--input-transition);
font-family: inherit;
}
.add-template-url-input:focus {
outline: none;
border-color: var(--interactive-accent-color);
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-color-rgb), 0.1);
}
.add-template-url-input:disabled {
opacity: 0.6;
cursor: not-allowed;
background-color: var(--background-color-alt);
}
.add-template-url-input.error {
border-color: var(--error-color);
box-shadow: 0 0 0 2px rgba(var(--error-color-rgb), 0.1);
}
.add-template-input-spinner {
position: absolute;
right: var(--spacing-medium);
display: flex;
align-items: center;
}
.add-template-error {
display: flex;
align-items: center;
gap: var(--spacing-small);
color: var(--error-color);
font-size: 0.85rem;
padding: var(--spacing-small);
background-color: var(--error-background);
border-radius: var(--card-border-radius-small);
border: 1px solid var(--error-color);
}
.add-template-error-icon {
font-size: 1rem;
flex-shrink: 0;
}
.add-template-help {
background-color: var(--background-color-alt);
padding: var(--spacing-medium);
border-radius: var(--card-border-radius-small);
border: 1px solid var(--card-border-color);
color: var(--font-color);
font-size: 0.9rem;
line-height: 1.5;
}
.add-template-help p {
margin: 0 0 var(--spacing-small) 0;
}
.add-template-help p:last-child {
margin-bottom: 0;
}
.add-template-help-note {
font-family: 'Courier New', Consolas, monospace;
background-color: var(--card-background);
padding: var(--spacing-xsmall) var(--spacing-small);
border-radius: var(--card-border-radius-xsmall);
border: 1px solid var(--card-border-color);
font-size: 0.85rem;
color: var(--font-color-disabled);
}
.add-template-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-medium);
padding-top: var(--spacing-medium);
border-top: 1px solid var(--card-border-color);
}
.add-template-actions .btn-secondary {
font-size: 0.9rem;
padding: var(--spacing-small) var(--spacing-medium);
}
.add-template-actions .btn-primary {
font-size: 0.9rem;
padding: var(--spacing-small) var(--spacing-medium);
display: flex;
align-items: center;
gap: var(--spacing-small);
min-width: 140px;
justify-content: center;
}
.add-template-actions .btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Mobile responsiveness for add template modal */
@media (max-width: 768px) {
.add-template-modal {
max-width: 100%;
}
.add-template-actions {
flex-direction: column;
gap: var(--spacing-small);
}
.add-template-actions .btn-secondary,
.add-template-actions .btn-primary {
width: 100%;
justify-content: center;
}
.add-template-help-note {
font-size: 0.8rem;
word-break: break-all;
}
}
/* Canva Overview - Brand-compliant styling following Canva guidelines */
.canva-overview {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
padding: 0;
max-width: 100%;
}
/* ============================================================================
CONNECTION STATUS SECTION - Following Canva brand guidelines
============================================================================ */
/* Connection badge button - maintains badge appearance with button functionality */
.canva-connection-badge-button {
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
cursor: pointer;
outline: inherit;
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
transition: color 0.2s ease;
}
.canva-connection-badge-button:hover {
transition: color 0.2s ease;
}
.canva-connection-badge-button:focus {
outline: 2px solid var(--focus-color, var(--himmel));
outline-offset: 2px;
border-radius: 4px;
}
.canva-connection-section {
background: var(--background-color);
border: var(--border-subtle);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--shadow-sm);
padding: var(--spacing-large);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--spacing-medium);
transition: var(--input-transition);
}
.canva-connection-section:hover {
box-shadow: var(--shadow-md);
}
/* Canva Logo Container - Maintains 8px minimum padding */
.canva-logo-container {
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-xsmall); /* 8px minimum as per guidelines */
min-height: 60px;
}
.canva-logo-large {
height: 60px;
width: auto;
min-height: 50px;
object-fit: contain;
/* Never alter colors or aspect ratio */
filter: none !important;
transform: none !important;
}
.canva-logo-medium {
height: 40px;
width: auto;
min-height: 35px;
object-fit: contain;
filter: none !important;
transform: none !important;
}
.canva-logo-small {
width: 24px;
height: 24px;
min-width: 20px;
min-height: 20px;
object-fit: contain;
filter: none !important;
transform: none !important;
}
/* Powered by Canva message - Brand requirement */
.powered-by-canva {
font-size: 0.875rem;
color: var(--grey-600);
font-weight: 500;
margin-top: var(--spacing-xsmall);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Connection Status Badge */
.canva-connection-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-xsmall);
padding: var(--spacing-xsmall) var(--spacing-small);
border-radius: var(--card-border-radius-small);
font-size: 0.875rem;
font-weight: 500;
max-width: fit-content;
transition: var(--input-transition);
}
.canva-connection-badge.connected {
background-color: var(--success-color, #10b981);
color: var(--white) !important;
}
.canva-connection-badge.disconnected {
background-color: var(--error-red);
color: var(--white) !important;
}
.canva-connection-badge.loading {
background-color: var(--grey-200);
color: var(--grey-700) !important;
}
/* Connection Status Content */
.connection-status-content {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
align-items: center;
}
.connection-status-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--font-color-h);
margin: 0;
}
.connection-status-description {
color: var(--grey-600);
font-size: 0.9375rem;
line-height: 1.5;
max-width: 400px;
}
.connection-user-info {
display: flex;
align-items: center;
gap: var(--spacing-small);
margin-top: var(--spacing-small);
padding: var(--spacing-small);
background: var(--background-color-alt);
border-radius: var(--card-border-radius-small);
border: var(--border-subtle);
}
.connection-user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--background-color);
}
.connection-user-details {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.connection-user-name {
font-weight: 600;
color: var(--font-color);
font-size: 0.875rem;
margin: 0;
}
.connection-user-email {
color: var(--grey-600);
font-size: 0.8125rem;
margin: 0;
}
/* ============================================================================
QUICK ACTIONS GRID
============================================================================ */
.canva-quick-actions {
background: var(--background-color);
border: var(--border-subtle);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--shadow-sm);
padding: var(--spacing-large);
}
.canva-quick-actions-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--font-color-h);
margin: 0 0 var(--spacing-medium) 0 !important;
margin-bottom: var(--spacing-medium) !important;
}
.canva-actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--spacing-medium);
margin-top: var(--spacing-medium);
}
.canva-action-card {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--spacing-medium);
background: var(--background-color);
border: var(--border-subtle);
border-radius: var(--card-border-radius-small);
transition: var(--input-transition);
cursor: pointer;
text-decoration: none;
color: inherit;
}
.canva-action-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
border-color: var(--secondary-600);
}
.canva-action-card:active {
transform: translateY(0);
}
.canva-action-card.disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.canva-action-header {
display: flex;
align-items: center;
gap: var(--spacing-small);
width: 100%;
margin-bottom: var(--spacing-xsmall);
}
.canva-action-icon {
width: 20px;
height: 20px;
color: var(--secondary-600);
flex-shrink: 0;
}
.canva-action-title {
font-weight: 600;
color: var(--font-color-h);
font-size: 0.9375rem;
margin: 0;
}
.canva-action-description {
color: var(--grey-600);
font-size: 0.875rem;
line-height: 1.4;
margin: 0;
}
/* ============================================================================
STATISTICS CARDS
============================================================================ */
.canva-stats-section {
background: var(--background-color);
border: var(--border-subtle);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--shadow-sm);
padding: var(--spacing-large);
}
.canva-stats-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--font-color-h);
margin: 0 0 var(--spacing-medium) 0 !important;
}
.canva-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--spacing-medium);
}
.canva-stat-card {
display: flex;
align-items: center;
gap: var(--spacing-small);
padding: var(--spacing-medium);
background: var(--background-color-alt);
border: var(--border-subtle);
border-radius: var(--card-border-radius-small);
transition: var(--input-transition);
}
.canva-stat-card:hover {
box-shadow: var(--shadow-sm);
}
.canva-stat-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
color: var(--secondary-600);
}
.canva-stat-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.canva-stat-value {
font-weight: 700;
font-size: 1.25rem;
color: var(--font-color-h);
line-height: 1.2;
margin: 0;
}
.canva-stat-label {
font-size: 0.8125rem;
color: var(--grey-600);
font-weight: 500;
margin: 0;
}
.canva-stat-description {
font-size: 0.75rem;
color: var(--grey-500);
margin: 0;
line-height: 1.3;
}
/* ============================================================================
RECENT DESIGNS SECTION
============================================================================ */
.canva-recent-designs {
background: var(--background-color);
border: var(--border-subtle);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--shadow-sm);
padding: var(--spacing-large);
}
.canva-recent-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--font-color-h);
margin: 0 0 var(--spacing-medium) 0 !important;
}
.canva-recent-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--spacing-medium);
}
.canva-recent-design {
display: flex;
flex-direction: column;
background: var(--background-color);
border: var(--border-subtle);
border-radius: var(--card-border-radius-small);
overflow: hidden;
transition: var(--input-transition);
cursor: pointer;
}
.canva-recent-design:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.canva-recent-thumbnail {
width: 100%;
height: 0;
padding-bottom: 100%;
position: relative;
background: var(--grey-100);
display: flex;
align-items: center;
justify-content: center;
color: var(--grey-500);
font-size: 0.875rem;
}
.canva-recent-thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.canva-recent-info {
padding: var(--spacing-small);
display: flex;
flex-direction: column;
gap: 4px;
}
.canva-recent-name {
font-weight: 600;
font-size: 0.875rem;
color: var(--font-color-h);
margin: 0;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.canva-recent-date {
font-size: 0.75rem;
color: var(--grey-600);
margin: 0;
}
/* Empty state styling */
.canva-recent-empty {
text-align: center;
padding: var(--spacing-xlarge) var(--spacing-medium);
color: var(--grey-600);
}
.canva-recent-empty-icon {
width: 48px;
height: 48px;
color: var(--grey-400);
margin: 0 auto var(--spacing-medium);
}
.canva-recent-empty-text {
font-size: 0.9375rem;
margin: 0;
}
/* View all link */
.canva-view-all-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-xsmall);
color: var(--secondary-600);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
margin-top: var(--spacing-small);
transition: var(--input-transition);
}
.canva-view-all-link:hover {
color: var(--secondary-700);
text-decoration: underline;
}
/* ============================================================================
RESPONSIVE DESIGN
============================================================================ */
@media (max-width: 768px) {
.canva-overview {
gap: var(--spacing-medium);
}
.canva-connection-section,
.canva-quick-actions,
.canva-stats-section,
.canva-recent-designs {
padding: var(--spacing-medium);
}
.canva-actions-grid {
grid-template-columns: 1fr;
}
.canva-stats-grid {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.canva-recent-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.canva-action-card {
padding: var(--spacing-small);
}
.canva-stat-card {
padding: var(--spacing-small);
}
.canva-logo-large {
height: 45px;
min-height: 40px;
}
.connection-status-title {
font-size: 1.125rem;
}
}
@media (max-width: 480px) {
.canva-stats-grid {
grid-template-columns: 1fr;
}
.canva-recent-grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.canva-recent-thumbnail {
aspect-ratio: 1 / 1;
}
.connection-user-info {
flex-direction: column;
text-align: center;
}
.connection-user-details {
align-items: center;
}
}
/* ============================================================================
LOADING STATES
============================================================================ */
.canva-overview-loading {
opacity: 0.7;
pointer-events: none;
}
.canva-stat-loading {
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* ============================================================================
ACCESSIBILITY ENHANCEMENTS
============================================================================ */
.canva-action-card:focus,
.canva-recent-design:focus {
outline: 2px solid var(--secondary-600);
outline-offset: 2px;
}
.canva-view-all-link:focus {
outline: 2px solid var(--secondary-600);
outline-offset: 2px;
}
/* Screen reader only content */
.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;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.canva-connection-section,
.canva-quick-actions,
.canva-stats-section,
.canva-recent-designs {
border-width: 2px;
}
.canva-action-card:hover,
.canva-recent-design:hover {
border-width: 2px;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.canva-action-card,
.canva-recent-design,
.canva-connection-section {
transition: none;
}
.canva-action-card:hover,
.canva-recent-design:hover {
transform: none;
}
.canva-stat-loading {
animation: none;
}
}
/* Canva Button - Brand-compliant styling following official Canva guidelines */
.canva-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-small);
font-family: inherit;
font-weight: 500;
border: none;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
/* Size variants */
.canva-button-small {
padding: 8px 16px;
font-size: 14px;
height: 36px;
border-radius: 6px;
}
.canva-button-medium {
padding: 12px 24px;
font-size: 16px;
height: 44px;
border-radius: 8px;
}
.canva-button-large {
padding: 16px 32px;
font-size: 18px;
height: 52px;
border-radius: 10px;
}
/* Primary variant - Canva brand colors */
.canva-button-primary {
background: linear-gradient(135deg, #00c4cc 0%, #7d2ae7 100%);
color: white;
box-shadow: 0 2px 8px rgba(125, 42, 231, 0.2);
}
.canva-button-primary:hover:not(.canva-button-disabled):not(.canva-button-loading) {
background: linear-gradient(135deg, #00b3bb 0%, #6420d9 100%);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(125, 42, 231, 0.3);
}
.canva-button-primary:active:not(.canva-button-disabled):not(.canva-button-loading) {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(125, 42, 231, 0.2);
}
/* Secondary variant - Outlined style */
.canva-button-secondary {
background: transparent;
color: #7d2ae7;
border: 2px solid #7d2ae7;
box-shadow: none;
}
.canva-button-secondary:hover:not(.canva-button-disabled):not(.canva-button-loading) {
background: linear-gradient(135deg, #00c4cc 0%, #7d2ae7 100%);
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(125, 42, 231, 0.2);
}
.canva-button-secondary:active:not(.canva-button-disabled):not(.canva-button-loading) {
transform: translateY(0);
}
/* Icon styling */
.canva-button-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.canva-button-small .canva-logo {
width: 16px;
height: 16px;
}
.canva-button-medium .canva-logo {
width: 20px;
height: 20px;
}
.canva-button-large .canva-logo {
width: 24px;
height: 24px;
}
.canva-logo {
object-fit: contain;
/* Ensure the logo maintains its gradient colors */
filter: none;
}
/* Text styling */
.canva-button-text {
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
/* Disabled state */
.canva-button-disabled {
background: var(--grey-200) !important;
color: var(--grey-500) !important;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
border: none !important;
}
.canva-button-disabled .canva-logo {
opacity: 0.5;
filter: grayscale(100%);
}
/* Loading state */
.canva-button-loading {
cursor: default;
position: relative;
}
.canva-button-loading .canva-logo {
animation: canva-spin 1.5s linear infinite;
}
@keyframes canva-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Focus states for accessibility */
.canva-button:focus {
outline: 2px solid #7d2ae7;
outline-offset: 2px;
}
.canva-button:focus:not(:focus-visible) {
outline: none;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.canva-button-primary {
border: 2px solid #7d2ae7;
}
.canva-button-secondary {
border-width: 3px;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.canva-button {
transition: none;
}
.canva-button:hover {
transform: none;
}
.canva-button-loading .canva-logo {
animation: none;
}
}
/* Mobile responsive adjustments */
@media (max-width: 768px) {
.canva-button-large {
padding: 14px 28px;
font-size: 16px;
height: 48px;
}
.canva-button-medium {
padding: 10px 20px;
font-size: 15px;
height: 40px;
}
.canva-button-small {
padding: 6px 14px;
font-size: 13px;
height: 32px;
}
}
/* Card variant */
.login-required-card {
background: var(--card-background);
border: 1.5px solid var(--grey-200);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-xlarge);
max-width: 500px;
margin: var(--spacing-xlarge) auto;
text-align: center;
box-shadow: var(--card-shadow-elevated);
transition: var(--input-transition);
}
.login-required-header {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-medium);
margin-bottom: var(--spacing-large);
}
.login-required-icon {
font-size: 2.5rem;
color: var(--secondary-600);
opacity: 0.8;
}
.login-required-card h2 {
color: var(--font-color-h);
font-family: 'GrueneType', Arial, sans-serif;
font-size: 1.5rem;
font-weight: 600;
margin: 0;
line-height: 1.3;
}
.login-required-message {
color: var(--font-color);
margin-bottom: var(--spacing-xlarge);
line-height: 1.6;
font-size: 1rem;
}
.login-required-actions {
display: flex;
justify-content: center;
gap: var(--spacing-medium);
}
.login-required-button {
display: inline-flex;
align-items: center;
gap: var(--spacing-xsmall);
padding: var(--spacing-small) var(--spacing-large);
background: var(--secondary-600);
color: var(--white);
border: none;
border-radius: var(--spacing-xsmall);
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
min-height: var(--form-element-min-height);
}
.login-required-button:hover {
background: var(--secondary-700);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.login-required-button:focus {
outline: none;
box-shadow: var(--input-shadow-focus);
}
.login-icon {
font-size: 1.1em;
}
/* Inline variant */
.login-required-inline {
display: inline-flex;
align-items: center;
gap: var(--spacing-small);
padding: var(--spacing-small) var(--spacing-medium);
background: var(--background-color-alt);
border-radius: var(--spacing-xsmall);
color: var(--font-color);
border: var(--border-subtle);
}
.login-required-inline .login-required-icon {
font-size: 1.2rem;
color: var(--secondary-600);
}
.login-required-link {
color: var(--link-color);
background: none;
border: none;
text-decoration: underline;
cursor: pointer;
font-weight: 500;
font-family: inherit;
font-size: inherit;
padding: 0;
transition: color 0.2s ease;
}
.login-required-link:hover {
color: var(--secondary-700);
}
.login-required-link:focus {
outline: 2px solid var(--interactive-accent-color);
outline-offset: 2px;
}
/* Fullpage variant */
.login-required-fullpage {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-xlarge);
background: var(--background-color);
}
.login-required-container {
text-align: center;
max-width: 600px;
width: 100%;
}
.login-required-icon-large {
font-size: 5rem;
color: var(--secondary-600);
margin-bottom: var(--spacing-large);
opacity: 0.8;
}
.login-required-fullpage h1 {
color: var(--font-color-h);
font-family: 'GrueneType', Arial, sans-serif;
font-size: 2rem;
font-weight: 600;
margin-bottom: var(--spacing-medium);
line-height: 1.2;
}
.login-required-fullpage p {
color: var(--font-color);
font-size: 1.1rem;
margin-bottom: var(--spacing-xlarge);
line-height: 1.6;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.login-required-button.primary {
padding: var(--spacing-medium) var(--spacing-xlarge);
font-size: 1.1rem;
border-radius: var(--card-border-radius-small);
}
/* Loading state */
.auth-loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
background: var(--background-color);
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.login-required-card {
margin: var(--spacing-large);
padding: var(--spacing-large);
max-width: none;
}
.login-required-icon-large {
font-size: 3.5rem;
}
.login-required-fullpage h1 {
font-size: 1.5rem;
}
.login-required-fullpage p {
font-size: 1rem;
margin-bottom: var(--spacing-large);
}
.login-required-fullpage {
padding: var(--spacing-large);
min-height: 50vh;
}
.login-required-button {
padding: var(--spacing-small) var(--spacing-medium);
font-size: 0.9rem;
}
.login-required-inline {
flex-wrap: wrap;
gap: var(--spacing-xsmall);
}
}
/* Tablet responsive adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
.login-required-card {
margin: var(--spacing-xlarge) var(--spacing-large);
}
.login-required-fullpage {
padding: var(--spacing-xlarge) var(--spacing-large);
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.login-required-card {
border-width: 2px;
}
.login-required-button {
border: 2px solid transparent;
}
.login-required-button:focus {
border-color: var(--interactive-accent-color);
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.login-required-button,
.login-required-card,
.login-required-link {
transition: none;
}
.login-required-button:hover {
transform: none;
}
}
/* Document Overview Component Styles */
.document-overview-container {
width: 100%;
}
.document-overview-card {
background-color: var(--card-background);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--card-shadow-subtle);
overflow: hidden;
}
.document-overview-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-medium);
border-bottom: 1px solid var(--border-subtle);
}
.document-overview-header h3 {
margin: 0;
color: var(--font-color-h3);
font-size: 1.1rem;
font-weight: 600;
}
.document-overview-header-actions {
display: flex;
align-items: center;
gap: var(--spacing-small);
}
.document-overview-custom-actions {
display: flex;
align-items: center;
gap: var(--spacing-small);
}
.document-overview-content {
padding: var(--spacing-medium);
}
.document-overview-loading {
display: flex;
justify-content: center;
align-items: center;
padding: var(--spacing-xlarge);
}
/* Controls Section */
.document-overview-controls {
display: flex;
gap: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
align-items: center;
}
.search-container {
position: relative;
flex: 1;
max-width: 400px;
}
.search-container .search-icon {
position: absolute;
left: var(--spacing-small);
top: 50%;
transform: translateY(-50%);
color: var(--font-color-subtle);
font-size: 1.1rem;
pointer-events: none;
}
.search-container .search-input {
padding-left: calc(var(--spacing-small) * 2 + 1.1rem);
width: 100%;
}
.sort-controls {
display: flex;
gap: var(--spacing-xsmall);
align-items: center;
}
.sort-controls .form-select {
min-width: 160px;
}
.sort-order-button {
background: var(--background-color);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius);
padding: var(--spacing-xsmall);
cursor: pointer;
color: var(--font-color);
font-size: 1.2rem;
line-height: 1;
min-width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease-out;
}
.sort-order-button:hover {
background-color: var(--background-color-alt);
border-color: var(--border-hover);
}
.sort-order-button:focus {
outline: 2px solid var(--focus-ring-color);
outline-offset: 2px;
}
/* Document Grid */
.document-overview-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--spacing-medium);
}
.document-card {
background-color: var(--card-background);
border: 1px solid var(--border-subtle);
border-radius: var(--card-border-radius);
padding: var(--spacing-medium);
transition: all 0.2s ease-out;
display: flex;
flex-direction: column;
height: auto;
min-height: 200px;
box-shadow: var(--shadow-sm);
}
.document-card:hover {
border-color: var(--border-hover);
box-shadow: var(--shadow-md);
}
.document-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--spacing-small);
gap: var(--spacing-small);
}
.document-title-header {
flex: 1;
min-width: 0;
}
.document-title {
margin: 0;
color: var(--font-color-h4);
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
cursor: pointer;
word-wrap: break-word;
transition: color 0.2s ease-out;
}
.document-card-title {
margin: 0;
color: var(--font-color-h4);
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
cursor: pointer;
transition: color 0.2s ease-out;
/* Text truncation */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.document-title:hover,
.document-card-title:hover {
color: var(--primary-color);
}
.document-card-title.editable-title:hover {
color: var(--primary-color);
}
.document-card-title.clickable-title {
cursor: pointer;
user-select: none;
}
.document-card-title.clickable-title:hover {
color: var(--primary-color);
text-decoration: underline;
}
.document-title-edit {
display: flex;
flex-direction: column;
gap: var(--spacing-xsmall);
flex: 1;
}
.document-title-edit .form-input {
font-size: 1rem;
font-weight: 600;
padding: var(--spacing-xsmall);
}
.document-title-edit-actions {
display: flex;
gap: var(--spacing-xsmall);
}
.document-card-menu-container {
position: relative;
}
.document-card-menu-button {
background: none;
border: none;
cursor: pointer;
padding: var(--spacing-xsmall);
border-radius: var(--border-radius);
color: var(--font-color-subtle);
font-size: 1.2rem;
line-height: 1;
transition: all 0.2s ease-out;
display: flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
}
.document-card-menu-button:hover {
background-color: var(--background-color-alt);
color: var(--font-color);
}
.document-card-preview {
margin: var(--spacing-small) 0;
border-radius: var(--border-radius);
overflow: hidden;
background-color: var(--background-color-alt);
}
.document-preview-image {
width: 100%;
height: auto;
max-height: 200px;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.2s ease-out;
}
.document-preview-image:hover {
transform: scale(1.02);
}
.document-card-content {
flex: 1;
margin-bottom: var(--spacing-small);
}
.document-preview {
margin: 0;
color: var(--font-color);
font-size: 0.9rem;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.document-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-small);
font-size: 0.8rem;
color: var(--font-color-subtle);
border-top: 1px solid var(--border-subtle);
padding-top: var(--spacing-small);
flex-wrap: wrap;
}
.document-type {
background-color: var(--background-color-alt);
padding: var(--spacing-xxsmall) var(--spacing-xsmall);
border-radius: var(--border-radius-small);
font-weight: 500;
white-space: nowrap;
}
.document-stats,
.document-date {
white-space: nowrap;
}
/* Empty State */
.document-overview-empty-state {
text-align: center;
padding: var(--spacing-xlarge) var(--spacing-medium);
color: var(--font-color-subtle);
}
.document-overview-empty-state .empty-state-icon {
color: var(--font-color-subtle);
margin-bottom: var(--spacing-medium);
opacity: 0.6;
}
.document-overview-empty-state p {
margin: var(--spacing-small) 0;
font-size: 1rem;
line-height: 1.5;
}
.document-overview-empty-state p:first-of-type {
font-weight: 500;
}
/* Preview Modal */
.document-preview-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: var(--spacing-medium);
}
.document-preview-modal {
background-color: var(--card-background);
border-radius: var(--card-border-radius-large);
box-shadow: var(--card-shadow-floating);
max-width: 800px;
max-height: 90vh;
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.document-preview-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-medium);
border-bottom: 1px solid var(--border-subtle);
background-color: var(--background-color-alt);
}
.document-preview-header h3,
.document-preview-header h4 {
margin: 0;
color: var(--font-color-h3);
font-size: 1.2rem;
font-weight: 600;
flex: 1;
min-width: 0;
word-wrap: break-word;
}
.document-preview-header h4 {
font-size: 1.1rem;
font-weight: 500;
}
.document-preview-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--font-color-subtle);
padding: var(--spacing-xsmall);
border-radius: var(--border-radius);
line-height: 1;
transition: all 0.2s ease-out;
min-width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.document-preview-close:hover {
background-color: var(--background-color);
color: var(--font-color);
}
.document-preview-content {
padding: var(--spacing-medium);
overflow-y: auto;
flex: 1;
}
.document-preview-meta {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
padding-bottom: var(--spacing-medium);
border-bottom: 1px solid var(--border-subtle);
font-size: 0.9rem;
color: var(--font-color-subtle);
}
.document-preview-meta span {
background-color: var(--background-color-alt);
padding: var(--spacing-xsmall) var(--spacing-small);
border-radius: var(--border-radius-small);
}
.document-preview-text {
color: var(--font-color);
line-height: 1.6;
white-space: pre-wrap;
word-wrap: break-word;
}
.document-preview-actions {
padding: var(--spacing-medium);
border-top: 1px solid var(--border-subtle);
background-color: var(--background-color-alt);
display: flex;
justify-content: flex-end;
gap: var(--spacing-small);
}
/* Responsive Design */
@media (max-width: 768px) {
.document-overview-controls {
flex-direction: column;
align-items: stretch;
gap: var(--spacing-small);
}
.search-container {
max-width: none;
}
.sort-controls {
justify-content: space-between;
}
.document-overview-grid {
grid-template-columns: 1fr;
gap: var(--spacing-small);
}
.document-card-footer {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xsmall);
}
.document-preview-modal {
margin: var(--spacing-small);
max-height: calc(100vh - var(--spacing-medium));
}
.document-preview-overlay {
padding: var(--spacing-small);
}
}
/* Additional styles for DocumentUpload component compatibility */
.preview-text {
line-height: 1.6;
font-family: var(--font-family);
font-size: 0.9rem;
color: var(--font-color);
}
.preview-text h1,
.preview-text h2,
.preview-text h3,
.preview-text h4,
.preview-text h5,
.preview-text h6 {
margin: var(--spacing-medium) 0 var(--spacing-small) 0;
color: var(--primary-color);
font-weight: 600;
}
.preview-text h1 {
font-size: 1.5rem;
border-bottom: 2px solid var(--border-subtle);
padding-bottom: var(--spacing-xsmall);
}
.preview-text h2 {
font-size: 1.3rem;
border-bottom: 1px solid var(--border-subtle);
padding-bottom: var(--spacing-xsmall);
}
.preview-text h3 {
font-size: 1.1rem;
}
.preview-text ul,
.preview-text ol {
margin: var(--spacing-small) 0;
padding-left: var(--spacing-medium);
}
.preview-text li {
margin: var(--spacing-xsmall) 0;
}
.preview-text p {
margin: var(--spacing-small) 0;
}
.preview-text strong {
font-weight: 600;
color: var(--font-color);
}
.preview-text code {
background: var(--background-color-alt);
padding: 2px 4px;
border-radius: 3px;
font-family: monospace;
font-size: 0.85rem;
}
.preview-error {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
color: var(--error-color);
font-size: 0.9rem;
}
.document-preview-footer {
padding: var(--spacing-medium);
border-top: 1px solid var(--border-subtle);
background-color: var(--background-color-alt);
}
.preview-stats {
font-size: 0.875rem;
color: var(--font-color-subtle);
}
@media (max-width: 480px) {
.document-overview-header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-small);
}
.document-overview-header-actions {
align-self: flex-end;
}
.document-card {
padding: var(--spacing-small);
}
.document-card-header {
flex-direction: column;
align-items: stretch;
gap: var(--spacing-xsmall);
}
.document-card-menu-container {
align-self: flex-end;
}
.document-preview-image {
max-height: 150px;
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.document-card {
transition: none;
}
.document-card:hover {
transform: none;
}
.document-preview-image {
transition: none;
}
.document-preview-image:hover {
transform: none;
}
.document-preview-overlay,
.document-preview-modal {
animation: none;
}
}
/* Typography styles for semantic HTML elements */
.editable-title {
cursor: pointer;
transition: color 0.2s ease-out;
}
.editable-title:hover {
color: var(--secondary-600);
}
.content-preview {
margin: 0;
color: var(--font-color);
font-size: 0.9rem;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Q&A-specific styles */
.qa-description {
color: var(--font-color);
font-style: italic;
margin-bottom: var(--spacing-small);
}
.qa-custom-prompt-preview {
margin-top: var(--spacing-small);
padding: var(--spacing-small);
background-color: var(--background-color-alt);
border-radius: var(--border-radius-small);
border-left: 3px solid var(--primary-color);
}
.qa-custom-prompt-preview strong {
display: block;
color: var(--primary-color);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--spacing-xsmall);
}
.qa-custom-prompt-preview p {
margin: 0;
color: var(--font-color);
font-size: 0.875rem;
line-height: 1.5;
font-style: italic;
}
.qa-document-count {
background-color: var(--secondary-50);
color: var(--secondary-700);
font-weight: 500;
}
.qa-document-count::before {
content: '📄';
margin-right: var(--spacing-xxsmall);
}
.qa-public-badge {
background-color: var(--primary-50);
color: var(--primary-700);
font-weight: 500;
}
.qa-public-badge::before {
content: '🌍';
margin-right: var(--spacing-xxsmall);
}
/* Dark theme support for Q&A */
[data-theme="dark"] .qa-document-count {
background-color: var(--secondary-900);
color: var(--secondary-300);
}
[data-theme="dark"] .qa-public-badge {
background-color: var(--primary-900);
color: var(--primary-300);
}
[data-theme="dark"] .qa-custom-prompt-preview {
background-color: var(--background-color);
border-left-color: var(--primary-400);
}
/* OCR Method Selector Styles */
.ocr-method-selector {
display: flex;
flex-direction: column;
gap: var(--spacing-xsmall);
}
.radio-option {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
padding: var(--spacing-small);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius);
cursor: pointer;
transition: all 0.2s ease-out;
background-color: var(--background-color);
}
.radio-option:hover {
border-color: var(--border-hover);
background-color: var(--background-color-alt);
}
.radio-option input[type="radio"] {
margin: 0;
cursor: pointer;
}
.radio-option input[type="radio"]:checked + span {
color: var(--primary-color);
font-weight: 500;
}
.radio-option input[type="radio"]:checked {
accent-color: var(--primary-color);
}
.radio-option:has(input[type="radio"]:checked) {
border-color: var(--primary-color);
background-color: var(--primary-50, var(--background-color-alt));
}
.radio-option span {
flex: 1;
line-height: 1.4;
color: var(--font-color);
transition: color 0.2s ease-out;
}
.radio-option:disabled,
.radio-option input[type="radio"]:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.radio-option:disabled:hover {
border-color: var(--border-subtle);
background-color: var(--background-color);
}
/* Dark theme support for OCR selector */
[data-theme="dark"] .radio-option:has(input[type="radio"]:checked) {
background-color: var(--primary-900, var(--background-color-alt));
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.document-card {
border-width: 2px;
}
.document-card:hover {
border-color: var(--font-color);
}
.document-preview-overlay {
background-color: rgba(0, 0, 0, 0.8);
}
.radio-option {
border-width: 2px;
}
.radio-option:has(input[type="radio"]:checked) {
border-width: 3px;
}
}
/* Spinning animation for refresh icon */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.spinning {
animation: spin 1s linear infinite;
}
/* SharepicDisplay Component Styles */
.sharepic-display {
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
padding: var(--spacing-medium);
background-color: var(--background-color-alt);
border-radius: 8px;
border: 1px solid var(--border-subtle);
}
.sharepic-display__header {
margin-bottom: var(--spacing-small);
}
.sharepic-display__title {
color: var(--font-color);
font-size: var(--font-size-medium);
font-weight: 600;
margin: 0;
}
.sharepic-display__content {
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
align-items: center;
}
.sharepic-display__preview {
display: flex;
justify-content: center;
width: 100%;
}
.sharepic-image-container {
position: relative;
display: inline-block;
}
.sharepic-preview-image {
max-width: 300px;
width: 100%;
height: auto;
border-radius: 8px;
border: 1px solid var(--border-subtle);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.sharepic-alt-button {
position: absolute;
top: var(--spacing-small);
right: calc(var(--spacing-small) + 40px + var(--spacing-xsmall));
padding: var(--spacing-xsmall) var(--spacing-small);
background-color: var(--klee);
color: var(--weiß);
border: none;
border-radius: var(--card-border-radius-small);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
font-size: 0.875rem;
font-weight: 600;
opacity: 0.9;
transition: transform 0.3s ease;
z-index: 2;
}
.sharepic-alt-button:hover {
transform: scale(1.05);
}
.sharepic-alt-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.sharepic-alt-button svg {
width: 16px;
height: 16px;
}
.sharepic-edit-button-overlay {
position: absolute;
top: var(--spacing-small);
right: var(--spacing-small);
padding: var(--spacing-xsmall) var(--spacing-small);
background-color: var(--klee);
color: var(--weiß);
border: none;
border-radius: var(--card-border-radius-small);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
font-size: 0.875rem;
font-weight: 600;
opacity: 0.9;
transition: transform 0.3s ease;
z-index: 2;
}
.sharepic-edit-button-overlay:hover {
transform: scale(1.05);
}
.sharepic-edit-button-overlay svg {
width: 16px;
height: 16px;
}
.sharepic-display__actions {
display: flex;
justify-content: center;
gap: var(--spacing-small);
width: 100%;
}
.sharepic-edit-button {
padding: var(--spacing-small) var(--spacing-medium);
background-color: var(--tanne);
color: var(--weiß);
border: none;
border-radius: var(--card-border-radius);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
font-size: var(--font-size-small);
font-weight: 600;
font-family: inherit;
transition: all 0.2s ease;
}
.sharepic-edit-button:hover {
background-color: var(--tanne-dark);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.sharepic-edit-button svg {
width: 16px;
height: 16px;
}
/* Responsive styles */
@media (max-width: 768px) {
.sharepic-display {
padding: var(--spacing-small);
gap: var(--spacing-small);
}
.sharepic-preview-image {
max-width: 250px;
}
.sharepic-display__title {
font-size: var(--font-size-small);
}
.sharepic-alt-button {
font-size: 0.75rem;
padding: var(--spacing-xsmall);
}
.sharepic-alt-button svg {
width: 14px;
height: 14px;
}
.sharepic-edit-button-overlay {
font-size: 0.75rem;
padding: var(--spacing-xsmall);
}
.sharepic-edit-button-overlay svg {
width: 14px;
height: 14px;
}
}
@media (max-width: 480px) {
.sharepic-preview-image {
max-width: 200px;
}
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
.sharepic-alt-button {
transition: none;
}
.sharepic-edit-button-overlay {
transition: none;
}
}
.slogan-alternatives {
position: relative;
margin-top: 1.5rem;
padding: 1.5rem;
background: var(--background-color);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.slogan-alternatives-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.slogan-alternatives-title {
font-family: 'GrueneType';
font-size: 1.2em;
color: var(--font-color-h);
margin: 0;
}
.slogan-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.slogan-item {
padding: 1rem;
background: var(--background-color-alt);
border-radius: 8px;
border: 1px solid var(--background-color-sand);
transition: all 0.2s ease;
cursor: pointer;
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
.slogan-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: var(--klee);
}
.slogan-item:active {
transform: translateY(0);
}
.slogan-item.current {
border-color: var(--klee);
background-color: rgba(var(--klee-rgb), 0.1);
}
.slogan-item-content {
color: var(--font-color);
font-size: 1em;
line-height: 1.5;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.slogan-item-content p {
margin: 0.25rem 0;
}
.alternatives-button-wrapper {
position: relative;
height: 42px;
width: 100%;
}
.alternatives-button {
position: absolute;
top: 0;
left: 0;
background-color: var(--primary);
color: var(--weiß);
border: 2px solid var(--weiß);
border-radius: var(--button-border-radius);
padding: var(--button-padding);
font-size: var(--button-font-size);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 42px;
width: 100%;
}
.alternatives-button:hover {
background-color: var(--klee);
transform: translateY(-1px);
}
.alternatives-button:active {
transform: translateY(0);
}
.alternatives-fade-enter {
opacity: 0;
}
.alternatives-fade-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.alternatives-fade-exit {
opacity: 1;
}
.alternatives-fade-exit-active {
opacity: 0;
transition: opacity 300ms;
}
@media (max-width: 768px) {
.slogan-alternatives {
padding: 1rem;
margin-top: 1rem;
}
.slogan-list {
grid-template-columns: 1fr;
}
.alternatives-button {
height: 48px;
font-size: 0.85em;
padding: 8px 16px;
}
.slogan-alternatives-title {
font-size: 1.1em;
}
.slogan-item {
padding: 0.875rem;
}
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
padding: 2rem;
}
.modal-content {
position: relative;
background-color: var(--background-color-alt);
padding: 2.5rem;
border-radius: 16px;
max-width: 600px;
width: 100%;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.modal-content h2 {
color: var(--font-color-h);
margin: 0 0 1.5rem 0;
font-size: 1.75em;
text-align: center;
}
.modal-content p {
margin: 0.75rem 0;
line-height: 1.5;
color: var(--font-color);
font-size: 1.1em;
}
.explanation-box {
background: var(--background-color);
border-radius: 12px;
padding: 1.5rem 1.75rem;
margin: 1.25rem 0;
border: 1px solid var(--hellgrau);
}
.explanation-box p {
margin: 0 0 1rem 0;
font-weight: 500;
color: var(--font-color-h);
}
.explanation-box ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.explanation-box li {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 0;
color: var(--font-color);
}
.explanation-box li svg {
color: var(--primary);
flex-shrink: 0;
width: 24px;
height: 24px;
}
.explanation-box li span {
line-height: 1.4;
font-size: 1.1em;
}
.info-note {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid var(--hellgrau);
}
.info-note p {
font-size: 0.9em;
margin: 0;
font-style: italic;
}
.close-button {
position: absolute;
top: 1rem;
right: 1rem;
background: transparent;
border: none;
cursor: pointer;
color: var(--font-color-h);
padding: 0.5rem;
transition: opacity 0.2s ease;
}
.close-button:hover {
opacity: 0.7;
}
.close-button svg {
color: var(--font-color-h);
fill: var(--font-color-h);
}
.url-container {
display: flex;
margin: 1rem 0;
background: var(--background-color);
border-radius: 8px;
padding: 0.25rem;
border: 1px solid var(--hellgrau);
}
.url-input {
flex-grow: 1;
padding: 0.75rem 1rem;
border: none;
background: transparent;
color: var(--font-color);
font-size: 0.9em;
}
.copy-docs-link-button {
padding: 0.5rem 1rem;
border: none;
border-radius: 6px;
cursor: pointer;
background-color: transparent;
color: var(--font-color);
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
position: relative;
}
.copy-docs-link-button:hover {
opacity: 0.7;
}
.copy-docs-link-button.copied {
color: var(--primary);
}
.copy-docs-link-button.copied svg {
animation: checkmark 0.4s ease-in-out forwards;
}
@keyframes checkmark {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.export-action-button, .open-button {
width: 100%;
padding: 0.875rem;
margin-top: 1rem;
border: none;
border-radius: 8px;
font-size: 1em;
cursor: pointer;
background-color: var(--primary);
color: var(--weiß);
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.export-action-button:hover, .open-button:hover {
background-color: var(--klee);
transform: translateY(-1px);
}
.export-action-button:disabled {
background-color: var(--hellgrau);
cursor: not-allowed;
}
.error-message {
margin-top: 1rem;
color: var(--error-color);
text-align: center;
padding: 0.75rem;
background-color: var(--error-background);
border-radius: 6px;
}
@media (max-width: 768px) {
.modal {
padding: 1rem;
}
.modal-content {
padding: 1.75rem;
border-radius: 12px;
}
.modal-content h2 {
font-size: 1.4em;
}
.modal-content p {
font-size: 1em;
}
.explanation-box {
background: none;
border: none;
padding: 0;
margin: 1rem 0;
}
.explanation-box p,
.explanation-box ul {
display: none;
}
.info-note {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.info-note p {
display: block;
font-size: 0.9em;
margin: 1rem 0;
}
.button-group {
flex-direction: column;
gap: 0.5rem;
}
}
@media (max-width: 360px) {
.modal-content {
padding: 15px;
}
.modal-content h2 {
font-size: 1.2em;
}
.modal-content p {
font-size: 0.9em;
}
.url-input,
.copy-docs-link-button,
.open-button {
padding: 10px;
}
}
@media (max-height: 700px) and (orientation: landscape) {
.modal-content {
padding: 1.5rem;
}
.explanation-box {
padding: 1rem;
margin: 1rem 0;
}
.explanation-box li {
padding: 0.5rem 0;
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.button-group {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.button-group .open-button,
.button-group .export-action-button {
flex: 1;
margin-top: 0;
}
.verify-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
backdrop-filter: blur(5px);
transition: background-color 0.3s ease;
}
.verify-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1100;
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.verify-box {
background: var(--background-color);
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
max-width: 400px;
width: 90%;
animation: slideIn 0.3s ease-out;
border: 1px solid var(--background-color-alt);
transition: all 0.3s ease;
}
@keyframes slideIn {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.verify-box h2 {
color: var(--primary);
margin: 0 0 1rem 0;
font-size: 1.5rem;
text-align: center;
}
.verify-box p {
color: #666;
margin-bottom: 1.5rem;
text-align: center;
font-size: 0.95rem;
}
.verify-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.verify-input-group {
position: relative;
display: flex;
align-items: center;
}
.verify-input {
width: 100%;
padding: 0.8rem 1rem;
padding-right: 3rem;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: all 0.2s ease;
}
.verify-input:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}
.verify-password-toggle {
position: absolute;
right: 0.8rem;
background: none;
border: none;
padding: 0.5rem;
cursor: pointer;
color: #666;
transition: color 0.2s ease;
}
.verify-password-toggle:hover {
color: var(--primary);
}
.verify-error {
color: #d32f2f;
font-size: 0.9rem;
text-align: center;
background-color: rgba(211, 47, 47, 0.1);
padding: 0.75rem;
border-radius: 6px;
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.verify-buttons {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.verify-button {
flex: 1;
padding: 0.8rem 1.5rem;
border: none;
border-radius: 6px;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease;
background-color: var(--primary);
color: var(--weiß);
}
.verify-button:hover {
background-color: var(--klee);
transform: translateY(-1px);
}
.verify-button:active {
transform: translateY(0);
}
.verify-button-secondary {
background-color: var(--background-color);
color: var(--primary);
border: 2px solid var(--primary);
}
.verify-button-secondary:hover {
background-color: #e9ecef;
}
.verify-box.locked .verify-input {
border-color: #d32f2f;
background-color: rgba(211, 47, 47, 0.05);
}
.verify-box.locked .verify-button {
opacity: 0.5;
cursor: not-allowed;
}
.verify-attempts {
display: flex;
gap: 0.5rem;
justify-content: center;
margin: 0.5rem 0;
}
.attempt-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--background-color-alt);
transition: all 0.3s ease;
}
.attempt-dot.active {
background-color: var(--klee);
}
.attempt-dot.failed {
background-color: #d32f2f;
}
[data-theme="dark"] .attempt-dot {
background-color: var(--background-color);
}
[data-theme="dark"] .attempt-dot.active {
background-color: var(--klee);
}
[data-theme="dark"] .attempt-dot.failed {
background-color: #ff4444;
}
[data-theme="dark"] .verify-box.locked .verify-input {
background-color: rgba(211, 47, 47, 0.1);
}
.verify-attempts {
display: flex;
gap: 0.5rem;
justify-content: center;
margin: 0.5rem 0;
}
.attempt-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--background-color-alt);
}
.attempt-dot.active {
background-color: var(--klee);
}
.attempt-dot.failed {
background-color: #d32f2f;
}
.verify-box.locked .verify-input,
.verify-box.locked .verify-button {
opacity: 0.5;
cursor: not-allowed;
}
.content-actions,
.platform-actions,
.display-actions {
display: flex;
gap: 8px;
align-items: center;
}
.display-header .display-actions {
position: relative;
margin-left: auto;
}
.action-button {
background-color: transparent;
border: none;
cursor: pointer;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--font-color-h);
transition: all 0.2s ease;
border-radius: 4px;
}
.action-button:hover {
background-color: var(--button-hover-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.action-button-disabled {
position: relative;
}
.action-button-disabled::after {
content: '';
position: absolute;
top: 50%;
left: 20%;
right: 20%;
height: 1px;
background-color: var(--font-color-h);
transform: translateY(-50%) rotate(-45deg);
z-index: 1;
}
.action-button-disabled:hover {
background-color: var(--button-hover-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.platform-actions .action-button:hover {
background-color: var(--button-hover-color);
}
.action-button:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.action-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.action-button svg {
width: 16px;
height: 16px;
}
.action-button[data-tooltip-id] {
position: relative;
}
[data-theme="dark"] .platform-content.editing .platform-header .action-button {
color: var(--weiß);
}
[data-theme="dark"] .platform-content.editing .platform-header .action-button:hover {
background-color: rgba(255, 255, 255, 0.2);
}
/* Download Export Component Styles */
.download-export {
position: relative;
display: inline-block;
}
.download-export .format-dropdown {
position: absolute;
top: 100%;
right: 0;
background-color: var(--background-color);
border: 1px solid var(--border-color, #e0e0e0);
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
z-index: 1000;
min-width: 240px;
margin-top: 8px;
overflow: hidden;
backdrop-filter: blur(10px);
animation: dropdownFadeIn 0.2s ease-out;
}
@keyframes dropdownFadeIn {
from {
opacity: 0;
transform: translateY(-8px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.download-export .format-option {
display: flex;
align-items: center;
width: 100%;
padding: 14px 16px;
border: none;
background: transparent;
color: var(--font-color);
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-align: left;
border-radius: 0;
transition: all 0.15s ease;
line-height: 1.4;
gap: 12px;
}
.download-export .format-option:first-child {
border-radius: 8px 8px 0 0;
}
.download-export .format-option:last-child {
border-radius: 0 0 8px 8px;
}
.download-export .format-option:only-child {
border-radius: 8px;
}
.download-export .format-option:hover {
background: var(--button-hover-color);
color: var(--tanne);
transform: translateX(2px);
}
.download-export .format-option:active {
transform: translateX(2px) scale(0.98);
}
.download-export .format-option:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.download-export .format-option:disabled:hover {
background: transparent;
transform: none;
}
/* Icon styling in format options */
.download-export .format-option svg {
flex-shrink: 0;
width: 16px;
height: 16px;
}
/* Option content wrapper */
.download-export .format-option-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.download-export .format-option-title {
font-size: 14px;
font-weight: 500;
color: var(--font-color);
}
.download-export .format-option-subtitle {
font-size: 12px;
color: var(--font-color-muted);
opacity: 0.7;
}
/* Divider between option groups */
.download-export .format-divider {
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--border-color) 20%, var(--border-color) 80%, transparent 100%);
margin: 4px 0;
}
@media (max-width: 768px) {
.content-actions,
.platform-actions,
.display-actions {
gap: 5px;
}
.action-button {
padding: 6px;
}
.action-button svg {
width: 14px;
height: 14px;
}
.download-export .format-selector {
font-size: 11px;
padding: 5px 6px;
min-width: 55px;
}
}
/* Export Dropdown (ExportDropdown component) */
.export-dropdown {
position: relative;
display: inline-block;
}
/* Wolke Sub-Dropdown */
.wolke-subdropdown {
position: absolute;
top: 0;
left: 100%;
margin-left: 8px;
background-color: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
z-index: 1001;
min-width: 220px;
overflow: hidden;
backdrop-filter: blur(10px);
animation: dropdownFadeIn 0.2s ease-out;
}
.wolke-subdropdown-header {
padding: 12px 16px 8px;
font-size: 12px;
font-weight: 600;
color: var(--font-color-muted);
border-bottom: 1px solid var(--border-color);
background: var(--button-hover-color);
}
.wolke-subdropdown-option {
display: flex;
align-items: center;
width: 100%;
padding: 12px 16px;
border: none;
background: transparent;
color: var(--font-color);
font-size: 13px;
cursor: pointer;
text-align: left;
border-radius: 0;
transition: all 0.15s ease;
gap: 10px;
}
.wolke-subdropdown-option:hover {
background: var(--button-hover-color);
color: var(--tanne);
transform: translateX(2px);
}
.wolke-subdropdown-option:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.wolke-subdropdown-option:disabled:hover {
background: transparent;
transform: none;
}
.wolke-subdropdown-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.wolke-subdropdown-title {
font-size: 13px;
font-weight: 500;
color: var(--font-color);
}
.wolke-subdropdown-subtitle {
font-size: 11px;
color: var(--font-color-muted);
opacity: 0.8;
}
.advanced-editing-section {
background: rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 1.5rem;
margin-top: 1.5rem;
width: 100%;
}
.advanced-editing-section h3 {
color: var(--weiß);
margin: 0 0 1.5rem 0;
font-size: 1.1em;
font-weight: 600;
}
.advanced-editing-section h4 {
color: var(--weiß);
margin: 0 0 0.75rem 0;
font-size: 1em;
font-weight: 600;
}
.advanced-controls-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
width: 100%;
margin-top: 1.5rem;
}
.control-item {
background: rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 1rem;
}
.control-item p,
.cross-control p {
color: var(--weiß);
margin: 0 0 0.75rem 0;
font-size: 0.9em;
opacity: 0.9;
}
.cross-control {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cross-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0.5rem;
width: fit-content;
margin: 0 auto;
}
.cross-button {
background-color: transparent;
border: 2px solid var(--weiß);
color: var(--weiß);
border-radius: 4px;
padding: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
}
.cross-button:hover {
background-color: var(--klee);
}
.cross-button.up {
grid-column: 2;
grid-row: 1;
}
.cross-button.left {
grid-column: 1;
grid-row: 2;
}
.offset-display {
grid-column: 2;
grid-row: 2;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
width: 36px;
height: 36px;
}
.cross-button.right {
grid-column: 3;
grid-row: 2;
}
.cross-button.down {
grid-column: 2;
grid-row: 3;
}
.offset-value {
color: var(--weiß);
font-size: 0.8em;
font-family: monospace;
text-align: center;
white-space: nowrap;
}
.balken-offset-control {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.balken-offset-control-item {
display: flex;
align-items: center;
justify-content: center;
}
.balken-offset-buttons {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.25rem;
border-radius: 4px;
}
.balken-offset-buttons button {
background-color: transparent;
border: 2px solid var(--weiß);
color: var(--weiß);
border-radius: 4px;
padding: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.balken-offset-buttons button:hover {
background-color: var(--klee);
}
.balken-offset-buttons span {
min-width: 50px;
text-align: center;
color: var(--weiß);
font-family: monospace;
font-size: 0.9em;
}
@media (max-width: 1200px) {
.advanced-controls-grid {
grid-template-columns: repeat(2, 1fr);
}
.advanced-controls-grid > *:last-child {
grid-column: 1 / -1;
max-width: 400px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.advanced-controls-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.advanced-controls-grid > *:last-child {
grid-column: auto;
max-width: none;
margin: 0;
}
.advanced-editing-section {
padding: 1rem;
}
.control-item {
padding: 0.75rem;
}
.cross-button,
.offset-display {
width: 32px;
height: 32px;
}
.offset-value {
font-size: 0.75em;
}
.balken-offset-buttons button {
width: 28px;
height: 28px;
padding: 0.375rem;
}
.balken-offset-buttons span {
min-width: 40px;
font-size: 0.8em;
}
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background-color: var(--background-color-alt);
padding: 20px;
border-radius: 8px;
width: 80%;
max-width: 500px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.modal-content h2 {
color: var(--font-color-h);
margin-top: 0;
margin-bottom: 20px;
}
.link-name-input {
font-family: 'PT Sans', Arial, sans-serif;
width: 100%;
padding: 10px;
border: none;
border-radius: 4px;
box-sizing: border-box;
font-size: 0.9em;
outline: none;
color: var(--font-color);
background-color: var(--weiß);
transition: box-shadow 0.3s ease, background-color 0.3s ease;
margin-bottom: 15px;
}
.link-name-input:focus {
border: 2px solid var(--grashalm);
padding: 8px;
}
.button-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.save-button, .cancel-button {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
font-size: 0.9em;
}
.save-button {
background-color: var(--klee);
color: var(--weiß);
}
.save-button:hover {
background-color: var(--grashalm);
}
.cancel-button {
background-color: var(--secondary);
color: var(--primary);
}
.cancel-button:hover {
background-color: var(--sonne);
}
.error-message {
color: var(--sonne);
font-size: 0.8em;
margin-top: 4px;
margin-bottom: 8px;
}
.success-message {
color: var(--klee);
font-size: 0.8em;
margin-top: 4px;
margin-bottom: 8px;
}
.saved-links {
margin-top: 20px;
}
.saved-links h3 {
color: var(--font-color-h3);
margin-bottom: 10px;
}
.saved-links ul {
list-style-type: none;
padding: 0;
}
.saved-links li {
margin-bottom: 10px;
padding: 10px;
background-color: var(--background-color-sand);
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
.saved-links button {
padding: 5px 10px;
margin-left: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
font-size: 0.8em;
}
.saved-links button:first-of-type {
background-color: var(--himmel);
color: var(--weiß);
}
.saved-links button:first-of-type:hover {
background-color: var(--klee);
}
.saved-links button:last-of-type {
background-color: var(--sonne);
color: var(--primary);
}
.saved-links button:last-of-type:hover {
background-color: var(--grashalm);
color: var(--weiß);
}
@media (max-width: 768px) {
.modal-content {
width: 95%;
padding: 15px;
}
.save-button, .cancel-button {
padding: 8px 15px;
font-size: 0.8em;
}
.saved-links li {
flex-direction: column;
align-items: flex-start;
}
.saved-links button {
margin-left: 0;
margin-top: 10px;
}
}
.close-button {
position: absolute;
top: 10px;
right: 10px;
font-size: 1.5em;
background: none;
border: none;
cursor: pointer;
color: var(--font-color);
}
.close-button:hover {
color: var(--sonne);
}
/* Collection Actions - Shared styling for Q&A and Document actions */
.qa-collection-actions,
.document-actions {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
margin-left: auto;
}
.qa-collection-actions .icon-button,
.document-actions .icon-button {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
border-radius: var(--spacing-xsmall);
background-color: transparent;
color: var(--grey-600);
cursor: pointer;
transition: all 0.25s ease-out;
font-size: 16px;
}
.qa-collection-actions .icon-button:hover,
.document-actions .icon-button:hover {
background-color: var(--hover-color-alt);
color: var(--font-color);
transform: translateY(-1px);
}
.qa-collection-actions .icon-button:active,
.document-actions .icon-button:active {
transform: translateY(0);
}
.qa-collection-actions .icon-button.danger,
.document-actions .icon-button.danger {
color: var(--error-red);
}
.qa-collection-actions .icon-button.danger:hover,
.document-actions .icon-button.danger:hover {
background-color: rgba(211, 47, 47, 0.1);
color: var(--error-red);
}
.qa-collection-actions .icon-button:disabled,
.document-actions .icon-button:disabled {
color: var(--font-color-disabled);
cursor: not-allowed;
transform: none;
}
.qa-collection-actions .icon-button:disabled:hover,
.document-actions .icon-button:disabled:hover {
background-color: transparent;
transform: none;
}
@media (max-width: 768px) {
.qa-collection-actions,
.document-actions {
gap: var(--spacing-xxsmall);
}
.qa-collection-actions .icon-button,
.document-actions .icon-button {
width: 28px;
height: 28px;
font-size: 14px;
}
}
.welcome-screen {
min-height: calc(100vh - 300px);
width: 100%;
background-color: var(--background-color);
background-image:
radial-gradient(circle at 5% 10%, var(--klee-transparent) 0%, transparent 15%),
radial-gradient(circle at 95% 90%, var(--primary-transparent) 0%, transparent 12%),
radial-gradient(circle at 90% 5%, var(--secondary-transparent) 0%, transparent 8%);
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding: 0 20px;
margin-top: -40px;
opacity: 1;
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
position: relative;
}
.welcome-content {
max-width: 1200px;
width: 100%;
text-align: left;
padding: 0 40px 40px;
margin: 0 auto;
position: relative;
background: linear-gradient(170deg, var(--background-color) 0%, var(--background-color-alt) 100%);
border-radius: 20px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08),
0 4px 12px rgba(0, 0, 0, 0.05);
border: 1px solid var(--button-hover-color);
}
.welcome-content h1 {
font-size: clamp(2em, 4vw, 2.8em);
color: var(--font-color-h);
margin-bottom: 30px;
font-weight: bold;
padding: 30px clamp(20px, 4vw, 40px) 0;
position: relative;
}
@media (prefers-color-scheme: light) {
.welcome-content h1 {
background: linear-gradient(90deg, var(--klee) -50%, var(--font-color-h) 150%);
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
}
.welcome-intro {
font-size: clamp(1em, 2vw, 1.2em);
line-height: 1.6;
color: var(--font-color);
max-width: min(1000px, 90%);
margin: 0 0 40px clamp(20px, 4vw, 40px);
padding: 20px 25px;
border-left: 3px solid var(--klee);
background: var(--background-color-alt);
border-radius: 0 16px 16px 0;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}
.welcome-steps {
margin: clamp(20px, 4vw, 40px) 0;
position: relative;
padding: 20px;
background: linear-gradient(165deg, var(--background-color-alt) 0%, transparent 100%);
border-radius: 16px;
}
.welcome-steps h2 {
font-size: clamp(1.4em, 3vw, 1.8em);
color: var(--font-color-h);
margin-bottom: clamp(30px, 3vw, 40px);
padding-left: clamp(20px, 4vw, 40px);
position: relative;
}
.welcome-steps h2::before {
display: none;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: clamp(20px, 3vw, 30px);
margin: 0 auto;
max-width: min(1000px, 90%);
padding: 0 clamp(10px, 2vw, 20px);
position: relative;
}
.step-card {
padding: clamp(25px, 3vw, 30px) clamp(20px, 2vw, 25px);
border-radius: 16px;
position: relative;
transition: all 0.4s ease;
border: 1px solid var(--button-hover-color);
height: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06),
0 2px 8px rgba(0, 0, 0, 0.04);
}
@media (prefers-color-scheme: light) {
.step-card {
background: linear-gradient(135deg, var(--background-color) 0%, var(--background-color-alt) 100%);
}
.step-card:hover {
background: linear-gradient(135deg, var(--background-color-alt) 0%, var(--background-color) 100%);
}
}
@media (prefers-color-scheme: dark) {
.step-card {
background: var(--background-color-alt);
}
.step-card:hover {
background: var(--background-color);
}
}
.step-card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1),
0 4px 12px rgba(0, 0, 0, 0.05);
border-color: var(--klee);
}
.step-number {
width: clamp(32px, 4vw, 36px);
height: clamp(32px, 4vw, 36px);
background: linear-gradient(135deg, var(--klee) 0%, var(--primary) 150%);
color: var(--weiß);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(1.1em, 2vw, 1.3em);
font-weight: bold;
position: absolute;
top: -18px;
left: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.step-card h3 {
color: var(--font-color-h);
font-size: clamp(1.1em, 2vw, 1.2em);
margin: 15px 0 12px;
}
.step-card p {
color: var(--font-color);
line-height: 1.5;
font-size: clamp(0.9em, 1.5vw, 0.95em);
opacity: 0.9;
flex-grow: 1;
}
.start-button {
background: linear-gradient(135deg, var(--klee) 0%, var(--primary) 150%);
color: var(--weiß);
border: none;
padding: clamp(14px, 2vw, 16px) clamp(35px, 4vw, 40px);
border-radius: 30px;
font-size: clamp(1.1em, 2vw, 1.3em);
font-weight: bold;
cursor: pointer;
transition: all 0.4s ease;
margin: clamp(30px, 4vw, 40px) auto 0;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
display: block;
width: fit-content;
min-width: min(250px, 80%);
position: relative;
overflow: hidden;
}
.start-button:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, var(--primary) -50%, var(--klee) 150%);
}
@media (max-width: 1024px) {
.welcome-content {
padding: clamp(25px, 4vw, 30px);
}
}
@media (max-width: 768px) {
.welcome-screen {
padding: 15px;
min-height: calc(100vh - 120px);
margin-top: 0;
}
.welcome-content {
padding: 20px 15px;
}
.steps-grid {
padding: 0 10px;
}
.step-card {
margin-top: 15px;
}
}
@media (max-width: 480px) {
.welcome-screen {
padding: 10px;
}
.welcome-content {
padding: 15px 10px;
}
.steps-grid {
gap: 25px;
}
}
@media (max-height: 600px) and (orientation: landscape) {
.welcome-screen {
min-height: auto;
padding: 60px 15px;
}
.steps-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.welcome-screen.fade-out {
opacity: 0;
pointer-events: none;
transform: translateY(-20px);
}
.fade-out .welcome-content {
opacity: 0;
transform: translateY(-20px);
}
.welcome-screen .base-container {
opacity: 0;
transform: translateY(20px);
animation: fadeIn 0.5s ease-out 0.3s forwards;
position: relative;
z-index: 1;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.help-display {
border-radius: 8px;
padding-top: 0px;
margin-bottom: 20px;
}
.help-content {
font-size: 1em;
line-height: 1.5;
}
.help-content h4 {
margin-top: 15px;
margin-bottom: 10px;
color: var(--text-color);
}
.help-content ul {
list-style-type: none;
padding-left: 0;
margin: 0;
}
.help-content li {
margin-bottom: 8px;
padding-left: 20px;
position: relative;
}
.help-content li::before {
content: "•";
position: absolute;
left: 0;
color: var(--grashalm);
}
@media (max-width: 768px) {
.help-content {
padding: 0px;
}
}
.welcome-2025-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1001;
backdrop-filter: blur(5px);
padding: 1rem;
box-sizing: border-box;
overflow-y: auto;
}
.welcome-2025-modal {
background-color: var(--background-color);
padding: 1.25rem;
border-radius: 0.75rem;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
max-width: 44rem;
width: 100%;
animation: welcome2025FadeIn 0.5s ease-out;
margin: auto;
}
@keyframes welcome2025FadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.welcome-2025-title {
font-size: 1.3rem;
margin-bottom: 0.75rem;
text-align: center;
color: var(--font-color-h);
font-weight: 700;
}
.welcome-2025-content {
margin-bottom: 1rem;
}
.welcome-2025-intro {
text-align: center;
margin-bottom: 0.75rem;
color: var(--font-color);
font-size: 0.9rem;
}
.welcome-2025-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.welcome-2025-card {
background-color: var(--background-color-alt);
padding: 0.75rem;
border-radius: 0.5rem;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
min-height: 7.5rem;
}
.welcome-2025-card-clickable {
cursor: pointer;
position: relative;
}
.welcome-2025-card-clickable::after {
content: "→";
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
font-size: 0.9rem;
color: var(--primary);
opacity: 0;
transition: opacity 0.3s ease;
}
.welcome-2025-card-clickable:hover::after {
opacity: 1;
}
.welcome-2025-card:hover {
transform: translateY(-0.15rem);
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}
.welcome-2025-card-clickable:hover {
background-color: var(--hover-color-alt);
border: 1px solid var(--primary);
padding: calc(0.75rem - 1px);
}
.welcome-2025-emoji {
font-size: 1.5rem;
display: block;
margin-bottom: 0.35rem;
text-align: center;
}
.welcome-2025-card h3 {
font-size: 0.9rem;
margin-bottom: 0.35rem;
color: var(--font-color-h3);
text-align: center;
}
.welcome-2025-card p {
font-size: 0.8rem;
color: var(--font-color);
margin-bottom: 0;
flex-grow: 1;
text-align: center;
line-height: 1.3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.welcome-2025-exclusive-note {
text-align: center;
font-size: 0.8rem;
color: var(--font-color);
margin: 0.75rem 0;
padding: 0.5rem;
background-color: var(--background-color-alt);
border-radius: 0.5rem;
font-style: italic;
}
.welcome-2025-buttons {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-top: 0.75rem;
}
.welcome-2025-button {
padding: 0.5rem 1rem;
border: none;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
min-width: 6rem;
}
.welcome-2025-button-primary {
background-color: var(--primary);
color: white;
}
.welcome-2025-button-primary:hover {
background-color: var(--klee);
}
.welcome-2025-button-secondary {
background-color: transparent;
color: var(--font-color-h);
border: 1px solid var(--font-color-h);
}
.welcome-2025-button-secondary:hover {
background-color: var(--background-color-alt);
}
[data-theme="dark"] .welcome-2025-button-secondary {
color: var(--font-color);
border-color: var(--font-color);
}
[data-theme="dark"] .welcome-2025-card-clickable::after {
color: var(--font-color);
}
@media (max-width: 768px) {
.welcome-2025-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.welcome-2025-modal {
padding: 1rem;
max-width: 90%;
max-height: 90vh;
overflow-y: auto;
}
.welcome-2025-overlay {
align-items: flex-start;
padding-top: 5vh;
padding-bottom: 5vh;
}
.welcome-2025-card {
min-height: auto;
padding: 0.6rem;
}
.welcome-2025-card-clickable:hover {
padding: calc(0.6rem - 1px);
}
.welcome-2025-buttons {
flex-direction: row;
flex-wrap: wrap;
}
.welcome-2025-button {
flex: 1;
min-width: 5rem;
padding: 0.4rem 0.75rem;
font-size: 0.8rem;
}
}
@media (max-width: 360px) {
.welcome-2025-title {
font-size: 1.1rem;
}
.welcome-2025-emoji {
font-size: 1.2rem;
}
.welcome-2025-card h3 {
font-size: 0.8rem;
}
.welcome-2025-card p {
font-size: 0.75rem;
}
.welcome-2025-exclusive-note {
font-size: 0.75rem;
padding: 0.4rem;
}
}
.welcome-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1001;
backdrop-filter: blur(5px);
padding: 20px;
box-sizing: border-box;
}
.welcome-popup {
background-color: var(--background-color);
padding: 25px 30px;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
max-width: 1000px;
width: 100%;
text-align: left;
border: none;
animation: popupFadeIn 0.5s ease-out;
}
@keyframes popupFadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.welcome-button-container {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 25px;
}
.welcome-popup h1 {
font-size: 2em;
margin-bottom: 25px;
text-align: center;
color: var(--font-color-h);
font-weight: 800;
letter-spacing: -0.02em;
}
.feature-section h2 {
text-align: center;
margin-bottom: 25px;
font-size: 1.4em;
color: var(--font-color-h);
font-weight: 700;
letter-spacing: -0.01em;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.feature-card {
background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
padding: 25px;
border-radius: 18px;
border: 2px solid var(--primary);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
cursor: default;
}
.feature-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
border-color: var(--dunkelgruen);
}
.feature-emoji {
font-size: 2.2em;
display: block;
margin-bottom: 15px;
}
.feature-card h3 {
font-size: 1.3em;
margin-bottom: 12px;
color: var(--font-color-h);
font-weight: 700;
letter-spacing: -0.01em;
}
.feature-card p {
font-size: 1em;
line-height: 1.4;
color: var(--font-color);
margin: 0;
}
.beta-info {
text-align: center;
margin-top: 25px;
font-size: 0.95em;
color: var(--font-color);
font-style: italic;
opacity: 0.8;
}
.welcome-button {
padding: 12px 28px;
border: none;
border-radius: 30px;
font-size: 1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
letter-spacing: -0.01em;
}
.newsletter-button {
background-color: var(--dunkelgruen);
color: var(--weiß);
}
.newsletter-button:hover {
background-color: var(--font-color-h);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.later-button {
background-color: var(--font-color-h);
color: var(--background-color);
}
.later-button:hover {
background-color: var(--dunkelgruen);
color: var(--weiß);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
.welcome-popup {
padding: 20px;
}
.feature-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.welcome-popup h1 {
font-size: 1.6em;
margin-bottom: 20px;
}
.feature-section h2 {
font-size: 1.2em;
margin-bottom: 20px;
}
.feature-card {
padding: 20px;
}
.feature-emoji {
font-size: 1.8em;
margin-bottom: 12px;
}
.feature-card h3 {
font-size: 1.2em;
margin-bottom: 10px;
}
.feature-card p {
font-size: 0.95em;
}
.welcome-button {
width: 100%;
padding: 10px 20px;
font-size: 0.95em;
}
.beta-info {
font-size: 0.9em;
margin-top: 20px;
}
}
.popup-terms {
position: fixed;
bottom: 0;
width: 100%;
background-color: var(--background-color);
padding: 10px 20px;
box-shadow: 0 -2px 5px rgba(236, 214, 214, 0.3);
text-align: left;
z-index: 1000;
display: flex;
align-items: center;
box-sizing: border-box;
}
.terms-text {
flex-grow: 1;
}
.terms-link {
color: var(--font-color-h);
text-decoration: underline;
}
.button-terms {
background-color: var(--font-color-h);
color: var(--background-color);
padding: 10px 20px;
border: none;
border-radius: 50px;
font-size: 1.2em;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
display: flex;
align-items: center;
text-decoration: none;
margin-left: 20px;
}
.button-terms:hover {
background-color: var(--dunkelgruen);
color: var(--weiß);
}
@media (max-width: 768px) {
.welcome-popup-overlay {
display: none;
}
.popup-terms {
flex-direction: column;
padding: 15px;
padding-bottom: 25px;
gap: 10px;
text-align: center;
}
.terms-text {
font-size: 0.9em;
margin-bottom: 10px;
}
.button-terms {
margin-left: 0;
padding: 10px 25px;
font-size: 1em;
width: auto;
justify-content: center;
align-self: center;
}
}
@media (max-width: 480px) {
.popup-terms {
padding: 10px;
}
.terms-text {
font-size: 0.8em;
}
.button-terms {
font-size: 0.9em;
padding: 8px 20px;
}
}
.editor-maintenance-info {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-medium);
padding: var(--spacing-large);
background-color: var(--background-color-alt);
border-radius: 8px;
margin: var(--spacing-medium) 0;
}
.editor-maintenance-info p {
margin: 0;
text-align: center;
line-height: 1.5;
}
.antrag-save-popup-content {
font-family: inherit;
padding: var(--spacing-large);
background: var(--background-color);
color: var(--font-color);
border-radius: var(--border-radius-medium, 8px);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-lg);
max-width: 600px;
width: 90%;
margin: auto;
position: relative;
overflow-y: auto;
max-height: 85vh;
}
.antrag-save-popup-content h2 {
color: var(--font-color-h);
margin-top: 0;
margin-bottom: var(--spacing-small);
font-family: 'GrueneType', Arial, sans-serif;
font-weight: bold;
font-size: 1.5em;
padding-bottom: var(--spacing-small);
border-bottom: 1px solid var(--border-subtle);
}
.antrag-save-popup-content p {
margin-top: var(--spacing-medium);
margin-bottom: var(--spacing-large);
color: var(--font-color);
line-height: 1.6;
}
.antrag-save-popup-content .form-field {
margin-bottom: var(--spacing-medium);
}
.antrag-save-popup-content .form-field label {
display: block;
margin-bottom: var(--spacing-xsmall);
font-weight: bold;
color: var(--font-color);
font-size: 0.9em;
}
.antrag-save-popup-content .form-field .form-input,
.antrag-save-popup-content .form-field .form-select,
/* AntragSavePopup textarea styles - DISABLED to prevent conflicts with main form-inputs.css */
/*
.antrag-save-popup-content .form-field .form-textarea {
font-family: 'PT Sans', Arial, sans-serif;
width: 100%;
padding: var(--spacing-small);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-small, 4px);
box-sizing: border-box;
font-size: 0.9em;
outline: none;
color: var(--font-color);
background-color: var(--background-color-alt);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
resize: vertical;
}
*/
.antrag-save-popup-content .form-field .form-checkbox {
accent-color: var(--klee);
width: 1.2em;
height: 1.2em;
cursor: pointer;
margin: 0;
position: relative;
}
.antrag-save-popup-content .form-field .checkbox-label {
cursor: pointer;
color: var(--font-color);
font-size: 0.9em;
margin-left: var(--spacing-xsmall);
margin-top: 0;
margin-bottom: 0;
}
/* AntragSavePopup input focus styles - DISABLED to prevent conflicts with main form-inputs.css */
/*
.antrag-save-popup-content .form-field .form-input:focus,
.antrag-save-popup-content .form-field .form-select:focus,
.antrag-save-popup-content .form-field .form-textarea:focus {
border-color: var(--klee);
}
*/
.antrag-save-popup-content .modal-actions {
margin-top: var(--spacing-large);
padding-top: var(--spacing-medium);
border-top: 1px solid var(--border-subtle);
display: flex;
justify-content: flex-end;
gap: var(--spacing-small);
}
.antrag-save-popup-content .modal-actions .button.secondary {
padding: var(--spacing-xsmall) var(--spacing-medium);
border: 1px solid var(--border-subtle);
background-color: var(--background-color-alt);
color: var(--font-color);
border-radius: var(--border-radius-small, 4px);
cursor: pointer;
transition: background-color 0.2s ease;
font-weight: bold;
}
.antrag-save-popup-content .modal-actions .button.secondary:hover:not(:disabled) {
background-color: var(--border-subtle);
}
.antrag-save-popup-content .modal-actions button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.antrag-save-popup-overlay {
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.antrag-save-popup-content .ai-description-link {
text-decoration: none;
color: var(--color-primary, #46962b);
cursor: pointer;
font-size: 0.9rem;
display: inline-block;
margin-left: auto;
margin-top: var(--spacing-xxsmall);
}
.antrag-save-popup-content .ai-description-link-container {
display: flex;
justify-content: flex-end;
margin-top: var(--spacing-xxsmall);
}
.antrag-save-popup-content .ai-description-link[aria-disabled="true"] {
cursor: not-allowed;
opacity: 0.7;
}
.ql-editor {
font-family: 'PT Sans', Arial, sans-serif;
color: var(--font-color);
font-size: 1.2em;
line-height: 1.5;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 40px;
height: auto;
-webkit-user-select: text;
user-select: text;
border: none !important;
overflow-x: hidden;
overflow-y: visible;
}
.ql-editor:focus {
border: none !important;
outline: none !important;
}
.quill {
border: none !important;
}
.quill:hover {
border: none !important;
}
.quill:focus {
border: none !important;
outline: none !important;
}
.ql-container.ql-snow {
border: none !important;
}
.ql-editor.ql-blank {
border: none;
}
.ql-editor::selection {
background-color: #fff2b3; /* Pastel yellow for light mode */
color: #464646; /* Dark gray text */
}
[data-theme="dark"] .ql-editor::selection {
background-color: #4a4419; /* Darker pastel yellow for dark mode */
color: #f8f4ec; /* Light text */
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote {
color: var(--font-color);
font-size: 1em !important;
font-family: 'PT Sans', Arial, sans-serif;
}
.ql-editor p {
margin-bottom: 1em !important;
}
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
color: var(--font-color);
font-family: 'GrueneType', Arial, sans-serif;
font-weight: normal;
font-size: 1.5em !important;
}
.ql-container.ql-snow {
border: none;
flex: 1;
}
.ql-editor .ql-bg-yellow,
.ql-editor [style*="background-color: yellow"] {
background-color: #fff2b3 !important; /* Pastel yellow */
color: #464646 !important; /* Dark gray text */
}
[data-theme="dark"] .ql-editor .ql-bg-yellow,
[data-theme="dark"] .ql-editor [style*="background-color: yellow"] {
background-color: #4a4419 !important; /* Darker pastel yellow for dark mode */
color: #f8f4ec !important; /* Light text */
}
.ql-editor .ql-bg-green,
.ql-editor [style*="background-color: green"] {
background-color: var(--klee) !important;
color: white !important;
}
.selected-text-display {
font-size: 0.75rem;
color: #666;
margin: 8px 0;
padding: 4px 8px;
background: var(--secondary);
border-radius: 4px;
white-space: pre-wrap;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
max-width: 100%;
line-height: 1.3;
}
.text-editor.read-only {
border: 2px solid gray;
}
.adjustment-error {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #ff5252;
color: white;
padding: 10px 20px;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 1000;
animation: slideIn 0.3s ease-out;
}
.ql-editor h2:has(+ .platform-section) {
margin: 2rem 0 0 0;
padding: 1rem 1.5rem 1rem 1.5rem !important;
background-color: var(--background-color);
border: var(--border-subtle);
border-bottom: none;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
box-shadow: var(--shadow-sm);
font-family: 'GrueneType', Arial, sans-serif;
font-weight: normal;
font-size: 1.5em !important;
color: var(--font-color-h);
}
.ql-editor h2:not(:has(+ .platform-section)) {
margin-bottom: 1rem;
}
.ql-editor .platform-section {
background-color: var(--background-color);
border-left: var(--border-subtle);
border-right: var(--border-subtle);
border-top: none;
border-bottom: none;
border-radius: 0;
padding: 0.5rem 1.5rem;
margin: 0;
box-shadow: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: 0;
padding-bottom: 0.5rem;
}
.ql-editor .platform-section:not(:has(+ .platform-section)) {
border-bottom: var(--border-subtle);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
}
.ql-editor .platform-section p:last-child,
.ql-editor .platform-section ul:last-child,
.ql-editor .platform-section ol:last-child {
margin-bottom: 0;
}
/*
.ql-editor .platform-section[data-platform="FACEBOOK"] h2 { ... }
.ql-editor .platform-section[data-platform="INSTAGRAM"] h2 { ... }
...
*/
.base-container.editing-mode .ql-editor {
overflow-y: auto !important;
max-height: 75vh;
min-height: 200px;
}
@media (max-width: 768px) {
.base-container.editing-mode {
height: 100vh;
overflow: hidden;
}
.base-container.editing-mode .display-container {
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.base-container.editing-mode .display-container .text-editor {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.base-container.editing-mode .display-container .ql-container {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.base-container.editing-mode .display-container .ql-editor {
flex: 1;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
font-size: 14px !important;
padding: 12px 0px;
}
.editing-mode .ql-container {
padding: 0;
}
.text-editor .ql-toolbar.ql-snow {
display: flex !important;
padding: 4px !important;
position: sticky;
top: 0;
background: var(--background-color);
z-index: 100;
border-bottom: 1px solid var(--hellgrau) !important;
flex-wrap: wrap;
justify-content: space-between;
}
.text-editor .ql-toolbar.ql-snow .ql-formats {
margin-right: 3px;
margin-bottom: 3px;
}
.text-editor .ql-toolbar.ql-snow button {
padding: 2px 3px;
width: 26px;
height: 26px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
width: 18px !important;
height: 18px !important;
stroke-width: 2px !important;
transform: scale(1.2) !important;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
padding: 6px !important;
margin: 0 2px !important;
min-width: 32px !important;
min-height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.ql-snow.ql-toolbar .ql-formats,
.ql-snow .ql-toolbar .ql-formats {
margin-right: 6px !important;
margin-bottom: 6px !important;
}
.adjust-form {
flex-direction: column;
align-items: stretch;
}
.input-wrapper {
margin-bottom: 5px;
}
.adjust-input {
width: 100%;
}
.adjust-submit {
width: 100%;
margin-left: 0;
}
.confirmation-container {
flex-direction: column;
align-items: stretch;
}
.confirmation-container p {
margin-bottom: 5px;
text-align: center;
}
.confirmation-buttons {
display: flex;
justify-content: center;
}
.ql-adjust-text.custom-button,
.adjust-form,
.confirmation-container,
.custom-context-menu {
display: none !important;
}
.editor-toolbar-wrapper.read-only .ql-toolbar.ql-snow {
display: none !important;
}
.ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
font-size: 1.2em !important;
}
}
.text-editor {
position: relative;
display: flex;
flex-direction: column;
height: 100vh;
}
.generated-content-wrapper {
position: relative;
}
.input-wrapper {
position: relative;
flex-grow: 1;
}
@keyframes slideIn {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.ql-adjust-text.custom-button,
.adjust-form,
.confirmation-container {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.ql-adjust-text.custom-button.hidden,
.adjust-form.hidden,
.confirmation-container.hidden {
opacity: 0;
transform: scale(0.95);
pointer-events: none;
}
.text-editor .ql-toolbar.ql-snow {
position: sticky;
top: 0;
z-index: 100;
border: none;
color: var(--primary);
padding: 5px 0px;
}
.ql-toolbar.ql-snow .ql-formats {
margin-right: 15px;
}
.ql-toolbar.ql-snow button, .ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
color: var(--font-color-h) !important;
border: none;
background: none;
cursor: pointer;
padding: 5px 5px;
width: 28px;
height: 28px;
transition: color 0.3s ease;
}
.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected
{
color: var(--font-color-h) !important;
}
.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow button:focus,
.ql-toolbar.ql-snow button.ql-active {
color: var(--klee);
}
.ql-toolbar .ql-stroke {
stroke: var(--font-color-h) !important;
fill: none;
}
.ql-toolbar .ql-fill {
fill: var(--font-color-h) !important;
fill: none;
}
.ql-toolbar .ql-stroke-miter {
stroke: var(--font-color-h) !important;
fill: none;
}
.ql-toolbar .ql-stroke:hover, .ql-toolbar .ql-stroke-miter:hover, .ql-toolbar .ql-fill:hover {
fill: var(--klee) !important;
}
.ql-toolbar button:hover .ql-stroke,
.ql-toolbar button.ql-active .ql-stroke {
stroke: var(--klee);
}
.ql-toolbar button:hover .ql-fill,
.ql-toolbar button.ql-active .ql-fill {
fill: var(--klee);
}
.editor-toolbar-wrapper.read-only .ql-toolbar {
display: none;
}
.ql-snow .ql-emoji {
width: 24px;
height: 24px;
}
.ql-emoji-list {
background: var(--weiß);
border: 1px solid var(--hellgrau);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.ql-emoji-list .emoji-categories {
border-bottom: 1px solid var(--hellgrau);
}
.ql-emoji-list .emoji-item {
cursor: pointer;
padding: 4px;
border-radius: 4px;
}
.ql-emoji-list .emoji-item:hover {
background-color: var(--secondary);
}
.ql-adjust-text.custom-button {
display: flex;
align-items: center;
padding: 6px 10px;
color: var(--font-color-h);
background-color: transparent;
border: 1px solid var(--hellgrau);
border-radius: 3px;
cursor: pointer;
font-size: 0.9em;
transition: background-color 0.3s ease, color 0.3s ease;
}
.ql-adjust-text.custom-button:hover {
color: var(--klee);
}
.ql-adjust-text.custom-button .adjust-icon,
.ql-adjust-text.custom-button .adjust-text {
transition: color 0.3s ease;
}
.ql-adjust-text.custom-button:hover .adjust-icon,
.ql-adjust-text.custom-button:hover .adjust-text {
color: var(--klee);
}
.adjust-content {
display: flex;
align-items: center;
}
.adjust-icon {
margin-right: 6px;
width: 16px;
height: 16px;
flex-shrink: 0;
transition: filter 0.3s ease;
}
.adjust-text {
display: inline-block;
white-space: nowrap;
}
.adjust-container {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
background-color: white;
border: 1px solid var(--hellgrau);
border-radius: 3px;
padding: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
width: 300px;
}
.adjust-form {
display: flex;
align-items: center;
width: 100%;
}
.adjust-input {
font-family: 'PT Sans', Arial, sans-serif;
width: 100%;
padding: 10px;
border: none;
border-radius: 4px;
box-sizing: border-box;
font-size: 0.9em;
outline: none;
color: #333;
background-color: var(--weiß);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
margin-top: 15px;
margin-bottom: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.adjust-input:focus {
border: 2px solid var(--grashalm);
padding: 8px;
box-shadow: 0 0 0 2px rgba(var(--klee-rgb), 0.2);
}
.adjust-submit, .cancel-adjust {
padding: 6px 10px;
background-color: var(--klee);
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
margin-left: 4px;
}
.adjust-submit:hover, .cancel-adjust:hover {
background-color: var(--grashalm);
}
.cancel-adjust {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: var(--font-color-h);
}
.adjust-submit {
background-color: var(--klee);
color: var(--font-color-h);
border: none;
border-radius: 3px;
padding: 6px 12px;
cursor: pointer;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.adjust-submit .icon,
.adjust-submit .loading-icon {
font-size: 16px;
}
.adjust-submit.loading .loading-icon {
animation: spin 1s linear infinite;
}
.confirmation-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
color: var(--font-color);
border-radius: 4px;
}
.confirmation-container p {
margin: 0;
font-weight: bold;
}
.confirmation-buttons {
display: flex;
gap: 8px;
}
.confirm-adjust, .reject-adjust {
padding: 5px 10px;
border: none;
border-radius: 3px;
cursor: pointer;
font-weight: bold;
}
.confirm-adjust {
background-color: var(--klee);
color: var(--font-color-h);
}
.reject-adjust {
background-color: var(--secondary);
color: var(--primary);
}
.confirm-adjust:hover, .reject-adjust:hover {
opacity: 0.8;
}
.loading-text {
display: none;
}
.text-editor {
position: relative;
display: flex;
flex-direction: column;
height: 100vh;
overflow-x: hidden;
}
.quill {
overflow-x: hidden;
}
.sharepic-base-container {
display: flex;
width: 100%;
max-width: 1200px;
margin: 0 auto;
gap: 20px;
position: relative;
align-items: stretch;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}
.sharepic-base-container .form-container {
flex: 1 1 50%;
max-width: 50%;
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 8px;
background-color: var(--card-background);
border: 1px solid var(--border-subtle);
align-self: flex-start;
transition: all 0.3s ease-in-out;
}
.sharepic-base-container .display-container {
flex: 1 1 50%;
max-width: 50%;
width: 50%;
display: flex;
flex-direction: column;
padding: 25px;
border-radius: 8px;
background-color: var(--background-color-alt);
transition: padding 0.3s ease-in-out;
}
.sharepic-base-container.result-step .form-container {
flex: 0 0 65%;
max-width: 65%;
width: 65%;
}
.sharepic-base-container.result-step .display-container {
flex: 0 0 35%;
max-width: 35%;
width: 35%;
}
.image-modification-controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 1.5rem;
}
.image-modification-controls .left-column,
.image-modification-controls .right-column {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.textzeilen-group,
.absender-group,
.color-controls,
.font-size-group,
.social-media-group {
background: rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.textzeilen-group h3,
.absender-group h3,
.color-controls h3,
.font-size-group h3,
.social-media-group h3 {
color: var(--font-color);
margin: 0;
font-size: 1.1em;
font-weight: 600;
}
.textzeilen-group p,
.absender-group p,
.color-controls p,
.font-size-group p,
.social-media-group p {
color: var(--font-color);
margin: 0 0 0.5rem 0;
font-size: 0.9em;
opacity: 0.9;
line-height: 1.4;
}
.color-scheme-control,
.font-size-control,
.credit-control {
margin-top: 0.5rem;
}
.color-scheme-control {
width: 100%;
}
.color-scheme-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 1rem;
width: 100%;
justify-content: center;
align-items: start;
}
.color-scheme-option {
cursor: pointer;
transition: transform 0.3s ease;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.color-scheme-image {
width: auto;
height: auto;
display: block;
border-radius: 8px;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.color-scheme-option.active .color-scheme-image {
border-color: var(--secondary);
transform: scale(0.95);
}
.color-scheme-option:hover .color-scheme-image {
border-color: var(--klee);
transform: scale(0.98);
}
.font-size-control {
margin: 0;
}
.font-size-buttons {
display: flex;
gap: 0.75rem;
}
.font-size-buttons button {
flex: 1;
padding: 0.75rem;
border-radius: 4px;
border: 2px solid var(--weiß);
color: var(--weiß);
background-color: transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.font-size-buttons button:hover {
background-color: var(--grashalm);
}
.font-size-buttons button.active {
background-color: var(--klee);
}
/* Sharepic credit control input styles - DISABLED to prevent conflicts with main form-inputs.css */
/*
.credit-control input {
width: 100%;
padding: 0.75rem;
border-radius: 4px;
border: 2px solid var(--weiß);
background-color: rgba(0, 0, 0, 0.2);
color: var(--weiß);
font-size: 1em;
transition: all 0.3s ease;
}
.credit-control input:focus {
outline: none;
border-color: var(--klee);
background-color: rgba(0, 0, 0, 0.3);
}
.credit-control input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
*/
.social-media-buttons {
display: flex;
gap: var(--spacing-medium);
flex-wrap: wrap;
}
.social-media-button,
.alttext-button {
flex: 1;
min-width: 140px;
padding: 0.75rem;
background-color: var(--klee);
color: var(--weiß);
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
margin: 0;
font-weight: 600;
text-align: center;
}
.social-media-button:hover,
.alttext-button:hover:not(:disabled) {
background-color: var(--grashalm);
}
.alttext-button:disabled {
background-color: var(--font-color-disabled);
cursor: not-allowed;
opacity: 0.6;
}
/* Alt Text Inline Section */
.alt-text-inline-section {
margin-top: var(--spacing-large);
padding: var(--spacing-large);
background-color: var(--background-color-alt);
border-radius: var(--card-border-radius-medium);
border: 1px solid var(--border-subtle);
}
.alt-text-header {
display: flex;
align-items: center;
gap: var(--spacing-small);
margin-bottom: var(--spacing-medium);
}
.alt-text-header h3 {
margin: 0;
color: var(--font-color-h);
font-size: 1.1rem;
font-weight: 600;
}
.alt-text-loading {
display: flex;
align-items: center;
gap: var(--spacing-small);
color: var(--font-color);
padding: var(--spacing-medium);
}
.loading-spinner {
animation: spin 1s linear infinite;
font-size: 1.2rem;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.alt-text-error {
display: flex;
align-items: center;
gap: var(--spacing-small);
color: var(--error-color);
background-color: var(--error-background);
padding: var(--spacing-medium);
border-radius: var(--card-border-radius-small);
border: 1px solid var(--error-color);
}
.alt-text-content-wrapper {
display: flex;
gap: var(--spacing-medium);
align-items: flex-start;
}
.alt-text-content {
flex: 1;
background-color: var(--card-background);
padding: var(--spacing-medium);
border-radius: var(--card-border-radius-small);
border: 2px solid var(--interactive-accent-color);
color: var(--font-color);
line-height: 1.6;
white-space: pre-wrap;
word-wrap: break-word;
}
.alt-text-copy-button {
flex-shrink: 0;
align-self: flex-start;
}
/* HelpTooltip link styling within alt-text section */
.alt-text-inline-section .help-tooltip-content a {
color: var(--interactive-accent-color);
text-decoration: none;
font-weight: 500;
display: inline-block;
margin-top: var(--spacing-xsmall);
}
.alt-text-inline-section .help-tooltip-content a:hover {
text-decoration: underline;
}
/* Mobile responsiveness for alt-text section */
@media (max-width: 768px) {
.alt-text-content-wrapper {
flex-direction: column;
gap: var(--spacing-small);
}
.alt-text-copy-button {
align-self: stretch;
}
.alt-text-inline-section {
padding: var(--spacing-medium);
}
}
.sharepic-form-container h3,
.sharepic-form-container h4 {
color: var(--font-color);
margin-bottom: 0;
}
.sharepic-advanced-editing-button-container {
margin: 2rem 0;
width: 100%;
}
.sharepic-advanced-editing-button {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem;
background-color: transparent;
color: var(--weiß);
border: 2px solid var(--weiß);
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
@media (max-width: 1024px) {
.sharepic-image-modification-controls {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.sharepic-base-container {
flex-direction: column;
gap: 16px;
padding: 16px;
margin: 0;
}
.sharepic-base-container .form-container,
.sharepic-base-container .display-container,
.sharepic-base-container.result-step .form-container,
.sharepic-base-container.result-step .display-container {
flex: 1 1 100%;
max-width: 100%;
width: 100%;
margin: 0;
padding: 16px;
}
.sharepic-base-container.result-step {
display: flex;
flex-direction: column;
}
.sharepic-base-container.result-step .display-container {
order: -1;
}
.sharepic-base-container.result-step .form-container {
width: 100%;
max-width: 100%;
}
.image-modification-controls {
grid-template-columns: 1fr;
gap: 1rem;
}
.textzeilen-group,
.absender-group,
.color-controls,
.font-size-group,
.social-media-group {
padding: 1rem;
}
.textzeilen-group h3,
.absender-group h3,
.color-controls h3,
.font-size-group h3,
.social-media-group h3 {
font-size: 1em;
margin-bottom: 0.5rem;
}
.textzeilen-group p,
.absender-group p,
.color-controls p,
.font-size-group p,
.social-media-group p {
font-size: 0.9em;
margin-bottom: 0.5rem;
}
.button-container {
flex-direction: column;
gap: 0.75rem;
}
.button-container .button-wrapper {
width: 100%;
}
.font-size-buttons {
flex-wrap: wrap;
}
.font-size-buttons button {
flex: 1 1 calc(50% - 0.375rem);
padding: 0.5rem;
font-size: 0.9em;
}
.color-scheme-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.color-scheme-image {
width: 100%;
height: auto;
}
.credit-control input {
padding: 0.5rem;
font-size: 0.9em;
}
.social-media-button {
padding: 0.5rem;
font-size: 0.9em;
}
.sticky-sharepic-container {
position: sticky;
top: 0;
z-index: 10;
padding: 1rem;
margin: -1rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.sticky-sharepic {
width: 100%;
height: auto;
border-radius: 4px;
}
input[type="text"],
textarea {
font-size: 16px;
padding: 0.75rem;
}
button,
.button-wrapper {
min-height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
.sharepic-base-container * {
transition: none !important;
}
}
.button-container {
display: flex;
gap: 1rem;
width: 100%;
margin-bottom: 1rem;
}
.button-container .button-wrapper {
flex: 1;
}
.button-container .form-button,
.button-container .back-button,
.button-container .sharepic-file-input-text,
.button-container .sharepic-unsplash-search-button {
width: 100%;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
}
.sharepic-unsplash-search-button {
padding: 0.5rem 1rem;
background-color: var(--primary);
color: var(--weiß);
border: 2px solid var(--weiß);
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.sharepic-unsplash-search-button svg {
margin-right: 8px;
}
.sharepic-unsplash-search-button:hover {
background-color: var(--klee);
}
@media (max-width: 768px) {
.button-container {
flex-direction: row;
gap: 0.75rem;
}
.button-container .button-wrapper {
flex: 1;
}
.button-container .form-button,
.button-container .back-button,
.button-container .sharepic-file-input-text,
.button-container .sharepic-unsplash-search-button {
height: 48px;
}
}
.advanced-editing-button-container {
margin-top: 2rem;
width: 100%;
display: flex;
justify-content: center;
}
.advanced-editing-button {
width: auto;
min-width: 250px;
}
.type-selector-screen {
min-height: calc(100vh - 80px);
width: 100%;
background: var(--background-color);
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
margin-top: 60px;
}
.type-selector-content {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.type-selector-content h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--font-color-h);
}
.type-selector-intro {
font-size: 1.2rem;
margin-bottom: 3rem;
color: var(--font-color);
}
.type-options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 2rem;
}
.type-card {
background: var(--background-color-alt);
border-radius: 12px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
border: 2px solid transparent;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.type-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
border-color: var(--primary);
background: var(--background-color);
}
.type-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.type-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--font-color-h3);
text-align: center;
}
.type-card p {
font-size: 1rem;
line-height: 1.5;
margin-bottom: 1.5rem;
color: var(--font-color);
}
@media (max-width: 1024px) and (min-width: 769px) {
.type-options-grid {
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.type-card {
padding: 1.75rem;
}
}
@media (max-width: 768px) {
.type-selector-screen {
padding: 1rem;
}
.type-selector-content {
padding: 1rem;
}
.type-selector-content h1 {
font-size: 2rem;
}
.type-options-grid {
grid-template-columns: 1fr;
}
.type-card {
padding: 1.5rem;
}
}
.auth-container {
max-width: 450px;
margin: auto;
padding: var(--spacing-large) var(--spacing-medium);
margin-top: 50px;
margin-bottom: 50px;
background-color: var(--card-background);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--card-shadow-floating);
}
.auth-header {
margin-bottom: var(--spacing-large);
text-align: center;
}
.auth-header h1 {
color: var(--font-color-h);
font-family: 'GrueneType', Arial, sans-serif;
margin-bottom: var(--spacing-small);
font-size: 2rem;
font-weight: 700;
text-align: center;
background: linear-gradient(135deg, var(--primary) 0%, var(--klee) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme="dark"] .auth-header h1 {
background: none;
-webkit-text-fill-color: var(--secondary);
color: var(--secondary);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .auth-header h1 {
background: none;
-webkit-text-fill-color: var(--secondary);
color: var(--secondary);
}
}
.auth-header h2 {
color: var(--font-color-h3);
margin-bottom: var(--spacing-small);
font-size: 1.2rem;
}
.auth-header p {
color: var(--font-color);
margin-top: 0;
}
.loading-container {
display: flex;
justify-content: center;
padding: 2rem;
}
.auth-form {
display: flex;
flex-direction: column;
}
.auth-form label {
display: block;
margin-bottom: var(--spacing-xxsmall);
color: var(--font-color);
}
/*
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: var(--spacing-small) var(--spacing-small);
border: 1px solid var(--border-subtle);
border-radius: 4px;
background-color: var(--background-color-alt);
color: var(--font-color);
font-size: 1rem;
line-height: 1.5;
transition: border-color 0.2s, box-shadow 0.2s;
} */
/* Auth-specific input focus styles - DISABLED to prevent conflicts with main form-inputs.css */
/*
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: var(--klee);
outline: none;
box-shadow: 0 0 0 2px rgba(var(--klee-rgb), 0.2);
}
.form-input.error-input {
border-color: #ff4d4d;
}
*/
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
background-color: var(--background-color-disabled, #f5f5f5);
color: var(--font-color-disabled, #757575);
cursor: not-allowed;
opacity: 0.7;
}
/* Checkbox Styles */
.form-checkbox {
width: 18px;
height: 18px;
margin: 0;
cursor: pointer;
accent-color: var(--primary);
}
.form-checkbox:focus {
outline: 2px solid var(--klee);
outline-offset: 2px;
}
.form-checkbox:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.checkbox-wrapper {
margin-bottom: var(--spacing-medium);
}
.checkbox-label {
color: var(--font-color);
font-size: 0.95rem;
user-select: none;
}
.checkbox-label a {
color: var(--link-color);
text-decoration: underline;
}
.checkbox-label a:hover {
color: var(--primary);
}
/* Wrapper für Formularfelder */
.form-field-wrapper {
margin-bottom: var(--spacing-medium);
}
.form-field-wrapper label {
display: block;
margin-bottom: var(--spacing-xxsmall);
color: var(--font-color);
font-weight: 500;
}
.form-field-wrapper .help-text {
color: var(--font-color);
opacity: 0.8;
font-size: 0.85rem;
margin-top: var(--spacing-xxsmall);
margin-bottom: 0;
}
/* Password Input Wrapper */
.password-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.password-input-wrapper .form-input {
padding-right: 45px;
}
.password-toggle {
position: absolute;
right: var(--spacing-small);
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
color: var(--font-color);
opacity: 0.7;
transition: opacity 0.2s ease-out;
padding: var(--spacing-xxsmall);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
}
.password-toggle:hover {
opacity: 1;
background-color: rgba(var(--primary-rgb), 0.1);
}
.password-toggle:focus {
outline: 2px solid var(--klee);
outline-offset: 2px;
}
.password-toggle:disabled {
cursor: not-allowed;
opacity: 0.4;
}
/* Spezifische Styles für auth-form Kontext */
.auth-form .form-field-wrapper {
margin-bottom: var(--spacing-medium);
}
.auth-form .form-textarea {
padding: var(--spacing-small);
font-family: inherit;
font-size: 0.95rem;
min-height: 80px;
resize: vertical;
}
.auth-form .error-message {
color: #ff4d4d;
font-size: 0.85rem;
margin-top: var(--spacing-xxsmall);
}
.auth-submit-button {
background-color: var(--primary);
color: white;
border: none;
border-radius: 4px;
padding: var(--spacing-small) var(--spacing-medium);
cursor: pointer;
font-weight: bold;
transition: background-color 0.2s;
margin-top: var(--spacing-small);
text-align: center;
display: inline-block;
}
.auth-submit-button:hover {
background-color: var(--button-hover-color, #005229);
}
/* Email sync hint styling */
.auth-email-sync-hint {
font-size: 0.9rem;
color: var(--font-color-subtle);
margin-bottom: var(--spacing-xsmall);
padding: var(--spacing-xsmall);
background-color: var(--background-color-subtle);
border-radius: 4px;
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
}
.auth-email-sync-button {
margin-left: var(--spacing-xsmall);
font-size: 0.8rem;
padding: 2px 6px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.2s;
}
.auth-email-sync-button:hover {
background-color: var(--primary-color-hover, var(--primary));
}
.auth-submit-button:disabled {
background-color: #b0b0b0;
cursor: not-allowed;
}
.auth-submit-button-link {
display: block;
text-align: center;
text-decoration: none;
}
.auth-links {
margin-top: var(--spacing-large);
text-align: center;
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.auth-links a,
.auth-link-button {
color: var(--link-color);
text-decoration: none;
background: none;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
text-align: center;
}
.auth-links a:hover,
.auth-link-button:hover {
text-decoration: underline;
}
.auth-success-message {
background-color: rgba(var(--klee-rgb), 0.1);
border-left: 4px solid var(--klee);
padding: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
border-radius: 4px;
}
.auth-error-message {
background-color: rgba(255, 77, 77, 0.1);
border-left: 4px solid #ff4d4d;
padding: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
border-radius: 4px;
}
.auth-warning-message {
background-color: rgba(255, 200, 0, 0.1);
border-left: 4px solid var(--sonne);
padding: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
border-radius: 4px;
}
.logout-button {
background-color: transparent;
color: var(--font-color);
border: 1px solid var(--border-subtle);
border-radius: 4px;
padding: var(--spacing-xsmall) var(--spacing-small);
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.logout-button:hover {
background-color: rgba(var(--primary-rgb), 0.1);
color: var(--primary);
}
.mfa-qr-container {
background-color: white;
padding: var(--spacing-medium);
border-radius: 8px;
max-width: 260px;
margin: 0 auto;
margin-bottom: var(--spacing-medium);
box-shadow: var(--shadow-sm);
}
.mfa-qr-container img {
width: 100%;
height: auto;
}
.mfa-secret-code {
display: block;
padding: var(--spacing-small);
background: var(--background-color-alt);
border-radius: 4px;
word-break: break-all;
font-size: 0.9rem;
margin-bottom: var(--spacing-medium);
font-family: monospace;
}
.mfa-verification-input {
font-size: 1.5rem;
text-align: center;
letter-spacing: 0.5rem;
}
.recovery-codes {
background: var(--background-color-alt);
padding: var(--spacing-medium);
border-radius: 8px;
margin-bottom: var(--spacing-medium);
font-family: monospace;
font-size: 0.9rem;
}
.recovery-code-item {
padding: var(--spacing-xsmall) var(--spacing-small);
border-bottom: 1px solid var(--border-subtle);
}
.recovery-code-item:last-child {
border-bottom: none;
}
.recovery-code-actions {
display: flex;
gap: var(--spacing-small);
margin-bottom: var(--spacing-medium);
}
.recovery-code-button {
flex: 1;
padding: var(--spacing-small);
background: var(--background-color);
border: 1px solid var(--border-subtle);
border-radius: 4px;
cursor: pointer;
}
.social-login-buttons {
width: 100%;
}
.social-buttons-divider {
display: flex;
align-items: center;
margin: var(--spacing-medium) 0;
}
.social-buttons-divider-line {
flex-grow: 1;
height: 1px;
background-color: var(--border-subtle);
}
.social-buttons-divider-text {
margin: 0 var(--spacing-small);
color: var(--font-color);
font-size: 0.9rem;
opacity: 0.8;
}
.social-login-button {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-small);
width: 100%;
padding: var(--spacing-small);
margin-bottom: var(--spacing-small);
border: 1px solid var(--border-subtle);
border-radius: 4px;
background-color: var(--background-color);
color: var(--font-color);
font-weight: normal;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
}
.social-login-button:hover {
background-color: var(--background-color-alt);
}
.auth-sso-button {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-small);
width: 100%;
padding: var(--spacing-small);
margin-bottom: var(--spacing-small);
border: 1px solid var(--border-subtle);
border-radius: 4px;
background-color: var(--background-color);
color: var(--font-color);
font-weight: normal;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s, border-color 0.2s;
text-decoration: none;
}
.auth-sso-button:hover {
background-color: var(--background-color-alt);
border-color: var(--border-hover, var(--primary));
}
.auth-sso-button:disabled {
background-color: #b0b0b0;
border-color: #b0b0b0;
color: var(--font-color-disabled, #757575);
cursor: not-allowed;
opacity: 0.7;
}
.auth-sso-button:disabled:hover {
background-color: #b0b0b0;
border-color: #b0b0b0;
}
.gruenes-netz-button {
background-color: var(--primary);
color: var(--weiß);
border-color: var(--primary);
}
.gruenes-netz-button:hover:not(:disabled) {
background-color: var(--klee);
color: var(--weiß);
border-color: var(--klee);
}
.delete-account-warning {
color: #ff4d4d;
margin-top: 0;
}
.delete-button {
background-color: #ff4d4d;
}
.delete-button:hover {
background-color: #e03c3c;
}
.auth-help-text {
color: var(--font-color);
opacity: 0.8;
font-size: 0.9rem;
text-align: center;
margin: 0;
line-height: 1.5;
}
.auth-help-text a {
color: var(--link-color);
text-decoration: none;
font-weight: 500;
transition: color 0.25s ease-out;
}
.auth-help-text a:hover {
color: var(--primary);
text-decoration: underline;
}
/* Legal Notice Styling */
.auth-legal {
margin-top: var(--spacing-large);
text-align: center;
border-top: 1px solid var(--border-subtle);
padding-top: var(--spacing-medium);
}
.auth-legal p {
margin: 0;
color: var(--font-color);
opacity: 0.8;
font-size: 0.85rem;
line-height: 1.5;
}
.auth-legal a {
color: var(--link-color);
text-decoration: none;
font-weight: 500;
transition: color 0.25s ease-out;
}
.auth-legal a:hover {
color: var(--primary);
text-decoration: underline;
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid var(--border-subtle);
border-top: 3px solid var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 480px) {
.auth-container {
padding: var(--spacing-medium) var(--spacing-small);
max-width: 100%;
box-shadow: none;
border-radius: 0;
margin-top: 0;
}
.auth-header h1 {
font-size: 1.75rem;
}
}
/* Logged Out Page specific styles */
.auth-container .auth-success-message h3 {
display: flex;
align-items: center;
gap: var(--spacing-small);
font-size: 1.1rem;
font-weight: 600;
}
.auth-container .auth-success-message {
text-align: center;
}
/* Spacing for consecutive form action buttons only - not navigation */
.auth-form .form-actions button + button,
.auth-form .profile-actions button + button {
margin-top: var(--spacing-small);
}
/* Override vertical margin for horizontal button layouts in profile-actions */
.auth-form .profile-actions button + button {
margin-top: 0;
}
.auth-form button.auth-submit-button:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
transition: all 0.25s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none !important;
transition: none !important;
}
.auth-form button.auth-submit-button:hover {
transform: none;
}
}
.login-options {
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
margin-bottom: var(--spacing-large);
}
.login-option {
display: flex;
align-items: center;
padding: 0;
border: 1.5px solid var(--background-color-alt);
border-radius: var(--spacing-small);
background: var(--background-color);
cursor: pointer;
transition: all 0.25s ease-out;
text-align: left;
min-height: 80px;
position: relative;
font-family: inherit;
}
.login-option:hover:not(:disabled) {
border-color: var(--interactive-accent-color);
background: var(--background-color-alt);
}
.login-option:disabled {
cursor: not-allowed;
opacity: 0.5;
filter: grayscale(50%);
}
.login-option:active:not(:disabled) {
border-color: var(--interactive-accent-color);
}
.login-content {
display: flex;
align-items: center;
gap: var(--spacing-medium);
width: 100%;
padding: var(--spacing-large);
}
.login-icon {
font-size: 2.5rem;
flex-shrink: 0;
width: 50px;
text-align: center;
transition: transform 0.25s ease-out;
}
.login-logo {
width: 50px;
height: 50px;
object-fit: contain;
flex-shrink: 0;
transition: transform 0.25s ease-out;
}
.login-text-content {
display: flex;
flex-direction: column;
gap: var(--spacing-xxsmall);
flex-grow: 1;
}
.login-title {
font-weight: 600;
font-size: 1.2rem;
color: var(--font-color-h);
margin: 0;
font-family: 'GrueneType', Arial, sans-serif;
transition: color 0.25s ease-out;
}
.login-description {
color: var(--font-color);
font-size: 0.9rem;
opacity: 0.8;
margin: 0;
transition: opacity 0.25s ease-out;
}
.login-option:hover .login-description {
opacity: 1;
}
.login-option.primary:hover:not(:disabled) {
border-color: var(--interactive-accent-color);
background: var(--background-color-alt);
}
.login-option.netzbegruenung:hover:not(:disabled) {
border-color: var(--secondary-200);
background: var(--background-color-alt);
}
.login-option.gruenes-netz:hover:not(:disabled) {
border-color: var(--primary-200);
background: var(--background-color-alt);
}
.auth-status-message {
background: var(--background-color-alt);
border: 1px solid var(--border-subtle);
border-radius: var(--spacing-small);
padding: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
text-align: center;
}
.auth-status-message p {
margin: 0;
color: var(--font-color);
font-weight: 500;
}
@media (max-width: 480px) {
.login-content {
padding: var(--spacing-medium);
}
.login-icon {
font-size: 2rem;
width: 40px;
}
.login-logo {
width: 40px;
height: 40px;
}
.login-title {
font-size: 1.1rem;
}
.login-description {
font-size: 0.85rem;
}
.login-option {
min-height: 70px;
}
}
@media (prefers-reduced-motion: reduce) {
.login-option,
.login-icon,
.login-logo,
.login-title,
.login-description,
.auth-status-message {
animation: none !important;
transition: none !important;
}
.login-option:hover .login-icon,
.login-option:hover .login-logo {
transform: none !important;
}
}
.profile-container {
max-width: 100%;
margin: 0 auto;
padding: var(--spacing-large);
background-color: var(--background-color);
border-radius: 8px;
box-shadow: var(--shadow-md);
}
.profile-header {
margin-bottom: var(--spacing-large);
text-align: center;
}
.profile-header h1 {
color: var(--font-color-h);
font-family: 'GrueneType', Arial, sans-serif;
margin-bottom: var(--spacing-small);
}
.profile-header p {
color: var(--font-color);
max-width: 600px;
margin: 0 auto;
}
.profile-tabs {
display: flex;
justify-content: flex-start;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: var(--spacing-large);
overflow-x: auto;
padding-bottom: var(--spacing-xsmall);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.profile-tabs::-webkit-scrollbar {
display: none;
}
.profile-tab {
padding: var(--spacing-small) var(--spacing-medium);
background: none;
border: none;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
position: relative;
overflow: visible;
}
/* Entfernung der alten Stile für aktive und hover Zustände,
da diese nun über motion.div gesteuert werden */
/*
.profile-tab.active {
border-bottom: 2px solid var(--primary);
color: var(--primary);
font-weight: bold;
}
.profile-tab:hover:not(.active) {
border-bottom: 2px solid var(--border-subtle);
background-color: var(--background-color-alt);
}
*/
/* Neuer Stil für die animierte Unterstreichung */
.tab-underline {
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: var(--primary);
border-radius: 1px;
}
.tab-underline-hover {
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background-color: var(--font-color);
border-radius: 1px;
opacity: 0.6;
transform-origin: left;
}
.profile-content {
display: grid;
grid-gap: var(--spacing-large);
margin-top: var(--spacing-medium);
}
@media (min-width: 768px) {
.profile-content {
grid-template-columns: 320px 1fr;
align-items: start;
}
.profile-avatar-section {
grid-column: 1;
}
.profile-form-section {
grid-column: 2;
}
.antraege-section .profile-avatar-section {
grid-column: 1;
}
.antraege-section .profile-form-section {
grid-column: 2;
}
.profile-tabs {
justify-content: center;
}
}
@media (max-width: 767px) {
.profile-container {
padding: var(--spacing-medium);
box-shadow: none;
border-radius: 0;
}
.profile-tabs {
padding-left: 0;
padding-right: 0;
margin-left: calc(-1 * var(--spacing-medium));
margin-right: calc(-1 * var(--spacing-medium));
padding-left: var(--spacing-medium);
padding-right: var(--spacing-medium);
}
.profile-tab {
padding: var(--spacing-small) var(--spacing-small);
font-size: 0.9rem;
}
.profile-form-section,
.profile-avatar-section {
padding: var(--spacing-medium);
}
.profile-avatar {
width: 120px;
height: 120px;
}
.profile-avatar-placeholder {
font-size: 2.5rem;
}
}
.profile-avatar-section {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-large);
background-color: var(--background-color-alt);
border-radius: 8px;
box-shadow: var(--shadow-sm);
margin-bottom: var(--spacing-large);
}
/* Zentralisiertes Styling für .profile-avatar */
.profile-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--primary);
position: relative;
box-shadow: var(--shadow-md);
background-color: var(--background-color-alt);
display: flex;
align-items: center;
justify-content: center;
}
.profile-avatar-placeholder {
width: 100%;
height: 100%;
background-color: var(--klee);
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: white;
font-weight: bold;
letter-spacing: -2px;
}
.profile-user-info {
margin-top: var(--spacing-medium);
text-align: center;
}
.profile-user-name {
font-size: 1.5rem;
font-weight: bold;
margin: var(--spacing-small) 0;
color: var(--font-color-h);
}
.profile-user-email {
font-size: 0.9rem;
color: var(--font-color);
opacity: 0.8;
margin-bottom: var(--spacing-medium);
}
.profile-form-section {
background-color: var(--background-color);
border-radius: 8px;
padding: var(--spacing-large);
box-shadow: var(--shadow-sm);
}
.profile-form-section .auth-form {
max-width: 100%;
}
.profile-form-section label {
font-weight: bold;
margin-top: var(--spacing-xsmall);
}
.profile-actions {
display: flex;
gap: var(--spacing-medium);
margin-top: var(--spacing-large);
flex-wrap: wrap;
}
.profile-actions-centered {
justify-content: center;
}
@media (min-width: 768px) {
.profile-actions {
flex-direction: row;
justify-content: flex-start;
}
}
.profile-action-button {
flex: 1;
min-width: 150px;
padding: var(--spacing-small) var(--spacing-medium);
border-radius: 4px;
font-weight: bold;
cursor: pointer;
text-align: center;
transition: all 0.2s ease;
}
.profile-primary-button {
background-color: var(--primary);
color: white;
border: none;
}
.profile-primary-button:hover {
background-color: var(--button-hover-color, #005229);
}
.profile-secondary-button {
background-color: transparent;
color: var(--font-color);
border: 1px solid var(--border-subtle);
}
.profile-secondary-button:hover {
background-color: var(--background-color-alt);
}
.profile-danger-button {
background-color: transparent;
color: #ff4d4d;
border: 1px solid #ff4d4d;
}
.profile-danger-button:hover {
background-color: rgba(255, 77, 77, 0.1);
}
.profile-small-button {
min-width: auto;
padding: var(--spacing-xsmall) var(--spacing-small);
font-size: 0.85rem;
opacity: 0.8;
text-align: center;
margin: 0 auto;
}
.form-group-title {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: var(--spacing-xsmall);
padding-bottom: var(--spacing-xsmall);
border-bottom: 1px solid var(--border-subtle);
color: var(--font-color-h3);
}
.antraege-list-placeholder {
margin-top: var(--spacing-medium);
padding: var(--spacing-large);
border: 1px dashed var(--border-subtle);
border-radius: 4px;
min-height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: var(--font-color-subtle);
}
.antraege-list-placeholder p {
margin-bottom: var(--spacing-medium);
}
.antraege-list {
list-style: none;
padding: 0;
margin: 0;
}
.antrag-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-medium) 0;
border-bottom: 1px solid var(--border-subtle);
}
.antrag-item:last-child {
border-bottom: none;
}
.antrag-item-link {
flex-grow: 1;
text-decoration: none;
color: inherit;
margin-right: var(--spacing-medium);
display: block;
transition: background-color 0.2s ease;
}
.antrag-item-link:hover {
color: var(--color-primary);
}
.antrag-item-link:hover .antrag-title {
color: var(--primary);
text-decoration: underline;
}
.antrag-details {
flex-grow: 1;
}
.antrag-title {
font-weight: bold;
color: var(--font-color);
margin-bottom: var(--spacing-xxsmall);
}
.antrag-meta {
font-size: 0.9em;
color: var(--font-color-subtle);
}
.antrag-actions button {
padding: var(--spacing-xsmall) var(--spacing-small);
font-size: 0.9em;
cursor: pointer;
border-radius: 4px;
border: 1px solid transparent;
}
.antrag-delete-button {
background-color: transparent;
color: #ff4d4d;
border-color: #ff4d4d;
margin-left: var(--spacing-small);
}
.antrag-delete-button:hover {
background-color: rgba(255, 77, 77, 0.1);
}
.antrag-delete-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.anweisungen-info {
margin-top: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
border-bottom: 1px solid var(--border-subtle);
font-size: 0.9rem;
color: var(--font-color-subtle);
line-height: 1.4;
}
.anweisungen-field {
margin-bottom: var(--spacing-large);
}
.anweisungen-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-xsmall);
}
.anweisungen-textarea {
/* Wir entfernen doppelte Eigenschaften, die bereits in .form-textarea definiert sind */
overflow-y: auto;
transition: height 0.2s ease;
}
.toggle-container {
position: relative;
display: inline-block;
}
.toggle-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle-label {
display: flex;
align-items: center;
cursor: pointer;
font-size: 0.85rem;
user-select: none;
}
.toggle-label::before {
content: '';
display: inline-block;
width: 46px;
height: 24px;
margin-right: var(--spacing-small);
background-color: var(--color-gray-light);
border-radius: 12px;
position: relative;
transition: all 0.3s ease;
}
.toggle-label::after {
content: '';
position: absolute;
left: 4px;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: white;
transition: all 0.3s ease;
}
.toggle-input:checked + .toggle-label::before {
background-color: var(--color-green);
}
.toggle-input:checked + .toggle-label::after {
transform: translateX(22px);
}
.toggle-text {
margin-left: var(--spacing-medium);
font-weight: 500;
}
/* Profile input styles - DISABLED to prevent conflicts with main form-inputs.css */
/*
.profile-container input[type="text"],
.profile-container input[type="email"],
.profile-container input[type="password"],
.profile-container input[type="url"] {
height: 38px;
padding: var(--spacing-xsmall) var(--spacing-small);
}
*/
/* Styling für automatische Erweiterung der Textfelder */
.auto-expand-textarea {
overflow: hidden;
}
.centered-loading {
padding: var(--spacing-large);
text-align: center;
}
.error-message-container {
margin-bottom: var(--spacing-medium);
}
.section-divider {
margin: var(--spacing-xlarge) 0;
border: none;
border-top: 1px solid var(--border-subtle);
}
/* Klassen für Knowledge Entries */
.knowledge-entry {
margin-bottom: var(--spacing-xsmall);
}
.knowledge-entry-bordered {
border-top: 1px solid var(--border-subtle);
}
.knowledge-content-label {
margin-top: var(--spacing-small);
display: block;
}
.character-count {
text-align: right;
font-size: 0.8em;
margin-top: var(--spacing-xxsmall);
}
/* Aktionsbereich für Buttons */
.profile-actions-container {
margin-top: var(--spacing-large);
display: flex;
align-items: center;
gap: var(--spacing-medium);
}
/* Memory tab specific profile actions container */
.profile-actions.profile-actions-container {
margin-top: var(--spacing-large);
}
/* Common inline style replacements */
.auth-error-message.error-margin {
margin-bottom: var(--spacing-medium);
}
.auth-error-message.error-large-margin {
margin: var(--spacing-large);
}
.retry-button {
margin-left: 10px;
}
.form-group-title-container.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-medium);
}
.knowledge-empty-state.centered {
text-align: center;
padding: var(--spacing-large);
background-color: var(--background-color-alt);
border-radius: var(--border-radius-medium);
margin-top: var(--spacing-medium);
}
.knowledge-empty-state.centered p {
margin-top: var(--spacing-small);
color: var(--font-color-subtle);
}
.no-decoration-link {
text-decoration: none;
}
.centered-content-card {
text-align: center;
padding: var(--spacing-large);
}
.warning-icon {
color: var(--color-warning);
margin-bottom: var(--spacing-medium);
}
.info-icon {
color: var(--color-info);
margin-bottom: var(--spacing-medium);
}
.large-profile-title {
font-size: 1.8rem;
}
.medium-profile-title {
font-size: 1.6rem;
}
.plus-icon {
margin-left: var(--spacing-xsmall);
}
.info-icon-inline {
margin-right: var(--spacing-xxsmall);
}
.error-section-title {
color: var(--error-color);
}
.danger-button-spaced {
margin-left: var(--spacing-small);
}
.antrag-status {
margin-right: 8px;
font-style: italic;
}
.pr-text-item {
border-bottom: 1px solid #eee;
padding: 10px 0;
display: flex;
justify-content: space-between;
}
.pr-text-edit-button {
margin-right: 8px;
}
.clickable-avatar {
cursor: pointer;
position: relative;
}
.avatar-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.user-id-display {
font-size: 0.8rem;
color: var(--font-color-subtle);
margin-top: var(--spacing-xxsmall);
}
.add-knowledge-button {
display: flex;
align-items: center;
gap: var(--spacing-xxsmall);
background-color: transparent;
color: var(--font-color);
border: 1px solid var(--border-subtle);
padding: var(--spacing-small) var(--spacing-medium);
border-radius: 4px;
font-weight: bold;
cursor: pointer;
transition: all 0.25s ease-out;
}
.add-knowledge-button:hover:not(:disabled) {
background-color: var(--background-color-alt);
transform: translateY(-1px);
}
.add-knowledge-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Gruppen-spezifische Klassen */
.gruppen-info {
margin-bottom: var(--spacing-large);
}
.group-delete-button {
margin-left: var(--spacing-medium);
}
.icon-button {
display: flex;
align-items: center;
justify-content: center;
}
.danger {
color: #ff4d4d;
background-color: transparent;
}
/* Nachrichtenbereich für Erfolg/Fehler */
.profile-message-area {
padding: var(--spacing-small) 0;
}
/* Stile für Tab-Ladebereich */
.profile-tab-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-large);
gap: var(--spacing-medium);
}
.labor-tab-external-link {
margin-top: var(--spacing-medium);
display: inline-flex;
align-items: center;
}
.labor-tab-title {
text-transform: capitalize;
margin-bottom: var(--spacing-medium);
}
.labor-tab-help-text {
margin-bottom: var(--spacing-large);
}
.labor-tab-checkbox-container {
/* Container für Checkboxen im Labor Tab */
}
.labor-tab-external-link-icon {
margin-left: var(--spacing-xxsmall);
}
/* Account Management Styles for ProfileInfoTab */
.profile-danger-zone {
border: 1px solid var(--error-red, #dc3545);
border-radius: var(--spacing-small);
padding: var(--spacing-medium);
background-color: var(--background-color-alt);
}
.profile-danger-button {
background-color: var(--error-red, #dc3545);
color: var(--weiß);
border: 1px solid var(--error-red, #dc3545);
transition: all 0.25s ease-out;
}
.profile-danger-button:hover:not(:disabled) {
background-color: #c82333;
border-color: #c82333;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.profile-danger-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.account-deletion-warning {
background-color: var(--background-color-alt);
border: 1px solid var(--error-red, #dc3545);
border-radius: var(--spacing-small);
padding: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
}
.account-deletion-warning h4 {
margin: 0 0 var(--spacing-small) 0;
color: var(--error-red, #dc3545);
font-size: 1rem;
font-weight: 600;
}
.account-deletion-warning ul {
margin: 0;
padding-left: var(--spacing-medium);
color: var(--font-color);
}
.account-deletion-warning ul li {
margin-bottom: var(--spacing-xsmall);
}
/* Password input wrapper for registration page */
.password-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.password-input-wrapper input {
flex: 1;
padding-right: var(--spacing-xlarge);
}
.password-toggle {
position: absolute;
right: var(--spacing-small);
background: none;
border: none;
cursor: pointer;
padding: var(--spacing-xsmall);
border-radius: var(--spacing-xsmall);
transition: background-color 0.25s ease-out;
}
.password-toggle:hover:not(:disabled) {
background-color: var(--background-color-alt);
}
.password-toggle:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.password-requirements {
margin-top: var(--spacing-xsmall);
}
.password-requirements small {
color: var(--font-color);
opacity: 0.8;
font-size: 0.9rem;
}
/* Field errors */
.field-error {
color: var(--red);
font-size: 0.875rem;
margin-top: var(--spacing-xsmall);
}
/* Admin Badge und Notice Styles */
.admin-badge {
font-size: 0.75rem;
color: var(--yellow);
font-weight: normal;
opacity: 0.8;
}
.labor-tab-admin-notice {
margin-top: var(--spacing-large);
padding: var(--spacing-medium);
background-color: var(--background-color-alt);
border-left: 4px solid var(--primary);
border-radius: 4px;
}
.labor-tab-admin-notice p {
margin: 0;
color: var(--font-color);
font-size: 0.9rem;
}
.labor-tab-content {
padding: var(--spacing-medium);
}
/* Memory Tab Styles */
.memories-container {
margin-top: var(--spacing-medium);
}
.memories-list {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.memory-item {
padding: var(--spacing-medium);
background-color: var(--background-color-alt);
border: var(--border-subtle);
border-radius: var(--spacing-small);
transition: all 0.25s ease-out;
}
.memory-item:hover {
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.memory-content {
margin-bottom: var(--spacing-small);
}
.memory-content p {
margin: 0;
color: var(--font-color);
line-height: 1.5;
}
.memory-metadata {
border-top: var(--border-subtle);
padding-top: var(--spacing-small);
}
.memory-metadata small {
color: var(--font-color);
opacity: 0.7;
font-size: 0.85rem;
}
/* Full-width tab content for components that need more space */
.profile-tab-content-full-width {
/* Override any existing grid or flex constraints */
display: block;
max-width: 100%;
width: 100%;
}
/* Profile Tab Layout Styles
Shared layout components used across multiple profile tabs
========================================================================== */
/* Two-column layout for profile tabs with navigation + content */
.profile-management-layout {
display: grid;
gap: var(--spacing-large);
align-items: flex-start;
}
/* Navigation panel (left column) */
.profile-navigation-panel {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
padding-right: var(--spacing-medium);
align-items: center;
}
/* Vertical navigation container */
.profile-vertical-navigation {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}
/* Vertical navigation tabs */
.profile-vertical-tab {
width: 100%;
max-width: 220px;
padding: var(--spacing-xsmall) var(--spacing-large);
background: var(--background-color);
border: var(--border-subtle);
border-radius: 20px;
color: var(--font-color);
cursor: pointer;
white-space: normal;
transition: all 0.2s ease;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.3;
word-break: break-word;
hyphens: auto;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
gap: var(--spacing-small);
margin-bottom: var(--spacing-small);
}
.profile-vertical-tab.active {
background: var(--background-color-alt);
border-color: var(--interactive-accent-color);
color: var(--interactive-accent-color);
font-weight: 600;
}
.profile-vertical-tab:hover:not(.active) {
background: var(--background-color-alt);
border-color: var(--interactive-accent-color);
color: var(--interactive-accent-color);
}
.profile-vertical-tab:disabled {
opacity: 0.6;
cursor: not-allowed;
background: var(--background-color-alt);
border-color: var(--border-color-disabled);
color: var(--font-color-disabled);
}
/* Content panel (right column) */
.profile-content-panel {
min-width: 0;
}
/* Content card wrapper */
.profile-content-card {
/* Generic content card - inherits from profile-form-section styling */
}
/* Header section with title and actions */
.profile-header-section {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--spacing-large);
}
/* Info panel for profile tab headers */
.profile-info-panel {
margin-bottom: var(--spacing-xlarge);
}
.profile-info-panel .profile-user-name {
font-size: 1.8rem !important;
margin-bottom: 0 !important;
}
/* Full-width layout for tabs that don't need navigation */
.profile-full-width-layout {
width: 100%;
display: block;
}
/* Responsive behavior for mobile */
@media (max-width: 768px) {
.profile-management-layout {
grid-template-columns: 1fr;
}
.profile-navigation-panel {
display: flex;
padding-right: 0;
margin-bottom: var(--spacing-large);
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--spacing-xsmall);
}
.profile-vertical-navigation {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-xsmall) var(--spacing-small);
width: 100%;
}
.profile-vertical-tab {
width: fit-content;
text-align: center;
padding-left: var(--spacing-medium);
padding-right: var(--spacing-medium);
margin: calc(var(--spacing-xxxsmall) / 2) var(--spacing-xsmall);
max-width: 200px;
flex-grow: 0;
flex-shrink: 0;
}
}
/* Profile Cards - Reusable Card Styles */
.profile-cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-large);
}
.profile-card {
background-color: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--card-shadow-subtle);
overflow: hidden;
transition: var(--input-transition);
display: flex;
flex-direction: column;
}
.profile-card:hover {
box-shadow: var(--card-shadow-elevated);
}
.profile-card-header {
padding: var(--spacing-medium) var(--spacing-large);
border-bottom: var(--card-border);
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.profile-card-header h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--font-color-h3);
}
.profile-card-content {
padding: var(--spacing-large);
flex-grow: 1;
}
.profile-card-content .help-tooltip {
margin-bottom: var(--spacing-medium);
}
@media (max-width: 768px) {
.profile-cards-grid {
grid-template-columns: 1fr;
gap: var(--spacing-medium);
}
.profile-card-header {
padding: var(--spacing-medium);
}
.profile-card-content {
padding: var(--spacing-medium);
}
}
/* Styles for memories grid */
.memories-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-medium);
}
@media (min-width: 992px) {
.memories-grid {
grid-template-columns: 1fr 1fr;
}
}
/*
* Bubble Animation Styles für den Labor-Tab
*/
.bubble-container {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10px;
overflow: visible;
pointer-events: none;
z-index: 1;
}
.bubble {
position: absolute;
border-radius: 50%;
transform-origin: center center;
background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.5), rgba(161, 224, 186, 0.6));
box-shadow: 0 0 2px rgba(255, 255, 255, 0.8) inset;
}
/* Wrapper für Positionierung der Bubbles relativ zum Tab */
.bubble-tab-wrapper {
position: relative;
display: inline-block;
}
/* Container für Positionierung */
.bubbles-position-wrapper {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 0;
overflow: visible;
pointer-events: none;
}
/* Mobile Optimierung */
@media (max-width: 767px) {
.bubble {
/* Kleinere Blasen auf mobilen Geräten */
transform: scale(0.8);
}
}
/* Mem0ry Tab Specific Styles */
.group-description {
margin: var(--spacing-small) 0;
color: var(--font-color-disabled);
font-size: 0.95rem;
line-height: 1.4;
}
.empty-state-icon {
color: var(--interactive-accent-color);
margin-bottom: var(--spacing-medium);
}
.empty-state-description {
margin-top: var(--spacing-small);
color: var(--font-color-disabled);
font-size: 0.9rem;
line-height: 1.4;
}
.knowledge-empty-state {
text-align: center;
padding: var(--spacing-large);
background-color: var(--background-color-alt);
border-radius: var(--card-border-radius-medium);
margin-top: var(--spacing-medium);
}
.memory-content {
padding: var(--spacing-medium);
background-color: var(--card-background);
border-radius: var(--card-border-radius-small);
border: var(--card-border);
transition: var(--input-transition);
}
.memory-text {
font-weight: 500;
margin-bottom: var(--spacing-small);
color: var(--font-color);
line-height: 1.5;
margin: 0;
}
.memory-metadata {
font-size: 0.85rem;
color: var(--font-color-disabled);
margin-top: var(--spacing-small);
padding-top: var(--spacing-small);
border-top: var(--border-subtle);
display: flex;
align-items: center;
gap: var(--spacing-small);
flex-wrap: wrap;
}
.metadata-badge {
display: inline-block;
padding: 2px 8px;
background-color: var(--hover-color-alt);
color: var(--interactive-accent-color);
border-radius: var(--card-border-radius-small);
font-size: 0.75rem;
font-weight: 500;
text-transform: capitalize;
}
.memory-timestamp {
font-size: 0.8rem;
color: var(--font-color-disabled);
opacity: 0.8;
}
/* Profile actions with icons */
.profile-actions button {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
}
.profile-actions svg {
flex-shrink: 0;
}
/* Auth error message with icons */
.auth-error-message {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
margin: var(--spacing-medium) 0;
}
.auth-error-message svg {
flex-shrink: 0;
}
/* Profile content centered for loading */
.profile-content-centered {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-large);
min-height: 200px;
}
/* Enhanced memory list styling */
.memories-list .knowledge-entry {
transition: all 0.25s ease-out;
}
.memories-list .knowledge-entry:hover {
transform: translateY(-1px);
}
.memories-list .form-field-wrapper {
margin-bottom: 0;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.memory-metadata {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xsmall);
}
.metadata-badge {
align-self: flex-start;
}
.profile-actions {
flex-direction: column;
}
.profile-actions button {
width: 100%;
justify-content: center;
}
}
/* Memory Header with Delete Button */
.memory-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--spacing-small);
}
.delete-memory-button {
background: none;
border: none;
color: var(--error-red);
cursor: pointer;
padding: var(--spacing-xsmall);
border-radius: var(--card-border-radius-small);
transition: var(--input-transition);
flex-shrink: 0;
opacity: 0.7;
}
.delete-memory-button:hover {
opacity: 1;
background-color: var(--input-background);
transform: scale(1.05);
}
.delete-memory-button:focus {
outline: 2px solid var(--error-red);
outline-offset: 2px;
}
/* Title Actions Container */
.title-actions {
display: flex;
gap: var(--spacing-small);
align-items: center;
}
/* Form Group Title Container - for header with button on right */
.form-group-title-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.add-knowledge-button.danger {
background-color: var(--error-red);
color: var(--white);
}
.add-knowledge-button.danger:hover {
background-color: var(--grey-800);
}
/* Form Help Text */
.form-help-text {
margin-top: var(--spacing-xsmall);
font-size: 0.9rem;
color: var(--font-color-disabled);
line-height: 1.4;
}
/* Memory Settings Toggle Spacing */
.form-group .feature-toggle {
margin-top: var(--spacing-large);
margin-bottom: var(--spacing-medium);
}
/* Delete All Memories Link */
.delete-all-container {
margin-top: var(--spacing-medium);
text-align: center;
padding-top: var(--spacing-medium);
border-top: var(--border-subtle);
}
.delete-all-link {
background: none;
border: none;
color: var(--error-red);
cursor: pointer;
font-size: 0.85rem;
text-decoration: underline;
padding: var(--spacing-xsmall);
border-radius: var(--card-border-radius-small);
transition: var(--input-transition);
opacity: 0.8;
}
.delete-all-link:hover {
opacity: 1;
background-color: var(--input-background);
text-decoration: none;
}
.delete-all-link:focus {
outline: 2px solid var(--error-red);
outline-offset: 2px;
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
.memory-content,
.memories-list .knowledge-entry,
.delete-memory-button,
.delete-all-link {
transition: none;
}
.memory-content:hover,
.memories-list .knowledge-entry:hover,
.delete-memory-button:hover {
transform: none;
}
}
/* Mobile Responsive */
@media (max-width: 768px) {
.memory-header {
flex-direction: column;
align-items: stretch;
}
.delete-memory-button {
align-self: flex-end;
margin-top: var(--spacing-xsmall);
}
.title-actions {
flex-direction: column;
width: 100%;
}
.title-actions button {
width: 100%;
justify-content: center;
}
}
/* Document Upload Component Styling */
.file-dropzone {
border: 2px dashed var(--border-color);
border-radius: var(--card-border-radius);
padding: var(--spacing-large);
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
background: var(--background-color-alt);
}
.file-dropzone:hover,
.file-dropzone.active {
border-color: var(--primary-color);
background: var(--background-color);
}
.file-dropzone.has-file {
border-color: var(--success-color);
background: var(--background-color);
}
.upload-icon {
font-size: 3rem;
color: var(--font-color-disabled);
margin-bottom: var(--spacing-small);
}
.file-requirements {
font-size: 0.875rem;
color: var(--font-color-disabled);
margin-top: var(--spacing-xsmall);
}
.file-selected {
display: flex;
align-items: center;
gap: var(--spacing-small);
color: var(--success-color);
}
.file-icon {
font-size: 1.5rem;
}
.file-name {
font-weight: 500;
}
.file-size {
color: var(--font-color-disabled);
font-size: 0.875rem;
}
.document-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-medium);
min-height: 60px;
}
.documents-list {
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
}
.document-actions {
display: flex;
gap: var(--spacing-xsmall);
align-items: center;
}
.document-error {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
color: var(--error-color);
font-size: 0.875rem;
margin-top: var(--spacing-small);
padding: var(--spacing-small);
background: var(--background-color-alt);
border-radius: var(--card-border-radius-small);
}
/* Upload Mode Switch Links */
.upload-mode-link {
background: none;
border: none;
color: var(--font-color-disabled);
font-size: 0.9em;
cursor: pointer;
padding: var(--spacing-xsmall);
text-decoration: none;
font-family: inherit;
}
.upload-mode-link:hover {
color: var(--secondary-600);
}
.upload-mode-link:focus {
outline: none;
}
.upload-mode-link:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.upload-mode-link:disabled:hover {
color: var(--font-color-disabled);
}
/* Document Preview Modal Styles are now in document-overview.css */
/* Document Info Component Styling */
.document-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0; /* Allow text truncation */
}
.document-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
color: var(--secondary-600);
opacity: 0.8;
}
.document-details {
display: flex;
flex-direction: column;
gap: var(--spacing-xxsmall);
min-width: 0; /* Allow text truncation */
flex: 1;
}
.document-title {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
font-weight: 500;
margin-bottom: var(--spacing-xsmall);
color: var(--font-color);
font-size: 0.95rem;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.document-meta {
display: flex;
gap: var(--spacing-medium);
font-size: 0.875rem;
color: var(--font-color-disabled);
flex-wrap: wrap;
line-height: 1.3;
margin: 0;
}
/* Interactive states for document items */
.document-info:hover .document-icon {
transform: scale(1.05);
transition: transform 0.2s ease;
}
.document-info.selected .document-title {
color: var(--secondary-600);
font-weight: 700;
}
.document-info.selected .document-icon {
color: var(--secondary-700);
opacity: 1;
}
/* Q&A Section Redesign - Minimal additions only */
.qa-section-redesigned {
width: 100%;
}
/* Title content for overview header */
.qa-title-content h3 {
margin: 0 0 var(--spacing-xxsmall) 0;
color: var(--font-color-h3);
font-size: 1.3rem;
font-weight: 600;
}
.qa-subtitle {
margin: 0;
color: var(--font-color);
opacity: 0.8;
font-size: 0.9rem;
line-height: 1.4;
}
/* Overview title with icon */
.qa-overview-title {
display: flex;
align-items: flex-start;
gap: var(--spacing-medium);
flex: 1;
}
.qa-overview-icon {
width: 28px;
height: 28px;
color: var(--secondary-600);
margin-top: var(--spacing-xxsmall);
flex-shrink: 0;
}
/* Creator title with icon */
.qa-creator-title {
display: flex;
align-items: center;
gap: var(--spacing-small);
}
.qa-creator-icon {
width: 24px;
height: 24px;
color: var(--secondary-600);
}
/* Empty state features showcase */
.qa-empty-features {
display: flex;
gap: var(--spacing-large);
flex-wrap: wrap;
justify-content: center;
margin: var(--spacing-large) 0;
}
.qa-feature-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-small);
min-width: 120px;
}
.qa-feature-icon {
font-size: 2rem;
line-height: 1;
}
.qa-feature-item span {
font-size: 0.9rem;
color: var(--font-color);
font-weight: 500;
text-align: center;
}
/* Error state icon */
.qa-error-icon {
width: 48px;
height: 48px;
color: #D32F2F;
}
.qa-empty-icon {
width: 64px;
height: 64px;
color: var(--secondary-600);
opacity: 0.6;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.qa-overview-title {
align-items: center;
}
.qa-overview-icon {
width: 24px;
height: 24px;
margin-top: 0;
}
.qa-empty-features {
gap: var(--spacing-medium);
}
.qa-feature-item {
min-width: 100px;
}
}
@media (max-width: 480px) {
.document-details {
gap: var(--spacing-xxxsmall);
}
.document-title {
font-size: 0.85rem;
line-height: 1.3;
}
.document-meta {
font-size: 0.7rem;
}
.qa-empty-features {
flex-direction: column;
gap: var(--spacing-medium);
}
.qa-feature-item {
flex-direction: row;
justify-content: flex-start;
text-align: left;
min-width: auto;
width: 100%;
}
.qa-feature-icon {
font-size: 1.5rem;
}
}
/* Meine Texte Tab Styles */
.meine-texte-header-actions {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
}
/* Controls Section */
.meine-texte-controls {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
flex-wrap: wrap;
}
.search-container {
position: relative;
flex: 1;
min-width: 200px;
max-width: 400px;
}
.search-icon {
position: absolute;
left: var(--spacing-small);
top: 50%;
transform: translateY(-50%);
color: var(--font-color-secondary);
pointer-events: none;
}
.search-input {
padding-left: calc(var(--spacing-large) + var(--spacing-small));
}
.sort-controls {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
}
.sort-order-button {
background: var(--background-color-secondary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
color: var(--font-color);
cursor: pointer;
transition: all 0.2s ease;
}
.sort-order-button:hover {
background: var(--background-color-tertiary);
border-color: var(--border-color-hover);
}
/* Texts Grid */
.meine-texte-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--spacing-small);
}
/* Desktop optimization */
@media (min-width: 768px) {
.meine-texte-grid {
gap: var(--spacing-medium);
}
}
/* Text Card - Standard Document Flow Design */
.text-card {
background: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-large);
padding: var(--spacing-small);
transition: all 0.2s ease;
min-height: 140px;
display: flex;
flex-direction: column;
cursor: pointer;
position: relative;
}
.text-card:hover {
border-color: var(--border-color-disabled);
box-shadow: var(--card-shadow-subtle);
}
/* Card Header - Natural Flow */
.text-card-header {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: var(--spacing-xsmall);
}
.text-title-header {
flex: 1;
margin-right: var(--spacing-small);
}
.text-title {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--font-color);
transition: color 0.2s ease;
cursor: pointer;
line-height: 1.3;
}
.text-title:hover {
color: var(--interactive-accent-color);
}
/* Title editing state */
.text-title-edit {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
flex: 1;
margin-right: var(--spacing-small);
}
.text-title-edit input {
font-size: 14px;
padding: 4px 6px;
border-radius: var(--card-border-radius-small);
border: var(--input-border);
background: var(--input-background);
color: var(--input-text-color);
}
.text-title-edit-actions {
display: flex;
gap: 2px;
}
/* Three-dot menu button */
.text-card-menu-button {
background: none;
border: none;
border-radius: var(--card-border-radius-small);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--font-color-disabled);
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.text-card-menu-button:hover {
background: var(--hover-color-alt);
color: var(--font-color);
}
/* Old dropdown styles removed - now using MenuDropdown component */
/* Text Content - Full Preview */
.text-card-content {
flex: 1;
margin-bottom: var(--spacing-small);
}
.text-preview {
margin: 0;
font-size: 13px;
color: var(--font-color-disabled);
line-height: 1.4;
white-space: pre-wrap;
word-wrap: break-word;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
/* Metadata footer - Natural Flow */
.text-card-footer {
display: flex;
align-items: center;
gap: var(--spacing-small);
flex-wrap: wrap;
margin-top: auto;
}
.text-type {
background: var(--klee);
color: white;
padding: 2px 6px;
border-radius: var(--border-radius);
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
.text-stats,
.text-date {
font-size: 11px;
color: var(--font-color-disabled);
white-space: nowrap;
}
/* Menu container - Positioned at top right of card */
.text-card-menu-container {
position: absolute;
top: var(--spacing-small);
right: var(--spacing-small);
}
/* Legacy styles removed - using new card design above */
/* Preview Modal */
.text-preview-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-medium);
}
.text-preview-modal {
background: var(--background-color);
border-radius: var(--border-radius-large);
max-width: 800px;
max-height: 90vh;
width: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.text-preview-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-medium);
border-bottom: 1px solid var(--border-color);
}
.text-preview-header h3 {
margin: 0;
font-size: 18px;
color: var(--font-color);
}
.text-preview-close {
background: none;
border: none;
font-size: 24px;
color: var(--font-color-secondary);
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
transition: all 0.2s ease;
}
.text-preview-close:hover {
background: var(--background-color-secondary);
color: var(--font-color);
}
.text-preview-content {
flex: 1;
overflow-y: auto;
padding: var(--spacing-medium);
}
.text-preview-meta {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
padding: var(--spacing-small);
background: var(--background-color-secondary);
border-radius: var(--border-radius);
font-size: 14px;
}
.text-preview-meta span {
color: var(--font-color-secondary);
}
.text-preview-text {
line-height: 1.6;
color: var(--font-color);
white-space: pre-wrap;
word-wrap: break-word;
}
.text-preview-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-small);
padding: var(--spacing-medium);
border-top: 1px solid var(--border-color);
}
/* Responsive Design */
@media (max-width: 768px) {
.meine-texte-controls {
flex-direction: column;
align-items: stretch;
}
.search-container {
max-width: none;
}
.sort-controls {
justify-content: center;
}
.meine-texte-grid {
grid-template-columns: 1fr;
gap: var(--spacing-small);
}
.text-card {
min-height: 120px;
}
.text-title {
font-size: 14px;
}
.text-title-header {
margin-right: var(--spacing-xsmall);
}
.text-card-menu-button {
width: 32px;
height: 32px;
font-size: 18px;
}
.text-preview {
font-size: 12px;
-webkit-line-clamp: 5;
}
.text-card-footer {
gap: var(--spacing-xsmall);
}
.text-preview-modal {
margin: var(--spacing-small);
max-height: calc(100vh - var(--spacing-medium));
}
.text-preview-actions {
flex-direction: column;
}
}
@media (max-width: 480px) {
.text-card {
padding: var(--spacing-xsmall);
min-height: 100px;
}
.text-card-header {
margin-bottom: var(--spacing-xxsmall);
}
.text-title-header {
margin-right: var(--spacing-xxsmall);
}
.text-title {
font-size: 13px;
}
.text-card-menu-button {
width: 28px;
height: 28px;
font-size: 16px;
}
.text-preview {
font-size: 11px;
-webkit-line-clamp: 4;
}
.text-card-dropdown {
min-width: 120px;
}
.text-preview-overlay {
padding: var(--spacing-small);
}
.text-preview-modal {
margin: 0;
max-height: 100vh;
border-radius: 0;
}
}
/* Loading States */
.text-card.loading {
opacity: 0.6;
pointer-events: none;
}
/* Empty State */
.profile-full-width-layout .knowledge-empty-state {
padding: var(--spacing-xxlarge) var(--spacing-medium);
}
.profile-full-width-layout .empty-state-icon {
color: var(--font-color-tertiary);
margin-bottom: var(--spacing-medium);
}
/* Add missing color variables for better theme support */
.profile-full-width-layout {
--text-card-background-secondary: var(--card-background-alt);
--text-card-border-color: var(--border-subtle);
--text-card-border-hover: var(--interactive-accent-color);
--text-card-font-secondary: var(--font-color-disabled);
}
/* Dropdown positioning adjustments */
.text-card-dropdown.dropdown-left {
right: auto;
left: 0;
}
/* Size variants for buttons in title edit */
.btn-primary.size-xs,
.btn-secondary.size-xs {
padding: 4px 8px;
font-size: 12px;
min-width: auto;
}
.avatar-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: var(--spacing-medium);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
transform: translateZ(0);
isolation: isolate;
}
.avatar-modal-content {
position: relative;
background: var(--background-color);
border-radius: var(--spacing-medium);
box-shadow: var(--shadow-xl);
max-width: 480px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
border: 1px solid var(--border-subtle);
transform: translateZ(0);
isolation: isolate;
z-index: 1;
}
.avatar-modal-header {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-large) var(--spacing-large) var(--spacing-medium);
border-bottom: 1px solid var(--border-subtle);
background: var(--background-color);
z-index: 2;
}
.avatar-modal-header h3 {
margin: 0;
color: var(--font-color-h3);
font-size: 1.25rem;
font-weight: 600;
}
.avatar-modal-close-button {
background: none;
border: none;
font-size: 1.5rem;
color: var(--font-color);
cursor: pointer;
padding: var(--spacing-xsmall);
border-radius: var(--spacing-xsmall);
transition: all 0.2s ease-out;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.avatar-modal-close-button:hover {
background-color: var(--background-color-alt);
}
.avatar-modal-close-button:focus {
outline: 2px solid var(--klee);
outline-offset: 2px;
}
.avatar-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-medium);
padding: var(--spacing-large);
}
.avatar-option {
position: relative;
background: var(--background-color-alt);
border: 2px solid transparent;
border-radius: var(--spacing-medium);
padding: var(--spacing-medium);
cursor: pointer;
transition: all 0.25s ease-out;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-option:hover {
background-color: var(--background-color);
border-color: var(--klee);
box-shadow: var(--shadow-md);
}
.avatar-option:focus {
outline: none;
border-color: var(--klee);
box-shadow: 0 0 0 3px rgba(109, 193, 75, 0.2);
}
.avatar-option.selected {
border-color: var(--klee);
background-color: var(--background-color);
box-shadow: var(--shadow-md);
}
.avatar-option-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--spacing-small);
overflow: hidden;
}
.avatar-option-image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform 0.25s ease-out;
}
.avatar-option:hover .avatar-option-image img {
transform: scale(1.005);
}
.avatar-option-checkmark {
position: absolute;
top: var(--spacing-xsmall);
right: var(--spacing-xsmall);
background-color: var(--klee);
color: white;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: bold;
box-shadow: var(--shadow-sm);
z-index: 1;
}
.avatar-modal-footer {
position: sticky;
bottom: 0;
padding: var(--spacing-medium) var(--spacing-large) var(--spacing-large);
text-align: center;
border-top: 1px solid var(--border-subtle);
background: var(--background-color);
}
.avatar-modal-hint {
margin: 0;
color: var(--font-color);
font-size: 0.875rem;
opacity: 0.8;
}
/* Responsive Design */
@media (max-width: 768px) {
.avatar-modal-overlay {
padding: var(--spacing-small);
}
.avatar-modal-content {
max-height: 95vh;
margin: auto;
}
.avatar-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-small);
padding: var(--spacing-medium);
}
.avatar-modal-header {
padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-small);
}
.avatar-modal-footer {
padding: var(--spacing-small) var(--spacing-medium) var(--spacing-medium);
}
}
@media (max-width: 480px) {
.avatar-modal-overlay {
padding: var(--spacing-xsmall);
}
.avatar-modal-content {
border-radius: var(--spacing-small);
max-height: 98vh;
}
.avatar-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xsmall);
padding: var(--spacing-small);
}
.avatar-option {
padding: var(--spacing-small);
}
.avatar-modal-header h3 {
font-size: 1.125rem;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.avatar-option.selected {
border-width: 3px;
}
.avatar-modal-overlay {
background-color: rgba(0, 0, 0, 0.8);
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.avatar-option:hover {
transform: none;
}
.avatar-option.selected {
transform: none;
}
.avatar-option:hover .avatar-option-image img {
transform: none;
}
.avatar-modal-close-button:hover {
transform: none;
}
}
.top-section {
display: flex;
flex-direction: column;
align-items: center;
min-height: 50vh;
padding: 2.75rem 3.75rem 2.75rem;
max-width: 1200px;
margin: 0 auto;
background-color: var(--background-color);
}
.animated-heading {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 40px;
width: 100%;
}
.animated-heading .typing-text,
.animated-heading h2 {
font-size: 3.7em;
font-weight: 700;
color: var(--font-color-h);
font-family: 'GrueneType', Arial, sans-serif;
margin: 0;
}
.animated-heading .typing-text {
display: block;
}
.animated-heading h2 {
line-height: 1;
}
.top-section p {
font-size: 1.2em;
line-height: 1.6;
color: var(--font-color);
max-width: 1200px;
margin-bottom: 40px;
text-align: left;
align-self: flex-start;
}
.link-buttons-container {
width: 100%;
max-width: 1200px;
align-self: flex-start;
display: flex;
flex-direction: column;
gap: 15px;
}
.primary-buttons,
.secondary-buttons {
display: flex;
flex-wrap: nowrap;
gap: 15px;
width: 100%;
}
.link-buttons a,
.link-buttons button {
flex: 1;
min-width: 150px;
color: var(--font-color);
font-size: 1.1em;
text-decoration: none;
background-color: var(--background-color-alt);
padding: 20px;
border-radius: 15px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.link-buttons a svg,
.link-buttons button svg {
margin-right: 12px;
font-size: 1.3em;
}
.newsletter-button svg {
margin-right: 0;
margin-left: 10px;
}
.more-button svg {
margin-left: 8px;
margin-right: 0;
transition: transform 0.3s ease;
}
.more-button.active svg {
transform: rotate(180deg);
}
.more-button svg {
margin-left: 8px;
margin-right: 0;
transition: transform 0.3s ease;
}
.more-button.active svg {
transform: rotate(180deg);
}
.secondary-buttons {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.secondary-buttons.show {
display: flex;
opacity: 1;
}
.newsletter-button {
background-color: var(--primary) !important;
color: white !important;
}
.newsletter-button svg {
margin-right: 0;
margin-left: 10px;
}
.newsletter-button:hover {
opacity: 0.9;
background-color: var(--primary) !important;
}
.newsletter-button:hover svg {
transform: translateX(3px);
}
.mobile-only {
display: none !important;
}
@media (max-width: 768px) {
.desktop-only {
display: none !important;
}
.mobile-only {
display: flex !important;
}
.link-buttons {
flex-direction: column;
max-width: 400px;
}
.secondary-buttons {
display: flex;
opacity: 1;
}
.more-button {
display: none !important;
}
.link-buttons a,
.link-buttons button {
max-width: none;
width: 100%;
}
.link-buttons a svg,
.link-buttons button svg {
margin-right: 12px;
font-size: 1.3em;
}
.newsletter-button.mobile-only {
display: flex !important;
width: 100%;
justify-content: flex-start;
text-align: left;
padding: 1rem 1.5rem;
font-size: 1.1em;
border-radius: 10px;
margin-top: 0.75rem;
}
.newsletter-button svg {
margin-left: auto;
margin-right: 0;
}
}
.sections-container {
padding: 3.75rem 0;
background-color: var(--background-color-alt);
}
.section {
display: flex;
justify-content: center;
align-items: center;
padding: 2.75rem 3.75rem;
margin: 0 auto;
max-width: 1200px;
gap: 3.75rem;
background-color: var(--background-color-alt);
}
.text-column {
flex: 0.45;
padding: 0;
box-sizing: border-box;
min-width: 250px;
color: var(--font-color);
}
.text-column h2 {
margin: 0 0 1rem;
font-size: 2.4em;
}
.text-column p {
margin: 0;
font-size: 1.2em;
line-height: 1.6;
}
.image-column {
flex: 0.40;
padding: 20px;
box-sizing: border-box;
min-width: 300px;
}
.image-column img {
width: 100%;
height: auto;
transition: transform 0.3s ease;
}
.image-column img:hover {
transform: scale(1.02);
}
@media (max-width: 1024px) {
.top-section {
padding: 7.5rem 1.25rem 2.5rem;
}
.section {
padding: 2rem 1.25rem;
gap: 2rem;
}
.link-buttons {
gap: 0.5rem;
}
.link-buttons a,
.link-buttons button {
max-width: calc(33.33% - 10px);
}
.primary-buttons,
.secondary-buttons {
gap: 10px;
}
.link-buttons a,
.link-buttons button {
padding: 15px;
}
}
@media (min-width: 769px) {
.section:nth-child(even) {
flex-direction: row-reverse;
}
}
@media (max-width: 768px) {
.animated-heading {
align-items: flex-start;
}
.animated-heading .typing-text,
.animated-heading h2 {
font-size: 2.5em;
text-align: left;
line-height: 1.2;
}
.top-section p {
font-size: 1.1em;
text-align: left;
padding: 0 0.5rem;
margin-bottom: 2rem;
}
.link-buttons-container {
align-items: center;
}
.link-buttons {
flex-direction: column;
max-width: 400px;
}
.link-buttons a,
.link-buttons button {
max-width: none;
width: 100%;
}
.sections-container {
padding: 1.5rem 0;
}
.section {
flex-direction: column;
padding: 2rem 1rem;
gap: 2rem;
text-align: center;
}
.text-column {
flex: 1;
width: 100%;
padding: 0 0.5rem;
}
.text-column h2 {
font-size: 2em;
margin-bottom: 1rem;
}
.text-column p {
font-size: 1.1em;
line-height: 1.5;
text-align: left;
}
.image-column {
flex: 1;
width: 100%;
padding: 0;
display: flex;
justify-content: center;
}
.image-column img {
max-width: 85%;
height: auto;
margin: 0;
}
.newsletter-button.mobile-only {
padding: 0.875rem 1.25rem;
font-size: 1em;
}
.primary-buttons,
.secondary-buttons {
flex-direction: column;
max-width: 400px;
}
.link-buttons a,
.link-buttons button {
width: 100%;
justify-content: flex-start;
padding-left: 25px;
}
}
@media (max-width: 576px) {
.section {
padding: 1rem;
}
.image-column img {
max-width: 90%;
margin: 1.5rem auto 0;
}
.link-buttons a {
font-size: 0.8em;
border-radius: 8px;
padding: 0.75rem;
}
}
@media (max-width: 480px) {
.animated-heading .typing-text,
.animated-heading h2 {
font-size: 2em;
}
.top-section p {
font-size: 1em;
}
.link-buttons a,
.link-buttons button {
padding: 0.875rem 1.25rem;
font-size: 1em;
}
.text-column h2 {
font-size: 1.75em;
}
.text-column p {
font-size: 1em;
}
.image-column img {
max-width: 95%;
}
.newsletter-button.mobile-only {
padding: 0.875rem 1.25rem;
font-size: 1em;
}
}
.link-buttons a:hover,
.link-buttons button:hover {
background-color: var(--button-hover-color);
transform: translateY(-2px);
}
@media (max-width: 1024px) {
.secondary-buttons {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 768px) {
.link-buttons {
grid-template-columns: 1fr;
max-width: 400px;
}
.secondary-buttons {
grid-template-columns: 1fr !important;
}
}
.antragsversteher-container {
display: flex;
flex-direction: column;
min-height: calc(100vh - 200px);
padding: var(--spacing-large);
gap: var(--spacing-xlarge);
max-width: 1400px;
margin: 0 auto;
position: relative;
}
.antragsversteher-container.has-content {
display: grid;
grid-template-columns: 400px 1fr;
grid-gap: var(--spacing-xlarge);
align-items: start;
}
.antragsversteher-form-section {
background: var(--background-color-alt);
border-radius: 16px;
padding: var(--spacing-xlarge);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-subtle);
transition: all 0.3s ease;
}
.antragsversteher-title {
font-size: 2rem;
font-weight: 600;
color: var(--font-color-h);
text-align: center;
margin-bottom: var(--spacing-medium);
line-height: 1.2;
}
.antragsversteher-description {
color: var(--font-color);
text-align: center;
margin-bottom: var(--spacing-xlarge);
font-size: 1.125rem;
line-height: 1.6;
opacity: 0.9;
}
.file-upload-playground {
position: relative;
background: var(--primary);
border: 3px dashed transparent;
border-radius: 16px;
padding: var(--spacing-large);
text-align: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
min-height: 180px;
max-width: 420px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.file-upload-playground::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--background-color-alt);
opacity: 0.95;
border-radius: 17px;
transition: all 0.4s ease;
}
.file-upload-playground.dragging::before {
opacity: 0.85;
}
.file-upload-playground:hover::before {
opacity: 0.9;
}
.file-upload-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-small);
}
.upload-icon-container {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--primary);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-small) auto;
transition: all 0.3s ease;
box-shadow: var(--shadow-md);
}
.file-upload-playground:hover .upload-icon-container {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.upload-icon {
color: var(--weiß);
font-size: 1.75rem;
transition: transform 0.3s ease;
}
.file-upload-playground.dragging .upload-icon {
transform: scale(1.2) rotate(5deg);
}
.upload-text {
color: var(--font-color);
font-size: 1rem;
font-weight: 500;
margin-bottom: var(--spacing-small);
}
.upload-subtext {
color: var(--font-color);
opacity: 0.7;
font-size: 0.8rem;
}
.file-selected-state {
gap: var(--spacing-large);
}
.file-info {
display: flex;
align-items: center;
gap: var(--spacing-medium);
background: rgba(255, 255, 255, 0.1);
padding: var(--spacing-medium);
border-radius: 12px;
backdrop-filter: blur(10px);
position: relative;
width: 100%;
max-width: 320px;
margin: 0 auto;
}
.file-icon {
width: 40px;
height: 40px;
background: var(--primary);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--weiß);
font-size: 1.25rem;
flex-shrink: 0;
}
.file-details {
flex: 1;
min-width: 0;
padding-right: var(--spacing-small);
}
.file-details h4 {
color: var(--font-color);
margin: 0 0 2px 0;
font-weight: 600;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: help;
position: relative;
line-height: 1.2;
}
.file-size {
color: var(--font-color);
opacity: 0.7;
font-size: 0.75rem;
margin: 0;
}
.file-remove-button {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.2);
border: none;
color: var(--font-color);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
backdrop-filter: blur(5px);
font-size: 0.75rem;
}
.file-remove-button:hover {
background: rgba(255, 0, 0, 0.2);
color: #ef4444;
transform: scale(1.1);
}
.file-details h4::after {
content: attr(title);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: var(--weiß);
padding: 6px 10px;
border-radius: 6px;
font-size: 0.75rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
z-index: 1000;
box-shadow: var(--shadow-md);
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
}
.file-details h4::before {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid var(--primary);
opacity: 0;
transition: all 0.2s ease;
z-index: 1001;
}
.file-details h4:hover::after,
.file-details h4:hover::before {
opacity: 1;
}
.checkbox-section {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
margin-top: var(--spacing-xlarge);
}
.checkbox-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-medium);
padding: var(--spacing-medium);
border-radius: 12px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle);
transition: all 0.2s ease;
}
.checkbox-item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--primary);
}
.checkbox-text {
color: var(--font-color);
font-size: 0.9rem;
line-height: 1.5;
margin-top: 2px;
}
.checkbox-link {
color: var(--primary);
text-decoration: underline;
transition: color 0.2s ease;
}
.checkbox-link:hover {
color: var(--klee);
}
.submit-section {
margin-top: var(--spacing-xlarge);
text-align: center;
}
.custom-submit-button {
width: 100%;
padding: var(--spacing-large);
background: var(--primary);
color: var(--weiß);
border: none;
border-radius: 12px;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.custom-submit-button:hover:not(:disabled) {
background: var(--klee);
box-shadow: var(--shadow-lg);
}
.custom-submit-button:disabled {
background: var(--border-subtle);
color: var(--font-color);
opacity: 0.6;
cursor: not-allowed;
}
.custom-submit-button.loading {
background: var(--primary);
opacity: 0.8;
}
.custom-submit-button.success {
background: var(--grashalm);
}
.button-content {
display: flex;
align-items: center;
gap: var(--spacing-small);
font-weight: 600;
}
.error-message {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #ef4444;
padding: var(--spacing-medium);
border-radius: 8px;
font-size: 0.875rem;
margin-bottom: var(--spacing-medium);
text-align: center;
}
.analysis-section {
background: var(--background-color-alt);
border-radius: 16px;
padding: var(--spacing-xlarge);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-subtle);
min-height: 600px;
display: flex;
flex-direction: column;
}
.analysis-header {
display: flex;
align-items: center;
gap: var(--spacing-medium);
margin-bottom: var(--spacing-xlarge);
padding-bottom: var(--spacing-medium);
border-bottom: 1px solid var(--border-subtle);
}
.analysis-icon {
width: 48px;
height: 48px;
background: var(--primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--weiß);
font-size: 1.5rem;
}
.analysis-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--font-color-h);
}
.analysis-content {
flex: 1;
color: var(--font-color);
line-height: 1.7;
font-size: 1rem;
}
.loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-large);
padding: var(--spacing-xxlarge);
text-align: center;
}
.loading-spinner {
width: 64px;
height: 64px;
border: 4px solid var(--border-subtle);
border-top: 4px solid var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-text {
color: var(--font-color);
font-size: 1.125rem;
font-weight: 500;
}
.loading-subtext {
color: var(--font-color);
opacity: 0.6;
font-size: 0.875rem;
}
@media (max-width: 1024px) {
.antragsversteher-container.has-content {
grid-template-columns: 1fr;
grid-gap: var(--spacing-large);
}
.antragsversteher-form-section {
order: 2;
}
.analysis-section {
order: 1;
}
}
@media (max-width: 768px) {
.antragsversteher-container {
padding: var(--spacing-medium);
gap: var(--spacing-large);
}
.antragsversteher-form-section,
.analysis-section {
padding: var(--spacing-large);
}
.antragsversteher-title {
font-size: 1.75rem;
}
.file-upload-playground {
min-height: 160px;
max-width: 100%;
padding: var(--spacing-medium);
}
.upload-icon-container {
width: 56px;
height: 56px;
}
.upload-icon {
font-size: 1.5rem;
}
.checkbox-section {
gap: var(--spacing-medium);
}
}
@media (max-width: 480px) {
.file-upload-playground {
min-height: 140px;
padding: var(--spacing-small);
}
.upload-text {
font-size: 0.9rem;
}
.upload-subtext {
font-size: 0.75rem;
}
}
.not-found-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 2rem;
background-color: var(--background-color);
}
.not-found-content {
text-align: center;
max-width: 600px;
padding: 3rem;
background-color: var(--background-color-alt);
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.not-found-content h1 {
font-size: 8em;
font-weight: 700;
color: var(--primary);
margin: 0;
font-family: 'GrueneType', Arial, sans-serif;
line-height: 1;
}
.not-found-content h2 {
font-size: 2.5em;
color: var(--font-color-h);
margin: 0.5rem 0 1.5rem;
font-family: 'GrueneType', Arial, sans-serif;
}
.not-found-content p {
font-size: 1.2em;
color: var(--font-color);
margin-bottom: 2rem;
line-height: 1.6;
}
.home-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
background-color: var(--primary);
color: white;
text-decoration: none;
border-radius: 10px;
font-size: 1.1em;
font-weight: 500;
transition: all 0.3s ease;
}
.home-button:hover {
opacity: 0.9;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.not-found-content {
padding: 2rem;
}
.not-found-content h1 {
font-size: 6em;
}
.not-found-content h2 {
font-size: 2em;
}
.not-found-content p {
font-size: 1.1em;
}
}
@media (max-width: 480px) {
.not-found-content {
padding: 1.5rem;
}
.not-found-content h1 {
font-size: 4em;
}
.not-found-content h2 {
font-size: 1.75em;
}
.not-found-content p {
font-size: 1em;
}
.home-button {
padding: 0.875rem 1.5rem;
font-size: 1em;
}
}
.template-gallery {
max-width: 1200px;
margin: 0 auto;
padding: 100px 2rem 2rem 2rem;
}
.template-gallery-header {
margin-bottom: 3rem;
text-align: center;
}
.template-gallery-header h1 {
font-size: 2rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--font-color-h);
}
.template-gallery-intro {
max-width: 800px;
margin: 0 auto 2rem;
font-size: 1.1rem;
line-height: 1.6;
color: var(--font-color);
text-align: center;
}
.search-bar {
max-width: 600px;
margin: 0 auto 2rem;
}
/* Template Gallery search input styles - DISABLED to prevent conflicts with main form-inputs.css */
/*
.search-bar input {
width: 100%;
padding: 1rem;
font-size: 1rem;
border: 2px solid var(--button-background-color);
border-radius: 8px;
background: var(--background-color);
color: var(--font-color);
transition: border-color 0.2s ease;
}
.search-bar input:focus {
outline: none;
border-color: var(--primary);
}
*/
.category-filter {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-bottom: 3rem;
}
.category-button {
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
border: 2px solid var(--button-background-color);
border-radius: 25px;
background: var(--background-color);
color: var(--font-color);
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
}
.category-button:hover {
background: var(--background-color-alt);
transform: translateY(-1px);
}
.category-button.active {
background: var(--background-color-alt);
color: var(--font-color);
border-color: var(--primary);
}
.template-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin: 0 auto;
}
.template-card {
display: flex;
flex-direction: column;
background: var(--background-color);
border: 1px solid var(--button-background-color);
border-radius: 8px;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
height: 100%;
}
.template-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.template-card-image {
position: relative;
padding-top: 75%;
overflow: hidden;
background: var(--background-color);
}
.template-card-image.loading {
background: var(--background-color);
}
.template-card-image.error {
background: #f8f8f8;
}
.template-slider {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
.image-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--background-color);
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--button-background-color);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.placeholder-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: #f8f8f8;
padding: 1rem;
}
.error-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.template-card-content {
padding: 1.5rem;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.template-card h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 0.75rem 0;
color: var(--font-color);
}
.template-card p {
font-size: 0.95rem;
color: var(--font-color);
margin: 0 0 1.5rem 0;
line-height: 1.5;
flex-grow: 1;
}
.template-credit {
font-size: 0.85rem !important;
color: var(--font-color) !important;
margin: 0 0 1rem 0 !important;
font-style: italic;
opacity: 0.8;
flex-grow: 0 !important;
}
.template-actions {
display: flex;
justify-content: center;
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid var(--button-background-color);
}
.canva-button {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.9rem;
font-weight: 500;
text-align: center;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--primary);
color: white;
border: none;
}
.canva-button:hover {
background: var(--dunkelgruen);
transform: translateY(-1px);
}
.download-button {
background: transparent;
border: 2px solid var(--border-color);
color: var(--text-color);
}
.download-button:hover {
background: var(--hover-color);
transform: translateY(-1px);
}
.no-results {
grid-column: 1 / -1;
text-align: center;
padding: 3rem;
color: var(--font-color);
font-size: 1.1rem;
}
.template-gallery-error {
text-align: center;
padding: 3rem;
color: var(--error-color);
font-size: 1.1rem;
}
@media (max-width: 1200px) {
.template-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
@media (max-width: 768px) {
.template-gallery {
padding: 80px 1rem 1rem 1rem;
}
.template-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
.template-card-content {
padding: 1rem;
}
.category-filter {
gap: 0.5rem;
}
.category-button {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.template-card h3 {
font-size: 1.1rem;
}
}
.dark-mode .template-card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.dark-mode .template-card:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.image-counter {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
z-index: 2;
}
.image-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
opacity: 0;
z-index: 2;
}
.template-card:hover .image-nav {
opacity: 1;
}
.image-nav:hover {
background: rgba(0, 0, 0, 0.8);
transform: translateY(-50%) scale(1.1);
}
.image-nav.prev {
left: 10px;
}
.image-nav.next {
right: 10px;
}
.image-counter {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
z-index: 2;
}
.dark-mode .image-nav {
background: rgba(255, 255, 255, 0.2);
}
.dark-mode .image-nav:hover {
background: rgba(255, 255, 255, 0.3);
}
@media (max-width: 768px) {
.image-nav {
opacity: 1;
width: 32px;
height: 32px;
font-size: 20px;
}
}
.page-container {
max-width: 800px;
margin: 70px auto;
padding: 20px;
background-color: var(--background-color);
border-radius: 8px;
}
.page-container h1, .page-container h2, .page-container h3 {
color: var(--font-color-h);
}
.page-container h1 {
font-size: 2em;
margin-bottom: 20px;
}
.page-container h2 {
font-size: 1.5em;
margin-bottom: 15px;
margin-top: 30px;
}
.page-container h3 {
font-size: 1.2em;
margin-bottom: 10px;
margin-top: 20px;
}
.page-container p {
margin-bottom: 15px;
line-height: 1.6;
}
.page-container a {
color: var(--font-color-h);
text-decoration: none;
border-bottom: 1px solid var(--font-color-h);
transition: color 0.3s ease, border-color 0.3s ease;
}
.page-container a:hover {
color: var(--dunkelgruen);
border-color: var(--dunkelgruen);
}
.page-container ul {
padding-left: 20px;
margin-bottom: 15px;
}
.page-container li {
margin-bottom: 10px;
}
footer {
text-align: center;
padding: 20px;
background-color: var(--font-color-h);
color: var(--weiß);
border-top: 1px solid #ddd;
}
footer a {
color: var(--weiß);
text-decoration: underline;
}
footer a:hover {
color: #ddd;
}
.generator-start-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: calc(100vh - 160px);
padding: 40px 20px;
background-color: var(--background-color-pure);
margin-left: auto;
margin-right: auto;
width: fit-content;
}
.start-screen-content {
max-width: 700px;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
width: 100%;
}
.generator-start-screen h1 {
font-size: 2.8rem;
color: var(--font-color-h);
margin-bottom: 15px;
font-weight: 600;
line-height: 1.2;
text-align: left;
}
.generator-start-screen .subtitle {
font-size: 1.2rem;
color: var(--font-color);
margin-bottom: 40px;
max-width: 100%;
line-height: 1.5;
text-align: left;
}
.input-wrapper {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
border-radius: 12px;
background-color: var(--background-color-pure);
box-shadow: var(--shadow-md);
transition: all 0.2s ease;
margin-bottom: 25px;
overflow: hidden;
}
.input-wrapper.error-input {
outline: 2px solid var(--sonne);
outline-offset: 2px;
}
.description-input {
flex-grow: 1;
width: 100%;
padding: 20px;
font-size: 1.1rem;
border: none;
border-radius: 0;
background-color: transparent;
box-shadow: none;
resize: none;
line-height: 1.6;
color: var(--font-color);
margin-bottom: 0;
outline: none;
}
.description-input:focus,
.description-input.error-input {
outline: none;
box-shadow: none;
}
*/
.description-input::placeholder {
color: var(--font-color);
opacity: 0.7;
}
.example-prompts-container {
background-color: var(--background-color);
padding: 0 15px 10px 15px;
align-self: flex-end;
margin-top: -10px;
}
.example-prompts {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
width: 100%;
}
.example-prompt-button {
background-color: var(--hintergrund-hell);
border: 1px solid var(--hintergrund-mittel);
border-radius: 20px;
padding: 8px 15px;
font-size: 0.9rem;
color: var(--font-color);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
text-align: left;
white-space: nowrap;
}
.example-prompt-button span:first-child {
font-size: 1.1em;
}
.example-prompt-button:hover {
background-color: var(--hintergrund-mittel);
border-color: var(--hintergrund-dunkel);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.generate-button {
padding: 18px 40px;
font-size: 1.2rem;
margin-top: 15px;
min-width: 280px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
border-radius: 8px;
background-color: var(--primary);
color: var(--secondary);
border: none;
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
align-self: center;
box-shadow: var(--shadow-md);
}
.generate-button:hover:not(:disabled) {
background-color: var(--dunkelgruen-alt);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.manual-setup-link {
margin-top: 30px;
font-size: 1rem;
color: var(--link-color);
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
transition: color 0.2s ease;
padding: 8px 16px;
align-self: center;
}
.manual-setup-link:hover:not(:disabled) {
color: var(--klee);
}
.error-message {
color: var(--sonne);
margin: -15px 0 20px;
font-size: 0.95rem;
font-weight: 500;
align-self: flex-start;
}
.loading-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid color-mix(in srgb, var(--secondary) 30%, transparent);
border-radius: 50%;
border-top-color: var(--secondary);
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 768px) {
.generator-start-screen {
padding: 20px 15px;
min-height: calc(100vh - 120px);
}
.generator-start-screen h1 {
font-size: 2rem;
}
.generator-start-screen .subtitle {
font-size: 1rem;
margin-bottom: 30px;
max-width: 95%;
}
.description-input {
padding: 15px;
font-size: 1rem;
}
.generate-button {
padding: 15px 25px;
font-size: 1.1rem;
width: 100%;
min-width: unset;
}
.manual-setup-link {
margin-top: 25px;
font-size: 0.9rem;
}
}
.antrag-detail-page-wrapper {
padding: var(--spacing-xlarge) var(--spacing-medium);
background-color: var(--background-color);
min-height: calc(100vh - var(--header-height, 60px) - var(--footer-height, 60px));
display: flex;
justify-content: center;
}
.antrag-detail-page-container {
max-width: 960px;
width: 100%;
color: var(--font-color);
}
.antrag-detail-loading,
.antrag-detail-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 300px;
gap: var(--spacing-medium);
}
.antrag-detail-error h2 {
color: var(--error-color, var(--error));
margin: 0;
}
.antrag-detail-error a {
color: var(--link-color);
text-decoration: underline;
}
.antrag-detail-page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--spacing-large);
margin-bottom: var(--spacing-small);
padding-bottom: 0;
}
.header-content {
display: flex;
flex-direction: column;
flex-grow: 1;
min-width: 0;
margin-bottom: var(--spacing-xlarge);
margin-top: var(--spacing-xlarge);
}
.antrag-detail-page-header h1 {
margin: 0;
color: var(--font-color-h);
line-height: 1.2;
word-break: break-word;
position: relative;
padding-bottom: var(--spacing-small);
}
.antrag-detail-page-header h1::after {
content: '';
position: absolute;
bottom: 0px;
left: 0;
width: 80px;
height: 4px;
background-color: var(--klee);
border-radius: 2px;
}
.antrag-detail-page-tags {
margin-bottom: var(--spacing-xlarge);
}
.antrag-detail-page-tags .tags-list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xsmall);
}
.tag-chip {
display: inline-block;
padding: var(--spacing-xxsmall) var(--spacing-small);
background-color: var(--background-color-alt);
border: 1px solid var(--border-subtle);
border-radius: 4px;
font-size: 0.9em;
color: var(--font-color);
white-space: nowrap;
}
.antrag-detail-main-info {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
margin-bottom: var(--spacing-xlarge);
}
.antrag-detail-description-box {
padding: var(--spacing-medium);
background-color: var(--background-color-alt);
border-radius: var(--spacing-small);
border: 1px solid var(--border-subtle);
}
/*
.antrag-detail-description-box .description-box-heading {
margin-top: 0;
margin-bottom: var(--spacing-small);
font-size: 1em;
font-weight: 600;
color: var(--font-color-h3);
}
*/
.antrag-detail-description-box p {
margin: 0;
font-size: 0.95em;
line-height: 1.6;
color: var(--font-color);
}
.antrag-detail-page-meta {
padding: var(--spacing-medium);
background-color: var(--background-color-alt);
border-radius: var(--spacing-small);
border: 1px solid var(--border-subtle);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--spacing-large);
}
.meta-item {
display: flex;
flex-direction: column;
gap: var(--spacing-xxsmall);
}
.meta-label {
font-weight: 600;
color: var(--font-color);
font-size: 0.85em;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.meta-value {
color: var(--font-color);
word-break: break-word;
line-height: 1.4;
font-size: 0.95em;
}
.meta-value a {
color: var(--link-color);
text-decoration: underline;
}
@media (min-width: 992px) {
.antrag-detail-main-info {
flex-direction: row;
align-items: stretch;
gap: var(--spacing-xlarge);
}
.antrag-detail-description-box {
flex: 1 1 40%;
min-width: 300px;
}
.antrag-detail-page-meta {
flex: 1 1 60%;
min-width: 350px;
}
}
.antrag-detail-page-content {
margin-bottom: var(--spacing-xxlarge);
max-width: 75ch;
margin-left: auto;
margin-right: auto;
}
.antrag-detail-page-content h2 {
margin-top: 0;
margin-bottom: var(--spacing-large);
color: var(--font-color-h);
border-bottom: 2px solid var(--primary);
padding-bottom: var(--spacing-small);
display: inline-block;
}
.markdown-content {
line-height: 1.7;
color: var(--font-color);
font-family: 'PT Sans', Arial, sans-serif;
font-size: 1rem;
}
.markdown-content p,
.markdown-content ul,
.markdown-content ol,
.markdown-content blockquote {
margin-bottom: var(--spacing-medium);
}
.markdown-content h1, .markdown-content h2, .markdown-content h3,
.markdown-content h4, .markdown-content h5, .markdown-content h6 {
margin-top: var(--spacing-xlarge);
margin-bottom: var(--spacing-small) !important;
color: var(--font-color-h);
line-height: 1.3;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
}
.markdown-content h1 { font-size: 1.8em; }
.markdown-content h2 { font-size: 1.5em; }
.markdown-content h3 { font-size: 1.3em; }
.markdown-content h4 { font-size: 1.1em; }
.markdown-content h5 { font-size: 1em; }
.markdown-content h6 { font-size: 0.9em; color: var(--font-color); }
.markdown-content a {
color: var(--link-color);
text-decoration: underline;
}
.markdown-content a:hover {
text-decoration: none;
}
.markdown-content code {
background-color: var(--background-color-alt);
padding: 0.2em 0.4em;
border-radius: 3px;
font-family: monospace;
font-size: 0.95em;
border: 1px solid var(--border-subtle);
}
.markdown-content pre {
background-color: var(--background-color-alt);
padding: var(--spacing-medium);
border-radius: 4px;
overflow-x: auto;
font-family: monospace;
font-size: 0.95em;
border: 1px solid var(--border-subtle);
line-height: 1.5;
}
.markdown-content pre code {
padding: 0;
background-color: transparent;
border: none;
font-size: inherit;
}
.markdown-content blockquote {
border-left: 4px solid var(--border-subtle);
padding-left: var(--spacing-medium);
color: var(--font-color);
opacity: 0.9;
font-style: italic;
margin-left: 0;
margin-right: 0;
}
.markdown-content ul, .markdown-content ol {
padding-left: var(--spacing-large);
}
.markdown-content li {
margin-bottom: var(--spacing-xsmall);
}
@media (max-width: 768px) {
.markdown-content {
font-size: 1.05rem;
max-width: none;
}
.markdown-content h1 { font-size: 1.6em; }
.markdown-content h2 { font-size: 1.4em; }
.markdown-content h3 { font-size: 1.2em; }
}
.antrag-detail-page-footer {
margin-top: var(--spacing-xxlarge);
padding-top: var(--spacing-large);
border-top: 1px solid var(--border-subtle);
text-align: center;
}
.back-link {
color: var(--link-color);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.back-link:hover {
color: var(--link-hover-color, var(--link-color));
text-decoration: underline;
}
.antrag-detail-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-medium);
margin-bottom: var(--spacing-large);
}
@media (max-width: 767px) {
.antrag-detail-page-wrapper {
padding: var(--spacing-large) var(--spacing-small);
}
.antrag-detail-page-header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-medium);
border-bottom: none;
margin-bottom: var(--spacing-large);
}
.status-badge {
margin-top: 0;
}
.antrag-detail-page-meta {
grid-template-columns: 1fr;
gap: var(--spacing-medium);
padding: var(--spacing-medium);
margin-bottom: var(--spacing-large);
}
.antrag-detail-page-description {
padding: var(--spacing-medium);
padding-left: var(--spacing-large);
margin-bottom: var(--spacing-large);
}
.antrag-detail-page-content h2 {
margin-bottom: var(--spacing-medium);
}
.antrag-detail-actions {
flex-direction: column;
gap: var(--spacing-small);
}
.antrag-detail-actions button {
width: 100%;
}
}
@font-face {
font-family: 'GrueneType';
src: url('/assets/fonts/GrueneType.CVNaQvhn.woff2') format('woff2'),
url('/assets/fonts/GrueneType.B542GIVp.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.subtitler-container {
display: flex;
flex-direction: column;
padding-top: 2rem;
background-color: var(--background-color);
}
.subtitler-title {
color: var(--font-color-h);
font-family: 'GrueneType', sans-serif;
text-align: center;
margin-bottom: 2rem;
font-size: 2rem;
}
.subtitler-content {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.error-message {
background-color: #fde8e8;
border: 1px solid #f8b4b4;
color: #c81e1e;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
[data-theme="dark"] .error-message {
background-color: #3b1818;
border-color: #c81e1e;
color: #f8b4b4;
}
.video-uploader {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.dropzone {
border: 2px dashed var(--primary);
border-radius: 8px;
padding: 2rem;
text-align: center;
background-color: var(--background-color-alt);
transition: all 0.3s ease;
cursor: pointer;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.dropzone.active {
border-color: var(--klee);
background-color: var(--hover-color-alt);
}
.dropzone.processing {
cursor: not-allowed;
opacity: 0.9;
border-style: solid;
}
.upload-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
color: var(--font-color);
width: 100%;
max-width: 400px;
}
.subtitle-editor-container {
width: 100%;
}
.editor-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.subtitles-editor {
display: flex;
flex-direction: column;
gap: 1rem;
}
.subtitles-list {
background-color: var(--background-color-alt);
border-radius: 8px;
padding: 1rem;
overflow-y: auto;
max-height: 70vh;
}
.subtitle-segment {
background-color: var(--background-color);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.segment-time {
background-color: var(--primary);
color: white;
padding: 0.5rem;
border-radius: 4px;
font-family: monospace;
text-align: center;
}
.segment-text {
width: 100%;
min-height: 60px;
padding: 0.5rem;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--background-color);
color: var(--font-color);
font-family: inherit;
resize: vertical;
}
.segment-text:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(0, 85, 56, 0.1);
}
.editor-controls {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid var(--background-color-alt);
border-top: 4px solid var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.button-loading-content {
display: flex;
align-items: center;
gap: 8px;
}
.button-spinner {
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--weiß);
border-top-color: transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.btn-primary {
background-color: var(--primary-button-bg, var(--primary));
color: var(--primary-button-text, white);
border: none;
padding: var(--primary-button-padding-m, 16px 32px);
border-radius: var(--primary-button-radius, 72px);
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
font-family: inherit;
font-size: 16px;
min-height: var(--primary-button-height-m, 48px);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 2px 4px rgba(0, 85, 56, 0.2);
}
.btn-primary:hover:not(:disabled) {
background-color: var(--primary-button-hover-bg, var(--klee));
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 85, 56, 0.3);
}
.btn-primary:focus {
outline: 2px solid var(--primary-button-bg, var(--primary));
outline-offset: 2px;
}
.btn-primary:disabled {
background-color: #cccccc;
color: #666666;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-primary.size-s {
padding: var(--primary-button-padding-s, 12px 24px);
height: var(--primary-button-height-s, 40px);
font-size: 14px;
}
.btn-secondary {
background-color: var(--background-color);
color: var(--font-color);
border: 2px solid var(--primary);
padding: var(--primary-button-padding-m, 16px 32px);
border-radius: var(--primary-button-radius, 72px);
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
font-family: inherit;
font-size: 16px;
min-height: var(--primary-button-height-m, 48px);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.btn-secondary:hover:not(:disabled) {
background-color: var(--hover-color-alt);
border-color: var(--klee);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 85, 56, 0.15);
}
.btn-secondary:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.btn-secondary:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-secondary.size-s {
padding: var(--primary-button-padding-s, 12px 24px);
height: var(--primary-button-height-s, 40px);
font-size: 14px;
}
[data-theme="dark"] {
.video-info,
.segment-text {
background-color: var(--background-color-alt);
}
.subtitle-segment {
background-color: var(--background-color);
}
.spinner {
border-color: var(--background-color);
border-top-color: var(--klee);
}
/* Dark mode button adjustments */
.btn-primary {
background-color: var(--primary-600);
color: var(--white);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.btn-primary:hover:not(:disabled) {
background-color: var(--klee);
box-shadow: 0 4px 12px rgba(0, 137, 57, 0.4);
}
.btn-secondary {
background-color: var(--background-color-alt);
color: var(--font-color);
border-color: var(--primary-600);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.btn-secondary:hover:not(:disabled) {
background-color: var(--hover-color-alt);
border-color: var(--klee);
box-shadow: 0 2px 8px rgba(0, 137, 57, 0.25);
}
}
@media (max-width: 1024px) {
.editor-layout {
grid-template-columns: 1fr;
}
.subtitles-list {
max-height: 50vh;
}
}
@media (max-width: 768px) {
.subtitler-container {
padding: 1rem;
}
.confirm-buttons,
.editor-controls {
flex-direction: column;
}
.btn-primary,
.btn-secondary {
width: 100%;
padding: var(--primary-button-padding-s, 12px 24px);
height: var(--primary-button-height-s, 40px);
font-size: 14px;
}
}
.video-info p[data-label] {
margin-bottom: 0.75rem;
}
.subtitler-container .button-spinner {
border-color: var(--weiß);
border-top-color: transparent;
}
.confirm-section {
background-color: var(--background-color-alt);
padding: 2rem;
max-width: 800px;
margin: 0 auto;
border-radius: 16px;
animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.confirm-section.exit {
animation: slideOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.confirm-section h3 {
color: var(--font-color-h);
margin: 0 0 1.5rem 0 !important;
font-size: 1.5rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.confirm-section h3 svg {
width: 1.5rem;
height: 1.5rem;
color: var(--primary);
}
.VideoInfo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.25rem;
margin: 1.5rem 0 1.5rem 0;
animation: fadeIn 0.4s ease-out 0.2s both;
}
.VideoInfo__Item {
margin: 0;
color: var(--font-color);
font-size: 1.1rem;
padding: 1rem 1.25rem;
background-color: var(--background-color);
border-radius: 12px;
transition: background-color 0.2s ease;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
row-gap: 0.5rem;
column-gap: 0.75rem;
align-items: start;
}
.VideoInfo__Item:hover {
background-color: var(--hover-color-alt);
}
.VideoInfo__Label {
font-size: 0.75rem;
color: var(--font-color);
opacity: 0.5;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
grid-column: 1 / -1;
grid-row: 1;
}
.VideoInfo__Icon svg {
width: 1.25rem;
height: 1.25rem;
color: var(--primary);
opacity: 0.8;
grid-column: 1;
grid-row: 2;
}
.VideoInfo__Content {
word-break: break-word;
grid-column: 2;
grid-row: 2;
}
.confirm-buttons {
display: flex;
gap: 1rem;
justify-content: center;
padding-top: 0.5rem;
animation: fadeIn 0.4s ease-out 0.2s both;
}
.confirm-buttons button {
min-width: 180px;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease;
}
.confirm-buttons button:hover:not(:disabled) {
opacity: 0.9;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-10px);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
[data-theme="dark"] {
.confirm-section {
background-color: var(--background-color-alt);
}
.VideoInfo__Item {
background-color: var(--background-color);
}
.VideoInfo__Item:hover {
background-color: var(--hover-color-alt);
}
}
@media (max-width: 768px) {
.confirm-section {
padding: 1.5rem;
}
.confirm-section h3 {
font-size: 1.25rem;
margin-bottom: 1.25rem;
}
.VideoInfo {
grid-template-columns: 1fr;
gap: 0.75rem;
margin: 0.5rem 0 1.25rem 0;
}
.VideoInfo__Item {
font-size: 1rem;
padding: 1rem;
}
.confirm-buttons {
flex-direction: column;
gap: 0.75rem;
}
.confirm-buttons button {
min-width: 100%;
}
}
@media (max-width: 480px) {
.confirm-section {
padding: 1rem;
border-radius: 12px;
}
.VideoInfo {
gap: 0.75rem;
}
.confirm-section h3 {
margin-bottom: 1rem;
}
.VideoInfo__Item {
padding: 1rem 0.75rem;
}
}
.subtitle-editor-container {
width: 100%;
}
.editor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding: 0 0.5rem;
}
.editor-header h3 {
margin: 0;
color: var(--font-color-h3);
font-size: 1.3rem;
}
.editor-layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1.5rem;
margin-bottom: 1rem;
align-items: start;
}
.video-section {
display: flex;
flex-direction: column;
gap: 0.5rem;
border-radius: 12px;
}
.video-preview {
border-radius: 8px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
}
.preview-video {
width: auto;
height: auto;
max-height: 100vh;
max-width: 100%;
background: transparent;
display: block;
border-radius: 8px;
padding: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.subtitle-preview-notice {
margin-top: 0rem;
margin-bottom: 1rem;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
text-align: center;
line-height: 1.3;
opacity: 0.9;
}
.subtitles-editor {
display: flex;
flex-direction: column;
}
.subtitles-list {
background-color: var(--background-color-alt);
border-radius: 8px;
padding: 1rem;
overflow-y: auto;
max-height: 100vh;
}
.subtitle-segment {
background-color: var(--background-color);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
position: relative;
}
.segment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
gap: 0.5rem;
}
.segment-time {
background-color: var(--primary);
color: white;
padding: 0.5rem;
border-radius: 4px;
font-family: monospace;
text-align: center;
flex-grow: 1;
cursor: pointer;
transition: background-color 0.2s ease;
}
.segment-time:hover {
background-color: var(--klee);
}
.segment-time-inputs {
display: flex;
align-items: center;
gap: 0.3rem;
flex-grow: 1;
background-color: var(--background-color);
padding: 0.4rem 0.6rem;
border-radius: 4px;
border: 1px solid var(--border-color);
}
/* SubtitleEditor input styles - DISABLED to prevent conflicts with main form-inputs.css */
/*
.segment-time-inputs input.segment-time-input {
font-family: monospace;
font-size: 0.9em;
border: none;
background: transparent;
color: var(--font-color);
text-align: center;
width: 90px;
padding: 0.1rem;
outline: none;
}
.segment-time-inputs input.segment-time-input:focus {
background-color: var(--hover-color-alt);
border-radius: 2px;
}
*/
.segment-time-inputs span {
color: var(--font-color-light);
}
.delete-segment-button {
background: none;
border: none;
color: var(--error-color);
cursor: pointer;
padding: 0.3rem;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.delete-segment-button:hover {
background-color: rgba(255, 0, 0, 0.1);
color: darkred;
}
.delete-segment-button svg {
display: block;
}
.segment-text {
width: 100%;
min-height: 60px;
padding: 0.5rem;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--background-color);
color: var(--font-color);
font-family: inherit;
resize: vertical;
}
.segment-text-container {
position: relative;
width: 100%;
}
.segment-text.has-emojis {
border-left: 3px solid #ff9800;
}
.segment-text-preview {
position: absolute;
top: 0.5rem;
left: 0.5rem;
right: 0.5rem;
bottom: 0.5rem;
pointer-events: none;
white-space: pre-wrap;
word-wrap: break-word;
font-family: inherit;
font-size: inherit;
line-height: 1.5;
z-index: 1;
color: transparent;
}
.emoji-transparent {
opacity: 0.3;
color: var(--font-color);
background-color: rgba(255, 152, 0, 0.1);
padding: 0 2px;
border-radius: 2px;
}
.emoji-warning {
font-size: 0.8rem;
color: #ff9800;
margin-top: 0.25rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
@media (max-width: 768px) {
.subtitles-list {
padding: 0.5rem;
}
.segment-text {
min-height: auto;
height: auto;
overflow: hidden;
resize: none;
display: block;
box-sizing: border-box;
}
.subtitle-segment {
overflow: visible;
background-color: transparent;
padding: 7px;
margin-bottom: 5px;
}
.segment-text-preview {
top: 7px;
left: 7px;
right: 7px;
bottom: 7px;
}
.emoji-warning {
font-size: 0.75rem;
margin-top: 0.125rem;
}
}
.segment-text:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(0, 85, 56, 0.1);
}
.editor-controls {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
}
.video-controls {
margin-top: 0rem;
display: block;
width: 100%;
}
.video-controls .btn-primary {
display: block;
margin: 0 auto;
padding: var(--primary-button-padding-m, 16px 32px);
font-size: 16px;
border-radius: var(--primary-button-radius, 72px);
font-weight: 500;
transition: all 0.2s ease;
background-color: var(--primary-button-bg, var(--primary));
border: none;
color: var(--primary-button-text, white);
box-shadow: 0 2px 4px rgba(0, 85, 56, 0.2);
min-height: var(--primary-button-height-m, 48px);
gap: 8px;
}
.video-controls .btn-primary:hover:not(:disabled) {
background-color: var(--primary-button-hover-bg, var(--klee));
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 85, 56, 0.3);
}
.video-controls .btn-primary:focus {
outline: 2px solid var(--primary-button-bg, var(--primary));
outline-offset: 2px;
}
.video-controls .btn-primary:disabled {
background-color: #cccccc;
color: #666666;
transform: none;
box-shadow: none;
cursor: not-allowed;
}
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
@media (max-width: 1024px) {
.desktop-only {
display: none;
}
.mobile-only {
display: block;
}
.editor-layout {
grid-template-columns: 1fr;
gap: 1rem;
}
.video-section {
padding: 0;
margin-bottom: 0;
}
.video-preview {
max-height: 100vh;
margin: 0 auto;
margin-bottom: 0.75rem;
}
.preview-video {
max-height: 100vh;
}
.subtitle-preview-notice {
padding: 0;
font-size: 0.8rem;
margin-top: 0;
margin-bottom: 2rem;
}
.subtitles-list {
max-height: 50vh;
}
.editor-controls {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
}
}
@media (max-width: 768px) {
.editor-layout {
gap: 1rem;
gap: 0rem;
}
}
@media (max-width: 768px) {
.editor-controls {
flex-direction: column;
}
}
[data-theme="dark"] {
.segment-text {
background-color: var(--background-color-alt);
}
.subtitle-segment {
background-color: var(--background-color);
}
.segment-time-inputs {
background-color: var(--background-color-alt);
border-color: var(--primary);
}
.segment-time-inputs input.segment-time-input {
color: var(--font-color);
}
.segment-time-inputs input.segment-time-input:focus {
background-color: var(--background-color);
}
.delete-segment-button {
color: #ff6b6b;
}
.delete-segment-button:hover {
background-color: rgba(255, 107, 107, 0.15);
color: #ff4d4d;
}
.emoji-transparent {
color: var(--font-color);
background-color: rgba(255, 152, 0, 0.15);
}
.emoji-warning {
color: #ffb74d;
}
/* Dark mode button adjustments */
.video-controls .btn-primary {
background-color: var(--primary-600);
color: var(--white);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.video-controls .btn-primary:hover:not(:disabled) {
background-color: var(--klee);
box-shadow: 0 4px 12px rgba(0, 137, 57, 0.4);
}
.editor-back-button {
background-color: var(--background-color);
color: var(--font-color);
border-color: var(--border-subtle);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.editor-back-button:hover {
background-color: var(--hover-color-alt);
border-color: var(--primary-600);
box-shadow: 0 2px 8px rgba(0, 137, 57, 0.25);
}
}
.editor-back-button {
padding: var(--primary-button-padding-s, 12px 24px);
font-size: 14px;
border-radius: var(--primary-button-radius, 72px);
background-color: var(--background-color-alt);
color: var(--font-color);
border: 2px solid var(--border-subtle);
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--primary-button-height-s, 40px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.editor-back-button:hover {
background-color: var(--hover-color-alt);
border-color: var(--primary);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 85, 56, 0.15);
}
.editor-back-button:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Main Container */
.subtitle-style-selector {
min-height: 100vh;
background: linear-gradient(135deg, var(--background-color) 0%, var(--background-color-alt) 100%);
padding: 2rem 1rem;
}
.style-selector-container {
max-width: 1400px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2rem;
}
/* Header */
.style-selector-header {
text-align: center;
margin-bottom: 1rem;
}
.style-selector-title {
font-family: 'GrueneType', sans-serif;
font-size: 2.5rem;
font-weight: 600;
color: var(--font-color-h);
margin: 0 0 0.5rem 0;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.style-selector-title svg {
color: var(--primary);
font-size: 2rem;
}
.style-selector-subtitle {
font-size: 1.1rem;
color: var(--font-color);
opacity: 0.8;
margin: 0;
font-weight: 400;
}
/* Main Layout */
.style-selector-main {
display: grid;
grid-template-columns: auto 1fr;
gap: 3rem;
align-items: start;
justify-items: start;
}
/* Video Section */
.video-hero-section {
background: var(--background-color);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 85, 56, 0.1);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
width: fit-content;
max-width: 100%;
}
.video-hero-section:hover {
box-shadow: 0 15px 60px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.video-container {
position: relative;
border-radius: 16px;
overflow: hidden;
background: #000;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
height: fit-content;
}
.preview-video {
max-width: 100%;
max-height: 70vh;
width: auto;
height: auto;
object-fit: contain;
display: block;
border-radius: 16px;
}
.video-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
color: var(--font-color);
font-size: 1.1rem;
min-height: 300px;
}
.video-loading-spinner {
width: 48px;
height: 48px;
border: 3px solid rgba(0, 85, 56, 0.2);
border-top: 3px solid var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.video-info {
margin-top: 1.5rem;
padding: 1rem;
background: var(--background-color-alt);
border-radius: 12px;
font-size: 0.9rem;
color: var(--font-color);
opacity: 0.8;
text-align: center;
}
/* Options Panel */
.options-panel {
background: var(--background-color);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 85, 56, 0.1);
width: 100%;
max-width: 800px;
height: fit-content;
position: sticky;
top: 2rem;
}
.options-section {
margin-bottom: 2.5rem;
}
.options-section:last-child {
margin-bottom: 0;
}
.section-title {
font-size: 1.3rem;
font-weight: 600;
color: var(--font-color-h3);
margin: 0 0 1.5rem 0;
display: flex;
align-items: center;
padding-bottom: 0.5rem;
gap: 0.5rem;
}
.section-title svg {
color: var(--primary);
font-size: 1.1rem;
}
/* Style Options */
.style-options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
/* Grüne Jugend Section */
.gj-section-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--font-color-h3);
margin: 2rem 0 1rem 0;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
text-align: center;
}
.style-option-card {
position: relative;
background: var(--background-color-alt);
border: 1.5px solid transparent;
border-radius: 16px;
padding: 1rem;
cursor: pointer;
transition: all 0.3s ease;
overflow: hidden;
}
.style-option-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 85, 56, 0.1);
}
.style-option-card.selected {
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(0, 85, 56, 0.15);
}
.style-option-radio {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.style-option-content {
position: relative;
z-index: 1;
}
.style-option-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.style-option-name {
font-weight: 600;
font-size: 1rem;
color: var(--font-color);
margin: 0;
padding-left: 0.25rem;
}
.style-option-check {
width: 20px;
height: 20px;
border: 2px solid var(--border-color);
border-radius: 50%;
background: var(--background-color);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
opacity: 0;
}
.style-option-card.selected .style-option-check {
opacity: 1;
background: var(--primary);
color: white;
}
.style-option-preview {
border-radius: 12px;
padding: 0.25rem 0.5rem 0.25rem 0.25rem;
display: flex;
justify-content: left;
min-height: 20px;
position: relative;
overflow: hidden;
border: 1px solid var(--border-subtle);
}
.preview-text {
font-size: 1rem;
font-weight: 500;
text-align: center;
line-height: 1.4;
}
/* Length Options */
.length-options-container {
display: flex;
background: var(--background-color-alt);
border-radius: 12px;
padding: 0.5rem;
gap: 0.5rem;
}
.length-option-button {
flex: 1;
background: transparent;
border: none;
padding: 1rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
color: var(--font-color);
}
.length-option-button.selected {
background: var(--primary);
color: white;
box-shadow: 0 2px 8px rgba(0, 85, 56, 0.3);
}
.length-option-title {
font-size: 1rem;
margin-bottom: 0.25rem;
}
.length-option-description {
font-size: 0.85rem;
opacity: 0.8;
}
/* Height Options */
.height-options-container {
display: flex;
gap: var(--spacing-small);
justify-content: center;
}
.height-option-card {
position: relative;
background: var(--card-background-alt);
border: 1.5px solid transparent;
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-medium);
cursor: pointer;
transition: var(--input-transition);
overflow: hidden;
box-shadow: var(--card-shadow-subtle);
min-width: 110px;
text-align: center;
}
.height-option-card:hover {
transform: var(--card-hover-transform);
box-shadow: var(--card-hover-shadow);
}
.height-option-card.selected {
border-color: var(--interactive-accent-color);
box-shadow: var(--shadow-md);
}
.height-option-radio {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.height-option-content {
position: relative;
z-index: 1;
}
.height-option-header {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-xsmall);
position: relative;
}
.height-option-name {
font-weight: 600;
font-size: 1rem;
color: var(--font-color);
margin: 0;
}
.height-option-check {
display: none;
}
.height-option-description {
font-size: 0.85rem;
color: var(--font-color);
opacity: 0.8;
text-align: center;
line-height: 1.3;
}
/* Mode Options */
.mode-options-container {
display: flex;
background: var(--background-color-alt);
border-radius: 12px;
padding: 0.5rem;
gap: 0.5rem;
}
.mode-option-button {
flex: 1;
background: transparent;
border: none;
padding: 1rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
color: var(--font-color);
}
.mode-option-button:hover {
background: rgba(0, 85, 56, 0.1);
}
.mode-option-button.selected {
background: var(--primary);
color: white;
box-shadow: 0 2px 8px rgba(0, 85, 56, 0.3);
}
.mode-option-title {
font-size: 1rem;
margin-bottom: 0.25rem;
}
.mode-option-description {
font-size: 0.85rem;
opacity: 0.8;
}
/* Action Section */
.action-section {
display: flex;
justify-content: center;
margin-top: 3rem;
}
.continue-button {
background: linear-gradient(135deg, var(--primary) 0%, var(--klee) 100%);
color: white;
border: none;
padding: 1.25rem 3rem;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(0, 85, 56, 0.3);
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 200px;
justify-content: center;
}
.continue-button:hover:not(:disabled) {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 85, 56, 0.4);
}
.continue-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: 0 4px 15px rgba(0, 85, 56, 0.2);
}
.button-loading-content {
display: flex;
align-items: center;
gap: 0.75rem;
}
.button-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Error Message */
.error-message {
background: linear-gradient(135deg, #ffebee 0%, #fce4ec 100%);
border: 1px solid #e57373;
color: #c62828;
padding: 1.5rem;
border-radius: 16px;
margin-bottom: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
box-shadow: 0 4px 15px rgba(229, 115, 115, 0.2);
}
.error-dismiss {
background: transparent;
border: 2px solid #c62828;
color: #c62828;
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.error-dismiss:hover {
background: rgba(198, 40, 40, 0.1);
}
/* Animations */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.subtitle-style-selector {
animation: fadeIn 0.6s ease-out;
}
/* Dark Theme */
[data-theme="dark"] {
.video-hero-section,
.options-panel {
background: var(--background-color-alt);
border-color: rgba(114, 164, 78, 0.2);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.video-hero-section:hover,
.options-panel:hover {
box-shadow: 0 15px 60px rgba(0, 0, 0, 0.4);
}
.style-option-card {
background: var(--background-color);
border-color: transparent;
}
.style-option-card.selected {
border-color: var(--klee);
box-shadow: 0 2px 8px rgba(114, 164, 78, 0.2);
}
.style-option-preview {
background: linear-gradient(135deg, var(--grey-800) 0%, var(--grey-900) 100%);
border-color: var(--border-subtle);
}
.style-option-check {
border-color: var(--border-subtle);
background: var(--background-color-alt);
}
.style-option-card.selected .style-option-check {
background: var(--klee);
border-color: var(--klee);
}
.length-options-container {
background: var(--background-color);
}
.length-option-button.selected {
background: var(--klee);
}
.mode-options-container {
background: var(--background-color);
}
.mode-option-button:hover {
background: rgba(114, 164, 78, 0.1);
}
.mode-option-button.selected {
background: var(--klee);
}
.height-option-card {
background: var(--card-background);
border-color: transparent;
}
.height-option-card.selected {
border-color: var(--interactive-accent-color);
box-shadow: var(--shadow-md);
}
.height-option-check {
border-color: var(--border-color-disabled);
background: var(--card-background-alt);
}
.height-option-card.selected .height-option-check {
background: var(--interactive-accent-color);
border-color: var(--interactive-accent-color);
}
.continue-button {
background: linear-gradient(135deg, var(--klee) 0%, var(--primary-500) 100%);
box-shadow: 0 8px 25px rgba(114, 164, 78, 0.4);
}
.continue-button:hover:not(:disabled) {
box-shadow: 0 12px 35px rgba(114, 164, 78, 0.5);
}
.error-message {
background: linear-gradient(135deg, #3b1818 0%, #4a1a1a 100%);
border-color: #e57373;
color: #ffcdd2;
}
.video-loading-spinner {
border-color: rgba(114, 164, 78, 0.3);
border-top-color: var(--klee);
}
}
/* Responsive Design */
@media (max-width: 1200px) {
.style-selector-main {
gap: 2rem;
}
.style-options-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 968px) {
.style-selector-main {
grid-template-columns: 1fr;
gap: 2rem;
}
.options-panel {
position: static;
max-width: 100%;
}
.style-selector-title {
font-size: 2rem;
}
.style-options-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
}
@media (max-width: 768px) {
.subtitle-style-selector {
padding: 1rem;
}
.video-hero-section,
.options-panel {
padding: 1.5rem;
border-radius: 16px;
}
.style-selector-title {
font-size: 1.75rem;
flex-direction: column;
gap: 0.5rem;
}
.style-selector-title svg {
font-size: 1.5rem;
}
.style-options-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.style-option-card {
padding: 1rem;
}
.continue-button {
width: 100%;
padding: 1rem 2rem;
}
.length-options-container {
flex-direction: column;
gap: 0.5rem;
}
.length-option-button {
text-align: left;
}
.height-options-container {
flex-direction: column;
gap: var(--spacing-xsmall);
}
.height-option-card {
padding: var(--spacing-xsmall);
min-width: 60px;
}
.video-container {
max-height: 60vh;
}
.preview-video {
max-height: 60vh;
}
}
@media (max-width: 480px) {
.style-selector-container {
gap: 1.5rem;
}
.style-selector-title {
font-size: 1.5rem;
}
.video-hero-section,
.options-panel {
padding: 1rem;
}
}
.success-screen {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
padding: 1rem;
}
.success-content {
display: flex;
flex-direction: column;
text-align: center;
background-color: var(--background-color-alt);
padding: 3rem;
border-radius: 8px;
max-width: 1200px;
width: 100%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.success-buttons {
gap: 1rem;
}
.success-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--klee);
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
color: white;
margin: 0 auto 20px;
transition: all 0.3s ease-in-out;
}
.success-icon.loading {
background: var(--klee);
}
.success-icon:not(.loading) {
animation: scaleIn 0.3s ease-out;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
}
.success-icon.loading .spinner {
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.social-text-loading {
margin-top: 20px;
text-align: center;
}
.social-text-loading .spinner {
margin: 10px auto;
border-color: rgba(33, 150, 243, 0.3);
border-top-color: #2196F3;
}
.success-content h2 {
margin-bottom: 1rem;
}
.success-content p {
margin-bottom: 2rem;
}
@media (max-width: 768px) {
.success-content p {
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
}
.success-buttons {
display: flex;
gap: 1rem;
justify-content: center;
width: 100%;
}
.success-buttons .btn-primary {
width: 100%;
max-width: 300px;
}
.btn-primary, .btn-secondary {
padding: 0.8rem 1.5rem;
border-radius: 4px;
font-weight: 600;
transition: all 0.2s ease;
}
.btn-primary {
background-color: var(--klee);
color: white;
border: none;
}
.btn-primary:hover {
background-color: var(--klee-dark);
}
.btn-secondary {
background-color: transparent;
color: var(--klee);
border: 2px solid var(--klee);
}
.btn-secondary:hover {
background-color: var(--klee-light);
}
@keyframes scaleIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@media (min-width: 1024px) {
.success-content {
flex-direction: row;
align-items: center;
gap: 3rem;
text-align: left;
min-height: 400px;
}
.success-main {
flex: 1;
max-width: 600px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.social-text-result {
flex: 1;
margin: 0;
min-width: 400px;
max-width: 600px;
align-self: stretch;
}
}
@media (max-width: 1023px) {
.success-content {
padding: 2rem;
margin: 0rem;
}
.success-buttons {
gap: 0.5rem;
flex-direction: column;
align-items: center;
}
.success-buttons .btn-primary {
width: 100%;
margin-bottom: 20px;
}
}
.error-message {
background-color: var(--error-light);
color: var(--error);
padding: 1rem;
border-radius: 4px;
margin: 1rem 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
}
.social-text-result {
background-color: var(--background-color);
padding: 1.5rem;
border-radius: 4px;
text-align: left;
}
.social-text-result h3 {
margin-bottom: 1rem !important;
font-size: 1.1rem;
}
.social-text-result p {
line-height: 1.5;
white-space: pre-wrap;
margin-bottom: 1rem;
}
@media (max-width: 768px) {
.social-text-result {
background-color: transparent;
padding: 1.5rem 0 0 0;
border-radius: 0;
}
.social-text-result p {
font-size: 0.9rem;
line-height: 1.4;
margin-bottom: 0.8rem;
}
}
.copy-button {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
background-color: var(--background-color-alt);
border: 1px solid var(--klee);
color: var(--klee);
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.2s ease;
}
@media (max-width: 768px) {
.success-screen .copy-button {
font-size: 0.6rem;
}
}
.copy-button:hover {
background-color: var(--klee-light);
}
[data-theme="dark"] .success-screen .copy-button {
border-color: var(--secondary);
color: var(--secondary);
}
[data-theme="dark"] .success-screen .copy-button:hover {
background-color: rgba(245, 241, 233, 0.1);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .success-screen .copy-button {
border-color: var(--secondary);
color: var(--secondary);
}
:root:not([data-theme="light"]) .success-screen .copy-button:hover {
background-color: rgba(245, 241, 233, 0.1);
}
}
.copy-button:active {
transform: scale(0.98);
}
.progress-container {
margin: 20px 0;
width: 100%;
max-width: 300px;
}
.progress-bar {
width: 100%;
height: 8px;
background-color: var(--grau-hell, #f0f0f0);
border-radius: 4px;
overflow: hidden;
margin-bottom: 8px;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--klee, #4CAF50), var(--gruen, #2E7D32));
border-radius: 4px;
transition: width 0.3s ease;
}
.progress-text {
font-size: 14px;
color: var(--grau-dunkel, #666);
text-align: center;
display: block;
}
.video-uploader {
width: 100%;
max-width: 800px;
margin: 0 auto;
margin-top: -1rem;
animation: fadeIn 0.3s ease-out;
}
.upload-container {
background-color: var(--background-color-alt);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.dropzone {
border: 2px dashed var(--primary);
border-radius: 12px;
padding: 3rem 2rem;
background-color: var(--background-color);
transition: all 0.2s ease;
cursor: pointer;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.dropzone:hover:not(.processing) {
border-color: var(--klee);
background-color: var(--hover-color-alt);
}
.dropzone.active {
border-color: var(--klee);
background-color: var(--hover-color-alt);
}
.dropzone.processing {
cursor: not-allowed;
opacity: 0.9;
border-style: solid;
border-color: var(--primary);
}
.upload-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
color: var(--font-color);
width: 100%;
max-width: 500px;
text-align: center;
}
.upload-icon-container {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--background-color-alt);
border-radius: 50%;
margin-bottom: 1rem;
}
.upload-icon {
font-size: 2.5rem;
color: var(--primary);
transition: all 0.3s ease;
}
.upload-icon.pulsing {
animation: pulse 2s infinite;
}
.upload-text {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.upload-text h3 {
color: var(--font-color-h);
font-size: 1.5rem;
margin: 0;
text-align: center;
}
.upload-text p {
color: var(--font-color);
font-size: 1.1rem;
margin: 0;
opacity: 0.8;
}
.upload-formats {
color: var(--font-color);
font-size: 0.9rem;
opacity: 0.6;
margin-top: 1rem;
}
.upload-limit {
color: var(--font-color);
font-size: 0.9rem;
opacity: 0.6;
margin-top: 0.5rem;
}
.ai-notice {
color: var(--font-color);
font-size: 0.9rem;
opacity: 0.8;
margin: 1rem 0;
text-align: center;
font-style: italic;
}
.spinner {
width: 48px;
height: 48px;
border: 4px solid var(--background-color-alt);
border-top: 4px solid var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
[data-theme="dark"] {
.upload-container {
background-color: var(--background-color-alt);
}
.upload-icon-container {
background-color: var(--background-color);
}
.spinner {
border-color: var(--background-color);
border-top-color: var(--klee);
}
}
@media (max-width: 768px) {
.upload-container {
padding: 1rem;
border-radius: 12px;
}
.dropzone {
padding: 2rem 1rem;
min-height: 250px;
}
.upload-icon-container {
width: 60px;
height: 60px;
}
.upload-icon {
font-size: 2rem;
}
.upload-text h3 {
font-size: 1.25rem;
}
.upload-text p {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.dropzone {
min-height: 200px;
}
.upload-text h3 {
font-size: 1.1rem;
}
.upload-text p {
font-size: 0.9rem;
}
.upload-formats {
font-size: 0.8rem;
}
}
.subtitle-preference-selector {
margin-top: 1.5rem;
padding: 1rem;
transition: opacity 0.3s ease;
}
.subtitle-preference-selector h4 {
margin: 0 0 1rem 0;
font-size: 1.1rem;
color: var(--font-color-h);
text-align: left;
}
.preference-options {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.preference-options label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 1rem;
color: var(--font-color);
}
.preference-options input[type="radio"] {
cursor: pointer;
accent-color: var(--primary);
}
.preference-options.tiles {
flex-direction: row;
gap: 1rem;
flex-wrap: wrap;
}
.preference-tile {
flex: 1;
min-width: 150px;
background-color: var(--background-color-alt);
border: 1px solid var(--primary);
border-radius: 8px;
padding: 1rem 1.25rem;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
display: flex;
align-items: center;
text-align: center;
color: var(--font-color);
gap: 0.75rem;
}
.preference-tile:hover {
border-color: var(--primary);
background-color: var(--hover-color-alt);
}
.preference-tile-radio {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.preference-tile-content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.preference-tile-radio:checked + .preference-tile-content {
}
.preference-tile-radio:checked + .preference-tile-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid var(--primary);
border-radius: 6px;
pointer-events: none;
}
[data-theme="dark"] .subtitle-preference-selector {
background-color: var(--background-color-alt);
}
[data-theme="dark"] .preference-options input[type="radio"] {
accent-color: var(--klee);
}
.upload-progress-container {
width: 80%;
max-width: 300px;
margin-bottom: 1rem;
text-align: center;
}
.upload-progress-bar {
width: 100%;
height: 10px;
background-color: var(--background-color-alt);
border-radius: 5px;
overflow: hidden;
border: 1px solid var(--primary);
}
.upload-progress-fill {
height: 100%;
background-color: var(--klee);
transition: width 0.2s ease-in-out;
border-radius: 5px;
}
.upload-progress-text {
margin-top: 0.5rem;
font-size: 1rem;
color: var(--font-color);
font-weight: bold;
}
.live-subtitle-preview {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 10;
overflow: hidden;
}
.live-subtitle-text {
display: inline-block;
white-space: pre-wrap;
word-break: break-word;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "kern" 1;
font-family: 'GrueneType', Arial, sans-serif;
}
.video-loading {
padding: var(--spacing-xlarge);
text-align: center;
color: var(--font-color);
font-size: 1.1rem;
}
@media (max-width: 768px) {
.live-subtitle-text {
font-size: clamp(14px, 3vw, 18px) !important;
line-height: 1.1 !important;
padding: 0.15em 0.3em !important;
max-width: 90% !important;
text-shadow: none !important;
font-family: 'GrueneType', Arial, sans-serif !important;
}
.live-subtitle-preview {
padding: 0 5px;
}
}
.search-page-container {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding: 20px;
background-color: var(--background-color);
transition: background-color 0.3s ease;
}
.search-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 32px;
margin-top: 6rem;
text-align: center;
width: 100%;
max-width: var(--container-max-width, 1200px);
}
.search-header h1 {
font-size: 56px;
color: var(--font-color-h);
margin: 0;
letter-spacing: -1px;
line-height: 1.2;
}
.search-subtitle {
font-size: 20px;
color: var(--font-color);
margin: 12px 0 0 0;
opacity: 0.8;
font-weight: normal;
}
.search-error {
margin-top: 20px;
padding: 12px 16px;
background-color: rgba(255, 241, 122, 0.2);
border: 1px solid var(--sonne);
border-radius: 8px;
color: var(--font-color);
text-align: center;
max-width: 584px;
width: 100%;
}
.analyze-button-container {
margin: 20px 0;
width: 100%;
max-width: 584px;
display: flex;
justify-content: center;
}
.analyze-button {
background-color: var(--klee);
color: var(--weiß);
border: none;
border-radius: 4px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.analyze-button:hover {
background-color: var(--primary);
}
.analyze-button:disabled {
background-color: var(--background-color-alt);
cursor: not-allowed;
}
.analysis-loading {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px 0;
gap: 12px;
color: var(--font-color);
}
.analysis-container {
width: 100%;
max-width: 750px;
margin: 20px auto;
padding: 35px;
background-color: var(--background-color-alt);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
}
.analysis-container h2 {
color: var(--font-color-h);
margin: 0 0 16px 0;
font-size: 20px;
font-weight: 500;
}
.analysis-content {
color: var(--font-color);
line-height: 1.8;
font-size: 16px;
text-align: justify;
hyphens: auto;
}
.analysis-actions {
position: absolute;
top: 24px;
right: 24px;
display: flex;
gap: 8px;
z-index: 1;
}
.analysis-content h3 {
color: var(--font-color-h);
font-size: 18px;
font-weight: 500;
margin: 24px 0 12px 0;
line-height: 1.4;
}
.analysis-content h3:first-child {
margin-top: 0;
}
.analysis-content strong {
color: var(--font-color-h);
font-weight: 600;
}
.analysis-content em {
font-style: italic;
opacity: 0.9;
}
.analysis-content p {
margin: 0 0 16px 0;
white-space: normal;
}
.analysis-content p:last-child {
margin-bottom: 0;
}
.analysis-content ul {
margin: 8px 0;
padding-left: 20px;
list-style: none;
}
.analysis-content ul li {
position: relative;
padding-left: 16px;
margin-bottom: 8px;
line-height: 1.6;
}
.analysis-content ul li::before {
content: "•";
position: absolute;
left: -4px;
color: var(--klee);
}
.analysis-content ul ul {
margin: 8px 0 8px 16px;
}
.analysis-content ul ul li::before {
content: "◦";
}
.analysis-content ul ul ul {
margin: 8px 0 8px 16px;
}
.analysis-content ul ul ul li::before {
content: "▪";
font-size: 0.8em;
}
.sources-section {
width: 100%;
max-width: 800px;
margin: 20px auto;
display: flex;
flex-direction: column;
gap: 32px;
}
.sources-container {
width: 100%;
}
.sources-container h2 {
color: var(--font-color-h);
margin: 0 0 16px 0;
font-size: 20px;
padding: 0 16px;
}
.sources-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
padding: 0 1rem;
}
.source-item {
display: block;
padding: 1rem;
background-color: var(--background-color-alt);
border-radius: 8px;
text-decoration: none;
transition: background-color 0.2s ease;
overflow: hidden;
height: 100%;
}
.source-item:hover {
background-color: var(--hover-color-alt);
}
.source-item h3 {
color: var(--font-color);
margin: 0 0 8px 0;
font-size: 16px;
font-weight: 500;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
.source-url {
color: var(--font-color);
opacity: 0.7;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
width: 100%;
}
/* Content Snippets Styling */
.source-content-snippets {
margin: 10px 0 8px 0;
padding: 8px 12px;
background-color: var(--background-color);
border-radius: 4px;
border-left: 3px solid var(--klee);
}
.content-preview {
font-size: 13px;
line-height: 1.4;
color: var(--font-color);
opacity: 0.85;
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
[data-theme="dark"] .search-page-container {
background-color: var(--background-color);
}
[data-theme="dark"] .search-header h1 {
color: var(--secondary);
}
[data-theme="dark"] .search-subtitle {
color: var(--font-color);
}
[data-theme="dark"] .search-error {
background-color: rgba(255, 241, 122, 0.1);
}
[data-theme="dark"] .analysis-container,
[data-theme="dark"] .source-item {
background-color: var(--hover-color-alt);
}
[data-theme="dark"] .source-item:hover {
background-color: var(--hover-color-alt);
}
[data-theme="dark"] .analysis-content ul li::before {
color: var(--secondary);
}
[data-theme="dark"] .source-content-snippets {
background-color: var(--background-color-alt);
border-left-color: var(--secondary);
}
@media (max-width: 768px) {
.search-page-container {
padding: 20px;
}
.search-header {
margin-top: 5rem;
margin-bottom: 24px;
padding: 0 16px;
}
.search-header h1 {
font-size: 36px;
line-height: 1.3;
}
.search-subtitle {
font-size: 16px;
margin-top: 12px;
padding: 0 8px;
}
.search-error {
margin: 20px 16px;
font-size: 14px;
max-width: calc(100% - 32px);
}
.analyze-button-container {
max-width: calc(100% - 32px);
}
.analysis-container {
padding: 16px;
margin: 16px;
}
.analysis-container h3 {
padding-right: 60px;
text-align: left;
}
.analysis-content {
font-size: 15px;
line-height: 1.6;
}
.source-item {
padding: 14px;
border-radius: 12px;
}
.source-item h3 {
font-size: 14px;
margin-bottom: 6px;
}
.source-url {
font-size: 12px;
}
.source-content {
font-size: 0.8125rem;
}
.sources-list {
grid-template-columns: 1fr;
padding: 0;
}
.analysis-actions {
top: 16px;
right: 16px;
}
}
.source-recommendation {
margin: 8px 0;
font-size: 14px;
color: var(--font-color);
}
.source-summary {
margin: 0;
line-height: 1.4;
}
@media (max-width: 768px) {
.source-recommendation {
font-size: 13px;
}
.source-summary {
line-height: 1.3;
}
.source-content-snippets {
margin: 8px 0 6px 0;
padding: 6px 10px;
}
.content-preview {
font-size: 12px;
line-height: 1.3;
}
}
/* Search Mode Selector */
.search-mode-selector {
width: 100%;
max-width: 584px;
margin-bottom: 20px;
}
.mode-options {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.mode-option {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 20px;
background-color: var(--background-color-alt);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
min-width: 180px;
position: relative;
}
.mode-option:hover {
background-color: var(--hover-color-alt);
transform: translateY(-1px);
}
.mode-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.mode-option input[type="radio"]:checked + span {
color: var(--klee);
font-weight: 600;
}
.mode-option input[type="radio"]:checked ~ small {
color: var(--font-color);
opacity: 0.8;
}
.mode-option span {
font-size: 16px;
font-weight: 500;
color: var(--font-color);
margin-bottom: 4px;
transition: color 0.2s ease;
}
.mode-option small {
font-size: 12px;
color: var(--font-color);
opacity: 0.6;
text-align: center;
line-height: 1.3;
transition: color 0.2s ease;
}
/* Deep Search Progress */
.deep-search-progress {
width: 100%;
max-width: 584px;
margin: 20px 0;
padding: 16px;
background-color: var(--background-color-alt);
border-radius: 8px;
border-left: 4px solid var(--klee);
}
.deep-search-progress p {
margin: 0 0 8px 0;
color: var(--font-color);
font-size: 14px;
line-height: 1.4;
}
.deep-search-progress p:last-child {
margin-bottom: 0;
}
/* Dossier Container */
.dossier-container {
width: 100%;
max-width: 900px;
margin: 20px auto;
padding: 40px;
background-color: var(--background-color-alt);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
}
.dossier-content {
color: var(--font-color);
line-height: 1.8;
font-size: 16px;
}
/* Enhance antrag-text-content styling for dossier */
.dossier-content .antrag-text-content h1 {
font-size: 28px;
font-weight: 700;
border-bottom: 2px solid var(--klee);
padding-bottom: 8px;
margin-top: 0;
}
.dossier-content .antrag-text-content h2 {
font-size: 22px;
font-weight: 600;
color: var(--font-color-h);
}
.dossier-content .antrag-text-content h3 {
font-size: 18px;
font-weight: 500;
color: var(--font-color-h);
}
.dossier-content .antrag-text-content h4 {
font-size: 16px;
font-weight: 500;
color: var(--font-color-h);
}
.dossier-content .antrag-text-content p {
margin: 0 0 16px 0;
color: var(--font-color);
}
.dossier-content .antrag-text-content ul {
margin: 8px 0;
padding-left: 0;
margin-left: 20px;
}
.dossier-content .antrag-text-content ul li {
margin-bottom: 8px;
line-height: 1.6;
color: var(--font-color);
}
.dossier-content .antrag-text-content strong {
color: var(--font-color-h);
font-weight: 600;
}
.dossier-content .antrag-text-content em {
font-style: italic;
opacity: 0.9;
}
.dossier-content .antrag-text-content blockquote {
border-left: 4px solid var(--klee);
background-color: var(--background-color);
padding: 12px 16px;
margin: 16px 0;
border-radius: 0 4px 4px 0;
}
.dossier-content .antrag-text-content code {
background-color: var(--background-color);
color: var(--font-color-h);
padding: 2px 4px;
border-radius: 3px;
font-size: 0.9em;
}
/* Categorized Sources Section */
.categorized-sources-section {
width: 100%;
max-width: 900px;
margin: 20px auto;
}
.categorized-sources-section > h2 {
color: var(--font-color-h);
font-size: 24px;
margin-bottom: 24px;
text-align: center;
}
.analysis-header {
display: none;
}
/* Dark theme overrides */
[data-theme="dark"] .mode-option {
background-color: var(--hover-color-alt);
}
[data-theme="dark"] .mode-option:hover {
background-color: var(--background-color-alt);
}
[data-theme="dark"] .deep-search-progress {
background-color: var(--hover-color-alt);
}
[data-theme="dark"] .dossier-container {
background-color: var(--hover-color-alt);
}
[data-theme="dark"] .dossier-content .antrag-text-content blockquote {
background-color: var(--hover-color-alt);
border-left-color: var(--secondary);
}
[data-theme="dark"] .dossier-content .antrag-text-content code {
background-color: var(--background-color);
color: var(--secondary);
}
[data-theme="dark"] .dossier-content .antrag-text-content h1 {
border-bottom-color: var(--secondary);
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.search-mode-selector {
margin-bottom: 16px;
padding: 0 16px;
}
.mode-options {
gap: 12px;
}
.mode-option {
padding: 12px 16px;
min-width: 140px;
}
.mode-option span {
font-size: 14px;
}
.mode-option small {
font-size: 11px;
}
.deep-search-progress {
margin: 16px;
padding: 12px;
}
.deep-search-progress p {
font-size: 13px;
}
.dossier-container {
margin: 16px;
padding: 20px;
}
.dossier-content {
font-size: 15px;
line-height: 1.6;
}
.dossier-content .antrag-text-content h1 {
font-size: 24px;
}
.dossier-content .antrag-text-content h2 {
font-size: 20px;
}
.dossier-content .antrag-text-content h3 {
font-size: 16px;
}
.dossier-content .antrag-text-content h4 {
font-size: 15px;
}
.dossier-content .antrag-text-content p {
font-size: 15px;
line-height: 1.6;
}
.categorized-sources-section {
margin: 16px auto;
}
.categorized-sources-section > h2 {
font-size: 20px;
margin-bottom: 16px;
padding: 0 16px;
}
}
.search-results-container {
width: 100%;
max-width: 652px;
margin: 20px auto;
padding: 0 20px;
}
.results-count {
color: var(--font-color);
opacity: 0.7;
font-size: 14px;
margin-bottom: 20px;
padding-left: 8px;
}
.search-results-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.search-result-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px;
border-radius: 8px;
transition: background-color 0.2s;
}
.search-result-item:hover {
background-color: var(--background-color-alt);
}
.result-url {
font-size: 12px;
color: var(--font-color);
opacity: 0.8;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.result-title {
font-size: 18px;
color: var(--link-color);
text-decoration: none;
line-height: 1.3;
transition: color 0.2s;
}
.result-title:hover {
color: var(--klee);
text-decoration: underline;
}
.result-content {
font-size: 14px;
color: var(--font-color);
line-height: 1.58;
margin: 0;
}
.search-results-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 0;
gap: 16px;
color: var(--font-color);
}
.loading-spinner {
width: 24px;
height: 24px;
border: 3px solid var(--grashalm);
border-top: 3px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
[data-theme="dark"] .search-result-item:hover {
background-color: var(--background-color-sand);
}
[data-theme="dark"] .result-url {
color: var(--font-color);
opacity: 0.7;
}
[data-theme="dark"] .result-title {
color: var(--secondary);
}
[data-theme="dark"] .result-title:hover {
color: var(--grashalm);
}
[data-theme="dark"] .result-content {
color: var(--font-color);
}
@media (max-width: 768px) {
.search-results-container {
padding: 0 16px;
}
.result-title {
font-size: 16px;
}
.result-content {
font-size: 13px;
}
}
.search-bar-container {
width: 100%;
max-width: 584px;
margin: 0 auto;
}
.search-form {
display: flex;
flex-direction: column;
width: 100%;
}
.search-input-wrapper {
position: relative;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
background-color: var(--background-color);
border: 2px solid var(--background-color-alt);
border-radius: 24px;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
overflow: hidden;
}
.search-input-wrapper:focus-within {
border-color: var(--klee);
box-shadow: var(--shadow-sm);
}
/* SearchBarStyles input styles - More specific to avoid conflicts with global form styles */
.search-bar-container .search-form .search-input-wrapper .search-input {
flex: 1;
height: 48px;
padding: 0 16px;
font-size: 16px;
border: none;
outline: none;
background-color: transparent;
color: var(--font-color);
width: 100%;
min-height: 48px;
box-shadow: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.search-bar-container .search-form .search-input-wrapper .search-input:focus {
border: none;
background-color: transparent;
box-shadow: none;
outline: none;
}
.search-bar-container .search-form .search-input-wrapper .search-input::placeholder {
color: var(--font-color);
opacity: 0.6;
}
.search-bar-container .search-form .search-input-wrapper .search-icon-button {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: none;
background-color: transparent;
cursor: pointer;
padding: 0;
color: var(--font-color);
transition: color 0.2s ease;
}
.search-bar-container .search-form .search-input-wrapper .search-icon-button:hover {
color: var(--klee);
}
.search-bar-container .search-form .search-input-wrapper .search-icon-button:disabled {
color: var(--font-color-disabled);
cursor: not-allowed;
}
.search-bar-container .search-form .search-input-wrapper .search-icon {
width: 18px;
height: 18px;
transition: transform 0.2s ease-in-out;
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
}
.search-bar-container .search-form .search-input-wrapper .search-icon-button:hover .search-icon {
transform: none !important;
}
.search-bar-container .search-form .search-input-wrapper .search-icon-button:active .search-icon {
transform: none !important;
}
.button-spinner {
width: 18px;
height: 18px;
border: 2px solid var(--background-color-alt);
border-top: 2px solid var(--klee);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.ai-disclaimer {
margin-top: var(--spacing-medium);
text-align: center;
font-size: 13px;
color: var(--font-color);
opacity: 0.7;
transition: opacity 0.3s ease;
padding: 0 var(--spacing-small);
line-height: 1.4;
}
.example-questions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-small);
margin-top: var(--spacing-medium);
justify-content: center;
}
.example-question {
display: flex;
align-items: center;
gap: 8px;
background-color: var(--background-color-alt);
border: none;
border-radius: 18px;
padding: 8px 16px;
font-size: 14px;
color: var(--font-color);
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.example-question:hover {
background-color: var(--hover-color-alt);
transform: translateY(-2px);
}
.example-question:active {
transform: translateY(0);
}
/* Animation für das Erscheinen der Suchleiste */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.search-bar-container {
animation: fadeIn 0.3s ease-out forwards;
}
.ai-disclaimer {
animation: fadeIn 0.3s ease-out 0.1s forwards;
opacity: 0;
animation-fill-mode: forwards;
}
.example-questions {
animation: fadeIn 0.3s ease-out 0.2s forwards;
opacity: 0;
animation-fill-mode: forwards;
}
/* Responsive Design */
@media (max-width: 768px) {
.search-bar-container .search-form .search-input-wrapper {
border-radius: 18px;
}
.search-bar-container .search-form .search-input-wrapper .search-input {
height: 42px;
min-height: 42px;
font-size: 15px;
}
.search-bar-container .search-form .search-input-wrapper .search-icon-button {
width: 42px;
height: 42px;
}
.example-questions {
flex-direction: column;
align-items: center;
}
.example-question {
width: 100%;
max-width: 280px;
justify-content: center;
}
}
/* Ask Page Styles */
.ask-page {
max-width: 800px;
margin: 0 auto;
padding: var(--spacing-large);
}
.ask-form-content {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
}
.ask-input-section {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.ask-label {
font-size: var(--form-element-font-size);
font-weight: 600;
color: var(--font-color-h);
margin-bottom: var(--spacing-xsmall);
}
.ask-textarea {
width: 100%;
min-height: 120px;
padding: var(--form-element-padding-y) var(--form-element-padding-x);
font-size: var(--form-element-font-size);
line-height: var(--form-element-line-height);
background-color: var(--input-background);
border: var(--input-border);
border-radius: var(--card-border-radius-small);
color: var(--input-text-color);
resize: vertical;
transition: var(--input-transition);
}
.ask-textarea:focus {
outline: none;
border: var(--input-border-focus);
box-shadow: var(--input-shadow-focus);
}
.ask-textarea:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.ask-textarea::placeholder {
color: var(--input-placeholder-color);
}
.ask-buttons {
display: flex;
gap: var(--spacing-medium);
flex-wrap: wrap;
}
.ask-submit-button,
.ask-reset-button {
padding: var(--spacing-small) var(--spacing-large);
font-size: var(--form-element-font-size);
font-weight: 600;
border: none;
border-radius: var(--card-border-radius-small);
cursor: pointer;
transition: var(--input-transition);
min-height: var(--form-element-min-height);
}
.ask-submit-button {
background-color: var(--interactive-accent-color);
color: var(--button-text-color);
}
.ask-submit-button:hover:not(:disabled) {
background-color: var(--button-color-hover);
transform: scale(1.01);
}
.ask-submit-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.ask-reset-button {
background-color: var(--button-background-color);
color: var(--button-color);
}
.ask-reset-button:hover:not(:disabled) {
background-color: var(--button-hover-color);
transform: scale(1.01);
}
.ask-answer-section {
background-color: var(--card-background);
padding: var(--spacing-large);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--card-shadow-subtle);
border: var(--card-border);
}
.ask-answer-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--font-color-h);
margin: 0 0 var(--spacing-medium) 0;
}
.ask-answer-content {
color: var(--font-color);
line-height: 1.6;
white-space: pre-wrap;
}
.ask-sources-section {
padding: var(--spacing-large);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--card-shadow-subtle);
border: var(--card-border);
}
.ask-sources-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--font-color-h);
margin: 0 0 var(--spacing-medium) 0;
}
.ask-sources-list {
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
}
.ask-source-item {
background-color: var(--card-background);
padding: var(--spacing-medium);
border-radius: var(--card-border-radius-small);
border: var(--card-border);
transition: var(--input-transition);
}
.ask-source-item:hover {
box-shadow: var(--card-shadow-elevated);
transform: var(--card-hover-transform);
}
.ask-source-title {
font-weight: 600;
color: var(--font-color-h);
margin-bottom: var(--spacing-small);
font-size: 0.95rem;
}
.ask-source-title.clickable-link {
color: var(--interactive-accent-color);
cursor: pointer;
text-decoration: underline;
transition: var(--input-transition);
}
.ask-source-title.clickable-link:hover {
color: var(--interactive-accent-color);
text-decoration-thickness: 2px;
}
.ask-source-excerpt {
color: var(--font-color);
line-height: 1.5;
margin-bottom: var(--spacing-small);
font-size: 0.9rem;
}
.ask-source-score {
font-size: 0.85rem;
color: var(--font-color);
background-color: var(--background-color-alt);
padding: 2px 8px;
border-radius: 12px;
font-weight: 500;
}
.ask-source-link-hint {
margin-top: var(--spacing-xsmall);
}
.ask-source-link-hint small {
color: var(--font-color-disabled);
font-size: 0.8rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.ask-page {
padding: var(--spacing-medium);
}
.ask-form-content {
gap: var(--spacing-medium);
}
.ask-buttons {
flex-direction: column;
gap: var(--spacing-small);
}
.ask-submit-button,
.ask-reset-button {
width: 100%;
}
.ask-answer-section,
.ask-sources-section {
padding: var(--spacing-medium);
}
}
@media (max-width: 480px) {
.ask-page {
padding: var(--spacing-small);
}
.ask-textarea {
min-height: 100px;
}
}
/* Document View Page Styles */
.document-view-page {
max-width: 1000px;
margin: 0 auto;
padding: var(--spacing-large);
}
.document-view-loading,
.document-view-error {
text-align: center;
padding: var(--spacing-xxlarge);
background-color: var(--card-background);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--card-shadow-subtle);
border: var(--card-border);
}
.document-view-header {
margin-bottom: var(--spacing-large);
padding-bottom: var(--spacing-large);
border-bottom: 1px solid var(--border-color);
}
.document-view-back-button {
background: none;
border: none;
color: var(--primary);
font-size: 1rem;
cursor: pointer;
padding: var(--spacing-small);
margin-bottom: var(--spacing-medium);
border-radius: var(--card-border-radius-small);
transition: var(--input-transition);
}
.document-view-back-button:hover {
background-color: var(--button-hover-background);
transform: scale(1.01);
}
.document-view-title {
font-size: 1.8rem;
font-weight: 600;
color: var(--font-color-h);
margin: 0 0 var(--spacing-medium) 0;
word-wrap: break-word;
}
.document-view-meta {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-medium);
font-size: 0.9rem;
color: var(--font-color-disabled);
}
.document-view-meta span {
background-color: var(--card-background-alt);
padding: var(--spacing-xsmall) var(--spacing-small);
border-radius: var(--card-border-radius-small);
border: var(--card-border);
}
.document-view-content {
background-color: var(--card-background);
padding: var(--spacing-large);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--card-shadow-subtle);
border: var(--card-border);
}
.document-view-content h3 {
font-size: 1.2rem;
font-weight: 600;
color: var(--font-color-h);
margin: 0 0 var(--spacing-medium) 0;
}
.document-view-text {
background-color: var(--input-background);
padding: var(--spacing-large);
border-radius: var(--card-border-radius-small);
border: var(--input-border);
font-family: var(--font-family-mono, 'Monaco', 'Menlo', 'Ubuntu Mono', monospace);
font-size: 0.9rem;
line-height: 1.6;
color: var(--font-color);
white-space: pre-wrap;
overflow-wrap: break-word;
max-height: 600px;
overflow-y: auto;
}
.document-view-no-content {
text-align: center;
padding: var(--spacing-xlarge);
color: var(--font-color-disabled);
font-style: italic;
}
.document-view-no-content p {
margin: 0 0 var(--spacing-small) 0;
}
/* Responsive Design */
@media (max-width: 768px) {
.document-view-page {
padding: var(--spacing-medium);
}
.document-view-title {
font-size: 1.5rem;
}
.document-view-meta {
flex-direction: column;
gap: var(--spacing-small);
}
.document-view-content {
padding: var(--spacing-medium);
}
.document-view-text {
padding: var(--spacing-medium);
font-size: 0.85rem;
max-height: 400px;
}
}
@media (max-width: 480px) {
.document-view-page {
padding: var(--spacing-small);
}
.document-view-title {
font-size: 1.3rem;
}
.document-view-text {
font-size: 0.8rem;
max-height: 300px;
}
}
/* ===================================================================
Wolke (Nextcloud) Integration Styles
=================================================================== */
/* Main container */
.wolke-share-manager-container {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
width: 100%;
}
/* Add form section */
.wolke-add-form-section {
padding: var(--spacing-large);
}
.wolke-add-form-section h4 {
color: var(--font-color-h);
margin: 0 0 var(--spacing-small) 0;
font-size: 1.125rem;
font-weight: 600;
}
.wolke-add-form-section p {
margin: 0 0 var(--spacing-medium) 0;
font-size: 0.875rem;
}
/* Form layout */
.wolke-add-form {
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
}
.wolke-form-group {
display: flex;
flex-direction: column;
gap: var(--spacing-xsmall);
}
.wolke-form-group label {
font-weight: 500;
color: var(--font-color);
font-size: 0.875rem;
}
.wolke-form-group input {
padding: var(--spacing-small) var(--spacing-medium);
border: 1px solid var(--grey-300);
border-radius: 8px;
font-size: 0.875rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
background-color: var(--background-color-pure);
}
.wolke-form-group input:focus {
outline: none;
border-color: var(--secondary-600);
box-shadow: 0 0 0 3px var(--secondary-50);
}
.wolke-form-group input:disabled {
background-color: var(--grey-50);
color: var(--grey-500);
cursor: not-allowed;
}
.wolke-form-hint {
color: var(--grey-600);
font-size: 0.75rem;
line-height: 1.4;
}
/* Form actions */
.wolke-form-actions {
display: flex;
justify-content: flex-start;
margin-top: var(--spacing-small);
}
.wolke-form-actions button {
padding: var(--spacing-small) var(--spacing-large);
border-radius: 8px;
font-weight: 500;
transition: all 0.2s ease;
}
/* Share links list */
.wolke-share-links-list {
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
}
.wolke-share-link-item {
background: var(--background-color-pure);
border: var(--border-subtle);
border-radius: 12px;
padding: var(--spacing-large);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--spacing-medium);
transition: all 0.2s ease;
}
.wolke-share-link-item:hover {
box-shadow: var(--shadow-sm);
border-color: var(--grey-300);
}
/* Share link info */
.wolke-share-link-info {
flex: 1;
min-width: 0; /* Allow flex item to shrink */
}
.wolke-share-link-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-medium);
margin-bottom: var(--spacing-small);
}
.wolke-share-link-title {
color: var(--font-color-h);
margin: 0;
font-size: 1rem;
font-weight: 600;
word-break: break-word;
}
.wolke-share-link-status {
flex-shrink: 0;
}
.status-badge {
display: inline-flex;
align-items: center;
padding: var(--spacing-xxsmall) var(--spacing-small);
border-radius: 20px;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.status-badge.active {
background-color: var(--primary-50);
color: var(--primary-700);
border: 1px solid var(--primary-200);
}
.status-badge.inactive {
background-color: var(--grey-100);
color: var(--grey-700);
border: 1px solid var(--grey-200);
}
.wolke-share-link-details {
display: flex;
flex-direction: column;
gap: var(--spacing-xxsmall);
}
.wolke-share-link-url {
color: var(--secondary-600);
font-size: 0.875rem;
font-weight: 500;
word-break: break-all;
}
.wolke-share-link-date {
color: var(--grey-600);
font-size: 0.75rem;
}
/* Action buttons */
.wolke-share-link-actions {
display: flex;
gap: var(--spacing-xsmall);
flex-shrink: 0;
align-items: flex-start;
}
.btn-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--grey-300);
border-radius: 8px;
background-color: var(--background-color-pure);
color: var(--grey-600);
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
}
.btn-action:hover:not(:disabled) {
background-color: var(--grey-50);
border-color: var(--grey-400);
color: var(--grey-800);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.btn-action:active:not(:disabled) {
transform: translateY(0);
box-shadow: none;
}
.btn-action:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.btn-action.btn-danger {
border-color: var(--error-red);
color: var(--error-red);
}
.btn-action.btn-danger:hover:not(:disabled) {
background-color: #fef2f2;
border-color: var(--error-red);
color: var(--error-red);
}
/* Icon animations */
.btn-action .spinning {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Loading state */
.wolke-loading-state {
text-align: center;
padding: var(--spacing-xlarge);
color: var(--grey-600);
}
/* Responsive design */
@media (max-width: 768px) {
.wolke-add-form-section {
padding: var(--spacing-medium);
}
.wolke-share-link-item {
padding: var(--spacing-medium);
flex-direction: column;
align-items: stretch;
}
.wolke-share-link-header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-small);
}
.wolke-share-link-actions {
justify-content: flex-end;
margin-top: var(--spacing-small);
}
}
@media (max-width: 480px) {
.wolke-share-manager-container {
gap: var(--spacing-medium);
}
.wolke-add-form-section {
padding: var(--spacing-small);
}
.wolke-share-link-item {
padding: var(--spacing-small);
}
.btn-action {
width: 32px;
height: 32px;
}
.wolke-form-actions {
margin-top: var(--spacing-medium);
}
.wolke-form-actions button {
width: 100%;
padding: var(--spacing-medium) var(--spacing-large);
}
}
/* Focus styles for accessibility */
.btn-action:focus-visible {
outline: 2px solid var(--secondary-600);
outline-offset: 2px;
}
.wolke-form-group input:focus-visible {
outline: none;
border-color: var(--secondary-600);
box-shadow: 0 0 0 3px var(--secondary-50);
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.wolke-share-link-item {
border-width: 2px;
}
.btn-action {
border-width: 2px;
}
.status-badge {
border-width: 2px;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.wolke-share-link-item,
.btn-action,
.wolke-form-group input,
.wolke-add-form-section {
transition: none;
}
.btn-action:hover:not(:disabled) {
transform: none;
}
.spinning {
animation: none;
}
}
/* ===================================================================
Wolke Setup Tutorial Section Styles
=================================================================== */
/* Tutorial section in setup modal */
.wolke-setup-tutorial-section {
margin-bottom: var(--spacing-large);
padding: var(--spacing-medium);
background-color: var(--background-color-alt);
border-radius: 8px;
border-left: 3px solid var(--secondary-600);
text-align: center;
}
.wolke-setup-tutorial-button {
display: inline-flex;
align-items: center;
gap: var(--spacing-small);
padding: var(--spacing-small) var(--spacing-large);
background-color: var(--secondary-600);
color: var(--white);
border: none;
border-radius: 8px;
font-weight: 500;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: var(--spacing-small);
}
.wolke-setup-tutorial-button:hover {
background-color: var(--secondary-700);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.wolke-setup-tutorial-description {
margin: 0;
color: var(--font-color);
font-size: 0.8rem;
line-height: 1.4;
}
/* ===================================================================
Wolke Setup Modal Styles
=================================================================== */
/* Modal overlay */
.wolke-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1001;
backdrop-filter: blur(5px);
padding: var(--spacing-medium);
box-sizing: border-box;
}
/* Modal container */
.wolke-modal {
background-color: var(--background-color);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
max-width: 500px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
animation: wolkeModalFadeIn 0.3s ease-out;
}
@keyframes wolkeModalFadeIn {
from {
opacity: 0;
transform: scale(0.95) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Modal header */
.wolke-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-large);
border-bottom: var(--border-subtle);
}
.wolke-modal-title {
display: flex;
align-items: center;
gap: var(--spacing-small);
color: var(--font-color-h);
font-size: 1.125rem;
font-weight: 600;
margin: 0;
}
.wolke-modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: none;
color: var(--grey-600);
cursor: pointer;
border-radius: 6px;
transition: all 0.2s ease;
}
.wolke-modal-close:hover {
background-color: var(--grey-100);
color: var(--grey-800);
}
/* Modal content */
.wolke-modal-content {
padding: var(--spacing-large);
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
}
.wolke-modal-description {
margin: 0 0 var(--spacing-medium) 0;
color: var(--font-color);
font-size: 0.875rem;
line-height: 1.5;
}
/* Form styles within modal */
.wolke-modal .wolke-form-group {
display: flex;
flex-direction: column;
gap: var(--spacing-xsmall);
}
.wolke-modal .wolke-form-group label {
font-weight: 500;
color: var(--font-color-h);
font-size: 0.875rem;
}
.wolke-modal .wolke-form-group input {
padding: var(--spacing-small) var(--spacing-medium);
border: 1px solid var(--grey-300);
border-radius: 8px;
font-size: 0.875rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
background-color: var(--background-color-pure);
}
.wolke-modal .wolke-form-group input:focus {
outline: none;
border-color: var(--secondary-600);
box-shadow: 0 0 0 3px var(--secondary-50);
}
.wolke-modal .wolke-form-group input:disabled {
background-color: var(--grey-50);
color: var(--grey-500);
cursor: not-allowed;
}
.wolke-modal .wolke-form-hint {
color: var(--grey-600);
font-size: 0.75rem;
line-height: 1.4;
}
/* Error message */
.wolke-modal-error {
display: flex;
align-items: center;
gap: var(--spacing-small);
color: var(--error-red);
font-size: 0.875rem;
padding: var(--spacing-small) var(--spacing-medium);
background-color: #fef2f2;
border-radius: 6px;
border: 1px solid var(--error-red);
}
/* Modal actions */
.wolke-modal-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-medium);
padding: var(--spacing-large);
border-top: var(--border-subtle);
}
.wolke-modal-actions button {
padding: var(--spacing-small) var(--spacing-large);
border-radius: 8px;
font-weight: 500;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: var(--spacing-small);
min-width: 100px;
justify-content: center;
}
.wolke-modal-actions .button-secondary {
background: none;
border: 1px solid var(--grey-300);
color: var(--font-color);
}
.wolke-modal-actions .button-secondary:hover:not(:disabled) {
background-color: var(--grey-50);
border-color: var(--grey-400);
}
.wolke-modal-actions .button-primary {
background-color: var(--secondary-600);
color: var(--white);
border: none;
}
.wolke-modal-actions .button-primary:hover:not(:disabled) {
background-color: var(--secondary-700);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.wolke-modal-actions button:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
/* Help section */
.wolke-setup-help {
margin-top: var(--spacing-medium);
padding: var(--spacing-medium);
background-color: var(--background-color-alt);
border-radius: 8px;
border-left: 3px solid var(--secondary-600);
}
.wolke-setup-help h4 {
margin: 0 0 var(--spacing-small) 0;
font-size: 0.875rem;
font-weight: 600;
color: var(--font-color-h);
}
.wolke-setup-help ol {
margin: 0;
padding-left: var(--spacing-medium);
font-size: 0.8rem;
color: var(--font-color);
line-height: 1.5;
}
.wolke-setup-help ol li {
margin-bottom: var(--spacing-xxsmall);
}
/* Spinner for loading states */
.spinner-small {
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Mobile responsive styles */
@media (max-width: 768px) {
.wolke-modal-overlay {
padding: var(--spacing-small);
}
.wolke-modal {
max-width: 100%;
}
.wolke-modal-header,
.wolke-modal-content,
.wolke-modal-actions {
padding: var(--spacing-medium);
}
.wolke-modal-actions {
flex-direction: column;
gap: var(--spacing-small);
}
.wolke-modal-actions button {
width: 100%;
}
.wolke-setup-help ol {
font-size: 0.75rem;
}
}
/* ===================================================================
Wolke Tutorial Modal Styles
=================================================================== */
/* Tutorial overlay */
.wolke-tutorial-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1002;
backdrop-filter: blur(5px);
padding: var(--spacing-medium);
box-sizing: border-box;
}
/* Tutorial container */
.wolke-tutorial {
background-color: var(--background-color);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 800px;
width: 100%;
min-height: 600px;
max-height: 85vh;
overflow-y: auto;
animation: wolkeTutorialFadeIn 0.3s ease-out;
display: flex;
flex-direction: column;
}
@keyframes wolkeTutorialFadeIn {
from {
opacity: 0;
transform: scale(0.95) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Tutorial header */
.wolke-tutorial-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-small);
border-bottom: var(--border-subtle);
flex-shrink: 0;
}
.wolke-tutorial-title {
display: flex;
align-items: center;
gap: var(--spacing-small);
color: var(--font-color-h);
font-size: 1.125rem;
font-weight: 600;
margin: 0;
}
.wolke-tutorial-title .wolke-tutorial-dots {
margin-left: var(--spacing-medium);
}
.wolke-tutorial-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: none;
color: var(--grey-600);
cursor: pointer;
border-radius: 6px;
transition: all 0.2s ease;
}
.wolke-tutorial-close:hover {
background-color: var(--grey-100);
color: var(--grey-800);
}
/* Removed old progress indicator styles */
/* Tutorial content with side navigation */
.wolke-tutorial-content {
display: flex;
align-items: stretch;
flex: 1;
overflow-y: auto;
position: relative;
min-height: 0;
}
/* Side navigation buttons */
.wolke-tutorial-nav-side {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background-color: var(--background-color-pure);
border: 1px solid var(--grey-300);
border-radius: 50%;
color: var(--font-color);
cursor: pointer;
transition: all 0.2s ease;
z-index: 10;
box-shadow: var(--shadow-sm);
}
.wolke-tutorial-nav-side:hover:not(:disabled) {
background-color: var(--grey-50);
border-color: var(--grey-400);
transform: translateY(-50%) scale(1.05);
}
.wolke-tutorial-nav-side:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: translateY(-50%);
}
.wolke-tutorial-nav-left {
left: var(--spacing-small);
}
.wolke-tutorial-nav-right {
right: var(--spacing-small);
}
.wolke-tutorial-step {
flex: 1;
text-align: center;
padding: var(--spacing-medium) calc(60px + var(--spacing-large)) var(--spacing-medium) var(--spacing-large);
overflow-y: auto;
}
.wolke-tutorial-step-title {
color: var(--font-color-h);
font-size: 1.125rem;
font-weight: 600;
margin: 0 0 var(--spacing-medium) 0;
padding: var(--spacing-medium) 0;
}
/* Screenshot area - fixed height to prevent modal jumping */
.wolke-tutorial-screenshot {
margin-bottom: var(--spacing-medium);
border-radius: 8px;
overflow: hidden;
box-shadow: var(--shadow-sm);
background-color: var(--grey-50);
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.wolke-tutorial-screenshot img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.wolke-tutorial-screenshot-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-xxlarge);
color: var(--grey-500);
background-color: var(--grey-100);
}
.wolke-tutorial-screenshot-placeholder p {
margin: var(--spacing-small) 0 0 0;
font-size: 0.875rem;
}
/* Description - using default body styling */
.wolke-tutorial-description {
margin: 0 0 var(--spacing-small) 0;
text-align: left;
}
/* Tip */
.wolke-tutorial-tip {
background-color: var(--background-color-alt);
padding: var(--spacing-small);
border-radius: 6px;
border-left: 3px solid var(--secondary-600);
margin-bottom: var(--spacing-small);
text-align: left;
font-size: 0.8rem;
line-height: 1.4;
}
.wolke-tutorial-tip strong {
color: var(--font-color-h);
}
/* Action button */
.wolke-tutorial-action {
margin-bottom: var(--spacing-small);
}
.wolke-tutorial-action-button {
display: inline-flex;
align-items: center;
gap: var(--spacing-small);
padding: var(--spacing-small) var(--spacing-large);
background-color: var(--secondary-600);
color: var(--white);
border: none;
border-radius: 8px;
font-weight: 500;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
}
.wolke-tutorial-action-button:hover {
background-color: var(--secondary-700);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
/* Dots navigation - now in header */
.wolke-tutorial-dots {
display: flex;
gap: var(--spacing-xsmall);
}
.wolke-tutorial-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background-color: var(--grey-300);
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
}
.wolke-tutorial-dot.active {
background-color: var(--secondary-600);
transform: scale(1.2);
}
.wolke-tutorial-dot:hover {
background-color: var(--secondary-500);
}
/* Mobile responsive styles */
@media (max-width: 768px) {
.wolke-tutorial-overlay {
padding: var(--spacing-small);
}
.wolke-tutorial {
max-width: 100%;
min-height: 500px;
max-height: 95vh;
}
.wolke-tutorial-header {
padding: var(--spacing-small);
}
.wolke-tutorial-step {
padding: var(--spacing-small) calc(50px + var(--spacing-medium)) var(--spacing-small) var(--spacing-medium);
}
.wolke-tutorial-nav-side {
width: 36px;
height: 36px;
}
.wolke-tutorial-nav-left {
left: var(--spacing-xsmall);
}
.wolke-tutorial-nav-right {
right: var(--spacing-xsmall);
}
.wolke-tutorial-step-title {
font-size: 1rem;
}
.wolke-tutorial-description {
font-size: 0.85rem;
}
.wolke-tutorial-title .wolke-tutorial-dots {
margin-left: var(--spacing-small);
}
.wolke-tutorial-screenshot {
height: 300px;
}
}
@media (max-width: 480px) {
.wolke-tutorial {
min-height: 450px;
}
.wolke-tutorial-header {
padding: var(--spacing-small);
}
.wolke-tutorial-step {
padding: var(--spacing-xsmall) calc(40px + var(--spacing-small)) var(--spacing-xsmall) var(--spacing-small);
}
.wolke-tutorial-nav-side {
width: 32px;
height: 32px;
}
.wolke-tutorial-screenshot-placeholder {
padding: var(--spacing-medium);
}
.wolke-tutorial-tip {
padding: var(--spacing-xsmall);
font-size: 0.75rem;
}
.wolke-tutorial-title {
font-size: 1rem;
}
.wolke-tutorial-title .wolke-tutorial-dots {
margin-left: var(--spacing-xsmall);
}
.wolke-tutorial-screenshot {
height: 250px;
}
}
/* Reduced motion for tutorial */
@media (prefers-reduced-motion: reduce) {
.wolke-tutorial,
.wolke-tutorial-nav-side,
.wolke-tutorial-dot,
.wolke-tutorial-action-button {
transition: none;
}
.wolke-tutorial-action-button:hover,
.wolke-tutorial-nav-side:hover:not(:disabled) {
transform: translateY(-50%);
}
.wolke-tutorial-dot.active {
transform: none;
}
}
.voice-recorder {
display: flex;
flex-direction: column;
align-items: center;
margin: 1rem 0;
}
.voice-recorder-controls {
margin-bottom: 1rem;
}
.voice-recorder-button {
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.voice-recorder-button.start {
background-color: #46a758;
color: white;
}
.voice-recorder-button.start:hover {
background-color: #3d9a4d;
}
.voice-recorder-button.stop {
background-color: #e54d2e;
color: white;
}
.voice-recorder-button.stop:hover {
background-color: #ca3e23;
}
.voice-recorder-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.voice-recorder-button svg {
width: 24px;
height: 24px;
}
.voice-recorder-animation {
width: 100px;
height: 100px;
margin-bottom: 1rem;
}
.voice-recorder-status {
font-size: 0.9rem;
color: #666;
margin: 0.5rem 0;
}
.voice-recorder-processing {
display: flex;
flex-direction: column;
align-items: center;
}
.voice-recorder-spinner {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--klee, #46a758);
border-radius: 50%;
width: 40px;
height: 40px;
margin-bottom: 0.5rem;
}
.voice-recorder-error {
color: #e54d2e;
margin-bottom: 1rem;
text-align: center;
padding: 0.5rem;
border-radius: 4px;
background-color: rgba(229, 77, 46, 0.1);
max-width: 400px;
}
.voice-recorder-retry-button {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 0.5rem;
padding: 0.5rem 1rem;
background-color: #46a758;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.2s ease;
}
.voice-recorder-retry-button:hover {
background-color: #3d9a4d;
}
.voice-recorder-retry-button svg {
width: 16px;
height: 16px;
}
@media (max-width: 768px) {
.voice-recorder-button {
width: 56px;
height: 56px;
font-size: 20px;
}
.voice-recorder-button.start {
font-size: 20px;
}
.voice-recorder-button.stop {
font-size: 16px;
}
.voice-recorder-animation {
max-width: 150px;
}
}
.campaign-page {
width: 100%;
background-color: var(--background-color);
color: var(--font-color);
min-height: calc(100vh - 100px);
padding-left: 1.5rem;
padding-right: 1.5rem;
box-sizing: border-box;
}
.campaign-header {
margin-bottom: 2.5rem;
text-align: center;
position: relative;
padding-bottom: 1.5rem;
}
.campaign-header::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--klee), var(--grashalm));
border-radius: 3px;
}
.campaign-header h1 {
color: var(--font-color-h);
font-size: 2.2rem;
margin-bottom: 1rem;
font-weight: 600;
letter-spacing: -0.5px;
position: relative;
display: inline-block;
}
.campaign-header h1::before,
.campaign-header h1::after {
content: '';
position: absolute;
width: 30px;
height: 2px;
background-color: var(--klee);
opacity: 0.2;
top: 50%;
}
.campaign-header h1::before {
left: -40px;
}
.campaign-header h1::after {
right: -40px;
}
.campaign-description {
font-size: 1rem;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
color: var(--font-color);
}
.campaign-container {
flex-direction: column;
align-items: stretch;
}
@media (max-width: 768px) {
.campaign-header {
margin-bottom: 2rem;
}
.campaign-header h1 {
font-size: 1.8rem;
}
.campaign-header h1::before,
.campaign-header h1::after {
display: none;
}
.campaign-description {
font-size: 0.9rem;
}
}
.campaign-dashboard {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
margin-top: 2rem;
width: 100%;
}
.bottom-row {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
grid-column: span 12;
}
.dashboard-section {
background-color: var(--background-color);
border-radius: 12px;
padding: 1.75rem;
box-shadow: var(--shadow-md);
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: var(--border-subtle);
}
.dashboard-section:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.dashboard-section h2 {
color: var(--font-color-h);
margin-bottom: 1.25rem;
font-size: 1.5rem;
font-weight: 600;
position: relative;
padding-bottom: 0.5rem;
display: flex;
align-items: center;
}
.dashboard-section h2::before {
content: '';
display: inline-block;
width: 4px;
height: 1.2em;
background-color: var(--klee);
margin-right: 0.75rem;
border-radius: 2px;
}
.texts-section {
grid-column: span 12;
}
.files-section,
.templates-section {
grid-column: span 6;
}
.about-section,
.contact-form-section {
grid-column: span 12;
}
.grueneratoren-container {
display: none;
}
.templates-section h2 {
font-size: 1.3rem !important;
margin-bottom: 1rem !important;
}
.campaign-error {
grid-column: span 12;
padding: 2rem;
text-align: center;
color: #e53935;
background-color: rgba(229, 57, 53, 0.05);
border-radius: 8px;
font-weight: 500;
}
@keyframes gentle-float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
100% {
transform: translateY(0);
}
}
.dashboard-section:hover {
animation: gentle-float 3s ease infinite;
}
@media (max-width: 1200px) {
.files-section,
.templates-section {
grid-column: span 6;
}
}
@media (max-width: 992px) {
.bottom-row {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.files-section,
.templates-section {
grid-column: span 12;
}
}
@media (max-width: 768px) {
.campaign-dashboard {
gap: 1rem;
}
.dashboard-section {
padding: 1.25rem;
}
.dashboard-section h2 {
font-size: 1.3rem;
}
}
.about-contact-wrapper {
display: flex;
gap: 20px;
margin-top: 40px;
grid-column: span 12;
background-color: var(--background-color-alt);
padding: 20px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
.about-contact-wrapper > .dashboard-section {
}
.about-contact-wrapper > .dashboard-section:first-child {
flex: 1;
}
.about-contact-wrapper > .dashboard-section:last-child {
flex: 1;
}
@media (max-width: 768px) {
.about-contact-wrapper {
flex-direction: column;
}
.about-contact-wrapper > .dashboard-section:first-child,
.about-contact-wrapper > .dashboard-section:last-child {
flex: initial;
}
}
.grueneratoren-container {
}
.grueneratoren-title {
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: var(--font-color-h);
font-weight: 600;
}
.grueneratoren-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
}
.gruenerator-button {
background-color: var(--background-color);
border: var(--border-subtle);
border-radius: 10px;
padding: 1.25rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: var(--shadow-sm);
text-align: center;
}
.gruenerator-button:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--klee-light);
}
.gruenerator-icon {
font-size: 2rem;
margin-bottom: 0.75rem;
}
.gruenerator-name {
font-size: 0.9rem;
font-weight: 500;
color: var(--font-color-h);
}
@media (max-width: 768px) {
.grueneratoren-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.grueneratoren-grid {
grid-template-columns: 1fr;
}
}
.templates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.75rem;
}
.no-results {
padding: 1.5rem;
text-align: center;
color: var(--font-color);
opacity: 0.7;
font-style: italic;
background-color: var(--background-color-alt);
border-radius: 8px;
border: 1px dashed rgba(0, 0, 0, 0.08);
}
.no-results::before {
content: '🖼️';
display: block;
font-size: 2rem;
margin-bottom: 0.5rem;
opacity: 0.5;
}
.view-all-templates {
margin-top: 1rem;
text-align: center;
}
.view-all-link {
display: inline-block;
color: var(--klee);
font-size: 0.85rem;
text-decoration: none;
padding: 0.4rem 0.8rem;
border: 1px solid var(--klee);
border-radius: 6px;
transition: all 0.2s ease;
}
.view-all-link:hover {
background-color: var(--klee);
color: white;
}
.template-card {
background-color: var(--background-color);
border-radius: 10px;
overflow: hidden;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.03);
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.template-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}
.template-preview {
width: 100%;
height: 140px;
object-fit: cover;
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
transition: all 0.3s ease;
}
.template-card:hover .template-preview {
transform: scale(1.03);
}
.template-info {
padding: 0.75rem;
flex: 1;
display: flex;
flex-direction: column;
}
.template-info h3 {
margin: 0 0 0.3rem 0;
font-size: 0.95rem;
color: var(--font-color-h);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.template-info p {
margin: 0 0 0.5rem 0;
font-size: 0.8rem;
color: var(--font-color);
line-height: 1.3;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.template-tags {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-bottom: 0.5rem;
}
.template-tag {
background-color: rgba(70, 150, 43, 0.08);
color: var(--klee);
font-size: 0.65rem;
padding: 0.15rem 0.3rem;
border-radius: 4px;
white-space: nowrap;
}
.template-link {
background-color: transparent;
color: var(--klee);
border: 1px solid var(--klee);
border-radius: 6px;
padding: 0.3rem 0.6rem;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: inline-block;
text-align: center;
font-weight: 500;
align-self: flex-start;
}
.template-link:hover {
background-color: var(--klee);
color: white;
}
@media (max-width: 768px) {
.templates-grid {
grid-template-columns: 1fr;
}
}
.file-card {
background-color: var(--background-color);
border-radius: 10px;
padding: 1.25rem;
display: flex;
align-items: flex-start;
gap: 1rem;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.03);
position: relative;
overflow: hidden;
text-decoration: none;
color: inherit;
}
.file-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.file-icon {
font-size: 1.8rem;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
flex-shrink: 0;
}
.file-type-pdf .file-icon {
color: #e53935;
background-color: rgba(229, 57, 53, 0.08);
}
.file-type-excel .file-icon {
color: #43a047;
background-color: rgba(67, 160, 71, 0.08);
}
.file-type-word .file-icon {
color: #1e88e5;
background-color: rgba(30, 136, 229, 0.08);
}
.file-type-default .file-icon {
color: #757575;
background-color: rgba(117, 117, 117, 0.08);
}
.file-info {
flex: 1;
min-width: 0;
}
.file-info h3 {
margin: 0 0 0.4rem 0;
font-size: 1.1rem;
color: var(--font-color-h);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-info p {
margin: 0;
font-size: 0.85rem;
color: var(--font-color);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.texts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
.no-results {
padding: 1.5rem;
text-align: center;
color: var(--font-color);
opacity: 0.7;
font-style: italic;
background-color: var(--background-color-alt);
border-radius: 8px;
border: 1px dashed rgba(0, 0, 0, 0.08);
}
.no-results::before {
content: '📝';
display: block;
font-size: 2rem;
margin-bottom: 0.5rem;
opacity: 0.5;
}
@media (max-width: 768px) {
.texts-grid {
grid-template-columns: 1fr;
}
}
.files-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
.no-results {
padding: 1.5rem;
text-align: center;
color: var(--font-color);
opacity: 0.7;
font-style: italic;
background-color: var(--background-color-alt);
border-radius: 8px;
border: 1px dashed rgba(0, 0, 0, 0.08);
}
.no-results::before {
content: '📂';
display: block;
font-size: 2rem;
margin-bottom: 0.5rem;
opacity: 0.5;
}
@media (max-width: 768px) {
.files-grid {
grid-template-columns: 1fr;
}
}
.text-card {
background-color: var(--background-color);
border-radius: 10px;
padding: 1.25rem;
transition: all 0.2s ease;
box-shadow: var(--shadow-sm);
border: var(--border-subtle);
display: flex;
align-items: flex-start;
gap: 1rem;
position: relative;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
.text-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.text-icon {
font-size: 1.8rem;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
flex-shrink: 0;
color: #1e88e5;
background-color: rgba(30, 136, 229, 0.08);
}
.text-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
position: relative;
}
.text-card h3 {
margin: 0 0 0.5rem 0;
font-size: 1.1rem;
color: var(--font-color-h);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 40px);
}
.text-content {
margin: 0 0 0.75rem 0;
font-size: 0.85rem;
color: var(--font-color);
line-height: 1.4;
background-color: var(--background-color);
padding: 0.5rem 0.75rem;
border-radius: 6px;
border: var(--border-subtle);
font-style: italic;
word-break: break-word;
}
.expand-toggle-button {
background: none;
border: none;
color: var(--link-color);
cursor: pointer;
font-size: 0.8rem;
padding: 0.25rem 0;
margin-top: 0.5rem;
text-align: left;
align-self: flex-start;
transition: color 0.2s ease;
}
.expand-toggle-button:hover {
text-decoration: underline;
color: var(--klee);
}
.text-card .copy-button-compact {
position: absolute;
top: 0;
right: 4px;
background-color: var(--background-color);
padding: 2px 4px;
border-radius: 4px;
opacity: 0;
transition: opacity 0.2s ease-in-out;
z-index: 1;
}
.text-card:hover .copy-button-compact {
opacity: 0.6;
}
.text-card .copy-button-compact:hover {
opacity: 1;
}
/* .about-section {
margin-top: 40px;
padding: 20px;
border-top: var(--border-subtle);
background-color: var(--background-color-alt);
border-radius: 8px;
width: 100%;
box-sizing: border-box;
} */
/* .about-section h2 {
margin-bottom: 20px;
font-size: 1.5rem;
color: var(--font-color-h);
} */
.about-content {
display: flex;
align-items: flex-start;
gap: 20px;
}
.about-image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
border: 3px solid var(--background-color-pure);
box-shadow: var(--shadow-md);
}
.about-text {
flex: 1;
}
.about-text p {
margin: 0;
line-height: 1.6;
color: var(--font-color);
}
@media (max-width: 768px) {
.about-content {
flex-direction: column;
align-items: center;
text-align: center;
}
.about-image {
margin-bottom: 15px;
}
}
@media (max-width: 480px) {
.about-image {
width: 120px;
height: 120px;
}
}
.contact-form-section {
background-color: var(--background-color);
border-radius: var(--spacing-xsmall);
padding: var(--spacing-large);
box-shadow: var(--shadow-md);
}
.contact-form {
margin-top: var(--spacing-medium);
}
.contact-form .form-group {
margin-bottom: 15px;
}
.contact-form label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: var(--font-color);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
width: 100%;
padding: 10px;
border: none;
border-radius: 4px;
box-sizing: border-box;
font-size: 0.9em;
background-color: var(--background-color-alt);
color: var(--font-color);
transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
/* Contact-form input focus styles - DISABLED to prevent conflicts with main form-inputs.css */
/*
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
outline: none;
border: 2px solid var(--grashalm);
padding: 8px;
box-shadow: 0 0 5px rgba(81, 163, 37, 0.5);
}
*/
.contact-form textarea {
min-height: 100px;
resize: vertical;
}
/*
.contact-submit-button {
background-color: var(--button-primary-bg-color);
color: var(--button-primary-text-color);
border: none;
padding: var(--button-padding-vertical) var(--button-padding-horizontal);
border-radius: var(--button-border-radius);
cursor: pointer;
font-size: 1em;
transition: background-color 0.2s ease;
}
.contact-submit-button:hover {
background-color: var(--button-primary-hover-bg-color);
}
*/
:root {
--editor-top-offset: 0px;
}
.you-page-container {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding: 20px;
background-color: var(--background-color);
transition: background-color 0.3s ease;
}
.you-page-container.base-container.editing-mode {
max-width: 100%;
justify-content: center;
align-items: flex-start;
padding: 20px;
gap: 0;
margin-top: 80px;
}
.you-content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 900px;
margin: 0 auto;
transition: margin 0.3s ease;
}
.you-content-wrapper.empty-state {
margin-top: 20vh;
}
.base-container.editing-mode .you-content-wrapper {
margin-top: 0;
}
.you-input-section {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
.you-result-section {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.you-result-section.display-container {
flex: 1;
max-width: 816px;
width: 816px;
margin: 0 auto;
min-height: calc(100vh - 120px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
padding: 0;
position: relative;
}
.editor-container {
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.editor-container .text-editor {
background-color: var(--background-color-alt);
border-radius: 8px;
}
.editor-container .ql-toolbar {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: var(--background-color);
border-color: var(--hover-color-alt);
}
.editor-container .ql-container {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-color: var(--hover-color-alt);
min-height: 200px;
}
.you-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 16px;
text-align: center;
width: 100%;
}
.you-header h1 {
font-size: 28px;
color: var(--font-color-h);
margin: 0;
letter-spacing: -0.5px;
line-height: 1.2;
opacity: 0.85;
}
.you-subtitle {
font-size: 20px;
color: var(--font-color);
margin: 12px 0 0 0;
opacity: 0.8;
font-weight: normal;
}
.you-loading {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px 0;
gap: 12px;
color: var(--font-color);
}
[data-theme="dark"] .you-page-container {
background-color: var(--background-color);
}
[data-theme="dark"] .you-header h1 {
color: var(--secondary);
}
[data-theme="dark"] .editor-container .ql-toolbar {
background-color: var(--background-color-alt);
border-color: var(--hover-color);
}
[data-theme="dark"] .editor-container .ql-container {
background-color: var(--background-color);
border-color: var(--hover-color);
color: var(--font-color);
}
@media (max-width: 768px) {
.you-page-container.base-container.editing-mode {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
z-index: 1000;
background-color: var(--background-color);
}
.base-container.editing-mode .you-content-wrapper {
padding-top: var(--editor-top-offset);
box-sizing: border-box;
}
.you-result-section.display-container {
border-radius: 0;
box-shadow: none;
width: 100%;
max-width: 100%;
height: calc(100vh - var(--editor-top-offset));
overflow-y: auto;
}
}
.you-input-container {
width: 100%;
max-width: 750px;
margin: 0 auto;
position: relative;
}
/* You Generator specific input styles - scoped to avoid conflicts */
.you-page-container .you-input-field {
width: 100%;
min-height: 120px;
max-height: none;
padding: 20px 50px 20px 20px;
padding-bottom: 60px;
background-color: var(--background-color-alt);
border: 1px solid var(--hover-color-alt);
border-radius: 12px;
color: var(--font-color);
font-size: 16px;
line-height: 1.5;
resize: none;
overflow-y: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease, height 0.2s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.you-page-container .you-input-field:hover {
box-shadow: 0 0 0 1px rgba(0, 137, 57, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
}
.you-page-container .you-input-field:focus {
outline: none;
box-shadow: 0 0 0 1px var(--klee), 0 0 0 3px rgba(0, 137, 57, 0.15);
}
.you-page-container .you-input-field::placeholder {
color: var(--font-color);
opacity: 0.6;
}
.inline-examples {
position: absolute;
bottom: 16px;
left: 16px;
display: flex;
gap: 8px;
z-index: 2;
}
.inline-example {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--hover-color-alt);
border-radius: 16px;
color: var(--font-color);
background-color: var(--background-color);
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.8rem;
opacity: 0.8;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.inline-example:hover {
background-color: var(--hover-color-alt);
opacity: 1;
transform: translateY(-1px);
}
.inline-example span:first-child {
font-size: 14px;
}
.you-submit-button {
position: absolute;
bottom: 16px;
right: 16px;
background-color: var(--klee);
color: var(--weiß);
border: none;
border-radius: 8px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease;
z-index: 2;
}
.you-submit-button:hover {
background-color: var(--primary);
}
.you-submit-button:disabled {
background-color: var(--background-color-alt);
cursor: not-allowed;
}
.you-submit-button svg {
color: var(--weiß);
font-size: 16px;
}
.you-submit-button .spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
}
.example-questions {
display: flex;
gap: 8px;
margin-top: 16px;
flex-wrap: wrap;
justify-content: center;
width: 100%;
max-width: 750px;
margin: 24px auto;
}
.example-question {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid var(--hover-color-alt);
border-radius: 20px;
color: var(--font-color);
background-color: var(--background-color-alt);
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.9rem;
}
.example-question:hover {
background-color: var(--hover-color-alt);
}
.example-question span:first-child {
font-size: 16px;
}
[data-theme="dark"] .you-input-field,
[data-theme="dark"] .you-response-container {
background-color: var(--hover-color-alt);
}
[data-theme="dark"] .inline-example {
background-color: var(--background-color);
border-color: var(--hover-color);
}
.voice-recorder-wrapper {
width: 100%;
min-height: 120px;
background-color: var(--background-color-alt);
border: 1px solid var(--hover-color-alt);
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.voice-recorder-cancel {
margin-top: 16px;
padding: 8px 16px;
background-color: transparent;
border: 1px solid var(--hover-color-alt);
border-radius: 8px;
color: var(--font-color);
cursor: pointer;
transition: all 0.2s ease;
}
.voice-recorder-cancel:hover {
background-color: var(--hover-color-alt);
}
.voice-recording-indicator {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
z-index: 2;
opacity: 0.8;
}
.you-submit-button.recording {
background-color: var(--rot);
}
.you-submit-button.recording:hover {
background-color: var(--rot);
filter: brightness(0.9);
}
.recording-fullscreen-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--background-color-alt);
border-radius: 12px;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.recording-fullscreen-overlay.active {
opacity: 1;
pointer-events: auto;
}
.recording-animation-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.recording-status, .recording-timestamps {
display: none;
}
.recording-stop-button {
position: absolute;
bottom: 16px;
right: 16px;
background-color: var(--rot);
color: var(--weiß);
border: none;
border-radius: 8px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
z-index: 4;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.recording-stop-button:hover {
background-color: var(--rot);
filter: brightness(0.9);
transform: scale(1.05);
}
.recording-stop-button svg {
color: var(--weiß);
font-size: 20px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
[data-theme="dark"] .voice-recorder-toggle svg {
color: var(--klee);
}
.you-page-container .display-container {
flex: 1 1 100% !important;
max-width: 100% !important;
width: 100% !important;
}
.you-response-container {
width: 100%;
max-width: 900px;
margin: 0 auto 20px;
padding: 35px 50px;
background-color: var(--background-color-alt);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
}
.you-response-content {
color: var(--font-color);
line-height: 1.8;
font-size: 16px;
text-align: justify;
hyphens: auto;
white-space: pre-wrap;
}
.you-response-category {
font-size: 14px;
color: var(--font-color);
opacity: 0.7;
margin-bottom: 12px;
}
.you-result-container {
width: 100%;
max-width: 900px;
margin: 0 auto 20px;
padding: 35px 50px;
background-color: var(--background-color-alt);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
max-height: none;
overflow-y: visible;
}
.you-result-content {
color: var(--font-color);
line-height: 1.6;
white-space: pre-wrap;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
font-size: 16px;
}
.you-result-title {
font-size: 18px;
font-weight: 600;
color: var(--font-color-h);
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid var(--hover-color-alt);
}
.you-result-paper {
background-color: var(--weiß);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
padding: 30px 40px;
margin: 0 auto;
width: 100%;
}
[data-theme="dark"] .you-response-container,
[data-theme="dark"] .you-result-container {
background-color: var(--hover-color-alt);
}
[data-theme="dark"] .you-result-paper {
background-color: var(--background-color-alt);
}
@media (max-width: 768px) {
.you-page-container {
padding: 16px;
}
.you-content-wrapper {
width: calc(100% - 32px);
margin-top: 40px;
}
.you-content-wrapper.empty-state {
margin-top: 10vh;
}
.you-header {
margin-bottom: 12px;
}
.you-header h1 {
font-size: 24px;
}
.you-input-container,
.you-response-container,
.you-result-container {
max-width: 100%;
}
.you-input-field {
min-height: 200px;
}
.you-response-container,
.you-result-container {
padding: 20px;
}
.you-result-paper {
padding: 20px;
}
.you-input-section {
margin-bottom: 20px;
}
.inline-examples {
flex-direction: column;
gap: 6px;
}
.voice-recorder-toggle svg {
font-size: 28px;
}
.voice-recorder-toggle span {
font-size: 14px;
}
.voice-recording-indicator {
width: 80px;
height: 80px;
}
}
.base-container {
display: flex;
width: 100%;
max-width: 1200px;
margin: 20px auto 20px;
gap: 20px;
position: relative;
align-items: stretch;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}
/* FormSection - 2/3 layout with DisplaySection */
.white-text {
color: var(--weiß) !important;
}
.display-container {
flex: 1 1 33.33%;
display: flex;
flex-direction: column;
padding: 25px;
border-radius: 8px;
background-color: var(--background-color-pure);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
transition: padding 0.3s ease-in-out;
}
.base-container.has-generated-content {
padding: 0 px;
}
/* FormSection responsive - with generated content */
.form-section.has-generated-content {
flex: 0 0 40%;
max-width: 40%;
}
.display-container.has-generated-content {
flex: 0 0 55%;
max-width: 55%;
width: 55%;
transition: padding 0.3s ease-in-out;
}
/* FormSection antragsversteher layout */
.antragsversteher-base .form-section {
flex: 1 1 25%;
max-width: 25%;
}
.antragsversteher-base .display-container {
flex: 1 1 75%;
max-width: 75%;
}
.generated-content-wrapper {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.content-display {
white-space: normal;
font-size: var(--display-font-size);
line-height: var(--display-line-height);
}
/* Consistent paragraph spacing */
.content-display p {
margin: 0 0 var(--display-paragraph-spacing) 0;
}
.content-display p:last-child {
margin-bottom: 0;
}
.content-display h2,
.content-display h3 {
margin: calc(var(--display-paragraph-spacing) * 1.5) 0 calc(var(--display-paragraph-spacing) * 0.5) 0;
}
.content-display h2:first-child,
.content-display h3:first-child {
margin-top: 0;
}
.display-header {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 0;
transition: all 0.3s ease-in-out;
min-height: 40px;
}
/* Hide empty display header when no generated content */
.display-container:not(.has-generated-content) .display-header:empty,
.display-container:not(.has-generated-content) .display-header:has(> :empty) {
display: none;
}
.display-container h3 {
margin-bottom: 8px !important;
}
@media (max-width: 768px) {
.base-container {
padding: 0;
flex-direction: column;
gap: 20px;
max-width: 100%;
margin: 0;
}
/* FormSection responsive */
.form-section,
.display-container {
flex: 0 1 100%;
max-width: 100%;
width: 100%;
margin: 0;
padding-top: var(--spacing-small);
}
.display-header h3 /* , .form-container h3 */ {
padding-left: 0;
padding-right: 10px;
margin: 0;
margin-bottom: 0px;
}
.base-container.has-generated-content {
padding: 10px;
}
/* FormSection responsive layouts */
.form-section.has-generated-content,
.display-container.has-generated-content {
flex: 0 1 100%;
max-width: 100%;
width: 100%;
}
.base-container.has-generated-content {
flex-direction: column;
}
/* FormSection responsive layouts */
.form-section.has-generated-content,
.form-section,
.display-container.has-generated-content,
.display-container {
flex: 0 1 100%;
max-width: 100%;
width: 100%;
}
}
.display-container.has-generated-content.form-hidden {
flex: 0 0 100%;
max-width: 900px;
width: 100%;
margin: 0 auto;
}
.you-error {
margin-top: 20px;
padding: 12px 16px;
background-color: rgba(255, 241, 122, 0.2);
border: 1px solid var(--sonne);
border-radius: 8px;
color: var(--font-color);
text-align: center;
max-width: 750px;
width: 100%;
}
.you-reset-button {
padding: 8px 16px;
background-color: var(--background-color);
border: 1px solid var(--hover-color-alt);
border-radius: 6px;
color: var(--font-color);
cursor: pointer;
transition: all 0.2s ease;
align-self: flex-end;
margin-top: 10px;
}
.you-reset-button:hover {
background-color: var(--hover-color-alt);
}
.you-reset-button.mt-3 {
margin-top: 12px;
}
.you-reset-button-container {
width: 100%;
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
.you-loading {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px 0;
gap: 12px;
color: var(--font-color);
}
.example-questions {
display: flex;
gap: 8px;
margin-top: 16px;
flex-wrap: wrap;
justify-content: center;
width: 100%;
max-width: 750px;
margin: 24px auto;
}
.example-question {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid var(--hover-color-alt);
border-radius: 20px;
color: var(--font-color);
background-color: var(--background-color-alt);
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.9rem;
}
.example-question:hover {
background-color: var(--hover-color-alt);
}
.example-question span:first-child {
font-size: 16px;
}
/* Gruppen-Styles
=======================================*/
.groups-list-container {
padding: var(--spacing-medium);
}
.groups-list-container .loading-container {
display: flex;
justify-content: center;
align-items: center;
padding: var(--spacing-xlarge);
flex-direction: column;
gap: var(--spacing-medium);
}
.no-groups-message {
text-align: center;
padding: var(--spacing-large);
background-color: var(--background-color-alt);
border-radius: var(--border-radius-medium);
margin: var(--spacing-large) 0;
}
.groups-list {
list-style: none;
padding: 0;
margin: 0;
}
.group-item {
margin-bottom: var(--spacing-medium);
}
.group-item-button {
width: 100%;
background-color: var(--background-color-alt);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-medium);
padding: var(--spacing-medium);
text-align: left;
transition: all 0.2s ease;
cursor: pointer;
}
.group-item-button:hover {
background-color: var(--background-color);
border-color: var(--button-background-color);
}
.group-item-content {
display: flex;
flex-direction: column;
gap: var(--spacing-xsmall);
}
.group-name {
font-weight: 600;
font-size: 1.1rem;
}
.group-meta {
display: flex;
gap: var(--spacing-medium);
font-size: 0.9rem;
color: var(--font-color-subtle);
}
.group-role {
font-style: italic;
}
.groups-container {
padding: var(--spacing-medium);
}
.groups-management-layout {
display: grid;
gap: var(--spacing-large);
align-items: flex-start;
}
.groups-navigation-panel {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
padding-right: var(--spacing-medium);
align-items: center;
}
.groups-vertical-navigation {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}
.groups-vertical-tab {
width: 100%;
max-width: 220px;
padding: var(--spacing-xsmall) var(--spacing-large);
background: var(--background-color);
border: var(--border-subtle);
border-radius: 20px;
color: var(--font-color);
cursor: pointer;
white-space: normal;
transition: all 0.2s ease;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.3;
word-break: break-word;
hyphens: auto;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
gap: var(--spacing-small);
margin-bottom: var(--spacing-small);
}
.groups-vertical-tab.active {
background: var(--background-color-alt);
border-color: var(--interactive-accent-color);
color: var(--interactive-accent-color);
font-weight: 600;
}
.groups-vertical-tab:hover:not(.active) {
background: var(--background-color-alt);
border-color: var(--interactive-accent-color);
color: var(--interactive-accent-color);
}
.groups-vertical-tab:disabled {
opacity: 0.6;
cursor: not-allowed;
background: var(--background-color-alt);
border-color: var(--border-color-disabled);
color: var(--font-color-disabled);
}
/* Group Tab Content Structure */
.group-tab-content {
display: flex;
align-items: center;
gap: var(--spacing-small);
width: 100%;
}
.group-tab-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: var(--interactive-accent-color);
color: white;
border-radius: 50%;
font-size: 0.8rem;
font-weight: 600;
flex-shrink: 0;
}
.group-tab-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.group-tab-name {
font-weight: 500;
font-size: 0.9rem;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.group-tab-badge {
font-size: 0.75rem;
font-weight: 500;
color: var(--interactive-accent-color);
opacity: 0.8;
}
/* Groups Grid Layout */
.groups-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--spacing-medium);
margin-top: var(--spacing-medium);
}
.group-card {
display: flex;
align-items: center;
gap: var(--spacing-medium);
padding: var(--spacing-medium);
background: var(--background-color-alt);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-medium);
cursor: pointer;
transition: all 0.2s ease;
}
.group-card:hover {
background: var(--background-color);
border-color: var(--interactive-accent-color);
transform: translateY(-1px);
}
.group-card-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--interactive-accent-color);
color: white;
border-radius: 50%;
font-size: 1rem;
font-weight: 600;
flex-shrink: 0;
}
.group-card-info {
display: flex;
flex-direction: column;
gap: var(--spacing-xsmall);
min-width: 0;
flex: 1;
}
.group-card-name {
font-weight: 600;
font-size: 1.1rem;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.group-card-meta {
font-size: 0.9rem;
color: var(--font-color-subtle);
font-style: italic;
}
.groups-content-panel {
min-width: 0;
}
.group-info-panel {
margin-bottom: var(--spacing-xlarge);
}
.group-info-panel .profile-user-name {
font-size: 1.8rem !important;
margin-bottom: 0 !important;
}
.group-info-panel .group-admin-status {
margin-bottom: var(--spacing-medium) !important;
}
.group-info-panel .gruppen-info {
margin-bottom: var(--spacing-large) !important;
}
.create-group-form-container .auth-form {
max-width: 100%;
}
.create-group-form-container .form-group-title {
font-size: 1.8rem;
margin-bottom: var(--spacing-medium);
}
.create-group-form-container p {
margin-bottom: var(--spacing-large);
}
/* Bestehende Styles für Gruppendetails (Formularfelder etc.) bleiben weitgehend gültig,
da sie sich innerhalb des .groups-content-panel befinden.
Klassen wie .anweisungen-field, .knowledge-entry etc. sind weiterhin relevant.
*/
@media (max-width: 768px) {
.groups-management-layout {
grid-template-columns: 1fr;
}
.groups-navigation-panel {
display: flex;
padding-right: 0;
margin-bottom: var(--spacing-large);
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--spacing-xsmall);
}
.groups-vertical-navigation {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-xsmall) var(--spacing-small);
width: 100%;
}
.groups-vertical-tabs {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: auto;
align-items: flex-start;
}
.create-new-group-button,
.groups-vertical-tab {
width: fit-content;
text-align: center;
padding-left: var(--spacing-medium);
padding-right: var(--spacing-medium);
margin: calc(var(--spacing-xxxsmall) / 2) var(--spacing-xsmall);
max-width: 200px;
flex-grow: 0;
flex-shrink: 0;
}
}
.create-group-container {
padding: var(--spacing-medium);
}
.create-group-header {
margin-bottom: var(--spacing-large);
}
.create-group-header h2 {
margin-top: 0;
margin-bottom: var(--spacing-small);
}
.create-group-form {
max-width: 600px;
}
.create-group-form .form-actions {
display: flex;
justify-content: flex-end;
margin-top: var(--spacing-large);
gap: var(--spacing-medium);
}
.group-detail-container {
padding: var(--spacing-medium);
}
.back-button {
background: none;
border: none;
color: var(--link-color);
cursor: pointer;
padding: var(--spacing-xsmall) 0;
font-size: 0.9rem;
margin-bottom: var(--spacing-small);
}
.back-button:hover {
text-decoration: underline;
}
.group-detail-header {
margin-bottom: var(--spacing-large);
}
.group-detail-header h2 {
margin: var(--spacing-small) 0;
}
.group-role-badge {
display: inline-block;
background-color: var(--klee);
color: var(--weiß);
font-size: 0.8rem;
padding: var(--spacing-xsmall) var(--spacing-small);
border-radius: var(--border-radius-small);
margin-top: var(--spacing-xsmall);
}
.error-container,
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-medium);
padding: var(--spacing-xlarge);
text-align: center;
}
.group-admin-section {
margin-bottom: var(--spacing-xlarge);
padding: var(--spacing-medium);
background-color: var(--background-color-alt);
border-radius: var(--border-radius-medium);
}
.group-admin-section h3 {
margin-top: 0;
}
.join-link-container {
display: flex;
gap: var(--spacing-small);
margin-top: var(--spacing-medium);
align-items: center;
flex-wrap: wrap;
}
/* Groups join-link input styles - DISABLED to prevent conflicts with main form-inputs.css */
/*
.join-link-input {
flex: 1;
min-width: 250px;
padding: var(--spacing-small);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-small);
background-color: var(--background-color-alt);
font-family: monospace;
}
*/
.group-content-section {
margin-bottom: var(--spacing-xlarge);
}
.group-content-section h3 {
margin-top: 0;
margin-bottom: var(--spacing-small);
}
.group-content-section .help-text {
color: var(--font-color-subtle);
margin-bottom: var(--spacing-medium);
}
.anweisungen-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-small);
}
.toggle-container {
display: flex;
align-items: center;
}
.group-actions {
display: flex;
align-items: center;
gap: var(--spacing-medium);
margin-top: var(--spacing-large);
}
.save-feedback {
padding: var(--spacing-small) var(--spacing-medium);
border-radius: var(--border-radius-small);
}
.save-feedback.success {
background-color: var(--klee);
color: var(--weiß);
}
.save-feedback.error {
background-color: var(--sonne);
color: var(--primary);
}
.join-group-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 70vh;
padding: var(--spacing-medium);
}
.join-group-card {
background-color: var(--background-color-alt);
border-radius: var(--border-radius-medium);
padding: var(--spacing-large);
max-width: 500px;
width: 100%;
box-shadow: var(--shadow-md);
}
.join-group-card h1 {
margin-top: 0;
margin-bottom: var(--spacing-medium);
}
.join-group-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-medium);
margin-top: var(--spacing-large);
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background-color: var(--background-color);
border-radius: var(--border-radius-medium);
max-width: 500px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-medium);
border-bottom: 1px solid var(--border-subtle);
}
.modal-header h3 {
margin: 0;
}
.close-button {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--font-color-subtle);
line-height: 1;
padding: 0;
}
.close-button:hover {
color: var(--font-color);
}
.modal-body {
padding: var(--spacing-medium);
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--spacing-medium);
padding: var(--spacing-medium);
border-top: 1px solid var(--border-subtle);
}
.form-divider {
margin: var(--spacing-large) 0 var(--spacing-medium) 0;
border: none;
border-top: 1px solid var(--border-subtle);
}
.form-divider-large {
margin: var(--spacing-xlarge) 0;
border: none;
border-top: 1px solid var(--border-subtle);
}
/* Die folgenden Klassen werden jetzt aus profile.css verwendet und können hier entfernt werden */
/*
.knowledge-entry {
margin-bottom: var(--spacing-large);
}
.knowledge-entry-bordered {
border-top: 1px solid var(--border-subtle);
padding-top: var(--spacing-large);
}
.knowledge-content-label {
margin-top: var(--spacing-small);
display: block;
}
.help-text {
color: var(--font-color-subtle);
margin-bottom: var(--spacing-medium);
}
.character-count {
text-align: right;
font-size: 0.8em;
margin-top: var(--spacing-xxsmall);
}
.anweisungen-actions {
margin-top: var(--spacing-large);
display: flex;
align-items: center;
gap: var(--spacing-medium);
}
*/
.gruppen-info {
margin-top: var(--spacing-medium);
line-height: 1.4;
}
.group-admin-status {
font-size: 0.9rem;
color: var(--font-color-subtle);
margin-bottom: var(--spacing-medium);
}
.group-invite-section {
margin-top: var(--spacing-large);
padding-top: var(--spacing-medium);
border-top: 1px solid var(--border-subtle);
}
.group-invite-section h3 {
font-size: 1.1rem;
margin-bottom: var(--spacing-small);
color: var(--font-color-h3);
}
.join-link-actions {
display: flex;
gap: var(--spacing-small);
margin-top: var(--spacing-small);
flex-wrap: wrap;
}
.group-header-section {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--spacing-large);
}
.group-title-area {
flex-grow: 1;
}
.group-title-line {
display: flex;
align-items: baseline;
gap: var(--spacing-small);
}
.group-title-line .profile-user-name {
margin-bottom: 0;
}
.admin-badge {
display: inline-block;
background-color: var(--klee);
color: var(--weiß);
font-size: 0.75rem;
font-weight: 600;
padding: 3px var(--spacing-xsmall);
border-radius: var(--border-radius-small);
text-transform: uppercase;
line-height: 1.1;
align-self: center;
}
.group-membership-status {
font-size: 0.9rem;
color: var(--font-color-subtle);
margin-top: var(--spacing-xsmall);
margin-bottom: 0;
}
.copy-join-link-button {
background-color: transparent;
color: var(--button-text-color, var(--font-color));
cursor: pointer;
display: inline-flex;
border: var(--border-subtle);
transition: all 0.2s ease;
align-self: flex-start;
margin-left: var(--spacing-medium);
border-radius: 50%;
width: 36px;
height: 36px;
padding: 0;
justify-content: center;
align-items: center;
border: 1px solid var(--border-subtle);
font-size: 0.9rem;
white-space: nowrap;
}
.copy-join-link-button:hover:not(:disabled) {
background-color: var(--button-hover-background-color, var(--background-color-alt));
border-color: var(--button-hover-border-color, var(--primary));
color: var(--button-hover-text-color, var(--primary));
}
.copy-join-link-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.copy-join-link-button svg {
font-size: 1.2em;
margin-right: 0;
}
@media (max-width: 480px) {
.group-header-section {
flex-direction: column;
align-items: flex-start;
}
.copy-join-link-button {
margin-left: 0;
margin-top: var(--spacing-small);
align-self: flex-start;
}
}
/* Styling für den Gruppen-Übersicht-Tab
========================================================================== */
.group-overview-container .group-header-section {
margin-bottom: var(--spacing-large);
}
.group-overview-content {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.group-overview-section h3 {
font-size: 1.2rem;
margin-bottom: var(--spacing-small) !important;
margin-top: 0;
font-weight: 600;
}
.group-overview-section p,
.group-overview-section ul {
line-height: 1.6;
color: var(--font-color);
margin-bottom: var(--spacing-medium);
}
.group-overview-section > *:last-child {
margin-bottom: 0;
}
.group-overview-section ul {
list-style-type: disc;
padding-left: var(--spacing-medium);
}
.group-overview-section li {
margin-bottom: var(--spacing-xsmall);
}
.group-overview-section li strong {
font-weight: 600;
/* Optional: Farbe für hervorgehobenen Text, falls gewünscht
color: var(--font-color-emphasis, var(--primary));
*/
}
.group-overview-cta {
gap: var(--spacing-medium);
}
.group-overview-cta p {
margin-bottom:1rem;
color: var(--font-color);
font-size: 1rem;
line-height: 1.6;
}
/* Der Button im CTA (.profile-action-button.profile-primary-button)
verwendet globale Stile und benötigt hier normalerweise keine spezifischen Anpassungen. */
/* Invitation Link Section Styling
========================================================================== */
.join-link-section {
margin-top: var(--spacing-medium);
padding: var(--spacing-medium);
background-color: var(--background-color-alt);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-medium);
border-left: 4px solid var(--interactive-accent-color);
}
.join-link-display {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.join-link-label {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
font-weight: 600;
font-size: 0.9rem;
color: var(--font-color);
}
.join-link-label .info-icon-inline {
color: var(--interactive-accent-color);
font-size: 1.1em;
flex-shrink: 0;
}
.join-link-url {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.85rem;
padding: var(--spacing-small);
background-color: var(--background-color);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-small);
color: var(--font-color-subtle);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: all;
cursor: text;
transition: all 0.2s ease;
}
.join-link-url:hover {
background-color: var(--background-color-alt);
border-color: var(--interactive-accent-color);
}
.join-link-url-container {
display: flex;
align-items: center;
gap: var(--spacing-small);
}
.join-link-url-container .join-link-url {
flex: 1;
}
.copy-join-link-button-inline {
background-color: transparent;
color: var(--button-text-color, var(--font-color));
cursor: pointer;
display: inline-flex;
border: var(--border-subtle);
transition: all 0.2s ease;
border-radius: var(--border-radius-small);
padding: var(--spacing-xsmall) var(--spacing-small);
justify-content: center;
align-items: center;
border: 1px solid var(--border-subtle);
font-size: 0.85rem;
white-space: nowrap;
gap: var(--spacing-xsmall);
flex-shrink: 0;
}
.copy-join-link-button-inline:hover:not(:disabled) {
background-color: var(--button-hover-background-color, var(--background-color-alt));
border-color: var(--button-hover-border-color, var(--primary));
color: var(--button-hover-text-color, var(--primary));
}
.copy-join-link-button-inline:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.copy-join-link-button-inline svg {
font-size: 1em;
}
@media (max-width: 768px) {
.join-link-section {
padding: var(--spacing-small);
}
.join-link-url {
font-size: 0.8rem;
padding: var(--spacing-xsmall);
}
}
/* Group Members List Styles
========================================================================== */
.group-members-section {
margin: var(--spacing-large) 0;
}
.group-members-list {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
margin: var(--spacing-medium) 0;
}
.group-member-item {
display: flex;
align-items: center;
gap: var(--spacing-medium);
padding: var(--spacing-small);
background-color: var(--background-color-alt);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-small);
}
.member-avatar {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.member-avatar-circle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--interactive-accent-color);
color: white;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.2s ease;
}
.member-avatar-circle.admin {
background-color: var(--klee);
box-shadow: 0 0 0 2px var(--background-color), 0 0 0 3px var(--klee);
}
.member-profile-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.member-info {
flex: 1;
min-width: 0;
}
.member-name-line {
display: flex;
align-items: center;
gap: var(--spacing-small);
margin-bottom: var(--spacing-xxsmall);
}
.member-name {
font-weight: 500;
font-size: 0.95rem;
color: var(--font-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.member-name.anonymous {
font-style: italic;
color: var(--font-color-subtle);
}
.member-admin-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-xxsmall);
background-color: var(--klee);
color: white;
font-size: 0.75rem;
font-weight: 600;
padding: 2px var(--spacing-xsmall);
border-radius: var(--border-radius-small);
text-transform: uppercase;
line-height: 1.1;
flex-shrink: 0;
}
.admin-icon {
font-size: 0.8rem;
}
.member-meta {
display: flex;
align-items: center;
gap: var(--spacing-medium);
font-size: 0.8rem;
color: var(--font-color-subtle);
}
.member-join-date {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.members-empty-state,
.members-privacy-note {
text-align: center;
padding: var(--spacing-medium);
color: var(--font-color-subtle);
}
.members-privacy-note {
margin-top: var(--spacing-medium);
padding: var(--spacing-small);
background-color: var(--background-color-alt);
border-radius: var(--border-radius-small);
border-left: 3px solid var(--interactive-accent-color);
}
.members-privacy-note small {
font-size: 0.85rem;
line-height: 1.4;
}
/* Group Section Headers
========================================================================== */
.group-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-medium);
}
.group-section-title {
display: flex;
align-items: center;
gap: var(--spacing-small);
font-size: 1.1rem;
font-weight: 600;
color: var(--font-color);
margin: 0;
}
.group-section-title .icon {
font-size: 1.2rem;
color: var(--interactive-accent-color);
}
/* Responsive adjustments for members list
========================================================================== */
@media (max-width: 768px) {
.group-member-item {
padding: var(--spacing-xsmall);
gap: var(--spacing-small);
}
.member-avatar-circle {
width: 32px;
height: 32px;
font-size: 0.8rem;
}
.member-name-line {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xxsmall);
}
.member-admin-badge {
align-self: flex-start;
}
.member-meta {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xxsmall);
}
}
/* Horizontal navigation for group sub-tabs
========================================================================== */
.groups-horizontal-navigation {
display: flex;
flex-direction: row;
gap: var(--spacing-small);
margin-bottom: var(--spacing-large);
flex-wrap: wrap;
}
.groups-horizontal-navigation .groups-vertical-tab {
max-width: none;
width: auto;
flex-shrink: 0;
}
/* Override .auth-form button + button for group name editing only */
.group-name-edit-actions button + button {
margin-top: 0 !important;
}
/* Group Name Editing Styles
========================================================================== */
.group-name-edit-container {
display: flex;
align-items: center;
gap: var(--spacing-small);
flex: 1;
}
.group-name-edit-input {
font-size: 1.8rem;
font-weight: bold;
color: var(--font-color-h);
background: var(--background-color);
border: 2px solid var(--interactive-accent-color);
border-radius: var(--border-radius-small);
padding: var(--spacing-xsmall) var(--spacing-small);
margin: 0;
font-family: inherit;
line-height: 1.2;
min-width: 200px;
max-width: 400px;
}
.group-name-edit-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(0, 106, 78, 0.2);
}
.group-name-edit-actions {
display: flex;
gap: var(--spacing-xsmall);
}
.group-name-edit-button {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
border-radius: var(--border-radius-small);
cursor: pointer;
font-size: 1rem;
transition: all 0.2s ease;
}
.group-name-edit-button.save {
background-color: var(--klee);
color: white;
}
.group-name-edit-button.save:hover:not(:disabled) {
background-color: var(--primary);
}
.group-name-edit-button.cancel {
background-color: var(--background-color-alt);
color: var(--font-color);
border: 1px solid var(--border-subtle);
}
.group-name-edit-button.cancel:hover:not(:disabled) {
background-color: var(--error-red, #dc3545);
color: white;
border-color: var(--error-red, #dc3545);
}
.group-name-edit-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.group-name-edit-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-left:0;
background: transparent;
border: none;
cursor: pointer;
border-radius: var(--border-radius-small);
transition: all 0.2s ease;
opacity: 0.7;
}
.group-name-edit-icon:hover:not(:disabled) {
background-color: var(--background-color-alt);
color: var(--interactive-accent-color);
opacity: 1;
}
.group-name-edit-icon:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* Read-only notice for non-admin group members */
.group-readonly-notice {
background-color: var(--background-color-alt);
border: 1px solid var(--border-subtle);
border-left: 4px solid var(--interactive-accent-color);
border-radius: var(--border-radius-medium);
padding: var(--spacing-medium);
margin-bottom: var(--spacing-medium);
display: flex;
align-items: center;
gap: var(--spacing-small);
}
.group-readonly-notice-icon {
color: var(--interactive-accent-color);
font-size: 1.2em;
flex-shrink: 0;
}
.group-readonly-notice-content {
flex: 1;
}
.group-readonly-notice-title {
font-weight: 600;
font-size: 1rem;
color: var(--font-color);
margin: 0 0 var(--spacing-xxsmall) 0;
}
.group-readonly-notice-text {
font-size: 0.9em;
color: var(--font-color-subtle);
margin: 0;
line-height: 1.4;
opacity: 0.8;
}
/* Enhanced Shared Content Selector Styles */
.shared-content-selector {
width: 100%;
background-color: var(--card-background);
border: 1px solid var(--border-color);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-large);
box-shadow: none;
transition: none;
}
.shared-content-header {
margin-bottom: var(--spacing-large);
}
.shared-content-title-section {
margin-bottom: var(--spacing-medium);
}
.shared-content-title-section h3 {
margin: 0 0 var(--spacing-xsmall) 0;
color: var(--font-color-h3);
font-size: 1.5rem;
font-weight: 600;
}
.shared-content-description {
color: var(--font-color-disabled);
margin: 0;
font-size: 0.95rem;
line-height: 1.4;
}
.shared-content-controls {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-medium);
align-items: center;
padding: var(--spacing-medium);
background-color: var(--card-background);
border-radius: var(--card-border-radius-medium);
border: 1px solid var(--border-color);
box-shadow: none;
}
.shared-content-search {
position: relative;
flex: 1;
min-width: 200px;
}
.shared-content-search .search-icon {
position: absolute;
left: var(--spacing-small);
top: 50%;
transform: translateY(-50%);
color: var(--font-color-disabled);
font-size: 1rem;
pointer-events: none;
}
.shared-content-search .search-input {
width: 100%;
padding: var(--form-element-padding-y) var(--form-element-padding-x) var(--form-element-padding-y) 2.5rem;
border: 1px solid var(--border-color);
border-radius: var(--card-border-radius-small);
background-color: var(--input-background);
color: var(--input-text-color);
font-size: 0.95rem;
min-height: var(--form-element-min-height);
transition: none;
box-sizing: border-box;
}
.shared-content-search .search-input::placeholder {
color: var(--input-placeholder-color);
}
.shared-content-search .search-input:focus {
outline: none;
border-color: var(--interactive-accent-color);
box-shadow: none;
}
.shared-content-filters {
display: flex;
gap: var(--spacing-small);
align-items: center;
flex-wrap: wrap;
}
.filter-select {
padding: var(--form-element-padding-y) var(--form-element-padding-x);
border: 1px solid var(--border-color);
border-radius: var(--card-border-radius-small);
background-color: var(--input-background);
color: var(--input-text-color);
font-size: 0.9rem;
min-width: 120px;
min-height: var(--form-element-min-height);
transition: none;
cursor: pointer;
}
.filter-select:focus {
outline: none;
border-color: var(--interactive-accent-color);
box-shadow: none;
}
.filter-select:disabled {
background-color: var(--background-color-alt);
color: var(--font-color-disabled);
border-color: var(--border-color-disabled);
cursor: not-allowed;
}
.sort-order-button {
padding: var(--form-element-padding-y) var(--form-element-padding-x);
border: 1px solid var(--border-color);
border-radius: var(--card-border-radius-small);
background-color: var(--button-background-color);
color: var(--font-color);
cursor: pointer;
font-size: 1rem;
min-height: var(--form-element-min-height);
transition: none;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.sort-order-button:hover:not(:disabled) {
background-color: var(--button-hover-color);
color: var(--interactive-accent-color);
}
.sort-order-button:disabled {
background-color: var(--background-color-alt);
color: var(--font-color-disabled);
border-color: var(--border-color-disabled);
cursor: not-allowed;
}
.view-mode-toggle {
display: flex;
border: 1px solid var(--border-color);
border-radius: var(--card-border-radius-small);
overflow: hidden;
box-shadow: none;
}
.view-mode-button {
padding: var(--form-element-padding-y) var(--form-element-padding-x);
border: none;
background-color: var(--input-background);
color: var(--font-color);
cursor: pointer;
transition: none;
font-size: 1rem;
min-height: var(--form-element-min-height);
display: flex;
align-items: center;
justify-content: center;
}
.view-mode-button:hover:not(.active) {
background-color: var(--hover-color-alt);
color: var(--interactive-accent-color);
}
.view-mode-button.active {
background-color: var(--interactive-accent-color);
color: var(--background-color);
}
.view-mode-button + .view-mode-button {
border-left: 1px solid var(--border-color);
}
/* Content Grid and Items */
.shared-content-grid {
display: grid;
gap: var(--spacing-medium);
margin-top: var(--spacing-large);
}
.shared-content-grid.grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.shared-content-grid.template-square {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.shared-content-grid.list {
grid-template-columns: 1fr;
}
.shared-content-item {
background-color: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-medium);
transition: var(--input-transition);
cursor: pointer;
box-shadow: var(--card-shadow-subtle);
position: relative;
overflow: hidden;
}
.shared-content-item:hover {
background-color: var(--card-background);
border-color: var(--interactive-accent-color);
transform: var(--card-hover-transform);
box-shadow: var(--card-hover-shadow);
}
/* Subtle hover effect for template cards */
.shared-content-item.template-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-color: var(--border-subtle); /* Keep original border color */
}
.shared-content-item:focus-within {
border-color: var(--interactive-accent-color);
box-shadow: var(--input-shadow-focus);
}
/* Template Card Variant - Only applies to cards with preview images */
.shared-content-item.template-card {
aspect-ratio: 1;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
height: auto;
}
/* Fallback for template cards without images - should not happen with current logic */
.shared-content-item.template-card:not(:has(.shared-content-preview)) {
aspect-ratio: auto;
padding: var(--spacing-medium);
}
/* Template Card Variant - Updated for new JSX structure */
.shared-content-item.template-card .shared-content-preview {
height: 75%;
margin: 0;
border-radius: 0;
background-color: transparent;
position: relative;
flex-shrink: 0;
}
.shared-content-item.template-card .shared-content-preview-image {
width: 100%;
height: 100%;
object-fit: cover;
max-height: none;
border-radius: 0;
transition: transform 0.3s ease-out;
}
/* Very subtle image hover effect for template cards */
.shared-content-item.template-card .shared-content-preview-image:hover {
transform: scale(1.01);
}
.shared-content-item.template-card .shared-content-actions {
position: absolute;
top: var(--spacing-small);
left: var(--spacing-small);
z-index: 2;
background: rgba(0, 0, 0, 0.7);
border-radius: var(--card-border-radius-small);
padding: var(--spacing-xxsmall);
display: flex;
gap: var(--spacing-xxsmall);
}
.shared-content-item.template-card .shared-content-action {
background: rgba(255, 255, 255, 0.9);
border: none;
width: 28px;
height: 28px;
box-shadow: none;
border-radius: var(--card-border-radius-small);
}
.shared-content-item.template-card .shared-content-item-header {
position: absolute;
top: var(--spacing-small);
right: var(--spacing-small);
z-index: 2;
background: rgba(0, 0, 0, 0.7);
border-radius: var(--card-border-radius-small);
padding: var(--spacing-xsmall);
margin-bottom: 0;
}
.shared-content-item.template-card .shared-content-type-badge {
background: var(--interactive-accent-color);
color: var(--background-color);
margin-left: 0;
font-size: 0.7rem;
padding: var(--spacing-xxsmall) var(--spacing-xsmall);
border-radius: var(--card-border-radius-small);
}
.shared-content-item.template-card .shared-content-item-body {
height: 25%;
padding: var(--spacing-small);
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--card-background);
gap: var(--spacing-xsmall);
flex-shrink: 0;
}
.shared-content-item.template-card .shared-content-item-title {
font-size: 0.95rem;
margin: 0;
line-height: 1.2;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
flex-grow: 1;
}
.shared-content-item.template-card .shared-content-meta {
font-size: 0.75rem;
gap: var(--spacing-xxsmall);
margin: 0;
flex-shrink: 0;
}
.shared-content-item-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--spacing-medium);
gap: var(--spacing-small);
}
.shared-content-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background-color: var(--interactive-accent-color);
color: var(--background-color);
border-radius: var(--card-border-radius-small);
font-size: 1rem;
flex-shrink: 0;
box-shadow: var(--card-shadow-subtle);
}
.shared-content-type-badge {
background-color: var(--interactive-accent-color);
color: var(--background-color);
font-size: 0.75rem;
padding: var(--spacing-xxsmall) var(--spacing-small);
border-radius: var(--card-border-radius-small);
font-weight: 600;
margin-left: var(--spacing-small);
text-transform: uppercase;
letter-spacing: 0.025em;
white-space: nowrap;
}
.shared-content-actions {
display: flex;
gap: var(--spacing-xxsmall);
margin-left: auto;
flex-shrink: 0;
}
.shared-content-action {
padding: var(--spacing-xsmall);
border: var(--input-border);
border-radius: var(--card-border-radius-small);
color: var(--font-color);
background-color: var(--card-background);
cursor: pointer;
transition: var(--input-transition);
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
box-shadow: var(--card-shadow-subtle);
}
.shared-content-action:hover:not(:disabled) {
background-color: var(--button-hover-color);
border-color: var(--interactive-accent-color);
color: var(--interactive-accent-color);
transform: scale(1.05);
}
.shared-content-action.view {
color: var(--interactive-accent-color);
}
.shared-content-action.view:hover:not(:disabled) {
background-color: var(--hover-color-alt);
border-color: var(--interactive-accent-color);
color: var(--interactive-accent-color);
}
.shared-content-action.edit {
color: var(--font-color);
}
.shared-content-action.edit:hover:not(:disabled) {
background-color: var(--hover-color-alt);
border-color: var(--interactive-accent-color);
color: var(--interactive-accent-color);
}
.shared-content-action.delete {
color: var(--error-red);
}
.shared-content-action.delete:hover:not(:disabled) {
background-color: var(--background-red-light);
border-color: var(--error-red);
color: var(--error-red);
}
.shared-content-action:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.shared-content-action:focus {
outline: none;
box-shadow: var(--input-shadow-focus);
}
.shared-content-item-body {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.shared-content-item-title {
margin: 0;
color: var(--font-color-h);
font-size: 1.1rem;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
}
.shared-content-preview {
margin: var(--spacing-small) 0;
border-radius: var(--border-radius);
overflow: hidden;
background-color: var(--background-color-alt);
}
.shared-content-preview-image {
width: 100%;
height: auto;
max-height: 180px;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.2s ease-out;
}
.shared-content-preview-image:hover {
transform: scale(1.02);
}
.shared-content-item-description {
margin: 0;
color: var(--font-color);
font-size: 0.9rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
opacity: 0.85;
}
.shared-content-meta {
display: flex;
flex-direction: column;
gap: var(--spacing-xxsmall);
font-size: 0.85rem;
color: var(--font-color-disabled);
line-height: 1.3;
}
.shared-content-meta > span {
display: flex;
align-items: center;
gap: var(--spacing-xxsmall);
}
.shared-content-stats {
display: flex;
gap: var(--spacing-small);
font-size: 0.8rem;
color: var(--font-color-disabled);
flex-wrap: wrap;
margin-top: var(--spacing-xsmall);
}
.shared-content-stats span {
padding: var(--spacing-xxsmall) var(--spacing-xsmall);
background-color: var(--card-background);
border-radius: var(--card-border-radius-small);
border: var(--card-border);
font-weight: 500;
white-space: nowrap;
color: var(--font-color);
box-shadow: var(--card-shadow-subtle);
}
.shared-content-permissions {
display: flex;
gap: var(--spacing-xxsmall);
margin-top: var(--spacing-small);
flex-wrap: wrap;
}
.permission-badge {
font-size: 0.7rem;
padding: var(--spacing-xxsmall) var(--spacing-xsmall);
border-radius: var(--card-border-radius-small);
border: var(--card-border);
background-color: var(--card-background-alt);
color: var(--font-color-disabled);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
transition: var(--input-transition);
opacity: 0.7;
}
.permission-badge.active {
background-color: var(--interactive-accent-color);
color: var(--background-color);
border-color: var(--interactive-accent-color);
opacity: 1;
box-shadow: var(--card-shadow-subtle);
}
/* Empty States */
.shared-content-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-medium);
padding: var(--spacing-xxlarge);
text-align: center;
background-color: var(--card-background-alt);
border-radius: var(--card-border-radius-medium);
border: var(--card-border);
box-shadow: var(--card-shadow-subtle);
min-height: 200px;
}
.shared-content-loading p {
margin: 0;
color: var(--font-color-disabled);
font-size: 0.95rem;
font-weight: 500;
}
.shared-content-empty {
padding: var(--spacing-xxlarge);
background-color: var(--card-background-alt);
border-radius: var(--card-border-radius-medium);
border: var(--card-border);
box-shadow: var(--card-shadow-subtle);
}
.shared-content-empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--spacing-medium);
min-height: 200px;
justify-content: center;
}
.shared-content-empty-state .empty-state-icon {
color: var(--font-color-disabled);
opacity: 0.6;
}
.shared-content-empty-state h4 {
margin: 0;
color: var(--font-color-h);
font-size: 1.2rem;
font-weight: 600;
}
.shared-content-empty-state p {
margin: 0;
color: var(--font-color);
line-height: 1.5;
max-width: 500px;
opacity: 0.85;
}
.shared-content-no-results {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--spacing-medium);
padding: var(--spacing-xxlarge);
background-color: var(--card-background-alt);
border-radius: var(--card-border-radius-medium);
border: var(--card-border);
box-shadow: var(--card-shadow-subtle);
min-height: 150px;
justify-content: center;
}
.shared-content-no-results p {
margin: 0;
color: var(--font-color);
font-size: 0.95rem;
opacity: 0.85;
}
.clear-search-button {
padding: var(--form-element-padding-y) var(--spacing-medium);
border: var(--input-border-focus);
border-radius: var(--card-border-radius-small);
background-color: var(--button-background-color);
color: var(--interactive-accent-color);
cursor: pointer;
transition: var(--input-transition);
font-size: 0.9rem;
font-weight: 500;
box-shadow: var(--card-shadow-subtle);
min-height: var(--form-element-min-height);
display: flex;
align-items: center;
justify-content: center;
}
.clear-search-button:hover {
background-color: var(--interactive-accent-color);
color: var(--button-text-color);
transform: translateY(-1px);
box-shadow: var(--card-shadow-elevated);
}
.clear-search-button:focus {
outline: none;
box-shadow: var(--input-shadow-focus);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.shared-content-selector {
padding: var(--spacing-medium);
border-radius: var(--card-border-radius-small);
}
.shared-content-controls {
flex-direction: column;
gap: var(--spacing-small);
align-items: stretch;
padding: var(--spacing-small);
}
.shared-content-search {
order: 1;
min-width: unset;
}
.shared-content-filters {
order: 2;
flex-wrap: wrap;
justify-content: space-between;
}
.filter-select {
flex: 1;
min-width: 100px;
}
.view-mode-toggle {
order: 3;
align-self: center;
width: auto;
}
.shared-content-grid.grid {
grid-template-columns: 1fr;
gap: var(--spacing-small);
}
.shared-content-item {
padding: var(--spacing-small);
}
.shared-content-item-header {
flex-direction: column;
gap: var(--spacing-small);
align-items: stretch;
}
.shared-content-actions {
align-self: flex-end;
margin-left: 0;
}
.shared-content-meta {
font-size: 0.8rem;
}
.shared-content-stats {
gap: var(--spacing-xsmall);
}
.shared-content-stats span {
font-size: 0.75rem;
}
.permission-badge {
font-size: 0.65rem;
padding: 1px var(--spacing-xxsmall);
}
.shared-content-title-section h3 {
font-size: 1.3rem;
}
.shared-content-empty,
.shared-content-loading,
.shared-content-no-results {
padding: var(--spacing-large);
min-height: 150px;
}
.shared-content-preview-image {
max-height: 140px;
}
/* Template card mobile adjustments */
.shared-content-grid.template-square {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--spacing-small);
}
.shared-content-item.template-card .shared-content-item-header {
top: var(--spacing-xsmall);
right: var(--spacing-xsmall);
padding: var(--spacing-xxsmall);
}
.shared-content-item.template-card .shared-content-actions {
top: var(--spacing-xsmall);
left: var(--spacing-xsmall);
padding: 2px;
}
.shared-content-item.template-card .shared-content-action {
width: 24px;
height: 24px;
font-size: 0.8rem;
}
.shared-content-item.template-card .shared-content-item-body {
padding: var(--spacing-xsmall);
}
.shared-content-item.template-card .shared-content-item-title {
font-size: 0.85rem;
}
.shared-content-item.template-card .shared-content-meta {
font-size: 0.7rem;
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.shared-content-preview-image {
transition: none;
}
.shared-content-preview-image:hover {
transform: none;
}
.shared-content-item.template-card {
transition: none;
}
.shared-content-item.template-card:hover {
transform: none;
}
}
/* Legacy Shared Content Styles */
.shared-content-sections {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
}
.shared-content-section {
background-color: var(--card-background-alt);
border-radius: var(--card-border-radius-small);
padding: var(--spacing-medium);
border: var(--card-border);
box-shadow: var(--card-shadow-subtle);
}
.shared-content-section-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--font-color-h);
margin: 0 0 var(--spacing-medium) 0;
padding-bottom: var(--spacing-small);
border-bottom: 2px solid var(--interactive-accent-color);
}
.shared-content-title {
font-size: 1rem;
font-weight: 600;
color: var(--font-color-h);
margin: 0;
flex: 1;
line-height: 1.3;
}
.shared-content-remove {
background: none;
border: var(--input-border);
color: var(--font-color-disabled);
cursor: pointer;
padding: var(--spacing-xsmall);
border-radius: var(--card-border-radius-small);
transition: var(--input-transition);
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background-color: var(--button-background-color);
box-shadow: var(--card-shadow-subtle);
}
.shared-content-remove:hover:not(:disabled) {
color: var(--error-red);
background-color: var(--background-red-light);
border-color: var(--error-red);
transform: scale(1.05);
}
.shared-content-remove:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.shared-content-remove:focus {
outline: none;
box-shadow: var(--input-shadow-focus);
}
/* Additional mobile responsiveness for legacy shared content */
@media (max-width: 768px) {
.shared-content-section {
padding: var(--spacing-small);
}
.shared-content-section-title {
font-size: 1rem;
padding-bottom: var(--spacing-xsmall);
}
}
/* QA Creator Tab Styles */
/* QA Section Container - Clean styling without borders */
.qa-section-container {
width: 100%;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
.qa-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-large);
padding-bottom: var(--spacing-medium);
border-bottom: var(--border-subtle);
}
.qa-section-header h3 {
margin: 0;
color: var(--font-color-h3);
font-size: 18px;
font-weight: 600;
}
.qa-section-content {
background: transparent;
border: none;
padding: 0;
}
/* QA Creator Card Styles */
.qa-creator-card {
width: 100%;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
.qa-creator-header {
margin-bottom: var(--spacing-large);
padding-bottom: var(--spacing-medium);
border-bottom: var(--border-subtle);
}
.qa-creator-header h3 {
margin: 0;
color: var(--font-color-h3);
font-size: 18px;
font-weight: 600;
}
.qa-creator-content {
background: transparent;
border: none;
padding: 0;
}
.qa-creator-form .form-section {
margin-bottom: var(--spacing-xsmall);
min-height: 0px;
}
.qa-creator-form .form-section:last-child {
margin-bottom: 0;
}
/* Document Selection Styles */
.document-selection {
background-color: var(--background-color-alt);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-medium);
border: var(--border-subtle);
}
.no-documents-message {
text-align: center;
padding: var(--spacing-xlarge) var(--spacing-medium);
color: var(--font-color-disabled);
}
.no-documents-message p {
margin: var(--spacing-small) 0;
font-size: 14px;
line-height: 1.5;
}
.document-list {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
.document-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-medium);
background-color: var(--background-color);
border: var(--border-subtle);
border-radius: var(--card-border-radius-small);
cursor: pointer;
transition: var(--input-transition);
}
.document-item:hover {
background-color: var(--hover-color-alt);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.document-item.selected {
background-color: var(--secondary-50);
border-color: var(--interactive-accent-color);
box-shadow: var(--input-shadow-focus);
}
[data-theme="dark"] .document-item.selected {
background-color: var(--secondary-800);
border-color: var(--interactive-accent-color);
}
.document-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--secondary-600);
}
.document-details {
display: flex;
flex-direction: column;
gap: var(--spacing-xxsmall);
min-width: 0;
}
.document-title {
font-weight: 500;
color: var(--font-color);
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.document-meta {
font-size: 12px;
color: var(--font-color-disabled);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.document-checkbox {
flex-shrink: 0;
width: 20px;
height: 20px;
border: 2px solid var(--grey-300);
border-radius: var(--spacing-xxsmall);
display: flex;
align-items: center;
justify-content: center;
transition: var(--input-transition);
background-color: var(--background-color);
}
.document-checkbox.checked {
background-color: var(--interactive-accent-color);
border-color: var(--interactive-accent-color);
color: var(--white);
}
.document-checkbox svg {
width: 12px;
height: 12px;
}
.selected-documents-summary {
margin-top: var(--spacing-medium);
padding-top: var(--spacing-medium);
border-top: var(--border-subtle);
font-size: 14px;
font-weight: 500;
text-align: center;
}
/* Form Actions Styles */
.qa-creator-form .form-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-medium);
padding-top: var(--spacing-large);
margin-top: var(--spacing-large);
border-top: var(--border-subtle);
}
.qa-creator-form .form-actions .btn-secondary {
background-color: var(--background-color);
color: var(--font-color);
border: var(--border-subtle);
}
.qa-creator-form .form-actions .btn-secondary:hover:not(:disabled) {
background-color: var(--hover-color-alt);
}
.qa-creator-form .form-actions .btn-primary:hover:not(:disabled) {
background-color: var(--secondary-700);
transform: translateY(-1px);
}
.qa-creator-form .form-actions .btn-primary:disabled {
background-color: var(--grey-300);
color: var(--font-color-disabled);
cursor: not-allowed;
transform: none;
}
/* Responsive Design */
@media (max-width: 768px) {
.qa-creator-modal {
width: 95%;
max-height: 90vh;
}
.qa-creator-form .modal-body {
padding: var(--spacing-medium);
}
.qa-creator-form .modal-footer {
padding: var(--spacing-medium);
flex-direction: column-reverse;
}
.qa-creator-form .modal-footer button {
width: 100%;
}
.document-item {
padding: var(--spacing-small);
}
.document-list {
max-height: 200px;
}
}
/* Q&A Chat Layout Styles */
.qa-chat-container {
display: flex;
flex-direction: column;
height: calc(100vh - 60px);
background: var(--background-color);
padding: var(--spacing-medium);
box-sizing: border-box;
}
/* Mode-specific container styles */
.qa-chat-dossier {
/* Dossier mode uses default container behavior */
}
.qa-chat-chat {
/* Chat mode specific adjustments */
padding: 0;
position: relative; /* Ensure proper stacking context */
}
.qa-chat-main {
display: flex;
flex: 1;
overflow: hidden;
}
.qa-chat-left-panel {
flex: 1;
min-width: 300px;
max-width: 500px;
display: flex;
flex-direction: column;
background: var(--card-background);
border-radius: var(--card-border-radius-medium);
border: var(--card-border);
box-shadow: var(--card-shadow-elevated);
margin-right: var(--spacing-medium);
overflow: hidden;
min-height: 0;
height: 100%;
}
.qa-chat-header {
padding: var(--spacing-medium);
border-bottom: var(--border-subtle);
flex-shrink: 0;
border-radius: var(--card-border-radius-medium) var(--card-border-radius-medium) 0 0;
}
.qa-chat-header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.qa-chat-header h2 {
margin: 0;
color: var(--font-color);
font-size: 1.3rem;
flex: 1;
}
/* Mode selector in QA context - unified floating style */
.qa-chat-mode-selector {
flex-shrink: 0;
}
.qa-chat-mode-selector .mode-button {
background: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--card-shadow-subtle);
padding: var(--spacing-small);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
color: var(--secondary-600);
width: 44px;
height: 44px;
min-width: 44px;
}
.qa-chat-mode-selector .mode-button:hover {
background: var(--hover-color-alt);
box-shadow: var(--card-shadow-elevated);
transform: translateY(-2px);
}
.qa-chat-mode-selector .mode-button svg {
width: 20px;
height: 20px;
}
/* Override chat input button styles for mode selector */
.qa-chat-floating-input .qa-chat-mode-selector .mode-button,
.qa-chat-dossier-input-wrapper .qa-chat-mode-selector .mode-button {
background: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--card-shadow-subtle);
padding: var(--spacing-small);
color: var(--secondary-600);
width: 44px;
height: 44px;
min-width: 44px;
transition: all 0.2s ease;
}
.qa-chat-floating-input .qa-chat-mode-selector .mode-button:hover,
.qa-chat-dossier-input-wrapper .qa-chat-mode-selector .mode-button:hover {
background: var(--hover-color-alt);
box-shadow: var(--card-shadow-elevated);
transform: translateY(-2px);
}
/* Dossier mode input wrapper with floating selector */
.qa-chat-dossier-input-wrapper {
display: flex;
align-items: center;
gap: var(--spacing-small);
padding: var(--spacing-medium);
border-top: var(--border-subtle);
background: var(--card-background);
}
.qa-chat-dossier-input-wrapper input {
flex: 1;
padding: var(--spacing-small) var(--spacing-medium);
border: var(--input-border);
border-radius: var(--card-border-radius-small);
background: var(--input-background);
color: var(--input-text-color);
font-size: 14px;
transition: var(--input-transition);
}
.qa-chat-dossier-input-wrapper input:focus {
outline: none;
border: var(--input-border-focus);
box-shadow: var(--input-shadow-focus);
}
.qa-chat-dossier-input-wrapper input::placeholder {
color: var(--input-placeholder-color);
}
.qa-chat-dossier-input-wrapper button {
padding: var(--spacing-small) var(--spacing-medium);
background: var(--interactive-accent-color);
color: var(--white);
border: none;
border-radius: var(--card-border-radius-small);
cursor: pointer;
font-size: 16px;
min-width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--input-transition);
}
.qa-chat-dossier-input-wrapper button:hover:not(:disabled) {
background: var(--secondary-700);
}
.qa-chat-dossier-input-wrapper button:disabled {
background: var(--grey-300);
color: var(--font-color-disabled);
cursor: not-allowed;
transform: none;
}
.qa-chat-right-panel {
flex: 2;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--background-color);
}
/* Chat UI customizations for Q&A */
.qa-chat-ui {
flex: 1;
max-width: none;
border-radius: 0;
box-shadow: none;
position: static;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Chat messages area styling */
.qa-chat-ui .editor-chat-messages {
flex: 1;
overflow-y: auto;
min-height: 0;
padding: var(--spacing-medium) var(--spacing-medium) 100px var(--spacing-medium);
background: var(--background-color);
}
/* Individual chat message styling */
.qa-chat-ui .chat-message {
margin-bottom: var(--spacing-medium);
padding: var(--spacing-medium);
border-radius: var(--card-border-radius-medium);
max-width: 85%;
word-wrap: break-word;
}
.qa-chat-ui .chat-message.user {
background: var(--secondary-100);
margin-left: auto;
margin-right: 0;
color: var(--secondary-800);
}
.qa-chat-ui .chat-message.assistant {
background: var(--background-color-alt);
margin-left: 0;
margin-right: auto;
color: var(--ai-message-text-color);
border: var(--border-subtle);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
position: relative;
}
.qa-chat-ui .chat-message.error {
background: rgba(211, 47, 47, 0.1);
border: 1px solid var(--error-red);
color: var(--error-red);
margin-left: 0;
margin-right: auto;
}
.qa-chat-ui .assistant-icon {
position: absolute;
top: var(--spacing-medium);
right: var(--spacing-medium);
width: 20px;
height: 20px;
color: var(--assistant-icon-color);
}
.qa-chat-ui .chat-message-user-name {
font-size: 12px;
color: var(--chat-message-user-name-color);
margin-bottom: var(--spacing-xsmall);
font-weight: 500;
}
.qa-chat-ui .chat-message.assistant .chat-message-user-name {
color: var(--assistant-icon-color);
font-weight: 600;
}
/* Chat input form styling */
.qa-chat-ui .editor-chat-input {
flex-shrink: 0;
padding: var(--spacing-medium);
border-top: var(--border-subtle);
background: var(--card-background);
display: flex;
gap: var(--spacing-small);
align-items: center;
}
.qa-chat-ui .editor-chat-input input {
flex: 1;
padding: var(--spacing-small) var(--spacing-medium);
border: var(--input-border);
border-radius: var(--card-border-radius-small);
background: var(--input-background);
color: var(--input-text-color);
font-size: 14px;
transition: var(--input-transition);
}
.qa-chat-ui .editor-chat-input input:focus {
outline: none;
border: var(--input-border-focus);
box-shadow: var(--input-shadow-focus);
}
.qa-chat-ui .editor-chat-input input::placeholder {
color: var(--input-placeholder-color);
}
.qa-chat-ui .editor-chat-input button {
padding: var(--spacing-small) var(--spacing-medium);
background: var(--interactive-accent-color);
color: var(--white);
border: none;
border-radius: var(--card-border-radius-small);
cursor: pointer;
font-size: 16px;
min-width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--input-transition);
}
.qa-chat-ui .editor-chat-input button:disabled {
background: var(--grey-300);
color: var(--font-color-disabled);
cursor: not-allowed;
transform: none;
}
/* Full-screen chat mode */
.qa-chat-fullscreen {
display: flex;
gap: var(--spacing-medium);
height: 100%;
padding: var(--spacing-medium);
}
.qa-chat-fullscreen-content {
flex: 1;
position: relative; /* Create positioning context for floating input */
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Headers removed for chat mode - collection name shown in chat bubbles instead */
/* Full-screen ChatUI styling */
.qa-chat-ui-fullscreen {
flex: 1;
background: var(--card-background);
border-radius: var(--card-border-radius-medium);
border: var(--card-border);
box-shadow: var(--card-shadow-elevated);
overflow: hidden;
margin: 0; /* No margin in fullscreen */
display: flex;
flex-direction: column;
}
.editor-chat-fullscreen {
height: 100%;
}
.editor-chat-messages-fullscreen {
padding: var(--spacing-medium) var(--spacing-large) 100px var(--spacing-large);
overflow-x: visible;
overflow-y: auto;
}
.editor-chat-fullscreen .chat-message {
max-width: 50%;
margin-bottom: var(--spacing-medium);
padding: var(--spacing-small) var(--spacing-medium);
font-size: 14px;
line-height: 1.5;
}
.editor-chat-fullscreen .editor-chat-input {
padding: var(--spacing-large);
border-top: var(--border-subtle);
}
.editor-chat-fullscreen .editor-chat-input input {
font-size: 16px;
padding: var(--spacing-medium) var(--spacing-large);
}
.editor-chat-fullscreen .editor-chat-input button {
padding: var(--spacing-medium) var(--spacing-large);
font-size: 18px;
min-width: 50px;
height: 50px;
}
/* Floating input bar for full-screen chat mode */
.qa-chat-floating-input {
position: absolute;
bottom: var(--spacing-large);
left: var(--spacing-large);
right: var(--spacing-large);
display: flex;
align-items: center;
gap: var(--spacing-small);
background: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--card-shadow-elevated);
padding: var(--spacing-small);
max-width: 600px;
margin: 0 auto; /* Center horizontally */
z-index: 100;
}
.qa-floating-input {
flex: 1;
padding: var(--spacing-small) var(--spacing-medium);
border: var(--input-border);
border-radius: var(--card-border-radius-medium);
background: var(--input-background);
color: var(--input-text-color);
font-size: 14px;
transition: var(--input-transition);
min-height: 40px;
}
.qa-floating-input:focus {
outline: none;
border: var(--input-border-focus);
box-shadow: var(--input-shadow-focus);
}
.qa-floating-input::placeholder {
color: var(--input-placeholder-color);
}
.qa-floating-submit {
flex-shrink: 0;
width: 40px;
height: 40px;
padding: 0;
background: var(--interactive-accent-color);
color: var(--white);
border: none;
border-radius: var(--card-border-radius-medium);
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--input-transition);
}
.qa-floating-submit:hover:not(:disabled) {
background: var(--secondary-700);
}
.qa-floating-submit:disabled {
background: var(--grey-300);
color: var(--font-color-disabled);
cursor: not-allowed;
transform: none;
}
/* Hide default input in full-screen mode */
.editor-chat-fullscreen .editor-chat-input {
display: none;
}
/* Chat message with citations styling */
.chat-message-with-citations {
max-width: 85%;
}
.chat-message-content {
flex: 1;
}
.chat-message-sources {
margin-top: var(--spacing-medium);
padding-top: var(--spacing-medium);
border-top: var(--border-subtle);
}
.qa-citation-sources-inline {
background: var(--background-color-alt);
border-radius: var(--card-border-radius-small);
padding: var(--spacing-small);
margin-top: var(--spacing-small);
}
.qa-citation-sources-inline h4 {
font-size: 14px;
margin: 0 0 var(--spacing-small) 0;
color: var(--font-color-muted);
}
/* Empty state for right panel */
.qa-chat-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: var(--spacing-large);
text-align: center;
color: var(--font-color-muted);
}
.qa-chat-empty-state .empty-state-icon {
margin-bottom: var(--spacing-medium);
color: var(--font-color-muted);
}
.qa-chat-empty-state h3 {
margin: 0 0 var(--spacing-small) 0;
color: var(--font-color);
}
.qa-chat-empty-state p {
margin: 0;
max-width: 400px;
}
/* Answer display */
.qa-chat-answer {
flex: 1;
overflow-y: auto;
padding: var(--spacing-medium);
display: flex;
flex-direction: column;
gap: var(--spacing-medium);
}
.qa-chat-answer-content h3 {
margin: 0 0 var(--spacing-medium) 0;
color: var(--font-color);
border-bottom: var(--border-subtle);
padding-bottom: var(--spacing-small);
}
.qa-answer-text {
background: var(--background-color);
padding: var(--spacing-medium);
border-radius: var(--border-radius-medium);
border: var(--border-subtle);
line-height: 1.6;
color: var(--font-color);
white-space: pre-wrap;
}
/* Sources display */
.qa-chat-sources h4 {
margin: 0 0 var(--spacing-small) 0;
color: var(--font-color);
font-size: 1.1rem;
}
.qa-sources-list {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.qa-source-item {
background: var(--background-color);
border: var(--border-subtle);
border-radius: var(--border-radius-medium);
padding: var(--spacing-medium);
}
.qa-source-header {
display: flex;
align-items: center;
gap: var(--spacing-small);
margin-bottom: var(--spacing-small);
}
.qa-source-icon {
color: var(--klee);
flex-shrink: 0;
}
.qa-source-title {
flex: 1;
font-weight: 600;
color: var(--font-color);
}
.qa-source-score {
font-size: 0.8rem;
color: var(--font-color-muted);
background: var(--secondary);
padding: 2px 6px;
border-radius: 3px;
}
.qa-source-content {
color: var(--font-color);
font-size: 0.9rem;
line-height: 1.5;
padding-left: var(--spacing-large);
}
/* Citations */
.qa-chat-citations h4 {
margin: 0 0 var(--spacing-small) 0;
color: var(--font-color);
font-size: 1.1rem;
}
/* Error state */
.qa-chat-error {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
padding: var(--spacing-large);
text-align: center;
color: var(--error-red);
}
/* Responsive design */
@media (max-width: 768px) {
.qa-chat-container {
padding: var(--spacing-small);
}
.qa-chat-main.qa-chat-dossier {
flex-direction: column;
}
.qa-chat-dossier .qa-chat-left-panel {
max-width: none;
min-width: auto;
height: 40vh;
margin-right: 0;
margin-bottom: var(--spacing-small);
}
.qa-chat-dossier .qa-chat-right-panel {
height: 60vh;
}
.qa-chat-header {
padding: var(--spacing-small);
}
.qa-chat-header h2 {
font-size: 1.1rem;
}
/* Full screen mode on mobile - single column, no info panel */
.qa-chat-fullscreen {
flex-direction: column;
padding: 0;
gap: 0;
}
.qa-chat-fullscreen-content {
flex: 1;
}
.qa-chat-ui-fullscreen {
border-radius: 0;
border: none;
}
.qa-chat-ui .editor-chat-messages {
padding: var(--spacing-small) var(--spacing-small) 120px var(--spacing-small);
}
.qa-chat-ui .editor-chat-input {
padding: var(--spacing-small);
}
.qa-chat-ui .chat-message {
max-width: 95%;
padding: var(--spacing-small);
margin-bottom: var(--spacing-small);
}
.editor-chat-fullscreen .chat-message {
max-width: 80%;
padding: var(--spacing-small);
font-size: 14px;
}
.editor-chat-messages-fullscreen {
padding: var(--spacing-small) var(--spacing-medium) 120px var(--spacing-medium);
}
.qa-chat-floating-input {
bottom: var(--spacing-medium);
left: var(--spacing-medium);
right: var(--spacing-medium);
max-width: none;
}
}
@media (max-width: 480px) {
.qa-chat-container {
padding: var(--spacing-xsmall);
}
.qa-chat-dossier .qa-chat-left-panel {
height: 50vh;
margin-right: 0;
margin-bottom: var(--spacing-xsmall);
}
.qa-chat-dossier .qa-chat-right-panel {
height: 50vh;
}
.qa-answer-text,
.qa-source-item {
padding: var(--spacing-small);
}
.qa-chat-header {
padding: var(--spacing-xsmall);
}
.qa-chat-ui .editor-chat-messages {
padding: var(--spacing-xsmall) var(--spacing-xsmall) 140px var(--spacing-xsmall);
}
.qa-chat-ui .editor-chat-input {
padding: var(--spacing-xsmall);
}
.qa-chat-ui .editor-chat-input input {
font-size: 16px; /* Prevents zoom on iOS */
}
.editor-chat-fullscreen .chat-message {
max-width: 85%;
padding: var(--spacing-xsmall) var(--spacing-small);
font-size: 14px;
}
.editor-chat-messages-fullscreen {
padding: var(--spacing-xsmall) var(--spacing-small) 140px var(--spacing-small);
}
.qa-chat-mode-selector .mode-button {
width: 40px;
height: 40px;
}
.qa-chat-mode-selector .mode-button svg {
width: 18px;
height: 18px;
}
.qa-chat-dossier-input-wrapper {
padding: var(--spacing-small);
gap: var(--spacing-xsmall);
}
.qa-chat-floating-input {
bottom: var(--spacing-small);
max-width: 400px;
width: calc(100% - var(--spacing-small) * 2);
padding: var(--spacing-xsmall);
gap: var(--spacing-xsmall);
}
.qa-floating-input {
font-size: 16px; /* Prevents zoom on iOS */
min-height: 36px;
padding: var(--spacing-xsmall) var(--spacing-small);
}
.qa-floating-submit {
width: 36px;
height: 36px;
font-size: 14px;
}
}
/* Q&A Collection Info Panel */
.qa-collection-info {
background: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
box-shadow: var(--card-shadow-elevated);
padding: var(--spacing-large);
overflow: hidden;
}
.qa-collection-info-header {
display: flex;
align-items: center;
gap: var(--spacing-small);
margin-bottom: var(--spacing-medium);
}
.qa-collection-info-icon {
width: 24px;
height: 24px;
color: var(--secondary-600);
flex-shrink: 0;
}
.qa-collection-info-header h3 {
margin: 0;
color: var(--font-color);
font-size: 1.3rem;
font-weight: 600;
}
.qa-collection-info-description {
color: var(--font-color);
line-height: 1.6;
margin-bottom: var(--spacing-large);
padding-bottom: var(--spacing-medium);
border-bottom: var(--border-subtle);
}
.qa-collection-info-documents {
color: var(--font-color);
}
.qa-collection-info-documents h4 {
margin: 0 0 var(--spacing-medium) 0;
font-size: 1rem;
font-weight: 600;
color: var(--font-color);
}
.qa-collection-info-documents ul {
list-style: none;
padding: 0;
margin: 0;
max-height: 300px;
overflow-y: auto;
}
.qa-collection-info-documents li {
display: flex;
align-items: center;
gap: var(--spacing-small);
padding: var(--spacing-small) 0;
border-bottom: var(--border-subtle);
}
.qa-collection-info-documents li:last-child {
border-bottom: none;
}
.qa-collection-info-documents .document-icon {
width: 18px;
height: 18px;
color: var(--klee);
flex-shrink: 0;
}
.qa-collection-info-documents span {
font-size: 0.9rem;
line-height: 1.4;
word-break: break-word;
}
/* Dossier mode - full panel */
.qa-collection-info-dossier {
height: 100%;
display: flex;
flex-direction: column;
}
.qa-collection-info-dossier .qa-collection-info-documents ul {
flex: 1;
max-height: none;
}
/* Chat mode - compact card panel */
.qa-collection-info-chat {
width: 300px;
min-width: 250px;
max-width: 350px;
padding: var(--spacing-medium);
display: flex;
flex-direction: column;
height: 100%;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.qa-collection-info-chat:hover {
box-shadow: var(--card-hover-shadow);
transform: var(--card-hover-transform);
}
.qa-collection-info-chat .qa-collection-info-header h3 {
font-size: 1.1rem;
}
.qa-collection-info-chat .qa-collection-info-description {
font-size: 0.85rem;
margin-bottom: var(--spacing-medium);
max-height: 80px;
overflow-y: auto;
}
.qa-collection-info-chat .qa-collection-info-documents h4 {
font-size: 0.9rem;
margin-bottom: var(--spacing-small);
}
.qa-collection-info-chat .qa-collection-info-documents {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.qa-collection-info-chat .qa-collection-info-documents ul {
flex: 1;
overflow-y: auto;
font-size: 0.85rem;
}
/* Scrollbar styling for info panel */
.qa-collection-info-documents ul::-webkit-scrollbar,
.qa-collection-info-description::-webkit-scrollbar {
width: 6px;
}
.qa-collection-info-documents ul::-webkit-scrollbar-track,
.qa-collection-info-description::-webkit-scrollbar-track {
background: var(--scrollbar-track-color);
border-radius: 3px;
}
.qa-collection-info-documents ul::-webkit-scrollbar-thumb,
.qa-collection-info-description::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb-color);
border-radius: 3px;
}
.qa-collection-info-documents ul::-webkit-scrollbar-thumb:hover,
.qa-collection-info-description::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover-color);
}
/* Hide collection info on mobile */
@media (max-width: 768px) {
.qa-collection-info {
display: none;
}
}
/* Adjust fullscreen layout for medium screens */
@media (max-width: 1200px) {
.qa-chat-fullscreen {
padding: var(--spacing-small);
gap: var(--spacing-small);
}
.qa-collection-info-chat {
width: 250px;
min-width: 200px;
}
}
/* Further adjustments for smaller screens before mobile */
@media (max-width: 900px) {
.qa-collection-info-chat {
width: 200px;
min-width: 180px;
padding: var(--spacing-small);
}
.qa-collection-info-chat .qa-collection-info-header h3 {
font-size: 1rem;
}
.qa-collection-info-chat .qa-collection-info-description {
font-size: 0.8rem;
}
.qa-collection-info-chat .qa-collection-info-documents ul {
font-size: 0.8rem;
}
}
/* Form input overrides for create generator page */
.description-input {
background-color: var(--background-color);
color: var(--font-color);
resize: none;
overflow: hidden;
}
h3 {
color: var(--font-color-h);
font-weight: 600;
margin-bottom: 0 !important;
margin-top: 20px;
text-align: left;
}
.list-group {
border-radius: 8px;
padding: var(--spacing-small, 16px);
box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.4));
margin-bottom: 20px;
margin-top: 20px;
}
.list-group-item {
background-color: transparent;
border: none;
color: var(--font-color);
padding: var(--spacing-medium, 16px);
}
.list-group-item:last-child {
border-bottom: none;
}
.list-group-item code {
background-color: rgba(0,0,0,0.2);
padding: 0.1em 0.4em;
border-radius: 3px;
font-size: 0.85em;
}
.list-group-item .btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.list-group-item .btn-outline-secondary {
color: var(--secondary);
border-color: var(--secondary);
padding: 0.25rem 0.5rem;
}
.list-group-item .btn-outline-secondary:hover {
background-color: var(--secondary);
color: var(--dunkelgruen);
}
.list-group-item .btn-outline-danger {
color: var(--sonne);
border-color: var(--sonne);
}
.list-group-item .btn-outline-danger:hover {
background-color: var(--sonne);
color: var(--anthrazit);
}
.add-field-button {
margin-top: var(--spacing-large, 24px);
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--button-padding, 0.375rem 0.75rem);
border: none;
border-radius: var(--button-border-radius, 0.25rem);
font-size: var(--button-font-size, 1rem);
font-weight: 400;
line-height: 1.5;
color: var(--weiß);
background-color: var(--primary);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
user-select: none;
transition: background-color var(--button-transition, 0.15s ease-in-out), transform var(--button-transition, 0.15s ease-in-out);
}
.add-field-button:hover {
background-color: var(--klee);
transform: scale(1.01);
}
.add-field-button:active {
transform: scale(0.98);
}
.review-container {
padding: var(--spacing-large, 24px);
margin-top: var(--spacing-large, 24px);
border: var(--border-subtle);
border-radius: 8px;
}
.review-section {
margin-bottom: var(--spacing-large, 24px);
}
.review-section:last-child {
margin-bottom: 0;
}
.review-section h4 {
color: var(--font-color-h);
margin-bottom: var(--spacing-medium, 16px);
font-weight: 600;
}
.review-prompt-display {
padding: var(--spacing-medium, 16px);
border-radius: 6px;
border: var(--border-subtle);
white-space: pre-wrap;
word-wrap: break-word;
color: var(--font-color);
font-family: monospace;
font-size: 0.9em;
}
.add-field-controls {
margin-top: var(--spacing-large, 24px);
}
.mode-selection-container {
display: flex;
gap: var(--spacing-large, 24px);
margin-bottom: var(--spacing-xlarge, 32px);
justify-content: center;
flex-wrap: wrap;
}
.mode-card {
flex: 1;
min-width: 250px;
max-width: 400px;
padding: var(--spacing-large, 24px);
border: 2px solid var(--border-subtle);
border-radius: var(--border-radius-large, 8px);
background-color: transparent;
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
text-align: center;
position: relative;
}
.mode-card:hover {
transform: translateY(-4px);
border-color: var(--secondary);
box-shadow: var(--shadow-md);
}
.mode-card.selected {
border-color: var(--primary);
background-color: rgba(var(--primary-rgb, 0, 85, 56), 0.1);
box-shadow: var(--shadow-md);
}
.mode-card:focus-visible {
outline: 2px solid var(--himmel);
outline-offset: 2px;
}
.mode-card__icon {
font-size: 2rem;
margin-bottom: var(--spacing-medium, 16px);
}
.mode-card__title {
color: var(--font-color-h);
font-weight: 600;
font-size: 1.25rem;
margin-bottom: var(--spacing-small, 12px);
}
.mode-card__description {
color: var(--font-color);
font-size: 0.9rem;
line-height: 1.4;
}
.success-screen-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--spacing-xlarge, 40px) var(--spacing-medium, 20px);
margin-top: var(--spacing-large, 24px);
border-radius: var(--border-radius-large, 8px);
background-color: var(--hintergrund-hell);
border: 1px solid var(--hintergrund-mittel);
box-shadow: var(--shadow-md);
}
.success-icon {
font-size: 4rem;
color: var(--klee);
margin-bottom: var(--spacing-large, 24px);
}
.success-screen-container h1 {
color: var(--font-color-h);
font-size: 2rem;
margin-bottom: var(--spacing-small, 12px);
}
.success-message {
font-size: 1.1rem;
color: var(--font-color);
margin-bottom: var(--spacing-xlarge, 32px);
max-width: 500px;
}
.success-message strong {
color: var(--primary);
font-weight: 600;
}
.success-actions {
display: flex;
flex-direction: column;
gap: var(--spacing-medium, 16px);
width: 100%;
max-width: 350px;
}
@media (min-width: 576px) {
.success-actions {
flex-direction: row;
justify-content: center;
}
.success-actions .button {
flex: 1;
}
}
.field-editor-assistant {
border: none;
}
.field-editor-assistant h5 {
color: var(--font-color-h, var(--secondary));
margin-top: 20px;
margin-bottom: var(--spacing-medium, 16px);
font-weight: 600;
}
/* Form-group spacing removed - FormInput components handle their own spacing */
/* Input styles removed - now using FormInput components with modern styling */
.type-selector-container {
display: flex;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.3));
width: fit-content;
padding-top: 10px;
gap: 10px;
}
.type-selector-button {
flex: 1;
padding: var(--spacing-small, 12px) var(--spacing-medium, 16px);
border: none;
background-color: transparent;
color: var(--font-color, var(--secondary));
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
text-align: center;
border-radius: 0;
font-weight: 500;
}
.type-selector-button:not(:last-child) {
border-right: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.3));
}
.type-selector-button:hover {
background-color: rgba(var(--weiß-rgb, 255, 255, 255), 0.05);
}
.type-selector-button.active {
background-color: var(--klee, #8ABD24) !important;
font-weight: 600;
}
.field-editor-assistant .form-check {
padding-left: 0;
margin-bottom: var(--spacing-small, 12px);
}
.field-editor-assistant .form-check-input {
margin-right: var(--spacing-xsmall, 8px);
vertical-align: middle;
margin-top: 0;
width: 1em;
height: 1em;
}
.field-editor-assistant .form-check-label {
display: inline;
margin-bottom: 0;
vertical-align: middle;
}
.field-editor-assistant code {
background-color: var(--anthrazit, #222);
color: var(--font-color, var(--secondary));
padding: var(--spacing-xxsmall, 4px) var(--spacing-xsmall, 8px);
border-radius: 4px;
font-family: monospace;
font-size: 0.9em;
border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
}
.field-editor-assistant .help-text {
font-size: 0.9em;
color: var(--weiß);
opacity: 1;
margin-top: var(--spacing-xsmall, 8px);
}
.field-editor-assistant .alert-danger {
background-color: rgba(var(--sonne-rgb, 255, 241, 122), 0.1);
border: 1px solid var(--sonne, #FFF17A);
color: var(--sonne, #FFF17A);
border-radius: 4px;
padding: var(--spacing-small, 12px);
margin-bottom: var(--spacing-medium, 16px);
}
.field-editor-assistant .btn {
background-color: var(--primary, #006A4E);
border: 2px solid var(--weiß, #ffffff);
color: var(--weiß, #ffffff);
padding: 10px 20px;
border-radius: 10px;
font-weight: 600;
transition: background-color 0.2s ease, transform 0.1s ease, border-color 0.2s ease, color 0.2s ease;
}
.field-editor-assistant .btn:hover {
background-color: var(--klee, #008939);
border-color: var(--weiß, #ffffff);
color: var(--weiß, #ffffff);
}
.field-editor-assistant .btn:active {
transform: translateY(1px);
}
.field-editor-assistant .btn-primary {
background-color: var(--klee, #008939);
border-color: var(--klee, #008939);
color: var(--weiß, #ffffff);
}
.field-editor-assistant .btn-primary:hover {
border-color: var(--secondary);
}
.field-editor-assistant .btn-secondary {
background-color: transparent;
border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.3));
color: var(--font-color, var(--secondary));
}
.field-editor-assistant .btn-secondary:hover {
background-color: rgba(var(--weiß-rgb, 255, 255, 255), 0.1);
border-color: var(--weiß);
color: var(--weiß);
}
.toggle-switch-group {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-large, 24px);
}
.toggle-switch-group .form-check-label {
margin-bottom: 0;
margin-right: var(--spacing-medium, 16px);
display: inline;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 28px;
background-color: var(--border-subtle, rgba(255, 255, 255, 0.2));
border-radius: 14px;
cursor: pointer;
border: none;
padding: 0;
transition: background-color 0.3s ease;
}
.toggle-switch-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
background-color: var(--weiß, #ffffff);
border-radius: 50%;
transition: transform 0.3s ease;
}
.toggle-switch.checked {
background-color: var(--grashalm, #8ABD24);
}
.toggle-switch.checked .toggle-switch-thumb {
transform: translateX(22px);
}
.field-editor-assistant .action-button-container {
display: flex;
justify-content: center;
gap: var(--spacing-medium, 16px);
margin-top: var(--spacing-large, 24px);
}
/* Document Selector Component Styles */
.document-selector {
margin: var(--spacing-medium) 0;
}
.document-selector-loading {
display: flex;
align-items: center;
gap: var(--spacing-small);
padding: var(--spacing-medium);
color: var(--text-muted-color);
}
/* Selected Documents */
.selected-documents {
margin-bottom: var(--spacing-medium);
}
.selected-documents h4 {
color: var(--font-color);
margin-bottom: var(--spacing-small);
font-size: 1.1rem;
font-weight: 600;
}
.selected-documents-list {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.selected-document-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-small) var(--spacing-medium);
background: var(--background-accent-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
transition: all 0.2s ease;
}
.selected-document-item:hover {
border-color: var(--primary);
background: var(--background-hover-color);
}
.selected-document-item .document-info {
flex: 1;
}
.selected-document-item .document-title {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
font-weight: 500;
color: var(--font-color);
margin-bottom: var(--spacing-xxsmall);
}
.selected-document-item .document-meta {
display: flex;
gap: var(--spacing-small);
color: var(--text-muted-color);
font-size: 0.9rem;
}
.remove-document-button {
background: none;
border: none;
color: var(--text-muted-color);
cursor: pointer;
padding: var(--spacing-xsmall);
border-radius: var(--border-radius-small);
transition: all 0.2s ease;
}
.remove-document-button:hover {
color: var(--error-color);
background: var(--error-background-color);
}
/* Add Documents Section */
.add-documents-section {
margin-bottom: var(--spacing-medium);
}
.no-documents-message {
margin-top: var(--spacing-medium);
padding: var(--spacing-medium);
background: var(--background-accent-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
text-align: center;
}
.no-documents-message p {
margin: 0 0 var(--spacing-small) 0;
color: var(--font-color);
}
.no-documents-message .help-text {
color: var(--text-muted-color);
font-size: 0.9rem;
}
/* Document Selection List */
.document-selection-list {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
background: var(--background-color);
overflow: hidden;
margin-top: var(--spacing-medium);
}
.document-list-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-medium);
background: var(--background-accent-color);
border-bottom: 1px solid var(--border-color);
}
.document-list-header h4 {
margin: 0;
color: var(--font-color);
font-size: 1.1rem;
font-weight: 600;
}
.documents-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--spacing-small);
padding: var(--spacing-medium);
max-height: 400px;
overflow-y: auto;
}
/* Document Option */
.document-option {
padding: var(--spacing-medium);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
background: var(--background-color);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.document-option:hover {
border-color: var(--primary);
background: var(--background-hover-color);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.document-option.selected {
border-color: var(--primary);
background: var(--primary-light);
}
.document-option-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--spacing-small);
}
.document-option .document-title {
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
font-weight: 500;
color: var(--font-color);
flex: 1;
}
.selected-indicator {
color: var(--primary);
font-size: 1.2rem;
margin-left: var(--spacing-small);
}
.document-option .document-details {
display: flex;
gap: var(--spacing-small);
color: var(--text-muted-color);
font-size: 0.9rem;
margin-bottom: var(--spacing-xsmall);
}
.document-option .document-filename {
color: var(--text-muted-color);
font-size: 0.85rem;
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Document Selector Help */
.document-selector-help {
margin-top: var(--spacing-medium);
padding: var(--spacing-medium);
background: var(--background-accent-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
}
.document-selector-help .help-text {
margin: 0;
color: var(--text-muted-color);
font-size: 0.9rem;
line-height: 1.4;
}
/* Status Icons */
.document-option .text-green-500,
.selected-document-item .text-green-500 {
color: var(--success-color);
}
.document-option .text-yellow-500,
.selected-document-item .text-yellow-500 {
color: var(--warning-color);
}
.document-option .text-red-500,
.selected-document-item .text-red-500 {
color: var(--error-color);
}
.document-option .text-gray-400,
.selected-document-item .text-gray-400 {
color: var(--text-muted-color);
}
/* Responsive Design */
@media (max-width: 768px) {
.documents-grid {
grid-template-columns: 1fr;
max-height: 300px;
}
.selected-document-item .document-meta {
flex-direction: column;
gap: var(--spacing-xxsmall);
}
.document-option .document-details {
flex-direction: column;
gap: var(--spacing-xxsmall);
}
}
.custom-generator-actions {
display: flex;
gap: var(--spacing-small);
align-items: center;
margin-bottom: var(--spacing-medium);
}
.custom-generator-button {
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-xsmall);
font-size: 1.2rem;
border-radius: var(--border-radius-medium);
width: 32px;
height: 32px;
transition: all 0.2s ease;
background-color: var(--background-color-alt);
}
.custom-generator-button-open {
color: var(--primary);
border: 1px solid var(--primary);
}
.custom-generator-button-open:hover {
color: var(--weiß);
background-color: var(--primary);
border-color: var(--primary);
}
.custom-generator-button-delete {
color: var(--color-red, #ff4d4d);
border: 1px solid var(--color-red, #ff4d4d);
}
.custom-generator-button-delete:hover {
color: var(--weiß);
background-color: var(--color-red, #ff4d4d);
border-color: var(--color-red, #ff4d4d);
}
[data-theme="dark"] .custom-generator-button {
background-color: var(--background-color-alt);
}
[data-theme="dark"] .custom-generator-button-open {
color: var(--secondary);
border-color: var(--secondary);
}
[data-theme="dark"] .custom-generator-button-open:hover {
color: var(--background-color);
background-color: var(--secondary);
border-color: var(--secondary);
}
[data-theme="dark"] .custom-generator-button-delete {
color: var(--color-red, #ff4d4d);
border-color: var(--color-red, #ff4d4d);
}
[data-theme="dark"] .custom-generator-button-delete:hover {
color: var(--background-color);
background-color: var(--color-red, #ff4d4d);
border-color: var(--color-red, #ff4d4d);
}
.custom-generator-button-delete .spinner {
width: 16px;
height: 16px;
border-width: 2px;
}
.generator-details-content {
display: grid;
gap: var(--spacing-large);
}
.generator-info-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--spacing-small) var(--spacing-medium);
align-items: start;
}
.generator-info-label {
color: var(--font-color-h3);
font-weight: 600;
font-size: 0.9rem;
}
.generator-info-value {
color: var(--font-color);
font-size: 0.9rem;
}
.generator-form-fields {
display: grid;
gap: var(--spacing-small);
}
.field-item {
background: var(--background-color-alt);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-medium);
padding: var(--spacing-small);
}
.field-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-xsmall);
}
.field-name {
font-weight: 600;
color: var(--font-color-h3);
}
.field-required {
font-size: 0.8rem;
color: var(--font-color-subtle);
padding: var(--spacing-xxsmall) var(--spacing-xsmall);
background: var(--background-color);
border-radius: var(--border-radius-medium);
}
.field-details {
display: grid;
gap: var(--spacing-xxsmall);
font-size: 0.9rem;
color: var(--font-color-subtle);
}
.prompt-container {
background: var(--background-color-alt);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-medium);
padding: var(--spacing-medium);
}
.prompt-content {
font-family: 'PT Sans', Arial, sans-serif;
font-size: 0.9rem;
line-height: 1.4;
white-space: pre-wrap;
word-break: break-word;
color: var(--font-color);
}
.review-section {
margin-bottom: var(--spacing-large);
}
.review-section h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: var(--spacing-medium);
color: var(--font-color-h3);
}
.review-prompt-display {
background-color: var(--background-color-alt);
padding: var(--spacing-medium);
border-radius: var(--border-radius-medium);
border: 1px solid var(--border-subtle);
font-family: monospace;
font-size: 0.9rem;
line-height: 1.4;
}
.list-group {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-medium);
overflow: hidden;
}
/* Generator Documents Section */
.generator-documents-section {
margin-top: var(--spacing-large);
}
.generator-documents-section .section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-medium);
}
.generator-documents-section h4 {
margin: 0;
color: var(--font-color);
font-size: 1.1rem;
font-weight: 600;
}
.generator-documents-section h5 {
margin: 0 0 var(--spacing-medium) 0;
color: var(--font-color);
font-size: 1rem;
font-weight: 600;
}
/* Documents Loading */
.documents-loading {
display: flex;
align-items: center;
gap: var(--spacing-small);
padding: var(--spacing-medium);
color: var(--text-muted-color);
}
/* Current Documents */
.current-documents .documents-description {
margin-bottom: var(--spacing-medium);
color: var(--font-color);
}
.current-documents .documents-list {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.document-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-medium);
background: var(--background-accent-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
transition: all 0.2s ease;
}
.document-item:hover {
border-color: var(--primary);
background: var(--background-hover-color);
}
.document-item .document-info {
flex: 1;
}
.document-item .document-title {
margin-bottom: var(--spacing-xsmall);
color: var(--font-color);
}
.document-item .document-meta {
display: flex;
gap: var(--spacing-medium);
color: var(--text-muted-color);
font-size: 0.9rem;
}
.document-item .document-meta span {
white-space: nowrap;
}
.remove-document-btn {
background: none;
border: none;
color: var(--text-muted-color);
cursor: pointer;
padding: var(--spacing-small);
border-radius: var(--border-radius-small);
transition: all 0.2s ease;
}
.remove-document-btn:hover {
color: var(--error-color);
background: var(--error-background-color);
}
.remove-document-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* No Documents State */
.no-documents {
padding: var(--spacing-large);
text-align: center;
background: var(--background-accent-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
color: var(--text-muted-color);
}
.no-documents p {
margin: 0;
line-height: 1.5;
}
/* Document Management Interface */
.document-management {
margin-top: var(--spacing-large);
padding: var(--spacing-large);
background: var(--background-accent-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
}
/* Responsive Design for Document Section */
@media (max-width: 768px) {
.generator-documents-section .section-header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-small);
}
.document-item {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-small);
}
.document-item .document-meta {
flex-direction: column;
gap: var(--spacing-xsmall);
}
.remove-document-btn {
align-self: flex-end;
}
}
.empty-editor-container.with-header {
padding-top: 180px;
}
.empty-editor-container .base-container {
max-width: 100%;
padding: 0 20px;
margin: 0 auto;
}
.empty-editor-container .base-container.editing-mode {
display: flex;
justify-content: center;
min-height: calc(100vh - 140px);
}
.empty-editor-container .display-container {
max-width: 816px;
width: 100%;
background: var(--background-color-pure);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border-radius: 8px;
padding: 25px;
}
.antrag-edit-form {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
background-color: var(--background-color);
border-radius: 8px;
padding: var(--spacing-xlarge);
box-shadow: var(--shadow-md);
margin-bottom: var(--spacing-xlarge);
}
.antrag-edit-form-header {
margin-bottom: var(--spacing-medium);
}
.antrag-edit-form-header h2 {
margin: 0 0 var(--spacing-medium) 0;
color: var(--font-color-h);
position: relative;
padding-bottom: var(--spacing-small);
}
.antrag-edit-form-header h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 3px;
background-color: var(--klee);
border-radius: 2px;
}
.antrag-edit-form .form-group {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.antrag-edit-form label {
font-weight: 600;
color: var(--font-color);
font-size: 0.95em;
}
.antrag-edit-form .markdown-help {
background-color: var(--background-color-alt);
border: 1px solid var(--border-subtle);
border-radius: 4px;
padding: var(--spacing-small);
margin-bottom: var(--spacing-small);
font-size: 0.85em;
}
.antrag-edit-form .markdown-help p {
margin: 0;
color: var(--font-color);
opacity: 0.8;
}
.antrag-edit-form .markdown-help code {
background-color: rgba(0, 0, 0, 0.05);
padding: 2px 4px;
border-radius: 3px;
font-family: monospace;
font-size: 0.95em;
}
.antrag-edit-form .input-field,
.antrag-edit-form .textarea-field {
padding: var(--spacing-medium);
border: 1px solid var(--border-subtle);
border-radius: 4px;
background-color: var(--background-color-alt);
color: var(--font-color);
font-family: 'PT Sans', Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.antrag-edit-form .input-field:focus,
.antrag-edit-form .textarea-field:focus {
outline: none;
border-color: var(--klee);
box-shadow: 0 0 0 3px rgba(0, 137, 57, 0.15);
}
.antrag-edit-form .textarea-field {
min-height: 120px;
resize: vertical;
}
.antrag-edit-form input::placeholder,
.antrag-edit-form textarea::placeholder {
color: var(--font-color);
opacity: 0.5;
}
.antrag-edit-form .quill-editor-container {
display: flex;
flex-direction: column;
border-radius: 4px;
overflow: hidden;
background-color: var(--background-color-alt);
}
.antrag-edit-form .quill-editor {
min-height: 300px;
}
.antrag-edit-form .ql-toolbar.ql-snow {
border: none;
border-bottom: 1px solid var(--border-subtle);
padding: var(--spacing-small);
background-color: var(--background-color);
}
.antrag-edit-form .ql-container.ql-snow {
border: none;
font-family: 'PT Sans', Arial, sans-serif;
font-size: 1rem;
color: var(--font-color);
}
.antrag-edit-form .ql-editor {
padding: var(--spacing-medium) !important;
min-height: 300px;
line-height: 1.6;
background-color: var(--background-color);
}
.antrag-edit-form .ql-editor p,
.antrag-edit-form .ql-editor ul,
.antrag-edit-form .ql-editor ol,
.antrag-edit-form .ql-editor blockquote {
margin-bottom: var(--spacing-medium) !important;
font-size: 1rem !important;
}
.antrag-edit-form .ql-editor .ql-syntax {
background-color: var(--background-color);
border-radius: 3px;
padding: var(--spacing-small);
font-family: monospace;
white-space: pre-wrap;
}
.antrag-edit-form-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-medium);
margin-top: var(--spacing-large);
}
@media (max-width: 768px) {
.antrag-edit-form {
padding: var(--spacing-large) var(--spacing-medium);
}
.antrag-edit-form-actions {
flex-direction: column-reverse;
gap: var(--spacing-small);
}
.antrag-edit-form-actions button {
width: 100%;
}
.antrag-edit-form .markdown-help {
font-size: 0.8em;
}
.antrag-edit-form .markdown-help code {
font-size: 0.9em;
padding: 1px 2px;
}
}
.error-message {
background-color: rgba(220, 53, 69, 0.1);
border-left: 3px solid var(--error-color, #dc3545);
color: var(--error-color, #dc3545);
padding: var(--spacing-small) var(--spacing-medium);
margin-top: var(--spacing-small);
font-size: 0.9em;
border-radius: 0 4px 4px 0;
}
.antrag-websearch-toggle {
margin: var(--spacing-medium) 0;
padding: var(--spacing-small);
border-radius: 6px;
background-color: var(--background-color-alt);
}
.antrag-websearch-toggle .feature-description {
color: var(--font-color);
opacity: 0.8;
font-size: 0.9em;
}
.antrag-sources {
margin-top: var(--spacing-large);
padding: var(--spacing-medium);
background-color: var(--background-color-alt);
border-radius: 6px;
border-left: 3px solid var(--klee);
}
.antrag-source-item {
margin-bottom: var(--spacing-small);
font-size: 0.9em;
}
.antrag-source-link {
color: var(--klee);
text-decoration: none;
}
.collab-editor-page html, body {
overflow: hidden; /* Prevent scrolling on the main page when collab editor is active */
}
/* CollabEditor Hauptstyles */
/*
* Layout-Container
*/
.collab-editor-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--background-color-pure);
z-index: 1500;
display: flex;
flex-direction: column;
overflow: hidden;
}
.collab-editor-content {
flex-grow: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Ladestatus und Fehlermeldungen */
.collab-editor-loading,
.collab-editor-error {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: var(--spacing-medium);
}
.collab-editor-error {
color: var(--error-red);
}
/* Deprecated header styles removed - now using FloatingToolbar only */
/*
* Preview Mode Styles
*/
.preview-mode-banner {
background: #8B1538; /* Wine red background */
color: var(--weiß);
padding: var(--spacing-small) var(--spacing-medium);
display: flex;
align-items: center;
gap: var(--spacing-small);
font-size: 0.9rem;
font-weight: 500;
box-shadow: var(--shadow-sm);
border-bottom: var(--border-subtle);
}
.preview-mode-title {
color: var(--weiß);
font-weight: 600;
}
.preview-mode-text {
flex: 1;
font-size: 0.85rem;
color: var(--weiß);
opacity: 0.95;
}
.preview-mode .collab-editor-overlay {
background-color: var(--background-color-alt);
}
[data-theme="dark"] .preview-mode .collab-editor-overlay {
background-color: var(--background-color);
}
/* Light red chat background for preview mode (light mode only) */
.preview-mode .editor-chat-messages {
background-color: var(--background-red-light);
}
/* Dark mode override - keep original background */
[data-theme="dark"] .preview-mode .editor-chat-messages {
background-color: var(--chat-background);
}
/* Preview mode specific adjustments for read-only editor */
/*
* Hauptinhalt mit Editor und Chat
*/
.collab-editor-main-content {
display: flex;
flex-grow: 1;
height: 100%;
}
/* Chatbereich */
.collab-editor-chat-column {
flex: 1;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
padding: 0;
}
/* CollabEditor spezifische Anpassungen für EditorChat */
.collab-editor-chat-column .editor-chat-header {
display: none;
}
.collab-editor-chat-column .editor-chat-input {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
background-color: var(--background-color-alt);
}
/* Modus-Selektor Styles */
.collab-editor-chat-column .chat-mode-selector {
display: flex;
gap: 4px;
padding: 4px;
}
/* Modus-Buttons */
.collab-editor-chat-column .mode-button {
background: transparent;
border: none;
border-radius: 4px;
padding: 6px;
color: var(--font-color);
cursor: pointer;
transition: background-color 0.2s, transform 0.2s;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
}
.collab-editor-chat-column .mode-button:hover {
background: var(--background-color);
}
.collab-editor-chat-column .editor-chat-input input {
flex: 1;
min-width: 0;
}
.collab-editor-chat-column .editor-chat-input button {
flex-shrink: 0;
}
/* Editor-Bereich */
/* Start of Selection */
.collab-editor-quill-column {
flex: 2;
background-color: var(--background-color-pure);
padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-large);
display: flex;
align-items: center;
justify-content: center;
}
/* End of Selection */
/* Quill-Editor Anpassungen */
.collab-editor-quill {
height: 100%;
overflow-x: hidden !important;
}
.collab-editor-quill .ql-editor {
overflow-x: hidden !important;
overflow-y: auto !important;
height: 100%;
padding-right: var(--spacing-medium) !important;
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}
.collab-editor-quill .ql-editor::-webkit-scrollbar {
width: 8px;
}
.collab-editor-quill .ql-editor::-webkit-scrollbar-track {
background: var(--scrollbar-track-color);
border-radius: 10px;
}
.collab-editor-quill .ql-editor::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color);
border-radius: 10px;
}
.collab-editor-quill .ql-editor::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover-color);
}
/* Quill bubbles anpassen */
.collab-editor-quill .ql-bubble .ql-tooltip {
background-color: var(--background-color-alt);
color: var(--font-color);
border: var(--border-subtle);
box-shadow: var(--shadow-md);
}
.collab-editor-quill .ql-bubble .ql-tooltip-arrow {
border-color: var(--background-color-alt) transparent transparent;
}
/* Responsive Anpassungen */
@media (max-width: 768px) {
.collab-editor-main-content {
flex-direction: column;
}
.collab-editor-chat-column {
flex: none;
height: 300px;
border-right: none;
border-bottom: var(--border-subtle);
}
.collab-editor-quill-column {
flex: 1;
}
/* Deprecated header responsive styles removed */
.collab-editor-chat-column .editor-chat-input {
flex-grow: 1;
}
.collab-editor-chat-column .chat-mode-selector {
margin-right: var(--spacing-xsmall);
}
}
/* Text highlight styles for Quill editor - using CSS classes and inline styles */
.collab-editor-quill .ql-editor .ql-bg-yellow,
.collab-editor-quill .ql-editor [style*="background-color: yellow"] {
background-color: #fff2b3 !important; /* Pastel yellow */
color: #464646 !important; /* Dark gray text */
}
[data-theme="dark"] .collab-editor-quill .ql-editor .ql-bg-yellow,
[data-theme="dark"] .collab-editor-quill .ql-editor [style*="background-color: yellow"] {
background-color: #4a4419 !important; /* Darker pastel yellow for dark mode */
color: #f8f4ec !important; /* Light text */
}
.collab-editor-quill .ql-editor .ql-bg-green,
.collab-editor-quill .ql-editor [style*="background-color: green"] {
background-color: var(--klee) !important;
color: white !important;
}
/* Animation für Texthervorhebungen (aus highlightUtils.js) */
@keyframes highlight-pulse {
0% { background-color: #fff2b3; }
50% { background-color: rgba(255, 242, 179, 0.5); }
100% { background-color: #fff2b3; }
}
.highlight-animation {
animation: highlight-pulse 2s ease-in-out 3;
}
/* Verbindungsstatus - DOT */
.collab-editor-status-indicator {
display: flex;
align-items: center;
}
.connection-dot {
width: 10px; /* Small dot */
height: 10px; /* Small dot */
border-radius: 50%;
transition: background-color 0.3s ease;
}
.connection-status-connected {
background-color: var(--klee); /* Green for connected */
}
.connection-status-connecting {
background-color: var(--himmel); /* Blue for connecting */
}
.connection-status-disconnected {
background-color: var(--error-red); /* Red for disconnected */
}
/* Barrierefreiheit - Fokus-Styles */
.collab-editor-quill:focus-visible {
outline: 2px solid var(--interactive-accent-color);
outline-offset: 2px;
}
/* Füge spezielle Styles für den EditorChat im Collab-Editor hinzu */
.collab-editor-chat-column .editor-chat {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
width: 100%;
max-width: none;
border-radius: 0;
}
.collab-editor-chat-column .editor-chat-messages {
flex: 1;
overflow-y: auto !important;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Skeleton Loader Styles */
/* Die Klassen .skeleton-chat-column, .skeleton-quill-column und .skeleton-line werden direkt für die Skeleton-Elemente verwendet.
Ihre Basis-Stylings (Breite, Höhe, Hintergrund) sind hier definiert oder sollten hier sein, falls spezifische Skeleton-Stylings benötigt werden,
die von den echten Komponenten abweichen. Die Pulse-Animation wird in der Komponente definiert.
*/
.skeleton-chat-column {
/* Behält die Breite des echten Chat-Fensters für Konsistenz oder definieren Sie sie hier, falls abweichend. */
/* Beispiel: width: 300px; */
background-color: var(--grey-light);
border-radius: var(--border-radius-medium);
/* opacity wird durch die Animation gesteuert */
}
.skeleton-quill-column {
/* Behält die Flexibilität des echten Quill-Bereichs */
/* Beispiel: flex-grow: 1; */
background-color: var(--grey-light);
border-radius: var(--border-radius-medium);
padding: 20px; /* Padding wie im echten .collab-editor-quill-column oder .skeleton-quill-column anpassen */
/* opacity wird durch die Animation gesteuert */
display: flex;
flex-direction: column;
gap: 10px; /* Abstand zwischen den Linien */
}
.skeleton-line {
height: 20px;
background-color: var(--grey-medium);
border-radius: var(--border-radius-small);
/* opacity wird durch die Animation gesteuert */
}
/* Ensure existing styles are not overwritten if they are below this block */
/* Deprecated header group styles removed */
/*
* Floating Toolbar Styles
*/
.floating-toolbar {
position: fixed;
bottom: var(--spacing-large);
right: var(--spacing-large);
background-color: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--card-border-radius-large);
box-shadow: var(--shadow-lg);
padding: var(--spacing-small);
z-index: 1600;
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-small);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
[data-theme="dark"] .floating-toolbar {
background-color: rgba(0, 0, 0, 0.25);
border-color: rgba(255, 255, 255, 0.1);
}
.floating-toolbar-actions {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-xsmall);
}
.floating-toolbar-button {
background-color: transparent;
color: var(--font-color);
border: none;
padding: var(--spacing-xxsmall);
border-radius: var(--border-radius-small);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9em;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
width: 40px;
height: 40px;
}
.floating-toolbar-button:hover:not(.floating-toolbar-button-disabled) {
background-color: var(--background-color);
transform: scale(1.05);
}
[data-theme="dark"] .floating-toolbar-button:hover:not(.floating-toolbar-button-disabled) {
background-color: var(--dunkelgrau);
}
.floating-toolbar-button-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.floating-toolbar-button-success {
background-color: var(--klee);
color: var(--weiß);
}
.floating-toolbar-button-success:hover:not(.floating-toolbar-button-disabled) {
background-color: var(--primary);
color: var(--weiß);
}
[data-theme="dark"] .floating-toolbar-button-success {
background-color: var(--klee);
color: var(--weiß);
}
[data-theme="dark"] .floating-toolbar-button-success:hover:not(.floating-toolbar-button-disabled) {
background-color: var(--grashalm);
color: var(--anthrazit);
}
.floating-toolbar-status {
display: flex;
align-items: center;
justify-content: center;
margin-left: var(--spacing-xxsmall);
}
/* Share Dropdown Styles */
.share-dropdown-container {
position: relative;
display: inline-block;
}
.dropdown-arrow {
margin-left: 4px;
transition: transform 0.2s ease;
}
.dropdown-active .dropdown-arrow {
transform: rotate(180deg);
}
.share-dropdown-menu {
position: absolute;
bottom: calc(100% + 8px);
right: 0;
background-color: var(--background-color-alt);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-medium);
box-shadow: var(--shadow-lg);
min-width: 250px;
z-index: 1000;
overflow: hidden;
}
[data-theme="dark"] .share-dropdown-menu {
background-color: var(--grey-800);
border-color: var(--grey-700);
}
.share-dropdown-item {
width: 100%;
padding: var(--spacing-small) var(--spacing-medium);
display: flex;
align-items: center;
gap: var(--spacing-small);
background: none;
border: none;
color: var(--font-color);
cursor: pointer;
transition: background-color 0.2s ease;
text-align: left;
}
.share-dropdown-item:hover:not(:disabled) {
background-color: var(--background-color);
}
[data-theme="dark"] .share-dropdown-item:hover:not(:disabled) {
background-color: var(--grey-700);
}
.share-dropdown-item:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.share-option-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.share-option-title {
font-weight: 500;
font-size: 0.9rem;
color: var(--font-color);
}
.share-option-desc {
font-size: 0.75rem;
color: var(--font-color-secondary);
opacity: 0.8;
}
/* Anonymous Reviewer Styles */
.anonymous-reviewer-message {
border: 2px solid #8B1538 !important;
border-left: 4px solid #8B1538 !important;
}
/* Authenticated Reviewer Styles (Review Mode) */
.authenticated-reviewer-message {
border-left: 4px solid #8B1538 !important;
}
.change-name-button {
background: none;
border: none;
cursor: pointer;
margin-left: var(--spacing-xxsmall);
padding: 2px;
border-radius: 2px;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.change-name-button:hover {
opacity: 1;
background-color: rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .change-name-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* Name Selector Modal */
.name-selector-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
backdrop-filter: blur(4px);
}
.name-selector-modal {
background-color: var(--background-color-pure);
border-radius: var(--border-radius-medium);
padding: var(--spacing-large);
box-shadow: var(--shadow-lg);
max-width: 400px;
width: 90%;
border: 1px solid var(--border-subtle);
}
[data-theme="dark"] .name-selector-modal {
background-color: var(--grey-800);
border-color: var(--grey-700);
}
.name-selector-modal h3 {
margin: 0 0 var(--spacing-small) 0;
color: var(--font-color);
font-size: 1.1rem;
}
.name-selector-modal p {
margin: 0 0 var(--spacing-medium) 0;
color: var(--font-color-secondary);
font-size: 0.9rem;
}
.name-input {
width: 100%;
padding: var(--spacing-small);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-small);
background-color: var(--background-color);
color: var(--font-color);
font-size: 0.9rem;
margin-bottom: var(--spacing-medium);
}
.name-input:focus {
outline: none;
border-color: #8B1538;
box-shadow: 0 0 0 2px rgba(139, 21, 56, 0.2);
}
[data-theme="dark"] .name-input {
background-color: var(--grey-700);
border-color: var(--grey-600);
}
.name-selector-actions {
display: flex;
gap: var(--spacing-small);
justify-content: flex-end;
}
.name-cancel-button,
.name-submit-button {
padding: var(--spacing-small) var(--spacing-medium);
border-radius: var(--border-radius-small);
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
}
.name-cancel-button {
background: none;
border: 1px solid var(--border-subtle);
color: var(--font-color-secondary);
}
.name-cancel-button:hover {
background-color: var(--background-color);
color: var(--font-color);
}
.name-submit-button {
background-color: #8B1538;
border: 1px solid #8B1538;
color: var(--weiß);
}
.name-submit-button:hover:not(:disabled) {
background-color: #6B1028;
border-color: #6B1028;
}
.name-submit-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Review Mode Styles */
.review-mode-input {
border: 2px solid #8B1538 !important;
box-shadow: 0 0 0 1px rgba(139, 21, 56, 0.2) !important;
}
.review-mode-input:focus {
border-color: #8B1538 !important;
box-shadow: 0 0 0 3px rgba(139, 21, 56, 0.3) !important;
}
.review-mode-button {
background-color: #8B1538 !important;
border-color: #8B1538 !important;
}
.review-mode-button:hover:not(:disabled) {
background-color: #6B1028 !important;
border-color: #6B1028 !important;
}
.review-mode-active {
position: relative;
background-color: rgba(139, 21, 56, 0.1) !important;
border: 1px solid rgba(139, 21, 56, 0.3) !important;
}
[data-theme="dark"] .review-mode-active {
background-color: rgba(139, 21, 56, 0.2) !important;
}
.review-mode-indicator {
position: absolute;
top: -2px;
right: -2px;
width: 8px;
height: 8px;
background-color: #8B1538;
border-radius: 50%;
border: 1px solid var(--background-color-pure);
}
.long-pressing {
transform: scale(1.1);
transition: transform 0.2s ease;
}
.reviewer-badge {
margin-left: 4px;
font-size: 0.8em;
opacity: 0.8;
}
/* Mobile adjustments for floating toolbar */
@media (max-width: 768px) {
.floating-toolbar {
bottom: var(--spacing-medium);
right: var(--spacing-medium);
left: var(--spacing-medium);
padding: var(--spacing-xsmall);
}
.floating-toolbar-actions {
justify-content: center;
flex: 1;
}
.floating-toolbar-status {
margin-left: var(--spacing-xsmall);
}
.share-dropdown-menu {
right: auto;
left: 50%;
transform: translateX(-50%);
min-width: 280px;
}
.name-selector-modal {
padding: var(--spacing-medium);
margin: var(--spacing-medium);
}
}
/* Q&A Collections Styling - Cleaned up version after DocumentOverview integration */
/* Empty State Enhancement */
.qa-empty-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-large);
margin: var(--spacing-xlarge) 0;
max-width: 600px;
}
.qa-feature-item {
text-align: center;
padding: var(--spacing-large);
background: var(--neutral-600);
border-radius: 12px;
transition: all 0.2s ease;
}
.qa-feature-icon {
font-size: 2rem;
margin-bottom: var(--spacing-small);
}
.qa-feature-item span {
display: block;
color: var(--font-color);
font-size: 0.875rem;
font-weight: 500;
}
/* Error State */
.qa-error-state {
text-align: center;
padding: var(--spacing-xlarge);
background: #ffebee;
border-radius: 12px;
border: 1px solid #ffcdd2;
}
.qa-error-content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-medium);
}
.qa-error-icon {
width: 48px;
height: 48px;
color: var(--error-red);
}
.qa-error-text h4 {
margin: 0 0 var(--spacing-xsmall) 0;
color: var(--error-red);
}
.qa-error-text p {
margin: 0;
color: var(--grey-700);
}
.qa-error-details {
font-size: 0.875rem;
color: var(--grey-600);
margin-top: var(--spacing-xsmall);
}
.qa-retry-button {
margin-top: var(--spacing-large);
display: inline-flex;
align-items: center;
gap: var(--spacing-xsmall);
padding: var(--spacing-small) var(--spacing-large);
background: var(--secondary-600);
color: white;
border: none;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.qa-retry-button:hover {
background: var(--secondary-700);
transform: translateY(-1px);
}
.qa-retry-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Back Button */
.qa-back-button {
display: inline-flex;
align-items: center;
gap: var(--spacing-xsmall);
padding: var(--spacing-xsmall) var(--spacing-medium);
background: transparent;
color: var(--secondary-600);
border: 1px solid var(--secondary-200);
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.qa-back-button:hover {
background: var(--secondary-50);
border-color: var(--secondary-600);
}
/* Dark theme support moved to document-overview.css for .qa-document-count and .qa-public-badge */
[data-theme="dark"] .qa-error-state {
background: rgba(211, 47, 47, 0.1);
border-color: rgba(211, 47, 47, 0.3);
}
/* E-Learning Feature Styles */
/* E-Learning Feature Styles */
.elearning-page {
min-height: 100vh;
background-color: var(--background-color);
color: var(--font-color);
}
/* Header Section */
.elearning-header {
background: linear-gradient(135deg, var(--background-color-alt) 0%, var(--background-color) 100%);
padding: var(--spacing-xxlarge) var(--spacing-medium);
border-bottom: var(--border-subtle);
}
.elearning-header-content {
max-width: 1200px;
margin: 0 auto;
}
.elearning-title-section {
text-align: center;
margin-bottom: var(--spacing-xlarge);
}
.elearning-icon {
font-size: 4rem;
color: var(--secondary-600);
margin-bottom: var(--spacing-medium);
}
.elearning-title {
font-size: 3rem;
font-weight: 700;
color: var(--font-color-h);
margin: 0 0 var(--spacing-medium) 0;
text-align: center;
}
.elearning-subtitle {
font-size: 1.25rem;
color: var(--font-color);
margin: 0;
opacity: 0.8;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.elearning-intro {
display: flex;
justify-content: center;
}
.intro-card {
background: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-large);
box-shadow: var(--card-shadow-subtle);
display: flex;
align-items: flex-start;
gap: var(--spacing-medium);
max-width: 800px;
width: 100%;
}
.intro-icon {
font-size: 2rem;
color: var(--primary-600);
flex-shrink: 0;
margin-top: var(--spacing-xxsmall);
}
.intro-content h3 {
color: var(--font-color-h3);
margin: 0 0 var(--spacing-small) 0;
font-size: 1.25rem;
}
.intro-content p {
margin: 0;
line-height: 1.6;
color: var(--font-color);
}
/* Content Section */
.elearning-content {
max-width: 1200px;
margin: 0 auto;
padding: var(--spacing-xxlarge) var(--spacing-medium);
}
.chapters-section {
margin-bottom: var(--spacing-xxlarge);
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-xlarge);
}
.section-header h2 {
color: var(--font-color-h);
font-size: 2rem;
margin: 0 0 var(--spacing-small) 0;
}
.section-header p {
color: var(--font-color);
margin: 0;
opacity: 0.8;
}
/* Chapters Grid */
.chapters-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-large);
align-items: stretch;
}
/* Chapter Card */
.elearning-chapter-card {
background: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-large);
box-shadow: var(--card-shadow-subtle);
transition: var(--input-transition);
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
min-height: 300px;
}
.elearning-chapter-card:hover:not(.disabled) {
box-shadow: var(--card-shadow-elevated);
transform: var(--card-hover-transform);
}
.elearning-chapter-card:focus:not(.disabled) {
outline: var(--input-border-focus);
outline-offset: 2px;
}
.elearning-chapter-card.disabled {
opacity: 0.6;
cursor: not-allowed;
}
.elearning-chapter-card.coming-soon {
position: relative;
overflow: hidden;
}
.coming-soon-badge {
position: absolute;
top: var(--spacing-medium);
right: var(--spacing-medium);
background: var(--primary-600);
color: var(--white);
padding: var(--spacing-xxsmall) var(--spacing-small);
border-radius: var(--card-border-radius-small);
font-size: 0.75rem;
font-weight: 600;
z-index: 1;
}
/* Chapter Card Header */
.chapter-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--spacing-medium);
}
.chapter-card-icon {
font-size: 2rem;
color: var(--secondary-600);
}
.chapter-card-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--spacing-xxsmall);
}
.chapter-duration {
display: flex;
align-items: center;
gap: var(--spacing-xxsmall);
font-size: 0.875rem;
color: var(--font-color);
opacity: 0.7;
}
.chapter-duration svg {
font-size: 1rem;
}
.chapter-difficulty {
font-size: 0.75rem;
font-weight: 600;
padding: var(--spacing-xxsmall) var(--spacing-small);
background: var(--background-color-alt);
border-radius: var(--card-border-radius-small);
}
/* Chapter Card Content */
.chapter-card-content {
flex: 1;
margin-bottom: var(--spacing-medium);
}
.chapter-card-title {
color: var(--font-color-h3);
font-size: 1.25rem;
margin: 0 0 var(--spacing-small) 0;
line-height: 1.4;
}
.chapter-card-description {
color: var(--font-color);
margin: 0 0 var(--spacing-medium) 0;
line-height: 1.6;
font-size: 0.95rem;
}
.chapter-card-topics {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xsmall);
}
.chapter-topic-tag {
background: var(--primary-50);
color: var(--primary-700);
padding: var(--spacing-xxsmall) var(--spacing-small);
border-radius: var(--card-border-radius-small);
font-size: 0.75rem;
font-weight: 500;
}
/* Chapter Card Footer */
.chapter-card-footer {
margin-top: auto;
}
.chapter-start-button {
background: var(--secondary-600);
color: var(--white);
border: none;
border-radius: var(--card-border-radius-small);
padding: var(--spacing-small) var(--spacing-medium);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: var(--input-transition);
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
width: 100%;
justify-content: center;
}
.chapter-start-button:hover:not(:disabled) {
background: var(--secondary-700);
transform: translateY(-1px);
}
.chapter-start-button:disabled {
background: var(--button-background-color);
color: var(--font-color-disabled);
cursor: not-allowed;
}
.chapter-start-button svg {
font-size: 1rem;
}
/* Info Section */
.elearning-info {
text-align: center;
}
.info-card {
background: var(--card-background-alt);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-xlarge);
box-shadow: var(--card-shadow-subtle);
max-width: 700px;
margin: 0 auto;
}
.info-card h3 {
color: var(--font-color-h3);
margin: 0 0 var(--spacing-large) 0;
font-size: 1.5rem;
}
.info-card ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.info-card li {
margin-bottom: var(--spacing-small);
padding-left: var(--spacing-large);
position: relative;
line-height: 1.6;
}
.info-card li:last-child {
margin-bottom: 0;
}
/* Access Denied */
.elearning-access-denied {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-medium);
}
.access-denied-content {
text-align: center;
max-width: 500px;
background: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-xxlarge);
box-shadow: var(--card-shadow-subtle);
}
.access-denied-icon {
font-size: 4rem;
color: var(--secondary-600);
margin-bottom: var(--spacing-large);
}
.access-denied-content h2 {
color: var(--font-color-h);
margin: 0 0 var(--spacing-medium) 0;
}
.access-denied-content p {
color: var(--font-color);
margin: 0 0 var(--spacing-small) 0;
line-height: 1.6;
}
.access-denied-content p:last-child {
margin-bottom: 0;
}
.access-denied-content a {
color: var(--link-color);
text-decoration: underline;
}
.access-denied-content a:hover {
text-decoration: none;
}
/* Tutorial BaseForm Layout Override - 1/3 Form + 2/3 Display */
.tutorial-clean-container .base-container {
display: flex;
flex-direction: row;
gap: var(--spacing-large);
min-height: 600px;
align-items: stretch;
max-width: none;
margin: 0;
width: 100%;
padding: 0;
}
/* Motion Wrapper Layout */
.tutorial-clean-container .form-section-motion-wrapper {
flex: 1; /* 1/3 for form */
}
.tutorial-clean-container .display-section-motion-wrapper {
flex: 2; /* 2/3 for display */
}
/* Element Layout */
.tutorial-clean-container .form-section,
.tutorial-clean-container .form-section.has-generated-content {
flex: 1; /* 1/3 for form */
max-width: none;
}
.tutorial-clean-container .display-container,
.tutorial-clean-container .display-container.has-generated-content {
flex: 2; /* 2/3 for display */
max-width: none;
}
/* Mobile Responsiveness for BaseForm Layout */
@media (max-width: 768px) {
.tutorial-clean-container .base-container {
flex-direction: column;
gap: var(--spacing-medium);
padding: var(--spacing-medium);
min-height: auto;
}
.tutorial-clean-container .form-section-motion-wrapper,
.tutorial-clean-container .display-section-motion-wrapper {
flex: none;
width: 100%;
}
.tutorial-clean-container .form-section,
.tutorial-clean-container .form-section.has-generated-content,
.tutorial-clean-container .display-container,
.tutorial-clean-container .display-container.has-generated-content {
flex: none;
max-width: 100%;
width: 100%;
}
}
/* Pages Feature Styles */
/* Page View - Main container styles */
.page-view-container {
max-width: 1200px;
margin: 0 auto;
padding: var(--spacing-xlarge) var(--spacing-medium);
background-color: var(--background-color);
min-height: 100vh;
}
.page-view__inner {
background-color: var(--background-color);
padding: var(--spacing-xxlarge) var(--spacing-xlarge);
}
/* Page loading states */
.page-view--loading {
opacity: 0.7;
}
.page-view__loading {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
color: var(--font-color-disabled);
font-size: 1.125rem;
}
/* Page error states */
.page-view__error {
text-align: center;
padding: var(--spacing-xxlarge);
color: var(--error-red);
background-color: var(--background-red-light);
border-radius: var(--card-border-radius-medium);
margin: var(--spacing-xlarge) 0;
}
/* Desktop enhancements */
@media (min-width: 1025px) {
.page-view-container {
padding: var(--spacing-xxlarge) var(--spacing-xlarge);
}
.page-view__inner {
padding: var(--spacing-xxlarge) calc(var(--spacing-xxlarge) * 1.5);
max-width: none;
}
}
/* Responsive design */
@media (max-width: 1024px) and (min-width: 769px) {
.page-view__inner {
border-radius: var(--card-border-radius-large);
box-shadow: var(--card-shadow-subtle);
transition: box-shadow 0.3s ease;
}
.page-view__inner:hover {
box-shadow: var(--card-shadow-elevated);
}
}
@media (max-width: 768px) {
.page-view-container {
padding: var(--spacing-large) var(--spacing-small);
}
.page-view__inner {
padding: var(--spacing-xlarge) var(--spacing-medium);
box-shadow: none;
border-radius: 0;
}
}
@media (max-width: 480px) {
.page-view-container {
padding: var(--spacing-medium) var(--spacing-xsmall);
}
.page-view__inner {
padding: var(--spacing-large) var(--spacing-small);
}
}
/* Page Header - Hero section styles */
.page-header {
margin-bottom: var(--spacing-xlarge);
text-align: center;
padding: var(--spacing-xlarge) 0;
position: relative;
}
.page-header--left-aligned {
text-align: left;
}
.page-header__title {
font-family: 'GrueneType', Arial, sans-serif;
font-size: clamp(2rem, 5vw, 4rem);
color: var(--font-color-h);
line-height: 1.2;
margin: 0 auto var(--spacing-medium) auto;
font-weight: normal;
letter-spacing: -0.02em;
max-width: clamp(640px, 50vw, 900px);
}
.page-header__subtitle {
font-family: 'PT Sans', Arial, sans-serif;
font-size: clamp(1.125rem, 3vw, 1.75rem);
color: var(--font-color);
line-height: 1.4;
margin: 0 auto var(--spacing-large) auto;
opacity: 0.8;
max-width: clamp(640px, 50vw, 900px);
}
.page-header--left-aligned .page-header__title {
margin-left: 0;
margin-right: auto;
}
.page-header--left-aligned .page-header__subtitle {
margin-left: 0;
margin-right: auto;
}
.page-header__meta {
display: flex;
gap: var(--spacing-medium);
justify-content: center;
align-items: center;
margin: var(--spacing-medium) auto 0 auto;
font-family: 'PT Sans', Arial, sans-serif;
font-size: 0.9rem;
color: var(--font-color-disabled);
max-width: clamp(640px, 50vw, 900px);
}
.page-header--left-aligned .page-header__meta {
justify-content: flex-start;
margin-left: 0;
margin-right: auto;
}
.page-header__author {
font-weight: 600;
}
.page-header__read-time::before {
content: "•";
margin-right: var(--spacing-xsmall);
}
.page-header__divider {
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--secondary-600), var(--primary-600));
border: none;
margin: var(--spacing-medium) 0;
border-radius: 2px;
position: relative;
}
.page-header--left-aligned .page-header__divider {
margin-left: 0;
left: 0;
transform: none;
}
/* Desktop enhancements */
@media (min-width: 1025px) {
.page-header {
padding: var(--spacing-xxlarge) 0;
}
.page-header__title {
line-height: 1.1;
margin-bottom: var(--spacing-large);
}
.page-header__subtitle {
font-size: clamp(1.25rem, 2vw, 1.75rem);
line-height: 1.5;
max-width: clamp(640px, 50vw, 900px);
}
.page-header__meta {
margin-top: var(--spacing-xlarge);
font-size: 1rem;
}
.page-header__divider {
width: 80px;
margin: var(--spacing-xlarge) auto;
}
}
/* Responsive design */
@media (max-width: 768px) {
.page-header {
padding: var(--spacing-large) 0;
text-align: left;
}
.page-header__title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.page-header__subtitle {
margin-left: 0;
margin-right: 0;
}
.page-header__meta {
justify-content: flex-start;
flex-wrap: wrap;
}
.page-header__divider {
margin-left: 0;
}
}
/* Content Blocks - Prestyled components */
/* Base content styling */
.page-content {
font-family: 'PT Sans', Arial, sans-serif;
font-size: 1.125rem;
line-height: 1.7;
color: var(--font-color);
max-width: clamp(640px, 50vw, 900px);
margin: 0 auto;
}
.page-content p {
margin: 0 0 var(--spacing-large) 0;
}
.page-content h2,
.page-content h3,
.page-content h4 {
margin: var(--spacing-xxlarge) 0 var(--spacing-large) 0;
}
.page-content h2:first-child,
.page-content h3:first-child,
.page-content h4:first-child {
margin-top: 0;
}
/* Quote Block - Inspired by official Grüne.de design */
.quote-block {
background: transparent;
border: none;
padding: var(--spacing-xlarge) 0;
margin: var(--spacing-xxlarge) 0;
position: relative;
max-width: none;
width: 100%;
}
.quote-block::before {
content: "„";
font-family: 'GrueneType', Arial, sans-serif;
font-size: clamp(6rem, 15vw, 12rem);
color: #FDE047; /* Official yellow from Grüne.de */
position: absolute;
top: -2rem;
left: 0;
line-height: 1;
z-index: 0;
font-weight: bold;
}
.quote-block__text {
font-family: 'GrueneType', Arial, sans-serif;
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-style: normal;
font-weight: normal;
color: var(--font-color-h);
margin: 0 0 var(--spacing-large) 0;
padding-left: clamp(3rem, 10vw, 9rem);
padding-top: var(--spacing-large);
position: relative;
z-index: 1;
line-height: 1.3;
}
.quote-block__attribution {
font-family: 'PT Sans', Arial, sans-serif;
font-size: clamp(0.75rem, 2vw, 1rem);
font-style: normal;
color: var(--font-color-disabled);
text-align: right;
margin-top: var(--spacing-medium);
border: none;
padding: 0;
background: transparent;
}
.quote-block__author {
font-weight: 600;
}
.quote-block__title {
font-weight: normal;
opacity: 0.7;
}
/* Info Box - Simplified design */
.info-box {
background: transparent;
border: none;
padding: var(--spacing-xlarge) 0;
margin: var(--spacing-xlarge) 0;
max-width: none;
width: 100%;
}
.info-box--success {
border-left: 4px solid var(--primary-600);
padding-left: var(--spacing-large);
}
.info-box--warning {
border-left: 4px solid #f59e0b;
padding-left: var(--spacing-large);
}
.info-box--error {
border-left: 4px solid var(--error-red);
padding-left: var(--spacing-large);
}
.info-box__title {
font-family: 'GrueneType', Arial, sans-serif;
font-size: 1.25rem;
color: var(--font-color-h3);
margin: 0 0 var(--spacing-medium) 0;
}
.info-box__content {
color: var(--font-color);
}
.info-box__list {
list-style: none;
padding: 0;
margin: 0;
}
.info-box__list-item {
padding: var(--spacing-xsmall) 0;
padding-left: 0;
}
.info-box__list-item::before {
content: "• ";
color: var(--link-color);
font-weight: normal;
}
/* Fact Box */
.fact-box {
background: var(--background-color);
border: 1px solid var(--border-subtle);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-xlarge);
margin: var(--spacing-xlarge) 0;
box-shadow: var(--card-shadow-elevated);
max-width: none;
width: 100%;
}
.fact-box__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-large);
}
.fact-box__item {
text-align: center;
padding: var(--spacing-medium);
}
.fact-box__number {
font-family: 'GrueneType', Arial, sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
color: var(--secondary-600);
font-weight: normal;
line-height: 1;
margin: 0 0 var(--spacing-xsmall) 0;
}
.fact-box__label {
font-family: 'PT Sans', Arial, sans-serif;
font-size: 0.9rem;
color: var(--font-color);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Callout Block */
.callout-block {
background: linear-gradient(135deg, var(--secondary-600), var(--primary-600));
color: var(--white);
padding: var(--spacing-xxlarge);
margin: var(--spacing-xxlarge) 0;
border-radius: var(--card-border-radius-large);
text-align: center;
box-shadow: var(--card-shadow-floating);
max-width: none;
width: 100%;
}
.callout-block__title {
font-family: 'GrueneType', Arial, sans-serif;
font-size: 1.75rem;
margin: 0 0 var(--spacing-medium) 0;
color: var(--white);
}
.callout-block__text {
font-size: 1.125rem;
line-height: 1.6;
margin: 0 0 var(--spacing-large) 0;
opacity: 0.95;
}
.callout-block__button {
background: var(--white);
color: var(--secondary-600);
padding: var(--spacing-medium) var(--spacing-xlarge);
border: none;
border-radius: var(--card-border-radius-small);
font-family: 'PT Sans', Arial, sans-serif;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: inline-block;
}
.callout-block__button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Timeline Block */
.timeline-block {
margin: var(--spacing-xxlarge) 0;
position: relative;
max-width: none;
width: 100%;
}
.timeline-block::before {
content: "";
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: var(--secondary-600);
}
.timeline-block__item {
position: relative;
padding-left: 60px;
margin-bottom: var(--spacing-xlarge);
}
.timeline-block__item::before {
content: "";
position: absolute;
left: 12px;
top: 8px;
width: 16px;
height: 16px;
background: var(--secondary-600);
border-radius: 50%;
border: 3px solid var(--background-color);
box-shadow: 0 0 0 2px var(--secondary-600);
}
.timeline-block__date {
font-family: 'PT Sans', Arial, sans-serif;
font-size: 0.9rem;
color: var(--font-color-disabled);
font-weight: 600;
margin: 0 0 var(--spacing-xsmall) 0;
}
.timeline-block__title {
font-family: 'GrueneType', Arial, sans-serif;
font-size: 1.25rem;
color: var(--font-color-h3);
margin: 0 0 var(--spacing-small) 0;
}
.timeline-block__content {
color: var(--font-color);
line-height: 1.6;
}
/* Desktop enhancements */
@media (min-width: 1025px) {
.page-content {
font-size: 1.125rem;
line-height: 1.8;
max-width: clamp(640px, 50vw, 900px);
}
.page-content p {
margin: 0 0 var(--spacing-xlarge) 0;
}
.quote-block {
padding: var(--spacing-xxlarge) var(--spacing-xlarge);
margin: calc(var(--spacing-xxlarge) * 1.5) 0;
}
.quote-block__text {
padding-left: clamp(6rem, 12vw, 10rem);
padding-top: var(--spacing-xlarge);
}
.info-box,
.fact-box {
padding: var(--spacing-xxlarge);
margin: var(--spacing-xxlarge) 0;
}
.fact-box__grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-xlarge);
}
.fact-box__item {
padding: var(--spacing-large);
}
.callout-block {
padding: calc(var(--spacing-xxlarge) * 1.5);
margin: calc(var(--spacing-xxlarge) * 1.5) 0;
}
.callout-block__title {
font-size: 2rem;
margin-bottom: var(--spacing-large);
}
.callout-block__text {
font-size: 1.25rem;
margin-bottom: var(--spacing-xlarge);
}
.timeline-block {
margin: calc(var(--spacing-xxlarge) * 1.5) 0;
}
.timeline-block::before {
left: 30px;
width: 3px;
}
.timeline-block__item {
padding-left: 80px;
margin-bottom: var(--spacing-xxlarge);
}
.timeline-block__item::before {
left: 20px;
top: 12px;
width: 20px;
height: 20px;
border: 4px solid var(--background-color);
box-shadow: 0 0 0 3px var(--secondary-600);
}
.timeline-block__title {
font-size: 1.5rem;
margin-bottom: var(--spacing-medium);
}
.timeline-block__content {
font-size: 1.125rem;
line-height: 1.7;
}
}
/* Responsive design */
@media (max-width: 1024px) and (min-width: 769px) {
.page-content {
max-width: clamp(600px, 80vw, 750px);
}
}
@media (max-width: 768px) {
.page-content {
font-size: 1rem;
max-width: none;
}
.quote-block {
padding: var(--spacing-large);
margin: var(--spacing-xlarge) 0;
}
.quote-block__text {
font-size: 1.25rem;
}
.info-box,
.fact-box {
padding: var(--spacing-large);
}
.fact-box__grid {
grid-template-columns: 1fr;
gap: var(--spacing-medium);
}
.callout-block {
padding: var(--spacing-xlarge);
}
.callout-block__title {
font-size: 1.5rem;
}
.timeline-block::before {
left: 15px;
}
.timeline-block__item {
padding-left: 45px;
}
.timeline-block__item::before {
left: 7px;
width: 14px;
height: 14px;
}
}
.generator-header {
width: 100%;
max-width: var(--container-max-width, 1200px);
box-sizing: border-box;
margin-bottom: var(--spacing-large, 24px);
padding: var(--spacing-medium, 16px);
border-radius: var(--border-radius-medium, 6px);
border: 1px solid var(--border-subtle);
}
.generator-header .generator-title {
color: var(--font-color-h);
margin-bottom: var(--spacing-small, 12px);
font-size: 1.8rem;
font-weight: 600;
}
.generator-header .generator-description {
color: var(--font-color);
font-size: 1rem;
line-height: 1.5;
}
.custom-generator-page-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
/* Create Generator Page Specific Styles */
.create-generator-page {
min-height: calc(100vh - var(--header-height, 60px));
padding: var(--spacing-medium) var(--spacing-small);
width: 100%;
}
.create-generator-page .container {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
/* Form section width adjustments */
.create-generator-page .form-section {
max-width: 1000px;
margin: 0 auto;
width: 100%;
}
/* Form card adjustments */
.create-generator-page .form-card {
padding: var(--spacing-large);
margin-bottom: var(--spacing-medium);
box-shadow: var(--shadow-medium);
}
/* Form container layout adjustments */
.create-generator-page .form-section__container {
gap: var(--spacing-large);
grid-template-columns: 1fr;
max-width: none;
}
/* Input section takes more space */
.create-generator-page .form-input-section {
flex: 1;
min-width: 0;
max-width: none;
}
/* Form fields spacing */
.create-generator-page .form-field-wrapper {
margin-bottom: var(--spacing-large);
}
.create-generator-page .form-field-wrapper:last-child {
margin-bottom: 0;
}
/* Input and textarea width adjustments */
.create-generator-page .form-input,
.create-generator-page .form-textarea {
width: 100%;
max-width: none;
}
/* Text area specific adjustments */
.create-generator-page .form-textarea {
min-height: 120px;
}
/* Field editor specific adjustments */
.create-generator-page .field-editor-assistant {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: var(--spacing-medium);
background: var(--background-color, #f8f9fa);
margin: var(--spacing-medium) 0;
max-width: none;
width: 100%;
}
/* Review section adjustments */
.create-generator-page .review-container {
display: grid;
gap: var(--spacing-medium);
grid-template-columns: 1fr;
max-width: none;
width: 100%;
}
.create-generator-page .review-section {
padding: var(--spacing-medium);
background: var(--background-color);
}
.create-generator-page .review-section h4 {
margin: 0 0 var(--spacing-small) 0;
color: var(--font-color);
font-weight: 600;
}
.create-generator-page .review-prompt-display {
padding: var(--spacing-small);
font-size: 0.875rem;
white-space: pre-wrap;
word-wrap: break-word;
max-height: 300px;
overflow-y: auto;
}
/* Button adjustments */
.create-generator-page .form-actions,
.create-generator-page .form-inputs__buttons {
justify-content: space-between;
gap: var(--spacing-medium);
flex-wrap: wrap;
margin-top: var(--spacing-large);
}
.create-generator-page .form-button,
.create-generator-page .form-inputs__submit-button {
min-width: 120px;
}
/* Submit button in input section styling */
.create-generator-page .form-inputs__buttons {
display: flex;
align-items: center;
padding-top: var(--spacing-medium);
border-top: 1px solid var(--border-color);
}
.create-generator-page .form-inputs__back-button {
background: transparent;
border: 1px solid var(--border-color);
color: var(--font-color);
padding: var(--spacing-small) var(--spacing-medium);
border-radius: var(--border-radius);
cursor: pointer;
transition: all 0.2s ease;
}
.create-generator-page .form-inputs__back-button:hover {
background: var(--background-color-secondary);
border-color: var(--border-color-hover);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.create-generator-page {
padding: var(--spacing-small);
}
.create-generator-page .form-section {
max-width: 100%;
}
.create-generator-page .form-card {
padding: var(--spacing-medium);
}
.create-generator-page .form-actions {
flex-direction: column;
}
.create-generator-page .form-button {
width: 100%;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.create-generator-page .form-section {
max-width: 900px;
}
}
@media (min-width: 1025px) {
.create-generator-page {
padding: var(--spacing-large) var(--spacing-medium);
}
.create-generator-page .form-section {
max-width: 1000px;
}
.create-generator-page .form-card {
padding: var(--spacing-xlarge);
}
}.templates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.75rem;
}
.no-results {
padding: 1.5rem;
text-align: center;
color: var(--font-color);
opacity: 0.7;
font-style: italic;
background-color: var(--background-color-alt);
border-radius: 8px;
border: 1px dashed rgba(0, 0, 0, 0.08);
}
.no-results::before {
content: '🖼️';
display: block;
font-size: 2rem;
margin-bottom: 0.5rem;
opacity: 0.5;
}
.view-all-templates {
margin-top: 1rem;
text-align: center;
}
.view-all-link {
display: inline-block;
color: var(--klee);
font-size: 0.85rem;
text-decoration: none;
padding: 0.4rem 0.8rem;
border: 1px solid var(--klee);
border-radius: 6px;
transition: all 0.2s ease;
}
.view-all-link:hover {
background-color: var(--klee);
color: white;
}
.template-card {
background-color: var(--background-color);
border-radius: 10px;
overflow: hidden;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.03);
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.template-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}
.template-preview {
width: 100%;
height: 140px;
object-fit: cover;
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
transition: all 0.3s ease;
}
.template-card:hover .template-preview {
transform: scale(1.03);
}
.template-info {
padding: 0.75rem;
flex: 1;
display: flex;
flex-direction: column;
}
.template-info h3 {
margin: 0 0 0.3rem 0;
font-size: 0.95rem;
color: var(--font-color-h);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.template-info p {
margin: 0 0 0.5rem 0;
font-size: 0.8rem;
color: var(--font-color);
line-height: 1.3;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.template-tags {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-bottom: 0.5rem;
}
.template-tag {
background-color: rgba(70, 150, 43, 0.08);
color: var(--klee);
font-size: 0.65rem;
padding: 0.15rem 0.3rem;
border-radius: 4px;
white-space: nowrap;
}
.template-link {
background-color: transparent;
color: var(--klee);
border: 1px solid var(--klee);
border-radius: 6px;
padding: 0.3rem 0.6rem;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: inline-block;
text-align: center;
font-weight: 500;
align-self: flex-start;
}
.template-link:hover {
background-color: var(--klee);
color: white;
}
@media (max-width: 768px) {
.templates-grid {
grid-template-columns: 1fr;
}
}
/* .about-section {
margin-top: 40px;
padding: 20px;
border-top: var(--border-subtle);
background-color: var(--background-color-alt);
border-radius: 8px;
width: 100%;
box-sizing: border-box;
} */
/* .about-section h2 {
margin-bottom: 20px;
font-size: 1.5rem;
color: var(--font-color-h);
} */
.about-content {
display: flex;
align-items: flex-start;
gap: 20px;
}
.about-image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
border: 3px solid var(--background-color-pure);
box-shadow: var(--shadow-md);
}
.about-text {
flex: 1;
}
.about-text p {
margin: 0;
line-height: 1.6;
color: var(--font-color);
}
@media (max-width: 768px) {
.about-content {
flex-direction: column;
align-items: center;
text-align: center;
}
.about-image {
margin-bottom: 15px;
}
}
@media (max-width: 480px) {
.about-image {
width: 120px;
height: 120px;
}
}
.contact-form-section {
background-color: var(--background-color);
border-radius: var(--spacing-xsmall);
padding: var(--spacing-large);
box-shadow: var(--shadow-md);
}
.contact-form {
margin-top: var(--spacing-medium);
}
.contact-form .form-group {
margin-bottom: 15px;
}
.contact-form label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: var(--font-color);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
width: 100%;
padding: 10px;
border: none;
border-radius: 4px;
box-sizing: border-box;
font-size: 0.9em;
background-color: var(--background-color-alt);
color: var(--font-color);
transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
/* Contact-form input focus styles - DISABLED to prevent conflicts with main form-inputs.css */
/*
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
outline: none;
border: 2px solid var(--grashalm);
padding: 8px;
box-shadow: 0 0 5px rgba(81, 163, 37, 0.5);
}
*/
.contact-form textarea {
min-height: 100px;
resize: vertical;
}
/*
.contact-submit-button {
background-color: var(--button-primary-bg-color);
color: var(--button-primary-text-color);
border: none;
padding: var(--button-padding-vertical) var(--button-padding-horizontal);
border-radius: var(--button-border-radius);
cursor: pointer;
font-size: 1em;
transition: background-color 0.2s ease;
}
.contact-submit-button:hover {
background-color: var(--button-primary-hover-bg-color);
}
*/ /*
* Bubble Animation Styles für den Labor-Tab
*/
.bubble-container {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10px;
overflow: visible;
pointer-events: none;
z-index: 1;
}
.bubble {
position: absolute;
border-radius: 50%;
transform-origin: center center;
background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.5), rgba(161, 224, 186, 0.6));
box-shadow: 0 0 2px rgba(255, 255, 255, 0.8) inset;
}
/* Wrapper für Positionierung der Bubbles relativ zum Tab */
.bubble-tab-wrapper {
position: relative;
display: inline-block;
}
/* Container für Positionierung */
.bubbles-position-wrapper {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 0;
overflow: visible;
pointer-events: none;
}
/* Mobile Optimierung */
@media (max-width: 767px) {
.bubble {
/* Kleinere Blasen auf mobilen Geräten */
transform: scale(0.8);
}
} .filter-popover {
position: fixed;
background: var(--background-color-alt);
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
z-index: 1000;
min-width: 280px;
max-width: 400px;
max-height: 80vh;
overflow-y: auto;
animation: filterPopoverFadeIn 0.2s ease-out;
}
@keyframes filterPopoverFadeIn {
from {
opacity: 0;
transform: translateY(-8px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.filter-popover-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 12px 20px;
border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
}
.filter-popover-title {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--font-color-h);
}
.filter-popover-close {
background: none;
border: none;
font-size: 20px;
color: var(--font-color);
cursor: pointer;
padding: 4px;
margin: -4px;
border-radius: 4px;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
}
.filter-popover-close:hover {
background-color: var(--hover-color-alt);
}
.filter-popover-close:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.filter-popover-body {
padding: 16px 20px 20px 20px;
}
/* Desktop positioning - anchor to the gear icon */
@media (min-width: 769px) {
.filter-popover {
/* Will be positioned dynamically by JavaScript if needed */
top: auto;
right: 20px;
bottom: auto;
left: auto;
/* For now, simple positioning - can be enhanced later */
top: 60px;
right: 20px;
}
}
/* Mobile positioning - centered at bottom */
@media (max-width: 768px) {
.filter-popover {
position: fixed;
bottom: 20px;
left: 20px;
right: 20px;
top: auto;
min-width: auto;
max-width: none;
max-height: 60vh;
}
}
/* Dark theme support */
[data-theme="dark"] .filter-popover {
background: var(--background-color-alt);
border-color: var(--border-color);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .filter-popover-header {
border-bottom-color: var(--border-color);
}
[data-theme="dark"] .filter-popover-close:hover {
background-color: var(--hover-color);
}
/* Filter section styles */
.filter-section {
margin-bottom: 20px;
}
.filter-section:last-child {
margin-bottom: 0;
}
.filter-section-title {
font-size: 14px;
font-weight: 600;
color: var(--font-color-h);
margin: 0 0 12px 0;
}
.filter-option {
display: flex;
align-items: center;
margin-bottom: 12px;
cursor: pointer;
font-size: 14px;
color: var(--font-color);
}
.filter-option:last-child {
margin-bottom: 0;
}
.filter-option input[type="checkbox"] {
margin-right: 12px;
margin-top: 0;
}
.filter-option-label {
flex-grow: 1;
line-height: 1.4;
}
.filter-option-description {
font-size: 12px;
color: var(--font-color);
opacity: 0.7;
margin-top: 2px;
}
/* Filter actions */
.filter-actions {
display: flex;
gap: 12px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
}
.filter-actions button {
flex: 1;
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.filter-actions .secondary-button {
background: var(--background-color);
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
color: var(--font-color);
}
.filter-actions .secondary-button:hover {
background: var(--hover-color-alt);
}
.filter-actions .primary-button {
background: var(--primary);
border: 1px solid var(--primary);
color: var(--weiß);
}
.filter-actions .primary-button:hover {
background: var(--primary-hover, var(--primary));
transform: translateY(-1px);
}
/* Dark theme for filter actions */
[data-theme="dark"] .filter-actions {
border-top-color: var(--border-color);
}
[data-theme="dark"] .filter-actions .secondary-button {
background: var(--background-color);
border-color: var(--border-color);
}
[data-theme="dark"] .filter-actions .secondary-button:hover {
background: var(--hover-color);
}.search-bar-container {
width: 100%;
max-width: 584px;
margin: 0 auto;
}
.search-form {
display: flex;
flex-direction: column;
width: 100%;
}
.search-input-wrapper {
position: relative;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
background-color: var(--background-color);
border: 2px solid var(--background-color-alt);
border-radius: 24px;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
overflow: hidden;
}
.search-input-wrapper:focus-within {
border-color: var(--klee);
box-shadow: var(--shadow-sm);
}
/* SearchBarStyles input styles - More specific to avoid conflicts with global form styles */
.search-bar-container .search-form .search-input-wrapper .search-input {
flex: 1;
height: 48px;
padding: 0 16px;
font-size: 16px;
border: none;
outline: none;
background-color: transparent;
color: var(--font-color);
width: 100%;
min-height: 48px;
box-shadow: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.search-bar-container .search-form .search-input-wrapper .search-input:focus {
border: none;
background-color: transparent;
box-shadow: none;
outline: none;
}
.search-bar-container .search-form .search-input-wrapper .search-input::placeholder {
color: var(--font-color);
opacity: 0.6;
}
.search-bar-container .search-form .search-input-wrapper .search-icon-button {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: none;
background-color: transparent;
cursor: pointer;
padding: 0;
color: var(--font-color);
transition: color 0.2s ease;
}
.search-bar-container .search-form .search-input-wrapper .search-icon-button:hover {
color: var(--klee);
}
.search-bar-container .search-form .search-input-wrapper .search-icon-button:disabled {
color: var(--font-color-disabled);
cursor: not-allowed;
}
.search-bar-container .search-form .search-input-wrapper .search-icon {
width: 18px;
height: 18px;
transition: transform 0.2s ease-in-out;
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
}
.search-bar-container .search-form .search-input-wrapper .search-icon-button:hover .search-icon {
transform: none !important;
}
.search-bar-container .search-form .search-input-wrapper .search-icon-button:active .search-icon {
transform: none !important;
}
.button-spinner {
width: 18px;
height: 18px;
border: 2px solid var(--background-color-alt);
border-top: 2px solid var(--klee);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.ai-disclaimer {
margin-top: var(--spacing-medium);
text-align: center;
font-size: 13px;
color: var(--font-color);
opacity: 0.7;
transition: opacity 0.3s ease;
padding: 0 var(--spacing-small);
line-height: 1.4;
}
.example-questions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-small);
margin-top: var(--spacing-medium);
justify-content: center;
}
.example-question {
display: flex;
align-items: center;
gap: 8px;
background-color: var(--background-color-alt);
border: none;
border-radius: 18px;
padding: 8px 16px;
font-size: 14px;
color: var(--font-color);
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.example-question:hover {
background-color: var(--hover-color-alt);
transform: translateY(-2px);
}
.example-question:active {
transform: translateY(0);
}
/* Animation für das Erscheinen der Suchleiste */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.search-bar-container {
animation: fadeIn 0.3s ease-out forwards;
}
.ai-disclaimer {
animation: fadeIn 0.3s ease-out 0.1s forwards;
opacity: 0;
animation-fill-mode: forwards;
}
.example-questions {
animation: fadeIn 0.3s ease-out 0.2s forwards;
opacity: 0;
animation-fill-mode: forwards;
}
/* Responsive Design */
@media (max-width: 768px) {
.search-bar-container .search-form .search-input-wrapper {
border-radius: 18px;
}
.search-bar-container .search-form .search-input-wrapper .search-input {
height: 42px;
min-height: 42px;
font-size: 15px;
}
.search-bar-container .search-form .search-input-wrapper .search-icon-button {
width: 42px;
height: 42px;
}
.example-questions {
flex-direction: column;
align-items: center;
}
.example-question {
width: 100%;
max-width: 280px;
justify-content: center;
}
} /* Number input styling for filter options */
.filter-number-option {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
font-size: 14px;
color: var(--font-color);
}
.filter-number-option:last-child {
margin-bottom: 0;
}
.filter-number-option label {
flex-grow: 1;
margin-right: 12px;
font-weight: 500;
}
.filter-number-option input[type="number"] {
width: 60px;
padding: 4px 8px;
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
border-radius: 4px;
background: var(--background-color);
color: var(--font-color);
font-size: 14px;
text-align: center;
}
.filter-number-option input[type="number"]:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-color: var(--primary);
}
/* Dark theme support */
[data-theme="dark"] .filter-number-option input[type="number"] {
background: var(--background-color-alt);
border-color: var(--border-color);
}
/* Document type filter specific styles */
.document-type-filter {
width: 100%;
}
/* Loading and error states for bundestag search */
.bundestag-search-page .search-loading {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
color: var(--font-color);
}
.bundestag-search-page .search-loading .loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--background-color-alt);
border-top: 3px solid var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 16px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.bundestag-search-page .search-error {
grid-column: 1 / -1;
padding: 20px;
margin: 20px;
background-color: rgba(255, 241, 122, 0.2);
border: 1px solid var(--sonne);
border-radius: 8px;
color: var(--font-color);
text-align: center;
}
.bundestag-search-page .no-results {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
color: var(--font-color);
}
.bundestag-search-page .no-results p {
margin: 0 0 12px 0;
font-size: 16px;
}
.bundestag-search-page .no-results p:first-child {
font-weight: 600;
font-size: 18px;
}
.bundestag-search-page .welcome-message {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
color: var(--font-color);
}
.bundestag-search-page .welcome-message h2 {
color: var(--font-color-h);
margin: 0 0 16px 0;
font-size: 24px;
}
.bundestag-search-page .welcome-message p {
margin: 0 0 32px 0;
font-size: 16px;
opacity: 0.8;
}
.bundestag-search-page .example-searches h3 {
color: var(--font-color-h);
margin: 0 0 16px 0;
font-size: 18px;
}
.bundestag-search-page .example-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.bundestag-search-page .example-button {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--background-color-alt);
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
border-radius: 20px;
color: var(--font-color);
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
font-size: 14px;
}
.bundestag-search-page .example-button:hover {
background: var(--hover-color-alt);
transform: translateY(-1px);
}
.bundestag-search-page .results-summary {
grid-column: 1 / -1;
padding: 0 16px 20px 16px;
text-align: center;
color: var(--font-color);
font-size: 14px;
opacity: 0.8;
}
/* Dark theme support */
[data-theme="dark"] .bundestag-search-page .search-error {
background-color: rgba(255, 241, 122, 0.1);
}
[data-theme="dark"] .bundestag-search-page .example-button {
background: var(--hover-color-alt);
border-color: var(--border-color);
}
[data-theme="dark"] .bundestag-search-page .example-button:hover {
background: var(--background-color-alt);
}
/* Bundestag Document Card Styles */
.bundestag-document-card .document-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
}
.bundestag-document-card .document-header-left {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.bundestag-document-card .document-header-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Document Menu Button */
.bundestag-document-card .document-menu-button {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: var(--card-border-radius-small);
color: var(--font-color);
cursor: pointer;
transition: all 0.2s ease;
opacity: 0.7;
}
.bundestag-document-card .document-menu-button:hover {
opacity: 1;
background: var(--hover-color-alt);
}
.bundestag-document-card .document-menu-button:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
opacity: 1;
}
/* Document Menu Dropdown */
.bundestag-document-card .document-menu {
background: var(--background-color);
border: var(--border-subtle);
border-radius: var(--card-border-radius-small);
box-shadow: var(--shadow-md);
padding: var(--spacing-xsmall);
min-width: 200px;
z-index: 1000;
}
.bundestag-document-card .document-menu-item {
display: flex;
align-items: center;
gap: var(--spacing-small);
width: 100%;
padding: var(--spacing-small) var(--spacing-medium);
background: transparent;
border: none;
border-radius: var(--card-border-radius-small);
color: var(--font-color);
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
font-size: 14px;
font-weight: 500;
}
.bundestag-document-card .document-menu-item:hover:not(:disabled) {
background: var(--hover-color-alt);
color: var(--font-color-h);
}
.bundestag-document-card .document-menu-item:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.bundestag-document-card .document-menu-item .menu-item-icon {
flex-shrink: 0;
font-size: 16px;
opacity: 0.8;
}
/* Success message styling */
.bundestag-search-page .search-success {
grid-column: 1 / -1;
padding: 16px 20px;
margin: 20px;
background-color: rgba(72, 187, 120, 0.1);
border: 1px solid rgba(72, 187, 120, 0.3);
border-radius: 8px;
color: var(--font-color);
text-align: center;
}
.bundestag-search-page .search-success p {
margin: 0;
font-size: 14px;
font-weight: 500;
}
/* Dark theme support for menu */
[data-theme="dark"] .bundestag-document-card .document-menu {
background: var(--background-color-alt);
border: var(--border-subtle);
box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .bundestag-document-card .document-menu-button {
opacity: 0.8;
}
[data-theme="dark"] .bundestag-document-card .document-menu-button:hover {
opacity: 1;
background: var(--hover-color-alt);
border-color: var(--border-subtle);
}
[data-theme="dark"] .bundestag-search-page .search-success {
background-color: rgba(72, 187, 120, 0.15);
border-color: rgba(72, 187, 120, 0.4);
}/* Download Fallback Styles - Uses existing button.css classes */
.download-fallback {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
.fallback-message {
background-color: var(--background-color);
border: 2px solid var(--primary);
border-radius: var(--button-border-radius);
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.fallback-message p {
margin-bottom: 1.5rem;
font-size: 1.1rem;
font-weight: 500;
color: var(--font-color);
}
.fallback-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Use existing btn-primary class */
.fallback-buttons .btn-primary {
width: 100%;
}
/* Secondary button using existing form-button style */
.fallback-buttons .btn-secondary {
width: 100%;
background-color: var(--weiß);
color: #333;
border: 2px solid var(--primary);
border-radius: var(--button-border-radius);
padding: var(--button-padding);
cursor: pointer;
transition: all var(--button-transition);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--button-font-size);
}
.fallback-buttons .btn-secondary:hover {
background-color: var(--klee);
color: var(--weiß);
transform: scale(1.01);
}
@media (max-width: 768px) {
.download-fallback {
padding: var(--spacing-small);
}
.fallback-message {
padding: var(--spacing-medium);
}
}
/* Export Progress Overlay */
.export-progress-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
border-radius: inherit;
z-index: 10;
}
.progress-content {
background-color: var(--background-color);
border: 2px solid var(--tanne);
border-radius: var(--button-border-radius);
padding: var(--spacing-large);
text-align: center;
min-width: 200px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.progress-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--border-color);
border-top-color: var(--tanne);
border-radius: 50%;
animation: spin 1s ease-in-out infinite;
margin: 0 auto var(--spacing-medium);
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Spinner with percentage overlay */
.spinner-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
}
.spinner-container .spinner {
width: 100%;
height: 100%;
border: 3px solid var(--weiß);
border-top-color: var(--tanne);
border-radius: 50%;
animation: spin 1s ease-in-out infinite;
}
.spinner-percentage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.8rem;
font-weight: bold;
color: var(--font-color);
text-align: center;
line-height: 1;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.progress-content p {
margin: 0 0 var(--spacing-medium);
font-weight: 500;
color: var(--font-color);
}
.progress-bar {
width: 100%;
height: 8px;
background-color: var(--border-color);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
background-color: var(--tanne);
transition: width 0.3s ease;
border-radius: 4px;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.8rem;
font-weight: bold;
color: var(--font-color);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}/* CanvaSelector Component Styles */
/* Image Source Toggle */
.image-source-toggle {
display: flex;
gap: var(--spacing-xxsmall);
margin-top: var(--spacing-xxsmall);
}
.toggle-button {
display: flex;
align-items: center;
gap: var(--spacing-xxsmall);
padding: var(--spacing-small) var(--spacing-medium);
background: var(--background-color-secondary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
color: var(--font-color);
cursor: pointer;
transition: all 0.2s ease;
font-size: var(--font-size-small);
flex: 1;
justify-content: center;
}
.toggle-button:hover {
background: var(--background-color-tertiary);
border-color: var(--tanne);
}
.toggle-button.active {
background: var(--tanne);
color: white;
border-color: var(--tanne);
}
.toggle-icon {
width: 16px;
height: 16px;
}
.canva-selector {
width: 100%;
margin: var(--spacing-medium) 0;
}
/* Header */
.canva-selector-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--spacing-medium);
gap: var(--spacing-small);
}
.header-info h4 {
margin: 0 0 var(--spacing-xxsmall) 0;
color: var(--font-color);
font-size: var(--font-size-medium);
font-weight: 600;
}
.header-info p {
margin: 0;
color: var(--font-color-secondary);
font-size: var(--font-size-small);
}
/* Refresh Button */
.refresh-button {
display: inline-flex;
align-items: center;
gap: var(--spacing-xxsmall);
padding: var(--spacing-small);
background: var(--background-color-secondary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
color: var(--font-color);
cursor: pointer;
transition: all 0.2s ease;
font-size: var(--font-size-small);
}
.refresh-button:hover {
background: var(--background-color-tertiary);
transform: scale(1.01);
}
.refresh-button.small {
padding: var(--spacing-xsmall);
min-width: auto;
}
.refresh-button svg {
width: 16px;
height: 16px;
}
/* Loading States */
.canva-selector-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-xlarge) var(--spacing-medium);
color: var(--font-color-secondary);
}
.canva-selector-loading p {
margin: var(--spacing-small) 0 0 0;
font-size: var(--font-size-small);
}
.loading-spinner {
width: 24px;
height: 24px;
border: 2px solid var(--border-color);
border-top: 2px solid var(--tanne);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.loading-spinner.small {
width: 16px;
height: 16px;
border-width: 1.5px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Message States */
.canva-selector-message {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-xlarge) var(--spacing-medium);
text-align: center;
background: var(--background-color-secondary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
}
.canva-selector-message.error {
border-color: var(--error-color);
background: var(--error-background, var(--background-color-secondary));
}
.canva-selector-message .icon {
width: 32px;
height: 32px;
color: var(--font-color-secondary);
margin-bottom: var(--spacing-small);
}
.canva-selector-message h4 {
margin: 0 0 var(--spacing-xsmall) 0;
color: var(--font-color);
font-size: var(--font-size-medium);
font-weight: 600;
}
.canva-selector-message p {
margin: 0 0 var(--spacing-medium) 0;
color: var(--font-color-secondary);
font-size: var(--font-size-small);
max-width: 300px;
}
/* Canva Connect Button */
.canva-connect-button {
padding: var(--spacing-small) var(--spacing-medium);
background: #7d2ae8; /* Canva brand color */
color: white;
border: none;
border-radius: var(--border-radius);
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-size: var(--font-size-small);
}
.canva-connect-button:hover {
background: #6a23c7;
transform: scale(1.01);
}
/* Designs Grid */
.canva-designs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--spacing-medium);
margin-top: var(--spacing-medium);
}
@media (max-width: 768px) {
.canva-designs-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--spacing-small);
}
}
@media (max-width: 480px) {
.canva-designs-grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
}
/* Design Cards */
.canva-design-card {
background: var(--background-color);
border: 2px solid var(--border-color);
border-radius: var(--border-radius);
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.canva-design-card:hover {
border-color: var(--tanne);
transform: scale(1.01);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.canva-design-card.selected {
border-color: var(--tanne);
box-shadow: 0 0 0 2px rgba(125, 42, 232, 0.2);
}
.canva-design-card.disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.canva-design-card.no-image {
opacity: 0.5;
cursor: not-allowed;
}
/* Design Image */
.design-image-wrapper {
position: relative;
width: 100%;
height: 150px;
overflow: hidden;
background: var(--background-color-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.design-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease;
}
.canva-design-card:hover .design-image {
transform: scale(1.02);
}
/* No Image Placeholder */
.no-image-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: var(--font-color-secondary);
gap: var(--spacing-xxsmall);
}
.placeholder-icon {
width: 24px;
height: 24px;
}
.no-image-placeholder span {
font-size: var(--font-size-xsmall);
}
/* Selection Overlay */
.selection-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(125, 42, 232, 0.8);
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.2s ease;
}
.check-icon {
width: 32px;
height: 32px;
color: white;
}
/* Loading Overlay */
.loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
}
/* Design Info */
.design-info {
padding: var(--spacing-small);
}
.design-title {
margin: 0 0 var(--spacing-xxsmall) 0;
font-size: var(--font-size-small);
font-weight: 600;
color: var(--font-color);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.design-date {
font-size: var(--font-size-xsmall);
color: var(--font-color-secondary);
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.canva-selector-header {
flex-direction: column;
gap: var(--spacing-small);
}
.design-image-wrapper {
height: 120px;
}
.canva-selector-message {
padding: var(--spacing-large) var(--spacing-small);
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.loading-overlay {
background: rgba(0, 0, 0, 0.8);
}
}.typing-indicator {
display: flex;
align-items: center;
padding-top: 10px; /* Ensure vertical alignment with icon */
padding-bottom: 10px; /* Ensure vertical alignment with icon */
}
/* The .assistant-icon is styled globally in EditorChat.css for .chat-message.assistant */
/* We can add specific adjustments if needed, but it should inherit positioning */
.typing-dot {
width: 8px;
height: 8px;
background-color: var(--font-color); /* Use theme variable */
border-radius: 50%;
display: inline-block;
margin: 0 2px; /* Adjust spacing between dots */
} /*!
* Quill Editor v2.0.3
* https://quilljs.com
* Copyright (c) 2017-2024, Slab
* Copyright (c) 2014, Jason Chen
* Copyright (c) 2013, salesforce.com
*/
.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-bubble.ql-toolbar:after,.ql-bubble .ql-toolbar:after{clear:both;content:'';display:table}.ql-bubble.ql-toolbar button,.ql-bubble .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-bubble.ql-toolbar button svg,.ql-bubble .ql-toolbar button svg{float:left;height:100%}.ql-bubble.ql-toolbar button:active:hover,.ql-bubble .ql-toolbar button:active:hover{outline:none}.ql-bubble.ql-toolbar input.ql-image[type=file],.ql-bubble .ql-toolbar input.ql-image[type=file]{display:none}.ql-bubble.ql-toolbar button:hover,.ql-bubble .ql-toolbar button:hover,.ql-bubble.ql-toolbar button:focus,.ql-bubble .ql-toolbar button:focus,.ql-bubble.ql-toolbar button.ql-active,.ql-bubble .ql-toolbar button.ql-active,.ql-bubble.ql-toolbar .ql-picker-label:hover,.ql-bubble .ql-toolbar .ql-picker-label:hover,.ql-bubble.ql-toolbar .ql-picker-label.ql-active,.ql-bubble .ql-toolbar .ql-picker-label.ql-active,.ql-bubble.ql-toolbar .ql-picker-item:hover,.ql-bubble .ql-toolbar .ql-picker-item:hover,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected{color:#fff}.ql-bubble.ql-toolbar button:hover .ql-fill,.ql-bubble .ql-toolbar button:hover .ql-fill,.ql-bubble.ql-toolbar button:focus .ql-fill,.ql-bubble .ql-toolbar button:focus .ql-fill,.ql-bubble.ql-toolbar button.ql-active .ql-fill,.ql-bubble .ql-toolbar button.ql-active .ql-fill,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#fff}.ql-bubble.ql-toolbar button:hover .ql-stroke,.ql-bubble .ql-toolbar button:hover .ql-stroke,.ql-bubble.ql-toolbar button:focus .ql-stroke,.ql-bubble .ql-toolbar button:focus .ql-stroke,.ql-bubble.ql-toolbar button.ql-active .ql-stroke,.ql-bubble .ql-toolbar button.ql-active .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-bubble.ql-toolbar button:hover .ql-stroke-miter,.ql-bubble .ql-toolbar button:hover .ql-stroke-miter,.ql-bubble.ql-toolbar button:focus .ql-stroke-miter,.ql-bubble .ql-toolbar button:focus .ql-stroke-miter,.ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,.ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#fff}@media (pointer:coarse){.ql-bubble.ql-toolbar button:hover:not(.ql-active),.ql-bubble .ql-toolbar button:hover:not(.ql-active){color:#ccc}.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#ccc}.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#ccc}}.ql-bubble{box-sizing:border-box}.ql-bubble *{box-sizing:border-box}.ql-bubble .ql-hidden{display:none}.ql-bubble .ql-out-bottom,.ql-bubble .ql-out-top{visibility:hidden}.ql-bubble .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-bubble .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-bubble .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-bubble .ql-formats{display:inline-block;vertical-align:middle}.ql-bubble .ql-formats:after{clear:both;content:'';display:table}.ql-bubble .ql-stroke{fill:none;stroke:#ccc;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-bubble .ql-stroke-miter{fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:2}.ql-bubble .ql-fill,.ql-bubble .ql-stroke.ql-fill{fill:#ccc}.ql-bubble .ql-empty{fill:none}.ql-bubble .ql-even{fill-rule:evenodd}.ql-bubble .ql-thin,.ql-bubble .ql-stroke.ql-thin{stroke-width:1}.ql-bubble .ql-transparent{opacity:.4}.ql-bubble .ql-direction svg:last-child{display:none}.ql-bubble .ql-direction.ql-active svg:last-child{display:inline}.ql-bubble .ql-direction.ql-active svg:first-child{display:none}.ql-bubble .ql-editor h1{font-size:2em}.ql-bubble .ql-editor h2{font-size:1.5em}.ql-bubble .ql-editor h3{font-size:1.17em}.ql-bubble .ql-editor h4{font-size:1em}.ql-bubble .ql-editor h5{font-size:.83em}.ql-bubble .ql-editor h6{font-size:.67em}.ql-bubble .ql-editor a{text-decoration:underline}.ql-bubble .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-bubble .ql-editor code,.ql-bubble .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-bubble .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-bubble .ql-editor code{font-size:85%;padding:2px 4px}.ql-bubble .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-bubble .ql-editor img{max-width:100%}.ql-bubble .ql-picker{color:#ccc;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-bubble .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-bubble .ql-picker-label::before{display:inline-block;line-height:22px}.ql-bubble .ql-picker-options{background-color:#444;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-bubble .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-bubble .ql-picker.ql-expanded .ql-picker-label{color:#777;z-index:2}.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#777}.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#777}.ql-bubble .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-bubble .ql-color-picker,.ql-bubble .ql-icon-picker{width:28px}.ql-bubble .ql-color-picker .ql-picker-label,.ql-bubble .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-bubble .ql-color-picker .ql-picker-label svg,.ql-bubble .ql-icon-picker .ql-picker-label svg{right:4px}.ql-bubble .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-bubble .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-bubble .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-bubble .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-bubble .ql-picker.ql-header{width:98px}.ql-bubble .ql-picker.ql-header .ql-picker-label::before,.ql-bubble .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-bubble .ql-picker.ql-font{width:108px}.ql-bubble .ql-picker.ql-font .ql-picker-label::before,.ql-bubble .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-bubble .ql-picker.ql-size{width:98px}.ql-bubble .ql-picker.ql-size .ql-picker-label::before,.ql-bubble .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-bubble .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-bubble .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-bubble .ql-toolbar .ql-formats{margin:8px 12px 8px 0}.ql-bubble .ql-toolbar .ql-formats:first-child{margin-left:12px}.ql-bubble .ql-color-picker svg{margin:1px}.ql-bubble .ql-color-picker .ql-picker-item.ql-selected,.ql-bubble .ql-color-picker .ql-picker-item:hover{border-color:#fff}.ql-bubble .ql-tooltip{background-color:#444;border-radius:25px;color:#fff}.ql-bubble .ql-tooltip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;content:" ";display:block;left:50%;margin-left:-6px;position:absolute}.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow{border-bottom:6px solid #444;top:-6px}.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow{border-top:6px solid #444;bottom:-6px}.ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor{display:block}.ql-bubble .ql-tooltip.ql-editing .ql-formats{visibility:hidden}.ql-bubble .ql-tooltip-editor{display:none}.ql-bubble .ql-tooltip-editor input[type=text]{background:transparent;border:none;color:#fff;font-size:13px;height:100%;outline:none;padding:10px 20px;position:absolute;width:100%}.ql-bubble .ql-tooltip-editor a{top:10px;position:absolute;right:20px}.ql-bubble .ql-tooltip-editor a:before{color:#ccc;content:"\00D7";font-size:16px;font-weight:bold}.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close){position:relative;white-space:nowrap}.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close)::before{background-color:#444;border-radius:15px;top:-5px;font-size:12px;color:#fff;content:attr(href);font-weight:normal;overflow:hidden;padding:5px 15px;text-decoration:none;z-index:1}.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close)::after{border-top:6px solid #444;border-left:6px solid transparent;border-right:6px solid transparent;top:0;content:" ";height:0;width:0}.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close)::before,.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close)::after{left:0;margin-left:50%;position:absolute;transform:translate(-50%,-100%);transition:visibility 0s ease 200ms;visibility:hidden}.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover::before,.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover::after{visibility:visible}
/*# sourceMappingURL=quill.bubble.css.map*/:root {
/* Base Colors */
--black: #000000;
--white: #ffffff;
/* Primary Color System ("Klee") - Limited digital use, mainly illustrations */
--primary-50: #e8f5e8;
--primary-100: #c8e6c8;
--primary-200: #a3d4a3;
--primary-300: #7dc17d;
--primary-400: #60b260;
--primary-500: #42a342;
--primary-600: #008939; /* Base "Klee" color */
--primary-700: #007230;
--primary-800: #005c27;
--primary-900: #004019;
--primary-950: #002d12;
/* Secondary Color System ("Tanne") - Primary digital interaction color */
--secondary-50: #e8f2ee;
--secondary-100: #c8dfd5;
--secondary-200: #a3c9b8;
--secondary-300: #7db39a;
--secondary-400: #60a183;
--secondary-500: #428f6c;
--secondary-600: #005538; /* Base "Tanne" color */
--secondary-700: #004a2f;
--secondary-800: #003e26;
--secondary-900: #00321d;
--secondary-950: #002315;
/* Grey Color System */
--grey-50: #f9f9f9;
--grey-100: #efefef;
--grey-200: #dcdcdc;
--grey-300: #bdbdbd;
--grey-400: #989898;
--grey-500: #7c7c7c;
--grey-600: #656565;
--grey-700: #525252;
--grey-800: #464646;
--grey-900: #3d3d3d;
--grey-950: #262626;
/* Neutral Color System ("Sand") - Backgrounds and subtle hover */
--neutral-500: #f8f4ec;
--neutral-600: #F5F1E9; /* Base "Sand" color */
--neutral-700: #e8e0d4;
/* Legacy compatibility - maintaining old variable names */
--primary: var(--secondary-600);
--klee: var(--primary-600);
--secondary: var(--neutral-600);
/* Semantic color mapping based on brand guidelines */
--primary: var(--secondary-600); /* Tanne - main digital interactions */
--secondary: var(--neutral-600); /* Sand - backgrounds, subtle hover */
--accent: var(--primary-600); /* Klee - limited use, illustrations */
--weiß: var(--white);
--dunkelgruen: var(--secondary-700);
--dunkelgruen-alt: var(--secondary-800);
--error-red: #D32F2F;
--backgroundgruen: var(--primary-50);
--backgroundgruen-dark: var(--primary-100);
--background-red-light: #f5e8e8; /* Very light red for preview mode */
--dunkelgrau: var(--grey-900);
--anthrazit: var(--grey-950);
/* Semantic Color Variables - Theme-aware */
--background-color: var(--white);
--background-color-pure: var(--white);
--background-color-alt: var(--backgroundgruen);
--background-color-sand: var(--neutral-600);
--hover-color-alt: var(--secondary-50);
--font-color: var(--grey-800);
--font-color-h: var(--secondary-600);
--font-color-h3: var(--secondary-600);
--link-color: var(--secondary-600);
--button-background-color: var(--grey-200);
--button-color: var(--secondary-600);
--button-color-hover: var(--neutral-600);
--button-text-color: var(--black);
--button-hover-color: var(--secondary-50);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
--border-subtle: 1px solid rgba(0, 0, 0, 0.1);
--spacing-xxsmall: 4px;
--spacing-xsmall: 8px;
--spacing-small: 12px;
--spacing-medium: 16px;
--spacing-large: 24px;
--spacing-xlarge: 32px;
--spacing-xxlarge: 48px;
--interactive-accent-color: var(--secondary-600);
--font-color-disabled: var(--grey-400);
--border-color-disabled: var(--grey-200);
/* Scrollbar variables */
--scrollbar-track-color: var(--background-color-alt);
--scrollbar-thumb-color: var(--grey-600);
--scrollbar-thumb-hover-color: var(--grey-700);
/* Custom Chat variables */
--chat-background-light: var(--backgroundgruen);
--ai-message-background-light: var(--white);
--ai-message-text-color-light: var(--grey-800);
--assistant-icon-background-light: var(--white);
--assistant-icon-color-light: var(--grey-800);
--chat-message-user-name-color-light: var(--grey-600);
--chat-input-background-light: var(--white);
--chat-input-text-color-light: var(--font-color);
--chat-input-border-color-light: var(--background-color-alt);
--chat-background: var(--chat-background-light);
--ai-message-background: var(--ai-message-background-light);
--ai-message-text-color: var(--ai-message-text-color-light);
--assistant-icon-background: var(--assistant-icon-background-light);
--assistant-icon-color: var(--assistant-icon-color-light);
--chat-message-user-name-color: var(--chat-message-user-name-color-light);
--chat-input-background: var(--chat-input-background-light);
--chat-input-text-color: var(--chat-input-text-color-light);
--chat-input-border-color: var(--chat-input-border-color-light);
/* Card Styles */
--card-border-radius-small: 8px;
--card-border-radius-medium: 12px;
--card-border-radius-large: 16px;
--card-shadow-none: none;
--card-shadow-subtle: var(--shadow-sm);
--card-shadow-elevated: var(--shadow-md);
--card-shadow-floating: var(--shadow-lg);
--card-shadow-dramatic: var(--shadow-xl);
--card-background: var(--background-color);
--card-background-alt: var(--background-color-alt);
--card-border: var(--border-subtle);
--card-hover-shadow: var(--shadow-xl);
--card-hover-transform: translateY(-2px);
/* Form Input Styles */
--input-background: var(--grey-100);
--input-border: var(--border-subtle);
--input-border-focus: 2px solid var(--interactive-accent-color);
--input-border-error: 2px solid var(--error-red);
--input-text-color: var(--font-color);
--input-placeholder-color: var(--font-color-disabled);
--input-shadow-focus: 0 0 0 3px rgba(0, 85, 56, 0.1);
--input-transition: all 0.25s ease-out;
/* Form Element Dimensions */
--form-element-font-size: 12px;
--form-element-line-height: 1.5;
--form-element-padding-y: var(--spacing-small);
--form-element-padding-x: var(--spacing-small);
--form-element-min-height: 44px;
}
[data-theme="dark"] {
--background-color: var(--grey-950);
--background-color-pure: var(--grey-900);
--background-color-alt: var(--grey-950);
--background-color-sand: var(--grey-950);
--hover-color-alt: var(--grey-700);
--font-color: var(--neutral-600);
--font-color-h: var(--neutral-600);
--font-color-h3: var(--neutral-600);
--link-color: var(--neutral-600);
--button-background-color: var(--secondary-600);
--button-color: var(--neutral-600);
--button-color-hover: var(--primary-600);
--button-text-color: var(--white);
--button-hover-color: var(--grey-700);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.6);
--border-subtle: 1px solid rgba(255, 255, 255, 0.1);
--interactive-accent-color: var(--white);
--font-color-disabled: var(--grey-500);
--border-color-disabled: var(--grey-600);
/* Scrollbar variables for dark theme */
--scrollbar-track-color: var(--background-color-alt);
--scrollbar-thumb-color: var(--neutral-600);
--scrollbar-thumb-hover-color: var(--white);
/* Custom Chat variables for dark theme */
--chat-background: var(--background-color);
--ai-message-background: var(--background-color-alt);
--ai-message-text-color: var(--font-color);
--assistant-icon-background: var(--background-color-alt);
--assistant-icon-color: var(--font-color);
--chat-message-user-name-color: var(--grey-400);
--chat-input-background: var(--background-color);
--chat-input-text-color: var(--font-color);
--chat-input-border-color: var(--background-color-alt);
/* Form Input Styles for dark theme */
--input-background: var(--background-color-alt);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--background-color: var(--grey-950);
--background-color-pure: var(--grey-900);
--background-color-alt: var(--grey-800);
--background-color-sand: var(--secondary-700);
--hover-color-alt: var(--grey-700);
--font-color: var(--neutral-600);
--font-color-h: var(--neutral-600);
--font-color-h3: var(--neutral-600);
--link-color: var(--neutral-600);
--button-background-color: var(--secondary-600);
--button-color: var(--neutral-600);
--button-color-hover: var(--primary-600);
--button-text-color: var(--white);
--button-hover-color: var(--grey-700);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.6);
--border-subtle: 1px solid rgba(255, 255, 255, 0.1);
--interactive-accent-color: var(--white);
--font-color-disabled: var(--grey-500);
--border-color-disabled: var(--grey-600);
/* Scrollbar variables for prefers-color-scheme: dark */
--scrollbar-track-color: var(--background-color-alt);
--scrollbar-thumb-color: var(--neutral-600);
--scrollbar-thumb-hover-color: var(--white);
/* Custom Chat variables for prefers-color-scheme: dark */
--chat-background: var(--background-color);
--ai-message-background: var(--background-color-alt);
--ai-message-text-color: var(--font-color);
--assistant-icon-background: var(--background-color-alt);
--assistant-icon-color: var(--font-color);
--chat-message-user-name-color: var(--grey-400);
--chat-input-background: var(--background-color);
--chat-input-text-color: var(--font-color);
--chat-input-border-color: var(--background-color-alt);
/* Form Input Styles for prefers-color-scheme: dark */
--input-background: var(--background-color-alt);
}
}
body {
background-color: var(--background-color);
color: var(--font-color);
transition: background-color 0.5s, color 0.5s;
}
a {
color: var(--link-color);
transition: color 0.5s;
}
button {
background-color: var(--button-background-color);
color: var(--button-text-color);
transition: background-color 0.5s, color 0.5s;
}
.container {
width: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
margin-top: 0;
margin-bottom: 0px;
}
}
.progress-bar-container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-xsmall);
margin: 0;
padding: 0;
}
.progress-bar-container.progress-bar-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
pointer-events: none;
margin: 0;
padding: 0;
}
.progress-bar {
width: 100%;
height: 6px;
background-color: transparent;
border-radius: 0 3px 3px 0;
overflow: visible;
position: relative;
margin: 0;
padding: 0;
}
.progress-bar-fill {
height: 100%;
background-color: var(--primary);
transition: width 0.4s ease-in-out;
border-radius: 0 3px 3px 0;
box-shadow:
0 -2px 8px var(--primary),
0 -4px 16px var(--primary),
0 -6px 24px rgba(0, 85, 56, 0.4),
inset 0 0 4px rgba(255, 255, 255, 0.3);
position: relative;
animation: lightsaber-glow 3s ease-in-out infinite;
}
.progress-bar-text {
font-size: var(--form-element-font-size);
color: var(--font-color);
font-weight: 600;
text-align: center;
}
@media (max-width: 768px) {
.progress-bar-container.progress-bar-fixed {
left: 0;
right: 0;
}
.progress-bar {
height: 4px;
}
.progress-bar-fill {
border-radius: 0 2px 2px 0;
box-shadow:
0 -2px 6px var(--primary),
0 -4px 12px var(--primary),
0 -6px 18px rgba(0, 85, 56, 0.3);
}
.progress-bar-text {
font-size: 11px;
}
}
@keyframes lightsaber-glow {
0%, 100% {
box-shadow:
0 -2px 8px var(--primary),
0 -4px 16px var(--primary),
0 -6px 24px rgba(0, 85, 56, 0.4),
inset 0 0 4px rgba(255, 255, 255, 0.3);
}
50% {
box-shadow:
0 -3px 12px var(--primary),
0 -6px 20px var(--primary),
0 -9px 28px rgba(0, 85, 56, 0.6),
inset 0 0 6px rgba(255, 255, 255, 0.4);
}
}
/* E-Learning Feature Styles */
.elearning-page {
min-height: 100vh;
background-color: var(--background-color);
color: var(--font-color);
}
/* Header Section */
.elearning-header {
background: linear-gradient(135deg, var(--background-color-alt) 0%, var(--background-color) 100%);
padding: var(--spacing-xxlarge) var(--spacing-medium);
border-bottom: var(--border-subtle);
}
.elearning-header-content {
max-width: 1200px;
margin: 0 auto;
}
.elearning-title-section {
text-align: center;
margin-bottom: var(--spacing-xlarge);
}
.elearning-icon {
font-size: 4rem;
color: var(--secondary-600);
margin-bottom: var(--spacing-medium);
}
.elearning-title {
font-size: 3rem;
font-weight: 700;
color: var(--font-color-h);
margin: 0 0 var(--spacing-medium) 0;
text-align: center;
}
.elearning-subtitle {
font-size: 1.25rem;
color: var(--font-color);
margin: 0;
opacity: 0.8;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.elearning-intro {
display: flex;
justify-content: center;
}
.intro-card {
background: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-large);
box-shadow: var(--card-shadow-subtle);
display: flex;
align-items: flex-start;
gap: var(--spacing-medium);
max-width: 800px;
width: 100%;
}
.intro-icon {
font-size: 2rem;
color: var(--primary-600);
flex-shrink: 0;
margin-top: var(--spacing-xxsmall);
}
.intro-content h3 {
color: var(--font-color-h3);
margin: 0 0 var(--spacing-small) 0;
font-size: 1.25rem;
}
.intro-content p {
margin: 0;
line-height: 1.6;
color: var(--font-color);
}
/* Content Section */
.elearning-content {
max-width: 1200px;
margin: 0 auto;
padding: var(--spacing-xxlarge) var(--spacing-medium);
}
.chapters-section {
margin-bottom: var(--spacing-xxlarge);
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-xlarge);
}
.section-header h2 {
color: var(--font-color-h);
font-size: 2rem;
margin: 0 0 var(--spacing-small) 0;
}
.section-header p {
color: var(--font-color);
margin: 0;
opacity: 0.8;
}
/* Chapters Grid */
.chapters-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-large);
align-items: stretch;
}
/* Chapter Card */
.elearning-chapter-card {
background: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-large);
box-shadow: var(--card-shadow-subtle);
transition: var(--input-transition);
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
min-height: 300px;
}
.elearning-chapter-card:hover:not(.disabled) {
box-shadow: var(--card-shadow-elevated);
transform: var(--card-hover-transform);
}
.elearning-chapter-card:focus:not(.disabled) {
outline: var(--input-border-focus);
outline-offset: 2px;
}
.elearning-chapter-card.disabled {
opacity: 0.6;
cursor: not-allowed;
}
.elearning-chapter-card.coming-soon {
position: relative;
overflow: hidden;
}
.coming-soon-badge {
position: absolute;
top: var(--spacing-medium);
right: var(--spacing-medium);
background: var(--primary-600);
color: var(--white);
padding: var(--spacing-xxsmall) var(--spacing-small);
border-radius: var(--card-border-radius-small);
font-size: 0.75rem;
font-weight: 600;
z-index: 1;
}
/* Chapter Card Header */
.chapter-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--spacing-medium);
}
.chapter-card-icon {
font-size: 2rem;
color: var(--secondary-600);
}
.chapter-card-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--spacing-xxsmall);
}
.chapter-duration {
display: flex;
align-items: center;
gap: var(--spacing-xxsmall);
font-size: 0.875rem;
color: var(--font-color);
opacity: 0.7;
}
.chapter-duration svg {
font-size: 1rem;
}
.chapter-difficulty {
font-size: 0.75rem;
font-weight: 600;
padding: var(--spacing-xxsmall) var(--spacing-small);
background: var(--background-color-alt);
border-radius: var(--card-border-radius-small);
}
/* Chapter Card Content */
.chapter-card-content {
flex: 1;
margin-bottom: var(--spacing-medium);
}
.chapter-card-title {
color: var(--font-color-h3);
font-size: 1.25rem;
margin: 0 0 var(--spacing-small) 0;
line-height: 1.4;
}
.chapter-card-description {
color: var(--font-color);
margin: 0 0 var(--spacing-medium) 0;
line-height: 1.6;
font-size: 0.95rem;
}
.chapter-card-topics {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xsmall);
}
.chapter-topic-tag {
background: var(--primary-50);
color: var(--primary-700);
padding: var(--spacing-xxsmall) var(--spacing-small);
border-radius: var(--card-border-radius-small);
font-size: 0.75rem;
font-weight: 500;
}
/* Chapter Card Footer */
.chapter-card-footer {
margin-top: auto;
}
.chapter-start-button {
background: var(--secondary-600);
color: var(--white);
border: none;
border-radius: var(--card-border-radius-small);
padding: var(--spacing-small) var(--spacing-medium);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: var(--input-transition);
display: flex;
align-items: center;
gap: var(--spacing-xsmall);
width: 100%;
justify-content: center;
}
.chapter-start-button:hover:not(:disabled) {
background: var(--secondary-700);
transform: translateY(-1px);
}
.chapter-start-button:disabled {
background: var(--button-background-color);
color: var(--font-color-disabled);
cursor: not-allowed;
}
.chapter-start-button svg {
font-size: 1rem;
}
/* Info Section */
.elearning-info {
text-align: center;
}
.info-card {
background: var(--card-background-alt);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-xlarge);
box-shadow: var(--card-shadow-subtle);
max-width: 700px;
margin: 0 auto;
}
.info-card h3 {
color: var(--font-color-h3);
margin: 0 0 var(--spacing-large) 0;
font-size: 1.5rem;
}
.info-card ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.info-card li {
margin-bottom: var(--spacing-small);
padding-left: var(--spacing-large);
position: relative;
line-height: 1.6;
}
.info-card li:last-child {
margin-bottom: 0;
}
/* Access Denied */
.elearning-access-denied {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-medium);
}
.access-denied-content {
text-align: center;
max-width: 500px;
background: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-xxlarge);
box-shadow: var(--card-shadow-subtle);
}
.access-denied-icon {
font-size: 4rem;
color: var(--secondary-600);
margin-bottom: var(--spacing-large);
}
.access-denied-content h2 {
color: var(--font-color-h);
margin: 0 0 var(--spacing-medium) 0;
}
.access-denied-content p {
color: var(--font-color);
margin: 0 0 var(--spacing-small) 0;
line-height: 1.6;
}
.access-denied-content p:last-child {
margin-bottom: 0;
}
.access-denied-content a {
color: var(--link-color);
text-decoration: underline;
}
.access-denied-content a:hover {
text-decoration: none;
}
/* Tutorial BaseForm Layout Override - 1/3 Form + 2/3 Display */
.tutorial-clean-container .base-container {
display: flex;
flex-direction: row;
gap: var(--spacing-large);
min-height: 600px;
align-items: stretch;
max-width: none;
margin: 0;
width: 100%;
padding: 0;
}
/* Motion Wrapper Layout */
.tutorial-clean-container .form-section-motion-wrapper {
flex: 1; /* 1/3 for form */
}
.tutorial-clean-container .display-section-motion-wrapper {
flex: 2; /* 2/3 for display */
}
/* Element Layout */
.tutorial-clean-container .form-section,
.tutorial-clean-container .form-section.has-generated-content {
flex: 1; /* 1/3 for form */
max-width: none;
}
.tutorial-clean-container .display-container,
.tutorial-clean-container .display-container.has-generated-content {
flex: 2; /* 2/3 for display */
max-width: none;
}
/* Mobile Responsiveness for BaseForm Layout */
@media (max-width: 768px) {
.tutorial-clean-container .base-container {
flex-direction: column;
gap: var(--spacing-medium);
padding: var(--spacing-medium);
min-height: auto;
}
.tutorial-clean-container .form-section-motion-wrapper,
.tutorial-clean-container .display-section-motion-wrapper {
flex: none;
width: 100%;
}
.tutorial-clean-container .form-section,
.tutorial-clean-container .form-section.has-generated-content,
.tutorial-clean-container .display-container,
.tutorial-clean-container .display-container.has-generated-content {
flex: none;
max-width: 100%;
width: 100%;
}
}/* Card variant */
.login-required-card {
background: var(--card-background);
border: 1.5px solid var(--grey-200);
border-radius: var(--card-border-radius-medium);
padding: var(--spacing-xlarge);
max-width: 500px;
margin: var(--spacing-xlarge) auto;
text-align: center;
box-shadow: var(--card-shadow-elevated);
transition: var(--input-transition);
}
.login-required-header {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-medium);
margin-bottom: var(--spacing-large);
}
.login-required-icon {
font-size: 2.5rem;
color: var(--secondary-600);
opacity: 0.8;
}
.login-required-card h2 {
color: var(--font-color-h);
font-family: 'GrueneType', Arial, sans-serif;
font-size: 1.5rem;
font-weight: 600;
margin: 0;
line-height: 1.3;
}
.login-required-message {
color: var(--font-color);
margin-bottom: var(--spacing-xlarge);
line-height: 1.6;
font-size: 1rem;
}
.login-required-actions {
display: flex;
justify-content: center;
gap: var(--spacing-medium);
}
.login-required-button {
display: inline-flex;
align-items: center;
gap: var(--spacing-xsmall);
padding: var(--spacing-small) var(--spacing-large);
background: var(--secondary-600);
color: var(--white);
border: none;
border-radius: var(--spacing-xsmall);
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
min-height: var(--form-element-min-height);
}
.login-required-button:hover {
background: var(--secondary-700);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.login-required-button:focus {
outline: none;
box-shadow: var(--input-shadow-focus);
}
.login-icon {
font-size: 1.1em;
}
/* Inline variant */
.login-required-inline {
display: inline-flex;
align-items: center;
gap: var(--spacing-small);
padding: var(--spacing-small) var(--spacing-medium);
background: var(--background-color-alt);
border-radius: var(--spacing-xsmall);
color: var(--font-color);
border: var(--border-subtle);
}
.login-required-inline .login-required-icon {
font-size: 1.2rem;
color: var(--secondary-600);
}
.login-required-link {
color: var(--link-color);
background: none;
border: none;
text-decoration: underline;
cursor: pointer;
font-weight: 500;
font-family: inherit;
font-size: inherit;
padding: 0;
transition: color 0.2s ease;
}
.login-required-link:hover {
color: var(--secondary-700);
}
.login-required-link:focus {
outline: 2px solid var(--interactive-accent-color);
outline-offset: 2px;
}
/* Fullpage variant */
.login-required-fullpage {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-xlarge);
background: var(--background-color);
}
.login-required-container {
text-align: center;
max-width: 600px;
width: 100%;
}
.login-required-icon-large {
font-size: 5rem;
color: var(--secondary-600);
margin-bottom: var(--spacing-large);
opacity: 0.8;
}
.login-required-fullpage h1 {
color: var(--font-color-h);
font-family: 'GrueneType', Arial, sans-serif;
font-size: 2rem;
font-weight: 600;
margin-bottom: var(--spacing-medium);
line-height: 1.2;
}
.login-required-fullpage p {
color: var(--font-color);
font-size: 1.1rem;
margin-bottom: var(--spacing-xlarge);
line-height: 1.6;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.login-required-button.primary {
padding: var(--spacing-medium) var(--spacing-xlarge);
font-size: 1.1rem;
border-radius: var(--card-border-radius-small);
}
/* Loading state */
.auth-loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
background: var(--background-color);
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.login-required-card {
margin: var(--spacing-large);
padding: var(--spacing-large);
max-width: none;
}
.login-required-icon-large {
font-size: 3.5rem;
}
.login-required-fullpage h1 {
font-size: 1.5rem;
}
.login-required-fullpage p {
font-size: 1rem;
margin-bottom: var(--spacing-large);
}
.login-required-fullpage {
padding: var(--spacing-large);
min-height: 50vh;
}
.login-required-button {
padding: var(--spacing-small) var(--spacing-medium);
font-size: 0.9rem;
}
.login-required-inline {
flex-wrap: wrap;
gap: var(--spacing-xsmall);
}
}
/* Tablet responsive adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
.login-required-card {
margin: var(--spacing-xlarge) var(--spacing-large);
}
.login-required-fullpage {
padding: var(--spacing-xlarge) var(--spacing-large);
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.login-required-card {
border-width: 2px;
}
.login-required-button {
border: 2px solid transparent;
}
.login-required-button:focus {
border-color: var(--interactive-accent-color);
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.login-required-button,
.login-required-card,
.login-required-link {
transition: none;
}
.login-required-button:hover {
transform: none;
}
}.image-gallery-icon{color:#fff;transition:all .3s ease-out;appearance:none;background-color:rgba(0,0,0,0);border:0;cursor:pointer;outline:none;position:absolute;z-index:4;filter:drop-shadow(0 2px 2px rgb(25.5, 25.5, 25.5))}@media(hover: hover)and (pointer: fine){.image-gallery-icon:hover{color:#337ab7}.image-gallery-icon:hover .image-gallery-svg{transform:scale(1.1)}}.image-gallery-icon:focus{outline:2px solid #337ab7}.image-gallery-using-mouse .image-gallery-icon:focus{outline:none}.image-gallery-fullscreen-button,.image-gallery-play-button{bottom:0;padding:20px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:28px;width:28px}@media(max-width: 768px){.image-gallery-fullscreen-button,.image-gallery-play-button{padding:15px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:24px;width:24px}}@media(max-width: 480px){.image-gallery-fullscreen-button,.image-gallery-play-button{padding:10px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:16px;width:16px}}.image-gallery-fullscreen-button{right:0}.image-gallery-play-button{left:0}.image-gallery-top-nav,.image-gallery-bottom-nav{padding:10px 10px;left:50%;transform:translateX(-50%)}.image-gallery-top-nav .image-gallery-svg,.image-gallery-bottom-nav .image-gallery-svg{height:120px;width:90px}@media(max-width: 768px){.image-gallery-top-nav .image-gallery-svg,.image-gallery-bottom-nav .image-gallery-svg{height:72px;width:48px}}@media(max-width: 480px){.image-gallery-top-nav .image-gallery-svg,.image-gallery-bottom-nav .image-gallery-svg{height:48px;width:36px}}.image-gallery-top-nav[disabled],.image-gallery-bottom-nav[disabled]{cursor:disabled;opacity:.6;pointer-events:none}.image-gallery-top-nav{top:0}.image-gallery-bottom-nav{bottom:0}.image-gallery-left-nav,.image-gallery-right-nav{padding:50px 10px;top:50%;transform:translateY(-50%)}.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:120px;width:60px}@media(max-width: 768px){.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:72px;width:36px}}@media(max-width: 480px){.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:48px;width:24px}}.image-gallery-left-nav[disabled],.image-gallery-right-nav[disabled]{cursor:disabled;opacity:.6;pointer-events:none}.image-gallery-left-nav{left:0}.image-gallery-right-nav{right:0}.image-gallery{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative}.image-gallery.fullscreen-modal{background:#000;bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:5}.image-gallery.fullscreen-modal .image-gallery-content{top:50%;transform:translateY(-50%)}.image-gallery-content{position:relative;line-height:0;top:0}.image-gallery-content.fullscreen{background:#000}.image-gallery-content .image-gallery-slide .image-gallery-image{max-height:calc(100vh - 80px)}.image-gallery-content.image-gallery-thumbnails-left .image-gallery-slide .image-gallery-image,.image-gallery-content.image-gallery-thumbnails-right .image-gallery-slide .image-gallery-image{max-height:100vh}.image-gallery-slide-wrapper{position:relative}.image-gallery-slide-wrapper.image-gallery-thumbnails-left,.image-gallery-slide-wrapper.image-gallery-thumbnails-right{display:inline-block;width:calc(100% - 110px)}@media(max-width: 768px){.image-gallery-slide-wrapper.image-gallery-thumbnails-left,.image-gallery-slide-wrapper.image-gallery-thumbnails-right{width:calc(100% - 87px)}}.image-gallery-slide-wrapper.image-gallery-rtl{direction:rtl}.image-gallery-slides{line-height:0;overflow:hidden;position:relative;white-space:nowrap;text-align:center;touch-action:none}.image-gallery-slide{left:0;position:absolute;top:0;width:100%}.image-gallery-slide.image-gallery-center{position:relative}.image-gallery-slide .image-gallery-image{width:100%;object-fit:contain}.image-gallery-slide .image-gallery-description{background:rgba(0,0,0,.4);bottom:70px;color:#fff;left:0;line-height:1;padding:10px 20px;position:absolute;white-space:normal}@media(max-width: 768px){.image-gallery-slide .image-gallery-description{bottom:45px;font-size:.8em;padding:8px 15px}}.image-gallery-bullets{bottom:20px;left:0;margin:0 auto;position:absolute;right:0;width:80%;z-index:4}.image-gallery-bullets .image-gallery-bullets-container{margin:0;padding:0;text-align:center}.image-gallery-bullets .image-gallery-bullet{appearance:none;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:50%;box-shadow:0 2px 2px hsl(0,0%,10%);cursor:pointer;display:inline-block;margin:0 5px;outline:none;padding:5px;transition:all .2s ease-out}@media(max-width: 768px){.image-gallery-bullets .image-gallery-bullet{margin:0 3px;padding:3px}}@media(max-width: 480px){.image-gallery-bullets .image-gallery-bullet{padding:2.7px}}.image-gallery-bullets .image-gallery-bullet:focus{transform:scale(1.2);background:#337ab7;border:1px solid #337ab7}.image-gallery-bullets .image-gallery-bullet.active{transform:scale(1.2);border:1px solid #fff;background:#fff}@media(hover: hover)and (pointer: fine){.image-gallery-bullets .image-gallery-bullet:hover{background:#337ab7;border:1px solid #337ab7}.image-gallery-bullets .image-gallery-bullet.active:hover{background:#337ab7}}.image-gallery-bullets.image-gallery-bullets-vertical{left:20px;right:auto;bottom:auto;width:auto;top:50%;transform:translateY(-50%)}.image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet{display:block;margin:12px 0}@media(max-width: 768px){.image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet{margin:6px 0px;padding:3px}}@media(max-width: 480px){.image-gallery-bullets.image-gallery-bullets-vertical .image-gallery-bullet{padding:2.7px}}.image-gallery-thumbnails-wrapper{position:relative}.image-gallery-thumbnails-wrapper.thumbnails-swipe-horizontal{touch-action:pan-y}.image-gallery-thumbnails-wrapper.thumbnails-swipe-vertical{touch-action:pan-x}.image-gallery-thumbnails-wrapper.thumbnails-wrapper-rtl{direction:rtl}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{display:inline-block;vertical-align:top;width:100px}@media(max-width: 768px){.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{width:81px}}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails{height:100%;width:100%;left:0;padding:0;position:absolute;top:0}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails .image-gallery-thumbnail,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails .image-gallery-thumbnail{display:block;margin-right:0;padding:0}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails .image-gallery-thumbnail+.image-gallery-thumbnail,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails .image-gallery-thumbnail+.image-gallery-thumbnail{margin-left:0;margin-top:2px}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{margin:0 5px}@media(max-width: 768px){.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{margin:0 3px}}.image-gallery-thumbnails{overflow:hidden;padding:5px 0}@media(max-width: 768px){.image-gallery-thumbnails{padding:3px 0}}.image-gallery-thumbnails .image-gallery-thumbnails-container{cursor:pointer;text-align:center;white-space:nowrap}.image-gallery-thumbnail{display:inline-block;border:4px solid rgba(0,0,0,0);transition:border .3s ease-out;width:100px;background:rgba(0,0,0,0);padding:0}@media(max-width: 768px){.image-gallery-thumbnail{border:3px solid rgba(0,0,0,0);width:81px}}.image-gallery-thumbnail+.image-gallery-thumbnail{margin-left:2px}.image-gallery-thumbnail .image-gallery-thumbnail-inner{display:block;position:relative}.image-gallery-thumbnail .image-gallery-thumbnail-image{vertical-align:middle;width:100%;line-height:0}.image-gallery-thumbnail.active,.image-gallery-thumbnail:focus{outline:none;border:4px solid #337ab7}@media(max-width: 768px){.image-gallery-thumbnail.active,.image-gallery-thumbnail:focus{border:3px solid #337ab7}}@media(hover: hover)and (pointer: fine){.image-gallery-thumbnail:hover{outline:none;border:4px solid #337ab7}}@media(hover: hover)and (pointer: fine)and (max-width: 768px){.image-gallery-thumbnail:hover{border:3px solid #337ab7}}.image-gallery-thumbnail-label{box-sizing:border-box;color:#fff;font-size:1em;left:0;line-height:1em;padding:5%;position:absolute;top:50%;text-shadow:0 2px 2px hsl(0,0%,10%);transform:translateY(-50%);white-space:normal;width:100%}@media(max-width: 768px){.image-gallery-thumbnail-label{font-size:.8em;line-height:.8em}}.image-gallery-index{background:rgba(0,0,0,.4);color:#fff;line-height:1;padding:10px 20px;position:absolute;right:0;top:0;z-index:4}@media(max-width: 768px){.image-gallery-index{font-size:.8em;padding:5px 10px}}