.fdm-relief-frontend {
    --fdm-primary: #2271b1;
    --fdm-primary-hover: #135e96;
    --fdm-success: #00a32a;
    --fdm-error: #d63638;
    --fdm-border: #c3c4c7;
    --fdm-bg: #f6f7f7;
    --fdm-text: #1d2327;
    --fdm-text-light: #646970;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 600px;
    margin: 0 auto;
}

.fdm-relief-form-container {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.fdm-relief-form {
    padding: 24px;
}

/* Upload Area */
.fdm-upload-wrapper {
    margin-bottom: 20px;
}

.fdm-upload-area {
    position: relative;
    border: 2px dashed var(--fdm-border);
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--fdm-bg);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fdm-upload-area:hover,
.fdm-upload-area.dragover {
    border-color: var(--fdm-primary);
    background: #f0f6fc;
}

.fdm-upload-area svg {
    color: #a7aaad;
    margin-bottom: 12px;
}

.fdm-upload-area .upload-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--fdm-text);
    margin: 0 0 4px;
}

.fdm-upload-area .upload-hint {
    font-size: 13px;
    color: var(--fdm-text-light);
    margin: 0;
}

.fdm-upload-area input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.fdm-upload-area #preview-image {
    display: none;
    max-width: 100%;
    max-height: 250px;
    border-radius: 8px;
}

.fdm-upload-area.has-image #preview-image {
    display: block;
}

.fdm-upload-area.has-image .upload-placeholder {
    display: none;
}

.fdm-upload-area .remove-image {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}

.fdm-upload-area.has-image .remove-image {
    display: block;
}

.fdm-upload-area .remove-image:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Model Selection */
.fdm-model-selection {
    margin-bottom: 20px;
}

.fdm-model-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--fdm-text);
    margin-bottom: 10px;
}

.fdm-model-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.fdm-model-options-3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.fdm-model-options-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.fdm-model-option {
    cursor: pointer;
}

.fdm-model-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fdm-model-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 8px;
    background: var(--fdm-bg);
    border: 2px solid var(--fdm-border);
    border-radius: 10px;
    transition: all 0.2s;
    text-align: center;
    position: relative;
    min-height: 100px;
}

.fdm-model-option input[type="radio"]:checked + .fdm-model-card {
    border-color: var(--fdm-primary);
    background: #f0f6fc;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15);
}

.fdm-model-card:hover {
    border-color: var(--fdm-primary);
}

.fdm-model-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    margin-bottom: 6px;
    color: var(--fdm-primary);
}

.fdm-model-icon svg {
    width: 20px;
    height: 20px;
}

.fdm-model-option input[type="radio"]:checked + .fdm-model-card .fdm-model-icon {
    background: var(--fdm-primary);
    color: #fff;
}

.fdm-model-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--fdm-text);
    margin-bottom: 2px;
}

.fdm-model-desc {
    font-size: 10px;
    color: var(--fdm-text-light);
    line-height: 1.3;
}

.fdm-model-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    text-transform: uppercase;
}

.fdm-badge-recommended {
    background: var(--fdm-success);
    color: #fff;
}

.fdm-badge-fast {
    background: #6c5ce7;
    color: #fff;
}

.fdm-badge-balanced {
    background: #f0ad4e;
    color: #fff;
}

.fdm-badge-quality {
    background: #e84393;
    color: #fff;
}

.fdm-badge-slow {
    background: #636e72;
    color: #fff;
}

.fdm-badge-stable {
    background: #00b894;
    color: #fff;
}

.fdm-badge-metric {
    background: #0984e3;
    color: #fff;
}

.fdm-badge-apple {
    background: #2d3436;
    color: #fff;
}

@media (max-width: 500px) {
    .fdm-model-options,
    .fdm-model-options-3,
    .fdm-model-options-4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 350px) {
    .fdm-model-options,
    .fdm-model-options-3,
    .fdm-model-options-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 501px) and (max-width: 700px) {
    .fdm-model-options-3 {
        grid-template-columns: 1fr 1fr;
    }
    .fdm-model-options-3 .fdm-model-option:last-child {
        grid-column: span 2;
    }
    .fdm-model-options-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 701px) {
    .fdm-model-options-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Settings Panel */
.fdm-settings-panel {
    margin-bottom: 20px;
}

.fdm-settings-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: var(--fdm-bg);
    border: 1px solid var(--fdm-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--fdm-text);
    transition: all 0.2s;
}

.fdm-settings-toggle:hover {
    background: #eee;
}

.fdm-settings-content {
    display: none;
    padding: 16px 20px;
    border: 1px solid var(--fdm-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #fafafa;
}

.fdm-settings-content.open {
    display: block;
}

/* Settings Grid - Clean 2-column layout */
.fdm-settings-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 20px;
    align-items: center;
}

.fdm-settings-grid > label {
    font-size: 14px;
    font-weight: 500;
    color: var(--fdm-text);
    white-space: nowrap;
}

.fdm-setting-input {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.fdm-setting-input input[type="number"] {
    width: 70px;
    padding: 8px 10px;
    border: 1px solid var(--fdm-border);
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    background: #fff;
}

.fdm-setting-input input[type="number"]:focus {
    border-color: var(--fdm-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.15);
}

.fdm-setting-input .fdm-unit {
    font-size: 13px;
    color: var(--fdm-text-light);
    width: 24px;
    text-align: left;
}

.fdm-setting-input select {
    padding: 8px 12px;
    border: 1px solid var(--fdm-border);
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: var(--fdm-text);
    min-width: 100px;
}

.fdm-setting-input select:focus {
    border-color: var(--fdm-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.15);
}

.fdm-setting-input input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--fdm-primary);
    cursor: pointer;
}

.fdm-setting-hint {
    font-size: 11px;
    color: var(--fdm-text-light);
    font-style: italic;
}

/* Slider Input */
.fdm-slider-input {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fdm-slider-input input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 6px;
    background: var(--fdm-border);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.fdm-slider-input input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--fdm-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.fdm-slider-input input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(34, 113, 177, 0.3);
}

.fdm-slider-input input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--fdm-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.fdm-slider-value {
    min-width: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--fdm-text);
}

/* Border Settings (conditional display) */
.fdm-border-settings {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 20px;
    align-items: center;
    margin-top: 8px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--fdm-border);
}

.fdm-border-settings > label {
    font-size: 14px;
    font-weight: 500;
    color: var(--fdm-text);
    white-space: nowrap;
}

/* Mobile: keep grid but adjust */
@media (max-width: 400px) {
    .fdm-settings-grid {
        gap: 10px 12px;
    }

    .fdm-setting-input input[type="number"] {
        width: 60px;
        padding: 6px 8px;
    }

    .fdm-setting-input select {
        min-width: 80px;
        padding: 6px 8px;
    }
}

/* Generate Button */
.fdm-generate-btn {
    width: 100%;
    padding: 16px 24px;
    background: var(--fdm-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.fdm-generate-btn:hover:not(:disabled) {
    background: var(--fdm-primary-hover);
}

.fdm-generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Progress */
.fdm-progress {
    display: none;
    padding: 40px 24px;
    text-align: center;
}

.fdm-progress.active {
    display: block;
}

.fdm-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--fdm-bg);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 16px;
}

.fdm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fdm-primary), var(--fdm-primary-hover));
    border-radius: 3px;
    animation: progress-indeterminate 1.5s infinite ease-in-out;
}

@keyframes progress-indeterminate {
    0% { width: 0%; margin-left: 0%; }
    50% { width: 60%; margin-left: 20%; }
    100% { width: 0%; margin-left: 100%; }
}

.fdm-progress-text {
    color: var(--fdm-text-light);
    font-size: 14px;
    margin: 0;
}

/* Result */
.fdm-result {
    display: none;
    padding: 24px;
}

.fdm-result.active {
    display: block;
}

.fdm-result-header {
    text-align: center;
    margin-bottom: 20px;
}

.fdm-result-header h3 {
    color: var(--fdm-success);
    font-size: 20px;
    margin: 0 0 8px;
}

.fdm-result-header p {
    color: var(--fdm-text-light);
    font-size: 14px;
    margin: 0;
}

/* 3D Viewer */
.fdm-3d-viewer-container {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

#fdm-3d-viewer {
    width: 100%;
    height: 350px;
    cursor: grab;
}

#fdm-3d-viewer:active {
    cursor: grabbing;
}

.fdm-viewer-controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
}

.fdm-viewer-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.fdm-viewer-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.fdm-viewer-btn svg {
    width: 18px;
    height: 18px;
}

/* Model Info */
.fdm-model-info {
    background: var(--fdm-bg);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.fdm-model-info-item {
    text-align: center;
}

.fdm-model-info-item .label {
    font-size: 12px;
    color: var(--fdm-text-light);
    display: block;
    margin-bottom: 4px;
}

.fdm-model-info-item .value {
    font-size: 16px;
    font-weight: 600;
    color: var(--fdm-text);
}

/* Order Section */
.fdm-order-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#order-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.fdm-no-buttons {
    color: var(--fdm-text-light);
    font-style: italic;
    margin: 0;
}

.fdm-order-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--fdm-success) 0%, #00852a 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0, 163, 42, 0.3);
}

.fdm-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 163, 42, 0.4);
}

.fdm-order-btn svg {
    transition: transform 0.2s;
}

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

.fdm-new-btn {
    padding: 10px 20px;
    background: transparent;
    color: var(--fdm-primary);
    border: 1px solid var(--fdm-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.fdm-new-btn:hover {
    background: var(--fdm-primary);
    color: #fff;
}

/* Error */
.fdm-error {
    display: none;
    padding: 40px 24px;
    text-align: center;
}

.fdm-error.active {
    display: block;
}

.fdm-error svg {
    color: var(--fdm-error);
    margin-bottom: 16px;
}

.fdm-error p {
    color: var(--fdm-error);
    margin: 0 0 20px;
}

.fdm-retry-btn {
    padding: 12px 24px;
    background: var(--fdm-error);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.fdm-retry-btn:hover {
    background: #b32d2e;
}

/* Hide form when processing/done */
.fdm-relief-form.hidden {
    display: none;
}

/* Progress hint */
.fdm-progress-hint {
    font-size: 12px;
    color: var(--fdm-text-light);
    margin: 8px 0 0;
    opacity: 0.7;
}

/* Info Box */
.fdm-info-box {
    margin-top: 24px;
    padding: 20px;
    background: #f0f6fc;
    border-radius: 12px;
    border: 1px solid #c5d9ed;
}

.fdm-info-box h4 {
    margin: 0 0 12px;
    color: var(--fdm-primary);
    font-size: 16px;
}

.fdm-info-box ol {
    margin: 0;
    padding-left: 20px;
}

.fdm-info-box li {
    margin-bottom: 8px;
    color: var(--fdm-text);
    font-size: 14px;
    line-height: 1.5;
}

.fdm-info-box li:last-child {
    margin-bottom: 0;
}

.fdm-info-box strong {
    color: var(--fdm-primary);
}

/* Generate button with icon */
.fdm-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fdm-generate-btn .btn-icon {
    display: flex;
    align-items: center;
}

.fdm-generate-btn .btn-icon svg {
    width: 20px;
    height: 20px;
}

/* Debug Button */
.fdm-debug-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--fdm-border);
    background: var(--fdm-bg);
    color: var(--fdm-text-light);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.fdm-debug-btn:hover {
    background: var(--fdm-primary);
    color: white;
    border-color: var(--fdm-primary);
}

/* Debug Modal */
.fdm-debug-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.fdm-debug-modal.active {
    display: flex;
}

.fdm-debug-modal-content {
    background: white;
    border-radius: 12px;
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.fdm-debug-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--fdm-border);
}

.fdm-debug-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--fdm-text);
}

.fdm-debug-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 24px;
    color: var(--fdm-text-light);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.fdm-debug-modal-close:hover {
    background: var(--fdm-bg);
    color: var(--fdm-text);
}

.fdm-debug-modal-body {
    padding: 20px;
    overflow: auto;
    max-height: calc(90vh - 80px);
}

.fdm-debug-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
}

.fdm-debug-loading .fdm-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--fdm-border);
    border-top-color: var(--fdm-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.fdm-debug-loading p {
    margin-top: 16px;
    color: var(--fdm-text-light);
}

#debug-image {
    display: none;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid var(--fdm-border);
}

#debug-image.loaded {
    display: block;
}

.fdm-debug-legend {
    display: none;
    margin-top: 16px;
    padding: 16px;
    background: var(--fdm-bg);
    border-radius: 8px;
}

.fdm-debug-legend.visible {
    display: block;
}

.fdm-debug-legend h4 {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--fdm-text);
}

.fdm-debug-legend ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fdm-debug-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--fdm-text);
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.legend-yellow {
    background: #d4a84a;
}

.legend-green {
    background: #4caf50;
}

.legend-red {
    background: #e57373;
}

.legend-blue {
    background: #64b5f6;
}

/* Admin-Werkzeuge (nur für Administratoren sichtbar) */
.fdm-admin-tools {
    /* Sichtbarkeit setzt frontend.js direkt per style-Attribut - so haengt
       sie nicht daran, ob der Browser dieses Stylesheet schon neu geladen hat */
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 14px;
    border: 1px dashed var(--fdm-border);
    border-radius: 8px;
    background: var(--fdm-bg);
}

.fdm-admin-tools-label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fdm-text-light);
}

.fdm-heightmap-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--fdm-primary);
    border-radius: 6px;
    color: var(--fdm-primary);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.fdm-heightmap-btn:hover {
    background: var(--fdm-primary);
    color: #fff;
}

/* Farbansicht: aktiver Zustand des Umschalters im 3D-Viewer */
.fdm-viewer-btn.fdm-viewer-btn-active {
    background: var(--fdm-primary);
    color: #fff;
    border-color: var(--fdm-primary);
}

/* Hinweis in der Farbansicht: Grenze des UV-Aufdrucks.
   Steht ueber dem Modell, nicht darunter - eine stillschweigend geaenderte
   Relief-Tiefe muss auffallen, bevor jemand das Ergebnis beurteilt. */
.fdm-uv-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid #f0c33c;
    border-left: 4px solid #dba617;
    border-radius: 8px;
    background: #fcf5e6;
    color: #6b4e00;
    font-size: 13px;
    line-height: 1.5;
}

.fdm-uv-hinweis svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #dba617;
}

.fdm-uv-hinweis strong {
    display: block;
    margin-bottom: 2px;
    color: #5a4200;
}

/* Markierung direkt am Eingabefeld, damit der geaenderte Wert auffaellt */
.fdm-tiefe-begrenzt {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -6px 0 2px;
    font-size: 12px;
    font-weight: 600;
    color: #8a6100;
}

.fdm-tiefe-begrenzt svg {
    flex-shrink: 0;
    color: #dba617;
}

.fdm-setting-input input.fdm-feld-begrenzt {
    border-color: #dba617;
    background: #fcf5e6;
    font-weight: 600;
    animation: fdm-feld-blitz 1.1s ease-out 2;
}

@keyframes fdm-feld-blitz {
    0%   { box-shadow: 0 0 0 0 rgba(219, 166, 23, 0.75); }
    100% { box-shadow: 0 0 0 10px rgba(219, 166, 23, 0); }
}

/* ============================================================
   Breites Layout: Formular links, 3D-Ansicht rechts
   ============================================================
   Der Block war auf 600 px begrenzt und hat damit auf grossen
   Bildschirmen weniger als die Haelfte der Inhaltsbreite genutzt.
   Statt Formular UND Ergebnis nacheinander in eine schmale Spalte zu
   legen, stehen sie jetzt nebeneinander: die Einstellungen bleiben
   waehrend des Rechnens sichtbar, und wer nachjustiert, sieht das
   Modell direkt daneben. Unterhalb von 1024 px bleibt alles beim
   bisherigen Verhalten - untereinander, Formular wird ausgeblendet. */

.fdm-relief-frontend {
    max-width: 1320px;
}

/* Platzhalter, solange noch kein Modell erzeugt wurde.
   Nur im zweispaltigen Layout: einspaltig erscheint das Ergebnis ohnehin an
   genau dieser Stelle, und ein leerer Kasten von 320 px kostet auf dem
   Telefon einen ganzen Bildschirm. */
.fdm-ansicht-platzhalter {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    min-height: 320px;
    margin: 24px;
    padding: 32px 24px;
    border: 2px dashed var(--fdm-border);
    border-radius: 12px;
    background: var(--fdm-bg);
    color: var(--fdm-text-light);
}

.fdm-ansicht-platzhalter svg {
    color: var(--fdm-border);
}

.fdm-platzhalter-titel {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--fdm-text);
}

.fdm-platzhalter-text {
    margin: 0;
    max-width: 320px;
    font-size: 13px;
    line-height: 1.6;
}

@media (min-width: 1024px) {
    .fdm-ansicht-platzhalter {
        display: flex;
    }

    .fdm-relief-form-container {
        display: grid;
        grid-template-columns: minmax(340px, 38%) 1fr;
        align-items: start;
        /* overflow: hidden weiter oben wuerde das Mitlaufen der rechten
           Spalte verhindern - die Kinder haben keinen eigenen Hintergrund,
           es gibt also nichts zu beschneiden. */
        overflow: visible;
    }

    /* min-width: 0 ist bei Grid-Kindern noetig: die Vorgabe "auto" laesst sie
       nicht unter ihren Inhalt schrumpfen. Ohne das behaelt die Ansichtsspalte
       beim Verkleinern des Fensters ihre alte Breite, schiebt sich aus der
       Karte heraus und die Seite laeuft waagerecht. */
    .fdm-spalte-form {
        min-width: 0;
        border-right: 1px solid var(--fdm-border);
    }

    /* Bewusst NICHT mitlaufend (sticky): mit Viewer, Modellangaben und
       Bestellknoepfen wird die Spalte hoeher als der Bildschirm, und ein
       festgeklebter Block waere unten nicht mehr erreichbar. */
    .fdm-spalte-ansicht {
        min-width: 0;
        align-self: start;
    }

    /* Das Formular bleibt stehen, waehrend rechts gerechnet wird -
       genau dafuer ist die zweite Spalte da. */
    .fdm-relief-form.hidden {
        display: block;
    }

    /* Die Modellkacheln richten sich nach der SPALTE, nicht nach dem
       Fenster: die bisherigen Regeln haengen an der Fensterbreite und
       wuerden hier vier Kacheln in eine halb so breite Spalte zwaengen. */
    .fdm-model-options,
    .fdm-model-options-3,
    .fdm-model-options-4 {
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
        gap: 10px;
    }

    /* Der Schalter sieht wie eine Ueberschrift aus, BLEIBT aber bedienbar:
       "pointer-events: none" haette ihn zwar entschaerft, er waere aber
       weiterhin im Tab-Weg gelandet und haette auf Enter nichts getan. Geoeffnet
       wird das Feld beim Laden per JS, damit Maus und Tastatur gleich
       funktionieren und man es auch wieder zuklappen kann. */
    .fdm-settings-toggle {
        background: transparent;
        border: none;
        padding: 0 0 10px;
        font-weight: 600;
    }

    .fdm-settings-toggle:hover {
        background: transparent;
        color: var(--fdm-primary);
    }

    .fdm-settings-content {
        border: 1px solid var(--fdm-border);
        border-radius: 8px;
    }

    #fdm-3d-viewer {
        height: 520px;
    }

    .fdm-progress,
    .fdm-error {
        padding: 80px 24px;
    }

    /* Genauso hoch wie der Viewer, damit beim ersten Ergebnis nichts springt */
    .fdm-ansicht-platzhalter {
        min-height: 520px;
    }

    /* Die Uploadflaeche darf schmaler ausfallen - die Spalte ist ohnehin lang */
    .fdm-upload-area {
        min-height: 150px;
        padding: 28px 20px;
    }
}

@media (min-width: 1200px) {
    #fdm-3d-viewer {
        height: 600px;
    }

    .fdm-ansicht-platzhalter {
        min-height: 600px;
    }
}

/* Laufende Berechnung am Knopf sichtbar machen */
.fdm-generate-btn.fdm-laeuft {
    cursor: progress;
}