/* =========================================================
   SUPPORT LOGIN
   ========================================================= */

.support-login-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.support-login-text {
  max-width: 650px;
}

/* IMAGE */

.support-login-image {
  display: flex;
  justify-content: center;
}

.support-login-image img {
  width: 100%;
  max-width: 480px;   /* 🔥 leicht kleiner als product */
  border-radius: var(--card-radius);

  box-shadow: var(--card-shadow);
}

@media (max-width: 900px) {
  .support-login-grid {
    grid-template-columns: 1fr;   /* 👉 untereinander */
    gap: 40px;
  }

  .support-login-text {
    max-width: 100%;
    text-align: left;
  }

  .support-login-image {
    justify-content: flex-start;  /* optional: links statt center */
  }

  .support-login-image img {
    max-width: 100%;
  }
}

/* =========================================================
   SUPPORT PAGE
   ========================================================= */

.support .intro {
  margin-top: 15px;
  color: var(--text-muted);
}

/* GRID */

.support-grid {
  margin-top: 50px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

/* CARD */

.support-card {
  display: block;

  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);

  padding: 25px;

  text-decoration: none;
  color: inherit;

  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

/* subtle glow */
.support-card::after {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(
        circle at top right,
        var(--color-accent-soft),
        var(--color-transparent) 60%
    );

    opacity: 0;
    transition: opacity .3s ease;

    pointer-events: none;   /* <-- hinzufügen */
}

.support-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  background: var(--color-accent-soft);
}

.support-card:hover::after {
  opacity: 1;
}

/* TEXT */

.support-card h3 {
  margin-bottom: 10px;
}

.support-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* =========================================================
   SUPPORT INTRO (LIKE PRODUCT)
   ========================================================= */

.support-intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.support-intro-text {
  max-width: 650px;
}

/* IMAGE */

.support-intro-image {
  display: flex;
  justify-content: center;
}

.support-intro-image img {
  width: 100%;
  max-width: 480px;   /* 🔥 leicht kleiner als product */
  border-radius: var(--card-radius);

  box-shadow: var(--card-shadow);
}

@media (max-width: 900px) {
  .support-intro-grid {
    grid-template-columns: 1fr;   /* 👉 untereinander */
    gap: 40px;
  }

  .support-intro-text {
    max-width: 100%;
    text-align: left;
  }

  .support-intro-image {
    justify-content: flex-start;  /* optional: links statt center */
  }

  .support-intro-image img {
    max-width: 100%;
  }
}

/* =========================================================
   SUPPORT – FIRMWARE
   ========================================================= */

.support-firmware .intro {
  margin-top: 15px;
  color: var(--text-muted);
}

/* GRID */

.firmware-grid {
  margin-top: 50px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

/* CARD */

.firmware-card {
	
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  padding: 25px;

  transition: all 0.25s ease;
}

.firmware-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
}

/* VERSION */

.firmware-version {
  font-size: 18px;
  font-weight: 600;
}

/* DATE */

.firmware-date {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 10px;
}

/* NOTES */

.firmware-notes {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* ACTIONS */

.firmware-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.firmware-actions a {
  padding: 8px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 13px;
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  transition: 0.2s;
}

.firmware-actions a:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.firmware-card.latest {
  border-color: var(--accent);
}

.firmware-badge {
  display: inline-block;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

.support-firmware-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.support-firmware-text {
  max-width: 650px;
}

/* IMAGE */

.support-firmware-image {
  display: flex;
  justify-content: center;
}

.support-firmware-image img {
  width: 100%;
  max-width: 480px;   /* 🔥 leicht kleiner als product */
  border-radius: var(--card-radius);

  box-shadow: var(--card-shadow);
}

@media (max-width: 900px) {
  .support-firmware-grid {
    grid-template-columns: 1fr;   /* 👉 untereinander */
    gap: 40px;
  }

  .support-firmware-text {
    max-width: 100%;
    text-align: left;
  }

  .support-firmware-image {
    justify-content: flex-start;  /* optional: links statt center */
  }

  .support-firmware-image img {
    max-width: 100%;
  }
}

.support-firmware-install .install-steps {
  margin-top: 20px;
  padding: 15px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
}

.support-firmware-install .install-steps ol {
  margin-left: 20px;
  margin-top: 10px;
  color: var(--text-muted);
}

.support-firmware-install .install-steps li {
  margin-bottom: 8px;
}

.support-firmware-install .install-action {
  margin-top: 25px;
}

.support-firmware-install .install-note {
  margin-top: 15px;
  font-size: 13px;
  color: var(--color-warning);
}


/* =========================================================
   SUPPORT – DOWNLOADS
   ========================================================= */

.support-downloads .intro {
  margin-top: 15px;
  color: var(--text-muted);
}

/* GRID */

.downloads-grid {
  margin-top: 50px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

/* CARD */

.download-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  padding: 25px;

  transition: all 0.25s ease;
}

.download-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
}

/* TYPE BADGE */

.download-type {
  display: inline-block;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 10px;
  background: var(--color-overlay-hover);
  margin-bottom: 10px;
}

/* TITLE */

.download-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* DATE */

.download-date {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 10px;
}

/* DESC */

.download-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* BUTTON */

.download-action a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  text-decoration: none;
  font-size: 13px;
  color: var(--text-main);
}

.download-action a:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.support-download-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.support-download-text {
  max-width: 650px;
}

/* IMAGE */

.support-download-image {
  display: flex;
  justify-content: center;
}

.support-download-image img {
  width: 100%;
  max-width: 480px;   /* 🔥 leicht kleiner als product */
  border-radius: var(--card-radius);

  box-shadow: var(--card-shadow);
}

@media (max-width: 900px) {
  .support-download-grid {
    grid-template-columns: 1fr;   /* 👉 untereinander */
    gap: 40px;
  }

  .support-download-text {
    max-width: 100%;
    text-align: left;
  }

  .support-download-image {
    justify-content: flex-start;  /* optional: links statt center */
  }

  .support-download-image img {
    max-width: 100%;
  }
}

.support-faq-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

/* TEXT */
.support-faq-text {
  max-width: 650px;
}

/* IMAGE */
.support-faq--image {
  display: flex;
  justify-content: center;
}

.support-faq--image img {
  width: 100%;
  max-width: 480px;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

/* ================================
   🔥 RESPONSIVE
   ================================ */

@media (max-width: 900px) {
  .support-faq-grid {
    grid-template-columns: 1fr;   /* 👉 untereinander */
    gap: 40px;
  }

  .support-faq-text {
    max-width: 100%;
    text-align: left;
  }

  .support-faq-image {
    justify-content: flex-start;  /* optional: links statt center */
  }

  .support-faq-image img {
    max-width: 100%;
  }
}

/* =========================================================
   DOWNLOAD FILTERS
   ========================================================= */

.download-filters {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* BUTTON */

.filter-btn {
  padding: 6px 14px;
  border-radius: 20px;

  border: 1px solid var(--border-soft);
  background: var(--color-overlay);

  color: var(--text-main);        /* 🔥 FIX */

  font-size: 13px;
  cursor: pointer;

  transition: all 0.2s ease;
}

.filter-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text-main);
}

.filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--color-text-primary);
}

/* =========================================================
   SUPPORT – FAQ
   ========================================================= */

.support-faq .intro {
  margin-top: 15px;
  color: var(--text-muted);
}

/* GRID */

.faq-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* CARD */

.faq-card {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: 0.25s;
}

.faq-card:hover {
  border-color: var(--accent);
}

/* CATEGORY */

.faq-category {
  font-size: 11px;
  margin-bottom: 8px;
  opacity: 0.7;
}

/* QUESTION */

.faq-question {
  font-weight: 600;
  margin-bottom: 10px;
}

/* ANSWER */

.faq-answer {
  font-size: 14px;
  color: var(--text-muted);
  display: none;
}

/* ACTIVE */

.faq-card.active .faq-answer {
  display: block;
  margin-top: 10px;
}

/* LINK */

.faq-link {
  margin-top: 10px;
}

.faq-link a {
  font-size: 13px;
  color: var(--accent);
}

/* FILTER */

.faq-filters {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.faq-filter-btn {
  padding: 6px 14px;
  border-radius: 20px;

  border: 1px solid var(--border-soft);
  background: var(--color-overlay);

  color: var(--text-main);            /* 🔥 KEY FIX */

  font-size: 13px;
  cursor: pointer;

  transition: all 0.2s ease;
}

.faq-filter-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text-main);            /* 🔥 sicherstellen */
}

.faq-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--color-text-primary);                       /* 🔥 KONTRAST */
}

.support-faq-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.support-faq-text {
  max-width: 650px;
}

/* IMAGE */

.support-faq-image {
  display: flex;
  justify-content: center;
}

.support-faq-image img {
  width: 100%;
  max-width: 480px;   /* 🔥 leicht kleiner als product */
  border-radius: var(--card-radius);

  box-shadow: var(--card-shadow);
}

@media (max-width: 900px) {
  .support-faq-grid {
    grid-template-columns: 1fr;   /* 👉 untereinander */
    gap: 40px;
  }

  .support-faq-text {
    max-width: 100%;
    text-align: left;
  }

  .support-faq-image {
    justify-content: flex-start;  /* optional: links statt center */
  }

  .support-faq-image img {
    max-width: 100%;
  }
}
/* =========================================================
   SUPPORT – RECOMMENDED 3RD PARTY PRODUCTS
   Restored after the global CSS cleanup
   ========================================================= */

.support-products {
  background: var(--surface-1, var(--color-page-end));
}

.support-products > .container {
  padding-top: 40px;
}

.support-3rdparty-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 60px;
  align-items: center;
}

.support-3rdparty-text {
  min-width: 0;
  max-width: 680px;
}

.support-3rdparty-text .intro {
  margin-top: 15px;
  max-width: 680px;
  color: var(--text-muted);
}

.support-3rdparty-image {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.support-3rdparty-image img {
  display: block;
  width: 100%;
  max-width: 540px;
  height: auto;
  border-radius: var(--card-radius);
  object-fit: cover;
  box-shadow: var(--card-shadow);
}

/* Filters */
.product-filters {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-filters button,
.product-filter-btn {
  appearance: none;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid var(--card-border, var(--card-border));
  border-radius: 999px;
  background: var(--color-overlay);
  color: var(--text-main, var(--color-text-primary));
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.product-filters button:hover,
.product-filter-btn:hover,
.product-filters button.active,
.product-filter-btn.active {
  background: var(--accent, var(--color-brand-primary));
  border-color: var(--accent, var(--color-brand-primary));
  color: var(--color-text-primary);
}

/* Loading / error */
#productLoading,
#productError {
  margin-top: 28px;
  font-size: 14px;
}

#productError {
  color: var(--color-error-on-dark);
}

/* Product grid */
#productList.product-grid {
  margin-top: 24px;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  justify-content: stretch;
  align-items: stretch;
}

#productList .product-card {
  position: relative;
  min-width: 0;
  min-height: 190px;
  padding: 22px;
  overflow: hidden;
  cursor: pointer;
  background: var(--card-bg, var(--card-background));
  border: 1px solid var(--card-border, var(--card-border));
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow-1, 0 10px 30px var(--shadow-card-strong));
}

#productList .product-card:hover {
  background: var(--card-bg-hover, var(--card-background-hover));
  border-color: var(--card-border-hover, var(--color-brand-hover));
  transform: translateY(-3px);
  box-shadow: var(--shadow-2, 0 20px 50px var(--shadow-card-strong));
}

#productList .product-card > * {
  position: relative;
  z-index: 1;
}

#productList .product-category,
#productList .product-type,
#productList .product-card-category {
  margin-bottom: 8px;
  color: var(--accent-light, var(--color-brand-hover));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#productList .product-title,
#productList .product-card h3 {
  margin: 0 0 10px;
  color: var(--text-main, var(--color-text-primary));
  font-size: 18px;
  line-height: 1.3;
}

#productList .product-description,
#productList .product-card p,
#productList .product-variants {
  margin: 0 0 14px;
  color: var(--text-muted, var(--color-text-secondary));
  font-size: 14px;
  line-height: 1.5;
}

#productList .product-details,
#productList .product-card-link {
  margin-top: auto;
  color: var(--accent-light, var(--color-brand-hover));
  font-size: 13px;
  font-weight: 600;
}

/* Modal */
.usecase-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.usecase-modal.active,
.usecase-modal.open {
  display: flex;
}

.usecase-modal-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-backdrop);
  backdrop-filter: blur(7px);
}

.usecase-modal-content {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(84vh, 900px);
  overflow-y: auto;
  padding: 32px;
  border: 1px solid var(--card-border, var(--card-border));
  border-radius: 20px;
  background: var(--surface-1, var(--color-page-end));
  box-shadow: 0 30px 90px var(--shadow-card-strong);
}

.usecase-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--color-overlay-hover);
  color: var(--color-text-primary);
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1050px) {
  .support-3rdparty-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr);
    gap: 40px;
  }

  #productList.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .support-products > .container {
    padding-top: 25px;
  }

  .support-3rdparty-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .support-3rdparty-text,
  .support-3rdparty-image img {
    max-width: none;
  }

  .support-3rdparty-image {
    justify-content: flex-start;
  }

  .product-filters {
    margin-top: 34px;
  }

  #productList.product-grid {
    grid-template-columns: 1fr;
  }

  #productList .product-card {
    min-height: 0;
  }

  .usecase-modal {
    padding: 14px;
  }

  .usecase-modal-content {
    padding: 28px 20px 22px;
  }
}


/* =========================================================
   SUPPORT LOGIN FORM
   ========================================================= */

.support-login-card{padding:36px;}
.support-step.hidden{display:none;}
.support-form-label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-main);}
.support-input{
width:100%;
min-height:54px;
padding:0 16px;
margin-bottom:20px;
border:1px solid var(--field-border);
border-radius:var(--field-radius);
background:var(--field-background);
color:var(--field-text);
font-size:16px;
transition:.2s;
}
.support-input::placeholder{color:var(--field-placeholder);}
.support-input:focus{outline:none;border-color:var(--field-border-focus);box-shadow:var(--field-focus-ring);}
.support-input.code{letter-spacing:8px;font-size:24px;text-align:center;}
.support-message{display:none;margin-bottom:20px;padding:16px;border-radius:12px;}
.support-actions{margin-top:40px;}
.support-login-card .btn{width:100%;}

/* =========================================================
   SUPPORT REGISTRATION FORM
   ========================================================= */

.support-register-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 60px;
  align-items: start;
}

.support-register-intro {
  max-width: 720px;
}

.support-register-intro .btn {
  margin-top: 12px;
}

.support-register-card {
  padding: 36px;
  background: var(--card-background);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.support-register-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.support-register-name-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.support-register-form .support-input {
  margin-bottom: 0;
}

.support-register-consent label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--text-muted);
  line-height: 1.5;
  cursor: pointer;
}

.support-register-consent input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent);
}

.support-register-consent a {
  color: var(--accent-light);
  text-underline-offset: 3px;
}

.support-register-error {
  padding: 16px;
  margin-bottom: 20px;
  background: var(--color-error-surface-soft);
  border: 1px solid var(--color-error-border);
  border-radius: var(--field-radius);
  color: var(--color-error-text);
}

.support-register-submit {
  width: 100%;
}

@media (max-width: 900px) {
  .support-register-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .support-register-card {
    width: 100%;
    max-width: 640px;
  }
}

@media (max-width: 600px) {
  .support-register-card {
    padding: 24px 20px;
  }

  .support-register-name-row {
    grid-template-columns: 1fr;
  }
}