/* ========================================
   Navbar & Buttons
   ======================================== */
/*.navbar-toggler.boxed {
  background-color: var(--inx-yellow) !important;
  padding: 0px 5px;
  border-radius: 4px;
  border: 1px solid var(--s-c-text);
}

.navbar-toggler.boxed:hover {
  background-color: var(--inx-stone) !important;
}

.navbar-toggler.boxed:hover .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3e%3cpath d='M3,20.6v-1.3h20v1.3H3ZM3,13.7v-1.4h16.4v1.4H3ZM3,6.7v-1.3h20v1.3H3Z' fill='%23FFF74D'/%3e%3c/svg%3e") !important;
}*/
/***
a.ghost-button[href="/de/demo/"],
a.ghost-button[href="/de/demo-v7/"] {
  color: var(--inx-stone) !important;
  background-color: var(--inx-ocean-seq) !important;
}

a.ghost-button[href="/de/demo/"]:hover,
a.ghost-button[href="/de/demo-v7/"]:hover{
  color: var(--inx-white) !important;
  background-color: var(--inx-ocean) !important;
}

/*** Brand-Nav Test-Account ***/
/*
.btn-on-brand a.ghost-button {
  color: var(--inx-stone) !important;
  background-color: var(--inx-ocean-seq) !important;
}

.btn-on-brand a.ghost-button:hover{
  color: var(--inx-white) !important;
  background-color: var(--inx-ocean) !important;
}
*/

/* ========================================
   Images
   ======================================== */

.img-shrink-sm>img,.img-shrink-sm>.image,.img-shrink-sm>picture,.img-shrink-sm>a>picture {
    width: 20%;
    display: block
}

/* ========================================
   Teaser & Layout
   ======================================== */
.fullwidth.feature-bar {
  padding: var(--s-spacing-3) 0;
}

.str_textimageteaser_hor .row {
  display: flex;
  align-items: center; /* vertikale Zentrierung */
}

.str_textimageteaser_hor .content {
  align-items: center;
  padding-left: 0;
  /*hyphens: auto;*/
}

.str_textimageteaser_hor .image {
  display: flex;
  align-items: center;           /* vertikal zentriert */
  justify-content: center;       /* horizontal zentriert */
}

.text-image-teaser-hor .image .holder {
  width: calc(60% + var(--s-gutter-05)) !important;
}

.text-image-teaser .image img {
  transition: none;
  -webkit-transition: none;
}

.text-image-teaser:not(.img-shrink).linked:hover .image img {
  transform: none;
  -webkit-transform: none;
}


/* ========================================
   Messages
   ======================================== */
.message_missing {
    display: block;
    width: 100%;
    padding: 0.75em;
    border: 1px solid #FB2355; /* Inx_Berry */
    background-color: #FF5670; /* Inx_Berry_seq */
    border-radius: 4px;
    /*color: #FB2355; /* Inx_Berry */
}

.message_info {
    display: block;
    width: 100%;
    padding: 0.75em;
    border: 1px solid #01938E; /* Inx_Ocean */
    background-color: #19E3C5; /* Inx_Ocean_seq */
    border-radius: 4px;
    /*color: #01938E; /* Inx_Ocean */
}

.message_success {
    display: block;
    width: 100%;
    padding: 0.75em;
    border: 1px solid #30E397; /* Inx_Mint */
    background-color: #6EFFBC; /* Inx_Mint_seq */
    border-radius: 4px;
    /*color: #30E397; /* Inx_Mint */
}

/* ========================================
   Popup
   ======================================== */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-content {
  background: var(--inx-white);
  padding: 20px;
  border-radius: 4px;
  max-width: 1280px;
  width: 90%;
  position: relative;
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 10000;
}

/* ========================================
   Hinweis für internen Traffic
   ======================================== */
.internal-traffic-overlay {
  position: fixed;
  bottom: 5px;
  left: 10px;
  z-index: 2147483647;
  background: var(--inx-stone);
  color: var(--inx-white);
  border-radius: 4px;
  padding: 6px 10px;
  line-height: 1;
  pointer-events: none;
}

/* ========================================
   Teaser-Switch auf Demo-Seite
   ======================================== */
.text-image-teaser-hor.custom {
  background-color: var(--inx-stone5);
  padding: var(--s-spacing-2) !important;
  border-bottom: 5px solid transparent;
}

.text-image-teaser-hor.custom:hover {
  border-color: var(--inx-ocean);
}

.text-image-teaser-hor.custom .linkfull:hover {
    opacity: initial;
}

.custom.active,
.custom.active:hover{
  border-color: var(--inx-ocean-seq);
}

.text-image-teaser-hor.custom .image .holder {
    width: calc(40% + var(--s-gutter-05)) !important;
}

/* =========================================
 * Price-Cards
 * ========================================= */

.price-cards {
  margin-top: 16px;
  margin-bottom: 24px;
}

.price-cards .row {
  align-items: stretch;
}

/* -----------------------------------------
 * Card Base
 * ----------------------------------------- */

.price-cards .price-card {
  border-radius: 4px;
  border: 1px solid var(--inx-stone20);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  padding: var(--s-spacing-2) var(--s-spacing-2);
}

.price-cards .price-card.is-featured {
  border-width: 3px;
}

/* Card border colors */
.price-cards .price-card.card-yellow {
  border-color: var(--inx-yellow);
}

.price-cards .price-card.card-ocean {
  border-color: var(--inx-ocean);
}

.price-cards .price-card.card-ocean-seq {
  border-color: var(--inx-ocean-seq);
}

.price-cards .price-card.card-purple-seq {
  border-color: var(--inx-purple-seq);
}

.price-cards .price-card.card-lavender-seq {
  border-color: var(--inx-lavender-seq);
}

.price-cards .price-card.card-stone10 {
  border-color: var(--inx-stone10);
}

@media (max-width: 767px) {
  .price-cards .price-card {
    padding: var(--s-spacing-2) var(--s-gutter);
  }
}

/* -----------------------------------------
 * Overline / Badge
 * ----------------------------------------- */

.price-cards .overline {
  border-radius: 4px;
  padding: 6px 10px;
  line-height: 1;
  margin: 0 0 1.33em auto;
  color: var(--s-c-darkgrey);
}

.price-cards .overline.badge-yellow {
  background: var(--inx-yellow);
}

.price-cards .overline.badge-ocean {
  background: var(--inx-ocean);
  color: var(--inx-white);
}

.price-cards .overline.badge-ocean-seq {
  background: var(--inx-ocean-seq);
}

.price-cards .overline.badge-stone10 {
  background: var(--inx-stone10);
}

/* -----------------------------------------
 * Headline / Intro
 * ----------------------------------------- */

.price-cards .headline {
}

.price-cards .pc-intro {
}

/* -----------------------------------------
 * Price
 * ----------------------------------------- */

.price-cards .price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.price-cards .price .from {
  font-family: "Barlow-Bold", Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.price-cards .price .amount {
  font-size: 40px;
  line-height: 48px;
  font-family: "Barlow-Bold", Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: var(--inx-ocean);
}

.price-cards .price .unit {
  font-family: "Barlow-Bold", Helvetica, Arial, sans-serif;
  font-weight: bold;
}

/* -----------------------------------------
 * Buttons
 * ----------------------------------------- */

@media (min-width: 768px) {
  .price-cards .buttons {
    height: calc(2 * (40px + var(--s-spacing)));
  }
}

.price-cards .ghost-button,
.price-cards .ghost-button-secondary {
  width: 100%;
}

.price-cards .ghost-button {
  color: var(--inx-stone) !important;
  background-color: var(--inx-ocean-seq) !important;
}

.price-cards .ghost-button:hover {
  color: var(--inx-white) !important;
  background-color: var(--inx-ocean) !important;
}

/* -----------------------------------------
 * Horizontal Ruler
 * ----------------------------------------- */

.price-cards hr {
  border: 0;
  height: 1px;
  background: var(--inx-stone10);
  width: 100%;
  display: block;
  margin: 1.33em 0;
}

/* -----------------------------------------
 * List Icons
 * ----------------------------------------- */

.price-cards ul.ul-checkmarks {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;

  --list-icon: "\E80A";
  --list-bg: var(--inx-yellow);
  --list-icon-color: var(--s-c-darkgrey);
  --list-icon-font: "icons";
  --list-icon-weight: normal;
  --icon-offset-x: 0px;
  --icon-offset-y: 0px;
  --icon-size: 18px;
  --icon-circle-size: 26px;
}

.price-cards ul.ul-checkmarks li {
  position: relative;
  padding-left: 36px;
}

.price-cards ul.ul-checkmarks li + li {
  margin-top: 0.5em;
}

.price-cards ul.ul-checkmarks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--icon-circle-size);
  height: var(--icon-circle-size);
  border-radius: 50%;
  background: var(--list-bg);
}

.price-cards ul.ul-checkmarks li::after {
  content: var(--list-icon);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--icon-circle-size);
  height: var(--icon-circle-size);

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

  font-family: var(--list-icon-font);
  font-weight: var(--list-icon-weight);
  font-size: var(--icon-size);
  line-height: 1;
  color: var(--list-icon-color);

  transform: translate(var(--icon-offset-x), var(--icon-offset-y));
}

/* -----------------------------------------
 * Icon Variants
 * ----------------------------------------- */

.price-cards ul.ul-checkmarks.icon-check {
  --list-icon: "\E806";
  --list-icon-font: "icons";
  --list-icon-weight: normal;
  --icon-offset-y: 1px;
}

.price-cards ul.ul-checkmarks.icon-arrow-right {
  --list-icon: "\E804";
  --list-icon-font: "icons";
  --list-icon-weight: normal;
  --icon-offset-y: 1px;
}

.price-cards ul.ul-checkmarks.icon-x {
  --list-icon: "\E812";
  --list-icon-font: "icons";
  --list-icon-weight: normal;
  --icon-offset-y: 1px;  
}

/* -----------------------------------------
 * Background Variants
 * ----------------------------------------- */

.price-cards ul.ul-checkmarks.bg-yellow {
  --list-bg: var(--inx-yellow);
  --list-icon-color: var(--s-c-darkgrey);
}

.price-cards ul.ul-checkmarks.bg-ocean {
  --list-bg: var(--inx-ocean);
  --list-icon-color: var(--inx-white);
}

.price-cards ul.ul-checkmarks.bg-ocean-seq {
  --list-bg: var(--inx-ocean-seq);
  --list-icon-color: var(--s-c-darkgrey);
}

.price-cards ul.ul-checkmarks.bg-purple-seq {
  --list-bg: var(--inx-purple-seq);
  --list-icon-color: var(--s-c-darkgrey);
}

.price-cards ul.ul-checkmarks.bg-lavender-seq {
  --list-bg: var(--inx-lavender-seq);
  --list-icon-color: var(--s-c-darkgrey);
}

.price-cards ul.ul-checkmarks.bg-stone10 {
  --list-bg: var(--inx-stone10);
  --list-icon-color: var(--s-c-darkgrey);
}

/* ------------------------------
 *  Teaser Cards .text-image-teaser
 * ------------------------------ */
.teaser-cards .text-image-teaser {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  /*background: var(--inx-white);*/
  border-radius: 4px;
  border: 1px solid var(--inx-stone20);
}

/* Bildbereich (vollflächig, ohne Padding/Margin) */
.teaser-cards .text-image-teaser .image.box-b {
  padding-bottom: 0 !important;
}
.teaser-cards .text-image-teaser .image {
  padding: 0;              /* kein Innenabstand */
  margin: 0;               /* kein Außenabstand */
}
.teaser-cards .text-image-teaser .image img {
  display: block;
  width: 100%;
  height: auto;
  transition: none !important;      /* Animation deaktivieren */
}
.teaser-cards .text-image-teaser.linked:hover .image img {
  transform: none !important;       /* Hover-Zoom deaktivieren */
}

/* Contentbereich */
.teaser-cards .text-image-teaser .content {
  padding: var(--s-spacing-2) var(--s-gutter-05);
  /*background-color: var(--inx-stone5);*/
  display: flex;
  flex-direction: column;
  gap: var(--s-spacing); /* Abstand zwischen Headline, Text, Link */
}

/* Teaser-Link / Button */
.teaser-cards .text-image-teaser .teaser-link {
  margin-top: auto;  /* Button nach unten schieben */
  position: relative;
}
.teaser-cards .text-image-teaser .teaser-link .ghost-button {
  display: inline-block;
}
/* Optional: gesamte Kachel klickbar, wenn .stretched-link verwendet wird */
.teaser-cards .text-image-teaser .teaser-link .stretched-link { z-index: 1; }

/* Hover-State (dezent) */
.teaser-cards .text-image-teaser:hover {
  border-color: var(--inx-stone20);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--inx-stone20) 20%, transparent);
}