/* ===================================================================
   Theme: Corporate Clean Travel (Helix Ultimate)
   File: theme-corporate-clean.css
   Notes:
   - Drop this file into /templates/helixultimate/css/custom/ (or load via template Custom CSS)
   - Uses CSS variables for easy theming.
   - Safe, readable contrasts (AA). Modern, light, conversion-friendly.
   =================================================================== */

:root {
  --color-bg: #F8FAFC;
  --color-primary: #0099b9;
  --color-primary-hover: #005f72;
  --color-secondary: #00AEEF;
  --color-heading: #0F172A;
  --color-text: #1E293B;
  --color-text-muted: #64748B;
  --color-block-bg: #FFFFFF;
  --color-section-bg: #EEF2F6;
  --color-footer-bg: #0F172A;
  --color-footer-text: #CBD5E1;
  --color-highlight: #FACC15;
  --color-success: #16A34A;
  --color-error: #E11D48;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-card: 0 2px 8px rgba(0,0,0,0.05);
  --shadow-card-lg: 0 10px 24px rgba(0,0,0,0.08);

  --menu-underline-offset: 30px;
  --menu-underline-height: 2px;
  --menu-underline-color: #fff;
}

body{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:18px}
h1,h2,h3{font-weight: 700}
h1{font-size:2rem}
h2{font-size:1.75rem;margin:35px 0 15px}
h3{font-size:1.5rem;margin:35px 0 15px}
h4{font-size:1.2rem;margin:25px 0 10px;font-weight:700}
h1,h2,h3,h4,h5,h6 {color: var(--color-heading);line-height: 1.2}
#sp-header{background: #0099b9!important;;color:#fff!important}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span{color:var(--color-bg)!important;font-size:1.2rem}

/* Menu underlined on larger displays */
@media (min-width: 992px){
  .sp-megamenu-parent > li > a,.sp-megamenu-parent > li > span.sp-menu-heading{position: relative;display: inline-flex;align-items: center;padding-bottom: 12px;}
  .sp-megamenu-parent > li > a::after,.sp-megamenu-parent > li > span.sp-menu-heading::after{content: "";position: absolute;left: 25%;right: 25%;bottom: var(--menu-underline-offset);height: var(--menu-underline-height);background: var(--menu-underline-color);transform: scaleX(0);transform-origin: center;transition: transform .22s ease;border-radius: 2px;z-index: 2;}
  .sp-megamenu-parent > li:hover > a::after,.sp-megamenu-parent > li:focus-within > a::after,.sp-megamenu-parent > li:hover > span.sp-menu-heading::after,.sp-megamenu-parent > li:focus-within > span.sp-menu-heading::after{transform: scaleX(1)}
  .sp-megamenu-parent > li > a[aria-current="page"]::after{transform: scaleX(1);}
  .sp-megamenu-parent > li.sp-has-child.active > span.sp-menu-heading::after{transform: scaleX(0) !important;}
}

html,body {background: var(--color-bg);color: var(--color-text);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
a{color: var(--color-primary);text-decoration: none}
a:hover,a:focus{color: var(--color-primary-hover)}
a.btn.btn-primary:hover,a.btn.btn-primary:focus{text-decoration: none;}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{background-color:#005f72;border-color:#005f72}
p.lead{color: var(--color-text);opacity: .9;font-size: 1.125rem;}

/* Offcanvas */
.offcanvas-menu, .offcanvas-menu .offcanvas-inner{background:#0099B9}
/* Menu button (Helix offcanvas) */
#offcanvas-toggler, .hamburger {
  color: var(--color-heading);
}
.offcanvas-menu .menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu>li a,
.offcanvas-menu .offcanvas-inner ul.menu>li span,
.offcanvas-menu .menu > li > a:hover   { color: #fff!important;opacity:1;font-size:1.2rem }

.offcanvas-menu .offcanvas-inner ul.menu.menu-inline{display:inline-flex}
/* Sections */
#sp-main-body{padding:50px 0}

.nomain #sp-main-body{display:none}
#sp-after-content,#sp-before-content,#sp-topics,#sp-blog{padding:30px 0}
#sp-intro{padding:75px 0}
#sp-footer{padding:0 0 50px}
#sp-menu{margin-right:-15px;}
/* Utility */
.muted { color: var(--color-text-muted) !important; }
.bg-section { background: var(--color-section-bg) !important; }
.bg-block { background: var(--color-block-bg) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.rounded { border-radius: var(--radius-md) !important; }
.shadow-card { box-shadow: var(--shadow-card) !important; }
.article-list .article .article-header h1 a:hover, .article-list .article .article-header h1 a:active, .article-list .article .article-header h1 a:focus, .article-list .article .article-header h2 a:hover, .article-list .article .article-header h2 a:active, .article-list .article .article-header h2 a:focus{color:#005f72}
/* ===== Header / Navbar (Helix Ultimate) ===== */
/* Helix Ultimate common selectors */
.header,
.sp-header,
#sp-header {
  background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(15,23,42,0.06);
  height:80px;
}
@media(max-width:767px){
  #sp-header{height:60px}
  body.ltr #offcanvas-toggler.offcanvas-toggler-right{margin-right:20px}
  .burger-icon>span{background-color:#fff}
}
#sp-header .logo a,
#sp-header .logo img { display: inline-block; }

/* Topbar */
#sp-top-bar{background:#fff;color:var(--color-text);font-size:1.1rem;height:45px}
#sp-top-bar a{color:var(--color-text)}
#sp-top-bar a:hover{color:#0099B9}
#sp-top-bar p{margin:0}

/* Main menu */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  color: var(--color-heading);
  font-weight: 600;
}
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a {
  color: var(--color-primary);
}

/*.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner{background:var(--color-primary)}*/
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge),.sp-megamenu-parent .sp-mega-group>li>a{font-size:1.2rem;text-transform:none}


/* Dropdown näher an den Menüpunkt + kleinerer Pointer */
.sp-megamenu-parent > li > .sp-dropdown{
  margin-top: -12px;                 /* vorher z.B. 14px – kleiner = näher dran */
  --arrow-size: 10px;              /* Dreieck etwas kleiner (vorher 12px) */
  --arrow-bg: #fff;
  --arrow-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* Dreieck oben mittig */
.sp-megamenu-parent > li > .sp-dropdown::before{
  content:"";
  position:absolute;
  top: -7px;  /* sitzt direkt an der Oberkante */
  /*left: 50%;*/
  right: 22px;
  transform: translateX(-50%) rotate(45deg);
  width: calc(var(--arrow-size) * 1.6);
  height: calc(var(--arrow-size) * 1.6);
  background: var(--arrow-bg);
  border-radius: 2px;
}

/* Mobile Offcanvas ohne Pointer */
@media (max-width: 991.98px){
  .sp-megamenu-parent > li > .sp-dropdown::before{ display:none; }
}



/* UL horizontal, keine Bullets */
ul.menu-inline{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;          /* darf umbrechen */
  align-items: center;
}

/* LI nebeneinander */
ul.menu-inline > li{
  display: inline-flex;
  align-items: center;
}

/* Trenner „|“ zwischen den Punkten (nicht vor dem ersten) */
ul.menu-inline > li + li::before{
  content: "|";
  margin: 0 .6rem;          /* Abstand zum Text links/rechts */
  color: #94a3b8;           /* dezent; ggf. anpassen */
  opacity: .7;
}

/* Links neutral stylen */
ul.menu-inline a{
  text-decoration: none;
  color: inherit;
  padding: .25rem 0;
}
ul.menu-inline a:hover{
  color: var(--color-primary, #0078d7);
}

/* Optional: auf sehr kleinen Screens Trenner kleiner */
@media (max-width: 480px){
  ul.menu-inline > li + li::before{ margin: 0 .4rem; opacity: .5; }
}
ul.menu-inline li a{font-weight:400;font-size:1.1rem}

/* Offcanvas: .menu-inline auch hier horizontal erzwingen */
.offcanvas-inner ul.menu.menu-inline{
  display:flex;
  flex-direction: row;      /* statt column */
  flex-wrap: wrap;
  align-items: center;
}

/* Trenner wie oben */
.offcanvas-inner ul.menu.menu-inline > li{
  display:inline-flex; align-items:center;
}
.offcanvas-inner ul.menu.menu-inline > li + li::before{
  content:"|"; margin:0 .6rem; color:#94a3b8; opacity:.7;
}

/* Links neutral */
.offcanvas-inner ul.menu.menu-inline a, #sp-footer-top ul.menu.menu-inline a{
  text-decoration:none; color:inherit; padding:.4rem 0;font-size:0.9rem!important
}
#sp-footer-top ul.menu.menu-inline a{font-weight:700}

.offcanvas-inner ul.menu.menu-inline a:hover{
  color: var(--color-primary, #0078d7);
}

/* Untermenüs im Offcanvas trotzdem vertikal lassen */
.offcanvas-inner ul.menu.menu-inline > li > ul.menu-child{
  display:flex; flex-direction:column; gap:0; margin:.25rem 0 0 0; padding-left:0;
}
.offcanvas-inner ul.menu.menu-inline > li > ul.menu-child > li + li::before{ content:none; }
.offcanvas-inner ul.menu.menu-inline > li.menu-deeper > .nav-header .menu-toggler{ margin-left:.4rem; }

.marginbottom{margin:0 0 25px!important}

/* ===== Buttons ===== */
.btn, button, .sppb-btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: all .2s ease;
}
.btn-primary, .sppb-btn-primary, .btn.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}
.btn-primary:hover, .sppb-btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.btn-outline-primary {
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Secondary accent (e.g. island badges) */
.badge, .label {
  border-radius: 999px;
  padding: .25rem .55rem;
  font-weight: 600;
}
.badge-accent {
  background: var(--color-secondary);
  color: #fff;
}


.view-category.layout-blog.offers #sp-main-body{ display:none; }

/* Modules */
#sp-left .sp-module, #sp-right .sp-module{margin-top:0}
/* ===== Forms / Search module ===== */
input[type="text"], input[type="email"], input[type="number"],
input[type="search"], select, textarea, .form-control {
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: var(--color-text);
  transition: box-shadow .2s ease, border-color .2s ease;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,120,215,.15);
  outline: none;
}

/* Inline filter chips */
.filter-chip {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-weight: 600;
  color: var(--color-heading);
}
.filter-chip.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ===== Cards (Deals) ===== */
.card, .sppb-addon, .moduletable.deals, .deal-card {
  background: var(--color-block-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card:hover, .deal-card:hover { box-shadow: var(--shadow-card-lg); transform: translateY(-2px); }

.deal-card .deal-media img {
  width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover;
}
.deal-card .deal-body { padding: 14px 16px; }
.deal-card .deal-meta { color: var(--color-text-muted); font-size: .9rem; }
.deal-card .price { font-size: 1.25rem; font-weight: 800; color: var(--color-heading); }
.deal-card .cta { margin-top: .5rem; }

/* Micro-badges (FOMO) */
.badge-deal { background: var(--color-highlight); color: #1f2937; }
.badge-danger { background: var(--color-error); color: #fff; }
.badge-success { background: var(--color-success); color: #fff; }

/* ===== Sections ===== */
.section-divider {
  background: var(--color-section-bg);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.section-title {
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  font-weight: 800;
  margin-bottom: 16px;
}

/* Sticky filter/sort bar */
.sticky-filters {
  position: sticky;
  top: 68px; /* adjust to your header height */
  z-index: 110;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(15,23,42,0.06);
  padding: .5rem 0;
}

/* ===== Breadcrumbs ===== */
.breadcrumb {
  background: transparent;
  margin-bottom: .75rem;
}
.breadcrumb .active { color: var(--color-text-muted); }

/* ===== Alerts / Notices ===== */
.alert-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.alert-danger  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.alert-info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* ===== Footer ===== */
#sp-footer, .footer, #sp-bottom {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}
#sp-footer a, .footer a, #sp-bottom a { color: var(--color-footer-text); }
#sp-footer a:hover, .footer a:hover, #sp-bottom a:hover { color: var(--color-secondary); text-decoration: underline; }

/* ===== Tables (e.g. price breakdown) ===== */
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid #E5E7EB; padding: .65rem .75rem; }
th { color: var(--color-heading); background: #F9FAFB; text-align: left; }

/* ===== Responsive tweaks ===== */
@media (max-width: 991.98px) {
  .sticky-filters { top: 60px; }
  .sp-megamenu-parent > li > a { padding: .75rem .5rem; }
}
@media (max-width: 575.98px) {
  .deal-card .price { font-size: 1.1rem; }
  .section-divider { padding: 16px; }
}

/* ===== Optional: helper classes to map Joomla module positions ===== */
.position-hero { }
.position-search { }
.position-filter { }
.position-deals { }
.position-content { }
.position-text { }
.position-footer { }

/* ==== Hero ==== */
.hero-section {
  position: relative;
  /*min-height: 65vh;*/
  min-height: clamp(400px, 50vh, 600px); /* responsive Höhe */
  background: url('../../../images/hero/last-minute-kanaren.jpg') center center / cover no-repeat;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(0, 48, 96, 0.55), rgba(0, 80, 140, 0.35));
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 2rem;
}

.hero-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #fff;
}

.hero-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  color: rgba(255,255,255,0.9);
}

.hero-search {
  max-width: 580px;
  margin: 0 auto;
}

@media (max-width: 767.98px) {
  .hero-section {
    min-height: 55vh;
    background-position: center top;
  }
  .hero-title { font-size: 1.8rem; }
}

/* ==== Offers ==== */
#sp-offers{position:relative;z-index:3;margin-top:-100px}
@media(max-width:767px){
  #sp-offers .offers-box #ypsnet-ibe{height:1715px}
}
@media(min-width:768px){
  #sp-offers .offers-box #ypsnet-ibe{height:400px}
}
.offers-box .hotelname{font-size: 100px!important;}
/* Inselwelten */
/*.island-section { margin-top: 40px; }*/
.island-section .container{padding:0}
.island-card {
  display: block;
  background: var(--color-block-bg);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
  color: inherit;
}
.island-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-lg); }

.island-media { position: relative; display: block; }
.island-media img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.island-badge {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--color-primary); color: #fff;
  font-weight: 700; font-size: .85rem;
  padding: .35rem .6rem; border-radius: 0px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.island-body { display: block; padding: 12px 14px 14px; }
.island-title { display:block; font-weight: 700; color: var(--color-heading); }
.island-meta  { display:block; font-size:.9rem; color: var(--color-text-muted); }

/* Abstand zur nächsten Sektion */
.island-section + section { margin-top: 48px; }

@media (max-width: 575.98px){
  .island-badge { font-size:.8rem; padding:.3rem .55rem; }
}

.faq-section .accordion { max-width: 880px; margin: 0 auto; }
.trust-section p { color: var(--color-heading); font-weight: 600; }
.seo-text h2, .seo-text h3 { margin-bottom: .5rem; }




.offers #ypsnet-ibe,#sp-position2 #ypsnet-ibe{margin-left:-15px;margin-right:-15px}
.ibe-container{background: #fff;padding:0 30px;border-radius:5px}
.intro-callout{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; border-radius:.2rem;
  background: color-mix(in srgb, var(--color-primary, #0078d7) 6%, #fff);
  border:1px solid color-mix(in srgb, var(--color-primary, #0078d7) 18%, #fff);
  margin: 25px 0;
}
.intro-callout .ico{
  width:20px; height:20px; flex:0 0 20px; margin-top:2px;
  fill: currentColor; color: #0f172a33; /* dezent */
}
@media (max-width:575.98px){ .intro-callout{ padding:10px 12px; } }



/* Grundstil des H1 (wie zuvor) */
.offers .page-title,.subheading-category{
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-heading, #0f172a);
  margin: 0 0 8px;
  /*max-width: 42ch;*/
}

/* Balken links am Titel */
/*:root{
  --title-bar-w: 6px; */           /* Breite des Balkens */
 /* --title-bar-r: 6px;   */         /* Rundung */
/*}

.offers .page-title--bar,.subheading-category{
  position: relative;
  padding-left: calc(var(--title-bar-w) + 12px); *//* Platz für Balken */
/*}*/

/*.offers .page-title--bar::before,.subheading-category::before,.offers h2::before{
  content: "";
  position: absolute;
  left: 0;
    top: 0.2em;
  bottom: 0.15em;
  width: var(--title-bar-w);
  background: var(--color-primary, #0078d7);
  border-radius: var(--title-bar-r);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary, #0078d7) 25%, transparent);
}*/

:root{
  --title-bar-w: 6px;
  --title-bar-r: 6px;

}

/* Die Überschriften, die den Balken bekommen, müssen relativ positioniert sein */
.offers .page-title--bar,
.offers .subheading-category,
.offers h2{
  position: relative;
  padding-left: calc(var(--title-bar-w) + 10px);
}

/* Pseudo-Element NUR in .offers, mit fixer Höhe statt top/bottom */
.offers .page-title--bar::before,
.offers .subheading-category::before,
.offers h2::before{
  content: "";
  position: absolute;
  left: 0;
  top: .22em;                  /* leicht einge­rückt */
  height: 0.9em;               /* fixe Höhe → keine Vollhöhe mehr */
  width: var(--title-bar-w);
  background: var(--color-primary);
  border-radius: var(--title-bar-r);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* Mobil etwas schmaler */
@media (max-width: 575.98px){
  :root{ --title-bar-w: 4px; }
}

.offers-seo h2{ margin-bottom:.5rem }
.container.offers-seo{max-width:880px;margin:0 auto}
.offers-seo .accordion{ max-width: 880px; margin: 0; }

/* ==== Blog ==== */
.view-article.layout-blog figure{margin:35px 0}
.view-article.layout-blog img{margin:35px 0}
.view-article.layout-blog figure > img{
  margin:0;                /* verhindert doppelten Abstand */
}
.view-article.layout-blog h2{margin:35px 0 15px}
.view-article.layout-blog h3{margin:40px 0 15px}
.view-article.layout-blog figure figcaption {
    font-style: italic;
    text-align: center;
    padding: 5px 0 0;
}
.blog .category-desc{background:#fff;padding:20px;margin-bottom:25px}
.view-category.layout-blog .article-details,.view-article.layout-blog .article-details{background:#fff;padding:50px;max-width:800px}
@media(max-width:767px){
  .view-category.layout-blog .article-details,.view-article.layout-blog .article-details{margin:-50px auto 0;padding:25px!important}
  .article-details .article-header h1, .article-details .article-header h2{font-size:2rem}
  h2{font-size:1.65rem}
  #sp-right .sp-module-content .mod-articles-items
}
@media(min-width:768px){
  .view-category.layout-blog .article-details,.view-article.layout-blog .article-details{margin:-115px auto 0}
}
.view-category.layout-blog .article-details .article-full-image img,.view-article.layout-blog .article-details .article-full-image img{display:block;width:1600px}
.view-category.layout-blog .article-details .article-header h1.view-article.layout-blog .article-details .article-header h1{font-size:2rem}

.view-category.layout-blog .article{background:#fff}
.view-category.layout-blog .article-list strong{font-weight: normal;}
.mod-articles-items.mod-list .mod-articles-item{font-size:0.9rem}
.mod-articles-items.mod-list .mod-articles-link{font-size:1rem;font-weight:500}
/*.mod-articles-items.mod-list .mod-articles-item:not(first-child){margin:15px 0 0}*/
.listright ul.mod-articles-items.mod-list li:not(:first-child){margin-top:15px}
.listright ul.mod-articles-items.mod-list li{padding-bottom:15px}
ul.mod-articles-items.mod-list li strong{font-weight:normal}
.view-article.layout-blog .mod-articles-items.mod-list img{margin:15px 0}
#sp-right .sp-module-title{font-size:1.2rem!important;margin:0!important}
#sp-left .sp-module ul>li, #sp-right .sp-module ul>li {border-bottom: 1px solid #0099b9}
.nobullets .mod-articles-items{list-style: none;padding-left:0}

.mod-articles-item .article-intro-image img{margin:15px 0}

#sp-left .sp-module, #sp-right .sp-module{border:none}

/* 1) Container als Flex-Spalte */
.home-articles .mod-articles-item .mod-articles-item-content{
  display:flex;
  flex-direction: column;
}

/* 2) Erst allen direkten Kindern eine hohe Grund-Reihenfolge geben */
.home-articles .mod-articles-item .mod-articles-item-content > *{
  order: 10;
}

/* 3) Wunsch-Reihenfolge explizit setzen: Bild -> Titel -> Intro -> Weiterlesen */
.home-articles .mod-articles-item .article-intro-image{ order: 0 !important; margin: 0 0 .5rem 0; }
.home-articles .mod-articles-item .mod-articles-title{ order: 1 !important; margin: .25rem 0 .35rem; }
.home-articles .mod-articles-item .mod-articles-item-content > p{ order: 2 !important;font-size:1rem }
.home-articles .mod-articles-item .readmore{ order: 3 !important; margin-top:.4rem; }

/* 4) Float des Bildes sicher neutralisieren + Bild styling */
.home-articles .mod-articles-item .article-intro-image.float-mod-articles-image{
  float:none !important;
  width:100%;
}
.home-articles .mod-articles-item .article-intro-image img{
  display:block; width:100%; height:auto; object-fit:cover;
}

/* optional: Titel-Link kräftiger */
.home-articles .mod-articles-item .mod-articles-title a{
  text-decoration:none; font-size:1.1rem;font-weight:600;margin:0 0 5px;
}

:root{
  --card-radius: 4px;
  --card-line: #E2E8F0;
  --card-shadow: 0 8px 24px rgba(2,8,23,.06);
  --card-shadow-hover: 0 14px 32px rgba(2,8,23,.10);
  --primary:#0099B9;
}

/* Grid der Items – flexibel statt starres grid-cols-4 */
.home-articles .mod-articles-items{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Card-Grundform */
.home-articles .mod-articles-item{
  background:#fff;
  border:1px solid var(--card-line);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  height:100%;
  overflow:hidden;                /* damit Bild oben sauber „einrastet“ */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-articles .mod-articles-item:hover{
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: color-mix(in srgb, var(--primary) 20%, var(--card-line));
}

/* Bild oben, volle Breite, 3:2 und abgerundet */
.home-articles .mod-articles-item .article-intro-image{
  order:0 !important; margin:0; width:100%; /* Reihenfolge kam vorher schon */
}
.home-articles .mod-articles-item .article-intro-image img{
  display:block; width:100%; height:auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin:0 0 5px;
}

/* Innenabstände wie bei Insel-Cards */
.home-articles .mod-articles-item .mod-articles-item-content{
  display:flex; flex-direction:column;
  /*padding:12px 14px 14px;*/
}

/* Titel-styling + 2-Zeilen-Clamp */
.home-articles .mod-articles-item .mod-articles-title{ order:1 !important; margin:.55rem 0 .35rem; padding:0 14px}
.home-articles .mod-articles-item .mod-articles-title a{
  text-decoration:none; font-weight:700; line-height:1.2; color:#0f172a;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
}
.home-articles .mod-articles-item .mod-articles-title a:hover{ color: var(--primary); }

/* Intro auf 3 Zeilen beschränken */
.home-articles .mod-articles-item .mod-articles-item-content > p{
  order:2 !important; color:#475569; margin:0;
  display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;padding:0 14px;
}

/* Weiterlesen als leichter Ghost-Button (passt zu deinen restlichen Links) */
.home-articles .mod-articles-item .readmore{
  order:3 !important; margin-top:.6rem;
}
.home-articles .mod-articles-item .readmore a{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .7rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--primary) 35%, #0000);
  color:#0f172a; text-decoration:none; font-weight:700;
  margin:5px 14px 20px
}
.home-articles .mod-articles-item .readmore a::after{
  content:"\f061"; font: var(--fa-font-solid); font-size:.9em; transform:translateX(0);
  transition: transform .18s ease;
}
.home-articles .mod-articles-item .readmore a:hover{
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  border-color: color-mix(in srgb, var(--primary) 55%, #0000);
}
.home-articles .mod-articles-item .readmore a:hover::after{ transform: translateX(2px); }

/* Sicherheitsnetz: ursprüngliche Reorder-Logik (falls noch nicht drin) */
.home-articles .mod-articles-item .mod-articles-item-content > *{ order:10 }
.home-articles .mod-articles-item .article-intro-image{ order:0 !important }
.home-articles .mod-articles-item .mod-articles-title{ order:1 !important }
.home-articles .mod-articles-item .mod-articles-item-content > p{ order:2 !important }
.home-articles .mod-articles-item .readmore{ order:3 !important }

/* Responsive: auf XS die Gitterlücke etwas kleiner */
@media (max-width:575.98px){
  .home-articles .mod-articles-items{ gap:12px; }
}



.affiliateinfo {
    font-size: 13px;
    margin-bottom: 15px;
}
.affiliate img{margin:15px 0!important}
.affiliate_buttons{text-align: center;padding:0}

.notice-transparency{
  display:flex; gap:.5rem; align-items:center;
  padding:.6rem .8rem; border:1px solid #E2E8F0; border-radius:8px; background:#fff;
  font-size:.9rem; color:#334155; margin-bottom:12px;
}
.textbox{background:#fff;padding:25px}
.textbox h2{margin:0 0 15px}

/* Vertikaler Trenner links vor "Blog" */
.sp-megamenu-parent > li a.menu-divider{
  border-left: 1px solid rgba(255, 255, 255, 1); /* Header auf Türkis */
  margin-left: 12px;
  padding-left: 22px;}

/* Falls euer Header hell ist, nimm eine dunklere Linie: */
/* .sp-megamenu-parent > li.menu-blog{ border-left:1px solid rgba(15,23,42,.2); } */

/* In der mobilen Offcanvas-Navi keinen Trenner zeigen */
@media (max-width: 991.98px){
  .sp-megamenu-parent > li a.menu-divider{ border-left: 0; margin-left: 0; }
}

#sp-top-bar{font-size:0.9rem}


:root{
  --c-primary:#0aaabb;      /* dein Türkis */
  --c-text:#0f172a;
  --c-muted:#64748b;
  --c-line:#E2E8F0;
  --radius:14px;
  --shadow:0 8px 24px rgba(2,8,23,.06);
}

/* Abschnittbreite & Grundtypografie */
.offerinfo{max-width:980px;margin:28px auto 40px;line-height:1.65;color:var(--c-text)}
.offerinfo .lead{font-weight:normal;margin:.4rem 0 1.2rem}

/* Akzent-Überschrift mit kleinem Balken */
.offerinfo .title{font-size:1.6rem;margin:0 0 .75rem;position:relative}
.offerinfo .title span{padding-left:14px;display:inline-block}
.offerinfo .title span::before{
  content:"";position:absolute;left:0;top:.22em;width:4px;height:1.1em;background:var(--c-primary);border-radius:2px;
}

/* Grid / Karten */
.offerinfo .grid{display:grid;gap:16px;margin:10px 0 18px}
@media(min-width:992px){ .copy-grid{grid-template-columns:1fr 1fr} }
.offerinfo .card{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;
}
.offerinfo .h4{font-size:1.1rem;margin:.2rem 0 .4rem}
.offerinfo .h5{font-size:1rem;margin:.2rem 0 .25rem}

.offerinfo h3{margin-top:0}
/* Iconliste (kleine Inline-SVGs per CSS) */
.offerinfo .iconlist{list-style:none;margin:0;padding:0}
.offerinfo .iconlist li{display:flex;gap:.5rem;align-items:flex-start;margin:.4rem 0}
.offerinfo .i{flex:0 0 18px;height:32px;opacity:.9}
.offerinfo .i-fire{background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%230aaabb'%3E%3Cpath d='M13.5 0s.5 2.5-1.5 5c-1.2 1.3-1.8 2.2-1.9 3.6C9.9 6.9 8 5.1 8 5.1S7.2 9.4 9.6 12c2 2.1 1.4 4.3.6 5.3-.8 1-2.4 1.4-3.8.5C4.4 16.7 3 14.6 3 12 3 7.6 6.5 4.2 10.9 2.6 12.4 2 13.5 0 13.5 0z'/%3E%3C/svg%3E");}
.offerinfo .i-grape{background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230aaabb'%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Ccircle cx='8' cy='7.5' r='2'/%3E%3Ccircle cx='12' cy='8.5' r='2'/%3E%3Ccircle cx='16' cy='7.5' r='2'/%3E%3Ccircle cx='9.5' cy='12' r='2'/%3E%3Ccircle cx='14.5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='16' r='2'/%3E%3C/svg%3E");}
.offerinfo .i-beach{background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230aaabb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 19c3 0 3-2 6-2s3 2 6 2 3-2 6-2 3 2 6 2'/%3E%3Cpath d='M9 11c0-3.3 2.7-6 6-6 1.5 0 2.9.6 4 1.5'/%3E%3C/svg%3E");}
.offerinfo .i-sun{background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230aaabb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E");}
.offerinfo .i-hotel{background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230aaabb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V7a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v14M3 21h18M7 10h2M11 10h2M7 14h2M11 14h2'/%3E%3C/svg%3E");}
.offerinfo .i-clock{background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230aaabb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");}

/* Callout */
.offerinfo .callout{
  background:#F8FAFC;border:1px dashed var(--c-line);border-radius:var(--radius);
  padding:14px 16px;color:#334155
}
.offerinfo .callout .inline-link{color:var(--c-primary);text-decoration:none}

/* FAQ (native <details>) */
.offerinfo .faq{margin:8px 0 18px;border:1px solid var(--c-line);border-radius:var(--radius);padding:10px 12px;background:#fff}
.offerinfo .faq > summary{cursor:pointer;font-weight:700;color:#0f172a;list-style:none}
.offerinfo .faq-grid{display:grid;gap:10px;margin-top:8px}
@media(min-width:768px){ .faq-grid{grid-template-columns:1fr 1fr 1fr} }

/* CTA */
.offerinfo .cta-wrap{margin-top:8px;text-align:center}
.offerinfo .btn.btn-primary{background:var(--c-primary);border:none;border-radius:999px;padding:.8rem 1.2rem;color:#fff;text-decoration:none;display:inline-block}
.offerinfo .btn.btn-primary:hover{opacity:.92}

#sp-top2 a{color:#000;font-size:1.11rem}
/* Nur das ::before rendert als FA6 solid */
#sp-top2 .sp-column a.has-ico::before{
  font: var(--fa-font-solid);      /* nimmt Family + Weight aus FA6 */
  display:inline-block;
  margin-right:.45rem;
  vertical-align:0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: currentColor;
  speak: none;
  text-rendering: auto;
}

/* konkrete Icons (FA6 Codes) */
#sp-top2 .sp-column a.icon-blog::before  { content:"\f044";color:#80a721}  /* newspaper */
#sp-top2 .sp-column a.icon-infos::before { content:"\f129";color:#80a721 }  /* circle-info */

/* Linktext selbst: normale Schrift lassen */
#sp-top2 .sp-column a.has-ico{
  font-family: inherit !important;
  font-weight: inherit;
}

.pagination>.active>a, .pagination>.active>span,
.pagination>.active>a:hover, .pagination>.active>a:focus, .pagination>.active>span:hover, .pagination>.active>span:focus{border-color:#0099b9;background-color:#0099b9;color:#fff}
:root{ --main:#93a8c9; }

:root{
  --main:#0099B9;
  --topbar-bg:#E9F7FB;      /* oder #DFF4F9 */
  --topbar-line:#D4EEF5;
  --accent-warm:#FFD97A;    /* für Badges/Chips */
  --accent-warm-tint:#FFF4D6;
}

#sp-top-bar{
  background: var(--topbar-bg);
  border-bottom:1px solid var(--topbar-line);
}

.topbar-badge{
  background: var(--accent-warm);
  color:#1f2937;
  border-radius:999px;
  padding:.15rem .5rem;
  font-weight:700;
  font-size:.8rem;
}


/* Kategorie-Übersicht */
body.com-content.view-category.layout-blog .readmore{
  margin-top:.6rem;
  font-size:1rem;
}

body.com-content.view-category.layout-blog .mod-articles-item .readmore{
  font-size:0.8rem;
}

body.com-content.view-category.layout-blog .readmore a{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .55rem; border-radius:8px;
  color: var(--primary, #0099B9); text-decoration:none; font-weight:700;

}
body.com-content.view-category.layout-blog  .mod-articles-item  .readmore a{padding:0}
  body.com-content.view-category.layout-blog .readmore a::after{
  content:"\f061"; font: var(--fa-font-solid); /* Font Awesome 6 */
  font-size:0.9em; transform: translateX(0); transition: transform .18s ease;
  margin-top:6px
}
body.com-content.view-category.layout-blog .readmore a:hover{
  background: rgba(0,153,185,.08);
}
body.com-content.view-category.layout-blog .mod-articles-item .readmore a:hover{
  background: none}
body.com-content.view-category.layout-blog .readmore a:hover::after{
  transform: translateX(2px);
}
  body.com-content.view-category.layout-blog .mod-articles-item .readmore a::after{content:none}


  .kanaren-tabs button {
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    background: #f9f9f9;
    cursor: pointer;
}

.kanaren-klima-tab .row.header {
    font-weight: bold;
    background-color: #f0f0f0;
}

.kanaren-klima-tab .row {
    display: flex
;
    border-bottom: 1px solid #ddd;
    padding: 0.5rem 0;
}
.kanaren-klima-tab .row > div {
    flex: 1;
    text-align: center;
}

.blog .article-list.articles-leading .article-intro-image img{width:960px}
.blog .article-list.articles-leading h2{font-size:1.85rem;max-width: 50ch}

#sp-footer, .footer, #sp-bottom{background:var(--color-bg);}
#sp-bottom{border-top:1px solid #eee;max-width:1320px;margin:0 auto;color:#252525;font-size:1rem}
#sp-footer a, .footer a, #sp-bottom a,#sp-bottom .sp-module .sp-module-title,#sp-footer{color:#252525}
#sp-bottom .sp-module .sp-module-title{font-size:1.1rem;margin:0 0 18px}
#sp-footer,#sp-footer-top{font-size:0.9rem}
#sp-footer a{font-weight:700}
/*#sp-footer-top{text-align:center}*/

:root{
  --gap-lg: 50px;          /* mehr Luft zwischen Spalten/Cards */
  --card-r: 4px;
  --card-b: #E2E8F0;
  --shadow: 0 8px 24px rgba(2,8,23,.06);
  --shadow-h: 0 14px 32px rgba(2,8,23,.10);
  --primary:#0099B9; --accent:#80A721;
  --muted:#64748b; --ink:#0f172a;
}

/* Titelbalken bleibt wie zuvor */
.home-intro .sec-title,.bottom-intro .sec-title,.sec-title{font-size:1.6rem;margin:0 0 .7rem;position:relative}
.home-intro .sec-subtitle{font-size:1.6rem;margin:2rem 0 .7rem;position:relative}
.home-intro .sec-title span,.home-intro .sec-subtitle span,.bottom-intro .sec-title span,.sec-title span{padding-left:14px}
.home-intro .sec-title span::before,.home-intro .sec-subtitle span::before,.bottom-intro .sec-title span::before,.sec-title span::before{content:"";position:absolute;left:0;top:.22em;width:4px;height:1.1em;background:var(--primary);border-radius:2px}

/* Grid: mehr Abstand */
.home-intro__grid{display:grid;gap:var(--gap-lg)}
@media(min-width:992px){
  .home-intro__grid{grid-template-columns:1.1fr .9fr}
}
.home-intro .lead{color:var(--muted);font-size:1.05rem}

/* Tipp-Box */
.callout.tip{margin-top:12px;background:#F8FAFC;border:1px dashed var(--card-b);border-radius:12px;padding:12px 14px;color:#334155}

/* Rechte Spalte: zwei Cards gestapelt mit Abstand */
.home-intro__stack{display:grid;gap:var(--gap-lg)}
.mini-card{
  background:#fff;border:1px solid var(--card-b);border-radius:var(--card-r);
  box-shadow:var(--shadow);padding:14px 22px;transition:transform .18s, box-shadow .18s, border-color .18s
}
.mini-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-h);border-color:color-mix(in srgb,var(--primary) 22%, var(--card-b))}
.mini-card .h4{margin:.2rem 0 .5rem;font-size:1.08rem}

/* Steps und Checks wie zuvor */
.steps{counter-reset:s;list-style:none;padding:0;margin:.1rem 0}
.steps li{counter-increment:s;position:relative;padding-left:36px;margin:.35rem 0}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:.2rem;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:.85rem;
  background:color-mix(in srgb,var(--primary) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--primary) 45%,#fff);color:var(--primary)
}
.checks{list-style:none;padding:0;margin:.1rem 0 0}
.checks li{position:relative;padding-left:28px;margin:.35rem 0}
.checks li::before{content:"\f00c";font:var(--fa-font-solid);color:var(--accent);position:absolute;left:0;top:.4rem;font-size:.95rem}

/* Modul als Card (falls nicht schon .as-card aktiv) */
.sp-module.home-intro{border:1px solid var(--card-b);border-radius:var(--card-r);box-shadow:var(--shadow)}
.sp-module.home-intro .sp-module-title{display:none}
.sp-module.home-intro .sp-module-content{padding:16px 18px 18px}

.mini-card h3{margin:5px 0 20px}
.home-intro img{border-radius:3px}

.topics .sec-title{margin:0 0 .6rem;position:relative}
.topics .sec-title span{padding-left:14px}
.topics .sec-title span::before{content:"";position:absolute;left:0;top:.22em;width:4px;height:1.1em;background:#0099b9;border-radius:2px}

.topics-grid{display:grid;gap:16px}
#sp-infos{padding:50px 0}
@media(max-width:767px){
  .offers #sp-infos{padding:25px 0}
  .offers .page-title, .subheading-category{font-size:1.7rem}
  .home-intro .sec-title, .bottom-intro .sec-title{font-size:1.5rem}
  .home-intro  h3{font-size:1.4rem}
  .home-intro__stack{display:grid;gap:20px}
  .home-intro__col.home-intro__stack{margin-top:-30px}
  #sp-infos,#sp-blog{padding:0}
  #sp-intro{padding:50px 0 15px}
  #sp-after-content{padding:0 0 30px}
  #sp-main-body{padding:15px 0}
  .view-category.layout-blog .article-details, .view-article.layout-blog .article-details{padding:50px 25px}
}
@media(min-width:768px){.topics-grid{grid-template-columns:repeat(4,1fr)}}

.topic{
  display:block;background:#fff;border:1px solid #E2E8F0;border-radius:var(--radius);
  padding:20px;text-decoration:none;color:#0f172a;transition:transform .15s, box-shadow .15s, border-color .15s
}
.topic:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#cfe7ee}
.topic-ico{font-size:22px;line-height:1;margin-bottom:6px}
.topic-title{font-weight:700;margin-bottom:4px}
.topic p{color:#64748b;margin:0}
.container.my-4.topics{padding-left:0;padding-right:0}

:root{
  --radius: 4px;
  --card-b: #E2E8F0;
  --shadow: 0 8px 24px rgba(2,8,23,.06);
  --shadow-h: 0 14px 32px rgba(2,8,23,.10);
}

/* Beliebte Reisethemen – Card-Optik angleichen */
.topics .topic{
  border: 1px solid var(--card-b);
  border-radius: var(--radius);
  box-shadow: var(--shadow);                 /* Grundschatten wie bei den anderen */
  background:#fff;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.topics .topic:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-h);               /* etwas mehr Tiefe beim Hover */
  border-color: color-mix(in srgb, #0099B9 22%, var(--card-b));
}

/* (optional) wenn du es super clean willst: Grundschatten weglassen, nur Hover
.topics .topic{ box-shadow:none }
.topics .topic:hover{ box-shadow:var(--shadow-h) }
*/

@media (prefers-reduced-motion: reduce){
  .topics .topic{ transition:none }
}

.mb{margin-bottom:35px}
a.topic{text-decoration:none}
.topic > p{font-size:1rem}

.bottom-intro.container{padding-left:0;padding-right:0}

.layout-blog .article-header h1{margin-bottom:15px}

#sp-right .sp-module.offerslist{padding:23px}


body.ltr .sp-megamenu-parent>li.sp-has-child>a:after, body.ltr .sp-megamenu-parent>li.sp-has-child>span:after{content:''}

/* Zwei Spalten nur wenn die Sidebar unter dem Content vollbreit läuft */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Ziel: das Modul mit unserem Suffix */
  .two-cols .mod-list,
  .two-cols .mod-articleslatest,
  .two-cols ul { /* je nach Output-Klasse */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px; /* Abstand zwischen Kacheln */
    list-style: none; /* falls <ul> */
    padding: 0;
    margin: 0;
  }

  /* Einzelne Listeneinträge */
  .two-cols .mod-list > li,
  .two-cols .mod-articleslatest > li,
  .two-cols ul > li {
    margin: 0; /* Standardabstände neutralisieren */
  }

  /* Links/Bilder flächig klicken lassen */
  .two-cols li > a {
    display: block;
  }

  .two-cols ul.mod-articles-items.mod-list li {
    margin-top: 15px;
}
 .sp-module.two-cols ul li:nth-child(3){border:none!important}
 .sp-module.md-col2{width:50%} 
}
@media(max-width:767px){
  .hide-sm{display:none}
}
@media(min-width:768px) and (max-width:991px){
  .hide-md{display:none}
}
@media(min-width:992px){
  .hide-lg{display:none}
}


.affiliate-col2 {
  display: flex;
  flex-wrap: wrap;   /* bricht auf kleineren Screens um */
  gap: 36px;
}

/* Die zwei Spalten */
.affiliate-col2 > .affiliate-card {
  flex: 1 1 300px;   /* wächst, bricht unter ~300px um */
  min-width: 0;      /* verhindert Überlauf bei langen Wörtern/Bildern */
}

/* Optional: ab Tablet fest 2 Spalten */
@media (min-width: 768px) {
  .affiliate-col2 > .affiliate-card { flex: 0 0 calc(50% - 36px/2); }
}

/* Inhalte innerhalb der Karte bleiben blockig untereinander */
.affiliate-card img { max-width: 100%; height: auto; display: block; }