/* ============================================================
   Layux Komponenten
   Gemeinsame UI-Bausteine: Marke, Buttons, Karten, Textakzente
   ============================================================ */

/* --- Marke / Logo --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-black);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.brand-logo {
  height: 44px;
  width: auto;
}

/* --- Navigation --- */
.nav-link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-text);
  background: var(--color-surface-soft);
}

.nav-link[aria-current="true"] {
  color: var(--color-primary);
}

/* --- Theme-Umschalter --- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast);
}

.theme-toggle:hover {
  color: var(--color-primary);
  border-color: var(--color-border-highlight);
  transform: translateY(-1px);
}

.theme-toggle .icon-moon {
  display: none;
}

[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

/* --- Burger-Menü (mobil) --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  cursor: pointer;
}

.nav-toggle-bar {
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-text);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }
}

/* --- Sektions-Label (Stil technischer Zeichnungen) --- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-primary);
}

/* --- Claim-Stempel (Schreibweise exakt wie im Markup, keine Versalien-Transformation) --- */
.claim {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
}

/* --- Eyebrow / Badge --- */
.eyebrow {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-highlight);
  background: var(--color-accent-tint);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

/* --- Textakzente --- */
.gradient-text {
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--color-text),
    var(--color-gradient-mid) 50%,
    var(--color-primary)
  );
  -webkit-background-clip: text;
  background-clip: text;
  /* Vertikales Padding vergrößert bei Inline-Elementen nur die gemalte
     Fläche (nicht den Zeilenabstand) – sonst schneidet die knappe
     Zeilenhöhe die Unterlängen (g, p) aus dem Verlauf ab. */
  padding-block: 0.2em;
}

.lead {
  max-width: 760px;
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  line-height: var(--line-height-relaxed);
}

/* --- Buttons --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

.button-primary {
  color: var(--color-button-text);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  box-shadow: var(--shadow-orange);
}

.button-secondary {
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
}

.button-secondary:hover {
  border-color: var(--color-border-highlight);
}

/* Zerstörerische Aktion (z. B. Zwei-Faktor deaktivieren) – dezent rot, nicht schreiend. */
.button-danger {
  color: var(--color-error);
  background: var(--color-surface-elevated);
  border-color: color-mix(in srgb, var(--color-error) 45%, var(--color-border));
}

.button-danger:hover {
  color: #fff;
  background: var(--color-error);
  border-color: var(--color-error);
}

.button-sm {
  min-height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

/* Button, der nur ein Icon trägt: quadratisch auf Höhe von .button-sm und
   .cell-input, damit er in Tabellenzeilen bündig sitzt. Was er tut, muss
   per aria-label/title dranstehen – die Fläche selbst sagt es nicht. */
.button-icon {
  min-height: 40px;
  width: 40px;
  padding: 0;
}

/* --- Karten --- */
.card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 86%, #fff 14%);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-highlight);
  box-shadow: var(--shadow-md);
}

.card h2,
.card h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-xl);
}

.card p {
  color: var(--color-text-secondary);
}

/* --- Leistungs-Karten --- */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-highlight);
  background: var(--color-accent-tint);
  color: var(--color-primary);
}

.card-tag {
  margin-bottom: var(--space-1);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Ablauf-Schritte --- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}

/* Toolpath-Linie hinter den Schrittnummern */
.steps::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 24px;
  right: 24px;
  border-top: 2px dashed var(--color-border-highlight);
}

.step {
  position: relative;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-black);
  box-shadow: 0 0 18px var(--color-primary-glow);
}

.step h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

.step p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--line-height-base);
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-left: 0;
  }

  .steps::before {
    top: 24px;
    bottom: 24px;
    left: 23px;
    right: auto;
    border-top: none;
    border-left: 2px dashed var(--color-border-highlight);
  }

  .step {
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: var(--space-4);
  }

  .step-number {
    margin-bottom: 0;
    grid-row: span 2;
  }
}

/* --- Produkt-Teaser --- */
.product-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.product-media {
  position: relative;
  margin: 0;
}

.product-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.product-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-button-text);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-badge.is-soft {
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  color: var(--color-accent-text);
  border: 1px solid var(--color-border-highlight);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
}

.product-price {
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
}

.product-price span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-regular);
}

/* Breites „mehr Produkte"-Banner unter den Teaser-Karten */
.product-more-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--color-border-highlight);
  border-radius: var(--radius-md);
  background: var(--color-accent-tint);
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.product-more-banner:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.product-more-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.product-more-text strong {
  display: block;
  color: var(--color-text);
  font-size: var(--text-base);
}

.product-more-banner .button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 720px) {
  .product-more-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.product-note {
  margin-top: var(--space-5);
  max-width: 720px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
}

/* --- Warenkorb --- */
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast);
}

.cart-link:hover {
  color: var(--color-primary);
  border-color: var(--color-border-highlight);
  transform: translateY(-1px);
}

.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-button-text);
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
}

/* Bestätigung „liegt im Warenkorb": als gerahmter, grün hinterlegter Callout,
   damit sie nicht übersehen wird (vorher unscheinbarer grün/gelber Text). */
.cart-added {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent);
  border-left: 4px solid var(--color-success);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-success) 13%, var(--color-surface));
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
}

.cart-added-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--color-success);
}

.cart-added-text {
  margin-right: auto;
}

.cart-added-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-success);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.cart-added-link svg {
  width: 16px;
  height: 16px;
}

.cart-added-link:hover {
  text-decoration: underline;
}

/* Kurze Aufmerksamkeits-Animation bei jedem Hinzufügen (js/produkt.js setzt
   .is-flash bei jedem Klick neu, damit sie auch bei Wiederholung „aufpoppt"). */
.cart-added.is-flash {
  animation: cart-added-in 0.35s ease-out;
}

@keyframes cart-added-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-added.is-flash {
    animation: none;
  }
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
  align-items: start;
}

.cart-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
}

.cart-item-image {
  width: 120px;
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cart-item-title {
  font-weight: var(--font-weight-bold);
}

.cart-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.cart-color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--swatch);
  border: 1px solid var(--color-border);
}

.cart-item-min {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.cart-item-controls {
  display: grid;
  justify-items: end;
  gap: var(--space-2);
}

.qty-stepper-sm .qty-button {
  width: 36px;
}

.qty-stepper-sm input {
  width: 52px;
  min-height: 36px;
}

.cart-item-total {
  font-weight: var(--font-weight-black);
}

.cart-remove {
  border: 0;
  padding: 0;
  background: none;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--text-xs);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.cart-remove:hover {
  color: var(--color-error);
}

.cart-empty {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding: var(--space-6);
}

.cart-summary h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.cart-totals {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.cart-totals > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.cart-totals dt {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.cart-totals dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.cart-free-hint {
  margin-bottom: var(--space-4);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.cart-checkout-button {
  width: 100%;
}

/* Gleicher Abstand wie zwischen den übrigen Blöcken der Zusammenfassung
   (Summen/Hinweis nutzen ebenfalls space-4) – sonst klebt der Hinweis am Button. */
.cart-summary .config-note {
  margin-top: var(--space-4);
}

@media (max-width: 900px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .cart-item {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .cart-item-image {
    width: 88px;
  }

  .cart-item-controls {
    grid-column: 1 / -1;
    grid-template-columns: auto auto auto;
    justify-content: space-between;
    align-items: center;
    justify-items: stretch;
  }
}

/* --- Kasse --- */
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
  align-items: start;
}

.checkout-heading {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
}

.form-row-zip {
  grid-template-columns: 130px minmax(0, 1fr);
}

/* Auslands-Weiche in der Kasse: erscheint unter dem PLZ-Feld, wenn die
   Eingabe nicht ins deutsche Muster passt. Bewusst kein Fehler-Rot – es ist
   kein Fehler, sondern ein Angebot (Bestellwunsch statt Direktkauf). */
.checkout-ausland {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-highlight);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.checkout-ausland p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.checkout-ausland-titel {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text) !important;
}

.checkout-ausland p + p {
  margin-top: var(--space-2);
}

.checkout-ausland-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.method-list {
  display: grid;
  gap: var(--space-2);
}

.method-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.method-option:hover {
  border-color: var(--color-border-highlight);
}

.method-option:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.method-option.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.method-option input {
  margin-top: 4px;
  accent-color: var(--color-primary);
}

.method-label {
  display: grid;
  gap: 2px;
  font-size: var(--text-sm);
}

.method-label > span {
  color: var(--color-text-muted);
}

.summary-items {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  list-style: none;
}

.summary-items li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.summary-items small {
  color: var(--color-text-muted);
}

.summary-items strong {
  color: var(--color-text);
  white-space: nowrap;
}

.cart-total-row {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.cart-total-row dd {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-black);
}

.checkout-success {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  max-width: 640px;
  margin-top: var(--space-6);
  padding: var(--space-6);
}

.checkout-success h2 {
  font-size: var(--text-2xl);
}

/* Die Zahlungsart-Blöcke (Vorkasse-Hinweis bzw. PayPal mit Bankdaten-Box und
   Button) sind je EIN Kind des Erfolgs-Grids – dessen 16-px-Lücke greift also
   nur um den Block herum, nicht in ihm. Da p/dl per Reset margin:0 haben,
   klebten Intro-Text, Bankdaten-Box und Button sonst mit 0 px aneinander.
   Denselben vertikalen Rhythmus deshalb auch im Block herstellen. */
.checkout-success [data-success-review],
.checkout-success [data-success-paypal] {
  display: grid;
  gap: var(--space-4);
}

.bank-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--color-border-highlight);
  border-radius: var(--radius-md);
  background: var(--color-accent-tint);
}

.bank-details dt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.bank-details dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
}

@media (max-width: 900px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  /* Zusammenfassung mobil über dem Formular */
  .checkout-summary {
    order: -1;
  }
}

/* --- Shop: Übersicht --- */
.shop-page {
  padding-top: var(--space-7);
}

.shop-title {
  font-size: var(--text-3xl);
  margin-block: var(--space-3);
}

.product-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.product-card-link:hover {
  color: inherit;
}

.product-card-link:hover .product-card-title {
  color: var(--color-primary);
}

.product-card-title {
  margin-bottom: var(--space-2);
  font-size: var(--text-xl);
  transition: color var(--transition-fast);
}

.product-colors-hint {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-highlight);
  border-radius: var(--radius-full);
  background: var(--color-accent-tint);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* --- Shop: Produktdetail --- */
.breadcrumb {
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}

.breadcrumb a {
  color: var(--color-text-secondary);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

/* Linke Spalte: Produktbild mit Beschreibung darunter */
.detail-left {
  display: grid;
  gap: var(--space-6);
}

.detail-gallery {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.detail-media {
  position: relative;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.detail-thumbs {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.detail-thumb {
  width: 84px;
  height: 63px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-soft);
  cursor: pointer;
  transition: border-color var(--transition-fast), opacity var(--transition-fast);
  opacity: 0.75;
}

.detail-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-thumb:hover {
  opacity: 1;
  border-color: var(--color-primary-soft);
}

.detail-thumb.is-active {
  opacity: 1;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.detail-thumb:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.detail-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.detail-title {
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
  margin-block: var(--space-2) var(--space-3);
}

.detail-price {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-black);
}

.detail-price span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
}

.detail-short {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Konfigurationsbox (Farbe, Text, Menge) */
.config-box {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 86%, #fff 14%);
}

.config-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.config-field legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-radius: var(--radius-md);
}

/* Reminder-Zustand: keine Farbe gewählt und „In den Warenkorb" geklickt */
.color-picker.is-invalid {
  outline: 2px solid var(--color-error);
  outline-offset: 4px;
}

.color-dot {
  position: relative;
  cursor: pointer;
}

.color-dot input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.color-dot .dot {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--swatch);
  border: 2px solid var(--color-border);
  transition: transform var(--transition-fast), border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.color-dot:hover .dot {
  transform: scale(1.12);
}

.color-dot input:checked + .dot {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.color-dot input:focus-visible + .dot {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.config-selected {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.char-counter {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.qty-stepper {
  display: flex;
  align-items: stretch;
  width: fit-content;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-elevated);
}

.qty-button {
  width: 44px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.qty-button:hover {
  background: var(--color-accent-tint);
  color: var(--color-primary);
}

.qty-stepper input {
  width: 64px;
  min-height: 44px;
  border: 0;
  border-inline: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.config-total {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

.config-total strong {
  color: var(--color-text);
  font-weight: var(--font-weight-black);
}

.config-note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
}


/* Beschreibung (unter dem Bild) + Fakten in voller Breite */
.detail-description h2,
.detail-facts h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.detail-description p {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.detail-facts {
  margin-top: var(--space-8);
}

.detail-facts dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4) var(--space-6);
}

.detail-facts .fact.is-wide {
  grid-column: 1 / -1;
}

/* Keine CSS-Versalien: der Browser würde „Maße" zu „MASSE" machen */
.detail-facts dt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

.detail-facts dd {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--line-height-base);
}

.facts-note {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--line-height-relaxed);
}

@media (max-width: 900px) {
  .product-detail {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  /* Mobil: Bild → Kaufbox → Beschreibung (Beschreibung nicht dazwischen) */
  .detail-left {
    display: contents;
  }

  .detail-gallery { order: 1; }
  .detail-info { order: 2; }
  .detail-description { order: 3; }

  .detail-thumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-1);
  }
}

/* --- Rechtsseiten (Impressum, Datenschutz, AGB, Widerruf) --- */

.legal-page {
  max-width: 78ch;
}

.legal-page h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
  margin-block: var(--space-2) var(--space-2);
}

.legal-intro {
  color: var(--color-text-muted);
  margin-block: 0 var(--space-6);
}

.legal-page h2 {
  font-size: var(--text-xl);
  margin-block: var(--space-7) var(--space-3);
}

.legal-page h3 {
  font-size: var(--text-base);
  margin-block: var(--space-5) var(--space-2);
}

.legal-page p,
.legal-page li {
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

.legal-page p {
  margin-block: 0 var(--space-3);
}

/* Aufgezählte Unterpunkte in den AGB (a), b), c) …) leicht eingerückt */
.legal-page .agb-item {
  padding-left: var(--space-4);
}

/* Speichern/Drucken-Leiste auf den Rechtsseiten (§ 312i BGB: speicherbar) */
.legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: 0 var(--space-6);
}

/* Druck-/PDF-Ausgabe der Rechtsseiten: nur der Rechtstext, gut lesbar.
   Erzwingt schwarze Schrift auf Weiß (sonst druckt das dunkle Theme hell). */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .legal-actions,
  .download-card {
    display: none !important;
  }

  body {
    background: #fff !important;
  }

  .legal-page,
  .legal-page h1,
  .legal-page h2,
  .legal-page h3,
  .legal-page p,
  .legal-page li,
  .legal-intro,
  .legal-stand {
    color: #000 !important;
    max-width: none;
  }

  .legal-page a:not(.button) {
    color: #000 !important;
    text-decoration: underline;
  }
}

.legal-page ul {
  margin-block: 0 var(--space-3);
  padding-left: 1.2em;
}

/* Textlinks im Fließtext; Buttons (z. B. Download-Karte) behalten ihre
   eigene Button-Textfarbe — sonst überschreibt die Link-Farbe sie. */
.legal-page a:not(.button) {
  color: var(--color-accent-text);
}

.legal-stand {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.legal-placeholder {
  border: 1px dashed var(--color-border-highlight);
  border-radius: var(--radius-md);
  background: var(--color-accent-tint);
  padding: var(--space-5) var(--space-6);
  color: var(--color-text-secondary);
}

/* Pflichthinweis zum Widerrufsrecht (Produktseite + Kasse) */
.legal-hint {
  margin-block: var(--space-5) 0;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-accent-tint);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}

/* Frei stehender Hinweis auf einer Rechtsseite (nicht im Formular-Grid wie in
   der Kasse): braucht Abstand nach unten zum folgenden Formular/den Buttons –
   sonst sitzt er zu dicht am nächsten Element. */
.legal-page > .legal-hint {
  margin-block-end: var(--space-6);
}

.legal-hint strong {
  color: var(--color-text);
}

.legal-hint a {
  color: var(--color-accent-text);
}

/* Download-Karte (z. B. Muster-Widerrufsformular als PDF) */
.download-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-5) var(--space-6);
  margin-block: var(--space-4) var(--space-3);
}

.download-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-text);
}

.download-icon svg {
  width: 24px;
  height: 24px;
}

.download-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 200px;
}

.download-meta strong {
  color: var(--color-text);
}

.download-meta span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Kundenstimmen --- */

.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}

/* Eingeklappt (nur mit JavaScript): 7 Kundenstimmen + Mehr-Kachel = 2 volle
   Reihen auf dem Desktop; Zahl muss zu visibleCollapsed in js/app.js passen */
.js .testimonials:not(.is-expanded) > .testimonial:nth-child(n + 8) {
  display: none;
}

/* Mehr-Kachel: gleiche Optik wie in der Farbmuster-Galerie, füllt den
   letzten Rasterplatz in Kartenhöhe */
.testimonials-more {
  display: grid;
}

.testimonials-more .testimonials-more-button {
  min-height: 100%;
}

.testimonials.is-expanded .testimonials-more-button svg {
  transform: rotate(45deg);
}

.testimonial {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonial::before {
  content: "„";
  font-size: 3rem;
  line-height: 0.4;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  display: block;
  height: 0.55em;
}

.testimonial-rating {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  margin: 0;
  letter-spacing: 2px;
  font-size: var(--text-sm);
}

.testimonial-rating .is-filled {
  color: var(--color-primary);
}

.testimonial-rating .is-empty {
  color: var(--color-border);
}

.testimonial blockquote {
  margin: 0;
  flex: 1;
}

.testimonial blockquote p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

.testimonial figcaption {
  display: grid;
  gap: 2px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.testimonial figcaption strong {
  color: var(--color-text);
}

.testimonial figcaption span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* --- Farbmuster-Galerie --- */
.color-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

/* Eingeklappt (nur mit JavaScript): erste 11 Farben + Mehr-Kachel = 2 Reihen Desktop */
.js .color-gallery:not(.is-expanded) > .swatch:nth-child(n + 12) {
  display: none;
}

.swatch {
  position: relative; /* Anker für die Klickfläche des Buttons (siehe unten) */
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 86%, #fff 14%);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.swatch:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-highlight);
  box-shadow: var(--shadow-md);
}

.swatch-button {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: zoom-in;
}

/* Der Button enthält nur noch den Text (die Farbfläche liegt daneben, weil
   Safari 13 Hintergründe im Button nicht malt). Damit ein Klick trotzdem
   überall auf der Kachel vergrößert, deckt der Button sie unsichtbar ab.
   Bewusst top/right/bottom/left statt der inset-Kurzform – die kennt
   Safari 13 ebenfalls nicht. */
.swatch-button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Fokusrahmen liegt auf der Abdeckung, damit er wie bisher die ganze Kachel
   umschließt und nicht nur den Text. */
.swatch-button:focus-visible {
  outline: none;
}

.swatch-button:focus-visible::after {
  outline: 2px solid var(--color-primary);
  outline-offset: -3px;
  border-radius: var(--radius-md);
}

.swatch-color {
  height: 72px;
  background: var(--swatch);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}

.swatch-name {
  padding: var(--space-3) var(--space-3) 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.swatch-meta {
  padding: 2px var(--space-3) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.swatch-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
}

/* Mehr/Weniger-Kachel im Raster */
.swatch-more {
  display: flex;
}

.swatch-more-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  min-height: 132px;
  padding: var(--space-3);
  border: 1px dashed var(--color-border-highlight);
  border-radius: var(--radius-md);
  background: var(--color-accent-tint);
  color: var(--color-accent-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.swatch-more-button:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.swatch-more-button svg {
  transition: transform var(--transition-base);
}

.color-gallery.is-expanded .swatch-more-button svg {
  transform: rotate(45deg);
}

.color-note {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Vergrößerte Farbansicht (Klick auf eine Kachel) */
.swatch-dialog {
  width: min(92vw, 420px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--color-border-highlight);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.swatch-dialog::backdrop {
  background: rgba(8, 10, 14, 0.6);
  backdrop-filter: blur(4px);
}

.swatch-dialog-color {
  height: min(48vh, 260px);
  background: var(--swatch);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}

.swatch-dialog-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.swatch-dialog-info h3 {
  margin: 0;
  font-size: var(--text-lg);
}

.swatch-dialog-info p {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.swatch-dialog-info code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
}

.swatch-dialog-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 999px);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.swatch-dialog-close:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* --- FAQ-Akkordeon --- */
.faq-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 86%, #fff 14%);
  transition: border-color var(--transition-fast);
}

.faq-item:hover,
.faq-item[open] {
  border-color: var(--color-border-highlight);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  list-style: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  color: var(--color-primary-soft);
}

[data-theme="light"] .faq-question:hover {
  color: var(--color-accent-text);
}

.faq-chevron {
  flex-shrink: 0;
  color: var(--color-primary);
  transition: transform var(--transition-base);
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 var(--space-5) var(--space-4);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Sanftes Aufklappen in Browsern mit ::details-content (progressive enhancement) */
.faq-item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--transition-base), content-visibility var(--transition-base) allow-discrete;
}

.faq-item[open]::details-content {
  block-size: auto;
}

/* --- Kontakt --- */
/* Infokarte streckt sich auf die Höhe des Formulars (kein align-items: start) */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: var(--space-7);
  margin-top: var(--space-6);
}

.contact-aside {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 86%, #fff 14%);
}

.contact-du {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-accent-tint);
  border: 1px solid var(--color-border-highlight);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.contact-pitch {
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.contact-facts {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.contact-facts li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.contact-facts svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* --- Formulare --- */
.contact-form {
  display: grid;
  gap: var(--space-4);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.form-field {
  display: grid;
  gap: var(--space-2);
  /* Nie strecken: Ein Nachbarfeld mit Fehlermeldung darf die Höhe und
     Position der Eingabefelder daneben nicht verändern (Konsistenz-Regel) */
  align-content: start;
}

.form-field label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.label-note {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: var(--line-height-base);
}

.form-field ::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.form-field input[type="file"] {
  width: 100%;
  min-height: 48px; /* gleiche Höhe wie die übrigen Eingabefelder */
  padding: var(--space-2);
  /* Auswählen-Knopf und Text vertikal mittig — align-content statt Flex,
     weil Browser die interne Struktur von Datei-Feldern selbst layouten */
  align-content: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.form-field input[type="file"].is-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 22%, transparent);
}

.file-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.file-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 4px 6px 4px 12px;
}

.file-list .file-remove {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
}

.file-list .file-remove:hover,
.file-list .file-remove:focus-visible {
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
}

.form-field input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* Pflicht-/fehlerhafte Felder: deutlich rot umrandet. Greift serverseitig
   (.is-invalid), nach JS-Validierung (.is-invalid) und live, sobald der
   Nutzer ein Pflichtfeld leer lässt oder ungültig füllt (:user-invalid –
   erst nach Interaktion, nie schon beim Laden der Seite). */
/* Element-qualifizierte .is-invalid-Selektoren, damit die rote Umrandung auch
   die Basis-Regel „.form-field input[type=…]" (Spezifität 0,2,1) überschreibt –
   z. B. bei serverseitig markierten Feldern (Widerrufsformular). */
.form-field input.is-invalid,
.form-field select.is-invalid,
.form-field textarea.is-invalid,
.form-field input:user-invalid,
.form-field select:user-invalid,
.form-field textarea:user-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 22%, transparent);
}

input[type="checkbox"].is-invalid,
input[type="checkbox"]:user-invalid {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
  border-radius: 3px;
}

.field-error {
  color: var(--color-error);
  font-size: var(--text-sm);
}

/* Widerruf-Formular liegt auf einer .legal-page: dort setzt „.legal-page p"
   die Textfarbe/Abstände mit höherer Spezifität – für die Fehlermeldungen die
   Fehlerfarbe zurückholen und den doppelten Absatz-Abstand vermeiden. */
.legal-page .field-error {
  color: var(--color-error);
  margin-block: 0;
}

.widerruf-error-summary {
  font-weight: var(--font-weight-semibold);
  margin-block: 0 var(--space-4);
}

.widerruf-review {
  margin-block: 0 var(--space-6);
}

.form-consent .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  cursor: pointer;
}

.form-consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Pflichtstern direkt am Kästchen (statt am Ende des langen Zustimmungstexts,
   wo er wie eine Fußnote wirkt). Checkbox + Stern bleiben als Einheit oben. */
.form-consent .consent-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  flex-shrink: 0;
}

.form-consent .consent-required {
  margin-top: 1px;
  line-height: 1;
  color: var(--color-text); /* wie die übrigen Pflichtsterne der Felder */
}

.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.form-status {
  color: var(--color-success);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.form-status.is-error {
  color: var(--color-error);
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* --- Über Layux --- */
.about {
  margin-top: var(--space-5);
}

.about-text {
  display: grid;
  gap: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  line-height: var(--line-height-relaxed);
}

.about-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --- Scroll-Reveal (greift nur mit JavaScript, siehe js/app.js) --- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal-group]:not(.is-visible) > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
  }

  .js [data-reveal-group] > * {
    transition: opacity var(--transition-slow), transform var(--transition-slow);
  }

  .js [data-reveal-group].is-visible > :nth-child(2) { transition-delay: 90ms; }
  .js [data-reveal-group].is-visible > :nth-child(3) { transition-delay: 180ms; }
  .js [data-reveal-group].is-visible > :nth-child(4) { transition-delay: 270ms; }
  .js [data-reveal-group].is-visible > :nth-child(5) { transition-delay: 360ms; }
}

/* --- Footer --- */
.footer-brand .brand-logo {
  height: 50px;
}

.footer-claim {
  margin-top: var(--space-4);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
}

.footer-note {
  margin-top: var(--space-3);
  max-width: 400px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
}

.footer-nav h3 {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.footer-nav a {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.footer-nav a:hover {
  color: var(--color-primary);
}