/**
 * reports.css
 * Modul-spezifische Styles für /reports/
 * addicted-sports.com
 *
 * Shared Basis-Styles (sr-only, al-not-found, al-back-link, Overflow-Schutz, …)
 * kommen aus /fileadmin/templates/css/news-shared.css – dort nichts doppeln!
 *
 * Muster identisch mit aktuelles.css / aufgelesen.css:
 *   – Alles im Scope body.reports (class="layout1seite reports")
 *   – CSS-Grid 3 → 2 → 1 Spalten
 *   – Kachel-Höhen und Fade wie aktuelles
 */

/* ── Akzentfarbe #3498DB (Wasser / Windsurfen) ────────────────── */
.reports .al-back-link                  { color: #3498DB; }
.reports .news-list-date                { background-color: #3498DB; }

/* ── Report-Navigation ────────────────────────────────────────── */
#reportMenu {
    margin-bottom: 20px;
    padding: 0 0 10px;
    border-bottom: 1px solid #ddd;
}
#reportMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#reportMenu ul li a {
    display: inline-block;
    padding: 6px 14px;
    border: 2px solid #3498DB;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    color: #3498DB;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
#reportMenu ul li a:hover,
#reportMenu ul li.active a { background: #3498DB; color: #fff; }

/* Spot-Icon im Balken */
.reports .blackBalken .symbole .spotIconThumb {
    width: 40px;
    height: 36px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* ── Balken: immer einzeilig, gleiche Höhe ────────────────────── */
.reports .blackBalken {
    height: 42px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 2px solid #3498DB !important;
}
.reports .blackBalken .symbole {
    flex-shrink: 0;
    margin-right: 4px !important;
}
.reports .blackBalken .balkenText {
    overflow: hidden !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border-bottom: none !important;
}
.reports .blackBalken .balkenText h2,
.reports .blackBalken .balkenText h3 {
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* ── Spalten-Fix Listenansicht ────────────────────────────────── */
.reports .headlineBox,
.reports p.text {
    column-count: 1 !important;
    columns: 1 !important;
}

/* ── Grid direkt auf .list2-subdiv ───────────────────────────── */
.reports .list2-subdiv {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 15px !important;
    align-items: start !important;
}
@media only screen and (max-width: 750px) {
    .reports .list2-subdiv {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media only screen and (max-width: 480px) {
    .reports .list2-subdiv {
        grid-template-columns: 1fr !important;
    }
}

/* Grid-Platzhalter-Spans ausblenden (bei Grid nicht nötig) */
.reports .spanelement.sym { display: none !important; }

/* ── Kacheln ──────────────────────────────────────────────────── */
.reports .spanelement.reports {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    vertical-align: unset !important;
    margin: 0 0 20px !important;
    overflow: hidden !important;
    background-color: #ecf0f1 !important;
    color: #7d7d7d !important;
    position: relative !important;
    cursor: pointer !important;
    /* Kein weicher Hintergrund-Übergang: der Text-Fade (.abgeschnitten,
       Gradient) und der Pfeil wechseln die Farbe instant – ein langsamer
       Background-Übergang ließe den Verlauf währenddessen kurz aufflackern.
       Alle drei schalten daher gleichzeitig (instant) um. */
}
.reports .spanelement.reports:hover { background-color: #d5d9da !important; }

/* Inner wrapper */
.reports .bildUeberText,
.reports .nurBild,
.reports .textHeightOhne {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Datum-Badge: absolut über dem Bild (wie aktuelles), position:relative auf Container */
.reports .spanelement.reports .nurBild {
    position: relative !important;
}
.reports .spanelement.reports .nurBild .news-list-date {
    position: absolute !important;
    z-index: 3 !important;
}

/* Ganze Kachel ist ein Link – Text-Optik der Kinder unverändert lassen. */
.reports .spanelement.reports .reportCardLink {
    display: block !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* Kachel-Bilder: feste Höhe + object-fit
   !important nötig gegen TYPO3-Global-CSS das display:block überschreibt.
   Das Datum-Badge ist absolut positioniertes Kind von .nurBild und bleibt von
   der Bild-Höhe unberührt – font-size:0 darf daher NICHT auf .nurBild liegen
   (sonst verschwindet die Datumszahl), nur auf dem <img> selbst. */
.reports .spanelement.reports .nurBild {
    height: 180px !important;
    overflow: hidden !important;
    line-height: 0 !important;
}
.reports .spanelement.reports .nurBild > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    font-size: 0 !important;       /* verhindert Alt-Text-Anzeige bei 404 */
    color: transparent !important;
}

/* Profil-Pic + Name: nebeneinander */
.reports .spanelement.reports .headlineBox {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
    column-count: 1 !important;
    columns: 1 !important;
}
.reports .spanelement.reports .headlineBox .userPic {
    flex-shrink: 0;
}
.reports .spanelement.reports .headlineBox p,
.reports .spanelement.reports .headlineBox .reportUserName {
    margin: 0 !important;
    font-weight: 700 !important;
    font-size: 0.9em !important;
    line-height: 1.2 !important;
    column-count: 1 !important;
}

/* Trennlinie unter dem Profilbild */
.reports .spanelement.reports .textcutter .line {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 6px !important;
    border: none !important;
    border-top: 1px solid #c8cbcc !important;
    height: 0 !important;
}

/* Kachel-Textbereich: Flexbox-Spalte */
.reports .list2-subdiv .textHeightOhne {
    height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    position: relative !important;
}
.reports .list2-subdiv .textHeightOhne .nurText {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
.reports .list2-subdiv .textHeightOhne .textcutter {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* textpfeilOben: CSS-Dreieck */
.reports .spanelement.reports .textpfeilOben {
    background: none !important; width: 0 !important; height: 0 !important;
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-bottom: 9px solid #ecf0f1 !important;
    position: absolute !important; top: -9px !important; left: calc(15% + 11px) !important;
}
.reports .spanelement.reports:hover .textpfeilOben { border-bottom-color: #d5d9da !important; }

/* Text-Fade */
.reports .abgeschnitten {
    background-image: linear-gradient(to top, #ecf0f1 75%, rgba(236,240,241,0) 100%) !important;
    margin-top: -1.3em !important;
    padding: 1.5em 0 0 !important;
    position: relative !important;
    z-index: 1 !important;
}
.reports .spanelement.reports:hover .abgeschnitten {
    background-image: linear-gradient(to top, #d5d9da 75%, rgba(213,217,218,0) 100%) !important;
}

/* ── Detail-Layout: 2-spaltig → 1-spaltig ─────────────────────── */
/* Globales TYPO3-CSS setzt text-align:justify und float:left/right –
   wir überschreiben das defensiv mit !important */
/* ════════════════════════════════════════════════════════════════════════
   Detail-Layout: 3-Spalten-Grid (Content 970px / 3×310px / Gap 20px),
   identisch zur Webcam-/Aktuelles-Sektion. Alle Blöcke sind flache Grid-Items
   (.rd-slideshow, .rd-spot, .rd-user, .rd-text, .rd-box, .windGraphBox), damit
   sie pro Breakpoint frei platziert/umsortiert werden können.
   ════════════════════════════════════════════════════════════════════════ */
.reports .reportDetails {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 20px;
    box-sizing: border-box;
    max-width: 100%;
    text-align: left !important;  /* override TYPO3 text-align:justify */
    float: none !important;
}
.reports .reportDetails > * {
    min-width: 0;                 /* verhindert horizontalen Überlauf */
    box-sizing: border-box;
    float: none !important;
}

/* ── Desktop-Platzierung (>900px) ──────────────────────────────────────
   Slideshow Sp.1+2/Z.1+2; Spot Sp.3/Z.1; User Sp.3/Z.2; Text Sp.1+2/Z.3.
   Die übrigen Boxen (Session/Webcam/GPS) fließen automatisch ab Z.3/Sp.3.
   Slideshow spannt zwei Grid-Zeilen → ihre Höhe wird gleichmäßig (50/50) auf
   Spot- und User-Box verteilt. */
.reports .rd-slideshow { grid-column: 1 / 3; grid-row: 1 / 3; }
.reports .rd-spot      { grid-column: 3;     grid-row: 1; }
.reports .rd-user      { grid-column: 3;     grid-row: 2; }
.reports .rd-text      { grid-column: 1 / 3; grid-row: 3; }
.reports .reportDetails > .windGraphBox { grid-column: 1 / -1; }

.reports .rd-slideshow,
.reports .rd-slideshow img { max-width: 100%; box-sizing: border-box; }

/* ── Gemeinsames Box-Aussehen ──────────────────────────────────────────
   Eine Box ist immer (mind.) eine Spaltenbreite breit. Abstände kommen aus
   dem Grid-Gap, daher kein eigener margin. */
.reports .reportDetails > .rd-box {
    background: #ecf0f1;
    padding: 12px;
    border-radius: 0;
    margin: 0;
    overflow: hidden;
    /* Volle Spaltenbreite erzwingen: globale Legacy-Regeln geben manchen Boxen
       (z.B. .spanelement) eine feste width, was bei einem Grid-Item das
       horizontale justify-self:stretch unterdrückt → Box bliebe schmal. */
    width: 100% !important;
}

/* ── Text/Überschrift: Header als Flex-Zeile mit Aktions-Slot rechts
   (Platz für spätere Edit-/Typ-Symbole) ── */
.reports .rd-text { padding: 10px 0; }
.reports .reportsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0 4px;
    float: none !important; /* überschreibt Legacy .reportsHeader{float:left},
                               sonst überlappt der Kommentar den Header */
    width: 100%;
}
.reports .reportsHeaderActions { flex: 0 0 auto; }

/* ── Spotumriss- & Webcam-Box: Bild füllt die Box randlos (kein grauer Rand) ──
   padding:0 hebt das gemeinsame .rd-box-Padding auf; das Bild deckt die Box
   vollständig (object-fit:cover, da Spot/User-Spalte 50/50 eine feste Höhe hat). */
.reports .rd-spot,
.reports .rd-webcam { padding: 0 !important; }

/* Container: feste Mindesthöhe → Umriss UND Platzhalter sind immer gleich groß
   (auch wenn die Grid-Zeile sonst kollabieren würde). */
.reports .rd-spot .spoticon.reportinfo {
    position: relative;
    height: 100%;
    min-height: 132px;
    line-height: 0;
    overflow: hidden;
}
/* Platzhalter (dunkle Box mit Spotname) liegt hinter dem Umriss-Bild. */
.reports .rd-spot .spoticon.reportinfo .rd-spot-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1d1d1c;
    color: #fff;
    text-align: center;
    padding: 12px;
    box-sizing: border-box;
    font-weight: 600;
    line-height: 1.3;
}
/* Umriss-Bild über dem Platzhalter; fehlt/defekt → onerror blendet es aus,
   der Platzhalter wird sichtbar. */
.reports .rd-spot .spoticon.reportinfo img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    object-fit: cover;
    display: block; margin: 0;
}

/* ── Webcam-Box: Bild + Link ── */
.reports .rd-webcam .webcamDetailLabel { font-weight: 600; color: #3498DB; font-size: 0.9em; padding: 8px 12px 6px; margin: 0; }
.reports .rd-webcam .webcamDetailLink  { display: block; line-height: 0; }
.reports .rd-webcam .webcamDetailImg   { display: block; width: 100%; height: auto; }

/* ── Slideshow: volle Breite, kein Overflow ── */
.reports #reportPics {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ── theReport Abschnitt: Padding ── */
.reports .theReport {
    padding: 10px 0;
}
.reports .nerv {
    padding: 8px 0 4px;
}

/* ── centerReport: Box-Sizing ── */
.reports .centerReport {
    box-sizing: border-box;
    max-width: 100%;
}

/* ════════════════════════ Responsive Breakpoints ════════════════════════ */

/* ── 2-Spalten-Layout (601–900px) ──
   Slideshow über beide Spalten; darunter Spot | User nebeneinander;
   Text über beide Spalten; dann je Spalte eine Box; Windgraph über beide. */
@media (max-width: 900px) and (min-width: 601px) {
    .reports .reportDetails { grid-template-columns: repeat(2, 1fr); }
    .reports .rd-slideshow { grid-column: 1 / 3; grid-row: auto; }
    .reports .rd-spot      { grid-column: 1;     grid-row: auto; }
    .reports .rd-user      { grid-column: 2;     grid-row: auto; }
    .reports .rd-text      { grid-column: 1 / 3; grid-row: auto; }
    .reports .reportDetails > .windGraphBox { grid-column: 1 / -1; }

    /* Spot- und User-Box stehen hier nebeneinander in derselben Grid-Zeile und
       sollen gleich hoch sein. Sonst bestimmt das Seitenverhältnis des
       Spot-Bildes die Zeilenhöhe (höher als die User-Box). Lösung: Spot-Bild
       aus dem Fluss nehmen (absolut), damit die User-Box die Zeilenhöhe vorgibt
       und das Spot-Bild diese per object-fit:cover randlos ausfüllt. */
    .reports .rd-spot { position: relative; }
    .reports .rd-spot .spoticon.reportinfo {
        position: absolute; inset: 0;
        height: 100% !important; /* überschreibt die feste Legacy-Höhe der .spoticon */
    }
    .reports .rd-spot .spoticon.reportinfo img {
        position: absolute; inset: 0;
        width: 100% !important; height: 100% !important;
        max-height: none !important; object-fit: cover;
    }
}

/* ── 1-Spalten-Layout (≤600px) ──
   Reihenfolge: Slideshow → Text → User → Boxen (Session/Webcam/GPS) →
   Windgraph → Spotumriss (unten). Als Flex-Spalte mit order umgesetzt; die
   späteren order-Regeln für .rd-user / .rd-spot haben dieselbe Spezifität wie
   die .rd-box-Regel und gewinnen dadurch (Quellreihenfolge). */
@media (max-width: 600px) {
    .reports .reportDetails {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    .reports .reportDetails > * {
        width: 100%;
        grid-column: auto;
        grid-row: auto;
    }
    .reports .reportDetails > .rd-slideshow  { order: 1; }
    .reports .reportDetails > .rd-text       { order: 2; }
    .reports .reportDetails > .rd-box        { order: 4; } /* Session/Webcam/GPS */
    .reports .reportDetails > .rd-user       { order: 3; }
    .reports .reportDetails > .windGraphBox  { order: 5; }
    .reports .reportDetails > .rd-spot       { order: 6; }

    .reports #reportPics .rp-strip img { max-height: 280px; }
    .reports #reportPics .controls { padding: 14px 18px; }
}

/* ── Mobile Detail-Tweaks (≤900px, gilt für 2- und 1-Spalten-Layout) ── */
@media (max-width: 900px) {
    /* Session-Boxen: lange Equipmentnamen umbrechen */
    .reports .spanelement.gps.session table { table-layout: fixed; }
    .reports .spanelement.gps.session td {
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal !important;
    }
    .reports .spanelement.gps.session .tableHead {
        width: 55px;
        white-space: nowrap !important;
    }
    /* Spot-Umriss: Höhe begrenzen, ohne die Kontur zu beschneiden */
    .reports .spoticon.reportinfo img { max-height: 200px; object-fit: contain; }
    /* User-Info-Tabelle: kein overflow */
    .reports .news-single-backlink table { table-layout: fixed; word-break: break-word; }
    /* GPS-Tabelle: bleibt im fixed-Layout (6 Spalten à 100%/Box), damit sie nie
       aus der Box läuft. Nur Font/Padding für schmale Screens enger; lange
       Header (sm, 5×10s) brechen um statt zu überlaufen. */
    .reports .gpsTabelle { font-size: 0.68rem; }
    .reports .gpsTabelle td { padding: 2px 1px; }
    .reports .gpsTabelle td:first-child { width: 34px; }
    /* Report-Kommentar: Padding */
    .reports .kommentarReport { padding: 0 4px; }
    /* Header-Zeile gleiches H-Padding wie der Kommentar → Titel/Datum/Spot und
       Kommentar bzw. Edit-Textarea sind linksbündig. */
    .reports .reportsHeader { padding-left: 4px; padding-right: 4px; }
    /* Spot-Titel oben: Font */
    .reports .reportsHeader .spotReport { font-size: 1em; }
}

/* Bilder-Slideshow – feste 16:9-Box, Bilder mittig gecroppt (object-fit:cover).
   aspect-ratio bestimmt die Höhe; alle Bilder füllen die Box identisch, egal
   welches Seitenverhältnis sie haben → kein schwarzer Balken, kein Springen. */
.reports #reportPics {
    position: relative;
    overflow: hidden;
    background: #111;
    line-height: 0;
    aspect-ratio: 16 / 9;
    height: auto;
    float: none !important; /* Legacy #reportPics{float:left} aufheben */
}
/* .rp-strip statt .slideshow: Der globale Template-Header lädt cross.js, das jedes
   .slideshow als Crossfade-Slideshow übernimmt (Opacity-Animation auf Timer) und
   damit unsere Transform-Logik überlagert hat → Bild blendete nach jedem Wechsel
   kurz aus ("Flackern"). Der eigene Klassenname entkoppelt uns von cross.js UND von
   den Legacy-.slideshow-CSS-Regeln (display:none / overflow:hidden / height:349px).
   Die folgenden !important bleiben als harmlose Absicherung erhalten. */
.reports #reportPics .rp-strip {
    display: flex;
    align-items: stretch;
    height: 100% !important;
    margin: 0 !important;
    /* Der Flex-Strip ist nur so breit wie die Box; per translateX rückt der aktive
       Slide über den rechten Rand hinaus. Clipping übernimmt #reportPics
       (overflow:hidden), der Strip selbst darf nicht clippen. */
    overflow: visible !important;
    transition: transform .45s ease;
    will-change: transform;
}
.reports #reportPics .rp-strip a     {
    flex: 0 0 100%;
    min-width: 0;
    height: 100%;
    display: block !important;
}
.reports #reportPics .rp-strip img   {
    position: static;          /* überschreibt Legacy position:absolute (Webcam-Fallback) */
    width: 100%;
    height: 100%;
    object-fit: cover;         /* mittig croppen auf die Box */
    object-position: center;
    display: block;
}

/* ── Desktop (≥901px): Slideshow füllt die Höhe der rechten Spalte ──
   Im 3-Spalten-Grid (.reportDetails) spannt die Slideshow die Spalten 1–2 über
   die Zeilen 1–2; die rechte Spalte (Spot- + User-Box + Gap) bestimmt die
   Zeilenhöhe. Das Grid-Item (.rd-slideshow) wird darauf gestretcht.
   #reportPics wird absolut in dieses Item gelegt (inset:0) – so trägt es selbst
   NICHTS zur Zeilenhöhe bei (kein zirkuläres Aufblähen) und füllt exakt die von
   der rechten Spalte vorgegebene Höhe. Bild-Unterkante und Boxen-Unterkante sind
   damit bündig; der mittige Crop bleibt über object-fit:cover erhalten. */
@media (min-width: 901px) {
    /* Spot- (Zeile 1) und User-Box (Zeile 2) in Spalte 3 exakt gleich hoch:
       beide Zeilen auf gleiche Höhe zwingen. Die Slideshow (absolut, s. u.)
       trägt keine eigene Höhe bei, daher sonst spot=Inhalt, user=Inhalt (≠). */
    .reports .reportDetails { grid-template-rows: 1fr 1fr; }
    .reports .rd-slideshow { position: relative; }
    .reports #reportPics {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        height: auto;
        aspect-ratio: auto;
    }
}
/* display:flex !important – die globale addictedSportsMain.css blendet
   .reportDetails .controls per display:none aus; ohne !important bleiben die
   Navigations-Buttons unsichtbar. */
.reports #reportPics .controls {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.45); color: #fff;
    z-index: 10; padding: 10px 14px; cursor: pointer;
    line-height: 1;
    user-select: none; font-size: 22px;
}
.reports #reportPics .controls.back    { left: 0; }
.reports #reportPics .controls.forward { right: 0; }
.reports #reportPics .controls:hover   { background: rgba(52,152,219,.8); }
/* Bild-Zähler */
.reports #reportPics .slideCounter {
    position: absolute;
    bottom: 6px; right: 8px;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: 12px;
    padding: 2px 7px;
    border-radius: 0;
    pointer-events: none;
    z-index: 5;
}

/* GPS-Tabelle */
.reports .gps { margin-bottom: 16px; }
.reports .gps .headerGPS  { font-weight: 700; margin-bottom: 8px; color: #3498DB; }
/* table-layout:fixed + width:100% → 6 gleich breite Spalten, die immer in die
   Box (1 Spaltenbreite) passen; lange Header (Seemeile, 5×10sec) brechen um
   statt die Box zu sprengen. */
.reports .gpsTabelle       { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.78rem; }
.reports .gpsTabelle td    { padding: 3px 2px; border: 1px solid #ddd; text-align: center; overflow-wrap: anywhere; word-break: break-word; }
/* Erste Spalte (km/h / kts) gerade breit genug, dass „km/h" einzeilig bleibt. */
.reports .gpsTabelle td:first-child { width: 42px; }
.reports .gpsTabelle tr.tableHead td { background: #ecf0f1; font-weight: 600; }

/* Session-Blöcke.
   height:auto überschreibt die globale Legacy-Regel, die .spanelement eine
   feste Höhe gibt – dadurch lief der Tabellentext sonst unten aus der grauen
   Box heraus. So wächst die Box mit beliebig vielen Zeilen/Sessions mit. */
/* Hintergrund/Padding kommen aus .rd-box; hier nur die Höhen-Overrides der
   globalen Legacy-Regel (.spanelement hat sonst feste Höhe). */
.reports .spanelement.gps.session {
    margin: 0;
    box-sizing: border-box;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
}
.reports .spanelement.gps.session .headerGPS { font-weight: 700; color: #3498DB; margin-bottom: 8px; }
/* table-layout:auto, damit sich die Spalten an die Inhaltslänge anpassen;
   lange Werte brechen um statt die Box zu sprengen (mehrzeilig). */
.reports .spanelement.gps.session table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    table-layout: auto;
}
.reports .spanelement.gps.session td {
    padding: 3px 6px;
    vertical-align: top;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.reports .spanelement.gps.session .tableHead {
    font-weight: 600;
    width: 1%;                 /* so schmal wie nötig, Wert-Spalte bekommt den Rest */
    white-space: nowrap;
    padding-right: 10px;
}

/* Spot-Icon rechte Spalte (Spotumriss): weiße Kontur + dunkler Grund sind im
   Bild ({spot}.jpg, #1d1d1c) bereits enthalten – kein zusätzlicher Rahmen nötig. */
.reports .spoticon.reportinfo img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

/* User-Bild (Kachel-Thumbnails: klein) */
.reports .userPic { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.reports .userPicA { margin-bottom: 10px; }
/* User-Info-Box als Flex-Zeile: Bild links (110px), Tabelle rechts.
   Vorher lag das Bild als width:100%-Block (148px hoch) über der Tabelle –
   zusammen höher als die 50/50-Box, sodass overflow:hidden die Tabelle
   abschnitt (Text "fehlte"). Die feste Legacy-Größe .userPicA{135x148} wird
   hier auf auto gesetzt, damit der Container nur das Bild umfasst. */
.reports .rd-user.news-single-backlink {
    position: static !important;
    width: auto !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
}
.reports .news-single-backlink .userPic { width: 110px !important; height: 110px !important; }
.reports .news-single-backlink .userPicA {
    float: none !important;
    display: block;
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto;
    text-align: left;
    margin: 0;
}
/* Info-Tabelle rechte Spalte: nimmt den verbleibenden Platz neben dem Bild.
   table-layout:auto – Label-Spalte so schmal wie nötig, Wertespalte bekommt
   den Rest; lange Werte (Username) brechen um. */
.reports .news-single-backlink table {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    border-collapse: collapse;
    font-size: 0.9em;
    table-layout: auto;
}
.reports .news-single-backlink td {
    padding: 3px 4px;
    vertical-align: top;
    overflow-wrap: break-word;
}
.reports .news-single-backlink .tableHead {
    font-weight: 600;
    white-space: nowrap;
    width: 64px;
}

/* Video-Embed */
.reports .youtubeReport        { margin-top: 16px; }
.reports .youtubeReport iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* Zurück-Link / "Alle Reports"-Button */
.reports .centerReport { margin-top: 20px; }
.reports .al-back-link {
    margin-top: 24px;
    text-align: left;
    clear: both;
}
.reports .al-back-link a {
    display: inline-block;
    background: #3498DB;
    color: #fff;
    padding: 8px 18px;
    border-radius: 0;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    transition: background 0.15s;
}
.reports .al-back-link a:hover { background: #2980b9; }

/* Report-Kommentar */
.reports .kommentarReport { margin: 12px 0; line-height: 1.6; }

/* Spot-Titel in Detail */
.reports .reportsHeader    { margin-bottom: 8px; }
.reports .reportsHeader .rd-headtitle { min-width: 0; }
/* Sportart als Überschrift: gleiches Schriftbild wie .spotReport, nur ein paar
   Punkte kleiner. */
.reports .reportsHeader .rd-sporttitle {
    font-size: 1.0em;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}
.reports .reportsHeader .spotReport { font-size: 1.1em; font-weight: 700; color: #333; }
/* Sportart-Select im Titel (Edit-Modus) übernimmt das Titel-Schriftbild. */
.reports .reportsHeader .rd-sporttitle-sel {
    font: inherit;
    color: inherit;
    padding: 1px 4px;
    border: 1px solid #cfd6dd;
    border-radius: 0;
    background: #fff;
}

/* (GPS-Tabelle scrollbar: im 750px-Block oben) */

/* ═══════════════════════════════════════════════════════════════
   Such- und Filter-Formular (Listenansicht)
   ═══════════════════════════════════════════════════════════════ */

.reports .reports-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}
.reports .reports-filter input[type="search"] {
    flex: 1 1 200px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 0;
    font-size: 0.9em;
    outline: none;
    transition: border-color 0.15s;
}
.reports .reports-filter input[type="search"]:focus {
    border-color: #3498DB;
}
.reports .reports-filter select {
    flex: 0 1 180px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 0;
    font-size: 0.9em;
    background: #fff;
    cursor: pointer;
}
.reports .reports-filter .filter-btn {
    background: #3498DB;
    color: #fff;
    border: none;
    padding: 6px 18px;
    border-radius: 0;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.reports .reports-filter .filter-btn:hover { background: #2980b9; }
.reports .reports-filter .filter-clear {
    color: #3498DB;
    font-size: 0.85em;
    text-decoration: none;
    white-space: nowrap;
}
.reports .reports-filter .filter-clear:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   Statistik-Seite  (/reports/statistik/)
   ═══════════════════════════════════════════════════════════════ */

/* Filter-Zeile */
.reports .stat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}
.reports .stat-year-select,
.reports .stat-sport-select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 0;
    font-size: 0.9em;
    background: #fff;
    cursor: pointer;
}

/* All-time Banner */
.reports .stat-alltime {
    background: #2c3e50;
    color: #ecf0f1;
    border-radius: 0;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 0.9em;
}
.reports .stat-alltime strong { color: #3498DB; }

/* Zusammenfassungs-Karten */
.reports .stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.reports .stat-card {
    background: #3498DB;
    color: #fff;
    border-radius: 0;
    padding: 16px 12px;
    text-align: center;
}
.reports .stat-icon {
    font-size: 1.4em;
    line-height: 1;
    margin-bottom: 4px;
}
.reports .stat-num {
    font-size: 1.9em;
    font-weight: 700;
    line-height: 1;
}
.reports .stat-label {
    font-size: 0.8em;
    margin-top: 5px;
    opacity: 0.9;
}

/* Sektionen */
.reports .stat-section { margin-bottom: 28px; }
.reports .stat-empty   { color: #999; margin-bottom: 16px; }

/* Chart */
.reports .chart-container {
    position: relative;
    height: 240px;
    margin-top: 8px;
    margin-bottom: 8px;
}
/* Material-Doughnut: kompakter, nicht über die volle Breite ziehen. */
.reports .chart-doughnut { height: 260px; max-width: 480px; }
.reports .stat-hint { color: #777; font-size: 0.9em; margin: 4px 0 14px; }

/* Statistik-Tabellen */
.reports .stat-table-title {
    font-weight: 700;
    color: #3498DB;
    margin-bottom: 8px;
    font-size: 1em;
}
/* Materialstatistik (alle Jahre): Abschnittstitel + Slot-Untertitel */
.reports .stat-alltime-title {
    margin-top: 24px;
    font-size: 1.15em;
    border-bottom: 2px solid #3498DB;
    padding-bottom: 5px;
}
.reports .stat-table-subtitle {
    font-weight: 600;
    color: #34495e;
    margin-bottom: 6px;
}
.reports .stat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    margin-bottom: 4px;
}
.reports .stat-table th {
    text-align: left;
    padding: 5px 8px;
    border-bottom: 2px solid #3498DB;
    font-weight: 600;
    white-space: nowrap;
}
.reports .stat-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #e8ecee;
    vertical-align: middle;
}
.reports .stat-table tbody tr:hover td { background: #f4f7f9; }

/* Balken-Visualisierung für Top-Spots */
.reports .stat-bar-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 120px;
}
.reports .stat-bar {
    height: 10px;
    background: #3498DB;
    border-radius: 0;
    min-width: 4px;
    transition: width 0.3s ease;
}
.reports .stat-bar-val {
    font-size: 0.85em;
    color: #555;
    white-space: nowrap;
}

/* Mobile Statistik */
@media (max-width: 600px) {
    .reports .stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .reports .stat-num { font-size: 1.5em; }
    .reports .chart-container { height: 200px; }
    .reports .stat-table th,
    .reports .stat-table td { padding: 3px 5px; font-size: 0.82em; }
}
@media (max-width: 400px) {
    .reports .stat-cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   My Stuff  (/reports/material/)
   ═══════════════════════════════════════════════════════════════ */

.reports .stuff-intro {
    color: #555;
    margin-bottom: 20px;
    font-size: 0.95em;
}
.reports .stuff-section  { margin-bottom: 28px; }
.reports .stuff-empty    { color: #999; font-size: 0.9em; margin: 4px 0; }

/* Editierbare Material-Liste (My Stuff) */
.reports .stuff-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.reports .stuff-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ecf0f1;
    border: 1px solid #dfe4e7;
    border-radius: 0;
    padding: 4px 6px 4px 12px;
    font-size: 0.92em;
}
.reports .stuff-item-size { color: #3498DB; font-weight: 600; }
.reports .stuff-del {
    border: none;
    background: rgba(192, 57, 43, .1);
    color: #c0392b;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    padding: 0;
}
.reports .stuff-del:hover { background: #c0392b; color: #fff; }
.reports .stuff-add { max-width: 360px; }
.reports .stuff-add .rd-cb-input { width: 100%; }

/* ── Kalender (/reports/kalender/) ────────────────────────────────────────── */
.reports .cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
    font-size: 0.85em;
    color: #555;
}
.reports .cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.reports .cal-legend-dot { width: 12px; height: 12px; display: inline-block; }
.reports .cal-year {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.reports .cal-month {
    border: 1px solid #e3e8ee;
    padding: 8px;
    box-sizing: border-box;
}
.reports .cal-month-head { font-weight: 700; color: #3498DB; }
.reports .cal-month-stats { font-size: 0.72rem; color: #555; margin-bottom: 6px; }
.reports .cal-month-empty { color: #bbb; }
.reports .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.reports .cal-wd {
    font-size: 0.62rem;
    color: #999;
    text-align: center;
    font-weight: 600;
}
.reports .cal-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: #555;
    background: #f4f6f7;
}
.reports .cal-day.cal-empty { background: transparent; }
.reports a.cal-day-session {
    background: #3498DB;   /* Fallback; tatsächliche Farbe je Sportart inline */
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
/* Inline-Hintergrund (Sportart-Farbe) hat Vorrang → Hover über filter statt bg. */
.reports a.cal-day-session:hover { filter: brightness(0.88); }

/* Hover-Vorschau (an <body> gehängt, daher ohne .reports-Scope) */
.cal-popup {
    position: absolute;
    z-index: 9999;
    width: 220px;
    background: #fff;
    border: 1px solid #cfd6dd;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    font-size: 13px;
    color: #333;
    overflow: hidden;
}
.cal-popup-img { display: block; width: 100%; height: 120px; object-fit: cover; }
.cal-popup-body { padding: 8px 10px; }
.cal-popup-title { font-weight: 700; color: #1d1d1c; line-height: 1.2; }
.cal-popup-sub { font-size: 11px; color: #3498DB; margin-bottom: 4px; }
.cal-popup-text { color: #555; line-height: 1.35; }
.cal-popup-gear { margin-top: 5px; font-size: 11px; color: #777; }
.cal-popup-more { margin-top: 5px; font-size: 11px; color: #999; font-style: italic; }

@media (max-width: 900px) { .reports .cal-year { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .reports .cal-year { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .reports .cal-year { grid-template-columns: 1fr; } }
.reports .stuff-title {
    font-weight: 700;
    color: #3498DB;
    font-size: 1.1em;
    border-bottom: 2px solid #3498DB;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.reports .stuff-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.reports .stuff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    min-width: 400px;
}
.reports .stuff-table th {
    text-align: left;
    padding: 5px 8px;
    background: #ecf0f1;
    border-bottom: 2px solid #3498DB;
    font-weight: 600;
    white-space: nowrap;
}
.reports .stuff-table th.ta-right,
.reports .stuff-table td.ta-right { text-align: right; }
.reports .stuff-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #e8ecee;
    vertical-align: middle;
}
/* Hersteller-Trennzeile */
.reports .stuff-hersteller-row td {
    background: #d9e8f5;
    font-weight: 700;
    font-size: 0.85em;
    padding: 3px 8px;
    color: #2c3e50;
    border-bottom: 1px solid #c5d9ed;
}
/* Einrückung für Modell-Zeilen */
.reports .stuff-indent { width: 20px; }
.reports .stuff-table tbody tr:not(.stuff-hersteller-row):hover td {
    background: #f4f7f9;
}

/* ── Lightbox ───────────────────────────────────────────────────── */
.report-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out;
    animation: lb-in .15s ease;
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.report-lightbox .rl-inner {
    position: relative;
    max-width: 98vw; max-height: 98vh;
    cursor: default;
}
.report-lightbox img {
    max-width: 98vw; max-height: 96vh;
    object-fit: contain; display: block;
    box-shadow: 0 4px 32px rgba(0,0,0,.6);
}
.report-lightbox .rl-close {
    position: absolute; top: -14px; right: -14px;
    background: #fff; color: #000;
    width: 28px; height: 28px; border-radius: 50%;
    cursor: pointer; font-size: 14px; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.4);
    transition: background .15s;
}
.report-lightbox .rl-close:hover { background: #3498DB; color: #fff; }

/* ── Webcam-Bild in Detail-Ansicht ─────────────────────────────── */
.reports .webcamDetail { margin-bottom: 12px; }
.reports .webcamDetailLabel {
    font-size: 0.75em; color: #666;
    margin-bottom: 4px; font-style: italic;
}
.reports .webcamDetailImg {
    max-width: 100%; height: auto;
    display: block; border-radius: 0;
}

/* ── Windgraph (Detailansicht) ───────────────────────────────────────── */
.reports .windGraphBox {
    margin: 24px 0 8px;
    padding: 16px;
    background: #fafafa;
    border: 1px solid #e4e4e4;
    border-radius: 0;
    box-sizing: border-box;
    max-width: 100%;
}
.reports .windGraphHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.reports .windGraphTitle {
    font-size: 0.95em;
    font-weight: bold;
    color: #1D1D1C;
}
.reports .windGraphZoomReset {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #cfcfcf;
    color: #1D1D1C;
    border-radius: 0;
    padding: 4px 12px;
    font-size: 0.8em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.reports .windGraphZoomReset:hover { background: #3498DB; border-color: #3498DB; color: #fff; }
.reports .windGraphHint {
    margin-top: 8px;
    font-size: 0.75em;
    color: #888;
}
.reports .windGraphCanvasWrap {
    position: relative;
    width: 100%;
    height: 340px;
}
.reports .windGraphCanvasWrap canvas {
    width: 100% !important;
    height: 100% !important;
    /* touch-action: pan-y → einfingriges vertikales Scrollen geht weiter an die
       Seite, die Zwei-Finger-Pinch-Geste landet aber beim Chart (chartjs-plugin-
       zoom) statt die ganze Seite zu zoomen (iPhone/Safari). */
    touch-action: pan-y;
}
@media (max-width: 750px) {
    .reports .windGraphBox { padding: 10px; }
    .reports .windGraphCanvasWrap { height: 260px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Inline-Bearbeiten (edit.js) – Schritt 1: nur Kommentar-Text
   ════════════════════════════════════════════════════════════════════════ */

/* Bearbeiten-Stift im Report-Header */
.reports .reportsHeaderActions { display: flex; gap: 8px; }
.reports .rd-edit-btn {
    border: 1px solid #c9c9c4;
    border-radius: 0;
    background: #fff;
    color: #1d1d1c;
    padding: 4px 12px;
    font: inherit;
    cursor: pointer;
}
.reports .rd-edit-btn:hover { background: #f0f0ee; }

/* Editierbarer Textbereich: dezente gestrichelte Umrandung.
   Hintergrund = transparent (gleiche Fläche wie drumherum), keine runden Ecken,
   Text linksbündig mit Überschrift (kein horizontales Padding, Border per
   negativem Margin ausgeglichen). */
.reports .rd-inline-edit {
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
    margin: 0 -1px;
    padding: 6px 0;
    border: 1px dashed #9a9a94;
    border-radius: 0;
    background: transparent;
    font: inherit;
    line-height: 1.6;
    color: inherit;
    resize: vertical;
    overflow: hidden;
}
.reports .rd-inline-edit:focus {
    outline: none;
    border-color: #3498DB;
}

/* Datum-Inline-Edit im Header: eckig, schlicht, an die Titelzeile angelehnt */
.reports .rd-date-input {
    font: inherit;
    padding: 1px 4px;
    border: 1px dashed #9a9a94;
    border-radius: 0;
    background: transparent;
    color: inherit;
    vertical-align: middle;
}
.reports .rd-date-input:focus {
    outline: none;
    border-color: #3498DB;
}

/* Edit-Modus: Header-Zeile als Flex-Row, damit Spot-Combobox, „/“ und
   Datumsfeld unabhängig von ihren Höhen sauber vertikal zentriert sind. */
.reports .spotReport.rd-editing {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Spot-Such-Combobox (inline im Header) */
.reports .rd-cb { position: relative; display: inline-block; vertical-align: middle; }
.reports .rd-cb-input {
    font: inherit;
    min-width: 180px;
    padding: 1px 4px;
    border: 1px dashed #9a9a94;
    border-radius: 0;
    background: transparent;
    color: inherit;
    vertical-align: middle;
}
.reports .rd-cb-input:focus { outline: none; border-color: #3498DB; }
.reports .rd-cb-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 2px);
    left: 0;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #c9c9c4;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
    font-size: 0.85rem;
    font-weight: 400;
    text-align: left;
}
.reports .rd-cb-group {
    padding: 6px 10px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #999;
    background: #f2f2f0;
}
.reports .rd-cb-opt,
.reports .rd-cb-create,
.reports .rd-cb-empty { padding: 7px 10px; cursor: pointer; color: #1d1d1c; }
.reports .rd-cb-opt:hover { background: #eef4fb; }
.reports .rd-cb-create { color: #3498DB; font-weight: 600; border-top: 1px solid #eee; }
.reports .rd-cb-create:hover { background: #eef7ee; }
.reports .rd-cb-empty { color: #999; cursor: default; }

/* Anlege-Panel (neuer Spot nach Schema: Name + Land/Region + Typ) */
.reports .rd-cb-panel { padding: 10px; }
.reports .rd-cb-ptitle {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
    margin-bottom: 8px;
}
.reports .rd-cb-prow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.reports .rd-cb-plabel {
    flex: 0 0 56px;
    font-size: 0.8rem;
    color: #555;
}
.reports .rd-cb-pfield {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #9a9a94;
    border-radius: 0;
    background: #fff;
    font-size: 0.9rem;
    box-sizing: border-box;
}
.reports .rd-cb-pfield:focus { outline: none; border-color: #3498DB; }
.reports .rd-cb-perr {
    margin: 4px 0 8px;
    padding: 6px 8px;
    background: #fdecea;
    border: 1px solid #f5c6c2;
    color: #a3322a;
    font-size: 0.82rem;
}
.reports .rd-cb-pactions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Material-Combobox füllt die Slot-Breite (im Sessions-Editor). */
.reports .rd-matcb { display: block; width: 100%; }
.reports .rd-matcb .rd-cb-input { width: 100%; }
.reports .rd-cb-none { color: #999; border-bottom: 1px solid #eee; }
.reports .rd-cb-none:hover { background: #f6f6f6; }

/* ── Sessions + Sportart im Edit-Modus ───────────────────────────────────── */
/* Die Session-Karten im Edit-Modus sind echte `.rd-box.session`-Boxen und erben
   damit 1:1 die Frontend-Optik. Hier nur die zusätzlichen Edit-Controls. */

/* Entfernen-Button im Session-Header (headerGPS). */
.reports .rd-box.session .headerGPS .rd-sess-rm {
    float: right;
    border: none;
    background: none;
    color: #c0392b;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

/* Zeit-Eingaben sitzen wie der Read-Text rechts neben dem Symbol-Div. */
.reports .rd-box.session .startEndzeit .rd-sess-time {
    padding: 4px 6px;
    border: 1px solid #cfd6dd;
    border-radius: 0;
    font-size: 14px;
}

/* Combobox + Notiz füllen die Tabellenzelle (zweite Spalte). */
.reports .rd-box.session td .rd-matcb { width: 100%; }
.reports .rd-box.session td .rd-sess-notiz {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #cfd6dd;
    border-radius: 0;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 36px;
}

/* GPS-Box (einmal pro Report): kts-Eingaben in den schmalen .gpsTabelle-Spalten.
   Kompakt, zentriert, ohne Number-Spinner (sonst passen die Zahlen nicht). */
.reports .rd-box.gps td .rd-gps-input {
    width: 100%;
    box-sizing: border-box;
    padding: 2px 1px;
    border: 1px solid #cfd6dd;
    border-radius: 0;
    font: inherit;
    text-align: center;
    min-width: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}
.reports .rd-box.gps td .rd-gps-input::-webkit-outer-spin-button,
.reports .rd-box.gps td .rd-gps-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Spotzusatz-Eingabe in der Titelzeile (Edit-Modus). */
.reports .reportsHeader .rd-spotz-input {
    width: 6em;
    padding: 2px 6px;
    border: 1px solid #cfd6dd;
    border-radius: 0;
    font: inherit;
}

/* ── Bilder-Verwaltung im Edit-Modus ─────────────────────────────────────── */
/* Der Original-Inhalt (Platzhalter-/Webcam-/Slideshow-Bild) bleibt als
   Hintergrund stehen; die Galerie liegt als halbtransparentes Overlay darüber. */
/* Platzhalter/Webcam/Slideshow liegen alle in der #reportPics-Box (auf Desktop
   absolut inset:0, sonst 16:9); das Overlay (inset:0) deckt sich damit exakt mit
   dem Hintergrundbild. min-height nur als Sicherung für sehr flache Zellen. */
.reports .rd-slideshow.rd-img-editing { position: relative; min-height: 200px; }
.reports .rd-img-edit {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    padding: 8px;
    box-sizing: border-box;
    overflow: auto;
    background: rgba(255, 255, 255, .62);
}
.reports .rd-img-tile,
.reports .rd-img-drop {
    position: relative;
    width: 120px;
    height: 90px;
    box-sizing: border-box;
    border-radius: 0;
    overflow: hidden;
    flex: 0 0 auto;
}
.reports .rd-img-tile {
    border: 1px solid #c9c9c4;
    background: #f2f2f0;
    cursor: grab;
}
.reports .rd-img-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.reports .rd-img-tile.rd-dragging { opacity: .4; }
.reports .rd-img-tile.rd-dropbefore { outline: 2px solid #3498DB; outline-offset: -2px; }
/* Bild-URL lädt nicht (404) → Kachel als defekt markieren statt leer wirken */
.reports .rd-img-tile.rd-img-broken { background: #fdecea; border-color: #f5c6c2; }
.reports .rd-img-tile.rd-img-broken::after {
    content: 'Bild nicht gefunden';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    font-size: 0.62rem;
    color: #a3322a;
    text-align: center;
}
/* Fehlerleiste (Upload fehlgeschlagen o.ä.) – volle Breite über den Kacheln */
.reports .rd-img-err {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    background: #fdecea;
    border: 1px solid #f5c6c2;
    color: #a3322a;
    font-size: 0.78rem;
}
.reports .rd-img-del {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    border: none;
    border-radius: 0;
    background: rgba(29,29,28,.72);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
}
.reports .rd-img-del:hover { background: #c0392b; }
.reports .rd-img-uploading { display: flex; align-items: center; justify-content: center; }
.reports .rd-img-spin {
    width: 24px;
    height: 24px;
    border: 3px solid #c9c9c4;
    border-top-color: #3498DB;
    border-radius: 50%;
    animation: rd-img-spin 0.8s linear infinite;
}
@keyframes rd-img-spin { to { transform: rotate(360deg); } }
.reports .rd-img-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 2px dashed rgba(29, 29, 28, .6);
    background: rgba(255, 255, 255, .82);
    color: #333;
    text-align: center;
    cursor: pointer;
    padding: 4px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .7);
}
.reports .rd-img-drop:hover,
.reports .rd-img-drop.rd-dragover {
    border-color: #3498DB;
    color: #1f6391;
    background: rgba(238, 247, 253, .95);
}
.reports .rd-img-drop-plus { font-size: 26px; line-height: 1; font-weight: 300; }
.reports .rd-img-drop-txt { font-size: 0.68rem; }
/* Ist noch kein Bild da, soll die Dropzone den ganzen Platz einnehmen. */
.reports .rd-img-edit .rd-img-drop-full { width: 100%; height: 100%; min-height: 180px; }

/* ── Bilder-Upload auf schmalen Screens (≤600px) ──────────────────────────────
   Das absolute Overlay über der (flachen 16:9-)Slideshow ist auf dem Handy zu
   eng zum Verwalten mehrerer Fotos. Daher fließt die Galerie hier als eigener
   Block (kein Overlay, kein Innen-Scroll): das Hintergrundbild wird ausgeblendet,
   die Kacheln werden 3 pro Reihe responsiv skaliert und die Seite scrollt normal. */
@media (max-width: 600px) {
    .reports .rd-slideshow.rd-img-editing { min-height: 0; }
    .reports .rd-slideshow.rd-img-editing #reportPics { display: none; }
    .reports .rd-img-edit {
        position: static;
        overflow: visible;
        background: #eef1f3;
        gap: 6px;
        padding: 6px;
    }
    .reports .rd-img-tile,
    .reports .rd-img-drop {
        width: calc((100% - 12px) / 3);  /* 3 pro Reihe (2× gap 6px) */
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .reports .rd-img-edit .rd-img-drop-full {
        width: 100%;
        aspect-ratio: auto;
        height: 150px;
    }
}

/* Aktionsleiste unter dem Textfeld */
.reports .rd-inline-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
/* Die Leiste wird im Edit-Modus als eigener Block NACH dem .reportDetails-Grid
   eingehängt und sitzt damit über die volle Breite unter allen Boxen. */
.reports .reportDetails + .rd-inline-actions { margin: 4px 0 20px; }
.reports .rd-inline-msg { font-size: 0.9em; color: #2e7d32; }
.reports .rd-inline-public {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    color: #333;
    cursor: pointer;
    user-select: none;
}
.reports .rd-inline-public input { margin: 0; }

/* Buttons (gemeinsam für Inline-Edit) – eckig, kein Radius */
.reports .rd-btn {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid #c9c9c4;
    border-radius: 0;
    background: #fff;
    color: #1d1d1c;
    font: inherit;
    cursor: pointer;
}
.reports .rd-btn:hover { background: #f0f0ee; }
.reports .rd-btn:disabled { opacity: 0.5; cursor: default; }
.reports .rd-btn-primary { background: #3498DB; border-color: #3498DB; color: #fff; }
.reports .rd-btn-primary:hover { background: #2c81c4; border-color: #2c81c4; }
.reports .rd-btn-danger { color: #c0392b; border-color: #e2b6b1; background: #fff; }
.reports .rd-btn-danger:hover { background: #c0392b; border-color: #c0392b; color: #fff; }