/*
 * =========================================================
 * Travego Tours Theme
 * =========================================================
 *
 * Zweck:
 * - App-spezifisches White-Label-Theme für Travego Tours.
 * - Überschreibt UI-Core Styles ohne den UI-Core hart auf Travego umzubauen.
 * - Muss NACH den Core-CSS-Dateien geladen werden.
 *
 * Hauptfarbe:
 * - #993333
 *
 * Akzent:
 * - #ffffcc
 *
 * Wichtig:
 * - Diese Datei enthält bewusst auch Overrides für MyAccount, Header,
 *   Footer, Shop-Listing, Product-Detail, Cart, Checkout, Admin und Mobile.
 * - Die UI-Core-Dateien enthalten viele schwarze Default-Farben.
 *   Deshalb überschreibt dieses Theme mehrere generische Klassen.
 */

/* =========================================================
   1. Design Tokens
   ========================================================= */

:root {
    --tt-primary: #993333;
    --tt-primary-dark: #7a2929;
    --tt-primary-hover: #862f2f;
    --tt-primary-soft: #f8eeee;
    --tt-primary-softer: #fff6f6;

    --tt-cream: #ffffcc;
    --tt-cream-soft: #fffdf4;

    --tt-bg: #ffffff;
    --tt-bg-page: #fffdf4;
    --tt-bg-muted: #f8f3ef;
    --tt-card: #ffffff;

    --tt-text: #211717;
    --tt-text-soft: #4b3a3a;
    --tt-muted: #7a6a6a;

    --tt-border: #eadede;
    --tt-border-strong: #dccaca;

    --tt-success-bg: #f0fdf4;
    --tt-success-border: #bbf7d0;
    --tt-success-text: #166534;

    --tt-error-bg: #fff1f0;
    --tt-error-border: #f4b4ad;
    --tt-error-text: #b42318;

    --tt-warning-bg: #fff9db;
    --tt-warning-border: #f3dd8f;
    --tt-warning-text: #805b00;

    --tt-radius-sm: 10px;
    --tt-radius-md: 14px;
    --tt-radius-lg: 20px;
    --tt-radius-xl: 26px;
    --tt-radius-pill: 999px;

    --tt-shadow-sm: 0 8px 22px rgba(70, 25, 25, 0.07);
    --tt-shadow-md: 0 16px 42px rgba(70, 25, 25, 0.11);
    --tt-shadow-lg: 0 24px 64px rgba(70, 25, 25, 0.15);

    --tt-header-height-mobile: 56px;
}

/* =========================================================
   2. Global
   ========================================================= */

html {
    background: var(--tt-bg);
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 204, 0.55), transparent 34rem),
        linear-gradient(135deg, #fffdf4 0%, #ffffff 48%, #fff8f8 100%);
    color: var(--tt-text);
    font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

body.admin,
body.admin-dashboard {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 204, 0.45), transparent 30rem),
        #faf7f5;
}

a {
    color: var(--tt-primary);
}

a:hover {
    color: var(--tt-primary-dark);
}

::selection {
    background: var(--tt-primary);
    color: #ffffff;
}

:focus-visible {
    outline: 3px solid rgba(153, 51, 51, 0.24);
    outline-offset: 2px;
}

/* Browser-Autofill, z. B. Login-Felder */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fffdf4 inset;
    -webkit-text-fill-color: var(--tt-text);
    caret-color: var(--tt-text);
}

/* =========================================================
   3. Buttons
   ========================================================= */

/*
   3.1 Gemeinsame Button-Basis

   Diese Regeln gelten für Primary und Secondary Buttons:
   - runde Form
   - fette Schrift
   - saubere Transition
   - gleiche Grundhöhe/Optik
*/
.primary-btn,
.secondary-btn,
.secondary-link,
.myaccount-btn,
.myaccount-secondary-btn,
.account-primary-btn,
.filter-apply-btn,
.load-more-btn,
.product-cart-btn,
.product-wishlist-btn,
.product-chat-btn,
.wishlist-cart-btn,
.wishlist-contact-btn,
.contact-submit,
.install-card button,
.cookie-btn-primary,
.cookie-btn-secondary,
.mobile-auth-primary,
.mobile-auth-secondary,
.mobile-logout-btn,
.myaccount-sidebar-logout-btn,
.btn-primary,
.btn-success,
.btn-secondary,
.btn-outline-light {
    border-radius: var(--tt-radius-pill) !important;
    font-weight: 800;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

/*
   3.2 Primary Buttons

   Für Hauptaktionen:
   - Speichern
   - In den Warenkorb
   - Anmelden
   - Verbindlich buchen
   - Filter anwenden
*/
.primary-btn,
.myaccount-btn,
.account-primary-btn,
.filter-apply-btn,
.load-more-btn,
.product-cart-btn,
.product-chat-btn,
.wishlist-cart-btn,
.wishlist-contact-btn,
.contact-submit,
.install-card button,
.cookie-btn-primary,
.mobile-auth-primary,
.mobile-logout-btn,
.myaccount-sidebar-logout-btn,
.btn-primary,
.btn-success {
    background: var(--tt-primary) !important;
    border-color: var(--tt-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(153, 51, 51, 0.16);
}

.primary-btn:hover,
.myaccount-btn:hover,
.account-primary-btn:hover,
.filter-apply-btn:hover,
.load-more-btn:hover,
.product-cart-btn:hover,
.product-chat-btn:hover,
.wishlist-cart-btn:hover,
.wishlist-contact-btn:hover,
.contact-submit:hover,
.install-card button:hover,
.cookie-btn-primary:hover,
.mobile-auth-primary:hover,
.mobile-logout-btn:hover,
.myaccount-sidebar-logout-btn:hover,
.btn-primary:hover,
.btn-success:hover {
    background: var(--tt-primary-dark) !important;
    border-color: var(--tt-primary-dark) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(153, 51, 51, 0.24);
}

/*
   3.3 Secondary Buttons

   Für Nebenaktionen:
   - Zurück
   - Abbrechen
   - Merkliste
   - Cookie-Auswahl
   - sekundäre Links
*/
.secondary-btn,
.secondary-link,
.myaccount-secondary-btn,
.cookie-btn-secondary,
.mobile-auth-secondary,
.product-wishlist-btn,
.btn-secondary,
.btn-outline-light {
    background: #ffffff !important;
    border: 1px solid var(--tt-border) !important;
    color: var(--tt-primary) !important;
    border-radius: var(--tt-radius-pill) !important;
    font-weight: 800;
    box-shadow: none !important;
}

.secondary-btn:hover,
.secondary-link:hover,
.myaccount-secondary-btn:hover,
.cookie-btn-secondary:hover,
.mobile-auth-secondary:hover,
.product-wishlist-btn:hover,
.btn-secondary:hover,
.btn-outline-light:hover {
    background: var(--tt-primary-soft) !important;
    border-color: var(--tt-primary) !important;
    color: var(--tt-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(153, 51, 51, 0.10) !important;
}

/* Gefährliche Buttons bleiben rot, aber eleganter */
.btn-danger,
.link-danger,
.cart-remove-btn,
.wishlist-remove-btn,
.btn-delete {
    border-radius: var(--tt-radius-pill) !important;
}

/* =========================================================
   Cart Success Modal
   ========================================================= */

.cart-success-dialog .secondary-btn {
    background: #ffffff !important;
    border: 1px solid var(--tt-border) !important;
    color: var(--tt-primary) !important;
}

.cart-success-dialog .secondary-btn:hover {
    background: var(--tt-primary-soft) !important;
    border-color: var(--tt-primary) !important;
    color: var(--tt-primary-dark) !important;
}

.cart-success-dialog .primary-btn,
.cart-success-dialog .product-cart-btn {
    background: var(--tt-primary) !important;
    border-color: var(--tt-primary) !important;
    color: #ffffff !important;
}

.cart-success-dialog .primary-btn:hover,
.cart-success-dialog .product-cart-btn:hover {
    background: var(--tt-primary-dark) !important;
    border-color: var(--tt-primary-dark) !important;
    color: #ffffff !important;
}

/* =========================================================
   4. Header
   ========================================================= */

.header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--tt-border);
    box-shadow: 0 4px 18px rgba(70, 25, 25, 0.04);
    backdrop-filter: blur(14px);
}

.logo a {
    color: var(--tt-primary);
    font-weight: 900;
    letter-spacing: -0.03em;
}

.logo a:hover {
    color: var(--tt-primary-dark);
}

/* =========================================================
   Travego Header Logo
   ========================================================= */

.travego-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.travego-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    line-height: 1;
    
    /* Wichtig: etwas breiter als bisher */
    max-width: 220px;
    min-width: 150px;
}

.travego-logo-img {
    display: block;

    /* Höhe bewusst klein halten */
    height: 38px;
    width: auto;

    /* Wichtig: nicht verzerren */
    object-fit: contain;
    object-position: left center;

    /* Bild darf breiter sein */
    max-width: 220px;

    /* kein grauer Hintergrund vom img-Element */
    background: transparent;
    border: 0;
    box-shadow: none;
}

.travego-logo-text {
    color: var(--tt-primary);
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.search-bar input,
.mobile-search-bar input,
.mobile-search-input {
    background: #ffffff;
    border-color: var(--tt-border);
    color: var(--tt-text);
}

.search-bar input:focus,
.mobile-search-bar input:focus,
.mobile-search-input:focus {
    border-color: var(--tt-primary);
    box-shadow: 0 0 0 4px rgba(153, 51, 51, 0.1);
}

.search-bar button,
.mobile-search-bar button {
    background: var(--tt-primary);
    color: #ffffff;
}

.search-bar button:hover,
.mobile-search-bar button:hover {
    background: var(--tt-primary-dark);
}

.header-icon-link,
.account-trigger,
.mobile-sortiment-trigger {
    color: var(--tt-primary);
}

.header-icon-link:hover,
.account-trigger:hover,
.mobile-sortiment-trigger:hover {
    background: var(--tt-primary-soft);
    color: var(--tt-primary-dark);
}

.header-icon-link::after,
.account-trigger::after,
.mobile-sortiment-trigger span {
    color: var(--tt-primary);
}

.cart-badge,
.header-counter-badge,
.account-header-badge,
.burger-menu-badge,
.mobile-nav-badge,
.account-menu-badge {
    background: var(--tt-primary);
    color: #ffffff;
    box-shadow: 0 0 0 2px #ffffff;
}

.account-dropdown {
    background: #ffffff;
    border-color: var(--tt-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-lg);
}

.account-dropdown::before {
    background: #ffffff;
    border-color: var(--tt-border);
}

.account-section-title {
    color: var(--tt-text);
}

.account-user-mail {
    color: var(--tt-muted);
}

.account-links a {
    color: var(--tt-text);
}

.account-links a:hover {
    background: var(--tt-primary-soft);
    color: var(--tt-primary);
}

.account-secondary-link,
.mobile-auth-secondary {
    color: var(--tt-primary);
}

.suggestions-list {
    border-color: var(--tt-border);
    box-shadow: var(--tt-shadow-md);
}

.suggestions-list li:hover {
    background: var(--tt-primary-soft);
}

/* =========================================================
   5. Desktop Kategorien-Navigation
   ========================================================= */

.main-nav {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--tt-border);
    box-shadow: 0 6px 18px rgba(70, 25, 25, 0.035);
}

.nav-link {
    color: var(--tt-text);
    border-radius: var(--tt-radius-pill);
}

.nav-link:hover {
    background: var(--tt-primary-soft);
    color: var(--tt-primary);
}

.nav-dropdown {
    background: #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-md);
}

.dropdown-item {
    color: var(--tt-text);
}

.dropdown-item:hover,
.dropdown-item.active {
    background: var(--tt-primary-soft);
    color: var(--tt-primary);
}

.dropdown-item[data-has-children="true"]::after {
    color: var(--tt-primary);
}

.icon {
    color: var(--tt-primary);
}

/* =========================================================
   6. Mobile Sortiment
   ========================================================= */

.mobile-sortiment-panel {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 204, 0.55), transparent 24rem),
        #fffdf4;
}

.mobile-sortiment-panel.is-open {
    box-shadow: 0 24px 60px rgba(70, 25, 25, 0.16);
}

.mobile-sortiment-head {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--tt-border);
    backdrop-filter: blur(12px);
}

.mobile-sortiment-title {
    color: var(--tt-primary);
}

.mobile-sortiment-back {
    color: var(--tt-primary);
}

.mobile-sortiment-grid {
    gap: 12px;
}

.mobile-sortiment-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 204, 0.55), rgba(255, 255, 255, 0.98));
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    color: var(--tt-text);
    box-shadow: var(--tt-shadow-sm);
}

.mobile-sortiment-card:hover,
.mobile-sortiment-card:active {
    background: var(--tt-primary-soft);
    color: var(--tt-primary-dark);
}

.mobile-sortiment-list {
    background: #ffffff;
}

.mobile-sortiment-row {
    background: #ffffff;
    border-bottom: 1px solid var(--tt-border);
    color: var(--tt-text);
}

.mobile-sortiment-row:hover,
.mobile-sortiment-row:active {
    background: var(--tt-primary-soft);
    color: var(--tt-primary);
}

.mobile-sortiment-row i {
    color: var(--tt-primary);
}

.mobile-sortiment-show-all {
    background: var(--tt-cream-soft);
    color: var(--tt-primary);
}

/* =========================================================
   7. Listing / Shop Startseite / Kategorie-Seiten
   ========================================================= */

.content-layout {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 18px;
}

.content-header {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-sm);
}

.content-header h2 {
    color: var(--tt-text);
    letter-spacing: -0.03em;
}

.product-count,
.count {
    color: var(--tt-muted);
}

.breadcrumb {
    max-width: 1240px;
    margin: 0 auto;
    color: var(--tt-muted);
}

.breadcrumb a {
    color: var(--tt-primary);
    font-weight: 700;
}

.card,
.product-card,
.sidebar,
.filter-sidebar {
    background: #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-sm);
}

.product-card {
    text-align: left;
    overflow: hidden;
}

.product-card:hover,
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tt-shadow-md);
}

.product-card img,
.card img {
    border-radius: var(--tt-radius-md);
}

.product-card span {
    color: var(--tt-text);
}

.new-price,
.wishlist-new-price,
.price,
.checkout-item-line-total,
.cart-line-total,
.order-success-item-total {
    color: var(--tt-primary);
    font-weight: 900;
}

.old-price,
.wishlist-old-price {
    color: var(--tt-muted);
}

.discount-badge,
.wishlist-discount-badge,
.sale-badge {
    background: var(--tt-primary);
    color: #ffffff;
    border-radius: var(--tt-radius-pill);
}

.product-card .old-price + .new-price {
    color: var(--tt-primary);
}

.color-dot.active {
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px var(--tt-primary);
}

.sidebar a {
    color: var(--tt-text);
}

.sidebar a:hover {
    background: var(--tt-primary-soft);
    color: var(--tt-primary);
}

.sidebar a.active {
    background: var(--tt-primary);
    color: #ffffff;
}

.filter-section {
    border-top-color: var(--tt-border);
}

.filter-section summary {
    color: var(--tt-text);
}

.filter-section summary::after {
    color: var(--tt-primary);
}

.filter-checkbox {
    color: var(--tt-text);
}

.color-choice:hover .color-choice-ui {
    background: var(--tt-primary-soft);
}

.color-choice-input:checked + .color-choice-ui,
.size-option input:checked + .size-pill {
    background: var(--tt-primary);
    border-color: var(--tt-primary);
    color: #ffffff;
}

.size-pill,
.sort-select,
.price-input-group input {
    border-color: var(--tt-border);
}

.sort-select:focus,
.price-input-group input:focus {
    border-color: var(--tt-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(153, 51, 51, 0.1);
}

.filter-chip {
    background: var(--tt-primary-soft);
    border-color: var(--tt-border);
    color: var(--tt-primary);
}

.filter-chip:hover {
    background: var(--tt-primary);
    color: #ffffff;
}

.mobile-filter-open-btn {
    border-color: var(--tt-primary);
    color: var(--tt-primary);
}

.mobile-filter-backdrop {
    background: rgba(33, 23, 23, 0.42);
}

.sidebar-stack {
    background: #ffffff;
}

.mobile-filter-drawer-head {
    background: #ffffff;
    border-bottom-color: var(--tt-border);
}

.mobile-filter-reset-all {
    color: var(--tt-primary);
}

.mobile-filter-close {
    background: var(--tt-primary-soft);
    color: var(--tt-primary);
}

/* =========================================================
   8. MyAccount / Login / Register / Profil
   ========================================================= */

.myaccount-page,
.myaccount-auth-page {
    color: var(--tt-text);
}

.myaccount-card,
.myaccount-content,
.myaccount-sidebar,
.myaccount-user-box,
.profile-section,
.profile-static-box,
.invoice-list-card,
.invoice-empty-box,
.invoice-detail-section {
    background: rgba(255, 255, 255, 0.97);
    border-color: var(--tt-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-sm);
}

.myaccount-card h1,
.myaccount-content h1,
.profile-section h1,
.profile-section h2 {
    color: var(--tt-text);
    letter-spacing: -0.04em;
}

.myaccount-subtitle,
.profile-hint {
    color: var(--tt-muted);
}

.myaccount-menu a {
    color: var(--tt-text);
}

.myaccount-menu a:hover,
.myaccount-menu a.active {
    background: var(--tt-primary-soft);
    color: var(--tt-primary);
}

.myaccount-form label,
.profile-label {
    color: var(--tt-text);
}

.myaccount-form input[type="email"],
.myaccount-form input[type="password"],
.myaccount-form input[type="text"],
.myaccount-form input[type="tel"],
.profile-section input,
.profile-section select,
.profile-section textarea {
    background: #ffffff;
    border-color: var(--tt-border);
    border-radius: var(--tt-radius-md);
    color: var(--tt-text);
}

.myaccount-form input:focus,
.profile-section input:focus,
.profile-section select:focus,
.profile-section textarea:focus {
    border-color: var(--tt-primary);
    box-shadow: 0 0 0 4px rgba(153, 51, 51, 0.1);
}

.myaccount-link-row a,
.myaccount-link-row-left a,
.invoice-back-link,
.invoice-detail-product-name {
    color: var(--tt-primary);
    font-weight: 700;
}

.myaccount-message-error,
.form-message-error,
.password-form-message-error {
    background: var(--tt-error-bg);
    border-color: var(--tt-error-border);
    color: var(--tt-error-text);
}

.myaccount-message-success,
.form-message-success,
.password-form-message-success {
    background: var(--tt-success-bg);
    border-color: var(--tt-success-border);
    color: var(--tt-success-text);
}

.field-error {
    color: var(--tt-error-text);
}

.input-error,
.has-error {
    border-color: var(--tt-error-text) !important;
    background: #fff7f7 !important;
}

.profile-value {
    color: var(--tt-text);
}

.profile-edit-btn {
    border-color: var(--tt-border);
    color: var(--tt-primary);
    border-radius: var(--tt-radius-pill);
}

.profile-edit-btn:hover {
    background: var(--tt-primary-soft);
    border-color: var(--tt-primary);
}

.consent-switch input:checked + span {
    background: var(--tt-primary);
}

.toggle-password-btn svg {
    fill: var(--tt-muted);
}

.toggle-password-btn:hover svg {
    fill: var(--tt-primary);
}

.myaccount-seller-box {
    display: none;
}

/* Rechnungsseiten sind bei Travego normalerweise deaktiviert, aber sicherheitshalber gestylt. */
.invoice-status.PAID {
    background: var(--tt-success-bg);
    color: var(--tt-success-text);
}

.invoice-status.OPEN {
    background: var(--tt-warning-bg);
    color: var(--tt-warning-text);
}

/* =========================================================
   9. Product Detail
   ========================================================= */

.product-wrapper,
.product-container,
.product-action-panel,
.product-description,
.cart-success-dialog {
    background: #ffffff;
    border-color: var(--tt-border);
    border-radius: var(--tt-radius-xl);
    box-shadow: var(--tt-shadow-sm);
}

.product-info h1,
.product-description h2,
.product-seller-name {
    color: var(--tt-text);
}

.breadcrumb,
.rating-row,
.review-count-link,
.price-note,
.product-seller-label {
    color: var(--tt-muted);
}

.thumb-nav,
.size-box,
.product-wishlist-btn,
.secondary-btn {
    border-color: var(--tt-border);
}

.thumbnail-container.selected,
.size-box.selected,
.size-box:hover,
.product-wishlist-btn:hover {
    border-color: var(--tt-primary);
    background: var(--tt-primary-soft);
}

.stars,
.average-rating {
    color: var(--tt-primary);
}

.product-action-success,
.cart-success-check {
    background: var(--tt-success-bg);
    border-color: var(--tt-success-border);
    color: var(--tt-success-text);
}

.product-action-error {
    background: var(--tt-error-bg);
    border-color: var(--tt-error-border);
    color: var(--tt-error-text);
}

/* =========================================================
   10. Cart / Checkout / Order Success
   ========================================================= */

.cart-page,
.checkout-page,
.order-success-page {
    color: var(--tt-text);
}

.cart-main,
.cart-summary,
.cart-item,
.checkout-card,
.checkout-sidebar,
.checkout-item-card,
.order-success-card,
.order-success-sidebar,
.order-success-item,
.address-box {
    background: #ffffff;
    border-color: var(--tt-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-sm);
}

.cart-empty-box,
.checkout-warning,
.summary-warning {
    background: var(--tt-warning-bg);
    border-color: var(--tt-warning-border);
    color: var(--tt-warning-text);
}

.cart-alert.success,
.cart-status.AVAILABLE,
.checkout-item-status.AVAILABLE {
    background: var(--tt-success-bg);
    border-color: var(--tt-success-border);
    color: var(--tt-success-text);
}

.cart-alert.error,
.cart-status.OUT_OF_STOCK,
.checkout-item-status.OUT_OF_STOCK {
    background: var(--tt-error-bg);
    border-color: var(--tt-error-border);
    color: var(--tt-error-text);
}

.cart-status.LOW_STOCK,
.cart-status.QUANTITY_LIMITED,
.checkout-item-status.LOW_STOCK,
.checkout-item-status.QUANTITY_LIMITED {
    background: var(--tt-warning-bg);
    border-color: var(--tt-warning-border);
    color: var(--tt-warning-text);
}

.cart-qty-input,
.payment-option {
    border-color: var(--tt-border);
}

.cart-qty-input:focus {
    border-color: var(--tt-primary);
    box-shadow: 0 0 0 4px rgba(153, 51, 51, 0.1);
}

.payment-option:hover,
.payment-option:has(input:checked) {
    border-color: var(--tt-primary);
    background: var(--tt-primary-soft);
}

.order-success-hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 204, 0.75), rgba(153, 51, 51, 0.08)),
        #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-xl);
    box-shadow: var(--tt-shadow-sm);
}

.order-success-icon {
    background: var(--tt-primary);
    color: #ffffff;
}

/* =========================================================
   10.1 Travego App Checkout
   =========================================================
   Dieser Block gehört zum app-spezifischen Travego-Checkout.

   Wichtig:
   checkout.html verwendet eigene Klassen:
   - travego-checkout-page
   - travego-checkout-hero
   - travego-card
   - travego-booking-item
   - travego-form-grid
   - travego-summary-card

   Die generischen Core-Klassen .checkout-page/.checkout-card greifen dort nicht.
*/

.travego-checkout-page {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 34px 0 56px;
    color: var(--tt-text);
}

/* Seitenkopf */
.travego-checkout-hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 204, 0.82), rgba(153, 51, 51, 0.06)),
        #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-xl);
    box-shadow: var(--tt-shadow-sm);
    margin-bottom: 24px;
    padding: 28px 32px;
}

.travego-checkout-hero h1 {
    color: var(--tt-text);
    font-size: clamp(2rem, 4vw, 3.15rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 1.05;
    margin: 0 0 12px;
}

.travego-checkout-hero p {
    color: var(--tt-muted);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
    max-width: 760px;
}

.travego-kicker {
    color: var(--tt-primary);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

/* Layout */
.travego-checkout-grid {
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) 360px;
}

.travego-checkout-main {
    display: grid;
    gap: 24px;
}

.travego-checkout-sidebar {
    position: sticky;
    top: 90px;
}

/* Cards */
.travego-card {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-xl);
    box-shadow: var(--tt-shadow-md);
    padding: 24px;
}

.travego-card-head {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.travego-card h2 {
    color: var(--tt-text);
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.15;
    margin: 0;
}

/* Buchungspositionen */
.travego-booking-items {
    display: grid;
    gap: 14px;
}

.travego-booking-item {
    background: linear-gradient(135deg, #fffdf4 0%, #ffffff 100%);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    display: grid;
    gap: 16px;
    grid-template-columns: 132px minmax(0, 1fr);
    padding: 14px;
}

.travego-booking-image-link {
    display: block;
}

.travego-booking-image {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    display: block;
    object-fit: cover;
    width: 100%;
}

.travego-booking-body {
    min-width: 0;
}

.travego-booking-title-row {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.travego-booking-title {
    color: var(--tt-text);
    font-size: 1.05rem;
    font-weight: 900;
    text-decoration: none;
}

.travego-booking-title:hover {
    color: var(--tt-primary);
}

.travego-booking-title-row strong {
    color: var(--tt-primary);
    font-size: 1.05rem;
    white-space: nowrap;
}

.travego-booking-meta {
    color: var(--tt-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.92rem;
    gap: 8px 16px;
    margin-top: 8px;
}

.travego-status {
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 800;
    margin-top: 12px;
    padding: 5px 10px;
    border-radius: var(--tt-radius-pill);
}

.travego-status.AVAILABLE {
    background: var(--tt-success-bg);
    color: var(--tt-success-text);
}

.travego-status.LOW_STOCK,
.travego-status.QUANTITY_LIMITED {
    background: var(--tt-warning-bg);
    color: var(--tt-warning-text);
}

.travego-status.OUT_OF_STOCK {
    background: var(--tt-error-bg);
    color: var(--tt-error-text);
}

/* Formular */
.travego-profile-form {
    display: grid;
    gap: 18px;
}

.travego-form-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.travego-field {
    display: grid;
    gap: 7px;
}

.travego-field label {
    color: var(--tt-text);
    font-size: 0.9rem;
    font-weight: 900;
}

.travego-field input {
    background: #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-md);
    color: var(--tt-text);
    font: inherit;
    min-height: 46px;
    outline: none;
    padding: 0 14px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.travego-field input:focus {
    border-color: var(--tt-primary);
    box-shadow: 0 0 0 4px rgba(153, 51, 51, 0.1);
}

.travego-field input.has-error {
    border-color: var(--tt-error-text);
    background: #fff7f7;
}

.travego-field-error {
    color: var(--tt-error-text);
    display: none;
    font-size: 0.82rem;
    font-weight: 700;
}

/* Checkbox verbindliche Buchung */
.travego-check-row {
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(255, 255, 204, 0.52), rgba(153, 51, 51, 0.05));
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    color: var(--tt-text);
    cursor: pointer;
    display: flex;
    gap: 12px;
    line-height: 1.5;
    padding: 16px;
}

.travego-check-row input {
    accent-color: var(--tt-primary);
    flex: 0 0 auto;
    margin-top: 4px;
}

/* Summary */
.travego-summary-card {
    display: grid;
    gap: 16px;
}

.travego-summary-row {
    align-items: center;
    border-bottom: 1px solid var(--tt-border);
    display: flex;
    justify-content: space-between;
    padding: 11px 0;
}

.travego-summary-row span {
    color: var(--tt-muted);
}

.travego-summary-row strong {
    color: var(--tt-text);
}

.travego-summary-total {
    border-bottom: 0;
    font-size: 1.12rem;
}

.travego-summary-total strong {
    color: var(--tt-primary);
    font-size: 1.25rem;
}

.travego-info-box {
    background: linear-gradient(135deg, rgba(255, 255, 204, 0.72), rgba(153, 51, 51, 0.07));
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    padding: 16px;
}

.travego-info-box strong {
    color: var(--tt-text);
    display: block;
    font-weight: 900;
    margin-bottom: 6px;
}

.travego-info-box p {
    color: var(--tt-muted);
    line-height: 1.5;
    margin: 0;
}

/* Buttons/Links */
.travego-primary-btn {
    align-items: center;
    background: var(--tt-primary);
    border: 1px solid var(--tt-primary);
    border-radius: var(--tt-radius-pill);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 900;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    text-decoration: none;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.travego-primary-btn:hover {
    background: var(--tt-primary-dark);
    border-color: var(--tt-primary-dark);
    box-shadow: 0 14px 32px rgba(153, 51, 51, 0.25);
    transform: translateY(-1px);
}

.travego-primary-btn:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
    box-shadow: none;
}

.travego-full-btn {
    width: 100%;
}

.travego-secondary-link {
    color: var(--tt-primary);
    font-weight: 800;
    text-decoration: none;
}

.travego-secondary-link:hover {
    color: var(--tt-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.travego-center-link {
    display: block;
    text-align: center;
}

/* Meldungen */
.travego-form-message {
    border-radius: var(--tt-radius-lg);
    font-weight: 800;
    margin-bottom: 18px;
    padding: 14px 16px;
}

.travego-form-message.error {
    background: var(--tt-error-bg);
    border: 1px solid var(--tt-error-border);
    color: var(--tt-error-text);
}

.travego-form-message.success {
    background: var(--tt-success-bg);
    border: 1px solid var(--tt-success-border);
    color: var(--tt-success-text);
}

.travego-form-message.info {
    background: var(--tt-warning-bg);
    border: 1px solid var(--tt-warning-border);
    color: var(--tt-warning-text);
}

/* Tablet */
@media (max-width: 960px) {
    .travego-checkout-grid {
        grid-template-columns: 1fr;
    }

    .travego-checkout-sidebar {
        position: static;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .travego-checkout-page {
        width: min(100% - 22px, 1180px);
        padding: 20px 0 38px;
    }

    .travego-checkout-hero {
        border-radius: 22px;
        padding: 22px;
    }

    .travego-card {
        border-radius: 22px;
        padding: 18px;
    }

    .travego-card-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .travego-form-grid {
        grid-template-columns: 1fr;
    }

    .travego-booking-item {
        grid-template-columns: 92px minmax(0, 1fr);
        padding: 12px;
    }

    .travego-booking-title-row {
        flex-direction: column;
        gap: 6px;
    }

    .travego-booking-title-row strong {
        white-space: normal;
    }
}

/* Sehr kleine Geräte */
@media (max-width: 420px) {
    .travego-booking-item {
        grid-template-columns: 1fr;
    }

    .travego-booking-image {
        max-height: 220px;
    }
}

/* =========================================================
   11. Wishlist
   ========================================================= */

.wishlist-page,
.wishlist-card,
.wishlist-item,
.wishlist-empty {
    background: #ffffff;
    border-color: var(--tt-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-sm);
}

.wishlist-product-title,
.wishlist-brand {
    color: var(--tt-text);
}

.wishlist-stars {
    color: var(--tt-primary);
}

.wishlist-seller span {
    color: var(--tt-primary);
}

.wishlist-alert.success {
    background: var(--tt-success-bg);
    border-color: var(--tt-success-border);
    color: var(--tt-success-text);
}

.wishlist-alert.error {
    background: var(--tt-error-bg);
    border-color: var(--tt-error-border);
    color: var(--tt-error-text);
}

/* =========================================================
   Wishlist Empty State
   =========================================================
   Beispiel:
   - Merkliste leer
   - Button "Zum Shop"
*/

body .wishlist-shop-link {
    background: var(--tt-primary) !important;
    border: 1px solid var(--tt-primary) !important;
    color: #ffffff !important;
    border-radius: var(--tt-radius-pill) !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 28px rgba(153, 51, 51, 0.16) !important;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

body .wishlist-shop-link:hover {
    background: var(--tt-primary-dark) !important;
    border-color: var(--tt-primary-dark) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(153, 51, 51, 0.24) !important;
}

/* =========================================================
   12. Contact
   ========================================================= */

.contact-page,
.contact-hero,
.contact-form,
.contact-info-card {
    color: var(--tt-text);
}

.contact-hero,
.contact-form,
.contact-info-card {
    background: #ffffff;
    border-color: var(--tt-border);
    border-radius: var(--tt-radius-xl);
    box-shadow: var(--tt-shadow-sm);
}

.contact-eyebrow {
    color: var(--tt-primary);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    border-color: var(--tt-border);
    border-radius: var(--tt-radius-md);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: var(--tt-primary);
    box-shadow: 0 0 0 4px rgba(153, 51, 51, 0.1);
}

.contact-alert-success {
    background: var(--tt-success-bg);
    border-color: var(--tt-success-border);
    color: var(--tt-success-text);
}

.contact-alert-error {
    background: var(--tt-error-bg);
    border-color: var(--tt-error-border);
    color: var(--tt-error-text);
}

/* =========================================================
   13. Installationsseiten
   ========================================================= */

body.install-page {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 204, 0.85), transparent 34rem),
        linear-gradient(135deg, #fffdf4 0%, #ffffff 58%, #f8eeee 100%);
    color: var(--tt-text);
}

.install-card {
    background: rgba(255, 255, 255, 0.97);
    border-color: var(--tt-border);
    border-radius: var(--tt-radius-xl);
    box-shadow: var(--tt-shadow-lg);
}

.install-card::before {
    content: "Travego Tours";
    display: inline-flex;
    margin-bottom: 1rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--tt-radius-pill);
    background: linear-gradient(135deg, #ffffcc 0%, rgba(153, 51, 51, 0.12) 100%);
    color: var(--tt-primary);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.install-card h1 {
    color: var(--tt-text);
    letter-spacing: -0.04em;
}

.install-card p {
    color: var(--tt-muted);
}

.install-card input[type="text"],
.install-card input[type="email"],
.install-card input[type="password"] {
    border-color: var(--tt-border);
    border-radius: var(--tt-radius-md);
}

.install-card input:focus {
    border-color: var(--tt-primary);
    box-shadow: 0 0 0 4px rgba(153, 51, 51, 0.11);
}

.install-alert-error {
    background: var(--tt-error-bg);
    border-color: var(--tt-error-border);
    color: var(--tt-error-text);
}

/* =========================================================
   14. Footer
   =========================================================
   Hinweis:
   Der UI-Core Footer hat aktuell einen <style>-Block im Fragment.
   Deshalb verwenden wir hier bewusst höhere Spezifität.
   ========================================================= */

body .footer {
    background:
        linear-gradient(135deg, var(--tt-primary-dark) 0%, var(--tt-primary) 100%);
    color: rgba(255, 255, 255, 0.88);
    margin-top: 64px;
    padding: 48px 24px 32px;
}

body .footer-container {
    max-width: 1180px;
    margin: 0 auto;
    gap: 34px;
}

body .footer h4 {
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 14px;
}

body .footer a {
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
}

body .footer a:hover {
    color: var(--tt-cream);
}

body .footer-bottom {
    max-width: 1180px;
    margin: 34px auto 0;
    color: rgba(255, 255, 255, 0.72);
}

body .footer-bottom a {
    display: inline;
    color: #ffffff;
    font-weight: 800;
}

/* =========================================================
   15. Cookie Banner
   ========================================================= */

.cookie-banner-modal,
.cookie-banner-layer,
.cookie-modal {
    border-radius: var(--tt-radius-xl);
    border-color: var(--tt-border);
    box-shadow: var(--tt-shadow-lg);
}

.cookie-banner-title,
.cookie-modal-header h3 {
    color: var(--tt-text);
}

.cookie-category {
    border-color: var(--tt-border);
    border-radius: var(--tt-radius-md);
}

.cookie-switch input:checked + span,
.consent-switch input:checked + span {
    background: var(--tt-primary);
}

/* =========================================================
   16. Admin
   ========================================================= */

.navbar.bg-dark,
.navbar-dark,
.admin-topbar {
    background: var(--tt-primary) !important;
}

.navbar-brand {
    color: #ffffff !important;
}

.admin-content,
.container.py-5 {
    color: var(--tt-text);
}

.admin-card,
.admin-tile,
.admin-table-card,
.admin-help-box,
.moderation-card,
.admin-email-card {
    background: #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-sm);
}

.admin-tile:hover {
    box-shadow: var(--tt-shadow-md);
}

.admin-tile .icon {
    color: var(--tt-primary);
}

.admin-tile h5 {
    color: var(--tt-text);
}

.admin-tile p {
    color: var(--tt-muted);
}

.admin-tabs .tab,
.tab {
    border-radius: var(--tt-radius-pill);
    color: var(--tt-text);
}

.admin-tabs .tab:hover,
.tab:hover,
.admin-tabs .tab.active,
.tab.active {
    background: var(--tt-primary);
    color: #ffffff;
}

.admin-table th,
.styled-table th {
    background: var(--tt-primary);
    color: #ffffff;
}

.admin-table tr:hover,
.styled-table tr:hover {
    background: var(--tt-primary-soft);
}

.status-pill-active,
.badge-success,
.badge-active {
    background: var(--tt-success-bg);
    color: var(--tt-success-text);
}

.status-pill-inactive,
.badge-danger,
.badge-expired {
    background: var(--tt-error-bg);
    color: var(--tt-error-text);
}

.badge-planned {
    background: var(--tt-warning-bg);
    color: var(--tt-warning-text);
}

.admin-alert-success {
    background: var(--tt-success-bg);
    border-color: var(--tt-success-border);
    color: var(--tt-success-text);
}

.admin-alert-error {
    background: var(--tt-error-bg);
    border-color: var(--tt-error-border);
    color: var(--tt-error-text);
}

/* Confirm Modal */
.zc-confirm-modal {
    border-radius: var(--tt-radius-xl);
    border: 1px solid var(--tt-border);
    box-shadow: var(--tt-shadow-lg);
}

.zc-confirm-overlay {
    background: rgba(33, 23, 23, 0.42);
}

/* =========================================================
   17. Mobile
   ========================================================= */

@media (max-width: 900px) {
    body {
        background:
            radial-gradient(circle at top left, rgba(255, 255, 204, 0.62), transparent 24rem),
            #ffffff;
    }

    .myaccount-sidebar {
        background: rgba(255, 255, 255, 0.98);
        border-bottom: 1px solid var(--tt-border);
        box-shadow: 0 8px 20px rgba(70, 25, 25, 0.06);
    }

    .myaccount-menu a {
        border-color: var(--tt-border);
        color: var(--tt-primary);
    }

    .myaccount-menu a.active {
        border-color: var(--tt-primary);
        background: var(--tt-primary);
        color: #ffffff;
    }

    .myaccount-content {
        background: transparent;
        box-shadow: none;
    }
}

@media (max-width: 768px) {
    .header {
        min-height: var(--tt-header-height-mobile);
        padding: 7px 10px;
    }

    .logo a {
        font-size: 17px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .travego-logo-img,
    .logo img {
        height: 34px;
        max-width: 132px;
    }

    .nav {
        gap: 6px;
    }

    .header-icon-link,
    .account-trigger {
        min-width: 32px;
        color: var(--tt-primary);
    }

    .header-icon-link::after,
    .account-trigger::after {
        color: var(--tt-primary);
        font-size: 8px;
    }

    .mobile-search-row {
        background: rgba(255, 255, 255, 0.98);
        border-bottom-color: var(--tt-border);
    }

    .mobile-sortiment-panel {
        top: var(--tt-header-height-mobile);
        z-index: 8500;
    }

    .mobile-sortiment-grid {
        grid-template-columns: 1fr 1fr;
        padding: 14px;
    }

    .content-layout {
        padding: 0;
    }

    .content-header {
        margin: 12px;
    }

    .home-products {
        padding: 12px;
    }

    .grid,
    .home-products .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .product-card {
        border-radius: var(--tt-radius-md);
    }

    .product-card img {
        height: 138px;
    }

    .cart-page,
    .checkout-page,
    .order-success-page,
    .wishlist-page,
    .contact-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    body .footer {
        margin-top: 34px;
        padding: 34px 20px 24px;
    }

    body .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .admin-tabs {
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .admin-tabs .tab {
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .mobile-sortiment-grid,
    .grid,
    .home-products .grid {
        grid-template-columns: 1fr;
    }

    .product-card img {
        height: 190px;
    }

    body .footer-container {
        grid-template-columns: 1fr;
    }

    .account-dropdown {
        right: 6px;
        width: calc(100vw - 12px);
    }
}

/* =========================================================
   Travego Footer
   =========================================================
   Greift sowohl für Core-Footer-Klassen als auch für
   den app-spezifischen Travego-Footer.
*/

body .footer,
body .travego-footer {
    background: linear-gradient(135deg, #7a2929 0%, #993333 100%) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-top: 64px !important;
    padding: 48px 24px 32px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

body .footer-container,
body .travego-footer-container {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 34px !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
}

body .footer h4,
body .travego-footer h4 {
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    margin: 0 0 14px !important;
}

body .footer a,
body .travego-footer a {
    color: rgba(255, 255, 255, 0.86) !important;
    display: block !important;
    margin-bottom: 9px !important;
    text-decoration: none !important;
}

body .footer a:hover,
body .travego-footer a:hover {
    color: #ffffcc !important;
    text-decoration: none !important;
}

body .footer p,
body .travego-footer p {
    color: rgba(255, 255, 255, 0.82) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

body .footer-bottom,
body .travego-footer-bottom {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.9rem !important;
    margin: 34px auto 0 !important;
    max-width: 1180px !important;
    text-align: center !important;
}

body .footer-bottom a,
body .travego-footer-bottom a {
    color: #ffffff !important;
    display: inline !important;
    font-weight: 800 !important;
}

@media (max-width: 768px) {
    body .footer,
    body .travego-footer {
        margin-top: 34px !important;
        padding: 34px 20px 24px !important;
    }

    body .footer-container,
    body .travego-footer-container {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
    }
}

@media (max-width: 480px) {
    body .footer-container,
    body .travego-footer-container {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 768px) {
    .travego-logo-link {
        max-width: 150px;
        min-width: 110px;
    }

    .travego-logo-img {
        height: 32px;
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .travego-logo-link {
        max-width: 120px;
        min-width: 90px;
    }

    .travego-logo-img {
        height: 28px;
        max-width: 120px;
    }
}

/* =========================================================
   Travego Tour Product Detail
   ========================================================= */

.travego-tour-dates {
    background: #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-xl);
    box-shadow: var(--tt-shadow-md);
    margin-top: 28px;
    padding: 24px;
}

.travego-section-head {
    margin-bottom: 18px;
}

.travego-section-head h2 {
    color: var(--tt-text);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin: 0;
}

.travego-tour-table-wrap {
    overflow-x: auto;
}

.travego-tour-table {
    border-collapse: collapse;
    min-width: 920px;
    width: 100%;
}

.travego-tour-table th {
    background: linear-gradient(135deg, var(--tt-primary-dark), var(--tt-primary));
    color: #ffffff;
    font-size: 0.86rem;
    padding: 12px;
    text-align: left;
}

.travego-tour-table td {
    background: #fffdf4;
    border-bottom: 1px solid var(--tt-border);
    padding: 14px 12px;
    vertical-align: top;
}

.travego-boarding-points {
    color: var(--tt-text-soft);
    line-height: 1.45;
    white-space: pre-line;
}

.travego-discount-note,
.travego-campaign-note {
    color: var(--tt-primary);
    font-size: 0.8rem;
    font-weight: 800;
    margin-top: 4px;
}

.travego-tour-booking-form {
    display: grid;
    gap: 8px;
}

.travego-tour-booking-form input[type="number"] {
    border: 1px solid var(--tt-border);
    border-radius: 10px;
    max-width: 82px;
    min-height: 36px;
    padding: 0 8px;
}

/* Mobile Termin-Cards */
.travego-tour-date-cards {
    display: none;
}

.travego-tour-date-card {
    background: #fffdf4;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-sm);
    padding: 16px;
}

.travego-tour-date-card-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.travego-tour-date-card-head strong {
    color: var(--tt-primary);
}

.travego-tour-date-card details {
    margin: 12px 0;
}

.travego-tour-date-card summary {
    color: var(--tt-primary);
    cursor: pointer;
    font-weight: 900;
}

@media (max-width: 760px) {
    .travego-tour-table-wrap {
        display: none;
    }

    .travego-tour-date-cards {
        display: grid;
        gap: 14px;
    }
}

/* =========================================================
   Travego Cart Trip Details
   ========================================================= */

.travego-cart-trip-details {
    background: var(--tt-primary-softer);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 14px;
}

.travego-cart-trip-details span {
    color: var(--tt-muted);
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
}

.travego-cart-trip-details strong {
    color: var(--tt-text);
}

.travego-cart-trip-details p {
    color: var(--tt-text-soft);
    margin: 0;
    white-space: pre-line;
}

/* =========================================================
   Travego Checkout Travelers
   ========================================================= */

.travego-traveler-forms {
    display: grid;
    gap: 16px;
}

.travego-traveler-card {
    background: #fffdf4;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    padding: 16px;
}

.travego-traveler-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.travego-traveler-head strong {
    color: var(--tt-text);
    display: block;
    font-size: 1rem;
}

.travego-traveler-head span {
    color: var(--tt-muted);
    font-size: 0.88rem;
}

.travego-copy-profile-btn {
    background: #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-pill);
    color: var(--tt-primary);
    cursor: pointer;
    font-weight: 900;
    padding: 8px 14px;
}

.travego-copy-profile-btn:hover {
    background: var(--tt-primary-soft);
    border-color: var(--tt-primary);
}

.travego-muted-text {
    color: var(--tt-muted);
    margin: 6px 0 0;
}

@media (max-width: 640px) {
    .travego-traveler-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .travego-copy-profile-btn {
        width: 100%;
    }
}

/* =========================================================
   Travego Tour Product Detail
   ========================================================= */

.travego-tour-dates {
    background: #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-xl);
    box-shadow: var(--tt-shadow-md);
    margin-top: 28px;
    padding: 24px;
}

.travego-section-head {
    margin-bottom: 18px;
}

.travego-section-head h2 {
    color: var(--tt-text);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin: 0;
}

.travego-tour-table-wrap {
    overflow-x: auto;
}

.travego-tour-table {
    border-collapse: collapse;
    min-width: 920px;
    width: 100%;
}

.travego-tour-table th {
    background: linear-gradient(135deg, var(--tt-primary-dark), var(--tt-primary));
    color: #ffffff;
    font-size: 0.86rem;
    padding: 12px;
    text-align: left;
}

.travego-tour-table td {
    background: #fffdf4;
    border-bottom: 1px solid var(--tt-border);
    padding: 14px 12px;
    vertical-align: top;
}

.travego-boarding-points {
    color: var(--tt-text-soft);
    line-height: 1.45;
    white-space: pre-line;
}

.travego-discount-note,
.travego-campaign-note {
    color: var(--tt-primary);
    font-size: 0.8rem;
    font-weight: 800;
    margin-top: 4px;
}

.travego-tour-booking-form {
    display: grid;
    gap: 8px;
}

.travego-tour-booking-form input[type="number"] {
    border: 1px solid var(--tt-border);
    border-radius: 10px;
    max-width: 82px;
    min-height: 36px;
    padding: 0 8px;
}

/* Mobile Termin-Cards */
.travego-tour-date-cards {
    display: none;
}

.travego-tour-date-card {
    background: #fffdf4;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-sm);
    padding: 16px;
}

.travego-tour-date-card-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.travego-tour-date-card-head strong {
    color: var(--tt-primary);
}

.travego-tour-date-meta p {
    color: var(--tt-text-soft);
    margin: 6px 0;
}

.travego-boarding-details {
    margin: 12px 0;
}

.travego-boarding-details summary {
    color: var(--tt-primary);
    cursor: pointer;
    font-weight: 900;
}

.travego-boarding-details div {
    color: var(--tt-text-soft);
    margin-top: 8px;
    white-space: pre-line;
}

@media (max-width: 760px) {
    .travego-tour-table-wrap {
        display: none;
    }

    .travego-tour-date-cards {
        display: grid;
        gap: 14px;
    }
}

/* =========================================================
   Travego Cart Trip Details
   ========================================================= */

.travego-cart-trip-details {
    background: var(--tt-primary-softer);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 14px;
}

.travego-cart-trip-details span {
    color: var(--tt-muted);
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
}

.travego-cart-trip-details strong {
    color: var(--tt-text);
}

.travego-cart-trip-details p {
    color: var(--tt-text-soft);
    margin: 0;
    white-space: pre-line;
}

/* =========================================================
   Travego Checkout Travelers
   ========================================================= */

.travego-traveler-forms {
    display: grid;
    gap: 16px;
}

.travego-traveler-card {
    background: #fffdf4;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    padding: 16px;
}

.travego-traveler-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.travego-traveler-head strong {
    color: var(--tt-text);
    display: block;
    font-size: 1rem;
}

.travego-traveler-head span {
    color: var(--tt-muted);
    font-size: 0.88rem;
}

.travego-copy-profile-btn {
    background: #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-pill);
    color: var(--tt-primary);
    cursor: pointer;
    font-weight: 900;
    padding: 8px 14px;
}

.travego-copy-profile-btn:hover {
    background: var(--tt-primary-soft);
    border-color: var(--tt-primary);
}

.travego-muted-text {
    color: var(--tt-muted);
    margin: 6px 0 0;
}

@media (max-width: 640px) {
    .travego-traveler-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .travego-copy-profile-btn {
        width: 100%;
    }
}
.product-description-toggle {
    color: var(--tt-primary) !important;
}

.product-description-toggle:hover {
    color: var(--tt-primary-dark) !important;
}

/* =========================================================
   Travego Tour Dates - modernisierte Darstellung
   ========================================================= */

.travego-tour-dates {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--tt-border);
    border-radius: 28px;
    box-shadow: 0 22px 60px rgba(70, 25, 25, 0.10);
    margin-top: 32px;
    padding: 28px;
}

.travego-tour-table-wrap {
    overflow-x: auto;
}

.travego-tour-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 860px;
    width: 100%;
}

.travego-tour-table th {
    background: var(--tt-primary);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    padding: 14px 16px;
    text-align: left;
}

.travego-tour-table th:first-child {
    border-radius: 16px 0 0 0;
}

.travego-tour-table th:last-child {
    border-radius: 0 16px 0 0;
}

.travego-tour-table td {
    background: #fffdf4;
    border-bottom: 1px solid var(--tt-border);
    color: var(--tt-text);
    padding: 18px 16px;
    vertical-align: top;
}

.travego-tour-table tr:last-child td:first-child {
    border-radius: 0 0 0 16px;
}

.travego-tour-table tr:last-child td:last-child {
    border-radius: 0 0 16px 0;
}

.travego-tour-table strong {
    color: var(--tt-text);
}

.travego-boarding-points {
    color: var(--tt-text-soft);
    line-height: 1.55;
    white-space: pre-line;
}

.travego-tour-booking-form {
    align-items: end;
    display: grid;
    gap: 10px;
    min-width: 140px;
}

.travego-tour-booking-form label {
    color: var(--tt-text-soft);
    font-size: 0.86rem;
    font-weight: 800;
}

.travego-tour-booking-form input[type="number"] {
    background: #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: 12px;
    color: var(--tt-text);
    min-height: 42px;
    padding: 0 10px;
    width: 86px;
}

.travego-tour-booking-form input[type="number"]:focus {
    border-color: var(--tt-primary);
    box-shadow: 0 0 0 4px rgba(153, 51, 51, 0.10);
    outline: none;
}

.travego-tour-date-cards {
    display: none;
}

@media (max-width: 760px) {
    .travego-tour-table-wrap {
        display: none;
    }

    .travego-tour-date-cards {
        display: grid;
        gap: 16px;
    }

    .travego-tour-dates {
        border-radius: 22px;
        padding: 18px;
    }

    .travego-tour-date-card {
        background: #fffdf4;
        border: 1px solid var(--tt-border);
        border-radius: 20px;
        box-shadow: 0 12px 28px rgba(70, 25, 25, 0.08);
        padding: 18px;
    }
}

/* =========================================================
   Travego Boarding Point Select
   ========================================================= */

.travego-boarding-select-wrap {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.travego-boarding-select-wrap label {
    color: var(--tt-text);
    font-size: 0.86rem;
    font-weight: 900;
}

.travego-boarding-point-select {
    background: #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: 12px;
    color: var(--tt-text);
    min-height: 42px;
    padding: 0 12px;
    width: 100%;
}

.travego-boarding-point-select:focus {
    border-color: var(--tt-primary);
    box-shadow: 0 0 0 4px rgba(153, 51, 51, 0.10);
    outline: none;
}

.travego-boarding-point-select.has-error {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10);
}

/* =========================================================
   Travego Forms: Select, Date, Anrede
   =========================================================
   Gilt für:
   - Checkout "Buchende Person"
   - Reisende Personen
   - Geburtsdatum
   - Anrede
   - Zustiegsort im Cart
*/

.travego-field select,
.travego-field input[type="date"],
.travego-boarding-point-select,
.myaccount-form select {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--tt-border);
    border-radius: 14px;
    background: #ffffff;
    color: var(--tt-text);
    font: inherit;
    padding: 0 13px;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.travego-field select:focus,
.travego-field input[type="date"]:focus,
.travego-boarding-point-select:focus,
.myaccount-form select:focus {
    border-color: var(--tt-primary);
    box-shadow: 0 0 0 4px rgba(153, 51, 51, 0.10);
}

.travego-field select.has-error,
.travego-field input[type="date"].has-error,
.travego-boarding-point-select.has-error,
.myaccount-form select.input-error,
.myaccount-form select.has-error {
    border-color: var(--tt-error-text) !important;
    background: #fff7f7 !important;
    box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.10);
}

.travego-field select:disabled,
.travego-field input[type="date"]:disabled,
.travego-boarding-point-select:disabled {
    background: var(--tt-bg-muted);
    color: var(--tt-muted);
    cursor: not-allowed;
}

/* Select Pfeil / modernes Aussehen */
.travego-field select,
.travego-boarding-point-select,
.myaccount-form select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--tt-muted) 50%),
        linear-gradient(135deg, var(--tt-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size:
        6px 6px,
        6px 6px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

/* =========================================================
   Travego Travelers
   ========================================================= */

.travego-traveler-forms {
    display: grid;
    gap: 16px;
}

.travego-traveler-card {
    background: #fffdf4;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-sm);
    padding: 18px;
}

.travego-traveler-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.travego-traveler-head strong {
    display: block;
    color: var(--tt-text);
    font-size: 1rem;
    font-weight: 900;
}

.travego-traveler-head span {
    display: block;
    margin-top: 3px;
    color: var(--tt-muted);
    font-size: 0.88rem;
}

.travego-copy-profile-btn {
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-pill);
    background: #ffffff;
    color: var(--tt-primary);
    cursor: pointer;
    font-weight: 900;
    padding: 8px 14px;
    white-space: nowrap;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.travego-copy-profile-btn:hover {
    background: var(--tt-primary-soft);
    border-color: var(--tt-primary);
    color: var(--tt-primary-dark);
}

/* =========================================================
   Travego Boarding Point im Cart
   ========================================================= */

.travego-boarding-select-wrap {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.travego-boarding-select-wrap label {
    color: var(--tt-text);
    font-size: 0.86rem;
    font-weight: 900;
}

.travego-boarding-select-wrap .travego-field-error {
    min-height: 18px;
}

/* =========================================================
   Travego Error Darstellung
   ========================================================= */

.travego-field-error {
    color: var(--tt-error-text);
    font-size: 0.82rem;
    font-weight: 700;
    margin-top: 5px;
}

.travego-field input.has-error,
.travego-field select.has-error,
.travego-traveler-card input.has-error,
.travego-traveler-card select.has-error {
    border-color: var(--tt-error-text) !important;
    background: #fff7f7 !important;
    box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.10);
}

/* =========================================================
   Mobile Optimierung
   ========================================================= */

@media (max-width: 760px) {
    .travego-traveler-card {
        padding: 15px;
        border-radius: 18px;
    }

    .travego-traveler-head {
        flex-direction: column;
        align-items: stretch;
    }

    .travego-copy-profile-btn {
        width: 100%;
    }

    .travego-field select,
    .travego-field input[type="date"],
    .travego-boarding-point-select,
    .myaccount-form select {
        min-height: 48px;
        font-size: 16px;
    }
}

/* =========================================================
   Travego Form Grid
   ========================================================= */

.travego-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.travego-form-grid .travego-field {
    min-width: 0;
}

@media (max-width: 680px) {
    .travego-form-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Travego MyAccount: Meine Buchungen
   ========================================================= */

.travego-my-bookings-page {
    display: grid;
    gap: 18px;
}

.travego-bookings-state,
.travego-bookings-empty,
.travego-booking-card {
    background: #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-sm);
}

.travego-bookings-state,
.travego-bookings-empty {
    padding: 22px;
}

.travego-bookings-empty {
    display: grid;
    gap: 10px;
    color: var(--tt-text);
}

.travego-bookings-empty p {
    margin: 0;
    color: var(--tt-muted);
}

.travego-bookings-list {
    display: grid;
    gap: 18px;
}

.travego-booking-card {
    padding: 20px;
}

.travego-booking-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.travego-booking-kicker {
    color: var(--tt-primary);
    display: block;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.travego-booking-card h2 {
    color: var(--tt-text);
    font-size: 1.25rem;
    font-weight: 900;
    margin: 0;
}

.travego-booking-status {
    background: var(--tt-success-bg);
    border: 1px solid var(--tt-success-border);
    border-radius: var(--tt-radius-pill);
    color: var(--tt-success-text);
    font-size: 0.82rem;
    font-weight: 900;
    padding: 7px 12px;
    white-space: nowrap;
}

.travego-booking-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.travego-booking-meta-grid > div {
    background: #fffdf4;
    border: 1px solid var(--tt-border);
    border-radius: 14px;
    padding: 12px;
}

.travego-booking-meta-grid span,
.travego-booking-traveler span {
    color: var(--tt-muted);
    display: block;
    font-size: 0.82rem;
    margin-bottom: 4px;
}

.travego-booking-meta-grid strong,
.travego-booking-traveler strong {
    color: var(--tt-text);
    font-weight: 900;
}

.travego-booking-details {
    border-top: 1px solid var(--tt-border);
    padding-top: 14px;
}

.travego-booking-details summary {
    color: var(--tt-primary);
    cursor: pointer;
    font-weight: 900;
    margin-bottom: 12px;
}

.travego-booking-travelers {
    display: grid;
    gap: 10px;
}

.travego-booking-traveler {
    display: grid;
    grid-template-columns: 1.4fr 1fr 2fr;
    gap: 12px;
    align-items: start;
    background: #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: 14px;
    padding: 12px;
}

@media (max-width: 760px) {
    .travego-booking-card {
        padding: 16px;
    }

    .travego-booking-card-head {
        flex-direction: column;
    }

    .travego-booking-meta-grid,
    .travego-booking-traveler {
        grid-template-columns: 1fr;
    }

    .travego-booking-status {
        width: fit-content;
    }
}
/* =========================================================
   99. Travego Layout Fix - Product Detail & Order Success
   =========================================================
   Ziel:
   - kein horizontales Scrollen
   - Product Detail auf Mobile sauber
   - Thumbnails bleiben klein
   - Order Success bekommt gleiche Seitenränder wie andere Seiten
   - Design ruhiger und lesbarer
*/

/* ---------------------------------------------------------
   Grundschutz gegen horizontales Scrollen
   --------------------------------------------------------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 204, 0.22), transparent 28rem),
        linear-gradient(135deg, #ffffff 0%, #fffdf8 55%, #fff8f8 100%) !important;
}

/* Alle großen Seiten bekommen denselben Außenrahmen */
.content-layout,
.breadcrumb,
.product-wrapper,
.product-container,
.product-description,
.travego-tour-dates,
.cart-page,
.checkout-page,
.order-success-page,
.wishlist-page,
.contact-page,
.myaccount-page,
.travego-checkout-page {
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   Header / Logo
   --------------------------------------------------------- */

.header {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(153, 51, 51, 0.13) !important;
    box-shadow: 0 5px 18px rgba(70, 25, 25, 0.045) !important;
}

/*
 * Wichtig:
 * CSS kann keinen grauen Hintergrund entfernen,
 * wenn dieser bereits im PNG selbst enthalten ist.
 * Diese Regeln verhindern nur Verzerrung und CSS-Hintergründe.
 */
.travego-logo,
.travego-logo-link,
.travego-logo-img,
.logo img {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.travego-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    overflow: visible !important;
    max-width: 190px !important;
    min-width: 120px !important;
}

.travego-logo-img,
.logo img {
    display: block !important;
    height: 36px !important;
    width: auto !important;
    max-width: 190px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

@media (max-width: 768px) {
    .travego-logo-link {
        max-width: 138px !important;
        min-width: 92px !important;
    }

    .travego-logo-img,
    .logo img {
        height: 30px !important;
        max-width: 138px !important;
    }
}

/* ---------------------------------------------------------
   Product Detail: Desktop
   --------------------------------------------------------- */

.breadcrumb {
    width: min(1180px, calc(100% - 40px)) !important;
    margin: 28px auto 18px !important;
}

.product-wrapper {
    width: min(1180px, calc(100% - 40px)) !important;
    margin: 0 auto !important;
}

.product-container {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid var(--tt-border) !important;
    border-radius: 26px !important;
    box-shadow: 0 16px 42px rgba(70, 25, 25, 0.08) !important;
    overflow: hidden !important;
}

/*
 * Nur echte Hauptbild-/Galerie-Bilder.
 * Keine generische Regel wie .product-container img verwenden!
 */
.product-main-image,
.main-product-image,
.product-gallery-main img,
.product-main-gallery img,
.main-image img {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 520px !important;
    object-fit: cover !important;
    border-radius: 18px !important;
}

/* Thumbnails ausdrücklich klein halten */
.thumbnail-container,
.thumb-nav,
.product-thumbnails,
.thumbnail-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.thumbnail-container img,
.thumb-nav img,
.product-thumbnails img,
.thumbnail-list img,
.product-thumbnail,
.variant-thumbnail {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

/* Beschreibung ruhiger und besser lesbar */
.product-description {
    width: min(1180px, calc(100% - 40px)) !important;
    margin: 28px auto 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--tt-border) !important;
    border-radius: 26px !important;
    box-shadow: 0 16px 42px rgba(70, 25, 25, 0.08) !important;
    padding: 28px !important;
}

.product-description h2 {
    font-size: clamp(1.45rem, 2vw, 2rem) !important;
    line-height: 1.15 !important;
}

.product-description,
.product-description p,
.product-description li,
.product-description-content,
.product-description-text {
    color: var(--tt-text-soft);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.product-description-content,
.product-description-text {
    max-width: 86ch;
}

/* ---------------------------------------------------------
   Reise-Termine
   --------------------------------------------------------- */

.travego-tour-dates {
    width: min(1180px, calc(100% - 40px)) !important;
    margin: 28px auto 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--tt-border) !important;
    border-radius: 26px !important;
    box-shadow: 0 16px 42px rgba(70, 25, 25, 0.08) !important;
    padding: 28px !important;
    overflow: hidden !important;
}

.travego-tour-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.travego-tour-table {
    min-width: 820px !important;
}

/* ---------------------------------------------------------
   Product Detail: Mobile
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .breadcrumb {
        width: calc(100% - 24px) !important;
        margin: 14px auto 12px !important;
        padding: 0 !important;
    }

    .product-wrapper,
    .product-container,
    .product-description,
    .travego-tour-dates {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .product-container {
        border-radius: 22px !important;
        padding: 14px !important;
    }

    /*
     * Hauptbild mobil groß, aber kontrolliert.
     * Thumbnails werden darunter separat klein gehalten.
     */
    .product-main-image,
    .main-product-image,
    .product-gallery-main img,
    .product-main-gallery img,
    .main-image img {
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        max-height: 340px !important;
        object-fit: cover !important;
        width: 100% !important;
    }

    .thumbnail-container img,
    .thumb-nav img,
    .product-thumbnails img,
    .thumbnail-list img,
    .product-thumbnail,
    .variant-thumbnail {
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
    }

    .product-info h1 {
        font-size: clamp(1.55rem, 7vw, 2.15rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.04em;
    }

    .product-action-panel {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .product-cart-btn,
    .product-wishlist-btn,
    .product-chat-btn {
        width: 100% !important;
    }

    .product-description {
        border-radius: 22px !important;
        padding: 18px !important;
    }

    .product-description h2 {
        font-size: 1.45rem !important;
    }

    /*
     * Tabelle auf Mobile komplett weg.
     * Nur Cards anzeigen, damit kein horizontales Scrollen entsteht.
     */
    .travego-tour-table-wrap,
    .travego-tour-table {
        display: none !important;
    }

    .travego-tour-date-cards {
        display: grid !important;
        gap: 16px !important;
    }

    .travego-tour-dates {
        border-radius: 22px !important;
        padding: 18px !important;
    }

    .travego-tour-date-card {
        background: #fffdf7 !important;
        border: 1px solid var(--tt-border) !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 28px rgba(70, 25, 25, 0.08) !important;
        padding: 18px !important;
        overflow: hidden !important;
    }

    .travego-tour-date-card-head {
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .travego-tour-date-card-head strong {
        line-height: 1.3 !important;
        text-align: right;
    }

    .travego-tour-booking-form {
        width: 100% !important;
    }

    .travego-tour-booking-form input[type="number"] {
        max-width: none !important;
        width: 100% !important;
    }

    .travego-tour-booking-form button,
    .travego-tour-booking-form .product-cart-btn,
    .travego-tour-booking-form .primary-btn {
        width: 100% !important;
    }
}

/* ---------------------------------------------------------
   Order Success: gleiche Breite wie Checkout/Cart
   --------------------------------------------------------- */

.order-success-page {
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 34px 0 56px !important;
}

.order-success-hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 204, 0.50), rgba(153, 51, 51, 0.055)),
        #ffffff !important;
    border: 1px solid var(--tt-border) !important;
    border-radius: 26px !important;
    box-shadow: 0 16px 42px rgba(70, 25, 25, 0.08) !important;
    margin-bottom: 24px !important;
    padding: 30px !important;
}

.order-success-card,
.order-success-sidebar,
.order-success-item,
.address-box {
    background: #ffffff !important;
    border: 1px solid var(--tt-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 34px rgba(70, 25, 25, 0.07) !important;
}

.order-success-card {
    padding: 22px !important;
}

.order-success-item {
    padding: 16px !important;
}

.order-success-actions {
    display: grid !important;
    gap: 12px !important;
}

.order-success-actions a,
.order-success-actions button,
.order-success-page .primary-btn,
.order-success-page .secondary-btn {
    width: 100% !important;
    min-height: 48px !important;
}

/*
 * Falls dein Order-Success-Template keine .order-success-page-Breite bekommt,
 * greift diese Notfall-Regel für die direkten Cards.
 */
body > .order-success-hero,
body > .order-success-card,
body > .order-success-sidebar,
body > .order-success-item {
    width: min(1180px, calc(100% - 40px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 760px) {
    .order-success-page {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        padding: 20px 0 38px !important;
    }

    .order-success-hero {
        border-radius: 22px !important;
        padding: 22px !important;
    }

    .order-success-card,
    .order-success-sidebar,
    .order-success-item,
    .address-box {
        border-radius: 20px !important;
    }
}

/* ---------------------------------------------------------
   Footer mobile sauber
   --------------------------------------------------------- */

@media (max-width: 760px) {
    body .footer,
    body .travego-footer {
        margin-top: 34px !important;
        padding: 34px 20px 26px !important;
    }

    body .footer-container,
    body .travego-footer-container {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    body .footer h4,
    body .travego-footer h4 {
        margin-bottom: 10px !important;
    }
}

/* =========================================================
   200. Travego Final Mobile + Product Detail Stabilisierung
   =========================================================
   Fix:
   - Mobile Header: alle Icons auf einer Ebene
   - "Mein Konto" nicht versetzt
   - Texte nicht mikroskopisch / unscharf
   - Product Detail nicht doppelt zusammenquetschen
   - Hauptbild groß, Thumbnails klein
   - Buttons laufen nicht aus Cards
*/

/* ---------------------------------------------------------
   Global: kein horizontales Scrollen
   --------------------------------------------------------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   Mobile Header sauber ausrichten
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .header {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 60px !important;
        padding: 6px 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        overflow: visible !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }

    .header > * {
        min-width: 0 !important;
    }

    /*
     * Logo mobil groß genug, aber nicht so groß,
     * dass Mein Konto nach unten rutscht.
     */
    .travego-logo,
    .logo {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        display: flex !important;
        align-items: center !important;
    }

    .travego-logo-link {
        min-width: 0 !important;
        max-width: 125px !important;
        width: 125px !important;
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1 !important;
    }

    .travego-logo-img,
    .logo img {
        height: 34px !important;
        width: auto !important;
        max-width: 125px !important;
        object-fit: contain !important;
        object-position: left center !important;
        display: block !important;
    }

    /*
     * Alle Header-Aktionen identisch ausrichten:
     * Reisen, Merkliste, Warenkorb, Mein Konto.
     */
    .mobile-sortiment-trigger,
    .header-icon-link,
    .account-trigger {
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 48px !important;
        min-height: 48px !important;

        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;

        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        text-align: center !important;
        overflow: visible !important;
        color: var(--tt-primary) !important;
    }

    .mobile-sortiment-trigger i,
    .header-icon-link i,
    .account-trigger i,
    .mobile-sortiment-trigger svg,
    .header-icon-link svg,
    .account-trigger svg {
        width: 20px !important;
        height: 20px !important;
        display: block !important;
        margin: 0 auto !important;
        flex: 0 0 auto !important;
    }

    /*
     * Die Labels waren vorher 7/8px und wirkten deshalb unscharf.
     * 9.5px ist klein, aber sauber lesbar.
     */
    .mobile-sortiment-trigger span,
    .header-icon-link::after,
    .account-trigger::after {
        display: block !important;
        width: 42px !important;
        max-width: 42px !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        line-height: 1.05 !important;
        letter-spacing: -0.01em !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: var(--tt-primary) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * Falls Mein Konto ein Button ist, verhindern wir abweichende Button-Styles.
     */
    button.account-trigger {
        border: 0 !important;
        background: transparent !important;
        font: inherit !important;
    }

    .cart-badge,
    .header-counter-badge,
    .account-header-badge,
    .burger-menu-badge,
    .mobile-nav-badge,
    .account-menu-badge {
        min-width: 15px !important;
        height: 15px !important;
        font-size: 9px !important;
        line-height: 15px !important;
        z-index: 5 !important;
    }

    .mobile-search-row {
        width: 100% !important;
        max-width: 100% !important;
        padding: 9px 10px !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    .mobile-search-form,
    .mobile-search-bar {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 380px) {
    .travego-logo-link {
        width: 108px !important;
        max-width: 108px !important;
    }

    .travego-logo-img,
    .logo img {
        height: 30px !important;
        max-width: 108px !important;
    }

    .mobile-sortiment-trigger,
    .header-icon-link,
    .account-trigger {
        flex-basis: 39px !important;
        width: 39px !important;
        min-width: 39px !important;
        max-width: 39px !important;
    }

    .mobile-sortiment-trigger span,
    .header-icon-link::after,
    .account-trigger::after {
        width: 39px !important;
        max-width: 39px !important;
        font-size: 9px !important;
    }
}

/* ---------------------------------------------------------
   Product Detail: Desktop / Basis
   --------------------------------------------------------- */

.breadcrumb {
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;
    margin: 24px auto 18px !important;
    padding: 0 !important;
}

.product-wrapper {
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/*
 * Wichtig:
 * product-container darf NICHT nochmal calc(100% - 24px) bekommen,
 * weil er bereits innerhalb product-wrapper liegt.
 */
.product-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr) !important;
    gap: 40px !important;
    align-items: start !important;

    background: #ffffff !important;
    border: 1px solid var(--tt-border) !important;
    border-radius: 28px !important;
    box-shadow: 0 16px 42px rgba(70, 25, 25, 0.08) !important;
    padding: 28px !important;
    overflow: hidden !important;
}

.product-gallery,
.product-info {
    width: 100% !important;
    min-width: 0 !important;
}

/*
 * Travego zeigt Titel im rechten Bereich.
 * Der doppelte äußere Titel wird ausgeblendet.
 */
.product-wrapper > h1 {
    display: none !important;
}

/* Hauptbild exakt steuern */
.main-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    border: 1px solid var(--tt-border) !important;
    background: #fffdf4 !important;
}

#mainImage {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    border-radius: 18px !important;
}

/* Thumbnails klein halten */
.thumbnail-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px !important;
    display: flex !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.thumbnail-row {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    padding: 4px 2px !important;
}

.thumbnail-row img.thumbnail,
img.thumbnail {
    flex: 0 0 68px !important;
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    border: 2px solid var(--tt-border) !important;
    background: #ffffff !important;
}

/* Produkt-Info */
.product-info h1 {
    color: var(--tt-text) !important;
    font-size: clamp(1.7rem, 2.4vw, 2.35rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    margin-bottom: 14px !important;
}

.product-action-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 22px !important;
    border-radius: 24px !important;
}

.product-action-panel form,
.product-action-panel .product-actions,
.product-action-panel .action-buttons,
.product-action-panel .wishlist-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.product-action-panel .product-cart-btn,
.product-action-panel .product-wishlist-btn,
.product-action-panel .product-chat-btn,
.product-action-panel .primary-btn,
.product-action-panel .secondary-btn,
.product-action-panel button,
.product-action-panel a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
}

/* ---------------------------------------------------------
   Beschreibung und Termine
   --------------------------------------------------------- */

.product-description,
.travego-tour-dates {
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;
    margin: 28px auto 0 !important;
    padding: 28px !important;
    background: #ffffff !important;
    border: 1px solid var(--tt-border) !important;
    border-radius: 28px !important;
    box-shadow: 0 16px 42px rgba(70, 25, 25, 0.08) !important;
    overflow: hidden !important;
}

.product-description h2,
.travego-section-head h2 {
    color: var(--tt-text) !important;
    font-size: clamp(1.45rem, 2.2vw, 2rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.035em !important;
}

.product-description,
.product-description p,
.product-description li {
    color: var(--tt-text-soft) !important;
    line-height: 1.72 !important;
    overflow-wrap: anywhere !important;
}

.travego-tour-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
}

.travego-tour-table {
    min-width: 820px !important;
}

/* ---------------------------------------------------------
   Product Detail Mobile: nicht zusammenquetschen
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .breadcrumb {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin: 12px auto 12px !important;
    }

    .product-wrapper {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin: 0 auto !important;
    }

    /*
     * Nur der Wrapper bekommt Außenabstand.
     * Container selbst ist 100%.
     */
    .product-container {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        padding: 16px !important;
        border-radius: 24px !important;
    }

    .main-image-wrapper {
        aspect-ratio: 4 / 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 18px !important;
    }

    #mainImage {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .thumb-nav {
        display: none !important;
    }

    .thumbnail-container {
        margin-top: 14px !important;
    }

    .thumbnail-row {
        justify-content: center !important;
    }

    .thumbnail-row img.thumbnail,
    img.thumbnail {
        flex-basis: 56px !important;
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
    }

    .product-info h1 {
        font-size: clamp(1.55rem, 6.4vw, 2.05rem) !important;
        line-height: 1.12 !important;
    }

    .product-action-panel {
        padding: 16px !important;
        border-radius: 22px !important;
    }

    .product-action-panel .product-cart-btn,
    .product-action-panel .product-wishlist-btn,
    .product-action-panel .product-chat-btn,
    .product-action-panel .primary-btn,
    .product-action-panel .secondary-btn,
    .product-action-panel button,
    .product-action-panel a {
        font-size: 0.94rem !important;
        min-height: 46px !important;
        padding: 11px 12px !important;
    }

    .product-description,
    .travego-tour-dates {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin: 22px auto 0 !important;
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .product-description h2,
    .travego-section-head h2 {
        font-size: 1.42rem !important;
    }

    /*
     * Mobile: Tabelle nie anzeigen.
     * Nur Termin-Cards.
     */
    .travego-tour-table-wrap,
    .travego-tour-table {
        display: none !important;
    }

    .travego-tour-date-cards {
        display: grid !important;
        gap: 16px !important;
    }

    .travego-tour-date-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        border-radius: 20px !important;
        background: #fffdf7 !important;
        border: 1px solid var(--tt-border) !important;
        box-shadow: 0 10px 28px rgba(70, 25, 25, 0.08) !important;
        overflow: hidden !important;
    }

    .travego-tour-date-card-head {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .travego-tour-date-card-head strong {
        max-width: 40% !important;
        text-align: right !important;
        line-height: 1.25 !important;
        word-break: normal !important;
    }

    .travego-tour-booking-form {
        width: 100% !important;
    }

    .travego-tour-booking-form input[type="number"] {
        width: 100% !important;
        max-width: none !important;
    }

    .travego-tour-booking-form button,
    .travego-tour-booking-form .product-cart-btn,
    .travego-tour-booking-form .primary-btn {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---------------------------------------------------------
   Sehr kleine Mobile Screens
   --------------------------------------------------------- */

@media (max-width: 360px) {
    .product-wrapper,
    .breadcrumb,
    .product-description,
    .travego-tour-dates {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
    }

    .product-container {
        padding: 14px !important;
    }

    .product-action-panel .product-cart-btn,
    .product-action-panel .product-wishlist-btn,
    .product-action-panel button,
    .product-action-panel a {
        font-size: 0.9rem !important;
    }
}

/* =========================================================
   210. Travego Last Minute + Tour Price UI
   ========================================================= */

.travego-tour-price {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.travego-old-price {
    color: var(--tt-muted);
    font-size: 0.9rem;
    text-decoration: line-through;
}

.travego-new-price {
    color: var(--tt-primary);
    font-size: 1.08rem;
    font-weight: 900;
}

.travego-discount-badge {
    align-items: center;
    background: var(--tt-primary);
    border-radius: var(--tt-radius-pill);
    color: #ffffff;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1;
    padding: 5px 8px;
}

.travego-days-remaining {
    color: var(--tt-muted);
    font-size: 0.84rem;
    font-weight: 700;
    margin-top: 5px;
}

.travego-days-remaining strong {
    color: var(--tt-primary);
}

.travego-days-remaining.is-today {
    color: var(--tt-error-text);
}

.travego-days-remaining.is-expired {
    color: var(--tt-muted);
}

/* Last Minute Page */
.travego-last-minute-page {
    color: var(--tt-text);
    margin: 0 auto;
    max-width: 1180px;
    padding: 34px 20px 56px;
}

.travego-last-minute-hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 204, 0.58), rgba(153, 51, 51, 0.06)),
        #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-xl);
    box-shadow: var(--tt-shadow-sm);
    margin-bottom: 24px;
    padding: 30px;
}

.travego-last-minute-hero h1 {
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.05;
    margin: 0 0 12px;
}

.travego-last-minute-hero p {
    color: var(--tt-muted);
    line-height: 1.6;
    margin: 0;
}

.travego-last-minute-card {
    background: #ffffff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-xl);
    box-shadow: var(--tt-shadow-md);
    overflow: hidden;
    padding: 18px;
}

.travego-last-minute-table-wrap {
    overflow-x: auto;
}

.travego-last-minute-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 860px;
    width: 100%;
}

.travego-last-minute-table th {
    background: var(--tt-primary);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 900;
    padding: 14px 16px;
    text-align: left;
}

.travego-last-minute-table td {
    background: #fffdf4;
    border-bottom: 1px solid var(--tt-border);
    padding: 16px;
    vertical-align: top;
}

.travego-last-minute-trip {
    align-items: flex-start;
    display: grid;
    gap: 14px;
    grid-template-columns: 132px minmax(0, 1fr);
}

.travego-last-minute-trip img {
    aspect-ratio: 16 / 10;
    border: 1px solid var(--tt-border);
    border-radius: 16px;
    object-fit: cover;
    width: 100%;
}

.travego-last-minute-title {
    color: var(--tt-primary);
    font-size: 1.12rem;
    font-weight: 900;
    text-decoration: none;
}

.travego-last-minute-title:hover {
    color: var(--tt-primary-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.travego-last-minute-mobile-list {
    display: none;
}

/* Mobile */
@media (max-width: 760px) {
    .travego-last-minute-page {
        padding: 18px 10px 38px;
    }

    .travego-last-minute-hero {
        border-radius: 22px;
        padding: 22px;
    }

    .travego-last-minute-card {
        border-radius: 22px;
        padding: 14px;
    }

    .travego-last-minute-table-wrap {
        display: none;
    }

    .travego-last-minute-mobile-list {
        display: grid;
        gap: 14px;
    }

    .travego-last-minute-mobile-card {
        background: #fffdf4;
        border: 1px solid var(--tt-border);
        border-radius: 20px;
        display: grid;
        gap: 14px;
        padding: 14px;
    }

    .travego-last-minute-mobile-card img {
        aspect-ratio: 16 / 10;
        border-radius: 16px;
        object-fit: cover;
        width: 100%;
    }

    .travego-last-minute-mobile-card > div {
        display: grid;
        gap: 8px;
    }

    .travego-last-minute-dates {
        color: var(--tt-text-soft);
        font-weight: 800;
    }
}

/* Nur leere Kategorie-Sidebar ausblenden, nicht die Filter-Sidebar */
.category-sidebar-slot .sidebar:not(:has(li)) {
    display: none !important;
}

/* Falls der Wrapper selbst dadurch leer wird */
.category-sidebar-slot:has(.sidebar:not(:has(li))) {
    display: none !important;
}

/* =========================================================
   211. Facebook icon Footer
   ========================================================= */

body .travego-footer a.travego-social-link {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    color: #ffffff !important;
    font-weight: 800;
    text-decoration: none !important;
}

body .travego-footer a.travego-social-link:hover {
    color: #ffffcc !important;
}

.travego-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
}

body .travego-footer a.travego-social-link:hover .travego-social-icon {
    border-color: #ffffcc;
    color: #ffffcc;
}

.travego-admin-header-link {
    width: auto;
    min-width: 78px;
    gap: 6px;
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 700;
}

.travego-admin-header-text {
    font-size: 13px;
    line-height: 1;
}

/* Auf sehr kleinen Screens nur Icon anzeigen */
@media (max-width: 520px) {
    .travego-admin-header-link {
        min-width: 42px;
        padding: 0;
    }

    .travego-admin-header-text {
        display: none;
    }
}