/* Topbar — 1:1 aus apl3/styles.css; Labels skalieren flüssig bis 1320px, dann Icon-Modus */
:root {
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-80: 80px;
  /* Topbar: Höhe skaliert mit dem Fenster; JS/Layout nutzen dieselbe Variable */
  --topbar-height: clamp(58px, 4.2vw + 48px, 86px);
  /* Flüssige Abstände (skalieren mit Viewport-Breite, gleiches „Gefühl“ auf schmalen Fenstern) */
  --topbar-pad-y: clamp(6px, 0.95vw, 12px);
  --topbar-pad-x: clamp(8px, 1.25vw, 20px);
  /* Zusätzlicher Einzug rechts (Anmelden/Warenkorb), spiegelt optisch die linke Logo-Zone */
  --topbar-end-inset: clamp(16px, 2.2vw, 36px);
  --topbar-btn-pad-y: clamp(5px, 0.75vw, 12px);
  --topbar-btn-pad-x: clamp(5px, 0.9vw, 16px);
  --topbar-btn-gap: clamp(3px, 0.55vw, 8px);
  --topbar-block-gap: clamp(3px, 0.6vw, 8px);
  /* Abstand zwischen link / Mitte / rechts (nicht innerhalb der Button-Gruppen) */
  --topbar-zone-gap: clamp(22px, 3.2vw, 52px);
  --topbar-mid-gap: clamp(12px, 1.5vw, 28px);
  --topbar-block-1-gap: clamp(18px, 2vw, 40px);
  --topbar-logo-h: clamp(36px, 4.8vw, 70px);
  --topbar-logo-margin-end: clamp(6px, 1vw, 20px);
  --topbar-separator-h: clamp(28px, 4.5vw, 50px);
}

/* ============================================================================
   TOPBAR - VERTIKALE ZENTRIERUNG & HORIZONTALE VERTEILUNG
   ============================================================================
   Alle Elemente vertikal zentriert, drei Blöcke horizontal ausbalanciert
   ============================================================================ */

/* Topbar - High Temperature Design */
.topbar {
  display: flex;
  align-items: center; /* Vertikale Zentrierung aller Inhalte */
  justify-content: space-between; /* Horizontale Verteilung: Logo links, Mitte zentriert, rechts rechtsbündig */
  background: linear-gradient(135deg, #333333 0%, #2a2a2a 100%);
  padding: var(--topbar-pad-y) var(--topbar-pad-x);
  border-bottom: 2px solid #e5322d;
  position: sticky;
  top: 0;
  /* Über .canvas-container (9998), unter Modals (≥10000) – damit Dropdowns sichtbar bleiben */
  z-index: 9999;
  flex-shrink: 0;
  width: 100%;
  min-height: var(--topbar-height);
  height: auto;
  max-width: 100vw;
  box-sizing: border-box;
  overflow: visible;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 20px rgba(229, 50, 45, 0.1);
  gap: 0;
  container-type: inline-size;
  container-name: topbar;
  /* Gleiche Schrift wie der Rest der App (sonst wirkt die Leiste „fremd“) */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Labels sichtbar: Mindestens ~12.5px (vorher 11px — wirkte auf Laptop zu klein) */
  font-size: clamp(12.5px, 0.45rem + 0.52cqw, 16px);
}

/* ============================================================================
   TOPBAR CONTENT - HAUPT-CONTAINER
   ============================================================================
   Container für den gesamten Topbar-Inhalt
   ============================================================================ */

.topbar-content {
  display: flex;
  align-items: center; /* Vertikale Zentrierung */
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
  padding: 0;
  gap: 0;
  overflow: visible;
}

/* ============================================================================
   TOPBAR ACTIONS - 3 ZONEN (symmetrisch: links / Mitte / rechts)
   ============================================================================ */

.topbar-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex: 1;
  gap: var(--topbar-zone-gap);
  overflow: visible;
}

.topbar-block-1 {
  flex: 0 0 auto;
  min-width: 0;
}

.topbar-actions-mid {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--topbar-mid-gap);
  min-width: 0;
  flex-wrap: nowrap;
  padding-inline: clamp(6px, 0.85vw, 14px);
}

/* Mitte darf schrumpfen, Button-Gruppen dort nicht — Trennbereiche schon */
.topbar-actions-mid .topbar-block {
  flex-shrink: 0;
}

.topbar-actions-mid .topbar-gap,
.topbar-actions-end .topbar-gap {
  flex-shrink: 1;
}

.topbar-actions-end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: max(var(--topbar-block-gap), 0.45em);
  margin-inline-start: auto;
  padding-inline-end: var(--topbar-end-inset);
  flex-shrink: 0;
  overflow: visible;
}

/* ============================================================================
   TOPBAR BLOCKS - VIER LOGISCHE BEREICHE
   ============================================================================
   Jeder Block enthält zusammengehörige Elemente mit normalen Button-Abständen
   ============================================================================ */

.topbar-block {
  display: flex;
  align-items: center; /* Elemente innerhalb des Blocks vertikal zentriert */
  gap: var(--topbar-block-gap);
  flex-shrink: 1;
  min-width: 0;
}

/* Block 1: Logo + Neues Projekt - Abstand deutlich vergrößert */
/* vorher: gap: 16px; */
.topbar-block-1 {
  gap: var(--topbar-block-1-gap);
  flex-shrink: 0;
}

/* Block 2: Platte hinzufügen, Tools */
.topbar-block-2 {
  gap: var(--topbar-block-gap);
}

/* Block 3: Assistierter Modus, Speichern, Laden */
.topbar-block-3 {
  gap: var(--topbar-block-gap);
}

/* Block 4: Anmelden + Warenkorb – nur Inhaltsbreite, kein Aufziehen */
.topbar-block-4 {
  display: flex;
  align-items: center;
  gap: max(var(--topbar-block-gap), 0.45em);
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  flex-shrink: 0;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.topbar-block-4 .topbar-btn {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

/* Anmelden — feste Mindestbreite für Label, nicht 100% (sonst streckt der Warenkorb mit) */
#topbar-login-btn.topbar-btn {
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0.42em 0.68em;
  min-width: 9.25em;
  justify-content: center;
  transform-origin: center center;
  position: relative;
  z-index: 1;
}

/* Kein translateY/scale beim Hover — verhindert Zittern/Flicker bei eng stehenden Buttons */
#topbar-login-btn.topbar-btn:hover {
  background: linear-gradient(135deg, #555555 0%, #4a4a4a 100%);
  border-color: #e5322d;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(229, 50, 45, 0.3);
}

#topbar-login-btn.topbar-btn:active {
  background: #333333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Proportional zu .topbar font-size (oberhalb), statt fester CSS-Variablen */
.topbar-actions .topbar-block {
  gap: 0.34em;
}

.topbar-actions .topbar-block-1 {
  gap: 0.85em;
}

.topbar-block-1 #new-project-btn {
  margin-inline-start: clamp(4px, 0.5vw, 12px);
}

/* ============================================================================
   TOPBAR SEPARATORS - KOMPAKTE ABSTÄNDE LINKS, UNVERÄNDERT RECHTS
   ============================================================================
   Separator 1 und 2 kompakter, Separator 3 bleibt unverändert für fixe Position rechts
   ============================================================================ */

/* Separator-Abstände: Alle Separatoren deutlich verkleinert für sehr kompaktes Layout */
/* vorher: margin-inline: 4px; (Separator 1 & 2), margin-inline: 16px; (Separator 3) */
.topbar-separator {
  width: max(1px, 0.12em);
  height: 2.75em;
  background: linear-gradient(180deg, transparent 0%, #e5322d 50%, transparent 100%);
  margin-inline: 0px; /* Stark reduziert (von 4px auf 0px) für sehr kompaktes Layout - Separatoren direkt an Buttons */
  flex-shrink: 0;
  opacity: 0.6;
  box-shadow: 0 0 8px rgba(229, 50, 45, 0.3);
  align-self: center; /* Vertikale Zentrierung - gleicher Abstand oben/unten */
  pointer-events: none; /* nur Deko — verhindert Hover-Konflikte mit Nachbar-Buttons */
}

/* TOPBAR GAP — unsichtbarer Trennbereich, rote Linie fest mittig */
.topbar-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 clamp(20px, 2.7vw, 44px);
  min-width: clamp(6px, 0.9vw, 14px);
  min-height: 0;
  pointer-events: none;
}

.topbar-gap .topbar-separator {
  margin-inline: 0;
  flex-shrink: 0;
}

/* Logo Container */
.logo-container {
  display: flex;
  align-items: center;
  margin-right: var(--topbar-logo-margin-end);
  flex-shrink: 0;
}

.topbar-logo {
  display: flex;
  align-items: center; /* Logo vertikal zentriert */
  flex-shrink: 0;
  /* Entfernt: margin-right - wird durch Separator-Abstand ersetzt */
}

.logo {
  height: var(--topbar-logo-h);
  max-height: 70px;
  width: auto;
  max-width: min(240px, 42vw);
  display: block;
  object-fit: contain;
  object-position: left center;
  transition: opacity 0.3s ease;
}

.logo:hover {
  opacity: 0.8;
}

/* ============================================================================
   TOPBAR BUTTONS - PERFEKT VERTIKAL ZENTRIERT
   ============================================================================
   Icon + Text innerhalb des Buttons exakt mittig, keine Pixel-Abweichungen
   ============================================================================ */

/* Sichtbarer Text lebt im Span — erbt .topbar font-size (skaliert mit der Leiste) */
.topbar-btn-label {
  font-size: 1em;
  font-weight: 500;
  /* Feste px: bleibt wie früher bei allen Skalen (em würde den Zeilenfluss verzerren) */
  letter-spacing: 0.25px;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar-btn {
  display: flex;
  align-items: center; /* Icon + Text vertikal zentriert */
  gap: 0.3em;
  padding: 0.42em 0.55em;
  border: max(1px, 0.11em) solid #555555;
  border-radius: 0.38em;
  background: linear-gradient(135deg, #444444 0%, #3a3a3a 100%);
  color: #ffffff;
  font-size: inherit;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2; /* Angepasst: line-height für perfekte Text-Zentrierung innerhalb Button-Höhe */
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  text-transform: none;
  letter-spacing: 0.3px;
  min-height: 2.65em;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  box-shadow: 0 0.08em 0.45em rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  flex-shrink: 0;
  margin: 0;
  vertical-align: middle;
  overflow: visible;
}

.topbar-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.topbar-btn:hover {
  background: linear-gradient(135deg, #555555 0%, #4a4a4a 100%);
  border-color: #e5322d;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(229, 50, 45, 0.3);
  z-index: 2;
}

.topbar-btn:hover::before {
  left: 100%;
}

.topbar-btn:active {
  background: #333333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.topbar-btn svg {
  width: 1.12em;
  height: 1.12em;
  flex-shrink: 0;
  display: block; /* Entfernt: vererbbare inline-Margins die Zentrierung stören */
  margin: 0; /* Entfernt: vererbbare SVG-Margins die Zentrierung störten */
}

.stone-item.stone-item-unavailable {
  opacity: 0.45;
  filter: grayscale(0.9);
  cursor: not-allowed;
  pointer-events: auto;
}

/* Flüssig verkleinern — moderat (zwischen gentle und readable) */
@container topbar (max-width: 1600px) {
  :root {
    --topbar-zone-gap: clamp(14px, 2.1vw, 42px);
    --topbar-mid-gap: clamp(9px, 1.15vw, 24px);
    --topbar-block-1-gap: clamp(12px, 1.35vw, 32px);
    --topbar-end-inset: clamp(12px, 1.5vw, 30px);
    --topbar-logo-h: clamp(32px, 4.3vw, 62px);
  }

  .logo {
    max-width: min(205px, 32vw);
  }
}

@container topbar (max-width: 1480px) {
  .topbar {
    font-size: clamp(10.5px, 0.36rem + 0.46cqw, 14px);
  }

  :root {
    --topbar-zone-gap: clamp(8px, 1.15vw, 28px);
    --topbar-mid-gap: clamp(6px, 0.8vw, 18px);
    --topbar-block-1-gap: clamp(8px, 0.9vw, 20px);
    --topbar-end-inset: clamp(10px, 1.1vw, 22px);
    --topbar-logo-h: clamp(28px, 3.7vw, 50px);
    --topbar-pad-x: clamp(7px, 0.9vw, 15px);
  }

  .topbar-btn {
    padding: 0.39em 0.5em;
    min-height: 2.45em;
  }

  #topbar-login-btn.topbar-btn {
    min-width: 8.75em;
  }

  #request-quote-btn.topbar-btn-primary {
    min-width: 9.5em;
  }

  .logo {
    max-width: min(185px, 29vw);
  }
}

@container topbar (max-width: 1360px) {
  .topbar {
    font-size: clamp(12px, 0.4rem + 0.46cqw, 14px);
  }

  :root {
    --topbar-zone-gap: clamp(6px, 0.85vw, 18px);
    --topbar-mid-gap: clamp(5px, 0.6vw, 12px);
    --topbar-block-1-gap: clamp(6px, 0.65vw, 14px);
    --topbar-end-inset: clamp(8px, 0.85vw, 16px);
    --topbar-logo-h: clamp(26px, 3.2vw, 44px);
    --topbar-pad-y: clamp(5px, 0.7vw, 9px);
    --topbar-pad-x: clamp(6px, 0.75vw, 12px);
  }

  .topbar-btn {
    padding: 0.37em 0.48em;
    min-height: 2.35em;
    gap: 0.26em;
  }

  #topbar-login-btn.topbar-btn {
    min-width: 8.25em;
  }

  #request-quote-btn.topbar-btn-primary {
    min-width: 9em;
  }

  .logo {
    max-width: min(170px, 27vw);
  }
}

@media (max-width: 1600px) {
  :root {
    --topbar-zone-gap: clamp(14px, 2.1vw, 42px);
    --topbar-mid-gap: clamp(9px, 1.15vw, 24px);
    --topbar-logo-h: clamp(32px, 4.3vw, 62px);
  }
}

@media (max-width: 1480px) {
  .topbar {
    font-size: clamp(12px, 0.42rem + 0.5vw, 14.5px);
  }

  :root {
    --topbar-zone-gap: clamp(8px, 1.15vw, 28px);
    --topbar-mid-gap: clamp(6px, 0.8vw, 18px);
    --topbar-logo-h: clamp(28px, 3.7vw, 50px);
  }

  .topbar-btn {
    padding: 0.39em 0.5em;
    min-height: 2.45em;
  }
}

@media (max-width: 1360px) {
  .topbar {
    font-size: clamp(10.25px, 0.34rem + 0.42vw, 13.5px);
  }

  :root {
    --topbar-zone-gap: clamp(6px, 0.85vw, 18px);
    --topbar-mid-gap: clamp(5px, 0.6vw, 12px);
    --topbar-logo-h: clamp(26px, 3.2vw, 44px);
  }

  .topbar-btn {
    padding: 0.37em 0.48em;
    min-height: 2.35em;
  }
}

/* Enger Bereich: Labels aus — außer Platte + Warenkorb (erst bei zweiter Schwelle, siehe 920px) */
@container topbar (max-width: 1320px) {
  .topbar {
    font-size: clamp(16px, 0.52rem + 1.1cqw, 18px);
  }

  /* Mittlere + rechte Zone auflösen: eine kompakte Icon-Zeile */
  .topbar-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    gap: 0 min(0.55em, 2.4vw);
    padding-inline: 0;
  }

  .topbar-actions-mid,
  .topbar-actions-end {
    display: contents;
  }

  .topbar-block-4 {
    margin-inline-start: auto;
    padding-inline-end: clamp(10px, 1.6vw, 22px);
  }

  .topbar-block-1,
  .topbar-block-2,
  .topbar-block-3 {
    flex-shrink: 0;
  }

  .topbar-separator {
    margin-inline: clamp(6px, 0.9vw, 14px);
  }

  .topbar-logo {
    flex-shrink: 0;
  }

  .topbar-btn-label {
    display: none !important;
  }

  /* Platte hinzufügen + Anmelden + Warenkorb: Text bleibt bis Topbar ≤920px */
  #add-plate-btn .topbar-btn-label,
  #topbar-login-btn .topbar-btn-label,
  #request-quote-btn .topbar-btn-label {
    display: inline !important;
  }

  .topbar-gap,
  .topbar-separator {
    display: none;
  }

  .topbar-tools-wrap .topbar-btn .topbar-tools-chevron {
    display: none;
  }

  .topbar-block {
    flex-shrink: 1;
    min-width: 0;
  }

  .topbar-btn {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  #topbar-login-btn,
  #request-quote-btn.topbar-btn,
  #request-quote-btn.topbar-btn-primary {
    flex-shrink: 0;
    overflow: hidden;
  }

  /* Nur-Icons-Zeile: größere Symbole */
  .topbar-btn svg {
    width: 1.68em;
    height: 1.68em;
  }

  #request-quote-btn.topbar-btn-primary svg {
    width: 1.76em;
    height: 1.76em;
  }

  .topbar-btn,
  #request-quote-btn.topbar-btn-primary {
    padding: 0.3em 0.44em;
    justify-content: center;
    min-height: 2.18em;
  }

  #request-quote-btn.topbar-btn-primary {
    min-height: 2.22em;
  }

  /* Platte + Anmelden: Label linksbündig; Warenkorb: Inhalt zentriert */
  #add-plate-btn,
  #topbar-login-btn {
    justify-content: flex-start;
    gap: 0.34em;
    padding: 0.4em 0.58em;
    min-height: 2.45em;
  }

  #request-quote-btn.topbar-btn-primary {
    justify-content: center;
    gap: 0.34em;
    padding: 0.4em 0.58em;
    min-height: 2.45em;
  }

  #add-plate-btn svg,
  #topbar-login-btn svg,
  #request-quote-btn.topbar-btn-primary svg {
    width: 1.18em;
    height: 1.18em;
  }

  #topbar-login-btn {
    min-width: 9.25em;
    width: auto;
  }

  #request-quote-btn.topbar-btn-primary {
    min-width: 10.5em;
    width: auto;
  }
}

/* Erst hier: Platte + Anmelden + Warenkorb ebenfalls Nur-Icon */
@container topbar (max-width: 920px) {
  #add-plate-btn .topbar-btn-label,
  #topbar-login-btn .topbar-btn-label,
  #request-quote-btn .topbar-btn-label {
    display: none !important;
  }

  #add-plate-btn,
  #topbar-login-btn,
  #request-quote-btn.topbar-btn-primary {
    justify-content: center;
    gap: 0.12em;
    padding: 0.32em 0.46em;
    min-height: 2.22em;
    min-width: 0 !important;
  }

  #add-plate-btn svg,
  #topbar-login-btn svg,
  #request-quote-btn.topbar-btn-primary svg {
    width: 1.68em;
    height: 1.68em;
  }

  #request-quote-btn.topbar-btn-primary svg {
    width: 1.76em;
    height: 1.76em;
  }
}

@media (max-width: 1320px) {
  .topbar {
    font-size: clamp(16px, 0.52rem + 1.1vw, 18px);
  }

  .topbar-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    gap: 0 min(0.55em, 2.4vw);
    padding-inline: 0;
  }

  .topbar-actions-mid,
  .topbar-actions-end {
    display: contents;
  }

  .topbar-block-4 {
    margin-inline-start: auto;
    padding-inline-end: clamp(10px, 1.6vw, 22px);
  }

  .topbar-block-1,
  .topbar-block-2,
  .topbar-block-3 {
    flex-shrink: 0;
  }

  .topbar-separator {
    margin-inline: clamp(6px, 0.9vw, 14px);
  }

  .topbar-logo {
    flex-shrink: 0;
  }

  .topbar-btn-label {
    display: none !important;
  }

  #add-plate-btn .topbar-btn-label,
  #topbar-login-btn .topbar-btn-label,
  #request-quote-btn .topbar-btn-label {
    display: inline !important;
  }

  .topbar-gap,
  .topbar-separator {
    display: none;
  }

  .topbar-tools-wrap .topbar-btn .topbar-tools-chevron {
    display: none;
  }

  .topbar-block {
    flex-shrink: 1;
    min-width: 0;
  }

  .topbar-btn {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  #topbar-login-btn {
    flex-shrink: 0;
    overflow: hidden;
  }

  .topbar-btn svg {
    width: 1.68em;
    height: 1.68em;
  }

  #request-quote-btn.topbar-btn-primary svg {
    width: 1.76em;
    height: 1.76em;
  }

  .topbar-btn,
  #request-quote-btn.topbar-btn-primary {
    padding: 0.3em 0.44em;
    justify-content: center;
    min-height: 2.18em;
  }

  #request-quote-btn.topbar-btn-primary {
    min-height: 2.22em;
  }

  #add-plate-btn,
  #topbar-login-btn {
    justify-content: flex-start;
    gap: 0.34em;
    padding: 0.4em 0.58em;
    min-height: 2.45em;
  }

  #request-quote-btn.topbar-btn-primary {
    justify-content: center;
    gap: 0.34em;
    padding: 0.4em 0.58em;
    min-height: 2.45em;
  }

  #add-plate-btn svg,
  #topbar-login-btn svg,
  #request-quote-btn.topbar-btn-primary svg {
    width: 1.18em;
    height: 1.18em;
  }

  #topbar-login-btn {
    min-width: 9.25em;
    width: auto;
  }

  #request-quote-btn.topbar-btn-primary {
    min-width: 10.5em;
    width: auto;
  }
}

@media (max-width: 1260px) {
  :root {
    --topbar-height: clamp(56px, 3.6vw + 44px, 76px);
    --topbar-pad-y: clamp(4px, 0.75vw, 8px);
    --topbar-pad-x: clamp(5px, 0.95vw, 12px);
    --topbar-btn-pad-y: 6px;
    --topbar-btn-pad-x: 6px;
    --topbar-btn-gap: 0;
    --topbar-block-gap: 4px;
    --topbar-block-1-gap: 6px;
    --topbar-logo-h: clamp(32px, 4.2vw, 46px);
    --topbar-logo-margin-end: clamp(6px, 0.9vw, 14px);
    --topbar-separator-h: clamp(26px, 3.6vw, 38px);
  }

  .topbar {
    padding: var(--topbar-pad-y) var(--topbar-pad-x);
  }

  .topbar-actions {
    justify-content: space-evenly;
    gap: 0 min(0.28em, 1.8vw);
  }

  .topbar-block {
    gap: 4px;
  }

  .topbar-block-1 {
    gap: 6px;
  }

  .topbar-separator {
    height: 2.45em;
    margin-inline: 2px;
  }

  .topbar-actions-end > .topbar-separator {
    margin-inline: 2px;
  }

  .topbar-actions-mid,
  .topbar-actions-end {
    display: contents;
  }

  /* Nur-Icons (außer Platte + Warenkorb solange >920px Viewport) */
  .topbar-btn {
    min-height: 2.12em;
    padding: 0.3em 0.4em;
    gap: 0.1em;
    justify-content: center;
  }

  .topbar-btn svg {
    width: 1.68em;
    height: 1.68em;
  }

  #request-quote-btn.topbar-btn-primary svg {
    width: 1.76em;
    height: 1.76em;
  }

  #add-plate-btn,
  #topbar-login-btn {
    padding: 0.4em 0.58em !important;
    justify-content: flex-start !important;
    gap: 0.32em !important;
    min-height: 2.45em !important;
  }

  #request-quote-btn.topbar-btn-primary {
    padding: 0.4em 0.58em !important;
    justify-content: center !important;
    gap: 0.32em !important;
    min-height: 2.45em !important;
  }

  #add-plate-btn svg,
  #topbar-login-btn svg,
  #request-quote-btn.topbar-btn-primary svg {
    width: 1.18em !important;
    height: 1.18em !important;
  }

  .topbar-tools-wrap .topbar-btn .topbar-tools-chevron {
    display: none;
  }

  .main-area {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .main-container {
    flex: 1;
    min-height: 0;
    height: auto;
  }
}

@media (max-width: 960px) {
  :root {
    --topbar-height: clamp(52px, 3.2vw + 40px, 68px);
    --topbar-pad-y: clamp(4px, 0.65vw, 6px);
    --topbar-pad-x: clamp(5px, 0.85vw, 10px);
    --topbar-btn-pad-y: 7px;
    --topbar-btn-pad-x: 8px;
    --topbar-block-gap: 4px;
    --topbar-block-1-gap: 6px;
    --topbar-logo-h: clamp(30px, 4vw, 42px);
    --topbar-separator-h: 0;
  }

  .topbar {
    padding: var(--topbar-pad-y) var(--topbar-pad-x);
  }

  .topbar-actions {
    display: flex;
    justify-content: space-evenly;
    gap: 0 min(0.26em, 1.6vw);
  }

  .topbar-actions-mid,
  .topbar-actions-end {
    display: contents;
  }

  .topbar-logo {
    flex-shrink: 0;
  }

  .topbar-block {
    gap: 4px;
    flex-shrink: 1;
    min-width: 0;
  }

  .topbar-block-1 {
    gap: 6px;
  }

  .topbar-gap,
  .topbar-separator {
    display: none;
  }

  .topbar-btn {
    min-height: 2.05em;
    padding: 0.24em 0.34em;
    font-size: inherit;
    gap: 0.08em;
    letter-spacing: 0;
    justify-content: center;
  }

  .topbar-btn svg {
    width: 1.68em;
    height: 1.68em;
  }

  #request-quote-btn.topbar-btn-primary svg {
    width: 1.76em;
    height: 1.76em;
  }

  .topbar-tools-wrap .topbar-btn .topbar-tools-chevron {
    display: none;
  }

  .topbar-btn-primary {
    font-size: inherit !important;
    padding: 0.28em 0.4em !important;
    min-height: 2.18em !important;
  }

  #add-plate-btn,
  #topbar-login-btn {
    padding: 0.4em 0.58em !important;
    justify-content: flex-start !important;
    gap: 0.32em !important;
    min-height: 2.45em !important;
  }

  #request-quote-btn.topbar-btn-primary {
    padding: 0.4em 0.58em !important;
    justify-content: center !important;
    gap: 0.32em !important;
    min-height: 2.45em !important;
  }

  #add-plate-btn svg,
  #topbar-login-btn svg,
  #request-quote-btn.topbar-btn-primary svg {
    width: 1.18em !important;
    height: 1.18em !important;
  }

  .main-area {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .main-container {
    flex: 1;
    min-height: 0;
    height: auto;
  }
}

/* Platte + Anmelden + Warenkorb: zweite Schwelle — Text erst unter 920px Viewport aus */
@media (max-width: 920px) {
  #add-plate-btn .topbar-btn-label,
  #topbar-login-btn .topbar-btn-label,
  #request-quote-btn .topbar-btn-label {
    display: none !important;
  }

  #add-plate-btn,
  #topbar-login-btn,
  #request-quote-btn.topbar-btn-primary {
    justify-content: center !important;
    gap: 0.12em !important;
    padding: 0.32em 0.46em !important;
    min-height: 2.22em !important;
    min-width: 0 !important;
  }

  #add-plate-btn svg,
  #topbar-login-btn svg,
  #request-quote-btn.topbar-btn-primary svg {
    width: 1.68em !important;
    height: 1.68em !important;
  }

  #request-quote-btn.topbar-btn-primary svg {
    width: 1.76em !important;
    height: 1.76em !important;
  }
}


/* High Temperature Primary Button - Maximum Energie */
.topbar-btn-primary {
  background: linear-gradient(135deg, #e5322d 0%, #d42a25 100%) !important;
  border-color: #e5322d !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(229, 50, 45, 0.5), 0 0 30px rgba(229, 50, 45, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  position: relative;
  overflow: hidden;
  animation: none;
}

/* Rechter CTA — skaliert mit .topbar font-size wie alle anderen Buttons */
#request-quote-btn.topbar-btn-primary {
  min-height: 2.65em;
  min-width: 0;
  padding: 0.4em 0.62em;
  border-radius: 0.45em;
  font-weight: 700 !important;
  letter-spacing: 0.15px;
  font-family: inherit;
  justify-content: center;
  text-align: center;
}

/* Mit sichtbarem Label: feste Mindestbreite am Inhalt, nicht % der Elternbreite */
@container topbar (min-width: 1321px) {
  #topbar-login-btn {
    min-width: 9.25em;
    width: auto;
  }

  #request-quote-btn.topbar-btn-primary {
    min-width: 10.5em;
    width: auto;
  }
}

@media (min-width: 1321px) {
  #topbar-login-btn {
    min-width: 9.25em;
    width: auto;
  }

  #request-quote-btn.topbar-btn-primary {
    min-width: 10.5em;
    width: auto;
  }
}

#request-quote-btn.topbar-btn-primary .topbar-btn-label {
  font-size: 1em;
  font-weight: 700 !important;
  letter-spacing: 0.15px;
}

#request-quote-btn.topbar-btn-primary svg {
  width: 1.14em;
  height: 1.14em;
}

/* Warenkorb: voller Primary-Hover, aber nicht schrumpfen; Shine bleibt im Button (kein Streifen links) */
#request-quote-btn.topbar-btn,
#request-quote-btn.topbar-btn-primary {
  flex-shrink: 0;
  overflow: hidden;
  transform-origin: center center;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(229, 50, 45, 0.5), 0 0 30px rgba(229, 50, 45, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0 4px 20px rgba(229, 50, 45, 0.7), 0 0 40px rgba(229, 50, 45, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

.topbar-btn-primary:hover {
  background: linear-gradient(135deg, #ff3d35 0%, #e5322d 100%) !important;
  border-color: #ff3d35 !important;
  box-shadow: 0 6px 24px rgba(229, 50, 45, 0.7), 0 0 50px rgba(229, 50, 45, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  z-index: 2;
}

.topbar-btn-primary:active {
  background: #c82333 !important;
  border-color: #c82333 !important;
  box-shadow: 0 2px 8px rgba(229, 50, 45, 0.3) !important;
}

/* Glow-Effekt für den Angebot-Button */
.topbar-btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.topbar-btn-primary:hover::before {
  left: 100%;
}

/* Aktiver Zustand für Buttons (z.B. Assistierter Modus) */
.topbar-btn.active {
  background: linear-gradient(135deg, #e5322d 0%, #d42a25 100%) !important;
  border-color: #e5322d !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(229, 50, 45, 0.5), 0 0 20px rgba(229, 50, 45, 0.3) !important;
}

.topbar-btn.active:hover {
  background: linear-gradient(135deg, #ff3d35 0%, #e5322d 100%) !important;
  border-color: #ff3d35 !important;
}

/* Tools-Dropdown (Topbar) */
.topbar-tools-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}

.topbar-tools-wrap .topbar-btn .topbar-tools-chevron {
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.12em;
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.topbar-tools-wrap.tools-open .topbar-btn .topbar-tools-chevron {
  transform: rotate(180deg);
}

.topbar-tools-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  padding: 12px 14px;
  background: linear-gradient(145deg, #3a3a3a 0%, #2e2e2e 100%);
  border: 2px solid #555555;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(229, 50, 45, 0.15);
  z-index: 1;
  animation: dropdownFadeIn 0.2s ease-out;
}

.topbar-tools-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  user-select: none;
}

.topbar-tools-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #e5322d;
  cursor: pointer;
  flex-shrink: 0;
}

.topbar-tools-hint {
  margin: 10px 0 0 0;
  padding-top: 10px;
  border-top: 1px solid #555;
  font-size: 11px;
  line-height: 1.45;
  color: #b0b0b0;
  font-weight: 400;
}

/* Konto-Dropdown (Topbar, angemeldet) */
.topbar-account-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}

.topbar-account-wrap .topbar-btn .topbar-account-chevron {
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.12em;
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.topbar-account-wrap:not(.account-logged-in) .topbar-account-chevron {
  display: none !important;
}

.topbar-account-wrap.account-open .topbar-btn .topbar-account-chevron {
  transform: rotate(180deg);
}

.topbar-account-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 300px;
  padding: 10px 12px;
  background: linear-gradient(145deg, #3a3a3a 0%, #2e2e2e 100%);
  border: 2px solid #555555;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(229, 50, 45, 0.15);
  z-index: 2;
  animation: dropdownFadeIn 0.2s ease-out;
}

.topbar-account-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.topbar-account-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.9;
}

.topbar-account-item:hover,
.topbar-account-item:focus-visible {
  background: rgba(229, 50, 45, 0.18);
  color: #fff;
  outline: none;
}

.topbar-account-item--logout {
  color: #e8a8a6;
}

.topbar-account-item--logout:hover,
.topbar-account-item--logout:focus-visible {
  background: rgba(229, 50, 45, 0.25);
  color: #ffb4b0;
}

.topbar-account-separator {
  height: 1px;
  margin: 6px 10px;
  background: #555;
}

@media (max-width: 768px) {
  .topbar {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
    height: auto;
  }

  .topbar-content,
  .topbar-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-btn,
  .topbar-btn-primary {
    transition: none;
    animation: none;
  }
}