/* ============================================
   KONRAT WEBSITE v2 - "MEINE BERATUNG" STYLES
   JOBST Corporate Design | Mobile-First
   ============================================ */

/* ------------------------------------------
   Beratung Hero Section
   ------------------------------------------ */
.beratung-hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(var(--header-height) + var(--space-16));
  padding-bottom: var(--space-16);
  background: linear-gradient(180deg, var(--jobst-blue) 0%, var(--blue-dark) 100%);
}

.beratung-header {
  text-align: center;
  margin-bottom: var(--space-12);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.beratung-header .section-tag {
  background: rgba(var(--jobst-orange-rgb), 0.15);
  color: var(--jobst-orange);
}

.beratung-header .section-title {
  color: var(--white);
  margin-bottom: var(--space-4);
}

.beratung-description {
  font-size: var(--text-lg);
  color: var(--light-blue);
  line-height: var(--leading-relaxed);
}

/* ------------------------------------------
   Code Entry Form
   ------------------------------------------ */
.code-entry-container {
  max-width: 480px;
  margin: 0 auto var(--space-16);
}

.code-form {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-xl);
}

.code-input-group {
  margin-bottom: var(--space-6);
}

.code-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--jobst-blue);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.code-input-wrapper {
  position: relative;
}

.code-input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  padding-right: 48px;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-primary);
  color: var(--jobst-blue);
  background: var(--grey-bg);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  text-align: center;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: border-color var(--transition-base),
              background-color var(--transition-base),
              box-shadow var(--transition-base);
}

.code-input::placeholder {
  color: var(--grey-lighter);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.code-input:focus {
  outline: none;
  border-color: var(--jobst-orange);
  background-color: var(--white);
  box-shadow: 0 0 0 4px rgba(var(--jobst-orange-rgb), 0.15);
}

.code-input--error {
  border-color: var(--jobst-orange) !important;
  background-color: rgba(var(--jobst-orange-rgb), 0.05) !important;
}

.code-input--valid {
  border-color: #22c55e !important;
  background-color: rgba(34, 197, 94, 0.05) !important;
}

.code-validation-icon {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.code-validation-icon--visible {
  opacity: 1;
}

.code-hint {
  font-size: var(--text-sm);
  color: var(--grey-light);
  margin-top: var(--space-2);
  text-align: center;
}

.code-error {
  font-size: var(--text-sm);
  color: var(--jobst-orange);
  margin-top: var(--space-2);
  text-align: center;
  font-weight: var(--font-weight-medium);
  min-height: 1.5em;
}

.code-submit {
  width: 100%;
  justify-content: center;
  position: relative;
}

.code-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.submit-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.code-submit--loading .submit-text {
  opacity: 0.7;
}

.code-submit--loading .submit-spinner {
  display: block;
  position: absolute;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------
   Session Result
   ------------------------------------------ */
.session-result {
  max-width: 800px;
  margin: 0 auto;
  animation: result-fade-in 0.5s ease-out;
}

@keyframes result-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.result-header {
  text-align: center;
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.result-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}

.result-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--white);
  margin-bottom: var(--space-2);
}

.result-date {
  font-size: var(--text-sm);
  color: var(--light-blue);
  margin-bottom: var(--space-1);
}

.result-code {
  font-size: var(--text-base);
  color: var(--jobst-orange);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
}

.result-section {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-lg);
}

.result-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--jobst-blue);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--grey-lighter);
}

.section-icon {
  font-size: 1.5rem;
}

.result-section-content {
  color: var(--jobst-grey);
  line-height: var(--leading-relaxed);
}

.result-section-content p {
  margin-bottom: var(--space-3);
}

.result-section-content p:last-child {
  margin-bottom: 0;
}

/* Products Grid */
.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.product-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--grey-bg);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--jobst-orange);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}

.product-card:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}

.product-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image-placeholder {
  font-size: 2rem;
}

.product-info {
  flex: 1;
  min-width: 0;
}

.product-name {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--jobst-blue);
  margin-bottom: var(--space-1);
}

.product-description {
  font-size: var(--text-sm);
  color: var(--grey-light);
  line-height: var(--leading-snug);
}

/* Care Tips */
.care-tips-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.care-tips-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--grey-bg);
  border-radius: var(--radius-md);
}

.care-tips-list li::before {
  content: '✓';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jobst-orange);
  color: var(--white);
  border-radius: 50%;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

/* T2 (06.07.2026, Christoph-Freigabe): optionales Bild je Pflegehinweis
   (scripts/care_tips_draft.py). Ohne Bild bleibt die bisherige Darstellung
   unverändert. */
.care-tips-list li.care-tip-with-image::before {
  display: none;
}

.care-tip-image {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ============================================================
   Anzieh-Anleitung (13.07.2026, Christoph-Auftrag)
   Dieselben Schritte + IFU-Piktogramme wie am Kiosk (display-web/
   web/style.css .anz-* -- eigener Namensraum .anziehen-* hier,
   damit nichts mit den Kiosk-Klassen kollidiert). Nicht jeder
   Schritt hat ein Bild -- ohne EIN Bild in der ganzen Liste wird
   die Kachelreihe zur schmalen Textliste (.nur-text), sonst
   stünden leere weiße Kästen nebeneinander.
   ============================================================ */
.anziehen-titel {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--jobst-blue);
  margin-bottom: var(--space-4);
}

.anziehen-schritte {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-4);
  padding: 0;
  margin: 0 0 var(--space-5);
}

.anziehen-schritte.nur-text {
  grid-template-columns: 1fr;
}

.anziehen-schritt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  padding-top: var(--space-8);
  background: var(--grey-bg);
  border-radius: var(--radius-md);
}

.anziehen-schritte.nur-text .anziehen-schritt {
  flex-direction: row;
  align-items: center;
  padding-top: var(--space-3);
  padding-left: var(--space-10);
}

.anziehen-nr {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jobst-orange);
  color: var(--white);
  border-radius: 50%;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.anziehen-bild {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.anziehen-bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.anziehen-text {
  font-size: var(--text-sm);
  color: var(--jobst-grey);
  line-height: var(--leading-snug);
  margin: 0;
}

.anziehen-tipps {
  margin-bottom: var(--space-4);
}

.anziehen-tipps-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--jobst-blue);
  margin-bottom: var(--space-2);
}

.anziehen-tipps-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
}

.anziehen-tipps-liste li {
  font-size: var(--text-sm);
  color: var(--jobst-grey);
  padding-left: var(--space-4);
  position: relative;
}

.anziehen-tipps-liste li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--jobst-orange);
  font-weight: var(--font-weight-bold);
}

/* Quelle ist Pflicht, keine Deko -- medizinische Anleitung, keine Werbung. */
.anziehen-quelle {
  font-size: var(--text-xs);
  color: var(--grey-light);
  padding-top: var(--space-3);
  border-top: 1px solid var(--grey-lighter);
}

/* Follow-up */
.follow-up-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: linear-gradient(135deg, rgba(var(--jobst-blue-rgb), 0.05), rgba(var(--jobst-orange-rgb), 0.05));
  border-radius: var(--radius-lg);
  border: 2px solid var(--jobst-blue);
}

.follow-up-date {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--jobst-blue);
}

.follow-up-note {
  font-size: var(--text-sm);
  color: var(--grey-light);
}

/* ICS-Download: primäre Aktion der Karte -- bewusst Blue statt Orange
   (Orange ist die "Kauf/CTA"-Farbe der Seite und würde hier zu werblich/
   dringlich wirken, siehe Konzept F4). */
.follow-up-ics-button {
  justify-content: center;
  background-color: var(--jobst-blue);
}

.follow-up-ics-button:hover {
  background-color: var(--blue-dark);
}

.follow-up-disclaimer {
  font-size: var(--text-xs);
  color: var(--grey-light);
  margin: 0;
}

/* Result Actions */
.result-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.print-button {
  justify-content: center;
  gap: var(--space-3);
}

.secondary-button {
  justify-content: center;
  gap: var(--space-3);
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
}

.secondary-button:hover {
  background: var(--white);
  color: var(--jobst-blue);
}

/* ------------------------------------------
   Error State
   ------------------------------------------ */
.session-error {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
  animation: result-fade-in 0.5s ease-out;
}

.error-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}

.error-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--white);
  margin-bottom: var(--space-3);
}

.error-message {
  font-size: var(--text-base);
  color: var(--light-blue);
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

.error-hints {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-8);
  text-align: left;
}

.error-hints p {
  color: var(--white);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}

.error-hints ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.error-hints li {
  color: var(--light-blue);
  font-size: var(--text-sm);
  padding-left: var(--space-5);
  position: relative;
}

.error-hints li::before {
  content: '•';
  position: absolute;
  left: var(--space-2);
  color: var(--jobst-orange);
}

/* ------------------------------------------
   Info Section
   ------------------------------------------ */
.info-section {
  padding: var(--space-16) 0;
  background: var(--grey-bg);
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

.info-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}

.info-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.info-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
}

.info-title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--jobst-blue);
  margin-bottom: var(--space-2);
}

.info-text {
  font-size: var(--text-base);
  color: var(--grey-light);
  line-height: var(--leading-relaxed);
}

/* ------------------------------------------
   Print Styles
   ------------------------------------------ */
@media print {
  .header,
  .info-section,
  .footer,
  .code-entry-container,
  .result-actions,
  .follow-up-ics-button,
  .product-modal-overlay,
  .beratung-context-tag {
    display: none !important;
  }

  .beratung-hero {
    min-height: auto;
    padding-top: var(--space-8);
    background: var(--white) !important;
  }

  .session-result {
    max-width: 100%;
  }

  .result-header {
    border-bottom-color: var(--grey-lighter);
  }

  .result-title {
    color: var(--jobst-blue) !important;
  }

  .result-date,
  .result-code {
    color: var(--grey-light) !important;
  }

  .result-section {
    box-shadow: none;
    border: 1px solid var(--grey-lighter);
    break-inside: avoid;
  }

  .product-card {
    break-inside: avoid;
  }

  .follow-up-card {
    border: 2px solid var(--jobst-blue);
  }
}

/* ------------------------------------------
   Responsive Design
   ------------------------------------------ */
@media (min-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .result-actions {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .info-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .code-form {
    padding: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .beratung-hero {
    padding-top: calc(var(--header-height) + var(--space-20));
  }

  .code-entry-container {
    max-width: 520px;
  }
}

/* ============================================================
   KUNDEN-NACHTRAG (v22/AP4)
   Erscheint nur bei offener Lücke. Optik an die Folgeversorgungs-
   Karte angelehnt, aber bewusst zurückhaltend (kein Alarm).
   ============================================================ */
.nachtrag-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: linear-gradient(135deg, rgba(var(--jobst-blue-rgb), 0.04), rgba(var(--jobst-orange-rgb), 0.04));
  border-radius: var(--radius-lg);
  border: 2px dashed var(--jobst-blue);
}

.nachtrag-intro {
  font-size: var(--text-sm);
  color: var(--jobst-grey);
}

.nachtrag-products {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.nachtrag-product {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 2px solid rgba(var(--jobst-blue-rgb), 0.35);
  background: #fff;
  color: var(--jobst-blue);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}

.nachtrag-product:hover {
  border-color: var(--jobst-blue);
}

.nachtrag-product.selected {
  background: var(--jobst-blue);
  border-color: var(--jobst-blue);
  color: #fff;
}

.nachtrag-submit {
  justify-content: center;
  background-color: var(--jobst-blue);
}

.nachtrag-submit:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.nachtrag-msg {
  font-size: var(--text-sm);
  color: var(--jobst-blue);
}

.nachtrag-msg--error {
  color: var(--jobst-orange);
}

.nachtrag-hint {
  font-size: var(--text-xs);
  color: var(--grey-light);
}

/* ============================================================
   #8 (07.07.2026) — Kontextabhängiger Kopf
   Ersetzt nach dem Laden einer Beratung den statischen
   Code-Eingabe-Hinweis (Header sitzt auf dunklem Blau-Verlauf).
   ============================================================ */
.beratung-context {
  font-size: var(--text-lg);
  color: var(--white);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.beratung-context-main {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: default;
  text-align: center;
}

.beratung-context-main--link {
  color: var(--jobst-orange);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.beratung-context-main--link:hover,
.beratung-context-main--link:focus-visible {
  color: var(--orange-light);
}

.beratung-context-tag {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.beratung-context-tag:hover,
.beratung-context-tag:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   #6 (07.07.2026) — Ausklappbarer Gesprächsverlauf
   NUR Konrats Antworten mit Zeitstempel (nie Kundentext).
   Native <details>/<summary> -- barrierefrei ohne eigenes JS-Toggle.
   ============================================================ */
.verlauf-details {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--grey-lighter);
}

.verlauf-summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--jobst-blue);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.verlauf-summary::-webkit-details-marker {
  display: none;
}

.verlauf-summary::before {
  content: '▸';
  display: inline-block;
  transition: transform var(--transition-fast);
  color: var(--jobst-orange);
}

.verlauf-details[open] .verlauf-summary::before {
  transform: rotate(90deg);
}

.verlauf-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 360px;
  overflow-y: auto;
}

.verlauf-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--grey-bg);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--jobst-blue);
}

.verlauf-time {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--grey-light);
}

.verlauf-text {
  font-size: var(--text-sm);
  color: var(--jobst-grey);
  line-height: var(--leading-snug);
}

/* ============================================================
   #7 (07.07.2026) — Klickbare Produktkarte + Detail-Modal
   ============================================================ */
.product-card--clickable {
  width: 100%;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
}

.product-card--clickable:hover,
.product-card--clickable:focus-visible {
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
  outline: 2px solid var(--jobst-orange);
  outline-offset: 2px;
}

.product-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 26, 61, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 100;
}

.product-modal {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.product-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--grey-bg);
  color: var(--jobst-blue);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-modal-close:hover,
.product-modal-close:focus-visible {
  background: var(--jobst-orange);
  color: var(--white);
}

.product-modal-image {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  display: block;
}

.product-modal-body {
  padding: var(--space-6);
}

.product-modal-title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--jobst-blue);
  margin-bottom: var(--space-2);
}

.product-modal-subtitle {
  font-size: var(--text-sm);
  color: var(--grey-light);
  margin-bottom: var(--space-4);
}

.product-modal-kkl {
  display: inline-block;
  background: rgba(var(--jobst-blue-rgb), 0.08);
  color: var(--jobst-blue);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.03em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.product-modal-section {
  margin-top: var(--space-4);
}

.product-modal-section h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--jobst-blue);
  margin-bottom: var(--space-2);
}

.product-modal-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
}

.product-modal-features li {
  font-size: var(--text-sm);
  color: var(--jobst-grey);
  padding-left: var(--space-4);
  position: relative;
}

.product-modal-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--jobst-orange);
  font-weight: var(--font-weight-bold);
}

.product-modal-colors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.product-modal-color-chip {
  background: var(--grey-bg);
  color: var(--jobst-grey);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--grey-lighter);
}

/* ---------------------------------------------------------------------------
   [hidden] heißt hidden — immer.

   Christophs Befund 12.07.2026: „Ein nicht zu entfernendes Popup wird hier
   angezeigt." Ursache: Das Produkt-Modal trug zwar brav das hidden-Attribut
   (das JS setzt es korrekt), aber

       .product-modal-overlay { display: flex; ... }

   hat die Browser-Regel `[hidden] { display: none }` ausgehebelt. Beide haben
   dieselbe Spezifität — und das Autoren-Stylesheet steht NACH dem des Browsers,
   also gewinnt `display: flex`. Ergebnis: ein leeres weißes Fenster mit einem
   Schließen-Knopf, der nichts bewirken kann, über einem dunklen Schleier
   (position:fixed, inset:0, z-index:100), der die ganze Seite blockiert.

   Es traf drei Elemente, nicht eins: product-modal-overlay, beratung-context
   und product-modal-kkl — alle drei haben eine eigene display-Regel. Deshalb
   hier der Riegel an der Wurzel statt drei Pflaster.

   !important ist hier bewusst: `hidden` ist eine semantische Zusage des HTML,
   keine Stilfrage. Kein Layout-Wunsch darf sie überstimmen.
   --------------------------------------------------------------------------- */
[hidden] {
  display: none !important;
}