/************************************************************
 * FS24 ? ZENTRALES FARBSYSTEM (Logo-Unterkante als Basis)
 ************************************************************/

:root {
    /* Kernfarben, am Logo orientiert */
    --fs-blue-deep:   #003F5F;  /* dunkles Blau (Schrift/Unterkante Logo) */
    --fs-blue-main:   #0A7EC2;  /* Hauptblau aus dem Logo */
    --fs-blue-soft:   #4FB5E0;  /* aufgehelltes Blau für weiche Verläufe */

    /* Teal aus dem Logo, aber bewusst etwas ?abgekühlt? */
    --fs-teal-main:   #26C1AE;
    --fs-teal-soft:   #DDF5F1;

    /* Textfarben */
    --fs-text-dark:   #003F4A;
    --fs-text-mid:    #004A5D;
    --fs-text-soft:   #56727F;

    /* Hintergründe ? helle, ruhige Blautöne */
    --fs-bg-page:         #F5F9FC;
    --fs-bg-section:      #F3F8FB;
    --fs-bg-section-soft: #EDF3FA;
    --fs-bg-card:         #FFFFFF;

    /* Linien & Rahmen */
    --fs-border-soft:   rgba(0, 63, 95, 0.14);
    --fs-border-softer: rgba(0, 63, 95, 0.08);

    /* Schatten */
    --fs-shadow-soft:   0 3px 10px rgba(0, 40, 60, 0.08);
    --fs-shadow-strong: 0 6px 18px rgba(0, 40, 60, 0.16);

    /* Verläufe ? vom unteren Teil des Logos abgeleitet */
    /* Voller Logo-Verlauf (für Akzente, Buttons, Chips) */
    --fs-gradient-logo: linear-gradient(
        135deg,
        var(--fs-teal-main) 0%,
        var(--fs-blue-main) 50%,
        var(--fs-blue-deep) 100%
    );

    /* UI-Hauptverlauf (etwas blauer, weniger Teal ? für Nav, Buttons, Counter) */
    --fs-gradient-ui: linear-gradient(
        135deg,
        #0AAECA 0%,
        var(--fs-blue-main) 55%,
        var(--fs-blue-deep) 100%
    );

    /* Hover-Verlauf ? klar blau, kein Grün-Shift */
    --fs-gradient-ui-hover: linear-gradient(
        135deg,
        var(--fs-blue-main) 0%,
        var(--fs-blue-deep) 70%,
        #022A44 100%
    );

    /* Nav-Verlauf horizontal: überwiegend Blau, ganz rechts leicht Teal */
    --fs-gradient-nav: linear-gradient(
        90deg,
        var(--fs-blue-deep) 0%,
        var(--fs-blue-main) 70%,
        #1FB9AF 100%
    );
}

/************************************************************
 * HERO-SECTION (Startseite oben)
 ************************************************************/

.fs-hero {
    padding: 40px 20px;
    background:
        radial-gradient(circle at top left,  #e8f2fb 0, transparent 45%),
        radial-gradient(circle at bottom right, #edf4fb 0, transparent 50%),
        linear-gradient(135deg, var(--fs-bg-section) 0%, #ffffff 55%, var(--fs-bg-section-soft) 100%);
    border-top: 3px solid transparent;
    border-image: var(--fs-gradient-border) 1;
}

.fs-hero-inner {
    max-width: 1250px;
    margin: 0 auto;
    text-align: center;
}

.fs-hero-title {
    font-size: 24px;
    line-height: 1.25;
    margin: 0 0 18px;
    color: var(--fs-text-dark);
}

.fs-hero-sub {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 auto 28px;
    max-width: 650px;
    color: var(--fs-text-mid);
}

/************************************************************
 * USP-GRID
 ************************************************************/

.fs-usp-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: -10px;
    justify-content: space-between;
    text-align: left;
}

.fs-usp-card {
    border-radius:1px;
    padding: 14px 16px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    width: calc(50% - 10px);
    max-width: 220px;
    flex: 1 1 calc(50% - 10px);
    font-size: 14px;
    color: var(--fs-text-mid);
    background: var(--fs-bg-card);
}

.fs-usp-card strong {
    display: block;
    margin-bottom: 2px;
}

/* Varianten */

.fs-usp-card--gradient {
    background: var(--fs-gradient-ui);
    color: #ffffff;
}

.fs-usp-card--white {
    background: var(--fs-bg-card);
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.fs-usp-border-blue {
    border-left: 5px solid var(--fs-blue-main);
}

.fs-usp-border-green {
    border-left: 5px solid var(--fs-teal-main);
}

/************************************************************
 * BUTTONS (Hero/Global)
 ************************************************************/

/************************************************************
 * FIX ? Mehr Abstand zwischen Hero-Buttons
 ************************************************************/

.fs-hero-actions {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;
    align-items: center;

    column-gap: 16px;  /* ? Abstand zwischen Buttons */
    row-gap: 14px;     /* ? Abstand bei Zeilenumbruch */

    margin-top: 28px;     /* Abstand zu USPs */
    margin-bottom: 8px;   /* enger nach unten */

    width: 100%;          /* ? wichtig */
    margin-left: auto;    /* ? */
    margin-right: auto;   /* ? */
    text-align: center;   /* ? visuelle Zentrierung */
}



.fs-btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius:1px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Primary ? Hero CTA (sauberer Verlauf ohne Farbränder) */
.fs-btn-primary {
    position: relative;
    background: var(--fs-gradient-ui);
    color: #ffffff;
    border: 2px solid transparent; /* für invertierten Hover im Hero */
    overflow: hidden;
}

.fs-btn-primary:hover {
    background: var(--fs-gradient-ui-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.16);
}

/* Spezieller invertierter Hover NUR im Hero
   (z.B. Button "Fliesenschienen & Profile") */
.fs-hero .fs-btn-primary:hover {
    background: #ffffff;
    color: var(--fs-blue-main);
    border-color: var(--fs-blue-main);
    box-shadow: 0 4px 10px rgba(0,0,0,0.16);
}

/* Secondary (weiß mit blauem Rand) */
.fs-btn-secondary {
    background: #ffffff;
    color: var(--fs-blue-main);
    border: 2px solid var(--fs-blue-main);
}

.fs-btn-secondary:hover {
    background: var(--fs-gradient-ui-hover);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.16);
}

/************************************************************
 * MOBILE HERO
 ************************************************************/

@media (max-width: 768px) {

    .fs-hero-title {
        font-size: 24px;
    }

    .fs-hero-sub {
        font-size: 14px;
    }

    .fs-usp-card {
        max-width: 100%;
    }

    .fs-hero-actions .fs-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}

/************************************************************
 * SECTION ? Hauptkategorien-Übersicht
 ************************************************************/

.fs-cat-overview {
    padding: 0px 0px 0px;
    background:
        radial-gradient(circle at top right, #ffffff 0, #ffffff 50%),
        radial-gradient(circle at bottom left, #ffffff 0, #ffffff 55%),
        linear-gradient(135deg, var(--fs-bg-section) 0%, #ffffff 50%, var(--fs-bg-section-soft) 100%);
    border-top: 0px solid transparent;
    border-image: var(--fs-gradient-border) 1;
}

.fs-cat-overview-inner {
    max-width: 1342px;
    margin: 0 auto;
    box-sizing: border-box;
}

.fs-cat-title {
    font-size: 24px;
    line-height: 1.3;
    margin: 0 0 12px;
    color: var(--fs-text-dark);
    text-align: center;
}

.fs-cat-sub {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 auto 26px;
    max-width: 700px;
    color: var(--fs-text-soft);
    text-align: center;
}

/* GRID WRAPPER */

.fs-cat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* Karten-Links */

.fs-cat-card {
    text-decoration: none;
    color: var(--fs-text-mid);
    flex: 1 1 calc(20% - 20px);
    max-width: 260px;
    min-width: 180px;
    display: block;
    transition: transform .25s ease;
}

/* Karten-Inhalt */

.fs-cat-card-inner {
    background: var(--fs-bg-card);
    border-radius:1px;
    box-shadow: var(--fs-shadow-soft);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--fs-border-soft);
    transition: box-shadow .25s ease, border-color .25s ease;
}

.fs-cat-card-image {
    width: 100%;
    height: 210px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .35s ease;
}

.fs-cat-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.fs-cat-card-kicker {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .7;
    color: var(--fs-blue-main);
}

.fs-cat-card-title {
    font-size: 15px;
    margin: 6px 0;
    font-weight: 600;
    color: var(--fs-text-dark);
}

.fs-cat-card-text {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 8px;
    color: var(--fs-text-mid);
}

.fs-cat-card-link {
    color: var(--fs-blue-main);
    font-weight: 600;
    font-size: 13px;
    margin-top: auto;
}

/* Hover-Effekt ? an ?Für wen ist Fliesenschiene24?? angelehnt */

.fs-cat-card:hover {
    transform: translateY(-3px);
}

.fs-cat-card:hover .fs-cat-card-inner {
    box-shadow: var(--fs-shadow-strong);
    border-color: var(--fs-blue-main);
}

/* Kein Zoom mehr auf dem Bild */
.fs-cat-card:hover .fs-cat-card-image {
    transform: none;
}

/* Responsive ? Kartenbreite */

@media (max-width: 992px) {
    .fs-cat-card {
        flex: 1 1 calc(33.333% - 20px);
        max-width: 260px;
    }
}

@media (max-width: 768px) {
    .fs-cat-card {
        flex: 1 1 calc(50% - 20px);
        max-width: 260px;
    }
}

@media (max-width: 520px) {
    .fs-cat-card {
        flex: 1 1 100%;
        max-width: 320px;
    }
}

/************************************************************
 * SECTION ? Beliebte Produkte (Bestseller)
 ************************************************************/

.fs-bestseller {
    padding: 40px 20px;
    background: var(--fs-gradient-nav, linear-gradient(135deg, #063a86 0%, #0a6fa6 45%, #10b7b1 100%)) !important;
    border-top: 3px solid transparent;
    border-image: var(--fs-gradient-border) 1;
    text-align: center;
}

.fs-bestseller-inner {
    max-width: 1250px;
    margin: 0 auto;
    text-align: center;
}

.fs-bestseller-title {
    font-size: 32px;
    line-height: 0;
    margin: 0px 0px 0px;
    color: #ffffff;
}

.fs-bestseller-sub {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 auto 26px;
    max-width: 700px;
    color: var(--fs-text-mid);
}

.fs-bestseller-stream {
    margin-top: 0px;
    text-align: center;
}

@media (max-width: 768px) {
    .fs-bestseller {
        padding: 30px 16px;
    }

    .fs-bestseller-title {
        font-size: 22px;
    }

    .fs-bestseller-sub {
        font-size: 14px;
    }
}

/************************************************************
 * FS24 PRODUCTSTREAM (Slick-Carousel)
 ************************************************************/

.fs24-product-stream {
    padding-top: 0px;
}

.fs24-product-stream .slick-slide {
    padding-top: 4px;
}

.fs24-product-stream .slick-slide > a {
    display: block;
    position: relative;
    z-index: 1;
    text-decoration: none;

    background: #ffffff;
    border-radius:1px;
    border: 1px solid var(--fs-border-soft);
    box-shadow: var(--fs-shadow-soft);

    padding: 0.9rem;
    height: 100%;

    transition: 
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.fs24-product-stream .slick-slide > a:hover {
    transform: translateY(-3px);
    box-shadow: var(--fs-shadow-strong);
    border-color: rgba(0, 115, 170, 0.55);
    background-color: #ffffff;
}

.fs24-product-stream .slick-slide > a img {
    display: block;
    width: 100%;
    height: auto;
    border-radius:1px;
    margin-bottom: 0.7rem;
}

.fs24-product-stream .slick-slide > a h3,
.fs24-product-stream .slick-slide > a .product-name,
.fs24-product-stream .slick-slide > a .title {
    font-size: 0.98rem;
    font-weight: 600;
    color: #003543;
    margin: 0 0 0.3rem 0;
}

.slider-pause-controls.slider-pause-overlay {
    display: none !important;
}

a.aktionpopup-link {
    display: none !important;
}

.fs24-product-stream .slick-prev,
.fs24-product-stream .slick-next,
.fs24-product-stream .slick-arrow,
.fs24-product-stream .slick-arrow:hover {
    transition: opacity .25s ease;
    background: var(--fs-gradient-ui) !important;
    border: none !important;
}

.fs24-product-stream .slick-prev:hover,
.fs24-product-stream .slick-next:hover {
    opacity: 0.3;
}

.fs24-product-stream .slick-prev:before,
.fs24-product-stream .slick-next:before,
.fs24-product-stream .slick-arrow:before {
    color: #ffffff !important;
}

/* Mobile Productstream */

@media (max-width: 768px) {

    .fs24-product-stream .slick-slide {
        padding: 0 6px 14px;
        height: auto !important;
    }

    .fs24-product-stream .slick-slide > div {
        height: auto !important;
    }

    .fs24-product-stream .slick-slide > a {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 0.8rem;

        background: #fff;
        border-radius:1px;
        border: 1px solid var(--fs-border-soft);

        overflow: hidden;
        transform: none !important;

        box-shadow: 0 3px 10px rgba(0, 40, 60, 0.10);
    }

    .fs24-product-stream .slick-slide > a:hover {
        transform: none !important;
        box-shadow: 0 3px 10px rgba(0, 40, 60, 0.10);
    }

    .fs24-product-stream .slick-slide > a img {
        display: block;
        width: 100%;
        height: auto;
        border-radius:1px;
        margin-bottom: 0.6rem;
        max-width: 100%;
        flex: 0 0 auto;
    }

    .fs24-product-stream .productbox-inner {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .fs24-product-stream .productbox-inner .productbox-title,
    .fs24-product-stream .productbox-inner .price_wrapper {
        min-height: 0;
    }

    .fs24-product-stream .productbox-inner .productbox-title,
    .fs24-product-stream .productbox-inner .productbox-title a,
    .fs24-product-stream .slick-slide > a .product-name {
        font-size: 0.9rem;
        line-height: 1.35;
        margin: 0 0 0.3rem 0;

        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;

        white-space: normal !important;
        word-break: normal;
        overflow-wrap: normal;

        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
    }

    .fs24-product-stream .productbox-inner .price_wrapper {
        margin-top: auto;
    }

    .fs24-product-stream .slick-slide > a * {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        max-width: 100%;
    }
}

/************************************************************
 * SECTION ? Anwendungsbeispiele: Bad, Küche, Boden
 ************************************************************/

.fs-usecases {
    padding: 20px;
    background:
        radial-gradient(circle at top left,  #b3e9d3 0, transparent 55%),
        radial-gradient(circle at bottom right, #36e5ff 0, transparent 55%),
        linear-gradient(135deg, var(--fs-bg-section) 0%, #ffffff 60%, var(--fs-bg-section-soft) 100%);
    border-top: 0px solid transparent;
    border-image: var(--fs-gradient-border) 1;
}

.fs-usecases-inner {
    max-width: 1342px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.fs-usecase {
    background: #ffffff;
    border-radius:1px;
    box-shadow: var(--fs-shadow-soft);
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.fs-usecase-media {
    flex: 0 0 310px;
    max-width: 312px;
    min-width: 220px;
}

.fs-usecase-media img,
.fs-mobile-img-fix {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fs-usecase-content {
    flex: 1 1 320px;
    padding: 20px 22px;
    border-left: 5px solid var(--fs-blue-main);
    min-width: 260px;
}

.fs-usecase--alt .fs-usecase-content {
    border-left-color: var(--fs-teal-main);
}

.fs-usecase--alt .fs-usecase-media {
    order: 1;
}

.fs-usecase--alt .fs-usecase-content {
    order: 2;
}

.fs-usecase-label {
    display: inline-block;
    background: var(--fs-gradient-logo);
    color: #ffffff;
    padding: 5px 14px;
    border-radius:1px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.fs-usecase-title {
    font-size: 22px;
    line-height: 1.3;
    margin: 0 0 10px;
    color: var(--fs-text-dark);
}

.fs-usecase-text {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 12px;
    color: var(--fs-text-mid);
}

.fs-usecase-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fs-usecase-tag {
    font-size: 12px;
    padding: 4px 10px;
    border-radius:1px;
    text-decoration: none;
    color: var(--fs-text-mid);
    border: 1px solid var(--fs-blue-main);
    background: #ffffff;
    transition: all 0.22s ease;
    cursor: pointer;

}

.fs-usecase-tag:hover {
    background: #e9f4f6;
    border-color: var(--fs-blue-main);
    color: var(--fs-text-dark);
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.fs-usecase-tag--light {
    background: #f0f6f7;
}

.fs-usecase-tag--light:hover {
    background: #dcecee;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.fs-usecase-tag--green {
    border-color: var(--fs-teal-main);
}

.fs-usecase-tag--green:hover {
    background: var(--fs-teal-soft);
    color: var(--fs-text-dark);
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

@media (max-width: 900px) {
    .fs-usecase {
        flex-direction: column;
    }

    .fs-usecase-media,
    .fs-usecase-content {
        flex: 1 1 100%;
        max-width: 100%;
        order: unset;
    }

    .fs-usecase-content {
        border-left-width: 4px;
    }
}

@media (max-width: 768px) {
    .fs-usecases {
        padding: 16px;
    }

    .fs-usecase-title {
        font-size: 20px;
    }

    .fs-usecase-text {
        font-size: 14px;
    }
}

/* ================================
   FS24 Usecases ? Blog-CTA deutlich sichtbar (neu)
   ================================ */

.fs-usecase-blog {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fs-usecase-blog-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 9px 12px;
  border-radius:1px;

  background: var(--fs-gradient-ui, linear-gradient(90deg,#0b6aa6,#21b6a6));
  color: #fff !important;
  text-decoration: none !important;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;

  box-shadow: 0 10px 24px rgba(11, 106, 166, 0.18);
  border: 1px solid rgba(255,255,255,0.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.fs-usecase-blog-link:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 14px 28px rgba(11, 106, 166, 0.24);
}

/* kleines Badge links (optional) */
.fs-usecase-blog-badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius:1px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Text im Link */
.fs-usecase-blog-text{
  line-height: 1.15;
}

/* Pfeil rechts */
.fs-usecase-blog-arrow{
  margin-left: 2px;
  font-weight: 900;
  opacity: .95;
}

/* Variante für ?alt? Block etwas grüner */
.fs-usecase--alt .fs-usecase-blog-link{
  background: var(--fs-gradient-ui-hover, linear-gradient(90deg,#21b6a6,#0b6aa6));
}


/************************************************************
 * SECTION ? Warum Fliesenschiene24?
 ************************************************************/

.fs-why {
  padding: 40px 0;
  background:
    radial-gradient(circle at top right, #e9f4fb 0, transparent 55%),
    radial-gradient(circle at bottom left, #e6f1fb 0, transparent 55%),
    linear-gradient(135deg, var(--fs-bg-section) 0%, #ffffff 55%, var(--fs-bg-section-soft) 100%);
  border-top: none;
}

.fs-why-box {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 26px 32px;
  border-radius:1px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(243, 248, 251, 0.94)
  );

  border-top: 4px solid transparent;
  border-image: var(--fs-gradient-border) 1;

  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.1);

  text-align: left;
}

.fs-why-logo {
  height: 46px;
  display: block;
  margin-bottom: 14px;
  opacity: 0.95;
}

.fs-why-title {
  font-size: 22px;
  color: var(--fs-text-dark);
  font-weight: 700;
  margin: 0 0 12px;
}

.fs-why-lead {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
  color: var(--fs-text-mid);
}

.fs-why-text {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--fs-text-mid);
}

.fs-why-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.fs-why-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 8px;
  line-height: 1.5;
  color: var(--fs-text-mid);
  font-size: 15px;
}

.fs-why-list li strong {
  font-weight: 600;
}

.fs-why-list li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius:1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  background: var(--fs-blue-main);
  color: #fff;
}

.fs-why-contact {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 10px;
  margin-top: 6px;
}

.fs-why-contact-line {
  font-size: 14px;
  margin: 4px 0;
  color: var(--fs-text-dark);
}

.fs-why-contact-label {
  font-weight: 600;
  color: var(--fs-text-dark);
  margin-right: 4px;
}

.fs-why-contact-time {
  opacity: 0.8;
  font-size: 13px;
  margin-left: 4px;
}

.fs-why a {
  color: var(--fs-blue-main);
  font-weight: 600;
}

.fs-why a:hover {
  text-decoration: underline;
}

.fs-why-signature {
  margin-top: 12px;
  font-style: italic;
  font-size: 14px;
  color: var(--fs-text-dark);
}

@media (max-width: 768px) {
  .fs-why-box {
    padding: 22px 18px;
  }

  .fs-why-title {
    font-size: 20px;
  }

  .fs-why-lead,
  .fs-why-text,
  .fs-why-list li {
    font-size: 14px;
  }

  .fs-why-list li {
    padding-left: 1.8rem;
  }

  .fs-why-list li::before {
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.7rem;
  }
}

/************************************************************
 * ZUBEHÖR-PANEL
 ************************************************************/

.panel-zubehoer {
    margin-top: 20px;
    border: 0;
    border-radius:1px;
    background:
        radial-gradient(circle at top left,  #e8f2fb 0, transparent 60%),
        radial-gradient(circle at bottom right, #e8f0fb 0, transparent 55%),
        linear-gradient(135deg, var(--fs-bg-section) 0%, #ffffff 50%, var(--fs-bg-section-soft) 100%);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

.panel-zubehoer .panel-heading {
    padding: 10px 16px;
    border-bottom: 1px solid var(--fs-border-softer);
    background: linear-gradient(135deg, rgba(38,193,174,0.06), rgba(10,126,194,0.06));
    border-radius:1px;
}

.panel-zubehoer .panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--fs-text-dark);
    margin: 0;
}

.panel-zubehoer .panel-body {
    padding: 10px 14px 12px;
}

.panel-zubehoer .zubehoer-box {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;

    padding: 8px 8px;
    border-radius:1px;

    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;

    position: relative;
}

.panel-zubehoer .zubehoer-box:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 60, 80, 0.12);
    transform: translateY(-1px);
}

.panel-zubehoer .itembox.input-field {
    flex: 0 0 auto;
}

.panel-zubehoer .itembox-input-text {
    flex: 1 1 auto;
    min-width: 220px;
}

.panel-zubehoer .itembox-input-text label.labelname {
    display: inline-block;
    margin-bottom: 2px;
    font-size: 14px;
    color: var(--fs-text-dark);
}

.panel-zubehoer .itembox-input-text .css-bundle-strong {
    font-weight: 600;
    color: var(--fs-text-dark);
}

.panel-zubehoer .zubehoer-item-information {
    font-size: 13px;
    color: var(--fs-text-mid);
}

.panel-zubehoer .zubehoer-item-information .zubehoer-preis .preis {
    font-weight: 600;
    color: var(--fs-blue-main);
}

.panel-zubehoer .zubehoer-item-information .currency {
    font-weight: 500;
}

/* Zubehör-Counter ? eckig */

.panel-zubehoer .fs-qty-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    background: #ffffff;
    border: 1px solid #c5d3d8;
    border-radius:1px;
    padding: 2px 4px;
}

.panel-zubehoer .fs-qty-wrap .zubehoer-quantity {
    width: 42px !important;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--fs-text-dark);

    border: none !important;
    outline: none !important;
    background: transparent;
    padding: 0 2px;
}

/* Plus/Minus ? Zubehör, rechteckig */

.panel-zubehoer .fs-qty-btn {
    background: var(--fs-gradient-ui);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;

    width: 28px;
    height: 28px;
    border-radius:1px;
    border: none;

    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition: opacity 0.2s ease, transform 0.1s ease, background 0.1s ease;
}

.panel-zubehoer .fs-qty-btn:hover {
    background: var(--fs-gradient-ui-hover);
    opacity: 1;
}

.panel-zubehoer .fs-qty-btn:active {
    transform: scale(0.92);
}

.panel-zubehoer .zubehoer-list {
    position: relative;
}

/* Popup ? links neben der Zeile, mittig positioniert, nicht unter anderen Buttons */

.panel-zubehoer .toggle-box {
    display: none;
    position: absolute;

    top: 50%;
    bottom: auto;
    right: calc(100% + 10px);
    left: auto !important;
    transform: translateY(-50%);

    z-index: 99999;
    margin: 0;
    pointer-events: auto;
}

.panel-zubehoer .toggle-box .css-zubehoer-content {
    background: #ffffff;
    border-radius:1px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    padding: 10px 12px;
    width: 320px;
    max-width: 320px;
    border: 1px solid var(--fs-border-soft);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    gap: 6px;

    overflow: hidden;
}

.panel-zubehoer .toggle-box .css-popover-title {
    font-size: 14px;
    margin: 0;
    color: var(--fs-text-dark);
}

.panel-zubehoer .toggle-box .css-popover-title .close i {
    font-size: 14px;
    opacity: 0.7;
}

.panel-zubehoer .toggle-box .css-popover-content {
    font-size: 13px;
    color: var(--fs-text-mid);
}

.panel-zubehoer .toggle-box .zub-image {
    margin-top: 4px;
}

.panel-zubehoer .toggle-box .zub-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius:1px;
}

.panel-zubehoer .toggle-box .inkorb.btn.btn-primary {
    border-radius:1px;
    padding: 6px 14px;
    font-size: 13px;
    align-self: flex-start;
    margin-top: 4px;
}

@media (max-width: 1024px) {
    .panel-zubehoer .panel-body {
        padding: 8px 10px 10px;
    }

    .panel-zubehoer .zubehoer-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    .panel-zubehoer .itembox.input-field {
        margin-bottom: 0 !important;
    }

    .panel-zubehoer .toggle-box {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 4px !important;
        width: 100% !important;
        z-index: auto;
    }

    .panel-zubehoer .toggle-box .css-zubehoer-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/************************************************************
 * GLOBAL: btn-primary ? SHOPWEIT (inkl. Warenkorb)
 ************************************************************/

.btn-primary,
a.btn-primary,
button.btn-primary,.btn-danger{
    position: relative !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase;
    border-radius:1px;
    border: none !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: transform .12s ease, filter .12s ease, background .12s ease;
    min-height: 50px;
}

.btn-primary,
a.btn-primary,
button.btn-primary{
  
    background: var(--fs-gradient-ui) !important;
  
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
    background: var(--fs-gradient-ui-hover) !important;
    transform: translateY(-2px);
}

.btn-primary:active,
a.btn-primary:active,
button.btn-primary:active {
    transform: translateY(1px);
}

/************************************************************
 * OUTLINE-BUTTONS (z.B. Weiter zum Bestellvorgang, Versandkosten)
 ************************************************************/

.btn-outline-primary,
a.btn-outline-primary,
button.btn-outline-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px;
    font-weight: 600;
    font-size: 14px;

    border-radius:1px;
    border: 1px solid var(--fs-blue-main);
    background: #ffffff;
    color: var(--fs-blue-main);

    text-transform: none;
    box-shadow: none;
    cursor: pointer;

    transition: background .15s ease,
                color .15s ease,
                border-color .15s ease,
                transform .12s ease;
    min-height: 50px;
    
}

.btn-outline-primary.btn-sm {
    padding: 8px 18px;
    font-size: 13px;
    min-height: 36px;
}

.btn-outline-primary:hover,
a.btn-outline-primary:hover,
button.btn-outline-primary:hover {
    background: var(--fs-gradient-ui-hover);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-outline-primary:active,
a.btn-outline-primary:active,
button.btn-outline-primary:active {
    transform: translateY(0);
}

/************************************************************
 * HAUPTARTIKEL + WARENKORB ? MENGEN-COUNTER (ALLE Varianten)
 ************************************************************/

.input-group.form-counter.choose_quantity {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 8px;
    background: #f7fbfc;
    border-radius:1px;
    border: 1px solid #c5d3d8;
}

/* Prepend/Append immer sauber mittig ? wichtig für 993px */
.input-group.form-counter.choose_quantity .input-group-prepend,
.input-group.form-counter.choose_quantity .input-group-append {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

/* PLUS / MINUS ? rechteckig, FS24-Verlauf (generisch) */
.input-group.form-counter.choose_quantity .btn.btn-,
.input-group.form-counter.choose_quantity .btn.btn-decrement,
.input-group.form-counter.choose_quantity .btn.btn-increment {
    background: var(--fs-gradient-ui);
    border: none;
    color: #ffffff;

    width: 32px;
    height: 32px;
    padding: 1 !important;
    border-radius:1px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: none;
}

.input-group.form-counter.choose_quantity .btn.btn- .fas,
.input-group.form-counter.choose_quantity .btn.btn-decrement .fas,
.input-group.form-counter.choose_quantity .btn.btn-increment .fas {
    font-size: 14px;
    line-height: 1;
    display: inline-block;
}

.input-group.form-counter.choose_quantity .btn.btn-:hover,
.input-group.form-counter.choose_quantity .btn.btn-decrement:hover,
.input-group.form-counter.choose_quantity .btn.btn-increment:hover {
    background: var(--fs-gradient-ui-hover);
}

/* Eingabefeld ? immer mittig, gleiche Höhe wie Plus/Minus */
.input-group.form-counter.choose_quantity .form-control.quantity {
    height: 32px;
    min-width: 52px;

    text-align: center;
    font-weight: 600;
    color: var(--fs-text-dark);

    background: #ffffff;
    border-radius:1px;
    border: 1px solid #d0dde2;

    padding: 0 8px;
    margin: 0;
    box-shadow: none;
}

/* "Stück"-Label ? gleiche Höhe, mittig */
.input-group.form-counter.choose_quantity .input-group-text.unit {
    height: 32px;
    background: transparent;
    border: none;

    font-size: 13px;
    font-weight: 600;
    color: var(--fs-text-mid);

    display: flex;
    align-items: center;
    padding: 0 10px;
    line-height: 1;
}

/* Warenkorb / Kasse: minimal kompakter, aber gleiche Optik */
.basket .input-group.form-counter.choose_quantity,
.warenkorb .input-group.form-counter.choose_quantity {
    gap: 3px;
    padding: 4px 6px;
}

.basket .input-group.form-counter.choose_quantity .btn.btn-,
.warenkorb .input-group.form-counter.choose_quantity .btn.btn-,
.basket .input-group.form-counter.choose_quantity .btn.btn-decrement,
.basket .input-group.form-counter.choose_quantity .btn.btn-increment,
.warenkorb .input-group.form-counter.choose_quantity .btn.btn-decrement,
.warenkorb .input-group.form-counter.choose_quantity .btn.btn-increment {
    width: 30px;
    height: 30px;
}

.basket .input-group.form-counter.choose_quantity .form-control.quantity,
.warenkorb .input-group.form-counter.choose_quantity .form-control.quantity {
    height: 30px;
    min-width: 50px;
}

.basket .input-group.form-counter.choose_quantity .input-group-text.unit,
.warenkorb .input-group.form-counter.choose_quantity .input-group-text.unit {
    height: 30px;
}

/* Mobile: lediglich ?Stück? ausblenden & etwas weicher */
@media (max-width: 768px) {

    .input-group.form-counter.choose_quantity {
        max-width: 190px;
        margin-top: 0px;
    }

    .input-group.form-counter.choose_quantity .input-group-text.unit {
        display: none !important;
    }
}
/* Reihenfolge im Mengen-Counter festlegen */
.input-group.form-counter.choose_quantity {
    display: inline-flex;
}

/* Minus */
.input-group.form-counter.choose_quantity .input-group-prepend {
    order: 1;
}

/* Eingabefeld */
.input-group.form-counter.choose_quantity .form-control.quantity {
    order: 2;
}

/* Plus */
.input-group.form-counter.choose_quantity .input-group-append {
    order: 3;
}

/* "Stück" direkt rechts neben Plus */
.input-group.form-counter.choose_quantity .input-group-text.unit {
    order: 4;
    margin-left: 2px;
}


/************************************************************
 * RATING / STATUS
 ************************************************************/

i.css-zubehoer-icon-cancel {
    display: none !important;
}

.rating i.fas.fa-star,
span.rating i.fas.fa-star,
a.rating i.fas.fa-star {
    color: #d4af37 !important;
}

.status.status-2 {
    color: #28a745 !important;
    font-size: 1.1em;
}

.status.status-2 .status-icon {
    color: #28a745 !important;
    font-size: 1.2em;
    margin-right: 4px;
}

/************************************************************
 * SWATCH?RADIOBUTTONS VERSTECKEN
 ************************************************************/

input[type="radio"].control-hidden {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/************************************************************
 * FS24 ? Artikelliste / Produktboxen
 ************************************************************/

body:not(.product-details) .productbox .btn-primary,
body:not(.product-details) .productbox .form-counter,
body:not(.product-details) .productbox .choose_quantity,
body:not(.product-details) .productbox .btn-outline-primary,
body:not(.product-details) .productbox a.btn-outline-primary {
    display: none !important;
}

body:not(.product-details) .productbox {
    position: relative;
    background: #ffffff !important;
    border-radius:1px;
    border: 1px solid rgba(0, 60, 80, 0.10) !important;

    box-shadow: none !important;
    transform: none !important;

    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: visible;

    transition: background-color .18s ease, border-color .18s ease;
}

body:not(.product-details) .productbox::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius:1px;
    padding: 2px;

    background: linear-gradient(135deg, rgba(0,0,0,0), rgba(0,0,0,0));
    
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
    pointer-events: none;
}

body:not(.product-details) .productbox:hover::after {
    background: var(--fs-gradient-logo);
    opacity: 1;
}

body:not(.product-details) .productbox:hover {
    background-color: #f7fbfc !important;
    border-color: rgba(0, 60, 80, 0.15) !important;
}

@media (min-width: 768px) {
    body:not(.product-details)
    .productbox.productbox-hover:focus-visible .productbox-inner::before,
    body:not(.product-details)
    .productbox.productbox-hover:focus-within .productbox-inner::before {
        outline: none !important;
    }

    body:not(.product-details) .productbox-inner::before {
        outline: none !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }
}

#product-list .product-wrapper:not(:last-child) {
    border-bottom: none;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

/************************************************************
 * FS24 ? RATGEBER / GUIDES (Blog-Detail-Layout)
 ************************************************************/

.fs-guide {
    max-width: 1080px;
    margin: 0 auto 40px;
    padding: 28px 24px 32px;

    background:
        radial-gradient(circle at top left,  #e8f2fb 0, transparent 55%),
        radial-gradient(circle at bottom right, #e6f1fb 0, transparent 55%),
        linear-gradient(135deg, var(--fs-bg-section) 0%, #ffffff 50%, var(--fs-bg-section-soft) 100%);

    border-radius:1px;
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 6px 18px rgba(0, 50, 70, 0.08);

    font-size: 16px;
    line-height: 1.7;
    color: var(--fs-text-mid);
    box-sizing: border-box;
}

.fs-guide-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.fs-guide-h1 {
    font-size: 28px;
    line-height: 1.25;
    color: var(--fs-text-dark);
    margin: 0 0 14px;
    text-align: center;
}

.fs-guide-h2 {
    font-size: 22px;
    line-height: 1.35;
    color: var(--fs-text-dark);
    margin: 0 0 10px;
}

.fs-guide-h3 {
    font-size: 18px;
    line-height: 1.4;
    color: var(--fs-text-dark);
    margin: 0 0 6px;
}

.fs-guide p,
.fs-guide li {
    font-size: 16px;
    line-height: 1.7;
}

.fs-guide-intro {
    max-width: 760px;
    margin: 0 auto 18px;
    text-align: center;
    color: var(--fs-text-mid);
}

.fs-guide-text {
    margin: 0 0 8px;
}

.fs-guide-section {
    margin-top: 26px;
}

.fs-guide-hero {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--fs-border-softer);
    text-align: center;
}

.fs-guide-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

.fs-guide-cta {
    display: flex;
    justify-content: center;
    margin: 12px 0 4px;
}

.fs-guide-cta--bottom {
    margin-top: 18px;
}

.fs-guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 24px;
    border-radius:1px;
    border: none;

    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0.01em;

    background: var(--fs-gradient-ui);
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 70, 100, 0.22);
    cursor: pointer;

    transition: transform 0.15s ease,
                box-shadow 0.15s ease,
                filter 0.15s ease,
                background 0.15s ease;
}

.fs-guide-btn:hover {
    background: var(--fs-gradient-ui-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(0, 70, 100, 0.30);
}

.fs-guide-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 7px rgba(0, 50, 80, 0.35);
}

.fs-guide-cta-card {
    padding: 18px 16px;
    border-radius:1px;
    background: var(--fs-gradient-logo);
    color: #ffffff;
    text-align: center;
    margin-top: 26px;
}

.fs-guide-cta-card .fs-guide-h2 {
    color: #ffffff;
    margin-bottom: 10px;
}

.fs-guide-cta-card a {
    color: #ffffff !important;
    text-decoration: underline;
    font-weight: 600;
}

.fs-guide-cta-card a.fs-guide-btn {
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.06);
    box-shadow: none;
    margin-top: 8px;
}

.fs-guide-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 12px 0 4px;
}

.fs-guide-toc a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;

    border-radius:1px;
    border: 1px solid rgba(0, 90, 120, 0.18);

    font-size: 14px;
    text-decoration: none;
    color: var(--fs-text-mid);
    background: rgba(255, 255, 255, 0.92);

    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fs-guide-toc a:hover {
    background: #e8f5f7;
    border-color: var(--fs-blue-main);
    color: var(--fs-text-dark);
}

@media (max-width: 992px) {
    .fs-guide {
        padding: 22px 16px 28px;
    }
}

@media (max-width: 720px) {
    .fs-guide {
        padding: 18px 14px 24px;
        font-size: 15px;
    }

    .fs-guide-h1 {
        font-size: 22px;
    }

    .fs-guide-h2 {
        font-size: 19px;
    }

    .fs-guide-h3 {
        font-size: 17px;
    }
}

/************************************************************
 * NAVBAR & OFFCANVAS
 ************************************************************/

header .navbar-wrapper {
  background: var(--fs-gradient-nav) !important;
  border: 0 !important;
  box-shadow: none !important;
}

header .navbar-wrapper .menu-center-center.menu-multiple-rows-scroll,
header .navbar-wrapper nav.navbar,
header .navbar-wrapper #mainNavigation,
header .navbar-wrapper .nav-scrollbar,
header .navbar-wrapper .navbar-nav {
  border: 0 !important;
  box-shadow: none !important;
}

header .navbar-wrapper .nav-link {
  font-weight: 500;
  padding: 1rem 1.2rem;
  border-radius:1px;
}

header .navbar-wrapper .nav-link:hover,
header .navbar-wrapper .nav-link:focus {
  text-decoration: none !important;
}

header .navbar-wrapper .nav-link.active,
header .navbar-wrapper .nav-item.active > .nav-link {

}

header .navbar-wrapper .nav-scrollbar-arrow {
  background: var(--fs-gradient-nav) !important;
  border: none !important;
}

header .navbar-wrapper .nav-scrollbar-arrow:not(.disabled):hover {
  background: linear-gradient(90deg, var(--fs-blue-main), var(--fs-teal-main)) !important;
}

@media (max-width: 991px) {
  header .navbar-wrapper .nav-link {
    padding: 0.85rem 1rem;
  }
  header .navbar-wrapper .nav-scrollbar-arrow {
    display: none;
  }
}

body.offcanvas-open .offcanvas-backdrop,
body.is--open-offcanvas .offcanvas-backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.offcanvas-navigation,
.navigation-offcanvas,
.offcanvas.offcanvas-navigation {
  background: #ffffff;
  color: #222;
}

.offcanvas-navigation a,
.navigation-offcanvas a,
.offcanvas.offcanvas-navigation a {
  color: #222;
  font-weight: 500;
  padding: 0.9rem 1.2rem;
  display: block;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  text-decoration: none;
}

.offcanvas-navigation a:hover,
.navigation-offcanvas a:hover,
.offcanvas.offcanvas-navigation a:hover {
  background: #f2f6fa;
  color: var(--fs-blue-main);
}

.offcanvas-navigation .offcanvas-header,
.navigation-offcanvas .offcanvas-header,
.offcanvas.offcanvas-navigation .offcanvas-header {
  background: var(--fs-blue-main);
  color: #ffffff;
  padding: 0.9rem 1.2rem;
}

@media (max-width: 767px) {
  .offcanvas-navigation,
  .navigation-offcanvas,
  .offcanvas.offcanvas-navigation {
    position: fixed;
    inset: 0;
    max-width: 100%;
    border-radius:1px;
    overflow-y: auto;
    z-index: 9999;
  }
}

/************************************************************
 * STARTSEITE ? Zielgruppen, Neu, Bewertungen, Wissen
 ************************************************************/

.fs-targets {
    padding: 40px 20px 36px;
    background:
        radial-gradient(circle at top left,  #b3e9d3 0, transparent 55%),
        radial-gradient(circle at bottom right, #36e5ff 0, transparent 55%),
        linear-gradient(135deg, var(--fs-bg-section) 0%, #ffffff 60%, var(--fs-bg-section-soft) 100%);
    border-top: 0px solid transparent;
    border-image: var(--fs-gradient-border) 1;
}

.fs-targets-inner {
    max-width: 1250px;
    margin: 0 auto;
}

.fs-targets-title {
    font-size: 24px;
    line-height: 1.3;
    margin: 0 0 10px;
    color: var(--fs-text-dark);
    text-align: center;
}

.fs-targets-sub {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 auto 26px;
    max-width: 720px;
    color: var(--fs-text-mid);
    text-align: center;
}

.fs-targets-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.fs-target-card {
    display: flex;
    flex-direction: column;
    padding: 16px 15px 15px;
    background: #ffffff;
    border-radius:1px;
    text-decoration: none;
    color: var(--fs-text-mid);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--fs-border-soft);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fs-target-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--fs-shadow-strong);
    border-color: var(--fs-blue-main);
}

.fs-target-card-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .75;
    margin-bottom: 4px;
    color: var(--fs-blue-main);
}

.fs-target-card-title {
    font-size: 16px;
    margin: 0 0 6px;
    font-weight: 600;
    color: var(--fs-text-dark);
}

.fs-target-card-text {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 10px;
    color: var(--fs-text-mid);
    flex: 1;
}

.fs-target-card-link {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--fs-blue-main);
}

/* Highlight-Karte */

.fs-target-card--highlight {
    position: relative;
    overflow: hidden;
    background: var(--fs-gradient-logo);
    border: none;
    box-shadow: 0 5px 18px rgba(0, 70, 100, 0.26);
    color: #ffffff;
}

.fs-target-card--highlight .fs-target-card-kicker,
.fs-target-card--highlight .fs-target-card-link {
    color: #ffffff;
    opacity: 0.9;
}

.fs-target-card--highlight .fs-target-card-title {
    color: #ffffff;
}

.fs-target-card--highlight .fs-target-card-text {
    color: #eef7fb;
}

@media (max-width: 1100px) {
    .fs-targets-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .fs-targets {
        padding: 32px 16px;
    }

    .fs-targets-grid {
        grid-template-columns: 1fr;
    }

    .fs-target-card {
        padding: 14px 13px;
    }
}

.fs-new {
    padding: 45px 23px;
    background: var(--fs-gradient-nav, linear-gradient(135deg, #063a86 0%, #0a6fa6 45%, #10b7b1 100%)) !important;
    border-top: 3px solid transparent;
    border-image: var(--fs-gradient-border) 1;
    text-align: center;
}

.fs-new-inner {
    max-width: 1250px;
    margin: 0 auto;
    text-align: center;
}

.fs-new-title {
    font-size: 32px;
    line-height: 0;
    margin: 0px 0px 0px;
    color: #ffffff;
}

.fs-new-sub {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 auto 22px;
    max-width: 720px;
    color: var(--fs-text-mid);
}

.fs-new-stream {
    border-radius:1px;
    border: 1px solid var(--fs-border-soft);
    background: #ffffff;
    padding: 14px 14px 12px;
    box-shadow: 0 3px 10px rgba(0, 40, 60, 0.06);
}

.fs-reviews {
    padding: 40px 20px 34px;
    background:
        radial-gradient(circle at top left,  #e8f2fb 0, transparent 55%),
        radial-gradient(circle at bottom right, #e6f1fb 0, transparent 55%),
        linear-gradient(135deg, var(--fs-bg-section) 0%, #ffffff 55%, var(--fs-bg-section-soft) 100%);
    border-top: 3px solid transparent;
    border-image: var(--fs-gradient-border) 1;
}

.fs-reviews-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.fs-reviews-title {
    font-size: 24px;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 10px;
    color: var(--fs-text-dark);
}

.fs-reviews-sub {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 auto 18px;
    max-width: 620px;
    text-align: center;
    color: var(--fs-text-mid);
}

.fs-reviews-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 18px;
}

.fs-reviews-score {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fs-reviews-stars {
    font-size: 20px;
    line-height: 1;
    color: #d4af37;
}

.fs-reviews-score-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--fs-text-dark);
}

.fs-reviews-hint {
    font-size: 13px;
    color: var(--fs-text-soft);
}

.fs-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.fs-review-card {
    background: #ffffff;
    border-radius:1px;
    padding: 14px 14px 12px;
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 3px 10px rgba(0, 40, 60, 0.06);
    font-size: 14px;
    line-height: 1.6;
    color: var(--fs-text-mid);
}

.fs-review-stars {
    font-size: 14px;
    color: #d4af37;
    margin-bottom: 4px;
}

.fs-review-text {
    margin: 0 0 6px;
}

.fs-review-meta {
    font-size: 13px;
    opacity: 0.85;
}

.fs-reviews-link {
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
}

.fs-reviews-link a {
    color: var(--fs-blue-main);
    font-weight: 600;
}

@media (max-width: 900px) {
    .fs-reviews-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .fs-reviews {
        padding: 32px 16px;
    }

    .fs-reviews-grid {
        grid-template-columns: 1fr;
    }
}

.fs-knowledge {
    padding: 40px 20px 36px;
    background:
        radial-gradient(circle at top right, #e9f4fb 0, transparent 55%),
        radial-gradient(circle at bottom left, #e6f1fb 0, transparent 55%),
        linear-gradient(135deg, var(--fs-bg-section) 0%, #ffffff 55%, var(--fs-bg-section-soft) 100%);
    border-top: 3px solid transparent;
    border-image: var(--fs-gradient-border) 1;
}

.fs-knowledge-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.fs-knowledge-title {
    font-size: 24px;
    line-height: 1.3;
    margin: 0 0 10px;
    color: var(--fs-text-dark);
    text-align: center;
}

.fs-knowledge-sub {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 auto 22px;
    max-width: 720px;
    color: var(--fs-text-mid);
    text-align: center;
}

.fs-knowledge-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 14px;
}

.fs-knowledge-card {
    display: flex;
    flex-direction: column;
    padding: 14px 14px 12px;
    background: #ffffff;
    border-radius:1px;
    text-decoration: none;
    color: var(--fs-text-mid);
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 2px 8px rgba(0, 40, 60, 0.05);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.fs-knowledge-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--fs-shadow-strong);
    border-color: var(--fs-blue-main);
}

.fs-knowledge-card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--fs-text-dark);
}

.fs-knowledge-card-text {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 8px;
    color: var(--fs-text-mid);
    flex: 1;
}

.fs-knowledge-card-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--fs-blue-main);
}

.fs-knowledge-faq {
    font-size: 14px;
    text-align: center;
    color: var(--fs-text-mid);
    margin: 4px 0 0;
}

.fs-knowledge-faq a {
    color: var(--fs-blue-main);
    font-weight: 600;
}

@media (max-width: 960px) {
    .fs-knowledge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .fs-knowledge {
        padding: 32px 16px;
    }

    .fs-knowledge-grid {
        grid-template-columns: 1fr;
    }
}

/************************************************************
 * CTA-BAND (Gewerbekunde werden)
 ************************************************************/

.cta-band {
    background: linear-gradient(
        135deg,
        var(--fs-blue-deep) 0%,
        var(--fs-blue-main) 40%,
        #022A44 100%
    );
    padding: 32px 0;
    color: #ffffff;
}

.cta-band .cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cta-band h2 {
    color: #ffffff;
    margin: 0 0 6px;
}

.cta-band p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

.cta-band .btn-primary.big {
    padding: 14px 32px !important;
    font-size: 15px !important;
}

@media (max-width: 768px) {
    .cta-band .cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/************************************************************
 * SOCIAL ICONS ? Logo-Verlauf
 ************************************************************/

.fab.fa-facebook-f,
.fab.fa-instagram,
.fab.fa-youtube,
.fab.fa-linkedin-in,
.fab.fa-pinterest-p {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius:1px;
    background: var(--fs-gradient-logo);
    color: #ffffff !important;

    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 60, 80, 0.25);
    margin: 0 4px;

    transition: transform .16s ease, box-shadow .16s ease;
}

.fab.fa-facebook-f:hover,
.fab.fa-instagram:hover,
.fab.fa-youtube:hover,
.fab.fa-linkedin-in:hover,
.fab.fa-pinterest-p:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(0, 60, 80, 0.35);
}

a[href*="facebook"],
a[href*="instagram"],
a[href*="youtube"],
a[href*="linkedin"],
a[href*="pinterest"],
.socialmedia a,
.footer-social a,
.fs-social a,
.social-icons a,
.social,
.socialmedia,
.footer-social,
.fs-social,
.social-icons,
.social-wrapper,
.social-box {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/************************************************************
 * BADGES (z. B. ?eloxiert?, ?gold glänzend?)
 ************************************************************/

.badge.badge-primary {
    background-color: var(--fs-blue-main);
    color: #ffffff;
    border-radius:1px;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
}

.badge.badge-primary:hover {
    background-color: var(--fs-blue-deep);
    color: #ffffff;
}

.col .btn-outline-primary.btn-block[name="versandrechnerBTN"] {
    min-height: 40px !important;
    padding: 8px 18px !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* WARENKORB: + / - Buttons zwingend eckig machen */
.warenkorb .input-group.form-counter.choose_quantity .btn.btn-,
.basket .input-group.form-counter.choose_quantity .btn.btn-,
.warenkorb .input-group.form-counter.choose_quantity .btn.btn-decrement,
.warenkorb .input-group.form-counter.choose_quantity .btn.btn-increment,
.basket .input-group.form-counter.choose_quantity .btn.btn-decrement,
.basket .input-group.form-counter.choose_quantity .btn.btn-increment {
    border-radius:1px; 
    width: 30px !important;
    height: 30px !important;
    padding: 1 !important;
    background: var(--fs-gradient-ui) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.warenkorb .input-group.form-counter.choose_quantity .btn .fas,
.basket .input-group.form-counter.choose_quantity .btn .fas {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.warenkorb .input-group.form-counter.choose_quantity .btn:hover,
.basket .input-group.form-counter.choose_quantity .btn:hover {
    background: var(--fs-gradient-ui-hover) !important;
}
/************************************************************
 * FS24 ? BLOG / RICH-TEXT CONTENT STYLING
 * Gilt für den Bereich #fs24-article / .fs-guide
 ************************************************************/

/* Grundabstände im Artikel */
#fs24-article {
    margin: 0 auto;
}

#fs24-article .fs-guide-section:last-of-type {
    margin-bottom: 0;
}

/************************************************************
 * INTRO-FLEX (Text + Bild)
 ************************************************************/

#fs24-article .intro-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
    justify-content: space-between;
}

#fs24-article .intro-flex .text {
    flex: 1 1 52%;
    min-width: 260px;
}

#fs24-article .intro-flex figure {
    flex: 0 0 40%;
    min-width: 260px;
    margin: 0;
}

/* Bilder + Bildunterschrift */
#fs24-article figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius:1px;
    box-shadow: 0 4px 14px rgba(0, 40, 60, 0.15);
}

#fs24-article figure figcaption {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fs-text-soft);
    text-align: left;
}

/************************************************************
 * TEXT, LINKS & LISTEN
 ************************************************************/

#fs24-article p {
    margin: 0 0 10px;
}

#fs24-article p:last-child {
    margin-bottom: 0;
}

/* Links */
#fs24-article a {
    color: var(--fs-blue-main);
    font-weight: 600;
    text-decoration: none;
}

#fs24-article a:hover,
#fs24-article a:focus {
    color: var(--fs-blue-deep);
    text-decoration: underline;
}

/* Listen */
#fs24-article .fs-guide-list,
#fs24-article .fs-guide-section ul {
    margin: 0 0 10px 0;
    padding-left: 1.1rem;
}

#fs24-article .fs-guide-list li,
#fs24-article .fs-guide-section ul li,
#fs24-article .fs-guide-section ol li {
    margin-bottom: 6px;
    padding-left: 2px;
}

#fs24-article .fs-guide-section ol {
    margin: 0 0 12px 0;
    padding-left: 1.3rem;
}

/************************************************************
 * TABELLEN ? SAUBERER, DURCHGEHENDER VERLAUF IM HEADER
 ************************************************************/

/* Wrapper */
#fs24-article .fs-guide-table-wrap {
    margin: 8px 0 14px;
    border-radius:1px;
    overflow: hidden;
    border: 1px solid var(--fs-border-soft);
    background: linear-gradient(
        135deg,
        var(--fs-bg-section) 0%,
        #ffffff 45%,
        var(--fs-bg-section-soft) 100%
    );
    box-shadow: 0 3px 10px rgba(0, 40, 60, 0.06);
    overflow-x: auto;
}

/* Tabelle */
#fs24-article .fs-guide-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
    font-size: 14px;
}

/* --- FIX: nur die gesamte Header-Zeile bekommt den Verlauf --- */
#fs24-article .fs-guide-table thead tr {
    background: var(--fs-gradient-ui); /* EIN VERLAUF */
}

/* TH selbst transparent */
#fs24-article .fs-guide-table thead th {
    padding: 12px 14px;
    font-weight: 600;
    color: #ffffff;
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    white-space: nowrap;
}

/************************************************************
 * TABELLEN BODY ? WEICHE ÜBERGÄNGE, KEINE KANTEN
 ************************************************************/

/* Zellen */
#fs24-article .fs-guide-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(0, 63, 95, 0.06);
    color: var(--fs-text-mid);

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #f7fbfe 40%,
        #ffffff 100%
    );
}

/* Zebra */
#fs24-article .fs-guide-table tbody tr:nth-child(even) td {
    background: linear-gradient(
        90deg,
        #f7fbfe 0%,
        #f2f7fb 40%,
        #f7fbfe 100%
    );
}

/* Hover */
#fs24-article .fs-guide-table tbody tr:hover td {
    background: linear-gradient(
        90deg,
        rgba(38,193,174,0.05) 0%,
        rgba(10,126,194,0.05) 40%,
        rgba(38,193,174,0.05) 100%
    );
}

#fs24-article .fs-guide-table tbody tr:last-child td {
    border-bottom: none;
}

/************************************************************
 * INFO-/HINWEISBOXEN
 ************************************************************/

#fs24-article .fs-guide-box {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius:1px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fs-text-mid);
    background: linear-gradient(
        135deg,
        rgba(38,193,174,0.06),
        rgba(10,126,194,0.04)
    );
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 3px 10px rgba(0, 40, 60, 0.05);
}

#fs24-article .fs-guide-box.fs-guide-box--ok {
    border-left: 4px solid var(--fs-teal-main);
    background: linear-gradient(
        135deg,
        rgba(38,193,174,0.10),
        rgba(221,245,241,0.96)
    );
}

/************************************************************
 * FAQ-Bereich
 ************************************************************/

#fs24-article .fs-guide-section h3.fs-guide-h3 {
    margin-top: 14px;
}

#fs24-article .fs-guide-section h3.fs-guide-h3 + p {
    margin-top: 4px;
}

/************************************************************
 * RESPONSIVE
 ************************************************************/

@media (max-width: 900px) {
    #fs24-article .intro-flex {
        flex-direction: column;
    }
    #fs24-article .intro-flex .text,
    #fs24-article .intro-flex figure {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

@media (max-width: 720px) {
    #fs24-article .fs-guide-table {
        min-width: 100%;
        font-size: 13px;
    }
    #fs24-article .fs-guide-table thead th,
    #fs24-article .fs-guide-table tbody td {
        padding: 8px 10px;
    }
}
/************************************************************
 * FS24 ? LED-PROFIL-GUIDE: TEASER & BILD-LAYOUT
 * (speziell für LED-Artikel mit .led-guide-box & .text-image)
 ************************************************************/

/* LED-Teaser-Box oben im Artikel */
#fs24-article .led-guide-box {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 18px;
    margin-bottom: 20px;

    padding: 16px 18px;
    border-radius:1px;

    background: radial-gradient(circle at top left,  #e8f5fb 0, transparent 55%),
                radial-gradient(circle at bottom right, #e6f4fb 0, transparent 55%),
                linear-gradient(135deg, var(--fs-bg-section) 0%, #ffffff 50%, var(--fs-bg-section-soft) 100%);

    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 5px 18px rgba(0, 50, 80, 0.12);
}

/* Textblock im LED-Teaser */
#fs24-article .led-guide-text {
    flex: 1 1 52%;
    min-width: 260px;
    color: var(--fs-text-mid);
}

#fs24-article .led-guide-text p {
    margin: 0 0 8px;
}

/* Button im LED-Teaser ? an FS24-Buttons angelehnt */
#fs24-article .led-guide-text .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 22px;
    border-radius:1px;
    border: none;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    background: var(--fs-gradient-ui);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(0, 70, 100, 0.22);
    cursor: pointer;

    transition: transform 0.15s ease,
                box-shadow 0.15s ease,
                background 0.15s ease,
                filter 0.15s ease;
}

#fs24-article .led-guide-text .btn:hover {
    background: var(--fs-gradient-ui-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(0, 70, 100, 0.30);
}

/* Bildblock im LED-Teaser */
#fs24-article .led-guide-img {
    flex: 0 0 320px;
    max-width: 360px;
    min-width: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#fs24-article .led-guide-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius:1px;
    box-shadow: 0 4px 14px rgba(0, 40, 60, 0.18);
}

/************************************************************
 * TEXT-BILD-SEKTIONEN (.text-image)
 ************************************************************/

#fs24-article .text-image {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin: 14px 0;
}

#fs24-article .text-image .text-block {
    flex: 1 1 48%;
    min-width: 260px;
}

#fs24-article .text-image .text-block h3 {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.4;
    color: var(--fs-text-dark);
}

#fs24-article .text-image .text-block p {
    margin: 0;
    color: var(--fs-text-mid);
}

/* Bildblock ? einheitliche Optik */
#fs24-article .text-image .img-block {
    flex: 1 1 42%;
    min-width: 260px;
}

#fs24-article .text-image .img-block img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius:1px;
    box-shadow: 0 4px 14px rgba(0, 40, 60, 0.16);
}

/* Spezielle Sockel-Variante ? etwas flacheres Format */
#fs24-article .text-image .img-block.sockel img {
    max-height: 220px;
}

/************************************************************
 * RESPONSIVE ? LED-Box & Text-/Bildreihen
 ************************************************************/

@media (max-width: 992px) {
    #fs24-article .led-guide-box {
        padding: 14px 14px;
    }
}

@media (max-width: 860px) {
    #fs24-article .led-guide-box {
        flex-direction: column;
    }

    #fs24-article .led-guide-img,
    #fs24-article .led-guide-text {
        flex: 1 1 100%;
        max-width: 100%;
    }

    #fs24-article .led-guide-img img {
        max-width: 420px;
    }

    #fs24-article .text-image {
        flex-direction: column;
        align-items: flex-start;
    }

    #fs24-article .text-image .text-block,
    #fs24-article .text-image .img-block {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    #fs24-article .led-guide-box {
        margin-bottom: 16px;
    }

    #fs24-article .led-guide-text .btn {
        width: 100%;
        justify-content: center;
    }
}
/************************************************************
 * FS24 ? SCHWARZ MATT GUIDE: GRID & CARDS
 * (.fs-guide-grid, .fs-guide-grid-2, .fs-guide-card)
 ************************************************************/

/* Grid-Wrapper allgemein */
#fs24-article .fs-guide-grid {
    display: grid;
    gap: 18px;
    margin-top: 10px;
}

/* 2-spaltiges Grid für Profilarten-Abschnitt */
#fs24-article .fs-guide-grid.fs-guide-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Karten-Design im Grid */
#fs24-article .fs-guide-card {
    background: #ffffff;
    border-radius:1px;
    padding: 14px 16px 12px;
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 3px 10px rgba(0, 40, 60, 0.06);

    display: flex;
    flex-direction: column;
    gap: 6px;

    transition: transform .16s ease,
                box-shadow .16s ease,
                border-color .16s ease,
                background .16s ease;
}

/* Hover-Effekt: leicht anheben, etwas blauer Rahmen */
#fs24-article .fs-guide-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 40, 60, 0.16);
    border-color: rgba(10,126,194,0.4);
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f5f9fc 60%,
        #edf3fa 100%
    );
}

/* Überschriften in Cards */
#fs24-article .fs-guide-card .fs-guide-h3 {
    margin-bottom: 4px;
}

/* Text & Listen in Cards */
#fs24-article .fs-guide-card .fs-guide-text {
    margin-bottom: 4px;
}

#fs24-article .fs-guide-card .fs-guide-list {
    margin-bottom: 6px;
}

/************************************************************
 * RESPONSIVE ? GRID
 ************************************************************/

@media (max-width: 860px) {
    #fs24-article .fs-guide-grid.fs-guide-grid-2 {
        grid-template-columns: 1fr;
    }
}
/************************************************************
 * FS24 ? GUIDE GRIDS & TESTIMONIAL-CARDS
 * (für Preis-/Vertrauensartikel, Kundenstimmen etc.)
 ************************************************************/

/* Allgemeiner Grid-Wrapper */
#fs24-article .fs-guide-grid {
    display: grid;
    gap: 18px;
    margin-top: 10px;
}

/* 2-spaltiges Grid (z. B. Profilarten, schon bei Schwarz matt genutzt) */
#fs24-article .fs-guide-grid.fs-guide-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3-spaltiges Grid für Kundenstimmen / Testimonials */
#fs24-article .fs-guide-grid.fs-guide-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Karten-Design ? für alle Grids nutzbar */
#fs24-article .fs-guide-card {
    background: #ffffff;
    border-radius:1px;
    padding: 14px 16px 12px;
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 3px 10px rgba(0, 40, 60, 0.06);

    display: flex;
    flex-direction: column;
    gap: 6px;

    transition: transform .16s ease,
                box-shadow .16s ease,
                border-color .16s ease,
                background .16s ease;
}

/* Hover-Effekt: leicht anheben, sanftes FS24-Highlight */
#fs24-article .fs-guide-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 40, 60, 0.16);
    border-color: rgba(10,126,194,0.4);
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f5f9fc 60%,
        #edf3fa 100%
    );
}

/* Text in Cards */
#fs24-article .fs-guide-card .fs-guide-text {
    margin-bottom: 4px;
}

/* Sterne / Rating-Icon in Kundenstimmen */
#fs24-article .fs-guide-icon {
    display: inline-block;
    font-size: 14px;
    color: #d4af37; /* Goldton wie bei deinen Ratings */
    letter-spacing: 1px;
}

/************************************************************
 * RESPONSIVE ? GRIDS
 ************************************************************/

@media (max-width: 992px) {
    #fs24-article .fs-guide-grid.fs-guide-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    #fs24-article .fs-guide-grid.fs-guide-grid-2,
    #fs24-article .fs-guide-grid.fs-guide-grid-3 {
        grid-template-columns: 1fr;
    }
}
/************************************************************
 * FS24 ? WARN-/HINWEISBOX (z. B. Kontaktkorrosion)
 * .fs-guide-box--warn
 ************************************************************/

#fs24-article .fs-guide-box.fs-guide-box--warn {
    border-left: 4px solid #c0392b; /* warmes Rot, seriöser Warnakzent */
    background: linear-gradient(
        135deg,
        rgba(255, 235, 230, 0.70) 0%,
        rgba(255, 245, 240, 0.85) 60%,
        rgba(255, 250, 248, 0.95) 100%
    );
    color: #7a2e23;
    box-shadow: 0 3px 10px rgba(120, 0, 0, 0.08);
}

#fs24-article .fs-guide-box.fs-guide-box--warn p {
    margin: 0;
    font-weight: 500;
}

#fs24-article .fs-guide-box.fs-guide-box--warn strong {
    color: #962d20;
    font-weight: 700;
}
/************************************************************
 * FS24 ? Zusatz-CSS nur für:
 * #fs24-hatches-guide (Schachtabdeckungen & Bodenluken)
 * - Mobile-scrollbare Tabellen
 * - FS24 Blau?Türkis Tabellenkopf
 * - Schöner Pro-Tipp / Warn-Hinweis
 * - Dezente Card-Optik
 ************************************************************/

/* ---------------------------
   HERO / EINSTIEG
---------------------------- */
#fs24-hatches-guide .fs-guide-hero {
    max-width: 980px;
    margin: 0 auto 2.5rem;
}

/* Intro-Text etwas ruhiger lesbar */
#fs24-hatches-guide .fs-guide-intro {
    font-size: 1.02rem;
    line-height: 1.6;
}

/* CTA-Zeile unter Hero zentriert */
#fs24-hatches-guide .fs-guide-hero .fs-guide-cta-row {
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    #fs24-hatches-guide .fs-guide-hero .fs-guide-cta-row {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ---------------------------
   SECTIONS / ABSTAND
---------------------------- */
#fs24-hatches-guide .fs-guide-section {
    margin-top: 1.75rem;
    scroll-margin-top: 90px;
}

/* ---------------------------
   GRID / KACHELN (Einsatzbereiche)
---------------------------- */
#fs24-hatches-guide .fs-guide-grid.fs-guide-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 0.75rem;
}

@media (max-width: 900px) {
    #fs24-hatches-guide .fs-guide-grid.fs-guide-grid-2 {
        grid-template-columns: 1fr;
    }
}

#fs24-hatches-guide .fs-guide-card {
    border-radius:1px;
    padding: 1.1rem 1.2rem;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.04);
}

/* ---------------------------
   PRO-TIPP / WARNUNG-BOXEN
---------------------------- */

/* Generelle Box-Basis für diesen Guide leicht anheben */
#fs24-hatches-guide .fs-guide-box {
    border-radius:1px;
    padding: 0.9rem 1.05rem;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

/* Positiver Hinweis (inkl. Pro-Tipp) */
#fs24-hatches-guide .fs-guide-box--ok {
    background: linear-gradient(
        135deg,
        rgba(34, 197, 187, 0.18),
        rgba(59, 130, 246, 0.10)
    );
    border-left: 4px solid var(--fs-teal-main);
}

/* Speziell der Pro-Tipp gleich unter #einsatzbereiche */
#fs24-hatches-guide #einsatzbereiche .fs-guide-box--ok {
    font-size: 0.97rem;
    line-height: 1.5;
}

#fs24-hatches-guide #einsatzbereiche .fs-guide-box--ok strong {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.86rem;
    display: block;
    margin-bottom: 0.25rem;
    color: #022c22;
}

/* Warnbox (DIN / Belastung etc.) */
#fs24-hatches-guide .fs-guide-box--warn {
    background: linear-gradient(
        135deg,
        rgba(248, 180, 68, 0.22),
        rgba(248, 113, 22, 0.08)
    );
    border-left: 4px solid #f97316;
}

/* ---------------------------
   TABELLEN ? FS24 BLAU?TÜRKIS
   + MOBILE HORIZONTAL SCROLL
---------------------------- */

/* Wrapper: horizontales Scrollen auf Mobil */
#fs24-hatches-guide .fs-guide-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.75rem;
    padding-bottom: 0.25rem;
    position: relative;
}

/* Kleiner visueller Hinweis rechts (auslaufender Schatten) */
#fs24-hatches-guide .fs-guide-table-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, rgba(15, 23, 42, 0.06), transparent);
    display: none;
}

@media (max-width: 900px) {
    #fs24-hatches-guide .fs-guide-table-wrap::after {
        display: block;
    }
}

/* Tabelle selbst: Mindestbreite, damit sinnvoll scrollt */
#fs24-hatches-guide .fs-guide-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    border-spacing: 0;
}

/* Kopfzeile ? verlaufender Balken über die gesamte Breite */
#fs24-hatches-guide .fs-guide-table thead tr {
    background: linear-gradient(
        90deg,
        var(--fs-blue-deep) 0%,
        var(--fs-blue-main) 45%,
        var(--fs-teal-main) 100%
    );
}

#fs24-hatches-guide .fs-guide-table thead th {
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 0.6rem 0.75rem;
    white-space: nowrap;
    border-bottom: none !important;
}

/* Tabellenkörper ? hell, ruhig, gut lesbar */
#fs24-hatches-guide .fs-guide-table tbody td {
    padding: 0.55rem 0.75rem;
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--fs-text-dark);
    background: #ffffff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

#fs24-hatches-guide .fs-guide-table tbody tr:nth-child(even) td {
    background: #f7f9fb;
}

/* Hover-Effekt nur dezent */
#fs24-hatches-guide .fs-guide-table tbody tr:hover td {
    background: #eef7fb;
}

/* Fettschrift in Tabellenzellen leicht hervorheben */
#fs24-hatches-guide .fs-guide-table tbody td strong {
    color: #0f172a;
}

/* Tabellen mit Klassen-/Bereichsübersichten leicht enger */
#fs24-hatches-guide #normen .fs-guide-table,
#fs24-hatches-guide #material .fs-guide-table,
#fs24-hatches-guide #empfehlungen .fs-guide-table,
#fs24-hatches-guide #vergleich .fs-guide-table {
    min-width: 560px;
}

/* ---------------------------
   CTA-BEREICHE (Konfigurieren / Sortiment)
---------------------------- */

#fs24-hatches-guide #empfehlungen .fs-guide-cta-row,
#fs24-hatches-guide #fazit .fs-guide-cta-row {
    justify-content: center;
    gap: 0.75rem;
}

#fs24-hatches-guide #empfehlungen .fs-guide-text[style*="font-size"] {
    text-align: center;
    color: var(--fs-text-soft);
}

/* ---------------------------
   LISTEN / TECHNISCHE ABSCHNITTE
---------------------------- */

#fs24-hatches-guide .fs-guide-h2 {
    margin-bottom: 0.35rem;
}

#fs24-hatches-guide .fs-guide-h3 {
    margin-top: 0.75rem;
    margin-bottom: 0.3rem;
}

#fs24-hatches-guide .fs-guide-list {
    margin-top: 0.25rem;
}
/*****************************************************
 * FS24 ? Schachtabdeckungs-Guide Feinschliff
 * (#fs24-hatches-guide)
 * - Hero-Box farbig statt weiß
 * - Hero-CTA zentriert
 *****************************************************/

/* HERO-Box: leicht farbiger Hintergrund statt Weiß */
#fs24-hatches-guide .fs-guide-hero {
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.10),
        rgba(45, 212, 191, 0.18)
    );
    border-radius:1px;
    padding: 1.6rem 1.8rem 1.9rem;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
    position: relative;
    z-index: 0; /* hält sich brav unter typischen Navbar-z-indices */
}

/* Überschrift & Intro im Hero minimal ruhiger */
#fs24-hatches-guide .fs-guide-hero .fs-guide-h1 {
    margin-bottom: 0.6rem;
}

#fs24-hatches-guide .fs-guide-hero .fs-guide-intro {
    margin-bottom: 0.9rem;
}

/* CTA-Row oben: Button sauber zentrieren */
#fs24-hatches-guide .fs-guide-hero .fs-guide-cta-row {
    display: flex;
    justify-content: center;  /* statt flex-start */
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.1rem;
}

/* Button im Hero leicht hervorheben */
#fs24-hatches-guide .fs-guide-hero .fs-guide-btn {
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}

/* Falls global eine weiße Karte hinterlegt ist, die über die Navi ?brettert?,
   machen wir es für diesen Guide etwas dezenter */
#fs24-hatches-guide .fs-guide-inner {
    position: relative;
    z-index: 0;
}
/*****************************************************
 * FS24 ? Ratgeber Abdichtung (#ratgeber-abdichtung)
 * Nur lokale Anpassungen:
 * - weiße Hero-Box entfernen
 * - Hero nicht über Navbar legen
 * - CTA-Row zentriert + dunkle Kapsel
 * - TOC mobil scrollbar
 * KEINE Farben für Karten/Tabellen überschrieben
 *****************************************************/

/* HERO: weiße Box weg + kein Überdecken der Navigationsleiste */
#ratgeber-abdichtung .fs-guide-hero {
  background: transparent;   /* Weißer Kasten weg, Hintergrund kommt von der Seite */
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;

  /* Wichtig: nicht über die Hauptnavigation legen */
  position: static;
  z-index: auto;
}

/* Textbreite im Hero etwas begrenzen (optional, ändert keine Farben) */
#ratgeber-abdichtung .fs-guide-hero .fs-guide-intro {
  max-width: 60rem;
}

/* CTA-Row: zentriert + dunkle, dezente Kapsel unter den Buttons */
#ratgeber-abdichtung .fs-guide-hero .fs-guide-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;

  margin-top: 1.25rem;
  padding: 0.5rem 0.9rem;

  border-radius:1px;

  /* dunkler, transparenter Hintergrund, damit nichts knallt
     und dein globales Farbkonzept nicht angefasst wird */
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.6);
  backdrop-filter: blur(8px);
}

/* Buttons in der CTA-Row: nicht umbrechen, damit die Kapsel schön wirkt */
#ratgeber-abdichtung .fs-guide-hero .fs-guide-btn {
  white-space: nowrap;
}

/* Dark-Variante im Hero leicht absetzen, aber nicht dein globales Button-Design zerschießen */
#ratgeber-abdichtung .fs-guide-hero .fs-guide-btn.fs-guide-btn--dark {
  background-color: rgba(15, 23, 42, 0.95);
  border-color: rgba(15, 23, 42, 0.95);
}

/* TOC (Inhaltsübersicht) ? mobil nach rechts/links scrollbar,
   Farben/Border kommen weiterhin aus deinem globalen CSS */
#ratgeber-abdichtung .fs-guide-toc {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;

  margin-top: 1.5rem;
  padding: 0.5rem 0.75rem;

  border-radius:1px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#ratgeber-abdichtung .fs-guide-toc a {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Optional: kleine FAQ-Abstände, ohne Farben anzutasten */
#ratgeber-abdichtung .fs-guide-faq-item + .fs-guide-faq-item {
  margin-top: 0.35rem;
}
/* Entfernt den dunklen Hintergrund-Balken hinter den Buttons im Hero */
#ratgeber-abdichtung .fs-guide-hero .fs-guide-cta-row {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;        /* kein zusätzlicher Abstand um die Buttons */
    justify-content: center;      /* Buttons bleiben sauber zentriert */
}

/* Buttons behalten ihr globales FS24-Design */
#ratgeber-abdichtung .fs-guide-hero .fs-guide-btn {
    white-space: nowrap;
}
/*****************************************************
 * FS24 ? Ratgeber Fliesenschienen
 * (#ratgeber-fliesenschienen)
 * - Feature-Karten oben
 * - Profilarten & Materialien als "Pseudo-Tabellen"
 * - CTA unten mit FS24-Buttons
 *****************************************************/

/* Grundlayout für diesen Guide */
#ratgeber-fliesenschienen .fs-guide-inner {
    max-width: 980px;
    margin: 0 auto;
}

/* ---------- 1. Abschnitt "Warum Schienen?" ? 3 Kacheln ---------- */

#ratgeber-fliesenschienen #warum .fs-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 12px;
}

#ratgeber-fliesenschienen .fs-guide-feature-card {
    background: #ffffff;
    border-radius:1px;
    padding: 12px 14px;
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 4px 14px rgba(0, 40, 60, 0.08);

    display: flex;
    align-items: flex-start;
    gap: 10px;
}

#ratgeber-fliesenschienen .fs-guide-feature-card .fs-guide-icon {
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
}

#ratgeber-fliesenschienen .fs-guide-feature-card .fs-guide-h3 {
    margin: 0 0 4px;
}

#ratgeber-fliesenschienen .fs-guide-feature-card .fs-guide-text {
    margin: 0;
}

@media (max-width: 900px) {
    #ratgeber-fliesenschienen #warum .fs-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    #ratgeber-fliesenschienen #warum .fs-guide-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- 2. Profilarten ? Karten mit "Tabellenlook" ---------- */

/* Grid etwas luftiger */
#ratgeber-fliesenschienen #profile .fs-guide-grid.fs-guide-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 880px) {
    #ratgeber-fliesenschienen #profile .fs-guide-grid.fs-guide-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Karten-Grundoptik */
#ratgeber-fliesenschienen #profile .fs-guide-card {
    background: #ffffff;
    border-radius:1px;
    padding: 14px 16px 10px;
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 3px 10px rgba(0, 40, 60, 0.06);
}

/* Überschrift + Einleitungstext */
#ratgeber-fliesenschienen #profile .fs-guide-card .fs-guide-h3 {
    margin: 0 0 4px;
}
#ratgeber-fliesenschienen #profile .fs-guide-card .fs-guide-text {
    margin: 0 0 6px;
}

/* "Pseudo-Tabelle": Einsatz / Vorteile / Achte auf */
#ratgeber-fliesenschienen #profile .fs-guide-card .fs-guide-list {
    margin: 4px 0 0;
    padding-left: 0;
    list-style: none;
}

#ratgeber-fliesenschienen #profile .fs-guide-card .fs-guide-list li {
    padding: 4px 0;
    border-top: 1px dashed rgba(148, 163, 184, 0.6);
}

/* erstes Element ohne Linie */
#ratgeber-fliesenschienen #profile .fs-guide-card .fs-guide-list li:first-child {
    border-top: none;
}

/* Label-Spalte schön bündig */
#ratgeber-fliesenschienen #profile .fs-guide-card .fs-guide-list li strong {
    display: inline-block;
    min-width: 90px;
    font-weight: 600;
}

/* ---------- 3. Materialien & Finishes ? ebenfalls "Tabellenlook" ---------- */

/* Material-Karten etwas separiert */
#ratgeber-fliesenschienen #material .fs-guide-grid.fs-guide-grid-2 {
    gap: 18px;
    margin-top: 10px;
}

#ratgeber-fliesenschienen #material .fs-guide-card {
    background: #ffffff;
    border-radius:1px;
    padding: 14px 16px 10px;
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 3px 10px rgba(0, 40, 60, 0.06);
}

/* Intro-Text direkt unter H2 */
#ratgeber-fliesenschienen #material .fs-guide-text {
    margin-bottom: 8px;
}

/* Listen in Material-Karten als Pseudo-Tabelle */
#ratgeber-fliesenschienen #material .fs-guide-card .fs-guide-list {
    margin: 4px 0 0;
    padding-left: 0;
    list-style: none;
}

#ratgeber-fliesenschienen #material .fs-guide-card .fs-guide-list li {
    padding: 4px 0;
    border-top: 1px dashed rgba(148, 163, 184, 0.6);
}

#ratgeber-fliesenschienen #material .fs-guide-card .fs-guide-list li:first-child {
    border-top: none;
}

#ratgeber-fliesenschienen #material .fs-guide-card .fs-guide-list li strong {
    display: inline-block;
    min-width: 92px;
    font-weight: 600;
}

/* Finishes-Karten nutzen denselben Stil */
#ratgeber-fliesenschienen #material .fs-guide-section .fs-guide-card {
    background: #ffffff;
    border-radius:1px;
    padding: 12px 14px 10px;
}

/* ---------- 4. Auswahlhilfe / Verarbeitung (2er-Grid) ---------- */

#ratgeber-fliesenschienen #material + .fs-guide-grid.fs-guide-grid-2 {
    margin-top: 16px;
    gap: 18px;
}

#ratgeber-fliesenschienen #material + .fs-guide-grid.fs-guide-grid-2 .fs-guide-card {
    background: #ffffff;
    border-radius:1px;
    padding: 14px 16px 10px;
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 3px 10px rgba(0, 40, 60, 0.06);
}

#ratgeber-fliesenschienen #material + .fs-guide-grid.fs-guide-grid-2 .fs-guide-card .fs-guide-list {
    margin-top: 4px;
}

/* ---------- 5. Schritt-für-Schritt ? Steps etwas luftiger ---------- */

#ratgeber-fliesenschienen #schritt .fs-guide-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 10px;
}

#ratgeber-fliesenschienen #schritt .fs-guide-step {
    background: #ffffff;
    border-radius:1px;
    padding: 10px 12px;
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 2px 8px rgba(0, 40, 60, 0.05);
}

#ratgeber-fliesenschienen #schritt .fs-guide-step .fs-guide-h3 {
    margin: 0 0 4px;
}

#ratgeber-fliesenschienen #schritt .fs-guide-step .fs-guide-text,
#ratgeber-fliesenschienen #schritt .fs-guide-step .fs-guide-list {
    margin: 0;
}

@media (max-width: 840px) {
    #ratgeber-fliesenschienen #schritt .fs-guide-steps {
        grid-template-columns: 1fr;
    }
}

/* ---------- 6. Fehler & Profi-Tipps ? Boxen angleichen ---------- */

#ratgeber-fliesenschienen #fehler.fs-guide-section.fs-guide-grid.fs-guide-grid-2 {
    gap: 18px;
    margin-top: 16px;
}

/* ---------- 7. CTA unten ? Buttons wieder im FS24-Look ---------- */

#ratgeber-fliesenschienen .fs-guide-cta-card {
    margin-top: 20px;
    padding: 16px 18px 18px;
    border-radius:1px;
    background: linear-gradient(
        135deg,
        rgba(10,126,194,0.12),
        rgba(38,193,174,0.10)
    );
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 6px 18px rgba(0, 40, 60, 0.12);
    text-align: center;
}

#ratgeber-fliesenschienen .fs-guide-cta-card .fs-guide-h2 {
    margin-bottom: 10px;
}

#ratgeber-fliesenschienen .fs-guide-cta-card .fs-guide-cta-row {
    justify-content: center;
    gap: 0.75rem;
}

/* Buttons NICHT weiß, sondern Standard-Gradient */
#ratgeber-fliesenschienen .fs-guide-cta-card .fs-guide-btn {
    background: var(--fs-gradient-ui) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(0, 70, 110, 0.35);
}

/* leichte Hover-Verstärkung */
#ratgeber-fliesenschienen .fs-guide-cta-card .fs-guide-btn:hover {
    box-shadow: 0 8px 22px rgba(0, 70, 110, 0.45);
}
/*****************************************************
 * FS24 ? Fixes für Ratgeber Fliesenschienen
 * (#ratgeber-fliesenschienen)
 * - Hero-Box nicht über Navbar + ohne weiße Karte
 * - Mehr Luft zwischen Schnellzugriff-Buttons & Karten
 * - Stärkere CTA-Box unten
 *****************************************************/

/* 1) HERO: keine weiße Karte, nicht über die Navbar legen */
#ratgeber-fliesenschienen .fs-guide-hero {
    background: transparent !important;   /* weiße Box weg */
    border: none !important;
    box-shadow: none !important;
    padding-left: 0;
    padding-right: 0;

    position: static !important;         /* nicht "schwebend" */
    z-index: auto !important;            /* damit die Navbar oben bleibt */
}

/* CTA-Row im Hero zentrieren, Buttons bleiben wie global definiert */
#ratgeber-fliesenschienen .fs-guide-hero .fs-guide-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.1rem;
}

/* 2) Abstände rund um Schnellzugriff & Karten/Kacheln */

/* Abstand unter der Schnellzugriff-Box mit den 4 Buttons */
#ratgeber-fliesenschienen #profile .fs-guide-box {
    margin-top: 10px;
    margin-bottom: 18px;
}

/* Grid der Profil-Kacheln etwas luftiger */
#ratgeber-fliesenschienen #profile .fs-guide-grid.fs-guide-grid-3 {
    gap: 20px;
}

/* Jede Karte selbst bekommt einen kleinen Außenabstand nach unten
   (falls sie mal nicht im Grid sitzt) */
#ratgeber-fliesenschienen .fs-guide-card {
    margin-bottom: 6px;
}

/* Generell bei allen fs-guide-section im Fliesenschienen-Ratgeber
   etwas mehr Abstand nach oben, damit Blöcke klar getrennt sind */
#ratgeber-fliesenschienen .fs-guide-section {
    margin-top: 1.8rem;
}

/* 3) CTA-Box ganz unten: kräftigere FS24-Optik */

#ratgeber-fliesenschienen .fs-guide-cta-card {
    background: linear-gradient(
        135deg,
        var(--fs-blue-deep) 0%,
        var(--fs-blue-main) 40%,
        var(--fs-teal-main) 85%,
        #e0fbf6 100%
    ) !important;
    color: #ffffff;
    border: none;
    box-shadow: 0 10px 26px rgba(0, 40, 80, 0.25);
}

/* Überschrift in der CTA-Box klar lesbar lassen */
#ratgeber-fliesenschienen .fs-guide-cta-card .fs-guide-h2 {
    color: #ffffff;
}

/* Buttons in der CTA-Box: klarer Kontrast, kein Weiß */
#ratgeber-fliesenschienen .fs-guide-cta-card .fs-guide-btn {
    background: #ffffff !important;
    color: var(--fs-blue-deep) !important;
    border-radius:1px;
    border: none;
    box-shadow: 0 4px 14px rgba(0, 40, 80, 0.35);
}

#ratgeber-fliesenschienen .fs-guide-cta-card .fs-guide-btn:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}
/****************************************************
 * FS24 ? Ratgeber Farbauswahl
 * FINALER BLOCK (bitte alte #ratgeber-farbauswahl-CSS ersetzen)
 ****************************************************/

/* Grundlayout */
#ratgeber-farbauswahl .fs-guide-inner {
    max-width: 980px;
    margin: 0 auto;
}

/* ---------- Abschnitt 1: Grundprinzipien + Oberflächen-Guide als Kachel ---------- */

#ratgeber-farbauswahl section.fs-guide-section:first-of-type {
    margin-top: 1.2rem;
}

#ratgeber-farbauswahl section.fs-guide-section:first-of-type .fs-guide-h2 {
    margin-bottom: 0.35rem;
}

#ratgeber-farbauswahl section.fs-guide-section:first-of-type .fs-guide-h3 {
    margin-top: 0.9rem;
    margin-bottom: 0.35rem;
}

/* Kachel-Container um die beiden Listen + Hinweis */
#ratgeber-farbauswahl section.fs-guide-section:first-of-type {
    background: #ffffff;
    border-radius:1px;
    padding: 16px 18px 14px;
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 4px 14px rgba(0, 40, 60, 0.08);
}

/* Listen innen leicht gegliedert */
#ratgeber-farbauswahl section.fs-guide-section:first-of-type .fs-guide-list li {
    padding: 3px 0;
    border-bottom: 1px dashed rgba(0, 63, 95, 0.16);
}
#ratgeber-farbauswahl section.fs-guide-section:first-of-type .fs-guide-list li:last-child {
    border-bottom: none;
}

/* Hinweis unten in eigener Mini-Box */
#ratgeber-farbauswahl .fs-guide-note {
    margin-top: 10px;
    background: #f5f9fc;
    border-left: 4px solid var(--fs-blue-main);
    padding: 8px 12px;
    border-radius:1px;
    font-size: 0.92rem;
    color: var(--fs-text-mid);
}

/* ---------- Divider ---------- */

#ratgeber-farbauswahl .fs-guide-divider {
    border: 0;
    height: 1px;
    margin: 2rem 0 1.6rem;
    background: linear-gradient(90deg, transparent, rgba(15,23,42,0.18), transparent);
}

/* ---------- Farbwelten-Kacheln ---------- */

#ratgeber-farbauswahl .fs-guide-color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
    margin-top: 12px;
}

#ratgeber-farbauswahl .fs-guide-color-card {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f3f8fc 40%,
        #edf5fb 100%
    );
    border-radius:1px;
    padding: 14px 16px;
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 4px 14px rgba(0,40,60,0.08);
}

#ratgeber-farbauswahl .fs-guide-color-card ul.fs-guide-list li {
    padding: 3px 0;
    line-height: 1.55;
}

#ratgeber-farbauswahl .fs-guide-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

#ratgeber-farbauswahl .fs-guide-button-row .fs-guide-btn {
    border-radius:1px;
    padding: 8px 16px;
    font-size: 13px;
    background: var(--fs-gradient-ui);
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,40,80,0.22);
}

#ratgeber-farbauswahl .fs-guide-button-row .fs-guide-btn:hover {
    background: var(--fs-gradient-ui-hover);
}

/* ---------- Tabellen-Wrapper: Header-Balken über volle Breite ---------- */

#ratgeber-farbauswahl .fs-guide-table-wrap {
    margin-top: 12px;
    border-radius:1px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--fs-border-soft);
    box-shadow: 0 4px 14px rgba(0,40,60,0.08);

    /* 1. Layer: horizontaler Blau?Türkis-Balken, 52px hoch, über gesamte Breite
       2. Layer: weicher Hintergrund für den restlichen Bereich */
    background:
        linear-gradient(
            90deg,
            var(--fs-blue-deep) 0%,
            var(--fs-blue-main) 50%,
            var(--fs-teal-main) 100%
        ) 0 0 / 100% 52px no-repeat,
        linear-gradient(
            135deg,
            var(--fs-bg-section) 0%,
            #ffffff 50%,
            var(--fs-bg-section-soft) 100%
        ) 0 0 / 100% 100% no-repeat;
}

/* Tabelle selbst füllt die Box, ohne Min-Breite-Stress */
#ratgeber-farbauswahl .fs-guide-table {
    width: 100% !important;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.93rem;
}

/* Kopfzellen transparent, damit der Balken darunter wirkt */
#ratgeber-farbauswahl .fs-guide-table thead th {
    color: #ffffff !important;
    background: transparent !important;
    padding: 10px 12px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.35);
    white-space: nowrap;
}

/* Zellen ? komplett verlaufend, keine weißen rechten Streifen */
#ratgeber-farbauswahl .fs-guide-table tbody td {
    padding: 9px 12px;
    line-height: 1.55;
    color: var(--fs-text-dark);

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #f1f7fb 35%,
        #e9f3fa 70%,
        #f7fbff 100%
    );
    border-bottom: 1px solid rgba(0,63,95,0.10);
}

/* Zebra-Reihen */
#ratgeber-farbauswahl .fs-guide-table tbody tr:nth-child(even) td {
    background: linear-gradient(
        90deg,
        #f7fbff 0%,
        #eef5fb 33%,
        #e6f1fa 66%,
        #f7fbff 100%
    );
}

/* Hover-Zeile */
#ratgeber-farbauswahl .fs-guide-table tbody tr:hover td {
    background: linear-gradient(
        90deg,
        rgba(10,126,194,0.06),
        rgba(38,193,174,0.06)
    );
}

#ratgeber-farbauswahl .fs-guide-table tbody tr:last-child td {
    border-bottom: none;
}

/* ---------- CTA unten ---------- */

#ratgeber-farbauswahl .fs-guide-cta--bottom {
    margin-top: 1.6rem;
    text-align: center;
}

#ratgeber-farbauswahl .fs-guide-cta--bottom .fs-guide-btn {
    border-radius:1px;
    padding: 12px 24px;
    background: var(--fs-gradient-ui);
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0,40,60,0.22);
}

#ratgeber-farbauswahl .fs-guide-cta--bottom .fs-guide-btn:hover {
    background: var(--fs-gradient-ui-hover);
    transform: translateY(-1px);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
    #ratgeber-farbauswahl .fs-guide-color-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    #ratgeber-farbauswahl .fs-guide-table {
        font-size: 0.88rem;
        min-width: 520px;
    }
}
/* =========================================
   Fix: Entfernt margin-left und margin-top
   für den Eintrag "Schachtabdeckung"
   ========================================= */

.fs-btn-primary {
    position: relative;
    background: var(--fs-gradient-ui);
    color: #ffffff;
    /* border: 2px solid transparent;  <-- RAUS */
    border: none;
    overflow: hidden;
}
.fs-btn-secondary:hover {
    background: var(--fs-gradient-ui-hover);
    color: #ffffff;

    border-color: var(--fs-gradient-ui-hover); /* Füllt den Rand sichtbar */
}
/* =========================================
   FS24 NAV ICONS ? FINAL (BALANCIERTE BASIS)
   ========================================= */

/* Nav-Link neutral */
#shop-nav.nav-icons .nav-link {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Icons ? Grundzustand (balanciert & CI-passend) */
#shop-nav.nav-icons .nav-link .fas,
#shop-nav.nav-icons .nav-link .far,
#shop-nav.nav-icons .nav-link .fa,
#shop-nav .cart-icon-dropdown-icon,
.search-wrapper-dropdown .nav-link .fas.fa-search {

    background: none !important;
    width: auto !important;
    height: auto !important;
    border-radius:1px;
    box-shadow: none !important;

    display: inline;
    font-size: 26px;
    line-height: 1;

    color: #0F8FB8 !important; /* ?? neue Standardfarbe */

    transition:
        color 0.18s ease,
        transform 0.12s ease,
        text-shadow 0.18s ease;
}

/* Hover ? dunkler Fokus */
#shop-nav.nav-icons .nav-link:hover .fas,
#shop-nav.nav-icons .nav-link:hover .far,
#shop-nav.nav-icons .nav-link:hover .fa,
#shop-nav.nav-icons .nav-link:hover .cart-icon-dropdown-icon,
#shop-nav.nav-icons .nav-link:focus .fas,
#shop-nav.nav-icons .nav-link:focus .far,
#shop-nav.nav-icons .nav-link:focus .fa,
#shop-nav.nav-icons .nav-link:focus .cart-icon-dropdown-icon {

    color: var(--fs-blue-deep) !important;

    text-shadow: 0 2px 4px rgba(0, 40, 60, 0.25);
    transform: translateY(-1px);
}

/* Active */
#shop-nav.nav-icons .nav-link:active .fas,
#shop-nav.nav-icons .nav-link:active .far,
#shop-nav.nav-icons .nav-link:active .fa,
#shop-nav .cart-icon-dropdown-icon {
    transform: scale(0.94);
}

/* Badge */
#shop-nav .fa-sup {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius:1px;
    background: #e0245e;
    color: #ffffff;
    font-size: 10px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Warenkorbpreis */
#shop-nav .cart-icon-dropdown-price {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #0F8FB8 !important; /* angepasst */
}

/* Mobile */
@media (max-width: 768px) {
    #shop-nav.nav-icons .nav-link .fas,
    #shop-nav.nav-icons .nav-link .far,
    #shop-nav.nav-icons .nav-link .fa,
    #shop-nav .cart-icon-dropdown-icon {
        font-size: 26px;
    }
}

/* Social Media richtig nebeneinander anordnen */
.footer-social-media .footer-additional-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* LI-Elemente horizontal */
.footer-social-media .footer-additional-wrapper li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Links selbst kompakt halten */
.footer-social-media .footer-additional-wrapper li a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
@media (hover) {
    .btn-animated .btn-outline-primary:hover::after {
        width: 300%;
        background: var(--fs-gradient-ui-hover); /* dein blau-blauer Verlauf */
    }
}
.btn-outline-primary,
a.btn-outline-primary,
button.btn-outline-primary {
    border-color: var(--fs-blue-main) !important;
    color: var(--fs-blue-main) !important;
}

.btn-outline-primary:hover,
a.btn-outline-primary:hover,
button.btn-outline-primary:hover {
    border-color: transparent !important;
    color: #ffffff !important;
}
/* ======================================================
   FS24 ? Versandkostenfrei Box (rund, verlauf, ohne Balken)
   ====================================================== */

#shipment_33 {
    background: var(--fs-gradient-ui); /* voller FS24-Verlauf */
    border-radius:1px;                /* wie Warenkorb-Buttons */
}

/* TD-Styling ? keine Balken mehr */
#shipment_33 td {
    padding: 12px 14px;
    color: #ffffff !important; 
    font-weight: 600;

    border: none !important;          /* Balken komplett weg */
}

/* Linke Spalte Check-Bubble */
#shipment_33 td:first-child {
    position: relative;
    padding-left: 38px;
}

#shipment_33 td:first-child::before {
    content: "?";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);

    width: 20px;
    height: 20px;
    border-radius:1px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    font-weight: 700;

    background: #ffffff;
    color: var(--fs-blue-main);
}

/* "versandkostenfrei" Badge */
#shipment_33 strong {
    display: inline-block;
    padding: 5px 14px;
    border-radius:1px;

    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);

    color: #ffffff !important;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* ============================================
   FS24 ? Usecases mobil horizontal scrollen
   (nur Slider-Effekt, Layout innen bleibt)
   ============================================ */

@media (max-width: 900px) {

    /* Wrapper: horizontal scrollen statt alles untereinander */
    .fs-usecases-inner {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 16px;

        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
    }

    /* Jede Usecase-Box wird ein "Slide" im Slider */
    .fs-usecase {
        flex: 0 0 85%;       /* Breite pro Karte, kannst du auf 80/90% anpassen */
        max-width: 85%;
        scroll-snap-align: start;
    }

    /* Inneres Layout der Karte: Bild oben, Text darunter (wie gehabt) */
    .fs-usecase {
        flex-direction: column;
    }

    .fs-usecase-media,
    .fs-usecase-content {
        flex: 0 0 auto;
        max-width: 100%;
    }

    /* Bild: verhindert seltsame weiße Balken durch 100%-Height */
    .fs-usecase-media img,
    .fs-mobile-img-fix {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }
}
/* =====================================================
   FS24 ? Sections auf Mobile wirklich 100% Bildschirmbreite
   (Hero, Usecases, Bestseller, Zielgruppen, etc.)
   ===================================================== */

@media (max-width: 768px) {

    .fs-hero,
    .fs-cat-overview,
    .fs-bestseller,
    .fs-usecases,
    .fs-targets,
    .fs-new,
    .fs-reviews,
    .fs-knowledge,
    .cta-band,
    .fs-why {
        /* unabhängig vom umgebenden Container immer voll über die Viewport-Breite gehen */
        width: 100vw;
        max-width: 100vw;

        /* "aus dem Container rausziehen" */
        margin-left: 50%;
        transform: translateX(-50%);

        /* sicherstellen, dass nix drüber hinausrutscht */
        box-sizing: border-box;
    }
}
/* =====================================================
   FS24 ? Fullwidth Banner & Bilder auf Mobile
   Nutzbar über Klasse .fs-banner-fullwidth
   ===================================================== */

@media (max-width: 768px) {

    .fs-banner-fullwidth {
        width: 100vw;
        max-width: 100vw;

        margin-left: 50%;
        transform: translateX(-50%);

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box;
        overflow: hidden; /* Entfernt weiße Ränder */
    }

    .fs-banner-fullwidth img {
        display: block;
        width: 100%;
        height: auto;
    }
}
/* =====================================================
   FS24 ? Zwei OPC-Bannerbilder nebeneinander (mit Abstand),
   ohne die Spalte / den Slider zu beeinflussen
   ===================================================== */

@media (max-width: 768px) {

    /* Nur die Bild-Widgets selbst nebeneinander stellen */
    .fs-banner-fullwidth .fs-banner-img {
        display: inline-block;
        width: calc(50% - 2px);
        max-width: calc(50% - 8px);
        box-sizing: border-box;

        margin: 0 !important;
        padding: 0 !important;
        vertical-align: top; /* sorgt dafür, dass beide oben bündig sind */
    }

    /* der zweite Block bekommt den Abstand nach links */
    .fs-banner-fullwidth .fs-banner-img + .fs-banner-img {
        margin-left: 8px; /* dein gewünschter Abstand */
    }

    /* Bilder / picture sauber einpassen */
    .fs-banner-fullwidth .fs-banner-img picture,
    .fs-banner-fullwidth .fs-banner-img img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 !important;   /* überschreibt inline margin-top */
        padding: 0 !important;
        object-fit: cover;
    }
}
/* ======================================================
   FS24 ? Sperrgutversand (#shipment_26)
   Durchgehender Verlauf + leichte Rundung
   ====================================================== */

#shipment_26 {
    position: relative;
}

#shipment_26::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: var(--fs-gradient-ui);   /* EIN durchgehender Gradient */
    border-radius:1px;                  /* leichte Rundung */
}

#shipment_26 td {
    position: relative;
    z-index: 1;                           /* Inhalt über dem Gradient */
    padding: 12px 14px;
    color: #ffffff !important;
    font-weight: 600;
    border: none !important;
    background: transparent !important;   /* nicht TD einfärben! */
}

/* Preis-Badge rechts */
#shipment_26 td.text-right-util strong {
    display: inline-block;
    padding: 4px 12px;
    border-radius:1px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    color: #ffffff !important;
    font-size: 13px;
}
#shipment_26 td:first-child {
    vertical-align: middle !important;
    text-align: left !important;      /* bleibt linksbündig */
    padding-left: 18px;               /* wirkt optisch sauberer */
}


/* Wunschliste-Icon ausblenden (global oder nur mobil, wie du magst) */
@media (max-width: 768px) {
    li#shop-nav-wish,
    li#shop-nav-wish * {
        display: none !important;
        visibility: hidden !important;
    }
}

/*===========================================
   FS24 ? Hauptkategorien mobil
   Fullwidth + Slider, erste Kachel mittig
   ============================================ */
@media (max-width: 768px) {

    /* SECTION: wirklich fullwidth, kein weißer Rand */
    section#fs-cat-overview.fs-cat-overview {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 50% !important;
        transform: translateX(-50%) !important;
        box-sizing: border-box;

        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 26px !important;
        padding-bottom: 24px !important;
    }

    /* Innerer Wrapper ohne zusätzliche Ränder */
    section#fs-cat-overview .fs-cat-overview-inner {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* Titel + Sub kleiner & ?magaziniger? */
    section#fs-cat-overview .fs-cat-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin: 0 0 6px !important;
        text-align: center;
        padding: 0 16px !important;
        box-sizing: border-box;
    }

    section#fs-cat-overview .fs-cat-sub {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin: 0 auto 16px !important;
        max-width: 90% !important;
        text-align: center;
        padding: 0 16px !important;
        box-sizing: border-box;
    }

    /* GRID als Slider ? mit Padding, damit erste/letzte Karte mittig stehen */
    section#fs-cat-overview .fs-cat-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;

        gap: 14px !important;
        margin: 0 !important;
        padding: 0 10vw 10px 10vw !important; /* 10vw links/rechts = mittige erste/letzte Karte */

        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    /* Scrollbar ausblenden (optional) */
    section#fs-cat-overview .fs-cat-grid::-webkit-scrollbar {
        display: none;
    }

    /* Jede Karte = Slide, 80% der Viewportbreite, Snap in der Mitte */
    section#fs-cat-overview .fs-cat-card {
        flex: 0 0 80vw !important;
        max-width: 80vw !important;
        min-width: 80vw !important;

        scroll-snap-align: center;
        margin: 0 !important;
    }

    /* Optik der Cards auf Mobile */
    section#fs-cat-overview .fs-cat-card-inner {
        border-radius:1px;
        box-shadow: 0 4px 14px rgba(0, 40, 60, 0.10) !important;
    }

    section#fs-cat-overview .fs-cat-card-image {
        height: 190px !important;
    }

    section#fs-cat-overview .fs-cat-card-title {
        font-size: 14px !important;
        margin: 4px 0 4px !important;
    }

    section#fs-cat-overview .fs-cat-card-text {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }

    section#fs-cat-overview .fs-cat-card-link {
        font-size: 12px !important;
    }
}
/* ============================================
   FS24 ? Mobile: Hero + Sections-Typo + Usecases
   (keine neuen Slider außer den Usecases)
   ============================================ */

/* ---------- 1) HERO: Fliesenschienen & LED ----------
   Überschrift + Teaser wie bei den anderen Sections (18/13)
-------------------------------------------------------- */
@media (max-width: 768px) {

    .fs-hero-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin: 0 0 6px !important;
        text-align: center;
        padding: 0 16px !important;
        box-sizing: border-box;
    }

    .fs-hero-sub {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin: 0 auto 18px !important;
        max-width: 90% !important;
        text-align: center;
        padding: 0 16px !important;
        box-sizing: border-box;
    }

    /* -----------------------------------------
       2) Einheitliche Typografie für Section-Titel
          (wie bei Hauptkategorien: 18 / 13 px)
       ----------------------------------------- */

    /* Hauptüberschriften der Sections */
    .fs-cat-title,
    .fs-bestseller-title,
    .fs-targets-title,
    .fs-new-title,
    .fs-reviews-title,
    .fs-knowledge-title,
    .fs-why-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin: 0 0 6px !important;
        text-align: center;
        padding: 14px 16px !important;
        box-sizing: border-box;
        height: 39px;
    }

    /* Untertitel / Lead-Texte der Sections */
    .fs-cat-sub,
    .fs-bestseller-sub,
    .fs-targets-sub,
    .fs-new-sub,
    .fs-reviews-sub,
    .fs-knowledge-sub,
    .fs-why-lead {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin: 14px auto 16px !important;
        max-width: 90% !important;
        text-align: center;
        padding: 0 16px !important;
        box-sizing: border-box;
    }

    /* -----------------------------------------
       3) Section-Padding oben/unten angleichen
       (Hero & Kat-Overview haben schon eigenes Mobile-Padding)
       ----------------------------------------- */

    .fs-bestseller,
    .fs-targets,
    .fs-new,
    .fs-reviews,
    .fs-knowledge,
    .fs-why {
        padding-top: 0px !important;
        padding-bottom: 10px !important;
        margin-bottom: -15px
    }

    /* Innenbreite der Sections sauber vollflächig,
       aber ohne nochmal Slider-Logik reinzumischen */
    .fs-bestseller-inner,
    .fs-targets-inner,
    .fs-new-inner,
    .fs-reviews-inner,
    .fs-knowledge-inner {
        max-width: 100% !important;
        margin: 0 auto;
        padding: 0 12px !important;
        box-sizing: border-box;
    }

    /* Reviews-Zusammenfassung leicht kompakter */
    .fs-reviews-summary {
        margin-bottom: 12px !important;
    }

    /* Karten-Schrift etwas kleiner, damit es auf Mobile ?magaziniger? wirkt */

    .fs-target-card-title,
    .fs-knowledge-card-title {
        font-size: 15px !important;
    }

    .fs-target-card-text,
    .fs-knowledge-card-text,
    .fs-review-text {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .fs-review-card {
        font-size: 13px !important;
    }

    /* Warum-Box: leicht enger an den Rand auf Mobile */
    .fs-why-box {
        margin: 0 12px !important;
        padding: 22px 18px 24px !important;
    }

    /* -----------------------------------------
       4) Usecase-Typografie (Saubere Abschlüsse etc.)
       ----------------------------------------- */
    .fs-usecase-title {
        font-size: 18px !important;
        line-height: 1.35 !important;
        margin: 0 0 8px !important;
    }

    .fs-usecase-text {
        font-size: 13px !important;
        line-height: 1.55 !important;
        margin-bottom: 10px !important;
    }

    .fs-usecase-tag {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }
}

/* ---------- 5) Usecases-Slider: erste Kachel mittig
      + Balken oben durchgezogen statt halb links
   ------------------------------------------------- */
@media (max-width: 900px) {

    /* Wrapper: horizontal scrollen + Padding, damit
       die erste Kachel mittig unter dem Text steht */
    .fs-usecases-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;

        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;

        /* 7.5vw links/rechts ? 85vw-Kachel sitzt mittig */
        padding: 0 7.5vw 10px 7.5vw !important;
        scroll-snap-type: x mandatory;
    }

    /* Jede Usecase-Box als ?Slide?,
       zentriert im Viewport (snap-align:center) */
    .fs-usecase {
        flex: 0 0 85vw !important;
        max-width: 85vw !important;
        scroll-snap-align: center;
        display: flex;
        flex-direction: column;
    }

    .fs-usecase-media,
    .fs-usecase-content {
        flex: 0 0 auto;
        max-width: 100%;
    }

    /* Bild ohne komische Höhenstreckung */
    .fs-usecase-media img,
    .fs-mobile-img-fix {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }

    /* Balken nicht mehr ?halb links?:
       Statt senkrechtem Balken gibt es auf Mobile
       einen durchgehenden oberen Balken in der Textbox */

    .fs-usecase-content {
        border-left: none !important;
        border-top: 4px solid var(--fs-blue-main);
    }

    .fs-usecase--alt .fs-usecase-content {
        border-top-color: var(--fs-teal-main);
    }
}
/* ============================================
   FS24 ? Hauptkategorien mobil: kein Hochspringen beim Klick
   ============================================ */
@media (max-width: 768px) {

    /* Hover-Transform auf Mobile deaktivieren */
    section#fs-cat-overview .fs-cat-card:hover {
        transform: none !important;
    }

    /* Optional: auch auf :active / :focus, damit wirklich Ruhe ist */
    section#fs-cat-overview .fs-cat-card:active,
    section#fs-cat-overview .fs-cat-card:focus {
        transform: none !important;
    }
}
/* HERO: alle Buttons optisch wie die Warenkorb-Buttons (.btn-primary) */
.fs-hero-actions .fs-btn,
.fs-hero-actions .fs-btn-primary,
.fs-hero-actions .fs-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 38px;
    gap: 10px;

    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;

    background: var(--fs-gradient-ui);
    border-radius:1px;
    border: none;
    cursor: pointer;

    box-shadow: none;
    transition: transform .12s ease, filter .12s ease, background .12s ease;
    min-height: 44px;
}

/* Hover wie im Warenkorb */
.fs-hero-actions .fs-btn:hover,
.fs-hero-actions .fs-btn-primary:hover,
.fs-hero-actions .fs-btn-secondary:hover {
    background: var(--fs-gradient-ui-hover);
    transform: translateY(-2px);
}

/* Das alte invertierte Hover im Hero überschreiben */
.fs-hero .fs-btn-primary:hover {
    background: var(--fs-gradient-ui-hover);
    color: #ffffff;
    border-color: transparent;
}

/* Falls irgendwo noch eine ?weiße? Secondary im Hero drin ist, hier neutralisieren */
.fs-hero-actions .fs-btn-secondary {
    border: none;
    background: var(--fs-gradient-ui);
    color: #ffffff;
}
/* Zielgruppen: Highlight-Kachel (z. B. Gewerbekunden) im gleichen Verlauf wie ?versandfrei ab 300 ?? */
.fs-target-card--highlight {
    position: relative;
    overflow: hidden;
    background: var(--fs-gradient-ui); /* vorher var(--fs-gradient-logo) */
    border: none;
    box-shadow: 0 5px 18px rgba(0, 70, 100, 0.26);
    color: #ffffff;
}

.fs-target-card--highlight .fs-target-card-kicker,
.fs-target-card--highlight .fs-target-card-link {
    color: #ffffff;
    opacity: 0.9;
}

.fs-target-card--highlight .fs-target-card-title {
    color: #ffffff;
}

.fs-target-card--highlight .fs-target-card-text {
    color: #eef7fb;
}
/* Usecase-Labels: gleicher UI-Verlauf wie Buttons / Versandfrei-Kachel */
.fs-usecase-label {
    background: var(--fs-gradient-ui) !important;
    color: #ffffff;
}
/* Caption unter den Kacheln links ausrichten */
.caption {
    text-align: left !important;
    padding-left: 4px; /* optional, kannst du auch weglassen */
}

/* Schwarze, hochwertige Schrift für den Link */
.caption a {
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0.1px;

    color: #000 !important;     /* reine Schwarze Schrift */
    text-decoration: none;

    display: inline-block;
    margin-top: 6px;

    line-height: 1.35;

    transition: color .18s ease;
}

/* Hover ? minimal, schlicht, nur dunkler */
.caption a:hover {
    color: #111 !important;      /* leicht dunkleres Schwarz */
    text-decoration: underline;
}
/* FIX: Plus und Minus exakt gleich große Boxen */
.btn .fas.fa-plus,
.btn .fas.fa-minus {
    display: inline-block;
    width: 20px;   /* Icon bekommt feste Breite */
    text-align: center;
}
/*************************************************
 * FS24 ? Unterkategorie-Kacheln (Quadratprofile)
 * clean, weiß, modern, FS24-Gradient oben
 *************************************************/

.row.row-eq-height.content-cats-small {
    margin-bottom: 28px;
}

/* Äußere Kachel */
.row.row-eq-height.content-cats-small .sub-categories {
    position: relative;
    height: 100%;
    padding: 12px 10px 10px;

    border-radius:1px;
    border: 1px solid var(--fs-border-soft);

    /* CLEANER WEISSER HINTERGRUND */
    background: #ffffff;

    /* dezente Card-Optik */
    box-shadow: 0 3px 10px rgba(0, 40, 60, 0.06);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    text-align: center;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

/* FS24-Gradient-Akzent oben */
.row.row-eq-height.content-cats-small .sub-categories::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    border-radius:1px;
    background: var(--fs-gradient-ui); /* UI-Blau Verlauf */
}

/* Hover-Effekt */
.row.row-eq-height.content-cats-small .sub-categories:hover {
    transform: translateY(-3px);
    border-color: rgba(10,126,194,0.5);
    box-shadow: 0 6px 18px rgba(0, 40, 60, 0.18);
}

/* Link um das Bild: volle Breite */
.row.row-eq-height.content-cats-small .sub-categories > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Bildbereich */
.row.row-eq-height.content-cats-small .subcategories-image {
    padding: 4px 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Bildgröße ? deutlicher, aber nicht übertrieben */
.row.row-eq-height.content-cats-small .subcategories-image img {
    max-height: 110px;
    max-width: 110px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Text-Wrapper unter dem Bild */
.row.row-eq-height.content-cats-small .sub-categories > div {
    width: 100%;
    margin-top: -15px;
}

/* Caption-Text (zentriert, FS24-Blau) */
.row.row-eq-height.content-cats-small .caption {
    margin: 4px 4px 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center !important;
}

/* Link-Optik im Normalzustand */
.row.row-eq-height.content-cats-small .caption a {
    display: block;
    width: 100%;
    color: var(--fs-text-dark);
    text-decoration: none;
    text-align: center !important;
}

/* Hover ? Text etwas blauer */
.row.row-eq-height.content-cats-small .sub-categories:hover .caption a {
    color: var(--fs-blue-deep);
}

/* Mobile (kleineres Bild, weniger Padding) */
@media (max-width: 768px) {
    .row.row-eq-height.content-cats-small .sub-categories {
        padding: 10px 6px 8px;
    }
    .row.row-eq-height.content-cats-small .subcategories-image img {
        max-height: 95px;
        max-width: 95px;
    }
}
/* ========================================
   FS24 ? Vertikale Abstände für alle Devices
   ======================================== */

/* Standard: alle Kachel-Spalten unten Abstand */
.row.row-eq-height.content-cats-small > .col,
.row.row-eq-height.content-cats-small > [class*="col-"] {
    margin-bottom: 18px; /* universeller Abstand */
}

/* Mobile (<= 768px): etwas mehr Luft für 2-Spalten-Layout */
@media (max-width: 768px) {
    .row.row-eq-height.content-cats-small > .col,
    .row.row-eq-height.content-cats-small > [class*="col-"] {
        margin-bottom: 22px;
    }
}

/* Tablet (768?992px): mittlerer Abstand */
@media (min-width: 768px) and (max-width: 992px) {
    .row.row-eq-height.content-cats-small > .col,
    .row.row-eq-height.content-cats-small > [class*="col-"] {
        margin-bottom: 20px;
    }
}

/* Desktop (>= 992px): etwas kompakter */
@media (min-width: 992px) {
    .row.row-eq-height.content-cats-small > .col,
    .row.row-eq-height.content-cats-small > [class*="col-"] {
        margin-bottom: 18px;
    }
}
/*************************************************
 * FS24 ? Listen-Toolbar (Filter / Sortierung / Ansicht)
 * Warenkorb-Button-Look: Radius 6px, Outline, UI-Gradient Hover
 *************************************************/

.displayoptions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 12px;
  margin-bottom: 16px;
}

/* Filterblock darf NICHT schrumpfen */
.displayoptions #improve_search {
  flex: 0 0 auto;
}

/* Grund-Button-Stil: Outline + 6px Radius */
.displayoptions .btn.btn-outline-secondary,
.displayoptions .btn.btn-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 8px 14px;
  border-radius:1px; /* wie Warenkorb */

  font-size: 13px;
  font-weight: 600;

  border: 1px solid var(--fs-blue-main);
  background: #ffffff;
  color: var(--fs-blue-main);

  box-shadow: 0 2px 6px rgba(0, 40, 60, 0.08);

  position: relative;
  overflow: hidden; /* Hover sitzt sauber im Button */
  z-index: 0;

  flex-shrink: 0; /* Buttons nicht zusammendrücken */

  transition:
    color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .10s ease;
}

/* Icons harmonisieren */
.displayoptions .btn .fas,
.displayoptions .btn .fa {
  font-size: 13px;
}

/* Gradient-Overlay im Button selbst */
.displayoptions .btn.btn-outline-secondary::before,
.displayoptions .btn.btn-option::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius:1px;
  background: var(--fs-gradient-ui);
  opacity: 0;
  transition: opacity .18s ease;
  z-index: -1;
}

/* Inhalt immer über dem Overlay */
.displayoptions .btn > * {
  position: relative;
  z-index: 1;
}

/* Hover ? Overlay aktiv, Border bleibt ruhig */
.displayoptions .btn.btn-outline-secondary:hover,
.displayoptions .btn.btn-option:hover,
.displayoptions .dropdown.show > .btn.btn-outline-secondary {
  color: #ffffff;
  border-color: var(--fs-blue-main);
  box-shadow: 0 4px 10px rgba(0, 40, 60, 0.18);
  transform: translateY(-1px);
}

.displayoptions .btn.btn-outline-secondary:hover::before,
.displayoptions .btn.btn-option:hover::before,
.displayoptions .dropdown.show > .btn.btn-outline-secondary::before {
  opacity: 1;
}

/* Icons im Hover weiß */
.displayoptions .btn:hover .fa,
.displayoptions .btn:hover .fas {
  color: #ffffff;
}

/* Aktiver View-Toggle (Liste / Galerie) */
.displayoptions .btn.btn-option.ed.active {
  color: #ffffff;
  border-color: var(--fs-blue-main);
  box-shadow: 0 4px 10px rgba(0, 40, 60, 0.18);
  transform: translateY(-1px);
}

.displayoptions .btn.btn-option.ed.active::before {
  opacity: 1;
}

.displayoptions .btn.btn-option.ed.active .fa {
  color: #ffffff;
}

/* Bootstrap-Focus-Shadow killen */
.displayoptions .btn:focus,
.displayoptions .btn:active {
  box-shadow: 0 2px 6px rgba(0, 40, 60, 0.08);
  outline: none;
}

/* DROPDOWNS */
.displayoptions .dropdown-menu {
  border-radius:1px; /* wie Warenkorb */
  border: 1px solid var(--fs-border-soft);
  box-shadow: 0 6px 18px rgba(0, 40, 60, 0.14);
  padding: 4px 0;
  min-width: 180px;
}

.displayoptions .dropdown-menu .dropdown-item {
  font-size: 13px;
  padding: 7px 12px;
  color: var(--fs-text-mid);
}

.displayoptions .dropdown-menu .dropdown-item:hover {
  background: #f3f8fb;
  color: var(--fs-blue-main);
}

.displayoptions .dropdown-menu .dropdown-item.active {
  background: var(--fs-gradient-ui);
  color: #ffffff;
}

/* View-Toggle Buttons ? Ränder sauber */
.displayoptions .btn-group[role="group"] {
  gap: 4px;
}

.displayoptions .btn-group[role="group"] .btn {
  border-radius:1px;
  padding-inline: 12px;
  min-width: 40px;
  margin-left: 0 !important;
}

/* MOBILE ANPASSUNG */
@media (max-width: 768px) {
  .displayoptions {
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
  }

  /* Filter-Button volle Breite */
  .displayoptions #improve_search {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 6px;
  }

  .displayoptions #js-filters {
    padding-inline: 16px;
    width: auto;
    white-space: nowrap;
  }

  /* Sortierung / Artikel pro Seite flexibler */
  .displayoptions .filter-type-FilterItemSort,
  .displayoptions .filter-type-FilterItemLimits {
    flex: 1 1 auto;
  }

  .displayoptions .btn {
    padding: 7px 10px;
    font-size: 12px;
  }
}

/*************************************************
 * FS24 ? Ansichtsauswahl komplett ausblenden
 * (List- und Galerie-Button verstecken)
 *************************************************/

a#ed_list {
  display: none !important;
}

a#ed_gallery {
  display: none !important;
}

/* =======================================================
   FS24 ? LED-Guide-Banner: rechte Spalte auf Mobile/Tablet ausblenden
   (verhindert weißen Restbereich & passt Container-Höhe an)
   Bereich: .fs-banner-fullwidth / [data-area-id="col-1"]
   ======================================================= */

@media (max-width: 991.98px) {
  /* Rechte Spalte mit den LED-Bannern ausblenden */
  .fs-banner-fullwidth [data-area-id="col-1"],
  .fs-banner-fullwidth [data-area-id="col-1"] .fs-banner-img {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }

  /* Container darf dann nicht mehr künstlich hoch sein */
  .fs-banner-fullwidth {
    min-height: 0 !important;
    /* wenn der weiße Block NUR aus dem Hintergrund entsteht:
       bei Bedarf einkommentieren:
       background-color: transparent !important; */
    margin-bottom: 0 !important; /* direkt an die nächste Section anschließen */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Row oben nicht extra nach unten schieben */
  .fs-banner-fullwidth .row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* =======================================================
   FS24 ? Mobile/Tablet: Haupt-Slider in col-0 vollbreit,
   ohne weiße Ränder, ohne Slices zu manipulieren
   ======================================================= */

@media (max-width: 991.98px) {
  /* Container & Spalte randlos machen */
  .fs-banner-fullwidth {
    background-color: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
  }

  .fs-banner-fullwidth > div,
  .fs-banner-fullwidth .row,
  .fs-banner-fullwidth [data-area-id="col-0"] {
    margin: 0 !important;
    padding: 0 !important;
  }

  .fs-banner-fullwidth [data-area-id="col-0"] > div,
  .fs-banner-fullwidth .theme-default {
    margin: 0 !important;
    padding: 0 !important;
    border-radius:1px;
  }

  /* Nivo-Slider Container: einfach 100% Breite */
  .fs-banner-fullwidth .nivoSlider {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Nur das sichtbare Hauptbild anpassen, Rest in Ruhe lassen */
  .fs-banner-fullwidth img.nivo-main-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* =======================================================
   FS24 ? Mobile/Tablet: Abstand unter dem Slider erhöhen
   ======================================================= */

@media (max-width: 991.98px) {
  .fs-banner-fullwidth {
    margin-bottom: 5px !important; /* ? Wert nach Wunsch anpassen */
  }
}

/* =======================================================
   Alle Links in der Topbar als FS24 Buttons
   ======================================================= */

.topbar-main .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #696969 !important;
  text-decoration: none;

  background:white ;
  border-radius:1px;
border: 1px solid rgb(173, 213, 255);
  transition: all 0.18s ease-out;
}

/* Hover-Effekt */
.topbar-main .nav-link:hover {
  background:white;
  box-shadow: var(--fs-shadow-strong);
  transform: translateY(1px);
  color: white;
  
}

/* Optional: kleine Abstände zwischen den Links */
.topbar-main .nav-item {
  margin-left: 0.4rem;
}

div#header-top-bar {
  padding-top: 4px;
  padding-bottom: 4px;
}

.top-bar-margin {
  margin-top: 4px;
}

@media (min-width: 992px) {
  header.full-width-mega .navbar-nav > .nav-item.active > .nav-link,
  header.full-width-mega .navbar-nav > .nav-item:hover > .nav-link {
    background: #0A7EC2;
  }
}

.modal-backdrop.fade.zindex-dropdown.show {
  opacity: 0.2 !important;
}

.versand-wrapper {
  margin-top: 20px !important;
}

.versand {
  margin-top: 5px;
}

input#search-header {
  padding: 10px;
}

input,
select {
  padding: 10px !important;
}

footer#footer {
  background-color: #191825;
  color: #e7e6ef;
}

del.value.text-nowrap-util {
  color: red !important;
}

fieldset#checkout-shipping-payment {
  margin-top: 40px;
}

/************************************************************
 * VARIATIONEN ? TEXT-SWATCHES (z. B. 8mm, 10mm, 12,5mm)
 * FS24-Style: Verlauf + Hover + Active (IMMER gleiche Größe)
 ************************************************************/

/* Slider-Item: verhindert Layout-Sprünge */
.js-slider-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px;
}

/* Text-Swatch ? feste Größe, sauber zentriert */
label.variation.swatches.swatches-text {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 72px; /* IMMER gleich breit */
  height: 34px; /* IMMER gleich hoch */
  padding: 0; /* kein Größenwechsel durch Padding */

  background: #ffffff;
  border-radius:1px;
  border: 1px solid #c5d3d8;

  font-size: 13px;
  font-weight: 600;
  color: var(--fs-text-dark);

  cursor: pointer;
  user-select: none;
  box-shadow: none;

  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hover ? FS24-Verlauf (NICHT transparent) */
label.variation.swatches.swatches-text:hover {
  background: var(--fs-gradient-ui-hover);
  border-color: var(--fs-primary);
  color: #ffffff;
}

/* Aktiv / ausgewählt ? bleibt blau (FS24-Verlauf) */
label.variation.swatches.swatches-text.active,
label.variation.swatches.swatches-text:has(input:checked) {
  background: var(--fs-gradient-ui);
  border-color: var(--fs-primary);
  color: #ffffff;
}

/* Hover auf aktiv ? bleibt blau, nur Hover-Verlauf */
label.variation.swatches.swatches-text.active:hover,
label.variation.swatches.swatches-text:has(input:checked):hover {
  background: var(--fs-gradient-ui-hover);
}

/* Fokus (Accessibility) */
label.variation.swatches.swatches-text:has(input:focus-visible) {
  outline: 2px solid var(--fs-primary);
  outline-offset: 2px;
}

/* Input ausblenden (wie bei dir: control-hidden) */
label.variation.swatches.swatches-text input.control-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Mobile ? weiterhin IMMER gleiche Größe, nur etwas kompakter */
@media (max-width: 768px) {
  label.variation.swatches.swatches-text {
    width: 66px;
    height: 32px;
    font-size: 12px;
  }
}

/************************************************************
 * SWATCHES ? ENGES LAYOUT (Desktop)
 ************************************************************/

/* Wrapper: keine Bootstrap-Row-Verteilung/Gutters */
.form-row.swatches.js-slider-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;

  margin-left: 0 !important; /* killt ggf. negative row margins */
  margin-right: 0 !important;
  gap: 0px; /* <<< Abstand hier steuern */
}

/* Columns: kein Column-Padding (Gutters) */
.form-row.swatches.js-slider-items > .col.col-auto.js-slider-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Zur Sicherheit: falls irgendwo margin gesetzt ist */
.js-slider-item {
  margin: 0 !important;
}

/* Mobile optional minimal mehr Platz */
@media (max-width: 768px) {
  .form-row.swatches.js-slider-items {
    gap: 6px;
  }
}

/************************************************************
 * NAVBAR ? FS24 KONTRASTLINIE
 * Shop: nur Mobile/Tablet
 * Checkout: auch Desktop (robust)
 ************************************************************/

.hide-navbar.menu-scroll.container-fluid.container-fluid-xl.menu-search-position-right {
  position: relative;
}

/* ===== SHOP (nicht Checkout): nur Mobile & Tablet ===== */
@media (max-width: 1024px) {
  body:not([class*="checkout"]):not(.is-checkout):not(.is-checkout-cart):not(.is-checkout-confirm)
  .hide-navbar.menu-scroll.container-fluid.container-fluid-xl.menu-search-position-right::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;
    z-index: 5;

    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 160, 170, 0.85) 45%,
      rgba(0, 160, 170, 0.85) 55%,
      transparent 100%
    );

    pointer-events: none;
  }
}

/* ===== CHECKOUT: IMMER (Mobile/Tablet/Desktop) ===== */
body[class*="checkout"]
.hide-navbar.menu-scroll.container-fluid.container-fluid-xl.menu-search-position-right::after,
body.is-checkout
.hide-navbar.menu-scroll.container-fluid.container-fluid-xl.menu-search-position-right::after,
body.is-checkout-cart
.hide-navbar.menu-scroll.container-fluid.container-fluid-xl.menu-search-position-right::after,
body.is-checkout-confirm
.hide-navbar.menu-scroll.container-fluid.container-fluid-xl.menu-search-position-right::after {
  content: "" !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 2px;
  z-index: 5;

  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 160, 170, 0.85) 45%,
    rgba(0, 160, 170, 0.85) 55%,
    transparent 100%
  );

  pointer-events: none;
}

/************************************************************
 * PRODUKT-ACTIONS ? WUNSCHLISTE & VERGLEICH (FS24-STYLE)
 ************************************************************/

.product-actions .btn.wishlist-button,
.product-actions .btn.compare-button {
  background: #ffffff;
  border: 1px solid #c5d3d8;
  color: var(--fs-text-dark);

  border-radius:1px; /* wirkt wie eure UI-Buttons */
  padding: 8px 12px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  box-shadow: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Icons im Button */
.product-actions .btn.wishlist-button .wishlist-icon,
.product-actions .btn.compare-button .compare-icon {
  color: var(--fs-primary);
  font-size: 15px;
  line-height: 1;
}

/* Hover ? FS24 Verlauf */
.product-actions .btn.wishlist-button:hover,
.product-actions .btn.compare-button:hover {
  background: var(--fs-gradient-ui-hover);
  border-color: var(--fs-primary);
  color: #ffffff;
}

/* Icons auf Hover weiß */
.product-actions .btn.wishlist-button:hover .wishlist-icon,
.product-actions .btn.compare-button:hover .compare-icon {
  color: #ffffff;
}

/* Active/Focus ? FS24 Verlauf */
.product-actions .btn.wishlist-button:focus,
.product-actions .btn.compare-button:focus,
.product-actions .btn.wishlist-button:active,
.product-actions .btn.compare-button:active {
  background: var(--fs-gradient-ui);
  border-color: var(--fs-primary);
  color: #ffffff;
  box-shadow: none;
}

/* Icons auf Active/Focus weiß */
.product-actions .btn.wishlist-button:focus .wishlist-icon,
.product-actions .btn.compare-button:focus .compare-icon,
.product-actions .btn.wishlist-button:active .wishlist-icon,
.product-actions .btn.compare-button:active .compare-icon {
  color: #ffffff;
}

/************************************************************
 * SECTION-HEADINGS ? "Kunden kauften..." / "Ähnliche Artikel"
 * FS24 Divider-Style (Linien links/rechts + Gradient)
 ************************************************************/

.hr-sect.h2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  margin: 26px 0 16px;
  padding: 0;

  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.2px;

  color: var(--fs-text-dark);
  text-align: center;
}

/* Linien links/rechts */
.hr-sect.h2::before,
.hr-sect.h2::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;

  background: var(--fs-gradient-border);
  opacity: 0.75;

  border-radius:1px;
}

/* Mobile: etwas kompakter */
@media (max-width: 768px) {
  .hr-sect.h2 {
    margin: 22px 0 12px;
    font-size: 16px;
    gap: 10px;
    padding: 6px 12px;
  }

  .hr-sect.h2::before,
  .hr-sect.h2::after {
    height: 2px;
    opacity: 0.65;
  }
}

@media (max-width: 991.98px) {
  header .navbar-brand img {
    min-height: 60px;
  }
}

@media (max-width: 991.98px) {
  .toggler-logo-wrapper .burger-menu-wrapper {
    padding-top: 36px;
  }
}

span.btn-basket-check {
  min-height: 32px;
  align-content: center;
}

div#sidebox163 {
  margin-top: -23px;
}

.is-checkout header,
.is-checkout .navbar {
  height: 100px !important;
}

/************************************************************
 * FS24 ? ACCOUNT DROPDOWN (INLINE / nur dieser Block)
 * Scope: .dropdown-account-icons
 ************************************************************/

.dropdown-account-icons .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius:1px;

  font-weight: 600;
  color: var(--fs-text-dark);
  text-decoration: none;

  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

/* leichter Divider-Look */
.dropdown-account-icons .dropdown-item + .dropdown-item {
  margin-top: 2px;
}

/* ICON BASIS (wir nutzen ::before) */
.dropdown-account-icons .dropdown-item::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: .95;
  transition: filter .18s ease, opacity .18s ease;
}

/* Hover (ohne transform) */
.dropdown-account-icons .dropdown-item:hover {
  background: var(--fs-gradient-ui-hover);
  color: #fff;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
}

.dropdown-account-icons .dropdown-item:hover::before {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* Focus (Keyboard) */
.dropdown-account-icons .dropdown-item:focus-visible {
  outline: 2px solid var(--fs-primary);
  outline-offset: 2px;
}

/* Optional: ?aktives? Item */
.dropdown-account-icons .dropdown-item[aria-current="page"] {
  background: rgba(0, 0, 0, 0.04);
}

/* Mobile: größer & eindeutiger */
@media (max-width: 768px) {
  .dropdown-account-icons .dropdown-item {
    padding: 12px 14px;
    gap: 12px;
    font-size: 15px;
  }

  .dropdown-account-icons .dropdown-item::before {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
}

/************************************************************
 * ICONS ? URL-ENCODED SVGs (sichtbar!)
 * Scope: .dropdown-account-icons
 ************************************************************/

/* ? Mein Konto */
.dropdown-account-icons a[href$="/Login"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007fa8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}

/* ? Bestellungen */
.dropdown-account-icons a[href*='bestellungen']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007fa8'%3E%3Cpath d='M3 5h2l2.4 9.6a2 2 0 0 0 2 1.4h7.2a2 2 0 0 0 2-1.5L21 8H7'/%3E%3Ccircle cx='10' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3C/svg%3E");
}

/* ? Persönliche Daten */
.dropdown-account-icons a[href*='editRechnungsadresse']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007fa8'%3E%3Cpath d='M12 3l9 8h-3v9a2 2 0 0 1-2 2h-3v-6H11v6H8a2 2 0 0 1-2-2v-9H3l9-8z'/%3E%3C/svg%3E");
}

/* ? Lieferadressen */
.dropdown-account-icons a[href*='editLieferadresse']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007fa8'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}

/* ?? Wunschzettel */
.dropdown-account-icons a[href*='wishlists']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007fa8'%3E%3Cpath d='M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z'/%3E%3C/svg%3E");
}

/* ? Abmelden */
.dropdown-account-icons .account-icon-dropdown-logout::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007fa8'%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3Cpath d='M13 3H4v18h9'/%3E%3C/svg%3E");
}

a.categories-recursive-link.d-lg-block.submenu-headline.submenu-headline-toplevel.\31 {
  margin-top: -3px;
  margin-bottom: -18px;
}

.newsbox-footer a {
  padding-left: 10px;
  padding-right: 10px;
}

/* Mobile + Tablet (bis inkl. 991px) */
@media (max-width: 991.98px) {
  span.text-truncate.d-block.margins {
    margin-bottom: 0;
  }
}

/* Desktop (ab 992px) */
@media (min-width: 992px) {
  span.text-truncate.d-block.margins {
    margin-bottom: 40px;
  }
}

/************************************************************
 * NEUES LAYOUT STARTSEITE
 * MOBILE
 ************************************************************/

/* =========================================================
   FS24 OPC ACCORDION ? FINAL
   Ruhig, edel, FS24-Style
   Text sauber zentriert
   ========================================================= */

/* ---------- Accordion Wrapper ---------- */
.opc-Accordion{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

/* Gruppe als Card */
.opc-Accordion .opc-Accordion-group{
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius:1px;
  overflow: hidden;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.08);
}

/* Header reset */
.opc-Accordion .card-header{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* ---------- Head / Button ---------- */
.opc-Accordion .opc-Accordion-head{
  width: 100%;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr; /* echtes Centering */
  align-items: center;

  padding: 14px 14px !important;

  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;

  color: #ffffff !important;
  text-decoration: none !important;

  background: var(
    --fs-gradient-nav,
    linear-gradient(135deg, #063a86 0%, #0a6fa6 45%, #10b7b1 100%)
  ) !important;

  border: 0 !important;
  position: relative;
  user-select: none;
}

/* Dummy-Spacer links für echtes Centering */
.opc-Accordion .opc-Accordion-head::before{
  content: "";
}

/* ---------- Text mittig ---------- */
.opc-Accordion .opc-Accordion-head span,
.opc-Accordion .opc-Accordion-head{
  text-align: center !important;
}

/* ---------- Pfeil ---------- */
.opc-Accordion .opc-Accordion-head::after{
  content: "?";
  justify-self: end;

  font-size: 18px;
  font-weight: 900;
  line-height: 1;

  color: rgba(255,255,255,.95);
  transition: transform .18s ease;
}

/* Offen-Zustand */
.opc-Accordion .opc-Accordion-head[aria-expanded="true"]::after{
  transform: rotate(180deg);
}

/* Hover */
.opc-Accordion .opc-Accordion-head:hover{
  filter: brightness(1.04);
}

/* ---------- Collapse / Body ---------- */
.opc-Accordion .opc-Accordion-collapse{
  border: 0 !important;
  background: transparent !important;
}

.opc-Accordion .card-body{
  padding: 14px 14px 16px !important;
  background: #ffffff;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  color: var(--fs-text-main, #0f172a);
  line-height: 1.55;
}

/* Links im Body */
.opc-Accordion .card-body a{
  color: var(--fs-blue-main, #0b4aa2);
  font-weight: 700;
  text-decoration: none;
}
.opc-Accordion .card-body a:hover{
  text-decoration: underline;
}

/* ---------- Mobile / Tablet ---------- */
@media (max-width: 992px){
  .opc-Accordion{
    gap: 10px;
  }

  .opc-Accordion .opc-Accordion-group{
    border-radius:1px;
  }

  .opc-Accordion .opc-Accordion-head{
    padding: 12px 12px !important;
    font-size: 14px;
  }

  .opc-Accordion .card-body{
    padding: 12px 12px 14px !important;
  }
}


/* =========================================================
   FS24 ? Accordion Info Rich-Text Box
   ========================================================= */

.fs-accordioninfo-inner{
  position: relative;
  border-radius:1px;
  padding: 16px;

  background:
    radial-gradient(circle at 35% 25%, rgba(16,183,177,.16) 0, rgba(16,183,177,0) 55%),
    radial-gradient(circle at 85% 85%, rgba(11,74,162,.14) 0, rgba(11,74,162,0) 55%),
    linear-gradient(180deg, rgba(11,74,162,.06), rgba(16,183,177,.08));

  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.08);
  overflow: hidden;
}

.fs-accordioninfo-inner::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: var(
    --fs-gradient-border,
    linear-gradient(135deg,#0b4aa2 0%, #10b7b1 100%)
  );
}

/* Text */
.fs-accordioninfo-lead{
  margin: 0 0 12px 0;
  color: var(--fs-text-main, #0f172a);
  font-weight: 700;
  line-height: 1.5;
}

.fs-accordioninfo-box{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius:1px;
  padding: 12px;
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.06);
}

.fs-accordioninfo-text{
  margin: 0 0 10px 0;
  color: var(--fs-text-main, #0f172a);
  line-height: 1.55;
}
.fs-accordioninfo-text:last-child{
  margin-bottom: 0;
}

.fs-accordioninfo-inner strong{
  color: var(--fs-text-strong, #0b1b34);
}

.fs-accordioninfo-inner a{
  color: var(--fs-blue-main, #0b4aa2);
  font-weight: 800;
  text-decoration: none;
}
.fs-accordioninfo-inner a:hover{
  text-decoration: underline;
}

@media (max-width: 575px){
  .fs-accordioninfo-inner{
    padding: 14px;
    border-radius:1px;
  }
  .fs-accordioninfo-box{
    padding: 12px;
    border-radius:1px;
  }
}




/************************************************************
 * NEUES LAYOUT STARTSEITE
 * DESKTOP
 ************************************************************/

/* =============================
   INTRO / BESCHREIBUNG MIT H1
   ============================= */

.fs-intro-image-overlay {
  position: relative;
  overflow: hidden;
  border-radius:1px;
  height: 607px;
  margin-top: -23px;
}

/* Hintergrundbild */
.fs-intro-image-overlay .fs-intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Abdunklung ? unten stärker */
.fs-intro-image-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.45) 55%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

/* Text-Overlay */
.fs-intro-overlay-content {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 64px;
  z-index: 2;
  color: #ffffff;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
}

/* H1 */
.fs-intro-overlay-content h1 {
  margin: 0 0 10px 0;
  line-height: 1.15;
  color: #ffffff;
  font-size: 1.040rem;
}

/* Intro-Text */
.fs-intro-overlay-content p {
  margin: 0;
  line-height: 1.4;
  color: #ffffff;
  opacity: 0.95;
}

/* =============================
   HAUPTKATEGORIEN-KACHELN
   ============================= */

.fs-cat-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.fs-cat-card-inner {
  position: relative;
  height: 320px;
  border-radius:1px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}

.fs-cat-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

/* Abdunklung */
.fs-cat-card-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0.45) 55%,
    rgba(0, 0, 0, 0.80) 100%
  );
}

/* Textblock unten */
.fs-cat-card-body {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  color: #ffffff;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
}

.fs-cat-card-title {
  display: block;
  margin-bottom: 6px;
  line-height: 1.2;
  color: #ffffff;
}

.fs-cat-card-text {
  margin: 0 0 6px 0;
  opacity: 0.95;
  color: #ffffff;
}

.fs-cat-card-link {
  font-weight: 600;
  color: #ffffff;
}

/* Hover-Effekte */
.fs-cat-card:hover .fs-cat-card-inner {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.18);
}

.fs-cat-card:hover .fs-cat-card-image {
  transform: scale(1.05);
}

/* Hover: Bild wird heller (Overlay schwächer) */
.fs-cat-card:hover .fs-cat-card-inner::before {
  opacity: 0.35;
}

/************************************************************
 * FS24 ? Neu im Sortiment: Layout wie Bestseller, aber gespiegelt
 ************************************************************/

.fs-intro-bestseller-inner.fs-intro-bestseller-inner--reverse {
  grid-template-columns: .95fr 1.05fr;
}

.fs-intro-bestseller-inner .fs-intro-overlay-content h2 {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .45);
}

@media (max-width: 992px) {
  .fs-intro-bestseller-inner.fs-intro-bestseller-inner--reverse {
    grid-template-columns: 1fr;
  }
}

/* Bild-Container */
.fs-neuheiten-image-overlay {
  position: relative;
  overflow: hidden;
  border-radius:1px;
  height: 603px;
  margin-top: 14px;
}

.fs-neuheiten-image-overlay .fs-intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.fs-neuheiten-image-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.45) 55%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

/* SONDERPROFILE ? Product Stream INTRO IMAGE */
.fs-sonderprofile-image-overlay {
  position: relative;
  overflow: hidden;
  border-radius:1px;
  height: 461px;
  margin-top: -7px;
  margin-left: 15px;
}

.fs-sonderprofile-image-overlay .fs-intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.fs-sonderprofile-image-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.45) 55%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

.fs-sonderprofile-image-overlay .fs-intro-overlay-content {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 64px;
  z-index: 2;
  color: #ffffff;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
}

.fs-sonderprofile-image-overlay h1 {
  margin: 0 0 10px 0;
  line-height: 1.15;
  color: #ffffff;
}

.fs-sonderprofile-image-overlay p {
  margin: 0;
  line-height: 1.4;
  color: #ffffff;
  opacity: 0.95;
}

/* =====================================================
   FS24 ? Hauptkategorien Mobile/Tablet Overlay
   GILT NUR BIS 992px (Mobile + Tablet)
===================================================== */

@media (max-width: 992px) {
  .fs-cat-card-inner {
    position: relative;
    overflow: hidden;
  }

  .fs-cat-card-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.10) 0%,
      rgba(0, 0, 0, 0.45) 55%,
      rgba(0, 0, 0, 0.80) 100%
    );
  }

  .fs-cat-card-body {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 12px;
    z-index: 2;

    color: #ffffff;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
  }
}

/* =====================================================
   FS24 ? Intro Image Overlay (Mobile & Tablet)
   Vollbreite bis 993px, sauberer Textabstand
===================================================== */

@media (max-width: 993px) {
  .fs-intro-mobile-image-overlay {
    position: relative;
    overflow: hidden;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius:1px;
    height: 148px;
    margin-top: -24px;
  }

  .fs-intro-mobile-image-overlay img.fs-intro-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .fs-intro-mobile-image-overlay .fs-intro-overlay-content {
    position: absolute;
    left: 50%;
    bottom: 25px;
    transform: translateX(-50%);
    width: min(100%, 720px);
    padding: 0 20px;
    text-align: center;
    color: #ffffff;
    z-index: 2;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  }

  .fs-intro-mobile-image-overlay h1 {
    margin-bottom: 30px;
  }

  .fs-intro-mobile-image-overlay p {
    margin: -15px;
    opacity: .95;
  }

  .fs-intro-mobile-image-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.05) 0%,
      rgba(0, 0, 0, 0.35) 65%,
      rgba(0, 0, 0, 0.65) 100%
    );
    z-index: 1;
  }
}


/* =====================================================
   FS24 ? Fullwidth Backgrounds NUR Desktop
   (Bestseller & Neuheiten bewusst NICHT enthalten)
===================================================== */

@media (min-width: 993px) {
  .fs-hero,
  .fs-cat-overview,
  .fs-usps,
  .fs-usecases,
  .fs-targets {
    position: relative;
    
  }
}


@media (min-width: 1200px){

  /* Card-Body als Flex-Container */
  .fs-cat-card-body{
    display: flex;
    flex-direction: column;
    height: 90%;
  }

  /* Titel: oben + gleiche Höhe */
  .fs-cat-card-title{
    line-height: 1.15;

    /* gleiche Höhe für alle Titel (2 Zeilen) */
    min-height: calc(1.15em * 2);

    /* lange Titel begrenzen */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  /* Subline nach unten */
  .fs-cat-card-text{
    margin-top: 125px;
    margin-bottom: 0px;
  }

}
/* ================================
   FS24 MOBILE CATS ? KOMPAKT
   (nur für Mobile/Tablet OPC)
   ================================ */

/* Optional: auf Desktop komplett aus */
@media (min-width: 993px) {
  #fs-cat-overview-mobile.fs24-mcat {
    display: none !important;
  }
}

/* Grundblock */
#fs-cat-overview-mobile.fs24-mcat {
  margin: 4px -20px 8px;
}

/* Horizontales Scrolling ? KOMPAKT */
#fs-cat-overview-mobile .fs24-mcat__track {
  display: grid;
  grid-auto-flow: column;

  /* Standard: 3 sichtbar */
  grid-auto-columns: calc((100% - 16px) / 3);
  gap: 8px;

  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 2px;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  scrollbar-width: thin;
}

/* Kachel */
#fs-cat-overview-mobile .fs24-mcat__tile {
  display: grid;
  grid-template-rows: 1fr auto;

  border-radius:1px;
  overflow: hidden;

  text-decoration: none !important;
  background: #ffffff;

  scroll-snap-align: start;

  /* klarer, feiner Rahmen */
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: none !important;

  transform: translateZ(0);
}

/* Quadrat erzwingen */
#fs-cat-overview-mobile .fs24-mcat__imgwrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ffffff;
}

#fs-cat-overview-mobile .fs24-mcat__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Button-Fläche unten ? kleiner */
#fs-cat-overview-mobile .fs24-mcat__label {
  padding: 6px 6px;
  text-align: center;

  background: var(--fs-gradient-ui, linear-gradient(135deg, #0b4aa2 0%, #10b7b1 100%));
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* Text im Label ? kleiner */
#fs-cat-overview-mobile .fs24-mcat__text {
  display: block;
  color: #ffffff;
  font-weight: 700;
  font-size: 9px;
  line-height: 1.1;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sehr kleine Phones ? 4 sichtbar */
@media (max-width: 380px) {
  #fs-cat-overview-mobile .fs24-mcat__track {
    grid-auto-columns: calc((100% - 18px) / 4);
    gap: 6px;
  }

  #fs-cat-overview-mobile .fs24-mcat__label {
    padding: 5px 5px;
  }

  #fs-cat-overview-mobile .fs24-mcat__text {
    font-size: 10.5px;
  }
}
/* =========================================================
   FS24 ? Mobile: Bestseller & Neuheiten
   Navbar-Farbverlauf + weiße Schrift
   ========================================================= */

@media (max-width: 992px) {

  .fs-bestseller,
  .fs-new {
    position: relative;

    background: var(
      --fs-gradient-nav,
      linear-gradient(135deg, #063a86 0%, #0a6fa6 45%, #10b7b1 100%)
    ) !important;

    color: #ffffff !important;
  }

  /* sicherstellen, dass wirklich alles weiß ist */
  .fs-bestseller h1,
  .fs-bestseller h2,
  .fs-bestseller h3,
  .fs-bestseller p,
  .fs-bestseller span,
  .fs-bestseller a,
  .fs-new h1,
  .fs-new h2,
  .fs-new h3,
  .fs-new p,
  .fs-new span,
  .fs-new a {
    color: #ffffff !important;
  }
}


/* =========================================================
   NIVO SLIDER ? SLIM TECH ARROWS (FS24 TEAL PLATE) ? CENTER FIX
   Pfeile: custom via ::after (keine Nivo-Icons)
   ========================================================= */

/* Nivo Standard-Icons sicher killen */
.nivoSlider .nivo-directionNav a{
  background-image: none !important;
}

/* Pfeile immer sichtbar + Platte */
.nivoSlider .nivo-directionNav a{
  opacity: 1 !important;
  visibility: visible !important;

  /* wichtig: Nivo überschreibt gern display/line-height */
  display: block !important;

  width: 38px !important;
  height: 38px !important;

  /* TEAL Platte */
  background: rgba(16, 183, 177, 0.25) !important; /* FS24 teal */
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius:1px;

  box-shadow: 0 10px 22px rgba(2,6,23,.22) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  /* Text weg */
  text-indent: -9999px;
  overflow: hidden;

  /* Centering-Fallen entschärfen */
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;

  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  transition: filter .15s ease, transform .15s ease;
}

/* Position links/rechts */
.nivoSlider .nivo-directionNav .nivo-prevNav{ left: 5px !important; }
.nivoSlider .nivo-directionNav .nivo-nextNav{ right: 5px !important; }

/* Custom Pfeil (Tech) ? HARD CENTER */
.nivoSlider .nivo-directionNav a::after{
  content: "";
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);

  width: 18px;
  height: 18px;

  border-top: 4px solid rgba(255,255,255,.95);
  border-right: 4px solid rgba(255,255,255,.95);

  display: block;
}

/* Richtung */
.nivoSlider .nivo-directionNav .nivo-prevNav::after{
  transform: translate(-35%, -50%) rotate(-135deg);
}
.nivoSlider .nivo-directionNav .nivo-nextNav::after{
  transform: translate(-65%, -50%) rotate(45deg);
}

/* Hover ? minimal premium */
.nivoSlider .nivo-directionNav a:hover{
  filter: brightness(1.06);
  transform: translateY(-50%) translateY(0px) !important; /* bleibt zentriert */
}


/* Mini-Addon nur für den Dropdown-Button im Intro (Tiles-CSS hast du ja schon) */
.fs-h1-intro .fs-h1-details > summary{
  list-style:none;
}
.fs-h1-intro .fs-h1-details > summary::-webkit-details-marker{
  display:none;
}

.fs-h1-intro .fs-h1-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius:1px;
  background: var(--fs-gradient-ui);
  color:#fff;
  font-weight: 900;
  letter-spacing: -0.01em;
  box-shadow: 0 12px 26px rgba(13,30,58,0.18);
  cursor:pointer;
  user-select:none;
}

.fs-h1-intro .fs-h1-toggle-icon{
  transition: transform .18s ease;
}

.fs-h1-intro .fs-h1-details[open] .fs-h1-toggle-icon{
  transform: rotate(180deg);
}

/* Titel im Dropdown: optional ausblenden, wenn du ihn nicht doppelt willst */
.fs-h1-intro .fs24-mob-tiles__title{
  display:none;
}

/* Dropdown Abstand */
.fs-h1-intro .fs24-mob-tiles{
  margin-top: 12px;
}


/* FS24 ? Mobile Kachel-Slider (8 Cards | ohne Hint) */
.fs24-mob-tiles{
  display:none;
}

@media (max-width: 991.98px){
  .fs24-mob-tiles{
    display:block;
    padding: 7px 0 0px;
  }

  .fs24-mob-tiles__inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 14px;
    position: relative;
  }

  .fs24-mob-tiles__title{
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.2;
    text-align: center;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

    /* Slider Track */
  .fs24-mob-tiles__track{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding: 14px;
    padding: 8px 14px 16px;
    margin: -7px -35px;
    scrollbar-width: none;
    background: linear-gradient(
      135deg,
      #1b2c44 0%,
      #6f85a3 46%,
      #1d3a5a 50%,
      #2b4467 54%,
      #60758b 100%
    ) !important;
  }
 
  .fs24-mob-tiles__inner::before{
    left: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0));
  }
  .fs24-mob-tiles__inner::after{
    right: 0;
    background: linear-gradient(270deg, rgba(255,255,255,0.95), rgba(255,255,255,0));
  }

  /* Card */
  .fs24-mob-tile{
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    border-radius:1px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(23,64,139,0.12);
    box-shadow: 0 10px 28px rgba(13,30,58,0.12);
  }

  .fs24-mob-tile__inner{
    position: relative;
    height: 190px;
  }

  .fs24-mob-tile__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
    transform: scale(1.02);
  }

  .fs24-mob-tile__inner::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0.00) 35%, rgba(0,0,0,0.62) 100%);
  }

  .fs24-mob-tile__body{
    position:absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
  }

  .fs24-mob-tile__title{
    display:block;
    font-size: 26px;
    line-height: 10.15;
    font-weight: 900;
    margin: 0 0 2px;
  }

  .fs24-mob-tile__text{
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 600;
    opacity: 0.95;
  }
}

/* größere Phones */
@media (min-width: 520px) and (max-width: 991.98px){
  .fs24-mob-tiles__track{ grid-auto-columns: 56%; }
  .fs24-mob-tile__inner{ height: 210px; }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991.98px){
  .fs24-mob-tiles__track{ grid-auto-columns: 40%; }
}
.fs24-mob-tile__title,
.fs24-mob-tile__text{
  text-shadow:
    0 1px 0 rgba(0,0,0,0.95),
    0 0 1px rgba(0,0,0,0.85);
}


/* ======================================
   FS24 ? H1 Intro Background wie Tiles
   (gleicher Verlauf wie .fs24-mob-tiles__track)
   ====================================== */

.fs-h1-intro{
  position: relative;

  /* full-bleed bis zum Rand */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  padding: 24px 16px 20px;
  overflow: hidden;

  /* gleicher Verlauf wie die Kacheln */
  background: linear-gradient(
    135deg,
    #1b2c44 0%,
    #6f85a3 46%,
    #1d3a5a 50%,
    #2b4467 54%,
    #60758b 100%
  );
}

/* Lesbarkeit: dunkler Verlauf unten (wie bei euren Tiles) */
.fs-h1-intro::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.18) 55%,
    rgba(0,0,0,0.32) 100%
  );
  pointer-events:none;
}

/* Text über dem Overlay */
.fs-h1-intro .fs-h1-kicker,
.fs-h1-intro h1,
.fs-h1-intro .fs-h1-sub,
.fs-h1-intro .fs-h1-details{
  position: relative;
  z-index: 1;
}

/* Typo auf dunklem Verlauf */
.fs-h1-intro .fs-h1-kicker{
  color: rgba(255,255,255,0.92);
  text-decoration: underline;
  font-weight: 900;
}

.fs-h1-intro h1{
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
  margin: 6px 0 10px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.fs-h1-intro .fs-h1-sub{
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 12px rgba(0,0,0,0.30);
  font-weight: 600;
}

/* Button bleibt FS24, aber auf dunklem Verlauf etwas ?cleaner? */
.fs-h1-intro .fs-h1-toggle{
  box-shadow: 0 12px 26px rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.18);
}

/* Optional: wenn du den Dropdown-Bereich optisch abtrennen willst */
.fs-h1-intro .fs24-mob-tiles{
  margin-top: 12px;
}
/* =========================================================
   FS24 ? H1 + Dropdown: EIN durchgehender Verlauf (seamless)
   ========================================================= */

/* 1) Der Verlauf liegt auf dem gesamten Intro (hast du ja schon) */
/* (nur falls noch nicht drin) */
.fs-h1-intro{
  position: relative;
  background: linear-gradient(135deg, #1b2c44 0%, #1e2e43 46%, #1d3a5a 50%, #2b4467 54%, #60758b 100%);
}

/* 2) Dropdown-Bereich: transparent, damit der Intro-Verlauf sichtbar bleibt */
.fs-h1-intro .fs24-mob-tiles,
.fs-h1-intro .fs24-mob-tiles__inner{
  background: transparent !important;
}

/* 3) Wichtig: Track-Verlauf im Dropdown deaktivieren (sonst passt es nie exakt) */
.fs-h1-intro .fs24-mob-tiles__track{
  background: transparent !important;
}

/* 4) Damit der Verlauf beim Aufklappen ?weiterläuft?:
      Wir entfernen negative Außenmargins, die sonst den Verlauf ?verschieben? */
@media (max-width: 991.98px){
  .fs-h1-intro .fs24-mob-tiles__track{
    margin: 0 !important;         /* statt -7px -35px */
    padding: 8px 0 16px !important;
    scroll-padding: 14px;
  }
}

/* 5) Optional: leichte Trennkante zwischen Text und aufgeklappten Tiles */
.fs-h1-intro .fs-h1-details[open] .fs24-mob-tiles{
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.14);
}

/* 6) Text auf Verlauf lesbar halten (falls noch nicht gesetzt) */
.fs-h1-intro .fs-h1-kicker,
.fs-h1-intro h1,
.fs-h1-intro .fs-h1-sub{
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.fs-h1-intro .fs-h1-kicker{ opacity: .92; }
.fs-h1-intro .fs-h1-sub{ opacity: .92; }

/* 7) Der Button fügt sich ein */
.fs-h1-intro .fs-h1-toggle{
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 12px 26px rgba(0,0,0,0.22);
}
/* =========================================================
   FS24 ? H1 + Produktwelten (finale Typo & Verlauf)
   ========================================================= */

.fs-h1-intro{
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 7px 16px 5px;
  overflow: hidden;
  background: linear-gradient(135deg, #33a6b2 0%, #428ca4 46%, #51aa9e 50%, #3897a1 54%, #00839d 100%);
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Abdunklung für Lesbarkeit */
.fs-h1-intro::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.25) 60%,
    rgba(0,0,0,0.40) 100%
  );
  pointer-events:none;
}

.fs-h1-intro > *{
  position: relative;
  z-index: 1;
}

/* H1 Hauptzeile */
.fs-h1-intro h1{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}

/* ?LED-Profile & Systemlösungen? */
.fs-h1-intro .fs-h1-subhead{
  display:block;
  font-size: 0.68em;      /* bewusst kleiner */
  font-weight: 900;
  opacity: 0.95;
}

/* Subline */
.fs-h1-intro .fs-h1-sub{
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
  max-width: 56ch;
}

/* Button */
.fs-h1-intro .fs-h1-toggle{
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 12px 26px rgba(0,0,0,0.25);
}

/* Dropdown transparent ? Verlauf läuft durch */
.fs-h1-intro .fs24-mob-tiles,
.fs-h1-intro .fs24-mob-tiles__inner,
.fs-h1-intro .fs24-mob-tiles__track{
  background: transparent !important;
}

/* Track-Offsets neutralisieren */
@media (max-width: 991.98px){
  .fs-h1-intro .fs24-mob-tiles__track{
    margin: 0 !important;
    padding: 8px 0 16px !important;
  }
}

/* Trennung beim Öffnen */
.fs-h1-intro .fs-h1-details[open] .fs24-mob-tiles{
  margin-top: -2px;
  border-top: 0px solid rgba(255,255,255,0.22);
}
.fs-h1-intro .fs-h1-toggle{
  transform: translateY(-6px);
}
.fs-h1-intro::after{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.03) 0%,
    rgba(0,0,0,0.20) 60%,
    rgba(0,0,0,0.32) 100%
  );
}
.fs-h1-intro .fs-h1-toggle{
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,0.35);
}
/* ================================
   FS24 Hover Tiles (Duschablagen & Sockelleisten) ? CLEAN & SMOOTH
   - Kein heller Rand / kein Rahmen
   - Hover startet sauber (kein "snap")
   ================================ */

.fs24-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;

  width: 100%;
  max-width: 1390px;
  margin: 0 auto 10px auto;
  padding: 0 0px;
  box-sizing: border-box;

  overflow: hidden; /* Subpixel kill */
}

/* Grid-Items dürfen nicht die Spalten aufdrücken */
.fs24-tile,
.fs24-tile__desc {
  min-width: 0;
}

/* Einzelne Kachel ? OHNE Rahmen */
.fs24-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;

  border-radius:1px;
  background: transparent; /* <<< kein heller Hintergrund */
  padding: 0;              /* <<< kein Rahmen */
  box-sizing: border-box;
}

/* Hauptbild ? volle Fläche */
.fs24-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius:1px;
}

/* dunkler Verlauf unten */
.fs24-tile__shade {
  position: absolute;
  inset: 0;
  border-radius:1px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Title-Box unten links */
.fs24-tile__titlebox {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 3;
  transition: transform .40s ease; /* etwas schneller */
  will-change: transform;
}

/* Subline Badge */
.fs24-tile__badge {
  display: inline-block;
  padding: 8px 12px;
  border-radius:1px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-shadow: 0 8px 18px rgba(0,0,0,.45);
}

/* Haupttitel */
.fs24-tile__title {
  margin: 0;
  font-size: 46px;
  line-height: 1.02;
  color: #fff;
  text-shadow: 0 12px 28px rgba(0,0,0,.55);
  transition: color .25s ease; /* schneller */
}

/* Hover-Overlay ? volle Fläche, sauberer Start */
.fs24-tile__hover {
  position: absolute;
  inset: 0;
  border-radius:1px;

  background: linear-gradient(180deg, rgba(170,235,235,.28), rgba(170,235,235,.78));
  backdrop-filter: blur(5px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;

  padding: 30px 30px 26px 30px;
  padding-top: 165px;
  color: #111;

  transform: translate3d(0, 101%, 0); /* <<< startet sauber knapp unterhalb */
  opacity: 0;
  transition: transform .35s ease, opacity .25s ease; /* <<< smoother & schneller */
  will-change: transform, opacity;

  z-index: 2;
}

/* Beschreibungstext */
.fs24-tile__desc {
  max-width: 520px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

/* Hover State */
.fs24-tile.is-hover .fs24-tile__hover {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.fs24-tile.is-hover .fs24-tile__titlebox {
  transform: translateY(-120px);
}

.fs24-tile.is-hover .fs24-tile__title {
  color: #0b3f57;
}

/* Responsive */
@media (max-width: 991px) {
  .fs24-tiles {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }

  .fs24-tile__title {
    font-size: 40px;
  }

  .fs24-tile__titlebox {
    left: 18px;
    bottom: 18px;
  }
}

/* ================================
   FS24 Category Overview (10 Tiles) ? CLEAN (ohne Rand) + Hover exakt bündig
   ================================ */

.fs-cat-overview .fs-cat-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:24px;
  width:100%;
  box-sizing:border-box;
}

/* Links */
.fs-cat-overview .fs-cat-card{
  min-width:0;
  display:block;
  text-decoration:none;
}

/* Kachel ohne Rand/Innenrahmen */
.fs-cat-overview .fs-cat-card-inner{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:1px;
  background:transparent;
  padding:0;
  box-sizing:border-box;
}

/* Bild vollflächig */
.fs-cat-overview .fs-cat-card-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:1px;
  display:block;
}

/* dunkler Verlauf unten */
.fs-cat-overview .fs-cat-card-inner::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:1px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
  z-index:1;
  pointer-events:none;
}

/* Titel bleibt fix */
.fs-cat-overview .fs-cat-card-body{
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  z-index:4;
}

.fs-cat-overview .fs-cat-card-title{
  display:block;
  margin:0;
  font-size:20px;
  line-height:1.12;
  color:#fff;
  text-shadow:none;
}

/* alte Texte ausblenden */
.fs-cat-overview .fs-cat-card-text,
.fs-cat-overview .fs-cat-card-link{
  display:none !important;
}

/* Hover Overlay */
.fs-cat-overview .fs-cat-card-inner::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:1px;
  background:linear-gradient(180deg, rgba(170,235,235,.28), rgba(170,235,235,.78));
  backdrop-filter:blur(5px);
  transform:translateY(110%);
  opacity:0;
  transition:transform .35s ease, opacity .35s ease; /* <<< schneller */
  z-index:2;
  pointer-events:none;
}

/* Kurzbeschreibung */
.fs-cat-overview .fs-cat-card-desc{
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  z-index:3;
  padding-top:42px;
  transform:translateY(110%);
  opacity:0;
  transition:transform .35s ease, opacity .35s ease; /* <<< schneller */
  color:#111;
  font-size:14px;
  line-height:1.5;
}

/* Hover States */
.fs-cat-overview .fs-cat-card:hover .fs-cat-card-inner::before{
  transform:translateY(0);
  opacity:1;
}
.fs-cat-overview .fs-cat-card:hover .fs-cat-card-desc{
  transform:translateY(0);
  opacity:1;
}
.fs-cat-overview .fs-cat-card:hover .fs-cat-card-title{
  color:#0b3f57;
  text-shadow:none;
}

/* Responsive */
@media (max-width: 1400px){
  .fs-cat-overview .fs-cat-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1100px){
  .fs-cat-overview .fs-cat-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width: 800px){
  .fs-cat-overview .fs-cat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
  .fs-cat-overview .fs-cat-card-title{ font-size:20px; }
  .fs-cat-overview .fs-cat-card-body,
  .fs-cat-overview .fs-cat-card-desc{ left:16px; right:16px; bottom:16px; }
}
@media (max-width: 520px){
  .fs-cat-overview .fs-cat-grid{ grid-template-columns:1fr; }
}

/* ================================
   FS24 Cat-Overview ? Hover: Kurzbeschreibung hervorheben
   (Patch: unter den bestehenden Block setzen)
   ================================ */

/* Basis: Desc schon etwas ?lesbarer? (ohne Hover) */
.fs-cat-overview .fs-cat-card-desc{
  color: rgba(17, 17, 17, 0.92);
}

/* Hover: Desc bekommt mehr ?Presence? */
.fs-cat-overview .fs-cat-card:hover .fs-cat-card-desc{
  color:#082637;                 /* dunkler, klarer */
  font-weight:700;               /* stärker */
  letter-spacing:-0.005em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55); /* leichtes ?Crisp? */
}

/* Optional: Desc bekommt einen dezenten ?Glas?-Hintergrund
   -> macht Text auf dem teal overlay deutlich edler/lesbarer */
.fs-cat-overview .fs-cat-card-desc{
  border-radius:1px;
  padding:12px 14px 12px 14px;    /* war padding-top:42px ? bleibt gleich über extra top-Padding unten */
  background: rgba(255,255,255,0.0);
  box-shadow: none;
}

/* nur beim Hover aktivieren */
.fs-cat-overview .fs-cat-card:hover .fs-cat-card-desc{
  background: rgba(255,255,255,0.72);
  box-shadow: 0 12px 30px rgba(3, 32, 45, 0.18);
}

/* WICHTIG: dein bestehendes padding-top:42px beibehalten,
   damit der Title-Bereich oben Luft hat */
.fs-cat-overview .fs-cat-card-desc{
  padding-top:15px; /* bleibt */
}

/* Titel beim Hover noch einen Tick ?Button-like? */
.fs-cat-overview .fs-cat-card:hover .fs-cat-card-title{
  font-weight:900;
}

.fs-black-clean{
  background: linear-gradient(180deg,#07151f,#041018);
  padding: 0 0 44px 0;
}

/* HERO */
.fs-black-clean-hero{
  height: 300px;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* leichter Fade ins Dunkle */
.fs-black-clean-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(4,16,24,.95) 100%);
}

/* INNER */
.fs-black-clean-inner{
  max-width: 1320px;
  margin: -190px auto 0 auto;
  padding: 0 28px;

  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;

  position: relative;
  z-index: 2;
}

/* TEXT */
.fs-black-clean-text{
  color:#fff;
  padding-top: 10px;
}

.fs-black-clean-kicker{
  display:inline-block;
  margin-bottom: 10px;
  font-size:12px;
  letter-spacing:.14em;
  font-weight:800;
  background: linear-gradient(90deg,#0b6aa6,#21b6a6);
  padding:8px 14px;
  border-radius:1px;
  color:#fff;
}

.fs-black-clean-text h2{
  color:#fff;
  font-size:38px;
  line-height:1.05;
  margin: 0 0 14px 0;
}

.fs-black-clean-text p{
  color: rgba(255,255,255,.92);
  font-size:15.5px;
  line-height:1.65;
  max-width:460px;
  margin: 0;
}

/* SLOT rechts (für OPC Stream) */
.fs-black-clean-stream-slot{
  min-height: 280px; /* damit die Section nicht "zusammenfällt" ohne Stream */
}

/* MOBILE */
@media(max-width:900px){
  .fs-black-clean-hero{ height: 240px; }

  .fs-black-clean-inner{
    grid-template-columns:1fr;
    margin-top:-60px;
    gap: 18px;
  }

  .fs-black-clean-text{
    padding-top: 0;
  }

  .fs-black-clean-text h2{
    font-size:28px;
  }

  .fs-black-clean-stream-slot{
    min-height: 220px;
  }
}
/* =========================================================
   FS24 Black Edition Stage
   Bild oben ? dunkler Teal Verlauf unten
========================================================= */

.fs-black-edition-stage{
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
  padding-bottom: 10px;
}

/* Gradient-Layer über dem Bild */
.fs-black-edition-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    /* Oben leicht abdunkeln für Lesbarkeit */
    linear-gradient(
      180deg,
      rgba(7,21,31,0.25) 0%,
      rgba(7,21,31,0.35) 30%,
      rgba(7,21,31,0.65) 55%,
      rgb(7 21 31 / 78%) 70%,
      rgb(7 21 31 / 82%) 85%,
      #07151f99 100%
    ),
    /* FS24 UI Mood (teal glow) */
    radial-gradient(70% 70% at 70% 80%, rgba(10,174,202,.25), transparent 60%),
    radial-gradient(60% 60% at 25% 75%, rgba(43,119,164,.18), transparent 65%);
}

/* WICHTIG: Inhalt über den Verlauf heben */
.fs-black-edition-stage > div{
  position: relative;
  z-index: 2;
}

/* =========================================================
   FS DUAL GUIDE (namespaced) ? FINAL CLEAN (mit Link-Fix rechts)
   ========================================================= */

:root{
  --fsdg-gray-mid:  rgba(120,120,120,.85); /* links */
  --fsdg-gray-dark: rgba(70,70,70,.90);    /* rechts */
}

/* ======================================================
   Container
   ====================================================== */
.fsdg-dual-guide{
  position:relative;
  border-radius:1px;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(135deg,
    rgba(255,255,255,.98) 0%,
    rgba(240,246,247,.98) 55%,
    rgba(220,236,238,.99) 100%
  );
  box-shadow:1px 2px 4px rgba(0,0,0,.84);
  min-height: 112px;
}

/* ======================================================
   Diagonale Trennlinie (clean & stabil) ? leicht nach rechts versetzt
   ====================================================== */
.fsdg-dual-guide::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:9;

  opacity:.45;
  transition: opacity .16s ease, background .16s ease, transform .16s ease;
  transform: translate3d(0,0,0);
  transform-origin:center;

  clip-path: polygon(
    33.7% 0%,
    34.3% 0%,
    60.3% 100%,
    59.7% 100%
  );

  background: linear-gradient(
    to bottom,
    rgba(200,200,200,.35),
    rgba(150,150,150,.25),
    rgba(200,200,200,.35)
  );
}

/* Hover links ? Linie grau, minimal nach links */
.fsdg-dual-guide:has(.fsdg-panel--verlege:hover)::before{
  opacity:.95;
  background: linear-gradient(
    to bottom,
    var(--fsdg-gray-mid),
    var(--fsdg-gray-mid),
    var(--fsdg-gray-mid)
  );
  transform: translate3d(-1px,0,0);
}

/* Hover rechts ? Linie dunkler grau, minimal nach rechts */
.fsdg-dual-guide:has(.fsdg-panel--farbe:hover)::before{
  opacity:.95;
  background: linear-gradient(
    to bottom,
    var(--fsdg-gray-dark),
    var(--fsdg-gray-dark),
    var(--fsdg-gray-dark)
  );
  transform: translate3d(1px,0,0);
}

/* ======================================================
   Panels
   ====================================================== */
.fsdg-panel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  text-decoration:none;
  cursor:pointer;
  z-index:1;
}

/* Clip-Pfade ? konsistent zur Trennlinie */
.fsdg-panel--verlege{
  clip-path: polygon(
    0% 0%,
    80% 0%,
    62% 100%,
    0% 100%
  );
}

.fsdg-panel--farbe{
  clip-path: polygon(
    34% 0%,
    100% 0%,
    100% 100%,
    60% 100%
  );
  z-index:2;
  border-radius:1px;
  border-radius:1px;
  overflow:hidden;
}

/* ======================================================
   Hintergründe
   ====================================================== */
.fsdg-bg{
  position:absolute;
  top:-2px; right:-2px; bottom:-2px; left:-2px;
}

.fsdg-bg--light{
  background:linear-gradient(135deg,
    rgba(255,255,255,.98) 0%,
    rgba(240,246,247,.98) 55%,
    rgba(220,236,238,.99) 100%
  );
}

.fsdg-bg--dark{
  background:linear-gradient(135deg,
    rgba(11,63,87,.96) 0%,
    rgba(11,127,165,.92) 55%,
    rgba(33,182,166,.88) 100%
  );
}

/* ======================================================
   Panel Hover Ränder (nur aktive Seite!)
   ====================================================== */
.fsdg-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  clip-path:inherit;
  opacity:0;
  transition: opacity .15s ease, box-shadow .15s ease;
}

/* Links */
.fsdg-panel--verlege:hover::after{
  opacity:1;
  box-shadow: inset 0 0 0 2px var(--fsdg-gray-mid);
}

/* Rechts */
.fsdg-panel--farbe:hover::after{
  opacity:1;
  box-shadow: inset 0 0 0 2px var(--fsdg-gray-dark);
}

/* ======================================================
   Content & Typo
   ====================================================== */
.fsdg-content{
  position:absolute;
  z-index:3;
  max-width:520px;
}

.fsdg-content--left{
  left: 15px;
  bottom: 7px;
  right: 52%;
}

.fsdg-content--right{
  top: 7px;
  right:13px;
  left:52%;
  text-align:right;
}

/* Typo */
.fsdg-kicker{
  font-size: 15.5px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  margin:0 0 6px;
  color:rgba(11,43,58,.72);
}
.fsdg-kicker--light{ color:rgba(255,255,255,.92); }

.fsdg-title{
  font-size:18px;
  font-weight:900;
  line-height:1.15;
  margin:0 0 6px;
  color:#0c2f62;
}
.fsdg-title--light{
  color:#fff;
  text-shadow:0 10px 26px rgba(0,0,0,.25);
}

.fsdg-text{
  font-size:13px;
  line-height:1.55;
  margin:0;
  color:rgba(15,32,48,.78);
}
.fsdg-text--light{
  color:rgba(255,255,255,.92);
  margin-left:auto;
}

/* Links */
.fsdg-link{
  margin-top:8px;
  font-size:12.5px;
  font-weight:900;
  color:rgba(11,63,87,.95);
  transition: transform .18s ease, letter-spacing .18s ease, color .18s ease, text-shadow .18s ease;
}
.fsdg-link--light{
  color:rgba(255,255,255,.92);
  text-shadow:0 8px 18px rgba(0,0,0,.30);
}

/* Hover Moves */
.fsdg-panel--verlege:hover .fsdg-link{
  transform: translateX(3px);
}
.fsdg-panel--farbe:hover .fsdg-link{
  transform: translateX(-3px);
  color:rgba(255,255,255,.98);
  text-shadow:0 10px 22px rgba(0,0,0,.36);
}

/* ======================================================
   Pressed Effect
   ====================================================== */
.fsdg-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  clip-path:inherit;
  opacity:0;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.fsdg-panel--verlege:hover::before{
  opacity:1;
  transform: translate3d(1px,1px,0);
  box-shadow:
    inset 0 10px 12px rgba(11,63,87,.14),
    inset 0 -10px 10px rgba(11,63,87,.12),
    inset 8px 0 10px rgba(11,63,87,.10),
    inset -14px 0 22px rgba(11,127,165,.20);
}

.fsdg-panel--farbe:hover::before{
  opacity:1;
  transform: translate3d(-1px,1px,0);
  box-shadow:
    inset 0 12px 20px rgba(255,255,255,.22),
    inset 0 -12px 18px rgba(255,255,255,.14),
    inset -14px 0 18px rgba(255,255,255,.18),
    inset 20px 0 30px rgba(255,255,255,.26);
}



/* =========================
   PROMO / DEALS ? Kontrast zum Guide
   ========================= */
.fs-promo-deals{
  position:relative;
  border-radius:1px;
  overflow:hidden;
  padding:18px;
  box-shadow:1px 2px 4px rgba(0,0,0,.84);

  /* deutlich kräftiger als Guide */
  background: linear-gradient(135deg,
    rgba(11,63,87,.98) 0%,
    rgba(11,127,165,.92) 55%,
    rgba(33,182,166,.86) 100%
  );
  isolation:isolate;
}

/* feiner Innenring */
.fs-promo-deals::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  z-index:0;
}

.fs-promo-head{
  position:relative;
  z-index:1;
  padding:4px 2px 14px 2px;
}

.fs-promo-badge{
  display:inline-block;
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  padding:7px 10px;
  border-radius:1px;
  color:#0c2f62;
  background: rgba(255,255,255,.92);
}

.fs-promo-title{
  margin:10px 0 4px 0;
  font-size:20px;
  font-weight:900;
  line-height:1.15;
  color:#fff;
  text-shadow:0 10px 26px rgba(0,0,0,.25);
}

.fs-promo-sub{
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  color:rgba(255,255,255,.88);
  max-width:70ch;
}

/* Grid */
.fs-promo-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

@media (max-width: 820px){
  .fs-promo-grid{ grid-template-columns: 1fr; }
}

/* Item-Card (weiß, damit es nach ?Deal? aussieht) */
.fs-promo-item{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  border-radius:1px;
  background: rgba(255,255,255,.94);
  overflow:hidden;
  padding:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition: transform .18s ease, box-shadow .18s ease;
}

.fs-promo-item:hover{
  transform: translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.16);
}

.fs-promo-imgwrap{
  width:92px;
  height:92px;
  border-radius:1px;
  overflow:hidden;
  flex:0 0 auto;
  background: rgba(12,47,98,.06);
}

.fs-promo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .18s ease, filter .18s ease;
  filter: saturate(1.05) contrast(1.03);
}

.fs-promo-item:hover .fs-promo-img{
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.05);
}

.fs-promo-meta{
  min-width:0;
}

.fs-promo-kicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(11,43,58,.70);
}

.fs-promo-name{
  margin-top:4px;
  font-size:15px;
  font-weight:900;
  color:#0c2f62;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fs-promo-cta{
  margin-top:8px;
  font-size:13px;
  font-weight:900;
  color: rgba(11,127,165,.95);
}

/* Aktionsbanner kompakter */
.fs-promo-deals{
  padding: 7px !important;       /* war 18 */
  border-radius:1px; /* war 16 */
}

/* Header kleiner */
.fs-promo-title{
  font-size: 18px !important;
  line-height: 1.15 !important;
  margin: 8px 0 3px 0 !important;
}
.fs-promo-sub{
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Badge etwas kleiner */
.fs-promo-badge{
  font-size: 10.5px !important;
  padding: 6px 9px !important;
}

/* Grid & Karten kompakter */
.fs-promo-grid{
  gap: 10px !important;
}

.fs-promo-item{
  padding: 8px !important;
  border-radius:1px;
  gap: 10px !important;
}

/* Bild kleiner */
.fs-promo-imgwrap{
  width: 74px !important;
  height: 74px !important;
  border-radius:1px;
}

/* Text in Cards kleiner */
.fs-promo-name{
  font-size: 14px !important;
}
.fs-promo-cta{
  font-size: 12.5px !important;
  margin-top: 6px !important;
}
/* =========================
   PROMO-DEALS ? Deal-Mark (%)
   ========================= */

section.fs-promo-deals{
  position: relative;
  overflow: hidden; /* sauber clippen */
}

/* Deal-Mark oben rechts */
section.fs-promo-deals .fs-promo-mark{
  display: block;
  visibility: visible;
  opacity: .9;

  position: absolute;
  top: -10px;
  right: 44px;

  z-index: 5;
  pointer-events: none;

  font-size: 126px;
  font-weight: 900;
  line-height: 1;

  /* FS24 Signature Look (kein Billig-Rabatt) */
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 55%),
    rgb(216 255 251 / 55%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow: 0 15px 26px rgb(255 255 255 / 18%);
  transform: rotate(-0deg);
}

/* Promo-Head immer über dem Zeichen */
section.fs-promo-deals .fs-promo-head{
  position: relative;
  z-index: 6;
}
/* =========================
   PROMO DEALS ? Badge MAXIMAL präsent
   ========================= */

section.fs-promo-deals{
  position: relative;
  overflow: hidden;
}

/* ---------------------------------
   Großes, ruhiges Prozent-Zeichen
   --------------------------------- */
section.fs-promo-deals .fs-promo-mark{
  position:absolute;
  top: -9px;
  right: 24px;
  z-index: 1;
  pointer-events:none;
  font-size: 105px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,.20);
  text-shadow: 0 18px 36px rgba(0,0,0,.10);
  transform: rotate(-12deg);
}

/* ---------------------------------
   Head ? mehr Raum nach unten
   --------------------------------- */
section.fs-promo-deals .fs-promo-head{
  position: relative;
  z-index: 2;
  margin: -4px 0 0px 0;
}

/* ---------------------------------
   BADGE ? NOCH GRÖSSER, LANG, KLAR
   --------------------------------- */
section.fs-promo-deals .fs-promo-badge{
  display:inline-flex;
  align-items:center;

  /* bewusst groß & lang */
  padding: 24px 40px;            /* mehr Höhe & Länge */
  min-width: 325px;              /* deutlich länger */
  min-height: 50px;
  border-radius:1px;
  font-size: 23px;               /* <<< HIER deutlich größer */
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 18px 38px rgba(0,0,0,.16);
  backdrop-filter: saturate(130%) blur(8px);
}

/* ---------------------------------
   Karten-Typo ? unverändert
   --------------------------------- */
section.fs-promo-deals .fs-promo-kicker{
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgb(0 0 0 / 80%);
}

section.fs-promo-deals .fs-promo-name{
  font-size: 15.5px;
  font-weight: 900;
  color: #000000;
}

section.fs-promo-deals .fs-promo-cta{
  font-size: 13.5px;
  font-weight: 900;
  margin-top: 8px;
  color: rgb(0 0 0 / 95%);
}

section.fs-promo-deals .fs-promo-head .fs-promo-badge{
  font-size: 23px !important;
}
/* =========================================================
   FS24 PROMO DEALS ? full width, mobile ready
   ========================================================= */

.fs24-promo-deals{
  position:relative;
  overflow:hidden;          /* wichtig für Prozentzeichen */
  padding:14px;
  isolation:isolate;

  /* KEIN Border-Radius ? füllt komplett */
  border-radius:1px;

  background: linear-gradient(135deg,
    rgba(11,63,87,.98) 0%,
    rgba(11,127,165,.92) 55%,
    rgba(33,182,166,.86) 100%
  );

  box-shadow:0 10px 26px rgba(0,0,0,.14);
}

/* dezenter Innenring (ohne Radius) */
.fs24-promo-deals::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  z-index:0;
}

/* Prozentzeichen */
.fs24-promo-mark{
  position:absolute;
  top:-10px;
  right:16px;
  z-index:0;
  pointer-events:none;

  font-size:90px;
  font-weight:900;
  line-height:1;

  color: rgba(255,255,255,.18);
  text-shadow:0 18px 36px rgba(0,0,0,.10);
  transform: rotate(-12deg);
}

/* Head */
.fs24-promo-head{
  position:relative;
  z-index:1;
  margin:0 0 10px 0;
}

/* Badge ? darf Radius behalten */
.fs24-promo-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 14px;
  border-radius:1px;

  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;

  color:#fff;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 24px rgba(0,0,0,.12);

  backdrop-filter: saturate(130%) blur(8px);
}

/* Grid ? mobile first */
.fs24-promo-grid{
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

@media (min-width:820px){
  .fs24-promo-grid{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
}

/* Card ? Radius bleibt */
.fs24-promo-item{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;

  padding:8px;
  border-radius:1px;
  background: rgba(255,255,255,.94);

  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition: transform .18s ease, box-shadow .18s ease;
}

.fs24-promo-item:hover{
  transform: translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.16);
}

/* Bild */
.fs24-promo-imgwrap{
  width:74px;
  height:74px;
  border-radius:1px;
  overflow:hidden;
  flex:0 0 auto;
  background: rgba(12,47,98,.06);
}

.fs24-promo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .18s ease, filter .18s ease;
  filter: saturate(1.05) contrast(1.03);
}

.fs24-promo-item:hover .fs24-promo-img{
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.05);
}

/* Text */
.fs24-promo-meta{
  min-width:0;
}

.fs24-promo-kicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(0,0,0,.70);
}

.fs24-promo-name{
  margin-top:4px;
  font-size:14px;
  font-weight:900;
  color:#0c2f62;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fs24-promo-cta{
  margin-top:6px;
  font-size:12.5px;
  font-weight:900;
  color: rgba(11,127,165,.95);
}


@media (max-width: 820px){
  .fs24-promo-deals{
    margin-left: -14px;
    margin-right: -14px;
    
  }
}
/* =========================================================
   FS INTRO (Text Only) ? CLEAN WHITE + LONG DIVIDER
   ========================================================= */

.fs-intro-bestseller.fs-intro-text-only{
  position:relative;
  overflow:hidden;

  /* Inline-Style überschreiben: clean white */
  background:#fff !important;
  padding: 25px 0 18px !important;

  /* etwas Abstand zur nächsten Section */
  margin-bottom: 18px;
}

/* KEIN Verlauf mehr (wir bleiben clean) */
.fs-intro-bestseller.fs-intro-text-only::before{
  content:none !important;
}

/* Content normal */
.fs-intro-bestseller.fs-intro-text-only .fs-intro-col,
.fs-intro-bestseller.fs-intro-text-only .fs-intro-text{
  position:relative;
}

/* =========================================================
   Claim / H1 / Subline ? ruhig auf Weiß
   ========================================================= */

/* Claim: dezente Label-Kapsel (Test) */
.fs-intro-claim{
  display:inline-flex;
  align-items:center;

  margin: 0 0 10px;
  padding: 6px 10px;

  border-radius:1px;
  border: 1px solid rgba(12,47,98,.12);
  background: rgba(245,248,249,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90);

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;

  color: rgba(12,47,98,.62);
}

/* Strich weg (war optisch unsauber) */
.fs-intro-claim::before{
  content:none !important;
}

/* H1: klar, nicht zu groß */
.fs-intro-h1{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(26px, 2.45vw, 34px);
  color: #0c2f62;
}

/* Break: Akzent bleibt */
.fs-intro-h1-break{
  color: rgba(11,127,165,.95);
}

/* Subline: ruhig, editorial */
.fs-intro-subline{
  margin: 0;
  max-width: 78ch;

  font-size: clamp(14px, 1.05vw, 16.5px);
  line-height: 1.7;
  color: rgba(15,32,48,.72);
}

.fs-intro-subline strong{
  font-weight: 900;
  color: rgba(12,47,98,.86);
}

/* =========================================================
   Abschluss ? Text pur + LONG DIVIDER
   ========================================================= */

.fs-intro-end{
  position:relative;

  /* nur Typo, kein Kasten */
  margin-top: 39px;
  padding: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(12,47,98,.70);
}

/* lange Linie unter dem Marker (sichtbare Trennung) */
.fs-intro-end::after{
  content:"";
  position:relative;
  display:block;

  /* länger als vorher: nicht nur Textbreite */
  width: min(820px, 100%);
  height: 3px;
  margin: 0px auto 0 auto;

  border-radius:1px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0),
    rgba(12,47,98,.18),
    rgba(11,127,165,.34),
    rgba(33,182,166,.30),
    rgba(0,0,0,0)
  );
  opacity: .95;
}

/* optional: hairline darunter für ?sauberen Cut? */
.fs-intro-end::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:-6px;



/* =========================================================
   Mobile ? kompakter, Linie bleibt lang
   ========================================================= */

@media (max-width: 600px){
  .fs-intro-bestseller.fs-intro-text-only{
    padding: 24px 0 14px !important;
    margin-bottom: 14px;
  }

  .fs-intro-claim{
    font-size: 10.5px;
    margin-bottom: 9px;
    padding: 6px 9px;
    border-radius:1px;
  }

  .fs-intro-h1{
    font-size: clamp(23px, 7vw, 32px);
    line-height: 1.15;
    margin-bottom: 9px;
  }

  .fs-intro-subline{
    font-size: 14px;
    line-height: 1.75;
  }

  .fs-intro-end{
    margin-top: 16px;
    font-size: 10.5px;
    letter-spacing: .10em;
  }

  .fs-intro-end::after{
    margin-top: 10px;
    height: 2px;
  }

  .fs-intro-end::before{
    width: 100%;
  }
}
}
/* =========================================================
   FS24 FULL-WIDTH SECTION DIVIDER vor Blog
   → NUR Mobile + Tablet
   ========================================================= */
@media (max-width: 991.98px) {

    /* === FS24 FULL-WIDTH SECTION DIVIDER vor Blog === */
    li.nav-item.d-lg-none a[href*="Blog_fliesenschiene24"],
    li.nav-item.d-lg-none a[href*="/blog"] {
        position: relative;
    }

    /* Blau → Türkis Verlauf */
    li.nav-item.d-lg-none a[href*="Blog_fliesenschiene24"]::before,
    li.nav-item.d-lg-none a[href*="/blog"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg,
            var(--fs-blue-main) 0%,
            var(--fs-teal-main) 100%
        );
    }

}

@media (max-width: 993px) {

  /* Slick-Maske bleibt horizontal aktiv */
  .slick-list{
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* Karten dürfen in der Höhe wachsen */
  .slick-slide,
  .productbox,
  .product-box,
  .productbox-inner{
    height: auto !important;
  }

}

button.btn.min-w-sm.btn-primary {
    min-height: 39px !important;
}

#alert-list{
display:none;}