/* ============================================
   MODAL SYSTEM (Wiederverwendbar)
   ============================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 3000;
}

/* Kein Overlay - Hintergrund klickbar */
.modal-overlay.no-overlay {
    background: transparent;
    pointer-events: none;
}

.modal-overlay.no-overlay .modal-container {
    pointer-events: auto;
}

.modal-overlay.show {
    display: block;
}

.modal-container {
    position: absolute;
    top: 0;
    left: 0;
    max-height: calc(100vh - var(--header-height) - 30px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: modalSlideIn 0.2s ease-out;
}

/* Verschiebbare Modals */
.modal-container.draggable .modal-header {
    cursor: grab;
    user-select: none;
}

.modal-container.draggable .modal-header:active {
    cursor: grabbing;
}

.modal-container.dragging {
    transition: none;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
}

.modal-container.dragging .modal-header {
    cursor: grabbing;
}

/* Größenveränderbare Modals */
.modal-container.resizable {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Max-Höhe: Viewport minus Header (50px) und Footer (30px) und etwas Abstand */
    max-height: calc(100vh - var(--header-height, 50px) - var(--footer-height, 30px) - 30px);
    overflow: hidden;
}

.modal-container.resizable .modal-body {
    flex: 1;
    overflow-y: auto;
}

.modal-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.15) 50%);
    border-radius: 0 0 10px 0;
}

.modal-resize-handle::before {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(0,0,0,0.25);
    border-bottom: 2px solid rgba(0,0,0,0.25);
}

.modal-resize-handle:hover {
    background: linear-gradient(135deg, transparent 50%, rgba(var(--primary-color-rgb),0.3) 50%);
}

.modal-resize-handle:hover::before {
    border-color: var(--primary-color);
}

.modal-container.resizing {
    transition: none;
    user-select: none;
}

/* Positionen */
.modal-top-right .modal-container {
    top: calc(var(--header-height) + 15px);
    right: 15px;
    left: auto;
}

.modal-top-left .modal-container {
    top: calc(var(--header-height) + 15px);
    left: 15px;
    right: auto;
}

.modal-center .modal-container {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

.modal-center .modal-container {
    animation: modalCenterIn 0.2s ease-out;
}

@keyframes modalCenterIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.modal-header {
    background: var(--primary-color);
    color: white;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
}

.modal-header h3 i {
    font-size: 14px;
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Titel nimmt den freien Platz -> Hilfe- und Schließen-Button rechts gruppiert */
.modal-header h3 { margin-right: auto; }

.modal-help-btn {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.modal-help-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.modal-body {
    padding: 15px;
    max-height: calc(100vh - var(--header-height) - 100px);
    overflow-y: auto;
}

/* Section-Styles für Modal-Inhalte */
.modal-section h4 {
    margin: 0 0 15px 0;
    font-size: 13px;
    color: var(--primary-color);
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

/* Kompakte Modal-Section */
.modal-section.compact {
    font-size: 11px;
}

.modal-section.compact h4 {
    margin: 0 0 8px 0;
    font-size: 12px;
    padding-bottom: 6px;
}

/* ===== MEASUREMENT MODAL SPECIFIC ===== */

.measurement-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.measurement-row {
    display: flex;
    gap: 8px;
}

.measurement-btn {
    flex: 1;
    padding: 10px 12px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.measurement-btn:hover {
    background: #eee;
    border-color: #ccc;
    color: #333;
}

.measurement-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.measurement-btn i {
    font-size: 14px;
}

/* Measurement Results */
.measurement-results {
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 10px 12px;
}

.measurement-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 12px;
}

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

.result-label {
    color: #666;
    font-weight: 500;
    font-size: 11px;
}

.result-value {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 12px;
    font-family: 'Courier New', monospace;
}

/* Input-Felder für kopierbare Koordinaten */
.result-value-input {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--primary-color);
    font-weight: 600;
    width: 160px;
    cursor: text;
    text-align: right;
}

.result-value-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #fafafa;
}

.result-value-input:hover {
    background: #fafafa;
}

.result-value-input {
    user-select: all;
}

.measurement-help {
    margin-top: 12px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-left: 3px solid var(--primary-color);
    font-size: 11px;
    color: #555;
    border-radius: 4px;
    line-height: 1.4;
}

.measurement-help i {
    color: var(--primary-color);
    margin-right: 6px;
}

/* Clear Button */
.measurement-clear-btn {
    width: 100%;
    padding: 8px;
    margin-top: 12px;
    background: #666;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.measurement-clear-btn:hover {
    background: #555;
}

.measurement-clear-btn:disabled {
    background: #aaa;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Segments Container */
.measurement-segments {
    margin-top: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.segments-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.segments-header i {
    color: var(--primary-color);
    font-size: 11px;
}

.segments-list {
    max-height: 150px;
    overflow-y: auto;
    background: white;
}

.segment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 11px;
}

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

.segment-item.empty {
    justify-content: center;
    color: #999;
    font-style: italic;
}

.segment-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #f0f0f0;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    color: #666;
}

.segment-length {
    font-weight: 600;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* Actions Container */
.measurement-actions {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Download Button */
.measurement-action-btn {
    width: 100%;
    padding: 10px;
    background: var(--primary-color);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.measurement-action-btn:hover {
    background: var(--primary-hover);
}

.measurement-action-btn i {
    font-size: 14px;
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .modal-container {
        width: calc(100vw - 30px) !important;
        max-width: 400px;
    }

    .modal-top-right .modal-container,
    .modal-top-left .modal-container {
        left: 15px;
        right: 15px;
    }

    .modal-resize-handle {
        width: 24px;
        height: 24px;
    }

    .modal-close-btn {
        padding: 6px 10px;
        font-size: 16px;
    }

    .measurement-btn {
        padding: 12px;
    }
}

/* ===== GPS INFO BAR (kompakte Leiste unten) ===== */

.gps-info-bar {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 11px;
    z-index: 2000;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}

.gps-info-icon {
    color: #2196F3;
    font-size: 12px;
}

.gps-info-text {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
}

.gps-follow-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #ccc;
    cursor: pointer;
    margin-left: 4px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 8px;
}

.gps-follow-label input[type="checkbox"] {
    width: 13px;
    height: 13px;
    cursor: pointer;
    accent-color: #2196F3;
}

.gps-close-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0 0 0 4px;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.gps-close-btn:hover {
    color: #fff;
}

/* Record-Toggle: Aufzeichnung der Bewegungs-Spur */
.gps-record-btn {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 0 4px;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    margin-left: 4px;
    padding-left: 8px;
}
.gps-record-btn:hover {
    color: #fff;
}
.gps-record-btn.recording {
    color: #ff3b30;
    animation: gpsRecPulse 1.2s infinite;
}
@keyframes gpsRecPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* Save-Button: erscheint nur wenn ein Track aufgezeichnet ist */
.gps-save-btn {
    background: none;
    border: none;
    color: #4caf50;
    cursor: pointer;
    padding: 0 4px;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
}
.gps-save-btn:hover {
    color: #8bc34a;
}

/* Track-Distanz-Anzeige (ersetzt während Recording die Lat/Lon-Anzeige) */
.gps-info-text.recording {
    color: #ff8a65;
}

/* Mini-Popover über dem Save-Button mit Format-Wahl */
.gps-save-popover {
    position: fixed;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.gps-save-popover button {
    background: none;
    border: none;
    color: #eee;
    cursor: pointer;
    padding: 6px 10px;
    font-size: 12px;
    text-align: left;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gps-save-popover button:hover {
    background: rgba(255, 255, 255, 0.1);
}
.gps-save-popover .gps-save-clear {
    color: #ff8a80;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 2px;
}
.gps-save-popover .gps-save-clear:hover {
    background: rgba(255, 138, 128, 0.15);
}

/* Info-Button (?): Datenschutz- und Funktions-Erklärung */
.gps-help-btn {
    background: none;
    border: none;
    color: #9bbcd6;
    cursor: pointer;
    padding: 0 4px;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
}
.gps-help-btn:hover {
    color: #fff;
}

/* Info-Modal: zentriertes Overlay, dark theme passend zur Bar */
.gps-info-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gps-info-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.gps-info-modal-content {
    position: relative;
    background: #1f2937;
    color: #e5e7eb;
    border-radius: 8px;
    padding: 24px 28px 20px;
    max-width: 520px;
    width: calc(100% - 40px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    font-size: 13px;
    line-height: 1.5;
}
.gps-info-modal-content h3 {
    margin: 0 0 16px;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gps-info-modal-content h3 i {
    color: #2196F3;
}
.gps-info-modal-content h4 {
    margin: 0 0 8px;
    font-size: 13px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gps-info-section {
    margin-bottom: 18px;
}
.gps-info-section ul {
    margin: 0;
    padding-left: 18px;
}
.gps-info-section ul li {
    margin-bottom: 6px;
}
.gps-info-section ul li:last-child {
    margin-bottom: 0;
}
.gps-info-section strong {
    color: #fff;
}
/* Datenschutz-Sektion: visuell hervorgehoben, weil zentrales Versprechen */
.gps-info-privacy {
    background: rgba(76, 175, 80, 0.08);
    border-left: 3px solid #4caf50;
    padding: 12px 14px;
    border-radius: 4px;
}
.gps-info-privacy h4 i {
    color: #4caf50;
}
.gps-info-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
}
.gps-info-modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.gps-info-modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.gps-info-modal-ok {
    background: #2196F3;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.gps-info-modal-ok:hover {
    background: #1976d2;
}

/* ===== SHARE MODAL SPECIFIC ===== */

.share-content {
    padding: 10px 0;
}

.share-qr-code {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.share-qr-code img {
    border-radius: 8px;
    border: 4px solid #f5f5f5;
}

#shareQrCode {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

#shareQrCode img {
    border-radius: 8px;
    border: 4px solid #f5f5f5;
}

.qr-hint {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.qr-hint i {
    color: var(--primary-color);
}

.share-marker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: #f5f7fa;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.share-marker-btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    color: #555;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
}

.share-marker-btn:hover {
    background: #e8e8e8;
    border-color: #aaa;
}

.share-marker-btn.active {
    background: var(--primary-color, #007acc);
    color: #fff;
    border-color: var(--primary-color, #007acc);
}

.share-marker-btn i {
    color: var(--primary-color, #007acc);
}

.share-marker-btn.active i {
    color: #fff;
}

.share-marker-hint {
    font-size: 11px;
    color: #999;
    margin: -2px 0 8px;
    font-style: italic;
}

.share-marker-remove-btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 7px;
    cursor: pointer;
    color: #999;
    font-size: 12px;
    transition: color 0.2s, border-color 0.2s;
}

.share-marker-remove-btn:hover {
    color: #e53935;
    border-color: #e53935;
}

.share-marker-info {
    font-size: 11px;
    color: #888;
    margin-left: auto;
    font-family: monospace;
}

.share-marker-map-remove {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    color: #888;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: color 0.2s, border-color 0.2s;
    padding: 0;
}

.share-marker-map-remove:hover {
    color: #e53935;
    border-color: #e53935;
}

.share-url-input,
#shareUrl {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f8f8f8;
    color: #333;
    font-size: 12px;
    margin-bottom: 15px;
    word-break: break-all;
    box-sizing: border-box;
}

.share-url-input:focus,
#shareUrl:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Link-Feld + „Öffnen"-Button nebeneinander */
.share-url-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 15px;
}
.share-url-row .share-url-input,
.share-url-row #shareUrl {
    flex: 1;
    margin-bottom: 0;
}
.share-open-btn {
    flex: 0 0 auto;
    width: 42px;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    background: var(--primary-color);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.share-open-btn:hover { opacity: 0.9; }

.share-buttons {
    display: flex;
    gap: 10px;
}

.share-buttons button,
#btnCopyUrl {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    background: var(--primary-color);
    color: white;
}

.share-buttons button:hover,
#btnCopyUrl:hover {
    background: var(--primary-hover);
    color: white;
    transform: scale(1.02);
}

#copySuccess,
.copy-success {
    color: #4caf50;
    font-size: 12px;
    margin-top: 10px;
    display: none;
    text-align: center;
}

/* ===== WMS INFO MODAL SPECIFIC ===== */

/* Modul-Integration Hinweise */
.wms-info-module-hints {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    border-bottom: 1px solid #c8e6c9;
    padding: 8px 12px;
}

.wms-info-module-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #2e7d32;
    padding: 3px 0;
}

.wms-info-module-hint i {
    font-size: 12px;
    opacity: 0.8;
    width: 16px;
    text-align: center;
}

.wms-info-module-hint span {
    flex: 1;
}

.wms-info-module-link {
    color: #1b5e20;
    text-decoration: none;
    font-weight: 600;
    margin-left: 6px;
    white-space: nowrap;
    cursor: pointer;
}

.wms-info-module-link:hover {
    text-decoration: underline;
}

.wms-info-module-link i {
    font-size: 10px;
    margin-left: 2px;
}

.wms-info-content {
    min-height: 100px;
}

/* View-Mode-Umschalter (Karten <-> Tabellenansicht) */
.wms-info-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 6px 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid #eee;
}
.wms-info-toolbar-label {
    margin-right: 6px;
    color: #888;
    font-size: 12px;
}
.wms-info-view-btn {
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #888;
    cursor: pointer;
    padding: 4px 9px;
    font-size: 13px;
    line-height: 1;
    transition: all 0.15s;
}
.wms-info-view-btn:hover {
    background: #f0f0f0;
    color: #444;
}
.wms-info-view-btn.active {
    background: var(--primary-color, #9e5427);
    border-color: var(--primary-color, #9e5427);
    color: #fff;
}

/* Tabellenansicht: alle Features eines Layers in einer breiten Tabelle.
   Eigener vertikaler Scrollcontainer mit max-height, damit der horizontale
   Scrollbalken am unteren Rand der Tabelle stets sichtbar bleibt — sonst
   sitzt er weit unten am Wrap-Ende und der Nutzer muss erst vertikal scrollen,
   bevor er ihn erreicht. */
.wms-info-grid-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-width: 100%;
    max-height: 60vh;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
}
.wms-info-results-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--table-font-size, 12px);
    line-height: 1.3;
}
.wms-info-results-grid th {
    background: var(--table-head-bg, #f5f5f5);
    text-align: left;
    padding: 4px 8px;
    border-bottom: 2px solid var(--table-head-line, #ddd);
    border-right: 1px solid var(--table-line, #eee);
    font-weight: 600;
    color: var(--table-head-color, #444);
    white-space: nowrap;
    line-height: 1.2;
    position: sticky;
    top: 0;
    z-index: 1;
}
.wms-info-results-grid th:last-child {
    border-right: none;
}

/* Zellen tragen nur Padding + Trenner. Die eigentliche Höhe wird über den
   inneren Wrapper-DIV gesteuert — auf <td> wirkt `height` nur als Mindestmaß,
   das ist im Tabellen-Layout-Algorithmus so vorgesehen. */
.wms-info-results-grid td {
    padding: var(--table-cell-padding, 5px 10px);
    border-bottom: 1px solid var(--table-line, #eee);
    border-right: 1px solid var(--table-line, #eee);   /* Spalten-Trenner */
    vertical-align: middle;
    box-sizing: border-box;
}
.wms-info-results-grid td:last-child {
    border-right: none;
}
.wms-info-results-grid tr:hover td {
    background: var(--table-row-hover, #fafafa);
}

/* Innerer Cell-Wrapper: erzwingt die kompakte Zeilenhöhe als Block-Element.
   Damit kann kein Kindelement die Zeile aufpumpen — alles wird in 22 px
   gerendert (oder via overflow:hidden abgeschnitten). */
.wms-info-cell-inner {
    display: block;
    height: 22px;
    max-height: 22px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wms-info-cell-inner > * {
    line-height: 22px;
    vertical-align: middle;
}

/* Aktions-Spalte: Zoom und Edit nebeneinander, einheitlich gestylt
   (analog zur Feature-Toolbar in der Detailansicht). Die Buttons stehen in
   einem Flex-Wrapper-DIV; damit ist die Layoutachse unabhängig vom display
   der Buttons selbst (Basis-CSS setzt display:flex auf die Buttons). */
.wms-info-results-grid .wms-info-action-col {
    width: 1%;                 /* Spalte so schmal wie nötig */
    white-space: nowrap;
    padding: 2px 6px;
}
.wms-info-results-grid .wms-info-action-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}
.wms-info-results-grid .wms-info-action-col .wms-info-zoom-btn,
.wms-info-results-grid .wms-info-action-col .wms-info-edit-btn {
    width: var(--table-action-size, 20px);
    height: var(--table-action-size, 20px);
    min-width: var(--table-action-size, 20px);
    min-height: var(--table-action-size, 20px);
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 3px;
    background: var(--table-action-bg, #666);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    transition: all 0.2s;
    vertical-align: middle;
}
.wms-info-results-grid .wms-info-action-col .wms-info-zoom-btn:hover,
.wms-info-results-grid .wms-info-action-col .wms-info-edit-btn:hover {
    background: var(--table-action-bg-hover, #444);
}
.wms-info-results-grid .wms-info-action-col .wms-info-zoom-btn:active,
.wms-info-results-grid .wms-info-action-col .wms-info-edit-btn:active {
    background: var(--table-action-bg-active, #333);
}
.wms-info-results-grid .wms-info-action-col .wms-info-zoom-btn i,
.wms-info-results-grid .wms-info-action-col .wms-info-edit-btn i {
    font-size: 10px;
    color: #fff;
    transform: none !important;
}

.wms-info-results-grid .wms-info-empty {
    color: #bbb;
}

/* Links in der Tabellenansicht wie in der Detailansicht: Hausfarbe, Unterstrich
   erst beim Überfahren. In der Detailansicht kommt das von `.wms-info-value a`;
   die Tabellenzellen tragen diese Klasse nicht, dort blieb deshalb das
   Browser-Blau mit fester Unterstreichung stehen. */
.wms-info-results-grid td a {
    color: var(--primary-color);
    text-decoration: none;
}

.wms-info-results-grid td a:hover {
    text-decoration: underline;
}

/* Floating-Spinner während Mehrfach-Layer-Abfrage (vor Modal-Anzeige) */
.query-progress-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 13px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    white-space: nowrap;
}
.query-progress-overlay i.fa-spinner {
    color: #fff;
    font-size: 16px;
}

.wms-info-placeholder,
.wms-info-empty,
.wms-info-loading,
.wms-info-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
    color: #666;
}

.wms-info-placeholder i,
.wms-info-empty i,
.wms-info-loading i,
.wms-info-error i {
    font-size: 32px;
    margin-bottom: 12px;
    color: #aaa;
}

.wms-info-loading i {
    color: var(--primary-color);
}

.wms-info-error i {
    color: #e74c3c;
}

.wms-info-placeholder p,
.wms-info-empty p,
.wms-info-loading p,
.wms-info-error p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.wms-info-empty small {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    color: #999;
}

/* Layer Header (Akkordeon) */
.wms-info-layer {
    margin-bottom: 12px;
}

.wms-info-layer:last-child {
    margin-bottom: 0;
}

.wms-info-layer-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: var(--primary-color);
    color: white;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-radius 0.2s;
    user-select: none;
}

.wms-info-layer-header:hover {
    background: var(--primary-hover, #B22222);
}

.wms-info-layer-header.open {
    border-radius: 6px 6px 0 0;
}

/* Pfeil ist seit 26.10.2026 ein <button> (Barrierefreiheit) — sieht aus wie vorher */
.wms-info-layer-toggle {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
}

.wms-info-layer-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

.wms-info-layer-header > i.fa-chevron-right,
.wms-info-layer-toggle > i.fa-chevron-right {
    font-size: 10px;
    opacity: 0.8;
    transition: transform 0.2s;
}

.wms-info-layer-header.open > i.fa-chevron-right,
.wms-info-layer-header.open > .wms-info-layer-toggle > i.fa-chevron-right {
    transform: rotate(90deg);
}

.wms-info-layer-header i.fa-layer-group {
    font-size: 12px;
    opacity: 0.8;
}

.wms-info-type {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.7;
}

.wms-info-count {
    margin-left: auto;
    background: rgba(255,255,255,0.2);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    white-space: nowrap;
}

/* Layer Zoom Button (auf alle Objekte zoomen) */
.wms-info-layer-zoom-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: rgba(255,255,255,0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-left: 4px;
}

.wms-info-layer-zoom-btn:hover {
    background: rgba(255,255,255,0.4);
}

/* Export-Zeile ÜBER der Tabelle (beschrifteter Button, heller Hintergrund) */
.wms-info-export-row {
    padding: 6px 8px 4px;
}

.wms-info-layer-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f5f5f5;
    color: #333;
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.2s;
}

.wms-info-layer-export-btn:hover {
    background: #e8e8e8;
}

.wms-info-layer-zoom-btn:active {
    background: rgba(255,255,255,0.5);
}

/* Features Container */
.wms-info-features {
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: #fafafa;
}

/* Single Feature (kompakt mit Rand) */
.wms-info-feature {
    border: none;
    border-bottom: 1px solid #e8e8e8;
    margin: 0 8px;
    padding: 8px 0;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
}

.wms-info-feature:first-child {
    margin-top: 0;
}

.wms-info-feature:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Feature Toolbar (grauer Header mit Zoom-Button) */
.wms-info-feature-toolbar {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    background: #e8e8e8;
    border-bottom: 1px solid #ccc;
}

/* Zoom-Button Icon nicht rotieren */
.wms-info-zoom-btn i,
.wms-info-layer-zoom-btn i {
    transform: none !important;
    color: white;
}

.wms-info-zoom-btn i {
    font-size: 10px;
}

.wms-info-layer-zoom-btn i {
    font-size: 12px;
}

/* Zoom Button (einzelnes Feature) */
.wms-info-zoom-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: #666;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.wms-info-zoom-btn:hover {
    background: #444;
}

.wms-info-zoom-btn:active {
    background: #333;
}

/* POI-spezifische Buttons im vereinheitlichten Abfrage-Modal (Route/GMaps/Bearbeiten) */
.wms-info-poi-route-btn,
.wms-info-poi-gmaps-btn,
.wms-info-poi-edit-btn {
    width: 20px;
    height: 20px;
    margin-left: 4px;
    padding: 0;
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.wms-info-poi-route-btn i,
.wms-info-poi-gmaps-btn i,
.wms-info-poi-edit-btn i {
    transform: none !important;
    color: #fff;
    font-size: 10px;
}
.wms-info-poi-route-btn { background: #2f6fb3; }
.wms-info-poi-route-btn:hover { background: #24578c; }
.wms-info-poi-gmaps-btn { background: #2e8b57; }
.wms-info-poi-gmaps-btn:hover { background: #236f45; }
.wms-info-poi-edit-btn { background: #8B0000; }
.wms-info-poi-edit-btn:hover { background: #6d0000; }

/* Höhenprofil-Button im Abfrageergebnis (Primärfarbe, dezent) */
.wms-info-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.wms-info-profile-btn:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.wms-info-profile-btn:active {
    background: var(--primary-hover);
    filter: brightness(0.95);
}

.wms-info-profile-btn i {
    color: #fff;
    font-size: 12px;
}

/* Properties Table (kompakt) */
.wms-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--table-kv-font-size, 12px);
    /* Feste Spaltenbreiten: ohne das zieht ein einzelnes langes Attribut-Label die
       Schluesselspalte auf, die Wertspalte wird gequetscht und Werte brechen mitten
       im Wort um (z.B. "2008-01-0 1"). */
    table-layout: fixed;
}

.wms-info-table tr:nth-child(even) {
    background: var(--table-zebra, #f8f8f8);
}

.wms-info-table td {
    padding: var(--table-kv-cell-padding, 4px 8px);
    border-bottom: 1px solid var(--table-line, #eee);
    vertical-align: top;
}

.wms-info-table tr:last-child td {
    border-bottom: none;
}

.wms-info-key {
    color: #555;
    font-weight: 500;
    width: 35%;
    /* Lange Feldbezeichnungen umbrechen statt abschneiden. */
    word-break: break-word;
    overflow-wrap: break-word;
    border-right: 1px solid var(--table-line, #eee);
}

.wms-info-value {
    color: #333;
    word-break: break-word;
    overflow-wrap: break-word;
}

.wms-info-value a {
    color: var(--primary-color);
    text-decoration: none;
}

.wms-info-value a:hover {
    text-decoration: underline;
}

/* Inline-Leerwert (—) in einer Wert-Zelle darf NICHT das große, zentrierte
   Empty-State-Panel-Styling (.wms-info-empty) erben — sonst wird die Zeile viel
   zu hoch (z.B. Flurstück ohne Nenner). Hier bewusst nur inline + ohne Padding. */
.wms-info-value .wms-info-empty {
    display: inline;
    padding: 0;
    color: #999;
}

/* Raw HTML/Text Anzeige */
.wms-info-raw-html {
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
}

.wms-info-raw-html h1 {
    font-size: 15px;
    font-weight: 700;
    margin: 10px 0 6px;
    color: #222;
    border-bottom: 2px solid var(--primary-color, #007acc);
    padding-bottom: 4px;
}

.wms-info-raw-html h2 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 8px 0 5px;
    color: #333;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 3px;
}

.wms-info-raw-html h3 {
    font-size: 11px;
    font-weight: 600;
    margin: 4px 0 2px;
    color: #555;
}

.wms-info-raw-html h4,
.wms-info-raw-html h5,
.wms-info-raw-html h6 {
    font-size: 12px;
    font-weight: 600;
    margin: 4px 0 3px;
    color: #555;
}

.wms-info-raw-html a {
    color: var(--primary-color, #007acc);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}

.wms-info-raw-html a:hover {
    color: var(--primary-hover, #005fa3);
    border-bottom-color: var(--primary-color, #007acc);
}

.wms-info-raw-html a:visited {
    color: var(--primary-color, #007acc);
    opacity: 0.85;
}

.wms-info-raw-html img {
    max-width: 100%;
    height: auto;
}

.wms-info-raw-html table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.wms-info-raw-html table th,
.wms-info-raw-html table td {
    padding: 6px 8px;
    border: 1px solid #ddd;
    text-align: left;
}

.wms-info-raw-html table th {
    background: #f5f5f5;
    font-weight: 600;
}

.wms-info-raw-html table tr:nth-child(even) {
    background: #fafafa;
}

.wms-info-raw-text {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    background: #f8f8f8;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* Mobile Anpassungen für WMS Info */
@media (max-width: 768px) {
    .wms-info-layer-header {
        padding: 12px;
        font-size: 14px;
    }

    .wms-info-feature {
        margin: 8px;
    }

    .wms-info-table {
        font-size: 12px;
    }

    .wms-info-table td {
        padding: 5px 8px;
    }
}

/* ===== EXTERNAL WMS MANAGER ===== */

/* Add WMS Button im Sidebar Header */
.add-wms-btn {
    height: 26px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 4px;
    padding: 0 8px 0 6px;
    transition: all 0.2s;
}

.add-wms-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.add-wms-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1;
}

/* External WMS Modal Content */
.external-wms-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* URL Section */
.wms-url-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wms-url-section label {
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.wms-url-input-wrapper {
    display: flex;
    gap: 8px;
}

.wms-url-input-wrapper input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    transition: border-color 0.2s;
}

.wms-url-input-wrapper input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.wms-load-btn {
    padding: 10px 14px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.wms-load-btn:hover {
    background: var(--primary-hover);
}

/* Clear Button */
.wms-clear-btn {
    padding: 10px 12px;
    background: #f0f0f0;
    color: #666;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.wms-clear-btn:hover {
    background: #e0e0e0;
    color: #333;
}

.wms-url-hint {
    font-size: 11px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}

.wms-url-hint i {
    color: var(--primary-color);
}

/* Loading */
.wms-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: var(--primary-color);
    font-size: 13px;
}

.wms-loading i {
    font-size: 18px;
}

/* Error */
.wms-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #fff5f5;
    border: 1px solid #ffcdd2;
    border-radius: 6px;
    color: #c62828;
    font-size: 12px;
}

.wms-error i {
    font-size: 16px;
}

/* Layers Section */
.wms-layers-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wms-service-info {
    padding: 10px 12px;
    background: #f5f5f5;
    border-radius: 6px;
}

.wms-service-info h4 {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: var(--primary-color);
}

.wms-service-info small {
    color: #666;
    font-size: 11px;
    display: block;
    line-height: 1.4;
}

.wms-layers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.wms-layers-header span {
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.wms-select-btn {
    background: transparent;
    border: 1px solid #ddd;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.wms-select-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Layer List */
.wms-layers-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
}

.wms-layer-item {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.2s;
}

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

.wms-layer-item:hover {
    background: #f0f0f0;
}

.wms-layer-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: #333;
}

.wms-layer-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.wms-layer-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wms-queryable-icon {
    color: #4CAF50;
    font-size: 11px;
}

/* ============================================
   WMS Time-Dimension (Modal-Auswahl + Tree)
   ============================================ */
.wms-time-icon {
    color: #f59e0b;
    font-size: 11px;
    margin-left: 4px;
}

.wms-layer-item-time {
    background: #fffaf0;
}

.wms-time-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #f1d68d;
    border-radius: 4px;
}

.wms-time-control .wms-time-label {
    font-size: 11px;
    font-weight: 600;
    color: #8a5a00;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wms-time-control .wms-time-select {
    width: 100%;
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
}

.wms-time-control .wms-time-slider {
    width: 100%;
    margin: 2px 0;
}

.wms-time-control .wms-time-hint {
    font-size: 10px;
    color: #888;
    line-height: 1.3;
}

/* Time-Sektion im Layer-Settings-Panel (Zahnrad) */
.layer-settings-panel .time-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.layer-settings-panel .time-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #555;
    margin-bottom: 2px;
}

.layer-settings-panel .time-slider-header .time-value {
    font-weight: 600;
    color: #8a5a00;
}

.layer-settings-panel .layer-time-select {
    width: 100%;
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
}

.layer-settings-panel .layer-time-slider {
    width: 100%;
}

.layer-settings-panel .layer-time-open-modal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 3px;
    background: #fff;
    color: var(--primary-color, #007acc);
    cursor: pointer;
}

.layer-settings-panel .layer-time-open-modal:hover {
    background: var(--primary-color, #007acc);
    color: #fff;
}

/* ============================================
   Timeline-Modal (dedizierte Zeitleisten-Ansicht)
   ============================================ */
.layer-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 2px;
}

.layer-timeline .tl-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}

.layer-timeline .tl-current-label {
    color: #666;
}

.layer-timeline .tl-current-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color, #007acc);
}

.layer-timeline .tl-counter {
    color: #999;
    font-size: 11px;
    margin-left: auto;
}

.layer-timeline .tl-loading-indicator {
    display: none;
    color: var(--primary-color, #007acc);
    font-size: 14px;
    margin-left: 4px;
}

.layer-timeline .tl-loading-indicator.visible {
    display: inline-block;
}

.layer-timeline .tl-slider {
    width: 100%;
    margin: 4px 0 0;
}

.layer-timeline .tl-ticks {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2px;
    margin-top: 2px;
    font-size: 10px;
    color: #888;
    user-select: none;
}

.layer-timeline .tl-tick {
    flex: 1 1 0;
    text-align: center;
    cursor: pointer;
    padding: 2px 0;
    border-radius: 2px;
    line-height: 1.2;
    transition: background-color 0.15s, color 0.15s;
}

.layer-timeline .tl-tick:hover {
    background: rgba(0, 122, 204, 0.1);
    color: var(--primary-color, #007acc);
}

.layer-timeline .tl-tick.active {
    background: var(--primary-color, #007acc);
    color: #fff;
    font-weight: 600;
}

.layer-timeline .tl-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

.layer-timeline .tl-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 3px;
    color: #333;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.15s, color 0.15s;
}

.layer-timeline .tl-btn:hover {
    background: var(--primary-color, #007acc);
    color: #fff;
    border-color: var(--primary-color, #007acc);
}

.layer-timeline .tl-play {
    background: var(--primary-color, #007acc);
    color: #fff;
    border-color: var(--primary-color, #007acc);
}

.layer-timeline .tl-play:hover {
    background: var(--primary-hover, #008ae6);
    border-color: var(--primary-hover, #008ae6);
}

.layer-timeline .tl-speed-label,
.layer-timeline .tl-loop-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #555;
    margin-left: 8px;
}

.layer-timeline .tl-speed {
    padding: 3px 4px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 3px;
    font-size: 12px;
    background: #fff;
}

.wms-layer-abstract {
    display: block;
    margin-top: 5px;
    margin-left: 24px;
    font-size: 10px;
    color: #888;
    line-height: 1.4;
}

/* WMS Layer-Baum Gruppen */
.wms-group {
    margin-bottom: 1px;
}

.wms-group-header {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    background: #f0f0f0;
    cursor: pointer;
    user-select: none;
    gap: 6px;
    transition: background 0.15s;
}

.wms-group-header:hover {
    background: #e4e4e4;
}

/* Pfeil ist seit 26.10.2026 ein <button> (Barrierefreiheit); gedreht wird nur das Icon */
.wms-group-toggle {
    width: 12px;
    font-size: 9px;
    color: #666;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 1;
}

.wms-group-toggle > i {
    transition: transform 0.2s;
}

.wms-group-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

.wms-group.collapsed .wms-group-toggle > i {
    transform: rotate(-90deg);
}

.wms-group-checkbox {
    width: 14px;
    height: 14px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

.wms-group-icon {
    font-size: 11px;
    color: var(--primary-color, #2196f3);
    width: 14px;
    flex-shrink: 0;
}

.wms-group-name {
    font-size: 11px;
    font-weight: 500;
    color: #333;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wms-group-content {
    padding-left: 14px;
    border-left: 1px solid #ddd;
    margin-left: 5px;
}

.wms-group.collapsed > .wms-group-content {
    display: none;
}

/* Verschachtelte Gruppen etwas heller */
.wms-group .wms-group > .wms-group-header {
    background: #f5f5f5;
}

.wms-group .wms-group .wms-group > .wms-group-header {
    background: #fafafa;
}

/* Actions */
.wms-actions {
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.wms-action-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.wms-action-btn.primary {
    background: var(--primary-color);
    color: white;
}

.wms-action-btn.primary:hover:not(:disabled) {
    background: var(--primary-hover);
}

.wms-action-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ===== GEODATA LOADER ===== */

.geodata-content {
    padding: 16px;
}

.geodata-drop-zone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #888;
    margin-bottom: 12px;
}

.geodata-drop-zone:hover,
.geodata-drop-zone.dragover {
    border-color: var(--primary-color, #8B0000);
    background: rgba(139, 0, 0, 0.04);
    color: var(--primary-color, #8B0000);
}

.geodata-drop-zone i {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

.geodata-drop-zone p {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
}

.geodata-drop-zone small {
    font-size: 11px;
    color: #aaa;
}

.geodata-url-section {
    margin-bottom: 12px;
}

.geodata-url-section label {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
    display: block;
}

.geodata-url-row {
    display: flex;
    gap: 4px;
}

.geodata-url-input {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

.geodata-url-input:focus {
    border-color: var(--primary-color, #8B0000);
    outline: none;
    box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.15);
}

.geodata-url-btn {
    padding: 6px 10px;
    background: var(--primary-color, #8B0000);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.geodata-url-btn:hover {
    opacity: 0.9;
}

.geodata-status {
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 10px;
}

.geodata-status-success { background: #d4edda; color: #155724; }
.geodata-status-error { background: #f8d7da; color: #721c24; }
.geodata-status-loading { background: #e2e3e5; color: #383d41; }

.geodata-loaded-list {
    margin-top: 8px;
}

.geodata-loaded-title {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    display: block;
    margin-bottom: 6px;
}

.geodata-loaded-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    margin-bottom: 3px;
    background: #f8f8f8;
    font-size: 12px;
}

.geodata-loaded-item:hover {
    background: #edf2ff;
}

.geodata-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.geodata-loaded-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.geodata-zoom-btn,
.geodata-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: #888;
    font-size: 11px;
}

.geodata-zoom-btn:hover { color: #2980b9; }
.geodata-remove-btn:hover { color: #c00; }

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .wms-url-input-wrapper {
        flex-direction: column;
    }

    .wms-load-btn {
        width: 100%;
    }

    .wms-layers-list {
        max-height: 200px;
    }
}


/* ============================================
   DRAWING TOOL - Compact Layout
   ============================================ */

.draw-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Compact Sections */
.draw-section {
    background: #f5f5f5;
    border-radius: 5px;
    padding: 6px;
}

.draw-section-title {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.draw-section-title i {
    color: var(--primary-color);
    font-size: 10px;
}

/* Drawing Mode Buttons */
.draw-modes {
    display: flex;
    gap: 4px;
}

.draw-btn {
    flex: 1;
    padding: 6px 3px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 8px;
    color: #666;
}

.draw-btn i {
    font-size: 12px;
}

/* Punkt-Icon etwas kleiner */
.draw-btn[data-mode="Point"] i {
    font-size: 9px;
}

.draw-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.draw-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Symbol Buttons */
.symbol-btns {
    display: flex;
    gap: 4px;
}

.symbol-btn {
    flex: 1;
    padding: 6px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
}

.symbol-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.symbol-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Snap Options */
.snap-options {
    display: flex;
    gap: 8px;
}

.snap-option {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: #555;
    cursor: pointer;
}

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

/* Style Options - Compact */
.draw-styles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.style-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.style-row label {
    flex: 0 0 55px;
    font-size: 11px;
    color: #555;
}

.style-row input[type="color"] {
    width: 32px;
    height: 24px;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    padding: 1px;
}

.style-row input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    background: #ddd;
    border-radius: 2px;
    outline: none;
}

.style-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
}

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

.style-row span {
    flex: 0 0 30px;
    font-size: 10px;
    color: #888;
    text-align: right;
}

.style-row input[type="text"] {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 11px;
}

.style-row input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Rotation Row */
.rotation-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rotation-row label {
    flex: 0 0 55px;
    font-size: 11px;
    color: #555;
}

.rotation-row input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    background: #ddd;
    border-radius: 2px;
    outline: none;
}

.rotation-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
}

.rotation-row span {
    flex: 0 0 35px;
    font-size: 10px;
    color: #888;
    text-align: right;
}

/* Feature Actions */
.feature-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.feature-action-btn {
    flex: 1;
    padding: 6px 8px;
    background: var(--primary-color);
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.feature-action-btn:hover {
    background: var(--primary-hover);
}

.feature-action-btn.danger {
    background: #dc3545;
}

.feature-action-btn.danger:hover {
    background: #c82333;
}

/* Export Buttons */
.export-btns {
    display: flex;
    gap: 3px;
}

.export-btn {
    flex: 1;
    padding: 4px 3px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 8px;
    color: #666;
}

.export-btn i {
    font-size: 10px;
    color: var(--primary-color);
}

.export-btn:hover {
    border-color: var(--primary-color);
    background: #fafafa;
}

/* Actions Row */
.draw-actions {
    display: flex;
    gap: 4px;
}

.draw-action-btn {
    flex: 1;
    padding: 5px;
    background: #e8e8e8;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #555;
    font-size: 9px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.draw-action-btn:hover {
    background: #ddd;
    color: #333;
}

.draw-action-btn i {
    font-size: 10px;
}

/* Draw Row */
.draw-row {
    display: flex;
    gap: 3px;
}

/* Draw Tools Grid - gleichmäßige Breite */
.draw-tools {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
}

.draw-tools .draw-btn {
    flex: none;
    width: 100%;
}

/* Draw Label */
.draw-label {
    font-size: 9px;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
}

/* Style Label inline */
.style-label {
    font-size: 9px;
    color: #555;
    min-width: 38px;
}

/* Draw Style Row */
.draw-style-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.draw-style-row:last-child {
    margin-bottom: 0;
}

.draw-style-row input[type="color"] {
    width: 24px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    padding: 1px;
}

.draw-style-row input[type="range"] {
    flex: 1;
    height: 3px;
    -webkit-appearance: none;
    background: #ddd;
    border-radius: 2px;
    outline: none;
}

.draw-style-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
}

.draw-style-row span {
    font-size: 9px;
    color: #888;
    min-width: 22px;
    text-align: right;
}

.draw-style-row input[type="text"] {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 10px;
}

.draw-style-row input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Symbol Buttons (alternative class name) */
.sym-btn {
    flex: 1;
    padding: 4px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #666;
}

.sym-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.sym-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Action Buttons */
.action-btn {
    flex: 1;
    padding: 5px 8px;
    background: #e8e8e8;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #555;
    font-size: 9px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.action-btn:hover {
    background: #ddd;
    color: #333;
}

.action-btn.primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.action-btn.primary:hover {
    background: var(--primary-hover);
}

.action-btn.danger {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
}

.action-btn.danger:hover {
    background: #c82333;
}

.action-btn i {
    font-size: 9px;
}

/* Help Text */
.draw-help {
    padding: 4px 6px;
    background: #e8f4fd;
    border-radius: 3px;
    font-size: 9px;
    color: #555;
    text-align: center;
}

/* Color Picker Row - kompakt */
.color-picker-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.color-picker-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.color-picker-item span {
    font-size: 8px;
    color: #888;
}

/* Color Picker Button (iro.js) */
.color-picker-btn {
    width: 100%;
    height: 22px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
    transition: all 0.15s;
}

.color-picker-btn:hover {
    border-color: var(--primary-color);
    transform: scale(1.02);
}

/* Color Picker Container - kompakt */
.color-picker-container {
    position: relative;
    margin-top: 6px;
    padding: 8px;
    padding-top: 6px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

.color-picker-container #color-picker-wheel {
    display: flex;
    justify-content: center;
}

.color-picker-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: #f0f0f0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #666;
    transition: all 0.15s;
    z-index: 10;
}

.color-picker-close:hover {
    background: #e0e0e0;
    color: #333;
}

/* Color Picker Inputs - kompakt inline */
.color-picker-inputs {
    margin-top: 6px;
}

.color-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.color-input-row input[type="text"] {
    width: 70px;
    padding: 3px 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 10px;
    font-family: 'Consolas', 'Monaco', monospace;
    text-transform: uppercase;
}

.color-input-row input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* RGB Inputs inline */
.rgb-inputs {
    display: flex;
    gap: 2px;
    flex: 1;
}

.rgb-inputs input[type="number"] {
    width: 100%;
    padding: 3px 2px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 9px;
    text-align: center;
    -moz-appearance: textfield;
}

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

.rgb-inputs input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-color);
}

.rgb-inputs input[type="number"]::placeholder {
    color: #bbb;
    font-size: 8px;
}

#draw-help-text {
    flex: 1;
}

/* Selected Feature Section */
#selected-feature-section {
    animation: fadeIn 0.15s ease-out;
}

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

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .draw-modes {
        flex-wrap: wrap;
    }

    .draw-btn {
        min-width: 40px;
        padding: 6px 3px;
    }

    .draw-btn i {
        font-size: 12px;
    }

    .style-row label {
        flex: 0 0 50px;
        font-size: 10px;
    }

    .export-btn {
        padding: 5px 3px;
        font-size: 8px;
    }

    .snap-options {
        flex-direction: column;
        gap: 5px;
    }
}

/* ============================================
   START-MODAL (Nutzungsbedingungen)
   ============================================ */
.start-modal-content {
    padding: 5px 0;
}

.start-modal-body {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
    line-height: 1.6;
}

.start-modal-body h4 {
    margin: 15px 0 10px 0;
    color: var(--primary-color, #8B0000);
}

.start-modal-body ul {
    margin: 10px 0;
    padding-left: 20px;
}

.start-modal-body li {
    margin-bottom: 5px;
}

/* Links im Hinweistext in der Hausfarbe statt im Browser-Blau. Der Inhalt
   kommt als HTML aus der Dienstkonfiguration, die Farbe lässt sich dort
   also nicht sinnvoll pflegen — sie gehört ins Grundstyling. */
.start-modal-body a {
    color: var(--primary-color, #8B0000);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.start-modal-body a:hover,
.start-modal-body a:focus-visible {
    color: var(--primary-hover, #B22222);
}

.start-modal-body a:focus-visible {
    outline: 2px solid var(--primary-color, #8B0000);
    outline-offset: 2px;
    border-radius: 2px;
}

.start-modal-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px;
    background: #f8f8f8;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
}

.start-modal-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--primary-color, #8B0000);
}

.start-modal-checkbox label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
    user-select: none;
    /* Nur leicht hervorgehoben: Die Zustimmung soll sich vom Fließtext
       abheben, aber nicht schreien. */
    font-weight: 500;
    color: var(--text-color, #333);
}

/* Der Text der Zustimmung kommt aus der Dienstkonfiguration und enthält dort
   häufig <strong> oder <b>. Das wirkte neben dem ohnehin kräftigen Rahmen zu
   fett, deshalb hier auf dasselbe mittlere Gewicht gebracht. */
.start-modal-checkbox label strong,
.start-modal-checkbox label b {
    font-weight: 500;
}

.start-modal-footer {
    display: flex;
    justify-content: center;
}

.start-modal-footer .btn-primary {
    padding: 12px 40px;
    font-size: 15px;
    border: none;
    border-radius: 6px;
    background: var(--primary-color, #8B0000);
    color: white;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.start-modal-footer .btn-primary:hover:not(:disabled) {
    background: var(--primary-hover, #B22222);
}

.start-modal-footer .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Hinweis im Abfrage-Ergebnis, wenn eine Obergrenze gegriffen hat
   (Gesamtbudget erschoepft bzw. Ebenen-Limit erreicht). */
.wms-info-limit-notice {
    margin: 0 0 8px;
    padding: 7px 10px;
    background: #fff8e1;
    border-left: 3px solid #f0ad4e;
    color: #8a6d3b;
    font-size: 11.5px;
    line-height: 1.45;
}
.wms-info-limit-notice i {
    margin-right: 5px;
}

/* =========================================================================
   Attributtabelle einer Mapserver-Ebene (attribute-table.js, nur lesen)
   Aufbau wie die Tabelle des Edit-Moduls (module/edit/css).
   ========================================================================= */

.attr-table-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: 0;
    min-width: 0;   /* sonst wächst der Kasten auf Tabellenbreite statt zu scrollen */
}

.attr-table-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--table-line, #eee);
    background: var(--toolbar-bg, #fafafa);
    font-size: var(--table-font-size, 12px);
    flex: 0 0 auto;
}

.attr-table-spacer { flex: 1 1 auto; }
.attr-table-info { color: var(--toolbar-text, #555); }

.attr-table-pagesize {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--toolbar-text, #555);
}

.attr-table-pagesize select { font-size: 12px; padding: 1px 4px; }

.attr-table-pager { display: inline-flex; align-items: center; gap: 2px; }
.attr-table-page { min-width: 54px; text-align: center; color: var(--toolbar-text, #555); }

.attr-table-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 3px;
    color: var(--toolbar-text, #555);
    font-size: var(--table-font-size, 12px);
}

.attr-table-btn:hover:not(:disabled) {
    background: rgba(var(--primary-color-rgb, 0, 122, 204), 0.1);
    color: var(--primary-color, #007acc);
}

.attr-table-btn:disabled { color: #cbd5e1; cursor: default; }

.attr-table-clearfilter { color: #d97706; }

.attr-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: auto;
}

.attr-table {
    border-collapse: separate;   /* sonst verschwinden Rahmen unter sticky-Zellen */
    border-spacing: 0;
    font-size: var(--table-font-size, 12px);
    width: max-content;
    min-width: 100%;
}

.attr-table th,
.attr-table td {
    padding: var(--table-cell-padding, 5px 10px);
    border-bottom: 1px solid var(--table-line, #eee);
    border-right: 1px solid var(--table-line, #eee);   /* Spalten-Trenner wie in der Abfragetabelle */
    white-space: nowrap;
    text-align: left;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attr-table th:last-child,
.attr-table td:last-child { border-right: none; }

.attr-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--table-head-bg, #f5f5f5);
    border-bottom: 2px solid var(--table-head-line, #ddd);
    font-weight: 600;
    color: var(--table-head-color, #444);
    cursor: pointer;
    user-select: none;
}

.attr-table thead th.is-sorted { color: var(--primary-color, #007acc); }

/* Zoom-Spalte bleibt beim waagerechten Scrollen stehen */
.attr-table .attr-table-th-action,
.attr-table .attr-table-td-action {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    width: 30px;
    min-width: 30px;
    padding: 2px 4px;
    border-right: 1px solid var(--table-line, #eee);
    cursor: default;
}

.attr-table thead .attr-table-th-action { z-index: 3; background: var(--table-head-bg, #f5f5f5); }

.attr-table tbody tr:hover td,
.attr-table tbody tr:hover .attr-table-td-action { background: var(--table-row-hover, #fafafa); }

/* Knopf in der Aktionsspalte — dieselbe Form wie in der Abfragetabelle
   (gefülltes Quadrat statt freistehendem Symbol). */
.attr-table .attr-table-td-action .attr-table-zoom {
    width: var(--table-action-size, 20px);
    height: var(--table-action-size, 20px);
    min-width: var(--table-action-size, 20px);
    padding: 0;
    border: none;
    border-radius: 3px;
    background: var(--table-action-bg, #666);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    transition: all 0.2s;
}

.attr-table .attr-table-td-action .attr-table-zoom:hover {
    background: var(--table-action-bg-hover, #444);
    color: #fff;
}

.attr-table .attr-table-td-action .attr-table-zoom:active {
    background: var(--table-action-bg-active, #333);
}

.attr-table .attr-table-td-action .attr-table-zoom i { font-size: 10px; color: #fff; }

.attr-table td a { color: var(--primary-color, #007acc); text-decoration: none; }
.attr-table td a:hover { text-decoration: underline; }

.attr-table thead tr.attr-table-filterrow th {
    position: sticky;   /* top setzt attribute-table.js (Höhe der Kopfzeile) */
    z-index: 2;
    background: var(--table-row-hover, #fafafa);
    border-bottom: 1px solid var(--table-line, #eee);
    padding: 2px 4px;
    cursor: default;
    font-weight: 400;
}

.attr-table thead tr.attr-table-filterrow .attr-table-th-action { z-index: 3; background: var(--table-row-hover, #fafafa); }

.attr-table-filterrow input {
    width: 100%;
    min-width: 70px;
    box-sizing: border-box;
    font-size: 11px;
    padding: 1px 4px;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    background: #fff;
}

.attr-table-filterrow input:focus {
    outline: none;
    border-color: var(--primary-color, #007acc);
}

.attr-table-empty { padding: 18px; color: #64748b; font-size: 12.5px; }
.attr-table-error { color: #b91c1c; }

.attr-table thead th.attr-table-th-link { cursor: default; }

/* Markierte Zeile — gehört zu der Hervorhebung in der Karte (Lupenknopf) */
.attr-table tbody tr.is-active td,
.attr-table tbody tr.is-active .attr-table-td-action { background: #e6f2fb; }

.attr-table tbody tr.is-active .attr-table-td-action {
    box-shadow: inset 2px 0 0 var(--primary-color, #007acc);
}