/* ZPC Shop – Farbpalette (Teal #4db6ad + Blau, Orange, Pfirsich) */
:root, [data-bs-theme="light"] {
  --zpc-bg: #f5f9f8;
  --zpc-surface: #ffffff;
  --zpc-accent: #4db6ad;
  --zpc-accent-hover: #2d9489;
  --zpc-accent-light: #e0f2f1;
  --zpc-blue: #5c7ec0;
  --zpc-blue-light: #e3eaf7;
  --zpc-orange: #f1b34c;
  --zpc-orange-light: #fef5e6;
  --zpc-peach: #f2a176;
  --zpc-peach-light: #fdf0ea;
  --zpc-border: #dde8e6;
  --zpc-text: #323232;
  --zpc-muted: #5a6a68;
  --zpc-nav-bg: #2d2d2d;
  --zpc-nav-accent: #4db6ad;
}

[data-bs-theme="dark"] {
  --zpc-bg: #1a1a1a;
  --zpc-surface: #252525;
  --zpc-accent: #4db6ad;
  --zpc-accent-hover: #74cdc4;
  --zpc-accent-light: #1e3533;
  --zpc-blue: #5c7ec0;
  --zpc-blue-light: #1e2640;
  --zpc-orange: #f1b34c;
  --zpc-orange-light: #2d2818;
  --zpc-peach: #f2a176;
  --zpc-peach-light: #2d2218;
  --zpc-border: #3a3a3a;
  --zpc-text: #e8e8e8;
  --zpc-muted: #a0a0a0;
  --zpc-nav-bg: #2d2d2d;
  --zpc-nav-accent: #4db6ad;
}

/* Icons in ZPC-Farbe (Teal) – Navbar & Footer */
.text-zpc-accent { color: var(--zpc-accent) !important; }
/* Inline-Code (z. B. Tabellen-/Dateinamen) in ZPC-Farbe */
code { color: var(--zpc-accent); background: var(--zpc-accent-light); padding: 0.15em 0.35em; border-radius: 0; }
.navbar .nav-link svg,
.navbar .nav-link .navbar-icon,
.navbar .nav-link svg.navbar-icon {
  color: var(--zpc-accent) !important;
  fill: var(--zpc-accent) !important;
}
.footer-product .footer-link svg,
.footer-product .footer-link .footer-icon,
.footer-product .footer-link svg.footer-icon {
  color: var(--zpc-accent) !important;
  fill: var(--zpc-accent) !important;
}

* { box-sizing: border-box; }

body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
  background: var(--zpc-bg);
  color: var(--zpc-text);
  -webkit-font-smoothing: antialiased;
}

/* Dark Mode: Bootstrap-Komponenten anpassen */
[data-bs-theme="dark"] .card, [data-bs-theme="dark"] .card-header {
  background: var(--zpc-surface);
  border-color: var(--zpc-border);
  color: var(--zpc-text);
}
[data-bs-theme="dark"] .card-header { background: #2a2a2a !important; }
[data-bs-theme="dark"] .table { background: var(--zpc-surface); color: var(--zpc-text); }
[data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] .table thead.table-light th {
  background: #2a2a2a;
  border-color: var(--zpc-border);
  color: var(--zpc-text);
}
[data-bs-theme="dark"] .table-bordered th, [data-bs-theme="dark"] .table-bordered td { border-color: var(--zpc-border); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select {
  background: #2a2a2a;
  border-color: var(--zpc-border);
  color: var(--zpc-text);
}
[data-bs-theme="dark"] .accordion-button { background: #2a2a2a; border-color: var(--zpc-border); color: var(--zpc-text); }
[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background: var(--zpc-surface); color: var(--zpc-accent); }
[data-bs-theme="dark"] .accordion-body { background: var(--zpc-surface); }
[data-bs-theme="dark"] .accordion-item { border-color: var(--zpc-border); }
[data-bs-theme="dark"] .alert-info { background: #1a2a3a; border-color: #2a4a6a; color: #a8d4ff; }
[data-bs-theme="dark"] .alert-secondary { background: #2a2a2a; border-color: var(--zpc-border); color: var(--zpc-text); }
[data-bs-theme="dark"] .text-muted { color: var(--zpc-muted) !important; }
[data-bs-theme="dark"] details .card-header { background: #2a2a2a !important; }
[data-bs-theme="dark"] .text-warning { color: #e6c04a !important; }

/* Durchgängig eckig */
.card, .card-header, .btn, .navbar, .dropdown-menu, input.form-control, .form-select, .form-check-input,
.table, .accordion-button, .accordion-item, .accordion-collapse, details, summary,
input[type="text"], input[type="url"], input[type="checkbox"], textarea, select,
.btn-danger, .btn-outline-danger, .alert, .table-responsive {
  border-radius: 0 !important;
}

.card {
  border: 1px solid var(--zpc-border);
  background: var(--zpc-surface);
  box-shadow: none;
}
.card-body { padding: 1rem 1.25rem; }
.card-header {
  background: var(--zpc-accent-light);
  border: 1px solid var(--zpc-border);
  color: var(--zpc-text);
}
[data-bs-theme="dark"] .card-header { background: var(--zpc-accent-light) !important; border-color: var(--zpc-border); }

.navbar {
  box-shadow: none;
  border-bottom: none;
  padding: 0.5rem 0;
}
.navbar-dark, .navbar.bg-dark {
  background: var(--zpc-nav-bg) !important;
}
[data-bs-theme="light"] .navbar.bg-dark {
  background: #e9ecef !important;
  border-bottom: 1px solid var(--zpc-border);
}
[data-bs-theme="light"] .navbar.bg-dark .navbar-brand,
[data-bs-theme="light"] .navbar.bg-dark .zpc-backend-brand-text {
  color: #212529 !important;
}
[data-bs-theme="light"] .navbar-dark .nav-link {
  color: var(--zpc-text) !important;
}
[data-bs-theme="light"] .navbar-dark .nav-link:hover {
  color: var(--zpc-accent) !important;
  background: transparent !important;
}
.navbar-brand { font-weight: 600; letter-spacing: 0.02em; }
.navbar-dark .nav-link {
  color: rgba(255,255,255,0.9) !important;
  font-weight: 500;
}
.navbar-dark .nav-link:hover {
  color: #fff !important;
  background: transparent !important;
}
.navbar-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* Navbar-Toggler (Hamburger) und Dropdown-Pfeile in ZPC-Farbe */
.navbar-toggler {
  border-color: var(--zpc-accent) !important;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%234db6ad' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
/* Dropdown-Pfeil vor dem Text, in ZPC-Farbe */
.navbar .nav-link.dropdown-toggle::after {
  display: none !important;
}
.navbar .nav-link.dropdown-toggle::before {
  content: '\25BC';
  font-size: 0.5em;
  vertical-align: middle;
  margin-right: 0.35em;
  color: var(--zpc-accent) !important;
}
.navbar .nav-link.dropdown-toggle.show::before,
.navbar .nav-link.dropdown-toggle:hover::before {
  color: var(--zpc-accent) !important;
}

.dropdown-menu .dropdown-item svg,
.dropdown-menu .navbar-icon,
.dropdown-menu .zpc-dropdown-icon {
  display: inline-block !important;
  vertical-align: middle;
  flex-shrink: 0;
  color: var(--zpc-accent) !important;
  fill: var(--zpc-accent) !important;
}
.dropdown-menu .dropdown-item:hover svg,
.dropdown-menu .dropdown-item:hover .navbar-icon,
.dropdown-menu .dropdown-item:hover .zpc-dropdown-icon {
  color: var(--zpc-accent) !important;
  fill: var(--zpc-accent) !important;
}
/* Weniger Abstand zwischen Kontakt, Konto, Warenkorb */
.navbar-nav-icons { gap: 0.15rem !important; }

footer a.opacity-75:hover { opacity: 1 !important; }

.btn { border-width: 2px; font-weight: 600; text-transform: none; }
.btn-primary {
  background: var(--zpc-accent);
  border-color: var(--zpc-accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--zpc-accent-hover);
  border-color: var(--zpc-accent-hover);
  color: #fff;
}
.btn-outline-primary {
  border-color: var(--zpc-accent);
  color: var(--zpc-accent);
}
.btn-outline-primary:hover {
  background: var(--zpc-accent);
  border-color: var(--zpc-accent);
  color: #fff;
}
.btn-secondary {
  background: var(--zpc-blue);
  border-color: var(--zpc-blue);
  color: #fff;
}
.btn-secondary:hover {
  background: #3b5fa7;
  border-color: #3b5fa7;
  color: #fff;
}
.btn-outline-secondary {
  border-color: var(--zpc-blue);
  color: var(--zpc-blue);
}
.btn-outline-secondary:hover {
  background: var(--zpc-blue-light);
  border-color: var(--zpc-blue);
  color: var(--zpc-blue);
}
.btn-danger, .btn-outline-danger { border-radius: 0 !important; }
.btn-danger {
  background-color: var(--bs-danger, #dc3545);
  border-color: var(--bs-danger, #dc3545);
  color: #fff;
}
.btn-danger:hover {
  background-color: #bb2d3b;
  border-color: #b02a37;
  color: #fff;
}

/* Admin Konfigurationen: Buttons in Paletton-Farben, gleiche Größe */
.zpc-config-buttons { min-width: 0; }
.zpc-config-buttons .col-6 { display: flex; align-items: stretch; }
.zpc-config-buttons .col-6 form { flex: 1; display: flex; min-width: 0; }
.zpc-config-buttons .col-6 form .btn { flex: 1; min-height: 2.25rem; }
.zpc-config-buttons .col-6 > a.btn,
.zpc-config-buttons .col-6 > span.btn { min-height: 2.25rem; width: 100%; }
.btn-zpc-secondary {
  background: var(--zpc-blue);
  border-color: var(--zpc-blue);
  color: #fff;
}
.btn-zpc-secondary:hover {
  background: #3b5fa7;
  border-color: #3b5fa7;
  color: #fff;
}
.btn-zpc-orange {
  background: var(--zpc-orange);
  border-color: var(--zpc-orange);
  color: #1a1a1a;
}
.btn-zpc-orange:hover {
  background: #d9a03d;
  border-color: #d9a03d;
  color: #1a1a1a;
}

.form-control, .form-select {
  border: 1px solid var(--zpc-border);
  background: var(--zpc-surface);
}
.form-control:focus {
  border-color: var(--zpc-accent);
  box-shadow: 0 0 0 2px rgba(77,182,173,0.3);
}
.form-check-input {
  border-radius: 0 !important;
  border: 2px solid var(--zpc-border);
}

.table { background: var(--zpc-surface); }
.table-light, .table thead.table-light th {
  background: var(--zpc-accent-light);
  border-color: var(--zpc-border);
  font-weight: 600;
  color: var(--zpc-text);
}
.table-bordered th, .table-bordered td { border-color: var(--zpc-border); }

.accordion-button {
  background: var(--zpc-accent-light);
  border: 1px solid var(--zpc-border);
  font-weight: 600;
  color: var(--zpc-text);
}
.accordion-button:not(.collapsed) {
  background: var(--zpc-surface);
  border-bottom-color: transparent;
  color: var(--zpc-accent);
}
.accordion-button:focus {
  box-shadow: 0 0 0 2px rgba(77,182,173,0.3);
  border-color: var(--zpc-accent);
}
.accordion-item { border: 1px solid var(--zpc-border); margin-bottom: -1px; }
.accordion-body { background: var(--zpc-surface); }
.accordion-body .table td,
.accordion-body .table th { word-wrap: break-word; white-space: normal; }
.accordion-body .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.alert-info {
  background: var(--zpc-blue-light);
  border: 1px solid var(--zpc-blue);
  color: #1a2d5c;
}
[data-bs-theme="dark"] .alert-info {
  background: var(--zpc-blue-light);
  border-color: var(--zpc-blue);
  color: #a1b2de;
}
.alert-secondary {
  background: var(--zpc-accent-light);
  border: 1px solid var(--zpc-border);
  color: var(--zpc-text);
}
[data-bs-theme="dark"] .alert-secondary { background: var(--zpc-accent-light); }
.text-warning { color: #af812f !important; }

.footer, footer.bg-dark {
  background: var(--zpc-nav-bg) !important;
  border-top: none;
  color: rgba(255,255,255,0.85);
}
[data-bs-theme="light"] .footer-product,
[data-bs-theme="light"] footer.footer-product {
  background-color: #e9ecef !important;
  border-top: 1px solid var(--zpc-border);
  color: var(--zpc-text);
}
[data-bs-theme="light"] .footer-product .text-body-secondary {
  color: var(--zpc-muted) !important;
}
[data-bs-theme="light"] .footer-product .footer-heading {
  color: var(--zpc-text);
}
[data-bs-theme="light"] .footer-product .footer-link {
  color: var(--zpc-muted);
}
[data-bs-theme="light"] .footer-product .footer-link:hover {
  color: var(--zpc-accent);
}

/* Einheitliche Containerbreite wie Inhalt (Navbar, Main, Footer) */
.navbar .container,
.footer-product .container,
main.container {
  max-width: 1140px;
}
h1.h4 { font-weight: 600; color: var(--zpc-text); border-left: 4px solid var(--zpc-accent); padding-left: 0.75rem; }
.zpc-heading-bar { font-weight: 600; color: var(--zpc-text); border-left: 4px solid var(--zpc-accent); padding-left: 0.75rem; }
.zpc-card-accent { border: 1px solid var(--zpc-border); border-left: 4px solid var(--zpc-accent); }
/* Quill-Editor in Konfigurator: Box skaliert mit Editor, Textfeld vertikal skalierbar */
.zpc-quill-editor {
  max-width: 100%;
  overflow: visible;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.zpc-quill-editor .ql-toolbar {
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
}
.zpc-quill-editor .ql-container {
  flex: 1 1 auto;
  min-height: 220px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: auto;
  resize: vertical;
}
.zpc-quill-editor .ql-editor {
  overflow-y: auto;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 200px;
}
/* Quill-Toolbar-Icons (B, I, U, Link, Listen) in ZPC-Farbe */
.ql-toolbar.ql-snow .ql-stroke {
  stroke: var(--zpc-accent) !important;
}
.ql-toolbar.ql-snow .ql-fill {
  fill: var(--zpc-accent) !important;
}
.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke {
  stroke: var(--zpc-accent-hover) !important;
}
.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow button.ql-active .ql-fill {
  fill: var(--zpc-accent-hover) !important;
}
h2.h5, h2.h6 { font-weight: 600; color: var(--zpc-text); }
h2.h6 { border-left: 4px solid var(--zpc-accent); padding-left: 0.5rem; }
.text-muted { color: var(--zpc-muted) !important; }

a { color: var(--zpc-accent); }
a:hover { color: var(--zpc-accent-hover); }

.product-thumb img { object-fit: contain; vertical-align: middle; }

/* Startseite: System-Karten (Bild links, Inhalt rechts, ganze Karte = Link), farbiger Rand wie Referenzen */
.zpc-config-system-card {
  color: inherit;
  border: 1px solid var(--zpc-border);
  border-radius: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.zpc-config-system-card .row,
.zpc-config-system-card .card-body,
.zpc-config-system-card [class*="col-"],
.zpc-config-system-card img {
  border-radius: 0;
}
.zpc-config-system-card:hover {
  border-color: var(--zpc-accent);
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.08);
}
[data-bs-theme="dark"] .zpc-config-system-card:hover {
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.3);
}
.zpc-config-system-card.zpc-config-card-teal { border-left: 4px solid var(--zpc-accent); }
.zpc-config-system-card.zpc-config-card-blue { border-left: 4px solid var(--zpc-blue); }
.zpc-config-system-card.zpc-config-card-orange { border-left: 4px solid var(--zpc-orange); }
.zpc-config-system-card.zpc-config-card-peach { border-left: 4px solid var(--zpc-peach); }
.zpc-config-system-card .zpc-config-cta {
  color: var(--zpc-accent);
}
.zpc-config-system-card:hover .zpc-config-cta {
  color: var(--zpc-accent-hover);
  text-decoration: underline;
}

/* Galerie gebauter PCs – horizontal scrollbar, Flat-Design */
.zpc-gallery-section { margin-top: 2rem; }

/* Referenzen: Überschrift + Text im Container, nur der Bildblock bricht aus */
.zpc-referenzen-wrap {
  width: 100%;
  box-sizing: border-box;
}
.zpc-referenzen-breakout {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}
.zpc-referenzen-wrap .zpc-referenzen-outer {
  overflow: hidden;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 0 2%;
}
.zpc-referenzen-wrap .zpc-gallery-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  position: relative;
  cursor: grab;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.zpc-referenzen-wrap .zpc-gallery-viewport:active { cursor: grabbing; }

.zpc-gallery.zpc-gallery-referenzen {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  padding: 0.75rem 0 1.5rem;
  min-height: 520px;
  box-sizing: border-box;
  will-change: transform;
}

/* Drei Slots mit Abstand, damit keine Überlappung */
.zpc-referenzen-wrap .zpc-gallery-page {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--zpc-ref-page-width, 33.333%);
  width: var(--zpc-ref-page-width, 33.333%);
  min-width: 0;
  box-sizing: border-box;
  padding: 0 0.5rem;
}

/* Seitliche Karten: kleiner skaliert, kein Überlappen mit Mitte */
.zpc-gallery-referenzen .zpc-gallery-page .zpc-gallery-card {
  transform: scale(0.72);
  transform-origin: center center;
}
/* Mittlere Karte: größer, aber nicht überlappend */
.zpc-gallery-referenzen .zpc-gallery-page.zpc-ref-center .zpc-gallery-card {
  transform: scale(1.18);
}

/* Referenzen-Cards: Bild oben bündig, farbiger Balken gleiche Breite, kein Rand dazwischen */
.zpc-gallery-referenzen .zpc-gallery-card {
  display: flex;
  flex-direction: column;
  border: none;
  box-shadow: none;
  overflow: hidden;
  padding: 0;
  background: transparent;
  opacity: 1;
  transition: transform 0.35s ease, opacity 0.3s ease;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.zpc-gallery-referenzen .zpc-gallery-card .zpc-gallery-card-link {
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.zpc-gallery-referenzen .zpc-gallery-card-img-wrap {
  width: 100%;
  margin: 0;
  line-height: 0;
}
.zpc-gallery-referenzen .zpc-gallery-card-bar {
  width: 100%;
  margin: 0;
  flex-shrink: 0;
}
.zpc-gallery-referenzen .zpc-gallery-card.card {
  padding: 0 !important;
}
.zpc-gallery-referenzen .zpc-gallery-card--center {
  max-width: 100%;
}
/* Mittlere Karte: breiter für stärkere Hervorhebung (wird per JS/oben überschrieben) */
.zpc-gallery-referenzen .zpc-gallery-page.zpc-ref-center .zpc-gallery-card {
  margin: 0 auto;
}
.zpc-gallery-referenzen .zpc-gallery-card.zpc-card-visible {
  opacity: 1;
}
/* Referenzen: hoher Block, Karte inkl. Caption sichtbar */
.zpc-referenzen-wrap .zpc-gallery.zpc-gallery-referenzen {
  min-height: 520px;
  align-items: flex-end;
}
.zpc-gallery-referenzen .zpc-gallery-page.zpc-ref-center .zpc-gallery-card {
  max-width: 580px;
}
.zpc-gallery-referenzen .zpc-gallery-page.zpc-ref-center .zpc-gallery-card .zpc-gallery-card-img {
  min-height: 240px;
}
.zpc-gallery-referenzen .zpc-gallery-card {
  overflow: visible;
}
.zpc-gallery-referenzen .zpc-gallery-card a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.zpc-gallery-referenzen .zpc-gallery-card a:hover {
  color: inherit;
}
.zpc-gallery-referenzen .zpc-gallery-card-link {
  cursor: pointer;
}
.zpc-gallery-referenzen .zpc-gallery-card-img-wrap {
  flex-shrink: 0;
}
.zpc-gallery-referenzen .zpc-gallery-card-img {
  aspect-ratio: 4/3;
  min-height: 200px;
  max-height: 280px;
  width: 100%;
  background: var(--zpc-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zpc-gallery-referenzen .zpc-gallery-card-thumbs {
  margin-top: 0.25rem;
}
.zpc-gallery-referenzen .zpc-gallery-card-thumbs .zpc-ref-card-thumb,
.zpc-gallery-referenzen .zpc-gallery-card-thumbs .btn {
  flex-shrink: 0;
}
.zpc-gallery-referenzen .zpc-gallery-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: bottom;
}
.zpc-gallery-referenzen .zpc-gallery-card-bar {
  height: 14px;
  flex-shrink: 0;
}
.zpc-gallery-referenzen .zpc-gallery-card-caption {
  flex-shrink: 0;
  max-height: 5em;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.zpc-gallery-referenzen .zpc-gallery-card-desc {
  font-size: 0.8em;
  opacity: 0.9;
}
.zpc-gallery-referenzen .zpc-card-teal .zpc-gallery-card-bar { background: var(--zpc-accent); }

/* Referenz-Detailseite: breite Card, Bild links + Mini-Galerie, Text rechts */
.zpc-referenz-main-img-wrap { min-height: 0; width: 100%; }
.zpc-referenz-main-img-wrap .zpc-referenz-main-img-btn { width: 100%; }
.zpc-referenz-main-img-wrap .zpc-referenz-main-img { width: 100%; height: auto; display: block; max-height: 42vh; object-fit: contain; }
.zpc-referenz-main-img-btn { cursor: pointer; }
.zpc-referenz-main-img-btn:hover { opacity: 0.95; }
.zpc-referenz-detail-card .zpc-referenz-main-img { max-width: 100%; max-height: 42vh; object-fit: contain; }
.zpc-referenz-thumb { flex-shrink: 0; }
.zpc-referenz-thumb img { object-fit: cover; display: block; }
.zpc-referenz-thumb-active { border-color: var(--zpc-accent) !important; border-width: 2px !important; }
.zpc-referenz-description { line-height: 1.6; }
/* Lightbox Referenzen */
.zpc-ref-lightbox-img { max-height: 85vh; width: auto; object-fit: contain; }
#zpc-ref-lightbox .modal-content { background: rgba(0,0,0,0.9); }
#zpc-ref-lightbox .modal-body { min-height: 50vh; }
.zpc-gallery-referenzen .zpc-card-blue .zpc-gallery-card-bar { background: var(--zpc-blue); }
.zpc-gallery-referenzen .zpc-card-orange .zpc-gallery-card-bar { background: var(--zpc-orange); }
.zpc-gallery-referenzen .zpc-card-peach .zpc-gallery-card-bar { background: var(--zpc-peach); }

/* Allgemeine Galerie (falls woanders genutzt) */
.zpc-gallery {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25rem 0 1rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.zpc-gallery::-webkit-scrollbar { height: 8px; }
.zpc-gallery::-webkit-scrollbar-track { background: var(--zpc-bg); }
.zpc-gallery::-webkit-scrollbar-thumb { background: var(--zpc-border); }
.zpc-gallery::-webkit-scrollbar-thumb:hover { background: var(--zpc-muted); }

.zpc-gallery-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--zpc-border);
  border-top: 3px solid var(--zpc-accent);
  background: var(--zpc-surface);
  box-shadow: none;
  overflow: hidden;
}
.zpc-gallery-card .card-body { flex: 1; display: flex; flex-direction: column; }
.zpc-gallery-card-img {
  aspect-ratio: 4/3;
  background: var(--zpc-bg);
  border-bottom: 1px solid var(--zpc-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zpc-gallery-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zpc-gallery-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zpc-border);
  color: var(--zpc-muted);
  font-size: 0.875rem;
}
.zpc-gallery-components li {
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--zpc-border);
  color: var(--zpc-text);
}
.zpc-gallery-components li:last-child { border-bottom: none; }

/* Theme-Toggle rechts unten: kein Kasten, Textfarbe wie Theme, Schalter in ZPC-Farbe */
.zpc-theme-toggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1050;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.zpc-theme-toggle label { margin: 0; font-size: 0.875rem; white-space: nowrap; }
.zpc-theme-toggle label,
.zpc-theme-toggle .form-check-label,
.zpc-theme-toggle #zpc-theme-label {
  color: var(--zpc-text);
}
.zpc-theme-toggle .form-check-input { cursor: pointer; }
.zpc-theme-toggle .form-check-input:checked {
  background-color: var(--zpc-accent);
  border-color: var(--zpc-accent);
}
.zpc-theme-toggle .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(77, 182, 173, 0.25);
}

/* Backend: Kategorien-Badges eckig, Paletton-Farben */
.zpc-category-badge {
  border-radius: 0;
  border: none;
  padding: 0.35em 0.6em;
}
.zpc-category-badge.zpc-cat-teal { background-color: var(--zpc-accent) !important; color: #fff !important; }
.zpc-category-badge.zpc-cat-blue { background-color: var(--zpc-blue) !important; color: #fff !important; }
.zpc-category-badge.zpc-cat-orange { background-color: var(--zpc-orange) !important; color: #1a1a1a !important; }
.zpc-category-badge.zpc-cat-peach { background-color: var(--zpc-peach) !important; color: #1a1a1a !important; }
.zpc-category-badge .btn-link.text-white:hover { color: rgba(255,255,255,0.85) !important; }
.zpc-category-badge.zpc-cat-orange .btn-link,
.zpc-category-badge.zpc-cat-peach .btn-link { color: #1a1a1a !important; }
.zpc-category-badge.zpc-cat-orange .btn-link:hover,
.zpc-category-badge.zpc-cat-peach .btn-link:hover { color: #000 !important; }

/* Admin-Layout: Flex damit Footer unten bleibt, Abstand vor Footer */
.zpc-admin-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 0;
}
.zpc-admin-body main {
  flex-grow: 1;
  padding-bottom: 2.5rem;
}
.zpc-backend-footer-wrap {
  display: block !important;
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
  min-height: 140px;
  position: relative;
  z-index: 10;
  padding-top: 1rem;
}
.zpc-backend-footer-wrap .footer-product {
  border-top: 2px solid rgba(255,255,255,0.12);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-right: 6rem;
  min-height: 120px;
  display: block !important;
}
[data-bs-theme="light"] .zpc-backend-footer-wrap .footer-product {
  border-top-color: var(--zpc-border);
}

/* Footer – Bootstrap 5.3 Product-Beispiel (Dark); Light Mode siehe [data-bs-theme="light"] .footer-product oben */
.footer-product {
  flex-shrink: 0;
  background-color: var(--zpc-nav-bg, #212529);
  color: rgba(255, 255, 255, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-product .text-body-secondary {
  color: rgba(255, 255, 255, 0.6) !important;
}
.footer-product .footer-heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.5rem;
}
.footer-product .text-small {
  font-size: 0.875rem;
}
.footer-product .footer-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.footer-product .footer-link:hover {
  color: rgba(255, 255, 255, 0.9);
}
.footer-product .footer-logo {
  opacity: 0.85;
  object-fit: contain;
  height: 32px;
  width: auto;
  display: block;
}
.footer-product .row.align-items-start {
  align-items: flex-end;
}
.footer-product .footer-brand-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.footer-product .footer-brand-col .footer-logo {
  margin-left: 0;
  margin-right: auto;
}
.footer-product .footer-copyright {
  display: block;
  align-self: flex-start;
}
.footer-product .row {
  --bs-gutter-y: 1.5rem;
}
.footer-product .list-unstyled li {
  margin-bottom: 0.25rem;
}
.footer-product .footer-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--zpc-accent) !important;
  fill: var(--zpc-accent) !important;
}

/* Admin: Stift/Link-Icons in ZPC-Farbe */
.zpc-admin-icon,
.zpc-admin-icon svg {
  color: var(--zpc-accent) !important;
  fill: var(--zpc-accent) !important;
}
a:hover .zpc-admin-icon { opacity: 0.9; }

/* Admin Konfigurator: Browser-Icon vor/nach Geizhals-URL ausblenden */
.zpc-geizhals-url-link::before,
.zpc-geizhals-url-link::after {
  display: none !important;
  content: none !important;
}
.zpc-geizhals-url-link svg:first-child {
  display: none !important;
}

/* Konfigurator: Geizhals-Import Log-Panel (rechts ausfahrbar, Rahmen + Titel-Strich + X in ZPC-Farbe) */
.zpc-geizhals-log-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  background: var(--zpc-surface);
  border-left: 4px solid var(--zpc-accent);
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.zpc-geizhals-log-panel.zpc-geizhals-panel-open {
  transform: translateX(0);
}
.zpc-geizhals-log-panel-header {
  flex-shrink: 0;
  background: var(--zpc-surface);
  border-bottom-color: var(--zpc-accent) !important;
}
.zpc-geizhals-log-panel-title {
  border-left: 4px solid var(--zpc-accent);
  padding-left: 0.75rem;
  color: var(--zpc-text);
}
.zpc-geizhals-log-panel-close {
  background: var(--zpc-accent) !important;
  border-color: var(--zpc-accent) !important;
  color: var(--zpc-bg) !important;
}
.zpc-geizhals-log-panel-close:hover {
  background: var(--zpc-accent-hover, var(--zpc-accent)) !important;
  border-color: var(--zpc-accent-hover, var(--zpc-accent)) !important;
  color: var(--zpc-bg) !important;
}
.zpc-geizhals-log-iframe {
  flex: 1;
  width: 100%;
  border: none;
  min-height: 0;
  background: var(--zpc-bg);
}

/* Konfigurator (build.php): Gehäuse-Bild groß links, Beschreibung rechts */
.zpc-case-img-large {
  max-height: 380px;
  width: auto;
  object-fit: contain;
}
.zpc-config-description {
  font-size: 0.95rem;
}
.zpc-config-description p:last-child { margin-bottom: 0; }

/* Konfigurator: Komponenten-Karten (Kleinformat, ~4 pro Reihe), Auswahl mit grünem Haken, eckig */
.zpc-component-card {
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  border-radius: 0 !important;
}
.zpc-component-card:hover {
  border-color: var(--zpc-accent);
}
.zpc-component-card.zpc-component-card-selected {
  border-color: var(--zpc-accent);
  box-shadow: 0 0 0 2px rgba(77, 182, 173, 0.25);
}
/* build.php: Bild- und Karten-Container eckig */
.zpc-build-img-eckig,
.zpc-configurator-side-by-side .zpc-case-image-wrap,
.zpc-configurator-side-by-side .zpc-component-card-img-wrap {
  border-radius: 0 !important;
}
.zpc-configurator-side-by-side .zpc-component-card-img-wrap {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px;
  min-height: 64px;
  padding-top: 6px;
  box-sizing: border-box;
  overflow: hidden;
}
.zpc-configurator-side-by-side .zpc-component-card-img-wrap .zpc-component-card-img {
  max-width: 56px !important;
  max-height: 56px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}
/* Linkes Vorschaubild pro Kategorie: fest klein, Großansicht nur im Modal */
.zpc-configurator-side-by-side .zpc-selected-product-display .zpc-preview-img {
  max-height: 200px !important;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: pointer;
}
.zpc-component-card .zpc-component-card-body {
  padding-right: 2.5rem;
}
.zpc-component-card-check {
  padding: 3px;
  z-index: 5;
  background: var(--bs-body-bg) !important;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--bs-border-color);
}
[data-bs-theme="dark"] .zpc-component-card-check {
  background: var(--bs-dark) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}
.zpc-component-card-check .zpc-component-card-check-icon,
.zpc-component-card-check svg {
  width: 32px;
  height: 32px;
  color: var(--bs-success) !important;
  fill: var(--bs-success) !important;
}
.zpc-component-card-name { line-height: 1.3; word-break: break-word; overflow-wrap: break-word; }
.zpc-component-card-price {
  width: 100%;
  text-align: right;
}
.zpc-component-specs .zpc-specs-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; }
.zpc-component-specs.zpc-specs-gpu .zpc-specs-list { flex-direction: column; gap: 0.25rem; }
.zpc-component-specs .zpc-spec-item { white-space: normal; word-break: break-word; }
.zpc-product-thumb-active { border: 2px solid var(--zpc-accent) !important; box-sizing: border-box; }

/* Spezifikationen unter der ausgewählten Komponente (Taktrate, SSD-Chip, etc.) */
.zpc-component-specs {
  line-height: 1.5;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--zpc-border);
}
.zpc-component-specs:empty { display: none !important; }

/* Konfigurator (build.php): Bild vor Komponente, größeres Dropdown mit Icon */
.zpc-component-img-size {
  max-width: 140px;
  max-height: 110px;
  object-fit: contain;
}
.zpc-component-category-label {
  font-size: 1rem;
}
.zpc-component-select-lg {
  font-size: 1rem;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  min-height: 2.75rem;
}
.zpc-select-wrap {
  max-width: 100%;
}
.zpc-select-wrap .zpc-select-chevron {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.7;
}
.zpc-select-wrap .zpc-chevron,
.zpc-select-wrap .zpc-chevron svg {
  display: block;
  color: inherit;
  fill: currentColor;
}

/* Anmelden/Konto: Layout */
.zpc-login-register-row .col-md-6:last-child { max-width: 380px; }
@media (min-width: 768px) {
  .zpc-login-register-row .col-md-6:last-child { flex: 0 0 auto; width: auto; }
}
.zpc-register-more-trigger {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--zpc-accent);
  background: var(--zpc-bg);
  border: 1px dashed var(--zpc-border);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s, border-color 0.2s;
}
.zpc-register-more-trigger:hover { background: var(--zpc-surface); border-color: var(--zpc-accent); color: var(--zpc-accent); }
.zpc-register-more-trigger[aria-expanded="true"] { border-style: solid; margin-bottom: 0.5rem; }

/* Anmelden/Konto: Passwort-Kriterien Liste (Live-Status) */
.zpc-pw-criteria-list { list-style: none; padding-left: 0; margin-bottom: 0; font-size: 0.875rem; }
.zpc-pw-criteria-list li { padding: 0.15rem 0; padding-left: 1.25rem; position: relative; }
.zpc-pw-criteria-list li::before { content: ''; position: absolute; left: 0; top: 0.4em; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--zpc-muted); }
.zpc-pw-criteria-list li.zpc-pw-ok::before { background: var(--zpc-accent); }
.zpc-pw-criteria-list li.zpc-pw-fail::before { background: var(--bs-danger, #dc3545); }
.zpc-reg-pass-confirm-box.zpc-pw-ok .form-text { color: var(--zpc-accent); }
.zpc-reg-pass-confirm-box.zpc-pw-fail .form-text { color: var(--bs-danger, #dc3545); }