﻿
/* ===== Modern Tour Table (iscraib Tour_display) ===== */

table.TourTable {
    width: 100%;
    max-width:98%;
    /*max-width: 980px; /* override inline max-width:80% wirkt trotzdem ok */
    margin: 1px auto 22px auto;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

    /* remove legacy table look */
    table.TourTable td {
        border: 0;
        vertical-align: top;
    }

    /* Tourcode row (right aligned small text) */
    table.TourTable tr#TourIdTourCode td p.small {
        margin: 0;
        padding: 10px 14px 0 14px;
        color: rgba(0,0,0,.55);
        font-size: 12px;
    }

    /* Title */
    table.TourTable tr#TourTitel td.Tourtitel {
        background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.00)) !important;
        color: #111827;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.02em;
        padding: 14px 14px 10px 14px !important;
    }

    /* Description */
    table.TourTable tr#TourDescription td.TourTableTd {
        padding: 10px 14px 14px 14px;
        color: rgba(0,0,0,.88);
        font-size: 14px;
        line-height: 1.55;
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    /* Day number column: turn into badge */
    table.TourTable td.TourDayNumber {
        width: 72px !important; /* overrides width="35" */
        padding: 46px 0 0 14px;
        text-align: left !important;
        color: rgba(0,0,0,.55);
        font-weight: 700;
        font-size: 12px;
        letter-spacing: .06em;
        text-transform: uppercase;
        background-color: beige;
    }

        table.TourTable td.TourDayNumber::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: rgba(0,0,0,.25);
            margin-right: 8px;
            vertical-align: middle;
        }

    /* Day text cell */
    table.TourTable td.TourTableTd {
        padding: 12px 14px 14px 10px;
        color: rgba(0,0,0,.88);
        font-size: 14px;
        line-height: 1.6;
    }

    /* Day title (the <b> in the day text) */
    table.TourTable tr[id^="TourDay"] td.TourTableTd > b {
        display: inline-block;
        margin: 0 0 6px 0;
        font-size: 15px;
        font-weight: 700;
        color: #111827;
    }

    /* subtle separators between days */
    table.TourTable tr[id^="TourDay"] td {
        border-bottom: 1px solid rgba(0,0,0,.06);
    }

    table.TourTable tr#TourDay11 td {
        border-bottom: 0;
    }

    /* Improve <br> spacing visually */
    table.TourTable td.TourTableTd br + br {
        content: "";
        display: block;
        margin-top: 6px;
    }

/* ===== Responsive: table -> stacked cards ===== */
@media (max-width: 820px) {

    table.TourTable {
        border-radius: 14px;
        margin: 12px 10px 18px 10px;
        max-width: none;
    }

        table.TourTable tr#TourTitel td.Tourtitel {
            font-size: 19px;
            padding: 14px 12px 10px 12px !important;
        }

        table.TourTable tr#TourDescription td.TourTableTd {
            padding: 10px 12px 12px 12px;
        }

        /* convert day rows to block layout */
        table.TourTable tr[id^="TourDay"] {
            display: block;
            padding: 0;
        }

            table.TourTable tr[id^="TourDay"] td {
                display: block;
                width: 100% !important;
            }

        table.TourTable td.TourDayNumber {
            padding: 12px 12px 0 12px;
            
        }

        table.TourTable td.TourTableTd {
            padding: 8px 12px 14px 12px;
        }
}


/*.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}*/


@media (max-width: 480px) {
    table.TourTable tr#TourTitel td.Tourtitel {
        font-size: 18px;
    }

    table.TourTable td.TourTableTd {
        font-size: 14px;
    }
}

/* TEST */
#TourMenu {
    border: 3px solid orange !important;
}

/* linke Spalte */
td.leftcol {
    width: 280px !important;
    vertical-align: top !important;
    padding: 0 18px 0 0 !important;
}


@media (max-width: 600px) {

    #TourMenu .TourTitel {
        margin: 4px 6px !important;
    }

        #TourMenu .TourTitel a {
            display: block !important;
            font-size: 16px !important;
            padding: 12px 16px !important;
            border-radius: 12px;
        }

    #TourMenu .TourTitelAktiv {
        font-size: 17px !important;
        padding: 13px 16px !important;
        border-radius: 12px;
    }
}

/* wrapper */
#TourMenu {
    text-align: left !important;
}

    #TourMenu table {
        width: 100% !important;
        max-width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: #ffffff !important;
        border: 1px solid rgba(0,0,0,.10) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 8px 22px rgba(0,0,0,.08) !important;
    }

    /* oberer Titel */
    #TourMenu td.MetaType {
        background: linear-gradient(180deg, #f8f9fb, #eef1f5) !important;
        color: #111827 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
        padding: 12px 14px !important;
        border-bottom: 1px solid rgba(0,0,0,.08) !important;
    }

    /* zweites td im Menüblock */
    #TourMenu table tr td[valign="top"] {
        background: #ffffff !important;
        padding: 10px 8px 12px 8px !important;
    }

    /* offene Section */
    #TourMenu .TourTypTitelOpen {
        display: block !important;
        margin: 4px 6px 10px 6px !important;
        padding: 8px 10px !important;
        background: #f3f4f6 !important;
        color: #111827 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
    }

    /* weitere Section */
    #TourMenu .TourTypTitel {
        margin: 10px 6px 0 6px !important;
        padding: 0 !important;
    }

        #TourMenu .TourTypTitel a {
            display: block !important;
            padding: 9px 10px !important;
            background: #fafafa !important;
            color: #374151 !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            border: 1px solid rgba(0,0,0,.06) !important;
            border-radius: 10px !important;
            text-decoration: none !important;
        }

    /* Tourlinks */
    #TourMenu .TourTitel {
        display: block !important;
        margin: 2px 6px !important;
        padding: 0 !important;
    }

        #TourMenu .TourTitel img {
            display: none !important;
        }

        #TourMenu .TourTitel a {
            display: block !important;
            padding: 8px 10px 8px 12px !important;
            color: #374151 !important;
            font-size: 14px !important;
            line-height: 1.35 !important;
            border-radius: 10px !important;
            text-decoration: none !important;
            background: transparent !important;
        }

            #TourMenu .TourTitel a:hover {
                background: #f3f4f6 !important;
                color: #111827 !important;
            }

    /* aktive Tour */
    #TourMenu .TourTitelAktiv {
        display: block !important;
        margin: 4px 6px !important;
        padding: 9px 10px 9px 12px !important;
        background: #111827 !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        border-radius: 10px !important;
        box-shadow: 0 6px 16px rgba(0,0,0,.12) !important;
    }