/* ========================================================================== DESIGN TOKENS - CSS Custom Properties Styleguide v1.0 ========================================================================== */:root{/* ======================================================================== COLORS ======================================================================== */ /* Primary - Brand Color */ --color-primary-50:#f3fae7;--color-primary-100:#e4f4cb;--color-primary-200:#c9e99d;--color-primary-300:#a8db64;--color-primary-400:#8bc93f;--color-primary-500:#74b728;/* Main */ --color-primary-600:#5a9320;--color-primary-700:#446f19;--color-primary-800:#385819;--color-primary-900:#304b18;--color-primary:var(--color-primary-500);--color-primary-hover:var(--color-primary-600);--color-primary-active:var(--color-primary-700);/* Secondary - Blue */ --color-secondary-50:#eff6ff;--color-secondary-100:#dbeafe;--color-secondary-200:#bfdbfe;--color-secondary-300:#93c5fd;--color-secondary-400:#60a5fa;--color-secondary-500:#3b82f6;--color-secondary-600:#2563eb;/* Main */ --color-secondary-700:#1d4ed8;--color-secondary-800:#1e40af;--color-secondary-900:#1e3a8a;--color-secondary:var(--color-secondary-600);--color-secondary-hover:var(--color-secondary-700);--color-secondary-active:var(--color-secondary-800);/* Success - Green */ --color-success-50:#f0fdf4;--color-success-100:#dcfce7;--color-success-200:#bbf7d0;--color-success-300:#86efac;--color-success-400:#4ade80;--color-success-500:#22c55e;--color-success-600:#16a34a;/* Main */ --color-success-700:#15803d;--color-success-800:#166534;--color-success-900:#14532d;--color-success:var(--color-success-600);--color-success-hover:var(--color-success-700);--color-success-active:var(--color-success-800);/* Error - Red */ --color-error-50:#fef2f2;--color-error-100:#fee2e2;--color-error-200:#fecaca;--color-error-300:#fca5a5;--color-error-400:#f87171;--color-error-500:#ef4444;--color-error-600:#dc2626;/* Main */ --color-error-700:#b91c1c;--color-error-800:#991b1b;--color-error-900:#7f1d1d;--color-error:var(--color-error-600);--color-error-hover:var(--color-error-700);--color-error-active:var(--color-error-800);/* Warning - Amber */ --color-warning-50:#fffbeb;--color-warning-100:#fef3c7;--color-warning-200:#fde68a;--color-warning-300:#fcd34d;--color-warning-400:#fbbf24;--color-warning-500:#f59e0b;/* Main */ --color-warning-600:#d97706;--color-warning-700:#b45309;--color-warning-800:#92400e;--color-warning-900:#78350f;--color-warning:var(--color-warning-500);--color-warning-hover:var(--color-warning-600);--color-warning-active:var(--color-warning-700);/* Info - Sky Blue */ --color-info-50:#f0f9ff;--color-info-100:#e0f2fe;--color-info-200:#bae6fd;--color-info-300:#7dd3fc;--color-info-400:#38bdf8;--color-info-500:#0ea5e9;/* Main */ --color-info-600:#0284c7;--color-info-700:#0369a1;--color-info-800:#075985;--color-info-900:#0c4a6e;--color-info:var(--color-info-500);--color-info-hover:var(--color-info-600);--color-info-active:var(--color-info-700);/* Neutral - Gray Scale */ --color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-gray-950:#030712;/* Semantic Colors */ --color-text:var(--color-gray-900);--color-text-muted:var(--color-gray-600);--color-text-light:var(--color-gray-500);--color-text-inverse:#ffffff;--color-bg:#ffffff;--color-bg-subtle:var(--color-gray-50);--color-bg-muted:var(--color-gray-100);--color-bg-inverse:var(--color-gray-900);--color-border:var(--color-gray-200);--color-border-strong:var(--color-gray-300);--color-border-muted:var(--color-gray-100);--color-link:var(--color-primary);--color-link-hover:var(--color-primary-hover);/* Accent - Donamic Green (for special emphasis) */ --color-accent:#63E526;--color-accent-light:#7ef545;--color-accent-dark:#4dc01a;--color-accent-glow:rgba(99,229,38,0.4);--color-accent-muted:rgba(99,229,38,0.1);/* Magic Button Colors (for animated/special buttons) */ --color-magic-teal:#00d4aa;--color-magic-teal-glow:rgba(0,212,170,0.4);--color-magic-purple:#7c3aed;--color-magic-purple-glow:rgba(124,58,237,0.4);--color-magic-pink:#f472b6;--color-magic-pink-glow:rgba(244,114,182,0.4);/* Dark Background Layers (for dark themes) */ --color-bg-900:#030712;--color-bg-800:#0a0f1a;--color-bg-700:#111827;--color-bg-600:#1f2937;/* Bridge Tokens - Donamic Namespace (maps to standard tokens) */ --donamic-primary:var(--color-accent);--donamic-primary-dark:var(--color-accent-dark);--donamic-primary-light:var(--color-accent-light);--donamic-primary-glow:var(--color-accent-glow);--donamic-primary-muted:var(--color-accent-muted);--donamic-secondary:#C7A3A5;--donamic-secondary-dark:#a88183;--donamic-secondary-muted:rgba(199,163,165,0.15);/* Orange Palette (for resource icons,warnings,etc.) */ --color-orange-50:#fff7ed;--color-orange-100:#ffedd5;--color-orange-200:#fed7aa;--color-orange-300:#fdba74;--color-orange-400:#fb923c;--color-orange-500:#f97316;--color-orange-600:#ea580c;--color-orange-700:#c2410c;--color-orange-800:#9a3412;--color-orange-900:#7c2d12;--color-orange:var(--color-orange-500);/* Opacity Tokens (for overlays and transparency) */ --opacity-0:0;--opacity-5:0.05;--opacity-10:0.1;--opacity-15:0.15;--opacity-20:0.2;--opacity-25:0.25;--opacity-30:0.3;--opacity-40:0.4;--opacity-50:0.5;--opacity-60:0.6;--opacity-70:0.7;--opacity-75:0.75;--opacity-80:0.8;--opacity-90:0.9;--opacity-100:1;/* Semantic Opacity Tokens */ --opacity-overlay-light:0.9;--opacity-overlay-dark:0.8;--opacity-white-subtle:0.05;--opacity-white-light:0.1;--opacity-white-medium:0.15;--opacity-white-strong:0.8;--opacity-accent-subtle:0.05;--opacity-accent-light:0.15;/* White Overlay Colors */ --color-white-5:rgba(255,255,255,0.05);--color-white-10:rgba(255,255,255,0.1);--color-white-15:rgba(255,255,255,0.15);--color-white-20:rgba(255,255,255,0.2);--color-white-30:rgba(255,255,255,0.3);--color-white-50:rgba(255,255,255,0.5);--color-white-60:rgba(255,255,255,0.6);--color-white-80:rgba(255,255,255,0.8);--color-white-90:rgba(255,255,255,0.9);/* Black Overlay Colors */ --color-black-5:rgba(0,0,0,0.05);--color-black-8:rgba(0,0,0,0.08);--color-black-10:rgba(0,0,0,0.1);--color-black-30:rgba(0,0,0,0.3);--color-black-40:rgba(0,0,0,0.4);--color-black-50:rgba(0,0,0,0.5);--color-black-70:rgba(0,0,0,0.7);--color-black-80:rgba(0,0,0,0.8);/* Accent Overlay Colors (Green #63E526) */ --color-accent-5:rgba(99,229,38,0.05);--color-accent-10:rgba(99,229,38,0.1);--color-accent-15:rgba(99,229,38,0.15);--color-accent-20:rgba(99,229,38,0.2);/* Status Overlay Colors */ --color-error-overlay:rgba(239,68,68,0.1);--color-warning-overlay:rgba(245,158,11,0.1);--color-info-overlay:rgba(14,165,233,0.1);--color-success-overlay:rgba(22,163,74,0.2);/* Gradient Tokens */ --gradient-overlay-dark:linear-gradient(to top,rgba(0,0,0,0.7),transparent);--gradient-overlay-light:linear-gradient(to top,rgba(255,255,255,0.9),transparent);--gradient-accent-subtle:linear-gradient(135deg,rgba(99,229,38,0.15),rgba(99,229,38,0.05));--gradient-text:linear-gradient(135deg,var(--color-accent),var(--color-magic-teal));--gradient-magic:linear-gradient(135deg,var(--color-magic-purple),var(--color-magic-pink),var(--color-accent));/* ======================================================================== TYPOGRAPHY ======================================================================== */ /* Font Families - Distinctive Font Stack */ --font-family-display:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;--font-family-sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,sans-serif;--font-family-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--font-family-base:var(--font-family-sans);--font-family-heading:var(--font-family-display);--font-family-code:var(--font-family-mono);/* Font Sizes - Mobile First (rem) */ --font-size-xs:0.75rem;/* 12px */ --font-size-sm:0.875rem;/* 14px */ --font-size-base:1rem;/* 16px */ --font-size-lg:1.125rem;/* 18px */ --font-size-xl:1.25rem;/* 20px */ --font-size-2xl:1.5rem;/* 24px */ --font-size-3xl:1.875rem;/* 30px */ --font-size-4xl:2.25rem;/* 36px */ --font-size-5xl:3rem;/* 48px */ --font-size-6xl:3.75rem;/* 60px */ --font-size-7xl:4.5rem;/* 72px */ --font-size-8xl:6rem;/* 96px */ --font-size-9xl:8rem;/* 128px */ /* Font Weights */ --font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;/* Line Heights */ --line-height-none:1;--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;/* Letter Spacing */ --letter-spacing-tighter:-0.05em;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0;--letter-spacing-wide:0.025em;--letter-spacing-wider:0.05em;--letter-spacing-widest:0.1em;/* ======================================================================== SPACING ======================================================================== */ --spacing-0:0;--spacing-px:1px;--spacing-0-5:0.125rem;/* 2px */ --spacing-1:0.25rem;/* 4px */ --spacing-1-5:0.375rem;/* 6px */ --spacing-2:0.5rem;/* 8px */ --spacing-2-5:0.625rem;/* 10px */ --spacing-3:0.75rem;/* 12px */ --spacing-3-5:0.875rem;/* 14px */ --spacing-4:1rem;/* 16px */ --spacing-5:1.25rem;/* 20px */ --spacing-6:1.5rem;/* 24px */ --spacing-7:1.75rem;/* 28px */ --spacing-8:2rem;/* 32px */ --spacing-9:2.25rem;/* 36px */ --spacing-10:2.5rem;/* 40px */ --spacing-11:2.75rem;/* 44px */ --spacing-12:3rem;/* 48px */ --spacing-14:3.5rem;/* 56px */ --spacing-16:4rem;/* 64px */ --spacing-20:5rem;/* 80px */ --spacing-24:6rem;/* 96px */ --spacing-28:7rem;/* 112px */ --spacing-32:8rem;/* 128px */ --spacing-36:9rem;/* 144px */ --spacing-40:10rem;/* 160px */ --spacing-44:11rem;/* 176px */ --spacing-48:12rem;/* 192px */ --spacing-52:13rem;/* 208px */ --spacing-56:14rem;/* 224px */ --spacing-60:15rem;/* 240px */ --spacing-64:16rem;/* 256px */ --spacing-72:18rem;/* 288px */ --spacing-80:20rem;/* 320px */ --spacing-96:24rem;/* 384px */ /* ======================================================================== SIZING ======================================================================== */ --size-full:100%;--size-screen:100vw;--size-min:min-content;--size-max:max-content;--size-fit:fit-content;/* ======================================================================== BREAKPOINTS (for reference - use in media queries) ======================================================================== */ /* * Mobile First Breakpoints:* --breakpoint-sm:640px - Small devices (landscape phones) * --breakpoint-md:768px - Medium devices (tablets) * --breakpoint-lg:1024px - Large devices (desktops) * --breakpoint-xl:1280px - Extra large devices (large desktops) * --breakpoint-2xl:1536px - 2X large devices (larger desktops) */ /* ======================================================================== LAYOUT ======================================================================== */ --container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px;--container-2xl:1536px;--container-padding:var(--spacing-4);/* ======================================================================== BORDERS ======================================================================== */ --border-width-0:0;--border-width-1:1px;--border-width-2:2px;--border-width-4:4px;--border-width-8:8px;--border-radius-none:0;--border-radius-sm:0.125rem;/* 2px */ --border-radius-base:0.25rem;/* 4px */ --border-radius-md:0.375rem;/* 6px */ --border-radius-lg:0.5rem;/* 8px */ --border-radius-xl:0.75rem;/* 12px */ --border-radius-2xl:1rem;/* 16px */ --border-radius-3xl:1.5rem;/* 24px */ --border-radius-full:9999px;/* ======================================================================== SHADOWS ======================================================================== */ --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-base:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);--shadow-2xl:0 25px 50px -12px rgb(0 0 0 / 0.25);--shadow-inner:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--shadow-none:0 0 #0000;/* ======================================================================== TRANSITIONS ======================================================================== */ --transition-none:none;--transition-all:all 150ms cubic-bezier(0.4,0,0.2,1);--transition-default:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;--transition-colors:color,background-color,border-color,text-decoration-color,fill,stroke;--transition-opacity:opacity;--transition-shadow:box-shadow;--transition-transform:transform;--duration-75:75ms;--duration-100:100ms;--duration-150:150ms;--duration-200:200ms;--duration-300:300ms;--duration-500:500ms;--duration-700:700ms;--duration-1000:1000ms;--ease-linear:linear;--ease-in:cubic-bezier(0.4,0,1,1);--ease-out:cubic-bezier(0,0,0.2,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);/* ======================================================================== ANIMATIONS ======================================================================== */ /* Animation Durations */ --animation-duration-fast:150ms;--animation-duration-base:300ms;--animation-duration-slow:500ms;--animation-duration-slower:1000ms;/* Animation Definitions (use with animation property) */ --animation-fade-in:fade-in var(--animation-duration-base) var(--ease-out) forwards;--animation-fade-out:fade-out var(--animation-duration-base) var(--ease-in) forwards;--animation-slide-up:slide-up var(--animation-duration-base) var(--ease-out) forwards;--animation-slide-down:slide-down var(--animation-duration-base) var(--ease-out) forwards;--animation-scale-in:scale-in var(--animation-duration-base) var(--ease-out) forwards;--animation-spin:spin 1s linear infinite;--animation-ping:ping 1s cubic-bezier(0,0,0.2,1) infinite;--animation-pulse:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;--animation-bounce:bounce 1s infinite;/* Special Effect Animations */ --animation-shimmer:shimmer 2s linear infinite;--animation-glow-pulse:glow-pulse 2s ease-in-out infinite;--animation-skeleton:skeleton-pulse 1.5s ease-in-out infinite;--animation-float:float 4s ease-in-out infinite;--animation-border-beam:border-beam 4s linear infinite;/* ======================================================================== COMPONENT STATES ======================================================================== */ /* Opacity States */ --state-loading-opacity:0.6;--state-disabled-opacity:0.5;--state-hover-opacity:0.9;--state-placeholder-opacity:0.5;/* Transform States */ --state-hover-scale:1.02;--state-active-scale:0.98;--state-hover-lift:translateY(-2px);--state-active-press:translateY(1px);/* ======================================================================== Z-INDEX ======================================================================== */ --z-auto:auto;--z-0:0;--z-10:10;--z-20:20;--z-30:30;--z-40:40;--z-50:50;--z-dropdown:100;--z-sticky:200;--z-fixed:300;--z-modal-backdrop:400;--z-modal:500;--z-popover:600;--z-tooltip:700;--z-toast:800;/* ======================================================================== FOCUS ======================================================================== */ --focus-ring-width:2px;--focus-ring-offset:2px;--focus-ring-color:var(--color-primary-400);--focus-ring:0 0 0 var(--focus-ring-offset) var(--color-bg),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color)}/* ========================================================================== KEYFRAME ANIMATIONS ========================================================================== */ @keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes slide-up{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-down{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes scale-in{from{transform:scale(0.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,100%{transform:scale(2);opacity:0}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0,0,0.2,1)}}/* Special Effect Keyframes */ @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes glow-pulse{0%,100%{box-shadow:0 0 20px var(--color-accent-glow)}50%{box-shadow:0 0 40px var(--color-accent-glow),0 0 60px var(--color-accent-glow)}}@keyframes skeleton-pulse{0%,100%{background-color:var(--color-gray-200)}50%{background-color:var(--color-gray-300)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes border-beam{0%{offset-distance:0%}100%{offset-distance:100%}}/* ========================================================================== DONAMIC REDESIGN 1 - Enterprise Theme Professionelles,helles Design mit grünem Akzent Nutzt dieselben Klassennamen wie dark-donamic,nur andere Body-Klasse:- .donamic_redesign1 statt .dark-donamic ========================================================================== */:root{/* ======================================================================== DARK COLORS (for hero,dark sections) ======================================================================== */ --donamic-black:#0a0a0a;--donamic-dark:#141414;--donamic-dark-gray:#1f1f1f;/* ======================================================================== LIGHT COLORS (for light sections) ======================================================================== */ --donamic-white:#ffffff;--donamic-light:#fafafa;--donamic-light-gray:#f5f5f5;/* ======================================================================== TEXT COLORS ======================================================================== */ --donamic-text-dark:#1a1a1a;--donamic-text-medium:#525252;--donamic-text-light:#737373;--donamic-text-white:#ffffff;--donamic-text-muted:#a3a3a3;/* ======================================================================== PRIMARY ACCENT - Donamic Green ======================================================================== */ --donamic-primary:#63E526;--donamic-primary-hover:#57cc22;--donamic-primary-dark:#4dc01a;--donamic-primary-light:#e8fce0;--donamic-primary-bg:#f0fdf0;--donamic-primary-glow:rgba(99,229,38,0.15);--donamic-primary-muted:rgba(99,229,38,0.1);/* ======================================================================== SECONDARY - Rosé #C7A3A5 ======================================================================== */ --donamic-secondary:#C7A3A5;--donamic-secondary-dark:#a88183;--donamic-secondary-muted:rgba(199,163,165,0.15);--donamic-secondary-light:#f5e6e7;/* ======================================================================== BORDERS ======================================================================== */ --donamic-border-light:#e5e5e5;--donamic-border-dark:rgba(255,255,255,0.1);/* ======================================================================== TYPOGRAPHY ======================================================================== */ --donamic-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;/* ======================================================================== SPACING ======================================================================== */ --donamic-space-xs:0.5rem;--donamic-space-sm:0.75rem;--donamic-space-md:1rem;--donamic-space-lg:1.5rem;--donamic-space-xl:2rem;--donamic-space-2xl:3rem;--donamic-space-3xl:4rem;--donamic-space-4xl:6rem;--donamic-space-5xl:8rem;/* ======================================================================== BORDER RADIUS ======================================================================== */ --donamic-radius-sm:4px;--donamic-radius-md:6px;--donamic-radius-lg:8px;--donamic-radius-xl:12px;--donamic-radius-2xl:16px;--donamic-radius-full:9999px;/* ======================================================================== SHADOWS ======================================================================== */ --donamic-shadow-sm:0 1px 2px rgba(0,0,0,0.05);--donamic-shadow-md:0 4px 6px rgba(0,0,0,0.05);--donamic-shadow-lg:0 4px 20px rgba(0,0,0,0.08);--donamic-shadow-xl:0 25px 50px -12px rgba(0,0,0,0.25);--donamic-shadow-primary:0 4px 20px rgba(99,229,38,0.15);--donamic-shadow-glow:0 0 40px rgba(99,229,38,0.2);/* ======================================================================== TRANSITIONS ======================================================================== */ --donamic-transition-fast:150ms ease;--donamic-transition-base:200ms ease;--donamic-transition-slow:300ms ease}/* ========================================================================== BASE STYLES ========================================================================== */ .donamic_redesign1{font-family:var(--donamic-font-sans);font-size:16px;line-height:1.6;color:var(--donamic-text-dark);background:var(--donamic-white);-webkit-font-smoothing:antialiased}/* ========================================================================== TYPOGRAPHY ========================================================================== */ .donamic_redesign1 h1,.donamic_redesign1 h2,.donamic_redesign1 h3,.donamic_redesign1 h4,.donamic_redesign1 h5,.donamic_redesign1 h6{font-family:var(--donamic-font-sans);font-weight:800;color:var(--donamic-text-dark);letter-spacing:-0.02em;line-height:1.2}.donamic_redesign1 h1{font-size:clamp(2.5rem,5vw,4rem);letter-spacing:-0.03em}.donamic_redesign1 h2{font-size:clamp(1.75rem,3.5vw,2.5rem)}.donamic_redesign1 h3{font-size:1.5rem}.donamic_redesign1 h4{font-size:1.25rem}.donamic_redesign1 p{color:var(--donamic-text-medium);font-size:1rem;line-height:1.7}.donamic_redesign1 .lead{font-size:1.25rem;color:var(--donamic-text-medium);line-height:1.7;max-width:40rem}.donamic_redesign1 .text-gradient{background:linear-gradient(135deg,var(--donamic-primary) 0%,var(--donamic-primary-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.donamic_redesign1 .text-muted{color:var(--donamic-text-light)}.donamic_redesign1 .text-accent,.donamic_redesign1 .text-primary{color:var(--donamic-primary)}/* ========================================================================== LINKS ========================================================================== */ .donamic_redesign1 a:not([class*="btn"]){color:var(--donamic-primary);text-decoration:none;transition:color var(--donamic-transition-fast)}.donamic_redesign1 a:not([class*="btn"]):hover{color:var(--donamic-primary-dark)}/* ========================================================================== BADGES ========================================================================== */ .donamic_redesign1 .badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;font-size:0.8125rem;font-weight:600;color:var(--donamic-primary);background:var(--donamic-primary-light);border-radius:var(--donamic-radius-sm);text-transform:uppercase;letter-spacing:0.5px}.donamic_redesign1 .badge-secondary{color:var(--donamic-secondary-dark);background:var(--donamic-secondary-light)}/* ========================================================================== BUTTONS ========================================================================== */ .donamic_redesign1 .btn-donamic{display:inline-flex;align-items:center;justify-content:center;gap:var(--donamic-space-sm);padding:0.75rem 1.25rem;border-radius:var(--donamic-radius-md);font-weight:600;font-size:0.9375rem;text-decoration:none;transition:all var(--donamic-transition-base);border:none;cursor:pointer;font-family:var(--donamic-font-sans)}.donamic_redesign1 .btn-donamic svg{width:18px;height:18px}/* Primary Button */ .donamic_redesign1 .btn-donamic-primary{background:var(--donamic-primary);color:var(--donamic-text-dark)}.donamic_redesign1 .btn-donamic-primary:hover{background:var(--donamic-primary-hover);color:var(--donamic-text-dark)}/* Secondary Button */ .donamic_redesign1 .btn-donamic-secondary{background:var(--donamic-text-dark);color:var(--donamic-white)}.donamic_redesign1 .btn-donamic-secondary:hover{background:var(--donamic-dark);color:var(--donamic-white)}/* Outline Button */ .donamic_redesign1 .btn-donamic-outline{background:transparent;color:var(--donamic-text-dark);border:1px solid var(--donamic-border-light)}.donamic_redesign1 .btn-donamic-outline:hover{background:var(--donamic-light-gray);color:var(--donamic-text-dark)}/* Outline Light Button (for dark backgrounds) */ .donamic_redesign1 .btn-donamic-outline-light{background:transparent;color:var(--donamic-white);border:1px solid var(--donamic-border-dark)}.donamic_redesign1 .btn-donamic-outline-light:hover{background:rgba(255,255,255,0.1);color:var(--donamic-white)}/* Ghost Button */ .donamic_redesign1 .btn-donamic-ghost{background:transparent;color:var(--donamic-primary);padding:0.75rem 1rem}.donamic_redesign1 .btn-donamic-ghost:hover{background:var(--donamic-primary-light);color:var(--donamic-primary)}/* Button Disabled State */ .donamic_redesign1 .btn-donamic:disabled,.donamic_redesign1 .btn-donamic.disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}/* Button Focus State */ .donamic_redesign1 .btn-donamic:focus-visible{outline:none;box-shadow:0 0 0 2px var(--donamic-white),0 0 0 4px var(--donamic-primary)}/* Button Active States */ .donamic_redesign1 .btn-donamic-primary:active{transform:translateY(1px);box-shadow:var(--donamic-shadow-sm)}.donamic_redesign1 .btn-donamic-secondary:active{transform:translateY(1px);background:var(--donamic-bg-dark)}.donamic_redesign1 .btn-donamic-outline:active{transform:translateY(1px);background:var(--donamic-primary-light)}.donamic_redesign1 .btn-donamic-ghost:active{transform:translateY(1px)}/* Button Sizes */ .donamic_redesign1 .btn-donamic-sm{padding:0.5rem 1rem;font-size:0.875rem}.donamic_redesign1 .btn-donamic-lg{padding:1rem 1.75rem;font-size:1rem}/* ========================================================================== NAVIGATION ========================================================================== */ .donamic_redesign1 .navbar-donamic{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 var(--donamic-space-xl);background:var(--donamic-white);border-bottom:1px solid var(--donamic-border-light);height:72px;display:flex;align-items:center}.donamic_redesign1 .navbar-donamic-inner{max-width:1280px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between}.donamic_redesign1 .navbar-donamic-logo{font-size:1.5rem;font-weight:800;color:var(--donamic-text-dark);text-decoration:none;letter-spacing:-0.02em}.donamic_redesign1 .navbar-donamic-logo span{color:var(--donamic-primary)}.donamic_redesign1 .navbar-donamic-logo img{height:40px;width:auto}.donamic_redesign1 .navbar-donamic-nav{display:flex;align-items:center;gap:var(--donamic-space-2xl)}.donamic_redesign1 .navbar-donamic-link,.donamic_redesign1 a.navbar-donamic-link{color:var(--donamic-text-medium);text-decoration:none;font-size:0.9375rem;font-weight:500;transition:color var(--donamic-transition-base)}.donamic_redesign1 .navbar-donamic-link:hover,.donamic_redesign1 a.navbar-donamic-link:hover{color:var(--donamic-primary)}.donamic_redesign1 .navbar-donamic-link.active{color:var(--donamic-primary);font-weight:600}.donamic_redesign1 .navbar-donamic-ctas{display:flex;align-items:center;gap:var(--donamic-space-md)}/* Dropdown Navigation */ .donamic_redesign1 .navbar-donamic-dropdown{position:relative}.donamic_redesign1 .navbar-donamic-dropdown-trigger{display:flex;align-items:center;gap:4px;color:var(--donamic-text-medium);font-size:0.9375rem;font-weight:500;cursor:pointer;transition:color var(--donamic-transition-fast)}.donamic_redesign1 .navbar-donamic-dropdown-trigger:hover{color:var(--donamic-primary)}.donamic_redesign1 .navbar-donamic-dropdown-arrow{font-size:10px;transition:transform var(--donamic-transition-fast)}.donamic_redesign1 .navbar-donamic-dropdown:hover .navbar-donamic-dropdown-arrow{transform:rotate(180deg)}.donamic_redesign1 .navbar-donamic-dropdown-menu{position:absolute;top:100%;left:0;min-width:220px;background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--donamic-transition-fast);z-index:1000;box-shadow:var(--donamic-shadow-lg)}.donamic_redesign1 .navbar-donamic-dropdown:hover .navbar-donamic-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.donamic_redesign1 .navbar-donamic-dropdown-menu a{display:block;padding:10px 16px;color:var(--donamic-text-medium);font-size:0.9375rem;transition:all var(--donamic-transition-fast)}.donamic_redesign1 .navbar-donamic-dropdown-menu a:hover{background:var(--donamic-light-gray);color:var(--donamic-primary)}.donamic_redesign1 .navbar-donamic-dropdown-divider{height:1px;background:var(--donamic-border-light);margin:8px 0}.donamic_redesign1 .navbar-donamic-dropdown-menu-right{left:auto;right:0}/* Mobile Menu Toggle */ .donamic_redesign1 .navbar-donamic-toggle{display:none;background:none;border:none;color:var(--donamic-text-dark);font-size:24px;cursor:pointer;padding:8px}/* ========================================================================== HERO SECTION ========================================================================== */ .donamic_redesign1 .hero{background:var(--donamic-black);padding:var(--donamic-space-3xl) var(--donamic-space-lg);padding-top:calc(var(--donamic-space-3xl) + 80px);text-align:left;position:relative;min-height:100vh;display:flex;align-items:center;justify-content:flex-start;overflow:hidden}.donamic_redesign1 .hero::before{content:'';position:absolute;top:0;left:50%;width:800px;height:800px;background:radial-gradient(circle,var(--donamic-primary-glow) 0%,transparent 70%);transform:translateX(-50%);pointer-events:none;opacity:0.5}.donamic_redesign1 .hero-content{max-width:900px;margin:0 auto;position:relative;z-index:1}.donamic_redesign1 .hero .badge{background:rgba(99,229,38,0.15);color:var(--donamic-primary);margin-bottom:var(--donamic-space-xl)}.donamic_redesign1 .hero h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:800;color:var(--donamic-white);line-height:1.1;margin-bottom:var(--donamic-space-lg);letter-spacing:-0.03em}.donamic_redesign1 .hero h1 span,.donamic_redesign1 .hero h1 .highlight{color:var(--donamic-primary)}.donamic_redesign1 .hero .lead{font-size:1.25rem;color:var(--donamic-text-muted);max-width:650px;margin:0 auto var(--donamic-space-2xl);line-height:1.6}.donamic_redesign1 .hero-actions{display:flex;justify-content:center;gap:var(--donamic-space-md);flex-wrap:wrap}/* Hero with Background Image */ .donamic_redesign1 .hero-background{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0}.donamic_redesign1 .hero-background img{width:100%;height:100%;object-fit:cover;object-position:65% center}.donamic_redesign1 .hero-content-box{position:relative;z-index:1;max-width:550px;background:rgba(10,10,10,0.9);backdrop-filter:blur(20px);padding:var(--donamic-space-xl);border-radius:var(--donamic-radius-xl);border:1px solid var(--donamic-border-dark)}/* Hero Split Layout */ .donamic_redesign1 .hero-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--donamic-space-3xl);align-items:center;min-height:80vh;padding:var(--donamic-space-3xl) 0;padding-top:calc(var(--donamic-space-3xl) + 72px)}.donamic_redesign1 .hero-split-content{max-width:550px}.donamic_redesign1 .hero-split-image{position:relative}.donamic_redesign1 .hero-split-image img{width:100%;height:auto;border-radius:var(--donamic-radius-xl);box-shadow:var(--donamic-shadow-xl)}/* ========================================================================== SECTIONS ========================================================================== */ .donamic_redesign1 .section{padding:var(--donamic-space-5xl) var(--donamic-space-xl);position:relative}.donamic_redesign1 .section-inner{max-width:1280px;margin:0 auto}.donamic_redesign1 .section-header{text-align:center;margin-bottom:var(--donamic-space-4xl)}.donamic_redesign1 .section-header .badge{margin-bottom:var(--donamic-space-md)}.donamic_redesign1 .section-header h2{margin-bottom:var(--donamic-space-md)}.donamic_redesign1 .section-header p{font-size:1.125rem;color:var(--donamic-text-medium);max-width:600px;margin:0 auto}/* Section Dark */ .donamic_redesign1 .section-dark{background:var(--donamic-black);color:var(--donamic-text-muted)}.donamic_redesign1 .section-dark h1,.donamic_redesign1 .section-dark h2,.donamic_redesign1 .section-dark h3,.donamic_redesign1 .section-dark h4{color:var(--donamic-white)}.donamic_redesign1 .section-dark p,.donamic_redesign1 .section-dark span,.donamic_redesign1 .section-dark li{color:var(--donamic-text-muted)}/* Override for specific text utility classes on dark sections */ .donamic_redesign1 .section-dark .text-white,.donamic_redesign1 .section-dark .text-white-muted,.donamic_redesign1 .section-dark .text-white-subtle{/* These utilities have !important,so they override */}/* Section Gradient */ .donamic_redesign1 .section-gradient{background:linear-gradient(180deg,var(--donamic-white) 0%,var(--donamic-light) 50%,var(--donamic-white) 100%)}/* Section Accent (Light Green) */ .donamic_redesign1 .section-accent{background:var(--donamic-primary-bg)}/* Section Light (for compatibility) */ .donamic_redesign1 .section-light{background:var(--donamic-light)}/* ========================================================================== LOGO BAR ========================================================================== */ .donamic_redesign1 .logo-bar{background:var(--donamic-white);padding:var(--donamic-space-3xl) var(--donamic-space-xl);border-bottom:1px solid var(--donamic-border-light)}.donamic_redesign1 .logo-bar-inner{max-width:1280px;margin:0 auto;text-align:center}.donamic_redesign1 .logo-bar-title{font-size:0.875rem;font-weight:600;color:var(--donamic-text-light);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:var(--donamic-space-xl)}.donamic_redesign1 .logo-grid{display:flex;justify-content:center;align-items:center;gap:var(--donamic-space-3xl);flex-wrap:wrap}.donamic_redesign1 .logo-item{color:var(--donamic-text-light);font-size:1.25rem;font-weight:700;opacity:0.6;transition:opacity var(--donamic-transition-base)}.donamic_redesign1 .logo-item:hover{opacity:1}/* ========================================================================== CARDS ========================================================================== */ .donamic_redesign1 .card-donamic{background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);padding:var(--donamic-space-xl);transition:all var(--donamic-transition-base)}.donamic_redesign1 .card-donamic:hover{border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-primary)}/* Feature Card */ .donamic_redesign1 .card-feature{text-align:left;padding:var(--donamic-space-xl)}.donamic_redesign1 .card-feature-icon{width:48px;height:48px;background:var(--donamic-primary-light);border-radius:var(--donamic-radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--donamic-space-lg)}.donamic_redesign1 .card-feature-icon svg{width:24px;height:24px;color:var(--donamic-primary)}.donamic_redesign1 .card-feature h3{font-size:1.125rem;font-weight:700;color:var(--donamic-text-dark);margin-bottom:var(--donamic-space-sm)}.donamic_redesign1 .card-feature p{font-size:0.9375rem;color:var(--donamic-text-medium);line-height:1.6}/* Glass Card (for dark sections) */ .donamic_redesign1 .card-glass{background:rgba(255,255,255,0.05);backdrop-filter:blur(20px);border:1px solid var(--donamic-border-dark);border-radius:var(--donamic-radius-xl);padding:var(--donamic-space-xl)}.donamic_redesign1 .card-glass:hover{background:rgba(255,255,255,0.08);border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-glow)}/* Card Components */ .donamic_redesign1 .card-donamic .card-badge,.donamic_redesign1 .card .card-badge{display:inline-block;background:var(--donamic-primary);color:var(--donamic-text-dark);padding:4px 12px;border-radius:var(--donamic-radius-full);font-size:0.75rem;font-weight:600;margin-bottom:var(--donamic-space-md)}.donamic_redesign1 .card-donamic .card-title,.donamic_redesign1 .card .card-title{font-size:1.375rem;font-weight:700;margin-bottom:var(--donamic-space-sm)}.donamic_redesign1 .card-donamic .card-description,.donamic_redesign1 .card .card-description{font-size:0.9375rem;margin-bottom:var(--donamic-space-lg)}.donamic_redesign1 .card-donamic .card-features,.donamic_redesign1 .card .card-features{list-style:none;padding:0;margin:0 0 var(--donamic-space-xl) 0}.donamic_redesign1 .card-donamic .card-features li,.donamic_redesign1 .card .card-features li{padding:var(--donamic-space-xs) 0;display:flex;align-items:center;gap:var(--donamic-space-sm);font-size:0.9375rem}.donamic_redesign1 .card-donamic .card-features li::before,.donamic_redesign1 .card .card-features li::before{content:"\2713";color:var(--donamic-primary);font-weight:700}.donamic_redesign1 .card.card-highlight,.donamic_redesign1 .card-donamic.card-highlight{border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-primary)}.donamic_redesign1 .card{background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);padding:var(--donamic-space-lg);transition:all var(--donamic-transition-base)}.donamic_redesign1 .card:hover{border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-primary)}/* ========================================================================== FEATURE GRID ========================================================================== */ .donamic_redesign1 .features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--donamic-space-xl)}/* ========================================================================== CONTENT ROWS ========================================================================== */ .donamic_redesign1 .content-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--donamic-space-4xl);align-items:center;margin-bottom:var(--donamic-space-5xl)}.donamic_redesign1 .content-row:last-child{margin-bottom:0}.donamic_redesign1 .content-row.reverse{direction:rtl}.donamic_redesign1 .content-row.reverse > *{direction:ltr}.donamic_redesign1 .content-text{max-width:520px}.donamic_redesign1 .content-badge{display:inline-block;background:var(--donamic-primary-light);color:var(--donamic-primary);padding:var(--donamic-space-xs) var(--donamic-space-md);border-radius:var(--donamic-radius-sm);font-size:0.75rem;font-weight:700;margin-bottom:var(--donamic-space-lg);text-transform:uppercase;letter-spacing:0.5px}.donamic_redesign1 .content-text h3{font-size:1.75rem;font-weight:800;color:var(--donamic-text-dark);margin-bottom:var(--donamic-space-md);letter-spacing:-0.02em;line-height:1.2}.donamic_redesign1 .content-text p{font-size:1rem;color:var(--donamic-text-medium);margin-bottom:var(--donamic-space-lg);line-height:1.7}.donamic_redesign1 .content-list{list-style:none;margin-bottom:var(--donamic-space-xl);padding:0}.donamic_redesign1 .content-list li{display:flex;align-items:flex-start;gap:var(--donamic-space-sm);margin-bottom:var(--donamic-space-sm);font-size:0.9375rem;color:var(--donamic-text-medium)}.donamic_redesign1 .content-list svg{width:20px;height:20px;color:var(--donamic-primary);flex-shrink:0;margin-top:2px}.donamic_redesign1 .content-visual{background:var(--donamic-light-gray);border-radius:var(--donamic-radius-xl);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;border:1px solid var(--donamic-border-light)}.donamic_redesign1 .content-visual-inner{width:80%;height:70%;background:var(--donamic-white);border-radius:var(--donamic-radius-lg);box-shadow:var(--donamic-shadow-lg);display:flex;align-items:center;justify-content:center}.donamic_redesign1 .content-visual-inner svg{width:64px;height:64px;color:var(--donamic-primary);opacity:0.3}/* ========================================================================== STATS ========================================================================== */ .donamic_redesign1 .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--donamic-space-xl);text-align:center}.donamic_redesign1 .stat-item{padding:var(--donamic-space-xl)}.donamic_redesign1 .stat-value{font-size:3rem;font-weight:800;color:var(--donamic-white);line-height:1;margin-bottom:var(--donamic-space-sm)}.donamic_redesign1 .stat-value span,.donamic_redesign1 .stat-value .accent{color:var(--donamic-primary)}.donamic_redesign1 .stat-label{font-size:0.9375rem;color:var(--donamic-text-muted);text-transform:uppercase;letter-spacing:0.05em}/* ========================================================================== TESTIMONIALS ========================================================================== */ .donamic_redesign1 .testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--donamic-space-xl)}.donamic_redesign1 .testimonial{background:var(--donamic-white);padding:var(--donamic-space-2xl);border-radius:var(--donamic-radius-lg);border:1px solid var(--donamic-border-light)}.donamic_redesign1 .testimonial-content{font-size:1rem;color:var(--donamic-text-dark);line-height:1.7;margin-bottom:var(--donamic-space-xl)}.donamic_redesign1 .testimonial-author{display:flex;align-items:center;gap:var(--donamic-space-md)}.donamic_redesign1 .testimonial-avatar{width:48px;height:48px;background:var(--donamic-primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--donamic-primary);font-size:0.875rem}.donamic_redesign1 .testimonial-name{font-weight:600;color:var(--donamic-text-dark);font-size:0.9375rem}.donamic_redesign1 .testimonial-role{font-size:0.8125rem;color:var(--donamic-text-light)}/* ========================================================================== AGENT/SERVICE CARDS ========================================================================== */ .donamic_redesign1 .agents-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--donamic-space-xl)}.donamic_redesign1 .agent-card{background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);padding:var(--donamic-space-xl);transition:all var(--donamic-transition-base)}.donamic_redesign1 .agent-card:hover{border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-primary)}.donamic_redesign1 .agent-icon{width:56px;height:56px;background:linear-gradient(135deg,var(--donamic-primary) 0%,var(--donamic-primary-hover) 100%);border-radius:var(--donamic-radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--donamic-space-lg)}.donamic_redesign1 .agent-icon svg{width:28px;height:28px;color:var(--donamic-text-dark)}.donamic_redesign1 .agent-card h3{font-size:1.125rem;font-weight:700;color:var(--donamic-text-dark);margin-bottom:var(--donamic-space-sm)}.donamic_redesign1 .agent-card p{font-size:0.9375rem;color:var(--donamic-text-medium);line-height:1.6;margin-bottom:var(--donamic-space-lg)}.donamic_redesign1 .agent-link{display:inline-flex;align-items:center;gap:var(--donamic-space-xs);color:var(--donamic-primary);font-weight:600;font-size:0.875rem;text-decoration:none;transition:gap var(--donamic-transition-base)}.donamic_redesign1 .agent-link:hover{gap:var(--donamic-space-sm)}.donamic_redesign1 .agent-link svg{width:16px;height:16px}/* ========================================================================== PRICING ========================================================================== */ .donamic_redesign1 .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--donamic-space-xl);align-items:start}.donamic_redesign1 .pricing-card{background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);padding:var(--donamic-space-2xl);transition:all var(--donamic-transition-base)}.donamic_redesign1 .pricing-card.featured{border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-primary);position:relative}.donamic_redesign1 .pricing-card.featured::before{content:'Beliebt';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--donamic-primary);color:var(--donamic-text-dark);padding:var(--donamic-space-xs) var(--donamic-space-md);border-radius:var(--donamic-radius-sm);font-size:0.75rem;font-weight:700;text-transform:uppercase}.donamic_redesign1 .pricing-header{text-align:center;padding-bottom:var(--donamic-space-xl);border-bottom:1px solid var(--donamic-border-light);margin-bottom:var(--donamic-space-xl)}.donamic_redesign1 .pricing-name{font-size:1.25rem;font-weight:700;color:var(--donamic-text-dark);margin-bottom:var(--donamic-space-sm)}.donamic_redesign1 .pricing-price{font-size:2.5rem;font-weight:800;color:var(--donamic-text-dark)}.donamic_redesign1 .pricing-price span{font-size:1rem;font-weight:500;color:var(--donamic-text-light)}.donamic_redesign1 .pricing-desc{font-size:0.875rem;color:var(--donamic-text-medium);margin-top:var(--donamic-space-sm)}.donamic_redesign1 .pricing-features{list-style:none;margin-bottom:var(--donamic-space-xl);padding:0}.donamic_redesign1 .pricing-features li{display:flex;align-items:flex-start;gap:var(--donamic-space-sm);margin-bottom:var(--donamic-space-sm);font-size:0.9375rem;color:var(--donamic-text-medium)}.donamic_redesign1 .pricing-features svg{width:18px;height:18px;color:var(--donamic-primary);flex-shrink:0;margin-top:2px}.donamic_redesign1 .pricing-card .btn-donamic{width:100%}/* ========================================================================== FAQ ACCORDION ========================================================================== */ .donamic_redesign1 .faq-list{max-width:800px;margin:0 auto}.donamic_redesign1 .faq-item{border-bottom:1px solid var(--donamic-border-light)}.donamic_redesign1 .faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--donamic-space-lg) 0;background:none;border:none;cursor:pointer;text-align:left;font-size:1rem;font-weight:600;color:var(--donamic-text-dark);font-family:var(--donamic-font-sans);transition:color var(--donamic-transition-fast)}.donamic_redesign1 .faq-question:hover{color:var(--donamic-primary)}.donamic_redesign1 .faq-question svg,.donamic_redesign1 .faq-icon{width:20px;height:20px;color:var(--donamic-text-light);transition:transform var(--donamic-transition-base)}.donamic_redesign1 .faq-question.active svg,.donamic_redesign1 .faq-item.active .faq-icon{transform:rotate(180deg)}.donamic_redesign1 .faq-answer{padding-bottom:var(--donamic-space-lg);font-size:0.9375rem;color:var(--donamic-text-medium);line-height:1.7;display:none;max-height:0;overflow:hidden;transition:max-height var(--donamic-transition-base)}.donamic_redesign1 .faq-answer.show,.donamic_redesign1 .faq-item.active .faq-answer{display:block;max-height:500px}.donamic_redesign1 .faq-answer-inner{padding-bottom:var(--donamic-space-lg);font-size:1rem;line-height:1.7}/* ========================================================================== CTA SECTION ========================================================================== */ .donamic_redesign1 .cta{text-align:center;padding:var(--donamic-space-5xl) var(--donamic-space-xl);background:var(--donamic-black)}.donamic_redesign1 .cta-inner{max-width:700px;margin:0 auto}.donamic_redesign1 .cta h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--donamic-white);margin-bottom:var(--donamic-space-md);letter-spacing:-0.02em}.donamic_redesign1 .cta p{font-size:1.125rem;color:var(--donamic-text-muted);margin-bottom:var(--donamic-space-2xl)}.donamic_redesign1 .cta-buttons{display:flex;justify-content:center;gap:var(--donamic-space-md);flex-wrap:wrap}/* ========================================================================== FOOTER ========================================================================== */ .donamic_redesign1 .footer-donamic{background:var(--donamic-light);padding:var(--donamic-space-4xl) var(--donamic-space-xl) var(--donamic-space-xl);border-top:1px solid var(--donamic-border-light)}.donamic_redesign1 .footer-donamic-inner{max-width:1280px;margin:0 auto}.donamic_redesign1 .footer-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:var(--donamic-space-3xl);margin-bottom:var(--donamic-space-3xl)}.donamic_redesign1 .footer-brand{max-width:280px}.donamic_redesign1 .footer-brand p{color:var(--donamic-text-medium);font-size:0.875rem;margin-top:var(--donamic-space-md)}.donamic_redesign1 .footer-col h4{font-size:0.8125rem;font-weight:700;color:var(--donamic-text-dark);margin-bottom:var(--donamic-space-lg);text-transform:uppercase;letter-spacing:0.5px}.donamic_redesign1 .footer-links{list-style:none;padding:0;margin:0}.donamic_redesign1 .footer-links li{margin-bottom:var(--donamic-space-sm)}.donamic_redesign1 .footer-links a{color:var(--donamic-text-medium);text-decoration:none;font-size:0.9375rem;transition:color var(--donamic-transition-base)}.donamic_redesign1 .footer-links a:hover{color:var(--donamic-text-dark)}.donamic_redesign1 .footer-bottom{padding-top:var(--donamic-space-xl);border-top:1px solid var(--donamic-border-light);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--donamic-space-md)}.donamic_redesign1 .footer-bottom p{color:var(--donamic-text-light);font-size:0.875rem}.donamic_redesign1 .footer-legal{display:flex;gap:var(--donamic-space-lg)}.donamic_redesign1 .footer-legal a{color:var(--donamic-text-light);text-decoration:none;font-size:0.875rem}.donamic_redesign1 .footer-legal a:hover{color:var(--donamic-text-dark)}/* ========================================================================== FORM INPUTS ========================================================================== */ .donamic_redesign1 .input-donamic{width:100%;padding:1rem 1.25rem;font-family:inherit;font-size:1rem;color:var(--donamic-text-dark);background:var(--donamic-white);border:2px solid var(--donamic-border-light);border-radius:var(--donamic-radius-md);transition:all var(--donamic-transition-fast)}.donamic_redesign1 .input-donamic::placeholder{color:var(--donamic-text-light)}.donamic_redesign1 .input-donamic:focus{outline:none;border-color:var(--donamic-primary);box-shadow:0 0 0 4px var(--donamic-primary-muted)}.donamic_redesign1 .form-group-donamic{margin-bottom:var(--donamic-space-md)}.donamic_redesign1 .form-label-donamic{display:block;margin-bottom:var(--donamic-space-xs);font-weight:500;color:var(--donamic-text-dark)}.donamic_redesign1 .form-hint-donamic{font-size:0.875rem;color:var(--donamic-text-light);margin-top:var(--donamic-space-xs)}.donamic_redesign1 .form-error-donamic{font-size:0.875rem;color:#ef4444;margin-top:var(--donamic-space-xs)}.donamic_redesign1 select.input-donamic{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23525252' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}/* ========================================================================== ALERTS ========================================================================== */ .donamic_redesign1 .alert-donamic{padding:var(--donamic-space-md) var(--donamic-space-lg);border-radius:var(--donamic-radius-md);margin-bottom:var(--donamic-space-md);border:1px solid}.donamic_redesign1 .alert-donamic-success{background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.3);color:#22c55e}.donamic_redesign1 .alert-donamic-error{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3);color:#ef4444}.donamic_redesign1 .alert-donamic-warning{background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.3);color:#f59e0b}.donamic_redesign1 .alert-donamic-info{background:rgba(59,130,246,0.1);border-color:rgba(59,130,246,0.3);color:#3b82f6}/* ========================================================================== STEPS / PROCESS ========================================================================== */ .donamic_redesign1 .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--donamic-space-xl)}.donamic_redesign1 .step-item{text-align:center;padding:var(--donamic-space-lg)}.donamic_redesign1 .step-number{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:linear-gradient(135deg,var(--donamic-primary) 0%,var(--donamic-primary-dark) 100%);color:var(--donamic-text-dark);font-weight:700;font-size:1.25rem;border-radius:var(--donamic-radius-full);margin-bottom:var(--donamic-space-md);box-shadow:var(--donamic-shadow-primary)}.donamic_redesign1 .step-title{font-size:1.125rem;font-weight:600;margin-bottom:var(--donamic-space-sm)}.donamic_redesign1 .step-description{font-size:0.9375rem;line-height:1.6;color:var(--donamic-text-medium)}/* ========================================================================== CONTAINER ========================================================================== */ .donamic_redesign1 .container-donamic{max-width:1280px;margin:0 auto;padding:0 var(--donamic-space-lg)}.donamic_redesign1 .container-narrow{max-width:600px;margin:0 auto;padding:0 var(--donamic-space-lg)}/* ========================================================================== GRIDS ========================================================================== */ .donamic_redesign1 .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--donamic-space-lg)}.donamic_redesign1 .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--donamic-space-lg)}.donamic_redesign1 .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--donamic-space-lg)}.donamic_redesign1 .cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--donamic-space-xl)}/* ========================================================================== ABOUT CARD (i-doit style) ========================================================================== */ .donamic_redesign1 .about-card-box{background:linear-gradient(135deg,rgba(99,229,38,0.08) 0%,rgba(99,229,38,0.02) 100%);border-radius:var(--donamic-radius-2xl);padding:var(--donamic-space-3xl);border:1px solid rgba(99,229,38,0.2)}.donamic_redesign1 .about-card{display:grid;grid-template-columns:1fr 400px;gap:var(--donamic-space-3xl);align-items:center}.donamic_redesign1 .about-card-content h2{font-size:2rem;margin-bottom:var(--donamic-space-lg);color:var(--donamic-white)}.donamic_redesign1 .about-card-content h2 .text-highlight{color:var(--donamic-primary)}.donamic_redesign1 .about-card-content > p{color:var(--donamic-text-muted);font-size:1rem;line-height:1.7;margin-bottom:var(--donamic-space-xl)}.donamic_redesign1 .about-card-features{display:flex;flex-direction:column;gap:var(--donamic-space-lg)}.donamic_redesign1 .about-card-feature{display:flex;gap:var(--donamic-space-md);align-items:flex-start}.donamic_redesign1 .about-card-feature-icon{color:var(--donamic-primary);font-size:1.5rem;font-weight:700;line-height:1;flex-shrink:0}.donamic_redesign1 .about-card-feature-content h3{color:var(--donamic-white);font-size:1rem;font-weight:600;margin-bottom:var(--donamic-space-xs)}.donamic_redesign1 .about-card-feature-content p{color:var(--donamic-text-muted);font-size:0.875rem;line-height:1.5}.donamic_redesign1 .about-card-image{position:relative;margin-left:-80px}.donamic_redesign1 .about-card-image img{width:100%;height:auto;border-radius:var(--donamic-radius-xl)}@media (max-width:1024px){.donamic_redesign1 .about-card{grid-template-columns:1fr;gap:var(--donamic-space-xl)}.donamic_redesign1 .about-card-image{margin-left:0;max-width:400px;margin:0 auto}}/* ========================================================================== TRAINING CONTENT LIST ========================================================================== */ /* Light background version (section-accent) */ .donamic_redesign1 .section-accent .content-list{display:flex;flex-direction:column;gap:var(--donamic-space-xl);max-width:900px;margin:0 auto}.donamic_redesign1 .section-accent .content-item{display:grid;grid-template-columns:120px 60px 1fr;gap:var(--donamic-space-lg);align-items:center;background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);padding:var(--donamic-space-lg);transition:all var(--donamic-transition-base)}.donamic_redesign1 .section-accent .content-item:hover{border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-primary)}.donamic_redesign1 .section-accent .content-image{width:120px;height:80px;border-radius:var(--donamic-radius-md);overflow:hidden;flex-shrink:0}.donamic_redesign1 .section-accent .content-image img{width:100%;height:100%;object-fit:cover}.donamic_redesign1 .section-accent .content-number{font-size:2rem;font-weight:800;color:var(--donamic-primary);opacity:0.8}.donamic_redesign1 .section-accent .content-text h3{color:var(--donamic-text-dark);font-size:1.125rem;font-weight:600;margin-bottom:var(--donamic-space-xs)}.donamic_redesign1 .section-accent .content-text p{color:var(--donamic-text-medium);font-size:0.9375rem}/* Dark background version */ .donamic_redesign1 .section-dark .content-list{display:flex;flex-direction:column;gap:var(--donamic-space-xl);max-width:900px;margin:0 auto}.donamic_redesign1 .section-dark .content-item{display:grid;grid-template-columns:120px 60px 1fr;gap:var(--donamic-space-lg);align-items:center;background:rgba(255,255,255,0.03);border:1px solid var(--donamic-border-dark);border-radius:var(--donamic-radius-lg);padding:var(--donamic-space-lg);transition:all var(--donamic-transition-base)}.donamic_redesign1 .section-dark .content-item:hover{background:rgba(255,255,255,0.05);border-color:var(--donamic-primary)}.donamic_redesign1 .section-dark .content-image{width:120px;height:80px;border-radius:var(--donamic-radius-md);overflow:hidden;flex-shrink:0}.donamic_redesign1 .section-dark .content-image img{width:100%;height:100%;object-fit:cover}.donamic_redesign1 .section-dark .content-number{font-size:2rem;font-weight:800;color:var(--donamic-primary);opacity:0.6}.donamic_redesign1 .section-dark .content-text h3{color:var(--donamic-white);font-size:1.125rem;font-weight:600;margin-bottom:var(--donamic-space-xs)}.donamic_redesign1 .section-dark .content-text p{color:var(--donamic-text-muted);font-size:0.9375rem}@media (max-width:768px){.donamic_redesign1 .section-dark .content-item{grid-template-columns:1fr;text-align:center}.donamic_redesign1 .section-dark .content-image{width:100%;max-width:200px;margin:0 auto}}/* ========================================================================== HERO WITH BACKGROUND IMAGE ========================================================================== */ .donamic_redesign1 .hero .container-donamic{width:100%;display:flex;justify-content:flex-start}.donamic_redesign1 .hero-content-box{text-align:left}.donamic_redesign1 .hero-subtitle{color:var(--donamic-primary);font-size:0.875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:var(--donamic-space-md)}.donamic_redesign1 .hero-title{color:var(--donamic-white);margin-bottom:var(--donamic-space-md)}.donamic_redesign1 .hero-title span{color:var(--donamic-primary)}.donamic_redesign1 .hero-description{color:var(--donamic-text-muted);font-size:1rem;line-height:1.6;margin-bottom:var(--donamic-space-xl)}.donamic_redesign1 .hero-background img{object-position:70% center}/* ========================================================================== SECTION TITLES ========================================================================== */ .donamic_redesign1 .section-title{text-align:center;margin-bottom:var(--donamic-space-3xl)}.donamic_redesign1 .section-title h2{margin-bottom:var(--donamic-space-sm)}.donamic_redesign1 .section-title p{font-size:1.125rem;max-width:600px;margin:0 auto}.donamic_redesign1 .section-dark .section-title h2{color:var(--donamic-white)}.donamic_redesign1 .section-dark .section-title p{color:var(--donamic-text-muted)}/* Light backgrounds (section,section-light,section-accent) */ .donamic_redesign1 .section-accent .section-title h2,.donamic_redesign1 .section-light .section-title h2{color:var(--donamic-text-dark)}.donamic_redesign1 .section-accent .section-title p,.donamic_redesign1 .section-light .section-title p{color:var(--donamic-text-medium)}/* ========================================================================== CARDS ON DARK BACKGROUNDS ========================================================================== */ .donamic_redesign1 .section-dark .card-donamic{background:rgba(255,255,255,0.03);border-color:var(--donamic-border-dark)}.donamic_redesign1 .section-dark .card-donamic:hover{background:rgba(255,255,255,0.05);border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-glow)}.donamic_redesign1 .section-dark .card-donamic .card-badge{background:var(--donamic-primary);color:var(--donamic-text-dark)}.donamic_redesign1 .section-dark .card-donamic .card-title{color:var(--donamic-white)}.donamic_redesign1 .section-dark .card-donamic .card-description{color:var(--donamic-text-muted)}.donamic_redesign1 .section-dark .card-donamic .card-features li{color:var(--donamic-text-muted)}.donamic_redesign1 .section-dark .card-donamic.card-highlight{border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-glow);background:rgba(99,229,38,0.05)}/* ========================================================================== FAQ ON DARK BACKGROUNDS ========================================================================== */ .donamic_redesign1 .section-dark .faq-item{border-color:var(--donamic-border-dark)}.donamic_redesign1 .section-dark .faq-question{color:var(--donamic-white)}.donamic_redesign1 .section-dark .faq-question:hover{color:var(--donamic-primary)}.donamic_redesign1 .section-dark .faq-icon{color:var(--donamic-text-muted)}.donamic_redesign1 .section-dark .faq-answer,.donamic_redesign1 .section-dark .faq-answer-inner{color:var(--donamic-text-muted)}/* FAQ on light backgrounds (section-accent) */ .donamic_redesign1 .section-accent .faq-item{border-color:var(--donamic-border-light)}.donamic_redesign1 .section-accent .faq-question{color:var(--donamic-text-dark)}.donamic_redesign1 .section-accent .faq-question:hover{color:var(--donamic-primary)}.donamic_redesign1 .section-accent .faq-icon{color:var(--donamic-text-light)}.donamic_redesign1 .section-accent .faq-answer,.donamic_redesign1 .section-accent .faq-answer-inner{color:var(--donamic-text-medium)}/* ========================================================================== ABOUT SECTION ========================================================================== */ .donamic_redesign1 .about-section{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--donamic-space-3xl);align-items:center}.donamic_redesign1 .about-image{position:relative;order:2}.donamic_redesign1 .about-image img{width:100%;max-width:400px;border-radius:var(--donamic-radius-xl)}.donamic_redesign1 .about-image::before{content:"";position:absolute;top:-20px;left:-20px;right:40px;bottom:40px;border:3px solid var(--donamic-primary);border-radius:var(--donamic-radius-xl);z-index:-1}.donamic_redesign1 .about-content{order:1}.donamic_redesign1 .about-content h2{margin-bottom:var(--donamic-space-lg)}.donamic_redesign1 .about-content p{margin-bottom:var(--donamic-space-md)}/* ========================================================================== COOKIE BANNER ========================================================================== */ .donamic_redesign1 .cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--donamic-white);padding:var(--donamic-space-lg);border-top:1px solid var(--donamic-border-light);z-index:9999;transform:translateY(100%);transition:transform var(--donamic-transition-base);box-shadow:0 -4px 20px rgba(0,0,0,0.1)}.donamic_redesign1 .cookie-banner.visible{transform:translateY(0)}.donamic_redesign1 .cookie-content{display:flex;align-items:center;justify-content:space-between;gap:var(--donamic-space-xl);max-width:1280px;margin:0 auto}.donamic_redesign1 .cookie-text{flex:1}.donamic_redesign1 .cookie-text p{margin:0;font-size:0.9375rem}.donamic_redesign1 .cookie-buttons{display:flex;gap:var(--donamic-space-md);flex-shrink:0}/* ========================================================================== ANIMATIONS ========================================================================== */ @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.donamic_redesign1 .animate-fade-in-up{animation:fadeInUp 0.6s ease forwards}.donamic_redesign1 .animate-float{animation:float 4s ease-in-out infinite}.donamic_redesign1 .animate-delay-1{animation-delay:100ms}.donamic_redesign1 .animate-delay-2{animation-delay:200ms}.donamic_redesign1 .animate-delay-3{animation-delay:300ms}.donamic_redesign1 .animate-delay-4{animation-delay:400ms}/* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:1024px){.donamic_redesign1 .grid-4{grid-template-columns:repeat(2,1fr)}.donamic_redesign1 .grid-3{grid-template-columns:repeat(2,1fr)}.donamic_redesign1 .stats-grid{grid-template-columns:repeat(2,1fr)}.donamic_redesign1 .footer-grid{grid-template-columns:repeat(2,1fr)}.donamic_redesign1 .features-grid{grid-template-columns:repeat(2,1fr)}.donamic_redesign1 .pricing-grid{grid-template-columns:repeat(2,1fr)}.donamic_redesign1 .testimonials-grid{grid-template-columns:repeat(2,1fr)}.donamic_redesign1 .agents-grid{grid-template-columns:repeat(2,1fr)}.donamic_redesign1 .about-section{grid-template-columns:1fr}.donamic_redesign1 .about-image{order:-1;max-width:400px;margin:0 auto}.donamic_redesign1 .about-image::before{display:none}}@media (max-width:900px){.donamic_redesign1 .content-row,.donamic_redesign1 .content-row.reverse{grid-template-columns:1fr;direction:ltr}.donamic_redesign1 .hero-split{grid-template-columns:1fr;text-align:center;min-height:auto}.donamic_redesign1 .hero-split-content{max-width:100%;order:1}}@media (max-width:768px){.donamic_redesign1 .grid-4,.donamic_redesign1 .grid-3,.donamic_redesign1 .grid-2{grid-template-columns:1fr}.donamic_redesign1 .stats-grid{grid-template-columns:repeat(2,1fr)}.donamic_redesign1 .footer-grid{grid-template-columns:1fr}.donamic_redesign1 .features-grid{grid-template-columns:1fr}.donamic_redesign1 .agents-grid{grid-template-columns:1fr}.donamic_redesign1 .navbar-donamic-nav{display:none}.donamic_redesign1 .navbar-donamic-toggle{display:block}.donamic_redesign1 .hero{min-height:auto;padding-top:calc(var(--donamic-space-3xl) + 72px)}.donamic_redesign1 .section{padding:var(--donamic-space-2xl) var(--donamic-space-md)}.donamic_redesign1 .cookie-content{flex-direction:column;text-align:center}.donamic_redesign1 .cookie-buttons{width:100%;justify-content:center}.donamic_redesign1 .footer-bottom{flex-direction:column;text-align:center}.donamic_redesign1 .cards-grid{grid-template-columns:1fr}.donamic_redesign1 .steps{grid-template-columns:1fr}.donamic_redesign1 .pricing-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}.donamic_redesign1 .testimonials-grid{grid-template-columns:1fr}}@media (max-width:600px){.donamic_redesign1 .agents-grid{grid-template-columns:1fr}}/* Mobile Navigation */ @media (max-width:768px){.donamic_redesign1 .navbar-donamic-nav{position:fixed;top:72px;left:0;right:0;background:var(--donamic-white);flex-direction:column;padding:var(--donamic-space-lg);gap:var(--donamic-space-md);border-bottom:1px solid var(--donamic-border-light);transform:translateY(-100%);opacity:0;visibility:hidden;transition:all var(--donamic-transition-base);box-shadow:var(--donamic-shadow-lg)}.donamic_redesign1 .navbar-donamic-nav.active{transform:translateY(0);opacity:1;visibility:visible;display:flex}.donamic_redesign1 .navbar-donamic-dropdown{width:100%;text-align:center}.donamic_redesign1 .navbar-donamic-dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:none;box-shadow:none;padding:var(--donamic-space-sm) 0;min-width:auto}.donamic_redesign1 .navbar-donamic-dropdown-menu a{padding:8px 16px;font-size:14px;color:var(--donamic-text-light)}}/* ========================================================================== HERO-ABOUT (Über mich Seite) ========================================================================== */ .donamic_redesign1 .hero-about{background:var(--donamic-black);padding:var(--donamic-space-3xl) var(--donamic-space-lg);padding-top:calc(var(--donamic-space-3xl) + 72px);min-height:auto}.donamic_redesign1 .hero-about-grid{display:grid;grid-template-columns:350px 1fr;gap:var(--donamic-space-3xl);align-items:start}.donamic_redesign1 .hero-about-image{position:relative}.donamic_redesign1 .hero-about-image img{width:100%;max-width:350px;height:auto;border-radius:var(--donamic-radius-xl);object-fit:cover}.donamic_redesign1 .hero-about-content{color:var(--donamic-white)}.donamic_redesign1 .hero-about-content h1{font-size:clamp(2rem,4vw,2.75rem);color:var(--donamic-white);margin-bottom:var(--donamic-space-lg);line-height:1.2}.donamic_redesign1 .hero-about-content h1 span{color:var(--donamic-primary)}.donamic_redesign1 .hero-about-content h2{font-size:1.25rem;color:var(--donamic-primary);margin-top:var(--donamic-space-xl);margin-bottom:var(--donamic-space-sm)}.donamic_redesign1 .hero-about-content p{color:var(--donamic-text-muted);font-size:1rem;line-height:1.7;margin-bottom:var(--donamic-space-md)}@media (max-width:900px){.donamic_redesign1 .hero-about-grid{grid-template-columns:1fr;text-align:center}.donamic_redesign1 .hero-about-image{order:-1;max-width:280px;margin:0 auto}}/* ========================================================================== SECTION OVERLINE ========================================================================== */ .donamic_redesign1 .section-overline{display:inline-block;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--donamic-primary);margin-bottom:var(--donamic-space-md)}/* ========================================================================== TIMELINE / YEARS (Über mich Seite) ========================================================================== */ .donamic_redesign1 .timeline-years{position:relative;max-width:900px;margin:0 auto}.donamic_redesign1 .timeline-years::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--donamic-border-light);transform:translateX(-50%)}.donamic_redesign1 .timeline-year-item{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--donamic-space-xl);margin-bottom:var(--donamic-space-3xl);position:relative}.donamic_redesign1 .timeline-year-item:last-child{margin-bottom:0}.donamic_redesign1 .timeline-year-content{padding:var(--donamic-space-lg)}.donamic_redesign1 .timeline-year-content h3{font-size:1.25rem;color:var(--donamic-text-dark);margin-bottom:var(--donamic-space-sm)}.donamic_redesign1 .timeline-year-content p{color:var(--donamic-text-medium);font-size:0.9375rem;line-height:1.6}.donamic_redesign1 .timeline-year-marker{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--donamic-primary-light);border:2px solid var(--donamic-primary);border-radius:var(--donamic-radius-lg);padding:var(--donamic-space-md) var(--donamic-space-lg);min-width:100px;z-index:1}.donamic_redesign1 .timeline-year-marker .year{font-size:1.75rem;font-weight:800;color:var(--donamic-primary)}.donamic_redesign1 .timeline-year-marker .label{font-size:0.75rem;color:var(--donamic-text-medium);text-transform:uppercase;letter-spacing:0.05em}.donamic_redesign1 .timeline-year-item:nth-child(even) .timeline-year-content:first-child{order:2;text-align:left}.donamic_redesign1 .timeline-year-item:nth-child(even) .timeline-year-marker{order:1}.donamic_redesign1 .timeline-year-item:nth-child(odd) .timeline-year-content:first-child{text-align:right}@media (max-width:768px){.donamic_redesign1 .timeline-years::before{left:20px}.donamic_redesign1 .timeline-year-item{grid-template-columns:auto 1fr;gap:var(--donamic-space-md)}.donamic_redesign1 .timeline-year-content{text-align:left !important;order:2 !important}.donamic_redesign1 .timeline-year-marker{order:1 !important;min-width:auto;padding:var(--donamic-space-sm)}.donamic_redesign1 .timeline-year-marker .year{font-size:1.25rem}}/* ========================================================================== ASYMMETRIC GRIDS ========================================================================== */ .donamic_redesign1 .grid-asymmetric-60-40{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--donamic-space-xl);align-items:center}.donamic_redesign1 .grid-asymmetric-40-60{display:grid;grid-template-columns:1fr 1.5fr;gap:var(--donamic-space-xl);align-items:center}.donamic_redesign1 .grid-asymmetric-70-30{display:grid;grid-template-columns:2fr 1fr;gap:var(--donamic-space-xl);align-items:center}.donamic_redesign1 .grid-asymmetric-30-70{display:grid;grid-template-columns:1fr 2fr;gap:var(--donamic-space-xl);align-items:center}@media (max-width:768px){.donamic_redesign1 .grid-asymmetric-60-40,.donamic_redesign1 .grid-asymmetric-40-60,.donamic_redesign1 .grid-asymmetric-70-30,.donamic_redesign1 .grid-asymmetric-30-70{grid-template-columns:1fr}}/* ========================================================================== FEATURE CARDS (Mastery Seite) ========================================================================== */ .donamic_redesign1 .feature-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--donamic-space-lg)}.donamic_redesign1 .feature-card{background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);padding:var(--donamic-space-xl);text-align:center;transition:all var(--donamic-transition-base)}.donamic_redesign1 .feature-card:hover{border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-primary);transform:translateY(-4px)}.donamic_redesign1 .feature-card-icon{width:64px;height:64px;background:var(--donamic-primary-light);border-radius:var(--donamic-radius-lg);display:flex;align-items:center;justify-content:center;margin:0 auto var(--donamic-space-lg)}.donamic_redesign1 .feature-card-icon svg{width:32px;height:32px;color:var(--donamic-primary)}.donamic_redesign1 .feature-card h3{font-size:1.125rem;font-weight:700;color:var(--donamic-text-dark);margin-bottom:var(--donamic-space-sm)}.donamic_redesign1 .feature-card p{font-size:0.9375rem;color:var(--donamic-text-medium);line-height:1.6}@media (max-width:1024px){.donamic_redesign1 .feature-cards{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.donamic_redesign1 .feature-cards{grid-template-columns:1fr}}/* ========================================================================== TESTIMONIAL CARDS (Mastery Seite) ========================================================================== */ .donamic_redesign1 .testimonial-card{background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);padding:var(--donamic-space-xl);transition:all var(--donamic-transition-base)}.donamic_redesign1 .testimonial-card:hover{border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-primary)}.donamic_redesign1 .testimonial-quote{font-size:1rem;color:var(--donamic-text-dark);line-height:1.7;margin-bottom:var(--donamic-space-xl);font-style:italic}.donamic_redesign1 .testimonial-quote::before{content:'"';font-size:2rem;color:var(--donamic-primary);font-weight:700;line-height:0;display:inline;vertical-align:-0.2em;margin-right:4px}.donamic_redesign1 .testimonial-author{display:flex;align-items:center;gap:var(--donamic-space-md)}.donamic_redesign1 .testimonial-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--donamic-primary-light)}.donamic_redesign1 .testimonial-info h4{font-size:0.9375rem;font-weight:600;color:var(--donamic-text-dark);margin-bottom:2px}.donamic_redesign1 .testimonial-info span{font-size:0.8125rem;color:var(--donamic-text-light)}/* ========================================================================== CHECKLISTS ========================================================================== */ .donamic_redesign1 .checklist{list-style:none;padding:0;margin:0}.donamic_redesign1 .checklist li{display:flex;align-items:flex-start;gap:var(--donamic-space-sm);margin-bottom:var(--donamic-space-sm);font-size:0.9375rem;color:var(--donamic-text-medium)}.donamic_redesign1 .checklist li::before{content:"✓";color:var(--donamic-primary);font-weight:700;flex-shrink:0}/* Checklist on dark backgrounds */ .donamic_redesign1 .section-dark .checklist li{color:var(--donamic-text-muted)}/* ========================================================================== BADGE DONAMIC ========================================================================== */ .donamic_redesign1 .badge-donamic{display:inline-flex;align-items:center;gap:0.5rem;padding:0.375rem 0.75rem;font-size:0.75rem;font-weight:600;color:var(--donamic-primary);background:rgba(99,229,38,0.15);border-radius:var(--donamic-radius-sm);text-transform:uppercase;letter-spacing:0.3px}/* ========================================================================== PROBLEM/SOLUTION GRID (Strategie Seite) ========================================================================== */ .donamic_redesign1 .problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--donamic-space-3xl);align-items:center}.donamic_redesign1 .problem-image{border-radius:var(--donamic-radius-xl);overflow:hidden}.donamic_redesign1 .problem-image img{width:100%;height:auto}.donamic_redesign1 .problem-list{list-style:none;padding:0;margin:0}.donamic_redesign1 .problem-item{display:flex;align-items:flex-start;gap:var(--donamic-space-md);margin-bottom:var(--donamic-space-md);font-size:1rem}.donamic_redesign1 .problem-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:0.875rem;font-weight:700}.donamic_redesign1 .problem-item-bad .problem-icon{background:rgba(239,68,68,0.1);color:#ef4444}.donamic_redesign1 .problem-item-good .problem-icon{background:var(--donamic-primary-light);color:var(--donamic-primary)}@media (max-width:768px){.donamic_redesign1 .problem-grid{grid-template-columns:1fr}}/* ========================================================================== STRATEGY INCLUDES (Strategie Seite) ========================================================================== */ .donamic_redesign1 .strategy-includes{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--donamic-space-xl)}.donamic_redesign1 .strategy-include-item{display:flex;gap:var(--donamic-space-lg);align-items:flex-start;padding:var(--donamic-space-lg);background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);transition:all var(--donamic-transition-base)}.donamic_redesign1 .strategy-include-item:hover{border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-primary)}.donamic_redesign1 .strategy-include-icon{width:56px;height:56px;background:var(--donamic-primary-light);border-radius:var(--donamic-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}.donamic_redesign1 .strategy-include-icon svg{width:28px;height:28px}.donamic_redesign1 .strategy-include-content h3{font-size:1.125rem;font-weight:700;color:var(--donamic-text-dark);margin-bottom:var(--donamic-space-xs)}.donamic_redesign1 .strategy-include-content p{font-size:0.9375rem;color:var(--donamic-text-medium)}@media (max-width:768px){.donamic_redesign1 .strategy-includes{grid-template-columns:1fr}}/* ========================================================================== RESULTS GRID (Strategie Seite) ========================================================================== */ .donamic_redesign1 .results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--donamic-space-xl)}.donamic_redesign1 .result-card{text-align:center;padding:var(--donamic-space-xl);background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);transition:all var(--donamic-transition-base)}.donamic_redesign1 .result-card:hover{border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-primary)}.donamic_redesign1 .result-icon{margin-bottom:var(--donamic-space-lg)}.donamic_redesign1 .result-card h3{font-size:1.125rem;font-weight:700;color:var(--donamic-text-dark);margin-bottom:var(--donamic-space-sm)}.donamic_redesign1 .result-card p{font-size:0.9375rem;color:var(--donamic-text-medium)}@media (max-width:1024px){.donamic_redesign1 .results-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.donamic_redesign1 .results-grid{grid-template-columns:1fr}}/* ========================================================================== TIMELINE / PROCESS (Strategie Seite) ========================================================================== */ .donamic_redesign1 .timeline{max-width:700px;margin:0 auto;position:relative}.donamic_redesign1 .timeline::before{content:'';position:absolute;left:24px;top:0;bottom:0;width:2px;background:var(--donamic-border-light)}.donamic_redesign1 .timeline-item{display:flex;gap:var(--donamic-space-xl);margin-bottom:var(--donamic-space-xl);position:relative}.donamic_redesign1 .timeline-item:last-child{margin-bottom:0}.donamic_redesign1 .timeline-marker{width:48px;height:48px;background:linear-gradient(135deg,var(--donamic-primary) 0%,var(--donamic-primary-dark) 100%);color:var(--donamic-text-dark);font-weight:700;font-size:1.125rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;box-shadow:var(--donamic-shadow-primary)}.donamic_redesign1 .timeline-content{flex:1;padding-top:var(--donamic-space-sm)}.donamic_redesign1 .timeline-content h3{font-size:1.125rem;font-weight:700;color:var(--donamic-text-dark);margin-bottom:var(--donamic-space-xs)}.donamic_redesign1 .timeline-content p{font-size:0.9375rem;color:var(--donamic-text-medium)}/* ========================================================================== SECTION GRAY (Strategie Seite) ========================================================================== */ .donamic_redesign1 .section-gray{background:var(--donamic-light-gray)}/* ========================================================================== LOGO ROW (Referenzen) ========================================================================== */ .donamic_redesign1 .logo-row{display:flex;justify-content:center;align-items:center;gap:var(--donamic-space-3xl);flex-wrap:wrap}.donamic_redesign1 .logo-row .logo-item{height:40px;width:auto;opacity:0.6;filter:grayscale(100%);transition:all var(--donamic-transition-base)}.donamic_redesign1 .logo-row .logo-item:hover{opacity:1;filter:grayscale(0%)}/* ========================================================================== CTA SECTION / CTA BOX (Strategie Seite) ========================================================================== */ .donamic_redesign1 .section-cta{background:linear-gradient(135deg,var(--donamic-black) 0%,#1a1a1a 100%);padding:var(--donamic-space-5xl) var(--donamic-space-xl);color:var(--donamic-text-muted)}.donamic_redesign1 .section-cta h1,.donamic_redesign1 .section-cta h2,.donamic_redesign1 .section-cta h3{color:var(--donamic-white)}.donamic_redesign1 .section-cta p,.donamic_redesign1 .section-cta span,.donamic_redesign1 .section-cta li{color:var(--donamic-text-muted)}.donamic_redesign1 .cta-box{background:rgba(255,255,255,0.05);border:1px solid var(--donamic-border-dark);border-radius:var(--donamic-radius-2xl);padding:var(--donamic-space-3xl);text-align:center;max-width:700px;margin:0 auto}.donamic_redesign1 .cta-box h2{color:var(--donamic-white);margin-bottom:var(--donamic-space-md)}.donamic_redesign1 .cta-box p{color:var(--donamic-text-muted);margin-bottom:var(--donamic-space-xl)}.donamic_redesign1 .cta-form .input-donamic{background:rgba(255,255,255,0.1);border-color:var(--donamic-border-dark);color:var(--donamic-white)}.donamic_redesign1 .cta-form .input-donamic::placeholder{color:var(--donamic-text-muted)}.donamic_redesign1 .cta-form .input-donamic:focus{border-color:var(--donamic-primary);background:rgba(255,255,255,0.15)}/* -------------------------------------------------------------------------- CTA BOX LIGHT - For light backgrounds -------------------------------------------------------------------------- */ .donamic_redesign1 .cta-box-light{background:linear-gradient(180deg,var(--donamic-white) 0%,var(--donamic-light-gray) 100%);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-2xl);padding:var(--donamic-space-3xl);text-align:center;max-width:540px;margin:0 auto;box-shadow:0 4px 6px -1px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.8);position:relative}/* Accent top border */ .donamic_redesign1 .cta-box-light::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:4px;background:var(--donamic-primary);border-radius:0 0 4px 4px}.donamic_redesign1 .cta-box-light .badge{margin-bottom:var(--donamic-space-md)}.donamic_redesign1 .cta-box-light h2{color:var(--donamic-text-dark);margin-bottom:var(--donamic-space-sm);font-size:1.75rem}.donamic_redesign1 .cta-box-light p{color:var(--donamic-text-medium);margin-bottom:var(--donamic-space-lg)}.donamic_redesign1 .cta-box-light .form-group-donamic{margin-bottom:var(--donamic-space-md);text-align:left}.donamic_redesign1 .cta-box-light .form-label-donamic{color:var(--donamic-text-dark);font-weight:500}.donamic_redesign1 .cta-box-light .input-donamic{background:var(--donamic-white);border-color:var(--donamic-border-light)}.donamic_redesign1 .cta-box-light .input-donamic:focus{border-color:var(--donamic-primary);box-shadow:0 0 0 3px var(--donamic-primary-muted)}.donamic_redesign1 .cta-box-light .text-muted{color:var(--donamic-text-light)}/* ========================================================================== ABOUT STATS (Strategie Seite) ========================================================================== */ .donamic_redesign1 .about-stats{list-style:none;padding:0;margin:var(--donamic-space-xl) 0}.donamic_redesign1 .about-stats li{margin-bottom:var(--donamic-space-md)}.donamic_redesign1 .about-stats li strong{display:block;color:var(--donamic-primary);font-size:1.125rem;margin-bottom:4px}.donamic_redesign1 .about-stats li span{color:var(--donamic-text-muted);font-size:0.875rem}/* ========================================================================== MAP SECTION (Über mich Seite) ========================================================================== */ .donamic_redesign1 .section-map{position:relative;padding:0}.donamic_redesign1 .map-container{position:relative;width:100%;height:400px}.donamic_redesign1 .map-container iframe{width:100%;height:100%;border:0;filter:grayscale(100%) contrast(1.1)}.donamic_redesign1 .map-overlay{position:absolute;bottom:var(--donamic-space-xl);left:var(--donamic-space-xl);background:var(--donamic-white);padding:var(--donamic-space-lg);border-radius:var(--donamic-radius-lg);box-shadow:var(--donamic-shadow-lg);max-width:350px}.donamic_redesign1 .map-info{display:flex;align-items:center;gap:var(--donamic-space-md)}.donamic_redesign1 .map-pin{flex-shrink:0}.donamic_redesign1 .map-info p{margin:0;font-size:0.9375rem}.donamic_redesign1 .map-info strong{color:var(--donamic-text-dark)}/* ========================================================================== HERO ROADMAP (Strategie Seite) ========================================================================== */ .donamic_redesign1 .hero-roadmap{background:var(--donamic-black);padding:var(--donamic-space-3xl) var(--donamic-space-lg);padding-top:calc(var(--donamic-space-3xl) + 72px);min-height:80vh;display:flex;align-items:center}.donamic_redesign1 .hero-roadmap .container-donamic{display:grid;grid-template-columns:1fr 1fr;gap:var(--donamic-space-3xl);align-items:center}.donamic_redesign1 .hero-roadmap-content{max-width:550px}.donamic_redesign1 .hero-roadmap-visual{position:relative;padding:var(--donamic-space-xl)}.donamic_redesign1 .roadmap-svg{width:100%;height:auto;max-width:400px}.donamic_redesign1 .roadmap-labels{position:absolute;top:0;left:0;right:0;bottom:0}.donamic_redesign1 .roadmap-label{position:absolute;background:rgba(99,229,38,0.15);color:var(--donamic-primary);padding:var(--donamic-space-xs) var(--donamic-space-sm);border-radius:var(--donamic-radius-sm);font-size:0.75rem;font-weight:600;text-transform:uppercase}@media (max-width:900px){.donamic_redesign1 .hero-roadmap .container-donamic{grid-template-columns:1fr;text-align:center}.donamic_redesign1 .hero-roadmap-content{max-width:100%}.donamic_redesign1 .hero-roadmap-visual{display:none}}/* ========================================================================== SCROLL REVEAL ANIMATIONS ========================================================================== */ .donamic_redesign1 .reveal,.donamic_redesign1 .reveal-left,.donamic_redesign1 .reveal-right,.donamic_redesign1 .reveal-scale,.donamic_redesign1 .reveal-blur{opacity:0;transition:opacity 0.6s ease,transform 0.6s ease,filter 0.6s ease}.donamic_redesign1 .reveal{transform:translateY(30px)}.donamic_redesign1 .reveal-left{transform:translateX(-30px)}.donamic_redesign1 .reveal-right{transform:translateX(30px)}.donamic_redesign1 .reveal-scale{transform:scale(0.95)}.donamic_redesign1 .reveal-blur{filter:blur(10px);transform:translateY(20px)}/* Visible state */ .donamic_redesign1 .reveal.visible,.donamic_redesign1 .reveal-left.visible,.donamic_redesign1 .reveal-right.visible,.donamic_redesign1 .reveal-scale.visible,.donamic_redesign1 .reveal-blur.visible{opacity:1;transform:translateY(0) translateX(0) scale(1);filter:blur(0)}/* Stagger children */ .donamic_redesign1 .reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity 0.5s ease,transform 0.5s ease}.donamic_redesign1 .reveal-stagger.visible > *:nth-child(1){transition-delay:0ms;opacity:1;transform:translateY(0)}.donamic_redesign1 .reveal-stagger.visible > *:nth-child(2){transition-delay:100ms;opacity:1;transform:translateY(0)}.donamic_redesign1 .reveal-stagger.visible > *:nth-child(3){transition-delay:200ms;opacity:1;transform:translateY(0)}.donamic_redesign1 .reveal-stagger.visible > *:nth-child(4){transition-delay:300ms;opacity:1;transform:translateY(0)}.donamic_redesign1 .reveal-stagger.visible > *:nth-child(5){transition-delay:400ms;opacity:1;transform:translateY(0)}.donamic_redesign1 .reveal-stagger.visible > *:nth-child(6){transition-delay:500ms;opacity:1;transform:translateY(0)}.donamic_redesign1 .reveal-stagger.visible > *:nth-child(7){transition-delay:600ms;opacity:1;transform:translateY(0)}.donamic_redesign1 .reveal-stagger.visible > *:nth-child(8){transition-delay:700ms;opacity:1;transform:translateY(0)}/* Reveal delay modifiers */ .donamic_redesign1 .reveal-delay-100{transition-delay:100ms !important}.donamic_redesign1 .reveal-delay-200{transition-delay:200ms !important}.donamic_redesign1 .reveal-delay-300{transition-delay:300ms !important}.donamic_redesign1 .reveal-delay-400{transition-delay:400ms !important}.donamic_redesign1 .reveal-delay-500{transition-delay:500ms !important}/* Speed modifiers */ .donamic_redesign1 .reveal-fast{transition-duration:0.4s !important}.donamic_redesign1 .reveal-slow{transition-duration:0.8s !important}/* ========================================================================== ADDITIONAL UTILITIES ========================================================================== */ .donamic_redesign1 .text-center{text-align:center}.donamic_redesign1 .text-left{text-align:left}.donamic_redesign1 .text-right{text-align:right}.donamic_redesign1 .mb-0{margin-bottom:0 !important}.donamic_redesign1 .mb-sm{margin-bottom:var(--donamic-space-sm) !important}.donamic_redesign1 .mb-md{margin-bottom:var(--donamic-space-md) !important}.donamic_redesign1 .mb-lg{margin-bottom:var(--donamic-space-lg) !important}.donamic_redesign1 .mb-xl{margin-bottom:var(--donamic-space-xl) !important}.donamic_redesign1 .mt-0{margin-top:0 !important}.donamic_redesign1 .mt-sm{margin-top:var(--donamic-space-sm) !important}.donamic_redesign1 .mt-md{margin-top:var(--donamic-space-md) !important}.donamic_redesign1 .mt-lg{margin-top:var(--donamic-space-lg) !important}.donamic_redesign1 .mt-xl{margin-top:var(--donamic-space-xl) !important}/* ========================================================================== ACCOUNT BAR (Member Area) ========================================================================== */ .donamic_redesign1 .account-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--donamic-space-md);background:var(--donamic-bg-light);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);padding:var(--donamic-space-md) var(--donamic-space-lg)}.donamic_redesign1 .account-info{display:flex;align-items:center;flex-wrap:wrap;gap:var(--donamic-space-md)}.donamic_redesign1 .account-bar h2{font-size:var(--donamic-font-lg);font-weight:var(--donamic-font-semibold);margin:0}/* Role Badges */ .donamic_redesign1 .badge-role{display:inline-block;padding:4px 12px;font-size:0.75rem;font-weight:600;border-radius:var(--donamic-radius-full);text-transform:uppercase;letter-spacing:0.05em}.donamic_redesign1 .badge-free{background:var(--donamic-primary-light);color:var(--donamic-primary-dark)}.donamic_redesign1 .badge-mastery{background:rgba(255,193,7,0.15);color:#b38600}.donamic_redesign1 .badge-strategy{background:rgba(138,43,226,0.15);color:#6b21a8}.donamic_redesign1 .badge-admin{background:rgba(239,68,68,0.15);color:#b91c1c}/* Course Card Layout (Member Area) */ .donamic_redesign1 .course-card-grid{display:grid;gap:var(--donamic-space-lg);grid-template-columns:1fr}@media (min-width:768px){.donamic_redesign1 .course-card-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.donamic_redesign1 .course-card-grid{grid-template-columns:repeat(3,1fr)}}.donamic_redesign1 .course-card{background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);padding:var(--donamic-space-lg);transition:all var(--donamic-transition-base)}.donamic_redesign1 .course-card:hover{box-shadow:var(--donamic-shadow-lg);transform:translateY(-2px)}.donamic_redesign1 .course-card-locked{opacity:0.7;border-style:dashed}.donamic_redesign1 .course-card-locked:hover{transform:none;box-shadow:none}/* Upsell Card */ .donamic_redesign1 .upsell-card{background:linear-gradient(135deg,var(--donamic-primary-light) 0%,rgba(99,229,38,0.05) 100%);border:2px dashed var(--donamic-primary);border-radius:var(--donamic-radius-lg);padding:var(--donamic-space-xl);text-align:center}/* ========================================================================== MEMBER AREA COMPONENTS ========================================================================== */ /* -------------------------------------------------------------------------- SKELETON / LOADING STATES -------------------------------------------------------------------------- */ @keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.4}}.donamic_redesign1 .skeleton-donamic{background:linear-gradient(90deg,var(--donamic-light-gray) 0%,var(--donamic-border-light) 50%,var(--donamic-light-gray) 100%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite;border-radius:var(--donamic-radius-md)}/* Text Skeleton */ .donamic_redesign1 .skeleton-text-donamic{height:1rem;margin-bottom:var(--donamic-space-sm);border-radius:var(--donamic-radius-sm)}.donamic_redesign1 .skeleton-text-donamic:last-child{margin-bottom:0}.donamic_redesign1 .skeleton-text-donamic-short{width:40%}.donamic_redesign1 .skeleton-text-donamic-medium{width:70%}.donamic_redesign1 .skeleton-text-donamic-full{width:100%}/* Title Skeleton */ .donamic_redesign1 .skeleton-title-donamic{height:1.5rem;width:60%;margin-bottom:var(--donamic-space-md);border-radius:var(--donamic-radius-sm)}/* Card Skeleton */ .donamic_redesign1 .skeleton-card-donamic{background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);padding:var(--donamic-space-lg)}.donamic_redesign1 .skeleton-card-donamic .skeleton-donamic{background:linear-gradient(90deg,var(--donamic-light-gray) 0%,#e5e5e5 50%,var(--donamic-light-gray) 100%);background-size:200% 100%}/* Image Skeleton */ .donamic_redesign1 .skeleton-image-donamic{width:100%;aspect-ratio:16 / 9;border-radius:var(--donamic-radius-lg)}/* Avatar Skeleton */ .donamic_redesign1 .skeleton-avatar-donamic{width:48px;height:48px;border-radius:var(--donamic-radius-full);flex-shrink:0}.donamic_redesign1 .skeleton-avatar-donamic-sm{width:32px;height:32px}.donamic_redesign1 .skeleton-avatar-donamic-lg{width:64px;height:64px}/* Button Skeleton */ .donamic_redesign1 .skeleton-button-donamic{height:40px;width:120px;border-radius:var(--donamic-radius-md)}/* -------------------------------------------------------------------------- PROGRESS BAR -------------------------------------------------------------------------- */ .donamic_redesign1 .progress-donamic{width:100%;height:8px;background:var(--donamic-border-light);border-radius:var(--donamic-radius-full);overflow:hidden}.donamic_redesign1 .progress-donamic-bar{height:100%;background:var(--donamic-primary);border-radius:var(--donamic-radius-full);transition:width 0.3s ease}/* Sizes */ .donamic_redesign1 .progress-donamic-sm{height:4px}.donamic_redesign1 .progress-donamic-lg{height:12px}/* Labeled Progress */ .donamic_redesign1 .progress-donamic-labeled{display:flex;align-items:center;gap:var(--donamic-space-sm)}.donamic_redesign1 .progress-donamic-labeled .progress-donamic{flex:1}.donamic_redesign1 .progress-donamic-label{font-size:0.875rem;font-weight:500;color:var(--donamic-text-medium);min-width:40px;text-align:right}/* -------------------------------------------------------------------------- PROGRESS RING (SVG-based) -------------------------------------------------------------------------- */ .donamic_redesign1 .progress-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.donamic_redesign1 .progress-ring svg{transform:rotate(-90deg)}.donamic_redesign1 .progress-ring-track{fill:none;stroke:var(--donamic-border-light)}.donamic_redesign1 .progress-ring-fill{fill:none;stroke:var(--donamic-primary);stroke-linecap:round;transition:stroke-dashoffset 0.3s ease}/* Sizes */ .donamic_redesign1 .progress-ring-sm{width:32px;height:32px}.donamic_redesign1 .progress-ring-sm .progress-ring-track,.donamic_redesign1 .progress-ring-sm .progress-ring-fill{stroke-width:3}.donamic_redesign1 .progress-ring-md{width:48px;height:48px}.donamic_redesign1 .progress-ring-md .progress-ring-track,.donamic_redesign1 .progress-ring-md .progress-ring-fill{stroke-width:4}.donamic_redesign1 .progress-ring-lg{width:64px;height:64px}.donamic_redesign1 .progress-ring-lg .progress-ring-track,.donamic_redesign1 .progress-ring-lg .progress-ring-fill{stroke-width:5}/* Label inside ring */ .donamic_redesign1 .progress-ring-label{position:absolute;font-size:0.75rem;font-weight:600;color:var(--donamic-text-dark)}.donamic_redesign1 .progress-ring-lg .progress-ring-label{font-size:0.875rem}/* -------------------------------------------------------------------------- CALLOUT / NOTICE -------------------------------------------------------------------------- */ .donamic_redesign1 .callout-donamic{display:flex;gap:var(--donamic-space-md);padding:var(--donamic-space-lg);border-radius:var(--donamic-radius-lg);border-left:4px solid var(--donamic-border-light);background:var(--donamic-light-gray)}.donamic_redesign1 .callout-donamic-icon{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.donamic_redesign1 .callout-donamic-content{flex:1;min-width:0}.donamic_redesign1 .callout-donamic-title{font-weight:600;margin-bottom:var(--donamic-space-xs);color:var(--donamic-text-dark)}.donamic_redesign1 .callout-donamic-content p{margin:0;color:var(--donamic-text-medium)}/* Tip - Green */ .donamic_redesign1 .callout-donamic-tip{border-left-color:var(--donamic-primary);background:var(--donamic-primary-bg)}.donamic_redesign1 .callout-donamic-tip .callout-donamic-icon{color:var(--donamic-primary-dark)}.donamic_redesign1 .callout-donamic-tip .callout-donamic-title{color:var(--donamic-primary-dark)}/* Important - Red */ .donamic_redesign1 .callout-donamic-important{border-left-color:#dc2626;background:#fef2f2}.donamic_redesign1 .callout-donamic-important .callout-donamic-icon{color:#dc2626}.donamic_redesign1 .callout-donamic-important .callout-donamic-title{color:#991b1b}/* Update - Blue */ .donamic_redesign1 .callout-donamic-update{border-left-color:#2563eb;background:#eff6ff}.donamic_redesign1 .callout-donamic-update .callout-donamic-icon{color:#2563eb}.donamic_redesign1 .callout-donamic-update .callout-donamic-title{color:#1e40af}/* Note - Yellow */ .donamic_redesign1 .callout-donamic-note{border-left-color:#f59e0b;background:#fffbeb}.donamic_redesign1 .callout-donamic-note .callout-donamic-icon{color:#f59e0b}.donamic_redesign1 .callout-donamic-note .callout-donamic-title{color:#b45309}/* -------------------------------------------------------------------------- RESOURCE LIST (Downloads,Links) -------------------------------------------------------------------------- */ .donamic_redesign1 .resource-list{display:flex;flex-direction:column;gap:var(--donamic-space-sm)}.donamic_redesign1 .resource-item{display:flex;align-items:center;gap:var(--donamic-space-md);padding:var(--donamic-space-md);background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-md);text-decoration:none;color:inherit;transition:all var(--donamic-transition-fast)}.donamic_redesign1 .resource-item:hover{background:var(--donamic-light-gray);border-color:var(--donamic-primary)}.donamic_redesign1 .resource-icon{width:40px;height:40px;border-radius:var(--donamic-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--donamic-light-gray)}.donamic_redesign1 .resource-icon svg{width:20px;height:20px}/* Icon Variants */ .donamic_redesign1 .resource-icon-pdf{background:#fef2f2;color:#dc2626}.donamic_redesign1 .resource-icon-zip{background:#fff7ed;color:#ea580c}.donamic_redesign1 .resource-icon-link{background:#eff6ff;color:#2563eb}.donamic_redesign1 .resource-icon-video{background:var(--donamic-primary-bg);color:var(--donamic-primary-dark)}.donamic_redesign1 .resource-icon-doc{background:#eff6ff;color:#2563eb}.donamic_redesign1 .resource-info{flex:1;min-width:0}.donamic_redesign1 .resource-name{font-weight:500;color:var(--donamic-text-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.donamic_redesign1 .resource-meta{font-size:0.75rem;color:var(--donamic-text-light);margin-top:2px}.donamic_redesign1 .resource-action{flex-shrink:0;color:var(--donamic-text-light);transition:color var(--donamic-transition-fast)}.donamic_redesign1 .resource-item:hover .resource-action{color:var(--donamic-primary)}/* -------------------------------------------------------------------------- VIDEO PLAYER WRAPPER -------------------------------------------------------------------------- */ .donamic_redesign1 .video-wrapper{width:100%;margin:0 auto}.donamic_redesign1 .video-wrapper-sm{max-width:640px}.donamic_redesign1 .video-wrapper-md{max-width:854px}.donamic_redesign1 .video-wrapper-lg{max-width:1280px}.donamic_redesign1 .video-wrapper .video-container{border-radius:var(--donamic-radius-lg);overflow:hidden;background:var(--donamic-black)}.donamic_redesign1 .video-caption{padding:var(--donamic-space-lg) 0}.donamic_redesign1 .video-caption-title{font-size:1.25rem;font-weight:600;color:var(--donamic-text-dark);margin-bottom:var(--donamic-space-xs)}.donamic_redesign1 .video-caption-description{color:var(--donamic-text-medium);line-height:1.6}/* -------------------------------------------------------------------------- LESSON CARD -------------------------------------------------------------------------- */ .donamic_redesign1 .lesson-card{display:flex;align-items:center;gap:var(--donamic-space-md);padding:var(--donamic-space-md) var(--donamic-space-lg);background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);text-decoration:none;color:inherit;transition:all var(--donamic-transition-fast)}.donamic_redesign1 .lesson-card:hover{border-color:var(--donamic-primary);box-shadow:var(--donamic-shadow-sm)}.donamic_redesign1 .lesson-card-status{width:32px;height:32px;border-radius:var(--donamic-radius-full);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--donamic-light-gray);color:var(--donamic-text-light)}.donamic_redesign1 .lesson-card-status svg{width:16px;height:16px}.donamic_redesign1 .lesson-card-content{flex:1;min-width:0}.donamic_redesign1 .lesson-card-title{font-weight:500;color:var(--donamic-text-dark);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.donamic_redesign1 .lesson-card-description{font-size:0.875rem;color:var(--donamic-text-light);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.donamic_redesign1 .lesson-card-duration{font-size:0.75rem;font-weight:500;color:var(--donamic-text-light);background:var(--donamic-light-gray);padding:4px 8px;border-radius:var(--donamic-radius-sm);flex-shrink:0}/* Lesson Card - Available */ .donamic_redesign1 .lesson-card-available .lesson-card-status{background:var(--donamic-primary-bg);color:var(--donamic-primary-dark)}/* Lesson Card - Completed */ .donamic_redesign1 .lesson-card-completed{border-color:var(--donamic-primary);background:var(--donamic-primary-bg)}.donamic_redesign1 .lesson-card-completed .lesson-card-status{background:var(--donamic-primary);color:var(--donamic-white)}.donamic_redesign1 .lesson-card-completed .lesson-card-title{color:var(--donamic-primary-dark)}/* Lesson Card - Locked */ .donamic_redesign1 .lesson-card-locked{opacity:0.7;border-style:dashed;cursor:not-allowed}.donamic_redesign1 .lesson-card-locked:hover{border-color:var(--donamic-border-light);box-shadow:none}.donamic_redesign1 .lesson-card-locked .lesson-card-status{background:var(--donamic-light-gray);color:var(--donamic-text-light)}/* -------------------------------------------------------------------------- ACCESS GATE -------------------------------------------------------------------------- */ .donamic_redesign1 .access-gate{text-align:center;padding:var(--donamic-space-2xl);border-radius:var(--donamic-radius-xl);background:var(--donamic-light-gray);border:1px solid var(--donamic-border-light)}.donamic_redesign1 .access-gate-icon{width:64px;height:64px;margin:0 auto var(--donamic-space-lg);background:var(--donamic-white);border-radius:var(--donamic-radius-full);display:flex;align-items:center;justify-content:center;color:var(--donamic-text-light)}.donamic_redesign1 .access-gate-icon svg{width:32px;height:32px}.donamic_redesign1 .access-gate-title{font-size:1.25rem;font-weight:600;color:var(--donamic-text-dark);margin-bottom:var(--donamic-space-sm)}.donamic_redesign1 .access-gate-description{color:var(--donamic-text-medium);margin-bottom:var(--donamic-space-lg);max-width:400px;margin-left:auto;margin-right:auto}.donamic_redesign1 .access-gate-badge{display:inline-block;margin-bottom:var(--donamic-space-lg)}.donamic_redesign1 .access-gate-action{display:inline-flex}/* Access Gate - Upgrade */ .donamic_redesign1 .access-gate-upgrade{background:linear-gradient(135deg,var(--donamic-primary-light) 0%,rgba(99,229,38,0.05) 100%);border:2px dashed var(--donamic-primary)}.donamic_redesign1 .access-gate-upgrade .access-gate-icon{background:var(--donamic-primary-bg);color:var(--donamic-primary-dark)}.donamic_redesign1 .access-gate-upgrade .access-gate-title{color:var(--donamic-primary-dark)}/* Access Gate - Login */ .donamic_redesign1 .access-gate-login{background:var(--donamic-white)}.donamic_redesign1 .access-gate-login .access-gate-icon{background:var(--donamic-light-gray);color:var(--donamic-text-medium)}/* Access Gate - Locked */ .donamic_redesign1 .access-gate-locked{background:var(--donamic-light-gray)}/* Access Gate - Overlay (for blurred content) */ .donamic_redesign1 .access-gate-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:inherit;z-index:10}.donamic_redesign1 .access-gate-overlay .access-gate{background:var(--donamic-white);box-shadow:var(--donamic-shadow-xl);max-width:400px;margin:var(--donamic-space-lg)}/* -------------------------------------------------------------------------- MODULE ACCORDION -------------------------------------------------------------------------- */ .donamic_redesign1 .module-accordion{display:flex;flex-direction:column;gap:var(--donamic-space-md)}.donamic_redesign1 .module-item{background:var(--donamic-white);border:1px solid var(--donamic-border-light);border-radius:var(--donamic-radius-lg);overflow:hidden}.donamic_redesign1 .module-header{display:flex;align-items:center;gap:var(--donamic-space-md);width:100%;padding:var(--donamic-space-lg);background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;transition:background var(--donamic-transition-fast)}.donamic_redesign1 .module-header:hover{background:var(--donamic-light-gray)}.donamic_redesign1 .module-icon{width:20px;height:20px;flex-shrink:0;color:var(--donamic-text-light);transition:transform var(--donamic-transition-fast)}.donamic_redesign1 .module-item.active .module-icon{transform:rotate(180deg)}.donamic_redesign1 .module-title{flex:1;font-weight:600;color:var(--donamic-text-dark);margin:0}.donamic_redesign1 .module-progress{flex-shrink:0}.donamic_redesign1 .module-meta{font-size:0.75rem;color:var(--donamic-text-light);flex-shrink:0}.donamic_redesign1 .module-content{display:none;padding:0 var(--donamic-space-lg) var(--donamic-space-lg)}.donamic_redesign1 .module-item.active .module-content{display:block}/* Module Lessons */ .donamic_redesign1 .module-lessons{display:flex;flex-direction:column;gap:var(--donamic-space-xs)}.donamic_redesign1 .module-lesson{display:flex;align-items:center;gap:var(--donamic-space-sm);padding:var(--donamic-space-sm) var(--donamic-space-md);border-radius:var(--donamic-radius-md);text-decoration:none;color:inherit;transition:all var(--donamic-transition-fast)}.donamic_redesign1 .module-lesson:hover{background:var(--donamic-light-gray)}.donamic_redesign1 .module-lesson-status{width:20px;height:20px;border-radius:var(--donamic-radius-full);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--donamic-light-gray);color:var(--donamic-text-light)}.donamic_redesign1 .module-lesson-status svg{width:12px;height:12px}.donamic_redesign1 .module-lesson-title{flex:1;font-size:0.875rem;color:var(--donamic-text-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.donamic_redesign1 .module-lesson-duration{font-size:0.75rem;color:var(--donamic-text-light);flex-shrink:0}/* Module Lesson - Completed */ .donamic_redesign1 .module-lesson-completed .module-lesson-status{background:var(--donamic-primary);color:var(--donamic-white)}.donamic_redesign1 .module-lesson-completed .module-lesson-title{color:var(--donamic-text-dark)}/* Module Lesson - Active */ .donamic_redesign1 .module-lesson-active{background:var(--donamic-primary-bg)}.donamic_redesign1 .module-lesson-active .module-lesson-status{background:var(--donamic-primary);color:var(--donamic-white)}.donamic_redesign1 .module-lesson-active .module-lesson-title{font-weight:500;color:var(--donamic-primary-dark)}/* Module Lesson - Locked */ .donamic_redesign1 .module-lesson-locked{opacity:0.5;cursor:not-allowed}.donamic_redesign1 .module-lesson-locked:hover{background:transparent}/* ========================================================================== INFO POINT ICON (for checklist/benefit items) ========================================================================== */ .donamic_redesign1 .info-point-icon{width:40px;height:40px;background:rgba(255,255,255,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}/* Light section variant */ .donamic_redesign1 .section-light .info-point-icon{background:var(--donamic-primary-light)}/* ========================================================================== FORM LABEL DARK (for dark sections) ========================================================================== */ .donamic_redesign1 .form-label-dark{display:block;margin-bottom:0.5rem;font-size:0.875rem;color:rgba(255,255,255,0.7)}/* ========================================================================== INPUT DARK (for dark sections) ========================================================================== */ .donamic_redesign1 .input-dark{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1);color:#fff}.donamic_redesign1 .input-dark::placeholder{color:rgba(255,255,255,0.4)}.donamic_redesign1 .input-dark:focus{border-color:var(--donamic-primary);background:rgba(255,255,255,0.08)}/* ========================================================================== FORM CONTAINER GLASS (dark glass effect) ========================================================================== */ .donamic_redesign1 .form-container-glass{background:rgba(255,255,255,0.05);border-radius:var(--donamic-radius-2xl);padding:var(--donamic-space-2xl)}/* ========================================================================== CSS RESET - Modern Minimal Reset Based on modern best practices for consistent cross-browser rendering ========================================================================== */ /* Box sizing rules */ *,*::before,*::after{box-sizing:border-box}/* Prevent font size inflation */ html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}/* Remove default margin and padding */ body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}/* Remove list styles on ul,ol elements with role="list" */ ul[role="list"],ol[role="list"]{list-style:none}/* Set core body defaults */ body{min-height:100vh;line-height:var(--line-height-normal);font-family:var(--font-family-base);font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}/* Set shorter line heights on headings and interactive elements */ h1,h2,h3,h4,h5,h6,button,input,label{line-height:var(--line-height-tight)}/* Balance text wrapping on headings */ h1,h2,h3,h4,h5,h6{text-wrap:balance}/* A elements that don't have a class get default styles */ a:not([class]){text-decoration-skip-ink:auto;color:var(--color-link)}a:not([class]):hover{color:var(--color-link-hover)}/* Make images easier to work with */ img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}/* Inherit fonts for inputs and buttons */ input,button,textarea,select{font:inherit;color:inherit}/* Remove default button styles */ button{background:none;border:none;padding:0;cursor:pointer}/* Make sure textareas without a rows attribute are not tiny */ textarea:not([rows]){min-height:10em}/* Anything that has been anchored to should have extra scroll margin */:target{scroll-margin-block:5ex}/* Remove all animations,transitions and smooth scroll for people that prefer not to see them */ @media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}/* Remove default fieldset styles */ fieldset{border:0;padding:0;margin:0;min-width:0}/* Remove default legend padding */ legend{padding:0}/* Remove default table spacing */ table{border-collapse:collapse;border-spacing:0}/* Improve consistency of default fonts in all browsers */ code,kbd,samp,pre{font-family:var(--font-family-code);font-size:1em}/* Remove the inner border and padding in Firefox */::-moz-focus-inner{border-style:none;padding:0}/* Restore focus styles unset by previous rule */:-moz-focusring{outline:1px dotted ButtonText}/* Remove the additional ':invalid' styles in Firefox */:-moz-ui-invalid{box-shadow:none}/* Change the cursor on disabled elements */ [disabled]{cursor:not-allowed}/* Improve consistency of horizontal rules */ hr{height:0;color:inherit;border:0;border-top:1px solid var(--color-border);margin:var(--spacing-4) 0}/* Add the correct vertical alignment in Chrome and Firefox */ progress{vertical-align:baseline}/* Correct the cursor style of increment and decrement buttons in Safari */::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}/* Correct the odd appearance in Chrome and Safari */ [type="search"]{-webkit-appearance:textfield;outline-offset:-2px}/* Remove the inner padding in Chrome and Safari on macOS */::-webkit-search-decoration{-webkit-appearance:none}/* Correct the inability to style clickable types in iOS and Safari */::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/* Hidden attribute support for older browsers */ [hidden]{display:none !important}/* Screen reader only utility */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.sr-only-focusable:focus,.sr-only-focusable:focus-within{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}/* ========================================================================== TYPOGRAPHY SYSTEM Headings,paragraphs,links,lists,and text utilities ========================================================================== */ /* ========================================================================== HEADINGS ========================================================================== */ h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{margin-bottom:var(--spacing-4);font-family:var(--font-family-heading,var(--font-family-display));font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);color:var(--color-text)}h1,.h1{font-size:var(--font-size-3xl)}h2,.h2{font-size:var(--font-size-2xl)}h3,.h3{font-size:var(--font-size-xl)}h4,.h4{font-size:var(--font-size-lg)}h5,.h5{font-size:var(--font-size-base)}h6,.h6{font-size:var(--font-size-sm)}/* Responsive headings - larger on bigger screens */ @media (min-width:768px){h1,.h1{font-size:var(--font-size-4xl)}h2,.h2{font-size:var(--font-size-3xl)}h3,.h3{font-size:var(--font-size-2xl)}h4,.h4{font-size:var(--font-size-xl)}}@media (min-width:1024px){h1,.h1{font-size:var(--font-size-5xl)}h2,.h2{font-size:var(--font-size-4xl)}}/* Display headings - extra large */ .display-1{font-size:var(--font-size-4xl);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-none)}.display-2{font-size:var(--font-size-3xl);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-none)}.display-3{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight)}@media (min-width:768px){.display-1{font-size:var(--font-size-5xl)}.display-2{font-size:var(--font-size-4xl)}.display-3{font-size:var(--font-size-3xl)}}@media (min-width:1024px){.display-1{font-size:var(--font-size-6xl)}.display-2{font-size:var(--font-size-5xl)}.display-3{font-size:var(--font-size-4xl)}}/* ========================================================================== PARAGRAPHS & BODY TEXT ========================================================================== */ p{margin-bottom:var(--spacing-4)}p:last-child{margin-bottom:0}.lead{font-size:var(--font-size-lg);font-weight:var(--font-weight-normal);line-height:var(--line-height-relaxed);color:var(--color-text-muted)}@media (min-width:768px){.lead{font-size:var(--font-size-xl)}}.small,small{font-size:var(--font-size-sm)}.tiny{font-size:var(--font-size-xs)}/* ========================================================================== LINKS ========================================================================== */ a{color:var(--color-link);text-decoration:none;transition:color var(--duration-150) var(--ease-in-out)}a:hover{color:var(--color-link-hover)}a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--border-radius-sm)}/* Link with underline */ .link-underline{text-decoration:underline;text-underline-offset:2px}.link-underline:hover{text-decoration-thickness:2px}/* Link muted */ .link-muted{color:var(--color-text-muted)}.link-muted:hover{color:var(--color-text)}/* ========================================================================== LISTS ========================================================================== */ ul,ol{margin-bottom:var(--spacing-4);padding-left:var(--spacing-6)}ul ul,ul ol,ol ul,ol ol{margin-bottom:0}li{margin-bottom:var(--spacing-1)}/* Unstyled list */ .list-unstyled{padding-left:0;list-style:none}.list-unstyled li{margin-bottom:0}/* Inline list */ .list-inline{padding-left:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--spacing-4)}.list-inline li{margin-bottom:0}/* Description list */ dl{margin-bottom:var(--spacing-4)}dt{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-1)}dd{margin-bottom:var(--spacing-3)}/* ========================================================================== BLOCKQUOTES ========================================================================== */ blockquote{margin:0 0 var(--spacing-4);padding:var(--spacing-4) var(--spacing-6);border-left:4px solid var(--color-primary);background-color:var(--color-bg-subtle);border-radius:0 var(--border-radius-md) var(--border-radius-md) 0}blockquote p:last-child{margin-bottom:0}blockquote footer,blockquote cite{display:block;margin-top:var(--spacing-2);font-size:var(--font-size-sm);color:var(--color-text-muted)}blockquote footer::before,blockquote cite::before{content:"\2014\00A0"}/* ========================================================================== CODE & PRE ========================================================================== */ code{font-family:var(--font-family-code);font-size:0.875em;color:var(--color-error-600);background-color:var(--color-bg-muted);padding:var(--spacing-0-5) var(--spacing-1);border-radius:var(--border-radius-sm)}pre{font-family:var(--font-family-code);font-size:var(--font-size-sm);margin-bottom:var(--spacing-4);padding:var(--spacing-4);background-color:var(--color-gray-900);color:var(--color-gray-100);border-radius:var(--border-radius-lg);overflow-x:auto;-webkit-overflow-scrolling:touch}pre code{color:inherit;background-color:transparent;padding:0;font-size:inherit}/* ========================================================================== INLINE TEXT ELEMENTS ========================================================================== */ strong,b{font-weight:var(--font-weight-semibold)}em,i{font-style:italic}mark{background-color:var(--color-warning-200);padding:var(--spacing-0-5) var(--spacing-1);border-radius:var(--border-radius-sm)}del,s{text-decoration:line-through;color:var(--color-text-muted)}ins,u{text-decoration:underline;text-underline-offset:2px}abbr[title]{text-decoration:underline dotted;cursor:help;text-decoration-skip-ink:none}kbd{font-family:var(--font-family-code);font-size:0.875em;padding:var(--spacing-0-5) var(--spacing-1-5);background-color:var(--color-gray-800);color:var(--color-gray-100);border-radius:var(--border-radius-sm);box-shadow:inset 0 -1px 0 var(--color-gray-700)}/* ========================================================================== TEXT UTILITIES ========================================================================== */ /* Text alignment */ .text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}/* Text transform */ .text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.text-normal-case{text-transform:none}/* Text decoration */ .underline{text-decoration:underline}.line-through{text-decoration:line-through}.no-underline{text-decoration:none}/* Font weight */ .font-light{font-weight:var(--font-weight-light)}.font-normal{font-weight:var(--font-weight-normal)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}/* Font style */ .italic{font-style:italic}.not-italic{font-style:normal}/* Line height */ .leading-none{line-height:var(--line-height-none)}.leading-tight{line-height:var(--line-height-tight)}.leading-snug{line-height:var(--line-height-snug)}.leading-normal{line-height:var(--line-height-normal)}.leading-relaxed{line-height:var(--line-height-relaxed)}.leading-loose{line-height:var(--line-height-loose)}/* Letter spacing */ .tracking-tighter{letter-spacing:var(--letter-spacing-tighter)}.tracking-tight{letter-spacing:var(--letter-spacing-tight)}.tracking-normal{letter-spacing:var(--letter-spacing-normal)}.tracking-wide{letter-spacing:var(--letter-spacing-wide)}.tracking-wider{letter-spacing:var(--letter-spacing-wider)}.tracking-widest{letter-spacing:var(--letter-spacing-widest)}/* Text colors */ .text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.text-warning{color:var(--color-warning)}.text-info{color:var(--color-info)}.text-muted{color:var(--color-text-muted)}.text-light{color:var(--color-text-light)}.text-white{color:#ffffff}.text-black{color:#000000}/* Text overflow */ .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-ellipsis{text-overflow:ellipsis}.text-clip{text-overflow:clip}/* Word break */ .break-normal{overflow-wrap:normal;word-break:normal}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}/* White space */ .whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}/* Line clamp (multi-line truncation) */ .line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}/* Responsive text alignment */ @media (min-width:640px){.sm\:text-left{text-align:left}.sm\:text-center{text-align:center}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:text-left{text-align:left}.md\:text-center{text-align:center}.md\:text-right{text-align:right}}@media (min-width:1024px){.lg\:text-left{text-align:left}.lg\:text-center{text-align:center}.lg\:text-right{text-align:right}}/* ========================================================================== GRID SYSTEM - Mobile First Responsive Layout 12-column grid with flexbox and CSS Grid options ========================================================================== */ /* ========================================================================== CONTAINER ========================================================================== */ .container{width:100%;margin-left:auto;margin-right:auto;padding-left:var(--container-padding);padding-right:var(--container-padding)}/* Fluid container - always 100% width */ .container-fluid{width:100%;padding-left:var(--container-padding);padding-right:var(--container-padding)}/* Responsive container max-widths */ @media (min-width:640px){.container{max-width:var(--container-sm)}}@media (min-width:768px){.container{max-width:var(--container-md)}:root{--container-padding:var(--spacing-6)}}@media (min-width:1024px){.container{max-width:var(--container-lg)}}@media (min-width:1280px){.container{max-width:var(--container-xl)}}@media (min-width:1536px){.container{max-width:var(--container-2xl)}}/* ========================================================================== FLEXBOX ROW ========================================================================== */ .row{display:flex;flex-wrap:wrap;margin-left:calc(var(--spacing-4) * -0.5);margin-right:calc(var(--spacing-4) * -0.5)}.row > *{flex-shrink:0;width:100%;max-width:100%;padding-left:calc(var(--spacing-4) * 0.5);padding-right:calc(var(--spacing-4) * 0.5)}/* No gutters */ .row.g-0{margin-left:0;margin-right:0}.row.g-0 > *{padding-left:0;padding-right:0}/* Row alignment */ .row-start{justify-content:flex-start}.row-center{justify-content:center}.row-end{justify-content:flex-end}.row-between{justify-content:space-between}.row-around{justify-content:space-around}.row-evenly{justify-content:space-evenly}/* Row vertical alignment */ .row-top{align-items:flex-start}.row-middle{align-items:center}.row-bottom{align-items:flex-end}.row-stretch{align-items:stretch}/* ========================================================================== COLUMNS - Mobile First (Base = Mobile) ========================================================================== */ /* Base columns (mobile) */ .col{flex:1 0 0%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.333333%}.col-2{flex:0 0 auto;width:16.666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.333333%}.col-5{flex:0 0 auto;width:41.666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.333333%}.col-8{flex:0 0 auto;width:66.666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.333333%}.col-11{flex:0 0 auto;width:91.666667%}.col-12{flex:0 0 auto;width:100%}/* Small screens (sm:640px+) */ @media (min-width:640px){.col-sm{flex:1 0 0%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.333333%}.col-sm-2{flex:0 0 auto;width:16.666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.333333%}.col-sm-5{flex:0 0 auto;width:41.666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.333333%}.col-sm-8{flex:0 0 auto;width:66.666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.333333%}.col-sm-11{flex:0 0 auto;width:91.666667%}.col-sm-12{flex:0 0 auto;width:100%}}/* Medium screens (md:768px+) */ @media (min-width:768px){.col-md{flex:1 0 0%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.333333%}.col-md-2{flex:0 0 auto;width:16.666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.333333%}.col-md-5{flex:0 0 auto;width:41.666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.333333%}.col-md-8{flex:0 0 auto;width:66.666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.333333%}.col-md-11{flex:0 0 auto;width:91.666667%}.col-md-12{flex:0 0 auto;width:100%}}/* Large screens (lg:1024px+) */ @media (min-width:1024px){.col-lg{flex:1 0 0%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.333333%}.col-lg-2{flex:0 0 auto;width:16.666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.333333%}.col-lg-5{flex:0 0 auto;width:41.666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.333333%}.col-lg-8{flex:0 0 auto;width:66.666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.333333%}.col-lg-11{flex:0 0 auto;width:91.666667%}.col-lg-12{flex:0 0 auto;width:100%}}/* Extra large screens (xl:1280px+) */ @media (min-width:1280px){.col-xl{flex:1 0 0%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.333333%}.col-xl-2{flex:0 0 auto;width:16.666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.333333%}.col-xl-5{flex:0 0 auto;width:41.666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.333333%}.col-xl-8{flex:0 0 auto;width:66.666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.333333%}.col-xl-11{flex:0 0 auto;width:91.666667%}.col-xl-12{flex:0 0 auto;width:100%}}/* 2XL screens (2xl:1536px+) */ @media (min-width:1536px){.col-2xl{flex:1 0 0%}.col-2xl-auto{flex:0 0 auto;width:auto}.col-2xl-1{flex:0 0 auto;width:8.333333%}.col-2xl-2{flex:0 0 auto;width:16.666667%}.col-2xl-3{flex:0 0 auto;width:25%}.col-2xl-4{flex:0 0 auto;width:33.333333%}.col-2xl-5{flex:0 0 auto;width:41.666667%}.col-2xl-6{flex:0 0 auto;width:50%}.col-2xl-7{flex:0 0 auto;width:58.333333%}.col-2xl-8{flex:0 0 auto;width:66.666667%}.col-2xl-9{flex:0 0 auto;width:75%}.col-2xl-10{flex:0 0 auto;width:83.333333%}.col-2xl-11{flex:0 0 auto;width:91.666667%}.col-2xl-12{flex:0 0 auto;width:100%}}/* ========================================================================== CSS GRID SYSTEM ========================================================================== */ .grid{display:grid;gap:var(--spacing-4)}/* Grid columns */ .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}/* Responsive grid columns */ @media (min-width:640px){.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (min-width:768px){.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (min-width:1024px){.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (min-width:1280px){.xl\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}/* Grid column span */ .col-span-1{grid-column:span 1 / span 1}.col-span-2{grid-column:span 2 / span 2}.col-span-3{grid-column:span 3 / span 3}.col-span-4{grid-column:span 4 / span 4}.col-span-5{grid-column:span 5 / span 5}.col-span-6{grid-column:span 6 / span 6}.col-span-full{grid-column:1 / -1}/* Grid row span */ .row-span-1{grid-row:span 1 / span 1}.row-span-2{grid-row:span 2 / span 2}.row-span-3{grid-row:span 3 / span 3}.row-span-4{grid-row:span 4 / span 4}.row-span-full{grid-row:1 / -1}/* Gap utilities */ .gap-0{gap:0}.gap-1{gap:var(--spacing-1)}.gap-2{gap:var(--spacing-2)}.gap-3{gap:var(--spacing-3)}.gap-4{gap:var(--spacing-4)}.gap-5{gap:var(--spacing-5)}.gap-6{gap:var(--spacing-6)}.gap-8{gap:var(--spacing-8)}.gap-10{gap:var(--spacing-10)}.gap-12{gap:var(--spacing-12)}.gap-x-0{column-gap:0}.gap-x-1{column-gap:var(--spacing-1)}.gap-x-2{column-gap:var(--spacing-2)}.gap-x-4{column-gap:var(--spacing-4)}.gap-x-6{column-gap:var(--spacing-6)}.gap-x-8{column-gap:var(--spacing-8)}.gap-y-0{row-gap:0}.gap-y-1{row-gap:var(--spacing-1)}.gap-y-2{row-gap:var(--spacing-2)}.gap-y-4{row-gap:var(--spacing-4)}.gap-y-6{row-gap:var(--spacing-6)}.gap-y-8{row-gap:var(--spacing-8)}/* ========================================================================== AUTO-FIT GRID (Responsive without media queries) ========================================================================== */ .grid-auto-fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:var(--spacing-4)}.grid-auto-fill{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:var(--spacing-4)}/* ========================================================================== BUTTON COMPONENTS Buttons,button groups,and button variants ========================================================================== */ /* ========================================================================== BASE BUTTON ========================================================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);padding:var(--spacing-2-5) var(--spacing-4);font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;border:1px solid transparent;border-radius:var(--border-radius-md);transition:color var(--duration-150) var(--ease-in-out),background-color var(--duration-150) var(--ease-in-out),border-color var(--duration-150) var(--ease-in-out),box-shadow var(--duration-150) var(--ease-in-out)}.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.btn:disabled,.btn.disabled{opacity:0.5;pointer-events:none}/* ========================================================================== BUTTON VARIANTS - Solid ========================================================================== */ /* Primary */ .btn-primary{color:var(--color-text-inverse);background-color:var(--color-primary);border-color:var(--color-primary)}.btn-primary:hover{color:var(--color-text-inverse);background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn-primary:active{background-color:var(--color-primary-active);border-color:var(--color-primary-active)}/* Secondary */ .btn-secondary{color:var(--color-text-inverse);background-color:var(--color-secondary);border-color:var(--color-secondary)}.btn-secondary:hover{color:var(--color-text-inverse);background-color:var(--color-secondary-hover);border-color:var(--color-secondary-hover)}.btn-secondary:active{background-color:var(--color-secondary-active);border-color:var(--color-secondary-active)}/* Success */ .btn-success{color:var(--color-text-inverse);background-color:var(--color-success);border-color:var(--color-success)}.btn-success:hover{color:var(--color-text-inverse);background-color:var(--color-success-hover);border-color:var(--color-success-hover)}.btn-success:active{background-color:var(--color-success-active);border-color:var(--color-success-active)}/* Error/Danger */ .btn-error,.btn-danger{color:var(--color-text-inverse);background-color:var(--color-error);border-color:var(--color-error)}.btn-error:hover,.btn-danger:hover{color:var(--color-text-inverse);background-color:var(--color-error-hover);border-color:var(--color-error-hover)}.btn-error:active,.btn-danger:active{background-color:var(--color-error-active);border-color:var(--color-error-active)}/* Warning */ .btn-warning{color:var(--color-gray-900);background-color:var(--color-warning);border-color:var(--color-warning)}.btn-warning:hover{color:var(--color-gray-900);background-color:var(--color-warning-hover);border-color:var(--color-warning-hover)}.btn-warning:active{background-color:var(--color-warning-active);border-color:var(--color-warning-active)}/* Info */ .btn-info{color:var(--color-text-inverse);background-color:var(--color-info);border-color:var(--color-info)}.btn-info:hover{color:var(--color-text-inverse);background-color:var(--color-info-hover);border-color:var(--color-info-hover)}.btn-info:active{background-color:var(--color-info-active);border-color:var(--color-info-active)}/* Dark */ .btn-dark{color:var(--color-text-inverse);background-color:var(--color-gray-800);border-color:var(--color-gray-800)}.btn-dark:hover{color:var(--color-text-inverse);background-color:var(--color-gray-900);border-color:var(--color-gray-900)}.btn-dark:active{background-color:var(--color-gray-950);border-color:var(--color-gray-950)}/* Light */ .btn-light{color:var(--color-text);background-color:var(--color-gray-100);border-color:var(--color-gray-100)}.btn-light:hover{color:var(--color-text);background-color:var(--color-gray-200);border-color:var(--color-gray-200)}.btn-light:active{background-color:var(--color-gray-300);border-color:var(--color-gray-300)}/* ========================================================================== BUTTON VARIANTS - Outline ========================================================================== */ .btn-outline-primary{color:var(--color-primary);background-color:transparent;border-color:var(--color-primary)}.btn-outline-primary:hover{color:var(--color-text-inverse);background-color:var(--color-primary)}.btn-outline-secondary{color:var(--color-secondary);background-color:transparent;border-color:var(--color-secondary)}.btn-outline-secondary:hover{color:var(--color-text-inverse);background-color:var(--color-secondary)}.btn-outline-success{color:var(--color-success);background-color:transparent;border-color:var(--color-success)}.btn-outline-success:hover{color:var(--color-text-inverse);background-color:var(--color-success)}.btn-outline-error,.btn-outline-danger{color:var(--color-error);background-color:transparent;border-color:var(--color-error)}.btn-outline-error:hover,.btn-outline-danger:hover{color:var(--color-text-inverse);background-color:var(--color-error)}.btn-outline-warning{color:var(--color-warning-600);background-color:transparent;border-color:var(--color-warning)}.btn-outline-warning:hover{color:var(--color-gray-900);background-color:var(--color-warning)}.btn-outline-info{color:var(--color-info);background-color:transparent;border-color:var(--color-info)}.btn-outline-info:hover{color:var(--color-text-inverse);background-color:var(--color-info)}.btn-outline-dark{color:var(--color-gray-800);background-color:transparent;border-color:var(--color-gray-800)}.btn-outline-dark:hover{color:var(--color-text-inverse);background-color:var(--color-gray-800)}.btn-outline-light{color:var(--color-gray-600);background-color:transparent;border-color:var(--color-gray-300)}.btn-outline-light:hover{color:var(--color-text);background-color:var(--color-gray-100)}/* ========================================================================== BUTTON VARIANTS - Ghost (no border) ========================================================================== */ .btn-ghost{color:var(--color-text);background-color:transparent;border-color:transparent}.btn-ghost:hover{background-color:var(--color-bg-muted)}.btn-ghost-primary{color:var(--color-primary);background-color:transparent;border-color:transparent}.btn-ghost-primary:hover{background-color:var(--color-primary-50)}.btn-ghost-error,.btn-ghost-danger{color:var(--color-error);background-color:transparent;border-color:transparent}.btn-ghost-error:hover,.btn-ghost-danger:hover{background-color:var(--color-error-50)}/* ========================================================================== BUTTON VARIANTS - Link ========================================================================== */ .btn-link{color:var(--color-link);background-color:transparent;border-color:transparent;text-decoration:underline;text-underline-offset:2px}.btn-link:hover{color:var(--color-link-hover);background-color:transparent}/* ========================================================================== BUTTON SIZES ========================================================================== */ .btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs);border-radius:var(--border-radius-sm)}.btn-sm{padding:var(--spacing-1-5) var(--spacing-3);font-size:var(--font-size-sm);border-radius:var(--border-radius-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-base);border-radius:var(--border-radius-lg)}.btn-xl{padding:var(--spacing-4) var(--spacing-8);font-size:var(--font-size-lg);border-radius:var(--border-radius-lg)}/* ========================================================================== BUTTON SHAPES ========================================================================== */ /* Pill shape */ .btn-pill{border-radius:var(--border-radius-full)}/* Square (equal padding) */ .btn-square{padding:var(--spacing-2-5)}.btn-square.btn-xs{padding:var(--spacing-1)}.btn-square.btn-sm{padding:var(--spacing-1-5)}.btn-square.btn-lg{padding:var(--spacing-3)}.btn-square.btn-xl{padding:var(--spacing-4)}/* Circle (icon button) */ .btn-circle{padding:var(--spacing-2-5);border-radius:var(--border-radius-full)}.btn-circle.btn-xs{padding:var(--spacing-1)}.btn-circle.btn-sm{padding:var(--spacing-1-5)}.btn-circle.btn-lg{padding:var(--spacing-3)}.btn-circle.btn-xl{padding:var(--spacing-4)}/* ========================================================================== BUTTON STATES ========================================================================== */ /* Loading state */ .btn-loading{position:relative;color:transparent !important;pointer-events:none}.btn-loading::after{content:"";position:absolute;width:1em;height:1em;top:50%;left:50%;margin-top:-0.5em;margin-left:-0.5em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btn-spinner 0.6s linear infinite}/* Restore color for spinner */ .btn-loading.btn-primary::after,.btn-loading.btn-secondary::after,.btn-loading.btn-success::after,.btn-loading.btn-error::after,.btn-loading.btn-danger::after,.btn-loading.btn-info::after,.btn-loading.btn-dark::after{border-color:var(--color-text-inverse);border-right-color:transparent}.btn-loading.btn-warning::after,.btn-loading.btn-light::after{border-color:var(--color-text);border-right-color:transparent}@keyframes btn-spinner{to{transform:rotate(360deg)}}/* ========================================================================== BUTTON WIDTH ========================================================================== */ .btn-block{display:flex;width:100%}/* ========================================================================== BUTTON GROUP ========================================================================== */ .btn-group{display:inline-flex}.btn-group > .btn{border-radius:0}.btn-group > .btn:first-child{border-top-left-radius:var(--border-radius-md);border-bottom-left-radius:var(--border-radius-md)}.btn-group > .btn:last-child{border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:var(--border-radius-md)}.btn-group > .btn:not(:last-child){border-right-width:0}.btn-group > .btn:hover,.btn-group > .btn:focus{z-index:1}/* Vertical button group */ .btn-group-vertical{display:inline-flex;flex-direction:column}.btn-group-vertical > .btn{border-radius:0}.btn-group-vertical > .btn:first-child{border-top-left-radius:var(--border-radius-md);border-top-right-radius:var(--border-radius-md)}.btn-group-vertical > .btn:last-child{border-bottom-left-radius:var(--border-radius-md);border-bottom-right-radius:var(--border-radius-md)}.btn-group-vertical > .btn:not(:last-child){border-bottom-width:0}/* ========================================================================== ICON IN BUTTON ========================================================================== */ .btn svg,.btn .icon{width:1.25em;height:1.25em;flex-shrink:0}.btn-icon-left svg,.btn-icon-left .icon{margin-right:var(--spacing-1)}.btn-icon-right svg,.btn-icon-right .icon{margin-left:var(--spacing-1)}/* ========================================================================== NAVIGATION COMPONENTS Navbar,nav,sidebar,menu,breadcrumbs ========================================================================== */ /* ========================================================================== BASE NAV ========================================================================== */ .nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-base);color:var(--color-text-muted);text-decoration:none;transition:color var(--duration-150) var(--ease-in-out),background-color var(--duration-150) var(--ease-in-out)}.nav-link:hover,.nav-link:focus{color:var(--color-primary)}.nav-link.active{color:var(--color-primary);font-weight:var(--font-weight-medium)}.nav-link.disabled{color:var(--color-text-light);pointer-events:none;cursor:not-allowed}/* ========================================================================== NAV TABS ========================================================================== */ .nav-tabs{border-bottom:1px solid var(--color-border)}.nav-tabs .nav-link{margin-bottom:-1px;border:1px solid transparent;border-top-left-radius:var(--border-radius-md);border-top-right-radius:var(--border-radius-md)}.nav-tabs .nav-link:hover,.nav-tabs .nav-link:focus{border-color:var(--color-border-muted) var(--color-border-muted) var(--color-border)}.nav-tabs .nav-link.active{color:var(--color-text);background-color:var(--color-bg);border-color:var(--color-border) var(--color-border) var(--color-bg)}/* ========================================================================== NAV PILLS ========================================================================== */ .nav-pills .nav-link{border-radius:var(--border-radius-md)}.nav-pills .nav-link.active{color:var(--color-text-inverse);background-color:var(--color-primary)}/* ========================================================================== NAV UNDERLINE ========================================================================== */ .nav-underline{border-bottom:1px solid var(--color-border);gap:var(--spacing-4)}.nav-underline .nav-link{padding:var(--spacing-3) 0;border-bottom:2px solid transparent;margin-bottom:-1px}.nav-underline .nav-link:hover,.nav-underline .nav-link:focus{border-bottom-color:var(--color-gray-300)}.nav-underline .nav-link.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}/* ========================================================================== VERTICAL NAV ========================================================================== */ .nav-vertical{flex-direction:column}.nav-vertical .nav-link{padding:var(--spacing-2) var(--spacing-3);border-radius:var(--border-radius-md)}.nav-vertical .nav-link:hover{background-color:var(--color-bg-muted)}.nav-vertical .nav-link.active{background-color:var(--color-primary-50);color:var(--color-primary)}/* ========================================================================== NAVBAR ========================================================================== */ .navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4);background-color:var(--color-bg)}.navbar-brand{display:flex;align-items:center;padding:var(--spacing-1) 0;margin-right:var(--spacing-4);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text);text-decoration:none;white-space:nowrap}.navbar-brand:hover,.navbar-brand:focus{color:var(--color-text)}.navbar-brand img{height:2rem;width:auto}/* Navbar nav */ .navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding:var(--spacing-2) var(--spacing-3)}@media (min-width:768px){.navbar-nav{flex-direction:row}}/* Navbar toggler (hamburger) */ .navbar-toggler{padding:var(--spacing-2);font-size:var(--font-size-lg);line-height:1;background-color:transparent;border:1px solid var(--color-border);border-radius:var(--border-radius-md);cursor:pointer;transition:box-shadow var(--duration-150) var(--ease-in-out)}.navbar-toggler:hover{background-color:var(--color-bg-muted)}.navbar-toggler:focus{outline:none;box-shadow:var(--focus-ring)}.navbar-toggler-icon{display:block;width:1.5rem;height:1.5rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='3' y1='12' x2='21' y2='12'%3e%3c/line%3e%3cline x1='3' y1='6' x2='21' y2='6'%3e%3c/line%3e%3cline x1='3' y1='18' x2='21' y2='18'%3e%3c/line%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:100%}/* Navbar collapse */ .navbar-collapse{display:none;flex-basis:100%;flex-grow:1;align-items:center}.navbar-collapse.show{display:flex}@media (min-width:768px){.navbar-collapse{display:flex !important;flex-basis:auto}.navbar-toggler{display:none}}/* Navbar variants */ .navbar-dark{background-color:var(--color-gray-900)}.navbar-dark .navbar-brand{color:var(--color-text-inverse)}.navbar-dark .nav-link{color:var(--color-gray-300)}.navbar-dark .nav-link:hover,.navbar-dark .nav-link:focus{color:var(--color-text-inverse)}.navbar-dark .nav-link.active{color:var(--color-text-inverse)}.navbar-dark .navbar-toggler{border-color:var(--color-gray-600)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f9fafb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='3' y1='12' x2='21' y2='12'%3e%3c/line%3e%3cline x1='3' y1='6' x2='21' y2='6'%3e%3c/line%3e%3cline x1='3' y1='18' x2='21' y2='18'%3e%3c/line%3e%3c/svg%3e")}.navbar-fixed-top{position:fixed;top:0;right:0;left:0;z-index:var(--z-fixed)}.navbar-sticky{position:sticky;top:0;z-index:var(--z-sticky)}.sidebar{display:flex;flex-direction:column;width:280px;min-height:100vh;padding:var(--spacing-4);background-color:var(--color-bg);border-right:1px solid var(--color-border)}.sidebar-header{display:flex;align-items:center;padding-bottom:var(--spacing-4);margin-bottom:var(--spacing-4);border-bottom:1px solid var(--color-border)}.sidebar-brand{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text);text-decoration:none}.sidebar-nav{flex:1}.sidebar-nav .nav-link{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-2) var(--spacing-3);border-radius:var(--border-radius-md);color:var(--color-text-muted)}.sidebar-nav .nav-link:hover{background-color:var(--color-bg-muted);color:var(--color-text)}.sidebar-nav .nav-link.active{background-color:var(--color-primary-50);color:var(--color-primary)}.sidebar-nav .nav-link svg,.sidebar-nav .nav-link .icon{width:1.25rem;height:1.25rem;flex-shrink:0}.sidebar-section{margin-top:var(--spacing-6)}.sidebar-section-title{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-light);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider)}.sidebar-footer{padding-top:var(--spacing-4);margin-top:auto;border-top:1px solid var(--color-border)}.sidebar-dark{background-color:var(--color-gray-900);border-right-color:var(--color-gray-800)}.sidebar-dark .sidebar-header{border-bottom-color:var(--color-gray-800)}.sidebar-dark .sidebar-brand{color:var(--color-text-inverse)}.sidebar-dark .sidebar-nav .nav-link{color:var(--color-gray-400)}.sidebar-dark .sidebar-nav .nav-link:hover{background-color:var(--color-gray-800);color:var(--color-text-inverse)}.sidebar-dark .sidebar-nav .nav-link.active{background-color:var(--color-primary);color:var(--color-text-inverse)}.sidebar-dark .sidebar-section-title{color:var(--color-gray-500)}.sidebar-dark .sidebar-footer{border-top-color:var(--color-gray-800)}.dropdown{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:var(--spacing-1);vertical-align:middle;content:"";border-top:0.3em solid;border-right:0.3em solid transparent;border-bottom:0;border-left:0.3em solid transparent}.dropdown-menu{position:absolute;z-index:var(--z-dropdown);display:none;min-width:10rem;padding:var(--spacing-2) 0;margin:var(--spacing-1) 0 0;font-size:var(--font-size-base);color:var(--color-text);text-align:left;list-style:none;background-color:var(--color-bg);background-clip:padding-box;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg)}.dropdown-menu.show{display:block}.dropdown-menu-end{right:0;left:auto}.dropdown-item{display:block;width:100%;padding:var(--spacing-2) var(--spacing-4);clear:both;font-weight:var(--font-weight-normal);color:var(--color-text);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;cursor:pointer;transition:background-color var(--duration-100) var(--ease-in-out)}.dropdown-item:hover,.dropdown-item:focus{background-color:var(--color-bg-muted)}.dropdown-item.active,.dropdown-item:active{color:var(--color-text-inverse);background-color:var(--color-primary)}.dropdown-item.disabled{color:var(--color-text-light);pointer-events:none;background-color:transparent}.dropdown-divider{height:0;margin:var(--spacing-2) 0;overflow:hidden;border-top:1px solid var(--color-border)}.dropdown-header{display:block;padding:var(--spacing-2) var(--spacing-4);margin-bottom:0;font-size:var(--font-size-sm);color:var(--color-text-muted);white-space:nowrap}.breadcrumb{display:flex;flex-wrap:wrap;padding:0;margin-bottom:var(--spacing-4);list-style:none;font-size:var(--font-size-sm)}.breadcrumb-item + .breadcrumb-item{padding-left:var(--spacing-2)}.breadcrumb-item + .breadcrumb-item::before{display:inline-block;padding-right:var(--spacing-2);color:var(--color-text-light);content:"/"}.breadcrumb-item a{color:var(--color-text-muted);text-decoration:none}.breadcrumb-item a:hover{color:var(--color-primary)}.breadcrumb-item.active{color:var(--color-text)}.breadcrumb-chevron .breadcrumb-item + .breadcrumb-item::before{content:">"}.breadcrumb-arrow .breadcrumb-item + .breadcrumb-item::before{content:"\2192"}.pagination{display:flex;padding-left:0;list-style:none;gap:var(--spacing-1)}.page-link{position:relative;display:flex;align-items:center;justify-content:center;min-width:2.5rem;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text);text-decoration:none;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-md);transition:color var(--duration-150) var(--ease-in-out),background-color var(--duration-150) var(--ease-in-out),border-color var(--duration-150) var(--ease-in-out)}.page-link:hover{z-index:2;color:var(--color-primary);background-color:var(--color-bg-muted);border-color:var(--color-border-strong)}.page-link:focus{z-index:3;outline:none;box-shadow:var(--focus-ring)}.page-item.active .page-link{z-index:3;color:var(--color-text-inverse);background-color:var(--color-primary);border-color:var(--color-primary)}.page-item.disabled .page-link{color:var(--color-text-light);pointer-events:none;background-color:var(--color-bg);border-color:var(--color-border)}.pagination-sm .page-link{min-width:2rem;padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.pagination-lg .page-link{min-width:3rem;padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-base)}