/* --- Bearbeiten-Modal (Schneiden/Zuschnitt/Ton/Farbe/Text/Verwischen) fuer
   Video-/Bild-Anhaenge - urspruenglich nur fuer Kanal-Elemente gebaut
   (user/user.php), Klassennamen/IDs behalten das "kanal"-Praefix, das Modal
   wird inzwischen aber ueberall eingebunden, wo Video-Anhaenge bearbeitet
   werden koennen (siehe system/inc/kanal_bearbeiten_modal.php +
   system/assets/js/kanal_bearbeiten.js). Grundgeruest (Overlay/Header/Body/
   Footer) ist generisch, sonst nur noch fuer dieses Modal im Einsatz. --- */
/* Eigene Button-Klassen statt .profil-btn* (aus profil.css) - das Modal wird
   inzwischen auch auf Seiten eingebunden, die profil.css nicht laden. */
.kanal-bearbeiten-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 0.85rem;
    cursor: pointer; text-decoration: none !important; border: 1.5px solid transparent;
    transition: all 0.15s ease; white-space: nowrap; font-family: inherit; line-height: 1;
    min-height: 40px; box-sizing: border-box;
}
.kanal-bearbeiten-btn-outline { background: #fff; border-color: #d9c9c9; color: #333 !important; }
.kanal-bearbeiten-btn-outline:hover { border-color: #a70909; color: #a70909 !important; background: #fff5f5; }
.kanal-bearbeiten-btn-primary { background: #a70909; border-color: #a70909; color: #fff !important; }
.kanal-bearbeiten-btn-primary:hover { background: #8a0707; border-color: #8a0707; }
.kanal-bearbeiten-btn:disabled { opacity: 0.6; cursor: default; }

.kanal-upload-modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(20,20,20,0.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    z-index: 9999; align-items: center; justify-content: center; padding: 1rem;
}
.kanal-upload-modal-overlay.sichtbar { display: flex; }
/* max-height: doppelt angegeben - 88vh als Fallback fuer Browser ohne dvh-
   Unterstuetzung, 88dvh (dynamic viewport height) verhindert danach, dass
   mobile Safari/Chrome mit sichtbarer Adressleiste den Footer unerreichbar
   unter den Bildschirmrand schiebt (vh rechnet die Adressleisten-Flaeche
   IMMER mit ein, dvh passt sich an, ob sie gerade sichtbar ist). */
.kanal-upload-modal { background: #fff; border-radius: 16px; width: 100%; max-width: 480px; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; overflow: hidden; }
.kanal-upload-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid #f0e8e8; flex-shrink: 0; }
.kanal-upload-modal-header h3 { margin: 0; font-size: 1.05rem; color: #1c1c1c; }
.kanal-upload-modal-header h3 i { color: #a70909; margin-right: 6px; }
.kanal-upload-modal-close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: #999; cursor: pointer; padding: 0 4px; }
.kanal-upload-modal-close:hover { color: #a70909; }
/* flex:1 1 auto + min-height:0 noetig, damit der Body bei viel Werkzeug-
   Inhalt (mehrere gestapelte .kanal-bearbeiten-box) tatsaechlich selbst
   scrollt (overflow-y:auto) statt sich auf volle Inhaltshoehe aufzublasen
   und dabei den Footer (Uebernehmen/Abbrechen) unter max-height hinaus
   aus dem sichtbaren Bereich zu draengen - Standard-Flexbox-Falle, ohne
   min-height:0 bleibt ein Flex-Kind mindestens so gross wie sein Inhalt. */
.kanal-upload-modal-body { padding: 1.1rem 1.2rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.kanal-upload-modal-footer { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 1rem 1.2rem; border-top: 1px solid #f0e8e8; flex-shrink: 0; }
.kanal-bearbeiten-modal { max-width: 680px; }
.kanal-bearbeiten-hinweis { font-size: 0.8rem; color: #8a7f7f; margin: 0 0 0.8rem; }
/* Nutzer-Feedback 26.08.: Hochformat-Videos/-Bilder wurden riesig
   dargestellt (width:100% + height:auto laesst ein 9:16-Video auf ~1100px
   Hoehe wachsen), und man verliert beim Scrollen zu den Werkzeugen weiter
   unten die Vorschau aus dem Blick. Fix in zwei Teilen:
   1) width:fit-content statt width:100% - die Buehne schrumpft dadurch
      auf die TATSAECHLICHE (durch max-height begrenzte) Groesse von
      Video/Bild/Canvas, statt immer volle Breite zu beanspruchen. Wichtig
      fuer die Ziehgriff-Overlays (Verwischen/Zuschnitt/Lupe): die messen
      Positionen relativ zur BUEHNE (getBoundingClientRect), die muss
      deshalb exakt der sichtbaren Medien-Flaeche entsprechen, sonst
      waeren Ziehgriffe und tatsaechlicher Bildinhalt versetzt.
   2) position:sticky - die Buehne bleibt beim Scrollen durch die
      Werkzeuge oben sichtbar ("mitschweben"), man behaelt das
      (Zwischen-)Ergebnis immer im Blick. */
.kanal-bearbeiten-stage {
    position: sticky; top: 0; z-index: 5;
    width: fit-content; max-width: 100%; margin: 0 auto;
    background: #111; border-radius: 10px;
    overflow: hidden; line-height: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.kanal-bearbeiten-stage img, .kanal-bearbeiten-stage video, .kanal-bearbeiten-stage canvas {
    display: block; width: auto; height: auto; max-width: 100%; max-height: 42vh;
}
.kanal-bearbeiten-stage canvas { touch-action: none; }
/* Audio hat keine sinnvolle "Breite/Hoehe" wie ein Bild/Video - eigener
   Abstand statt volle Breite/height:auto, damit der native Player nicht
   winzig-schmal in der schwarzen Buehne haengt. */
/* Fester statt prozentualer Wert: die Buehne ist jetzt width:fit-content
   (siehe oben) - ein audio { width:100% } darin waere zirkulaer (Buehne
   will sich am Kind orientieren, Kind will 100% der Buehne). */
.kanal-bearbeiten-stage audio { width: 320px; max-width: 100%; display: block; margin: 44px 0; }
.kanal-bearbeiten-box-btn { margin-top: 0.9rem; }
.kanal-bearbeiten-status { font-size: 0.8rem; color: #8a7f7f; margin-top: 0.6rem; min-height: 1.1em; }

/* Boxen-Ebene: reines Positionier-/Groessen-Overlay (die eigentliche
   Verpixelung passiert serverseitig), Vorbild: .ls-zensur-ebene in
   livestreams/start.php. pointer-events:none auf der Ebene, damit Klicks
   ausserhalb der Boxen (z.B. Video-Controls) durchgereicht werden. */
.kanal-blur-ebene { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.kanal-blur-box {
    pointer-events: auto;
    position: absolute; border: 2px dashed rgba(255,255,255,0.9); box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
    background: rgba(167,9,9,0.14); cursor: move; touch-action: none;
}
/* Trefferflaechen auf ~32px angehoben (Handy-Grundsatz, siehe Kommentar bei
   .kanal-crop-kante weiter unten - "Touch-Ziele unter ~40px sind auf dem
   Handy kaum zuverlaessig zu treffen"; 32px statt 40px als bewusst gleicher
   Kompromiss wie beim dortigen Fix, um die runden Griffe nicht unfoermig
   grosz wirken zu lassen). */
.kanal-blur-box-entfernen {
    position: absolute; top: -16px; right: -16px; width: 32px; height: 32px; border-radius: 50%;
    background: #a70909; color: #fff; border: 2px solid #fff; font-size: 0.7rem; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center; z-index: 2;
}
.kanal-blur-box-resize {
    position: absolute; right: -14px; bottom: -14px; width: 32px; height: 32px; border-radius: 50%;
    background: #fff; border: 2px solid #a70909; cursor: nwse-resize; z-index: 2; touch-action: none;
}

/* Zuschnitt-Rahmen + Text-Vorschau: weitere Ebenen auf .kanal-bearbeiten-stage,
   rein visuell (pointer-events:none) - Vorbild .ls-crop-overlay/.ls-text-preview
   in livestreams/editor.php. */
.kanal-crop-overlay {
    position: absolute; border: 2px dashed rgba(255,255,255,0.85); box-shadow: 0 0 0 2000px rgba(0,0,0,0.45);
    pointer-events: none; display: none; top: 0; left: 0; right: 0; bottom: 0; z-index: 3;
}
/* "Frei"-Zuschnitt: Rahmen wird interaktiv (ziehbar per Kante/Mitte), analog
   zum Bild-Editor-Zuschnitt (.kanal-bild-crop-auswahl), nur mit allen 4
   Kanten statt einem Eck-Griff - passt besser zu "Raender oben/unten/links/
   rechts entfernen wie am iPhone".
   Bugfix 2026-08-24 ("Ränder ziehen klappt nicht"): Griffe lagen mit
   negativem Versatz AUSSERHALB des Rahmens - .kanal-bearbeiten-stage hat
   overflow:hidden, das hat sie dort abgeschnitten/unklickbar gemacht.
   Jetzt INNERHALB des Rahmens positioniert, deutlich groesser (min. 32px
   Trefferflaeche statt 14px - Touch-Ziele unter ~40px sind auf dem Handy
   kaum zuverlaessig zu treffen) und mit sichtbarem Griff-Strich. */
.kanal-crop-overlay.kanal-crop-overlay-frei { pointer-events: auto; cursor: move; touch-action: none; }
.kanal-crop-kante { position: absolute; touch-action: none; display: flex; align-items: center; justify-content: center; }
.kanal-crop-kante::after { content: ''; background: rgba(255,255,255,0.95); border-radius: 3px; box-shadow: 0 0 3px rgba(0,0,0,0.6); }
.kanal-crop-overlay.kanal-crop-overlay-frei .kanal-crop-kante-oben,
.kanal-crop-overlay.kanal-crop-overlay-frei .kanal-crop-kante-unten {
    left: 0; right: 0; height: 32px; cursor: ns-resize;
}
.kanal-crop-overlay.kanal-crop-overlay-frei .kanal-crop-kante-oben { top: 0; }
.kanal-crop-overlay.kanal-crop-overlay-frei .kanal-crop-kante-unten { bottom: 0; }
.kanal-crop-overlay.kanal-crop-overlay-frei .kanal-crop-kante-oben::after,
.kanal-crop-overlay.kanal-crop-overlay-frei .kanal-crop-kante-unten::after {
    width: 40px; height: 5px;
}
.kanal-crop-overlay.kanal-crop-overlay-frei .kanal-crop-kante-links,
.kanal-crop-overlay.kanal-crop-overlay-frei .kanal-crop-kante-rechts {
    top: 0; bottom: 0; width: 32px; cursor: ew-resize;
}
.kanal-crop-overlay.kanal-crop-overlay-frei .kanal-crop-kante-links { left: 0; }
.kanal-crop-overlay.kanal-crop-overlay-frei .kanal-crop-kante-rechts { right: 0; }
.kanal-crop-overlay.kanal-crop-overlay-frei .kanal-crop-kante-links::after,
.kanal-crop-overlay.kanal-crop-overlay-frei .kanal-crop-kante-rechts::after {
    width: 5px; height: 40px;
}
.kanal-text-preview {
    position: absolute; left: 0; right: 0; text-align: center; color: #fff; font-weight: 700;
    text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9); pointer-events: none; padding: 0 10px;
    word-wrap: break-word; display: none; z-index: 5;
}

/* Deutlich sichtbarer Fortschritt direkt ueber dem Bild/Video waehrend der
   Server-Verarbeitung - 1:1 uebernommen von livestreams/editor.php
   (.ls-verarbeitung-overlay), dort nach genau diesem Nutzer-Feedback
   eingefuehrt ("laedt sehr lange, da brauchen wir vielleicht auch einen
   Fortschritt?" 2026-08-24 - identisch zum fruehreren Feedback 2026-08-03 bei
   Livestreams: nur der ausgegraute Button wirkte wie ein Haenger). */
.kanal-bearbeiten-verarbeitung-overlay {
    position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,0.75); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    text-align: center; padding: 1rem; line-height: normal;
}
.kanal-bearbeiten-verarbeitung-overlay i { font-size: 2rem; color: #fff; }
.kanal-bearbeiten-verarbeitung-overlay span { font-size: 0.9rem; font-weight: 700; }
.kanal-bearbeiten-verarbeitung-bar { width: 70%; max-width: 300px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.25); overflow: hidden; }
.kanal-bearbeiten-verarbeitung-fill { height: 100%; width: 0%; background: #a70909; transition: width 0.4s ease; }

/* Sperrt+graut alle Werkzeuge waehrend der Server-Verarbeitung, damit nichts
   mehr veraendert werden kann UND optisch klar ist, dass hier gerade etwas
   laeuft (vorher wurde nur der "Uebernehmen"-Button ausgegraut). */
.kanal-upload-modal.kanal-wird-verarbeitet .kanal-bearbeiten-box,
.kanal-upload-modal.kanal-wird-verarbeitet .kanal-bearbeiten-box-btn {
    opacity: 0.4; pointer-events: none; filter: grayscale(0.6); transition: opacity 0.3s ease;
}

/* --- Video-Werkzeuge (Schneiden/Zuschnitt/Ton/Farbe/Text) - 1:1 dieselben
   Klassen/Farben wie livestreams/editor.php (.ls-editor-box etc.), gleiche
   Nachbearbeitungs-Toolbox wie bei Livestream-Aufzeichnungen. --- */
.kanal-bearbeiten-box { background: #f8f4f4; border-radius: 12px; padding: 0.9rem; margin-top: 0.8rem; }
.kanal-bearbeiten-box h4 { font-size: 0.85rem; margin: 0 0 0.6rem; color: #4a3a3a; }
.kanal-bearbeiten-box h4 i { color: #a70909; margin-right: 4px; }
.kanal-bearbeiten-hint-klein { font-size: 0.75rem; color: #8a7f7f; margin: 0 0 0.5rem; }

.kanal-trim-track {
    position: relative; height: 44px; border-radius: 8px; margin-bottom: 0.5rem;
    background: #1a1414;
    background-image: repeating-linear-gradient(90deg, #2a2020 0px, #2a2020 2px, #1a1414 2px, #1a1414 22px);
    touch-action: none;
}
.kanal-trim-grau { position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,0.68); border-radius: 8px; }
.kanal-trim-grau-links { left: 0; }
.kanal-trim-grau-rechts { right: 0; }
.kanal-trim-handle {
    position: absolute; top: -4px; bottom: -4px; width: 32px; margin-left: -16px; background: #a70909;
    border-radius: 6px; cursor: ew-resize; touch-action: none; display: flex; align-items: center;
    justify-content: center; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,0.3); z-index: 2;
}
.kanal-trim-handle::before { content: ''; width: 3px; height: 16px; background: rgba(255,255,255,0.85); border-radius: 2px; }
.kanal-trim-schnitt-bloecke { position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; }
.kanal-trim-schnitt-block {
    position: absolute; top: 0; bottom: 0; background: rgba(167,9,9,0.6);
    border-left: 2px solid #a70909; border-right: 2px solid #a70909; pointer-events: auto; cursor: pointer;
}
.kanal-trim-schnitt-entfernen {
    position: absolute; top: -14px; right: -14px; width: 30px; height: 30px; border-radius: 50%;
    background: #a70909; color: #fff; border: 2px solid #fff; font-size: 0.65rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3;
}
.kanal-trim-auswahl { position: absolute; top: 0; bottom: 0; background: rgba(167,9,9,0.4); border: 2px dashed #a70909; pointer-events: none; }
.kanal-schnitt-liste { display: flex; flex-direction: column; gap: 4px; }

/* --- Segment-Reihenfolge (Video/Audio): die uebrig bleibenden Stuecke als
   per Ziehgriff sortierbare Liste, siehe kanalSegmentZeilenZiehenEinrichten()
   in kanal_bearbeiten.js - eigenes Pointer-Events-Ziehen (kein natives
   HTML5-Drag&Drop, das hat auf Touch-Geraeten unzuverlaessige Unterstuetzung),
   gleiches Prinzip wie alle anderen Ziehgriffe in diesem Modal. --- */
.kanal-segment-liste { display: flex; flex-direction: column; gap: 4px; }
.kanal-segment-eintrag {
    display: flex; align-items: center; gap: 8px; background: #fdf1f1; border-radius: 8px;
    padding: 4px 8px; font-size: 0.8rem; color: #4a3a3a; touch-action: none;
}
.kanal-segment-eintrag.kanal-segment-zieht { background: #f5dada; box-shadow: 0 3px 10px rgba(0,0,0,0.2); z-index: 2; }
.kanal-segment-griff {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    color: #a70909; cursor: grab; flex-shrink: 0; touch-action: none;
}
.kanal-segment-nummer { font-weight: 700; color: #a70909; flex-shrink: 0; }
.kanal-segment-zeit { flex: 1; }
.kanal-schnitt-eintrag {
    display: flex; align-items: center; justify-content: space-between; background: #fdf1f1;
    border-radius: 8px; padding: 5px 10px; font-size: 0.78rem; color: #4a3a3a;
}
.kanal-schnitt-eintrag button { background: none; border: none; color: #a70909; cursor: pointer; font-size: 0.85rem; min-width: 40px; min-height: 40px; }

.kanal-preset-wahl { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0.6rem; }
.kanal-preset-wahl button {
    padding: 7px 14px; border-radius: 16px; border: 1px solid #e0d5d5; background: #fff; color: #4a3a3a;
    font-size: 0.8rem; cursor: pointer; min-height: 40px; box-sizing: border-box;
}
.kanal-preset-wahl button.kanal-preset-aktiv { background: #a70909; color: #fff; border-color: #a70909; }

.kanal-slider-feld { margin-bottom: 0.6rem; }
.kanal-slider-feld label { display: flex; justify-content: space-between; font-size: 0.8rem; color: #4a3a3a; margin-bottom: 3px; }
/* Range-Regler bekommen sonst nur die (oft winzige) Browser-Standardgroesse
   fuer den Ziehknopf - eigener, groesserer Thumb fuers Handy. */
.kanal-slider-feld input[type="range"] { width: 100%; accent-color: #a70909; height: 32px; }
.kanal-slider-feld input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
.kanal-slider-feld input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; }

/* Label als ganzes ist bereits die klickbare Flaeche (mitigiert die kleine
   Checkbox selbst) - trotzdem Mindesthoehe fuer eine grosszuegige
   Trefferflaeche der ganzen Zeile. */
.kanal-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: #4a3a3a; cursor: pointer; min-height: 40px; }
.kanal-checkbox-label input { width: 20px; height: 20px; accent-color: #a70909; flex-shrink: 0; }

.kanal-feld { margin-bottom: 0.6rem; }
.kanal-feld label { display: block; font-size: 0.78rem; font-weight: 600; color: #4a3a3a; margin-bottom: 4px; }
.kanal-feld input[type="text"], .kanal-feld select {
    width: 100%; padding: 8px 10px; border: 1px solid #e0d5d5; border-radius: 8px; font-size: 0.85rem;
    box-sizing: border-box; min-height: 42px;
}
/* flex-wrap + Button-Kinder bekommen flex:1 wie die vorhandenen div-Kinder -
   Bugfix: die Drehen-Buttons (system/inc/kanal_bearbeiten_modal.php) sind
   direkte <button>-Kinder dieser Zeile statt in ein div gewrappt und liefen
   dadurch auf schmalen Screens Gefahr, ueber den Rand hinauszulaufen, da sie
   bisher weder flex:1 noch eine Umbruch-Moeglichkeit hatten. */
.kanal-feld-reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.kanal-feld-reihe > div, .kanal-feld-reihe > button { flex: 1 1 45%; }
.kanal-feld input[type="color"] { width: 100%; height: 42px; padding: 3px; border: 1px solid #e0d5d5; border-radius: 8px; cursor: pointer; }

/* --- Bild-Editor: Werkzeug-Riegel (Stift/Verwischen/Zuschnitt/Drehen/Farbe/
   Text-Sticker) + zugehoerige Overlays - siehe kanalBildWerkzeugWaehlen() in
   kanal_bearbeiten.js. --- */
.kanal-bild-werkzeug-riegel { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 0.8rem; }
.kanal-bild-werkzeug-btn {
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid #e0d5d5; background: #fff; color: #4a3a3a;
    font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease;
}
.kanal-bild-werkzeug-btn:hover { border-color: #a70909; color: #a70909; }
.kanal-bild-werkzeug-btn.kanal-bild-werkzeug-aktiv { background: #a70909; color: #fff; border-color: #a70909; }
.kanal-bild-rueckgaengig-btn { margin-left: auto; }

.kanal-bild-crop-auswahl {
    position: absolute; border: 2px dashed rgba(255,255,255,0.9); box-shadow: 0 0 0 2000px rgba(0,0,0,0.45);
    z-index: 6; cursor: move; touch-action: none;
}
.kanal-bild-crop-resize {
    position: absolute; right: -14px; bottom: -14px; width: 32px; height: 32px; border-radius: 50%;
    background: #fff; border: 2px solid #a70909; cursor: nwse-resize; touch-action: none;
}

.kanal-bild-emoji-auswahl { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 0.6rem; }
.kanal-bild-emoji-auswahl button {
    width: 40px; height: 40px; border-radius: 8px; border: 1px solid #e0d5d5; background: #fff;
    font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.kanal-bild-emoji-auswahl button.kanal-bild-emoji-aktiv { border-color: #a70909; background: #fdf1f1; }

/* --- Lupe/Zoom (Bild UND Video): NUR EIN ziehbares Rechteck - "Quelle"
   (blau, was vergroessert wird, z.B. ein Zuschauerblock). Das Ziel-Fenster
   (wo die Vergroesserung erscheint) wird automatisch berechnet und live
   nachgefuehrt (kanalLupeZielAutomatisch() in kanal_bearbeiten.js) - nur
   noch eine visuelle Anzeige (.kanal-lupe-ziel-automatisch), NICHT mehr
   eigenstaendig ziehbar (Nutzer-Feedback 26.08.: zwei Rechtecke pro Lupe
   waren verwirrend). Gleiches xFrac/yFrac/wFrac/hFrac-Ziehmodell wie
   Verwischen-Boxen/Zuschnitt fuer die Quelle, siehe
   kanalRechteckZiehenEinrichten() in kanal_bearbeiten.js. Eigene Ebene
   (.kanal-lupe-ebene), weil Bild UND Video beide gleichzeitig Verwischen-
   Boxen/Zuschnitt-Overlay im DOM haben koennen. */
.kanal-lupe-ebene { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.kanal-lupe-quelle, .kanal-lupe-ziel {
    position: absolute; border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
}
.kanal-lupe-quelle { pointer-events: auto; cursor: move; touch-action: none; border: 2px dashed #3aa0ff; background: rgba(58,160,255,0.14); }
.kanal-lupe-ziel {
    pointer-events: none; border: 2px dashed #fff; background: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.4);
}
.kanal-lupe-label {
    position: absolute; top: -20px; left: -2px; font-size: 0.62rem; font-weight: 700; color: #fff;
    background: rgba(0,0,0,0.65); border-radius: 4px; padding: 2px 6px; white-space: nowrap; pointer-events: none;
}
.kanal-lupe-resize {
    position: absolute; right: -14px; bottom: -14px; width: 32px; height: 32px; border-radius: 50%;
    background: #fff; border: 2px solid #3aa0ff; cursor: nwse-resize; z-index: 2; touch-action: none;
}

.kanal-lupe-eintrag {
    display: flex; align-items: center; justify-content: space-between; background: #fdf1f1;
    border-radius: 8px; padding: 5px 10px; font-size: 0.78rem; color: #4a3a3a; gap: 8px; margin-bottom: 4px;
}
.kanal-lupe-zeit-buttons { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.kanal-lupe-zeit-buttons button { background: none; border: none; color: #a70909; cursor: pointer; font-size: 0.75rem; white-space: nowrap; min-height: 40px; padding: 0 6px; }
.kanal-lupe-zeit-buttons button[data-aktion="entfernen"] { font-size: 0.85rem; min-width: 40px; }