:root {
  --color-primary: #00509f;   /* Tailwind blue-600 */
  --color-primary-hover: #003f7a; /* blue-700 */
  --color-secondary: #fabb05; /* yellow-400 */
  --color-success: #0fa52f;   /* green-500 */
  --color-light-border: #e5e7eb; /* gray-200 */
  --color-bg-grey: #717879; /* gray-400 */
  --color-bg-lightgrey: #F3F3F3; /* gray-400 */
  --skew-angle-deg: 10deg;
  --skew-offset-px: 35px; /* tan(10°) × Höhe – z. B. bei 200px Höhe */
}

body {
  color: var(--color-primary);
}
li{
	list-style:none;
}
ul.searchFilter{
	padding-left:0 !important;
}

	  .clip-left-70 {
    clip-path: polygon(0 0, calc(100% - 50px) 0, 100% 100%, 0% 100%);
  }.clip-left-65-bottom {
  clip-path: polygon(0 0, 100% 0, calc(100% - 80px) 100%, 0% 100%);
}

.skew-box {
  display: inline-block;
  height: 200px; /* Höhe muss bekannt oder einheitlich sein */
  background: #00509f;
  color: white;
  padding: 1rem;
  overflow: hidden;
}

/* Linke Seite wie / */
.skew-left {
  clip-path: polygon(
    var(--skew-offset-px) 0%,   /* oben links verschoben */
    100% 0%,
    100% 100%,
    0% 100%
  );
}

/* Rechte Seite wie / */
.skew-right {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    calc(100% - var(--skew-offset-px)) 100%,  /* unten rechts verschoben */
    0% 100%
  );
}

/* Beide Seiten */
.skew-left.skew-right {
  clip-path: polygon(
    var(--skew-offset-px) 0%,
    100% 0%,
    calc(100% - var(--skew-offset-px)) 100%,
    0% 100%
  );
}

.bg-heni-blue{
	background-color:var(--color-primary);
}
.bg-heni-grey{
	background-color:var(--color-light-border);
}
.bg-heni-lightgrey{
	background-color:var(--color-bg-lightgrey);
}
.bg-heni-orange{
	background-color:#e97810;
}
.clip-left-half {
  clip-path: polygon(0 0, 55% 0, 45% 100%, 0% 100%);
}
.clip-right {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 1rem 100%);
}
.clip-top-left {
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 100%, 0% 100%);
}
.clip-right-slant {
  clip-path: polygon(0 0, 50% 0, 45% 100%, 0% 100%);
}

/* Topbar mit rechter Schräge nach oben */
.clip-top-right {
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 1rem) 100%);
}

/* Parallelogramm für Suchfeld */
.clip-parallelogram {
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0% 100%);
}
.clip-footer-banner {
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
}
/* Teaserbox mit linker Schräge */
/* Linke Abschrägung */
.clip-left-slant {
  clip-path: polygon(3rem 0, 100% 0, 100% 100%, 0% 100%);
}
.clip-left-slant2 {
  clip-path: polygon(.5rem 0, 100% 0, 100% 100%, 0% 100%);
}
/* Rechte Abschrägung */
.clip-right-slant {
  clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0% 100%);
}
.clip-right-slant2 {
  clip-path: polygon(0 0, 100% 0, calc(100% - 5rem) 100%, 0% 100%);
}
/* === Layoutumschaltung für Produktboxen === */

.layout-grid .product-box {
  display: flex;
  flex-direction: column;
}

.layout-list {
  border-top: 1px solid var(--color-light-border);
  border-bottom: 1px solid var(--color-light-border);
}

.layout-list .product-box {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--color-light-border);
}

.layout-list .product-box img {
  width: 120px;
  height: auto;
}

.layout-list .product-box a {
  width: auto;
  align-self: flex-start;
}

.layout-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.layout-table .product-box {
  border: none;
  border-bottom: 1px solid var(--color-light-border);
  border-radius: 0;
  padding: 1rem 0;
  box-shadow: none;
}


.section-box.gray {
  background-color: #f9f9f9;
}

.section-header {
  display: inline-block;
  background-color: var(--color-primary);
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
  text-transform: uppercase;
  line-height: 1.25rem;

  /* Trapezform: schräge rechte Seite */
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
}

.clip-right {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 1rem 100%);
}

/* Weiße Schräge unten */
.clip-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
}

/* Schräge links beim Produkt-Slider */
.clip-left {
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 100%, 0% 100%);
}
/* === Buttons === */

.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-block;
  text-align: center;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.btn-outline {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-block;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* === Label-Badges === */

.label-offer {
  font-size: 0.75rem;
  font-weight: 700;
  background-color: var(--color-secondary);
  color: #000000;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  display: inline-block;
}

.label-success {
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--color-success);
  color: #ffffff;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  display: inline-block;
}

/* === Utilities === */

.text-shadow {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.lg\:hidden-important {
  display: none !important;
}

@media (min-width: 1024px) {
  .lg\:hidden-important {
    display: none !important;
  }
}

ul {
  list-style-type: disc;   /* Bullet-Punkte */
  padding-left: 1.5rem;    /* Einrückung links */
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

/* Verschachtelte Listen */
ul ul {
  list-style-type: circle; /* Andere Bullet-Form */
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* LI-Abstände */
ul li {
  margin-bottom: 0.25rem;
  line-height: 1.4;
  color: var(--color-primary, #00509f);
}

/* Optional: Links in Listen */
ul li a {
  color: var(--color-primary, #00509f);
  text-decoration: none;
}

ul li a:hover {
  text-decoration: underline;
}

p {
  color: var(--color-primary, #00509f);
  margin-top: 0;
  margin-bottom: 1rem !important; /* Abstand nach unten */
  line-height: 1.6;    /* angenehmer Zeilenabstand */
}
.text-teaser {
    position: relative;
    overflow: hidden;
    height: 130px;
    text-overflow: ellipsis;
    margin-bottom: 2em;
    transition: height 1s ease;
    padding: 0 1em;
    text-align:center;
}
#introText{
	display:none;
}
.UICollapsable.collapsed{
  position: relative;
  overflow: hidden;
	height: 130px;
  text-overflow: ellipsis;
  margin-bottom: 2em;
	transition:height 1s ease;
}
.UICollapsable > .teaser-expander{
	display:block;
	position:absolute;
	width:100%;
	height:70px;
	bottom:0;
	left:0;
	background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMi8xNS8xOJQ8lrgAAAAYdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3Jrc0+zH04AAAAmSURBVAiZtcqxDQAgDMAwqxP8f3D4AcESeYjKYA32nZ7Pqgb+5QA+3AhRPhI4WAAAAABJRU5ErkJggg==') repeat-x top left;
	background-size: 100% 100%;
	text-align:center;
	padding-top:30px
}
	.UICollapsable > .teaser-expander > span{
		background:#2753A8;
		color:#FFF;
		display:block;
		line-height:40px;
		font-size:18px;
		transition:background .2s ease;
		margin:0 auto;
		max-width:336px;
	}
	.UICollapsable > .teaser-expander > span:hover{
		background:#053186;
		cursor:pointer
	}
#UIPaging{
	margin:0;
	padding:0;
}
#UIPaging li{
	list-style:none;
	margin:0;
	padding:0;
}


/* =========================================
   Such-Overlay
   ========================================= */
#search-megamenu.search-mega-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;           /* kein horizontaler Scrollbalken */
}

/* HENI-Farben (falls noch nicht vorhanden) */
.text-heni-blue { color: var(--color-primary); }
:root { --divider-color: #e5e7eb; } /* ~gray-200 */

/* =========================================
   Grid (mit .cols-[1..4] vom JS) + Breakpoints
   ========================================= */
#search-megamenu .mega-grid {
  display: grid;
  gap: 24px;
}

/* Desktop: Spaltenzahl laut Klasse */
#search-megamenu .mega-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#search-megamenu .mega-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#search-megamenu .mega-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#search-megamenu .mega-grid.cols-1 { grid-template-columns: 1fr; }

/* Divider (vertikal) – Desktop */
#search-megamenu .mega-col { padding-left: 24px; border-left: 1px solid var(--divider-color); }

/* Erste Spalte jeder Reihe ohne linke Linie – abhängig von .cols-* */
#search-megamenu .mega-grid.cols-4 .mega-col:nth-child(4n + 1),
#search-megamenu .mega-grid.cols-3 .mega-col:nth-child(3n + 1),
#search-megamenu .mega-grid.cols-2 .mega-col:nth-child(2n + 1),
#search-megamenu .mega-grid.cols-1 .mega-col:nth-child(1) {
  border-left: none;
  padding-left: 0;
}

/* ≤1200px: immer 2 Spalten erzwingen (überschreibt .cols-*) */
@media (max-width: 1200px) {
  #search-megamenu .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #search-megamenu .mega-col { border-left: 1px solid var(--divider-color); padding-left: 24px; }
  #search-megamenu .mega-col:nth-child(2n + 1) { border-left: none; padding-left: 0; }
}

/* ≤640px: 1 Spalte + horizontale Divider */
@media (max-width: 640px) {
  #search-megamenu .mega-grid { grid-template-columns: 1fr !important; }
  #search-megamenu .mega-col {
    border-left: none; padding-left: 0;
    border-top: 1px solid var(--divider-color); padding-top: 14px; margin-top: 14px;
  }
  #search-megamenu .mega-col:first-child { border-top: none; padding-top: 0; margin-top: 0; }
}

/* =========================================
   Spalten / Überschriften
   ========================================= */
#search-megamenu .mega-col-title {
  /* Tailwind "font-semibold" kommt per JS als Klasse dazu */
  font-size: 0.95rem;
  margin: 0 0 10px;
}

/* Listen/Abstände */
#search-megamenu .mega-col-list { list-style: none; margin: 0; padding: 0; }
#search-megamenu .mega-item + .mega-item { margin-top: 12px; }

/* =========================================
   Einträge
   ========================================= */
/* ohne Bild: 1 Spalte; mit Bild: 80px + Text */
#search-megamenu .mega-link {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.35;
}
#search-megamenu .mega-link.has-thumb { grid-template-columns: 80px 1fr; }
#search-megamenu .mega-link:hover { background: rgba(0,0,0,.04); }

/* Bild max 80×80, Seitenverhältnis wahren */
#search-megamenu .mega-thumb {
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.06);
}

/* Textfluss robust (keine harten Wortumbrüche) */
#search-megamenu .mega-text { display: grid; }
#search-megamenu .mega-primary {
  font-size: 0.95rem;
  color: #111;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;       /* <html lang="de"> empfohlen */
}
#search-megamenu .mega-sub {
  font-size: 0.8rem;
  color: #666;
}

/* Highlight der Treffer */
#search-megamenu mark.hl {
  padding: 0 .1em;
  border-radius: .2em;
  background: rgba(0, 80, 159, .14); /* HENI-Blau light (#00509f) */
  color: inherit;
}

	.ui-message-container{
		position:fixed;
		right:30px;
		bottom:30px;
		z-index:100001;
	}
	.ui-message-container li{
		min-width:500px;
		list-style:none;
		padding:0;
		margin:1em 0;
		padding:20px 5px;
		border-left:3px solid #CCC;
		background:#EEE;
		-webkit-box-shadow: 1px 0px 4px 3px rgba(255,255,255,0.34);
		box-shadow: 1px 0px 4px 3px rgba(255,255,255,0.34);
	}
	.ui-message-container li:before{
		content:'\f05a';
		font-family:'Fontawesome';
		font-size:16px;
		padding-right:5px;
	}
		.ui-message-container li.info{
			border-left:3px solid rgba(60, 132, 197);
			background:#d8e6f3;
		}
		.ui-message-container li.info:before{
			color: rgba(60, 132, 197);
		}
		.ui-message-container li.warning{
			border-left:3px solid rgb(255, 153, 0);
			background:#ffebcc;
		}
		.ui-message-container li.warning:before{
			content:'\f071';
			color:rgb(255, 153, 0);
		}
		.ui-message-container li.error{
			border-left:3px solid rgb(153, 0, 0);
			background:#ebcccc;
		}
		.ui-message-container li.error:before{
			content:'\f06a';
			color:rgb(153, 0, 0);
		}
		.ui-message-container li.success{
			border-left:3px solid rgb(0, 153, 0);
			background:#ccebcc;
		}
		.ui-message-container li.success:before{
			content:'\f058';
			color:rgb(0, 153, 0);
		}
		.ui-message-container li.failed{
			border-left:3px solid rgb(153, 0, 0);
			background:#ebcccc;
		}
		.ui-message-container li.failed:before{
			content:'\f057';
			color:rgb(153, 0, 0);
		}
	button.ui-message-container-close{
		float:right;
		color:#666;
		background:#fff;
		border:1px solid #CCC;
		padding: .2em .5em;
    font-size: 12px;
	}

	.ui-message-container.hide > button.ui-message-container-close{
		display:none;
	}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* Container unten rechts */
  .ui-message-container {
    @apply fixed right-8 bottom-8 z-[100001] space-y-4;
  }

  /* Grundstil jeder Meldung */
  .ui-message-item {
    @apply relative list-none
           min-w-[300px] sm:min-w-[420px] md:min-w-[500px]
           my-4 p-5 pl-5 rounded-md
           bg-gray-100 border-l-4
           shadow-[1px_0_4px_3px_rgba(255,255,255,0.34)];
  }

  /* Typen */
  .ui-message-item.info    { @apply border-l-sky-600   bg-sky-100   text-sky-900; }
  .ui-message-item.warning { @apply border-l-amber-500 bg-amber-100 text-amber-900; }
  .ui-message-item.error,
  .ui-message-item.failed  { @apply border-l-red-700   bg-red-100   text-red-900; }
  .ui-message-item.success { @apply border-l-green-600 bg-green-100 text-green-900; }

  /* Close-Button */
  .ui-message-close {
    @apply absolute top-2 right-2
           text-gray-600 bg-white border border-gray-300
           rounded px-2 py-1 text-sm;
  }

  /* Bei Auto-Hide keinen Close-Button zeigen */
  .ui-message-item.hide .ui-message-close { @apply hidden; }

  /* Icon (wenn du es als <i> Element setzt) */
  .ui-message-icon { @apply mr-2 inline-flex items-center text-base; }
}

:where(
  button,
  [type="button"],
  [type="submit"],
  .btn,
  .button,
  .link-button
) {
  transition: filter .18s ease, opacity .18s ease, background-color .18s ease, border-color .18s ease;
}

/* Hover: leicht dunkler */
:where(
  button,[type="button"],[type="submit"],.btn,.button,.link-button
):hover {
  filter: brightness(.95);
}

/* Active/pressed: noch etwas dunkler */
:where(
  button,[type="button"],[type="submit"],.btn,.button,.link-button
):active {
  filter: brightness(.9);
}

/* Opt-out, falls ein Button NICHT gedimmt werden soll */
.no-dim,
.no-dim:hover,
.no-dim:active {
  filter: none !important;
}

/* Barrierefreiheit: Animationen reduzieren */
@media (prefers-reduced-motion: reduce) {
  :where(
    button,[type="button"],[type="submit"],.btn,.button,.link-button
  ) {
    transition: none;
  }
}