/* ==========================================================================
   PREMIUM DESIGN SYSTEM - BEHÖRDEN-HILFE
   ========================================================================== */

:root {
    /* Primäre Farbpalette */
    --primary-color: #007AFF;
    --primary-hover: #0056CC;
    --primary-light: #E8F4FD;
    --primary-gradient: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
    
    /* Sekundäre Farben */
    --secondary-color: #5E5CE6;
    --accent-color: #FF6B35;
    --success-color: #30D158;
    --warning-color: #FF9F0A;
    --danger-color: #FF453A;
    
    /* Neutrale Farben */
    --gray-50: #FAFBFC;
    --gray-100: #F2F4F7;
    --gray-200: #E4E7EB;
    --gray-300: #CBD2D9;
    --gray-400: #9AA0A6;
    --gray-500: #6C737F;
    --gray-600: #4D5562;
    --gray-700: #384250;
    --gray-800: #1F2A37;
    --gray-900: #111827;
    
    /* Text Farben */
    --text-primary: #1D1D1F;
    --text-secondary: #6E6E73;
    --text-tertiary: #8E8E93;
    --text-white: #FFFFFF;
    
    /* Hintergrundfarben */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F9FAFB;
    --bg-tertiary: #F2F4F7;
    
    /* Schatten */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    
    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    
    /* Typography */
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
    
    /* Transitions */
    --transition-fast: 0.15s ease-out;
    --transition-base: 0.25s ease-out;
    --transition-slow: 0.35s ease-out;
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

* {
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 var(--space-md) 0;
    color: var(--text-primary);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h4 {
    font-size: 1.25rem;
}

p {
    margin: 0 0 var(--space-md) 0;
    color: var(--text-secondary);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-hover);
}

/* ==========================================================================
   BUTTONS & FORM ELEMENTS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: var(--primary-gradient);
    color: var(--text-white);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--bg-primary);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: var(--text-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--gray-300);
}

.btn-ghost:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.btn-lg {
    padding: var(--space-lg) var(--space-2xl);
    font-size: 1.125rem;
    border-radius: var(--radius-lg);
}

.btn-sm {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
}

/* Form Elements */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.form-input {
    width: 100%;
    padding: var(--space-md);
    font-size: 1rem;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    transition: all var(--transition-base);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-container {
    max-width: 1200px;         
    margin: 0 auto;            
    padding: 0;               
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    position: relative;
}

.nav-logo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    z-index: 10; /* Stellt sicher, dass das Logo über den mittigen Links liegt */
}

.nav-links {
  
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-xl);
}

.nav-links a {
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    padding: var(--space-sm) var(--space-md); /* Fügt Innenabstand hinzu */
    border-radius: var(--radius-md);         /* Rundet die Ecken ab */
    transition: all var(--transition-base);  /* Weiche Übergänge für alle Änderungen */
}

/* Der neue, dezentere Hover-Effekt */
.nav-links a:hover {
    color: var(--primary-color);
    background-color: var(--primary-light); /* Dein hellblaues Highlight */
}

.nav-auth {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    z-index: 10;
}

/* Der unsichtbare Wrapper, der nur im mobilen Menü eine Rolle spielt */
.nav-menu {
    /* Auf Desktop hat dieser Container keine eigenen Layout-Stile */
}

.nav-menu {
    display: contents;
}

/* Mobile Navigation (Hamburger-Icon) */
.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: var(--space-xs);
    z-index: 1001; /* Liegt über allem, um klickbar zu sein */
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    margin: 3px 0;
    border-radius: 2px;
    transition: all var(--transition-base);
}

/* --- Responsive Anpassungen für die mobile Ansicht --- */
@media (max-width: 768px) {
    /* Wir verstecken die mittigen Links auf Mobilgeräten */
    .nav-links {
        display: none;
    }
    
    /* Wir zeigen das Hamburger-Icon an */
    .nav-toggle {
        display: flex;
    }
    
    /* Der .nav-menu Container wird zum ausklappbaren Menü */
    .nav-menu {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        flex-direction: column;
        padding: var(--space-xl);
        align-items: center;
        gap: var(--space-lg);
        box-shadow: var(--shadow-md);
    }

    .nav-menu.active {
        display: flex;
    }
    
    /* Im mobilen Menü sind Links und Auth-Buttons wieder sichtbar */
    .nav-menu.active .nav-links,
    .nav-menu.active .nav-auth {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: var(--space-lg);
    }
    
    .nav-menu.active .nav-links {
        position: static; /* Hebt die absolute Positionierung auf */
        transform: none;
    }
    
    .nav-menu.active .nav-auth {
        margin-top: var(--space-lg);
        border-top: 1px solid var(--gray-200);
        padding-top: var(--space-xl);
        width: 100%;
    }
    
    /* Animation für Hamburger-Icon zu "X" */
    .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
}
/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero {
    padding: calc(72px + var(--space-4xl)) var(--space-xl) var(--space-4xl);
    text-align: center;
    background: 
        radial-gradient(circle at 20% 80%, rgba(0, 122, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(94, 92, 230, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23007AFF' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.hero h1 {
    margin-bottom: var(--space-lg);
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-2xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

@media (min-width: 640px) {
    .hero-cta {
        flex-direction: row;
        justify-content: center;
    }
}

/* ==========================================================================
   SECTIONS & CARDS
   ========================================================================== */

.section {
    padding: var(--space-4xl) var(--space-xl);
}

.section-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-4xl);
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-top: var(--space-sm);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.trust-section {
    background: var(--bg-secondary);
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.trust-section span {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.user-group-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-2xl);
    padding: var(--space-4xl) var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.user-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.user-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-gradient);
}

.user-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.user-card.business {
    background: var(--gray-900);
    color: var(--text-white);
}

.user-card.business::before {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
}

.user-card h2 {
    color: inherit;
    margin-bottom: var(--space-md);
}

.user-card p {
    color: inherit;
    opacity: 0.8;
    margin-bottom: var(--space-xl);
}

/* ==========================================================================
   APPLICATION STYLES
   ========================================================================== */

body.app-view-active {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--bg-secondary);
    padding: var(--space-xl);
}

.container {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 1000px;
    overflow: hidden;
}

/* Auth Container */
#auth-container {
    padding: var(--space-2xl);
    text-align: center;
}

.auth-form {
    max-width: 400px;
    margin: 0 auto var(--space-xl);
    text-align: left;
}

.auth-form h2 {
    text-align: center;
    margin-bottom: var(--space-xl);
    color: var(--text-primary);
}

.account-type-selector {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin: var(--space-lg) 0;
}

.account-type-selector label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-weight: 500;
}

.account-type-selector input[type="radio"] {
    accent-color: var(--primary-color);
}

/* App Layout */
#app-container {
    padding: var(--space-2xl);
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--gray-200);
}

.app-header h1 {
    margin: 0;
    font-size: 1.75rem;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#logout-button {
    background: var(--gray-100);
    color: var(--text-secondary);
    border: 1px solid var(--gray-300);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all var(--transition-base);
}

#logout-button:hover {
    background: var(--gray-200);
    color: var(--text-primary);
}

.app-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-2xl);
}

@media (max-width: 1024px) {
    .app-layout {
        grid-template-columns: 1fr;
    }
    
    .app-sidebar {
        order: 2;
    }
}

/* Cards */
.card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    margin-bottom: var(--space-lg);
}

.card h2, .card h3 {
    margin-top: 0;
    color: var(--text-primary);
}

/* Sidebar */
.app-sidebar .card {
    background: var(--bg-secondary);
}

/* Member/Client Lists */
#member-list, #client-list {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0 0;
}

#member-list li, #client-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-base);
}

#member-list li:hover, #client-list li:hover {
    border-color: var(--primary-color);
    transform: translateX(4px);
}

.remove-btn {
    background: var(--danger-color);
    color: var(--text-white);
    border: none;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.remove-btn:hover {
    background: #e53935;
    transform: scale(1.05);
}

/* Form Elements in Cards */
.card form {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.card form input {
    flex: 1;
}

.card form button {
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.card form button:hover {
    background: var(--primary-hover);
}

/* Tabs */
.input-tabs {
    display: flex;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: var(--space-lg);
}

.tab-button {
    padding: var(--space-md) var(--space-lg);
    background: none;
    border: none;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-base);
}

.tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Intent Buttons */
.intent-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.intent-button {
    padding: var(--space-md);
    background: var(--bg-secondary);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.intent-button:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.intent-button.selected {
    background: var(--primary-color);
    color: var(--text-white);
    border-color: var(--primary-color);
}

/* History */
#history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
}

#history-list li {
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
}

#history-list li:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

#history-list li.selected {
    background: var(--primary-color);
    color: var(--text-white);
    border-color: var(--primary-color);
}

/* Admin Case Items */
.admin-case-item {
    background: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.admin-case-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.case-header {
    background: var(--bg-secondary);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    color: var(--text-primary);
}

.case-body {
    padding: var(--space-lg);
}

.case-explanation, .case-notes {
    background: var(--bg-tertiary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
    border-left: 4px solid var(--primary-color);
}

.case-explanation h5, .case-notes h5 {
    margin: 0 0 var(--space-sm) 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.case-footer {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border-top: 1px solid var(--gray-200);
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

/* ==========================================================================
   UTILITIES & ANIMATIONS
   ========================================================================== */

.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

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

/* Loading Spinner */
#loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--gray-200);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: var(--space-xl) auto;
}

.inline-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--gray-200);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-left: var(--space-sm);
}

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

/* Fade In Animation */
.fade-in-element {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.fade-in-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   NOTIFICATIONS
   ========================================================================== */

#notification-container {
    position: fixed;
    bottom: var(--space-xl);
    right: var(--space-xl);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.notification {
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-md);
    color: var(--text-white);
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateX(100%);
    animation: slideIn 0.3s ease-out forwards, slideOut 0.3s ease-out 4s forwards;
    max-width: 400px;
}

.notification.success {
    background: var(--success-color);
}

.notification.error {
    background: var(--danger-color);
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */

.main-footer {
    background: var(--bg-secondary);
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--gray-200);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links {
    display: flex;
    gap: var(--space-xl);
}

.footer-links a {
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: color var(--transition-base);
}

.footer-links a:hover {
    color: var(--primary-color);
}

/* ==========================================================================
   RESULT CONTAINER STYLES
   ========================================================================== */

#result-container {
    transition: all var(--transition-slow);
}

#explanation-text {
    background: var(--bg-tertiary);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary-color);
    margin-bottom: var(--space-xl);
}

/* ==========================================================================
   FILE INPUT STYLES
   ========================================================================== */

#file-input-container {
    text-align: center;
    padding: var(--space-xl) 0;
}

#letter-file-input {
    display: none;
}

.file-upload-label {
    display: inline-block;
    padding: var(--space-lg) var(--space-2xl);
    background: var(--bg-secondary);
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
}

.file-upload-label:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.file-upload-preview {
    max-width: 100%;
    max-height: 300px;
    margin-top: var(--space-lg);
    border-radius: var(--radius-md);
    display: none;
}

/* ==========================================================================
   ADMIN DASHBOARD SPECIFIC STYLES
   ========================================================================== */

#all-cases-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.admin-case-item {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.admin-case-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.case-meta {
    display: flex;
    gap: var(--space-md);
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin-top: var(--space-md);
}

.case-meta span {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .hero {
        padding: calc(72px + var(--space-2xl)) var(--space-md) var(--space-2xl);
    }
    
    .user-group-section {
        grid-template-columns: 1fr;
        padding: var(--space-2xl) var(--space-md);
    }
    
    .user-card {
        padding: var(--space-xl);
    }
    
    .app-layout {
        grid-template-columns: 1fr;
    }
    
    .app-sidebar {
        order: 2;
    }
    
    .footer-container {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }
    
    .footer-links {
        flex-direction: column;
        gap: var(--space-sm);
    }
}
/* ==========================================================================
   SMALL LINK STYLES
   ========================================================================== */

.small-link {
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: color var(--transition-base);
    display: inline-block;
    margin-top: var(--space-sm);
}

.small-link:hover {
    color: var(--primary-color);
}

/* ==========================================================================
   COUNTER STYLES
   ========================================================================== */

.counter-info {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: inline-block;
}

#pdf-counter {
    font-weight: 700;
    color: var(--primary-color);
}

/* ==========================================================================
   HISTORY DETAIL STYLES
   ========================================================================== */

#history-detail-container {
    transition: all var(--transition-slow);
}

.result-preview {
    background: var(--bg-tertiary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

/* ==========================================================================
   BUTTON GROUP STYLES
   ========================================================================== */

.button-group {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.button-group button {
    flex: 1;
}

/* ==========================================================================
   FORM ERROR STYLES
   ========================================================================== */

.form-error {
    color: var(--danger-color);
    font-size: 0.875rem;
    margin-top: var(--space-xs);
    display: none;
}

.form-input.error {
    border-color: var(--danger-color);
}

/* ==========================================================================
   PASSWORD RESET STYLES
   ========================================================================== */

#reset-password-container {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

#reset-password-container .auth-form {
    text-align: center;
}

#do-reset-form {
    margin-top: var(--space-xl);
}

/* ==========================================================================
   SUBSCRIBE BUTTON STYLES
   ========================================================================== */

#subscribe-button {
    background: var(--secondary-color);
    color: white;
    border: none;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    margin-bottom: var(--space-lg);
    transition: all var(--transition-base);
}

#subscribe-button:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   TEXTAREA STYLES
   ========================================================================== */

textarea {
    width: 100%;
    padding: var(--space-md);
    font-family: var(--font-body);
    font-size: 1rem;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    transition: all var(--transition-base);
    resize: vertical;
    min-height: 120px;
}

textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* ==========================================================================
   HR STYLES
   ========================================================================== */

hr {
    border: none;
    height: 1px;
    background-color: var(--gray-200);
    margin: var(--space-lg) 0;
}

/* ==========================================================================
   MESSAGE STYLES
   ========================================================================== */

.message {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.message.error {
    background-color: rgba(255, 69, 58, 0.1);
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}

.message.success {
    background-color: rgba(48, 209, 88, 0.1);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }
.mt-4 { margin-top: var(--space-lg); }
.mt-5 { margin-top: var(--space-xl); }

.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }
.mb-4 { margin-bottom: var(--space-lg); }
.mb-5 { margin-bottom: var(--space-xl); }

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .main-nav,
    .app-sidebar,
    .app-header,
    .input-tabs,
    #subscribe-button,
    #analyze-button,
    .intent-buttons,
    #back-to-analyze-button {
        display: none !important;
    }
    
    body, .container {
        background: white !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #result-container, #history-detail-container {
        display: block !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   LAYOUT CENTERING FIX
   ========================================================================== */

body.app-view-active {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Geändert von center zu flex-start für bessere Positionierung */
    min-height: 100vh;
    background: var(--bg-secondary);
    padding: var(--space-xl);
}

.container {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 1200px; /* Erhöht von 1000px auf 1200px für mehr Breite */
    margin: 0 auto; /* Zentriert den Container */
    overflow: hidden;
}

/* ==========================================================================
   CLIENT/MEMBER SELECTION STYLES
   ========================================================================== */

#client-list li.selected,
#member-list li.selected {
    background: var(--primary-color);
    color: var(--text-white);
    border-color: var(--primary-color);
}

#client-list li.selected .remove-btn,
#member-list li.selected .remove-btn {
    background: var(--text-white);
    color: var(--primary-color);
}

/* ==========================================================================
   FORM BUTTON FIXES
   ========================================================================== */

#b2b-dashboard form,
#team-dashboard form {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    align-items: center;
}

#b2b-dashboard form input,
#team-dashboard form input {
    flex: 1;
    min-width: 0; /* Verhindert Überlauf */
}

#b2b-dashboard form button,
#team-dashboard form button {
    white-space: nowrap;
    padding: var(--space-md) var(--space-lg);
}

/* ==========================================================================
   SIDEBAR CARD WIDTH FIX
   ========================================================================== */

.app-sidebar .card {
    background: var(--bg-secondary);
    min-width: 0; /* Verhindert Überlauf */
}

/* ==========================================================================
   HISTORY LIST STYLES
   ========================================================================== */

.history-list-wrapper {
    overflow: hidden; /* Verhindert Überlauf */
}

#history-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: var(--space-sm); /* Platz für Scrollbar */
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 1024px) {
    .container {
        max-width: 95%;
    }
    
    #b2b-dashboard form,
    #team-dashboard form {
        flex-direction: column;
        align-items: stretch;
    }
    
    #b2b-dashboard form button,
    #team-dashboard form button {
        width: 100%;
    }
}

@media (max-width: 768px) {
    body.app-view-active {
        padding: var(--space-md);
        align-items: stretch;
    }
    
    .container {
        max-width: 100%;
        border-radius: 0;
    }
}
/* ==========================================================================
   CASE HISTORY LIST IMPROVEMENTS
   ========================================================================== */

#history-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    position: relative; /* Für absolute Positionierung des Lösch-Buttons */
}

.remove-history-btn {
    position: absolute;
    right: var(--space-md);
    background: var(--danger-color);
    color: var(--text-white);
    border: none;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-base);
}

.remove-history-btn:hover {
    background: #e53935;
    transform: scale(1.05);
}

/* ==========================================================================
   CLIENT MANAGEMENT HEADING ADJUSTMENT
   ========================================================================== */

#b2b-dashboard h3 {
    margin-left: -4px; /* Korrigiert die leichte Überlappung */
    padding-left: var(--space-md);
    position: relative;
}

/* ==========================================================================
   HISTORY ITEM CONTENT ALIGNMENT
   ========================================================================== */

.history-item-content {
    flex: 1;
    margin-right: var(--space-lg); /* Platz für den Lösch-Button */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   CARD CONTENT PADDING ADJUSTMENT
   ========================================================================== */

.app-sidebar .card {
    padding: var(--space-lg); /* Etwas weniger Padding für bessere Ausnutzung */
}

#b2b-dashboard {
    padding-right: var(--space-md); /* Verhindert Überlauf des Texts */
}
/* ==========================================================================
   CLIENT MANAGEMENT HEADING FIX
   ========================================================================== */

#b2b-dashboard {
    padding: var(--space-lg); /* Stellt sicher, dass der Inhalt innerhalb der Karte bleibt */
    position: relative; /* Erlaubt präzise Positionierung der Kinder-Elemente */
}

#b2b-dashboard h3 {
    margin: 0 0 var(--space-md) 0; /* Entfernt unerwünschte Margins */
    padding: 0 var(--space-sm); /* Gibt dem Text genug Raum */
    position: relative;
    left: -2px; /* Feinjustierung der Position */
    width: calc(100% - 2px); /* Verhindert Textüberlauf */
    word-break: break-word; /* Sicherheitsfall für lange Wörter */
}

/* Korrektur für den Formular-Container unter der Überschrift */
#b2b-dashboard > form {
    margin-top: var(--space-md);
    width: 100%;
}

/* Sicherstellen, dass die gesamte Karte genug Innenabstand hat */
.app-sidebar .card {
    padding: var(--space-xl) var(--space-lg);
}
/* ==========================================================================
   AUTH CONTAINER ENHANCEMENTS
   ========================================================================== */

#auth-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="%23f2f4f7" d="M0,0 L100,0 L100,100 Q50,80 0,100"/></svg>') no-repeat bottom/100% auto,
                linear-gradient(to bottom, var(--bg-primary) 60%, var(--bg-secondary) 100%);
}

/* Welcome Text Styling */
#auth-container > h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
    margin-bottom: var(--space-md);
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    width: 100%;
}

#auth-container > p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-2xl);
    text-align: center;
    max-width: 600px;
}

/* Forms Container */
.auth-forms-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-2xl);
    width: 100%;
    max-width: 900px;
}

/* Form Styling */
.auth-form {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.auth-form:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.auth-form h2 {
    text-align: center;
    margin-bottom: var(--space-xl);
    color: var(--text-primary);
    position: relative;
    padding-bottom: var(--space-md);
}

.auth-form h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--primary-gradient);
    border-radius: 3px;
}

/* Input Enhancements */
#login-username,
#login-password,
#register-username,
#register-password {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: all var(--transition-base);
}

#login-username:focus,
#login-password:focus,
#register-username:focus,
#register-password:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
    outline: none;
}

/* Button Styling */
.auth-form button[type="submit"] {
    width: 100%;
    padding: var(--space-md);
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-base);
    margin-top: var(--space-sm);
}

.auth-form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* HR Styling */
#auth-container hr {
    border: none;
    height: 1px;
    background: var(--gray-200);
    margin: var(--space-xl) 0;
    width: 100%;
    max-width: 900px;
}

/* Account Type Selector */
.account-type-selector {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin: var(--space-lg) 0;
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .auth-forms-wrapper {
        grid-template-columns: 1fr;
    }
    
    #auth-container {
        padding: var(--space-xl) var(--space-md);
        background-size: 100% 15%;
    }
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-form {
    animation: fadeIn 0.6s ease-out forwards;
}

#register-form {
    animation-delay: 0.2s;
}

/* ==========================================================================
   FIXED SIDE-BY-SIDE AUTH LAYOUT (NO HTML CHANGES)
   ========================================================================== */

#auth-container {
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
}

.auth-forms-container {
    display: inline-block;
    width: auto;
    margin: var(--space-xl) auto 0;
}

#login-form,
#register-form {
    display: inline-block;
    width: 400px;
    vertical-align: top;
    margin: 0 var(--space-lg);
}

@media (max-width: 900px) {
    #login-form,
    #register-form {
        display: block;
        width: 100%;
        margin: 0 0 var(--space-xl) 0 !important;
    }
}
/* ==========================================================================
   INFO PAGES STYLING (GESCHAEFTSKUNDEN, PREISE, PRIVATKUNDEN)
   ========================================================================== */

/* Hero Section Enhancement */
.hero {
    padding: calc(72px + var(--space-4xl)) var(--space-xl) var(--space-4xl);
    text-align: center;
    background: radial-gradient(circle at 20% 80%, rgba(0, 122, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(94, 92, 230, 0.1) 0%, transparent 50%),
                linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.hero-content h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: var(--space-lg);
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content p {
    font-size: 1.25rem;
    max-width: 800px;
    margin: 0 auto var(--space-2xl);
}

/* Info Sections Styling */
.info-section, .features-b2b-section, .pricing-section, .faq-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-4xl) var(--space-xl);
    text-align: center;
}

.section-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto var(--space-2xl);
}

/* Target Groups & Problem Cards */
.target-groups, .problem-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    margin: var(--space-2xl) 0;
}

.group, .problem-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.group:hover, .problem-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.group h3, .problem-card h4 {
    margin: var(--space-md) 0 var(--space-sm);
    color: var(--text-primary);
}

.group span, .problem-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-md);
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    margin: var(--space-2xl) 0;
}

.feature-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--gray-200);
    text-align: left;
    transition: all var(--transition-base);
}

.feature-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.feature-card h3 {
    color: var(--primary-color);
    margin-bottom: var(--space-md);
}

/* Pricing Table */
.pricing-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-xl);
    margin: var(--space-2xl) auto;
    max-width: 1000px;
}

.pricing-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    border: 1px solid var(--gray-200);
    position: relative;
}

.pricing-card.recommended {
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}

.plan-name {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.plan-price {
    font-size: 2.5rem;
    font-weight: 700;
    margin: var(--space-md) 0;
    color: var(--text-primary);
}

.price-per {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.plan-description {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.feature-list {
    text-align: left;
    margin: var(--space-xl) 0;
    padding: 0;
    list-style: none;
}

.feature-list li {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
    position: relative;
}

.check-icon {
    position: absolute;
    left: 0;
    color: var(--success-color);
}

.plan-button {
    width: 100%;
    margin-top: var(--space-md);
}

/* FAQ Section */
.faq-container {
    max-width: 800px;
    margin: var(--space-2xl) auto;
    text-align: left;
}

details {
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-md) 0;
}

summary {
    font-weight: 600;
    cursor: pointer;
    padding: var(--space-sm) 0;
    list-style: none;
    position: relative;
    padding-left: var(--space-lg);
}

summary::-webkit-details-marker {
    display: none;
}

summary::before {
    content: '+';
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--primary-color);
}

details[open] summary::before {
    content: '-';
}

details p {
    padding-left: var(--space-lg);
    margin: var(--space-sm) 0 0;
}

/* CTA Section */
.cta-section {
    text-align: center;
    padding: var(--space-4xl) var(--space-xl);
    background: var(--bg-secondary);
}

.hero-button {
    font-size: 1.125rem;
    padding: var(--space-lg) var(--space-2xl);
    border-radius: var(--radius-lg);
    margin-top: var(--space-md);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero {
        padding: calc(72px + var(--space-2xl)) var(--space-md) var(--space-2xl);
    }
    
    .info-section, .features-b2b-section, .pricing-section, .faq-section {
        padding: var(--space-2xl) var(--space-md);
    }
    
    .target-groups, .problem-cards, .features-grid {
        grid-template-columns: 1fr;
    }
}

Privatkunden-Sektion
/* How It Works Section */
.how-it-works-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-4xl) var(--space-xl);
    text-align: center;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.step-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    text-align: left;
}

.step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.step-card h4 {
    margin-bottom: var(--space-sm);
    color: var(--primary-color);
}

.step-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Trust Section */
.trust-section {
    background: var(--bg-secondary);
    padding: var(--space-4xl) var(--space-xl);
    text-align: center;
    color: var(--text-primary);
}

.trust-section p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

/* FAQ Section */
.faq-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-4xl) var(--space-xl);
    text-align: left;
}

.faq-item {
    margin-bottom: var(--space-xl);
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: var(--space-md);
}

.faq-item h4 {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.faq-item p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ==========================================================================
   FILE UPLOAD STYLING (DASHBOARD)
   ========================================================================== */

.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-xl);
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    min-height: 150px;
}

.dropzone:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.dropzone.active {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

#letter-file-input {
    display: none;
}

/* ==========================================================================
   DEFINITIVES, UNUMGÄNGLICHES AUTH-LAYOUT
   ========================================================================== */

/* Wir zwingen den Container, ein Grid-Layout zu verwenden. */
#auth-container .auth-layout-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr; /* Zwei exakt gleich breite Spalten */
  align-items: start;
  gap: 2rem;
  width: 100%;
  max-width: 900px;
  margin: 2rem auto 0;
}

/* Wir erzwingen, dass die Formulare sich nicht anders verhalten können. */
#auth-container .auth-form {
    display: block;
    width: 100% !important; /* Jedes Formular füllt seine Spalte aus */
}


/* --- Responsive Anpassung für mobile Geräte --- */
@media (max-width: 900px) {
  #auth-container .auth-layout-container {
    grid-template-columns: 1fr !important; /* Auf kleinen Bildschirmen nur EINE Spalte */
  }
}

/* =================================================================
   STYLING FÜR PDF-DETAILS UND INTENT-FORMULAR
   ================================================================= */

/* Container für den neuen Abschnitt mit den PDF-Angaben */
#pdf-details-container {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color); /* Eine feine Trennlinie */
}

/* Styling für die Überschrift in diesem Abschnitt */
#pdf-details-container h4,
#intent-container h4 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--text-color-dark);
}

/* Grid-Layout für die Adressfelder (2 Spalten) */
.pdf-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei Spalten mit gleicher Breite */
    gap: 1.5rem; /* Abstand zwischen den Spalten und Zeilen */
}

/* Gruppe für ein Label + Input-Paar */
.pdf-details-group {
    display: flex;
    flex-direction: column;
}

/* Gruppe, die über die volle Breite geht (für das Aktenzeichen) */
.pdf-details-group-full {
    grid-column: 1 / -1; /* Erstreckt sich über alle Spalten */
}

/* Allgemeines Styling für alle Beschriftungen (Labels) */
#pdf-details-container label,
#intent-container label {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color-light);
}

/* Allgemeines Styling für alle Eingabefelder, das Dropdown und die Textarea */
#pdf-details-container input[type="text"],
#template-select,
#freitext-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-color);
    font-size: 1rem;
    color: var(--text-color-dark);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box; /* Stellt sicher, dass Padding die Breite nicht beeinflusst */
}

/* Effekt, wenn ein Feld ausgewählt (fokussiert) wird */
#pdf-details-container input[type="text"]:focus,
#template-select:focus,
#freitext-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); /* Passend zur Primärfarbe */
}

/* Spezielles Styling für das Dropdown-Menü, damit es gut aussieht */
#template-select {
    appearance: none; /* Entfernt den Standard-Pfeil */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem; /* Platz für den neuen Pfeil */
}

/* Styling für die große Text-Eingabefläche */
#freitext-input {
    min-height: 120px;
    resize: vertical; /* Erlaubt dem Nutzer, die Höhe anzupassen */
}

/* Stellt sicher, dass das Formular für die Lizenz-Anzahl korrekt umbricht */
#buy-seats-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Richtet Elemente linksbündig aus */
}

#buy-seats-form input {
    margin-bottom: 1rem; /* Fügt Abstand unter dem Eingabefeld hinzu */
}

/* Styling für den "Abo verwalten"-Button im B2C-Dashboard */
#manage-subscription-button {
  background-color: var(--primary-color);
  
  border: 1px solid var(--primary-color);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin-right: 1rem; /* Fügt etwas Abstand zum Logout-Button hinzu */
}

/* Effekt, wenn man mit der Maus darüberfährt */
#manage-subscription-button:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}

/* Button Admin Dashboard zum Tool */
a.button-secondary {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease, color 0.2s ease;
}
a.button-secondary:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}

/* Super Admin dashboard */
tr.over-limit {
    background-color: #fffbeb;
    font-weight: bold;
    color: #b45309;
}
.error-row {
    color: var(--danger-color, #dc3545);
    text-align: center;
}
/* Basis-Styling für die Tabelle */
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); }
th { background-color: var(--background-color); }

/* =================================================================
   STYLING FÜR DIE ÜBERARBEITETE STARTSEITE (INDEX.HTML)
   ================================================================= */

/* --- 1. Hero-Sektion --- */
/* Wir behalten deine zentrierte Ausrichtung bei, geben ihr aber mehr Raum. */
.hero {
    padding-top: calc(72px + var(--space-3xl)); /* Mehr Abstand nach oben */
    padding-bottom: var(--space-3xl);
}

.hero-visual {
    max-width: 850px; /* Breite für das GIF/Video */
    margin: var(--space-2xl) auto 0 auto; /* Zentriert unter dem Button */
    position: relative;
}

.hero-visual img {
    width: 100%;
    border-radius: var(--radius-xl); /* Nutzt deinen XL-Radius */
    box-shadow: var(--shadow-xl); /* Nutzt deinen stärksten Schatten für einen "Schwebe"-Effekt */
    border: 1px solid var(--gray-200);
}


/* --- 2. "So funktioniert's" / Workflow-Sektion --- */
.how-it-works-section {
    padding: var(--space-4xl) var(--space-xl);
    text-align: center;
    background-color: var(--bg-secondary); /* Nutzt deine Hintergrundfarbe */
}

.how-it-works-section h2 {
    margin-bottom: var(--space-3xl);
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-2xl);
    max-width: 1200px;
    margin: 0 auto;
}

.step {
    text-align: left;
    background-color: var(--bg-primary);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.step-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-light);
    color: var(--primary-color);
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-lg);
}

.step h3 {
    margin-bottom: var(--space-sm);
}

.step p {
    font-size: 0.95rem;
    color: var(--text-secondary);
}


/* --- 3. "Vertrauens"-Sektion (Testimonials) --- */
.trust-section {
    padding: var(--space-4xl) var(--space-xl);
    text-align: center;
}

.trust-section h3 {
    margin-bottom: var(--space-3xl);
}

.testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-2xl);
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial {
    background-color: var(--bg-secondary);
    padding: var(--space-xl);
    border-radius: var(--radius-md);
    text-align: left;
}

.testimonial blockquote {
    margin: 0 0 var(--space-md) 0;
    font-size: 1rem;
    font-style: italic;
    border: none;
    padding: 0;
    color: var(--text-secondary);
}

.testimonial cite {
    font-weight: 600;
    color: var(--text-primary);
    font-style: normal;
}


/* --- 4. Finaler Call-to-Action --- */
.final-cta-section {
    background: var(--gray-800); /* Ein dunklerer Hintergrund für mehr Kontrast */
    color: var(--text-white);
    text-align: center;
    padding: var(--space-4xl) var(--space-xl);
    margin: var(--space-3xl) 0 0 0;
}

.final-cta-section h2 {
    color: var(--text-white);
    margin-top: 0;
}

.final-cta-section p {
    color: var(--gray-300);
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
    font-size: 1.1rem;
}




/* --- Responsive Anpassungen --- */
@media (max-width: 768px) {
    .steps-container, .testimonials {
        grid-template-columns: 1fr;
    }
}

/* =================================================================
   GRID LAYOUT FIX FÜR PRIVATKUNDEN-SEITE
   ================================================================= */

/* Bestehendes Grid (für 3 Elemente wie bei "problem-cards") */
.problem-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
}

/* Neues Grid-Layout für Sektionen mit 4 Elementen */
.features-grid,
.steps-grid {
    display: grid;
    gap: var(--space-xl);
}

/* Auf größeren Bildschirmen (Desktop) -> 2 Spalten */
@media (min-width: 768px) {
    .features-grid,
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Auf sehr großen Bildschirmen -> 4 Spalten */
@media (min-width: 1200px) {
    .features-grid,
    .steps-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Ausnahme für die "Vorteile"-Sektion, die bei 2x2 besser aussieht */
    .features-b2b-section .features-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1000px; /* Begrenzt die Breite für bessere Lesbarkeit */
        margin: 0 auto;
    }
}

/* =================================================================
   STYLING FÜR DIE INTERAKTIVE LIVE-DEMO
   ================================================================= */

.interactive-demo-section {
    padding: var(--space-4xl) var(--space-xl);
    background-color: var(--bg-primary);
}

.demo-wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.demo-input-card, .demo-output-card {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    height: 100%;
    box-shadow: var(--shadow-sm);
}

.demo-input-card h4, .demo-output-card h4 {
    margin-top: 0;
    text-align: center;
    color: var(--text-secondary);
}

.demo-text-area {
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.5;
    min-height: 250px;
    border: 1px solid var(--gray-200);
}

.demo-output-card .demo-text-area.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.demo-button-container #run-demo-button {
    padding: var(--space-md) var(--space-lg);
    font-size: 1.1rem;
    box-shadow: var(--shadow-lg);
}

/* Styling für den generierten Inhalt */
#demo-output-content h5 {
    font-size: 1rem;
    margin: var(--space-lg) 0 var(--space-sm) 0;
    color: var(--text-primary);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--primary-light);
}
#demo-output-content p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
}
#demo-output-content ul {
    padding-left: var(--space-lg);
    margin: 0;
}

@media (max-width: 900px) {
    .demo-wrapper {
        grid-template-columns: 1fr;
    }

    .demo-button-container {
        /* Kein transform oder rotate hier. Nur etwas Abstand. */
        margin: var(--space-lg) auto; 
        
        /* Optional: Stellt sicher, dass der Button zentriert ist, falls er schmaler ist */
        display: flex;
        justify-content: center;
    }
  
}

/* Zentriert den 3er-Block in der "Warum Behörden-Hilfe"-Sektion */
.comparison-grid {
    display: flex;
    justify-content: center; /* Zentriert die Elemente horizontal */
    flex-wrap: wrap;       /* Erlaubt den Umbruch auf kleinen Bildschirmen */
    gap: var(--space-xl);
}

.comparison-grid .feature-card {
    flex: 0 1 350px; /* Gibt den Karten eine Basisbreite und erlaubt ihnen zu schrumpfen */
}

/* =================================================================
   STYLING FÜR DIE ÜBERARBEITETE GESCHÄFTSKUNDEN-SEITE
   ================================================================= */

/* B2B Demo Anpassungen */
.interactive-demo-section .demo-text-area {
    min-height: 200px; /* Etwas kompakter für B2B-Seite */
}

.interactive-demo-section #b2b-demo-output-content ul {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Video Sektion */
.video-section {
    padding: var(--space-4xl) var(--space-xl);
}

.video-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-2xl);
    max-width: 1200px;
    margin: 0 auto;
}

.video-placeholder {
    aspect-ratio: 16 / 9; /* Sorgt für das richtige Video-Format */
    background-color: var(--gray-800);
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-white);
    font-weight: 500;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all var(--transition-base);
}

.video-placeholder:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-lg);
}

/* =================================================================
   STYLING FÜR DIE ADMIN-DASHBOARD-DEMO
   ================================================================= */

.admin-demo-section {
    padding: var(--space-4xl) var(--space-xl);
}

.admin-demo-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Linke Spalte schmaler */
    gap: var(--space-2xl);
    max-width: 1200px;
    margin: var(--space-2xl) auto;
    align-items: start;
}

.admin-demo-controls h4, .admin-demo-result h4 {
    margin-top: 0;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--gray-200);
}

.control-group {
    margin-bottom: var(--space-lg);
}

.control-group label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: var(--space-sm);
}

.invite-form-sim {
    display: flex;
    gap: var(--space-sm);
}

.invite-form-sim input {
    flex-grow: 1;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
    padding: 0.5rem 0.75rem;
}

.license-status-sim {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

.license-count-display {
    font-weight: 700;
    background-color: var(--primary-light);
    color: var(--primary-color);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

#demo-member-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#demo-member-list li {
    background-color: var(--bg-secondary);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
    font-weight: 500;
}

@media (max-width: 900px) {
    .admin-demo-wrapper {
        grid-template-columns: 1fr;
    }
}
/* =================================================================
   STYLING-ERWEITERUNG FÜR ADMIN-DEMO
   ================================================================= */

/* Passe das Grid auf 3 Spalten an */
.admin-demo-wrapper.extended {
    grid-template-columns: 1fr 1fr 1.5fr; /* Controls | Members | Cases */
}

/* Klickbare Mitglieder in der Demo-Liste */
#demo-member-list li.selectable {
    cursor: pointer;
    transition: all var(--transition-base);
}

#demo-member-list li.selectable:hover {
    background-color: var(--primary-light);
    border-left: 3px solid var(--primary-color);
}

#demo-member-list li.selectable.active {
    background-color: var(--primary-color);
    color: var(--text-white);
}

/* Styling für die Demo-Fall-Liste */
#demo-case-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#demo-case-list li {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--gray-200);
}

#demo-case-list li:last-child {
    border-bottom: none;
}

#demo-case-list .case-title {
    font-weight: 600;
}

#demo-case-list .case-date {
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

@media (max-width: 1024px) {
    .admin-demo-wrapper.extended {
        grid-template-columns: 1fr; /* Auf kleinen Bildschirmen alles untereinander */
    }
}

/* =================================================================
   STYLING FÜR DIE WORKFLOW-TIMELINE
   ================================================================= */

.workflow-timeline-section {
    padding: var(--space-4xl) var(--space-xl);
    background-color: var(--bg-secondary);
}

.timeline-container {
    max-width: 800px;
    margin: var(--space-2xl) auto 0 auto;
}

.timeline {
    list-style: none;
    padding: 0;
    position: relative;
}

/* Die vertikale Linie, die alle Punkte verbindet */
.timeline::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 24px;
    bottom: 24px;
    width: 3px;
    background-color: var(--gray-200);
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    padding-left: 70px; /* Platz für den Icon-Kreis und die Linie */
    margin-bottom: var(--space-2xl);
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-icon {
    position: absolute;
    left: 24px;
    top: 0;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: var(--bg-primary);
    color: var(--primary-color);
    border: 3px solid var(--primary-color);
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    z-index: 1; /* Stellt sicher, dass der Kreis über der Linie liegt */
}

.timeline-content {
    /* Die .card-Klasse aus deinem bestehenden CSS wird hier wiederverwendet */
    position: relative;
    top: -10px; /* Hebt die Karte leicht an für ein schöneres Alignment */
}

.timeline-content h4 {
    margin-top: 0;
    color: var(--text-primary);
}

.timeline-content p {
    margin-bottom: 0;
    color: var(--text-secondary);
}

/* =================================================================
   STYLING FÜR DIE SICHERHEITS-SEKTION
   ================================================================= */

.security-section {
    padding: var(--space-4xl) var(--space-xl);
    background-color: var(--bg-primary);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.trust-pillars-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-2xl);
    max-width: 1200px;
    margin: var(--space-2xl) auto 0 auto;
}

.trust-pillar {
    text-align: center;
    padding: var(--space-xl);
}

.pillar-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: var(--space-lg);
}

.trust-pillar h4 {
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.trust-pillar p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* =================================================================
   STYLING FÜR DIE ANWENDUNGSFÄLLE-SEKTION
   ================================================================= */

.use-case-section {
    padding: var(--space-4xl) var(--space-xl);
}

/* =================================================================
   B2B ANWENDUNGSFÄLLE-SEKTION
   ================================================================= */

.b2b-use-cases {
    background-color: var(--bg-secondary);
    padding: var(--space-4xl) 0; /* Kein seitlicher Padding, da der Container ihn hat */
}

.b2b-use-cases .use-case-wrapper {
    display: grid;
    /* Erzeugt ein Grid mit 4 Spalten, die sich den Platz teilen */
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    max-width: 1400px; /* Etwas breiter für 4 Karten */
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.b2b-use-cases .use-case-card {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid transparent;
    transition: all var(--transition-base);
}

.b2b-use-cases .use-case-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.use-case-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: var(--space-lg);
}

/* HORIZONTALE SCROLL-ANIMATION */
/* Wir nutzen deine bestehende fade-in-element Logik und wenden sie auf die einzelnen Karten an */
.b2b-use-cases .use-case-card {
    opacity: 0;
    transform: translateY(30px); /* Startet leicht nach unten verschoben */
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Wir fügen für jede Karte eine kleine Verzögerung hinzu, damit sie nacheinander erscheinen */
.b2b-use-cases .use-case-card:nth-child(1) { transition-delay: 0.1s; }
.b2b-use-cases .use-case-card:nth-child(2) { transition-delay: 0.2s; }
.b2b-use-cases .use-case-card:nth-child(3) { transition-delay: 0.3s; }
.b2b-use-cases .use-case-card:nth-child(4) { transition-delay: 0.4s; }

/* Wenn die Sektion sichtbar wird, animieren wir die Karten an ihre finale Position */
.b2b-use-cases.fade-in-element.is-visible .use-case-card {
    opacity: 1;
    transform: translateY(0);
}


/* Responsive Anpassung für mobile Ansicht */
@media (max-width: 900px) {
    .b2b-use-cases .use-case-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* =================================================================
   STYLING FÜR DIE NEUE PREIS-SEITE
   ================================================================= */

.pricing-section.new-pricing {
    padding: var(--space-3xl) var(--space-xl);
}

.pricing-table-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-xl);
  justify-content: center;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  box-sizing: border-box;
}

.new-pricing .pricing-card {
    padding: var(--space-lg);
    font-size: 0.95rem;
}

.new-pricing .pricing-card {
    display: flex;
    flex-direction: column; /* Stellt sicher, dass der Button unten ist */
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.new-pricing .pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.new-pricing .pricing-card.recommended {
    border: 2px solid var(--primary-color);
    position: relative;
}

/* "Empfohlen"-Badge */
.new-pricing .pricing-card.recommended::after {
    content: 'Beliebteste Wahl';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-gradient);
    color: var(--text-white);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
}

.plan-header {
    padding: var(--space-xl);
    border-bottom: 1px solid var(--gray-200);
}

.plan-header h3 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.plan-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.plan-price {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 700;
    margin: var(--space-lg) 0 var(--space-sm) 0;
    color: var(--text-primary);
}

.price-per {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.new-pricing .feature-list {
    padding: var(--space-xl);
    margin: 0;
    list-style: none;
    flex-grow: 1; /* Sorgt dafür, dass die Liste den verfügbaren Platz ausfüllt */
}

.new-pricing .feature-list li {
    margin-bottom: var(--space-md);
    padding-left: var(--space-xl);
    position: relative;
}

.new-pricing .feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success-color);
}

.new-pricing .feature-list li.disabled {
    color: var(--text-tertiary);
    text-decoration: line-through;
}

.new-pricing .feature-list li.disabled::before {
    content: '✕';
    color: var(--danger-color);
}

.new-pricing .plan-button {
    width: calc(100% - (2 * var(--space-xl)));
    margin: 0 var(--space-xl) var(--space-xl);
}

@media (max-width: 768px) {
    .pricing-table-wrapper {
        grid-template-columns: 1fr;
    }
}

.badge-popular {
    background: var(--primary-color);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    margin-left: 0.5rem;
}

/* CSS-Fix für den Signatur-Upload-Button */
#signature-upload-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* Sorgt für einen schönen Abstand zwischen Dateiauswahl und Button */
}

#signature-pad-wrapper {
    width: 100%;
    height: 200px; /* Feste Höhe für die Zeichenfläche */
}

#signature-canvas {
    width: 100%;
    height: 100%;
}

/* ======================================================= */
/* STYLES FÜR DEN COOKIE BANNER                             */
/* ======================================================= */
#cookie-banner {
    position: fixed;         /* Schwebt über dem restlichen Inhalt */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2c3e50; /* Dunkler Hintergrund */
    color: #ecf0f1;          /* Heller Text */
    padding: 1rem 2rem;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
    z-index: 1000;           /* Stellt sicher, dass er über allem liegt */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: transform 0.5s ease-in-out;
}

/* Versteckt den Banner standardmäßig oder nach dem Klick */
#cookie-banner.hidden {
    transform: translateY(100%);
}

#cookie-banner p {
    margin: 0;
    font-size: 0.9rem;
}

#cookie-banner a {
    color: #3498db;
    text-decoration: underline;
}

#cookie-banner button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap; /* Verhindert Zeilenumbruch im Button */
}

/* styles.css */

/* ======================================================= */
/* STYLES FÜR DAS MODAL-FENSTER (POPUP)                    */
/* ======================================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Halbtransparenter Hintergrund */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Stellt sicher, dass es über allem liegt */
    opacity: 1;
    transition: opacity 0.3s ease;
   
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none; /* Macht das unsichtbare Modal nicht klickbar */
}

.modal-content {
    background-color: var(--card-bg); /* Passt sich deinem Kartendesign an */
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-width: 500px;
    width: 90%;
    text-align: center;
    position: relative;
    transform: scale(1);
    transition: transform 0.3s ease;
     background-color: #ffffff;
}

.modal-overlay.hidden .modal-content {
    transform: scale(0.9);
}

.modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2.5rem;
    color: var(--text-color-secondary);
    cursor: pointer;
}

/* In styles.css */

/* ======================================================= */
/* VERBESSERTES DESIGN FÜR FORMULAR-ELEMENTE               */
/* ======================================================= */

/* 1. Allgemeines Styling für alle Dropdown-Menüs (<select>) */
select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #fff;
    font-size: 1rem;
    color: var(--text-color);
    cursor: pointer;
    margin-bottom: 1rem; /* Sorgt für Abstand nach unten */
    
    /* Ersetzt den hässlichen Standard-Pfeil durch einen eigenen */
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.65em auto;
}



/* In styles.css */

/* ======================================================= */
/* FINALES DESIGN-UPDATE FÜR BESSEREN KONTRAST             */
/* ======================================================= */

/* 1. Verbessertes Dropdown-Menü mit deutlicherem Rand */
select {
    border-color: #bbb; /* Ein dunkleres Grau für den Rand, damit man ihn immer sieht */
}

/* 2. Kleiner Löschen-Button (das '×') wird immer sichtbar gemacht */
.delete-button {
    background-color: #f0f0f0;  /* Ein leichter, solider Hintergrund */
    color: var(--text-color-secondary); /* Das 'x' bekommt eine dunklere Farbe */
    border: 1px solid var(--border-color);
    border-radius: 50%;         /* Macht den Button rund */
    width: 24px;
    height: 24px;
    line-height: 22px;        /* Zentriert das 'x' vertikal */
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Der Hover-Effekt wird jetzt noch deutlicher */
.delete-button:hover {
    background-color: var(--error-color); /* Deine rote Fehler-Farbe */
    color: white;
    border-color: var(--error-color);
    transform: scale(1.1);
}

/* In styles.css */

/* ======================================================= */
/* FINALE DESIGN-ANPASSUNGEN FÜR BESSERE SICHTBARKEIT      */
/* ======================================================= */

/* 1. Stärkerer Rand & solider Hintergrund für alle Dropdowns */
select {
    background-color: #ffffff; /* Solider weißer Hintergrund */
    border: 1px solid #b0b0b0; /* Ein deutlich sichtbarer grauer Rand */
}

/* 2. Sichtbare Ränder für die Adress-Eingabefelder */
/* Wir sprechen gezielt die Inputs im PDF-Details-Container an */
#pdf-details-container input[type="text"] {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
}


/* ======================================================= */
/* FINALES POLISHING FÜR Analyse BUTTON                           */
/* ======================================================= */
.button-analyze {
    background-color: var(--primary-color); /* Dein primäres Blau */
    color: white;
    border: none;
                           
    padding: 0.8rem;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 12px !important;
    margin-top: 1.5rem;                     /* Abstand nach oben */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.button-analyze:hover {
    background-color: #3a7ac8; /* Ein etwas dunkleres Blau */
}


/* ======================================================= */
/* BRANDNEUES DESIGN FÜR DIE LÖSCHEN-BUTTONS               */
/* ======================================================= */

.button-delete-trigger {
    background-color: #6c757d;  /* Ein neutrales, dunkles Grau */
    color: white;
    border: 1px solid #5a6268;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;/* Deine abgerundeten Ecken */
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.button-delete-trigger:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/* In styles.css */

/* ======================================================= */
/* SPEZIFISCHE KORREKTUR FÜR DEN HEADER-BUTTON AUF INDEX.HTML */
/* ======================================================= */

/* Diese Regel zielt genau auf den Button im Header ab */
.main-nav .nav-auth .button-primary {
    /* Basis-Stile aus der .btn-Klasse, die hier fehlen */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    font-weight: 500;
    line-height: 1;
    border-radius: var(--radius-md);
    text-decoration: none;
    white-space: nowrap;
    
    /* Farb-Stile aus der .btn-primary-Klasse */
    background: var(--primary-gradient);
    color: var(--text-white);
    box-shadow: var(--shadow-sm);
    border: none;
    
    /* Hover-Effekte */
    transition: all var(--transition-base);
}

.main-nav .nav-auth .button-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}


/* Stellt sicher, dass die Button-Gruppe nebeneinander liegt */
.button-group {
    display: flex;
    gap: 1rem;
}
.button-group > .button-primary,
.button-group > .button-secondary {
    flex: 1; /* Beide Buttons teilen sich den Platz gleichmäßig */
}

/* Versteckt den Standard "Datei auswählen"-Button */
#signature-upload-form input[type="file"] {
    display: none;
}



/* Zeigt den Dateinamen neben dem Button an */
#file-name-display {
    font-style: italic;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-left: 1rem;
}

/* Macht aus dem Text-Löschen-Button einen schicken, runden Icon-Button */
.delete-button-icon {
    background-color: #f0f0f0;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
    margin: 0.5rem auto 0;
}

.delete-button-icon:hover {
    background-color: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
    transform: scale(1.1);

    /*  Button Bild für Unterschrift */
}
#open-upload-button {
background: var(--gray-100);
    color: var(--text-secondary);
    border: 1px solid var(--gray-300);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all var(--transition-base);
}

#open-upload-button {
    background: var(--gray-200);
    color: var(--text-primary);
}
/* Button Unterschrift hinzufügen */
#open-signature-pad-button {
background: var(--gray-100);
    color: var(--text-secondary);
    border: 1px solid var(--gray-300);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all var(--transition-base);
}

#open-signature-pad-button {
    background: var(--gray-200);
    color: var(--text-primary);
}


#download-pdf-button {
background: var(--gray-100);
    color: var(--text-secondary);
    border: 1px solid var(--gray-300);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all var(--transition-base);
}

#download-pdf-button {
    background: var(--gray-200);
    color: var(--text-primary);
}


/* ======================================================= */
/*  DESIGN FÜR DIE HERO-ANIMATION (DEMO-STIL)         */
/* ======================================================= */

.hero-animation-wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* 3 Spalten: Karte, Pfeil, Karte */
    align-items: center;
    gap: var(--space-lg);
    max-width: 900px; /* Etwas breiter für einen besseren Look */
    margin: 0 auto;
    perspective: 1000px; /* Erzeugt eine 3D-Perspektive für die Animation */
}

.hero-animation-card {
    /* Wir nutzen dein bestehendes Karten-Design */
    background-color: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-animation-card h4 {
    margin: 0 0 var(--space-sm) 0;
    font-size: 0.9rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-animation-card p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
}

.hero-animation-card.output-card p {
    color: var(--success-color); /* Hebt das positive Ergebnis hervor */
}

/* Der animierte Pfeil */
.hero-animation-arrow {
    font-size: 2.5rem;
    color: var(--primary-color);
    opacity: 0;
    animation: arrow-pop-in 0.5s ease-out 1s forwards; /* Startet mit 1s Verzögerung */
}

/* Die rechte Karte (das Ergebnis) */
.hero-animation-card.output-card {
    opacity: 0;
    transform: rotateY(-20deg) scale(0.95);
    animation: card-flip-in 0.7s ease-out 1.5s forwards; /* Startet nach dem Pfeil */
}


/* Keyframe-Animationen */

@keyframes arrow-pop-in {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes card-flip-in {
    from {
        opacity: 0;
        transform: rotateY(-20deg) scale(0.95);
    }
    to {
        opacity: 1;
        transform: rotateY(0) scale(1);
    }
}

/* Responsive Anpassung für mobile Geräte */
@media (max-width: 768px) {
    .hero-animation-wrapper {
        grid-template-columns: 1fr; /* Alles untereinander */
    }
    .hero-animation-arrow {
        transform: rotate(90deg); /* Pfeil nach unten drehen */
        margin: var(--space-sm) 0;
    }
}

/* ======================================================= */
/* STYLING FÜR DIE INTERAKTIVE FEATURE-SHOWCASE            */
/* ======================================================= */

.feature-showcase-section {
    padding: var(--space-4xl) var(--space-xl);
    background-color: var(--bg-secondary); /* Nutzt deinen bestehenden Hintergrund */
    perspective: 1500px; /* Erzeugt 3D-Raum für den Hover-Effekt */
}

.feature-showcase-grid {
    display: grid;
    /* Auf großen Bildschirmen (Desktop) erzwingen wir 4 Spalten */
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
}

/* Anpassung für Tablets: 2 Spalten */
@media (max-width: 1024px) {
    .feature-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Anpassung für Handys: 1 Spalte */
@media (max-width: 768px) {
    .feature-showcase-grid {
        grid-template-columns: 1fr;
    }
}

.showcase-card {
    background-color: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl); /* Dein großer Eckenradius */
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-slow); /* Deine langsame Transition für einen weichen Effekt */
}

/* Der "Wow-Effekt" beim Hovern */
.showcase-card:hover {
    transform: translateY(-10px) rotateX(5deg); /* Hebt die Karte an und kippt sie leicht */
    box-shadow: var(--shadow-xl); /* Dein stärkster Schatten für mehr Tiefe */
    border-color: var(--primary-color);
}

.showcase-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: var(--space-lg);
    display: block;
}

.showcase-card h3 {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin: 0 0 var(--space-md) 0;
}

.showcase-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}


/* ======================================================= */
/* STYLING FÜR DIE INTERAKTIVE PDF-DEMO                    */
/* ======================================================= */
.pdf-demo-section {
    padding: var(--space-4xl) var(--space-xl);
}

.pdf-demo-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-2xl);
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

.pdf-demo-inputs .demo-input-group {
    margin-bottom: var(--space-lg);
}

.pdf-demo-inputs .demo-input-group label {
    font-weight: 600;
    color: var(--text-primary);
}

.pdf-demo-inputs .demo-input-group p {
    background-color: var(--bg-secondary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-style: italic;
}

.signature-placeholder-text {
    color: var(--success-color);
    font-weight: 500;
}

.pdf-demo-output {
    background-color: var(--gray-200);
    padding: var(--space-xl);
    border-radius: var(--radius-sm);
}

.pdf-preview-page {
    background-color: white;
    /* ENTFERNT: aspect-ratio: 210 / 297; */
    height: auto; /* NEU: Die Höhe passt sich dem Inhalt an */
    min-height: 200px; /* NEU: Stellt eine Mindesthöhe sicher */
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.pdf-preview-page .pdf-content {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.pdf-preview-page.is-generated .pdf-content {
    opacity: 1;
}

.pdf-spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
}

/* Simulierter Brief-Inhalt */
.pdf-content .recipient { font-weight: bold; margin-bottom: 2rem; }
.pdf-content .subject { font-weight: bold; margin-top: 2rem; margin-bottom: 1rem; }
.pdf-content .salutation { margin-bottom: 1rem; }
.pdf-content .body { font-size: 0.8rem; line-height: 1.5; }
.pdf-content .closing { margin-top: 2rem; }
.pdf-content .signature { width: 120px; margin-top: 0.5rem; }

@media (max-width: 900px) {
    .pdf-demo-wrapper {
        grid-template-columns: 1fr;
    }
}


/* ======================================================= */
/* SEQUENZIELLE HIGHLIGHT-ANIMATION                      */
/* ======================================================= */

.highlight-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

/* Wenn die Sektion sichtbar ist, starten die Animationen */
.is-visible .highlight-on-scroll {
    opacity: 1;
    transform: translateY(0);
}

/* Die Magie: Jede Karte bekommt eine eigene kleine Verzögerung */
.is-visible .highlight-on-scroll:nth-child(1) { transition-delay: 0.2s; }
.is-visible .highlight-on-scroll:nth-child(2) { transition-delay: 0.4s; }
.is-visible .highlight-on-scroll:nth-child(3) { transition-delay: 0.6s; }
.is-visible .highlight-on-scroll:nth-child(4) { transition-delay: 0.8s; }


.scroll-highlight-card {
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out, border-color 0.5s ease-out;
    border: 2px solid transparent;
}

.scroll-highlight-card.is-highlighted {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-color);
}


/* ======================================================= */
/* STYLING FÜR DIE TRUST-BAR-SEKTION                      */
/* ======================================================= */
.trust-bar-section {
    background-color: var(--bg-secondary); /* Dein hellblau für den Hintergrund */
    padding: var(--space-3xl) var(--space-xl);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.trust-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-xl);
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.trust-metric .metric-number {
    display: block;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.1;
}

.trust-metric .metric-label {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.trust-testimonial {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.trust-testimonial blockquote {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--text-primary);
    margin: 0 0 var(--space-md) 0;
    border: none;
    padding: 0;
}

.trust-testimonial cite {
    font-weight: 600;
    color: var(--text-secondary);
    font-style: normal;
}
.trust-metric:first-child .metric-number::after {
    content: '+';
}

.pricing-summary {
    text-align: center;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #fdfdfd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.pricing-summary .page-count-info {
    font-size: 1rem;
    color: var(--text-color-light);
    margin: 0;
}

.pricing-summary .price-info {
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

.pricing-summary .price-tag {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 1rem 0 1.5rem 0;
}

.pricing-summary .button-primary {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

.error-message {
    color: var(--error-color, #d9534f);
    font-weight: bold;
    text-align: center;
    padding: 1rem;
    background-color: #fdd;
    border: 1px solid var(--error-color, #d9534f);
    border-radius: 8px;
}

/* ======================================================= */
/* DESIGN FÜR AKTEN-ANALYSE VERLAUFSLISTE                  */
/* ======================================================= */

#file-history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
}

#file-history-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
}

#file-history-list li:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

#file-history-list li.selected {
    background: var(--primary-color);
    color: var(--text-white);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

#file-history-list li.selected .delete-button {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-white);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ======================================================= */
/* DESIGN FÜR "ZUR AKTEN-ANALYSE" BUTTON                   */
/* ======================================================= */

#akten-analyse-link-container .btn {
    width: 100%;
    box-sizing: border-box; /* Verhindert, dass Padding die Breite sprengt */
}

/* ======================================================= */
/* DESIGN FÜR DAS RÜCKFRAGEN-FELD (CHAT-INTERFACE)       */
/* ======================================================= */

#follow-up-chat-container h4 {
    margin-bottom: var(--space-md);
}

#chat-history {
    background-color: var(--bg-secondary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: var(--space-lg);
}

.chat-message {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--gray-200);
}

.chat-message:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.chat-message p {
    margin: 0 0 var(--space-sm) 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.chat-message strong {
    color: var(--text-primary);
}

#chat-input-area {
    display: flex;
    gap: var(--space-md);
}

#chat-input {
    flex-grow: 1;
    /* Nutzt dein bestehendes form-input Styling */
    padding: var(--space-md);
    font-size: 1rem;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    transition: all var(--transition-base);
}

#chat-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

#send-chat-button {
    /* Nutzt dein bestehendes Button-Styling */
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

#send-chat-button:hover {
    background: var(--primary-hover);
}

#chat-loading-spinner {
    /* Nutzt deinen bestehenden Spinner, aber zentriert ihn */
    width: 24px;
    height: 24px;
    border-width: 2px;
    margin: var(--space-md) auto;
}

/* ======================================================= */
/* DESIGN FÜR BUTTONS IM FALL-DETAIL                       */
/* ======================================================= */

/* 1. Basis-Styling für alle drei Buttons */
#save-notes-button,
#back-to-analyze-button,
#link-client-button {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
}

/* 2. Styling für primäre Aktionen (Speichern & Zuweisen) */
#save-notes-button,
#link-client-button {
    background: var(--primary-color);
    color: var(--text-white);
    border-color: var(--primary-color);
}

#save-notes-button:hover,
#link-client-button:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* 3. Styling für die sekundäre Aktion (Zurück / im Stil des Logout-Buttons) */
#back-to-analyze-button {
    background: var(--gray-100);
    color: var(--text-secondary);
    border-color: var(--gray-300);
}

#back-to-analyze-button:hover {
    background: var(--gray-200);
    color: var(--text-primary);
}


/* 4. Layout für die Button-Gruppe (Zurück & Speichern) */
.detail-button-group {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.detail-button-group button {
    flex: 1; /* Beide Buttons teilen sich den Platz gleichmäßig */
}

/* 5. Stellt sicher, dass der Zuweisen-Button die volle Breite hat */
#link-client-button {
    width: 100%;
    margin-top: var(--space-sm);
}

/* ======================================================= */
/* DESIGN FÜR LIZENZ-ANZAHL EINGABEFELD (EINFACHE VERSION) */
/* ======================================================= */

#buy-seats-form .form-group-stepper {
    display: flex;
    flex-direction: column;
}

#buy-seats-form .form-group-stepper label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

#seat-quantity-input {
    /* Basis-Design aus deinem System */
    font-family: var(--font-body);
    padding: var(--space-md);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    transition: all var(--transition-base);

    /* Anpassungen für Größe und Aussehen */
    font-size: 0.9rem;
    font-weight: 600;
    width: 120px; /* Kompakte Breite statt 100% */
}

#seat-quantity-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.analysis-summary.card {
    background-color: var(--primary-light);
    border-left: 4px solid var(--primary-color);
    margin-bottom: var(--space-xl);
}

.analysis-summary h4 {
    margin-top: 0;
    color: var(--primary-color);
}

.analysis-summary p {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* ======================================================= */
/* DESIGN FÜR DEN ANALYSE-LADEBILDSCHIRM                   */
/* ======================================================= */

.loading-indicator {
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
}

.loading-indicator #loading-spinner {
    /* Nutzt deinen bestehenden Spinner, stellt aber sicher, dass er zentriert ist */
    margin-left: auto;
    margin-right: auto;
}

.loading-indicator h3 {
    margin-top: var(--space-lg);
    color: var(--text-primary);
}

.loading-indicator p {
    color: var(--text-secondary);
    max-width: 400px;
    margin: var(--space-sm) auto 0;
}


#back-to-new-analysis-button {
    /* Basis-Stil (im Stil des Logout-Buttons) */
    background: var(--gray-100);
    color: var(--text-secondary);
    border: 1px solid var(--gray-300);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    width: 100%; /* Nimmt die volle Breite des Containers ein */
    margin-top: var(--space-xl); /* Sorgt für etwas mehr Abstand nach oben */
}

#back-to-new-analysis-button:hover {
    background: var(--gray-200);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* ======================================================= */
/* FINALE KORREKTUREN FÜR ADMIN-DASHBOARD                  */
/* ======================================================= */

/* 1. Scrollen im Popup-Fenster (Modal) ermöglichen */

#case-detail-modal-content {
    /* Stellt sicher, dass das Modal nie höher als der Bildschirm ist */
    max-height: 85vh; 
    
    /* Richtet den Inhalt (Titel, Details) als Spalte aus */
    display: flex;
    flex-direction: column;
}

#modal-case-details {
    /* Dieser Bereich wird scrollbar, wenn der Inhalt zu lang ist */
    overflow-y: auto;
    
    /* Fügt einen kleinen Innenabstand für den Scrollbalken hinzu */
    padding-right: 1rem; 
}


/* 2. Design für den "Vollständige Analyse anzeigen"-Button */

.show-details-button,.show-app-details-button {
    /* Basis-Stil (im Stil des Logout-Buttons) */
    background: var(--gray-100);
    color: var(--text-secondary);
    border: 1px solid var(--gray-300);
    padding: var(--space-xs) var(--space-md); /* Etwas kleiner für die Tabelle */
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.85rem; /* Etwas kleinere Schrift */
    cursor: pointer;
    transition: all var(--transition-base);
    
    /* Entfernt die blaue Farbe der Klasse .button-secondary */
    background-color: var(--gray-100) !important; 
}

.show-details-button:hover, .show-app-details-button:hover {
    background: var(--gray-200) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm);
}

/* Passt die Ausrichtung im Footer des Fall-Eintrags an */
.case-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#show-all-cases-button,
#show-all-file-cases-button {
    /* Basis-Stil (im Stil des Logout-Buttons) */
    background: var(--gray-100);
    color: var(--text-secondary);
    border: 1px solid var(--gray-300);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);

    /* Layout-Anpassungen */
    width: 100%;
    margin-bottom: var(--space-lg); /* Etwas mehr Abstand nach unten */
    box-sizing: border-box;
}

#show-all-cases-button:hover,
#show-all-file-cases-button:hover {
    background: var(--gray-200);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* ======================================================= */
/* STYLING FÜR DIE INTERAKTIVE CHAT-DEMO                   */
/* ======================================================= */
.chat-demo-section {
    padding: var(--space-4xl) var(--space-xl);
}

.chat-demo-window {
    max-width: 700px;
    margin: var(--space-2xl) auto 0;
    background-color: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.chat-demo-window .chat-message {
    display: flex;
    align-items: flex-end;
    margin-bottom: var(--space-lg);
    opacity: 0; 
    transform: translateY(20px);
    transition: all 0.5s ease-out;
}

/* Animation, die per JS ausgelöst wird */
.chat-demo-window.is-visible .chat-message {
    opacity: 1;
    transform: translateY(0);
}

/* Sequenzielle Verzögerung für die Nachrichten */
.chat-demo-window.is-visible .chat-message:nth-child(2) { transition-delay: 1s; }
.chat-demo-window.is-visible .chat-message:nth-child(3) { transition-delay: 2s; }


.chat-message.user-message {
    justify-content: flex-end; /* Richtet die Nutzer-Nachricht rechts aus */
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.avatar.ai {
    background-color: var(--primary-color);
    color: var(--text-white);
    margin-right: var(--space-md);
}

.avatar.user {
    background-color: var(--gray-200);
    color: var(--text-secondary);
    margin-left: var(--space-md);
}

.message-bubble {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    max-width: 80%;
}

.ai-message .message-bubble {
    background-color: var(--primary-light);
    border-bottom-left-radius: var(--radius-xs);
}

.user-message .message-bubble {
    background-color: var(--gray-100);
    border-bottom-right-radius: var(--radius-xs);
}

/* ======================================================= */
/* STYLING FÜR den Disclaimer*/
/* ======================================================= */
.disclaimer-box {
    margin-top: var(--space-xl);
    padding: var(--space-md);
    background-color: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}

.disclaimer-box p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
}

/* ======================================================= */
/* DESIGN FÜR "FINALES PDF ERSTELLEN" BUTTON (REVIEW-POPUP) */
/* ======================================================= */

#final-pdf-button {
    width: 100%;
    margin-top: 1rem;
}

/* ======================================================= */
/* KORREKTUR FÜR BRANDING-FORMULAR LAYOUT (ADMIN)          */
/* ======================================================= */

#branding-form {
    display: flex;
    flex-direction: column; /* Zwingt alle Elemente untereinander */
    gap: 0.5rem; /* Fügt einen kleinen Abstand zwischen den Elementen hinzu */
}

#branding-form label {
    margin-top: var(--space-md); /* Fügt Abstand über den Labels hinzu */
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

#branding-form input[type="file"],
#branding-form textarea,
#branding-form button {
    width: 100%;
    box-sizing: border-box; /* Verhindert Überlauf durch Padding/Border */
}

/* ======================================================= */
/* LAYOUT FÜR DIE ACTION-BUTTON-GRUPPE (ANALYSE & LEER)    */
/* ======================================================= */

.button-analyze {
    width: 100%;
    margin-top: var(--space-lg);
}

/* Styling für den "Ohne Analyse starten"-Button im Stil des Logout-Buttons */
#start-blank-letter-button {
    display: block; /* Wichtig, damit margin: auto funktioniert */
    margin: var(--space-md) auto 0; /* Zentriert den Button horizontal */
    
    /* Basis-Stil (dezent, wie ein Link) */
    background: var(--gray-100);
    color: var(--text-secondary);
    border: 1px solid var(--gray-300);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

#start-blank-letter-button:hover {
     background: var(--gray-200);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* ======================================================= */
/* DESIGN FÜR DEN DATUMS-FILTER                            */
/* ======================================================= */

.date-filter-group {
    display: flex;
    flex-wrap: wrap; /* ERLAUBT DEN UMBRUCH IN DIE NÄCHSTE ZEILE */
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.date-filter-group input[type="date"] {
    flex-grow: 1; /* Lässt die Eingabefelder den verfügbaren Platz nutzen */
    min-width: 120px; /* Verhindert, dass sie zu klein werden */
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    font-family: var(--font-body);
}

.date-filter-group span {
    flex-shrink: 0; /* Verhindert, dass das "bis" gequetscht wird */
}

.date-filter-group button {
    flex-basis: 100%; /* Der Button nimmt immer die volle Breite in einer neuen Zeile ein */
    margin-top: var(--space-sm); /* Fügt einen kleinen Abstand nach oben hinzu */
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.date-filter-group button:hover {
    background: var(--primary-hover);
}

/* ======================================================= */
/* DESIGN FÜR NOTIZEN IM ADMIN-DETAIL-POPUP                */
/* ======================================================= */

/* Teilt das Modal in Analyse (oben) und Notizen (unten) */
#modal-case-details {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Verhindert doppelte Scrollbalken */
    height: 100%;
}

/* Der obere Teil mit der Analyse wird scrollbar */
.analysis-content-wrapper {
    overflow-y: auto;
    padding-right: 1rem; /* Platz für den Scrollbalken */
    flex-grow: 1; /* Nimmt den meisten Platz ein */
}

/* Der untere, feste Teil für die Notizen */
.modal-notes-section {
    padding-top: var(--space-lg);
    margin-top: var(--space-lg);
    border-top: 1px solid var(--gray-200);
    flex-shrink: 0; /* Verhindert, dass dieser Bereich schrumpft */
}

.modal-notes-section h4 {
    margin-top: 0;
    margin-bottom: var(--space-md);
}

.modal-notes-section textarea {
    width: 100%;
    min-height: 80px;
    margin-bottom: var(--space-md);
}

.modal-notes-section button {
    width: 100%;
}

/* ======================================================= */
/* DESIGN FÜR SEKUNDÄRE POPUP-BUTTONS (LOGOUT-STIL)        */
/* ======================================================= */


#save-admin-note-button,
#signature-save-button,
#signature-clear-button {
    /* Basis-Stil (im Stil des Logout-Buttons) */
    background: var(--gray-100) !important; /* !important überschreibt alte .button-primary Stile */
    color: var(--text-secondary) !important;
    border: 1px solid var(--gray-300) !important;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

#save-admin-note-button:hover,
#signature-save-button:hover,
#signature-clear-button:hover {
    background: var(--gray-200) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm);
}

/* ======================================================= */
/* DESIGN FÜR DEN QUICK-START-LEITFADEN (TIMELINE)         */
/* ======================================================= */

.workflow-timeline-section {
    padding: var(--space-4xl) var(--space-xl);
}

.timeline-container {
    max-width: 800px;
    margin: var(--space-2xl) auto 0 auto;
}

.timeline {
    list-style: none;
    padding: 0;
    position: relative;
}

/* Die vertikale Linie, die alle Punkte verbindet */
.timeline::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 24px;
    bottom: 24px;
    width: 3px;
    background-color: var(--gray-200);
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    padding-left: 70px; /* Platz für den Icon-Kreis und die Linie */
    margin-bottom: var(--space-2xl);
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-icon {
    position: absolute;
    left: 24px;
    top: 0;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: var(--bg-primary);
    color: var(--primary-color);
    border: 3px solid var(--primary-color);
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    z-index: 1; /* Stellt sicher, dass der Kreis über der Linie liegt */
}

.timeline-content.card {
    position: relative;
    top: -10px; /* Hebt die Karte leicht an für ein schöneres Alignment */
}

.timeline-content h4 {
    margin-top: 0;
    color: var(--text-primary);
}

.timeline-content p {
    margin-bottom: 0;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    /* Passt den gesamten Header-Container an */
    .app-header {
        flex-direction: column; /* Stapelt Titel und Buttons untereinander */
        align-items: flex-start; /* Richtet alles linksbündig aus */
        gap: 1rem; /* Fügt Abstand zwischen Titel und Button-Zeile hinzu */
    }

    /* Passt den Container an, der die Buttons umschließt */
    .app-header > div {
        display: flex;
        flex-wrap: wrap; /* Erlaubt den Buttons, bei Platzmangel umzubrechen */
        gap: 0.5rem; /* Fügt einen kleinen Abstand zwischen den Buttons hinzu */
    }

    /* Verkleinert die Navigations- und Logout-Buttons im Header */
    .app-header .button-secondary,
    .app-header #logout-button {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* ======================================================= */
/* DESIGN FÜR DIE FILTER-DROPDOWNS (ADMIN-DASHBOARD)       */
/* ======================================================= */

.filter-container {
    padding: var(--space-lg);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
    border: 1px solid var(--gray-200);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.filter-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding-left: var(--space-xs);
}

.filter-group select {
    /* Basis-Stile aus deinem Design-System */
    padding: var(--space-sm) var(--space-md);
    font-size: 1rem;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    background-color: var(--bg-primary);
    transition: all var(--transition-base);
    min-width: 220px; /* Gibt den Dropdowns eine gute Mindestbreite */
    cursor: pointer;
}

.filter-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.filter-group select:disabled {
    background-color: var(--gray-100);
    cursor: not-allowed;
    color: var(--gray-400);
}

/* ======================================================= */
/* DESIGN FÜR DEN "KLIENT BEARBEITEN"-BUTTON               */
/* ======================================================= */

.edit-client-button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-tertiary);
    padding: 0.2rem;
    line-height: 1;
    transition: color var(--transition-base);
}

.edit-client-button:hover {
    color: var(--primary-color);
}

/* ======================================================= */
/* DESIGN FÜR DOKUMENTEN-UPLOAD (FALLDETAILS)              */
/* ======================================================= */

#upload-document-form {
    margin-top: var(--space-lg);
}

.document-upload-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Versteckt den hässlichen Original-Button */
.document-upload-controls input[type="file"] {
    display: none;
}

/* Gestaltet unser Label wie den Logout-Button */
.document-upload-controls .button-secondary-style {
    background: var(--gray-100);
    color: var(--text-secondary);
    border: 1px solid var(--gray-300);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.document-upload-controls .button-secondary-style:hover {
    background: var(--gray-200);
    color: var(--text-primary);
}

/* Styling für die Dateinamen-Anzeige */
#document-file-name {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    font-style: italic;
    flex-grow: 1; /* Nimmt den restlichen Platz ein */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Styling für den "Hochladen"-Button */
#upload-document-form button {
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

#upload-document-form button:hover {
    background: var(--primary-hover);
}

/* ======================================================= */
/* DESIGN FÜR DIE FALLAKTEN-DEMO                           */
/* ======================================================= */
.case-file-window {
    max-width: 800px;
    margin: var(--space-2xl) auto;
    background-color: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.case-file-header {
    padding: var(--space-md) var(--space-lg);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--gray-200);
    color: var(--text-primary);
    font-weight: 500;
}

.case-file-content {
    padding: var(--space-lg);
}

.file-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--gray-100);
}

.file-item:last-child {
    border-bottom: none;
}

.file-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.file-details {
    display: flex;
    flex-direction: column;
}

.file-name {
    font-weight: 500;
    color: var(--text-primary);
}

.file-meta {
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

.note-item .file-meta {
    font-style: italic;
    color: var(--accent-color);
}

.generated-item .file-name {
    color: var(--success-color);
}

@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Versteckt die animierten Elemente standardmäßig */
.animated-item {
    opacity: 0;
}

/* Wenn die Sektion sichtbar wird, startet die Animation */
.case-file-demo-section.is-visible .animated-item {
    animation: slideUpFadeIn 0.5s ease-out forwards;
}

/* Die Magie: Jedes Element bekommt eine eigene kleine Verzögerung */
.case-file-demo-section.is-visible .animated-item:nth-child(1) { animation-delay: 0.2s; }
.case-file-demo-section.is-visible .animated-item:nth-child(2) { animation-delay: 0.4s; }
.case-file-demo-section.is-visible .animated-item:nth-child(3) { animation-delay: 0.6s; }
.case-file-demo-section.is-visible .animated-item:nth-child(4) { animation-delay: 0.8s; }
.case-file-demo-section.is-visible .animated-item:nth-child(5) { animation-delay: 1.0s; }

/* ======================================================= */
/* DESIGN FÜR TERMINE & FRISTEN WIDGET                     */
/* ======================================================= */

/* Layout für das Formular zum Hinzufügen von Terminen */
#add-deadline-form {
    display: flex;
    flex-direction: column; /* Zwingt die Elemente untereinander */
    gap: var(--space-sm);
}

#add-deadline-form input,
#add-deadline-form select,
#add-deadline-form button {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-sm);
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
}

#add-deadline-form button {
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    font-weight: 500;
    cursor: pointer;
    margin-top: var(--space-xs);
}

#add-deadline-form button:hover {
    background: var(--primary-hover);
}

/* Layout für die Liste der anstehenden Termine */
#deadline-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md) 0;
}

.deadline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--gray-100);
}

.deadline-item:last-child {
    border-bottom: none;
}

.deadline-checkbox {
    margin-top: 5px;
}

.deadline-details {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.deadline-details strong {
    font-weight: 500;
    color: var(--text-primary);
}

.deadline-details small {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

/* ======================================================= */
/* KORREKTUR FÜR ABSENDER-INFO FORMULAR LAYOUT             */
/* ======================================================= */

#sender-info-form {
    display: flex;
    flex-direction: column; /* Zwingt alle Elemente untereinander */
    gap: var(--space-sm); /* Fügt einen kleinen Abstand hinzu */
}

#sender-info-form .form-group {
    margin-bottom: 0; /* Entfernt den Standard-Abstand, da wir jetzt 'gap' verwenden */
}

#sender-info-form button {
    margin-top: var(--space-sm);
}

/* ======================================================= */
/* DESIGN FÜR FEATURE-ERKLÄRUNGEN                          */
/* ======================================================= */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-xl);
}

.feature-card .feature-icon {
    font-size: 2.5rem; /* Größere Icons */
    margin-bottom: var(--space-md);
    background-color: var(--primary-light);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-card h4 {
    margin-bottom: var(--space-sm);
    font-size: 1.2rem;
    color: var(--text-primary);
}

.feature-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ======================================================= */
/* NEUES LAYOUT FÜR AKTIONEN IN DER VERLAUFSLISTE          */
/* ======================================================= */

.case-meta {
display: flex;
align-items: flex-start; 
gap: var(--space-md);
}

.case-meta .case-date {
white-space: nowrap;
}

.case-actions {
display: flex;
flex-direction: column; 
align-items: center;    /* Zentriert die Buttons */
gap: 6px;               /* Abstand zwischen den Buttons */
margin-left: auto;      /* Schiebt die Buttons ganz nach rechts \*/
}


.edit-title-button,
.case-meta .delete-button {
background: none;
border: none;
cursor: pointer;
padding: 2px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
}


.edit-title-button svg {
width: 16px;
height: 16px;
stroke: var(--text-secondary);
transition: stroke 0.2s ease;
}

.edit-title-button:hover svg {
stroke: var(--primary-color);
}

.case-meta .delete-button {
font-size: 22px;
font-weight: bold;
transition: color 0.2s ease;
}

.case-meta .delete-button:hover {
color: var(--color-danger);
}


\#history-list li,
\#file-history-list li {
display: flex;
justify-content: space-between; 
align-items: center;
gap: var(--space-md);
}


.case-title-wrapper {
display: flex;
flex-direction: column; 
gap: 4px;
min-width: 0; 
}

.case-title {
white-space: nowrap;      
overflow: hidden;         
text-overflow: ellipsis;  
font-weight: 500;
}

.case-date {
font-size: 0.85rem;
color: var(--text-secondary);
}

.case-actions {
flex-shrink: 0; 
}

/* ======================================================= */
/* DESIGN FÜR EINSPARUNGSRECHNER (im Stil des Beispiels)  */
/* ======================================================= */

.calculator-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-xl);
    padding: 2rem;
    overflow: hidden;
}

.calculator-input-section {
    padding: 1rem;
}

.calculator-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.calculator-controls label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}
#letters-per-day-value {
    font-weight: bold;
    font-size: 1.6rem;
    color: var(--primary-color);
}

.calculator-assumptions {
    margin-top: 2rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Output-Bereich */
.calculator-output-section {
    background: transparent; /* Kein Card-Hintergrund */
    color: var(--text-primary);
    padding: 0;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.calculator-output-section h3 {
    margin-bottom: 2rem;
    font-weight: 500;
    opacity: 0.95;
}

.calculator-output-section .result-item {
    margin-bottom: 1.5rem;
}

.calculator-output-section .result-value {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-color); /* gleiche Farbe wie Slider */
}

.calculator-output-section .result-label {
    font-size: 1rem;
    opacity: 0.85;
}

/* Slider */
#letters-per-day {
    width: 100%;
    height: 8px;
    background: var(--gray-300);
    border-radius: 5px;
    outline: none;
    transition: background 0.3s ease;
}
#letters-per-day:hover {
    background: var(--gray-400);
}
#letters-per-day::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid var(--bg-primary);
    cursor: pointer;
    transition: transform 0.2s ease;
}
#letters-per-day::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}
#letters-per-day::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid var(--bg-primary);
    cursor: pointer;
}

/* Mobile */
@media (max-width: 900px) {
    .calculator-wrapper {
        grid-template-columns: 1fr;
    }
    .calculator-output-section {
        margin-top: 2rem;
    }
}

/* ==========================================================================
   STYLING FÜR E-MAIL ASSISTENT (V2, ANGEPASSTES DESIGN)
   ========================================================================== */

#email-assistant-container {
    background: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
}

#email-assistant-container h2 {
    margin-top: 0;
    margin-bottom: var(--space-lg);
    font-size: 1.5rem;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Eingabe- und Auswahlfelder */
#email-assistant-container input[type="text"],
#email-assistant-container select,
#email-assistant-container textarea {
    @apply form-input; /* Falls Tailwind vorhanden, ansonsten normale Styles unten */
    width: 100%;
    padding: var(--space-md);
    font-size: 1rem;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    transition: all var(--transition-base);
    margin-bottom: var(--space-md);
}

#email-assistant-container input:focus,
#email-assistant-container select:focus,
#email-assistant-container textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* Button-Reihe */
.email-assistant-buttons {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.email-assistant-buttons .btn-primary {
    background: var(--primary-gradient);
    color: var(--text-white);
    box-shadow: var(--shadow-sm);
}

.email-assistant-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.email-assistant-buttons .btn-secondary {
    background: var(--bg-primary);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.email-assistant-buttons .btn-secondary:hover {
    background: var(--primary-color);
    color: var(--text-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Vorschau-Bereich */
#email-preview {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border-left: 4px solid var(--primary-color);
    margin-top: var(--space-lg);
    max-height: 300px;
    overflow-y: auto;
}

#email-preview h4 {
    margin-top: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

#email-preview p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ==========================================================================
   E-MAIL ASSISTENT CHAT STYLING
   ========================================================================== */

/* Container des Assistenten */
#email-assistant-container {
    display: flex;
    flex-direction: column; /* Alles untereinander */
    gap: var(--space-lg);
}

/* Chat-Fenster */
#chat-window {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Nachrichten */
.chat-message {
    max-width: 85%;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    line-height: 1.4;
    word-wrap: break-word;
}
.chat-message.bot {
    background: var(--gray-100);
    color: var(--text-primary);
    align-self: flex-start;
    border: 1px solid var(--gray-200);
}
.chat-message.user {
    background: var(--primary-color);
    color: var(--text-white);
    align-self: flex-end;
    border: 1px solid var(--primary-color);
}

/* Formular unter dem Chat */
#email-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Textfeld */
#email-input {
    width: 100%;
    resize: vertical;
    min-height: 120px;
}

/* Buttons unter dem Textfeld */
#email-form .button-group {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}
#email-form .button-group .btn {
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.9rem;
}

/* Mobil: Buttons untereinander */
@media (max-width: 768px) {
    #email-form .button-group {
        flex-direction: column;
        align-items: stretch;
    }
    #email-form .button-group .btn {
        width: 100%;
    }
}

/*  E-Mail Assistenten */

.email-workflow-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.email-column {
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .email-workflow-grid {
        grid-template-columns: 1fr;
    }
}
.email-workflow-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.email-column {
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .email-workflow-grid {
        grid-template-columns: 1fr; /* Stellt auf eine einzelne Spalte um */
        gap: 1.5rem; /* Reduziert den Abstand zwischen den Blöcken */
    }
}

/* NEU: CSS für die E-Mail-Assistent Demo-Animation */
.chat-animation-window {
    max-width: 700px;
    margin: 2rem auto 0;
    background-color: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.chat-animation-window .chat-message {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.chat-animation-window.is-visible .chat-message:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.chat-animation-window.is-visible .chat-message:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.5s;
}

.chat-animation-window.is-visible .chat-message:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 2.5s;
}




/* ======================================================= */
/* FINALE KORREKTUR FÜR TEXTUMBRUCH (DESKTOP & MOBIL)      */
/* ======================================================= */

/* Stellt sicher, dass der Container für den Titel flexibel ist */
.case-title-wrapper {
    /* Weist dem Titel-Container an, den verfügbaren Platz zu füllen 
       und bei Bedarf zu schrumpfen. Das ist der Schlüssel für Smartphones! */
    flex: 1;
    min-width: 0; /* Verhindert, dass der Inhalt den Container aufbläht */
    
    /* Behält die vertikale Anordnung von Titel und Datum bei */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Passt den Titel selbst an, damit er korrekt umbricht */
.case-title {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    font-weight: 500;
}

/* Stellt sicher, dass auch der Titel in der Detailansicht umbricht */
#detail-case-title {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ================================================================= */
/* FINALER FIX V3: ÜBERGEORDNETEN CONTAINER BEGRENZEN         */
/* ================================================================= */

/* Diese Regel ist der Schlüssel: Sie zielt auf die gesamte rechte
   Spalte Ihrer App und verhindert, dass deren Inhalt (egal welcher)
   die Seitenbreite sprengen kann. */
.app-main-content {
    overflow-x: hidden;
}

/* Diese Regeln bleiben als zusätzliche Sicherheit bestehen, um
   dem Text selbst zu befehlen, korrekt umzubrechen. */
#detail-explanation,
#analysis-result-content,
.case-title,
#detail-case-title {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ======================================================= */
/* FINALE ANPASSUNGEN FÜR MOBILE BUTTON-LAYOUTS          */
/* ======================================================= */

/* 1. Korrigiert den "Fragen"-Button in der Dokumenten-Analyse */
#chat-input-area {
    /* Erlaubt den Elementen, in die nächste Zeile umzubrechen,
       wenn der Platz auf dem Smartphone eng wird. */
    flex-wrap: wrap;
}

/* 2. Korrigiert die Buttons beim Dokumenten-Upload im Dashboard */
/* Diese Regel greift nur auf Bildschirmen, die 768px oder schmaler sind */
@media (max-width: 768px) {
    .document-upload-controls {
        /* Ändert die Anordnung von "nebeneinander" zu "untereinander" */
        flex-direction: column;
        /* Streckt die Elemente auf die volle Breite für ein sauberes Layout */
        align-items: stretch;
        /* Zentriert den Text in den Buttons */
        text-align: center;
    }

    /* Zentriert auch den Dateinamen */
    #document-file-name {
        text-align: center;
        margin: 0.5rem 0;
    }
}

/* ======================================================= */
/* STYLING FÜR DAS KLIENTEN-ZUWEISEN-DROPDOWN Antragshelfer             */
/* ======================================================= */

.client-assign-dropdown {
    /* Grundlegende Optik & Abstände */
    display: inline-block;
    padding: 0.4rem 2rem 0.4rem 0.8rem; /* Mehr Platz rechts für den Pfeil */
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    /* Eigenen Dropdown-Pfeil einbauen */
    appearance: none; /* Standard-Pfeil in den meisten Browsern entfernen */
    -webkit-appearance: none; /* Standard-Pfeil in Safari/Chrome entfernen */
    -moz-appearance: none; /* Standard-Pfeil in Firefox entfernen */
    
    /* Ein SVG als Hintergrundbild, das als neuer Pfeil dient */
    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='%23343a40' 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 0.5rem center;
    background-size: 1em;
}

/* Verhalten bei Maus-Hover */
.client-assign-dropdown:hover {
    border-color: #888;
}

/* Verhalten, wenn das Dropdown angeklickt/ausgewählt ist */
.client-assign-dropdown:focus {
    outline: none; /* Entfernt den Standard-Fokus-Rahmen */
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Fügt einen modernen "Glow"-Effekt hinzu */
}

/* ======================================================= */
/* KORREKTUR FÜR E-MAIL-ASSISTENT LAYOUT                   */
/* ======================================================= */

/* Diese Regel zwingt die Spalten im E-Mail-Assistenten, ihre
   vorgegebene Breite beizubehalten, auch wenn der Inhalt
   (der KI-Text) sehr lang ist. */
.email-column {
    min-width: 0;
}

/* ======================================================= */
/* LAYOUT FÜR DIE HAUPT-BUTTONS IM DASHBOARD               */
/* ======================================================= */

#akten-analyse-link-container {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;

    /* Unveränderte optionale Stile für einen sauberen Look */
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* KORRIGIERT: Funktioniert jetzt für 2, 3 oder mehr Buttons */
#akten-analyse-link-container > a.btn {
    flex: 1 1 200px;
    text-align: center;
}


@media (max-width: 768px) {
    #akten-analyse-link-container {
        flex-direction: column;
        align-items: center; 
        gap: 0.75rem; /* Etwas weniger Abstand für die mobile Ansicht */
    }

    #akten-analyse-link-container > a.btn {
        flex: none; 
        width: 90%; 
        max-width: 400px; 
    }
}

/* ======================================================= */
/* FIX: Button-Layout im Admin Dashboard                   */
/* ======================================================= */

/* 1. Fügt Abstand zwischen den vertikal gestapelten Kauf-Buttons hinzu */
.button-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Hier wird der Abstand zwischen den Buttons erzeugt */
    width: 100%;
}

/* 2. Stellt sicher, dass die Lizenzverwaltung auf allen Bildschirmen korrekt angezeigt wird */
#manage-subscription-container {
    display: flex;
    flex-direction: column; /* Stellt Label, Input und Button untereinander */
    align-items: stretch;   /* Sorgt dafür, dass alle Elemente die volle Breite einnehmen */
    gap: 0.5rem;            /* Kleiner Abstand zwischen Label, Input und Button */
    width: 100%;
    max-width: 100%;        /* Verhindert, dass der Container über den Rand hinausragt */
    box-sizing: border-box;
}

#manage-subscription-container input,
#manage-subscription-container button {
    width: 100%; /* Zwingt Input-Feld und Button auf die volle verfügbare Breite */
    box-sizing: border-box;
    margin: 0; /* Entfernt eventuelle Standard-Margins, die das Layout verschieben */
}



.pdf-controls {
    padding: 0.5rem;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--gray-200);
}

#side-panel .tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 1rem;
}

#side-panel .tab-button {
    flex-grow: 1;
    background: none;
    border: none;
    padding: 0.75rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
}

#side-panel .tab-button.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

#ai-suggestion-wrapper {
    position: relative;
}

#copy-suggestion-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0.7;
}

.draggable-signature {
    position: absolute;
    top: 100px;
    left: 100px;
    cursor: move;
    width: 150px; /* Standardgröße */
    z-index: 10;
    border: 2px dashed var(--color-primary-light);
    resize: both; /* Erlaubt das Skalieren */
    overflow: visible;
}

.signature-placeholder {
    position: absolute;
    width: 150px;
    height: 40px;
    border: 2px dashed var(--color-primary);
    background-color: rgba(0, 122, 255, 0.1);
}



.history-item-details {
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 0;
}

.history-item-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem;
    list-style: none; /* Entfernt den Standard-Pfeil */
}
.history-item-summary::-webkit-details-marker {
    display: none; /* Entfernt den Standard-Pfeil für Chrome/Safari */
}

.history-item-summary:hover {
    background-color: var(--bg-secondary);
}

.history-item-content {
    padding: 1rem;
    background-color: #f9f9f9;
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
}

.history-item-content .note-preview {
    white-space: pre-wrap;
    background: #fff;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* Versteckt das Standard-"Datei auswählen..."-Feld des Browsers */
input[type="file"] {
    display: none;
}

/* Das allgemeine Styling für unser neues Label, das wie ein Button aussieht */
.custom-file-upload {
    display: inline-block;
    padding: 10px 18px;
    cursor: pointer;
    border-radius: 6px; /* Abgerundete Ecken */
    background-color: #007AFF; /* Ein schönes Blau als Hauptfarbe */
    color: white !important;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.2s ease; /* Sanfter Hover-Effekt */
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}

/* Effekt, wenn man mit der Maus darüber fährt */
.custom-file-upload:hover {
    background-color: #0056b3; /* Etwas dunkleres Blau */
}

/* Eine zweite, dezentere Stil-Variante */
.custom-file-upload.secondary {
    background-color: #6c757d; /* Grau */
    color: white;
}

.custom-file-upload.secondary:hover {
    background-color: #5a6268; /* Dunkleres Grau */
}

/* ======================================================= */
/* CSS-VERFEINERUNG (SEPTEMBER 2025)                       */
/* ======================================================= */

/* 1. Ein "Ghost"-Button im Stil des Logout-Buttons */
.btn-ghost {
    background: var(--gray-100);
    color: var(--text-secondary);
    border: 1px solid var(--gray-300);
    font-weight: 500;
    transition: all var(--transition-base);
}

.btn-ghost:hover {
    background: var(--gray-200);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}


/* 2. Styling für den kleineren, eleganteren Bearbeiten-Stift */

/* Entfernt Hintergrund und Rahmen vom Button selbst */
.case-actions .btn-icon {
    background: transparent;
    border: none;
    padding: 4px; /* Kleiner Klickbereich um das Icon */
    margin: 0;
    cursor: pointer;
    border-radius: 50%; /* Rundet den Hover-Effekt ab */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
}

.case-actions .btn-icon:hover {
    background-color: var(--gray-100);
}

/* Formatiert das SVG-Icon (den Stift) im Button */
.case-actions .btn-icon svg {
    width: 18px;  /* KLEINER */
    height: 18px; /* KLEINER */
    stroke: var(--text-tertiary); /* HELLERE FARBE */
    stroke-width: 2;
    transition: stroke var(--transition-fast);
}

/* Ändert die Stift-Farbe beim Hovern über den Button */
.case-actions .btn-icon:hover svg {
    stroke: var(--primary-color); /* ELEGANTES HIGHLIGHT */
}

/* === VERBESSERTE UNTERSCHRIFT-FUNKTION === */

/* WICHTIG: Stellt den Positions-Kontext für die Unterschriften her */
#pdf-viewer-container {
    position: relative;
}

/* Der Wrapper für eine platzierte Unterschrift */
.signature-wrapper {
  position: absolute;
  border: 1px dashed transparent;
  cursor: move; /* Zeigt den "Verschieben"-Cursor an */
}

/* 3. Der Rahmen, wenn die Signatur ausgewählt ist. */
.signature-wrapper.selected {
  border-color: #007bff;
}

/* 4. Das Bild in der Signatur. */
.signature-wrapper img {
  width: 100%;
  height: 100%;
  display: block;
  /* 'pointer-events: none;' WURDE ENTFERNT, das war der Fehler! */
}

/* 5. Der Anfasser für die Größenänderung (unten rechts). */
.resize-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  right: -10px;
  bottom: -10px;
  background: #007bff;
  border-radius: 50%;
  border: 2px solid white;
  cursor: nwse-resize; /* Der korrekte Cursor für die Größenänderung */
  z-index: 10; /* Stellt sicher, dass er über allem anderen liegt */
}

/* 6. Der Anfasser für das Löschen (oben rechts). */
.delete-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  right: -10px;
  top: -10px;
  background: #dc3545;
  color: white;
  border-radius: 50%;
  border: 2px solid white;
  text-align: center;
  line-height: 16px;
  font-size: 16px;
  font-family: sans-serif;
  cursor: pointer;
  z-index: 10; /* Stellt sicher, dass er über allem anderen liegt */
}

#pdf-render-container {
  overflow: visible;
}
    
    

/* Zeigt die Anfasser nur an, wenn der Wrapper ausgewählt ist */
.signature-wrapper.selected .resize-handle,
.signature-wrapper.selected .delete-handle {
    display: block;
}



/* Styling für den neuen Signatur-PLATZHALTER */

.signature-placeholder {
 position: absolute;
 border: 2px dashed var(--primary-color);
background-color: rgba(0, 122, 255, 0.1);
cursor: move;
 resize: both; /* Erlaubt Ziehen an der Ecke */
 overflow: hidden;
 z-index: 10;

}








/* ======================================================= */
/* 1. GRUNDLAGEN FÜR DAS OVERLAY & MODAL-FENSTER
/* ======================================================= */

/* Das Overlay, das den ganzen Bildschirm abdunkelt */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Versteckt das Modal standardmäßig, anstatt display: none zu verwenden */
.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Der Haupt-Container für den Editor-Inhalt */
#pdf-editor-content {
    width: 95vw;
    height: 95vh;
    max-width: 1800px; /* Obergrenze für sehr große Bildschirme */
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Verhindert, dass Inhalte ausbrechen */
}

/* ======================================================= */
/* 2. LAYOUT DES EDITORS (KOPFZEILE & HAUPTTEIL)
/* ======================================================= */

/* Die Kopfzeile mit Titel und Buttons */
.pdf-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
    flex-shrink: 0; /* Verhindert, dass die Kopfzeile schrumpft */
}

.pdf-editor-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.pdf-editor-actions {
    display: flex;
    gap: 1rem;
}


/* ======================================================= */
/* 3. LINKE SPALTE: DER PDF-VIEWER
/* ======================================================= */


.editor-page-container {
    position: relative; /* WICHTIG: Der Ankerpunkt für die Ebenen */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Die interaktive Formular-Ebene */
.annotationLayer {
    position: absolute;
    top: 0;
    left: 0;
}

/* ======================================================= */
/* 4. RECHTE SPALTE: DER KI-CO-PILOT
/* ======================================================= */



#ai-helper-instruction {
    color: #6c757d;
    text-align: center;
    margin-top: 2rem;
}

#ai-helper-explanation {
    background-color: #f1f3f5;
    border-radius: 6px;
    padding: 1rem;
    min-height: 50px;
    font-size: 0.95rem;
    line-height: 1.6;
}

#ai-helper-explanation p {
    margin: 0;
}

#ai-helper-chat-container {
    flex-grow: 1; /* Nimmt den restlichen Platz ein */
    max-height: 40vh; /* Begrenzt die maximale Höhe */
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.75rem;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Stile für die Chat-Nachrichten (wie zuvor) */
.chat-message {
    width: 100%;
    display: flex;
}
.user-message {
    justify-content: flex-end;
}
.ai-message {
    justify-content: flex-start;
}
.chat-message p {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    margin: 0;
    max-width: 90%;
    line-height: 1.5;
}
.user-message p {
    background-color: #007bff;
    color: white;
    border-bottom-right-radius: 2px;
}
.ai-message p {
    background-color: #e9ecef;
    color: #343a40;
    border-bottom-left-radius: 2px;
}
.ai-message p.error {
    background-color: #f8d7da;
    color: #721c24;
}

/* ======================================================= */
/* 5. ALLGEMEINE HELFER-STILE
/* ======================================================= */

.hidden {
    display: none !important;
}

.loading-indicator {
    padding: 3rem;
    text-align: center;
    color: #6c757d;
}

/* Basis-Stile für Buttons, Inputs etc. (können Sie an Ihr Design anpassen) */

.modal-close-button {
    background: none;
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
    color: #6c757d;
    line-height: 1;
}

.hint-text {
    font-size: 0.85rem;
    font-style: italic;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin-top: 0;
}


 /* ======================================================= */
/* FINALES EDITOR-LAYOUT                                 */
/* ======================================================= */

/* 1. Das Elternelement wird zum "Anker" für die Positionierung. */
.pdf-editor-body {
    position: relative; /* Unbedingt erforderlich! */
    width: 100%;
    height: 100%;
}

/* 2. Die linke Spalte (PDF) wird absolut positioniert, wie gefordert. */
#editor-pdf-container {
    position: absolute; /* Die technische Anforderung der Bibliothek */
    top: 0;
    left: 0;
    bottom: 0;
    width: 65%; /* Nimmt die linken 65% des Platzes ein */
    overflow: auto; /* Erlaubt das Scrollen im PDF */
    background-color: #52585f;
}

/* 3. Die rechte Spalte (KI) wird ebenfalls absolut positioniert, damit sie nicht verdeckt wird. */
#editor-ai-copilot {
    position: absolute; /* Wichtig, damit sie im Layout sichtbar bleibt! */
    top: 0;
    right: 0;
    bottom: 0;
    width: 35%; /* Nimmt die verbleibenden 35% des Platzes ein */
    overflow-y: auto; /* Erlaubt das Scrollen in der KI-Spalte */
    padding: 1.5rem;
    border-left: 1px solid #dee2e6;
    background-color: #ffffff;
}




/* Notwendige Stile für das CDN-Layout */
.pdf-editor-body {
    position: relative;
    width: 100%;
    height: 100%;
}
.pdf-editor-body {
    display: flex;
    /* Ändert die Anordnung von nebeneinander zu untereinander */
    flex-direction: column; 
    gap: 1.5rem; /* Ein wenig Abstand zwischen PDF und Co-Pilot */
    overflow-y: auto; /* Erlaubt das Scrollen, falls der Inhalt zu hoch ist */
}
#editor-pdf-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 65%;
    overflow: auto;
    background-color: #52585f;
}
#editor-pdf-container {
    /* Nimmt 65% der sichtbaren Bildschirmhöhe ein */
    max-height: 65vh; 
    overflow-y: auto; /* Macht den PDF-Container scrollbar */
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}
#editor-ai-copilot {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 35%;
    overflow-y: auto;
    padding: 1.5rem;
    border-left: 1px solid #dee2e6;
    background-color: #ffffff;
}

@media (max-width: 900px) {

    /* Der Hauptcontainer wird zu einem einfachen Block-Layout */
    .pdf-editor-body {
        display: block;
        overflow-y: auto; /* Erlaubt das Scrollen des gesamten Overlays */
    }

    /* 1. Die PDF-Spalte wird neu positioniert */
     #editor-pdf-container {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 60vh;
    background-color: #52585f;
  }

    /* 2. Die KI-Co-Pilot-Spalte wird ebenfalls neu positioniert */
    #editor-ai-copilot {
    position: relative !important;
    width: 100%;
    height: auto;
    min-height: 40vh;
    margin-top: 60vh; /* schiebt ihn visuell unter das PDF */
    border-left: none;
    border-top: 2px solid #dee2e6;
    padding: 1.5rem;
    background-color: #fff;
  }

    .chat-input-group {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ======================================================= */
/* FINALE KORREKTUR FÜR ADMIN DASHBOARD (MOBILES PDF-POPUP) ANTRAGSHELFER */
/* ======================================================= */

/* Diese Regel greift nur auf Bildschirmen, die 900px oder schmaler sind */
@media (max-width: 900px) {

    /* 1. Ändert die Anordnung des Hauptcontainers von horizontal zu vertikal */
    .pdf-viewer-body {
        flex-direction: column;
        overflow-y: auto; /* Erlaubt das Scrollen, falls der Inhalt zu hoch wird */
    }

    /* 2. Passt den PDF-Anzeigebereich an */
    #pdf-viewer-render-area {
        height: 60vh;       /* Gibt dem PDF eine feste Höhe von 60% des Bildschirms */
        flex-grow: 0;       /* Verhindert, dass dieser Bereich wächst */
        padding: 0.5rem;    /* Reduziert den Innenabstand für mehr Platz */
    }

    /* 3. Passt den Notiz-Bereich an, damit er unter dem PDF erscheint */
    .modal-notes-section {
        max-width: 100%;    /* Entfernt die feste Breitenbegrenzung */
        min-width: unset;   /* Setzt die Mindestbreite zurück */
        width: 100%;        /* Nimmt die volle Breite ein */
        padding-left: 0;    /* Entfernt den linken Abstand */
        margin-top: 1.5rem; /* Fügt einen Abstand nach oben hinzu */
        
        /* Ersetzt die seitliche Trennlinie durch eine obere */
        border-left: none;
        border-top: 2px solid #eee;
        padding-top: 1.5rem;
    }
}

/* ======================================== */
/* STIL FÜR DEN AKTIVEN ANTRAG IM VERLAUF   */
/* ======================================== */

#application-history-list li {
    position: relative; 
    list-style: none;
    padding: 0.8rem 1rem 0.8rem 1.75rem; 
    border-radius: 8px; 
    transition: all 0.25s ease-in-out; 
    cursor: pointer;
    margin-bottom: 0.5rem; 
    border: 1px solid transparent; 
}

#application-history-list li:hover {
    background-color: #f8f9fa; 
    transform: translateX(4px); 
}

#application-history-list li.active-application {
    background-color: #e7f1ff; 
    color: #004085; 
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15); 
    transform: translateX(4px);
}


#application-history-list li.active-application::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); 
    height: 60%; 
    width: 5px;
    background-color: #007bff;
    border-radius: 0 10px 10px 0; 
}

#pdf-page-wrapper {
    width: 100%;
    line-height: 0; /* Verhindert unerwünschte Abstände unter dem Canvas */
}

#pdf-page-wrapper canvas {
    max-width: 100%;
    height: auto;
    display: block; /* Verhindert ebenfalls Abstände */
}

#pdf-page-wrapper {
    position: relative;
    /* Ein Rand und Schatten heben den PDF-Bereich optisch hervor */
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    line-height: 0; /* Verhindert zusätzlichen Leerraum unter dem Canvas */
}

.btn-header {
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important; /* Sorgt für identische Höhe */
}


/* ======================================================= */
/* DESIGN FÜR DEN KI-NACHFRAGE-CHAT                        */
/* ======================================================= */

/* 1. Der Container für die Chat-Nachrichten */
#ai-helper-chat-container {
    background-color: #f8f9fa; /* Leichter Hintergrund für den Chat-Bereich */
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column; /* Stapelt Nachrichten untereinander */
    gap: 0.75rem; /* Abstand zwischen den Nachrichten */
    min-height: 150px;
    max-height: 40vh; /* Begrenzt die Höhe, damit er nicht zu groß wird */
    overflow-y: auto; /* Fügt eine Scrollbar hinzu, wenn nötig */
}

/* 2. Die Sprechblasen (Nachrichten) */
.chat-message {
    display: flex;
    width: 100%;
}

.chat-message p {
    display: inline-block;
    padding: 0.6rem 1rem;
    border-radius: 18px; /* Stärkere Abrundung für "Sprechblasen"-Optik */
    margin: 0;
    max-width: 90%;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Nachrichten vom Benutzer (rechtsbündig) */
.user-message {
    justify-content: flex-end;
}
.user-message p {
    background-color: #007bff;
    color: white;
    border-bottom-right-radius: 4px; /* Flacht eine Ecke ab */
}

/* Nachrichten von der KI (linksbündig) */
.ai-message {
    justify-content: flex-start;
}
.ai-message p {
    background-color: #e9ecef;
    color: #343a40;
    border-bottom-left-radius: 4px; /* Flacht eine Ecke ab */
}
.ai-message p.error {
    background-color: #f8d7da;
    color: #721c24;
}


/* 3. Die Eingabegruppe am Ende (Textfeld + Button) */
.chat-input-group {
    display: flex;
    gap: 0.5rem; /* Abstand zwischen Textfeld und Button */
    margin-top: 1rem;
}

#ai-helper-chat-input {
    flex-grow: 1; /* Nimmt allen verfügbaren Platz ein */
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ai-helper-chat-input:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#ai-helper-chat-send {
    flex-shrink: 0; /* Verhindert, dass der Button schrumpft */
}


.pdf-viewer-body {
            display: flex;
            flex-grow: 1; /* Nimmt den restlichen Platz im Modal ein */
            overflow: hidden; /* Verhindert doppelte Scrollbalken */
        }
        #pdf-viewer-render-area {
            flex-grow: 1;
            overflow: auto; /* WICHTIG: Fügt den Scrollbalken hinzu! */
            background-color: #f0f0f0;
            padding: 1rem;
            text-align: center;
        }
        #pdf-viewer-canvas {
            border: 1px solid #ccc;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .modal-notes-section {
            min-width: 280px;
            max-width: 280px;
            padding-left: 1rem;
            border-left: 1px solid #eee;
        }


        /* ======================================================= */
/* DESIGN FÜR DIE VORLAGEN-BIBLIOTHEK                      */
/* ======================================================= */

.template-category {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.category-header {
    background-color: #f8f9fa;
    padding: 1rem 1.5rem;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-header:hover {
    background-color: #e9ecef;
}

.category-header::after {
    content: '▼';
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.template-category.open .category-header::after {
    transform: rotate(180deg);
}

.form-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.template-category.open .form-list {
    max-height: 1000px; /* Ein hoher Wert, damit der Inhalt passt */
}

.form-item {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e9ecef;
}

.form-item-text p {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    color: #6c757d;
}

@media (max-width: 768px) {
    
    /* Die Button-Gruppe wird zu einem vertikalen Stapel */
    .button-group {
        display: flex;
        flex-direction: column;
        gap: 0.75rem; /* Abstand zwischen den gestapelten Buttons */
    }

    /* Jeder Button in der Gruppe nimmt die volle Breite ein */
    .button-group button,
    .button-group a {
        width: 100%;
    }
}

.pdf-navigation {
    display: flex;
    justify-content: space-between; /* Wichtig: Schiebt die äußeren Elemente an den Rand */
    align-items: center; /* Zentriert alles vertikal in der Zeile */
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
    flex-wrap: wrap; /* Erlaubt sauberen Umbruch, falls doch nötig */
}

.pdf-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap; /* Erlaubt Umbruch auf mittelgroßen Bildschirmen */
    gap: 1rem;
}

.pdf-editor-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}


/* Anpassung für mobile Geräte (Bildschirme schmaler als 768px) */
@media (max-width: 768px) {
    .pdf-editor-header {
        /* Stapelt Titel und Buttons untereinander */
        flex-direction: column;
        /* Richtet beides linksbündig aus */
        align-items: flex-start; 
    }
}


/* ======================================================= */
/* NEUES & VERBESSERTES DESIGN FÜR ANTRAGSHELFER-DEMO      */
/* ======================================================= */

/* --- Hauptfenster --- */
#antragshelfer-demo-section .antragshelfer-demo-window {
    display: flex;
    width: 100%;
    max-width: 900px;
    margin: 3rem auto;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(40, 40, 70, 0.1);
    overflow: hidden;
    border: 1px solid #e0e5eb;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Linke Spalte: Das "Dokument" (bleibt unverändert) --- */
#antragshelfer-demo-section .demo-pdf-column {
    flex: 3;
    background-color: #f8f9fa;
    padding: 2.5rem;
    border-right: 1px solid #e0e5eb;
}

#antragshelfer-demo-section .fake-pdf-header {
    background-color: #e9ecef;
    color: #495057;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-weight: 600; /* Etwas dicker */
    text-align: center;
    margin-bottom: 2rem;
}

#antragshelfer-demo-section .fake-pdf-content .pdf-line {
    height: 12px; /* Etwas höher */
    background-color: #dee2e6;
    border-radius: 3px;
    margin-bottom: 1.75rem;
}
#antragshelfer-demo-section .fake-pdf-content .long { width: 95%; }
#antragshelfer-demo-section .fake-pdf-content .short { width: 50%; }

#antragshelfer-demo-section .pdf-field-line {
    border: 2px solid transparent; /* Unsichtbarer Rahmen standardmäßig */
    border-radius: 6px;
    padding: 1rem;
    transition: all 0.3s ease-in-out;
}

#antragshelfer-demo-section .pdf-field-line .field-label {
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.5rem;
    color: #6c757d;
}

#antragshelfer-demo-section .pdf-field-line .field-box {
    background-color: #fff;
    height: 38px;
    border-radius: 4px;
    border: 1px solid #ced4da;
}

#antragshelfer-demo-section .pdf-field-line.clicked {
    border-color: #007bff; /* Ein klarer blauer Rahmen */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Ein weicher, statischer Schein nach innen */
}

/* --- Rechte Spalte: Der KI Co-Pilot --- */
#antragshelfer-demo-section .demo-ai-column {
    flex: 2;
    background-color: #ffffff;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

#antragshelfer-demo-section .demo-ai-column h4 {
    margin: 0 0 1.5rem 0;
    text-align: left;
    font-size: 1.25rem;
    color: #212529;
}

/* Titel für die Erklärungsbox */
#antragshelfer-demo-section #demo-ai-explanation .ai-explanation-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: #495057;
    margin-bottom: 0.75rem;
}

#antragshelfer-demo-section #demo-ai-explanation .ai-explanation-title::before {
    content: '💡';
    font-size: 1.2rem;
}

/* KI-Erklärungsbox */
#antragshelfer-demo-section .ai-explanation-box {
    background-color: #f1f3f5;
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.6;
}
#antragshelfer-demo-section .ai-explanation-box p { margin: 0; }

/* KORRIGIERT: Trennlinie und Titel für den Chat-Bereich */
#antragshelfer-demo-section #demo-ai-chat {
    margin-top: auto; /* Schiebt diesen Block nach unten */
    padding-top: 2.25rem; /* Etwas mehr Platz für den Titel darunter */
    border-top: 1px solid #e9ecef;
    position: relative;
    margin-top: 1.5rem; /* Abstand zur oberen Box */
}

#antragshelfer-demo-section #demo-ai-chat::before {
    content: '💬 Haben Sie eine Nachfrage?';
    position: absolute;
    top: 0; /* Positioniert den Text direkt UNTER der Linie */
    left: 0; /* Beginnt am linken Rand */
    padding-top: 0.5rem; /* Abstand zur Linie */
    font-size: 0.9rem;
    font-weight: 600;
    color: #6c757d;
}

/* --- Der Chat-Bereich --- */
#antragshelfer-demo-section .demo-step {
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

#antragshelfer-demo-section .demo-step.hidden,
#antragshelfer-demo-section .chat-message.hidden {
    opacity: 0;
    transform: translateY(15px);
}

/* --- Die Sprechblasen --- */
#antragshelfer-demo-section .chat-message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem; /* Abstand zwischen Avatar und Blase */
    margin-bottom: 1.25rem;
    max-width: 95%;
}

#antragshelfer-demo-section .chat-message p {
    padding: 0.8rem 1.2rem;
    border-radius: 18px;
    margin: 0;
    line-height: 1.5;
    font-size: 0.95rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Benutzer-Nachricht (rechts) */
#antragshelfer-demo-section .user-message {
    justify-content: flex-end;
    margin-left: auto;
    flex-direction: row-reverse; /* Dreht die Reihenfolge: erst Blase, dann Avatar */
}

#antragshelfer-demo-section .user-message p {
    background: linear-gradient(135deg, #007bff, #0056b3); /* Farbverlauf */
    color: white;
    border-bottom-right-radius: 5px; /* Typische "Schwanz"-Form */
}

/* KI-Nachricht (links) */
#antragshelfer-demo-section .ai-message {
    justify-content: flex-start;
}

#antragshelfer-demo-section .ai-message p {
    background-color: #e9ecef;
    color: #212529;
    border-bottom-left-radius: 5px; /* Typische "Schwanz"-Form */
}
/* ======================================================= */
/* ANPASSUNGEN FÜR MOBILGERÄTE                             */
/* ======================================================= */

@media (max-width: 768px) {

    /* Passt das Layout der Antragshelfer-Demo an */
    #antragshelfer-demo-section .antragshelfer-demo-window {
        flex-direction: column; /* Stellt die Spalten untereinander dar */
    }

    #antragshelfer-demo-section .demo-pdf-column {
        border-right: none; /* Entfernt die seitliche Trennlinie */
        border-bottom: 1px solid #e0e5eb; /* Fügt eine Trennlinie unten hinzu */
    }
    
    /* Sorgt für etwas mehr Abstand auf kleinen Bildschirmen */
    #antragshelfer-demo-section {
        padding: var(--space-xl) var(--space-md);
    }
}


/* ============================================= */
/* Modernes Shepherd.js Theme – Antragshelfer UI */
/* ============================================= */

.shepherd-element {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  max-width: 420px;
  overflow: hidden;
  animation: fadeInUp 0.25s ease-out;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shepherd-element:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}

/* Header */
.shepherd-header {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
  color: #fff;
  padding: 1rem 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Titel */
.shepherd-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Schließen-Icon */
.shepherd-cancel-icon {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  transition: color 0.2s ease;
}
.shepherd-cancel-icon:hover {
  color: #fff;
}

/* Textbereich */
.shepherd-text {
  padding: 1.2rem 1.5rem;
  color: #333;
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Footer */
.shepherd-footer {
  padding: 0.9rem 1.5rem 1.2rem 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  background: #f9fafc;
}

/* Buttons */
.shepherd-button {
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.4rem;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.shepherd-button-secondary {
  background-color: #f0f1f3;
  color: #444;
}
.shepherd-button-secondary:hover {
  background-color: #e4e5e8;
}

.shepherd-button:not(.shepherd-button-secondary) {
  background-color: var(--primary-color);
  color: #fff;
}
.shepherd-button:not(.shepherd-button-secondary):hover {
  background-color: var(--primary-color-dark);
}

/* Pfeil */
.shepherd-arrow::before {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Fade-in Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================= */
/* RESPONSIVE FIX & DESIGN FÜR KONTO-EINSTELLUNGEN */
/* ============================================= */

/* 1. Laptop-Fix: Zentriert den Hauptinhalt korrekt */
/* Wir überschreiben das Grid-Layout der App und nutzen
   Flexbox, um den einzelnen Inhaltsblock zu zentrieren. */
.page-konto .app-layout {
    display: flex; /* Statt 'grid' */
    justify-content: center; /* Zentriert den Inhaltsblock horizontal */
    padding: var(--space-xl) var(--space-md); /* Fügt etwas Luft hinzu */
}

/* Wir stellen sicher, dass der Wrapper die volle Breite hat. */
.page-konto .app-main-content {
    width: 100%;
    /* Die inline-styles 'max-width' und 'margin' aus der HTML funktionieren jetzt wie erwartet. */
}

/* 2. Smartphone-Fix: Stapelt Formular-Elemente untereinander */
/* Wir zwingen alle Formulare in den Karten, ihre Elemente
   vertikal anzuordnen. Das ist ideal für mobile Ansichten. */
.page-konto .card form {
    display: flex;
    flex-direction: column; /* Der Schlüssel-Fix: Stapelt die Elemente */
    gap: var(--space-md); /* Einheitlicher Abstand zwischen den Feldern */
}

/* 3. Allgemeines Design-Polish für ein sauberes, einheitliches Aussehen */
/* Sorgt dafür, dass alle Formular-Elemente die volle Breite nutzen */
.page-konto .card .form-input,
.page-konto .card button {
    width: 100%;
    box-sizing: border-box; /* Verhindert, dass Padding die Breite sprengt */
}

/* Spezifisches Button-Styling, das Ihr Design-System nutzt */
.page-konto .card form button {
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.page-konto .card form button:hover {
    background: var(--primary-hover);
}

/* Spezieller Stil für den roten "Konto löschen"-Card-Rahmen (basierend auf Ihrem HTML) */
.page-konto .card[style*="--error-color"] {
    border-color: var(--danger-color) !important;
}

.page-konto .card[style*="--error-color"] h3 {
    color: var(--danger-color);
}

/* Spezieller Stil für den "Konto löschen"-Trigger-Button */
.page-konto .button-delete-trigger {
    background: transparent;
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
    transition: all var(--transition-base);
}

.page-konto .button-delete-trigger:hover {
    background: var(--danger-color);
    color: white;
}

/* ============================================= */
/* STYLING FÜR PASSWORT-SICHTBARKEITS-TOGGLE      */
/* ============================================= */

/* 1. Der Container für Input-Feld und Icon */
.password-wrapper {
    position: relative; /* Wichtig, damit das Icon absolut positioniert werden kann */
    width: 100%;
}

/* 2. Das Icon selbst */
.password-toggle {
    position: absolute;
    top: 50%;
    right: 15px; /* Abstand vom rechten Rand */
    transform: translateY(-50%); /* Zentriert das Icon perfekt vertikal */
    cursor: pointer;
    user-select: none; /* Verhindert, dass das Icon beim Klicken markiert wird */
    font-size: 1.2rem;
    color: var(--gray-400); /* Nutzt eine Farbe aus Ihrem Design-System */
    transition: color var(--transition-fast);
}

.password-toggle:hover {
    color: var(--primary-color);
}

/* ============================================= */
/* Kleinkram      */
/* ============================================= */

/* Stellt sicher, dass die Listenelemente flexibel sind */
#member-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Dies ist die entscheidende Regel: */
/* Sie zielt auf den Span-Tag, der die E-Mail enthält. */
#member-list li span {
    word-break: break-all;
}

#main-view .pdf-navigation #pdf-page-selector {
    position: relative; /* Erlaubt das Verschieben des Elements */
    top: 6px;           /* Schiebt es 3 Pixel von oben weg. Du kannst diesen Wert anpassen (z.B. 2px oder 4px), bis es perfekt sitzt. */
}

/* --- Stil für den interaktiven Demo-Hinweis --- */
.click-hint {
    background-color: #eef2f9;
    color: #4a5568;
    padding: 3px 10px;           
    border-radius: 12px;
    font-size: 0.75rem;          
    font-weight: 500;
    margin-bottom: 0.7rem;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
    border: 1px solid #dbe1e9;
}



/* Stellt sicher, dass der Container den Hinweis zentriert (bleibt gleich) */
.demo-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-spinner, .chat-message.loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
}

.loading-spinner.small {
  font-size: 0.85rem;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

#text-selection-hint {
  font-size: 0.8rem;
  color: #888;
  margin: 4px 0 0 0;
  padding: 0;
  text-align: left;
}

.document-upload-controls {
  display: flex;
  flex-wrap: wrap;        /* bricht auf nächste Zeile um, wenn es eng wird */
  align-items: center;
  gap: 0.5rem;            /* etwas Abstand zwischen Label, Text und Button */
}

#document-file-name {
  display: inline-block;
  max-width: 250px;       /* je nach Layout, kannst du 200–300px nehmen */
  overflow: hidden;
  text-overflow: ellipsis; /* zeigt ... bei langen Namen */
  white-space: nowrap;    /* alles in einer Zeile */
  vertical-align: middle;
  color: var(--text-secondary);
}

/* Auf Mobilgeräten besser umbrechen statt abschneiden */
@media (max-width: 768px) {
  #document-file-name {
    max-width: 100%;
    white-space: normal;  /* darf umbrechen */
    word-break: break-word;
  }
}

.pricing-summary {
  text-align: center;        /* zentriert Inhalt horizontal */
  display: flex;
  flex-direction: column;
  align-items: center;       /* sorgt auch bei flex für Zentrierung */
  gap: 0.5rem;               /* etwas Abstand zwischen Elementen */
  padding: 1rem;
}

/* Kleinere Aktionsbuttons */
#submitted-list button {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  border-radius: 6px;
}


#public-templates-list {
  max-width: 800px;
}
.template-card {
  transition: 0.2s ease;
}
.template-card:hover {
  background: #f9f9f9;
}
.btn-danger {
  background: #e74c3c;
  border: none;
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
}




/* ============================================= */
/* STYLING FÜR LÖSCHEN-MODAL                     */
/* ============================================= */

/* 1. Der Button, der das Modal öffnet */
.button-delete-trigger {
  background: none;
  border: none;
  color: var(--error-color, #a94442); /* Nutzt Ihre Fehler-Farbe oder ein Standard-Rot */
  text-decoration: underline;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.button-delete-trigger:hover {
  color: #000;
}

/* 2. Das Modal-Fenster selbst */
#delete-modal-content {
  text-align: center; /* Zentriert den Inhalt */
  padding: 2rem;
}

#delete-modal-title {
  margin-top: 0;
  font-size: 1.5rem;
}

#delete-modal-text {
  color: var(--text-secondary, #555);
  line-height: 1.6;
}

/* 3. Der wichtige Warnhinweis */
#delete-modal-warning {
  background-color: #f8d7da; /* Helles Rot */
  color: #721c24; /* Dunkles Rot */
  padding: 1rem;
  border-radius: var(--radius-md, 8px);
  margin-top: 1.5rem;
  font-weight: 500;
  border: 1px solid #f5c6cb;
}

/* 4. Der finale "Endgültig löschen"-Button */
.button-danger {
  background-color: var(--error-color, #dc3545);
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  margin-top: 1.5rem;
  transition: background-color 0.2s ease;
  width: 100%; /* Nimmt die volle Breite des Modals ein */
}

.button-danger:hover {
  background-color: #c82333; /* Ein dunkleres Rot beim Hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.nav-logo {
  display: inline-block; /* Wichtig für die korrekte Darstellung */
  padding: 0; /* Entfernt eventuellen Innenabstand */
}

/* Das Logo-Bild selbst - HIER wird die Größe gesteuert */
.nav-logo img {
  height: 50px;  /* Passen Sie diesen Wert an, bis die Größe stimmt */
  width: auto;   /* Die Breite passt sich automatisch an */
  display: block;/* Verhindert unerwünschte Leerräume unter dem Bild */
}


/* Container für die Buttons im Upload-Abschnitt */
#upload-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* etwas Abstand zwischen den Buttons */
}

/* Buttons passen sich der Breite an */
#upload-section .btn {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

/* Mobile Optimierung */
@media (max-width: 600px) {
    #upload-section {
        padding: 1rem;
    }

    #upload-section .btn {
        font-size: 1rem;
        padding: 0.75rem;
    }
}


/* ============================================= */
/* STYLING DEMO SEKTION FORMLOSER ANTRAG                     */
/* ============================================= */

.formlos-antrag-showcase {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.prompt-side, .letter-side {
  flex: 1;
  min-width: 320px;
}

/* Eingabebox */
.prompt-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 1.5rem 1.75rem;
  min-height: 140px;
  display: flex;
  align-items: center;
}

/* Typing Effekt */
.typed-text {
  font-family: 'Roboto Mono', monospace;
  white-space: pre-wrap;
  overflow: hidden;
  border-right: 2px solid #666;
  animation: caret 0.75s steps(1) infinite;
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}

/* ---- A4-Dokument-Stil ---- */
.letter-card {
  perspective: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.paper {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  padding: 2rem 2.25rem;
  line-height: 1.6;
  transform: rotateY(35deg) translateX(60px) scale(0.9);
  transform-origin: left center;
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s ease;
  overflow: hidden; /* verhindert Überlauf-Effekte */
}

/* mobile Optimierung */
@media (max-width: 768px) {
  .paper {
    transform: none;
    padding: 1.5rem;
    max-width: 100%;
    aspect-ratio: auto; /* entfernt die starre A4-Höhe */
  }

  .letter-side {
    top: 0;
  }
}

/* Animation sichtbar machen */
.paper.show {
  opacity: 1;
  transform: rotateY(0deg) translateX(0) scale(1);
}

/* Inhalt */
.letter-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.logo-placeholder {
  font-size: 2rem;
  background: #edf2f7;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
}

.letter-meta p {
  margin: 0;
  line-height: 1.2;
}

.letter-org {
  font-weight: 600;
  color: #2d3748;
}

.letter-date {
  font-size: 0.9rem;
  color: #555;
}

.letter-body h4 {
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #1a202c;
  font-size: 1.05rem;
}

/* Papier-Look */
.paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 240, 240, 0.9));
  border-radius: 8px;
  z-index: -1;
}

.formlos-antrag-showcase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.prompt-box {
  height: 260px;           /* optisch angeglichen */
  display: flex;
  align-items: center;
  justify-content: center;
}

.letter-side {
  position: relative;
  top: -30px;              /* hebt das Dokument leicht an */
}

/* Stile für den neuen Briefkopf (Absender) */
.letter-sender-block {
  font-size: 0.8rem;
  color: #777;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #0056b3; /* Beispiel für Branding-Farbe */
  margin-bottom: 1.5rem;
}
.letter-sender-block p {
  margin: 2px 0;
}
.letter-sender-block strong {
  font-size: 0.9rem;
  color: #333;
}


/* Anpassung der rechten Spalte für den Titel */
.letter-side h4 {
  /* Sorgt für Konsistenz mit der linken Seite */
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 1rem;
}

/* Sorgt dafür, dass der Empfänger im Briefkopf (AOK) nicht mehr ganz oben klebt */
.letter-head .logo-placeholder {
  /* Eventuell anpassen, falls es jetzt zu weit unten ist */
  align-self: flex-start; 
}


@media (max-width: 768px) {
  .formlos-antrag-showcase {
    flex-direction: column;
  }

  .paper {
    transform: none;
  }
}

/* ============================================= */
/* ANTRAGSVERLAUF SCROLLBAR                    */
/* ============================================= */

#application-history-container {
    display: flex;
    flex-direction: column;
    max-height: 800px; /* vorher evtl. 300px – jetzt mehr Platz */
}

#application-history-list {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 6px;
    margin-top: 0.5rem;
    scrollbar-width: thin;
}

#application-history-list::-webkit-scrollbar {
    width: 6px;
}

#application-history-list::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

#application-history-list::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}


/* ============================================= */
/* ANTRAGSGENERATOR DESIGN                    */
/* ============================================= */

/* Gesamter Kartenbereich */
#generator-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 2rem;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
  position: relative;
}

/* Dekorative feine Linie oben */
#generator-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

/* Überschriften */
#generator-card h2 {
  font-size: 1.7rem;
  font-weight: 700;
  color: #1f2937;
  text-align: center;
  margin-top: 1rem;
}

#generator-card h4 {
  font-size: 1.1rem;
  color: #374151;
  font-weight: 600;
  margin-top: 2rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.3rem;
}

/* Beschreibung / Hinweisbox */
#generator-card .hint-text {
  border-left: 4px solid #2563eb;
  background: #f3f6fb;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.2rem;
  color: #444;
}

/* Eingabefelder */
#generator-card .form-input {
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: all 0.2s ease;
  background: #fff;
}

#generator-card .form-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
}

/* Layout: Absender & Empfänger nebeneinander */
.address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

/* Kleinere Geräte: untereinander */
@media (max-width: 720px) {
  .address-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Buttons */
#generator-card .btn {
  font-size: 1.05rem;
  padding: 0.9rem 1.2rem;
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

#generator-card .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

/* Kleine optische Linie vor "Antragsinhalt" */
#generator-card h4:nth-of-type(3)::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563eb;
  margin-right: 8px;
  vertical-align: middle;
}

/* Feiner Schatten unter Textareas */
#generator-card textarea {
  resize: vertical;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* === Footer-Disclaimer – elegante Minimal-Version === */
.footer-disclaimer {
  max-width: 550px;              /* noch schmaler */
  margin: 0.75rem auto 0.5rem;   /* zentriert, etwas Luft oben & unten */
  font-size: 0.82rem;
  color: #6b7280;
  line-height: 1.4;
  text-align: center;
  font-style: italic;            /* leicht edel wirkend */
  opacity: 0.85;                 /* dezenter Look */
}

/* kleines Symbol davor, aber sanft getönt */
.footer-disclaimer::before {
  opacity: 0.6;
  margin-right: 4px;
  font-size: 0.85rem;
}

/* Footer etwas kompakter halten */
.main-footer {
  padding-bottom: 0.5rem;
}