:root {
         --primary: rgb(240, 140, 80);
         --primary-dark: rgb(220, 120, 60);
         --primary-light: rgb(255, 160, 100);
         --background: #ffffff;
         --text-color: rgb(33, 33, 33);
         --text-light: #4a5568;
         --card-bg: #f8f8f8;
         --white: #ffffff;
         --font-heading: 'Segoe UI', system-ui, -apple-system, sans-serif;
         --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
         --transition: all 0.3s ease;
     }

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

     body {
         font-family: var(--font-body);
         background: var(--background);
         color: var(--text-color);
         line-height: 1.6;
     }

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

     /* Header */
     .header {
         background: var(--white);
         padding: 40px 0 0 0;
         text-align: center;
         color: var(--text-color);
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     }

     .header-logo {
         margin-bottom: 20px;
     }

     .header-logo img {
         max-height: 120px;
         width: auto;
     }

     .header h1 {
         font-family: var(--font-heading);
         font-size: 3rem;
         margin-bottom: 0;
         font-weight: 700;
         color: var(--text-color);
         display: none;
     }

     .header-subtitle {
         background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
         color: var(--white);
         padding: 20px 0;
         margin: 0;
     }

     .header-subtitle p {
         font-size: 1.2rem;
         opacity: 0.95;
         max-width: 600px;
         margin: 0 auto;
     }

     /* Main Content */
     .main-content {
         padding: 60px 0;
     }

     /* 2-Spalten Layout für Desktop */
     @media (min-width: 1200px) {
         .main-content {
             padding: 40px 0;
         }
         
         .sections-container {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 30px;
             align-items: start;
         }
         
         .section {
             margin-bottom: 30px;
             padding: 30px;
         }
         
         .section h2 {
             font-size: 1.6rem;
             margin-bottom: 20px;
         }
         
         .upload-area {
             padding: 40px 30px;
         }
         
         .upload-icon {
             font-size: 3rem;
         }
         
         /* Upload Section soll beide Spalten einnehmen */
         .upload-section {
             grid-column: 1 / -1;
         }
         
         /* Actions Section soll beide Spalten einnehmen */
         .actions-section {
             grid-column: 1 / -1;
         }
         
         /* Progress Container soll beide Spalten einnehmen */
         .progress-section {
             grid-column: 1 / -1;
         }
     }

     @media (min-width: 992px) and (max-width: 1199px) {
         .section {
             padding: 25px;
         }
     }

     /* Section Styles */
     .section {
         margin-bottom: 50px;
         background: var(--card-bg);
         border-radius: 15px;
         padding: 40px;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
         border: 1px solid #e2e8f0;
         transition: var(--transition);
     }

     .section:hover {
         box-shadow: 0 15px 35px rgba(240, 140, 80, 0.1);
     }

     .section h2 {
         font-family: var(--font-heading);
         color: var(--primary);
         margin-bottom: 25px;
         font-size: 1.8rem;
         font-weight: 700;
         position: relative;
         padding-bottom: 15px;
     }

     .section h2::after {
         content: '';
         position: absolute;
         bottom: 0;
         left: 0;
         width: 60px;
         height: 4px;
         background-color: var(--primary);
         border-radius: 2px;
     }

     /* Upload Area */
     .upload-area {
         border: 3px dashed var(--primary);
         border-radius: 15px;
         padding: 50px;
         text-align: center;
         background: var(--white);
         transition: var(--transition);
         cursor: pointer;
         position: relative;
         overflow: hidden;
     }

     .upload-area::before {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, transparent, rgba(240, 140, 80, 0.05), transparent);
         transition: left 0.5s;
     }

     .upload-area:hover::before {
         left: 100%;
     }

     .upload-area:hover {
         border-color: var(--primary-light);
         background: rgba(240, 140, 80, 0.02);
         transform: translateY(-3px);
     }

     .upload-area.dragover {
         border-color: var(--primary-light);
         background: rgba(240, 140, 80, 0.05);
         transform: scale(1.02);
     }

     .upload-icon {
         font-size: 4rem;
         color: var(--primary);
         margin-bottom: 20px;
         transition: var(--transition);
     }

     .upload-area:hover .upload-icon {
         color: var(--primary-light);
         transform: scale(1.1);
     }

     .upload-area strong {
         color: var(--primary);
         font-size: 1.3rem;
     }

     .upload-area p:last-child {
         color: var(--text-light);
         margin-top: 10px;
     }

     /* Form Styles */
     .form-group {
         margin-bottom: 25px;
     }

     .form-row {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 20px;
     }

     label {
         display: block;
         margin-bottom: 8px;
         font-weight: 600;
         color: var(--text-color);
         font-size: 1rem;
     }

     input, select {
         width: 100%;
         padding: 15px 20px;
         border: 2px solid #e2e8f0;
         border-radius: 10px;
         font-size: 1rem;
         font-family: var(--font-body);
         background: var(--white);
         transition: var(--transition);
     }

     input:focus, select:focus {
         outline: none;
         border-color: var(--primary);
         box-shadow: 0 0 0 3px rgba(240, 140, 80, 0.1);
     }

     /* Number inputs only */
     input[type="number"] {
         -moz-appearance: textfield;
     }

     input[type="number"]::-webkit-outer-spin-button,
     input[type="number"]::-webkit-inner-spin-button {
         -webkit-appearance: none;
         margin: 0;
     }

     /* Button Styles */
     .btn {
         background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
         color: var(--white);
         border: none;
         padding: 15px 30px;
         border-radius: 10px;
         font-size: 1rem;
         font-weight: 600;
         cursor: pointer;
         transition: var(--transition);
         margin-right: 15px;
         margin-bottom: 15px;
         box-shadow: 0 5px 15px rgba(240, 140, 80, 0.3);
     }

     .btn:hover {
         transform: translateY(-3px);
         box-shadow: 0 10px 25px rgba(240, 140, 80, 0.4);
     }

     .btn:disabled {
         opacity: 0.6;
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
         background: #cccccc;
     }

     .btn-secondary {
         background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
         box-shadow: 0 5px 15px rgba(255, 160, 100, 0.3);
     }

     .btn-secondary:hover {
         box-shadow: 0 10px 25px rgba(255, 160, 100, 0.4);
     }

     .btn-secondary:disabled {
         background: #cccccc;
         box-shadow: none;
     }

     /* Status indicators */
     .crop-status {
         color: var(--primary);
         font-weight: 600;
         margin-top: 10px;
         padding: 10px;
         background: rgba(240, 140, 80, 0.1);
         border-radius: 5px;
         border-left: 4px solid var(--primary);
     }

     .crop-required {
         color: #e53e3e;
         background: rgba(229, 62, 62, 0.1);
         border-left-color: #e53e3e;
     }

     /* Image Preview */
     .image-preview {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
         gap: 25px;
         margin-top: 30px;
     }

     .image-item {
         position: relative;
         border: 2px solid #e2e8f0;
         border-radius: 15px;
         overflow: hidden;
         background: var(--white);
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
         transition: var(--transition);
     }

     .image-item:hover {
         transform: translateY(-5px);
         box-shadow: 0 15px 30px rgba(240, 140, 80, 0.15);
         border-color: var(--primary);
     }

     .image-item img {
         width: 100%;
         height: 200px;
         object-fit: cover;
         display: block;
     }

     .image-info {
         padding: 20px;
         font-size: 0.9rem;
         color: var(--text-light);
         background: var(--card-bg);
     }

     .image-info strong {
         color: var(--text-color);
         display: block;
         margin-bottom: 8px;
     }

     .remove-btn {
         position: absolute;
         top: 15px;
         right: 15px;
         background: var(--primary);
         color: var(--white);
         border: none;
         border-radius: 50%;
         width: 35px;
         height: 35px;
         cursor: pointer;
         font-size: 1.3rem;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: var(--transition);
         box-shadow: 0 3px 10px rgba(240, 140, 80, 0.3);
     }

     .remove-btn:hover {
         background: var(--primary-dark);
         transform: scale(1.1);
     }

     /* Progress Bar */
     .progress-container {
         background: var(--white);
         border-radius: 15px;
         padding: 30px;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
         border: 2px solid var(--primary);
     }

     .progress-bar {
         width: 100%;
         height: 8px;
         background: #e2e8f0;
         border-radius: 4px;
         overflow: hidden;
         margin: 20px 0;
     }

     .progress-fill {
         height: 100%;
         background: linear-gradient(90deg, var(--primary), var(--primary-light));
         width: 0%;
         transition: width 0.3s ease;
         border-radius: 4px;
     }

     #progressText {
         text-align: center;
         font-weight: 600;
         color: var(--primary);
         font-size: 1.1rem;
     }

     /* Crop Modal */
     .crop-modal {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(33, 33, 33, 0.9);
         z-index: 1000;
         justify-content: center;
         align-items: center;
         backdrop-filter: blur(5px);
     }

     .crop-content {
         background: var(--white);
         border-radius: 20px;
         padding: 40px;
         max-width: 90vw;
         max-height: 90vh;
         overflow: auto;
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
         border: 3px solid var(--primary);
     }

     .crop-content h2 {
         color: var(--primary);
         margin-bottom: 25px;
         font-family: var(--font-heading);
     }

     .crop-canvas-container {
         position: relative;
         display: inline-block;
         margin-bottom: 25px;
     }

     .crop-canvas {
         max-width: 100%;
         border: 3px solid var(--primary);
         border-radius: 10px;
     }

     .crop-overlay {
         position: absolute;
         border: 3px dashed var(--primary-light);
         background: rgba(240, 140, 80, 0.1);
         cursor: move;
     }

     /* Crop Overlay Resize Handles */
     .resize-handle {
         position: absolute;
         width: 12px;
         height: 12px;
         background: var(--primary);
         border: 2px solid white;
         border-radius: 50%;
         z-index: 1001;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
         transition: transform 0.2s ease;
     }

     /* Effect Slider */
     .effect-slider {
         width: 100%;
         -webkit-appearance: none;
         appearance: none;
         height: 8px;
         border-radius: 5px;
         background: #e2e8f0;
         outline: none;
         transition: var(--transition);
     }

     .effect-slider::-webkit-slider-thumb {
         -webkit-appearance: none;
         appearance: none;
         width: 20px;
         height: 20px;
         border-radius: 50%;
         background: var(--primary);
         cursor: pointer;
         box-shadow: 0 2px 6px rgba(240, 140, 80, 0.3);
         transition: var(--transition);
     }

     .effect-slider::-webkit-slider-thumb:hover {
         background: var(--primary-light);
         transform: scale(1.1);
     }

     .effect-slider::-moz-range-thumb {
         width: 20px;
         height: 20px;
         border-radius: 50%;
         background: var(--primary);
         cursor: pointer;
         border: none;
         box-shadow: 0 2px 6px rgba(240, 140, 80, 0.3);
     }

     /* Effect Preview */
     .effect-preview {
         margin-top: 30px;
         background: var(--white);
         border-radius: 15px;
         padding: 30px;
         border: 2px solid var(--primary);
     }

     .effect-preview h3 {
         color: var(--primary);
         margin-bottom: 20px;
         font-family: var(--font-heading);
     }

     .preview-container {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 25px;
     }

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

     .preview-item h4 {
         color: var(--text-color);
         margin-bottom: 15px;
         font-size: 1.1rem;
     }

     .preview-canvas {
         max-width: 100%;
         max-height: 200px;
         border: 2px solid #e2e8f0;
         border-radius: 10px;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
         transition: var(--transition);
     }

     .preview-canvas:hover {
         transform: scale(1.05);
         box-shadow: 0 10px 25px rgba(240, 140, 80, 0.15);
     }

     #intensityValue {
         display: inline-block;
         margin-left: 10px;
         font-weight: 600;
         color: var(--primary);
         min-width: 45px;
     }

     .resize-handle:hover {
         transform: scale(1.2);
         background: var(--primary-light);
     }

     .hidden {
         display: none !important;
     }

     /* Responsive Design */
     @media (max-width: 992px) {
         .header h1 {
             font-size: 2.5rem;
         }
         
         .section {
             padding: 30px 25px;
         }
         
         .upload-area {
             padding: 40px 25px;
         }
     }

     @media (max-width: 768px) {
         .container {
             padding: 0 15px;
         }
         
         .header {
             padding: 30px 0;
         }
         
         .header h1 {
             font-size: 2rem;
         }
         
         .main-content {
             padding: 40px 0;
         }
         
         .section {
             padding: 25px 20px;
             margin-bottom: 30px;
         }
         
         .form-row {
             grid-template-columns: 1fr;
             gap: 15px;
         }
         
         .upload-area {
             padding: 30px 20px;
         }
         
         .upload-icon {
             font-size: 3rem;
         }
         
         .btn {
             width: 100%;
             margin-right: 0;
         }
         
         .image-preview {
             grid-template-columns: 1fr;
         }
     }

     @media (max-width: 576px) {
         .header h1 {
             font-size: 1.8rem;
         }
         
         .section h2 {
             font-size: 1.5rem;
         }
     }

     /* Hinweise unter den Feldern und noch nicht nutzbare Bereiche */
     .feldhinweis { display: block; margin-top: 6px; font-size: 0.85rem; color: #8a8a8a; }
     .nochnicht { opacity: 0.55; pointer-events: none; }
     .wartehinweis { font-size: 0.95rem; color: #8a8a8a; margin: 0 0 15px; }

     /* Kopfzeile: Schrift statt des alten Logo-Platzhalters */
     .header { padding: 40px 0 28px; }
     .header .marke { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em;
                      text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
     .header h1 { display: block; font-size: 2.4rem; margin-bottom: 14px; }
     .header-subtitle { margin-top: 18px; }
     .kopf-logo { display: block; height: 70px; width: auto; margin: 0 auto 18px; }

     /* Im Rahmen einer anderen Seite ohne eigene Kopfzeile */
     .imrahmen .header { display: none; }
     .imrahmen .main-content { padding-top: 20px; }