/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 10 2026 | 20:32:29 */
/* ============================================================
   IT24 – Main CSS
   imkertechnik24.de | Designsystem V1.1 | bereinigt
   Enthält: Variablen · Reset · Typografie · Buttons ·
            Container · Utilities · WooCommerce-Basis
   Wichtig: Keine Kadence-Header-Manipulation in dieser Datei.
   Einbinden: Individuelles CSS / Simple Custom CSS and JS – alle Seiten
   ============================================================ */

:root {
  --it24-anthracite:        #1C1E26;
  --it24-anthracite-dark:   #13141A;
  --it24-anthracite-mid:    #2E3140;

  --it24-accent:            #F5C400;
  --it24-accent-hover:      #DDB000;
  --it24-accent-light:      #FFF8CC;
  --it24-accent-rgb:        245, 196, 0;

  --it24-steel:             #8B98A8;
  --it24-steel-light:       #B8C4CC;
  --it24-steel-dark:        #5E6B79;

  --it24-white:             #FFFFFF;

  --it24-gray-50:           #F7F8FA;
  --it24-gray-100:          #EDEEF2;
  --it24-gray-200:          #D6D9E0;
  --it24-gray-400:          #9AA0AD;
  --it24-gray-600:          #5A6272;
  --it24-gray-800:          #2E3344;

  --it24-success:           #22A06B;
  --it24-success-light:     #E8F8F1;
  --it24-error:             #D93025;
  --it24-error-light:       #FDECEA;
  --it24-info:              #2D7DD2;
  --it24-info-light:        #EBF4FF;

  --it24-font-headline:     'Montserrat', 'Inter', Arial, sans-serif;
  --it24-font-body:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --it24-fs-hero:           1.875rem;
  --it24-fs-h1:             1.5rem;
  --it24-fs-h2:             1.25rem;
  --it24-fs-h3:             1.0625rem;
  --it24-fs-h4:             1rem;
  --it24-fs-h5:             0.9375rem;
  --it24-fs-body-lg:        1.0625rem;
  --it24-fs-body:           0.9375rem;
  --it24-fs-body-sm:        0.8125rem;
  --it24-fs-label:          0.6875rem;
  --it24-fs-caption:        0.75rem;

  --it24-lh-headline:       1.1;
  --it24-lh-subheading:     1.25;
  --it24-lh-body:           1.65;
  --it24-lh-relaxed:        1.75;

  --it24-container-max:     1280px;
  --it24-container-wide:    1440px;
  --it24-container-content: 820px;
  --it24-container-narrow:  640px;
  --it24-container-pad:     1rem;

  --it24-space-1:           0.25rem;
  --it24-space-2:           0.5rem;
  --it24-space-3:           0.75rem;
  --it24-space-4:           1rem;
  --it24-space-5:           1.25rem;
  --it24-space-6:           1.5rem;
  --it24-space-7:           2rem;
  --it24-space-8:           2.5rem;
  --it24-space-10:          3.5rem;
  --it24-space-12:          4.5rem;
  --it24-space-16:          6rem;

  --it24-section-sm:        var(--it24-space-8);
  --it24-section-md:        var(--it24-space-10);
  --it24-section-lg:        var(--it24-space-12);

  --it24-radius-sm:         3px;
  --it24-radius-md:         6px;
  --it24-radius-lg:         8px;
  --it24-radius-pill:       50px;

  --it24-shadow-xs:         0 1px 3px rgba(28,30,38,0.08);
  --it24-shadow-sm:         0 2px 8px rgba(28,30,38,0.08);
  --it24-shadow-md:         0 6px 20px rgba(28,30,38,0.12);
  --it24-shadow-lg:         0 12px 40px rgba(28,30,38,0.16);
  --it24-shadow-accent:     0 4px 12px rgba(245,196,0,0.35);

  --it24-transition-fast:   0.15s ease;
  --it24-transition-base:   0.25s ease;
  --it24-transition-slow:   0.4s ease;

  --it24-z-dropdown:        100;
  --it24-z-sticky:          200;
  --it24-z-header:          300;
  --it24-z-modal:           400;
  --it24-z-toast:           500;

  /* Kadence Farbpalette angleichen */
  --global-palette1: var(--it24-accent);
  --global-palette2: var(--it24-accent-hover);
  --global-palette3: var(--it24-anthracite);
  --global-palette4: var(--it24-anthracite-mid);
  --global-palette5: var(--it24-gray-600);
  --global-palette6: var(--it24-gray-400);
  --global-palette7: var(--it24-gray-100);
  --global-palette8: var(--it24-white);

  --global-font-size: 15px;
  --global-line-height: 1.65;
}

@media (min-width: 768px) {
  :root {
    --it24-container-pad: 1.5rem;
    --it24-fs-hero: 2.25rem;
    --it24-fs-h1: 1.875rem;
    --it24-fs-h2: 1.45rem;
    --it24-fs-h3: 1.2rem;
    --it24-fs-h4: 1.25rem;
    --it24-section-sm: 3.5rem;
    --it24-section-md: 4.5rem;
    --it24-section-lg: 6rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --it24-container-pad: 2rem;
    --it24-fs-hero: 2.75rem;
    --it24-fs-h1: 2.25rem;
    --it24-fs-h2: 1.75rem;
    --it24-fs-h3: 1.35rem;
    --it24-section-sm: 4.5rem;
    --it24-section-md: 6rem;
    --it24-section-lg: 8rem;
  }
}

/* ============================================================
   Reset / Basis
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--it24-font-body);
  font-size: var(--it24-fs-body);
  line-height: var(--it24-lh-body);
  color: var(--it24-gray-800);
  background-color: var(--it24-white);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Typografie
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6,
.it24-h1,
.it24-h2,
.it24-h3,
.it24-h4,
.it24-h5 {
  font-family: var(--it24-font-headline);
  line-height: var(--it24-lh-headline);
  color: var(--it24-anthracite);
  margin-top: 0;
  font-weight: 650;
}

h1,
.it24-h1 {
  font-size: var(--it24-fs-h1);
  font-weight: 700;
}

h2,
.it24-h2 {
  font-size: var(--it24-fs-h2);
  font-weight: 650;
}

h3,
.it24-h3 {
  font-size: var(--it24-fs-h3);
  font-weight: 650;
}

h4,
.it24-h4 {
  font-size: var(--it24-fs-h4);
  font-weight: 600;
}

h5,
.it24-h5 {
  font-size: var(--it24-fs-h5);
  font-weight: 600;
}

.it24-hero-headline {
  font-family: var(--it24-font-headline);
  font-size: var(--it24-fs-hero);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--it24-anthracite);
}

.it24-h1-fluid {
  font-size: clamp(1.625rem, 2vw + 1rem, 2.75rem);
}

.it24-h2-fluid {
  font-size: clamp(1.3125rem, 1.5vw + 0.75rem, 2.125rem);
}

.it24-h3-fluid {
  font-size: clamp(1.125rem, 1vw + 0.625rem, 1.625rem);
}

p {
  margin-top: 0;
  margin-bottom: var(--it24-space-4);
  line-height: var(--it24-lh-body);
}

.it24-body-lg {
  font-size: var(--it24-fs-body-lg);
  line-height: var(--it24-lh-relaxed);
}

.it24-body-sm {
  font-size: var(--it24-fs-body-sm);
}

.it24-label {
  font-size: var(--it24-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.it24-caption {
  font-size: var(--it24-fs-caption);
  color: var(--it24-gray-600);
  line-height: 1.5;
}

a {
  color: var(--it24-anthracite);
  text-decoration: none;
  transition: color var(--it24-transition-fast);
}

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

.it24-text-accent {
  color: var(--it24-accent);
}

.it24-text-muted {
  color: var(--it24-gray-600);
}

.it24-text-steel {
  color: var(--it24-steel);
}

.it24-text-white {
  color: var(--it24-white);
}

.it24-overline {
  font-family: var(--it24-font-body);
  font-size: var(--it24-fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--it24-accent);
  display: block;
  margin-bottom: var(--it24-space-2);
}

/* ============================================================
   Container / Sections
   ============================================================ */

.it24-container {
  width: 100%;
  max-width: var(--it24-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--it24-container-pad);
  padding-right: var(--it24-container-pad);
}

.it24-container--wide {
  max-width: var(--it24-container-wide);
}

.it24-container--content {
  max-width: var(--it24-container-content);
}

.it24-container--narrow {
  max-width: var(--it24-container-narrow);
}

.it24-container--full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.it24-section {
  padding-top: var(--it24-section-md);
  padding-bottom: var(--it24-section-md);
}

.it24-section--sm {
  padding-top: var(--it24-section-sm);
  padding-bottom: var(--it24-section-sm);
}

.it24-section--lg {
  padding-top: var(--it24-section-lg);
  padding-bottom: var(--it24-section-lg);
}

.it24-section--dark {
  background-color: var(--it24-anthracite);
  color: var(--it24-white);
}

.it24-section--dark h1,
.it24-section--dark h2,
.it24-section--dark h3,
.it24-section--dark h4 {
  color: var(--it24-white);
}

.it24-section--gray {
  background-color: var(--it24-gray-50);
}

.it24-section--accent {
  background-color: var(--it24-accent);
  color: var(--it24-anthracite);
}

/* ============================================================
   Buttons
   ============================================================ */

.it24-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--it24-space-2);
  font-family: var(--it24-font-headline);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--it24-radius-sm);
  padding: 0.8125rem 1.75rem;
  min-height: 44px;
  transition: all var(--it24-transition-base);
  user-select: none;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.it24-btn--lg {
  font-size: 1rem;
  padding: 1rem 2.25rem;
  min-height: 52px;
}

.it24-btn--sm {
  font-size: 0.8125rem;
  padding: 0.625rem 1.25rem;
  min-height: 36px;
}

.it24-btn--block {
  width: 100%;
}

@media (max-width: 767px) {
  .it24-btn--block-mobile {
    width: 100%;
  }
}

.it24-btn:disabled,
.it24-btn[disabled],
.it24-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.it24-btn:active {
  transform: scale(0.97);
}

.it24-btn:focus-visible {
  outline: 3px solid var(--it24-accent);
  outline-offset: 2px;
}

.it24-btn--primary {
  background-color: var(--it24-accent);
  color: var(--it24-anthracite);
  border-color: var(--it24-accent);
}

.it24-btn--primary:hover {
  background-color: var(--it24-accent-hover);
  border-color: var(--it24-accent-hover);
  color: var(--it24-anthracite);
  transform: translateY(-1px);
  box-shadow: var(--it24-shadow-accent);
}

.it24-btn--primary:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

.it24-btn--secondary {
  background-color: var(--it24-anthracite);
  color: var(--it24-white);
  border-color: var(--it24-anthracite);
}

.it24-btn--secondary:hover {
  background-color: var(--it24-anthracite-mid);
  border-color: var(--it24-anthracite-mid);
  color: var(--it24-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(28,30,38,0.3);
}

.it24-btn--ghost {
  background-color: transparent;
  color: var(--it24-anthracite);
  border-color: var(--it24-anthracite);
}

.it24-btn--ghost:hover {
  background-color: var(--it24-anthracite);
  color: var(--it24-white);
}

.it24-btn--ghost-light {
  background-color: transparent;
  color: var(--it24-white);
  border-color: rgba(255,255,255,0.5);
}

.it24-btn--ghost-light:hover {
  background-color: rgba(255,255,255,0.12);
  border-color: var(--it24-white);
  color: var(--it24-white);
}

.it24-btn--icon {
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--it24-radius-md);
  background-color: var(--it24-accent);
  color: var(--it24-anthracite);
  border-color: var(--it24-accent);
}

.it24-btn--icon:hover {
  background-color: var(--it24-accent-hover);
  transform: translateY(-1px);
}

/* ============================================================
   Kacheln / Cards
   ============================================================ */

.it24-tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--it24-space-3);
}

@media (min-width: 640px) {
  .it24-tile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--it24-space-4);
  }
}

@media (min-width: 1024px) {
  .it24-tile-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--it24-space-6);
  }
}

.it24-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--it24-white);
  border: 1px solid var(--it24-gray-200);
  border-radius: var(--it24-radius-md);
  padding: var(--it24-space-5) var(--it24-space-4);
  text-decoration: none;
  color: inherit;
  transition: all var(--it24-transition-base);
  overflow: hidden;
  box-shadow: var(--it24-shadow-sm);
}

.it24-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--it24-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--it24-transition-base);
}

.it24-tile:hover::before {
  transform: scaleX(1);
}

.it24-tile:hover {
  border-color: var(--it24-accent);
  box-shadow: var(--it24-shadow-md);
  transform: translateY(-3px);
  color: inherit;
}

.it24-tile__icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--it24-space-4);
  color: var(--it24-steel);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .it24-tile__icon {
    width: 72px;
    height: 72px;
  }
}

.it24-tile__title {
  font-family: var(--it24-font-headline);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--it24-anthracite);
  margin: 0 0 var(--it24-space-2);
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .it24-tile__title {
    font-size: 1.1875rem;
  }
}

.it24-tile__desc {
  font-size: var(--it24-fs-body-sm);
  color: var(--it24-gray-600);
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}

.it24-tile__link {
  display: inline-flex;
  align-items: center;
  gap: var(--it24-space-1);
  font-size: var(--it24-fs-body-sm);
  font-weight: 600;
  color: var(--it24-accent);
  margin-top: var(--it24-space-4);
  text-decoration: none;
  transition: gap var(--it24-transition-fast);
}

.it24-tile:hover .it24-tile__link {
  gap: var(--it24-space-2);
}

.it24-card {
  display: flex;
  flex-direction: column;
  background-color: var(--it24-white);
  border: 1px solid var(--it24-gray-100);
  border-radius: var(--it24-radius-md);
  overflow: hidden;
  transition: all var(--it24-transition-base);
  box-shadow: var(--it24-shadow-xs);
  height: 100%;
}

.it24-card:hover {
  box-shadow: var(--it24-shadow-md);
  transform: translateY(-2px);
  border-color: var(--it24-gray-200);
}

.it24-card__image {
  background-color: var(--it24-gray-50);
  padding: var(--it24-space-4);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.it24-card__image img {
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--it24-transition-base);
}

.it24-card:hover .it24-card__image img {
  transform: scale(1.04);
}

.it24-card__body {
  padding: var(--it24-space-4);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--it24-space-2);
}

.it24-card__brand {
  font-size: var(--it24-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--it24-gray-400);
}

.it24-card__title {
  font-family: var(--it24-font-headline);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--it24-anthracite);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.it24-card__spec {
  font-size: var(--it24-fs-body-sm);
  color: var(--it24-gray-600);
  margin: 0;
}

.it24-card__footer {
  padding: var(--it24-space-3) var(--it24-space-4);
  border-top: 1px solid var(--it24-gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--it24-space-3);
}

.it24-card__price {
  font-family: var(--it24-font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--it24-anthracite);
  white-space: nowrap;
}

.it24-card__price--sale {
  color: var(--it24-error);
}

.it24-card__price-old {
  font-size: var(--it24-fs-body-sm);
  color: var(--it24-gray-400);
  text-decoration: line-through;
}

/* ============================================================
   Badges / Trenner
   ============================================================ */

.it24-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--it24-fs-label);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--it24-radius-sm);
  line-height: 1.5;
}

.it24-badge--lyson {
  background-color: var(--it24-anthracite);
  color: var(--it24-accent);
}

.it24-badge--saf {
  background-color: var(--it24-info);
  color: var(--it24-white);
}

.it24-badge--sale {
  background-color: var(--it24-accent);
  color: var(--it24-anthracite);
}

.it24-badge--new {
  background-color: var(--it24-anthracite-mid);
  color: var(--it24-white);
}

.it24-badge--stock {
  background-color: var(--it24-success-light);
  color: var(--it24-success);
}

.it24-divider {
  border: none;
  border-top: 1px solid var(--it24-gray-200);
  margin: var(--it24-space-6) 0;
}

.it24-divider--accent {
  border-top-color: var(--it24-accent);
  border-top-width: 2px;
}

.it24-headline-accent {
  position: relative;
  padding-bottom: var(--it24-space-4);
}

.it24-headline-accent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background-color: var(--it24-accent);
  border-radius: 2px;
}

.it24-headline-accent--center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================================
   Formulare
   ============================================================ */

.it24-input,
.it24-select,
.it24-textarea {
  width: 100%;
  font-family: var(--it24-font-body);
  font-size: 1rem;
  color: var(--it24-gray-800);
  background-color: var(--it24-white);
  border: 1px solid var(--it24-gray-200);
  border-radius: var(--it24-radius-sm);
  padding: 0.75rem 1rem;
  min-height: 48px;
  transition: border-color var(--it24-transition-fast), box-shadow var(--it24-transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.it24-input:focus,
.it24-select:focus,
.it24-textarea:focus {
  outline: none;
  border-color: var(--it24-accent);
  box-shadow: 0 0 0 3px rgba(var(--it24-accent-rgb), 0.2);
}

.it24-input::placeholder {
  color: var(--it24-gray-400);
}

.it24-label-text {
  display: block;
  font-size: var(--it24-fs-body-sm);
  font-weight: 600;
  color: var(--it24-gray-800);
  margin-bottom: var(--it24-space-2);
}

.it24-form-group {
  margin-bottom: var(--it24-space-4);
}

.it24-form-error {
  font-size: var(--it24-fs-body-sm);
  color: var(--it24-error);
  margin-top: var(--it24-space-1);
}

/* ============================================================
   Utilities
   ============================================================ */

.it24-d-none {
  display: none !important;
}

.it24-d-block {
  display: block !important;
}

.it24-d-flex {
  display: flex !important;
}

.it24-d-grid {
  display: grid !important;
}

.it24-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.it24-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.it24-flex-col {
  flex-direction: column;
}

.it24-flex-gap-2 {
  gap: var(--it24-space-2);
}

.it24-flex-gap-4 {
  gap: var(--it24-space-4);
}

.it24-flex-gap-6 {
  gap: var(--it24-space-6);
}

.it24-text-left {
  text-align: left !important;
}

.it24-text-center {
  text-align: center !important;
}

.it24-text-right {
  text-align: right !important;
}

.it24-fw-400 {
  font-weight: 400;
}

.it24-fw-500 {
  font-weight: 500;
}

.it24-fw-600 {
  font-weight: 600;
}

.it24-fw-700 {
  font-weight: 700;
}

.it24-fw-800 {
  font-weight: 800;
}

.it24-bg-white {
  background-color: var(--it24-white);
}

.it24-bg-gray {
  background-color: var(--it24-gray-50);
}

.it24-bg-dark {
  background-color: var(--it24-anthracite);
}

.it24-bg-accent {
  background-color: var(--it24-accent);
}

.it24-mb-0 {
  margin-bottom: 0 !important;
}

.it24-mb-2 {
  margin-bottom: var(--it24-space-2) !important;
}

.it24-mb-4 {
  margin-bottom: var(--it24-space-4) !important;
}

.it24-mb-6 {
  margin-bottom: var(--it24-space-6) !important;
}

.it24-mb-8 {
  margin-bottom: var(--it24-space-8) !important;
}

.it24-mt-0 {
  margin-top: 0 !important;
}

.it24-mt-4 {
  margin-top: var(--it24-space-4) !important;
}

.it24-mt-6 {
  margin-top: var(--it24-space-6) !important;
}

.it24-mt-8 {
  margin-top: var(--it24-space-8) !important;
}

@media (max-width: 767px) {
  .it24-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .it24-hide-tablet {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .it24-hide-desktop {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .it24-show-desktop-only {
    display: none !important;
  }
}

/* ============================================================
   Accessibility
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: 3px solid var(--it24-accent);
  outline-offset: 2px;
  border-radius: var(--it24-radius-sm);
}

.it24-skip-link {
  position: absolute;
  top: -100%;
  left: var(--it24-space-4);
  background: var(--it24-accent);
  color: var(--it24-anthracite);
  padding: var(--it24-space-3) var(--it24-space-6);
  font-weight: 700;
  z-index: var(--it24-z-toast);
  border-radius: 0 0 var(--it24-radius-md) var(--it24-radius-md);
  text-decoration: none;
  transition: top var(--it24-transition-fast);
}

.it24-skip-link:focus {
  top: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   WooCommerce Basis
   ============================================================ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--it24-radius-md);
  font-family: var(--it24-font-body);
}

.woocommerce-message {
  background-color: var(--it24-success-light);
  border-left-color: var(--it24-success);
  color: var(--it24-gray-800);
}

.woocommerce-info {
  background-color: var(--it24-info-light);
  border-left-color: var(--it24-info);
  color: var(--it24-gray-800);
}

.woocommerce-error {
  background-color: var(--it24-error-light);
  border-left-color: var(--it24-error);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--it24-font-headline) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: var(--it24-radius-sm) !important;
  transition: all var(--it24-transition-base) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--it24-accent) !important;
  color: var(--it24-anthracite) !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--it24-accent-hover) !important;
  color: var(--it24-anthracite) !important;
}

.woocommerce .price {
  font-family: var(--it24-font-headline);
  font-weight: 700;
  color: var(--it24-anthracite);
}

.woocommerce .price ins {
  color: var(--it24-error);
  text-decoration: none;
}

.woocommerce .price del {
  color: var(--it24-gray-400);
  font-weight: 400;
}

.woocommerce span.onsale {
  background-color: var(--it24-accent);
  color: var(--it24-anthracite);
  font-family: var(--it24-font-headline);
  font-weight: 700;
  font-size: var(--it24-fs-label);
  letter-spacing: 0.05em;
  border-radius: var(--it24-radius-sm);
  padding: 4px 10px;
  min-width: auto;
  min-height: auto;
  line-height: 1.4;
}

.woocommerce .star-rating span::before {
  color: var(--it24-accent);
}
/* ============================================================
   IT24 – Dezentes Edelstahl-Wabenmuster
   global nutzbare Hintergrundklassen
   ============================================================ */

/* Sehr dezentes Wabenmuster für helle Flächen */
.it24-honeycomb-bg {
  position: relative;
  background:
    linear-gradient(135deg, #ffffff 0%, #F7F8FA 58%, #EDEEF2 100%);
  overflow: hidden;
}

.it24-honeycomb-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(30deg, rgba(139,152,168,0.22) 12%, transparent 12.5%, transparent 87%, rgba(139,152,168,0.22) 87.5%, rgba(139,152,168,0.22)),
    linear-gradient(150deg, rgba(139,152,168,0.22) 12%, transparent 12.5%, transparent 87%, rgba(139,152,168,0.22) 87.5%, rgba(139,152,168,0.22)),
    linear-gradient(30deg, rgba(139,152,168,0.22) 12%, transparent 12.5%, transparent 87%, rgba(139,152,168,0.22) 87.5%, rgba(139,152,168,0.22)),
    linear-gradient(150deg, rgba(139,152,168,0.22) 12%, transparent 12.5%, transparent 87%, rgba(139,152,168,0.22) 87.5%, rgba(139,152,168,0.22));
  background-size: 44px 76px;
  background-position:
    0 0,
    0 0,
    22px 38px,
    22px 38px;
}

/* Inhalte über dem Muster halten */
.it24-honeycomb-bg > * {
  position: relative;
  z-index: 1;
}

/* Noch dezenter für große Flächen */
.it24-honeycomb-bg--soft::before {
  opacity: 0.10;
}

/* Etwas stärker für kleine technische Boxen */
.it24-honeycomb-bg--visible::before {
  opacity: 0.24;
}

/* Gelber Waben-Akzent, sehr sparsam verwenden */
.it24-honeycomb-accent {
  position: relative;
  overflow: hidden;
}

.it24-honeycomb-accent::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  pointer-events: none;
  opacity: 0.16;
  background:
    radial-gradient(circle, rgba(245,196,0,0.45) 0 34%, transparent 35%),
    linear-gradient(30deg, rgba(245,196,0,0.55) 12%, transparent 12.5%, transparent 87%, rgba(245,196,0,0.55) 87.5%),
    linear-gradient(150deg, rgba(245,196,0,0.55) 12%, transparent 12.5%, transparent 87%, rgba(245,196,0,0.55) 87.5%);
  background-size: 46px 80px;
}

.it24-honeycomb-accent > * {
  position: relative;
  z-index: 1;
}

/* IT24 – Warenkorb-Empfehlungen: einheitliche Kartenhöhe */
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-product-template,
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-product-template__responsive {
  align-items: stretch !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-product {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wp-block-post-title {
  min-height: 4.9em !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wp-block-woocommerce-product-price {
  min-height: 1.7em !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .it24-loop-detail-button {
  margin-top: auto !important;
}

/* IT24 – Schleuderstraßen: lange Titel vollständig anzeigen */
html body.archive.tax-product_cat.woocommerce-page.term-schleuderstrassen ul.products li.product:not(.product-category) .woocommerce-loop-product__title,
html body.archive.tax-product_cat.woocommerce-page.term-schleuderstrassen ul.products li.product:not(.product-category) .product-details .woocommerce-loop-product__title {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: unset !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}
@media (min-width: 768px) {
  html body.archive.tax-product_cat.woocommerce-page.term-schleuderstrassen ul.products li.product:not(.product-category) .woocommerce-loop-product__title,
  html body.archive.tax-product_cat.woocommerce-page.term-schleuderstrassen ul.products li.product:not(.product-category) .product-details .woocommerce-loop-product__title {
    min-height: 8em !important;
  }
}
/* ============================================================
   IT24 – Main CSS
   imkertechnik24.de | Designsystem V1.1 | bereinigt
   Enthält: Variablen · Reset · Typografie · Buttons ·
            Container · Utilities · WooCommerce-Basis
   Wichtig: Keine Kadence-Header-Manipulation in dieser Datei.
   Einbinden: Individuelles CSS / Simple Custom CSS and JS – alle Seiten
   ============================================================ */

:root {
  --it24-anthracite:        #1C1E26;
  --it24-anthracite-dark:   #13141A;
  --it24-anthracite-mid:    #2E3140;

  --it24-accent:            #F5C400;
  --it24-accent-hover:      #DDB000;
  --it24-accent-light:      #FFF8CC;
  --it24-accent-rgb:        245, 196, 0;

  --it24-steel:             #8B98A8;
  --it24-steel-light:       #B8C4CC;
  --it24-steel-dark:        #5E6B79;

  --it24-white:             #FFFFFF;

  --it24-gray-50:           #F7F8FA;
  --it24-gray-100:          #EDEEF2;
  --it24-gray-200:          #D6D9E0;
  --it24-gray-400:          #9AA0AD;
  --it24-gray-600:          #5A6272;
  --it24-gray-800:          #2E3344;

  --it24-success:           #22A06B;
  --it24-success-light:     #E8F8F1;
  --it24-error:             #D93025;
  --it24-error-light:       #FDECEA;
  --it24-info:              #2D7DD2;
  --it24-info-light:        #EBF4FF;

  --it24-font-headline:     'Montserrat', 'Inter', Arial, sans-serif;
  --it24-font-body:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --it24-fs-hero:           1.875rem;
  --it24-fs-h1:             1.5rem;
  --it24-fs-h2:             1.25rem;
  --it24-fs-h3:             1.0625rem;
  --it24-fs-h4:             1rem;
  --it24-fs-h5:             0.9375rem;
  --it24-fs-body-lg:        1.0625rem;
  --it24-fs-body:           0.9375rem;
  --it24-fs-body-sm:        0.8125rem;
  --it24-fs-label:          0.6875rem;
  --it24-fs-caption:        0.75rem;

  --it24-lh-headline:       1.1;
  --it24-lh-subheading:     1.25;
  --it24-lh-body:           1.65;
  --it24-lh-relaxed:        1.75;

  --it24-container-max:     1280px;
  --it24-container-wide:    1440px;
  --it24-container-content: 820px;
  --it24-container-narrow:  640px;
  --it24-container-pad:     1rem;

  --it24-space-1:           0.25rem;
  --it24-space-2:           0.5rem;
  --it24-space-3:           0.75rem;
  --it24-space-4:           1rem;
  --it24-space-5:           1.25rem;
  --it24-space-6:           1.5rem;
  --it24-space-7:           2rem;
  --it24-space-8:           2.5rem;
  --it24-space-10:          3.5rem;
  --it24-space-12:          4.5rem;
  --it24-space-16:          6rem;

  --it24-section-sm:        var(--it24-space-8);
  --it24-section-md:        var(--it24-space-10);
  --it24-section-lg:        var(--it24-space-12);

  --it24-radius-sm:         3px;
  --it24-radius-md:         6px;
  --it24-radius-lg:         8px;
  --it24-radius-pill:       50px;

  --it24-shadow-xs:         0 1px 3px rgba(28,30,38,0.08);
  --it24-shadow-sm:         0 2px 8px rgba(28,30,38,0.08);
  --it24-shadow-md:         0 6px 20px rgba(28,30,38,0.12);
  --it24-shadow-lg:         0 12px 40px rgba(28,30,38,0.16);
  --it24-shadow-accent:     0 4px 12px rgba(245,196,0,0.35);

  --it24-transition-fast:   0.15s ease;
  --it24-transition-base:   0.25s ease;
  --it24-transition-slow:   0.4s ease;

  --it24-z-dropdown:        100;
  --it24-z-sticky:          200;
  --it24-z-header:          300;
  --it24-z-modal:           400;
  --it24-z-toast:           500;

  /* Kadence Farbpalette angleichen */
  --global-palette1: var(--it24-accent);
  --global-palette2: var(--it24-accent-hover);
  --global-palette3: var(--it24-anthracite);
  --global-palette4: var(--it24-anthracite-mid);
  --global-palette5: var(--it24-gray-600);
  --global-palette6: var(--it24-gray-400);
  --global-palette7: var(--it24-gray-100);
  --global-palette8: var(--it24-white);

  --global-font-size: 15px;
  --global-line-height: 1.65;
}

@media (min-width: 768px) {
  :root {
    --it24-container-pad: 1.5rem;
    --it24-fs-hero: 2.25rem;
    --it24-fs-h1: 1.875rem;
    --it24-fs-h2: 1.45rem;
    --it24-fs-h3: 1.2rem;
    --it24-fs-h4: 1.25rem;
    --it24-section-sm: 3.5rem;
    --it24-section-md: 4.5rem;
    --it24-section-lg: 6rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --it24-container-pad: 2rem;
    --it24-fs-hero: 2.75rem;
    --it24-fs-h1: 2.25rem;
    --it24-fs-h2: 1.75rem;
    --it24-fs-h3: 1.35rem;
    --it24-section-sm: 4.5rem;
    --it24-section-md: 6rem;
    --it24-section-lg: 8rem;
  }
}

/* ============================================================
   Reset / Basis
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--it24-font-body);
  font-size: var(--it24-fs-body);
  line-height: var(--it24-lh-body);
  color: var(--it24-gray-800);
  background-color: var(--it24-white);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Typografie
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6,
.it24-h1,
.it24-h2,
.it24-h3,
.it24-h4,
.it24-h5 {
  font-family: var(--it24-font-headline);
  line-height: var(--it24-lh-headline);
  color: var(--it24-anthracite);
  margin-top: 0;
  font-weight: 650;
}

h1,
.it24-h1 {
  font-size: var(--it24-fs-h1);
  font-weight: 700;
}

h2,
.it24-h2 {
  font-size: var(--it24-fs-h2);
  font-weight: 650;
}

h3,
.it24-h3 {
  font-size: var(--it24-fs-h3);
  font-weight: 650;
}

h4,
.it24-h4 {
  font-size: var(--it24-fs-h4);
  font-weight: 600;
}

h5,
.it24-h5 {
  font-size: var(--it24-fs-h5);
  font-weight: 600;
}

.it24-hero-headline {
  font-family: var(--it24-font-headline);
  font-size: var(--it24-fs-hero);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--it24-anthracite);
}

.it24-h1-fluid {
  font-size: clamp(1.625rem, 2vw + 1rem, 2.75rem);
}

.it24-h2-fluid {
  font-size: clamp(1.3125rem, 1.5vw + 0.75rem, 2.125rem);
}

.it24-h3-fluid {
  font-size: clamp(1.125rem, 1vw + 0.625rem, 1.625rem);
}

p {
  margin-top: 0;
  margin-bottom: var(--it24-space-4);
  line-height: var(--it24-lh-body);
}

.it24-body-lg {
  font-size: var(--it24-fs-body-lg);
  line-height: var(--it24-lh-relaxed);
}

.it24-body-sm {
  font-size: var(--it24-fs-body-sm);
}

.it24-label {
  font-size: var(--it24-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.it24-caption {
  font-size: var(--it24-fs-caption);
  color: var(--it24-gray-600);
  line-height: 1.5;
}

a {
  color: var(--it24-anthracite);
  text-decoration: none;
  transition: color var(--it24-transition-fast);
}

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

.it24-text-accent {
  color: var(--it24-accent);
}

.it24-text-muted {
  color: var(--it24-gray-600);
}

.it24-text-steel {
  color: var(--it24-steel);
}

.it24-text-white {
  color: var(--it24-white);
}

.it24-overline {
  font-family: var(--it24-font-body);
  font-size: var(--it24-fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--it24-accent);
  display: block;
  margin-bottom: var(--it24-space-2);
}

/* ============================================================
   Container / Sections
   ============================================================ */

.it24-container {
  width: 100%;
  max-width: var(--it24-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--it24-container-pad);
  padding-right: var(--it24-container-pad);
}

.it24-container--wide {
  max-width: var(--it24-container-wide);
}

.it24-container--content {
  max-width: var(--it24-container-content);
}

.it24-container--narrow {
  max-width: var(--it24-container-narrow);
}

.it24-container--full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.it24-section {
  padding-top: var(--it24-section-md);
  padding-bottom: var(--it24-section-md);
}

.it24-section--sm {
  padding-top: var(--it24-section-sm);
  padding-bottom: var(--it24-section-sm);
}

.it24-section--lg {
  padding-top: var(--it24-section-lg);
  padding-bottom: var(--it24-section-lg);
}

.it24-section--dark {
  background-color: var(--it24-anthracite);
  color: var(--it24-white);
}

.it24-section--dark h1,
.it24-section--dark h2,
.it24-section--dark h3,
.it24-section--dark h4 {
  color: var(--it24-white);
}

.it24-section--gray {
  background-color: var(--it24-gray-50);
}

.it24-section--accent {
  background-color: var(--it24-accent);
  color: var(--it24-anthracite);
}

/* ============================================================
   Buttons
   ============================================================ */

.it24-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--it24-space-2);
  font-family: var(--it24-font-headline);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--it24-radius-sm);
  padding: 0.8125rem 1.75rem;
  min-height: 44px;
  transition: all var(--it24-transition-base);
  user-select: none;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.it24-btn--lg {
  font-size: 1rem;
  padding: 1rem 2.25rem;
  min-height: 52px;
}

.it24-btn--sm {
  font-size: 0.8125rem;
  padding: 0.625rem 1.25rem;
  min-height: 36px;
}

.it24-btn--block {
  width: 100%;
}

@media (max-width: 767px) {
  .it24-btn--block-mobile {
    width: 100%;
  }
}

.it24-btn:disabled,
.it24-btn[disabled],
.it24-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.it24-btn:active {
  transform: scale(0.97);
}

.it24-btn:focus-visible {
  outline: 3px solid var(--it24-accent);
  outline-offset: 2px;
}

.it24-btn--primary {
  background-color: var(--it24-accent);
  color: var(--it24-anthracite);
  border-color: var(--it24-accent);
}

.it24-btn--primary:hover {
  background-color: var(--it24-accent-hover);
  border-color: var(--it24-accent-hover);
  color: var(--it24-anthracite);
  transform: translateY(-1px);
  box-shadow: var(--it24-shadow-accent);
}

.it24-btn--primary:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

.it24-btn--secondary {
  background-color: var(--it24-anthracite);
  color: var(--it24-white);
  border-color: var(--it24-anthracite);
}

.it24-btn--secondary:hover {
  background-color: var(--it24-anthracite-mid);
  border-color: var(--it24-anthracite-mid);
  color: var(--it24-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(28,30,38,0.3);
}

.it24-btn--ghost {
  background-color: transparent;
  color: var(--it24-anthracite);
  border-color: var(--it24-anthracite);
}

.it24-btn--ghost:hover {
  background-color: var(--it24-anthracite);
  color: var(--it24-white);
}

.it24-btn--ghost-light {
  background-color: transparent;
  color: var(--it24-white);
  border-color: rgba(255,255,255,0.5);
}

.it24-btn--ghost-light:hover {
  background-color: rgba(255,255,255,0.12);
  border-color: var(--it24-white);
  color: var(--it24-white);
}

.it24-btn--icon {
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--it24-radius-md);
  background-color: var(--it24-accent);
  color: var(--it24-anthracite);
  border-color: var(--it24-accent);
}

.it24-btn--icon:hover {
  background-color: var(--it24-accent-hover);
  transform: translateY(-1px);
}

/* ============================================================
   Kacheln / Cards
   ============================================================ */

.it24-tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--it24-space-3);
}

@media (min-width: 640px) {
  .it24-tile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--it24-space-4);
  }
}

@media (min-width: 1024px) {
  .it24-tile-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--it24-space-6);
  }
}

.it24-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--it24-white);
  border: 1px solid var(--it24-gray-200);
  border-radius: var(--it24-radius-md);
  padding: var(--it24-space-5) var(--it24-space-4);
  text-decoration: none;
  color: inherit;
  transition: all var(--it24-transition-base);
  overflow: hidden;
  box-shadow: var(--it24-shadow-sm);
}

.it24-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--it24-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--it24-transition-base);
}

.it24-tile:hover::before {
  transform: scaleX(1);
}

.it24-tile:hover {
  border-color: var(--it24-accent);
  box-shadow: var(--it24-shadow-md);
  transform: translateY(-3px);
  color: inherit;
}

.it24-tile__icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--it24-space-4);
  color: var(--it24-steel);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .it24-tile__icon {
    width: 72px;
    height: 72px;
  }
}

.it24-tile__title {
  font-family: var(--it24-font-headline);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--it24-anthracite);
  margin: 0 0 var(--it24-space-2);
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .it24-tile__title {
    font-size: 1.1875rem;
  }
}

.it24-tile__desc {
  font-size: var(--it24-fs-body-sm);
  color: var(--it24-gray-600);
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}

.it24-tile__link {
  display: inline-flex;
  align-items: center;
  gap: var(--it24-space-1);
  font-size: var(--it24-fs-body-sm);
  font-weight: 600;
  color: var(--it24-accent);
  margin-top: var(--it24-space-4);
  text-decoration: none;
  transition: gap var(--it24-transition-fast);
}

.it24-tile:hover .it24-tile__link {
  gap: var(--it24-space-2);
}

.it24-card {
  display: flex;
  flex-direction: column;
  background-color: var(--it24-white);
  border: 1px solid var(--it24-gray-100);
  border-radius: var(--it24-radius-md);
  overflow: hidden;
  transition: all var(--it24-transition-base);
  box-shadow: var(--it24-shadow-xs);
  height: 100%;
}

.it24-card:hover {
  box-shadow: var(--it24-shadow-md);
  transform: translateY(-2px);
  border-color: var(--it24-gray-200);
}

.it24-card__image {
  background-color: var(--it24-gray-50);
  padding: var(--it24-space-4);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.it24-card__image img {
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--it24-transition-base);
}

.it24-card:hover .it24-card__image img {
  transform: scale(1.04);
}

.it24-card__body {
  padding: var(--it24-space-4);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--it24-space-2);
}

.it24-card__brand {
  font-size: var(--it24-fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--it24-gray-400);
}

.it24-card__title {
  font-family: var(--it24-font-headline);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--it24-anthracite);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.it24-card__spec {
  font-size: var(--it24-fs-body-sm);
  color: var(--it24-gray-600);
  margin: 0;
}

.it24-card__footer {
  padding: var(--it24-space-3) var(--it24-space-4);
  border-top: 1px solid var(--it24-gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--it24-space-3);
}

.it24-card__price {
  font-family: var(--it24-font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--it24-anthracite);
  white-space: nowrap;
}

.it24-card__price--sale {
  color: var(--it24-error);
}

.it24-card__price-old {
  font-size: var(--it24-fs-body-sm);
  color: var(--it24-gray-400);
  text-decoration: line-through;
}

/* ============================================================
   Badges / Trenner
   ============================================================ */

.it24-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--it24-fs-label);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--it24-radius-sm);
  line-height: 1.5;
}

.it24-badge--lyson {
  background-color: var(--it24-anthracite);
  color: var(--it24-accent);
}

.it24-badge--saf {
  background-color: var(--it24-info);
  color: var(--it24-white);
}

.it24-badge--sale {
  background-color: var(--it24-accent);
  color: var(--it24-anthracite);
}

.it24-badge--new {
  background-color: var(--it24-anthracite-mid);
  color: var(--it24-white);
}

.it24-badge--stock {
  background-color: var(--it24-success-light);
  color: var(--it24-success);
}

.it24-divider {
  border: none;
  border-top: 1px solid var(--it24-gray-200);
  margin: var(--it24-space-6) 0;
}

.it24-divider--accent {
  border-top-color: var(--it24-accent);
  border-top-width: 2px;
}

.it24-headline-accent {
  position: relative;
  padding-bottom: var(--it24-space-4);
}

.it24-headline-accent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background-color: var(--it24-accent);
  border-radius: 2px;
}

.it24-headline-accent--center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================================
   Formulare
   ============================================================ */

.it24-input,
.it24-select,
.it24-textarea {
  width: 100%;
  font-family: var(--it24-font-body);
  font-size: 1rem;
  color: var(--it24-gray-800);
  background-color: var(--it24-white);
  border: 1px solid var(--it24-gray-200);
  border-radius: var(--it24-radius-sm);
  padding: 0.75rem 1rem;
  min-height: 48px;
  transition: border-color var(--it24-transition-fast), box-shadow var(--it24-transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.it24-input:focus,
.it24-select:focus,
.it24-textarea:focus {
  outline: none;
  border-color: var(--it24-accent);
  box-shadow: 0 0 0 3px rgba(var(--it24-accent-rgb), 0.2);
}

.it24-input::placeholder {
  color: var(--it24-gray-400);
}

.it24-label-text {
  display: block;
  font-size: var(--it24-fs-body-sm);
  font-weight: 600;
  color: var(--it24-gray-800);
  margin-bottom: var(--it24-space-2);
}

.it24-form-group {
  margin-bottom: var(--it24-space-4);
}

.it24-form-error {
  font-size: var(--it24-fs-body-sm);
  color: var(--it24-error);
  margin-top: var(--it24-space-1);
}

/* ============================================================
   Utilities
   ============================================================ */

.it24-d-none {
  display: none !important;
}

.it24-d-block {
  display: block !important;
}

.it24-d-flex {
  display: flex !important;
}

.it24-d-grid {
  display: grid !important;
}

.it24-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.it24-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.it24-flex-col {
  flex-direction: column;
}

.it24-flex-gap-2 {
  gap: var(--it24-space-2);
}

.it24-flex-gap-4 {
  gap: var(--it24-space-4);
}

.it24-flex-gap-6 {
  gap: var(--it24-space-6);
}

.it24-text-left {
  text-align: left !important;
}

.it24-text-center {
  text-align: center !important;
}

.it24-text-right {
  text-align: right !important;
}

.it24-fw-400 {
  font-weight: 400;
}

.it24-fw-500 {
  font-weight: 500;
}

.it24-fw-600 {
  font-weight: 600;
}

.it24-fw-700 {
  font-weight: 700;
}

.it24-fw-800 {
  font-weight: 800;
}

.it24-bg-white {
  background-color: var(--it24-white);
}

.it24-bg-gray {
  background-color: var(--it24-gray-50);
}

.it24-bg-dark {
  background-color: var(--it24-anthracite);
}

.it24-bg-accent {
  background-color: var(--it24-accent);
}

.it24-mb-0 {
  margin-bottom: 0 !important;
}

.it24-mb-2 {
  margin-bottom: var(--it24-space-2) !important;
}

.it24-mb-4 {
  margin-bottom: var(--it24-space-4) !important;
}

.it24-mb-6 {
  margin-bottom: var(--it24-space-6) !important;
}

.it24-mb-8 {
  margin-bottom: var(--it24-space-8) !important;
}

.it24-mt-0 {
  margin-top: 0 !important;
}

.it24-mt-4 {
  margin-top: var(--it24-space-4) !important;
}

.it24-mt-6 {
  margin-top: var(--it24-space-6) !important;
}

.it24-mt-8 {
  margin-top: var(--it24-space-8) !important;
}

@media (max-width: 767px) {
  .it24-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .it24-hide-tablet {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .it24-hide-desktop {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .it24-show-desktop-only {
    display: none !important;
  }
}

/* ============================================================
   Accessibility
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: 3px solid var(--it24-accent);
  outline-offset: 2px;
  border-radius: var(--it24-radius-sm);
}

.it24-skip-link {
  position: absolute;
  top: -100%;
  left: var(--it24-space-4);
  background: var(--it24-accent);
  color: var(--it24-anthracite);
  padding: var(--it24-space-3) var(--it24-space-6);
  font-weight: 700;
  z-index: var(--it24-z-toast);
  border-radius: 0 0 var(--it24-radius-md) var(--it24-radius-md);
  text-decoration: none;
  transition: top var(--it24-transition-fast);
}

.it24-skip-link:focus {
  top: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   WooCommerce Basis
   ============================================================ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--it24-radius-md);
  font-family: var(--it24-font-body);
}

.woocommerce-message {
  background-color: var(--it24-success-light);
  border-left-color: var(--it24-success);
  color: var(--it24-gray-800);
}

.woocommerce-info {
  background-color: var(--it24-info-light);
  border-left-color: var(--it24-info);
  color: var(--it24-gray-800);
}

.woocommerce-error {
  background-color: var(--it24-error-light);
  border-left-color: var(--it24-error);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--it24-font-headline) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: var(--it24-radius-sm) !important;
  transition: all var(--it24-transition-base) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--it24-accent) !important;
  color: var(--it24-anthracite) !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--it24-accent-hover) !important;
  color: var(--it24-anthracite) !important;
}

.woocommerce .price {
  font-family: var(--it24-font-headline);
  font-weight: 700;
  color: var(--it24-anthracite);
}

.woocommerce .price ins {
  color: var(--it24-error);
  text-decoration: none;
}

.woocommerce .price del {
  color: var(--it24-gray-400);
  font-weight: 400;
}

.woocommerce span.onsale {
  background-color: var(--it24-accent);
  color: var(--it24-anthracite);
  font-family: var(--it24-font-headline);
  font-weight: 700;
  font-size: var(--it24-fs-label);
  letter-spacing: 0.05em;
  border-radius: var(--it24-radius-sm);
  padding: 4px 10px;
  min-width: auto;
  min-height: auto;
  line-height: 1.4;
}

.woocommerce .star-rating span::before {
  color: var(--it24-accent);
}
/* ============================================================
   IT24 – Dezentes Edelstahl-Wabenmuster
   global nutzbare Hintergrundklassen
   ============================================================ */

/* Sehr dezentes Wabenmuster für helle Flächen */
.it24-honeycomb-bg {
  position: relative;
  background:
    linear-gradient(135deg, #ffffff 0%, #F7F8FA 58%, #EDEEF2 100%);
  overflow: hidden;
}

.it24-honeycomb-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(30deg, rgba(139,152,168,0.22) 12%, transparent 12.5%, transparent 87%, rgba(139,152,168,0.22) 87.5%, rgba(139,152,168,0.22)),
    linear-gradient(150deg, rgba(139,152,168,0.22) 12%, transparent 12.5%, transparent 87%, rgba(139,152,168,0.22) 87.5%, rgba(139,152,168,0.22)),
    linear-gradient(30deg, rgba(139,152,168,0.22) 12%, transparent 12.5%, transparent 87%, rgba(139,152,168,0.22) 87.5%, rgba(139,152,168,0.22)),
    linear-gradient(150deg, rgba(139,152,168,0.22) 12%, transparent 12.5%, transparent 87%, rgba(139,152,168,0.22) 87.5%, rgba(139,152,168,0.22));
  background-size: 44px 76px;
  background-position:
    0 0,
    0 0,
    22px 38px,
    22px 38px;
}

/* Inhalte über dem Muster halten */
.it24-honeycomb-bg > * {
  position: relative;
  z-index: 1;
}

/* Noch dezenter für große Flächen */
.it24-honeycomb-bg--soft::before {
  opacity: 0.10;
}

/* Etwas stärker für kleine technische Boxen */
.it24-honeycomb-bg--visible::before {
  opacity: 0.24;
}

/* Gelber Waben-Akzent, sehr sparsam verwenden */
.it24-honeycomb-accent {
  position: relative;
  overflow: hidden;
}

.it24-honeycomb-accent::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  pointer-events: none;
  opacity: 0.16;
  background:
    radial-gradient(circle, rgba(245,196,0,0.45) 0 34%, transparent 35%),
    linear-gradient(30deg, rgba(245,196,0,0.55) 12%, transparent 12.5%, transparent 87%, rgba(245,196,0,0.55) 87.5%),
    linear-gradient(150deg, rgba(245,196,0,0.55) 12%, transparent 12.5%, transparent 87%, rgba(245,196,0,0.55) 87.5%);
  background-size: 46px 80px;
}

.it24-honeycomb-accent > * {
  position: relative;
  z-index: 1;
}

/* IT24 – Bestellabschluss / Danke-Seite */
body.woocommerce-order-received .content-area,
body.woocommerce-order-received .site-main{width:100%;max-width:1180px;margin-inline:auto}
body.woocommerce-order-received .entry-hero,
body.woocommerce-order-received .page-header,
body.woocommerce-order-received .entry-header{display:none!important}
body.woocommerce-order-received .content-wrap{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(48px,6vw,80px)}
body.woocommerce-order-received .woocommerce-order{max-width:1080px;margin:0 auto;color:#101a2e}
body.woocommerce-order-received .woocommerce-notice--success,
body.woocommerce-order-received .woocommerce-thankyou-order-received{margin:0 0 24px!important;padding:24px 28px!important;border:1px solid #e1e5eb;border-left:5px solid #f5bd00;border-radius:14px;background:linear-gradient(110deg,#fff 65%,#fff9e5);box-shadow:0 12px 30px rgba(16,26,46,.06);font-size:clamp(18px,2vw,23px);font-weight:700}
body.woocommerce-order-received ul.woocommerce-order-overview{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0 0 28px!important;padding:18px 20px!important;border:1px solid #e1e5eb;border-radius:14px;background:#fff;box-shadow:0 10px 26px rgba(16,26,46,.05)}
body.woocommerce-order-received ul.woocommerce-order-overview li{float:none!important;width:auto!important;min-width:0;margin:0!important;padding:4px 18px!important;border-right:1px solid #e1e5eb!important;line-height:1.35;overflow-wrap:anywhere}
body.woocommerce-order-received ul.woocommerce-order-overview li:first-child{padding-left:0!important}
body.woocommerce-order-received ul.woocommerce-order-overview li:last-child{padding-right:0!important;border-right:0!important}
body.woocommerce-order-received ul.woocommerce-order-overview li strong{display:block;margin-top:5px;color:#101a2e;font-size:16px;line-height:1.25}
body.woocommerce-order-received .wc-bacs-bank-details-heading,
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title{margin:30px 0 14px!important;font-size:clamp(23px,3vw,32px)!important;line-height:1.15}
body.woocommerce-order-received .wc-bacs-bank-details-account-name{margin:0 0 12px!important;font-size:18px!important}
body.woocommerce-order-received ul.wc-bacs-bank-details{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:760px;margin:0 0 32px!important;padding:18px 20px!important;border:1px solid #e1e5eb;border-radius:14px;background:#f8fafc}
body.woocommerce-order-received ul.wc-bacs-bank-details li{float:none!important;width:auto!important;margin:0!important;padding:3px 18px!important;border-right:1px solid #dfe4ea!important;overflow-wrap:anywhere}
body.woocommerce-order-received ul.wc-bacs-bank-details li:first-child{padding-left:0!important}
body.woocommerce-order-received ul.wc-bacs-bank-details li:last-child{padding-right:0!important;border-right:0!important}
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details{margin-top:30px}
body.woocommerce-order-received .woocommerce-order-details table{overflow:hidden;border:1px solid #e1e5eb!important;border-radius:14px;background:#fff;box-shadow:0 10px 26px rgba(16,26,46,.04)}
body.woocommerce-order-received .woocommerce-order-details th,
body.woocommerce-order-received .woocommerce-order-details td{padding:14px 18px!important}
body.woocommerce-order-received .woocommerce-columns--addresses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
body.woocommerce-order-received .woocommerce-column address{height:100%;padding:20px 22px!important;border:1px solid #e1e5eb!important;border-radius:14px;background:#fff;line-height:1.65}
@media(max-width:900px){
body.woocommerce-order-received ul.woocommerce-order-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0}
body.woocommerce-order-received ul.woocommerce-order-overview li,
body.woocommerce-order-received ul.woocommerce-order-overview li:first-child,
body.woocommerce-order-received ul.woocommerce-order-overview li:last-child{padding:4px 14px!important;border-right:0!important}
body.woocommerce-order-received ul.wc-bacs-bank-details{grid-template-columns:1fr}
body.woocommerce-order-received ul.wc-bacs-bank-details li,
body.woocommerce-order-received ul.wc-bacs-bank-details li:first-child,
body.woocommerce-order-received ul.wc-bacs-bank-details li:last-child{padding:8px 0!important;border-right:0!important;border-bottom:1px solid #dfe4ea!important}
body.woocommerce-order-received ul.wc-bacs-bank-details li:last-child{border-bottom:0!important}}
@media(max-width:600px){
body.woocommerce-order-received .content-wrap{padding-top:20px}
body.woocommerce-order-received .woocommerce-notice--success,
body.woocommerce-order-received .woocommerce-thankyou-order-received{padding:18px!important;border-radius:12px}
body.woocommerce-order-received ul.woocommerce-order-overview{grid-template-columns:1fr;padding:14px 16px!important}
body.woocommerce-order-received ul.woocommerce-order-overview li,
body.woocommerce-order-received ul.woocommerce-order-overview li:first-child,
body.woocommerce-order-received ul.woocommerce-order-overview li:last-child{padding:8px 0!important;border-bottom:1px solid #e1e5eb!important}
body.woocommerce-order-received ul.woocommerce-order-overview li:last-child{border-bottom:0!important}
body.woocommerce-order-received .woocommerce-columns--addresses{grid-template-columns:1fr}
body.woocommerce-order-received .woocommerce-order-details th,
body.woocommerce-order-received .woocommerce-order-details td{padding:11px 12px!important}}


/* IT24 – Danke-Seite Korrektur: Kopfbox entfernen, Adressen ausrichten */
body.woocommerce-order-received .page-hero-section,
body.woocommerce-order-received .entry-hero-container-inner,
body.woocommerce-order-received .entry-hero-container-inner .entry-header,
body.woocommerce-order-received .hero-section-overlay,
body.woocommerce-order-received .kadence-page-title,
body.woocommerce-order-received .page-title-wrap {
  display:none!important;
}

body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns,
body.woocommerce-order-received .woocommerce-columns--addresses {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:start!important;
  gap:24px!important;
  width:100%!important;
}

body.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column,
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
  float:none!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}

body.woocommerce-order-received .woocommerce-column--billing {order:1}
body.woocommerce-order-received .woocommerce-column--shipping {order:2}

body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column__title {
  max-width:none!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  font-size:clamp(22px,2.4vw,30px)!important;
}

body.woocommerce-order-received .woocommerce-customer-details address {
  min-height:220px!important;
  margin:0!important;
  box-sizing:border-box!important;
}

@media(max-width:700px){
  body.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns,
  body.woocommerce-order-received .woocommerce-columns--addresses {
    grid-template-columns:1fr!important;
    gap:20px!important;
  }
  body.woocommerce-order-received .woocommerce-customer-details address {
    min-height:0!important;
  }
}