body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
.rs-columns {
  clear: both;
  display: inline-block;
  width: 100%;
}

.rs-column {
  float: left;
  width: 100%;
  margin-top: 7.69231%;
  margin-right: 7.69231%;
}
.rs-column.-large-first {
  clear: left;
}
.rs-column.-large-last {
  margin-right: -5px;
}
.rs-column.-large-first-row {
  margin-top: 0;
}
.rs-column.-large-col-1-1 {
  width: 100%;
}
.rs-column.-large-col-2-1 {
  width: 46.15385%;
}
.rs-column.-large-col-2-2 {
  width: 100%;
}
.rs-column.-large-col-3-1 {
  width: 28.20513%;
}
.rs-column.-large-col-3-2 {
  width: 64.10256%;
}
.rs-column.-large-col-3-3 {
  width: 100%;
}
.rs-column.-large-col-4-1 {
  width: 19.23077%;
}
.rs-column.-large-col-4-2 {
  width: 46.15385%;
}
.rs-column.-large-col-4-3 {
  width: 73.07692%;
}
.rs-column.-large-col-4-4 {
  width: 100%;
}
.rs-column.-large-col-5-1 {
  width: 13.84615%;
}
.rs-column.-large-col-5-2 {
  width: 35.38462%;
}
.rs-column.-large-col-5-3 {
  width: 56.92308%;
}
.rs-column.-large-col-5-4 {
  width: 78.46154%;
}
.rs-column.-large-col-5-5 {
  width: 100%;
}
.rs-column.-large-col-6-1 {
  width: 10.25641%;
}
.rs-column.-large-col-6-2 {
  width: 28.20513%;
}
.rs-column.-large-col-6-3 {
  width: 46.15385%;
}
.rs-column.-large-col-6-4 {
  width: 64.10256%;
}
.rs-column.-large-col-6-5 {
  width: 82.05128%;
}
.rs-column.-large-col-6-6 {
  width: 100%;
}
@media screen and (max-width: 900px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-first {
    clear: none;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: left;
  }
  .rs-column.-medium-last {
    margin-right: -5px;
  }
  .rs-column.-medium-first-row {
    margin-top: 0;
  }
  .rs-column.-medium-col-1-1 {
    width: 100%;
  }
  .rs-column.-medium-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-2-2 {
    width: 100%;
  }
  .rs-column.-medium-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-3-3 {
    width: 100%;
  }
  .rs-column.-medium-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-medium-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-medium-col-4-4 {
    width: 100%;
  }
  .rs-column.-medium-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-medium-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-medium-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-medium-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-medium-col-5-5 {
    width: 100%;
  }
  .rs-column.-medium-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-medium-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-medium-col-6-6 {
    width: 100%;
  }
}
@media screen and (max-width: 599px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: none;
  }
  .rs-column.-medium-last {
    margin-right: 7.69231%;
  }
  .rs-column.-medium-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-small-first {
    clear: left;
  }
  .rs-column.-small-last {
    margin-right: -5px;
  }
  .rs-column.-small-first-row {
    margin-top: 0;
  }
  .rs-column.-small-col-1-1 {
    width: 100%;
  }
  .rs-column.-small-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-small-col-2-2 {
    width: 100%;
  }
  .rs-column.-small-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-small-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-small-col-3-3 {
    width: 100%;
  }
  .rs-column.-small-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-small-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-small-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-small-col-4-4 {
    width: 100%;
  }
  .rs-column.-small-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-small-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-small-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-small-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-small-col-5-5 {
    width: 100%;
  }
  .rs-column.-small-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-small-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-small-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-small-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-small-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-small-col-6-6 {
    width: 100%;
  }
}

#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center}
/*******************************************************************
 * OPTIMIERTE CSS FÜR KREUZFAHRT1000.DE
 * Mit vergrößerter Gesamtbreite und RockSolidColumn Support
 *******************************************************************/

/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLEN)
   ======================================== */
:root {
    /* Farbschema */
    --primary-color: #39748b;
    --accent-color: #fe8607;
    --text-color: #000;
    --white: #fff;
    --light-blue: #bae4f1;
    --light-gray: #e3e3e3;
    --border-gray: #ccc;
    --red: #ff0000;
    
    /* Schriftgrößen */
    --font-size-small: 10pt;
    --font-size-medium: 12pt;
    --font-size-large: 16pt;
    
    /* Abstände */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 12px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    
    /* Layout - Vergrößerte Breiten */
    --max-width: 1280px; /* Vergrößert von 1180px */
    --min-width: 1000px;
    --header-height: 90px;
    --nav-height: 42px;
    
    /* Breakpoints */
    --mobile-breakpoint: 640px;
    --tablet-breakpoint: 768px;
    --desktop-breakpoint: 1281px; /* Angepasst an neue Breite */
    --large-desktop-breakpoint: 1580px; /* Neuer Breakpoint für AIDA */
}

/* ========================================
   FONTS (Optimiert)
   ======================================== */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/files/fonts/roboto-slab-v23-latin-300.woff2') format('woff2'),
         url('/files/fonts/roboto-slab-v23-latin-300.woff') format('woff'),
         url('/files/fonts/roboto-slab-v23-latin-300.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/files/fonts/roboto-slab-v23-latin-regular.woff2') format('woff2'),
         url('/files/fonts/roboto-slab-v23-latin-regular.woff') format('woff'),
         url('/files/fonts/roboto-slab-v23-latin-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/files/fonts/karla-v22-latin-regular.woff2') format('woff2'),
         url('/files/fonts/karla-v22-latin-regular.woff') format('woff'),
         url('/files/fonts/karla-v22-latin-regular.ttf') format('truetype');
}

/* ========================================
   RESET & BASICS
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td {
    margin: 0;
    padding: 0;
}

fieldset {
    border: 0;
}

ul, li {
    list-style-type: none;
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: var(--font-size-small);
    line-height: 1.4;
    background: url(../../files/images/css/background_sea_3.jpg) fixed;
    background-size: cover;
    color: var(--text-color);
    min-height: 100vh;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1, h2, h3 {
    color: var(--primary-color);
}

h1 {
    font-size: var(--font-size-large);
    margin: var(--spacing-sm) 0 var(--spacing-md);
}

h2 {
    font-size: var(--font-size-medium);
    margin: var(--spacing-sm) 0 var(--spacing-md);
}

h3 {
    font-size: var(--font-size-small);
    margin-bottom: var(--spacing-md);
}

.subteaser h3 {
    color: var(--text-color);
}

p {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--primary-color);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-color);
}

th, td {
    padding: 8px 6px;
    vertical-align: top;
}

/* ========================================
   LAYOUT (Vergrößerte Breite)
   ======================================== */
#wrapper {
    max-width: var(--max-width);
    min-width: var(--min-width);
    margin: 0 auto;
    width: 100%;
}

#header {
    background: var(--white);
    margin: var(--spacing-lg) var(--spacing-lg) 0;
    position: relative;
    height: var(--header-height);
}

#headerlink {
    position: absolute;
    display: block;
    height: 80px;
    width: 300px;
}

#logo {
    background: url(../../files/images/css/logo.png) no-repeat scroll var(--spacing-lg) var(--spacing-sm);
    background-size: contain;
    display: block;
    position: absolute;
    width: 38%;
    height: 50px;
}

#container {
    background-color: var(--white);
    margin: 0 var(--spacing-lg);
    padding: var(--spacing-xl);
}

#footer {
    background-color: var(--primary-color);
    margin: 0 var(--spacing-lg) var(--spacing-lg);
}

#footer ul {
    width: 450px;
    margin: 0 auto;
    padding-top: var(--spacing-lg);
}

#footer ul li {
    display: block;
    float: left;
}

#footer ul li a {
    text-decoration: none;
    color: var(--white);
    padding: 0 var(--spacing-sm);
    transition: opacity 0.2s ease;
}

#footer ul li a:hover {
    opacity: 0.8;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.mb5 { margin-bottom: var(--spacing-xs); }
.mb10 { margin-bottom: var(--spacing-sm); }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: var(--spacing-lg); }
.mb25 { margin-bottom: 25px; }

.mt5 { margin-top: var(--spacing-xs); }
.mt10 { margin-top: var(--spacing-sm); }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: var(--spacing-lg); }
.mt25 { margin-top: 25px; }

/* ========================================
   HEADER KOMPONENTEN (Angepasst)
   ======================================== */
.hotline {
    position: absolute;
    left: 42%;
    top: 14px;
}

.hotline__head {
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 13pt;
    letter-spacing: 1px;
}

.hotline__head a {
    text-decoration: none;
    color: var(--text-color);
}

.hotline__body {
    font-size: var(--font-size-small);
}

.hotline__day {
    display: inline-block;
}

.headerbanner {
    position: absolute;
    background-image: url(/files/images/logos/partner-stoerer2025.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 394px;
    height: 90px;
    right: 27px;
    top: -12px;
    z-index: 2;
}

/* ========================================
   MAIN NAVIGATION (Vollständig)
   ======================================== */
#mainnav {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--primary-color);
    height: var(--nav-height);
    position: relative;
    top: var(--header-height);
    width: 100%;
    clear: both;
}

#mainnav ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

#mainnav ul li {
    height: var(--nav-height);
    display: block;
    float: left; /* Wichtig für Kompatibilität */
    border-right: 1px solid var(--white);
    transition: background-color 0.2s ease;
}

#mainnav ul li:last-child {
    border-right: none;
}

#mainnav ul li a,
#mainnav ul li strong {
    display: block; /* Wichtig: block statt flex für Kompatibilität */
    color: var(--white);
    font-size: var(--font-size-medium);
    padding: 10px var(--spacing-lg);
    text-decoration: none;
    letter-spacing: 1px;
    height: var(--nav-height);
    line-height: 22px; /* Für vertikale Zentrierung */
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

#mainnav ul li a:hover,
#mainnav ul li.active {
    background-color: var(--accent-color);
}

/* Fallback für ältere Browser */
@supports not (display: flex) {
    #mainnav ul {
        width: 100%;
    }
    
    #mainnav ul::after {
        content: "";
        display: table;
        clear: both;
    }
    
    #mainnav ul li {
        float: left;
    }
}

/* ========================================
   SUB NAVIGATION
   ======================================== */
.subnav {
    position: relative;
    width: 100%;
    overflow: visible;
    z-index: 999;
    margin-bottom: 18px;
}

.subnav ul.level_1 {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.subnav ul.level_1 li {
    height: 24px;
}

.subnav ul.level_1 > li > a,
.subnav ul.level_1 > li > strong {
    background: var(--primary-color);
    color: var(--white);
    text-decoration: none;
    border: 1px solid var(--border-gray);
    padding: 6px var(--spacing-md);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.subnav ul.level_1 > li > a.active,
.subnav ul.level_1 > li > strong.active,
.subnav ul.level_1 > li > a:hover {
    background: var(--accent-color);
}

.subnav ul.level_1 li ul.level_2 {
    display: none;
    position: absolute;
    background: #e5f5ff;
    border: 1px solid var(--primary-color);
    padding: var(--spacing-md);
    top: 24px;
    z-index: 1000;
    border-radius: 4px;
}

.subnav ul.level_1 li ul.level_2 > li {
    float: none;
}

.subnav ul li:hover ul.level_2 {
    display: block;
}

/* ========================================
   ROCKSOLDCOLUMN GRID INTEGRATION
   ======================================== */
.rs-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    width: 100%;
}

.rs-column {
    margin: 0;
    flex: 1;
    min-width: 0; /* Wichtig für Flexbox */
}

/* Responsive RockSolidColumn */
@media (max-width: 768px) {
    .rs-columns {
        flex-direction: column;
        gap: 15px;
    }
    
    .rs-column {
        flex: none;
        width: 100%;
    }
}

/* ========================================
   SEARCH FORM (Optimiert)
   ======================================== */
.searchform {
    padding: var(--spacing-md);
    background-color: var(--light-blue);
    border-radius: 4px;
    margin-bottom: var(--spacing-lg);
}

#kreuzfahrtsuche .formbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.flex-1 { order: 1; }
.flex-2 { order: 2; }
.flex-3 { order: 3; }
.flex-4 { order: 4; }
.flex-5 { order: 5; }
.flex-6 { order: 6; }

#kreuzfahrtsuche .widget {
    box-sizing: border-box;
}

#kreuzfahrtsuche .widget-radio {
    padding: 6px;
    border: 1px solid var(--border-gray);
    background-color: var(--white);
    border-radius: 4px;
}

#kreuzfahrtsuche .widget-radio label,
#kreuzfahrtsuche .widget-radio input[type="radio"] {
    cursor: pointer;
}

#kreuzfahrtsuche select,
#kreuzfahrtsuche input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    height: 30px;
    padding: 6px;
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    background-color: #fafafa;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#kreuzfahrtsuche select:focus,
#kreuzfahrtsuche input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(57, 116, 139, 0.2);
}

#kreuzfahrtsuche input[type="submit"] {
    width: 100%;
    background: var(--primary-color);
    color: var(--white);
    font-weight: 500;
    font-size: var(--font-size-small);
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    margin-bottom: var(--spacing-sm);
    padding: 8px 16px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

#kreuzfahrtsuche input[type="submit"]:hover {
    background: var(--accent-color);
    transform: translateY(-1px);
}

#kreuzfahrtsuche input[type="submit"]:disabled {
    background: var(--light-gray);
    cursor: not-allowed;
    color: var(--primary-color);
    font-weight: 400;
    transform: none;
}

/* ========================================
   STARTPAGE KOMPONENTEN
   ======================================== */

/* Vendors & Ships Navigation */
.submenu_start {
    margin-bottom: var(--spacing-xl);
}

.subsubmenu_start a,
.subsubmenu_start span {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: block;
    width: calc(50% - 17px);
    margin-right: 1px;
    padding: 8px;
    text-decoration: none;
    border-top: 1px solid var(--white);
    float: left;
    background: var(--light-blue);
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 500;
    transition: background-color 0.2s ease;
    border-radius: 4px 4px 0 0;
}

.subsubmenu_start a.fullsize,
.subsubmenu_start strong.fullsize {
    width: 100%;
}

.subsubmenu_start a:hover {
    background: #ffd9ba;
}

.submenu_neu_start {
    margin-bottom: var(--spacing-xl);
}

.subsubmenu_neu_start a,
.subsubmenu_neu_start span {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: block;
    width: calc(25% - 17px);
    margin-right: 1px;
    padding: 8px;
    text-decoration: none;
    border-top: 1px solid var(--white);
    float: left;
    background: var(--light-blue);
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 500;
    transition: background-color 0.2s ease;
    border-radius: 4px 4px 0 0;
}

.subsubmenu_neu_start a:hover {
    background: #ffd9ba;
}

/* Guthaben */
.guthaben {
    color: var(--red);
    display: block;
    font-weight: 700;
}

/* Subteaser - Angepasst für größere Breite */
.subteaser {
    width: calc(50% - 11px); /* Angepasst an 22px Gap */
    margin-bottom: var(--spacing-lg);
    box-sizing: border-box;
}

.subteaser img {
    width: 100%;
    border-radius: 4px 4px 0 0;
}

.subteaser h3 {
    font-weight: normal;
    padding: 8px;
    margin-bottom: 0;
}

.subteaser li {
    width: 100%; /* Responsive */
    height: auto;
    margin-bottom: var(--spacing-sm);
}

.subteaser .subteaser_content {
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    overflow: hidden;
}

.subteaser .guthaben {
    padding: 8px;
    display: inline-block;
    width: 67%;
    box-sizing: border-box;
    min-height: 50px;
}

.subteaser .subteaser_preis {
    background: var(--red);
    color: var(--white);
    float: right;
    padding: 4px 8px;
    margin: 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* ========================================
   BUTTONS (Optimiert)
   ======================================== */
.button {
    display: inline-block;
    background: var(--primary-color);
    color: var(--white);
    font-weight: 500;
    font-size: var(--font-size-small);
    text-decoration: none;
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    padding: 8px 16px;
    text-align: center;
    margin: 0 18px 12px 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.button:hover {
    background: var(--accent-color);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.button-full {
    width: 100%;
    padding: 8px 0;
    margin-right: 0;
}

.button-low {
    height: 10px;
    line-height: 10px;
}

.button-topright {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 0;
}

.button_orange {
    display: inline-block;
    background: var(--accent-color);
    width: 95%;
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    padding: 8px 16px;
    text-align: left;
    margin: 0 0 12px 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.button_orange:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.button_orange a {
    color: var(--white);
    font-size: var(--font-size-medium) !important;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    letter-spacing: 1px;
}

/* ========================================
   ICONS (Mit besserer Performance)
   ======================================== */
div.icon {
    position: relative;
}

div.icon::before {
    position: absolute;
    box-sizing: border-box;
    width: 32px;
    height: 28px;
    padding: 2px 3px;
    background: #fafafa;
    border-radius: 6px;
    top: 1px;
    left: 1px;
}

div.icon__ship::before {
    content: url(../../files/images/css/icon_directions_boat_24px.svg);
}

div.icon__destination::before {
    content: url(../../files/images/css/icon_my_location_24px.svg);
}

div.icon__calendar::before {
    content: url(../../files/images/css/icon_event_note_24px.svg);
}

/* ========================================
   TABLES & DETAIL COMPONENTS
   ======================================== */

/* Tables */
.details table,
.hl_journeys {
    width: 100%;
    border: 1px solid var(--border-gray);
    border-collapse: collapse;
    margin-bottom: var(--spacing-lg);
    border-radius: 4px;
    overflow: hidden;
}

.details th,
.hl_journeys th {
    color: var(--white);
    background-color: var(--primary-color);
    min-width: 80px;
    padding: 8px 6px;
    vertical-align: top;
}

.details .even td {
    background: var(--white);
}

.details .odd td {
    background: var(--light-gray);
}

.details.deutschland a,
.details.phoenix a {
    text-decoration: none;
    color: var(--text-color);
}

.details.deutschland td,
.details.phoenix td {
    vertical-align: middle;
}

.details.deutschland .col_last {
    text-align: right;
}

.phoenix .col_2,
.phoenix .col_5 {
    white-space: nowrap;
}

.bordguthaben table td,
.bordguthaben table th {
    width: 100px;
}

table#table_1777 td,
table#table_3131 td,
table#table_3705 td,
table#table_3722 td,
table#table_3756 td,
table#table_3739 td {
    text-align: right;
}

.details table .caption {
    display: none;
}

/* Box Details */
.box_details {
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-gray);
    padding: var(--spacing-sm);
    border-radius: 4px;
}

.box_details_blue {
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--primary-color);
    padding: var(--spacing-sm);
    border-radius: 4px;
}

.box_details_red {
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--red);
    padding: var(--spacing-sm);
    border-radius: 4px;
}

.box_details_red h2 {
    color: var(--red);
}

.box_details_red td {
    padding-left: 0;
}

.box_details,
.box_details_blue,
.box_details_red {
    line-height: 14pt;
}

.box_details table,
.box_details_blue table,
.box_details_red table {
    margin-bottom: 6px;
}

.box_details td,
.box_details_blue td,
.box_details_red td {
    padding: 0 3px 0 0;
}

.box_details ul {
    margin-bottom: var(--spacing-lg);
}

.box_details ul li {
    background: url(../../files/images/css/check.png) no-repeat scroll 0 4px;
    padding-left: 22px;
    line-height: 16pt;
}

.description {
    margin-bottom: var(--spacing-lg);
}

.longdescription {
    clear: both;
}

.prices {
    clear: both;
    display: none;
}

.ship {
    clear: both;
    display: none;
}

.subcr ul {
    margin-bottom: var(--spacing-md);
}

.subnavi {
    font-weight: 600;
    clear: both;
    height: 30px;
    padding-top: 6px;
    margin-bottom: var(--spacing-md);
}

.subnavi li {
    display: block;
    float: left;
    margin-right: var(--spacing-sm);
}

.subnavi li a {
    background: var(--primary-color);
    color: var(--white);
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--border-gray);
    padding: 6px var(--spacing-md);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.subnavi li a.active,
.subnavi li a:hover {
    background: var(--accent-color);
    color: var(--white);
}

/* ========================================
   FORMS & INPUT ELEMENTS
   ======================================== */

input, select, textarea {
    margin-bottom: 4px;
    font-family: inherit;
}

input.text {
    width: 300px;
    padding: 6px;
    border: 1px solid var(--border-gray);
    border-radius: 4px;
}

textarea {
    width: 510px;
    padding: 6px;
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    resize: vertical;
}

select {
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    padding: 4px;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(57, 116, 139, 0.2);
}

#bookingform h2 {
    border-bottom: 1px solid var(--border-gray);
    padding-bottom: 5px;
}

#bookingform label,
.bookingform label {
    display: block;
    float: left;
    width: 150px;
}

.row {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-gray);
}

/* ========================================
   SPECIAL COMPONENTS
   ======================================== */

/* Offers */
.offer_link {
    display: block;
    height: 224px;
    position: absolute;
    width: 688px;
}

.offer_content:hover {
    border: 1px solid var(--red);
}

.offer_content {
    border: 1px solid var(--border-gray);
    width: 688px;
}

.offer_advantages {
    float: right;
    width: 50%;
    list-style-image: url(../../files/images/css/check.png);
    width: 320px;
    padding: var(--spacing-lg) var(--spacing-sm) 0 0;
}

.offer_price_wrapper {
    height: 26px;
    width: 690px;
}

.offer_price {
    width: 50px;
    background: var(--red);
    color: var(--white);
    float: right;
    height: 18px;
    padding: 4px;
    position: relative;
    top: -1px;
}

/* Lists */
.disc {
    margin-bottom: var(--spacing-lg);
}

.disc li {
    list-style-type: disc;
    margin-left: var(--spacing-lg);
}

/* Downloads */
.ce_download,
.ce_downloads {
    margin-bottom: 30px;
}

/* Tooltips */
.boxlink {
    position: relative;
    display: block;
    float: left;
}

.boxlink:hover .tooltip_reedereien,
.firetooltip:hover + .tooltip_schiff,
.firetooltip:hover + .tooltip_dany {
    display: block;
}

.firetooltip {
    cursor: help;
}

.tooltip_reedereien {
    display: none;
    background: var(--white);
    left: 200px;
    top: 0;
    padding: var(--spacing-sm);
    position: absolute;
    text-align: left;
    width: 300px;
    z-index: 30;
    border: 1px solid #999999;
    border-radius: 4px;
    box-shadow: 0px 3px 5px #999999;
    background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
}

.tooltip_schiff {
    display: none;
    background: var(--white);
    left: 668px;
    top: 0;
    padding: var(--spacing-sm);
    position: absolute;
    text-align: left;
    width: 250px;
    z-index: 30;
    border: 1px solid #999999;
    border-radius: 4px;
    box-shadow: 0px 3px 5px #999999;
    background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
}

/* ========================================
   LEGACY SUPPORT & MISSING COMPONENTS
   ======================================== */

/* Scroll to Top Button */
#scrollToTop_button {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999999;
    padding: var(--spacing-md);
    color: var(--white);
    opacity: 0.7;
    background: #333;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.2s ease;
}

#scrollToTop_button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Shift Column */
.shift-column {
    overflow: visible;
}

.shift-column .c25r,
.shift-column .c62r {
    margin-top: -49px;
}

/* Phoenix & Deutschland specifics */
.phoenix .col_0,
.deutschland .col_0 {
    position: relative;
}

.triggershowonhover {
    display: block;
}

.showonhover {
    display: none;
    position: absolute;
    z-index: 1;
}

.phoenix .showonhover {
    left: 124px;
    top: -200px;
}

.deutschland .showonhover {
    left: 124px;
    top: -100px;
}

.triggershowonhover:hover .showonhover {
    display: block;
}

/* Trennlinie */
.trennlinie {
    width: 80%;
    height: 1px;
    background-color: var(--border-gray);
    margin: 30px auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* One Line */
.one-line {
    height: 48px;
    padding-top: var(--spacing-xl);
}

.one-line-left {
    float: left;
}

.one-line-right li {
    float: right !important;
}

/* Team Member */
div.team_member {
    width: calc(50% - 24px - 9px);
    display: inline-block;
    padding: var(--spacing-md);
    vertical-align: top;
}

.team_member img {
    width: 100%;
    height: 100%;
}

/* Carousel */
.carousel_preis {
    display: block;
    padding: 6px;
    float: right;
    text-align: right;
    font-size: 14pt;
    color: var(--white);
    background: var(--red);
}

/* Images */
.mod_article img {
    max-width: 100%;
    height: auto;
}

#phoenix-reisen img,
#hapag-lloyd-kreuzfahrten img,
[id^=ms-europa-] img,
[id^=ms-europa-2-] img,
[id^=ms-hanseatic-nature-] img,
[id^=ms-hanseatic-inspiration-] img,
[id^=ms-hanseatic-spirit-] img,
[id^=ms-bremen-] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ce_table img {
    width: inherit !important;
    height: inherit !important;
}

/* AIDA Overview */
#stage {
    z-index: 1;
    margin-bottom: 4px;
}

#stage-pager img {
    padding: 2px;
}

#stage-pager .cycle-pager-active,
#stage-pager img:hover {
    padding: 0;
    border: 2px solid var(--accent-color);
}

.logo_aida {
    position: absolute;
    z-index: 40;
    right: -18px;
    opacity: 0.9;
}

/* Reiseberichte */
.mod_newslist .layout_short {
    margin-bottom: var(--spacing-lg);
}

/* Hapag Lloyd */
.reise-hapag .c33r {
    height: 225px;
    background-color: var(--light-gray);
    box-sizing: border-box;
    padding: 13px;
}

img.u-mb {
    display: none;
}

.productDetail__itineraryTable {
    border-collapse: collapse;
}

.productDetail__itineraryTable tr:nth-child(2n) {
    background-color: #dedede;
}

.productDetail__itineraryTable td {
    padding: var(--spacing-sm);
}

.productDetail__itineraryTable__itemContent__teaser {
    width: 114px;
}

.productDetail__itineraryTable td p {
    margin-bottom: 0;
}

.travel-history-station .gi {
    width: 48%;
    float: left;
    padding: 1%;
}

/* PDF Link */
.pdf_link {
    position: relative;
    left: 920px;
    top: 24px;
    z-index: 100;
}

/* Cruise Portal */
#CPIFrame {
    position: relative;
    z-index: 20;
}

/* Exit Intent Popup */
#bio_ep {
    width: 680px;
    height: 406px;
    background: url(../../files/images/css/europa_2_nl_teaser.jpg);
    border: 4px solid var(--primary-color);
}

#bio_ep_close {
    background-color: var(--primary-color);
    padding: 5px;
    line-height: 20px;
    top: -10px;
}

#bio_ep_inner {
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) 216px;
}

#bio_ep_headline {
    font-size: 26px;
    color: var(--white);
}

#bio_ep_text {
    font-size: 11px;
    color: var(--white);
}

#bio_ep_text a {
    color: var(--white);
}

#bio_ep input.text {
    padding: 6px;
}

#bio_ep input.submit {
    display: inline-block;
    position: relative;
    left: -5px;
    background: var(--primary-color);
    color: var(--white);
    font-weight: 500;
    font-size: var(--font-size-small);
    text-decoration: none;
    border: 1px solid var(--border-gray);
    padding: 8px 16px;
    text-align: center;
    margin: 0 18px 12px 0;
    cursor: pointer;
}

/* Box */
.box {
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    clear: both;
}

.box h1 {
    border-bottom: 1px solid var(--border-gray);
    padding-bottom: var(--spacing-md);
}

.box h2,
.tooltip_schiff h2 {
    border-bottom: 1px solid var(--border-gray);
    padding-bottom: var(--spacing-md);
}

#gruppenreisen .box h2 {
    border-bottom: 0;
    padding-bottom: 0;
    border-top: 1px solid var(--border-gray);
    padding-top: var(--spacing-md);
}

#gruppenreisen .box h2:first-of-type {
    border-top: 0;
    padding-top: 0;
}

/* Info Box */
.infobox {
    border: 1px solid #1f6191;
    margin-bottom: var(--spacing-lg);
    background: #e5f5ff;
    border-radius: 4px;
}

.infobox p {
    margin: var(--spacing-lg);
    background: url(../../files/images/css/information.png) no-repeat transparent;
    padding-left: 25px;
}

/* Width Auto */
.widthauto {
    width: auto;
}

.pl-17 {
    padding-left: 17px;
}

/* Red Right */
.redright {
    color: var(--red);
    text-align: right !important;
}

/* Large Desktop */
@media (min-width: 1580px) {
    #wrapper {
        max-width: 1400px; /* Noch größer auf sehr großen Bildschirmen */
    }
}

/* Desktop */
@media (max-width: 1280px) {
    #wrapper {
        max-width: 100%;
        margin: 0 var(--spacing-sm);
    }
}

/* Tablet */
@media (max-width: 768px) {
    #wrapper {
        min-width: auto;
        margin: 0 var(--spacing-xs);
    }
    
    #header {
        margin: var(--spacing-sm) var(--spacing-sm) 0;
    }
    
    #container {
        margin: 0 var(--spacing-sm);
        padding: var(--spacing-md);
    }
    
    .subteaser {
        width: 100%;
    }
    
    .subsubmenu_start a,
    .subsubmenu_start span {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .subsubmenu_neu_start a,
    .subsubmenu_neu_start span {
        width: calc(50% - 8px);
    }
}

/* Mobile */
@media (max-width: 640px) {
    .subsubmenu_neu_start a,
    .subsubmenu_neu_start span {
        width: 100%;
        margin-bottom: 8px;
    }
}

/* ========================================
   PERFORMANCE OPTIMIERUNGEN
   ======================================== */

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Helper Classes */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.error, .price, .red {
    color: var(--red);
}

.floatleft {
    float: left;
}

.relative {
    position: relative;
}

.left {
    float: left;
    margin: 0 var(--spacing-lg) var(--spacing-lg) 0;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

.border {
    border: 1px solid var(--border-gray);
}

.noborder {
    border: none !important;
}

.marginbottom {
    margin-bottom: var(--spacing-md);
}

/* Cookie Bar */
.cookiebar {
    font-size: 12px;
}

.cookiebar__button {
    background-color: #206597;
    border: 1px solid var(--white);
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

/* Hidden Elements */
table caption,
.tt_poweredby {
    display: none !important;
}

/* Price Display */
.preis {
    float: right;
    display: block;
    margin-top: 15px;
    margin-right: var(--spacing-sm);
    padding: 6px 8px;
    text-align: right;
    background-color: var(--red);
    font-size: 14pt;
    color: var(--white);
    border-radius: 4px;
    font-weight: 600;
}

.preis p {
    margin-bottom: 0;
    color: var(--white);
}
/*******************************************************************
 * DEFINITIVE SUBMENU FIX - ÜBERSCHREIBT ALLE ANDEREN CSS
 * Löst Umbruch-Probleme auf der rechten Seite
 *******************************************************************/

/* ========================================
   WICHTIG: Diese CSS MUSS als LETZTES geladen werden!
   Fügen Sie diese CSS ganz am Ende Ihrer CSS-Dateien ein
   oder verwenden Sie höchste Spezifität
   ======================================== */

/* ========================================
   CONTAINER SETUP - HÖCHSTE PRIORITÄT
   ======================================== */

.submenu_start,
.submenu_neu_start {
    width: 100% !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    display: block !important;
    clear: both !important;
}

.subsubmenu_start,
.subsubmenu_neu_start {
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    clear: both !important;
}

/* Clearfix für alle Container */
.submenu_start::after,
.submenu_neu_start::after,
.subsubmenu_start::after,
.subsubmenu_neu_start::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* ========================================
   SUBMENU START - 2ER UMBRUCH (LINKE SEITE)
   ======================================== */

/* Überschreibt ALLE anderen Definitionen */
body .subsubmenu_start a,
body .subsubmenu_start span,
html body .subsubmenu_start a,
html body .subsubmenu_start span {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    display: block !important;
    width: calc(50% - 1px) !important;
    margin: 0 1px 1px 0 !important;
    padding: 8px !important;
    text-decoration: none !important;
    border-top: 1px solid #fff !important;
    float: left !important;
    background: #bae4f1 !important;
    font-size: 12px !important;
    color: #39748b !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease !important;
    border-radius: 0 !important;
    min-height: auto !important;
    height: auto !important;
    line-height: 1.4 !important;
}

/* Jedes zweite Element - rechte Spalte */
body .subsubmenu_start a:nth-child(2n),
body .subsubmenu_start span:nth-child(2n),
html body .subsubmenu_start a:nth-child(2n),
html body .subsubmenu_start span:nth-child(2n) {
    margin-right: 0 !important;
}

/* Fullsize Elemente */
body .subsubmenu_start a.fullsize,
body .subsubmenu_start strong.fullsize,
html body .subsubmenu_start a.fullsize,
html body .subsubmenu_start strong.fullsize {
    width: 100% !important;
    margin-right: 0 !important;
}

/* Hover-Effekt */
body .subsubmenu_start a:hover,
html body .subsubmenu_start a:hover {
    background: #ffd9ba !important;
}

/* ========================================
   SUBMENU NEU START - 4ER UMBRUCH (RECHTE SEITE)
   ======================================== */

/* Überschreibt ALLE anderen Definitionen - HÖCHSTE SPEZIFITÄT */
body .subsubmenu_neu_start a,
body .subsubmenu_neu_start span,
html body .subsubmenu_neu_start a,
html body .subsubmenu_neu_start span,
html body div .subsubmenu_neu_start a,
html body div .subsubmenu_neu_start span {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    display: block !important;
    width: calc(25% - 1px) !important;
    margin: 0 1px 1px 0 !important;
    padding: 8px !important;
    text-decoration: none !important;
    border-top: 1px solid #fff !important;
    float: left !important;
    background: #bae4f1 !important;
    font-size: 12px !important;
    color: #39748b !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease !important;
    border-radius: 0 !important;
    min-height: auto !important;
    height: auto !important;
    line-height: 1.4 !important;
}

/* Jedes vierte Element - äußerste rechte Spalte */
body .subsubmenu_neu_start a:nth-child(4n),
body .subsubmenu_neu_start span:nth-child(4n),
html body .subsubmenu_neu_start a:nth-child(4n),
html body .subsubmenu_neu_start span:nth-child(4n),
html body div .subsubmenu_neu_start a:nth-child(4n),
html body div .subsubmenu_neu_start span:nth-child(4n) {
    margin-right: 0 !important;
}

/* Hover-Effekt */
body .subsubmenu_neu_start a:hover,
html body .subsubmenu_neu_start a:hover,
html body div .subsubmenu_neu_start a:hover {
    background: #ffd9ba !important;
}

/* ========================================
   SPEZIELLE GRID-ÜBERSTEUERUNG
   ======================================== */

/* Überschreibt RockSolidColumn Grid-Regeln */
.rs-column .subsubmenu_start a,
.rs-column .subsubmenu_start span,
.rs-columns .rs-column .subsubmenu_start a,
.rs-columns .rs-column .subsubmenu_start span {
    width: 100% !important;
    margin: 0 0 4px 0 !important;
    float: none !important;
}

.rs-column .subsubmenu_neu_start a,
.rs-column .subsubmenu_neu_start span,
.rs-columns .rs-column .subsubmenu_neu_start a,
.rs-columns .rs-column .subsubmenu_neu_start span {
    width: calc(50% - 2px) !important;
    margin: 0 2px 4px 0 !important;
    float: left !important;
}

.rs-column .subsubmenu_neu_start a:nth-child(2n),
.rs-columns .rs-column .subsubmenu_neu_start a:nth-child(2n) {
    margin-right: 0 !important;
}

/* ========================================
   RESPONSIVE - HÖCHSTE PRIORITÄT
   ======================================== */

/* Desktop - Standard Verhalten */
@media (min-width: 769px) {
    /* 2er-Umbruch links */
    body .subsubmenu_start a,
    body .subsubmenu_start span {
        width: calc(50% - 1px) !important;
    }
    
    /* 4er-Umbruch rechts */
    body .subsubmenu_neu_start a,
    body .subsubmenu_neu_start span {
        width: calc(25% - 1px) !important;
    }
}

/* Tablet - 2er wird 1er, 4er wird 2er */
@media (max-width: 768px) {
    body .subsubmenu_start a,
    body .subsubmenu_start span,
    html body .subsubmenu_start a,
    html body .subsubmenu_start span {
        width: 100% !important;
        margin: 0 0 4px 0 !important;
        float: none !important;
    }
    
    body .subsubmenu_neu_start a,
    body .subsubmenu_neu_start span,
    html body .subsubmenu_neu_start a,
    html body .subsubmenu_neu_start span {
        width: calc(50% - 2px) !important;
        margin: 0 2px 4px 0 !important;
        float: left !important;
    }
    
    body .subsubmenu_neu_start a:nth-child(2n),
    html body .subsubmenu_neu_start a:nth-child(2n) {
        margin-right: 0 !important;
    }
    
    /* Reset 4n rule */
    body .subsubmenu_neu_start a:nth-child(4n),
    html body .subsubmenu_neu_start a:nth-child(4n) {
        margin-right: 2px !important;
    }
}

/* Mobile - Alles 1er */
@media (max-width: 640px) {
    body .subsubmenu_start a,
    body .subsubmenu_start span,
    body .subsubmenu_neu_start a,
    body .subsubmenu_neu_start span,
    html body .subsubmenu_start a,
    html body .subsubmenu_start span,
    html body .subsubmenu_neu_start a,
    html body .subsubmenu_neu_start span {
        width: 100% !important;
        margin: 0 0 4px 0 !important;
        float: none !important;
    }
    
    /* Reset alle nth-child rules */
    body .subsubmenu_neu_start a:nth-child(2n),
    body .subsubmenu_neu_start a:nth-child(4n),
    html body .subsubmenu_neu_start a:nth-child(2n),
    html body .subsubmenu_neu_start a:nth-child(4n) {
        margin-right: 0 !important;
    }
}

/* ========================================
   NOTFALL-LÖSUNG MIT CSS GRID
   ======================================== */

/* Falls Float immer noch Probleme macht - CSS Grid als Backup */
.force-grid-submenu .subsubmenu_start {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
    width: 100% !important;
}

.force-grid-submenu .subsubmenu_neu_start {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2px !important;
    width: 100% !important;
}

.force-grid-submenu .subsubmenu_start a,
.force-grid-submenu .subsubmenu_neu_start a,
.force-grid-submenu .subsubmenu_start span,
.force-grid-submenu .subsubmenu_neu_start span {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
}

@media (max-width: 768px) {
    .force-grid-submenu .subsubmenu_start {
        grid-template-columns: 1fr !important;
    }
    
    .force-grid-submenu .subsubmenu_neu_start {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 640px) {
    .force-grid-submenu .subsubmenu_neu_start {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   DEBUG MODE (Temporär)
   ======================================== */

/* Aktivieren mit class="debug-submenu" am body */
/*
.debug-submenu .subsubmenu_start a,
.debug-submenu .subsubmenu_neu_start a {
    border: 1px solid red !important;
    background: rgba(255, 0, 0, 0.2) !important;
}

.debug-submenu .subsubmenu_start a:nth-child(2n),
.debug-submenu .subsubmenu_neu_start a:nth-child(4n) {
    border-color: blue !important;
    background: rgba(0, 0, 255, 0.2) !important;
}

.debug-submenu .subsubmenu_start::before {
    content: "2er-Umbruch (50% - 1px)";
    display: block;
    background: yellow;
    padding: 5px;
    font-weight: bold;
}

.debug-submenu .subsubmenu_neu_start::before {
    content: "4er-Umbruch (25% - 1px)";
    display: block;
    background: orange;
    padding: 5px;
    font-weight: bold;
}
*/

/* ========================================
   FINAL OVERRIDE - NUKLEARE OPTION
   ======================================== */

/* Wenn alle anderen Lösungen versagen - Maximale Spezifität */
html body div.rs-columns div.rs-column .subsubmenu_neu_start a,
html body div.rs-columns div.rs-column .subsubmenu_neu_start span,
html body div .subsubmenu_neu_start a,
html body div .subsubmenu_neu_start span {
    width: calc(25% - 1px) !important;
    margin: 0 1px 1px 0 !important;
    float: left !important;
    box-sizing: border-box !important;
}

html body div.rs-columns div.rs-column .subsubmenu_neu_start a:nth-child(4n),
html body div .subsubmenu_neu_start a:nth-child(4n) {
    margin-right: 0 !important;
}
/*******************************************************************
 * SPEZIAL.CSS FÜR KREUZFAHRT1000.DE
 * RockSolidColumn Grid + AIDA Werbung + Spezielle Komponenten
 *******************************************************************/

/* ========================================
   ROCKSOLDCOLUMN GRID SYSTEM
   ======================================== */

/* Basis Grid Container */
.rs-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 22px; /* Abstand zwischen Spalten */
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Basis Spalte */
.rs-column {
    margin: 0; /* Alle Margins entfernen */
    flex: 1;
    min-width: 0; /* Wichtig für Flexbox Overflow */
    box-sizing: border-box;
}

/* Spezifische Spaltenbreiten */
.rs-column-1 { flex: 0 0 calc(8.333% - 18.333px); }
.rs-column-2 { flex: 0 0 calc(16.666% - 18.333px); }
.rs-column-3 { flex: 0 0 calc(25% - 16.5px); }
.rs-column-4 { flex: 0 0 calc(33.333% - 14.666px); }
.rs-column-5 { flex: 0 0 calc(41.666% - 13.2px); }
.rs-column-6 { flex: 0 0 calc(50% - 11px); } /* Halbe Breite */
.rs-column-7 { flex: 0 0 calc(58.333% - 9.428px); }
.rs-column-8 { flex: 0 0 calc(66.666% - 8.25px); }
.rs-column-9 { flex: 0 0 calc(75% - 6.5px); }
.rs-column-10 { flex: 0 0 calc(83.333% - 4.4px); }
.rs-column-11 { flex: 0 0 calc(91.666% - 2px); }
.rs-column-12 { flex: 0 0 100%; } /* Volle Breite */

/* Responsive Grid - Tablet */
@media (max-width: 768px) {
    .rs-columns {
        flex-direction: column;
        gap: 15px;
    }
    
    .rs-column,
    .rs-column-1, .rs-column-2, .rs-column-3, .rs-column-4,
    .rs-column-5, .rs-column-6, .rs-column-7, .rs-column-8,
    .rs-column-9, .rs-column-10, .rs-column-11, .rs-column-12 {
        flex: none;
        width: 100%;
    }
}

/* Responsive Grid - Mobile */
@media (max-width: 640px) {
    .rs-columns {
        gap: 12px;
    }
}

/* Grid Helper Classes */
.rs-column-auto {
    flex: 1 1 auto;
}

.rs-column-grow {
    flex-grow: 1;
}

.rs-column-shrink {
    flex-shrink: 1;
}

.rs-column-no-grow {
    flex-grow: 0;
}

/* ========================================
   AIDA WERBUNG RESPONSIVE POSITIONING
   Angepasst für 1280px Gesamtbreite
   ======================================== */

/* Standard-Styling für AIDA Werbung */
#aidawerbung {
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
    will-change: transform, left, top;
}

/* Large Desktop: Werbung rechts außerhalb */
@media screen and (min-width: 1581px) {
    #aidawerbung {
        position: fixed;
        left: calc(50% + 640px + 20px); /* 50% + halbe neue Webseitenbreite (640px) + 20px Abstand */
        top: 30%;
        transform: translateY(-50%);
        z-index: 1000;
        max-width: 300px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        overflow: hidden;
    }
    
    #aidawerbung img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    #aidawerbung:hover {
        transform: translateY(-50%) scale(1.02);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }
}

/* Desktop: Werbung in der rechten Spalte */
@media screen and (max-width: 1580px) and (min-width: 1000px) {
    #aidawerbung {
        position: relative;
        float: right;
        margin: 0 0 20px 20px;
        max-width: 250px;
        clear: right;
    }
    
    #aidawerbung img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    #aidawerbung:hover {
        transform: scale(1.02);
    }
}

/* Tablet & Mobile: Werbung zentriert */
@media screen and (max-width: 999px) {
    #aidawerbung {
        position: relative;
        margin: 20px auto;
        text-align: center;
        max-width: 280px;
        clear: both;
    }
    
    #aidawerbung img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    #aidawerbung:hover {
        transform: scale(1.02);
    }
}

/* Integration in RockSolidColumn Grid */
.rs-columns .rs-column #aidawerbung {
    margin: 0 0 20px 0; /* Reset margins in grid */
    max-width: 100%; /* Use full column width */
    float: none; /* Reset float in grid */
}

/* Spezielle Positionierung in Sidebar-Spalten */
.rs-column-sidebar #aidawerbung,
.rs-column-3 #aidawerbung,
.rs-column-4 #aidawerbung {
    position: sticky;
    top: 20px;
    margin-bottom: 20px;
}

/* ========================================
   GRID CONTENT OPTIMIERUNGEN
   ======================================== */

/* Bilder in Grid-Spalten */
.rs-column img {
    max-width: 100%;
    height: auto;
}

/* Text in schmalen Spalten */
.rs-column-1, .rs-column-2, .rs-column-3 {
    font-size: 0.9em;
    line-height: 1.3;
}

/* Listen in Grid */
.rs-column ul,
.rs-column ol {
    padding-left: 1.2em;
}

/* Tabellen in Grid */
.rs-column table {
    width: 100%;
    font-size: 0.9em;
}

/* Forms in Grid */
.rs-column input,
.rs-column select,
.rs-column textarea {
    width: 100%;
    box-sizing: border-box;
}

/* ========================================
   SPEZIELLE GRID LAYOUTS
   ======================================== */

/* Hauptinhalt + Sidebar Layout */
.layout-main-sidebar {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.layout-main {
    flex: 2;
    min-width: 0;
}

.layout-sidebar {
    flex: 0 0 300px;
    min-width: 250px;
}

@media (max-width: 768px) {
    .layout-main-sidebar {
        flex-direction: column;
    }
    
    .layout-sidebar {
        flex: none;
        order: -1; /* Sidebar zuerst auf Mobile */
    }
}

/* 3-Spalten Layout */
.layout-three-columns {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.layout-three-columns > div {
    flex: 1;
    min-width: 280px;
}

@media (max-width: 768px) {
    .layout-three-columns {
        flex-direction: column;
    }
}

/* ========================================
   SUBTEASER GRID INTEGRATION
   ======================================== */

/* Subteaser in Grid System */
.rs-column .subteaser {
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.rs-column .subteaser li {
    width: 100%;
    height: auto;
    float: none;
}

.rs-column .subteaser .subteaser_content {
    width: 100%;
    height: auto;
}

/* Subteaser Grid Container */
.subteaser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .subteaser-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ========================================
   NAVIGATION IN GRID
   ======================================== */

/* Submenu in Grid */
.rs-column .submenu_start,
.rs-column .submenu_neu_start {
    margin-bottom: 20px;
}

.rs-column .subsubmenu_start a,
.rs-column .subsubmenu_start span {
    width: 100%;
    margin-bottom: 8px;
    float: none;
}

.rs-column .subsubmenu_neu_start a,
.rs-column .subsubmenu_neu_start span {
    width: calc(50% - 4px);
    margin-right: 8px;
}

@media (max-width: 480px) {
    .rs-column .subsubmenu_neu_start a,
    .rs-column .subsubmenu_neu_start span {
        width: 100%;
        margin-right: 0;
    }
}

/* ========================================
   FORMS IN GRID
   ======================================== */

/* Suchformular in Grid */
.rs-column .searchform {
    margin-bottom: 20px;
}

.rs-column #kreuzfahrtsuche .formbody {
    display: block; /* Einfacher Stack in schmalen Spalten */
}

.rs-column #kreuzfahrtsuche .widget {
    width: 100%;
    margin-bottom: 10px;
}

/* ========================================
   ACCESSIBILITY VERBESSERUNGEN
   ======================================== */

/* Touch-Friendly für Mobile */
@media (hover: none) and (pointer: coarse) {
    #aidawerbung {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    #aidawerbung:hover {
        transform: none; /* Deaktiviere Hover-Effekte auf Touch-Geräten */
    }
}

/* Fokus-Styling für Keyboard Navigation */
#aidawerbung:focus,
#aidawerbung a:focus {
    outline: 2px solid #39748b;
    outline-offset: 2px;
}

/* Skip-Link für bessere Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #39748b;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 9999;
}

.skip-link:focus {
    top: 6px;
}

/* ========================================
   PERFORMANCE OPTIMIERUNGEN
   ======================================== */

/* Lazy Loading Support */
#aidawerbung img[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#aidawerbung img.loaded {
    opacity: 1;
}

/* Content Visibility für bessere Performance */
.rs-column {
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {
    #aidawerbung {
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
    }
    
    #aidawerbung:hover {
        box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2);
    }
    
    .rs-columns {
        color-scheme: dark;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    #aidawerbung {
        display: none !important;
    }
    
    .rs-columns {
        display: block !important;
    }
    
    .rs-column {
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        break-inside: avoid;
    }
}

/* ========================================
   FALLBACKS FÜR ÄLTERE BROWSER
   ======================================== */

/* Fallback für Browser ohne Flexbox Support */
@supports not (display: flex) {
    .rs-columns {
        width: 100%;
    }
    
    .rs-columns::after {
        content: "";
        display: table;
        clear: both;
    }
    
    .rs-column {
        float: left;
        width: 50%;
        padding-right: 22px;
    }
    
    .rs-column:nth-child(2n) {
        padding-right: 0;
    }
}

/* Fallback für Browser ohne CSS Grid Support */
@supports not (display: grid) {
    .subteaser-grid {
        display: block;
    }
    
    .subteaser-grid .subteaser {
        float: left;
        width: calc(50% - 10px);
        margin-right: 20px;
    }
    
    .subteaser-grid::after {
        content: "";
        display: table;
        clear: both;
    }
}

/* ========================================
   DEBUGGING HELPER (Nur für Entwicklung)
   ======================================== */

/*
Zum Debugging Grid-Probleme:

.debug-grid .rs-columns {
    background: rgba(255, 0, 0, 0.1);
    border: 2px solid red;
}

.debug-grid .rs-column {
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid green;
    min-height: 100px;
}

.debug-grid .rs-column::before {
    content: attr(class);
    display: block;
    background: yellow;
    padding: 5px;
    font-size: 12px;
    font-weight: bold;
}
*/

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Spacing Utils für Grid */
.rs-gap-small { gap: 10px !important; }
.rs-gap-medium { gap: 22px !important; } /* Standard */
.rs-gap-large { gap: 40px !important; }
.rs-gap-none { gap: 0 !important; }

/* Alignment Utils */
.rs-align-start { align-items: flex-start; }
.rs-align-center { align-items: center; }
.rs-align-end { align-items: flex-end; }
.rs-align-stretch { align-items: stretch; }

.rs-justify-start { justify-content: flex-start; }
.rs-justify-center { justify-content: center; }
.rs-justify-end { justify-content: flex-end; }
.rs-justify-between { justify-content: space-between; }
.rs-justify-around { justify-content: space-around; }

/* Order Utils für Mobile */
.rs-order-first { order: -1; }
.rs-order-last { order: 999; }
.rs-order-1 { order: 1; }
.rs-order-2 { order: 2; }
.rs-order-3 { order: 3; }

/*******************************************************************
 * NAVIGATION FIX FÜR KREUZFAHRT1000.DE
 * Korrigiert Mainnav und Submenu-Probleme
 *******************************************************************/

/* ========================================
   MAIN NAVIGATION - KORREKTE VERSION
   ======================================== */

#mainnav {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    background-color: #39748b;
    height: 42px;
    position: relative;
    top: 90px; /* Wichtig: Exakte Position wie im Original */
    width: 100%;
    clear: both;
    display: block; /* Explizit block */
    z-index: 100; /* Sicherstellen dass Navigation sichtbar ist */
}

#mainnav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block; /* Nicht flex für bessere Kompatibilität */
    width: 100%;
}

#mainnav ul li {
    height: 42px;
    display: block;
    float: left;
    border-right: 1px solid #fff;
    margin: 0;
    padding: 0;
}

#mainnav ul li:last-child {
    border-right: none;
}

#mainnav ul li a,
#mainnav ul li strong {
    display: block;
    color: #fff;
    font-size: 12pt;
    padding: 10px 20px;
    text-decoration: none;
    letter-spacing: 1px;
    height: 42px;
    box-sizing: border-box;
    line-height: 22px; /* Für vertikale Zentrierung */
    transition: background-color 0.2s ease;
}

#mainnav ul li a:hover,
#mainnav ul li.active {
    background-color: #fe8607;
}

/* Clearfix für Navigation */
#mainnav::after {
    content: "";
    display: table;
    clear: both;
}

/* ========================================
   SUBMENU FIXES - UMBRUCH KORRIGIERT
   ======================================== */

/* Submenu Start - Korrekte Umbrüche */
.submenu_start {
    margin-bottom: 24px;
    overflow: hidden; /* Wichtig für Float-Clearing */
}

.submenu_start::after {
    content: "";
    display: table;
    clear: both;
}

.subsubmenu_start {
    width: 100%;
    overflow: hidden;
}

.subsubmenu_start::after {
    content: "";
    display: table;
    clear: both;
}

.subsubmenu_start a,
.subsubmenu_start span {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: block;
    width: calc(50% - 1px); /* Korrigierte Breite für 2er-Umbruch */
    margin: 0 1px 1px 0; /* Kleinere Margins */
    padding: 8px;
    text-decoration: none;
    border-top: 1px solid #fff;
    float: left;
    background: #bae4f1;
    font-size: 12px;
    color: #39748b;
    font-weight: 500;
    box-sizing: border-box; /* Wichtig! */
    transition: background-color 0.2s ease;
}

.subsubmenu_start a:nth-child(2n) {
    margin-right: 0; /* Jedes zweite Element ohne rechten Margin */
}

.subsubmenu_start a.fullsize,
.subsubmenu_start strong.fullsize {
    width: 100%;
    margin-right: 0;
}

.subsubmenu_start a:hover {
    background: #ffd9ba;
}

/* Submenu Neu Start - 4er-Umbruch */
.submenu_neu_start {
    margin-bottom: 24px;
    overflow: hidden;
}

.submenu_neu_start::after {
    content: "";
    display: table;
    clear: both;
}

.subsubmenu_neu_start {
    width: 100%;
    overflow: hidden;
}

.subsubmenu_neu_start::after {
    content: "";
    display: table;
    clear: both;
}

.subsubmenu_neu_start a,
.subsubmenu_neu_start span {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: block;
    width: calc(25% - 1px); /* 4er-Umbruch */
    margin: 0 1px 1px 0;
    padding: 8px;
    text-decoration: none;
    border-top: 1px solid #fff;
    float: left;
    background: #bae4f1;
    font-size: 12px;
    color: #39748b;
    font-weight: 500;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

.subsubmenu_neu_start a:nth-child(4n) {
    margin-right: 0; /* Jedes vierte Element ohne rechten Margin */
}

.subsubmenu_neu_start a:hover {
    background: #ffd9ba;
}

/* ========================================
   RESPONSIVE SUBMENU FIXES
   ======================================== */

/* Tablet - 2er wird zu 1er */
@media (max-width: 768px) {
    .subsubmenu_start a,
    .subsubmenu_start span {
        width: 100%;
        margin: 0 0 8px 0;
        float: none;
    }
    
    .subsubmenu_neu_start a,
    .subsubmenu_neu_start span {
        width: calc(50% - 4px);
        margin: 0 8px 8px 0;
    }
    
    .subsubmenu_neu_start a:nth-child(2n) {
        margin-right: 0;
    }
    
    .subsubmenu_neu_start a:nth-child(4n) {
        margin-right: 8px; /* Reset 4n rule */
    }
}

/* Mobile - Alles 1er */
@media (max-width: 640px) {
    .subsubmenu_neu_start a,
    .subsubmenu_neu_start span {
        width: 100%;
        margin: 0 0 8px 0;
        float: none;
    }
    
    .subsubmenu_neu_start a:nth-child(2n),
    .subsubmenu_neu_start a:nth-child(4n) {
        margin-right: 0;
    }
}

/* ========================================
   DEBUGGING & SICHTBARKEIT
   ======================================== */

/* Stelle sicher dass Navigation sichtbar ist */
#wrapper #mainnav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 42px !important;
}

/* Debug für Navigation (temporär) */
/*
.debug-nav #mainnav {
    border: 2px solid red !important;
    background: red !important;
}

.debug-nav #mainnav ul li {
    border: 1px solid yellow !important;
}

.debug-nav #mainnav ul li a {
    background: green !important;
}
*/

/* ========================================
   HEADER ANPASSUNGEN
   ======================================== */

/* Stelle sicher dass Header korrekt positioniert ist */
#header {
    position: relative;
    z-index: 10;
}

/* Logo Anpassung */
#logo {
    z-index: 5;
}

/* Header Banner */
.headerbanner {
    z-index: 3;
}

/* ========================================
   CONTAINER ANPASSUNGEN
   ======================================== */

/* Container muss Platz für Navigation lassen */
#container {
    margin-top: 0; /* Navigation übernimmt spacing */
    position: relative;
    z-index: 1;
}

/* ========================================
   SPEZIELLE KORREKTUREN
   ======================================== */

/* Falls Navigation trotzdem nicht sichtbar - Notfall-CSS */
.force-nav-visible #mainnav {
    display: block !important;
    position: relative !important;
    top: 90px !important;
    background: #39748b !important;
    height: 42px !important;
    width: 100% !important;
    z-index: 999 !important;
}

.force-nav-visible #mainnav ul {
    display: block !important;
}

.force-nav-visible #mainnav ul li {
    display: block !important;
    float: left !important;
}

.force-nav-visible #mainnav ul li a {
    display: block !important;
    color: #fff !important;
}

/* Subteaser Fixes in Grid */
.subteaser {
    width: calc(50% - 11px); /* Angepasst für 22px Gap */
    margin-bottom: 20px;
    box-sizing: border-box;
    float: left; /* Fallback */
}

.subteaser:nth-child(2n) {
    margin-right: 0;
}

/* Clearfix für Subteaser Container */
.subteaser-container::after {
    content: "";
    display: table;
    clear: both;
}

/* ========================================
   PERFORMANCE OPTIMIERUNGEN
   ======================================== */

/* GPU-Beschleunigung für Navigation */
#mainnav {
    will-change: auto;
    transform: translateZ(0);
}

/* Optimierte Transitions */
#mainnav ul li a {
    will-change: background-color;
}

.subsubmenu_start a,
.subsubmenu_neu_start a {
    will-change: background-color;
}
/*******************************************************************
 * FINALE LAYOUT-KORREKTUREN FÜR KREUZFAHRT1000.DE
 * Container Abstand und Submenu Umbruch-Probleme beheben
 *******************************************************************/

/* ========================================
   CONTAINER ABSTAND ZUR NAVIGATION
   ======================================== */

#container {
    background-color: #fff;
    margin: 0 20px;
    padding: 24px;
    margin-top: 50px; /* Wichtig: Abstand zur Navigation schaffen */
    position: relative;
    z-index: 1;
}

/* Alternative: Direkte Positionierung */
#mainnav + #container,
#mainnav ~ #container {
    margin-top: 50px;
}

/* ========================================
   SUBMENU UMBRUCH - DEFINITIVE LÖSUNG
   ======================================== */

/* Alle konfligierenden Definitionen überschreiben */
.subsubmenu_start a,
.subsubmenu_start span {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    display: block !important;
    width: calc(50% - 2px) !important; /* 2er-Umbruch mit kleinem Margin */
    margin: 0 2px 2px 0 !important;
    padding: 8px !important;
    text-decoration: none !important;
    border-top: 1px solid #fff !important;
    float: left !important;
    background: #bae4f1 !important;
    font-size: 12px !important;
    color: #39748b !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease !important;
    border-radius: 0 !important; /* Entferne border-radius für konsistente Darstellung */
}

.subsubmenu_start a:nth-child(2n) {
    margin-right: 0 !important;
}

.subsubmenu_start a.fullsize,
.subsubmenu_start strong.fullsize {
    width: 100% !important;
    margin-right: 0 !important;
}

.subsubmenu_start a:hover {
    background: #ffd9ba !important;
}

/* 4er-Umbruch für NEU START - Alle Konflikte beseitigen */
.subsubmenu_neu_start a,
.subsubmenu_neu_start span {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    display: block !important;
    width: calc(25% - 2px) !important; /* 4er-Umbruch mit kleinem Margin */
    margin: 0 2px 2px 0 !important;
    padding: 8px !important;
    text-decoration: none !important;
    border-top: 1px solid #fff !important;
    float: left !important;
    background: #bae4f1 !important;
    font-size: 12px !important;
    color: #39748b !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease !important;
    border-radius: 0 !important;
}

.subsubmenu_neu_start a:nth-child(4n) {
    margin-right: 0 !important;
}

.subsubmenu_neu_start a:hover {
    background: #ffd9ba !important;
}

/* ========================================
   SPEZIELLE GRID-ANPASSUNGEN
   ======================================== */

/* In RockSolidColumn Grid - überschreibe Grid-spezifische Regeln */
.rs-column .subsubmenu_start a,
.rs-column .subsubmenu_start span {
    width: 100% !important; /* In schmalen Spalten immer 100% */
    margin: 0 0 4px 0 !important;
    float: none !important;
}

.rs-column .subsubmenu_neu_start a,
.rs-column .subsubmenu_neu_start span {
    width: calc(50% - 2px) !important; /* In Grid max. 2er-Umbruch */
    margin: 0 2px 4px 0 !important;
    float: left !important;
}

.rs-column .subsubmenu_neu_start a:nth-child(2n) {
    margin-right: 0 !important;
}

/* ========================================
   RESPONSIVE SUBMENU - SAUBERE UMBRÜCHE
   ======================================== */

/* Large Desktop */
@media (min-width: 1200px) {
    .subsubmenu_start a,
    .subsubmenu_start span {
        width: calc(50% - 2px) !important;
    }
    
    .subsubmenu_neu_start a,
    .subsubmenu_neu_start span {
        width: calc(25% - 2px) !important;
    }
}

/* Desktop */
@media (max-width: 1199px) and (min-width: 769px) {
    .subsubmenu_start a,
    .subsubmenu_start span {
        width: calc(50% - 2px) !important;
    }
    
    .subsubmenu_neu_start a,
    .subsubmenu_neu_start span {
        width: calc(33.333% - 2px) !important; /* 3er-Umbruch auf kleineren Desktops */
    }
    
    .subsubmenu_neu_start a:nth-child(3n) {
        margin-right: 0 !important;
    }
    
    .subsubmenu_neu_start a:nth-child(4n) {
        margin-right: 2px !important; /* Reset 4n rule */
    }
}

/* Tablet */
@media (max-width: 768px) {
    .subsubmenu_start a,
    .subsubmenu_start span {
        width: 100% !important;
        margin: 0 0 4px 0 !important;
        float: none !important;
    }
    
    .subsubmenu_neu_start a,
    .subsubmenu_neu_start span {
        width: calc(50% - 2px) !important;
        float: left !important;
    }
    
    .subsubmenu_neu_start a:nth-child(2n) {
        margin-right: 0 !important;
    }
    
    .subsubmenu_neu_start a:nth-child(3n),
    .subsubmenu_neu_start a:nth-child(4n) {
        margin-right: 2px !important; /* Reset other rules */
    }
}

/* Mobile */
@media (max-width: 640px) {
    .subsubmenu_start a,
    .subsubmenu_start span,
    .subsubmenu_neu_start a,
    .subsubmenu_neu_start span {
        width: 100% !important;
        margin: 0 0 4px 0 !important;
        float: none !important;
    }
    
    /* Reset alle nth-child rules */
    .subsubmenu_neu_start a:nth-child(2n),
    .subsubmenu_neu_start a:nth-child(3n),
    .subsubmenu_neu_start a:nth-child(4n) {
        margin-right: 0 !important;
    }
}

/* ========================================
   CLEARFIX FÜR ALLE SUBMENU CONTAINER
   ======================================== */

.submenu_start,
.submenu_neu_start {
    overflow: hidden;
    margin-bottom: 24px;
}

.submenu_start::after,
.submenu_neu_start::after,
.subsubmenu_start::after,
.subsubmenu_neu_start::after {
    content: "";
    display: table;
    clear: both;
}

/* ========================================
   NAVIGATION SPACING FIXES
   ======================================== */

/* Sicherstellen dass Navigation nicht überlappt */
#mainnav {
    margin-bottom: 0;
    position: relative;
    top: 90px;
    z-index: 100;
}

/* Header-Navigation Abstand */
#header {
    margin-bottom: 0; /* Kein extra Margin */
}

/* ========================================
   DEBUGGING HILFEN
   ======================================== */

/* Temporäre Debug-Klassen */
/*
.debug-submenu .subsubmenu_start a,
.debug-submenu .subsubmenu_neu_start a {
    border: 1px solid red !important;
    background: rgba(255, 0, 0, 0.1) !important;
}

.debug-container #container {
    border: 2px solid blue !important;
    background: rgba(0, 0, 255, 0.1) !important;
}

.debug-nav #mainnav {
    border: 2px solid green !important;
    background: rgba(0, 255, 0, 0.1) !important;
}
*/

/* ========================================
   FALLBACK FÜR SCHWIERIGE FÄLLE
   ======================================== */

/* Falls immer noch Probleme bestehen - Notfall Grid */
.force-submenu-grid .subsubmenu_start,
.force-submenu-grid .subsubmenu_neu_start {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 4px !important;
    margin-bottom: 20px !important;
}

.force-submenu-grid .subsubmenu_start a,
.force-submenu-grid .subsubmenu_neu_start a {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
}

.force-submenu-grid .subsubmenu_neu_start {
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 768px) {
    .force-submenu-grid .subsubmenu_neu_start {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .force-submenu-grid .subsubmenu_start,
    .force-submenu-grid .subsubmenu_neu_start {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIERUNGEN
   ======================================== */

/* Reduziere Repaints */
.subsubmenu_start a,
.subsubmenu_neu_start a {
    will-change: background-color;
    transform: translateZ(0); /* GPU-Beschleunigung */
}

/* ========================================
   FINAL CLEANUP
   ======================================== */

/* Entferne alle widersprüchlichen margin/padding rules */
.subsubmenu_start,
.subsubmenu_neu_start {
    padding: 0;
    margin: 0;
}

.subsubmenu_start a,
.subsubmenu_neu_start a {
    min-height: 36px; /* Mindesthöhe für Touch */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}