/* ============================================
   Dining Data Landing Page Styles
   Color Scheme from Logo:
   - Primary Teal: #2d7a7a
   - Secondary Brown: #8b6f47
   - Beige Background: #f5efe6
   ============================================ */

/* ============================================
   CSS Variables & Base Styles
   ============================================ */
:root {
    /* Colors from Logo - Exact Values */
    --dd-teal: #367778;
    --dd-teal-dark: #2a5c5d;
    --dd-teal-light: #4a9394;
    --dd-brown: #835d48;
    --dd-brown-dark: #6a4a39;
    --dd-brown-light: #9d7158;
    --dd-beige: #fbf0e4;
    --dd-beige-dark: #f0ddc8;
    
    /* Neutrals */
    --dd-white: #ffffff;
    --dd-gray-50: #f9fafb;
    --dd-gray-100: #f3f4f6;
    --dd-gray-200: #e5e7eb;
    --dd-gray-300: #d1d5db;
    --dd-gray-400: #9ca3af;
    --dd-gray-500: #6b7280;
    --dd-gray-600: #4b5563;
    --dd-gray-700: #374151;
    --dd-gray-800: #1f2937;
    --dd-gray-900: #111827;
    
    /* Semantic Colors */
    --dd-success: #10b981;
    --dd-warning: #f59e0b;
    --dd-error: #ef4444;
    
    /* Spacing */
    --dd-spacing-xs: 0.5rem;
    --dd-spacing-sm: 1rem;
    --dd-spacing-md: 1.5rem;
    --dd-spacing-lg: 2rem;
    --dd-spacing-xl: 3rem;
    --dd-spacing-2xl: 4rem;
    --dd-spacing-3xl: 6rem;
    
    /* Typography */
    --dd-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --dd-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* Border Radius */
    --dd-radius-sm: 0.375rem;
    --dd-radius-md: 0.5rem;
    --dd-radius-lg: 0.75rem;
    --dd-radius-xl: 1rem;
    --dd-radius-2xl: 1.5rem;
    --dd-radius-full: 9999px;
    
    /* Shadows */
    --dd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --dd-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --dd-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --dd-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --dd-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --dd-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --dd-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--dd-font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--dd-gray-800);
    background: var(--dd-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--dd-spacing-md);
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--dd-gray-900);
    margin-bottom: var(--dd-spacing-md);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); }

p {
    margin-bottom: var(--dd-spacing-md);
}

/* ============================================
   Buttons
   ============================================ */
.dd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dd-spacing-xs);
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--dd-radius-lg);
    cursor: pointer;
    transition: all var(--dd-transition-base);
    white-space: nowrap;
}

.dd-btn-primary {
    background: var(--dd-teal);
    color: var(--dd-white);
    box-shadow: var(--dd-shadow-md);
}

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

.dd-btn-secondary {
    background: var(--dd-white);
    color: var(--dd-teal);
    border-color: var(--dd-gray-200);
}

.dd-btn-secondary:hover {
    background: var(--dd-gray-50);
    border-color: var(--dd-teal);
}

.dd-btn-outline {
    background: transparent;
    color: var(--dd-teal);
    border-color: var(--dd-teal);
}

.dd-btn-outline:hover {
    background: var(--dd-teal);
    color: var(--dd-white);
}

/* Brown button variant */
.dd-btn-brown {
    background: var(--dd-brown);
    color: var(--dd-white);
    box-shadow: var(--dd-shadow-md);
}

.dd-btn-brown:hover {
    background: var(--dd-brown-dark);
    transform: translateY(-2px);
    box-shadow: var(--dd-shadow-lg);
}

.dd-btn-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

.dd-btn svg {
    transition: transform var(--dd-transition-base);
}

.dd-btn:hover svg {
    transform: translateX(4px);
}

/* ============================================
   Hero Section
   ============================================ */
.dd-hero {
    position: relative;
    padding: var(--dd-spacing-3xl) 0 var(--dd-spacing-2xl);
    background: linear-gradient(135deg, var(--dd-beige) 0%, var(--dd-beige-dark) 100%);
    overflow: hidden;
}

.dd-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(54, 119, 120, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(131, 93, 72, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.dd-hero .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dd-spacing-2xl);
    align-items: center;
}

.dd-hero-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--dd-white);
    border-radius: var(--dd-radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dd-teal);
    box-shadow: var(--dd-shadow-sm);
    margin-bottom: var(--dd-spacing-md);
    animation: slideDown 0.6s ease-out;
}

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

.dd-hero-title {
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    line-height: 1.1;
    margin-bottom: var(--dd-spacing-md);
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.dd-highlight {
    position: relative;
    color: var(--dd-teal);
	white-space: nowrap; 
}

.dd-highlight::after {
    content: '';
    position: absolute;
    bottom: 0.1em;
    left: 0;
    right: 0;
    height: 0.3em;
    background: var(--dd-teal);
    opacity: 0.2;
    z-index: -1;
}

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

.dd-hero-subtitle {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    color: var(--dd-gray-600);
    max-width: 700px;
    margin-bottom: var(--dd-spacing-xl);
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.dd-hero-cta {
    display: flex;
    gap: var(--dd-spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--dd-spacing-xl);
    animation: fadeInUp 0.8s ease-out 0.6s both;
}

.dd-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--dd-spacing-lg);
    max-width: 600px;
    animation: fadeInUp 0.8s ease-out 0.8s both;
}

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

.dd-stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dd-teal);
    line-height: 1;
}

.dd-stat-label {
    font-size: 0.875rem;
    color: var(--dd-gray-600);
    margin-top: 0.25rem;
}

/* Dashboard Preview */
.dd-hero-visual {
    animation: fadeInUp 0.8s ease-out 1s both;
}

.dd-dashboard-preview {
    background: var(--dd-white);
    border-radius: var(--dd-radius-2xl);
    box-shadow: var(--dd-shadow-xl);
    overflow: hidden;
    border: 1px solid var(--dd-gray-200);
}

.dd-dashboard-header {
    display: flex;
    align-items: center;
    gap: var(--dd-spacing-sm);
    padding: 1rem;
    background: var(--dd-gray-100);
    border-bottom: 1px solid var(--dd-gray-200);
}

.dd-window-controls {
    display: flex;
    gap: 0.5rem;
}

.dd-window-controls span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--dd-gray-300);
}

.dd-window-controls span:nth-child(1) { background: #ff5f57; }
.dd-window-controls span:nth-child(2) { background: #ffbd2e; }
.dd-window-controls span:nth-child(3) { background: #28c840; }

.dd-dashboard-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dd-gray-600);
}

.dd-dashboard-content {
    display: flex;
    min-height: 400px;
    background: var(--dd-gray-50);
}

.dd-dashboard-sidebar {
    width: 200px;
    padding: var(--dd-spacing-md);
    background: var(--dd-white);
    border-right: 1px solid var(--dd-gray-200);
    display: flex;
    flex-direction: column;
    gap: var(--dd-spacing-xs);
}

.dd-sidebar-item {
    height: 40px;
    background: var(--dd-gray-100);
    border-radius: var(--dd-radius-md);
    animation: pulse 2s ease-in-out infinite;
}

.dd-sidebar-item.active {
    background: var(--dd-teal);
    opacity: 0.2;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.dd-dashboard-main {
    flex: 1;
    padding: var(--dd-spacing-lg);
}

.dd-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dd-spacing-md);
    margin-bottom: var(--dd-spacing-lg);
}

.dd-mini-card {
    height: 100px;
    background: var(--dd-white);
    border-radius: var(--dd-radius-lg);
    border: 1px solid var(--dd-gray-200);
    animation: pulse 2s ease-in-out infinite;
}

.dd-chart-area {
    height: 250px;
    background: var(--dd-white);
    border-radius: var(--dd-radius-lg);
    border: 1px solid var(--dd-gray-200);
    position: relative;
    overflow: hidden;
}

.dd-chart-area::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 60%;
    background: linear-gradient(to top, var(--dd-teal), transparent);
    opacity: 0.1;
    clip-path: polygon(
        0% 100%, 
        10% 80%, 
        20% 85%, 
        30% 70%, 
        40% 75%, 
        50% 60%, 
        60% 65%, 
        70% 50%, 
        80% 55%, 
        90% 40%, 
        100% 45%, 
        100% 100%
    );
}

/* ============================================
   Payment Methods Section
   ============================================ */
.dd-payment-methods {
    padding: var(--dd-spacing-xl) 0;
    background: var(--dd-white);
    border-bottom: 1px solid var(--dd-gray-200);
}

.dd-payment-label {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dd-gray-500);
    margin-bottom: var(--dd-spacing-md);
}

.dd-payment-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--dd-spacing-lg);
    flex-wrap: wrap;
}

.dd-payment-logo {
    opacity: 0.8;
    transition: opacity var(--dd-transition-base);
}

.dd-payment-logo:hover {
    opacity: 1;
}

.dd-payment-logo svg {
    height: 40px;
    width: auto;
}

/* ============================================
   Section Headers
   ============================================ */
.dd-section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--dd-spacing-2xl);
}

.dd-section-label {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--dd-teal);
    color: var(--dd-white);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--dd-radius-full);
    margin-bottom: var(--dd-spacing-md);
}

/* Alternate section label colors */
.dd-how-it-works .dd-section-label,
.dd-benefits .dd-section-label {
    background: var(--dd-brown);
}

.dd-industries .dd-section-label,
.dd-pricing .dd-section-label {
    background: linear-gradient(135deg, var(--dd-teal) 0%, var(--dd-brown) 100%);
}

.dd-section-header h2 {
    margin-bottom: var(--dd-spacing-md);
}

.dd-section-header p {
    font-size: 1.125rem;
    color: var(--dd-gray-600);
    margin-bottom: 0;
}

/* ============================================
   Features Section
   ============================================ */
.dd-features {
    padding: var(--dd-spacing-3xl) 0;
    background: var(--dd-white);
}

.dd-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--dd-spacing-lg);
}

.dd-feature-card {
    padding: var(--dd-spacing-xl);
    background: var(--dd-white);
    border: 2px solid var(--dd-gray-200);
    border-radius: var(--dd-radius-xl);
    transition: all var(--dd-transition-base);
}

.dd-feature-card:hover {
    border-color: var(--dd-teal);
    box-shadow: var(--dd-shadow-lg);
    transform: translateY(-4px);
}

.dd-feature-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dd-teal) 0%, var(--dd-teal-light) 100%);
    color: var(--dd-white);
    border-radius: var(--dd-radius-lg);
    margin-bottom: var(--dd-spacing-md);
    box-shadow: var(--dd-shadow-md);
}

/* Alternate feature icon colors */
.dd-feature-card:nth-child(2n) .dd-feature-icon {
    background: linear-gradient(135deg, var(--dd-brown) 0%, var(--dd-brown-light) 100%);
}

.dd-feature-card:nth-child(3n) .dd-feature-icon {
    background: linear-gradient(135deg, var(--dd-teal) 0%, var(--dd-brown) 100%);
}

.dd-feature-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 2;
}

.dd-feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: var(--dd-spacing-sm);
}

.dd-feature-card p {
    color: var(--dd-gray-600);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: var(--dd-spacing-sm);
}

.dd-feature-card p:last-child {
    margin-bottom: 0;
}

.dd-feature-card p strong {
    color: var(--dd-teal);
    font-weight: 600;
}

/* ============================================
   How It Works Section
   ============================================ */
.dd-how-it-works {
    padding: var(--dd-spacing-3xl) 0;
    background: var(--dd-gray-50);
}

.dd-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--dd-spacing-lg);
    align-items: center;
}

.dd-process-step {
    text-align: center;
    padding: var(--dd-spacing-lg);
}

.dd-process-number {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dd-teal);
    color: var(--dd-white);
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 50%;
    margin: 0 auto var(--dd-spacing-md);
    box-shadow: var(--dd-shadow-lg);
}

/* Alternate colors for process steps */
.dd-process-step:nth-child(odd) .dd-process-number {
    background: var(--dd-teal);
}

.dd-process-step:nth-child(even) .dd-process-number {
    background: var(--dd-brown);
}

.dd-process-step:nth-child(4n) .dd-process-number {
    background: linear-gradient(135deg, var(--dd-teal) 0%, var(--dd-brown) 100%);
}

.dd-process-step h4 {
    font-size: 1.125rem;
    margin-bottom: var(--dd-spacing-sm);
}

.dd-process-step p {
    color: var(--dd-gray-600);
    font-size: 0.9375rem;
    margin-bottom: 0;
}

.dd-process-arrow {
    text-align: center;
    color: var(--dd-teal);
    font-size: 2rem;
    font-weight: 700;
}

/* ============================================
   Industries Section
   ============================================ */
.dd-industries {
    padding: var(--dd-spacing-3xl) 0;
    background: var(--dd-white);
}

.dd-industries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--dd-spacing-lg);
}

.dd-industry-card {
    padding: var(--dd-spacing-xl);
    background: var(--dd-beige);
    border-radius: var(--dd-radius-xl);
    transition: all var(--dd-transition-base);
    border: 2px solid transparent;
}

.dd-industry-card:hover {
    background: var(--dd-white);
    border-color: var(--dd-brown);
    box-shadow: var(--dd-shadow-lg);
    transform: translateY(-4px);
}

.dd-industry-icon {
    font-size: 3rem;
    margin-bottom: var(--dd-spacing-md);
    filter: drop-shadow(0 2px 4px rgba(131, 93, 72, 0.2));
}

.dd-industry-card h4 {
    font-size: 1.25rem;
    color: var(--dd-brown);
    margin-bottom: var(--dd-spacing-sm);
}

/* Alternate card styles */
.dd-industry-card:nth-child(even) {
    background: linear-gradient(135deg, var(--dd-beige) 0%, rgba(131, 93, 72, 0.05) 100%);
}

.dd-industry-card:nth-child(even):hover {
    border-color: var(--dd-teal);
}

.dd-industry-card p {
    color: var(--dd-gray-600);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ============================================
   Benefits Section
   ============================================ */
.dd-benefits {
    padding: var(--dd-spacing-3xl) 0;
    background: var(--dd-gray-50);
}

.dd-benefits-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dd-spacing-2xl);
    align-items: center;
}

.dd-benefit-list {
    display: flex;
    flex-direction: column;
    gap: var(--dd-spacing-lg);
}

.dd-benefit-item {
    display: flex;
    gap: var(--dd-spacing-md);
    align-items: flex-start;
}

.dd-benefit-check {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dd-teal);
    color: var(--dd-white);
    border-radius: 50%;
}

.dd-benefit-check svg {
    width: 18px;
    height: 18px;
}

.dd-benefit-item h4 {
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}

.dd-benefit-item p {
    color: var(--dd-gray-600);
    font-size: 0.9375rem;
    margin-bottom: 0;
}

.dd-stats-card {
    padding: var(--dd-spacing-xl);
    background: var(--dd-white);
    border-radius: var(--dd-radius-2xl);
    box-shadow: var(--dd-shadow-xl);
    display: grid;
    gap: var(--dd-spacing-lg);
    border: 1px solid var(--dd-beige-dark);
}

.dd-stats-item {
    text-align: center;
    padding: var(--dd-spacing-lg);
    background: var(--dd-beige);
    border-radius: var(--dd-radius-lg);
}

/* Alternate colors for stats */
.dd-stats-item:nth-child(1) {
    background: linear-gradient(135deg, var(--dd-beige) 0%, rgba(54, 119, 120, 0.1) 100%);
}

.dd-stats-item:nth-child(2) {
    background: linear-gradient(135deg, var(--dd-beige) 0%, rgba(131, 93, 72, 0.1) 100%);
}

.dd-stats-item:nth-child(3) {
    background: linear-gradient(135deg, rgba(54, 119, 120, 0.1) 0%, rgba(131, 93, 72, 0.1) 100%);
}

.dd-stats-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dd-teal);
    line-height: 1;
}

.dd-stats-item:nth-child(2) .dd-stats-value {
    color: var(--dd-brown);
}

.dd-stats-label {
    font-size: 0.9375rem;
    color: var(--dd-gray-600);
    margin-top: 0.5rem;
}

/* ============================================
   Pricing Cards (für Preise-Seite)
   ============================================ */
.dd-pricing {
    padding: var(--dd-spacing-3xl) 0;
    background: var(--dd-white);
}

.dd-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--dd-spacing-lg);
    margin-bottom: var(--dd-spacing-2xl);
}

.dd-pricing-card {
    position: relative;
    padding: var(--dd-spacing-xl);
    background: var(--dd-white);
    border: 2px solid var(--dd-gray-200);
    border-radius: var(--dd-radius-xl);
    transition: all var(--dd-transition-base);
    display: flex;
    flex-direction: column;
}

.dd-pricing-card:hover {
    border-color: var(--dd-teal);
    box-shadow: var(--dd-shadow-xl);
    transform: translateY(-8px);
}

.dd-pricing-card.featured {
    border-color: var(--dd-teal);
    background: linear-gradient(135deg, var(--dd-white) 0%, var(--dd-beige) 100%);
    box-shadow: var(--dd-shadow-lg);
}

.dd-pricing-badge {
    position: absolute;
    top: -12px;
    right: var(--dd-spacing-md);
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--dd-teal) 0%, var(--dd-teal-dark) 100%);
    color: var(--dd-white);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--dd-radius-full);
    box-shadow: var(--dd-shadow-md);
}

.dd-pricing-header {
    text-align: center;
    margin-bottom: var(--dd-spacing-lg);
    padding-bottom: var(--dd-spacing-lg);
    border-bottom: 2px solid var(--dd-gray-200);
}

.dd-pricing-card.featured .dd-pricing-header {
    border-bottom-color: var(--dd-teal);
}

.dd-pricing-header h3 {
    font-size: 1.75rem;
    color: var(--dd-teal);
    margin-bottom: var(--dd-spacing-sm);
}

.dd-pricing-header p {
    color: var(--dd-gray-600);
    font-size: 0.9375rem;
    margin-bottom: 0;
}

.dd-pricing-features {
    flex: 1;
    margin-bottom: var(--dd-spacing-lg);
}

.dd-pricing-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--dd-spacing-sm);
    padding: var(--dd-spacing-sm) 0;
}

.dd-pricing-feature svg {
    width: 20px;
    height: 20px;
    color: var(--dd-teal);
    flex-shrink: 0;
    margin-top: 2px;
}

.dd-pricing-card.featured .dd-pricing-feature svg {
    color: var(--dd-brown);
}

.dd-pricing-feature span {
    color: var(--dd-gray-700);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.dd-pricing-card .dd-btn {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

/* ============================================
   Pricing Table Styles
   ============================================ */
.dd-pricing-table {
    margin: var(--dd-spacing-xl) 0;
}

.dd-price-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--dd-spacing-lg);
    margin-bottom: var(--dd-spacing-2xl);
}

.dd-feature-box {
    padding: var(--dd-spacing-xl);
    background: var(--dd-white);
    border: 2px solid var(--dd-gray-200);
    border-radius: var(--dd-radius-xl);
    transition: all var(--dd-transition-base);
    overflow: hidden;
}

.dd-feature-box:hover {
    border-color: var(--dd-teal);
    box-shadow: var(--dd-shadow-lg);
    transform: translateY(-4px);
}

.dd-feature-box h3 {
    color: var(--dd-teal);
    margin-bottom: var(--dd-spacing-md);
    word-wrap: break-word;
}

.dd-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dd-feature-list li {
    padding: var(--dd-spacing-sm) 0;
    border-bottom: 1px solid var(--dd-gray-200);
    align-items: flex-start;
    gap: var(--dd-spacing-sm);
    
    /* Text wrapping */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.dd-feature-list li:last-child {
    border-bottom: none;
}

.dd-feature-list li::before {
    /* Unicode statt Emoji verwenden */
    content: "\2713";
    color: var(--dd-teal);
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1.5;
    min-width: 20px;
}

.dd-feature-list li strong {
    display: inline;
    word-wrap: break-word;
}

/* Für sehr schmale Displays */
@media (max-width: 480px) {
    .dd-price-comparison {
        grid-template-columns: 1fr;
    }
    
    .dd-feature-box {
        padding: var(--dd-spacing-md);
    }
    
    .dd-feature-list li {
        font-size: 0.875rem;
        padding: 0.625rem 0;
    }
}

/* ============================================
   CTA Section
   ============================================ */
.dd-cta {
    padding: var(--dd-spacing-3xl) 0;
    background: linear-gradient(135deg, var(--dd-teal) 0%, var(--dd-teal-dark) 100%);
    color: var(--dd-white);
    position: relative;
    overflow: hidden;
}

.dd-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.dd-cta-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.dd-cta h2 {
    color: var(--dd-white);
    margin-bottom: var(--dd-spacing-md);
}

.dd-cta p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--dd-spacing-xl);
}

.dd-cta-buttons {
    display: flex;
    gap: var(--dd-spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--dd-spacing-md);
}

.dd-cta .dd-btn-primary {
    background: var(--dd-white);
    color: var(--dd-teal);
}

.dd-cta .dd-btn-primary:hover {
    background: var(--dd-beige);
}

.dd-cta .dd-btn-secondary {
    background: transparent;
    color: var(--dd-white);
    border-color: rgba(255, 255, 255, 0.3);
}

.dd-cta .dd-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--dd-white);
}

.dd-cta-note {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

/* ============================================
   No-Show Section Styles
   ============================================ */
.dd-no-show-section {
    padding: var(--dd-spacing-3xl) 0;
    background: linear-gradient(135deg, var(--dd-white) 0%, var(--dd-gray-50) 100%);
}

.dd-no-show-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dd-spacing-2xl);
    align-items: start;
}

.dd-no-show-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dd-spacing-lg);
    margin-top: var(--dd-spacing-lg);
}

.dd-no-show-list li {
    display: flex;
    gap: var(--dd-spacing-md);
    align-items: flex-start;
    padding: var(--dd-spacing-md);
    background: var(--dd-white);
    border-radius: var(--dd-radius-lg);
    border: 2px solid var(--dd-gray-200);
    transition: all var(--dd-transition-base);
}

.dd-no-show-list li:hover {
    border-color: var(--dd-error);
    box-shadow: var(--dd-shadow-md);
}

.dd-no-show-list .dd-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.dd-no-show-list strong {
    color: var(--dd-gray-900);
    display: block;
    margin-bottom: 0.25rem;
}

.dd-no-show-list p {
    color: var(--dd-gray-600);
    font-size: 0.9375rem;
    margin: 0;
}

.dd-solution-card {
    padding: var(--dd-spacing-xl);
    background: linear-gradient(135deg, var(--dd-beige) 0%, var(--dd-white) 100%);
    border-radius: var(--dd-radius-2xl);
    border: 2px solid var(--dd-teal);
    box-shadow: var(--dd-shadow-xl);
    position: relative;
    overflow: hidden;
}

.dd-solution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--dd-teal) 0%, var(--dd-brown) 100%);
}

.dd-solution-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dd-success);
    color: var(--dd-white);
    font-size: 3rem;
    border-radius: 50%;
    margin-bottom: var(--dd-spacing-md);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.dd-solution-card h3 {
    color: var(--dd-gray-900);
    margin-bottom: var(--dd-spacing-sm);
}

.dd-solution-card p {
    color: var(--dd-gray-700);
    margin-bottom: var(--dd-spacing-lg);
}

.dd-solution-card p strong {
    color: var(--dd-success);
    font-size: 1.5rem;
}

.dd-solution-features {
    display: flex;
    flex-direction: column;
    gap: var(--dd-spacing-sm);
}

.dd-solution-feature {
    display: flex;
    align-items: center;
    gap: var(--dd-spacing-sm);
    padding: var(--dd-spacing-sm);
    background: var(--dd-white);
    border-radius: var(--dd-radius-md);
}

.dd-solution-feature span {
    font-size: 0.9375rem;
    color: var(--dd-gray-700);
    font-weight: 500;
}

/* ============================================
   Dashboard Image Styles
   ============================================ */
.dd-dashboard-image {
    padding: var(--dd-spacing-md);
    background: var(--dd-gray-50);
}

.dd-dashboard-image img {
    border-radius: var(--dd-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Restaurant Showcase (Hero Section)
   ============================================ */
.dd-restaurant-showcase {
    position: relative;
    border-radius: var(--dd-radius-2xl);
    overflow: hidden;
    box-shadow: var(--dd-shadow-xl);
    border: 1px solid var(--dd-gray-200);
}

.dd-restaurant-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.dd-restaurant-showcase:hover .dd-restaurant-image {
    transform: scale(1.05);
}

.dd-restaurant-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    padding: var(--dd-spacing-lg);
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.dd-overlay-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--dd-spacing-sm);
    padding: var(--dd-spacing-sm) var(--dd-spacing-md);
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--dd-radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dd-teal);
    box-shadow: var(--dd-shadow-lg);
}

.dd-overlay-badge svg {
    width: 20px;
    height: 20px;
    stroke: var(--dd-teal);
}

/* ============================================
   Video Section Styles
   ============================================ */
.dd-video-section {
    padding: var(--dd-spacing-3xl) 0;
    background: var(--dd-gray-50);
}

.dd-video-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    border-radius: var(--dd-radius-2xl);
    overflow: hidden;
    box-shadow: var(--dd-shadow-xl);
    background: var(--dd-gray-900);
}

.dd-video-player {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   Page Template Styles
   ============================================ */
.dd-page-header {
    padding: var(--dd-spacing-3xl) 0 var(--dd-spacing-2xl);
    background: linear-gradient(135deg, var(--dd-beige) 0%, var(--dd-beige-dark) 100%);
    text-align: center;
}

.dd-page-header h1 {
    margin-bottom: var(--dd-spacing-md);
}

.dd-page-header p {
    font-size: 1.125rem;
    color: var(--dd-gray-600);
    max-width: 700px;
    margin: 0 auto;
}

.dd-page-content {
    padding: var(--dd-spacing-3xl) 0;
}

.dd-page-content h2 {
    margin-top: var(--dd-spacing-2xl);
    margin-bottom: var(--dd-spacing-md);
}

.dd-page-content h3 {
    margin-top: var(--dd-spacing-xl);
    margin-bottom: var(--dd-spacing-sm);
}

.dd-page-content ul, 
.dd-page-content ol {
    margin-left: var(--dd-spacing-lg);
    margin-bottom: var(--dd-spacing-md);
}

.dd-page-content li {
    margin-bottom: var(--dd-spacing-xs);
}

/* ============================================
   Contact Form Styles
   ============================================ */
.dd-contact-form {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--dd-spacing-xl);
    background: var(--dd-white);
    border-radius: var(--dd-radius-2xl);
    box-shadow: var(--dd-shadow-lg);
}

.dd-form-group {
    margin-bottom: var(--dd-spacing-md);
}

.dd-form-group label {
    display: block;
    margin-bottom: var(--dd-spacing-xs);
    font-weight: 600;
    color: var(--dd-gray-700);
}

.dd-form-group input,
.dd-form-group textarea,
.dd-form-group select {
    width: 100%;
    padding: var(--dd-spacing-sm);
    border: 2px solid var(--dd-gray-200);
    border-radius: var(--dd-radius-md);
    font-size: 1rem;
    transition: border-color var(--dd-transition-base);
}

.dd-form-group input:focus,
.dd-form-group textarea:focus,
.dd-form-group select:focus {
    outline: none;
    border-color: var(--dd-teal);
}

.dd-form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.dd-form-message {
    padding: var(--dd-spacing-md);
    border-radius: var(--dd-radius-md);
    margin-bottom: var(--dd-spacing-md);
}

.dd-form-message.success {
    background: var(--dd-success);
    color: var(--dd-white);
}

.dd-form-message.error {
    background: var(--dd-error);
    color: var(--dd-white);
}

/* ============================================
   404 Page Styles
   ============================================ */
.dd-404-page {
    padding: var(--dd-spacing-3xl) 0;
    text-align: center;
}

.dd-404-number {
    font-size: clamp(4rem, 15vw, 10rem);
    font-weight: 700;
    color: var(--dd-teal);
    line-height: 1;
    margin-bottom: var(--dd-spacing-md);
}

.dd-404-text h1 {
    margin-bottom: var(--dd-spacing-md);
}

.dd-404-text p {
    font-size: 1.125rem;
    color: var(--dd-gray-600);
    margin-bottom: var(--dd-spacing-xl);
}

.dd-404-search {
    max-width: 500px;
    margin: 0 auto var(--dd-spacing-xl);
}

.dd-404-links {
    display: flex;
    justify-content: center;
    gap: var(--dd-spacing-md);
    flex-wrap: wrap;
}

/* ============================================
   Webdesign Page Styles
   ============================================ */
.dd-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--dd-spacing-lg);
    margin: var(--dd-spacing-xl) 0;
}

.dd-service-card {
    padding: var(--dd-spacing-xl);
    background: var(--dd-beige);
    border-radius: var(--dd-radius-xl);
    border: 2px solid transparent;
    transition: all var(--dd-transition-base);
}

.dd-service-card:hover {
    background: var(--dd-white);
    border-color: var(--dd-teal);
    box-shadow: var(--dd-shadow-lg);
    transform: translateY(-4px);
}

.dd-service-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dd-teal) 0%, var(--dd-teal-light) 100%);
    color: var(--dd-white);
    border-radius: var(--dd-radius-lg);
    margin-bottom: var(--dd-spacing-md);
    font-size: 1.5rem;
}

.dd-service-card h3 {
    margin-bottom: var(--dd-spacing-sm);
}

.dd-service-card p {
    color: var(--dd-gray-600);
    margin-bottom: 0;
}

/* ============================================
   Navigation & Burger Menu - EXAKT WIE FAHRAKADEMIE
   ============================================ */

.dd-main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--dd-gray-200);
    box-shadow: var(--dd-shadow-sm);
    transition: all 0.3s ease;
}

.dd-main-header.scrolled {
    box-shadow: var(--dd-shadow-lg);
}

.dd-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dd-spacing-md) 0;
}

.dd-logo img {
    height: 80px;
    width: auto;
}

/* Desktop Navigation */
.dd-nav-menu {
    display: flex;
    gap: var(--dd-spacing-lg);
    align-items: center;
}

.dd-nav-menu a {
    text-decoration: none;
    color: var(--dd-gray-700);
    font-weight: 500;
    transition: color var(--dd-transition-base);
}

.dd-nav-menu a:not(.dd-btn):hover {
    color: var(--dd-teal);
}

/* Burger Button - EXAKT WIE FAHRAKADEMIE */
.dd-burger {
    display: none; /* Standardmäßig versteckt */
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    position: relative;
    width: 35px;
    height: 35px;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

.dd-burger span {
    width: 25px;
    height: 3px;
    background: var(--dd-teal);
    transition: all 0.3s ease;
    display: block;
    transform-origin: center;
    position: relative;
}

/* Burger Animation when active - EXAKT WIE FAHRAKADEMIE */
.dd-burger.active span:nth-child(1) {
    transform: rotate(45deg) translate(0, 0);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12.5px;
    margin-top: -1.5px;
}

.dd-burger.active span:nth-child(2) {
    opacity: 0;
}

.dd-burger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(0, 0);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12.5px;
    margin-top: -1.5px;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (min-width: 768px) {
    .dd-hero .container {
        grid-template-columns: 1fr 1fr;
    }
    
    .dd-dashboard-content {
        min-height: 500px;
    }
    
    .dd-benefits-wrapper {
        grid-template-columns: 1fr 1fr;
    }
    
    .dd-no-show-content {
        grid-template-columns: 1fr 1fr;
    }
    
    .dd-process-arrow {
        display: block;
    }
}

@media (max-width: 768px) {
    .dd-logo img {
        height: 60px;
    }
    
    /* Show Burger on Mobile */
    .dd-burger {
        display: flex !important; /* Wichtig für Mobile */
    }
    
    /* Hide desktop menu initially */
    .dd-nav-menu {
        display: none;
    }
    
    /* Show menu when active */
    .dd-nav-menu.active {
        display: flex !important;
        position: fixed;
        top: 92px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 2rem;
        box-shadow: var(--dd-shadow-lg);
        gap: 1rem;
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        z-index: 999;
    }
    
    /* Menu Links on Mobile */
    .dd-nav-menu a {
        display: block;
        padding: 0.75rem;
        text-align: center;
        font-size: 1.125rem;
        width: 100%;
    }
    
    /* Button in mobile menu */
    .dd-nav-menu .dd-btn {
        margin-top: 0.5rem;
        width: 100%;
    }
}

@media (max-width: 767px) {
    :root {
        --dd-spacing-xl: 2rem;
        --dd-spacing-2xl: 3rem;
        --dd-spacing-3xl: 4rem;
    }
    
    .dd-hero {
        padding: var(--dd-spacing-2xl) 0;
    }
    
    .dd-hero-cta {
        flex-direction: column;
    }
    
    .dd-btn {
        width: 100%;
    }
    
    .dd-dashboard-sidebar {
        width: 80px;
        padding: var(--dd-spacing-sm);
    }
    
    .dd-card-grid {
        grid-template-columns: 1fr;
    }
    
    .dd-process-arrow {
        display: none;
    }
    
    .dd-process-grid {
        grid-template-columns: 1fr;
    }
    
    .dd-pricing-grid,
    .dd-industries-grid {
        grid-template-columns: 1fr;
    }
    
    .dd-features-grid {
        grid-template-columns: 1fr;
    }
    
    .dd-restaurant-overlay {
        padding: var(--dd-spacing-md);
    }
    
    .dd-overlay-badge {
        font-size: 0.75rem;
        padding: 0.5rem var(--dd-spacing-sm);
    }
    
    .dd-overlay-badge svg {
        width: 16px;
        height: 16px;
    }
    
    .dd-video-wrapper {
        border-radius: var(--dd-radius-lg);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
    
    .dd-hero-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--dd-spacing-sm);
    }
    
    .dd-stat-number {
        font-size: 1.5rem;
    }
    
    .dd-stat-label {
        font-size: 0.75rem;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .dd-nav-menu {
        gap: var(--dd-spacing-md);
    }
    
    .dd-nav-menu a {
        font-size: 0.9375rem;
    }
}

/* ============================================
   Animations & Utilities
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.dd-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dd-gray-100);
    border: 2px dashed var(--dd-gray-300);
    border-radius: var(--dd-radius-xl);
    color: var(--dd-gray-500);
    text-align: center;
    padding: var(--dd-spacing-lg);
}

.dd-img-placeholder div {
    max-width: 400px;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus styles for accessibility */
*:focus-visible {
    outline: 3px solid var(--dd-teal);
    outline-offset: 2px;
}

/* Body when menu is open */
body.menu-open {
    overflow: hidden;
}

/* Overlay when menu is open - Optional */
body.menu-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}