/* ==========================================================================
   HandyHer UI – gemeinsame Basis für alle Kundenseiten
   Wird über views/partials/header.ejs auf jeder Seite geladen (nach den
   Seiten-Styles), damit Schrift, Farben, Kopf- und Fußbereich überall gleich
   sind. Neue Seiten sollen die .hh-* Komponenten nutzen statt eigener Styles.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --hh-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --hh-blue: #1a73e8;
  --hh-blue-600: #1663cc;
  --hh-blue-700: #1554b0;
  --hh-blue-50: #eef4fe;
  --hh-blue-100: #dce8fd;

  --hh-ink: #0f172a;
  --hh-text: #334155;
  --hh-muted: #64748b;
  --hh-line: #e5e9f0;
  --hh-line-strong: #d5dbe5;
  --hh-bg: #f6f7f9;
  --hh-surface: #ffffff;

  --hh-green: #15803d;
  --hh-green-bg: #ecfdf3;
  --hh-amber: #b45309;
  --hh-amber-bg: #fff7ed;
  --hh-red: #b91c1c;
  --hh-red-bg: #fef2f2;

  --hh-radius-sm: 8px;
  --hh-radius: 12px;
  --hh-radius-lg: 16px;
  --hh-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .06);
  --hh-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .14);
  --hh-shadow-lg: 0 24px 48px -24px rgba(15, 23, 42, .28);
  --hh-ring: 0 0 0 3px rgba(26, 115, 232, .28);

  --hh-header-h: 64px;
  --hh-max: 1200px;

  /* alte Variablen aus tokens.css/header.css auf die neue Palette ziehen */
  --accent: var(--hh-blue);
  --color-primary: var(--hh-blue);
  --color-primary-strong: var(--hh-blue-700);
}

body.darkmode {
  --hh-ink: #f1f5f9;
  --hh-text: #cbd5e1;
  --hh-muted: #94a3b8;
  --hh-line: #2a2d33;
  --hh-line-strong: #3a3e46;
  --hh-bg: #121316;
  --hh-surface: #1b1c20;
  --hh-blue-50: rgba(26, 115, 232, .14);
  --hh-blue-100: rgba(26, 115, 232, .22);
  --hh-green-bg: rgba(34, 197, 94, .12);
  --hh-amber-bg: rgba(245, 158, 11, .12);
  --hh-red-bg: rgba(239, 68, 68, .12);
  --hh-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
}

/* ---------- Schrift überall gleich (Icon-Fonts ausgenommen) ---------- */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body,
body :where(h1, h2, h3, h4, h5, h6, p, a, span, div, li, label, button, input, select, textarea, small, strong, b, em, td, th, dt, dd, summary, legend, figcaption, blockquote) {
  font-family: var(--hh-font) !important;
}
body :is(.fa, .fas, .fa-solid, i.fa-solid) { font-family: "Font Awesome 6 Free" !important; }
body :is(.far, .fa-regular) { font-family: "Font Awesome 6 Free" !important; }
body :is(.fab, .fa-brands) { font-family: "Font Awesome 6 Brands" !important; }
body .material-symbols-outlined { font-family: "Material Symbols Outlined" !important; }
body .material-icons { font-family: "Material Icons" !important; }
body :is(code, pre, kbd, samp) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }

body { font-feature-settings: "cv11", "ss01"; }
body :where(h1, h2, h3) { letter-spacing: -0.02em; }
::selection { background: rgba(26, 115, 232, .18); }
:focus-visible { outline: none; box-shadow: var(--hh-ring); border-radius: 6px; }

/* ---------- Kopfbereich ---------- */
.site-header {
  background: rgba(255, 255, 255, .88) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hh-line) !important;
  color: var(--hh-ink);
}
body.darkmode .site-header {
  background: rgba(18, 19, 22, .86) !important;
  border-bottom-color: var(--hh-line) !important;
}
.site-header .header-container {
  max-width: var(--hh-max);
  min-height: var(--hh-header-h);
  padding: 0 24px;
}
.site-header .header-left { gap: 28px; }
.site-header .site-logo,
.site-header .site-logo a {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em;
  line-height: 1;
}
.site-header .site-logo a { color: var(--hh-blue); }
body.darkmode .site-header .site-logo a { color: #fff; }

.site-nav ul { gap: 4px; margin: 0; padding: 0; }
.site-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--hh-text) !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: transparent !important;
  transition: background .15s, color .15s;
}
.site-nav a:hover { background: var(--hh-blue-50) !important; color: var(--hh-blue) !important; }
.site-nav a.active { background: var(--hh-blue-50) !important; color: var(--hh-blue) !important; font-weight: 600; }
body.darkmode .site-nav a { color: var(--hh-text) !important; }
body.darkmode .site-nav a:hover, body.darkmode .site-nav a.active { color: #8ab4ff !important; }

.site-header .header-icons { gap: 6px; }
.site-header .icon-link:not(.toggle-switch):not(.is-hidden) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--hh-text) !important;
  transition: background .15s, color .15s;
}
.site-header .icon-link:not(.toggle-switch):hover { background: var(--hh-blue-50); color: var(--hh-blue) !important; }
body.darkmode .site-header .icon-link:not(.toggle-switch) { color: var(--hh-text) !important; }
.site-header .icon-link .icon { width: 22px; height: 22px; }
.site-header .badge {
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.site-header .icon-link .icon-tooltip { bottom: -34px; font-size: 12px; font-weight: 500; }

/* Darkmode-Schalter: ruhig statt blau/grün */
.site-header .toggle-switch { margin-left: 8px; width: 40px; height: 24px; flex: 0 0 auto; }
.site-header .toggle-switch .toggle-label { background-color: var(--hh-line-strong); }
.site-header .toggle-switch .toggle-input:checked + .toggle-label { background-color: var(--hh-blue); }
.site-header .toggle-switch .toggle-label::before { box-shadow: 0 1px 3px rgba(15, 23, 42, .25); }

/* Handy: eine Zeile – Logo | Verkaufen/Kaufen | Korb + Menü */
@media (max-width: 768px) {
  :root { --hh-header-h: 56px; }
  .site-header .header-container {
    flex-direction: row !important;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px !important;
    padding: 0 12px !important;
    min-height: var(--hh-header-h);
  }
  .site-header .header-left {
    width: auto !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    min-width: 0;
  }
  .site-header .site-logo,
  .site-header .site-logo a { font-size: 20px !important; }
  .site-header .header-right { width: auto !important; justify-content: flex-end !important; }
  .site-header .mobile-nav-tabs { gap: 2px !important; }
  .site-header .nav-tab {
    opacity: 1 !important;
    color: var(--hh-text) !important;
    font-size: 14px !important;
    font-weight: 600;
    padding: 7px 11px !important;
    border-radius: 999px;
  }
  .site-header .nav-tab::after { display: none; }
  .site-header .nav-tab.active { background: var(--hh-blue-50); color: var(--hh-blue) !important; }
  .site-header .header-icons { gap: 0 !important; }
  .site-header .header-icons .icon-link.login-icon,
  .site-header .header-icons .icon-link.desktop-only { display: none !important; }
  .site-header .header-icons .icon-link { padding: 0 !important; }
}
@media (max-width: 360px) {
  .site-header .site-logo, .site-header .site-logo a { font-size: 18px !important; }
  .site-header .nav-tab { padding: 6px 8px !important; font-size: 13px !important; }
}

/* Wartungs-/Testhinweis: schmal und ruhig */
.maintenance-banner {
  background: #fffbeb !important;
  color: #92400e !important;
  border-bottom: 1px solid #fde68a;
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.maintenance-banner__icon { display: none; }
.maintenance-banner__info-btn {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 13px !important;
}
body.darkmode .maintenance-banner { background: #2a2110 !important; color: #fcd34d !important; border-bottom-color: #4a3b13; }
body.darkmode .maintenance-banner__info-btn { color: #fcd34d !important; }

/* ---------- Gemeinsame Bausteine ---------- */
.hh-container { max-width: var(--hh-max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .hh-container { padding: 0 16px; } }

.hh-page-head { padding: 32px 0 20px; }
.hh-page-head__eyebrow { font-size: 13px; font-weight: 600; color: var(--hh-blue); margin: 0 0 6px; }
.hh-page-head__title { font-size: clamp(26px, 3vw, 34px); font-weight: 750; color: var(--hh-ink); margin: 0; line-height: 1.15; }
.hh-page-head__sub { font-size: 16px; color: var(--hh-muted); margin: 8px 0 0; line-height: 1.5; }

.hh-card {
  background: var(--hh-surface);
  border: 1px solid var(--hh-line);
  border-radius: var(--hh-radius-lg);
  box-shadow: var(--hh-shadow-sm);
}

.hh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.hh-btn:active { transform: translateY(1px); }
.hh-btn--primary { background: var(--hh-blue); color: #fff; }
.hh-btn--primary:hover { background: var(--hh-blue-600); }
.hh-btn--secondary { background: var(--hh-surface); color: var(--hh-ink); border-color: var(--hh-line-strong); }
.hh-btn--secondary:hover { border-color: var(--hh-blue); color: var(--hh-blue); }

.hh-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  background: var(--hh-blue-50); color: var(--hh-blue);
}
.hh-badge--green { background: var(--hh-green-bg); color: var(--hh-green); }
.hh-badge--amber { background: var(--hh-amber-bg); color: var(--hh-amber); }
.hh-badge--red { background: var(--hh-red-bg); color: var(--hh-red); }
.hh-badge--gray { background: #f1f5f9; color: var(--hh-muted); }

.hh-num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Kontobereich (Konto, Bestellungen, Verkäufe, Tickets, Adressen, …)
   Ruhige Seitenköpfe statt blauer Verlaufs-Banner, schlichte Seitenleiste.
   ========================================================================== */
body.account-body { background: var(--hh-bg) !important; }

.account-hero-banner {
  background: transparent !important;
  color: var(--hh-ink) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 4px 0 8px !important;
  margin-bottom: 8px !important;
  overflow: visible !important;
}
.account-hero-banner::before,
.account-hero-banner::after { display: none !important; }
.account-hero-banner .hero-banner-content {
  align-items: flex-start !important;
  text-align: left !important;
  gap: 6px !important;
}
.account-hero-banner .hero-banner-title {
  color: var(--hh-ink) !important;
  font-size: clamp(26px, 3vw, 32px) !important;
  font-weight: 750 !important;
  letter-spacing: -0.025em !important;
}
.account-hero-banner .hero-banner-subtitle {
  color: var(--hh-muted) !important;
  opacity: 1 !important;
  font-size: 15px !important;
}
.account-hero-banner .hero-banner-greeting {
  color: var(--hh-blue) !important;
  opacity: 1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.account-hero-banner .hero-stat-inline { color: var(--hh-muted) !important; opacity: 1 !important; margin-top: 2px !important; }
.account-hero-banner .hero-stat-pill { background: var(--hh-blue-50) !important; color: var(--hh-blue) !important; font-size: 13px !important; }

/* Kennzahlen im Überblick als ruhige Karten */
.account-hero-banner .hero-stats-row {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px !important;
  margin-top: 14px !important;
}
.account-hero-banner .hero-stat-item {
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-line) !important;
  border-radius: var(--hh-radius) !important;
  box-shadow: var(--hh-shadow-sm) !important;
  backdrop-filter: none !important;
  padding: 14px 16px !important;
  align-items: flex-start !important;
  text-align: left !important;
}
.account-hero-banner .hero-stat-value { color: var(--hh-ink) !important; font-size: 22px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; }
.account-hero-banner .hero-stat-label { color: var(--hh-muted) !important; font-size: 13px !important; opacity: 1 !important; text-transform: none !important; letter-spacing: 0 !important; }
@media (max-width: 640px) {
  .account-hero-banner .hero-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Seitenleiste */
.account-sidebar {
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-line) !important;
  border-radius: var(--hh-radius-lg) !important;
  box-shadow: var(--hh-shadow-sm) !important;
}
.account-sidebar__label,
.account-sidebar__hint { display: none !important; }
.account-sidebar__intro { padding-bottom: 12px !important; margin-bottom: 8px !important; border-bottom: 1px solid var(--hh-line) !important; }
.account-sidebar__title { color: var(--hh-ink) !important; font-size: 18px !important; font-weight: 700 !important; }
.account-sidebar__nav { gap: 2px !important; }
.account-sidebar__link {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--hh-text) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}
.account-sidebar__link .material-symbols-outlined { color: var(--hh-muted) !important; font-size: 20px !important; }
.account-sidebar__link:hover { background: #f1f5f9 !important; color: var(--hh-ink) !important; }
.account-sidebar__link--active,
.account-sidebar__link--active:hover { background: var(--hh-blue-50) !important; color: var(--hh-blue) !important; font-weight: 600 !important; }
.account-sidebar__link--active .material-symbols-outlined { color: var(--hh-blue) !important; }
.account-sidebar__link--logout { margin-top: 8px; }
.account-sidebar__link--logout:hover { background: var(--hh-red-bg) !important; color: var(--hh-red) !important; }
body.darkmode .account-sidebar__link:hover { background: rgba(255, 255, 255, .05) !important; }

/* Auf-/Zuklapp-Pfeile: zu = Pfeil nach unten, offen = nach oben */
.account-order .account-order-toggle .material-symbols-outlined { transform: rotate(180deg) !important; }
.account-order.is-collapsed .account-order-toggle .material-symbols-outlined { transform: rotate(0deg) !important; }
.sale-card .toggle-icon { transform: rotate(-90deg) !important; }
.sale-card.collapsed .toggle-icon { transform: rotate(90deg) !important; }

/* Status-Schilder: normale Schreibweise statt GROSSBUCHSTABEN */
.account-status-badge,
.activity-status,
.status-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
/* Kleine Feld-Überschriften: ruhig statt gesperrt und groß */
.account-order__total-label,
.account-order__info-label,
.sale-summary-heading,
.sale-summary-offer-title,
.sale-offer-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--hh-muted) !important;
}

/* Bestellkarten: weiß und klar statt Verlauf */
.account-order {
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-line) !important;
  box-shadow: var(--hh-shadow-sm) !important;
  border-radius: var(--hh-radius-lg) !important;
}
.account-order::before, .account-order::after { display: none !important; }
.account-order__total {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: right !important;
  align-items: flex-end !important;
}
.account-order__total-value,
.account-order__total-amount,
.account-order__total strong { color: var(--hh-ink) !important; font-size: 20px !important; font-weight: 700 !important; }

/* Abschnitts-Überschriften im Konto */
.account-section-header h2 { font-size: 22px !important; font-weight: 700 !important; color: var(--hh-ink) !important; }
.account-section-header p { color: var(--hh-muted) !important; }
.account-alert-card {
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-line) !important;
  box-shadow: var(--hh-shadow-sm) !important;
}
.account-alert-card--highlight { border-left: 3px solid var(--hh-blue) !important; }

/* Verkäufe: Hinweis „Nächster Schritt“ und Angebot */
.sale-summary-alert {
  background: var(--hh-amber-bg) !important;
  border: 1px solid #fed7aa !important;
  border-radius: var(--hh-radius) !important;
  box-shadow: none !important;
}
.sale-summary-alert strong {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #9a3412 !important;
}
.sale-summary-alert-note { color: #9a3412 !important; opacity: .9; }
body.darkmode .sale-summary-alert { border-color: rgba(245, 158, 11, .3) !important; }
body.darkmode .sale-summary-alert strong, body.darkmode .sale-summary-alert-note { color: #fcd34d !important; }
.sale-card {
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-line) !important;
  box-shadow: var(--hh-shadow-sm) !important;
  border-radius: var(--hh-radius-lg) !important;
}
.sale-offer {
  background: var(--hh-blue-50) !important;
  color: var(--hh-ink) !important;
  box-shadow: none !important;
  border-radius: var(--hh-radius) !important;
}
.sale-offer .sale-offer-label { color: var(--hh-blue) !important; }
.sale-offer :is(.sale-offer-value, .sale-offer-price, strong) { color: var(--hh-ink) !important; }
@media (max-width: 640px) {
  .sale-offer { width: 100% !important; max-width: none !important; align-items: flex-start !important; text-align: left !important; }
}
.account-wrapper.account-shell__content { gap: 28px !important; }
@media (max-width: 1023px) { .account-wrapper.account-shell__content { gap: 16px !important; } }
.sale-summary-offer {
  background: var(--hh-blue-50) !important;
  color: var(--hh-ink) !important;
  box-shadow: none !important;
  border-radius: var(--hh-radius) !important;
}
.sale-summary-offer :is(.sale-summary-offer-value, .sale-summary-offer-price, strong, p) { color: var(--hh-ink) !important; }
.sale-summary-offer .sale-summary-offer-title { color: var(--hh-blue) !important; }
@media (max-width: 640px) {
  .sale-summary-offer { width: 100% !important; max-width: none !important; }
}
body .sale-card .sale-summary-offer .sale-summary-offer-amount { color: var(--hh-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
body .sale-card .sale-summary-offer .sale-summary-offer-title { color: var(--hh-blue) !important; opacity: 1 !important; }

/* Konto-Karten (Adressen, Auszahlung, Sicherheit, Tickets): einheitlich linksbündig */
.account-panel {
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-line) !important;
  border-radius: var(--hh-radius-lg) !important;
  box-shadow: var(--hh-shadow-sm) !important;
}
.account-panel__title {
  text-align: left !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--hh-ink) !important;
  letter-spacing: -0.015em !important;
  margin-top: 10px !important;
}
.account-panel__header { text-align: left !important; align-items: flex-start !important; }
.account-pill {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}
.account-highlight-card {
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-line) !important;
  box-shadow: none !important;
  text-align: left !important;
}
.account-highlight-card h3 { text-align: left !important; font-size: 16px !important; color: var(--hh-ink) !important; }
.account-meta-tile {
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-line) !important;
  box-shadow: var(--hh-shadow-sm) !important;
  border-radius: var(--hh-radius) !important;
  min-height: 0 !important;
  overflow: hidden;
}
.account-meta-tile > * { overflow-wrap: anywhere; }
.account-meta-tile--stat { padding: 12px 14px !important; }
.account-section-header .account-panel__title { margin-top: 6px !important; }

/* ==========================================================================
   Verkaufsablauf (/sellform, /sell/cart, /sell/confirm)
   Schritt-Köpfe als ruhige Überschriften statt blauer Banner mit Kreis-„Knöpfen“
   ========================================================================== */
:is(.color-hero, .storage-hero, .function-hero, .condition-hero, .battery-hero, .final-hero, .cart-hero, .sellconfirm-hero) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--hh-ink) !important;
  padding: 8px 4px 4px !important;
  min-height: 0 !important;
  overflow: visible !important;
}
:is(.color-hero, .storage-hero, .function-hero, .condition-hero, .battery-hero, .final-hero, .cart-hero, .sellconfirm-hero)::before,
:is(.color-hero, .storage-hero, .function-hero, .condition-hero, .battery-hero, .final-hero, .cart-hero, .sellconfirm-hero)::after { display: none !important; }
/* rein dekorative Kreis-Abzeichen (keine Funktion) ausblenden */
:is(.color-hero-media, .condition-hero-media, .storage-hero-media, .function-hero-media, .battery-hero-media, .final-hero-media, .cart-hero-media) { display: none !important; }
:is(.color-hero-text, .storage-hero-text, .function-hero-text, .condition-hero-text, .battery-hero-text, .final-hero-text, .cart-hero-content, .hero-content) {
  text-align: left !important;
  align-items: flex-start !important;
  max-width: none !important;
}
:is(.color-hero-title, .storage-hero-title, .function-hero-title, .condition-hero-title, .battery-hero-title, .final-hero-title, #sellconfirmHeroTitle) {
  color: var(--hh-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  text-align: left !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 750 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  margin: 2px 0 0 !important;
}
:is(.color-hero-device, .storage-hero-device, .function-hero-device, .condition-hero-device, .battery-hero-device, .final-hero-device, .cart-hero-badge) {
  color: var(--hh-blue) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
:is(.model-selection-label, .color-selection-label, .storage-selection-label, .condition-selection-label) {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--hh-muted) !important;
}
/* Preis im letzten Schritt */
.final-hero .price-chip {
  background: var(--hh-blue-50) !important;
  color: var(--hh-blue) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.final-hero .price-chip-value { color: var(--hh-blue) !important; -webkit-text-fill-color: currentColor !important; }

/* Verkaufskorb-Kopf: Auszahlung als klare Zahl */
.cart-hero-title-line, .cart-hero-topline { justify-content: flex-start !important; text-align: left !important; }
.cart-hero :is(.cart-hero-heading, .cart-hero-title-line) * { color: var(--hh-ink) !important; text-shadow: none !important; }
.cart-hero .cart-hero-heading { font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important; }

/* Verkauf bestätigen: Gesamtangebot als Karte statt Kreis */
.sellconfirm-hero .hero-highlight {
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-line) !important;
  color: var(--hh-text) !important;
  box-shadow: none !important;
}
.sellconfirm-hero .hero-highlight svg { fill: var(--hh-blue) !important; }
.sellconfirm-hero .hero-media .battery-hero-badge {
  width: auto !important; height: auto !important; min-width: 200px;
  border-radius: var(--hh-radius-lg) !important;
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-line) !important;
  box-shadow: var(--hh-shadow-sm) !important;
  color: var(--hh-ink) !important;
  padding: 14px 18px !important;
  align-items: flex-start !important;
}
.sellconfirm-hero .hero-media .battery-hero-badge::before,
.sellconfirm-hero .hero-media .battery-hero-badge::after { display: none !important; }
.sellconfirm-hero .hero-media .offer-label { color: var(--hh-muted) !important; text-transform: none !important; letter-spacing: 0 !important; }

/* Fortschrittsbalken unter dem Kopf: dünn */
#progressContainer { height: 3px !important; background: var(--hh-line) !important; }
#progressContainer .progress-bar, #progressBar { height: 3px !important; }
.cart-hero .price-chip-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 500 !important; color: var(--hh-muted) !important; }
.cart-hero .price-chip, .cart-hero .price-chip-value {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  color: var(--hh-ink) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important;
}
.cart-hero .price-chip-value { font-size: 28px !important; font-weight: 750 !important; }
.cart-hero .cart-hero-title-line { gap: 12px !important; align-items: baseline !important; }
:is(.color-hero-device, .storage-hero-device, .function-hero-device, .condition-hero-device, .battery-hero-device, .final-hero-device, .cart-hero-badge) {
  align-self: flex-start !important; justify-content: flex-start !important; margin-left: 0 !important;
}
/* Modell-/Farb-/Speicherkarten im Verkaufsformular: ohne blauen Streifen, klare Auswahl */
.model-card {
  border: 1px solid var(--hh-line) !important;
  border-top: 1px solid var(--hh-line) !important;
  box-shadow: var(--hh-shadow-sm) !important;
  background: var(--hh-surface) !important;
  transition: border-color .15s, box-shadow .15s, transform .15s !important;
}
.model-card::before, .model-card::after { display: none !important; }
.model-card:hover { border-color: var(--hh-blue) !important; box-shadow: var(--hh-shadow) !important; transform: translateY(-2px); }
.model-card.selected, .model-card.active { border-color: var(--hh-blue) !important; box-shadow: var(--hh-ring) !important; }

/* Zurück = zweitrangig, Weiter = Hauptaktion (beide haben historisch .back-button) */
.form-step .back-button {
  height: 46px !important; padding: 0 26px !important; border-radius: 999px !important;
  font-size: 15px !important; font-weight: 600 !important; box-shadow: none !important;
  transform: none !important; transition: background .15s, border-color .15s, color .15s !important;
}
.form-step .back-button:not([onclick^="goToStep('"]) { background: var(--hh-blue) !important; color: #fff !important; border: 1px solid var(--hh-blue) !important; }
.form-step .back-button:not([onclick^="goToStep('"]):hover:not(:disabled) { background: var(--hh-blue-600) !important; }
.form-step .back-button:not([onclick^="goToStep('"]):disabled { background: #e2e8f0 !important; border-color: #e2e8f0 !important; color: #94a3b8 !important; cursor: not-allowed; }
.form-step .back-button[onclick^="goToStep('"] { background: var(--hh-surface) !important; color: var(--hh-ink) !important; border: 1px solid var(--hh-line-strong) !important; }
.form-step .back-button[onclick^="goToStep('"]:hover { border-color: var(--hh-ink) !important; }
body.darkmode .form-step .back-button:not([onclick^="goToStep('"]):disabled { background: #1e293b !important; border-color: #1e293b !important; color: #64748b !important; }

/* Auswahlkästchen in den Schritten: gleiches Kartenbild wie die Modellkarten */
:is(.model-box, .color-box, .storage-box, .function-box, .condition-box) {
  border: 1px solid var(--hh-line) !important;
  border-top: 1px solid var(--hh-line) !important;
  background: var(--hh-surface) !important;
  box-shadow: var(--hh-shadow-sm) !important;
}
:is(.model-box, .color-box, .storage-box, .function-box, .condition-box)::before { display: none !important; }
:is(.model-box, .color-box, .storage-box, .function-box, .condition-box):hover { border-color: var(--hh-blue) !important; }
:is(.model-box, .color-box, .storage-box, .function-box, .condition-box).selected { border-color: var(--hh-blue) !important; box-shadow: var(--hh-ring) !important; background: var(--hh-blue-50) !important; }

/* Verkaufskorb: einheitliche Knöpfe und ruhige Zusammenfassung */
.cart-content-heading { text-align: left !important; font-size: 20px !important; font-weight: 700 !important; color: var(--hh-ink) !important; border: 0 !important; padding-bottom: 0 !important; }
.cart-content-heading::after { display: none !important; }
.cart-content-actions { gap: 10px !important; }
.cart-content-actions :is(.cart-back-button, .cart-add-button, .cart-next-button) {
  height: 44px !important; padding: 0 20px !important; border-radius: 999px !important;
  font-size: 15px !important; font-weight: 600 !important; box-shadow: none !important; transform: none !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important; text-decoration: none !important;
}
.cart-content-actions .cart-back-button { background: transparent !important; color: var(--hh-text) !important; border: 1px solid transparent !important; }
.cart-content-actions .cart-back-button:hover { color: var(--hh-ink) !important; background: #eef1f5 !important; }
.cart-content-actions .cart-add-button { background: var(--hh-surface) !important; color: var(--hh-ink) !important; border: 1px solid var(--hh-line-strong) !important; }
.cart-content-actions .cart-add-button:hover { border-color: var(--hh-blue) !important; color: var(--hh-blue) !important; }
.cart-content-actions .cart-next-button { background: var(--hh-blue) !important; color: #fff !important; border: 1px solid var(--hh-blue) !important; }
.cart-content-actions .cart-next-button:hover { background: var(--hh-blue-600) !important; }
.summary#summaryContainer {
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-line) !important;
  box-shadow: var(--hh-shadow-sm) !important;
}
.summary#summaryContainer :is(.summary-kicker, .label) { text-transform: none !important; letter-spacing: 0 !important; color: var(--hh-muted) !important; font-weight: 500 !important; }
.summary#summaryContainer .summary-highlight { background: var(--hh-bg) !important; border: 1px solid var(--hh-line) !important; box-shadow: none !important; }
.summary#summaryContainer .summary-amount { color: var(--hh-ink) !important; -webkit-text-fill-color: currentColor !important; }
.summary#summaryContainer .summary-icon { display: none !important; }
.summary#summaryContainer .summary-action { background: var(--hh-blue) !important; border-radius: 999px !important; box-shadow: none !important; }
.cart-item .offer-label, .cart-list .offer-label { text-transform: none !important; letter-spacing: 0 !important; color: var(--hh-muted) !important; font-weight: 500 !important; }

/* Handy: Verkaufskorb-Pille im Kopf nur als kompakte Zahl */
@media (max-width: 768px) {
  .site-header .sell-cart-pill:not(.is-hidden) {
    padding: 0 !important;
    width: 34px; height: 34px;
    justify-content: center;
    border-radius: 999px !important;
    gap: 0 !important;
    position: relative;
  }
  .site-header .sell-cart-pill .sell-cart-pill__label,
  .site-header .sell-cart-pill .sell-cart-pill__sep { display: none !important; }
  .site-header .sell-cart-pill .sell-cart-pill__count { font-size: 13px; font-weight: 700; }
  .site-header .sell-cart-pill::after {
    content: "Verkaufskorb"; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }

  .cart-hero .cart-hero-title-line { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; }
  .cart-layout { display: flex !important; flex-direction: column !important; }
  .cart-layout > .summary { order: 2 !important; }
}

/* Verkauf bestätigen: Auszahlungsart lesbar statt grün auf Blau */
.payout-option { border: 1px solid var(--hh-line-strong) !important; background: var(--hh-surface) !important; color: var(--hh-ink) !important; box-shadow: none !important; }
.payout-option :is(h4, p) { color: var(--hh-ink) !important; }
.payout-option .payout-hint { color: var(--hh-muted) !important; }
.payout-option:is(.selected, .active, .is-selected, [aria-checked="true"]) {
  background: var(--hh-blue-50) !important;
  border-color: var(--hh-blue) !important;
  box-shadow: var(--hh-ring) !important;
}
.payout-option:is(.selected, .active, .is-selected) .payout-amount { color: var(--hh-blue) !important; }
.payout-option:is(.selected, .active, .is-selected) .payout-hint { color: var(--hh-green) !important; }

/* Kleine Handys: Verkaufskorb-Zahl ins Menü statt in den Kopf (sonst überlappt die Navigation) */
.account-dropdown-menu .dropdown-item--sellcart[hidden] { display: none !important; }
@media (max-width: 420px) {
  .site-header .sell-cart-pill { display: none !important; }
  .site-header .account-trigger[data-sell-count]::after {
    content: attr(data-sell-count);
    position: absolute; top: 4px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: #16a34a; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
    box-shadow: 0 0 0 2px #fff;
  }
  .site-header .account-trigger { position: relative; }
}
/* Verkauf bestätigen: Abschnitte, Trenner, Zurück */
.address-divider { height: 1px !important; background: var(--hh-line) !important; border: 0 !important; }
.cart-actions .cart-back-button {
  background: transparent !important; color: var(--hh-text) !important; border: 1px solid transparent !important;
  box-shadow: none !important; border-radius: 999px !important; height: 44px; padding: 0 16px !important; font-weight: 600 !important;
}
.cart-actions .cart-back-button:hover { background: #eef1f5 !important; color: var(--hh-ink) !important; }
.total-price-box .total-label { text-transform: none !important; letter-spacing: 0 !important; color: var(--hh-muted) !important; }
body:has(#sellconfirmHeroTitle) .summary { border: 1px solid var(--hh-line) !important; border-top: 1px solid var(--hh-line) !important; border-radius: var(--hh-radius-lg) !important; box-shadow: var(--hh-shadow-sm) !important; }

/* ==========================================================================
   Startseite
   ========================================================================== */
.hero h1 { letter-spacing: -0.035em !important; line-height: 1.05 !important; }
.hero p { max-width: 620px; margin-left: auto !important; margin-right: auto !important; }
.service-card, .exp-card {
  background: var(--hh-surface) !important;
  border: 1px solid var(--hh-line) !important;
  border-radius: var(--hh-radius-lg) !important;
  box-shadow: var(--hh-shadow-sm) !important;
  text-align: left !important;
}
.service-card:hover, .exp-card:hover { border-color: #c9d6ee !important; box-shadow: var(--hh-shadow) !important; }
.service-card .service-content, .exp-card .exp-content { text-align: left !important; align-items: flex-start !important; }
.service-card h3, .exp-card h3 { text-align: left !important; font-size: 18px !important; font-weight: 700 !important; color: var(--hh-ink) !important; margin: 0 0 6px !important; }
.service-card p, .exp-card p { color: var(--hh-muted) !important; font-size: 15px !important; line-height: 1.55 !important; }
.service-icon, .exp-icon { background: var(--hh-blue-50) !important; color: var(--hh-blue) !important; box-shadow: none !important; border-radius: 12px !important; }
.cta-final { background: var(--hh-blue-50) !important; background-image: none !important; }
.cta-final h2 { color: var(--hh-ink) !important; }
.cta-final p { color: var(--hh-muted) !important; }
.manager-section { border: 1px solid var(--hh-line) !important; box-shadow: var(--hh-shadow-sm) !important; }
.manager-content { text-align: left !important; }
.manager-content h2 { font-size: clamp(26px, 3vw, 34px) !important; line-height: 1.15 !important; text-align: left !important; }
.manager-content p { color: var(--hh-text) !important; font-size: 16px !important; line-height: 1.6 !important; text-align: left !important; }
.cta-final .btn-primary { background: var(--hh-blue) !important; color: #fff !important; border-color: var(--hh-blue) !important; }
.cta-final .btn-secondary { background: var(--hh-surface) !important; color: var(--hh-ink) !important; border-color: var(--hh-line-strong) !important; }

/* ==========================================================================
   Shop (/buy) und Produktseite
   ========================================================================== */
.filter-section {
  background: var(--hh-surface) !important;
  background-image: none !important;
  border: 1px solid var(--hh-line) !important;
  box-shadow: var(--hh-shadow-sm) !important;
  color: var(--hh-ink) !important;
}
.filter-section .dropdown-toggle {
  background: var(--hh-surface) !important;
  color: var(--hh-ink) !important;
  border: 1px solid var(--hh-line-strong) !important;
  box-shadow: none !important;
}
.filter-section .dropdown-toggle:hover { border-color: var(--hh-blue) !important; color: var(--hh-blue) !important; }
.filter-section input[type="search"], .filter-section input[type="text"] {
  background: var(--hh-bg) !important; border: 1px solid var(--hh-line) !important; color: var(--hh-ink) !important;
}
.filter-section .filter-actions-row { border-top-color: var(--hh-line) !important; }
.filter-section :is(.apple-toggle-label, label, span) { color: var(--hh-text) !important; }
.filter-section :is(button:not(.dropdown-toggle):not(.apple-toggle), .reset-filters, .filter-reset) {
  background: transparent !important; color: var(--hh-text) !important; border: 1px solid var(--hh-line-strong) !important; box-shadow: none !important;
}
.products-grid#productsContainer { max-width: 1160px !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; }
.products-grid .product-card { border: 1px solid var(--hh-line) !important; box-shadow: var(--hh-shadow-sm) !important; border-radius: var(--hh-radius-lg) !important; }
.products-grid .product-card:hover { border-color: #c9d6ee !important; box-shadow: var(--hh-shadow) !important; }

.product-info .model-name { text-align: left !important; letter-spacing: -0.03em !important; }
.gallery-card { position: relative; }

/* Infoseiten (Über uns, Kontakt): ruhiger Seitenkopf statt Farbverlauf */
:is(.about-hero, .hero.page-hero) {
  background: var(--hh-blue-50) !important;
  background-image: none !important;
  color: var(--hh-ink) !important;
  padding-top: 56px !important;
  padding-bottom: 48px !important;
}
:is(.about-hero, .hero.page-hero) :is(h1, p) { color: var(--hh-ink) !important; text-shadow: none !important; }
:is(.about-hero, .hero.page-hero) p { color: var(--hh-text) !important; }
:is(.about-hero, .hero.page-hero) h1 { letter-spacing: -0.03em !important; }

/* Anmelde-/Registrierungsfenster */
#loginModal .form-field label { text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: var(--hh-text) !important; }
#loginModal .modal-content { border-radius: 20px !important; box-shadow: var(--hh-shadow-lg) !important; }
#loginModal #loginForm button[type="submit"], #loginModal #registerForm button[type="submit"] { border-radius: 999px !important; box-shadow: none !important; letter-spacing: 0 !important; font-weight: 600 !important; height: 46px; }
#loginModal .social-login-wrapper > div { width: 100% !important; max-width: 330px; display: flex; justify-content: center; }
#loginModal :is(.apple-button, .paypal-button) { width: 100% !important; height: 44px !important; border-radius: 999px !important; box-shadow: none !important; font-weight: 600 !important; }