/* Tor im Foto (Testfunktion) */
.tif-entry-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f8fafc; border-top: 1px solid #e2e8f0; flex-wrap: wrap; }
.tif-entry { background: #005596; color: #fff; border: none; border-radius: 6px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.tif-entry:hover { background: #00467c; }
.tif-entry:focus-visible, .tif-btn:focus-visible, .tif-tab:focus-visible, .tif-close:focus-visible, .tif-handle:focus-visible, .tif-divider:focus-visible { outline: 3px solid #f1c40f; outline-offset: 2px; }
.tif-badge { font-size: 12px; font-weight: 600; color: #7c4a03; background: #fef3c7; border: 1px solid #f5d98a; border-radius: 999px; padding: 2px 10px; }

.tif-noscroll { overflow: hidden; }
.tif-hidden { display: none; }
.tif-overlay { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(15, 23, 42, 0.72); padding: 16px; box-sizing: border-box; }
.tif-overlay.open { display: flex; }
.tif-dialog { background: #fff; border-radius: 10px; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
.tif-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e2e8f0; }
.tif-head h2 { margin: 0; font-size: 18px; color: #005596; }
.tif-close { margin-left: auto; width: 40px; height: 40px; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; font-size: 18px; cursor: pointer; color: #1f2937; }
.tif-close:hover { background: #f1f5f9; }
.tif-body { flex: 1; min-height: 0; display: flex; }
.tif-stage { flex: 1; min-width: 0; background: #0f172a; display: flex; align-items: center; justify-content: center; position: relative; }
.tif-side { width: 320px; flex-shrink: 0; padding: 16px; overflow-y: auto; border-left: 1px solid #e2e8f0; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }
.tif-side-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #4b5563; }
.tif-config { font-size: 14px; color: #111827; line-height: 1.45; }
.tif-hint { font-size: 13px; color: #7c4a03; background: #fef3c7; border-radius: 6px; padding: 8px 10px; }
.tif-tools { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.tif-tabs { display: flex; gap: 6px; }
.tif-tab { flex: 1; padding: 9px 6px; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; color: #1f2937; cursor: pointer; }
.tif-tab.active { background: #005596; border-color: #005596; color: #fff; }
.tif-help { margin: 0; font-size: 13px; line-height: 1.45; color: #374151; }
.tif-sliders { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.tif-slider { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #1f2937; }
.tif-slider input { width: 100%; accent-color: #005596; }
.tif-btn { padding: 10px 12px; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; font: inherit; font-size: 14px; font-weight: 600; color: #1f2937; cursor: pointer; }
.tif-btn:hover { background: #f1f5f9; }
.tif-btn-primary { background: #005596; border-color: #005596; color: #fff; }
.tif-btn-primary:hover { background: #00467c; }
.tif-btn:disabled { opacity: 0.6; cursor: wait; }
.tif-status { font-size: 13px; color: #374151; min-height: 18px; }

.tif-empty { flex-direction: column; align-items: center; gap: 12px; max-width: 440px; padding: 32px; text-align: center; color: #e5e7eb; border: 2px dashed #475569; border-radius: 10px; }
.tif-empty-title { font-size: 18px; font-weight: 700; color: #fff; }
.tif-empty p { margin: 0; font-size: 14px; line-height: 1.5; }

.tif-frame { position: relative; display: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.tif-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tif-before { display: none; }
.tif-outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tif-outline polygon { fill: none; stroke: #f1c40f; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 6 4; }
.tif-invalid .tif-outline polygon { stroke: #ef4444; }
.tif-handle { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: none; background: transparent; cursor: grab; touch-action: none; }
.tif-handle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -9px 0 0 -9px; border-radius: 50%; background: rgba(241, 196, 15, 0.35); border: 2px solid #f1c40f; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7); }
.tif-handle:active { cursor: grabbing; }
.tif-loupe { display: none; position: absolute; width: 180px; height: 180px; border: 2px solid #fff; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 3; }
.tif-divider, .tif-tag { display: none; }

.tif-mode-compare { cursor: ew-resize; }
.tif-mode-compare .tif-before { display: block; }
.tif-mode-compare .tif-handle, .tif-mode-compare .tif-outline { display: none; }
.tif-mode-compare .tif-divider { display: block; position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); z-index: 2; }
.tif-divider span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; color: #005596; font-size: 12px; font-weight: 700; padding: 8px 8px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.tif-mode-compare .tif-tag { display: block; position: absolute; top: 10px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(15, 23, 42, 0.8); padding: 4px 10px; border-radius: 999px; pointer-events: none; z-index: 1; }
.tif-tag-before { left: 10px; }
.tif-tag-after { right: 10px; }

@media (max-width: 820px) {
    .tif-overlay { padding: 0; }
    .tif-dialog { border-radius: 0; }
    .tif-body { flex-direction: column; }
    .tif-stage { min-height: 45vh; }
    .tif-side { width: 100%; border-left: none; border-top: 1px solid #e2e8f0; }
}

/* Dunkelmodus (Gestaltung 2.0 der Testseite) */
html[data-theme="dark"] .tif-entry-bar { background: #1b2734; border-top-color: #2a3a4c; }
html[data-theme="dark"] .tif-dialog { background: #16202c; }
html[data-theme="dark"] .tif-head, html[data-theme="dark"] .tif-side, html[data-theme="dark"] .tif-sliders { border-color: #2a3a4c; }
html[data-theme="dark"] .tif-head h2 { color: #e4eaf1; }
html[data-theme="dark"] .tif-side-title { color: #94a2b3; }
html[data-theme="dark"] .tif-config, html[data-theme="dark"] .tif-slider { color: #e4eaf1; }
html[data-theme="dark"] .tif-help, html[data-theme="dark"] .tif-status { color: #c2ccd8; }
html[data-theme="dark"] .tif-btn:not(.tif-btn-primary), html[data-theme="dark"] .tif-tab:not(.active), html[data-theme="dark"] .tif-close { background: #1b2734; border-color: #3a4d62; color: #e4eaf1; }
html[data-theme="dark"] .tif-btn:not(.tif-btn-primary):hover, html[data-theme="dark"] .tif-close:hover { background: #223142; }
html[data-theme="dark"] .tif-badge, html[data-theme="dark"] .tif-hint { background: #33250f; border-color: #5a4116; color: #f0c98a; }