/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 18 2025 | 20:50:24 */
/* tokens/components/list.css */
:root {
  /* ===== LIST BASE PROPERTIES ===== */
  --c-list-background-color: var(--s-icon-accent); /* legacy alias */
  --c-list-interactive-background-color: var(--s-icon-accent);

  /* ===== LIST TYPOGRAPHY ===== */
  --c-list-font-size: calc(
    var(--s-font-size-body) * var(--_font-scale-multiplier)
  ) !important;
  --c-list-line-height: var(--s-line-height-body);
  --c-list-font-weight: var(--s-font-weight-semibold);
  --c-list-padding-block: var(--p-spacing-xs);

  /* ===== LIST INTERACTIVE ===== */
  --c-list-interactive-background-gradient: linear-gradient(
    var(--s-glass-angle),
    oklch(from var(--s-interactive-primary-hover) l c h / 0.05) 0%,
    oklch(from var(--s-interactive-primary-hover) l c h / 0.1) 100%
  );
  --c-list-interactive-divider: 1px solid var(--s-border-neutral-subtle);
  --c-list-interactive-text-hover: var(--s-interactive-primary-hover);
}

/* =========================================================
   Base list / icon lists
   ========================================================= */

/* Font-size wird über Utility-Klasse oder Eltern geregelt */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list__item {
  position: relative;
  margin-left: 0; /* control indent with em */
  padding-left: 1.5em;
  padding-bottom: var(--c-list-padding-block);
  font-size: var(--c-list-font-size);
  line-height: var(--c-list-line-height);
  font-weight: var(--c-list-font-weight);
}

.list__item:last-child {
  margin-bottom: 0;
}

.list--check .list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1em;
  height: 1em;
  background-color: var(--c-list-interactive-background-color);

  /* SVG als Mask */
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 -0.000244141C12.4182 -0.000244141 15.9999 3.58159 16 7.99976C16 12.418 12.4183 15.9998 8 15.9998C3.58172 15.9998 0 12.418 0 7.99976C0.00013194 3.58159 3.5818 -0.000244141 8 -0.000244141ZM6.48145 9.2478L4.8584 7.61987L3.5 8.97925L6.48145 11.9597L12.582 5.85815L11.2236 4.49976L6.48145 9.2478Z' fill='black'/%3E%3C/svg%3E")
    no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 -0.000244141C12.4182 -0.000244141 15.9999 3.58159 16 7.99976C16 12.418 12.4183 15.9998 8 15.9998C3.58172 15.9998 0 12.418 0 7.99976C0.00013194 3.58159 3.5818 -0.000244141 8 -0.000244141ZM6.48145 9.2478L4.8584 7.61987L3.5 8.97925L6.48145 11.9597L12.582 5.85815L11.2236 4.49976L6.48145 9.2478Z' fill='black'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.list--chevron .list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1em;
  height: 1em;
  background-color: var(--c-list-interactive-background-color);

  /* SVG als Mask */
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.38867 11.667L11.0557 8L7.38867 4.33301L8.61133 3.11133L13.5 8L8.61133 12.8887L7.38867 11.667ZM2.49805 11.667L6.16602 8L2.49805 4.33301L3.7207 3.11133L8.60938 8L3.7207 12.8887L2.49805 11.667Z' fill='black'/%3E%3C/svg%3E")
    no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.38867 11.667L11.0557 8L7.38867 4.33301L8.61133 3.11133L13.5 8L8.61133 12.8887L7.38867 11.667ZM2.49805 11.667L6.16602 8L2.49805 4.33301L3.7207 3.11133L8.60938 8L3.7207 12.8887L2.49805 11.667Z' fill='black'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* =========================================================
   Interactive list (ehemals "project list")
   - große klickbare Rows mit Icon + Text
   ========================================================= */

/* Modifizierte Liste für interaktive Rows */
.list--interactive,
.list-project {
  /* .list-project = legacy alias */
  border-radius: var(--s-card-radius, 12px);
  overflow: hidden;
}

/* Interaktives List-Item (Row) */
.list__item--interactive,
.list-item-project {
  /* .list-item-project = legacy alias */
  padding: var(--p-spacing-s);
  margin-bottom: 0 !important;
  border-bottom: var(--c-list-interactive-divider);
  position: relative;
  z-index: 0;
  transition: color var(--p-transition-duration-fast) var(--p-transition-timing),
    background var(--p-transition-duration-fast) var(--p-transition-timing),
    box-shadow var(--p-transition-duration-fast) var(--p-transition-timing);

  backdrop-filter: blur(var(--p-blur-l));
  -webkit-backdrop-filter: blur(var(--p-blur-l));
}

/* Overlay-Hintergrund – liegt HINTER dem Inhalt */
.list__item--interactive::before,
.list-item-project::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-list-interactive-background-gradient);
  opacity: 0;
  transition: opactiy var(--p-transition-duration-fast)
    var(--p-transition-timing);
  pointer-events: none; /* blockiert keine Hover/Klicks */
  z-index: -1; /* wie Card-Overlay: unter dem Inhalt */
}

/* Hover + Fokus aktivieren Overlay */
.list__item--interactive:hover::before,
.list-item-project:hover::before,
.list__item--interactive:focus-within::before,
.list-item-project:focus-within::before {
  opacity: 1;
}

/* Standard-Hintergrund, wenn Overlay aktiv ist */
.list__item--interactive:hover,
.list-item-project:hover,
.list__item--interactive:focus-within,
.list-item-project:focus-within {
  background: none; /* Hintergrund kommt vom ::before */
}

/* Links innerhalb der Row */
.list__item--interactive a,
.list-item-project a {
  text-decoration: none;
}

/* ===== ICON STYLING ===== */

/* Icon-Transition - Basis-Stil für alle Icons */
.list__item--interactive .duotone-icon svg,
.list-item-project .duotone-icon svg {
  transition: color var(--p-transition-duration-fast) var(--p-transition-timing),
    fill var(--p-transition-duration-fast) var(--p-transition-timing);
}

/* FIX: Iconfarbe bei Hover - DIREKT auf das List-Item */
.list__item--interactive:hover .duotone-icon svg,
.list-item-project:hover .duotone-icon svg {
  color: var(--highlight-duotone-icon) !important;
}

/* Iconfarbe bei Focus-Within */
.list__item--interactive:focus-within .duotone-icon svg,
.list-item-project:focus-within .duotone-icon svg {
  color: var(--highlight-duotone-icon) !important;
}

/* ===== TEXT/LINK STYLING ===== */

/* Titel-Link in der Row */
.list__item--interactive .gb-container h6 a,
.list-item-project .gb-container h6 a {
  transition: color 0.2s ease-out;
}

/* Textfarbe bei Hover/Fokus der gesamten Row */
.list__item--interactive:hover .gb-container h6 a,
.list-item-project:hover .gb-container h6 a {
  color: var(--c-list-interactive-text-hover) !important;
}

.list__item--interactive:focus-within .gb-container h6 a,
.list-item-project:focus-within .gb-container h6 a {
  color: var(--c-list-interactive-text-hover) !important;
}

/* Letztes Item ohne Border */
.list__item--interactive:last-of-type,
.list-item-project:last-of-type {
  border-bottom: none;
}

/* =========================================================
   Static items (keine Hover-Effekte)
   ========================================================= */

.list__item--interactive-static,
.list-item-project-static {
  position: relative;
}

/* kein Overlay-Hintergrund */
.list__item--interactive-static::before,
.list-item-project-static::before {
  background: none !important;
  opacity: 0 !important;
}

/* kein Hover-Hintergrund */
.list__item--interactive-static:hover,
.list-item-project-static:hover {
  background: none !important;
}

/* Textfarbe bleibt unverändert */
.list__item--interactive-static .gb-container h6 a,
.list__item--interactive-static:hover .gb-container h6 a,
.list-item-project-static .gb-container h6 a,
.list-item-project-static:hover .gb-container h6 a {
  color: inherit !important;
}

/* Iconfarbe bleibt unverändert */
.list__item--interactive-static .duotone-icon svg,
.list-item-project-static .duotone-icon svg {
  color: inherit !important;
}

/* =========================================================
   Reduced Motion Support
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .list__item--interactive,
  .list-item-project,
  .list__item--interactive::before,
  .list-item-project::before,
  .list__item--interactive .gb-container h6 a,
  .list-item-project .gb-container h6 a,
  .list__item--interactive .duotone-icon svg,
  .list-item-project .duotone-icon svg {
    transition: none !important;
  }
}