

/* Aktuelle Header Styles */
.produkt__header {
  margin-bottom: var(--spacing-8);
}
.produkt__header-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--spacing-4);
  align-items: center;
}

.produkt__short-description {
  margin-bottom: var(--spacing-6);
}

.produkt__title {
  color: var(--color-primary);
  margin-bottom: var(--spacing-4);
}

.produkt__btn-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
}

/* Basis List Styles */
.produkt__short-description ul {
  list-style: none;
  padding: 0;
  margin: var(--spacing-4) 0;
}

.produkt__short-description ul li {
  position: relative;
  padding-left: calc(25px + var(--spacing-3)); /* Icon-Breite + Abstand */
  margin-bottom: var(--spacing-2);
  min-height: 25px; /* Mindesthöhe entsprechend Icon-Höhe */
  display: flex;
  align-items: center;
}

/* Icon als Pseudo-Element */
.produkt__short-description ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M3.90626 12.4999C3.90603 10.9912 4.30294 9.50911 5.0571 8.20251C5.81127 6.89591 6.8961 5.81086 8.20256 5.05644C9.50901 4.30202 10.991 3.90482 12.4997 3.90476C14.0083 3.9047 15.4904 4.30179 16.7969 5.0561C16.9762 5.15807 17.1886 5.18496 17.3877 5.13091C17.5868 5.07685 17.7565 4.94625 17.8596 4.76758C17.9628 4.58892 17.9911 4.37671 17.9383 4.17726C17.8856 3.97781 17.7561 3.80732 17.5781 3.70298C15.642 2.58514 13.3911 2.13739 11.1745 2.42917C8.95796 2.72095 6.89961 3.73595 5.31869 5.31677C3.73777 6.89758 2.72264 8.95587 2.43072 11.1724C2.13879 13.389 2.5864 15.6399 3.70412 17.5761C4.82183 19.5123 6.5472 21.0257 8.61263 21.8814C10.6781 22.7371 12.9681 22.8874 15.1277 22.309C17.2873 21.7306 19.1956 20.4557 20.5568 18.6822C21.918 16.9087 22.656 14.7355 22.6563 12.4999C22.6563 12.2927 22.574 12.0939 22.4274 11.9474C22.2809 11.8009 22.0822 11.7186 21.875 11.7186C21.6678 11.7186 21.4691 11.8009 21.3226 11.9474C21.1761 12.0939 21.0938 12.2927 21.0938 12.4999C21.0938 14.7791 20.1884 16.9649 18.5767 18.5766C16.9651 20.1882 14.7792 21.0936 12.5 21.0936C10.2208 21.0936 8.03496 20.1882 6.42332 18.5766C4.81167 16.9649 3.90626 14.7791 3.90626 12.4999Z' fill='%23006BA1'/%3E%3Cpath d='M23.9916 5.24064C24.0642 5.168 24.1219 5.08176 24.1612 4.98686C24.2005 4.89195 24.2207 4.79024 24.2207 4.68751C24.2207 4.58479 24.2005 4.48307 24.1612 4.38816C24.1219 4.29326 24.0642 4.20702 23.9916 4.13439C23.919 4.06175 23.8327 4.00413 23.7378 3.96482C23.6429 3.92551 23.5412 3.90527 23.4385 3.90527C23.3358 3.90527 23.234 3.92551 23.1391 3.96482C23.0442 4.00413 22.958 4.06175 22.8854 4.13439L12.501 14.5203L8.36661 10.3844C8.29397 10.3117 8.20774 10.2541 8.11284 10.2148C8.01793 10.1755 7.91621 10.1553 7.81349 10.1553C7.71076 10.1553 7.60904 10.1755 7.51414 10.2148C7.41923 10.2541 7.333 10.3117 7.26036 10.3844C7.18772 10.457 7.13011 10.5433 7.09079 10.6382C7.05148 10.7331 7.03125 10.8348 7.03125 10.9375C7.03125 11.0402 7.05148 11.142 7.09079 11.2369C7.13011 11.3318 7.18772 11.418 7.26036 11.4906L11.9479 16.1781C12.0204 16.2509 12.1066 16.3086 12.2016 16.348C12.2965 16.3874 12.3982 16.4077 12.501 16.4077C12.6037 16.4077 12.7055 16.3874 12.8004 16.348C12.8953 16.3086 12.9815 16.2509 13.0541 16.1781L23.9916 5.24064Z' fill='%23006BA1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.produkt__long-description p {
  margin-bottom: var(--spacing-4);
}

/* Neue responsive Styles */

/* Header Image Styles */
.produkt__header-image {
  position: relative;
  width: 100%;
  height: 100%;
}

.produkt__featured-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Datenblatt Link Styles */
.produkt__datenblatt-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-primary);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--transition);
}

.product-meta__label {
  font-weight: 600;
  margin-bottom: var(--spacing-1);
}

.produkt__datenblatt-link:hover {
  color: var(--color-primary-dark);
}

.produkt__datenblatt-link i {
  font-size: var(--text-lg);
}

/* Tablet Styles */
@media (max-width: 1024px) {
  .produkt__header-grid {
    grid-template-columns: 1fr 1fr; /* Angepasstes Verhältnis */
    gap: var(--spacing-6);
  }

  .produkt__short-description {
    margin-bottom: var(--spacing-4);
    font-size: var(--text-sm);
  }

  .produkt__btn-wrapper {
    gap: var(--spacing-3);
  }

  .produkt__meta-details-wrapper {
    flex-direction: column;
    gap: 0 !important;
    align-items: unset !important;
  }

  .product-meta__item {
    border-bottom: 1px solid var(--color-gray-300);
    padding-bottom: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    justify-self: flex-start;
    text-align: left;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .product-meta__item::after {
    display: none !important;
  }
}

/* Mobile Styles */
@media (max-width: 768px) {
  .produkt__header {
    margin-bottom: var(--spacing-6);
  }

  .produkt__header-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
  }

  .produkt__header-content {
    order: 2;
  }

  .produkt__header-image {
    order: 1;
  }

  .produkt__title {
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-3);
  }

  .produkt__btn-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-3);
  }

  /* Button Anpassungen */
  .produkt__header-btn,
  .produkt__datenblatt-link {
    width: 100%;
    justify-content: center;
    padding: var(--spacing-3);
  }

  .produkt__datenblatt-link {
    background: var(--color-surface);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-base);
    padding: var(--spacing-3);
  }

  .produkt__short-description ul li {
    padding-left: calc(20px + var(--spacing-3)); /* Kleineres Icon auf Mobile */
  }

  .produkt__short-description ul li::before {
    width: 20px;
    height: 20px;
  }

  .product-meta__item {
    padding-bottom: .75rem !important;
  }
}

/* Kleine Mobile Geräte */
@media (max-width: 480px) {
  .produkt__header {
    margin-bottom: var(--spacing-4);
  }

  .produkt__header-grid {
    gap: var(--spacing-4);
  }

  .produkt__header-image {
    max-height: 250px;
  }

  .produkt__title {
    font-size: var(--text-base);
  }

  .produkt__short-description {
    font-size: var(--text-xs);
  }

  /* Buttons noch kompakter */
  .produkt__header-btn,
  .produkt__datenblatt-link {
    padding: var(--spacing-2);
    font-size: var(--text-sm);
  }

  .produkt__short-description ul {
    margin: var(--spacing-3) 0;
  }

  .produkt__short-description ul li {
    margin-bottom: var(--spacing-1);
    padding-left: calc(18px + var(--spacing-2));
  }

  .produkt__short-description ul li::before {
    width: 18px;
    height: 18px;
  }
}

/* Basic Styles */
.produkt__container {
  padding-top: var(--spacing-3);
}

.produkt__wrapper {
  padding-top: 0;
  padding-bottom: 0;
}

.produkt__content {
  margin-top: var(--spacing-5);
}

.produkt__btn-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
}

.produkt__header-btn {
  background: var(--color-accent);
}

/* Produkt Meta Details */

.produkt__meta-details {
  background: var(--color-primary);
  padding: var(--spacing-4);
  border-radius: 7px;
  margin: var(--spacing-8) 0 var(--spacing-6);
}

.produkt__meta-details-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
}

.product-meta__item::after {
  content: "";
  display: block;
  width: 1px;
  height: 50px;
  background: var(--color-text-inverse);
  position: absolute;
  right: -7%;
  transform: rotate(15deg);
}

.product-meta__item:last-child::after {
  display: none !important;
}

.product-meta__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width:100%;
  padding: 0 .5rem;
}

.product-meta__label,
.product-meta__value {
  color: var(--color-text-inverse);
  text-align: center;
}

/* Feedback A7: max-width für kompaktere Abstände (analog zu table-Variante) */
.produkt__specifications-list {
  list-style: none;
  padding: 0;
  max-width: 800px;
  margin: 0;
}

.produkt__spezifikationen-basisaustattung h3,
.produkt__spezifikationen-optionen h3 {
  margin-top: var(--spacing-7);
  color: var(--color-primary);
}

/* Feedback A7: space-between entfernt, stattdessen feste Breiten für title/value */
.produkt__specification-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: var(--spacing-2) var(--spacing-3);
  border-bottom: 1px solid var(--color-gray-300);
}

/* Feedback A7: feste Breite für Label-Spalte, konsistent mit table-Variante */
.produkt__specification-title {
  font-weight: 700;
  width: 55%;
  flex-shrink: 0;
}

.produkt__specification-item .produkt__specification-value {
  width: 45%;
  text-align: left;
}



/* TABS */

/* Tab Navigation Styles */
.produkt__tabs {
  margin-top: var(--spacing-6);
}

.produkt__tabs-container {
  padding: 0;
}

.produkt__tabs-nav-wrapper {
  background-color: var(--color-primary);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  overflow-x:hidden;
}

.produkt__tabs-nav {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-4) 0;
  justify-content: space-evenly;
}

.produkt__tab-btn {
  padding: var(--spacing-2) var(--spacing-4);
  background: none;
  border: none;
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: var(--transition);
  font-size: var(--text-sm);
  position: relative;
}

.produkt__tab-btn::after {
  content: "";
  position: absolute;
  bottom: calc(var(--spacing-4) * -1);
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #cbdce9;
  transform: scaleX(0.8);
  transition: transform var(--transition);
}

.produkt__tab-btn:hover::after {
  background-color: var(--color-accent);
}

.produkt__tab-btn.active::after {
  transform: scaleX(0.9);
  background-color: var(--color-accent);
}

/* Tab Content Styles */
.produkt__tabs-content-container {
  margin: var(--spacing-7) auto;
}

.produkt__tabs-content {
}

.produkt__tab-heading {
  margin: var(--spacing-9) 0 var(--spacing-6);
  max-width: 800px;
}

.produkt__tab-panel {
  display: none;
}

.produkt__tab-panel.active {
  display: block;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .produkt__tabs-nav {
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--spacing-3);
  }

  .produkt__tab-btn {
    white-space: nowrap;
  }

  .produkt__tab-heading{
    margin-top:0;
  }
}

/* ANWENDUNGEN */

/* Basisstile für Anwendungen */
.produkt__application-wrapper {
}

.produkt__application-content {
  margin-top: var(--spacing-4);
}

.produkt__application-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-4);
  justify-content: center;
  padding-left: 0;
}

.produkt__application-item {
  list-style: none;
  padding: var(--spacing-5) var(--spacing-7);
  background: var(--color-surface-light);
  text-align: center;
  font-size: var(--text-base);
  font-weight: 700;
  border-radius: var(--radius-base);
  transition: transform var(--transition);
  display: flex;
  justify-content: center;
  align-items: center;
}

.produkt__application-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Tablet Styles */
@media (max-width: 1024px) {
  .produkt__application-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3);
  }

  .produkt__application-item {
    padding: var(--spacing-4) var(--spacing-5);
    font-size: var(--text-sm);
  }

  .produkt__application-wrapper {
    margin: var(--spacing-6) 0;
  }

  .product-meta__label,
  .product-meta__value {
    color: var(--color-text-inverse);
    text-align: left;
  }
  .produkt__tab-btn::after {
    bottom: -18px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .produkt__tab-btn::after {
    bottom: -27px !important;
  }
}

/* Mobile Styles */
@media (max-width: 768px) {
  .produkt__application-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3);
  }

  .produkt__application-item {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .produkt__application-wrapper {
    margin: var(--spacing-4) 0;
  }
}

/* Sehr kleine Geräte */
@media (max-width: 480px) {
  .produkt__application-list {
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
  }

  .produkt__application-item {
    padding: var(--spacing-3);
  }

  .produkt__application-wrapper {
    margin: var(--spacing-3) 0;
  }

  .produkt__application-heading {
    margin-bottom: var(--spacing-4);
    font-size: var(--text-lg);
  }
}

/* Fallback für leere Zustände */
.produkt__application-empty {
  text-align: center;
  padding: var(--spacing-4);
  color: var(--color-text-light);
  background: var(--color-surface-light);
  border-radius: var(--radius-base);
}

/* PUBLICATIONS SECTION */

.produkt__publications-list {
  padding: 0;
}

.produkt__publications-item {
  list-style: none;

  border-bottom: 1px solid var(--color-gray-300);
  padding: var(--spacing-5) 0;
}

.produkt__publications-item:first-child {
  border-top: 1px solid var(--color-gray-300);
}

.produkt__publications-item-link,
.produkt__publications-item-title {
  font-size: var(--text-lg);
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: -0.64px;
  margin-bottom: var(--spacing-2);
}

.produkt__publications-item-author {
  font-size: var(--text-sm);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.4px;
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-3);
}

.produkt__publications-item-date span {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--color-gray-500);
  border: 1px solid #4c4a4c;
  padding: var(--spacing-1);
}

/* DOWNLOAD SECTION */

.produkt__downloads-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.produkt__download-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-primary);
}

.produkt__download-preview {
  width: 100%;
  max-width: 300px;
  height: auto;
  max-height: 400px;
  background: var(--color-gray-100);
  overflow: hidden;
  border-radius: 4px;
}

.produkt__download-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.produkt__download-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.produkt__download-link:hover img {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .produkt__downloads-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .produkt__download-preview {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .produkt__downloads-grid {
    grid-template-columns: 1fr;
  }
}

.produkt__spectra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: var(--spacing-6);
  margin-top: var(--spacing-4);
}

.produkt__spectra-group:not(:last-child) {
  margin-bottom: var(--spacing-8);
}

.produkt__spectra-figure {
  margin: 0;
}

.produkt__spectra-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.produkt__spectra-caption {
  margin-top: var(--spacing-2);
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* Tabellen-Container */
.produkt__comparison-table-wrapper {
  overflow-x: auto;
  margin: 2rem 0;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Basis-Tabellenstil */
.produkt__comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

/* Header-Stile */
.produkt__comparison-header {
  padding: 1.25rem 1rem;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-bold);
  text-align: left;
  white-space: nowrap;
}

.produkt__comparison-header:first-child {
  border-top-left-radius: var(--radius-lg);
}

.produkt__comparison-header:last-child {
  border-top-right-radius: var(--radius-lg);
}

/* Sektions-Header */
.produkt__comparison-section-header {
  padding: 1rem;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
}

/* Zeilen und Zellen */
.produkt__comparison-table tr:not(.produkt__comparison-section) {
  border-bottom: 1px solid var(--color-gray-300);

}

.produkt__comparison-table tr:not(.produkt__comparison-section):nth-child(even) {
	background:#f3f7f9 !important;
}

.produkt__comparison-table tr:last-child {
  border-bottom: none;
}

.produkt__comparison-label,
.produkt__comparison-value {
  padding: 1rem;
  vertical-align: top;
  border-right:1px solid var(--color-gray-300);
}

.produkt__comparison-label {
  font-weight: var(--font-medium);
  color: var(--color-text);
  background: var(--color-gray-50);
  width: 25%; /* Mindestbreite für die erste Spalte */
}

.produkt__comparison-value {
  color: var(--color-text);
  text-align:center;
}

/* Einheiten */
.produkt__comparison-unit {
  color: var(--color-text-light);
  font-size: 0.9em;
  margin-left: 0.25rem;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .produkt__comparison-table {
    font-size: var(--text-xs);
  }

  .produkt__comparison-label,
  .produkt__comparison-value {
    padding: 0.75rem 0.5rem;
  }

  .produkt__comparison-label {
    width: auto; /* Lasse die Breite auf Mobilgeräten flexibel */
  }

  .produkt__meta-details{
    margin:var(--spacing-6) 0;
  }
}

/* Striped Effect */
.produkt__comparison-table tbody tr:nth-child(even):not(.produkt__comparison-section) {
  background-color: var(--color-gray-50);
}

/* Hover-Effekt */
.produkt__comparison-table tbody tr:hover:not(.produkt__comparison-section) {
  background-color: var(--color-gray-100);
}

/* LMT */

.produkt--lasermikrotechnologie .heading{
  margin-bottom:var(--spacing-3) !important;
}

.produkt--lasermikrotechnologie .section{
  margin-bottom:var(--spacing-6) !important;
}


/* SPEC TABLES */



/* Spezifikationstabellen */
.spec-table {
  margin: var(--spacing-4) 0;
}

.spec-table-title {
  color: var(--color-text);
  margin-bottom: var(--spacing-3);
}



.spec-table table {
  width: 100%;
  border-collapse: collapse;
}

.spec-table th {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--spacing-4);
  text-align: left;
  font-weight: 600;
}

.spec-table td {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-300);
  text-align:center;
}

.spec-table tr > td:first-child{
  text-align:left;
}


.spec-table tr > th{
  text-align:center;
}

.spec-table tr:first-child > th:first-child{
  text-align:left;
}

.spec-table tr:nth-child(even) td {
background:#f3f7f9 !important;
}

/* Fußnoten */
.spec-footnote-ref {
  color: var(--color-primary);
  font-weight: 600;
  margin-left: var(--spacing-1);
  font-size:var(--text-xxs);
}

.spec-footnotes {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-300);
}

.spec-footnote {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-2);
  display:flex;
}



.spec-footnote > p {
  color: var(--color-primary);
  font-weight: 600;
  margin-right: var(--spacing-2);
}


.create-new-table{
  display:flex;
  justify-content: flex-start;
  align-items: center;
}

@media(max-width:1024px){
  .spec-table-content {
    overflow-x:scroll;
  }
}

/* LMT Equipment Table */
.produkt__equipment-table {
  max-width: none;
}

.produkt__equipment-table .produkt__specifications-table {
  max-width: none;
}

.produkt__equipment-table .produkt__specification-value {
  text-align: left;
}

/* LMT Configuration */
.produkt__configuration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-4);
}

.produkt__configuration-card {
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-base);
  overflow: hidden;
}

.produkt__configuration-image {
  width: 100%;
  height: 480px;
  background: var(--color-gray-100);
}

@media (max-width: 1024px) {
  .produkt__configuration-image {
    height: 380px;
  }
}

.produkt__configuration-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.produkt__configuration-title {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--spacing-3) var(--spacing-4);
  margin: 0;
  font-size: var(--text-base);
}

.produkt__configuration-specs {
  width: 100%;
  border-collapse: collapse;
}

.produkt__configuration-label,
.produkt__configuration-value {
  padding: var(--spacing-2) var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-300);
  font-size: var(--text-sm);
}

.produkt__configuration-label {
  font-weight: 500;
  width: 45%;
}

.produkt__configuration-specs tr:nth-child(even) td {
  background: #f3f7f9;
}

.produkt__configuration-specs tr:last-child td {
  border-bottom: none;
}

.produkt__configuration-desc {
  padding: var(--spacing-4);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
}