* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #f5f5f3;
  color: #111;
}

.page {
  display: grid;
  grid-template-columns: 340px 1fr;
  align-items: stretch;
  transition: grid-template-columns 0.24s ease;
}

/* LEFT SIDEBAR */
.left {
  background: #333333;
  padding: 22px 18px;
}

.logo-wrap {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 18px;
   transform: translateY(-50px);
}




.logo {
  width: 200px;
  height: auto;
  opacity: 0.95;
}

.search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -24px auto 16px;
  max-width: 260px;
  padding: 6px 10px;
  border: 2px solid #333333;
  border-radius: 6px;
  background: #ffffff;
}

.search input {
  border: 0;
  outline: none;
  width: 100%;
  font-size: 14px;
}

.search button {
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
}

/* FILTER BOX */
.filter-box {
  max-width: 260px;
  margin: 0 auto;
}

.pill {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 999px;
  border: 0;
  background: #1f2933;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 14px;
}

.filter-label {
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 12px;
  margin-bottom: 8px;
}

#glanzSelect {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #111;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
}

.hardness-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
}

.hardness-title {
  min-width: 44px;
}

.hardness-row input {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid #111;
  border-radius: 4px;
  outline: none;
}

.dash {
  font-weight: 700;
}

/* RIGHT SIDE */
.right {
  background: #fff;
  min-width: 0;
}

/* NAVBAR */
.topbar {
  background: #333333;
  padding: 0 20px;
}

.menu {
  display: flex;
  align-items: center;
  gap: 92px;
  height: 70px;
  max-width: 1100px;
  min-width: 0;
  margin: 0 auto;
}

.menu-item a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.95;
  white-space: nowrap;
}

.menu-item a:hover {
  opacity: 1;
}

.menu-link-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.menu-link-main {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 6px 10px 10px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  opacity: 0.95;
}

.menu-caret-btn {
  border: 0;
  background: transparent;
  color: #fff;
  padding: 10px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.95;
}

.menu-caret-btn:hover,
.menu-link-main:hover {
  opacity: 1;
}

.menu-link-main .caret {
  display: none !important;
}

.caret {
  font-size: 12px;
  opacity: 0.8;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* DROPDOWN */
.dropdown {
  position: relative;
}

.topbar .menu-item > a,
.topbar .dropbtn,
.topbar .menu-link-main,
.topbar .menu-caret-btn {
  font-size: 17px !important;
  font-weight: 600;
}

.submenu-title {
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  gap: 6px;
}

.arrow {
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.dropbtn {
  color: #fff;
  font-size: 17px;
  padding: 10px 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  opacity: 0.95;
}

.dropbtn:hover {
  opacity: 1;
}

.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  background: #333333;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 12px;
  min-width: 240px;
  padding: 8px;
  display: none;
  z-index: 1000;
}

.dropdown-panel {
  background: #333333 !important;
}

.dropdown-panel a {
  display: block;
  padding: 10px;
  color: white;
  text-decoration: none;
  border-radius: 8px;
}

.dropdown-panel a:hover {
  background: rgba(255, 255, 255, 0.08);
}


.dropdown.open .dropdown-panel {
  display: block;
}

.content {
  max-width: none;
  width: 100%;
  margin: 0;
  min-width: 0;
  padding: 60px 24px 40px;
  background: #fff;
}

.content > .page-mohs,
.content > .page-uv,
.content > .page-acid,
.content > .page-bruch,
.content > .page-crystal,
.content > .page-werkzeug-story {
  margin-top: -24px;
}

.content h1 {
  font-size: 48px;
  margin: 0 0 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px;
  line-height: 1.75;
  color: #333;
  margin-bottom: 30px;
}

.hero-image {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.hero-image img {
  width: min(520px, 90%);
  height: auto;
  border: 1px solid #eee;
  padding: 18px;
  background: #fff;
  max-width: 1000px;
}

.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 44px;
  align-items: center;
  min-width: 0;
  padding: 34px 8px 22px;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 36px;
  background: #E4E8EC;
  border: 1px solid rgba(73, 78, 84, 0.12);
  box-shadow: 0 24px 50px rgba(32, 38, 40, 0.1);
  z-index: 0;
}

.home-hero-copy,
.home-hero-media {
  position: relative;
  z-index: 1;
}

.home-hero-copy {
  padding: 20px 18px 20px 14px;
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(73, 78, 84, 0.08);
  color: #4b5359;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #525a60 0%, #9da4aa 100%);
}

.home-hero-copy h1 {
  margin: 0 0 18px;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #111111;
  text-wrap: balance;
}

.home-intro {
  max-width: 640px;
  margin: 0;
  font-size: 21px;
  line-height: 1.75;
  color: #353b40;
}

.home-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.home-highlights span {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(73, 78, 84, 0.12);
  box-shadow: 0 8px 18px rgba(32, 38, 40, 0.08);
  color: #4b5359;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-hero-media {
  display: grid;
  gap: 18px;
  justify-items: center;
  padding: 18px 18px 18px 0;
}

.home-image-shell {
  position: relative;
  width: auto;
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.home-image-glow {
  position: absolute;
  inset: 12% 12% auto;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 177, 168, 0.42) 0%, rgba(143, 177, 168, 0.12) 45%, transparent 72%);
  filter: blur(16px);
  pointer-events: none;
}

.home-image-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

.home-image-shell img {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
  height: auto;
  object-fit: contain;
  filter: none;
  transform: none;
}

.home-image-note {
  max-width: 420px;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(249, 250, 251, 0.9);
  border: 1px solid rgba(73, 78, 84, 0.12);
  box-shadow: 0 14px 30px rgba(32, 38, 40, 0.1);
  color: #454d53;
}

.home-image-note strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #353d43;
}

.home-image-note span {
  display: block;
  font-size: 15px;
  line-height: 1.6;
}

body[data-theme="dark"] .home-hero::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(124, 144, 154, 0.18), transparent 28%),
    radial-gradient(circle at 88% 26%, rgba(74, 87, 96, 0.28), transparent 26%),
    linear-gradient(135deg, rgba(30, 33, 37, 0.98) 0%, rgba(21, 24, 28, 0.98) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .home-kicker {
  background: rgba(164, 182, 191, 0.12);
  color: #d9e4e8;
}

body[data-theme="dark"] .home-kicker::before {
  background: linear-gradient(135deg, #90aab0 0%, #dce7ea 100%);
}

body[data-theme="dark"] .home-hero-copy h1 {
  color: #f5f7fa;
}

body[data-theme="dark"] .home-intro {
  color: #d2d9df;
}

body[data-theme="dark"] .home-highlights span {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  color: #e2eaee;
}

body[data-theme="dark"] .home-image-shell {
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  width: 100%;
  align-self: stretch;
}

body[data-theme="dark"] .home-image-shell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-theme="dark"] .home-image-glow {
  background: radial-gradient(circle, rgba(126, 152, 150, 0.34) 0%, rgba(126, 152, 150, 0.08) 45%, transparent 72%);
}

body[data-theme="dark"] .home-image-note {
  background: rgba(33, 37, 42, 0.94);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
  color: #d7dde2;
}

body[data-theme="dark"] .home-image-note strong {
  color: #f4f7f9;
}

/* Responsive */
@media (max-width: 980px) {
  .page {
    grid-template-columns: 1fr;
  }

  .left {
    border-right: 0;
    border-bottom: 1px solid #eee;
  }

  .menu {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 0;
  }

  .two-cols {
    grid-template-columns: 1fr;
  }

  .home-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 18px 0 8px;
  }

  .home-hero-copy,
  .home-hero-media {
    padding: 12px 16px;
  }

  .home-hero-copy h1 {
    font-size: clamp(34px, 9vw, 54px);
  }

  .home-intro {
    font-size: 18px;
  }
}

.filter-card {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  max-width: 280px;
  margin: 0 auto;
}

.filter-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 14px;
}

.filter-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  margin-bottom: 6px;
}

.field select,
.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

.field select:focus,
.field input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.range {
  display: flex;
  align-items: center;
  gap: 10px;
}

.range input {
  width: 100%;
}

.dash {
  font-weight: 800;
  color: #555;
}

.hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #666;
}

.btn-primary {
  margin-top: 6px;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: #333333;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.btn-primary:hover {
  filter: brightness(0.95);
}

.btn-secondary {
  padding: 11px 14px;
  border: 1px solid #d7d7d7;
  border-radius: 10px;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

.dropbtn {
  color: #fff;
  background: transparent;
  border: 0;
  font-size: 15px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  opacity: 0.95;
}

.dropbtn:hover {
  opacity: 1;
}

/* === MENU PRINCIPAL === */
.dropdown {
  position: relative;
}

.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  padding: 8px 0;
  background: #121212;
  border-radius: 12px;
  display: none;
  z-index: 1000;
}

.dropdown:hover .dropdown-panel {
  display: block;
}

.dropdown-panel a {
  display: block;
  padding: 10px 14px;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
}

.dropdown-panel a:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* === SOUS-MENU (SILIKATE) === */
.submenu {
  position: relative;
}

.submenu-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

.submenu:hover .submenu-title {
  background: rgba(255, 255, 255, 0.08);
}

.submenu-link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.submenu-link-main {
  flex: 1 1 auto;
  padding: 10px 14px;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
}

.submenu-caret-btn {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 10px 14px 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.submenu:hover .submenu-link-main,
.submenu:hover .submenu-caret-btn {
  background: rgba(255, 255, 255, 0.08);
}

.submenu-panel {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 320px;
  padding: 8px 0;
  background: #333333;
  border-radius: 12px;
  display: none;
  z-index: 1100;
  margin-left: 0;
}

.submenu.open .submenu-panel {
  display: block;
}

.submenu-panel a {
  display: block;
  padding: 10px 14px;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
}

.submenu-panel a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.site-footer {
  background: #fff;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  padding: 32px 24px 40px 0;
  width: 100%;
  margin-left: 0;
  position: relative;
  overflow: hidden;
  border-top: 0;
}

.site-footer::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.08), transparent 26%),
    linear-gradient(180deg, #333333 0%, #2d2d2d 52%, #333333 100%);
  z-index: 0;
}

.footer-inner {
  grid-column: 2;
  grid-row: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto 0 24px;
  position: relative;
  z-index: 1;
}

@media (min-width: 981px) and (max-width: 1400px) {
  .site-footer {
    grid-template-columns: clamp(280px, 20vw, 340px) minmax(0, 1fr);
  }

  .site-footer::before {
    width: auto;
  }
}

body.sidebar-collapsed .site-footer {
  grid-template-columns: 1fr;
  padding-left: 0;
  width: 100%;
}

body.sidebar-collapsed .site-footer::before {
  display: none;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.footer-top h3 {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 700;
  color: #222;
}

.provider {
  margin: 0 0 18px;
  line-height: 1.8;
  color: #4d4d4d;
}

.footer-logos {
  border: 1px solid #ece7df;
  background: #fcfbf9;
  padding: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 18px 0;
  border-radius: 16px;
}

.footer-logos img {
  max-width: 100%;
  height: auto;
  display: block;
}

.footer-logos a {
  display: flex;
  justify-content: center;
  width: 100%;
}

.footer-version {
  margin: 18px 0 28px;
  color: #4d4d4d;
}

.footer-version .label {
  font-weight: 700;
  margin-bottom: 6px;
}

.footer-contacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  color: #4d4d4d;
  line-height: 1.9;
}

.footer-contacts p {
  margin: 0;
}

/* ====== PAGE ELEMENTE – GRILLE ====== */
.page-title {
  font-size: 2.6rem;
  font-weight: 800;
  text-align: center;
  margin: 40px 0 20px;
}

.mineral-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.mineral-card .thumb {
  width: 100% !important;
  max-width: none !important;
}

.mineral-card {
  text-decoration: none;
  color: #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  content-visibility: auto;
  contain-intrinsic-size: 0 340px;
}

.mineral-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.mineral-card .thumb {
  width: 200%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #eee;
  background: #fff;
  padding: 18px;
}

.mineral-card .thumb {
  width: 100%;
  max-width: none;
}

.mineral-card .thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body[data-theme="dark"] .mineral-card {
  color: #f2f5f8;
  background: linear-gradient(180deg, #232527 0%, #1c1e20 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  padding: 14px;
}

body[data-theme="dark"] .mineral-card h3,
body[data-theme="dark"] .mineral-card h4,
body[data-theme="dark"] .mineral-card h5 {
  color: #f5f7fa;
}

body[data-theme="dark"] .mineral-card .thumb {
  background: linear-gradient(180deg, #161718 0%, #101112 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .mineral-card .btn-more {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

@media (max-width: 900px) {
  .footer-contacts {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.mineral-hero {
  margin: 0 auto 20px;
}

.mineral-hero--detail {
  position: relative;
  padding-top: 110px;
}

.mineral-detail-header {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: min(90%, 720px);
  text-align: center;
  pointer-events: none;
}

.mineral-hero img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.mineral-detail-title {
  margin: 0;
  text-align: center;
  width: 100%;
}

.mineral-detail-fundort {
  margin: 10px 0 0;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: #7b8794;
  opacity: 1;
}

.mineral-hero--media {
  max-width: 100%;
}

.mineral-hero--media .viewer360-container,
.mineral-hero--media .sketchfab {
  margin-top: 0;
  margin-bottom: 0;
}

.mineral-hero--media .viewer360-container {
  max-width: 100%;
}

.mineral-hero--media .viewer360-stage {
  border-radius: 16px;
}

.mineral-hero--media .viewer360-hint {
  font-size: 1rem;
}

.mineral-hero--media .sketchfab {
  max-width: 1080px;
  height: clamp(520px, 62vw, 680px);
}

@media (max-width: 700px) {
  .mineral-hero--detail {
    padding-top: 88px;
  }

  .mineral-detail-header {
    top: 12px;
    width: min(92%, 560px);
  }

  .mineral-detail-title {
    font-size: clamp(28px, 7vw, 44px);
  }

  .mineral-detail-fundort {
    margin-top: 8px;
  }
}

.mineral-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}

.mineral-table th,
.mineral-table td {
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  vertical-align: top;
}

.mineral-table th {
  width: 25%;
  background: #f7f7f7;
  font-weight: 600;
  text-align: left;
}

/* === UV-Kabinett === */
.uv-list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.uv-sample {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.uv-title {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.uv-image-wrap {
  background: #000;
  padding: 0.5rem;
}

.uv-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

.uv-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.uv-btn {
  border: none;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: #222;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}

.uv-btn.active {
  background: #ff706c;
}

.uv-link-more {
  margin-top: 2rem;
  font-size: 0.9rem;
}

.uv-viewer {
  max-width: 900px;
  margin: 0 auto 2rem;
}

.uv-viewer img {
  width: 100%;
  height: auto;
  display: block;
}

.uv-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.uv-buttons button {
  border: none;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: #333;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
}

.uv-buttons button.active {
  background: #ff706c;
}

.uv-block {
  margin: 40px 0;
}

.uv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
  margin-top: 28px;
}

.uv-grid .uv-block {
  margin: 0;
}

.uv-embed-shell {
  position: relative;
}

.uv-grid .uv-block iframe {
  width: 100%;
  aspect-ratio: 890 / 746;
  height: auto;
  display: block;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 34, 58, 0.08);
}

.uv-stage-labels {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 10.3%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  color: #ffffff;
  font-size: clamp(10px, 0.82vw, 12px);
  font-weight: 700;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  z-index: 2;
}

.uv-stage-labels span {
  white-space: nowrap;
}

.uv-stage-labels span:nth-child(1) {
  justify-self: start;
}

.uv-stage-labels span:nth-child(2) {
  justify-self: center;
  text-align: center;
}

.uv-stage-labels span:nth-child(3) {
  justify-self: end;
  text-align: right;
}

.page-uv {
  max-width: 1480px;
  margin: 0 auto;
}

.uv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  gap: 28px;
  margin: 8px 0 28px;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(190, 205, 223, 0.34), transparent 30%),
    radial-gradient(circle at bottom right, rgba(216, 225, 238, 0.36), transparent 28%),
    linear-gradient(135deg, #f8fafc 0%, #eef3f8 100%);
  border: 1px solid rgba(51, 71, 92, 0.08);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.uv-hero-kicker {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(34, 70, 112, 0.1);
  color: #23486f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.uv-hero-copy h2 {
  margin: 16px 0 14px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.uv-hero-copy p {
  margin: 0 0 16px;
  line-height: 1.85;
  color: #425161;
}

.uv-hero-copy p:last-child {
  margin-bottom: 0;
}

.uv-hero-note {
  align-self: center;
  padding: 26px;
  border-radius: 24px;
  background: rgba(18, 28, 40, 0.94);
  color: #fff;
  box-shadow: 0 18px 36px rgba(8, 13, 20, 0.22);
}

.uv-hero-note span {
  display: inline-block;
  margin-bottom: 10px;
  color: #b8cada;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.uv-hero-note strong {
  display: block;
  font-size: 28px;
  line-height: 1.28;
}

.uv-hero-note p {
  margin: 14px 0 0;
  color: #edf4fb !important;
  line-height: 1.75;
}

@media (max-width: 920px) {
  .uv-hero {
    grid-template-columns: 1fr;
  }
}

.uv-image-wrap img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.uv-buttons {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.uv-btn {
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  background: #333;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
}

.uv-btn.active {
  background: #ff706c;
}

.page-acid .acid-hero {
  background:
    radial-gradient(circle at top left, rgba(217, 195, 163, 0.24), transparent 30%),
    radial-gradient(circle at bottom right, rgba(196, 179, 154, 0.2), transparent 28%),
    linear-gradient(135deg, #faf7f1 0%, #f0ebe2 100%);
}

.acid-hero-copy .acid-formula {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(129, 103, 73, 0.14);
  color: #1b2836;
  font-family: "IBM Plex Mono", "Fira Code", monospace;
  font-size: 16px;
  line-height: 1.7;
}

.page-acid .acid-hero-note {
  background: linear-gradient(180deg, rgba(48, 38, 29, 0.96) 0%, rgba(31, 24, 19, 0.98) 100%);
}

.acid-hero-media {
  align-self: center;
}

.acid-hero-image-frame {
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(120, 101, 78, 0.12);
  box-shadow: 0 18px 36px rgba(24, 28, 34, 0.08);
}

.acid-hero-image-frame img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.acid-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  margin-top: 28px;
}

.acid-card {
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, #fdfbf8 0%, #f3eee6 100%);
  border: 1px solid rgba(120, 101, 78, 0.12);
  box-shadow: 0 16px 34px rgba(24, 28, 34, 0.08);
}

.acid-card-head {
  margin-bottom: 14px;
}

.acid-card-badge {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(126, 92, 49, 0.1);
  color: #775327;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.acid-card h3 {
  margin: 14px 0 10px;
  font-size: 22px;
  line-height: 1.18;
}

.acid-card p {
  margin: 0;
  color: #495869;
  line-height: 1.7;
}

.acid-card-media {
  border-radius: 18px;
  overflow: hidden;
  background: #111;
}

.acid-card-media video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #111;
}

.acid-footnote {
  margin-top: 18px;
  color: #586779;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .uv-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .acid-grid,
  .uv-hero.acid-hero {
    grid-template-columns: 1fr;
  }
}

.viewer360-container {
  max-width: 700px;
  margin: 2rem auto;
}

.viewer360-img {
  width: 100%;
  display: block;
  cursor: grab;
}

.sketchfab {
  width: 100%;
  max-width: 900px;
  height: 480px;
  display: block;
  margin: 2rem auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.navbar-logo-right img {
  height: 70px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  margin-top: 8px;
}

.topbar .menu > .menu-item > a,
.topbar .menu > .menu-item > button {
  color: #fff;
  font-weight: 700;
}

.rock-block {
  margin: 40px auto;
  max-width: 1000px;
  text-align: center;
}

.magmatite-img img {
  max-width: 100%;
  height: auto;
}

.rock-block img.rock-img {
  max-width: 500px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1.5rem;
}

.rock-block img.rock-img {
  max-width: 600px;
}

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 260px;
  background: #f3f3f3;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  min-height: 100%;
}

.youtube {
  width: 100%;
  max-width: 900px;
  height: 500px;
  border: 0;
  display: block;
  margin: 20px auto;
}

.lager-list {
  line-height: 1.7;
  font-size: 16px;
  margin-bottom: 40px;
}

.lager-list li {
  margin: 4px 0;
}

.lager-link {
  color: #111;
  text-decoration: none;
}

.lager-link:hover {
  text-decoration: underline;
}

.page-lager {
  --lager-accent: #9a5b23;
  --lager-accent-soft: rgba(154, 91, 35, 0.12);
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 18px 56px;
}

.page-lager--sedimentaer {
  --lager-accent: #8d5a2c;
  --lager-accent-soft: rgba(141, 90, 44, 0.14);
}

.page-lager--magmat {
  --lager-accent: #8a3b2b;
  --lager-accent-soft: rgba(138, 59, 43, 0.14);
}

.page-lager--hydrothermal {
  --lager-accent: #13697a;
  --lager-accent-soft: rgba(19, 105, 122, 0.14);
}

.lager-hero {
  position: relative;
  overflow: hidden;
  margin: 18px auto 26px;
  padding: 30px 32px 26px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.88), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #faf6f1 52%, #f3ede3 100%);
  border: 1px solid rgba(24, 30, 42, 0.06);
  box-shadow: 0 22px 54px rgba(36, 28, 19, 0.08);
}

.lager-hero::after {
  content: "";
  position: absolute;
  inset: auto -40px -60px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--lager-accent-soft);
  filter: blur(2px);
}

.lager-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--lager-accent-soft);
  color: var(--lager-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-lager .page-title {
  margin: 16px 0 0;
  text-align: left;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1.04;
}

.page-lager-section {
  margin: 22px auto;
  padding: 24px 28px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(24, 30, 42, 0.06);
  box-shadow: 0 18px 44px rgba(28, 32, 44, 0.08);
}

.page-lager-media {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 246, 242, 0.98)),
    var(--lager-accent-soft);
}

.page-lager .rock-block {
  max-width: 1040px;
  text-align: left;
}

.page-lager .rock-block img.rock-img,
.page-lager .page-lager-richtext figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(20, 24, 38, 0.12);
}

.page-lager-table-wrap {
  padding: 12px 18px;
  overflow: hidden;
}

.page-lager .rock-table {
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
}

.page-lager .rock-table th {
  width: 220px;
  color: #0f1d2f;
  background: linear-gradient(180deg, rgba(15, 29, 47, 0.05), rgba(15, 29, 47, 0.015));
}

.page-lager-richtext {
  position: relative;
}

.page-lager-richtext::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--lager-accent), rgba(255, 255, 255, 0));
}

.page-lager-richtext > * {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.page-lager-richtext p {
  margin: 0 0 1.1rem;
  color: #243245;
  font-size: 1.04rem;
  line-height: 1.9;
}

.page-lager-richtext p strong:first-child {
  color: #0f1d2f;
  font-size: 1.08rem;
}

.page-lager-richtext a,
.page-lager-back a {
  color: var(--lager-accent);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.page-lager-richtext .lager-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.page-lager-richtext .lager-list li {
  margin: 0 0 1.05rem;
}

.page-lager-richtext .lager-list a[href] {
  color: inherit;
  text-decoration: none;
}

.page-lager-richtext .lager-list a[href]:hover {
  color: inherit;
  text-decoration: none;
}

.page-lager-richtext .lager-list strong,
.page-lager-richtext .lager-list strong a[href] {
  color: #0f172a;
  font-weight: 800;
}

.page-lager-richtext figure {
  margin: 0 auto 24px;
}

.page-lager-richtext hr {
  border: 0;
  border-top: 1px solid rgba(15, 29, 47, 0.1);
  margin: 26px auto;
}

.page-lager-richtext iframe {
  width: 100%;
  min-height: 480px;
  border: 0;
  border-radius: 20px;
  background: #f3f5f8;
  box-shadow: 0 16px 36px rgba(20, 24, 38, 0.12);
}

.lager-page-section {
  margin: 40px 0 0;
  max-width: 1120px;
}

.lager-section-title {
  margin: 0 0 16px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 800;
  color: var(--lager-subtitle-color, #102d46);
  padding-bottom: 0;
  letter-spacing: -0.01em;
}

.lager-page-section-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  border: 2px dashed rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  color: #aaa;
  font-size: 14px;
  font-style: italic;
}

.lager-section-mineral-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

.lager-card-subsections {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}

.lager-erze-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
}
.lager-erze-row > .lager-card-subsection,
.lager-erze-row > .lager-page-section {
  flex: 1 1 0;
  min-width: 0;
}
.lager-erze-row--stacked {
  flex-direction: column-reverse;
}
.lager-erze-row--stacked > .lager-card-subsection {
  flex: 0 0 auto;
}
.lager-erze-row--stacked > .lager-card-subsection:first-child {
  margin-top: 28px;
}
.lager-erze-row--stacked .viewer360-container--fullwidth {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 640px) {
  .lager-erze-row {
    flex-direction: column;
  }
}

.viewer360-grid-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  align-items: start;
}
@media (max-width: 600px) {
  .viewer360-grid-row {
    grid-template-columns: 1fr;
  }
}

.viewer360-grid-row > div {
  width: 100%;
}

.viewer360-container--compact {
  max-width: 320px;
  margin: 0.5rem auto 0;
  width: 100%;
}
.viewer360-container--compact .viewer360-stage {
  border-radius: 14px;
  height: 260px;
  overflow: hidden;
  background: #fff;
}

.lager-card-subsection {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lager-inline-3d-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: start;
}

.lager-inline-3d-grid .lager-inline-3d-item {
  min-width: 0;
}

.lager-inline-3d-grid .lager-inline-3d-item:only-child {
  grid-column: 1 / -1;
  width: 100%;
}

.lager-inline-3d-grid .lager-inline-3d-item:only-child .mineral-3d-viewer-label {
  text-align: center !important;
}

.lager-inline-3d-grid .lager-inline-3d-item:only-child .viewer360-container,
.lager-inline-3d-grid .lager-inline-3d-item:only-child .lager-webrotate-frame {
  max-width: min(720px, 100%);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .lager-inline-3d-grid {
    grid-template-columns: 1fr;
  }
}

.lager-card-subsection-title {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 800;
  color: var(--lager-subtitle-color, #102d46);
  margin: 0 0 16px;
  padding-bottom: 0;
  letter-spacing: -0.01em;
}

.lager-subsection-title {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 800;
  color: var(--lager-subtitle-color, #102d46);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.page-lager-sedimentary-intro .lager-subsection-title,
.page-lager-magmat-intro .lager-subsection-title,
.page-lager-hydrothermal-intro .lager-subsection-title,
.page-lager-metamorphic-intro .lager-subsection-title {
  color: var(--lager-subtitle-color, #9B7015);
}

.page-lager-back {
  max-width: 1120px;
  margin: 26px 0 0;
  text-align: left;
}

.page-lager-metamorphic-intro .page-lager-back {
  margin: 26px 0 0;
  max-width: none;
  text-align: left;
}

.page-lager-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(24, 30, 42, 0.08);
  box-shadow: 0 10px 24px rgba(28, 32, 44, 0.08);
  text-decoration: none;
}

@media (max-width: 900px) {
  .page-lager {
    padding-left: 14px;
    padding-right: 14px;
  }

  .lager-hero,
  .page-lager-section {
    padding: 20px 18px;
    border-radius: 20px;
  }

  .page-lager .page-title {
    text-align: center;
  }

  .lager-kicker {
    display: table;
    margin: 0 auto;
  }

  .page-lager-richtext iframe {
    min-height: 320px;
  }
}

@media (max-width: 640px) {
  .page-lager-richtext p {
    font-size: 0.98rem;
    line-height: 1.75;
  }

  .page-lager .rock-table th,
  .page-lager .rock-table td {
    display: block;
    width: 100%;
  }
}


.viewer360-container {
  position: relative;
  max-width: 700px;
  margin: 2rem auto;
}

.viewer360-container--fullwidth {
  max-width: 100%;
  margin: 0;
}

.viewer360-container--fullwidth .viewer360-stage {
  border-radius: 12px;
  max-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.viewer360-container--fullwidth .viewer360-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.viewer360-stage {
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
}

.viewer360-img {
  width: 100%;
  display: block;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  transform: translate(
    calc(var(--viewer-base-translate-x, 0%) + var(--viewer-translate-x, 0px)),
    calc(var(--viewer-base-translate-y, 0%) + var(--viewer-translate-y, 0px))
  ) scale(var(--viewer-scale, 1));
  transition: transform 0.16s ease-out;
  will-change: transform;
}

.viewer360-img.is-dragging {
  cursor: grabbing;
}

.viewer360-hint {
  margin: 0.85rem 0 0;
  text-align: center;
  color: #304155;
  font-size: 0.95rem;
  font-weight: 600;
}

.viewer360-controls {
  margin-top: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.viewer360-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #2c2c3e;
  color: #fff;
  padding: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  transition: transform 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
  cursor: pointer;
}

.viewer360-btn::before {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.viewer360-btn[data-action="prev"]::before {
  content: "\21ba";
  font-size: 15px;
}

.viewer360-btn[data-action="play"] {
  width: 38px;
  height: 38px;
  background: var(--lager-link-color, #2c2c3e);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.viewer360-btn[data-action="play"]::before {
  content: "\25b6";
  font-size: 12px;
  margin-left: 2px;
}

.viewer360-btn[data-action="pause"] {
  width: 38px;
  height: 38px;
  background: var(--lager-link-color, #2c2c3e);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.viewer360-btn[data-action="pause"]::before {
  content: "\2016";
  font-size: 12px;
  letter-spacing: 2px;
}

.viewer360-btn[data-action="next"]::before {
  content: "\21bb";
  font-size: 15px;
}

.viewer360-btn:hover {
  transform: scale(1.12);
  background: #3e3e56;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.viewer360-btn[data-action="play"]:hover,
.viewer360-btn[data-action="pause"]:hover {
  background: color-mix(in srgb, var(--lager-link-color, #3e3e56), black 20%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}

.viewer360-btn:active {
  transform: scale(0.90);
}

body[data-theme="dark"] .viewer360-btn {
  background: #3a3a54;
}

body[data-theme="dark"] .viewer360-btn:hover {
  background: #4e4e6e;
}

body[data-theme="dark"] .viewer360-btn[data-action="play"],
body[data-theme="dark"] .viewer360-btn[data-action="pause"] {
  background: color-mix(in srgb, var(--lager-link-color, #4a4a70), white 15%);
}

/* Ghost image for cross-fade between frames */
.viewer360-img-ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  will-change: opacity;
}

/* Expand button overlaid on stage */
.viewer360-stage {
  position: relative;
}

.viewer360-expand-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.14s ease, transform 0.14s ease;
  z-index: 4;
  backdrop-filter: blur(4px);
}

.viewer360-expand-btn:hover {
  background: rgba(0, 0, 0, 0.68);
  transform: scale(1.1);
}

.viewer360-expand-btn svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Fullscreen mode — container + controls */
.viewer360-container:fullscreen,
.viewer360-container:-webkit-full-screen,
.viewer360-container:-moz-full-screen {
  display: flex;
  flex-direction: column;
  background: #fff;
  max-width: none;
  margin: 0;
  position: relative;
}

.viewer360-container:fullscreen .viewer360-stage,
.viewer360-container:-webkit-full-screen .viewer360-stage,
.viewer360-container:-moz-full-screen .viewer360-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative;
  border-radius: 0;
  background: #fff;
  overflow: hidden;
}

/* img + ghost : absolus dans le stage → centrés sur tous les écrans */
.viewer360-container:fullscreen .viewer360-stage > .viewer360-img,
.viewer360-container:fullscreen .viewer360-stage > .viewer360-img-ghost,
.viewer360-container:-webkit-full-screen .viewer360-stage > .viewer360-img,
.viewer360-container:-webkit-full-screen .viewer360-stage > .viewer360-img-ghost,
.viewer360-container:-moz-full-screen .viewer360-stage > .viewer360-img,
.viewer360-container:-moz-full-screen .viewer360-stage > .viewer360-img-ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* --fullwidth stage: override max-height in fullscreen so it fills the screen */
.viewer360-container--fullwidth:fullscreen .viewer360-stage,
.viewer360-container--fullwidth:-webkit-full-screen .viewer360-stage,
.viewer360-container--fullwidth:-moz-full-screen .viewer360-stage {
  max-height: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Boutons positionnés en overlay en bas de l'image */
.viewer360-container:fullscreen .viewer360-controls,
.viewer360-container:-webkit-full-screen .viewer360-controls,
.viewer360-container:-moz-full-screen .viewer360-controls {
  position: absolute !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  flex: none !important;
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px;
  padding: 0;
  background: transparent;
  margin: 0;
  z-index: 10;
}

/* Cacher le hint et les autres éléments non-essentiels */
.viewer360-container:fullscreen .viewer360-hint,
.viewer360-container:-webkit-full-screen .viewer360-hint,
.viewer360-container:-moz-full-screen .viewer360-hint {
  display: none !important;
}

.viewer360-container:fullscreen .viewer360-expand-btn,
.viewer360-container:-webkit-full-screen .viewer360-expand-btn,
.viewer360-container:-moz-full-screen .viewer360-expand-btn {
  display: none;
}

/* Bouton réduire — caché par défaut, visible seulement en fullscreen */
.viewer360-collapse-btn {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.14s ease, transform 0.14s ease;
  z-index: 5;
  backdrop-filter: blur(4px);
}

.viewer360-collapse-btn svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.viewer360-collapse-btn:hover {
  background: rgba(0, 0, 0, 0.68);
  transform: scale(1.1);
}

.viewer360-container:fullscreen .viewer360-collapse-btn,
.viewer360-container:-webkit-full-screen .viewer360-collapse-btn,
.viewer360-container:-moz-full-screen .viewer360-collapse-btn {
  display: inline-flex;
}

/* Titre affiché uniquement en plein écran */
.viewer360-fullscreen-title {
  display: none;
}

.viewer360-container:fullscreen .viewer360-fullscreen-title,
.viewer360-container:-webkit-full-screen .viewer360-fullscreen-title,
.viewer360-container:-moz-full-screen .viewer360-fullscreen-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  padding: 14px 80px 10px;
  font-size: 1.25em;
  font-weight: 700;
  color: #1a2b3c;
  background: rgba(255, 255, 255, 0.97);
  letter-spacing: -0.01em;
  box-sizing: border-box;
}

/* Fundort affiché sous le titre en plein écran */
.viewer360-fullscreen-fundort {
  display: none;
}

.viewer360-container:fullscreen .viewer360-fullscreen-fundort,
.viewer360-container:-webkit-full-screen .viewer360-fullscreen-fundort,
.viewer360-container:-moz-full-screen .viewer360-fullscreen-fundort {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  padding: 0 80px 12px;
  font-size: 0.82em;
  opacity: 0.6;
  color: #1a2b3c;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}


/* Modal 360° */
.viewer360-modal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.viewer360-modal[aria-hidden="false"] {
  pointer-events: auto;
  opacity: 1;
}

.viewer360-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  cursor: pointer;
}

.viewer360-modal-box {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 18px;
  padding: 1.2rem 1.2rem 1rem;
  width: min(92vw, 780px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

body[data-theme="dark"] .viewer360-modal-box {
  background: #1a1a28;
}

.viewer360-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.12);
  color: #333;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.14s;
}

body[data-theme="dark"] .viewer360-modal-close {
  background: rgba(255,255,255,0.12);
  color: #eee;
}

.viewer360-modal-close:hover {
  background: rgba(0,0,0,0.22);
}

.viewer360-modal-title {
  margin: 0 0 0.2rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: #222;
}

body[data-theme="dark"] .viewer360-modal-title {
  color: #eee;
}

.viewer360-modal-fundort {
  margin: 0 0 0.7rem;
  text-align: center;
  font-size: 0.78rem;
  opacity: 0.62;
  color: #444;
}

body[data-theme="dark"] .viewer360-modal-fundort {
  color: #bbb;
}

.viewer360-modal-stage {
  overflow: hidden;
  border-radius: 12px;
  background: #f5f5f5;
  height: clamp(300px, 58vh, 540px);
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-theme="dark"] .viewer360-modal-stage {
  background: #111;
}

.viewer360-modal-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}

.viewer360-modal-stage img.is-dragging {
  cursor: grabbing;
}

.viewer360-modal-controls {
  margin-top: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.rock-block {
  margin: 32px auto;
  max-width: 1000px;
}

.rock-block p {
  line-height: 1.7;
}

.rock-table {
  width: 100%;
  max-width: 1000px;
  border-collapse: collapse;
}

.rock-table th,
.rock-table td {
  padding: 8px 12px;
  vertical-align: top;
}

.rock-table th {
  width: 220px;
  text-align: left;
}

.rock-block {
  max-width: 1100px;
  margin: 32px auto;
  text-align: left;
}

.rock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 8px;
}

.rock-table th {
  width: 220px;
  padding: 6px 16px 6px 0;
  vertical-align: top;
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
}

.rock-table td {
  padding: 6px 0 10px 0;
  vertical-align: top;
  line-height: 1.7;
}

.rock-table tr + tr th,
.rock-table tr + tr td {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.tool-list {
  max-width: 1100px;
  margin: 0 auto 60px;
}

.tool-image img {
  width: 100%;
  height: auto;
  display: block;
}

.tool-text h2 {
  font-size: 22px;
  margin-bottom: 8px;
}

.tool-text p {
  line-height: 1.7;
}

.tool-link a {
  font-size: 14px;
}

@media (max-width: 800px) {
  .tool-row {
    grid-template-columns: 1fr;
  }
}

.werkzeug-inline {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 20px 0;
}

.werkzeug-inline img {
  width: 280px;
  height: auto;
  display: block;
}

.werkzeug-inline span {
  font-size: 16px;
  font-weight: 600;
}

.tool-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.tool-table th,
.tool-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

.tool-table th {
  background: #f5f5f5;
  font-weight: 700;
}

.page-mohs {
  max-width: 1280px;
  margin: 0 auto;
}

.mohs-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
  gap: 32px;
  align-items: start;
  padding: 34px;
  margin-bottom: 34px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(194, 219, 236, 0.9), transparent 34%),
    radial-gradient(circle at bottom left, rgba(233, 241, 247, 0.95), transparent 30%),
    linear-gradient(135deg, #f7fafc 0%, #edf4f8 100%);
  border: 1px solid #dbe6ee;
  overflow: hidden;
}

.mohs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #d9e8f3;
  color: #13324d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mohs-hero-copy h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.05;
}

.mohs-hero-copy p {
  margin: 0;
  line-height: 1.8;
  color: #334155;
  max-width: 68ch;
}

.mohs-hero-copy {
  align-self: start;
}

.mohs-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.mohs-fact {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(19, 50, 77, 0.08);
}

.mohs-fact strong {
  display: block;
  margin-bottom: 6px;
  font-size: 22px;
}

.mohs-fact span {
  color: #4d6477;
  line-height: 1.5;
}

.mohs-hero-visual {
  position: relative;
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: stretch;
}

.mohs-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}

.mohs-hero-orb--1 {
  width: 240px;
  height: 240px;
  top: 10px;
  right: 20px;
  background: radial-gradient(circle, rgba(93, 155, 208, 0.5) 0%, rgba(93, 155, 208, 0.08) 65%, transparent 100%);
}

.mohs-hero-orb--2 {
  width: 180px;
  height: 180px;
  bottom: 30px;
  left: 30px;
  background: radial-gradient(circle, rgba(16, 76, 129, 0.35) 0%, rgba(16, 76, 129, 0.06) 70%, transparent 100%);
}

.mohs-hero-panel {
  position: relative;
  width: min(360px, 100%);
  padding: 24px;
  border-radius: 24px;
  background: rgba(9, 27, 43, 0.92);
  color: #fff;
  box-shadow: 0 18px 36px rgba(9, 27, 43, 0.24);
}

.mohs-hero-panel span {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b7d2e6;
}

.mohs-hero-panel strong {
  display: block;
  font-size: 24px;
  line-height: 1.3;
}

.mohs-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 24px;
  margin-bottom: 34px;
}

.mohs-insight-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.mohs-hero .mohs-insight-grid {
  margin-top: 8px;
  margin-bottom: 0;
}

.mohs-chart-card,
.mohs-practice-card,
.mohs-archive {
  padding: 24px;
  border-radius: 24px;
  border: 1px solid #dde5ec;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.mohs-practice-card--hero {
  width: 100%;
  align-self: flex-start;
}

.mohs-section-head {
  margin-bottom: 18px;
}

.mohs-section-head h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
}

.mohs-chart-frame,
.mohs-archive-frame {
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fbfd 0%, #eff4f8 100%);
  border: 1px solid #e2eaf0;
}

.mohs-chart-frame img,
.mohs-archive-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.mohs-practice-list {
  display: grid;
  gap: 14px;
}

.mohs-practice-item {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(246,250,253,0.98));
  border: 1px solid #d8e5ef;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.mohs-practice-value {
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: start;
  width: 112px;
  min-width: 112px;
  min-height: 90px;
  padding: 14px 14px 12px;
  border-radius: 20px;
  background: linear-gradient(145deg, #103b61 0%, #1e5f97 52%, #87b2d8 100%);
  color: #fff;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.mohs-practice-value::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -26px;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

.mohs-practice-value-kicker {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.mohs-practice-value strong {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.mohs-practice-label {
  font-size: 18px;
  font-weight: 800;
}

.mohs-practice-desc,
.mohs-practice-note,
.mohs-footnote {
  color: #4d6477;
  line-height: 1.7;
}

.mohs-practice-note {
  margin: 18px 0 0;
}

.mohs-scale-section {
  margin-bottom: 34px;
}

.mohs-scale-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.mohs-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid #dfe7ee;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

a.mohs-card {
  color: inherit;
  text-decoration: none;
}

.mohs-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
}

a.mohs-card:visited,
a.mohs-card:active {
  color: inherit;
}

a.mohs-card:focus-visible {
  outline: 3px solid rgba(18, 58, 91, 0.22);
  outline-offset: 3px;
}

.mohs-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.mohs-card-number {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #123a5b;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}

.mohs-card-line {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d9e7f2 0%, #7aa9cf 100%);
}

.mohs-card-media {
  aspect-ratio: 1 / 1;
  margin-bottom: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e8eef3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
}

.mohs-card-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.mohs-card-media--fallback {
  background: linear-gradient(135deg, #e8f0f6 0%, #f8fbfd 100%);
}

.mohs-card-media--fallback span {
  font-size: 34px;
  font-weight: 800;
  color: #174264;
  letter-spacing: 0.03em;
}

.mohs-card-body h3 {
  margin: 0 0 8px;
  font-size: 22px;
}

.mohs-card-formula {
  margin-bottom: 10px;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: #3c5568;
  overflow-wrap: anywhere;
  word-break: normal;
}

.mohs-card-formula sub {
  font-size: 0.74em;
  line-height: 0;
  vertical-align: sub;
}

.mohs-card-body p {
  margin: 0 0 14px;
  color: #4d6477;
  line-height: 1.65;
}

.mohs-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 999px;
  background: #123a5b;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.mohs-card-link--muted {
  background: #e9f0f5;
  color: #36546b;
}

@media (max-width: 1200px) {
  .mohs-scale-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .mohs-hero,
  .mohs-insight-grid {
    grid-template-columns: 1fr;
  }

  .mohs-facts {
    grid-template-columns: 1fr;
  }

  .mohs-scale-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .content > .page-mohs,
  .content > .page-uv,
  .content > .page-acid,
  .content > .page-bruch,
  .content > .page-crystal,
  .content > .page-werkzeug-story {
    margin-top: -12px;
  }

  .mohs-hero,
  .mohs-chart-card,
  .mohs-practice-card,
  .mohs-archive {
    padding: 18px;
  }

  .mohs-practice-item {
    grid-template-columns: 1fr;
  }

  .mohs-practice-value {
    width: 100%;
    min-width: 0;
    min-height: 78px;
  }

  .mohs-scale-grid {
    grid-template-columns: 1fr;
  }

  .mohs-hero-panel strong {
    font-size: 20px;
  }
}

.page-spaltbarkeit {
  max-width: 1280px;
  margin: 0 auto;
}

.spalt-intro {
  max-width: 1100px;
  margin: 0 auto 28px;
  line-height: 1.8;
}

.spalt-intro--card {
  max-width: none;
  margin: 0;
}

.spalt-overview-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 28px;
  align-items: start;
  margin: 0 auto 34px;
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef4f8 100%);
  border: 1px solid #dde7ef;
}

.spalt-kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #d8e7f3;
  color: #10324d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spalt-overview-copy h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3vw, 38px);
}

.spalt-overview-copy p {
  margin: 0;
  color: #334155;
  line-height: 1.8;
}

.spalt-scale {
  display: grid;
  gap: 12px;
}

.spalt-scale-step {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  color: #102a43;
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.spalt-scale-step:hover,
.spalt-scale-step:focus-visible,
.spalt-level-card[data-spalt]:hover,
.spalt-level-card[data-spalt]:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 35, 55, 0.08);
}

.spalt-level-card[data-spalt] {
  cursor: pointer;
}

.spalt-scale-step--strong {
  background: linear-gradient(90deg, #0f4c81 0%, #2563a6 100%);
  color: #fff;
}

.spalt-scale-step--medium-strong {
  background: linear-gradient(90deg, #3578b8 0%, #5e9bd0 100%);
  color: #fff;
}

.spalt-scale-step--medium {
  background: linear-gradient(90deg, #a5c7e3 0%, #c5dcee 100%);
}

.spalt-scale-step--weak {
  background: linear-gradient(90deg, #dce8f2 0%, #ecf3f8 100%);
}

.spalt-scale-step--none {
  background: linear-gradient(90deg, #f3f4f6 0%, #fafafa 100%);
}

.spalt-scale-rank {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  font-size: 22px;
  font-weight: 800;
}

.spalt-scale-step--medium .spalt-scale-rank,
.spalt-scale-step--weak .spalt-scale-rank,
.spalt-scale-step--none .spalt-scale-rank {
  background: rgba(16, 42, 67, 0.08);
}

.spalt-scale-label {
  font-size: 18px;
  font-weight: 800;
  text-transform: capitalize;
}

.spalt-scale-count {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.9;
}

.spalt-levels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.spalt-level-card {
  padding: 24px;
  border-radius: 22px;
  border: 1px solid #dde3ea;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.spalt-level-card--strong {
  border-top: 5px solid #0f4c81;
}

.spalt-level-card--medium-strong {
  border-top: 5px solid #3578b8;
}

.spalt-level-card--medium {
  border-top: 5px solid #76a9d1;
}

.spalt-level-card--weak {
  border-top: 5px solid #b7cad8;
}

.spalt-level-card--none {
  border-top: 5px solid #cfd5db;
}

.spalt-level-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  margin-bottom: 10px;
}

.spalt-level-head h2 {
  margin: 6px 0 0;
  font-size: 30px;
  text-transform: capitalize;
}

.spalt-level-rank {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5b7083;
}

.spalt-level-badge {
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 999px;
  background: #edf3f8;
  color: #14324a;
  font-weight: 800;
}

.spalt-level-summary {
  margin: 0 0 16px;
  color: #334155;
  line-height: 1.8;
}

.spalt-strength {
  margin-bottom: 16px;
}

.spalt-strength-label {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #4a6072;
}

.spalt-strength-bar {
  height: 12px;
  border-radius: 999px;
  background: #eaf0f4;
  overflow: hidden;
}

.spalt-strength-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f4c81 0%, #5e9bd0 100%);
}

.spalt-level-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.spalt-level-tags span {
  padding: 7px 12px;
  border-radius: 999px;
  background: #f3f7fa;
  color: #29465f;
  font-size: 13px;
  font-weight: 700;
}

.spalt-mineral-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.spalt-mineral-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fbfcfd;
  border: 1px solid #e5edf3;
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.spalt-mineral-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.spalt-mineral-thumb {
  aspect-ratio: 1 / 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.spalt-mineral-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.spalt-mineral-body {
  padding: 12px;
}

.spalt-mineral-name {
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 6px;
}

.spalt-mineral-meta {
  font-size: 13px;
  line-height: 1.5;
  color: #5b7083;
}

.spalt-level-footer {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.spalt-more {
  color: #486175;
  font-size: 14px;
  font-weight: 700;
}

.spalt-empty,
.spalt-footnote {
  margin-top: 14px;
  color: #475569;
  line-height: 1.7;
}

@media (max-width: 980px) {
  .spalt-overview-card {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .spalt-level-head {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .page-glanz-ladder .glanz-level-card .spalt-level-summary {
    min-height: 0;
  }

  .spalt-scale-step {
    grid-template-columns: 48px 1fr;
  }

  .spalt-scale-count {
    grid-column: 1 / -1;
  }

  .spalt-level-card {
    padding: 18px;
  }

  .spalt-level-head h2 {
    font-size: 24px;
  }

  .spalt-level-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .spalt-level-footer .btn-more {
    width: 100%;
    text-align: center;
  }
}

.tool-video video {
  width: 100%;
  max-width: 800px;
  display: block;
  margin: 12px 0;
}

body.page-werkzeug-salzsaeure .tool-row {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

body.page-werkzeug-salzsaeure .tool-video {
  margin-top: 18px;
  padding: 14px;
  max-width: 980px;
  border-radius: 22px;
  background: linear-gradient(180deg, #f7f5f1 0%, #efebe4 100%);
  border: 1px solid rgba(110, 95, 73, 0.12);
  box-shadow: 0 16px 34px rgba(24, 28, 34, 0.08);
}

body.page-werkzeug-salzsaeure .tool-video video {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 14px !important;
}

@media (max-width: 900px) {
  body.page-werkzeug-salzsaeure .tool-row,
  body.page-werkzeug-salzsaeure .tool-video {
    max-width: 100%;
  }
}

.tool-audio audio {
  width: 100%;
  max-width: 800px;
  display: block;
  margin-top: 12px;
}

.werkzeug-inline-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.werkzeug-inline-link .werkzeug-inline {
  transition: background 0.15s;
}

.werkzeug-inline-link:hover .werkzeug-inline {
  background: #f5f5f5;
  cursor: pointer;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.checkbox-inline input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.glanz-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.glanz-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.glanz-toggle {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
}

.glanz-panel {
  display: none;
  position: absolute;
  z-index: 1000;
  left: 0;
  right: 0;
  margin-top: 4px;
  padding: 8px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  max-height: 220px;
  overflow-y: auto;
  display: none;
}

.glanz-dropdown.open .glanz-panel {
  display: block;
}

.glanz-panel .checkbox-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  margin-bottom: 4px;
}

.glanz-panel .checkbox-inline input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.glanz-toggle {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 14px;
  text-align: left;
  appearance: none;
  cursor: pointer;
  position: relative;
}

.glanz-toggle::after {
  content: "▾";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none;
}

.mineral-grid--minerals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1200px) {
  .mineral-grid--minerals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .mineral-grid--minerals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .mineral-grid--minerals {
    grid-template-columns: 1fr;
  }
}

.mineral-grid--minerals .mineral-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 14px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mineral-grid--minerals .mineral-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.mineral-grid--minerals .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.mineral-grid--minerals .thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mineral-grid--minerals .thumb--zinnwaldit-zoom img {
  transform: scale(3.2);
  transform-origin: center;
}

.mineral-grid--minerals h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 8px 0 10px;
}

.mineral-grid--minerals .btn-more {
  margin-top: auto;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #1e6bb8;
  background: #1e6bb8;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.mineral-grid--minerals .btn-more:hover {
  background: #15518a;
  border-color: #15518a;
  transform: translateY(-1px);
}

.mineral-grid--overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.mineral-grid--minerals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1200px) {
  .mineral-grid--overview,
  .mineral-grid--minerals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .mineral-grid--overview,
  .mineral-grid--minerals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .mineral-grid--overview,
  .mineral-grid--minerals {
    grid-template-columns: 1fr;
  }
}

.mineral-card {
  background: #f3f3f3 !important;
  border-radius: 14px;
  padding: 20px 16px 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mineral-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.mineral-card .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 2px solid #ececec;
  border-radius: 12px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mineral-card .thumb {
  background: white;
  border: 2px solid #ececec;
  border-radius: 12px;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 6px;
}

.mineral-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 8px 0 12px;
}

.btn-more {
  margin-top: auto;
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  background: #1e6bb8;
  border: 1px solid #1e6bb8;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.12s ease;
}

.btn-more:hover {
  background: #15518a;
  transform: translateY(-1px);
}

.mineral-card h3 {
  margin-top: 0;
}

.mineral-grid--categories .mineral-card .mineral-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 14px;
}

.mineral-card {
  padding-bottom: 14px;
}

.btn-more {
  margin-top: 20px;
  margin-bottom: 12px;
}

.mineral-card .mineral-title {
  order: -1;
  margin-bottom: 10px;
  font-weight: 200;
  text-align: center;
  font-size: 15px;
}

.mineral-grid--categories .mineral-card .mineral-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
}

.mineral-card--rock .mineral-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
}

.mineral-card--rock .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1px solid #e4e4e4;
}

.mineral-card--rock .btn-more {
  margin-top: 12px;
  margin-bottom: 10px;
}

.mineral-card {
  background: #f2f2f2;
  border-radius: 12px;
  padding: 18px 14px 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mineral-card .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.mineral-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 8px 0 10px;
}

.btn-more {
  margin-top: auto;
  margin-bottom: 8px;
}

/* --- Overlay formule chimique sur les cartes --- */
.mineral-card .thumb {
  position: relative;
}

.chem-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.chem-overlay .chem-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #666;
  margin-bottom: 4px;
}

.chem-overlay .chem-symbol {
  font-size: 20px;
  font-weight: 200;
  color: #222;
}

.mineral-card:hover .chem-overlay {
  opacity: 1;
}

#glanzDropdown {
  position: relative;
}

#glanzDropdown.open .glanz-panel {
  display: block;
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.mineral-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.mineral-card .btn-more {
  display: inline-block;
}

.chem-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  pointer-events: none;
}

.chem-symbol-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.chem-symbol {
  font-weight: 800;
  white-space: nowrap;
  line-height: 1.05;
  transform-origin: center;
}

.mineral-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.mineral-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.mineral-title {
  font-weight: 700;
}

.mineral-title::before {
  margin-right: 6px;
}

.tool-intro {
  max-width: 900px;
  margin: 0 auto 24px;
}

.tool-card-text {
  padding: 10px 16px 16px;
  font-size: 0.95rem;
  line-height: 1.35;
}

.mineral-card .thumb {
  position: relative !important;
}

.mineral-card .card-title-overlay {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 999 !important;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
}

.mineral-card {
  cursor: pointer;
}

.mineral-card .btn-more {
  pointer-events: none;
}

.submenu-title {
  text-decoration: none;
  color: #fff;
}

.mineral-card .mineral-title {
  margin: 0 0 12px 0;
  padding: 0;
  background: none;
  border: none;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #111;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.mineral-card .btn-more {
  position: relative;
  z-index: 9999;
  pointer-events: auto;
}

/* =========================================
   WERKZEUGE – GLANZ UNIQUEMENT (image cover)
   ========================================= */
.tool-grid .mineral-card .thumb {
  overflow: hidden;
}

.tool-grid .mineral-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tool-card--kristallsysteme .thumb {
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

.tool-card--kristallsysteme .thumb img,
.tool-thumb--kristallsysteme img {
  width: 92%;
  height: 92%;
  object-fit: contain;
}

body.page-werkzeug-bruch .tool-grid .thumb img {
  object-fit: contain !important;
}

/* =========================================
   WERKZEUGE – GLANZ (Übersicht + Detail)
   ========================================= */
.tool-glanz .thumb {
  overflow: hidden;
}

.tool-glanz .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tool-glanz .thumb img {
  transition: transform 0.35s ease;
}

.tool-glanz .mineral-card:hover .thumb img {
  transform: scale(1.06);
}

/* =========================================
   WERKZEUGE – images cover (Glanz + Salzsäure)
   ========================================= */
/* =========================================
   FIX FINAL GLANZ – image entière visible
   ========================================= */

/* =========================================
   FIX FINAL GLANZ – image plein cadre
   ========================================= */

.tool-glanz-card .thumb,
.glanz-hero-card .thumb {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tool-glanz-card .thumb img,
.glanz-hero-card .thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}
.chem-symbol {
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}

.chem-overlay {
  transform: translateY(-2%);
}

.chem-overlay--apatit {
  transform: translateY(-1%);
}

.chem-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.chem-overlay .chem-label {
  margin-top: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  opacity: 0.75;
}

/* ====== APATIT ====== */
.chem-overlay--apatit .chem-symbol-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 10px 8px;
  transform: none;
}

.chem-overlay--apatit .chem-symbol {
  display: inline-block;
  white-space: normal;
  line-height: 1.2;
  font-size: 12px;
}

.chem-overlay:not(.chem-overlay--apatit) .chem-symbol {
  white-space: nowrap;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}

.tool-grid .mineral-card {
  padding: 16px 14px 18px;
}

.tool-overview-grid .tool-overview-card .mineral-title {
  min-height: 3.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  margin-bottom: 18px;
}

.tool-overview-grid {
  align-items: stretch;
}

.tool-overview-grid .tool-overview-card {
  height: 100%;
  width: 100%;
}

body[data-theme="dark"] .tool-overview-grid .tool-overview-card {
  background: linear-gradient(180deg, #242628 0%, #1c1e20 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34) !important;
}

body[data-theme="dark"] .tool-overview-grid .tool-overview-card .mineral-title {
  color: #f4f6f8 !important;
}

.tool-overview-grid .tool-overview-card .thumb {
  margin-bottom: 14px;
}

.tool-overview-grid .tool-overview-card .btn-more {
  margin-top: auto;
}

.tool-overview-grid .tool-overview-card--kristallform {
  background: inherit;
  border: inherit;
  box-shadow: inherit;
}

body[data-theme="dark"] .tool-overview-grid .tool-overview-card--kristallform {
  background: linear-gradient(180deg, #242628 0%, #1c1e20 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34) !important;
}

.tool-overview-grid .tool-overview-card--kristallform .mineral-title {
  margin: 0 0 12px;
}

.tool-overview-grid .tool-overview-card--kristallform .thumb,
.tool-overview-grid .tool-overview-card--kristallform .tool-thumb--kristallform {
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 2px solid #ececec;
  box-shadow: none;
}

.tool-overview-grid .tool-overview-card--kristallform .thumb img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
}

.tool-overview-grid .tool-overview-card--kristallform .btn-more {
  margin-top: auto;
}

.tool-overview-grid .tool-overview-card--pseudomorphosen .thumb,
.tool-overview-grid .tool-overview-card--bowen .thumb {
  background: #ffffff;
  border: 2px solid #ececec;
  padding: 12px;
}

.tool-overview-grid .tool-overview-card--pseudomorphosen .thumb {
  padding: 0;
  overflow: hidden;
}

.tool-overview-grid .tool-overview-card--pseudomorphosen .thumb img,
.tool-overview-grid .tool-overview-card--bowen .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 10px;
  background-clip: content-box;
}

.tool-overview-grid .tool-overview-card--pseudomorphosen .thumb img {
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

.tool-overview-grid .tool-overview-card--bowen .thumb img {
  background: #eef4fb;
}

.tool-overview-grid .tool-overview-card--glanz .thumb {
  padding: 0 !important;
  overflow: hidden !important;
}

.tool-overview-grid .tool-overview-card--glanz .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.tool-overview-grid .tool-overview-card--strichfarbe .thumb {
  padding: 0 !important;
  overflow: hidden !important;
}

.tool-overview-grid .tool-overview-card--strichfarbe .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.tool-overview-grid .tool-overview-card--magnet .thumb {
  padding: 0 !important;
  overflow: hidden !important;
}

.tool-overview-grid .tool-overview-card--magnet .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.tool-overview-grid .tool-overview-card.tool-glanz-card {
  background: inherit !important;
  border: inherit !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.tool-overview-grid .tool-overview-card.tool-glanz-card .thumb {
  background: inherit !important;
  border: inherit !important;
  border-radius: inherit !important;
  padding: 18px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 / 1 !important;
}

.tool-overview-grid .tool-overview-card.tool-glanz-card .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.mineral-overview-grid {
  align-items: stretch;
}

.mineral-overview-grid .mineral-overview-card {
  height: 100%;
  width: 100%;
}

.mineral-overview-grid .mineral-overview-card .mineral-title {
  min-height: 3.9em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.18;
  margin-bottom: 18px;
}

.mineral-overview-grid .mineral-overview-card .thumb {
  margin-bottom: 14px;
}

.mineral-overview-grid .mineral-overview-card .btn-more {
  margin-top: auto;
}

.mineral-grid--categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

/* =========================================
   GESTEINE – GRILLE RESPONSIVE
   ========================================= */
.page-gesteine {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

.page-gesteine .gesteine-grid--overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  gap: 28px;
  justify-content: center;
  justify-items: stretch;
}

.page-gesteine .gesteine-grid--list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.page-gesteine .mineral-card {
  padding: 16px 14px 18px;
}

.page-gesteine .gesteine-grid--overview .mineral-card {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.page-gesteine .mineral-card .thumb {
  aspect-ratio: 4 / 3;
}

@media (max-width: 900px) {
  .page-gesteine .gesteine-grid--overview {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* ==================================================
   FIX MENU DROPDOWN AU-DESSUS DES CARTES / BOUTONS
   ================================================== */
.topbar,
.menu,
.dropdown {
  position: relative;
  z-index: 20000;
  overflow: visible !important;
}

.dropdown-panel {
  position: absolute;
  z-index: 25000 !important;
}

.submenu-panel {
  position: absolute;
  z-index: 26000 !important;
}

.mineral-card {
  position: relative;
  z-index: 1;
}

.mineral-card .btn-more {
  z-index: 2 !important;
}

.content:has(.page-gesteine) {
  max-width: 1400px;
}

.page-gesteine .gesteine-grid--list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.page-gesteine .gesteine-grid--list .thumb {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
  padding: 6px;
}

@media (max-width: 1200px) {
  .page-gesteine .gesteine-grid--list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .page-gesteine .gesteine-grid--list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 500px) {
  .page-gesteine .gesteine-grid--list {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   SILIKATE
   ========================================= */
#view .mineral-grid.silikate-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

#view .silikate-grid .mineral-card .thumb {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 1 / 1 !important;
  padding: 6px !important;
}

#view .silikate-grid .mineral-card .thumb img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

@media (max-width: 1200px) {
  #view .mineral-grid.silikate-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  #view .mineral-grid.silikate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  #view .mineral-grid.silikate-grid {
    grid-template-columns: 1fr !important;
  }
}

.mineral-grid--minerals .mineral-card .thumb {
  width: 100% !important;
  max-width: none !important;
}

/* ===== FIX overlay formule au-dessus de l'image ===== */
.mineral-card .thumb {
  position: relative !important;
}

.mineral-card .thumb img {
  position: relative;
  z-index: 1;
  display: block;
}

.mineral-card .thumb .chem-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.mineral-card:hover .chem-overlay,
.mineral-card .thumb:hover .chem-overlay {
  opacity: 1;
}

.page-subtitle {
  font-size: 28px;
  font-weight: 800;
  margin: 50px 0 18px;
  text-align: left;
}

/* ===== FIX OVERLAY TEXTE (Glanz) ===== */
.tool-thumb {
  position: relative;
}

.tool-thumb .chem-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 14px;
  background: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tool-thumb .chem-overlay--text .chem-label {
  margin: 0 0 10px 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
}

.tool-thumb .chem-overlay--text .chem-symbol-wrap {
  width: 100%;
  max-width: 220px;
  overflow: hidden;
}

.tool-thumb .chem-overlay--text .chem-symbol {
  white-space: normal !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  transform: none !important;
}

.tool-thumb img {
  transition: opacity 0.2s ease;
}

.tool-thumb {
  overflow: hidden;
  border-radius: 12px;
}

/* === Texte Glanz SANS ligne noire === */
.tool-grid .tool-card-text {
  position: relative;
  text-align: left !important;
  max-width: 260px;
  margin: 14px auto 0;
  padding-left: 0;
  font-size: 14px;
  line-height: 1.45;
}

.tool-grid .tool-card-text::before {
  content: none !important;
}

.tool-grid .tool-card-text p {
  margin: 0;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #0b1c2d;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.filter-chip button {
  background: none;
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
}

.filter-chip button:hover {
  opacity: 1;
}

/* Palette + espaces */
#strichPalette.color-palette,
#strichPalette {
  display: grid;
  grid-template-columns: repeat(5, 34px);
  gap: 0px;
  padding: 0;
  margin: 0;
}

.color-swatch {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  background: #777;
  outline: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.color-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25), 0 10px 22px rgba(0, 0, 0, 0.35);
}

.color-swatch[data-color="schwarz"] {
  background: #2f2f2f;
}

.color-swatch[data-color="beige"] {
  background: #d9b889;
}

.color-swatch[data-color="grau"] {
  background: #c7c7c7;
}

.color-swatch[data-color="braun"] {
  background: #8b5a13;
}

.color-swatch[data-color="weiß"] {
  background: #ffffff;
}

.color-swatch[data-color="orange"] {
  background: #ff7a1a;
}

.color-swatch[data-color="blau"] {
  background: #2f66ff;
}

.color-swatch[data-color="gelb"] {
  background: #ffd400;
}

.color-swatch[data-color="rot"] {
  background: #ff3a3a;
}

.color-swatch[data-color="grün"] {
  background: #86c440;
}

.color-swatch[data-color="weiß2"] {
  background: linear-gradient(135deg, #ffffff, #cfcfcf);
}

.color-swatch[data-color="gold"] {
  background: linear-gradient(135deg, #f6e27a, #caa221);
}

.color-swatch[data-color="violett"] {
  background: #9b6bff;
}

.color-swatch[data-color="weiß"],
.color-swatch[data-color="weiß2"] {
  border-color: rgba(0, 0, 0, 0.15);
}

.color-swatch[data-color="weiß"].active,
.color-swatch[data-color="weiß2"].active {
  border-color: #000;
}

/* ----- inputs Min/Max ----- */
.dichte-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.dichte-range input {
  width: 100%;
  box-sizing: border-box;
}

.dichte-range span {
  font-weight: 600;
  color: #666;
}

/* ----- slider custom ----- */
.range-slider {
  position: relative;
  height: 30px;
  margin-top: 6px;
}

.range-slider .range-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  background: #ddd;
  border-radius: 999px;
  z-index: 1;
}

.range-slider .range-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  background: #7a2cff;
  border-radius: 999px;
  z-index: 2;
}

.range-slider input[type="range"] {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  margin: 0;
  background: transparent;
  z-index: 3;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.range-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border: none;
}

.range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #7a2cff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  margin-top: -5px;
}

.range-slider input[type="range"]::-moz-range-track {
  height: 6px;
  background: transparent;
  border: none;
}

.range-slider input[type="range"]::-moz-range-progress {
  background: transparent;
}

.range-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #7a2cff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* ===== Bouton Filtern sur les cartes Glanz ===== */
.btn-filter-glanz {
  margin-top: 14px;
  display: inline-block;
  width: auto;
  padding: 6px 18px;
  border-radius: 999px;
  background: #1e6bb8;
  border: 1px solid #1e6bb8;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}

.btn-filter-glanz:hover {
  background: #15518a;
  transform: translateY(-1px);
}

.btn-filter-glanz:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid #ccc;
  cursor: pointer;
}

.color-swatch[data-color="farblos"] {
  background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 10px 10px;
  position: relative;
  border: 2px solid #e53935;
}

.color-swatch[data-color="farblos"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 45%, #e53935 45%, #e53935 55%, transparent 55%);
}

.glanz-dropdown .glanz-panel {
  display: none;
}

.glanz-dropdown.open .glanz-panel {
  display: block;
}

.glanz-dropdown {
  position: relative;
}

.glanz-panel {
  position: absolute;
  z-index: 50;
}

.filter-card,
.filter-form,
.field {
  overflow: visible;
}

/* =========================
   DROPDOWNS "push-down"
   ========================= */
.glanz-dropdown,
#kristallDropdown {
  position: relative;
  width: 100%;
}

.glanz-toggle,
.kristall-toggle {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d7d7d7;
  background: #fff;
  cursor: pointer;
  text-align: left;
  position: relative;
  font-size: 14px;
}

.glanz-toggle::after,
.kristall-toggle::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none;
}

.glanz-panel,
.kristall-panel {
  display: none;
  position: static;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  max-height: 260px;
  overflow: auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.glanz-dropdown.open .glanz-panel {
  display: block;
}

#kristallDropdown.open .kristall-panel {
  display: block;
}

.filter-card,
.filter-form,
.field {
  overflow: visible !important;
}

.glanz-dropdown {
  position: relative;
}

.glanz-dropdown .glanz-panel {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: 100%;
  z-index: 9999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  max-height: 260px;
  overflow: auto;
}

.glanz-dropdown.open .glanz-panel {
  display: block;
}

.mineral-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

/* =========================================
   ÜBERSICHT (Gesteine + Lagerstätten)
   ========================================= */
body.page-gesteine-overview #view .mineral-grid,
body.page-gesteine-overview #view .mineral-grid--categories,
body.page-lagerstaetten-overview #view .mineral-grid,
body.page-lagerstaetten-overview #view .mineral-grid--categories {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px)) !important;
  gap: 28px !important;
  justify-content: center !important;
  justify-items: stretch !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}

body.page-gesteine-overview #view .mineral-card,
body.page-lagerstaetten-overview #view .mineral-card {
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 !important;
}

body.page-gesteine-overview #view .mineral-card .thumb,
body.page-lagerstaetten-overview #view .mineral-card .thumb {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.page-gesteine-overview #view .mineral-card .thumb img,
body.page-lagerstaetten-overview #view .mineral-card .thumb img {
  max-width: 100% !important;
  max-height: 240px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 1360px) {
  body.page-gesteine-overview #view .mineral-grid,
  body.page-gesteine-overview #view .mineral-grid--categories,
  body.page-lagerstaetten-overview #view .mineral-grid,
  body.page-lagerstaetten-overview #view .mineral-grid--categories {
    max-width: 1200px !important;
  }
}

@media (max-width: 1050px) {
  body.page-gesteine-overview #view .mineral-grid,
  body.page-gesteine-overview #view .mineral-grid--categories,
  body.page-lagerstaetten-overview #view .mineral-grid,
  body.page-lagerstaetten-overview #view .mineral-grid--categories {
    grid-template-columns: repeat(auto-fit, minmax(260px, 320px)) !important;
  }
}

@media (max-width: 650px) {
  body.page-gesteine-overview #view .mineral-grid,
  body.page-gesteine-overview #view .mineral-grid--categories,
  body.page-lagerstaetten-overview #view .mineral-grid,
  body.page-lagerstaetten-overview #view .mineral-grid--categories {
    grid-template-columns: minmax(260px, 320px) !important;
  }
}

.page-filter .mineral-grid--minerals {
  justify-content: start !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}

.mineral-card .thumb {
  width: 100% !important;
  max-width: 100% !important;
}

.glanz-hero {
  display: flex;
  justify-content: center;
  margin: 22px 0 34px;
}

.glanz-hero-card {
  width: 320px;
  max-width: 95%;
}

/* =========================
   FILTER: grille responsive
   ========================= */
body.page-filter .content {
  max-width: 1600px;
}

body.page-filter .mineral-grid--minerals {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: center;
  gap: 24px;
}

body.page-filter .mineral-grid--minerals .mineral-card {
  width: 100%;
}

body.page-filter .glanz-hero {
  display: flex;
  justify-content: center;
  margin: 10px 0 26px;
}

body.page-filter .glanz-hero-card {
  max-width: 340px;
  width: 100%;
}

body.page-filter .glanz-hero-card .thumb {
  padding: 0 !important;
  overflow: hidden;
}

body.page-filter .glanz-hero-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tool-glanz-card {
  background: #f2f2f2;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #e3e3e3;
}

.tool-glanz-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.tool-glanz-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.tool-glanz-card .mineral-title {
  background: transparent !important;
}

.mineral-card.tool-glanz-card,
.mineral-card.glanz-hero-card {
  background: #f2f2f2 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #e3e3e3 !important;
}

.mineral-card.tool-glanz-card .thumb,
.mineral-card.glanz-hero-card .thumb {
  background: rgba(255, 255, 255, 0.55) !important;
}

.thumb {
  position: relative;
}

.chem-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  overflow: hidden;
}

.chem-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.85;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.chem-symbol-wrap {
  display: block;
  width: 100%;
  overflow: hidden;
}

.chem-symbol {
  display: inline-block;
  transform-origin: left center;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1.1;
}

.chem-symbol {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chem-overlay--text {
  background: rgba(0, 0, 0, 0.45) !important;
  color: #fff !important;
}

/* ===============================
   GLANZ TEXT OVERLAY – FIX FINAL
   =============================== */
.tool-thumb {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

.tool-thumb .chem-overlay--text {
  position: absolute !important;
  inset: 50px !important;
  z-index: 999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 16px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  color: #111 !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.mineral-card:hover .tool-thumb img {
  opacity: 1 !important;
}

.filter-subtitle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 12px 0 26px;
  text-align: left;
  width: 100%;
}

.filter-subtitle-label {
  font-weight: 700;
  white-space: nowrap;
}

.active-filters.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-filter .content {
  text-align: left;
}

.page-filter .filter-subtitle {
  margin-left: 0;
}

.filter-subtitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
  width: 100%;
}

.active-filters.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.filter-subtitle-label {
  white-space: nowrap;
}

/* =========================
   KRISTALL dropdown comme GLANZ
   ========================= */
#kristallDropdown {
  position: relative;
}

#kristallDropdown.open #f_kristall_group {
  display: block;
}

.filter-card,
.filter-form,
.field {
  overflow: visible;
}

/* =========================
   FIX : FORMEL centré
   ========================= */
.mineral-card .thumb .chem-overlay:not(.chem-overlay--text) {
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 16px !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

.mineral-card .thumb .chem-overlay:not(.chem-overlay--text) .chem-symbol-wrap {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

.mineral-card .thumb .chem-overlay:not(.chem-overlay--text) .chem-symbol {
  text-align: center !important;
  transform-origin: center center !important;
  white-space: nowrap !important;
  display: inline-block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
}

.mineral-card .thumb .chem-overlay:not(.chem-overlay--text) .chem-symbol {
  font-size: 24px !important;
  font-weight: 490 !important;
}

/* ===== Bandeau "Filter nach" + chips ===== */
.filter-subtitle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 10px 0 18px;
}

.filter-subtitle-label {
  font-weight: 800;
  color: #111;
  white-space: nowrap;
}

.active-filters.inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}

/* Kristall dropdown flottant */
#kristallDropdown {
  position: relative;
}

#kristallDropdown #f_kristall_group {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: 100%;
  z-index: 9999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  max-height: 260px;
  overflow: auto;
}

#kristallDropdown.open #f_kristall_group {
  display: block;
}

.filter-card,
.filter-form,
.field {
  overflow: visible;
}

/* =========================
   KRISTALL DROPDOWN
   ========================= */
.kristall-dropdown {
  position: relative;
  width: 100%;
}

.kristall-dropdown .kristall-panel {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: 100%;
  z-index: 9999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  max-height: 260px;
  overflow: auto;
}

.kristall-dropdown.open .kristall-panel {
  display: block;
}

.filter-card,
.filter-form,
.field {
  overflow: visible;
}

.glanz-dropdown .glanz-panel {
  position: absolute;
}

/* =========================
   DROPDOWNS (Glanz + Kristall)
   ========================= */
.glanz-dropdown,
#kristallDropdown {
  position: relative;
  width: 100%;
}

.glanz-toggle,
.kristall-toggle {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d7d7d7;
  background: #fff;
  cursor: pointer;
  text-align: left;
  position: relative;
  font-size: 14px;
}

.glanz-toggle::after,
.kristall-toggle::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none;
}

.glanz-panel,
.kristall-panel {
  display: none;
  position: static;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  max-height: 260px;
  overflow: auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.glanz-dropdown.open .glanz-panel {
  display: block;
}

#kristallDropdown.open .kristall-panel {
  display: block;
}

.filter-card,
.filter-form,
.field {
  overflow: visible !important;
}

/* =========================================
   DROPDOWNS "PUSH DOWN"
   ========================================= */
.filter-card,
.filter-form,
.field {
  overflow: visible !important;
}

#glanzDropdown {
  width: 100%;
}

#glanzDropdown .glanz-panel {
  display: none !important;
  position: static !important;
  width: 100% !important;
  margin-top: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  max-height: 260px;
  overflow: auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

#glanzDropdown.open .glanz-panel {
  display: block !important;
}

#kristallDropdown {
  width: 100%;
}

#kristallDropdown #f_kristall_group {
  display: none !important;
  position: static !important;
  width: 100% !important;
  margin-top: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  max-height: 260px;
  overflow: auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

#kristallDropdown.open #f_kristall_group {
  display: block !important;
}

/* ===== STRICHFARBE – KACHELN ===== */
.tool-grid--strichfarbe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto 60px;
}

.strich-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  color: inherit;
}

.strich-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.strich-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
}

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

.strich-title {
  padding: 12px 14px;
  font-weight: 800;
  font-size: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.strich-overlay {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.strich-card:hover .strich-overlay {
  opacity: 1;
  transform: translateY(0);
}

.strich-overlay .label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 4px;
}

.strich-overlay .mineral {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.strich-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.strich-mineral {
  margin-top: 10px;
  font-weight: 600;
}

.strich-mineral {
  margin-top: 10px;
  font-weight: 600;
  text-align: center;
}

/* =========================================
   LISTES DE MINÉRAUX
   ========================================= */
.mineral-grid--minerals {
  grid-template-columns: repeat(auto-fill, 230px) !important;
  gap: 18px !important;
  justify-content: start;
}

.mineral-grid--minerals .mineral-card {
  padding: 14px 12px 16px;
}

.mineral-grid--minerals .thumb {
  aspect-ratio: 1 / 1;
  padding: 4px;
}

.mineral-grid--minerals .mineral-title {
  font-size: 14px;
}

.mineral-grid--minerals .btn-more {
  font-size: 12px;
  padding: 5px 14px;
}

.tool-thumb .chem-overlay--text {
  inset: 20px !important;
}

.chem-symbol {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tool-thumb .chem-symbol {
  white-space: normal;
  overflow: visible;
  display: block;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.35;
  font-weight: 600;
}

/* WRAP image */
.streak-wrap {
  position: relative;
}

.page-strichfarbe {
  display: grid;
  gap: 28px;
  max-width: 1260px;
  margin: 0 auto 36px;
}

.strich-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 28px;
  padding: 30px;
  border-radius: 34px;
  overflow: hidden;
  background: #f2ede4;
  border: 1px solid rgba(74, 84, 96, 0.08);
  box-shadow: 0 20px 44px rgba(27, 41, 53, 0.08);
}

.strich-hero-copy,
.strich-hero-note,
.strich-hero-media {
  position: relative;
  z-index: 1;
}

.strich-hero-kicker,
.strich-lab-kicker,
.strich-reference-kicker {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(28, 53, 77, 0.08);
  color: #22425f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.strich-hero h2 {
  margin: 18px 0 16px;
  font-size: clamp(38px, 4vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: #111;
}

.strich-hero-richtext {
  color: #26384a;
  font-size: 19px;
  line-height: 1.8;
  max-width: 760px;
}

.strich-hero-richtext p {
  margin: 0 0 16px;
}

.strich-hero-media {
  align-self: center;
}

.strich-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.strich-hero-tags span {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(40, 57, 73, 0.08);
  box-shadow: 0 10px 20px rgba(31, 45, 58, 0.06);
  color: #1b3650;
  font-weight: 700;
}

.strich-hero-note {
  align-self: center;
  padding: 28px;
  border-radius: 28px;
  background: linear-gradient(160deg, #24303c 0%, #2f3d4a 100%);
  color: #eef3f7;
  box-shadow: 0 20px 36px rgba(15, 21, 29, 0.22);
}

.strich-hero-note span {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cfe0ef;
}

.strich-hero-note strong {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1.15;
}

.strich-hero-note p {
  margin: 0;
  color: #edf4fb;
  font-size: 17px;
  line-height: 1.7;
}

.strich-hero-note .strich-hero-richtext {
  max-width: none;
  margin-top: 16px;
  color: #edf4fb;
  font-size: 16px;
  line-height: 1.75;
}

.strich-hero-note .strich-hero-richtext p {
  margin: 0 0 14px;
}

.strich-lab,
.strich-reference-panel {
  padding: 28px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244, 247, 250, 0.96));
  border: 1px solid rgba(71, 84, 96, 0.08);
  box-shadow: 0 16px 34px rgba(27, 41, 53, 0.08);
}

.strich-lab-head,
.strich-reference-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.strich-lab-head h3,
.strich-reference-head h3 {
  margin: 14px 0 0;
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #111;
}

.streak-card {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  transform: none !important;
  transition: none !important;
}

.streak-card--feature {
  background: linear-gradient(180deg, #fffdfa 0%, #f5f8fb 100%);
  border: 1px solid rgba(36, 55, 73, 0.08);
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 18px 36px rgba(28, 41, 55, 0.08);
}

.streak-card--feature .thumb {
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
  max-width: 920px;
  margin: 0 auto;
}

.streak-card--hero {
  max-width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.streak-card:hover,
.streak-card:focus-within {
  transform: none !important;
  box-shadow: none !important;
}

.streak-card--hero .thumb {
  max-width: 100%;
  border-radius: 0;
  background: transparent;
  border: 0;
  padding: 0;
  aspect-ratio: auto;
  display: block;
}

.streak-card--hero .thumb img {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: cover;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}

.streak-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: help;
  z-index: 5;
}

.streak-spot:hover {
  outline: 2px dashed rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}

.streak-tooltip {
  position: absolute;
  z-index: 10;
  display: none;
  pointer-events: none;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}

.strich-lab-caption {
  padding: 14px 8px 4px;
  color: #41576b;
  font-size: 16px;
  line-height: 1.7;
}

.tool-row .tool-image {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ===== STRICHFARBE – petites cartes ===== */
.strich-grid {
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 220px);
  gap: 22px;
  justify-content: start;
}

.strich-mini-card {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
  border-radius: 20px;
  padding: 16px 14px 18px;
  border: 1px solid rgba(53, 71, 90, 0.08);
  box-shadow: 0 10px 24px rgba(27, 41, 53, 0.08);
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.strich-mini-card:hover {
  transform: translateY(-6px);
  border-color: rgba(48, 95, 140, 0.18);
  box-shadow: 0 18px 32px rgba(25, 42, 57, 0.14);
}

.strich-mini-thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(52, 67, 85, 0.08);
  margin-bottom: 12px;
}

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

.strich-mini-title {
  font-size: 15px;
  font-weight: 700;
  color: #182a3b;
}

.strich-mini-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.mineral-card .thumb .chem-overlay:not(.chem-overlay--text) .chem-label {
  font-weight: 400 !important;
}

.mineral-card .chem-overlay .chem-label,
.mineral-card .chem-overlay .chem-label strong,
.mineral-card .chem-overlay .chem-label b {
  font-weight: 400 !important;
}

.topbar .menu > .menu-item > a,
.topbar .menu > .menu-item > button {
  font-weight: 700;
}

.thumb .chem-overlay .chem-label {
  font-weight: 400 !important;
}

.thumb .chem-overlay .chem-label strong,
.thumb .chem-overlay .chem-label b {
  font-weight: 400 !important;
}

.mineral-card .thumb .chem-overlay:not(.chem-overlay--text) {
  overflow: visible !important;
}

.mineral-card .thumb .chem-overlay:not(.chem-overlay--text) .chem-symbol-wrap {
  overflow: visible !important;
}

.mineral-card .thumb .chem-overlay:not(.chem-overlay--text) .chem-symbol {
  display: inline-block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  line-height: 1.15 !important;
  padding-bottom: 2px !important;
}

.mineral-card--category .mineral-title {
  line-height: 1.25;
  min-height: calc(1.25em * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 0 12px;
}

/* ===== rendre Lagerstätten IDENTIQUE à Übersicht – Gesteine ===== */
.lagerstaetten-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  max-width: 1440px;
  margin: 0 auto;
}

.lagerstaetten-grid .mineral-card {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 16px 14px 14px;
}

.lagerstaetten-grid .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lagerstaetten-grid .thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.lagerstaetten-grid .mineral-title {
  font-size: 18px !important;
  line-height: 1.25;
  min-height: calc(1.25em * 2);
  margin: 0 0 12px !important;
}

.lagerstaetten-grid .btn-more {
  margin-top: auto;
}

.lagerstaetten-grid .mineral-card--locked {
  cursor: not-allowed;
  opacity: 0.72;
}

.lagerstaetten-grid .mineral-card--locked .btn-more {
  background: #8aa9c6;
}

@media (max-width: 1360px) {
  .lagerstaetten-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1100px;
  }
}

@media (max-width: 1100px) {
  .lagerstaetten-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
  }
}

@media (max-width: 700px) {
  .lagerstaetten-grid {
    grid-template-columns: 1fr;
    max-width: 340px;
    gap: 20px;
  }
}

/* ===== Lagerstaetten-Schema aus Excel ===== */
.page-lager-overview.page-lager-schema {
  display: grid;
  gap: 30px;
}

.page-lager-overview.page-lager-schema .page-title {
  margin: 0;
}

.page-lager-overview.page-lager-schema .lagerstaetten-grid {
  margin-top: 8px;
}

.lager-schema-hero,
.lager-schema-section,
.lager-schema-loading,
.lager-schema-error {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid #d9e4ec;
  box-shadow: 0 16px 34px rgba(27, 41, 53, 0.08);
}

.lager-schema-hero,
.lager-schema-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 252, 0.96));
}

.lager-schema-loading,
.lager-schema-error {
  padding: 22px 24px;
  background: #fff;
  font-size: 17px;
  line-height: 1.7;
}

.lager-schema-error {
  color: #9f2f2f;
  border-color: #efc8c8;
  background: linear-gradient(180deg, #fffafa 0%, #fff 100%);
}

.lager-schema-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
  gap: 24px;
  padding: 32px;
}

.lager-schema-hero::before,
.lager-schema-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.8), transparent 28%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.1), transparent 52%);
  pointer-events: none;
}

.lager-schema-hero-copy,
.lager-schema-hero-note,
.lager-schema-section-head,
.lager-schema-matrix-grid,
.lager-schema-detail-stack,
.lager-schema-procurement-grid,
.lager-schema-footnote {
  position: relative;
  z-index: 1;
}

.lager-schema-kicker,
.lager-schema-section-kicker,
.lager-schema-tier {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lager-schema-kicker,
.lager-schema-section-kicker {
  padding: 7px 13px;
  color: #11324d;
  background: #e7f0f7;
  border: 1px solid rgba(17, 50, 77, 0.08);
}

.lager-schema-hero-copy {
  display: grid;
  gap: 14px;
  align-content: start;
}

.lager-schema-hero-copy p,
.lager-schema-hero-note p,
.lager-schema-section-head p,
.lager-schema-procurement-card p {
  margin: 0;
  color: #425164;
  font-size: 16px;
  line-height: 1.75;
}

.lager-schema-hero-note {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(16, 42, 64, 0.08);
}

.lager-schema-hero-note span {
  color: #5d6b7c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lager-schema-hero-note strong {
  color: #102d46;
  font-size: 24px;
  line-height: 1.2;
}

.lager-schema-section {
  display: grid;
  gap: 22px;
  padding: 28px;
}

.lager-schema-section-head {
  display: grid;
  gap: 10px;
}

.lager-schema-section-head h2 {
  margin: 0;
  color: #102d46;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.lager-schema-matrix-grid,
.lager-schema-detail-stack {
  display: grid;
  gap: 22px;
}

.lager-schema-matrix-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lager-schema-category-card,
.lager-schema-detail-card {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid var(--lager-schema-soft, #d9e4ec);
  background:
    linear-gradient(180deg, var(--lager-schema-tint, #f7fafc) 0%, rgba(255, 255, 255, 0.98) 58%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.lager-schema-category-card::before,
.lager-schema-detail-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--lager-schema-accent, #1e6bb8);
}

.lager-schema-category-head {
  display: grid;
  gap: 10px;
}

.lager-schema-category-head h3,
.lager-schema-group-head h4,
.lager-schema-detail-head h4,
.lager-schema-procurement-card h3,
.lager-schema-entry-head h5 {
  margin: 0;
  color: #102d46;
}

.lager-schema-category-head h3 {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.lager-schema-category-head p {
  margin: 0;
  max-width: 60ch;
  color: #425164;
  line-height: 1.7;
}

.lager-schema-category-head--detail {
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(16, 45, 70, 0.08);
}

.lager-schema-tier {
  padding: 6px 11px;
  color: var(--lager-schema-accent, #1e6bb8);
  background: var(--lager-schema-soft, #e8eff5);
  border: 1px solid rgba(16, 45, 70, 0.08);
}

.lager-schema-group-grid,
.lager-schema-detail-grid,
.lager-schema-detail-entry-grid,
.lager-schema-entry-list {
  display: grid;
  gap: 16px;
}

.lager-schema-group-grid,
.lager-schema-detail-grid {
  grid-template-columns: 1fr;
}

.lager-schema-entry-list,
.lager-schema-detail-entry-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lager-schema-group-card,
.lager-schema-detail-block,
.lager-schema-entry-card,
.lager-schema-procurement-card {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(16, 45, 70, 0.08);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.lager-schema-group-card,
.lager-schema-detail-block {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-left: 4px solid var(--lager-schema-accent, #1e6bb8);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), var(--lager-schema-soft, #eef4f8));
}

.lager-schema-entry-card,
.lager-schema-procurement-card {
  padding: 16px 18px;
}

.lager-schema-group-head,
.lager-schema-entry-head,
.lager-schema-detail-head,
.lager-schema-procurement-top {
  display: grid;
  gap: 10px;
}

.lager-schema-group-head h4,
.lager-schema-detail-head h4 {
  font-size: 20px;
  line-height: 1.25;
}

.lager-schema-group-lead {
  margin: 0;
  color: #425164;
  font-size: 15px;
  line-height: 1.7;
}

.lager-schema-reference-list {
  margin: 0;
  padding-left: 18px;
  color: #314355;
  display: grid;
  gap: 8px;
  line-height: 1.65;
}

.lager-schema-reference-list li::marker {
  color: var(--lager-schema-accent, #1e6bb8);
}

.lager-schema-variant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lager-schema-variant-list span,
.lager-schema-meta-line span {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--lager-schema-soft, #eef4f8);
  color: #21415e;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.lager-schema-entry-head h5,
.lager-schema-procurement-card h3 {
  font-size: 18px;
  line-height: 1.35;
}

.lager-schema-richtext {
  color: #2f4153;
  font-size: 15px;
  line-height: 1.78;
}

.lager-schema-richtext > *:first-child {
  margin-top: 0;
}

.lager-schema-richtext > *:last-child {
  margin-bottom: 0;
}

.lager-schema-richtext p,
.lager-schema-richtext ul {
  margin: 0 0 12px;
}

.lager-schema-richtext ul {
  padding-left: 20px;
}

.lager-schema-richtext li {
  margin-bottom: 7px;
}

.lager-schema-detail-foot {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(16, 45, 70, 0.08);
}

.lager-schema-detail-label {
  color: #607183;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lager-schema-procurement-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lager-schema-procurement-top {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.lager-schema-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lager-schema-need {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

.lager-schema-need--yes {
  color: #176438;
  background: #e7f6ed;
  border-color: #b8e1c6;
}

.lager-schema-need--partial {
  color: #8d5a11;
  background: #fff2dc;
  border-color: #f0d59f;
}

.lager-schema-need--maybe {
  color: #275b7b;
  background: #e7f2fa;
  border-color: #bfd7e7;
}

.lager-schema-need--neutral {
  color: #516476;
  background: #eef3f7;
  border-color: #d6e0e8;
}

.lager-schema-footnote {
  margin: 0;
  padding: 18px 20px;
  border-radius: 18px;
  background: #fbfcfd;
  border: 1px dashed #c8d6e2;
  color: #3d5063;
  line-height: 1.7;
}

.lager-schema-stage-grid,
.lager-schema-focus-content,
.lager-schema-focus-stack {
  display: grid;
  gap: 22px;
}

.lager-schema-stage-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
  justify-content: center;
}

.lager-schema-stage-card {
  position: relative;
  display: grid;
  gap: 14px;
  width: 100%;
  padding: 24px;
  border: 1px solid var(--lager-schema-soft, #d9e4ec);
  border-radius: 24px;
  background:
    linear-gradient(180deg, var(--lager-schema-tint, #f7fafc) 0%, rgba(255, 255, 255, 0.98) 60%);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
  text-align: left;
  font: inherit;
  color: #102d46;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.lager-schema-stage-card::before,
.lager-schema-text-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--lager-schema-accent, #1e6bb8);
}

.lager-schema-stage-card > *,
.lager-schema-text-panel > * {
  position: relative;
  z-index: 1;
}

.lager-schema-stage-card h3,
.lager-schema-text-head h3 {
  margin: 0;
  color: #111111;
  letter-spacing: -0.04em;
}

.lager-schema-stage-card h3 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.06;
}

.lager-schema-stage-card p {
  margin: 0;
  color: #465568;
  line-height: 1.75;
}

.lager-schema-stage-card:hover,
.lager-schema-stage-card.is-active {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.12);
}

.lager-schema-stage-card.is-active {
  border-color: rgba(16, 45, 70, 0.22);
}

.lager-schema-stage-card:focus-visible {
  outline: 3px solid rgba(30, 107, 184, 0.22);
  outline-offset: 4px;
}

.lager-schema-focus-empty {
  padding: 24px;
  border-radius: 22px;
  border: 1px dashed #c8d6e2;
  background: #fbfcfd;
  color: #536578;
  line-height: 1.75;
}

.lager-schema-text-panel {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid var(--lager-schema-soft, #d9e4ec);
  background:
    linear-gradient(180deg, rgba(247, 244, 238, 0.96) 0%, rgba(255, 255, 255, 0.98) 58%);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.lager-schema-text-head {
  display: grid;
  gap: 12px;
}

.lager-schema-text-head h3 {
  font-size: clamp(36px, 4vw, 54px);
  line-height: 0.98;
}

.lager-schema-text-panel .lager-schema-richtext {
  max-width: 78ch;
  color: #405263;
  font-size: 17px;
  line-height: 1.8;
}

@media (max-width: 1180px) {
  .lager-schema-hero,
  .lager-schema-matrix-grid,
  .lager-schema-detail-grid,
  .lager-schema-procurement-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .lager-schema-section,
  .lager-schema-hero {
    padding: 22px;
  }

  .lager-schema-group-grid,
  .lager-schema-entry-list,
  .lager-schema-detail-entry-grid {
    grid-template-columns: 1fr;
  }

  .lager-schema-category-card,
  .lager-schema-detail-card {
    padding: 20px;
  }

  .lager-schema-text-panel,
  .lager-schema-stage-card {
    padding: 22px;
  }
}

@media (max-width: 640px) {
  .lager-schema-hero-note,
  .lager-schema-group-card,
  .lager-schema-detail-block,
  .lager-schema-entry-card,
  .lager-schema-procurement-card {
    padding: 16px;
  }

  .lager-schema-procurement-top {
    grid-template-columns: 1fr;
  }

  .lager-schema-need {
    justify-self: start;
  }

  .lager-schema-text-panel,
  .lager-schema-stage-card,
  .lager-schema-focus-empty {
    padding: 18px;
    border-radius: 20px;
  }

  .lager-schema-text-head h3,
  .lager-schema-stage-card h3 {
    font-size: clamp(28px, 9vw, 38px);
  }
}

.filter-result-badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #0b1c2d;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 18px 0 10px;
}

/* ===== STRICHFARBE – titre en haut ===== */
.strich-mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.strich-mini-title {
  order: -1;
  margin-bottom: 12px;
  margin-top: 0;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

.strich-mini-thumb {
  width: 100%;
}

@media (max-width: 980px) {
  .strich-hero {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .strich-lab,
  .strich-reference-panel {
    padding: 20px;
  }

  .strich-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}

/* ===== Chips Filter ===== */
.active-filters.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #0b1c2d;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.filter-chip button {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: 0.85;
}

.filter-chip button:hover {
  opacity: 1;
}

.filter-subtitle {
  margin: 10px 0 28px;
  padding-bottom: 8px;
}

.filter-result-section + .filter-result-section {
  margin-top: 72px;
}

.section-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 28px 0 24px;
  padding-top: 8px;
  border-top: 1px solid rgba(13, 34, 54, 0.08);
}

.section-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #0d2236;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.section-chip .x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  font-weight: 900;
  font-size: 14px;
}

.section-chip--count {
  background: #eef2f7;
  color: #0d2236;
  border: 1px solid rgba(13, 34, 54, 0.15);
  font-weight: 800;
}

/* ===== MOHSSCHE HÄRTESKALA – image ===== */
.tool-image img {
  max-width: 900px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* =========================
   FIX FINAL – GESTEINE comme ELEMENTE
   ========================= */
.page-gesteine,
.content:has(.page-gesteine) {
  max-width: 1800px !important;
}

.page-gesteine .mineral-grid {
  max-width: none !important;
  margin: 0 auto !important;
}

.page-gesteine .gesteine-grid--list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}

.page-gesteine .gesteine-grid--list .mineral-card {
  width: 100% !important;
  max-width: none !important;
}

.page-gesteine .gesteine-grid--list .thumb {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 1 / 1 !important;
  padding: 6px !important;
}

@media (max-width: 1600px) {
  .page-gesteine .gesteine-grid--list {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 1300px) {
  .page-gesteine .gesteine-grid--list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 1000px) {
  .page-gesteine .gesteine-grid--list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 700px) {
  .page-gesteine .gesteine-grid--list {
    grid-template-columns: 1fr !important;
  }
}

.page-gesteine--sedimentit .gesteine-grid--list {
  grid-template-columns: repeat(auto-fit, 230px) !important;
  justify-content: center !important;
  gap: 18px !important;
}

.page-gesteine--sedimentit .gesteine-grid--list .mineral-card {
  width: 230px !important;
  max-width: 230px !important;
  padding: 14px 12px 16px !important;
}

.page-gesteine--sedimentit .gesteine-grid--list .thumb {
  aspect-ratio: 1 / 1 !important;
  padding: 4px !important;
}

.page-gesteine--sedimentit .gesteine-grid--list .mineral-title {
  font-size: 14px !important;
}

.page-gesteine--sedimentit .gesteine-grid--list .btn-more {
  font-size: 12px !important;
  padding: 5px 14px !important;
}

.page-gesteine--metamorphite .gesteine-grid--list {
  grid-template-columns: repeat(auto-fit, 230px) !important;
  justify-content: center !important;
  gap: 18px !important;
}

.page-gesteine--metamorphite .gesteine-grid--list .mineral-card {
  width: 230px !important;
  max-width: 230px !important;
  padding: 14px 12px 16px !important;
}

.page-gesteine--metamorphite .gesteine-grid--list .thumb {
  aspect-ratio: 1 / 1 !important;
  padding: 4px !important;
}

.page-gesteine--metamorphite .gesteine-grid--list .mineral-title {
  font-size: 14px !important;
}

.page-gesteine--metamorphite .gesteine-grid--list .btn-more {
  font-size: 12px !important;
  padding: 5px 14px !important;
}

.page-gesteine--magmatite .gesteine-grid--overview {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(260px, 320px)) !important;
  gap: 28px !important;
  justify-content: center !important;
  justify-items: stretch !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}


.page-gesteine--magmatite .gesteine-grid--overview .mineral-card {
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 16px 14px 18px !important;
}

.page-gesteine--magmatite .gesteine-grid--overview .thumb {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  max-width: none !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
}

.page-gesteine--magmatite .gesteine-grid--overview .mineral-title {
  min-height: 3.9em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 20px !important;
  line-height: 1.18 !important;
  margin-bottom: 18px !important;
}

.page-gesteine--magmatite .gesteine-grid--overview .thumb img {
  max-width: 100% !important;
  max-height: 240px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.page-gesteine--magmatite .gesteine-grid--overview [data-rock-overview-slug="plutonite"] .thumb img,
.page-gesteine--magmatite .gesteine-grid--overview [data-rock-overview-slug="spezielle-magmatite"] .thumb img,
.page-gesteine--magmatite .gesteine-grid--overview [data-rock-overview-slug="vulkanite"] .thumb img {
  max-width: 82% !important;
  max-height: 176px !important;
}

.page-gesteine--magmatite .gesteine-grid--overview .btn-more {
  margin-top: auto !important;
  align-self: center !important;
  width: auto !important;
  min-width: 120px !important;
  padding: 6px 18px !important;
}

.page-gesteine--overview-empty .gesteine-grid--overview {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px)) !important;
  gap: 28px !important;
  justify-content: center !important;
  justify-items: center !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.page-gesteine--overview-empty .gesteine-grid--overview .adm-add-card {
  width: 100% !important;
  max-width: 320px !important;
  min-height: 440px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-gesteine--compact .gesteine-grid--list {
  grid-template-columns: repeat(auto-fit, 230px) !important;
  justify-content: center !important;
  gap: 18px !important;
}

.page-gesteine--compact .gesteine-grid--list .mineral-card {
  width: 230px !important;
  max-width: 230px !important;
  padding: 14px 12px 16px !important;
}

.page-gesteine--compact .gesteine-grid--list .thumb {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  padding: 4px !important;
}

.page-gesteine--compact .gesteine-grid--list .mineral-title {
  font-size: 14px !important;
}

.page-gesteine--compact .gesteine-grid--list .btn-more {
  font-size: 12px !important;
  padding: 5px 14px !important;
}

.page-gesteine--plutonite .gesteine-grid--list {
  grid-template-columns: repeat(auto-fit, 210px) !important;
  justify-content: center !important;
  gap: 16px !important;
}

.page-gesteine--plutonite .gesteine-grid--list .mineral-card {
  width: 210px !important;
  max-width: 210px !important;
  padding: 12px 10px 14px !important;
}

.page-gesteine--plutonite .gesteine-grid--list .thumb {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  padding: 4px !important;
}

.page-gesteine--plutonite .gesteine-grid--list .thumb img {
  max-width: 100% !important;
  max-height: 150px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.page-gesteine--plutonite .gesteine-grid--list .mineral-title {
  font-size: 13px !important;
}

.page-gesteine--plutonite .gesteine-grid--list .btn-more {
  font-size: 11px !important;
  padding: 5px 12px !important;
}

@media (max-width: 1050px) {
  .page-gesteine--magmatite .gesteine-grid--overview {
    grid-template-columns: repeat(2, minmax(260px, 320px)) !important;
  }
}

@media (max-width: 650px) {
  .page-gesteine--magmatite .gesteine-grid--overview {
    grid-template-columns: minmax(260px, 320px) !important;
  }

  .page-gesteine--compact .gesteine-grid--list {
    grid-template-columns: 1fr !important;
  }

  .page-gesteine--compact .gesteine-grid--list .mineral-card {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 700px) {
  .page-gesteine--sedimentit .gesteine-grid--list {
    grid-template-columns: 1fr !important;
  }

  .page-gesteine--sedimentit .gesteine-grid--list .mineral-card {
    width: 100% !important;
    max-width: none !important;
  }

  .page-gesteine--metamorphite .gesteine-grid--list {
    grid-template-columns: 1fr !important;
  }

  .page-gesteine--metamorphite .gesteine-grid--list .mineral-card {
    width: 100% !important;
    max-width: none !important;
  }
}

.chem-overlay--text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px;
}

.chem-overlay--text .chem-symbol-wrap {
  width: 100%;
  max-height: 130px;
  overflow: auto;
}

.chem-overlay--text .chem-symbol {
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
  font-size: 14px;
}

/* ===== Filter page : aligner les cartes à gauche ===== */
.page-filter .mineral-grid--minerals {
  width: 100%;
  margin: 0;
  justify-content: start;
}

.page-filter .container,
.page-filter .page-content,
.page-filter main {
  margin-left: 0;
  margin-right: auto;
}

body.page-filter .content {
  max-width: none !important;
  margin: 0 !important;
}

body.page-filter .mineral-grid--minerals {
  justify-content: start !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}

/* ==============================
   FORCE FILTER RESULTS A GAUCHE
   ============================== */


.page-filter .content {
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
}

.mineral-grid--categories {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  justify-items: center;
}

.right .content .mineral-grid--categories {
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
  justify-items: center;
}

.page-silikate-overview {
  display: grid;
  gap: 34px;
}

.silikate-overview-section {
  display: grid;
  gap: 20px;
  padding-top: 8px;
}

.silikate-overview-section + .silikate-overview-section {
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  padding-top: 30px;
}

.silikate-overview-header {
  text-align: center;
}

.silikate-overview-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5e6c78;
}

.silikate-overview-header h2 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 800;
  color: #111;
}

.silikate-overview-header p:last-child {
  margin: 10px auto 0;
  max-width: 760px;
  color: #66717d;
  line-height: 1.7;
}

.silikate-overview-minerals-grid .silikate-overview-mineral-card .thumb {
  padding: 14px;
}

.silikate-overview-minerals-grid .silikate-overview-mineral-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


.color-swatch {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  cursor: pointer;
  padding: 0;
}

.color-swatch .swatch-check {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
  color: #111;
  pointer-events: none;
}

.color-swatch.active[data-color="schwarz"] .swatch-check,
.color-swatch.active[data-color="blau"] .swatch-check,
.color-swatch.active[data-color="grau"] .swatch-check,
.color-swatch.active[data-color="braun"] .swatch-check,
.color-swatch.active[data-color="rot"] .swatch-check,
.color-swatch.active[data-color="grün"] .swatch-check {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.color-swatch .swatch-check svg {
  width: 10px;
  height: 10px;
  display: block;
}

/* =========================================
   BRUCH – grands carreaux 2 par ligne
   ========================================= */
.bruch-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: none;
  margin: 30px 0 0;
}

.page-werkzeug-bruch .content {
  width: 100%;
  max-width: none;
}

.page-bruch {
  width: min(100%, 1380px);
  margin: 0 auto;
}

.page-werkzeug-bruch .right {
  background: var(--page-bg);
}

.bruch-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: 28px;
  margin: 8px auto 34px;
  padding: 34px;
  border-radius: 32px;
  overflow: hidden;
  background: #e8e3dc;
  border: 1px solid rgba(100, 91, 74, 0.12);
  box-shadow: 0 22px 44px rgba(24, 28, 34, 0.08);
}

.bruch-hero-copy,
.bruch-hero-panel,
.bruch-hero-media {
  position: relative;
  z-index: 1;
}

.bruch-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bruch-hero-visual {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.bruch-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bruch-hero-kicker {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(56, 83, 109, 0.1);
  color: #27425d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bruch-hero-copy h2 {
  margin: 18px 0 14px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.bruch-hero-copy p {
  margin: 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.8;
  color: #465260;
}

.bruch-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.bruch-hero-tags span {
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(79, 88, 99, 0.12);
  color: #223140;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(20, 25, 31, 0.06);
}

.bruch-hero-panel {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bruch-hero-orbit {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}

.bruch-hero-orbit--one {
  width: 240px;
  height: 240px;
  top: 10px;
  right: 24px;
  background: radial-gradient(circle, rgba(109, 132, 153, 0.26) 0%, rgba(109, 132, 153, 0.04) 68%, transparent 100%);
}

.bruch-hero-orbit--two {
  width: 180px;
  height: 180px;
  bottom: 16px;
  left: 18px;
  background: radial-gradient(circle, rgba(174, 145, 102, 0.24) 0%, rgba(174, 145, 102, 0.04) 66%, transparent 100%);
}

.bruch-hero-card {
  position: relative;
  width: min(360px, 100%);
  padding: 28px;
  border-radius: 26px;
  background: rgba(19, 28, 39, 0.92);
  color: #fff;
  box-shadow: 0 22px 42px rgba(8, 13, 20, 0.24);
}

.bruch-hero-card span {
  display: inline-block;
  margin-bottom: 10px;
  color: #b7cad9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bruch-hero-card strong {
  display: block;
  font-size: 25px;
  line-height: 1.3;
}

.bruch-hero-card p {
  margin: 14px 0 0;
  color: #f3f7fb !important;
  line-height: 1.75;
  opacity: 1;
}

.bruch-row {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #dde3ea;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.bruch-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.7), transparent 24%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 48%);
  pointer-events: none;
}

.bruch-row-top,
.bruch-row-main,
.bruch-row-right {
  position: relative;
  z-index: 1;
}

.bruch-row-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  min-height: 52px;
}

.bruch-row-eyebrow {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bruch-row-tagline {
  max-width: 260px;
  font-weight: 700;
  line-height: 1.5;
  text-align: right;
  color: #44505d;
}

.bruch-row-title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.04em;
  min-height: 1.2em;
}

.bruch-row-main {
  display: grid;
  grid-template-columns: minmax(240px, 0.76fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.bruch-row-visual {
  position: relative;
  min-height: 220px;
  height: 220px;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e5edf3;
  overflow: hidden;
}

.bruch-row-swatch {
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  opacity: 0.22;
}

.bruch-row-desc-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-height: 220px;
  background: #fbfcfd;
  border: 1px solid #e5edf3;
  border-radius: 18px;
  padding: 18px;
}

.bruch-row-image {
  width: 100%;
  height: 100%;
  min-height: 192px;
  background: #fff;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bruch-row-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.08);
  display: block;
}

.bruch-row-desc {
  min-width: 0;
  max-width: 56ch;
}

.bruch-row-desc-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #666;
  margin-bottom: 8px;
  font-weight: 700;
}

.bruch-row-desc-text {
  font-size: 15px;
  line-height: 1.7;
  color: #222;
  text-align: left;
  min-height: 4.9em;
}

.bruch-row-action {
  display: flex;
  justify-content: center;
  margin-top: auto;
}

.bruch-level-footer {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.bruch-row-right-title {
  display: none;
}

.page-werkzeug-bruch .bruch-row-right-title {
  display: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.bruch-example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

@media (min-width: 1500px) {
  .page-bruch {
    width: min(100%, 1480px);
  }

  .bruch-list {
    gap: 32px;
  }

  .bruch-row {
    padding: 34px;
  }
}

.bruch-more {
  margin-top: 14px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  color: #486175;
  cursor: pointer;
}

.bruch-level-footer .bruch-more {
  margin-top: 0;
}

.bruch-example-card {
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid #e5edf3;
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: block;
}

.bruch-example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.bruch-example-thumb {
  aspect-ratio: 1 / 1;
  height: 168px;
  background: #fff;
  border-bottom: 1px solid #e5edf3;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.bruch-example-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
  display: block;
}

.bruch-example-name {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 6px;
}

.bruch-example-body {
  padding: 12px;
}

.bruch-example-meta {
  font-size: 13px;
  line-height: 1.5;
  color: #5b7083;
}

.bruch-empty {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px dashed #d4d4d4;
  border-radius: 14px;
  color: #666;
  font-size: 14px;
}

.bruch-row .btn-filter-bruch {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  width: auto !important;
  min-width: 0;
  padding: 6px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #1e6bb8 0%, #2d7ed0 100%) !important;
  border: 1px solid #1e6bb8 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(30, 107, 184, 0.22);
}

.btn-filter-bruch-more:focus-visible {
  outline: 2px solid rgba(53, 86, 119, 0.3);
  outline-offset: 3px;
  border-radius: 8px;
}

.bruch-tone-shell .bruch-row-eyebrow,
.bruch-tone-shell .bruch-row-swatch {
  background: linear-gradient(135deg, rgba(119, 165, 198, 0.32), rgba(71, 116, 154, 0.16));
}

.bruch-tone-shell {
  border-top: 5px solid #3578b8;
}

.bruch-tone-rough .bruch-row-eyebrow,
.bruch-tone-rough .bruch-row-swatch {
  background: linear-gradient(135deg, rgba(92, 102, 117, 0.3), rgba(63, 72, 86, 0.16));
}

.bruch-tone-rough {
  border-top: 5px solid #6d7f92;
}

.bruch-tone-earth .bruch-row-eyebrow,
.bruch-tone-earth .bruch-row-swatch {
  background: linear-gradient(135deg, rgba(164, 127, 84, 0.3), rgba(119, 84, 43, 0.14));
}

.bruch-tone-earth {
  border-top: 5px solid #b07a3f;
}

.bruch-tone-smooth .bruch-row-eyebrow,
.bruch-tone-smooth .bruch-row-swatch {
  background: linear-gradient(135deg, rgba(153, 164, 178, 0.28), rgba(121, 132, 146, 0.14));
}

.bruch-tone-smooth {
  border-top: 5px solid #9aa8b4;
}

.bruch-tone-fiber .bruch-row-eyebrow,
.bruch-tone-fiber .bruch-row-swatch {
  background: linear-gradient(135deg, rgba(183, 166, 112, 0.3), rgba(133, 114, 53, 0.14));
}

.bruch-tone-fiber {
  border-top: 5px solid #b59d55;
}

.bruch-tone-shard .bruch-row-eyebrow,
.bruch-tone-shard .bruch-row-swatch {
  background: linear-gradient(135deg, rgba(148, 132, 185, 0.3), rgba(95, 80, 128, 0.14));
}

.bruch-tone-shard {
  border-top: 5px solid #8c74bb;
}

.bruch-tone-hook .bruch-row-eyebrow,
.bruch-tone-hook .bruch-row-swatch {
  background: linear-gradient(135deg, rgba(103, 148, 124, 0.3), rgba(62, 103, 80, 0.14));
}

body[data-theme="dark"].page-werkzeug-bruch .bruch-hero {
  background: #e8e3dc;
  border-color: rgba(100, 91, 74, 0.12);
  box-shadow: 0 22px 44px rgba(24, 28, 34, 0.08);
}

body[data-theme="dark"].page-werkzeug-bruch .bruch-hero-visual {
  background: #e8e3dc;
  border-radius: 16px;
  overflow: hidden;
}

body[data-theme="dark"].page-werkzeug-bruch .bruch-hero-kicker {
  background: rgba(56, 83, 109, 0.1);
  color: #27425d;
}

body[data-theme="dark"].page-werkzeug-bruch .bruch-hero-copy h2,
body[data-theme="dark"].page-werkzeug-bruch .bruch-row-title,
body[data-theme="dark"].page-werkzeug-bruch .bruch-example-name {
  color: #162331;
}

body[data-theme="dark"].page-werkzeug-bruch .bruch-hero-copy p,
body[data-theme="dark"].page-werkzeug-bruch .bruch-row-tagline,
body[data-theme="dark"].page-werkzeug-bruch .bruch-row-desc-text,
body[data-theme="dark"].page-werkzeug-bruch .bruch-empty {
  color: #465260;
}

body[data-theme="dark"].page-werkzeug-bruch .bruch-hero-tags span {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(79, 88, 99, 0.12);
  color: #223140;
  box-shadow: 0 8px 18px rgba(20, 25, 31, 0.06);
}

body[data-theme="dark"].page-werkzeug-bruch .bruch-row,
body[data-theme="dark"].page-werkzeug-bruch .bruch-row-visual,
body[data-theme="dark"].page-werkzeug-bruch .bruch-row-desc-card,
body[data-theme="dark"].page-werkzeug-bruch .bruch-example-card,
body[data-theme="dark"].page-werkzeug-bruch .bruch-example-thumb {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(20, 20, 20, 0.08);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}

body[data-theme="dark"].page-werkzeug-bruch .bruch-row-right-title,
body[data-theme="dark"].page-werkzeug-bruch .bruch-row-desc-label {
  color: #66717d;
}

body[data-theme="dark"].page-werkzeug-bruch .bruch-hero .bruch-hero-copy h2 {
  color: #162331 !important;
}

body[data-theme="dark"].page-werkzeug-bruch .bruch-hero .bruch-hero-copy p,
body[data-theme="dark"].page-werkzeug-bruch .bruch-hero .bruch-hero-copy .story-richtext,
body[data-theme="dark"].page-werkzeug-bruch .bruch-hero .bruch-hero-copy .story-richtext p {
  color: #465260 !important;
}

.page-werkzeug-glanz .content {
  max-width: none;
}

.glanz-hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 28px;
  margin: 8px auto 34px;
  padding: 34px;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(195, 209, 223, 0.42), transparent 28%),
    radial-gradient(circle at bottom right, rgba(230, 214, 185, 0.4), transparent 26%),
    linear-gradient(135deg, #f8fafc 0%, #f2efe8 100%);
  border: 1px solid rgba(52, 71, 90, 0.1);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.08);
}

.glanz-hero-copy,
.glanz-hero-aside {
  position: relative;
  z-index: 1;
}

.glanz-hero-aside {
  display: flex;
  align-items: center;
  justify-content: center;
}

.glanz-hero-visual {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244, 240, 232, 0.94));
  border: 1px solid rgba(52, 71, 90, 0.08);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.glanz-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.glanz-hero-kicker {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(41, 73, 108, 0.1);
  color: #21415f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.glanz-hero-copy h2 {
  margin: 18px 0 14px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.glanz-hero-copy p,
.glanz-hero-richtext p {
  margin: 0 0 14px;
  max-width: 64ch;
  font-size: 17px;
  line-height: 1.8;
  color: #495766;
}

.glanz-hero-richtext p:last-child {
  margin-bottom: 0;
}

.glanz-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.glanz-hero-tags span {
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(55, 71, 87, 0.1);
  color: #243548;
  font-weight: 700;
}

.glanz-hero-aside {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glanz-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}

.glanz-hero-orb--one {
  width: 230px;
  height: 230px;
  top: 16px;
  right: 22px;
  background: radial-gradient(circle, rgba(90, 128, 165, 0.22) 0%, rgba(90, 128, 165, 0.04) 70%, transparent 100%);
}

.glanz-hero-orb--two {
  width: 180px;
  height: 180px;
  bottom: 18px;
  left: 26px;
  background: radial-gradient(circle, rgba(182, 152, 98, 0.2) 0%, rgba(182, 152, 98, 0.04) 70%, transparent 100%);
}

.glanz-hero-note {
  width: min(360px, 100%);
  padding: 28px;
  border-radius: 26px;
  background: rgba(17, 28, 40, 0.92);
  color: #fff;
  box-shadow: 0 20px 40px rgba(8, 13, 20, 0.24);
}

.glanz-hero-note span {
  display: inline-block;
  margin-bottom: 10px;
  color: #b8cada;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.glanz-hero-note strong {
  display: block;
  font-size: 25px;
  line-height: 1.3;
}

.glanz-hero-note p {
  margin: 14px 0 0;
  color: #d8e1ea;
  line-height: 1.75;
}

body[data-theme="dark"] .glanz-hero-panel {
  background:
    radial-gradient(circle at top left, rgba(78, 101, 124, 0.22), transparent 30%),
    radial-gradient(circle at bottom right, rgba(120, 102, 74, 0.18), transparent 28%),
    linear-gradient(135deg, #242628 0%, #1a1c1e 100%);
  border-color: #353535;
  box-shadow: none;
}

body[data-theme="dark"] .glanz-hero-copy h2 {
  color: #f7fbff;
}

body[data-theme="dark"] .glanz-hero-copy p,
body[data-theme="dark"] .glanz-hero-richtext p {
  color: #d7e1eb;
}

body[data-theme="dark"] .glanz-hero-kicker {
  background: rgba(110, 168, 254, 0.14);
  color: #d8e9ff;
}

body[data-theme="dark"] .glanz-hero-tags span {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: #eef4fb;
}

body[data-theme="dark"] .glanz-hero-visual {
  background: linear-gradient(180deg, #151617 0%, #101112 100%);
  border-color: #353535;
  box-shadow: none;
}

body[data-theme="dark"] .page-werkzeug-glanz .tool-glanz-card,
body[data-theme="dark"] .page-glanz-ladder .tool-glanz-card.glanz-level-card {
  background: linear-gradient(180deg, #1f1f1f 0%, #181818 100%);
  border-color: #353535;
  box-shadow: none;
}

body[data-theme="dark"] .page-werkzeug-glanz .tool-glanz-card::before {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 26%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 45%);
}

body[data-theme="dark"] .glanz-card-title,
body[data-theme="dark"] .page-glanz-ladder .glanz-level-card .spalt-level-head h2 {
  color: #f5f7fa;
}

body[data-theme="dark"] .glanz-card-label,
body[data-theme="dark"] .glanz-card-description,
body[data-theme="dark"] .glanz-example-chip,
body[data-theme="dark"] .glanz-example-chip--muted {
  color: #d5dbe3;
}

body[data-theme="dark"] .glanz-card-eyebrow,
body[data-theme="dark"] .spalt-level-badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f5f7fa;
}

body[data-theme="dark"] .glanz-card-media .thumb,
body[data-theme="dark"] .page-glanz-ladder .glanz-feature-thumb,
body[data-theme="dark"] .page-glanz-ladder .glanz-mineral-thumb {
  background: #111214;
  border-color: #353535;
}

.glanz-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 11px;
  margin-bottom: 10px;
  align-items: start;
}

.page-werkzeug-glanz .tool-glanz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 242, 236, 0.96) 100%);
  border: 1px solid rgba(66, 73, 80, 0.08);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  cursor: pointer;
}

.page-werkzeug-glanz .tool-glanz-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.68), transparent 26%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 45%);
  pointer-events: none;
}

.glanz-card-top,
.glanz-card-media,
.glanz-card-body,
.glanz-card-actions {
  position: relative;
  z-index: 1;
}

.glanz-card-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.glanz-card-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.glanz-card-title {
  margin: 0;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.glanz-card-media .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(53, 61, 69, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(241, 239, 235, 0.88));
}

.page-werkzeug-glanz .tool-glanz-card .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.glanz-card-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 116px;
}

.glanz-card-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5f6f80;
}

.glanz-card-description {
  margin: 0;
  color: #223040;
  line-height: 1.68;
  font-size: 14px;
}

.glanz-card-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.glanz-example-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(55, 71, 87, 0.12);
  color: #243548;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.glanz-example-chip:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(55, 71, 87, 0.2);
}

.glanz-example-chip--muted {
  color: #6a7886;
  background: rgba(240, 242, 245, 0.9);
}

.page-glanz-ladder .glanz-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  margin-bottom: 14px;
  align-items: stretch;
}

.page-glanz-ladder {
  width: 100%;
  max-width: none;
}

.page-glanz-ladder .glanz-hero-panel {
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
}

.page-glanz-ladder .tool-glanz-card.glanz-level-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
  cursor: pointer;
}

.page-glanz-ladder .tool-glanz-card.glanz-level-card::before {
  background: none;
}

.page-glanz-ladder .glanz-level-card .spalt-level-head h2 {
  font-size: clamp(22px, 2.2vw, 30px);
}

.page-glanz-ladder .glanz-level-card .spalt-level-summary {
  margin-bottom: 14px;
  line-height: 1.65;
  min-height: 5.4em;
}

.page-glanz-ladder .glanz-feature-media {
  margin-bottom: 14px;
}

.page-glanz-ladder .glanz-feature-thumb {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 0.84;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(53, 61, 69, 0.08);
  background: #ffffff;
}

.page-glanz-ladder .glanz-feature-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-glanz-ladder .glanz-mineral-grid {
  margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.page-glanz-ladder .glanz-mineral-thumb {
  background: #ffffff;
}

.page-glanz-ladder .glanz-mineral-card {
  border-radius: 16px;
}

.page-glanz-ladder .glanz-mineral-card .spalt-mineral-thumb {
  aspect-ratio: 1 / 0.82;
  padding: 8px;
}

.page-glanz-ladder .glanz-mineral-card .spalt-mineral-body {
  padding: 10px 10px 12px;
}

.page-glanz-ladder .glanz-mineral-card .spalt-mineral-name {
  font-size: 14px;
  margin-bottom: 0;
}

.page-glanz-ladder .spalt-empty {
  min-height: 204px;
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
}

.page-glanz-ladder .spalt-level-footer {
  margin-top: auto;
}

.page-glanz-ladder .glanz-tone-metal {
  border-top: 5px solid #355d86;
}

.page-glanz-ladder .glanz-tone-submetal {
  border-top: 5px solid #5d7082;
}

.page-glanz-ladder .glanz-tone-diamond {
  border-top: 5px solid #7c9fd1;
}

.page-glanz-ladder .glanz-tone-glass {
  border-top: 5px solid #6eabc2;
}

.page-glanz-ladder .glanz-tone-grease {
  border-top: 5px solid #b89b57;
}

.page-glanz-ladder .glanz-tone-pearl {
  border-top: 5px solid #c6a5c3;
}

.page-glanz-ladder .glanz-tone-resin {
  border-top: 5px solid #a56d35;
}

.page-glanz-ladder .glanz-tone-silk {
  border-top: 5px solid #b7a071;
}

.page-glanz-ladder .glanz-tone-matte {
  border-top: 5px solid #948a7e;
}

.page-glanz-ladder .btn-filter-glanz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: #2f72bb !important;
  border: 1px solid #2f72bb !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.1;
  box-shadow: none !important;
  text-transform: none !important;
}

.page-glanz-ladder .btn-filter-glanz:hover {
  background: #2866aa !important;
  border-color: #2866aa !important;
  transform: none;
}

.page-lager-magmat-intro .glanz-levels {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.page-lager-magmat-intro {
  --lager-link-color: #C0392B;
  --lager-link-color-hover: #922B21;
  --lager-link-border: rgba(192, 57, 43, 0.35);
  --lager-link-border-hover: rgba(146, 43, 33, 0.7);
  --lager-link-bg-hover: rgba(192, 57, 43, 0.08);
  --lager-subtitle-color: #C0392B;
}

.lager-intro-lead {
  margin-bottom: 18px;
}

.page-lager-magmat-intro .lager-magmat-intro-card {
  padding: 28px;
  border-top: 3px solid #D04A3E;
  background:
    radial-gradient(circle at top right, rgba(210, 60, 50, 0.20), transparent 34%),
    radial-gradient(circle at bottom left, rgba(185, 45, 35, 0.14), transparent 28%),
    linear-gradient(180deg, #fde8e6 0%, #faf2f1 100%);
  cursor: default;
}

.page-lager-magmat-intro .lager-magmat-intro-card--detail {
  border-top-color: #D95C50;
  background:
    radial-gradient(circle at top right, rgba(215, 70, 60, 0.18), transparent 32%),
    radial-gradient(circle at bottom left, rgba(185, 45, 35, 0.13), transparent 26%),
    linear-gradient(180deg, #fde9e7 0%, #faf3f2 100%);
}

.page-lager-magmat-intro .lager-magmat-intro-card--pegmatite {
  border-top-color: #E07068;
  background:
    radial-gradient(circle at top right, rgba(236, 156, 146, 0.22), transparent 34%),
    radial-gradient(circle at bottom left, rgba(221, 133, 125, 0.14), transparent 26%),
    linear-gradient(180deg, #fde7e4 0%, #fbf1ef 100%);
}

.page-lager-magmat-intro .lager-magmat-intro-card--subvulkanisch {
  border-top-color: #c86057;
  background:
    radial-gradient(circle at top right, rgba(214, 126, 116, 0.2), transparent 32%),
    radial-gradient(circle at bottom left, rgba(190, 90, 82, 0.16), transparent 28%),
    linear-gradient(180deg, #f9e3e0 0%, #f9efed 100%);
}

.page-lager-magmat-intro .lager-magmat-intro-card:hover {
  transform: none;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.page-lager-dynamic-intro {
  width: min(100%, var(--tool-page-balanced-width));
  max-width: var(--tool-page-balanced-width);
  margin-left: auto;
  margin-right: auto;
}

.page-lager-dynamic-intro .page-title {
  margin-bottom: 28px;
}

.page-lager-dynamic-intro .lager-dynamic-lead {
  margin: 0 0 26px;
}

.page-lager-dynamic-intro .lager-dynamic-lead .lager-magmat-intro-richtext {
  max-width: none;
  color: #233543;
  font-size: 17px;
  line-height: 1.85;
}

.page-lager-dynamic-intro .lager-dynamic-lead .lager-magmat-intro-richtext p {
  margin: 0 0 18px;
}

.page-lager-dynamic-intro .lager-dynamic-shell {
  padding: 28px;
  border-top: 3px solid #7c5db4;
  background: #fff;
  cursor: default;
}

.page-lager-dynamic-intro .lager-dynamic-shell:hover {
  transform: none;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.page-lager-dynamic-intro .lager-hydro-stage-group {
  margin-top: 0;
}

.page-lager-dynamic-intro {
  --lager-subtitle-color: #7c5db4;
  --lager-link-color: #6a55aa;
}

.page-lager-dynamic-intro .lager-hydro-stage-section h3,
.page-lager-dynamic-intro .lager-hydro-stage-section--grouped h3 {
  color: var(--lager-subtitle-color);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}

.page-lager-dynamic-intro .lager-hydro-stage-section--grouped > .lager-dynamic-block-title {
  color: #0f172a;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
  text-transform: none;
}

.page-lager-dynamic-intro .lager-hydro-stage-section .lager-card-subsection h3,
.page-lager-dynamic-intro .lager-hydro-stage-section--grouped .lager-card-subsection h3,
.page-lager-dynamic-intro .lager-card-subsection-title,
.page-lager-dynamic-intro .lager-magmat-specimens-kicker,
.page-lager-dynamic-intro .lager-magmat-excursions-kicker,
.page-lager-dynamic-intro .lager-magmat-example-kicker {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #3f2e6d;
}

.page-lager-dynamic-intro .lager-hydro-stage-section p,
.page-lager-dynamic-intro .lager-hydro-stage-section--grouped p {
  margin: 0;
  background: transparent;
  color: #111111;
}

.page-lager-dynamic-intro .lager-hydro-stage-section,
.page-lager-dynamic-intro .lager-hydro-stage-section--grouped {
  border-top-color: rgba(124, 93, 180, 0.32);
}

.page-lager-dynamic-intro .lager-mineral-link,
.page-lager-dynamic-intro .lager-beispiel-text a {
  color: var(--lager-link-color);
}

.page-lager-dynamic-intro .lager-hydro-stage-group > .lager-hydro-stage-sections {
  display: grid;
  gap: 24px;
}

body[data-theme="dark"] .page-lager-dynamic-intro .lager-dynamic-lead .lager-magmat-intro-richtext,
body[data-theme="dark"] .page-lager-dynamic-intro .lager-dynamic-lead .lager-magmat-intro-richtext p {
  color: #d8e0eb;
}

body[data-theme="dark"] .page-lager-dynamic-intro .lager-dynamic-shell {
  border-top-color: #9a7be0;
  background: rgba(24, 21, 36, 0.98);
}

body[data-theme="dark"] .page-lager-dynamic-intro .lager-hydro-stage-section h3,
body[data-theme="dark"] .page-lager-dynamic-intro .lager-hydro-stage-section--grouped h3 {
  color: #f8fafc;
}

body[data-theme="dark"] .page-lager-dynamic-intro .lager-hydro-stage-section--grouped > .lager-dynamic-block-title {
  color: #f8fafc;
}

body[data-theme="dark"] .page-lager-dynamic-intro .lager-hydro-stage-section .lager-card-subsection h3,
body[data-theme="dark"] .page-lager-dynamic-intro .lager-hydro-stage-section--grouped .lager-card-subsection h3,
body[data-theme="dark"] .page-lager-dynamic-intro .lager-card-subsection-title,
body[data-theme="dark"] .page-lager-dynamic-intro .lager-magmat-specimens-kicker,
body[data-theme="dark"] .page-lager-dynamic-intro .lager-magmat-excursions-kicker,
body[data-theme="dark"] .page-lager-dynamic-intro .lager-magmat-example-kicker {
  color: #d9cdf5;
}

body[data-theme="dark"] .page-lager-dynamic-intro .lager-hydro-stage-section p,
body[data-theme="dark"] .page-lager-dynamic-intro .lager-hydro-stage-section--grouped p {
  color: #e8edf5;
}

.page-lager-magmat-intro .spalt-level-head {
  margin-bottom: 14px;
}

.page-lager-magmat-intro .spalt-level-head h2 {
  margin-top: 4px;
  font-size: clamp(30px, 3.4vw, 44px);
  text-transform: none;
  color: var(--lager-subtitle-color, #9d4f47);
}

.page-lager-magmat-intro .spalt-level-rank {
  font-size: 15px;
  color: #8e4c47;
}

.page-lager-magmat-intro .lager-magmat-intro-richtext {
  max-width: 74ch;
  color: #233543;
  font-size: 17px;
  line-height: 1.85;
}

.page-lager-magmat-intro .lager-intro-lead .lager-magmat-intro-richtext {
  max-width: none;
}

.page-lager-magmat-intro .lager-magmat-intro-richtext p {
  margin: 0 0 22px;
}

.lager-intro-bullet-lead {
  font-weight: 800;
  color: var(--lager-subtitle-color, #1f6aa5);
}

.lager-intro-bullet-und {
  color: #1a1a1a;
  font-weight: 400;
}

body[data-theme="dark"] .lager-intro-bullet-und {
  color: #e0e4ea;
  font-weight: 400;
}

.lager-intro-bullet-normal,
.lager-intro-bullet-normal .lager-mineral-link {
  font-weight: 400;
}

.lager-intro-bullet-connector {
  color: #1a1a1a;
  font-weight: 400;
}

.lager-intro-bullet-emery {
  color: var(--lager-link-color, #0d5f84);
  font-weight: 700;
}

/* Metamorphic-deposit examples use plain running text, including place names. */
.page-lager-metamorphic-intro .lager-beispiel-text strong {
  font-weight: 400;
}

body[data-theme="dark"] .lager-intro-bullet-connector {
  color: #e0e4ea;
}

.page-lager-magmat-intro .lager-magmat-intro-richtext ul {
  margin: 0 0 22px;
  padding-left: 24px;
}

.page-lager-magmat-intro .lager-magmat-intro-richtext li {
  margin-bottom: 12px;
}

.page-lager-magmat-intro .lager-magmat-intro-richtext p:last-child {
  margin-bottom: 0;
}

.page-lager-magmat-intro .lager-magmat-intro-richtext ul:last-child {
  margin-bottom: 0;
}

.page-lager-magmat-intro .lager-magmat-intro-card--detail .lager-magmat-intro-richtext {
  max-width: none;
}

.lager-magmat-stage-layout {
  display: grid;
  gap: 14px;
}

.lager-magmat-stage-intro {
  display: block;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 239, 237, 0.96));
  border: 1px solid rgba(212, 116, 108, 0.14);
}

.lager-magmat-stage-intro p {
  margin: 0;
  max-width: none;
  font-size: 18px;
  line-height: 1.75;
  color: #18303f;
  text-wrap: pretty;
}

.lager-magmat-intro-card--pegmatite .lager-magmat-stage-intro p {
  max-width: none;
  font-size: 17px;
  line-height: 1.82;
  font-weight: 400;
}

.page-lager-magmat-intro .lager-magmat-intro-card .lager-magmat-stage-intro,
.page-lager-hydrothermal-intro .lager-magmat-intro-card .lager-hydro-stage-intro,
.page-lager-sedimentary-intro .lager-magmat-intro-card .lager-hydro-stage-intro,
.page-lager-metamorphic-intro .lager-magmat-intro-card .lager-hydro-stage-intro {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.page-lager-magmat-intro .lager-hydro-stage-intro {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(251, 233, 230, 0.95));
  border-color: rgba(201, 106, 98, 0.14);
}

.page-lager-magmat-intro .lager-hydro-stage-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(252, 238, 236, 0.9));
  border-color: rgba(201, 106, 98, 0.1);
  box-shadow: 0 10px 24px rgba(201, 106, 98, 0.06);
}

.page-lager-magmat-intro .lager-hydro-stage-section::before {
  background: linear-gradient(180deg, #c96a62, #e4a19b);
}

.page-lager-magmat-intro .lager-hydro-stage-note-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(252, 238, 236, 0.9));
  border-color: rgba(201, 106, 98, 0.1);
  box-shadow: 0 10px 24px rgba(201, 106, 98, 0.06);
}

.page-lager-magmat-intro .lager-hydro-stage-note-card::before {
  background: linear-gradient(180deg, #c96a62, #e4a19b);
}

.page-lager-magmat-intro .lager-hydro-stage-note-card p,
.page-lager-magmat-intro .lager-hydro-stage-note-text {
  color: #5a3a36;
}

.lager-magmat-stage-sections {
  display: grid;
  gap: 0;
}


.lager-magmat-stage-section {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 18px 20px 18px 24px;
  margin-top: 18px;
  border-top: 0;
  background: transparent;
  border-radius: 20px;
}

.lager-magmat-stage-section::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: #d4746c;
}

.lager-magmat-stage-section--gravity::before {
  background: linear-gradient(180deg, #cf6d64, #ebb0aa);
}

.lager-magmat-stage-section--sulfide::before {
  background: linear-gradient(180deg, #b84f47, #dc8e87);
}

.lager-magmat-intro-card--pegmatite .lager-magmat-stage-section--gravity::before {
  background: linear-gradient(180deg, #da7f76, #efbbb5);
}

.lager-magmat-intro-card--pegmatite .lager-magmat-stage-section--sulfide::before {
  background: linear-gradient(180deg, #c95f57, #e7a49d);
}

.page-lager-magmat-intro .lager-magmat-intro-card--pegmatite .lager-magmat-stage-sections {
  gap: 22px;
}

.page-lager-magmat-intro .lager-magmat-intro-card--pegmatite .lager-magmat-stage-section {
  padding: 0;
  margin-top: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.page-lager-magmat-intro .lager-magmat-intro-card--pegmatite .lager-magmat-stage-section::before {
  display: none;
}

.page-lager-magmat-intro .lager-magmat-intro-card--pegmatite .lager-magmat-stage-section h3 {
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--lager-subtitle-color, #9d4f47);
}

.page-lager-magmat-intro .lager-magmat-intro-card--liquid .lager-magmat-stage-sections,
.page-lager-magmat-intro .lager-magmat-intro-card--liquid-open .lager-magmat-stage-sections {
  gap: 22px;
}

.page-lager-magmat-intro .lager-magmat-intro-card--liquid .lager-magmat-stage-section,
.page-lager-magmat-intro .lager-magmat-intro-card--liquid-open .lager-magmat-stage-section {
  padding: 0;
  margin-top: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.page-lager-magmat-intro .lager-magmat-intro-card--liquid .lager-magmat-stage-section::before,
.page-lager-magmat-intro .lager-magmat-intro-card--liquid-open .lager-magmat-stage-section::before {
  display: none;
}

.page-lager-magmat-intro .lager-magmat-intro-card--liquid .lager-magmat-stage-section h3,
.page-lager-magmat-intro .lager-magmat-intro-card--liquid-open .lager-magmat-stage-section h3 {
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--lager-subtitle-color, #9d4f47);
}

.page-lager-magmat-intro .lager-magmat-intro-card--liquid .lager-hydro-stage-example-group,
.page-lager-magmat-intro .lager-magmat-intro-card--liquid-open .lager-hydro-stage-example-group {
  gap: 8px;
}

.page-lager-magmat-intro .lager-magmat-intro-card--liquid .lager-hydro-stage-note-card,
.page-lager-magmat-intro .lager-magmat-intro-card--liquid-open .lager-hydro-stage-note-card {
  gap: 10px;
}

.lager-magmat-intro-card--subvulkanisch .lager-magmat-stage-intro p {
  max-width: none;
  font-size: 17px;
  line-height: 1.82;
  font-weight: 400;
}

.lager-magmat-intro-card--subvulkanisch .lager-magmat-stage-section--gravity::before {
  background: linear-gradient(180deg, #c76259, #e5a29b);
}

.lager-magmat-intro-card--subvulkanisch .lager-magmat-stage-section--sulfide::before {
  background: linear-gradient(180deg, #a9443d, #d98780);
}

.page-lager-magmat-intro .lager-magmat-intro-card--subvulkanisch .lager-magmat-stage-sections {
  gap: 22px;
}

.page-lager-magmat-intro .lager-magmat-intro-card--subvulkanisch .lager-magmat-stage-section {
  padding: 0;
  margin-top: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.page-lager-magmat-intro .lager-magmat-intro-card--subvulkanisch .lager-magmat-stage-section::before {
  display: none;
}

.page-lager-magmat-intro .lager-magmat-intro-card--subvulkanisch .lager-magmat-stage-section h3 {
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--lager-subtitle-color, #9d4f47);
}

/* Separator between sub-entries in all magmatic cards — placed after overrides to win specificity (0,3,0) */
.page-lager-magmat-intro .lager-magmat-stage-sections .lager-magmat-stage-section + .lager-magmat-stage-section {
  border-top: 3px solid color-mix(in srgb, var(--lager-link-color, #888888), transparent 68%);
  padding-top: 28px;
  margin-top: 8px;
}

body[data-theme="dark"] .page-lager-magmat-intro .lager-magmat-stage-sections .lager-magmat-stage-section + .lager-magmat-stage-section {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.lager-magmat-excursions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.lager-magmat-excursions-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lager-link-color, #9d4f47), transparent 90%);
  color: var(--lager-link-color, #9d4f47);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lager-magmat-excursions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.lager-magmat-excursion-card {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, var(--lager-link-color, #888888), white 88%);
  border: 1px solid color-mix(in srgb, var(--lager-link-color, #888888), white 72%);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.lager-magmat-excursion-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.10);
  border-color: color-mix(in srgb, var(--lager-link-color, #888888), white 55%);
}

.lager-magmat-excursion-card--disabled {
  opacity: 0.78;
  cursor: default;
}

.lager-magmat-excursion-orb {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  background-image:
    linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.02)),
    url("../img/map2.jpg");
  background-size: cover;
  background-position: center;
  border: 1px solid color-mix(in srgb, var(--lager-link-color, #9d4f47), transparent 82%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 22px color-mix(in srgb, var(--lager-link-color, #9d4f47), transparent 82%);
}

.lager-magmat-excursion-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.lager-magmat-excursion-copy strong {
  font-size: 17px;
  line-height: 1.1;
  color: color-mix(in srgb, var(--lager-link-color, #7d3932), black 12%);
}

.lager-magmat-excursion-copy span {
  font-size: 13px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--lager-link-color, #5a3a36), black 22%);
}

.lager-magmat-excursion-cta {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--lager-link-color, #9d4f47);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.lager-magmat-specimens {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 28px;
}

.lager-magmat-specimens-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(108, 84, 53, 0.08);
  color: #7a4b2e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lager-magmat-specimens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 200px));
  gap: 12px;
  align-items: stretch;
  justify-content: start;
}

.lager-magmat-specimen-card {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 10px 10px 8px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248, 240, 236, 0.96));
  border: 1px solid rgba(201, 106, 98, 0.14);
  box-shadow: 0 10px 22px rgba(157, 79, 71, 0.08);
}

.lager-magmat-specimen-card .mineral-title {
  margin-bottom: 10px;
  font-size: 14px;
}

.lager-magmat-specimen-meta {
  display: none;
  font-size: 11px;
  color: #6d5a55;
}

.lager-magmat-specimen-card .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 6px;
}

.lager-magmat-specimen-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lager-magmat-specimen-card .btn-more {
  margin-top: 0;
  background: #C0392B;
  border-color: #C0392B;
  color: #fff;
}

.lager-magmat-specimen-card .btn-more:hover {
  background: #922B21;
  border-color: #922B21;
}

.page-lager-magmat-intro .lager-inline-mineral-card .btn-more {
  background: #C0392B;
  border-color: #C0392B;
  color: #fff;
}

.page-lager-magmat-intro .lager-inline-mineral-card .btn-more:hover {
  background: #922B21;
  border-color: #922B21;
}

.lager-magmat-specimen-note {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 120px;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(245, 235, 231, 0.95));
  border: 1px dashed rgba(157, 79, 71, 0.26);
  box-shadow: 0 10px 20px rgba(157, 79, 71, 0.05);
}

.lager-magmat-specimen-note strong {
  font-size: 16px;
  line-height: 1.2;
  color: #7d3932;
}

.lager-magmat-specimen-note span {
  font-size: 13px;
  line-height: 1.45;
  color: #5a3a36;
}

.lager-magmat-stage-section h3 {
  margin: 8px 0 6px;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.08;
  color: var(--lager-subtitle-color, #102d46);
  letter-spacing: -0.03em;
}

.lager-magmat-stage-section + .lager-magmat-stage-section {
  margin-top: 12px;
}

.lager-magmat-stage-section p {
  margin: 0;
  color: #314556;
  line-height: 1.82;
}

@media (max-width: 900px) {
  .lager-magmat-stage-intro p {
    font-size: 18px;
  }

  .lager-magmat-intro-card--pegmatite .lager-magmat-stage-intro p {
    font-size: 16px;
  }

  .lager-magmat-intro-card--subvulkanisch .lager-magmat-stage-intro p {
    font-size: 16px;
  }
}

.page-lager-hydrothermal-intro .lager-magmat-intro-card {
  border-top-color: #1d6c8d;
  background:
    radial-gradient(circle at top right, rgba(70, 139, 174, 0.2), transparent 34%),
    radial-gradient(circle at bottom left, rgba(38, 108, 140, 0.16), transparent 28%),
    linear-gradient(180deg, #e7f2f7 0%, #f3f8fb 100%);
}

.page-lager-hydrothermal-intro .lager-magmat-intro-card--detail {
  border-top-color: #156082;
  background:
    radial-gradient(circle at top right, rgba(49, 122, 158, 0.18), transparent 32%),
    radial-gradient(circle at bottom left, rgba(22, 96, 130, 0.15), transparent 26%),
    linear-gradient(180deg, #e3eff6 0%, #f4f9fc 100%);
}

.page-lager-hydrothermal-intro {
  --lager-title-color: #0f2233;
  --lager-link-color: #0d5f84;
  --lager-link-color-hover: #083d57;
  --lager-link-border: rgba(13, 95, 132, 0.35);
  --lager-link-border-hover: rgba(8, 61, 87, 0.7);
  --lager-link-bg-hover: rgba(13, 95, 132, 0.08);
  --lager-subtitle-color: #156082;
}

.page-lager-hydrothermal-intro .spalt-level-rank {
  color: #14556f;
}

.page-lager-hydrothermal-intro .lager-hydro-stage-sections {
  gap: 10px;
}

.page-lager-hydrothermal-intro .lager-hydro-stage-section,
.page-lager-hydrothermal-intro .lager-hydro-stage-section--grouped {
  padding: 0;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-lager-hydrothermal-intro .lager-hydro-stage-section::before,
.page-lager-hydrothermal-intro .lager-hydro-stage-section--grouped::before {
  display: none;
}

.page-lager-hydrothermal-intro .lager-hydro-stage-section h3,
.page-lager-hydrothermal-intro .lager-hydro-stage-section--grouped h3 {
  color: var(--lager-subtitle-color, #156082);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}

.page-lager-hydrothermal-intro .lager-hydro-stage-section .lager-card-subsection h3,
.page-lager-hydrothermal-intro .lager-hydro-stage-section--grouped .lager-card-subsection h3,
.page-lager-hydrothermal-intro .lager-section-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--lager-subtitle-color, #102d46);
}

.page-lager-hydrothermal-intro .lager-hydro-stage-section p,
.page-lager-hydrothermal-intro .lager-hydro-stage-section--grouped p {
  margin: 0;
  background: transparent;
  color: #111111;
}

.page-lager-magmat-intro .lager-magmat-stage-section h3,
.page-lager-magmat-intro .lager-hydro-stage-section h3,
.page-lager-magmat-intro .lager-hydro-stage-section--grouped h3 {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
  color: #156082;
}

.page-lager-magmat-intro .lager-magmat-stage-section .lager-card-subsection h3,
.page-lager-magmat-intro .lager-hydro-stage-section .lager-card-subsection h3,
.page-lager-magmat-intro .lager-hydro-stage-section--grouped .lager-card-subsection h3,
.page-lager-magmat-intro .lager-section-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #102d46;
}

.page-lager-sedimentary-intro .lager-magmat-intro-card {
  border-top-color: #C49030;
  background:
    radial-gradient(circle at top right, rgba(196, 144, 48, 0.14), transparent 34%),
    radial-gradient(circle at bottom left, rgba(155, 112, 21, 0.10), transparent 28%),
    linear-gradient(180deg, #FFF9EC 0%, #FDFAF2 100%);
}

.page-lager-sedimentary-intro {
  --lager-title-color: #2d2412;
  --lager-link-color: #9B7015;
  --lager-link-color-hover: #6e500e;
  --lager-link-border: rgba(155, 112, 21, 0.35);
  --lager-link-border-hover: rgba(110, 80, 14, 0.7);
  --lager-link-bg-hover: rgba(155, 112, 21, 0.08);
  --lager-subtitle-color: #9B7015;
}

.page-lager-sedimentary-intro .spalt-level-rank {
  color: #9B7015;
}

.page-lager-sedimentary-intro .lager-magmat-intro-richtext {
  max-width: none;
}

.page-lager-magmat-intro .spalt-level-head h2,
.page-lager-hydrothermal-intro .spalt-level-head h2,
.page-lager-sedimentary-intro .spalt-level-head h2,
.page-lager-metamorphic-intro .spalt-level-head h2 {
  color: var(--lager-title-color, #111111);
  font-weight: 900;
}

.page-lager-sedimentary-intro .lager-intro-lead {
  margin-bottom: 24px;
  padding: 26px 34px 28px;
  border-radius: 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.page-lager-sedimentary-intro .lager-intro-lead .lager-magmat-intro-richtext {
  max-width: none;
  width: 100%;
  color: #111111;
  font-size: 18px;
  line-height: 1.72;
}

.page-lager-sedimentary-intro .lager-intro-lead .lager-magmat-intro-richtext p {
  margin: 0 0 10px;
  color: #111111;
}

.page-lager-sedimentary-intro .lager-intro-lead .lager-magmat-intro-richtext p:last-child {
  margin-bottom: 0;
}

.page-lager-hydrothermal-intro .lager-intro-lead-section {
  margin: 28px 0 16px;
}

.page-lager-hydrothermal-intro .lager-intro-lead-section h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.35;
  color: var(--lager-subtitle-color, #156082);
  font-weight: 800;
}

.page-lager-hydrothermal-intro .lager-intro-lead-section p {
  margin: 0;
  color: #111111;
}

.page-lager-hydrothermal-intro .lager-magmat-intro-richtext,
.page-lager-hydrothermal-intro .lager-magmat-intro-richtext p,
.page-lager-hydrothermal-intro .lager-magmat-intro-richtext li,
.page-lager-hydrothermal-intro .lager-hydro-stage-intro p {
  color: #111111;
}

.page-lager-sedimentary-intro .lager-intro-lead .lager-magmat-intro-richtext strong,
.page-lager-sedimentary-intro .lager-sedimentary-lead-section h3 {
  color: #9B7015;
  font-weight: 800;
}

.page-lager-sedimentary-intro .lager-sedimentary-lead-section {
  margin: 28px 0 0;
}

.page-lager-sedimentary-intro .lager-sedimentary-lead-section h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.35;
}

.page-lager-sedimentary-intro .lager-sedimentary-lead-section p {
  margin: 0;
  color: #111111;
}

.page-lager-sedimentary-intro .lager-magmat-intro-card--detail {
  border-top-color: #C49030;
  background:
    radial-gradient(circle at top right, rgba(196, 144, 48, 0.14), transparent 32%),
    radial-gradient(circle at bottom left, rgba(155, 112, 21, 0.10), transparent 26%),
    linear-gradient(180deg, #FFF9EC 0%, #FDFAF2 100%);
}

.page-lager-sedimentary-intro .lager-hydro-stage-intro {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 220, 0.95));
  border-color: rgba(196, 144, 48, 0.14);
}

.page-lager-sedimentary-intro .lager-sedimentary-intro-card--chemisch .lager-hydro-stage-intro {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.page-lager-sedimentary-intro .lager-sedimentary-intro-card--chemisch .lager-hydro-stage-section {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.page-lager-sedimentary-intro .lager-sedimentary-intro-card--chemisch .lager-hydro-stage-note-card {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Separator between each entry in the Chemical card (Evaporite → Manganknollen → Travertin) */
.page-lager-sedimentary-intro .lager-sedimentary-intro-card--chemisch .lager-hydro-stage-section--grouped + .lager-hydro-stage-section--grouped {
  border-top: 3px solid color-mix(in srgb, var(--lager-link-color, #888888), transparent 68%);
  padding-top: 28px;
  margin-top: 8px;
}

.page-lager-sedimentary-intro .lager-sedimentary-intro-card--clastic .lager-hydro-stage-intro {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.page-lager-sedimentary-intro .lager-sedimentary-intro-card--clastic .lager-hydro-stage-sections {
  background: transparent;
}

.page-lager-sedimentary-intro .lager-sedimentary-intro-card--clastic .lager-hydro-stage-group {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.page-lager-sedimentary-intro .lager-sedimentary-intro-card--clastic .lager-hydro-stage-section--grouped,
.page-lager-sedimentary-intro .lager-sedimentary-intro-card--clastic .lager-hydro-stage-section--grouped h3,
.page-lager-sedimentary-intro .lager-sedimentary-intro-card--clastic .lager-hydro-stage-section--grouped p {
  background: transparent;
  box-shadow: none;
}

.page-lager-sedimentary-intro .lager-sedimentary-intro-card--clastic .lager-hydro-stage-section--grouped h3 {
  color: #8f4c28;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(250, 239, 230, 0.9));
  border-color: rgba(200, 100, 45, 0.1);
  box-shadow: 0 10px 24px rgba(184, 90, 39, 0.06);
}

.page-lager-sedimentary-intro .lager-hydro-stage-section::before {
  background: linear-gradient(180deg, #c8642d, #e59a69);
}

.page-lager-sedimentary-intro .lager-hydro-stage-section h3,
.page-lager-sedimentary-intro .lager-hydro-stage-section--grouped h3,
.page-lager-sedimentary-intro .lager-hydro-stage-example-title,
.page-lager-sedimentary-intro .lager-hydro-stage-entry-intro h3,
.page-lager-sedimentary-intro .lager-hydro-stage-note-card h4 {
  color: var(--lager-subtitle-color, #8f4c28);
}

.page-lager-sedimentary-intro .lager-hydro-stage-section h3,
.page-lager-sedimentary-intro .lager-hydro-stage-section--grouped h3 {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.page-lager-sedimentary-intro .lager-hydro-stage-notes p {
  background: transparent;
  border-color: transparent;
  color: #5a3520;
}

.page-lager-sedimentary-intro .lager-hydro-stage-note-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(250, 239, 230, 0.9));
  border-color: rgba(200, 100, 45, 0.1);
  box-shadow: 0 10px 24px rgba(184, 90, 39, 0.06);
}

.page-lager-sedimentary-intro .lager-hydro-stage-note-card h4,
.page-lager-sedimentary-intro .lager-hydro-stage-note-card p,
.page-lager-sedimentary-intro .lager-hydro-stage-note-text {
  color: #5a3520;
}

.page-lager-sedimentary-intro .lager-inline-mineral-card {
  background: #ffffff !important;
  border: 1px solid rgba(200, 100, 45, 0.14);
  box-shadow: 0 8px 18px rgba(184, 90, 39, 0.08);
}

.page-lager-sedimentary-intro .lager-inline-mineral-card .btn-more {
  background: #9B7015;
  border-color: #9B7015;
  color: #fff;
}

.page-lager-sedimentary-intro .lager-inline-mineral-card .btn-more:hover {
  background: #6e500e;
  border-color: #6e500e;
}

.page-lager-metamorphic-intro .lager-magmat-intro-card {
  border-top-color: #3d7c47;
  background:
    radial-gradient(circle at top right, rgba(61, 124, 71, 0.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(45, 106, 79, 0.14), transparent 28%),
    linear-gradient(180deg, #eef6f0 0%, #f5faf6 100%);
}

.page-lager-metamorphic-intro {
  --lager-link-color: #2d6a4f;
  --lager-link-color-hover: #1f4e3a;
  --lager-link-border: rgba(45, 106, 79, 0.35);
  --lager-link-border-hover: rgba(45, 106, 79, 0.7);
  --lager-link-bg-hover: rgba(45, 106, 79, 0.08);
  --lager-subtitle-color: #2d6a4f;
}

.page-lager-metamorphic-intro .spalt-level-rank {
  color: #3d7c47;
}

.page-lager-metamorphic-intro .lager-magmat-stage-section h3,
.page-lager-metamorphic-intro .lager-hydro-stage-section h3 {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
  color: var(--lager-subtitle-color, #8f2f84);
}

.page-lager-metamorphic-intro .lager-magmat-stage-section .lager-card-subsection h3,
.page-lager-metamorphic-intro .lager-hydro-stage-section .lager-card-subsection h3,
.page-lager-metamorphic-intro .lager-section-title,
.page-lager-metamorphic-intro .lager-card-subsection-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--lager-subtitle-color, #8f2f84);
}

.page-lager-metamorphic-intro .lager-magmat-intro-richtext {
  max-width: none;
}

.lager-beispiel-text {
  font-size: 17px;
  line-height: 1.85;
  margin: 0;
  color: #233543;
}

body[data-theme="dark"] .lager-beispiel-text {
  color: #d5dbe3;
}

.page-lager-metamorphic-intro .lager-metamorphic-mineral-cards {
  margin-top: 18px;
}

.page-lager-metamorphic-intro .lager-metamorphic-mineral-cards .lager-inline-example-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  align-items: flex-start;
}

.page-lager-metamorphic-intro .lager-metamorphic-mineral-cards .lager-inline-mineral-card {
  width: 190px;
  max-width: 190px;
  flex: 0 0 190px;
  min-width: 190px;
}

.page-lager-metamorphic-intro .lager-inline-mineral-card .btn-more {
  background: #3d7c47;
  border-color: #3d7c47;
  color: #fff;
}

.page-lager-metamorphic-intro .lager-inline-mineral-card .btn-more:hover {
  background: #2d6038;
  border-color: #2d6038;
}

@media (max-width: 1100px) {
  .page-lager-metamorphic-intro .lager-metamorphic-mineral-cards .lager-inline-example-cards {
    justify-content: center;
  }
}

@media (max-width: 700px) {
  .page-lager-metamorphic-intro .lager-metamorphic-mineral-cards .lager-inline-example-cards {
    justify-content: center;
  }
}

body[data-theme="dark"] .page-lager-magmat-intro .page-title,
body[data-theme="dark"] .page-lager-magmat-intro .spalt-level-head h2,
body[data-theme="dark"] .page-lager-magmat-intro .lager-hydro-stage-section h3 {
  color: #f5f7fa;
}

body[data-theme="dark"] .page-lager-magmat-intro .lager-magmat-intro-richtext,
body[data-theme="dark"] .page-lager-magmat-intro .lager-magmat-intro-richtext p,
body[data-theme="dark"] .page-lager-magmat-intro .lager-magmat-intro-richtext li,
body[data-theme="dark"] .page-lager-magmat-intro .lager-hydro-stage-section p,
body[data-theme="dark"] .page-lager-magmat-intro .lager-hydro-stage-intro p,
body[data-theme="dark"] .page-lager-magmat-intro .lager-hydro-stage-notes p {
  color: #d5dbe3;
}

body[data-theme="dark"] .page-lager-hydrothermal-intro .lager-magmat-intro-card {
  border-top-color: #4f9fc2;
  background:
    radial-gradient(circle at top right, rgba(79, 159, 194, 0.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(32, 80, 101, 0.18), transparent 28%),
    linear-gradient(180deg, #202a31 0%, #171d22 100%);
}

body[data-theme="dark"] .page-lager-hydrothermal-intro .lager-magmat-intro-card--detail {
  border-top-color: #6eb7d4;
  background:
    radial-gradient(circle at top right, rgba(71, 148, 182, 0.18), transparent 32%),
    radial-gradient(circle at bottom left, rgba(24, 63, 82, 0.18), transparent 26%),
    linear-gradient(180deg, #1f2a31 0%, #161d22 100%);
}

body[data-theme="dark"] .page-lager-hydrothermal-intro .spalt-level-rank {
  color: #9fd4e8;
}

body[data-theme="dark"] .page-lager-sedimentary-intro .lager-magmat-intro-card {
  border-top-color: #D4A840;
  background:
    radial-gradient(circle at top right, rgba(196, 156, 48, 0.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(140, 108, 20, 0.18), transparent 28%),
    linear-gradient(180deg, #26220f 0%, #1c190a 100%);
}

body[data-theme="dark"] .page-lager-sedimentary-intro .lager-magmat-intro-card--detail {
  border-top-color: #E0BC60;
  background:
    radial-gradient(circle at top right, rgba(196, 156, 48, 0.18), transparent 32%),
    radial-gradient(circle at bottom left, rgba(140, 108, 20, 0.18), transparent 26%),
    linear-gradient(180deg, #28240f 0%, #1c190a 100%);
}

body[data-theme="dark"] .page-lager-sedimentary-intro .spalt-level-rank {
  color: #D4A840;
}

body[data-theme="dark"] .page-lager-metamorphic-intro .lager-magmat-intro-card {
  border-top-color: #5cb86e;
  background:
    radial-gradient(circle at top right, rgba(92, 184, 110, 0.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(45, 106, 79, 0.18), transparent 28%),
    linear-gradient(180deg, #1a241c 0%, #151a16 100%);
}

body[data-theme="dark"] .page-lager-metamorphic-intro .spalt-level-rank {
  color: #8fd49c;
}

body[data-theme="dark"] .page-lager-magmat-intro .lager-hydro-stage-intro {
  background: linear-gradient(135deg, rgba(31, 31, 31, 0.95), rgba(23, 23, 23, 0.98));
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .page-lager-magmat-intro .lager-hydro-stage-section {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.96), rgba(23, 23, 23, 0.98));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

body[data-theme="dark"] .tool-overview-grid .tool-overview-card--pseudomorphosen .thumb,
body[data-theme="dark"] .tool-overview-grid .tool-overview-card--bowen .thumb {
  background: #141516 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body[data-theme="dark"] .tool-overview-grid .tool-overview-card--kristallform .thumb,
body[data-theme="dark"] .tool-overview-grid .tool-overview-card--kristallform .tool-thumb--kristallform {
  background: #fff !important;
  border-color: transparent !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body[data-theme="dark"] .tool-overview-grid .tool-overview-card--kristallform .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

body[data-theme="dark"] .page-lager-magmat-intro .lager-hydro-stage-notes p {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .lager-hydro-stage-note-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

body[data-theme="dark"] .lager-hydro-stage-note-card h4,
body[data-theme="dark"] .lager-hydro-stage-note-card p,
body[data-theme="dark"] .lager-hydro-stage-note-text {
  color: #d5dbe3;
}

body[data-theme="dark"] .lager-hydro-stage-note-card::before {
  background: linear-gradient(180deg, #e08a51, #efb082);
}

body[data-theme="dark"] .lager-mineral-link {
  color: #8bc6ff;
  border-bottom-color: rgba(139, 198, 255, 0.35);
}

body[data-theme="dark"] .lager-mineral-link:hover {
  color: #d7ecff;
  border-bottom-color: rgba(215, 236, 255, 0.7);
  background: rgba(139, 198, 255, 0.12);
}

/* ── Dark mode: ALL Lagerstätten pages ── */

/* Page titles & card H2 headings */
body[data-theme="dark"] .page-lager-hydrothermal-intro .page-title,
body[data-theme="dark"] .page-lager-hydrothermal-intro .spalt-level-head h2,
body[data-theme="dark"] .page-lager-sedimentary-intro .page-title,
body[data-theme="dark"] .page-lager-sedimentary-intro .spalt-level-head h2,
body[data-theme="dark"] .page-lager-metamorphic-intro .page-title,
body[data-theme="dark"] .page-lager-metamorphic-intro .spalt-level-head h2,
body[data-theme="dark"] .page-lager-magmat-intro .lager-magmat-stage-section h3 {
  color: #f5f7fa;
}

/* Entry titles (H3) — each page gets its own accent color in dark mode */
body[data-theme="dark"] .page-lager-magmat-intro .lager-magmat-stage-section h3,
body[data-theme="dark"] .page-lager-magmat-intro .lager-hydro-stage-section h3 {
  color: #e8907e;
}

body[data-theme="dark"] .page-lager-hydrothermal-intro .lager-hydro-stage-section h3,
body[data-theme="dark"] .page-lager-hydrothermal-intro .lager-hydro-stage-section--grouped h3 {
  color: #7ac4df;
}

body[data-theme="dark"] .page-lager-sedimentary-intro .lager-hydro-stage-section h3,
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-magmat-stage-section h3 {
  color: #d4915a;
}

body[data-theme="dark"] .page-lager-metamorphic-intro .lager-hydro-stage-section h3,
body[data-theme="dark"] .page-lager-metamorphic-intro .lager-magmat-stage-section h3 {
  color: #7dcc8a;
}

/* Subsection titles (Typische Erze, Beispiel, Virtuelle Exkursionen) */
body[data-theme="dark"] .page-lager-magmat-intro .lager-card-subsection-title,
body[data-theme="dark"] .page-lager-magmat-intro .lager-section-title,
body[data-theme="dark"] .page-lager-hydrothermal-intro .lager-card-subsection-title,
body[data-theme="dark"] .page-lager-hydrothermal-intro .lager-section-title,
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-card-subsection-title,
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-section-title,
body[data-theme="dark"] .page-lager-metamorphic-intro .lager-card-subsection-title,
body[data-theme="dark"] .page-lager-metamorphic-intro .lager-section-title {
  color: #a8b8c8;
}

/* Body text for all lager pages */
body[data-theme="dark"] .page-lager-hydrothermal-intro .lager-magmat-intro-richtext,
body[data-theme="dark"] .page-lager-hydrothermal-intro .lager-magmat-intro-richtext p,
body[data-theme="dark"] .page-lager-hydrothermal-intro .lager-magmat-intro-richtext li,
body[data-theme="dark"] .page-lager-hydrothermal-intro .lager-hydro-stage-section p,
body[data-theme="dark"] .page-lager-hydrothermal-intro .lager-hydro-stage-intro p,
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-magmat-intro-richtext,
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-magmat-intro-richtext p,
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-magmat-intro-richtext li,
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-hydro-stage-section p,
body[data-theme="dark"] .page-lager-metamorphic-intro .lager-magmat-intro-richtext,
body[data-theme="dark"] .page-lager-metamorphic-intro .lager-magmat-intro-richtext p,
body[data-theme="dark"] .page-lager-metamorphic-intro .lager-magmat-intro-richtext li,
body[data-theme="dark"] .page-lager-metamorphic-intro .lager-hydro-stage-section p {
  color: #d5dbe3;
}

/* Card backgrounds for magmatic page */
body[data-theme="dark"] .page-lager-magmat-intro .lager-magmat-intro-card {
  border-top-color: #E05248;
  background:
    radial-gradient(circle at top right, rgba(210, 60, 50, 0.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(160, 35, 25, 0.18), transparent 28%),
    linear-gradient(180deg, #26191a 0%, #1c1314 100%);
}

body[data-theme="dark"] .page-lager-magmat-intro .lager-magmat-intro-card--detail {
  border-top-color: #E86860;
  background:
    radial-gradient(circle at top right, rgba(215, 70, 60, 0.18), transparent 32%),
    radial-gradient(circle at bottom left, rgba(165, 40, 30, 0.18), transparent 26%),
    linear-gradient(180deg, #271a1b 0%, #1c1314 100%);
}

/* Section backgrounds for hydrothermal/sedimentary/metamorphic */
body[data-theme="dark"] .page-lager-hydrothermal-intro .lager-hydro-stage-section,
body[data-theme="dark"] .page-lager-hydrothermal-intro .lager-hydro-stage-section--grouped,
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-hydro-stage-section,
body[data-theme="dark"] .page-lager-metamorphic-intro .lager-hydro-stage-section {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.96), rgba(23, 23, 23, 0.98));
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* Intro text areas */
body[data-theme="dark"] .page-lager-hydrothermal-intro .lager-hydro-stage-intro,
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-hydro-stage-intro,
body[data-theme="dark"] .page-lager-metamorphic-intro .lager-hydro-stage-intro {
  background: linear-gradient(135deg, rgba(31, 31, 31, 0.95), rgba(23, 23, 23, 0.98));
  border-color: rgba(255, 255, 255, 0.08);
}

/* Metamorphic intro card */
body[data-theme="dark"] .page-lager-metamorphic-intro .lager-magmat-intro-card--detail {
  border-top-color: #6bc47a;
  background:
    radial-gradient(circle at top right, rgba(92, 184, 110, 0.18), transparent 32%),
    radial-gradient(circle at bottom left, rgba(40, 90, 60, 0.18), transparent 26%),
    linear-gradient(180deg, #192119 0%, #141815 100%);
}

/* Page-color buttons for hydrothermal inline mineral cards */
.page-lager-hydrothermal-intro .lager-inline-mineral-card .btn-more {
  background: #156082;
  border-color: #156082;
  color: #fff;
}

.page-lager-hydrothermal-intro .lager-inline-mineral-card .btn-more:hover {
  background: #0d4a62;
  border-color: #0d4a62;
}

/* Excursion card dark mode */
body[data-theme="dark"] .lager-magmat-excursion-card {
  background:
    radial-gradient(circle at top right, rgba(80, 50, 40, 0.4), transparent 30%),
    linear-gradient(135deg, #2a2018 0%, #1e1812 100%);
  border-color: rgba(200, 130, 80, 0.22);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  color: #e8ddd5;
}

body[data-theme="dark"] .lager-magmat-excursion-card:hover {
  border-color: rgba(200, 130, 80, 0.45);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
}

body[data-theme="dark"] .lager-magmat-excursion-copy strong {
  color: color-mix(in srgb, var(--lager-link-color, #e0b898), white 30%);
}

body[data-theme="dark"] .lager-magmat-excursion-copy span {
  color: color-mix(in srgb, var(--lager-link-color, #b89a80), white 15%);
}

body[data-theme="dark"] .lager-magmat-excursion-orb {
  border-color: color-mix(in srgb, var(--lager-link-color, #9d4f47), transparent 75%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 16px rgba(0,0,0,0.4);
}

body[data-theme="dark"] .lager-magmat-excursion-cta {
  background: color-mix(in srgb, var(--lager-link-color, #7a4a35), black 20%);
  color: #fff;
}

body[data-theme="dark"] .lager-magmat-excursion-card:hover .lager-magmat-excursion-cta {
  background: color-mix(in srgb, var(--lager-link-color, #8f5840), black 10%);
}

/* Placeholder boxes */
body[data-theme="dark"] .lager-page-section-empty {
  border-color: rgba(255, 255, 255, 0.1);
  color: #666;
}

/* Dashed placeholder text */
body[data-theme="dark"] .lager-magmat-sub-placeholder {
  color: #555;
  border-color: rgba(255, 255, 255, 0.1);
}

.page-lager-sedimentary-grid {
  display: grid;
  gap: 18px;
  margin-top: 8px;
}

.page-lager-sedimentary-grid-head {
  display: grid;
  gap: 8px;
}

.page-lager-sedimentary-grid-head h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 38px);
  color: #3e2518;
}

.page-lager-sedimentary-grid-head p {
  margin: 0;
  max-width: 74ch;
  color: #654431;
  line-height: 1.75;
}

.page-lager-sedimentary-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(233, 113, 50, 0.14);
  color: #a4551e;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-lager-hydrothermal-intro .lager-magmat-intro-richtext {
  max-width: none;
}

.lager-hydro-stage-layout {
  display: grid;
  gap: 18px;
}

.lager-hydro-stage-group {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lager-hydro-stage-group-title {
  display: none;
}

.lager-hydro-stage-intro {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(228, 241, 247, 0.95));
  border: 1px solid rgba(21, 96, 130, 0.12);
}

.lager-hydro-stage-intro p {
  margin: 0;
  color: #17394c;
}

.lager-hydro-stage-sections {
  display: grid;
  gap: 14px;
}

.lager-hydro-stage-section {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 18px 20px 18px 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(233, 244, 249, 0.9));
  border: 1px solid rgba(21, 96, 130, 0.1);
  box-shadow: 0 10px 24px rgba(21, 96, 130, 0.06);
}

.lager-hydro-stage-section::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #156082, #62a8c4);
}

.lager-hydro-stage-section h3 {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.3;
  color: #102d46;
  letter-spacing: -0.01em;
}

.lager-hydro-stage-section--grouped {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.lager-hydro-stage-section--grouped::before {
  display: none;
}

.lager-hydro-stage-section--grouped h3 {
  display: block;
  width: auto;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lager-subtitle-color, #0f3142);
  font-size: clamp(16px, 1.4vw, 18px);
}

.lager-hydro-stage-section--grouped + .lager-hydro-stage-section--grouped {
  border-top: 3px solid color-mix(in srgb, var(--lager-link-color, #888888), transparent 68%);
  padding-top: 28px;
  margin-top: 8px;
}

body[data-theme="dark"] .lager-hydro-stage-section--grouped + .lager-hydro-stage-section--grouped {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--plain {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--plain::before {
  display: none;
}

/* Divider between entries (not within) */
.page-lager-sedimentary-intro .lager-hydro-stage-section--plain + .lager-hydro-stage-section--plain {
  border-top: 3px solid rgba(143, 76, 40, 0.22);
  padding-top: 28px;
  margin-top: 8px;
}

body[data-theme="dark"] .page-lager-sedimentary-intro .lager-hydro-stage-section--plain + .lager-hydro-stage-section--plain {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* Remove the inner divider from subsections in plain context */
.page-lager-sedimentary-intro .lager-hydro-stage-section--plain .lager-card-subsections {
  border-top: 0;
  padding-top: 0;
  margin-top: 20px;
}

.lager-hydro-stage-section p {
  margin: 0;
  color: #2b4c5f;
  line-height: 1.82;
}

.lager-hydro-stage-notes {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  width: 100%;
  margin: 12px 0 0;
}

.lager-hydro-stage-notes--columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.lager-hydro-stage-notes--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch;
}

.lager-hydro-stage-entry-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin: 12px 0 0;
}

.lager-hydro-stage-entry-intro {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.lager-hydro-stage-entry-intro h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  color: var(--lager-subtitle-color, #8f4c28);
}

.lager-hydro-stage-entry-intro p {
  margin: 0;
  color: #5a3520;
  line-height: 1.8;
}

.lager-hydro-stage-notes p {
  margin: 0;
  padding: 0;
  color: #18394b;
}

.lager-hydro-stage-note-card {
  display: grid;
  gap: 14px;
  min-height: 150px;
  padding: 20px 22px 22px;
  border-radius: 22px;
  background: rgba(21, 96, 130, 0.08);
  border: 1px solid rgba(21, 96, 130, 0.12);
  box-shadow: 0 12px 28px rgba(21, 96, 130, 0.08);
  position: relative;
  overflow: hidden;
}

.lager-hydro-stage-note-card::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #c8642d, #e59a69);
}

.lager-hydro-stage-note-card h4 {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.25;
  color: var(--lager-subtitle-color, #102d46);
  padding-left: 2px;
}

.lager-hydro-stage-note-card p,
.lager-hydro-stage-note-text {
  margin: 0;
  line-height: 1.8;
  color: #18394b;
}

.lager-hydro-stage-note-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.lager-hydro-stage-note-aside {
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: start;
}

.page-lager-sedimentary-intro .lager-hydro-stage-note-card--split {
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 320px);
  align-items: start;
  column-gap: 24px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-note-card--split .lager-inline-example {
  margin-top: 0;
}

.page-lager-sedimentary-intro .lager-hydro-stage-note-card--split .lager-inline-example-cards {
  justify-content: flex-start;
}

.lager-stage-inline-figure {
  margin: 4px 0 0;
  display: flex;
  justify-content: center;
}

.lager-stage-inline-figure img {
  display: block;
  width: min(100%, 420px);
  border-radius: 18px;
  border: 1px solid rgba(200, 100, 45, 0.16);
  box-shadow: 0 12px 28px rgba(184, 90, 39, 0.12);
  object-fit: cover;
}

.page-lager-sedimentary-intro .lager-hydro-stage-entry-cards {
  align-items: start;
}

.page-lager-sedimentary-intro .lager-hydro-stage-note-card--manganknollen {
  align-self: start;
}

.page-lager-sedimentary-intro .lager-hydro-stage-note-card--travertine {
  align-self: start;
}

.lager-note-subsection-title {
  display: block;
  color: var(--lager-subtitle-color, #8f4c28);
  font-weight: 700;
  font-size: 1.08em;
  margin-top: 14px;
  margin-bottom: 3px;
}
.lager-manganknollen-text p {
  margin-top: 0;
  margin-bottom: 0;
}

.lager-inline-example {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  position: relative;
  overflow: visible;
}

.lager-sequence-arrow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 0;
  row-gap: 6px;
  width: 100%;
  max-width: none;
  margin: 10px 0 14px;
  position: relative;
  z-index: 4;
}

.lager-sequence-arrow-text {
  grid-column: 1 / -1;
  justify-self: center;
  color: var(--lager-subtitle-color, #8f4c28);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.lager-sequence-arrow-line {
  display: block;
  grid-column: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--lager-subtitle-color, #8f4c28);
  box-shadow: 0 1px 4px rgba(143, 76, 40, 0.16);
  position: relative;
  z-index: 1;
}

.lager-sequence-arrow-head {
  display: block;
  grid-column: 2;
  width: 18px;
  height: 18px;
  margin-left: -6px;
  border-top: 4px solid var(--lager-subtitle-color, #8f4c28);
  border-right: 4px solid var(--lager-subtitle-color, #8f4c28);
  transform: rotate(45deg);
  position: relative;
  z-index: 2;
}

.lager-inline-example-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.lager-inline-example-cards--evaporite-sequence {
  position: relative;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  gap: 8px;
}

.lager-inline-example-cards--evaporite-sequence .lager-inline-mineral-card {
  width: 170px;
  max-width: 170px;
  flex: 0 0 170px;
}

.lager-inline-example-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8f4c28;
}

.lager-inline-mineral-card {
  width: 190px;
  max-width: 190px;
  flex: 0 0 190px;
  margin: 0;
  padding: 8px 8px 7px;
  align-items: stretch;
  text-align: center;
  text-decoration: none;
  justify-self: start;
}

.lager-inline-mineral-card .mineral-title {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 700;
}

.lager-inline-mineral-card .thumb {
  margin-bottom: 5px;
}

.lager-inline-mineral-card .btn-more {
  margin: 0;
  align-self: center;
  padding: 4px 10px;
  font-size: 11px;
}

.lager-hydro-stage-example-group {
  display: grid;
  gap: 12px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-example-group--plain .lager-hydro-stage-note-card {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.page-lager-sedimentary-intro .lager-hydro-stage-example-group--plain .lager-hydro-stage-note-card::before {
  display: none;
}

.page-lager-sedimentary-intro .lager-hydro-stage-example-group--plain .lager-hydro-stage-note-main {
  gap: 8px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-example-group--plain .lager-hydro-stage-note-card h4 {
  padding-left: 0;
}

.page-lager-sedimentary-intro .lager-hydro-stage-example-group--plain {
  margin-bottom: 34px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-example-group--plain .lager-hydro-stage-example-title {
  font-size: 14px !important;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.82;
  margin-bottom: 6px;
}

.lager-hydro-stage-example-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  color: var(--lager-subtitle-color, #8f4c28);
}

.lager-hydro-stage-example-title--inline {
  font-size: 16px;
  margin-bottom: 8px;
}

.page-lager-magmat-intro .lager-inline-text-example .lager-hydro-stage-example-title--inline {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(108, 84, 53, 0.08);
  color: #7a4b2e;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 10px;
}

.lager-inline-text-example {
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lager-inline-text-example p {
  margin: 0;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section .lager-inline-text-example {
  margin-top: 2px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-main {
  min-width: 0;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside {
  min-width: 0;
  align-self: start;
  padding-left: 200px;
  border-left: 1px solid #000;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside .lager-inline-text-example {
  margin-top: 0;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside .lager-hydro-stage-example-title--inline {
  margin-bottom: 6px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside .lager-hydro-stage-note-card {
  gap: 10px;
  padding: 18px 18px 16px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside .lager-hydro-stage-note-card h4 {
  font-size: clamp(18px, 1.6vw, 22px);
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside .lager-hydro-stage-note-card p {
  line-height: 1.65;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside .lager-inline-mineral-card {
  width: 150px;
  max-width: 150px;
  flex-basis: 150px;
  padding: 6px 6px 7px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside .lager-inline-mineral-card .thumb {
  margin-bottom: 4px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside .lager-inline-mineral-card .btn-more {
  padding: 3px 9px;
  font-size: 10px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-split--biogenic {
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside--biogenic {
  align-self: start;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside--biogenic .lager-inline-text-example {
  margin-top: 0;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside--biogenic .lager-inline-text-example--biogenic {
  display: grid;
  gap: 10px;
  max-width: 240px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside--biogenic .lager-inline-text-example--biogenic p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5a3520;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside--biogenic .lager-inline-example--biogenic {
  margin-top: 2px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside--biogenic .lager-inline-example-cards {
  justify-content: flex-start;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section-aside--biogenic .lager-inline-rock-card {
  width: 190px;
  max-width: 190px;
  flex-basis: 190px;
}

.page-lager-sedimentary-intro .lager-inline-text-example .lager-hydro-stage-notes--inline {
  grid-template-columns: 1fr;
  justify-content: start;
  align-items: start;
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-showcase {
  display: grid;
  gap: 24px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-text-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-text-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  min-height: 100%;
  padding: 24px 22px;
  border-radius: 26px;
  border: none;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(155, 112, 21, 0.08);
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-text-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.72;
  letter-spacing: normal;
  color: #9B7015;
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-text-card p {
  margin: 0;
  font-size: 18px;
  line-height: 1.72;
  color: #111111;
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-block {
  display: grid;
  gap: 14px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-grid .lager-hydro-stage-note-card {
  min-height: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-grid .lager-hydro-stage-note-card::before {
  display: none;
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-grid .lager-hydro-stage-note-main {
  justify-items: start;
  text-align: left;
  gap: 12px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-grid .lager-hydro-stage-note-card h4 {
  font-size: clamp(16px, 1.4vw, 18px);
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-grid .lager-hydro-stage-note-card p {
  max-width: none;
  margin-inline: 0;
  line-height: 1.6;
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-grid .lager-hydro-stage-note-aside {
  justify-items: center;
  width: 100%;
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-grid .lager-inline-example {
  width: 100%;
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-grid .lager-inline-example-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  gap: 10px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-grid .lager-inline-mineral-card {
  width: 100%;
  max-width: none;
  flex-basis: auto;
  min-width: 0;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(143, 76, 40, 0.08);
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-hydro-stage-section-split {
  --clastic-example-width: clamp(300px, 28vw, 370px);
  grid-template-columns: minmax(0, 1fr) var(--clastic-example-width);
  column-gap: clamp(24px, 3vw, 44px);
  row-gap: 24px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column {
  position: relative;
  overflow: hidden;
  padding: 26px 28px 28px;
  border-radius: 30px;
  border: 1px solid rgba(197, 122, 68, 0.14);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.9), transparent 28%),
    radial-gradient(circle at bottom left, rgba(233, 187, 139, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(255, 250, 245, 0.96), rgba(247, 237, 228, 0.98));
  box-shadow: 0 22px 40px rgba(143, 76, 40, 0.08);
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column::before {
  content: "";
  position: absolute;
  inset: 18px auto 18px calc(100% - clamp(320px, 30vw, 392px));
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200, 100, 45, 0.16), transparent);
  pointer-events: none;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-hydro-stage-section-main {
  min-width: 0;
  align-self: center;
  max-width: 700px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-hydro-stage-section-main h3 {
  margin: 0 0 14px;
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #8f4c28;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-hydro-stage-section-main p {
  max-width: 34ch;
  font-size: clamp(17px, 1.2vw, 20px);
  line-height: 1.72;
  color: #3f2a1e;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-hydro-stage-section-aside {
  min-width: 0;
  display: grid;
  align-self: center;
  justify-self: center;
  justify-items: center;
  width: 100%;
  max-width: 370px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-hydro-stage-section-aside .lager-inline-text-example {
  margin-top: 0;
  width: 100%;
  max-width: 350px;
  text-align: center;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-hydro-stage-section-aside .lager-hydro-stage-example-title--inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(143, 76, 40, 0.08);
  color: #8f4c28;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 14px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-inline-text-example .lager-hydro-stage-notes--inline {
  justify-content: center;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-hydro-stage-note-card {
  width: 100%;
  max-width: 350px;
  padding: 22px 20px 18px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 239, 231, 0.96));
  box-shadow: 0 18px 34px rgba(143, 76, 40, 0.1);
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-hydro-stage-note-main {
  justify-items: center;
  text-align: center;
  gap: 12px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-hydro-stage-note-card h4 {
  font-size: clamp(20px, 1.8vw, 30px);
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-hydro-stage-note-card p {
  max-width: 24ch;
  margin-inline: auto;
  line-height: 1.6;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-inline-example-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  gap: 10px;
}

.page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-inline-mineral-card {
  width: 100%;
  max-width: none;
  flex-basis: auto;
  min-width: 0;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(143, 76, 40, 0.08);
}

@media (max-width: 980px) {
  .page-lager-sedimentary-intro .lager-hydro-stage-clastic-showcase {
    padding: 22px;
  }

  .page-lager-sedimentary-intro .lager-hydro-stage-section-split--biogenic {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .page-lager-sedimentary-intro .lager-hydro-stage-clastic-text-grid,
  .page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-grid {
    grid-template-columns: 1fr;
  }

  .page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-grid .lager-inline-example-cards {
    grid-template-columns: 1fr;
  }

  .page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column {
    padding: 22px 22px 24px;
  }

  .page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column::before {
    display: none;
  }

  .page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-hydro-stage-section-split {
    grid-template-columns: 1fr;
    row-gap: 22px;
  }

  .page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-hydro-stage-section-main {
    max-width: none;
  }

  .page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-hydro-stage-section-main p {
    max-width: none;
  }

  .page-lager-sedimentary-intro .lager-hydro-stage-section--clastic-two-column .lager-inline-example-cards {
    grid-template-columns: 1fr;
  }
}

.page-lager-sedimentary-intro .lager-inline-text-example .lager-hydro-stage-notes--inline .lager-hydro-stage-note-card {
  min-height: 0;
}

.lager-hydro-stage-example-group .lager-hydro-stage-notes > .lager-hydro-stage-example-title,
.lager-hydro-stage-example-group .lager-hydro-stage-notes--columns > .lager-hydro-stage-example-title,
.lager-hydro-stage-example-group .lager-hydro-stage-notes--pair > .lager-hydro-stage-example-title {
  grid-column: 1 / -1;
  margin-bottom: 2px;
}

@media (max-width: 700px) {
  .lager-hydro-stage-notes {
    width: 100%;
  }

  .lager-hydro-stage-notes--columns {
    grid-template-columns: 1fr;
  }

  .lager-hydro-stage-notes--pair {
    grid-template-columns: 1fr;
  }

  .page-lager-sedimentary-intro .lager-inline-text-example .lager-hydro-stage-notes--inline {
    grid-template-columns: 1fr;
  }

  .page-lager-sedimentary-intro .lager-hydro-stage-section-split {
    grid-template-columns: 1fr;
  }

  .lager-hydro-stage-entry-cards {
    grid-template-columns: 1fr;
  }

  .page-lager-sedimentary-intro .lager-hydro-stage-note-card--oolithic,
  .page-lager-sedimentary-intro .lager-hydro-stage-note-card--manganknollen,
  .page-lager-sedimentary-intro .lager-hydro-stage-note-card--travertine {
    grid-column: auto;
    grid-row: auto;
  }

  .lager-hydro-stage-note-card {
    min-height: 0;
    padding: 18px 18px 20px;
  }

  .page-lager-sedimentary-intro .lager-hydro-stage-note-card--split {
    grid-template-columns: 1fr;
  }

  .lager-sequence-arrow {
    margin: 8px auto 12px;
    row-gap: 5px;
  }

  .lager-sequence-arrow-line {
    width: 100%;
    height: 4px;
  }

  .lager-sequence-arrow-text {
    font-size: 12px;
  }

  .lager-sequence-arrow-head {
    width: 16px;
    height: 16px;
    margin-left: -5px;
    border-top-width: 4px;
    border-right-width: 4px;
  }
}

.lager-mineral-link {
  color: var(--lager-link-color, #0d5f84);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--lager-link-border, rgba(13, 95, 132, 0.35));
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.lager-mineral-link:hover {
  color: var(--lager-link-color-hover, #083d57);
  border-bottom-color: var(--lager-link-border-hover, rgba(8, 61, 87, 0.7));
  background: var(--lager-link-bg-hover, rgba(13, 95, 132, 0.08));
}

.glanz-card-actions {
  display: flex;
  justify-content: center;
}

.page-werkzeug-glanz .btn-filter-glanz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: auto;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: #2f72bb !important;
  border: 1px solid #2f72bb !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.page-werkzeug-glanz .tool-glanz-card.is-unavailable .btn-filter-glanz {
  background: linear-gradient(135deg, #575757 0%, #6b6b6b 100%) !important;
  border-color: #5e5e5e !important;
  box-shadow: 0 10px 18px rgba(28, 28, 28, 0.18);
}

.glanz-tone-metal .glanz-card-eyebrow {
  background: linear-gradient(135deg, rgba(113, 123, 133, 0.22), rgba(66, 74, 83, 0.1));
}

.glanz-tone-submetal .glanz-card-eyebrow {
  background: linear-gradient(135deg, rgba(96, 108, 121, 0.22), rgba(63, 72, 81, 0.08));
}

.glanz-tone-diamond .glanz-card-eyebrow {
  background: linear-gradient(135deg, rgba(176, 196, 220, 0.28), rgba(124, 147, 172, 0.1));
}

.glanz-tone-glass .glanz-card-eyebrow {
  background: linear-gradient(135deg, rgba(164, 196, 211, 0.24), rgba(99, 135, 158, 0.08));
}

.glanz-tone-grease .glanz-card-eyebrow {
  background: linear-gradient(135deg, rgba(196, 182, 140, 0.28), rgba(136, 120, 79, 0.1));
}

.glanz-tone-pearl .glanz-card-eyebrow {
  background: linear-gradient(135deg, rgba(223, 208, 222, 0.3), rgba(182, 159, 180, 0.1));
}

.glanz-tone-resin .glanz-card-eyebrow {
  background: linear-gradient(135deg, rgba(186, 147, 92, 0.28), rgba(135, 92, 41, 0.1));
}

.glanz-tone-silk .glanz-card-eyebrow {
  background: linear-gradient(135deg, rgba(214, 204, 180, 0.28), rgba(164, 149, 111, 0.1));
}

.glanz-tone-matte .glanz-card-eyebrow {
  background: linear-gradient(135deg, rgba(180, 174, 165, 0.28), rgba(123, 118, 109, 0.1));
}

@media (max-width: 1100px) {
  .bruch-list {
    grid-template-columns: 1fr;
  }

  .bruch-hero {
    grid-template-columns: 1fr;
  }

  .bruch-hero-visual {
    max-width: none;
  }

  .glanz-hero-panel {
    grid-template-columns: 1fr;
  }

  .glanz-hero-visual {
    max-width: none;
  }

  .glanz-hero-visual img {
    height: 100%;
  }

  .glanz-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bruch-row-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .bruch-row-tagline {
    max-width: none;
    text-align: left;
  }

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

  .bruch-example-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .bruch-hero {
    padding: 22px;
    border-radius: 24px;
  }

  .glanz-hero-panel {
    padding: 22px;
    border-radius: 24px;
  }

  .glanz-hero-copy h2 {
    font-size: 34px;
  }

  .bruch-hero-copy h2 {
    font-size: 34px;
  }

  .bruch-row {
    padding: 20px;
  }

  .bruch-example-grid {
    grid-template-columns: 1fr;
  }

  .bruch-level-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .bruch-row .btn-filter-bruch {
    width: 100% !important;
    text-align: center;
  }

  .glanz-gallery {
    grid-template-columns: 1fr;
  }

  .page-werkzeug-glanz .tool-glanz-card {
    padding: 20px;
  }

  .glanz-card-title {
    font-size: 28px;
  }

  .page-werkzeug-glanz .btn-filter-glanz {
    width: 100%;
  }
}

/* MODAL – FIX ROBUSTE */
.app-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999999;
  padding: 24px;
}

.app-modal.is-open {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.app-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(210, 177, 122, 0.22), transparent 42%),
    rgba(17, 24, 39, 0.64);
  backdrop-filter: blur(7px);
}

.app-modal-box {
  position: relative;
  width: min(520px, 92vw);
  background: linear-gradient(180deg, #fffdf8 0%, #fff 100%);
  border: 1px solid rgba(137, 101, 56, 0.18);
  border-radius: 24px;
  padding: 28px 26px 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
  z-index: 1;
  color: #2b2118;
}

.app-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(182, 137, 76, 0.12);
  color: #8d6231;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-modal-badge::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c28a48, #8d6231);
}

.app-modal-box h3 {
  margin: 16px 0 10px;
  color: #2f261d;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.15;
}

.app-modal-text {
  color: #5f5044;
  font-size: 1rem;
  line-height: 1.7;
}

.app-modal-text p {
  margin: 0;
}

.app-modal-text p + p {
  margin-top: 12px;
}

.app-modal-btn {
  margin-top: 22px;
  min-width: 140px;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #3f2f1f, #8d6231);
  color: #fffaf2;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(141, 98, 49, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.app-modal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(141, 98, 49, 0.3);
}

.app-modal-btn:active {
  transform: translateY(0);
}

.app-modal-btn:focus-visible {
  outline: 3px solid rgba(194, 138, 72, 0.35);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .app-modal {
    padding: 16px;
  }

  .app-modal-box {
    width: min(100%, 92vw);
    padding: 22px 18px 20px;
    border-radius: 20px;
  }

  .app-modal-btn {
    width: 100%;
  }
}

.glanz-hero-card .thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

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

/* =========================================
   BRUCH – hover ouvre Beispiele
   ========================================= */

.site-footer {
  background: #fff;
  padding: 32px 24px 40px;
  position: relative;
  overflow: hidden;
  border-top: 0;
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 340px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.08), transparent 26%),
    linear-gradient(180deg, #333333 0%, #2d2d2d 52%, #333333 100%);
  z-index: 0;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.footer-logos {
  border: 1px solid #ece7df;
  background: #fcfbf9;
  padding: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 18px 0;
  border-radius: 16px;
}

.footer-logos img {
  max-width: 100%;
  height: auto;
  display: block;
}

.footer-contacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (max-width: 980px) {
  .site-footer::before {
    display: none;
  }

  .site-footer {
    padding: 28px 16px;
  }

  .footer-inner {
    max-width: 100%;
    margin: 0;
  }

  .footer-logos {
    padding: 14px;
    margin: 16px auto;
    width: min(100%, 420px);
  }

  .footer-logos img {
    width: auto;
    max-width: min(100%, 360px);
    max-height: 90px;
  }

  .footer-contacts {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding: 24px 14px;
  }

  .footer-top h3,
  .provider,
  .footer-version,
  .footer-contacts {
    text-align: center;
  }

  .footer-logos {
    width: min(100%, 340px);
    padding: 12px;
  }

  .footer-logos img {
    max-width: min(100%, 300px);
    max-height: 72px;
  }
}

@media (max-width: 480px) {
  .site-footer {
    padding: 20px 12px;
  }

  .footer-logos {
    width: 100%;
    padding: 10px;
  }

  .footer-logos img {
    max-width: min(100%, 240px);
    max-height: 56px;
  }

  .footer-top h3 {
    font-size: 16px;
  }
}

/* =========================
   SIDEBAR REFRESH
   ========================= */
.left {
  position: relative;
  overflow: visible;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.08), transparent 26%),
    linear-gradient(180deg, #333333 0%, #2d2d2d 52%, #333333 100%);
  padding: 22px 18px;
  align-self: stretch;
  transition: transform 0.24s ease, opacity 0.2s ease;
}

.right {
  min-width: 0;
}

.sidebar-toggle {
  position: absolute;
  top: 120px;
  left: 100% !important;
  right: auto !important;
  width: 44px;
  height: 44px;
  margin-bottom: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  z-index: 40;
  transform: translateX(-50%);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

.sidebar-toggle-icon {
  font-size: 16px;
  line-height: 1;
}

.sidebar-show-btn {
  position: fixed;
  left: 16px;
  top: 90px;
  z-index: 30000;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #333333;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  display: none;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 0;
  line-height: 1;
}

body.sidebar-collapsed .sidebar-show-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.sidebar-collapsed .page {
  grid-template-columns: 0 1fr;
}

body.sidebar-collapsed .left {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.left::before {
  content: "";
  position: absolute;
  inset: 12px 10px;
  border-radius: 22px;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.left > * {
  position: relative;
  z-index: 1;
}

.logo-wrap {
  margin-top: 10px;
  margin-bottom: 18px;
}

.logo-wrap a {
  width: 100%;
  max-width: 240px;
  padding: 6px 8px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.logo {
  width: 200px;
  max-width: 100%;
  opacity: 1;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25));
}

.search {
  position: relative;
  max-width: 260px;
  margin:-30px auto 16px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.16);
}

.search:focus-within {
  box-shadow: 0 0 0 4px rgba(51, 51, 51, 0.12), 0 16px 30px rgba(0, 0, 0, 0.18);
  border-color: rgba(51, 51, 51, 0.28);
}

.search input {
  min-width: 0;
  background: transparent;
  color: #111;
  font-size: 14px;
}

.search input::placeholder {
  color: #666;
}

.search button {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #4b5563 0%, #374151 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
  opacity: 1;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
  position: relative;
  overflow: hidden;
}

.search button::before {
  content: "🔍";
  font-size: 15px;
  line-height: 1;
  transform: translateY(0);
}

.search button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
  filter: brightness(1.03);
}

.search button:focus-visible {
  outline: 2px solid rgba(51, 51, 51, 0.24);
  outline-offset: 2px;
}

.filter-card {
  position: relative;
  top: -1px;
  max-width: 280px;
  margin: 0 auto;
  padding: 16px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 247, 247, 0.98) 100%);
  box-shadow:
    0 22px 40px rgba(3, 10, 18, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.filter-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111;
}

.filter-title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #333333 0%, #555555 100%);
  box-shadow: 0 0 0 6px rgba(51, 51, 51, 0.1);
}

.filter-title.filter-title--active::before {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.16);
}

.filter-form {
  gap: 10px;
}

.field {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.field label,
.filter-label {
  display: block;
  margin-bottom: 8px;
  color: #222;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field .filter-label.acid-test-label {
  text-transform: none !important;
}

.field select,
.field input,
.glanz-toggle,
.kristall-toggle,
.spalt-toggle,
.bruch-toggle {
  border-radius: 12px;
  border: 1px solid #d7d7d7;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 400;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.field select:focus,
.field input:focus,
.glanz-toggle:focus {
  border-color: #333333;
  box-shadow: 0 0 0 4px rgba(51, 51, 51, 0.12);
}

.hint {
  margin-top: 6px;
  color: #666;
  font-weight: 400;
  line-height: 1.45;
}

.glanz-toggle,
.kristall-toggle,
.spalt-toggle,
.bruch-toggle {
  min-height: 40px;
  padding: 10px 38px 10px 12px;
  font-weight: 400;
}

.glanz-toggle::after {
  right: 14px;
  color: #555;
}

.glanz-panel {
  margin-top: 8px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.12);
}

.checkbox-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.checkbox-inline {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #d7d7d7;
  font-weight: 400;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.checkbox-inline:hover {
  border-color: #c3c3c3;
  background: #fcfcfc;
  transform: translateY(-1px);
}

.checkbox-inline input[type="checkbox"] {
  accent-color: #333333;
}

#strichPalette.color-palette,
#strichPalette,
#eigenPalette.color-palette,
#eigenPalette {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 8px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 242, 237, 0.9) 100%);
  border: 0;
  box-shadow: none;
}

.color-swatch {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  box-shadow:
    0 10px 18px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
  overflow: hidden;
  transform: translateY(0);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    filter 0.18s ease;
}

.color-swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.46), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}

.color-swatch:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 16px 24px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
  border-color: rgba(20, 20, 20, 0.18);
}

.active-filters {
  margin-bottom: 16px;
}

.filter-chip {
  background: linear-gradient(135deg, #333333 0%, #4a4a4a 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.dichte-range {
  gap: 10px;
}

.dichte-range input {
  text-align: center;
  font-weight: 600;
}

.range-slider {
  margin-top: 10px;
}

.range-slider .range-track {
  height: 8px;
  background: linear-gradient(90deg, #dddddd 0%, #ececec 100%);
}

.range-slider .range-fill {
  background: linear-gradient(90deg, #333333 0%, #555555 100%);
}

.range-slider input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #333333 0%, #555555 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.range-slider input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #333333 0%, #555555 100%);
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-primary,
.btn-secondary {
  min-height: 42px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #333333 0%, #4a4a4a 100%);
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.22);
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: none;
}

.btn-secondary {
  border-color: #d7d7d7;
  color: #333333;
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
}

.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}

@media (max-width: 980px) {
  .topbar,
  .menu,
  .dropdown {
    position: relative;
    z-index: 40000 !important;
  }

  .dropdown-panel,
  .submenu-panel {
    z-index: 40001 !important;
  }

  .menu .dropdown.open {
    z-index: 40010 !important;
  }

  .menu .dropdown.open .dropdown-panel,
  .menu .dropdown.open .submenu-panel {
    z-index: 40020 !important;
  }

  .menu-item {
    position: relative;
    z-index: 1;
  }

  .left {
    position: relative;
    top: auto;
    align-self: stretch;
    padding: 22px 18px;
    background: linear-gradient(180deg, #333333 0%, #2d2d2d 100%);
  }

  .left::before {
    inset: 8px;
    border-radius: 18px;
  }

  .logo-wrap a,
  .search,
  .filter-card {
    max-width: 100%;
  }

  .filter-card {
    position: static;
    top: auto;
    max-width: 100%;
    border-radius: 14px;
  }

  .sidebar-toggle {
    display: flex;
    position: absolute;
    top: 300px;
    left: 100% !important;
    right: auto !important;
    z-index: 10;
  }

  body.sidebar-collapsed .page {
    grid-template-columns: 1fr;
  }

  body.sidebar-collapsed .left {
    display: none;
  }

}

@media (max-width: 640px) {
  .left {
    padding: 18px 12px;
  }

  .logo-wrap a {
    padding: 12px;
    border-radius: 14px;
  }

  .search {
    padding: 6px 10px;
    border-radius: 10px;
  }

  .field {
    padding: 9px;
    border-radius: 12px;
  }

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

  .sidebar-toggle {
    top: 280px;
    left: 100% !important;
    right: auto !important;
    width: 44px;
    height: 44px;
    font-size: 12px;
    transform: translateX(-45%);
    z-index: 10;
  }

  .sidebar-show-btn {
    top: 78px;
    left: 12px;
    padding: 10px 12px;
    font-size: 12px;
  }
}

:root {
  --page-bg: #f5f5f3;
  --surface: #ffffff;
  --surface-soft: #fcfbf9;
  --surface-panel: rgba(248, 248, 248, 0.96);
  --text-color: #111111;
  --text-soft: #666666;
  --text-muted: #4d4d4d;
  --line-color: #e7e3dc;
  --field-border: #d7d7d7;
  --card-border: rgba(0, 0, 0, 0.08);
  --sidebar-bg: #333333;
  --header-bg: var(--sidebar-bg);
  --header-link: #ffffff;
  --header-border: rgba(255, 255, 255, 0.12);
  --dropdown-bg: #333333;
  --toggle-bg: rgba(255, 255, 255, 0.1);
  --toggle-text: rgba(255, 255, 255, 0.76);
  --toggle-active-text: #111111;
  --toggle-thumb: #ffffff;
}

body[data-theme="dark"] {
  --page-bg: #101010;
  --surface: #181818;
  --surface-soft: #1f1f1f;
  --surface-panel: rgba(30, 30, 30, 0.98);
  --text-color: #f2f2f2;
  --text-soft: #b5b5b5;
  --text-muted: #d0d0d0;
  --line-color: #323232;
  --field-border: #3a3a3a;
  --card-border: rgba(255, 255, 255, 0.08);
  --sidebar-bg: #161616;
  --header-bg: var(--sidebar-bg);
  --header-link: #f8f8f8;
  --header-border: rgba(255, 255, 255, 0.08);
  --dropdown-bg: #171717;
  --toggle-bg: rgba(255, 255, 255, 0.08);
  --toggle-text: rgba(255, 255, 255, 0.72);
  --toggle-active-text: #111111;
  --toggle-thumb: #f3f3f3;
}

body {
  background: var(--page-bg);
  color: var(--text-color);
  transition: background-color 0.24s ease, color 0.24s ease;
}

.left,
.site-footer::before {
  background: var(--sidebar-bg);
}

body[data-theme="dark"] .left {
  background: #161616 !important;
}

.right,
.content,
.site-footer {
  background: var(--surface);
  color: var(--text-color);
}

.content {
  border-top-left-radius: 36px;
  overflow: hidden;
}

.content h1,
.content h2,
.content h3,
.content p,
.content li,
.content td,
.content th,
.page-title {
  color: var(--text-color);
}

.two-cols,
.provider,
.footer-version,
.footer-contacts,
.hint {
  color: var(--text-muted);
}

.site-footer {
  border-top-color: transparent;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  position: sticky;
  top: 0;
  z-index: 1200;
  justify-content: space-between;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.topbar::before {
  display: none;
}

.menu {
  position: static;
  transform: none;
  flex: 1 1 auto;
  justify-content: center;
  gap: clamp(26px, 3vw, 58px);
  margin: 0;
  max-width: none;
}

.topbar .menu > .menu-item > a,
.topbar .menu > .menu-item > button,
.menu-item a,
.dropbtn,
.submenu-title,
.dropdown-panel a {
  color: var(--header-link);
}

.dropdown-panel {
  background: var(--dropdown-bg) !important;
  border-color: var(--header-border);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 0;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 290px;
  justify-content: flex-end;
}

.navbar-logo-right {
  flex: 0 0 auto;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lang-btn {
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  background: transparent;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lang-btn:hover {
  transform: translateY(-1px);
}

.lang-btn.is-active {
  background: linear-gradient(135deg, #f2f5fb 0%, #d8e4ff 100%);
  color: #0f1f3d;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.theme-toggle {
  position: fixed;
  right: 78px;
  bottom: 22px;
  z-index: 32000;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
}

.scroll-top-btn {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 32000;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-color);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-color);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.scroll-top-btn__icon {
  display: inline-block;
  transform: translateY(0);
  transition: transform 0.22s ease;
}

.scroll-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-top-btn:hover {
  background: var(--surface-soft);
}

.scroll-top-btn:hover .scroll-top-btn__icon,
.scroll-top-btn:focus-visible .scroll-top-btn__icon {
  transform: translateY(-4px);
}

.theme-toggle-track {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(2, 40px);
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: var(--toggle-bg);
  border: 1px solid var(--line-color);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.theme-toggle-option {
  position: relative;
  z-index: 1;
  padding: 8px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--toggle-text);
  transition: color 0.2s ease;
}

.theme-toggle-option.is-active {
  color: var(--toggle-active-text);
}

.theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 40px;
  height: calc(100% - 6px);
  border-radius: 999px;
  background: var(--toggle-thumb);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.24s ease;
}

body[data-theme="dark"] .theme-toggle-thumb {
  transform: translateX(100%);
}

.search {
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--surface);
}

.search input,
.field select,
.field input,
.glanz-toggle,
.kristall-toggle,
.spalt-toggle,
.bruch-toggle {
  color: var(--text-color);
}

.search input::placeholder,
.footer-top h3 {
  color: var(--text-muted);
}

.search button,
.filter-chip,
.btn-primary {
  color: #ffffff;
}

.filter-card {
  border-color: var(--card-border);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
}

.field {
  background: var(--surface-panel);
  border-color: var(--card-border);
}

.field label,
.filter-label,
.filter-title {
  color: var(--text-color);
}

.field select,
.field input,
.glanz-toggle,
.kristall-toggle,
.spalt-toggle,
.bruch-toggle,
.checkbox-inline,
.glanz-panel,
.footer-logos,
.btn-secondary {
  border-color: var(--field-border);
}

.field select,
.field input,
.glanz-toggle,
.kristall-toggle,
.spalt-toggle,
.bruch-toggle,
.checkbox-inline,
.glanz-panel,
.footer-logos,
.btn-secondary,
.search {
  background-color: var(--surface);
}

.checkbox-inline:hover {
  background: var(--surface-soft);
}

.footer-logos {
  background: var(--surface-soft);
}

body[data-theme="dark"] .filter-card,
body[data-theme="dark"] .glanz-panel,
body[data-theme="dark"] .site-footer {
  background: #161616 !important;
}

body[data-theme="dark"] .page-lager-back a {
  background: #2a2d33;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  color: #a8c4e0;
}

body[data-theme="dark"] .footer-logos {
  background: #161616 !important;
  border-color: #2a2a2a !important;
  box-shadow: none;
}

body[data-theme="dark"] .search,
body[data-theme="dark"] .field,
body[data-theme="dark"] .checkbox-inline,
body[data-theme="dark"] .btn-secondary {
  box-shadow: none;
}

body[data-theme="dark"] .logo {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
}

body[data-theme="dark"] #strichPalette.color-palette,
body[data-theme="dark"] #strichPalette,
body[data-theme="dark"] #eigenPalette.color-palette,
body[data-theme="dark"] #eigenPalette {
  background: linear-gradient(180deg, rgba(34, 34, 34, 0.98) 0%, rgba(24, 24, 24, 0.98) 100%);
  border: 0;
  box-shadow: none;
}

body[data-theme="dark"] .color-swatch {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-theme="dark"] .color-swatch:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

body[data-theme="dark"] .color-swatch.active {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.14),
    0 14px 26px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body[data-theme="dark"] .color-swatch .swatch-check {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.color-swatch[data-color="farblos"] {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(230, 236, 242, 0.9) 100%) !important;
}

.color-swatch[data-color="farblos"]::before {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(120, 144, 168, 0.16) 0,
      rgba(120, 144, 168, 0.16) 8px,
      rgba(255, 255, 255, 0.05) 8px,
      rgba(255, 255, 255, 0.05) 16px
    ),
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.52), transparent 34%);
}

@media (max-width: 640px) {
  #strichPalette.color-palette,
  #strichPalette,
  #eigenPalette.color-palette,
  #eigenPalette {
    gap: 8px;
    padding: 6px;
  }

  .color-swatch {
    border-radius: 12px;
  }

}

@media (max-width: 980px) {
  .content {
    border-top-left-radius: 0;
  }

  .topbar {
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .topbar::before {
    display: none;
  }

  .topbar-actions {
    width: 100%;
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
  }

  .menu {
    position: static;
    left: auto;
    transform: none;
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .navbar-logo-right {
    margin-left: auto;
  }

  .navbar-logo-right img {
    height: 64px;
    width: auto;
    margin-top: 0;
  }

  .menu-link-row {
    gap: 0;
  }

  .menu-link-main {
    padding-right: 4px;
  }

  .menu-caret-btn {
    padding-left: 4px;
    padding-right: 6px;
  }
}

@media (max-width: 640px) {
  .topbar-actions {
    gap: 12px;
  }

  .lang-switch {
    padding: 4px;
  }

  .lang-btn {
    padding: 6px 10px;
    font-size: 0.74rem;
  }

  .theme-toggle-track {
    grid-template-columns: repeat(2, 50px);
  }

  .theme-toggle-option {
    padding: 10px 0;
    font-size: 20px;
  }

  .theme-toggle {
    right: 14px;
    bottom: 14px;
  }

  .theme-toggle-thumb {
    width: 50px;
  }

  .navbar-logo-right img {
    height: 56px;
  }
}

body[data-theme="dark"] .page-mohs,
body[data-theme="dark"] .page-spaltbarkeit {
  color: var(--text-color);
}

body[data-theme="dark"] .mohs-kicker,
body[data-theme="dark"] .spalt-kicker {
  background: rgba(110, 168, 254, 0.16);
  color: #d8e9ff;
}

body[data-theme="dark"] .mohs-hero {
  background:
    radial-gradient(circle at top right, rgba(83, 142, 198, 0.22), transparent 34%),
    radial-gradient(circle at bottom left, rgba(77, 110, 145, 0.18), transparent 30%),
    linear-gradient(135deg, #242424 0%, #1a1a1a 100%);
  border-color: #353535;
  box-shadow: none;
}

body[data-theme="dark"] .mohs-hero-copy p,
body[data-theme="dark"] .mohs-fact span,
body[data-theme="dark"] .mohs-practice-desc,
body[data-theme="dark"] .mohs-practice-note,
body[data-theme="dark"] .mohs-footnote,
body[data-theme="dark"] .mohs-card-formula,
body[data-theme="dark"] .mohs-card-body p,
body[data-theme="dark"] .spalt-overview-copy p,
body[data-theme="dark"] .spalt-level-summary,
body[data-theme="dark"] .spalt-strength-label,
body[data-theme="dark"] .spalt-mineral-meta,
body[data-theme="dark"] .spalt-more,
body[data-theme="dark"] .spalt-empty,
body[data-theme="dark"] .spalt-footnote {
  color: #d5dbe3;
}

body[data-theme="dark"] .mohs-hero-copy h2,
body[data-theme="dark"] .mohs-section-head h2,
body[data-theme="dark"] .mohs-practice-label,
body[data-theme="dark"] .mohs-card-body h3,
body[data-theme="dark"] .spalt-overview-copy h2,
body[data-theme="dark"] .spalt-level-head h2,
body[data-theme="dark"] .spalt-mineral-name,
body[data-theme="dark"] .spalt-scale-label,
body[data-theme="dark"] .spalt-scale-count,
body[data-theme="dark"] .spalt-level-rank,
body[data-theme="dark"] .spalt-level-badge,
body[data-theme="dark"] .spalt-level-tags span {
  color: #f5f7fa;
}

body[data-theme="dark"] .mohs-fact,
body[data-theme="dark"] .mohs-chart-card,
body[data-theme="dark"] .mohs-practice-card,
body[data-theme="dark"] .mohs-archive,
body[data-theme="dark"] .mohs-practice-item,
body[data-theme="dark"] .mohs-card,
body[data-theme="dark"] .spalt-overview-card,
body[data-theme="dark"] .spalt-level-card,
body[data-theme="dark"] .spalt-mineral-card {
  background: linear-gradient(180deg, #1f1f1f 0%, #181818 100%);
  border-color: #353535;
  box-shadow: none;
}

body[data-theme="dark"] .mohs-fact {
  background: rgba(12, 12, 12, 0.72);
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .mohs-chart-frame,
body[data-theme="dark"] .mohs-archive-frame,
body[data-theme="dark"] .mohs-card-media,
body[data-theme="dark"] .spalt-mineral-thumb {
  background: #232323;
  border-color: #353535;
}

body[data-theme="dark"] .mohs-card-media--fallback {
  background: linear-gradient(135deg, #213041 0%, #18212c 100%);
}

body[data-theme="dark"] .mohs-card-media--fallback span,
body[data-theme="dark"] .mohs-fact strong {
  color: #f5f7fa;
}

body[data-theme="dark"] .mohs-hero-panel {
  background: rgba(15, 34, 52, 0.94);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"] .mohs-hero-panel span {
  color: #c7dff6;
}

body[data-theme="dark"] .mohs-card-link--muted {
  background: #273646;
  color: #e7f1fb;
}

body[data-theme="dark"] .spalt-scale-step {
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .spalt-scale-rank {
  color: #111111;
}

.page-werkzeug-story {
  color: #14202b;
}

.page-werkzeug-story .page-title {
  margin-bottom: 28px;
}

.story-hero,
.story-process-grid,
.story-dual-grid,
.story-triad,
.story-list-panel,
.story-footnote {
  margin-bottom: 28px;
}

.story-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 24px;
  padding: 30px;
  border: 1px solid rgba(20, 32, 43, 0.08);
  border-radius: 30px;
  overflow: hidden;
  background: #f1f4f9;
  box-shadow: 0 28px 60px rgba(21, 33, 46, 0.08);
}

.story-hero-copy,
.story-hero-media,
.story-panel {
  position: relative;
  z-index: 1;
}

.story-hero-subpanel {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin-top: 6px;
}

.story-hero-subpanel h2 {
  margin: 0 0 18px;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.15;
  color: #102030;
}

.story-hero-media--magnet {
  max-width: 320px;
  justify-self: end;
  align-self: center;
}

.story-hero-media--magnet .story-image-frame {
  max-width: 320px;
  margin-left: auto;
}

.story-hero-media--magnet .story-image-frame img {
  max-height: 420px;
  width: 100%;
  object-fit: contain;
  object-position: center;
}

.story-hero-media--table {
  align-self: start;
}

.story-kicker,
.story-section-kicker,
.story-mini-label,
.story-floating-note span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(20, 32, 43, 0.08);
  color: #274258;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-hero-copy h2,
.story-panel h2,
.story-list-panel h2 {
  margin: 14px 0 14px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  color: #102030;
}

.story-panel h2,
.story-list-panel h2 {
  font-size: clamp(24px, 2.3vw, 32px);
}

.story-hero-copy p,
.story-panel p,
.story-list-panel p,
.story-form-copy,
.story-footnote {
  color: #425668;
  line-height: 1.75;
  font-size: 16px;
}

.story-richtext,
.story-richtext p,
.story-form-copy p {
  color: #425668;
  line-height: 1.75;
  font-size: 16px;
}

.story-richtext p:first-child,
.story-form-copy p:first-child {
  margin-top: 0;
}

.story-richtext p:last-child,
.story-form-copy p:last-child {
  margin-bottom: 0;
}

.story-badges,
.story-chip-grid,
.story-metric-row,
.story-form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.story-badges span,
.story-chip-grid span {
  padding: 11px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(20, 32, 43, 0.08);
  color: #183247;
  font-weight: 700;
}

.story-hero-media {
  display: grid;
  align-content: center;
  gap: 18px;
}

.story-glow {
  position: absolute;
  inset: auto auto 20px 20px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.9;
}

.story-glow--amber {
  background: radial-gradient(circle, rgba(228, 156, 78, 0.42) 0%, rgba(228, 156, 78, 0) 72%);
}

.story-glow--copper {
  background: radial-gradient(circle, rgba(179, 98, 57, 0.38) 0%, rgba(179, 98, 57, 0) 72%);
}

.story-glow--blue {
  background: radial-gradient(circle, rgba(67, 132, 215, 0.36) 0%, rgba(67, 132, 215, 0) 72%);
}

.story-glow--violet {
  background: radial-gradient(circle, rgba(132, 108, 190, 0.36) 0%, rgba(132, 108, 190, 0) 72%);
}

.story-hero--crystal .story-glow--violet {
  display: none;
}

.story-image-frame {
  position: relative;
  padding: 14px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 40px rgba(22, 33, 44, 0.12);
}

.story-image-frame--wide {
  padding: 18px;
}

.story-image-frame img {
  display: block;
  width: 100%;
  border-radius: 18px;
  background: #fff;
}

.story-image-frame--cutout {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.story-image-frame--plain {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.story-image-frame--plain img {
  border-radius: 0;
  background: transparent;
}

.story-image-frame--cutout img {
  width: min(100%, 800px);
  margin: 0 auto;
  background: transparent;
  border-radius: 0;
  mix-blend-mode: normal;
  filter: drop-shadow(0 18px 24px rgba(22, 33, 44, 0.1));
}

.story-hero--crystal .story-image-frame--cutout img {
  mix-blend-mode: multiply;
  filter: none;
}

.story-hero--pseudomorph .story-image-frame--cutout img {
  width: min(100%, 450px);
  mix-blend-mode: multiply;
  filter: none;
}

.story-hero--bowen .story-image-frame--cutout img {
  width: min(100%, 500px);
  background: #eef4fb;
  mix-blend-mode: normal;
  filter: none;
}

.story-image-frame--bowen-inline {
  margin-top: 22px;
}

.story-image-frame--bowen-inline > img {
  width: min(100%, 760px);
}

.bowen-diagram {
  position: relative;
  width: min(100%, 760px);
  margin: 0 auto;
  aspect-ratio: 886 / 571;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #eef4fb 0%, #f8fbfd 100%);
  border: 1px solid rgba(20, 49, 74, 0.08);
}

.bowen-diagram__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bowen-diagram__heading,
.bowen-diagram__temp,
.bowen-diagram__axis-label,
.bowen-diagram__residual,
.bowen-diagram__item figcaption {
  position: absolute;
  z-index: 1;
}

.bowen-diagram__heading {
  top: 6%;
  font-size: clamp(14px, 1.75vw, 22px);
  font-weight: 800;
  color: #172431;
  letter-spacing: 0.01em;
}

.bowen-diagram__heading--left {
  left: 35%;
  transform: translateX(-50%);
}

.bowen-diagram__heading--right {
  left: 79%;
  transform: translateX(-50%);
}

.bowen-diagram__temp {
  left: 3.7%;
  font-size: clamp(11px, 1.35vw, 18px);
  font-weight: 600;
  color: #1d2a36;
}

.bowen-diagram__temp--high {
  top: 13%;
}

.bowen-diagram__temp--low {
  bottom: 10.5%;
}

.bowen-diagram__axis-label {
  transform-origin: left top;
  font-size: clamp(11px, 1.45vw, 18px);
  font-weight: 800;
  white-space: nowrap;
}

.bowen-diagram__axis-label--sequence {
  left: 6.1%;
  bottom: 21%;
  transform: rotate(-90deg);
  color: #c33d4a;
}

.bowen-diagram__axis-label--weathering {
  left: 13.3%;
  bottom: 27%;
  transform: rotate(-90deg);
  color: #7a8592;
}

.bowen-diagram__item {
  position: absolute;
  margin: 0;
  z-index: 1;
}

.bowen-diagram__item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 8px 14px rgba(18, 32, 45, 0.14));
}

.bowen-diagram__item figcaption {
  font-size: clamp(11px, 1.4vw, 18px);
  line-height: 1.15;
  font-weight: 500;
  color: #684267;
}

.bowen-diagram__item--olivine {
  left: 18.6%;
  top: 13.8%;
  width: 7.8%;
}

.bowen-diagram__item--olivine img {
  transform: rotate(-4deg);
}

.bowen-diagram__item--olivine figcaption {
  left: 115%;
  top: 10%;
  width: 110px;
}

.bowen-diagram__item--pyroxene {
  left: 19.3%;
  top: 28.5%;
  width: 12.6%;
}

.bowen-diagram__item--pyroxene img {
  transform: rotate(8deg);
}

.bowen-diagram__item--pyroxene figcaption {
  left: 108%;
  top: 16%;
  width: 120px;
}

.bowen-diagram__item--amphibole {
  left: 27.1%;
  top: 42.2%;
  width: 12.2%;
}

.bowen-diagram__item--amphibole img {
  transform: rotate(-6deg);
}

.bowen-diagram__item--amphibole figcaption {
  left: 105%;
  top: 17%;
  width: 120px;
}

.bowen-diagram__item--biotite {
  left: 34.4%;
  top: 55.2%;
  width: 10.1%;
}

.bowen-diagram__item--biotite img {
  transform: rotate(-9deg);
}

.bowen-diagram__item--biotite figcaption {
  left: 104%;
  top: 22%;
  width: 90px;
}

.bowen-diagram__item--muscovite {
  left: 42.7%;
  top: 66.7%;
  width: 11.8%;
}

.bowen-diagram__item--muscovite img {
  transform: rotate(4deg);
}

.bowen-diagram__item--muscovite figcaption {
  left: -6%;
  bottom: -14%;
  width: 120px;
}

.bowen-diagram__item--quartz {
  left: 55.8%;
  top: 61.5%;
  width: 10.5%;
}

.bowen-diagram__item--quartz img {
  transform: rotate(-3deg);
}

.bowen-diagram__item--quartz figcaption {
  left: 50%;
  top: -20%;
  transform: translateX(-50%);
  width: 90px;
  text-align: center;
}

.bowen-diagram__item--ca-feldspar {
  left: 66.1%;
  top: 29.4%;
  width: 12.8%;
}

.bowen-diagram__item--ca-feldspar img {
  transform: rotate(-8deg);
}

.bowen-diagram__item--ca-feldspar figcaption {
  left: 145%;
  top: -7%;
  width: 130px;
  color: #232d37;
}

.bowen-diagram__item--na-feldspar {
  left: 61.2%;
  top: 49.1%;
  width: 12.6%;
}

.bowen-diagram__item--na-feldspar img {
  transform: rotate(-8deg);
}

.bowen-diagram__item--na-feldspar figcaption {
  right: 114%;
  top: 14%;
  width: 132px;
  text-align: right;
}

.bowen-diagram__item--k-feldspar {
  left: 77.3%;
  top: 57.2%;
  width: 13%;
}

.bowen-diagram__item--k-feldspar img {
  transform: rotate(-4deg);
}

.bowen-diagram__item--k-feldspar figcaption {
  left: 106%;
  top: 27%;
  width: 104px;
}

.bowen-diagram__item--zeolite {
  left: 53.1%;
  top: 81%;
  width: 13%;
}

.bowen-diagram__item--zeolite img {
  transform: rotate(-4deg);
}

.bowen-diagram__item--zeolite figcaption {
  left: 60%;
  top: 54%;
  width: 92px;
}

.bowen-diagram__residual {
  left: 51.2%;
  bottom: 6%;
  transform: translateX(-50%);
  font-size: clamp(10px, 1.2vw, 17px);
  color: #232d37;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .bowen-diagram {
    border-radius: 18px;
  }

  .bowen-diagram__heading {
    font-size: clamp(11px, 2.5vw, 16px);
  }

  .bowen-diagram__temp,
  .bowen-diagram__axis-label,
  .bowen-diagram__residual,
  .bowen-diagram__item figcaption {
    font-size: clamp(8px, 1.9vw, 12px);
  }
}

.story-weathering-table-plain {
  width: 100%;
}

.story-panel--bowen-table {
  width: 100%;
}

.story-panel--bowen-table h2 {
  font-size: clamp(24px, 2.1vw, 30px);
}

.story-floating-note {
  max-width: 320px;
  margin-left: auto;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(16, 32, 48, 0.92);
  color: #f3f7fb;
  box-shadow: 0 20px 46px rgba(16, 32, 48, 0.24);
}

.story-floating-note strong,
.story-quote strong,
.story-form-card strong,
.story-ladder-item strong,
.story-weathering-stop strong,
.story-step strong,
.story-metric strong,
.story-polarity,
.story-inline-examples {
  display: block;
  color: #f7fbff;
}

.story-floating-note strong {
  margin-top: 10px;
  line-height: 1.45;
}

.story-process-grid,
.story-dual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.story-dual-grid--bowen {
  grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
  align-items: start;
}

.story-single-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.story-panel,
.story-list-panel,
.story-footnote {
  padding: 26px;
  border-radius: 26px;
  border: 1px solid rgba(20, 32, 43, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  box-shadow: 0 16px 36px rgba(18, 32, 45, 0.06);
}

.story-panel--soft,
.story-list-panel--dense {
  background: linear-gradient(180deg, #f8f3eb 0%, #f3f8fd 100%);
}

.story-panel--bowen-series {
  padding: 22px;
}

.story-dual-grid--bowen {
  grid-template-columns: minmax(0, 1fr);
}

.story-panel--bowen-series h2 {
  font-size: clamp(22px, 2vw, 28px);
  margin-bottom: 12px;
}

.story-steps {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.story-step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border-radius: 18px;
  background: rgba(18, 32, 45, 0.04);
}

.story-step strong {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #183247 0%, #34526a 100%);
  font-size: 20px;
}

.story-step p {
  margin: 0;
}

.story-chip-grid {
  margin-top: 20px;
}

.story-metric {
  min-width: 150px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(20, 32, 43, 0.08);
}

.story-metric strong {
  color: #153046;
  font-size: 22px;
}

.story-metric span {
  display: block;
  margin-top: 6px;
  color: #4f6476;
  line-height: 1.5;
}

.story-ladder {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.story-ladder-item,
.story-weathering-stop,
.story-form-card,
.story-panel--magnetic {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(20, 32, 43, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

.story-panel--bowen-series .story-ladder {
  gap: 10px;
  margin-top: 16px;
}

.story-panel--bowen-series .story-ladder-item {
  padding: 16px 18px;
  border-radius: 18px;
}

.story-panel--bowen-series .story-ladder-item p {
  line-height: 1.6;
}

.story-ladder-item span,
.story-weathering-stop span {
  display: block;
  margin-top: 8px;
  color: #516679;
}

.story-ladder-item strong,
.story-weathering-stop strong,
.story-form-card strong {
  color: #16324a;
}

.story-ladder-item p,
.story-form-card p,
.story-panel--magnetic p {
  margin-bottom: 0;
}

.story-panel--crystal-copy ol {
  margin: 16px 0;
  padding-left: 24px;
}

.story-panel--crystal-copy li {
  margin-bottom: 10px;
  line-height: 1.65;
}

.story-weathering-scale {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.story-weathering-spectrum {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.story-weathering-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(20, 32, 43, 0.08);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.story-weathering-card--high {
  background: linear-gradient(135deg, rgba(214, 121, 88, 0.18) 0%, rgba(255, 255, 255, 0.88) 72%);
}

.story-weathering-card--mid {
  background: linear-gradient(135deg, rgba(192, 196, 95, 0.18) 0%, rgba(255, 255, 255, 0.88) 72%);
}

.story-weathering-card--low {
  background: linear-gradient(135deg, rgba(95, 179, 165, 0.2) 0%, rgba(255, 255, 255, 0.9) 72%);
}

.story-weathering-card-top,
.story-weathering-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.story-weathering-card-top strong {
  color: #16324a;
}

.story-weathering-card > span {
  display: block;
  margin-top: 8px;
  color: #516679;
}

.story-weathering-bar--panel {
  margin-top: 14px;
}

.story-weathering-meta {
  margin-top: 10px;
}

.story-weathering-meta span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6a7e90;
}

.story-weathering-meta strong {
  font-size: 14px;
  color: #16324a;
}

.story-weathering-table-panel {
  margin-top: 22px;
}

.story-table-intro {
  margin-top: 10px;
  color: #465d70;
  line-height: 1.7;
}

.story-table-source {
  margin-top: 16px;
  color: #506576;
  font-size: 13px;
  line-height: 1.65;
}

.story-weathering-table-wrap {
  margin-top: 18px;
  overflow-x: auto;
  padding: 0;
  border-radius: 20px;
}

.story-weathering-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 20px;
  overflow: visible;
  border: 1px solid rgba(20, 32, 43, 0.08);
  box-shadow: none;
}

.story-weathering-table th,
.story-weathering-table td {
  padding: 12px 12px;
  text-align: left;
  border-bottom: 0;
  vertical-align: middle;
}

.story-weathering-table th {
  color: #14314a;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #eef4fb 0%, #f8fbfd 100%);
}

.story-weathering-table tbody tr:last-child td {
  border-bottom: 0;
}

.story-weathering-table tbody tr:hover {
  background: rgba(238, 244, 251, 0.24);
}

.story-weathering-mineral {
  text-decoration: none;
  font-weight: 700;
  color: #16324a;
}

a.story-weathering-mineral:visited,
a.story-weathering-mineral:hover,
a.story-weathering-mineral:active {
  color: #16324a;
  text-decoration: none;
}

.story-weathering-profile-cell {
  min-width: 240px;
}

.story-weathering-profile {
  display: grid;
  grid-template-columns: 10px minmax(120px, 1fr) minmax(56px, auto);
  grid-template-areas: "tier bar duration";
  align-items: center;
  gap: 8px;
}

.story-weathering-tier {
  grid-area: tier;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.story-weathering-tier--sehr-gering,
.story-weathering-tier--very-low {
  color: #8e3e2b;
  background: rgba(214, 121, 88, 0.14);
  border-color: rgba(214, 121, 88, 0.22);
}

.story-weathering-tier--gering,
.story-weathering-tier--low {
  color: #9b6334;
  background: rgba(224, 168, 87, 0.16);
  border-color: rgba(224, 168, 87, 0.24);
}

.story-weathering-tier--mittel,
.story-weathering-tier--moderate {
  color: #6e6f2f;
  background: rgba(192, 196, 95, 0.18);
  border-color: rgba(192, 196, 95, 0.26);
}

.story-weathering-tier--hoch,
.story-weathering-tier--high {
  color: #2f6d66;
  background: rgba(95, 179, 165, 0.16);
  border-color: rgba(95, 179, 165, 0.24);
}

.story-weathering-tier--sehr-hoch,
.story-weathering-tier--very-high {
  color: #245f8c;
  background: rgba(96, 165, 250, 0.16);
  border-color: rgba(96, 165, 250, 0.24);
}

.story-weathering-tier--extrem,
.story-weathering-tier--extreme {
  color: #4b4fa0;
  background: rgba(128, 122, 234, 0.16);
  border-color: rgba(128, 122, 234, 0.24);
}

.story-weathering-duration {
  grid-area: duration;
  min-width: 0;
  text-align: right;
  justify-self: end;
  font-size: 12px;
  color: #16324a;
  white-space: nowrap;
}

.story-weathering-bar {
  grid-area: bar;
  position: relative;
  width: 100%;
  min-width: 0;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(214, 121, 88, 0.18) 0%, rgba(224, 168, 87, 0.18) 25%, rgba(192, 196, 95, 0.18) 50%, rgba(95, 179, 165, 0.18) 75%, rgba(128, 122, 234, 0.18) 100%);
}

.story-weathering-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d67958 0%, #e0a857 28%, #c0c45f 52%, #5fb3a5 76%, #807aea 100%);
  box-shadow: 0 3px 10px rgba(88, 116, 148, 0.22);
}

.story-weathering-bar--compact {
  min-width: 0;
  height: 14px;
  background: linear-gradient(90deg, rgba(214, 121, 88, 0.12) 0%, rgba(224, 168, 87, 0.12) 28%, rgba(192, 196, 95, 0.12) 52%, rgba(95, 179, 165, 0.12) 76%, rgba(128, 122, 234, 0.12) 100%);
}

.story-weathering-bar--compact span {
  box-shadow: 0 4px 12px rgba(88, 116, 148, 0.18);
}

.story-weathering-stop--high {
  background: linear-gradient(135deg, rgba(190, 106, 70, 0.16) 0%, rgba(255, 255, 255, 0.78) 100%);
}

.story-weathering-stop--mid {
  background: linear-gradient(135deg, rgba(206, 168, 79, 0.16) 0%, rgba(255, 255, 255, 0.78) 100%);
}

.story-weathering-stop--low {
  background: linear-gradient(135deg, rgba(88, 149, 123, 0.16) 0%, rgba(255, 255, 255, 0.78) 100%);
}

.story-triad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.story-panel--magnetic {
  background: linear-gradient(180deg, #ffffff 0%, #eef5fb 100%);
}

.story-polarity {
  margin-bottom: 12px;
  color: #14314a;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-inline-examples {
  margin-top: 8px;
  color: #17324a;
  line-height: 1.6;
}

.story-mini-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.story-mini-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  border: 1px solid rgba(20, 32, 43, 0.08);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.story-mini-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.09);
  border-color: rgba(45, 87, 126, 0.18);
}

.story-mini-card-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(20, 32, 43, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-mini-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.story-mini-card-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: #16324a;
}

.page-magnetismus .story-mini-card-grid--magnetic {
  gap: 14px;
  margin-top: 16px;
}

.page-magnetismus .story-mini-card--magnetic {
  align-items: center;
  gap: 12px;
  padding: 12px 12px 14px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.page-magnetismus .story-mini-card--magnetic:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

.page-magnetismus .story-mini-card-name--magnetic {
  width: 100%;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.page-magnetismus .story-mini-card-thumb--magnetic {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: #ffffff;
}

.page-magnetismus .story-mini-card-thumb--magnetic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.page-magnetismus .story-mini-card-action {
  margin-top: auto;
}

.pseudomorph-signal-panel {
  margin-top: 22px;
}

.pseudomorph-case-section {
  margin-top: 22px;
}

.pseudomorph-classification {
  margin-top: 22px;
}

.pseudomorph-class-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.pseudomorph-class-card {
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(20, 32, 43, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(243, 248, 253, 0.98) 100%);
}

.pseudomorph-class-card h3 {
  margin: 0;
  color: #16324a;
  font-size: clamp(22px, 2vw, 26px);
}

.pseudomorph-class-card p {
  margin: 12px 0 0;
  color: #4f6476;
  line-height: 1.75;
}

.pseudomorph-gallery-section {
  margin-top: 22px;
}

.pseudomorph-gallery-stack {
  display: grid;
  gap: 34px;
  margin-top: 18px;
}

.pseudomorph-gallery-case h3 {
  margin: 0 0 18px;
  text-align: center;
  color: #16324a;
  font-size: clamp(28px, 2.8vw, 34px);
}

.pseudomorph-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 240px));
  justify-content: center;
  gap: 18px;
}

.pseudomorph-gallery-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  border: 1px solid rgba(20, 32, 43, 0.08);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pseudomorph-gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.09);
  border-color: rgba(45, 87, 126, 0.18);
}

.pseudomorph-gallery-label {
  color: #16324a;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.pseudomorph-gallery-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(20, 32, 43, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.pseudomorph-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pseudomorph-case-section > p {
  margin-top: 10px;
  color: #4f6476;
  line-height: 1.7;
}

.pseudomorph-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.pseudomorph-case {
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(20, 32, 43, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 251, 255, 0.96) 100%);
}

.pseudomorph-case--blue {
  background: linear-gradient(135deg, rgba(77, 144, 210, 0.12) 0%, rgba(255, 255, 255, 0.96) 48%, rgba(255, 255, 255, 0.96) 100%);
}

.pseudomorph-case--earth {
  background: linear-gradient(135deg, rgba(181, 128, 68, 0.16) 0%, rgba(255, 255, 255, 0.96) 48%, rgba(255, 255, 255, 0.96) 100%);
}

.pseudomorph-case--violet {
  background: linear-gradient(135deg, rgba(133, 114, 196, 0.14) 0%, rgba(255, 255, 255, 0.96) 48%, rgba(255, 255, 255, 0.96) 100%);
}

.pseudomorph-case--sand {
  background: linear-gradient(135deg, rgba(210, 174, 95, 0.15) 0%, rgba(255, 255, 255, 0.96) 48%, rgba(255, 255, 255, 0.96) 100%);
}

.pseudomorph-case-head h3 {
  margin: 10px 0 0;
  color: #16324a;
  font-size: clamp(24px, 2vw, 28px);
}

.pseudomorph-case > p {
  margin: 14px 0 0;
  color: #4f6476;
  line-height: 1.7;
}

.pseudomorph-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

.pseudomorph-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #183247 0%, #34526a 100%);
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(21, 48, 70, 0.16);
}

.pseudomorph-mini-card {
  min-width: 0;
  gap: 8px;
}

.pseudomorph-mini-meta {
  color: #5d7488;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-form-grid {
  margin: 20px 0 18px;
}

.story-form-grid--crystal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 20px;
}

.story-form-card {
  flex: 1 1 180px;
}

.story-form-card--clean {
  background: linear-gradient(135deg, rgba(93, 167, 148, 0.16) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.story-form-card--mixed {
  background: linear-gradient(135deg, rgba(200, 164, 77, 0.16) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.story-form-card--diffuse {
  background: linear-gradient(135deg, rgba(140, 110, 191, 0.16) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.story-quote {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(20, 32, 43, 0.92);
}

.story-quote span {
  display: block;
  margin-top: 8px;
  color: rgba(247, 251, 255, 0.8);
  line-height: 1.6;
}

body[data-theme="dark"] .page-werkzeug-story {
  color: var(--text-color);
}

body[data-theme="dark"] .story-hero {
  background:
    radial-gradient(circle at top left, rgba(63, 85, 106, 0.3), transparent 34%),
    linear-gradient(135deg, #232425 0%, #171819 100%);
  border-color: #353535;
  box-shadow: none;
}

body[data-theme="dark"] .story-kicker,
body[data-theme="dark"] .story-section-kicker,
body[data-theme="dark"] .story-mini-label,
body[data-theme="dark"] .story-floating-note span {
  background: rgba(110, 168, 254, 0.14);
  color: #d8e9ff;
}

body[data-theme="dark"] .story-hero-copy h2,
body[data-theme="dark"] .story-panel h2,
body[data-theme="dark"] .story-list-panel h2,
body[data-theme="dark"] .story-ladder-item strong,
body[data-theme="dark"] .story-weathering-stop strong,
body[data-theme="dark"] .story-weathering-card-top strong,
body[data-theme="dark"] .story-weathering-meta strong,
body[data-theme="dark"] .story-form-card strong,
body[data-theme="dark"] .story-inline-examples,
body[data-theme="dark"] .story-metric strong,
body[data-theme="dark"] .story-polarity {
  color: #f5f7fa;
}

body[data-theme="dark"] .story-hero-copy p,
body[data-theme="dark"] .story-panel p,
body[data-theme="dark"] .story-list-panel p,
body[data-theme="dark"] .story-richtext,
body[data-theme="dark"] .story-richtext p,
body[data-theme="dark"] .story-form-copy,
body[data-theme="dark"] .story-form-copy p,
body[data-theme="dark"] .story-footnote,
body[data-theme="dark"] .story-ladder-item span,
body[data-theme="dark"] .story-weathering-stop span,
body[data-theme="dark"] .story-weathering-card > span,
body[data-theme="dark"] .story-weathering-meta span,
body[data-theme="dark"] .story-metric span,
body[data-theme="dark"] .story-quote span {
  color: #d5dbe3;
}

body[data-theme="dark"] .story-panel,
body[data-theme="dark"] .story-list-panel,
body[data-theme="dark"] .story-footnote,
body[data-theme="dark"] .story-panel--magnetic,
body[data-theme="dark"] .story-ladder-item,
body[data-theme="dark"] .story-weathering-stop,
body[data-theme="dark"] .story-weathering-card,
body[data-theme="dark"] .story-form-card,
body[data-theme="dark"] .story-metric,
body[data-theme="dark"] .story-badges span,
body[data-theme="dark"] .story-chip-grid span,
body[data-theme="dark"] .story-step,
body[data-theme="dark"] .story-image-frame {
  background: linear-gradient(180deg, #1f1f1f 0%, #181818 100%);
  border-color: #353535;
  box-shadow: none;
}

body[data-theme="dark"] .page-pseudomorphosen .story-badges span {
  background: rgba(135, 206, 235, 0.12);
  border-color: rgba(135, 206, 235, 0.24);
  color: #87ceeb;
}

body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-case {
  border-color: #353535;
  box-shadow: none;
}


body[data-theme="dark"] .story-weathering-card--high {
  background: linear-gradient(135deg, rgba(214, 121, 88, 0.2) 0%, #1a1a1a 72%);
}

body[data-theme="dark"] .story-weathering-card--mid {
  background: linear-gradient(135deg, rgba(192, 196, 95, 0.18) 0%, #1a1a1a 72%);
}

body[data-theme="dark"] .page-uv .uv-hero {
  background:
    radial-gradient(circle at top left, rgba(89, 116, 145, 0.22), transparent 30%),
    radial-gradient(circle at bottom right, rgba(109, 134, 160, 0.18), transparent 28%),
    linear-gradient(135deg, #20252b 0%, #171b20 100%);
  border-color: #323943;
  box-shadow: none;
}

body[data-theme="dark"] .page-uv .uv-hero-kicker {
  background: rgba(110, 168, 254, 0.14);
  color: #d8e9ff;
}

body[data-theme="dark"] .page-uv .uv-hero-copy h2 {
  color: #f7fbff;
}

body[data-theme="dark"] .page-uv .uv-hero-copy p {
  color: #d7e1eb;
}

body[data-theme="dark"] .page-acid .acid-hero {
  background:
    radial-gradient(circle at top left, rgba(122, 93, 59, 0.22), transparent 30%),
    radial-gradient(circle at bottom right, rgba(98, 80, 62, 0.18), transparent 28%),
    linear-gradient(135deg, #211d1a 0%, #171412 100%);
  border-color: #3b342e;
}

body[data-theme="dark"] .page-acid .acid-formula,
body[data-theme="dark"] .page-acid .acid-card,
body[data-theme="dark"] .page-acid .acid-reference {
  background: linear-gradient(180deg, #1f1b18 0%, #171412 100%);
  border-color: #37302a;
  box-shadow: none;
}

body[data-theme="dark"] .page-acid .acid-hero-copy h2,
body[data-theme="dark"] .page-acid .acid-card h3,
body[data-theme="dark"] .page-acid .acid-reference-copy h3 {
  color: #f5f0eb;
}

body[data-theme="dark"] .page-acid .acid-hero-copy p,
body[data-theme="dark"] .page-acid .acid-card p,
body[data-theme="dark"] .page-acid .acid-reference-text,
body[data-theme="dark"] .page-acid .acid-reference-text p,
body[data-theme="dark"] .page-acid .acid-footnote {
  color: #d8cec3;
}

body[data-theme="dark"] .page-acid .acid-card-badge {
  background: rgba(214, 169, 101, 0.12);
  color: #f0cd97;
}

body[data-theme="dark"] .page-acid .acid-hero-image-frame {
  background: #14110f;
  border-color: #37302a;
  box-shadow: none;
}

body[data-theme="dark"] .story-weathering-card--low {
  background: linear-gradient(135deg, rgba(95, 179, 165, 0.2) 0%, #1a1a1a 72%);
}

body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-class-card {
  background: linear-gradient(180deg, #1f1f1f 0%, #181818 100%);
  border-color: #353535;
  box-shadow: none;
}

body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-case--blue {
  background: linear-gradient(135deg, rgba(77, 144, 210, 0.18) 0%, #1b1c1f 52%, #181818 100%);
}

body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-case--earth {
  background: linear-gradient(135deg, rgba(181, 128, 68, 0.2) 0%, #1b1c1f 52%, #181818 100%);
}

body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-case--violet {
  background: linear-gradient(135deg, rgba(133, 114, 196, 0.2) 0%, #1b1c1f 52%, #181818 100%);
}

body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-case--sand {
  background: linear-gradient(135deg, rgba(210, 174, 95, 0.2) 0%, #1b1c1f 52%, #181818 100%);
}

body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-case-head h3,
body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-class-card h3,
body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-arrow {
  color: #f5f7fa;
}

body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-case > p,
body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-class-card p,
body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-case-section > p,
body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-mini-meta {
  color: #d5dbe3;
}

body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-gallery-case h3,
body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-gallery-label {
  color: #f5f7fa;
}

body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-gallery-thumb {
  background: #101010;
  border-color: #353535;
}

body[data-theme="dark"] .page-pseudomorphosen .pseudomorph-gallery-card {
  background: rgba(20, 20, 20, 0.92);
  border-color: #353535;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] .story-floating-note,
body[data-theme="dark"] .story-quote {
  background: rgba(16, 32, 48, 0.94);
}

body[data-theme="dark"] .story-mini-card {
  background: linear-gradient(180deg, #1f1f1f 0%, #181818 100%);
  border-color: #353535;
  box-shadow: none;
}

body[data-theme="dark"] .story-mini-card-thumb {
  background: #101010;
  border-color: #353535;
}

body[data-theme="dark"] .story-image-frame--cutout img {
  background: transparent;
  mix-blend-mode: normal;
}

body[data-theme="dark"] .story-mini-card-name {
  color: #f5f7fa;
}

body[data-theme="dark"] .page-magnetismus .story-mini-card--magnetic {
  background: linear-gradient(180deg, #1f1f1f 0%, #181818 100%);
  border-color: #353535;
  box-shadow: none;
}

body[data-theme="dark"] .page-magnetismus .story-mini-card-thumb--magnetic {
  background: #101010;
  border-color: #353535;
}

body[data-theme="dark"] .page-magnetismus .story-mini-card-name--magnetic {
  color: #f5f7fa;
}

@media (max-width: 980px) {
  .story-hero,
  .story-process-grid,
  .story-dual-grid,
  .story-single-grid,
  .story-triad,
  .pseudomorph-class-grid,
  .pseudomorph-case-grid {
    grid-template-columns: 1fr;
  }

  .pseudomorph-gallery-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 640px) {
  .story-hero,
  .story-panel,
  .story-list-panel,
  .story-footnote {
    padding: 20px;
    border-radius: 22px;
  }

  .story-step {
    grid-template-columns: 1fr;
  }

  .story-step strong {
    width: 44px;
    height: 44px;
  }

  .story-weathering-profile {
    grid-template-columns: 10px minmax(100px, 1fr) minmax(52px, auto);
    grid-template-areas: "tier bar duration";
    gap: 6px;
  }

  .story-weathering-duration {
    text-align: right;
  }

  .story-weathering-bar--compact {
    min-width: 0;
  }

  .pseudomorph-flow {
    grid-template-columns: 1fr;
  }

  .pseudomorph-arrow {
    margin: 0 auto;
    transform: rotate(90deg);
  }
}

/* =========================
   SIDEBAR MULTI-DROPDOWNS
   Glanz / Kristall / Spaltbarkeit / Bruch
   ========================= */
.filter-card #glanzDropdown,
.filter-card #kristallDropdown,
.filter-card #spaltDropdown,
.filter-card #bruchDropdown {
  position: relative;
  width: 100%;
}

.filter-card .glanz-toggle,
.filter-card .kristall-toggle,
.filter-card .spalt-toggle,
.filter-card .bruch-toggle {
  min-height: 38px;
  padding: 8px 34px 8px 12px;
  border-radius: 8px;
  border: 1px solid #cfcfcf;
  background: #ffffff;
  box-shadow: none;
  color: #222222;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-card .glanz-toggle::after,
.filter-card .kristall-toggle::after,
.filter-card .spalt-toggle::after,
.filter-card .bruch-toggle::after {
  content: "\25BE";
  right: 12px;
  font-size: 10px;
  color: #777777;
}

.filter-card .glanz-dropdown.open .glanz-toggle,
.filter-card #kristallDropdown.open .kristall-toggle,
.filter-card #spaltDropdown.open .spalt-toggle,
.filter-card #bruchDropdown.open .bruch-toggle {
  border-color: #bdbdbd;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}

.filter-card .glanz-panel,
.filter-card .kristall-panel,
.filter-card .spalt-panel,
.filter-card .bruch-panel,
.filter-card #f_kristall_group,
.filter-card #f_spalt_group,
.filter-card #f_bruch_group {
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  max-height: none;
  overflow: visible;
}

.filter-card #glanzDropdown .glanz-panel,
.filter-card #kristallDropdown .kristall-panel,
.filter-card #spaltDropdown .spalt-panel,
.filter-card #bruchDropdown .bruch-panel,
.filter-card #kristallDropdown #f_kristall_group,
.filter-card #spaltDropdown #f_spalt_group,
.filter-card #bruchDropdown #f_bruch_group {
  display: none !important;
  position: static !important;
  width: 100% !important;
}

.filter-card #glanzDropdown.open .glanz-panel,
.filter-card #kristallDropdown.open .kristall-panel,
.filter-card #spaltDropdown.open .spalt-panel,
.filter-card #bruchDropdown.open .bruch-panel,
.filter-card #kristallDropdown.open #f_kristall_group,
.filter-card #spaltDropdown.open #f_spalt_group,
.filter-card #bruchDropdown.open #f_bruch_group {
  display: block !important;
}

.filter-card .glanz-panel .checkbox-inline,
.filter-card .kristall-panel .checkbox-inline,
.filter-card .spalt-panel .checkbox-inline,
.filter-card .bruch-panel .checkbox-inline,
.filter-card #f_kristall_group .checkbox-inline,
.filter-card #f_spalt_group .checkbox-inline,
.filter-card #f_bruch_group .checkbox-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  margin-bottom: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: #ffffff;
  box-shadow: none;
}

.filter-card .glanz-panel .checkbox-inline:last-child,
.filter-card .kristall-panel .checkbox-inline:last-child,
.filter-card .spalt-panel .checkbox-inline:last-child,
.filter-card .bruch-panel .checkbox-inline:last-child,
.filter-card #f_kristall_group .checkbox-inline:last-child,
.filter-card #f_spalt_group .checkbox-inline:last-child,
.filter-card #f_bruch_group .checkbox-inline:last-child {
  margin-bottom: 0;
}

.filter-card .glanz-panel .checkbox-inline span,
.filter-card .kristall-panel .checkbox-inline span,
.filter-card .spalt-panel .checkbox-inline span,
.filter-card .bruch-panel .checkbox-inline span,
.filter-card #f_kristall_group .checkbox-inline span,
.filter-card #f_spalt_group .checkbox-inline span,
.filter-card #f_bruch_group .checkbox-inline span {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: #222222;
}

.filter-card .glanz-panel .checkbox-inline input[type="checkbox"],
.filter-card .kristall-panel .checkbox-inline input[type="checkbox"],
.filter-card .spalt-panel .checkbox-inline input[type="checkbox"],
.filter-card .bruch-panel .checkbox-inline input[type="checkbox"],
.filter-card #f_kristall_group .checkbox-inline input[type="checkbox"],
.filter-card #f_spalt_group .checkbox-inline input[type="checkbox"],
.filter-card #f_bruch_group .checkbox-inline input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.filter-card .glanz-panel .checkbox-inline:hover,
.filter-card .kristall-panel .checkbox-inline:hover,
.filter-card .spalt-panel .checkbox-inline:hover,
.filter-card .bruch-panel .checkbox-inline:hover,
.filter-card #f_kristall_group .checkbox-inline:hover,
.filter-card #f_spalt_group .checkbox-inline:hover,
.filter-card #f_bruch_group .checkbox-inline:hover {
  transform: none;
  border-color: #e5e5e5;
  background: #fafafa;
}

.filter-card .hint {
  font-size: 12px;
}

@media (max-width: 640px) {
  .left {
    padding-bottom: 128px;
  }

  .filter-card {
    margin-bottom: 20px;
  }

  .filter-card .glanz-toggle,
  .filter-card .kristall-toggle,
  .filter-card .spalt-toggle,
  .filter-card .bruch-toggle {
    font-size: 14px;
  }

  .filter-card .glanz-panel .checkbox-inline span,
  .filter-card .kristall-panel .checkbox-inline span,
  .filter-card .spalt-panel .checkbox-inline span,
  .filter-card .bruch-panel .checkbox-inline span,
  .filter-card #f_kristall_group .checkbox-inline span,
  .filter-card #f_spalt_group .checkbox-inline span,
  .filter-card #f_bruch_group .checkbox-inline span {
    font-size: 14px;
  }

  .scroll-top-btn {
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .theme-toggle {
    right: 70px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }
}

.tool-cover-card .thumb {
  width: calc(100% + 16px) !important;
  margin: 0 -8px 10px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  overflow: hidden !important;
}

.tool-cover-card .thumb img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
}

body[data-theme="dark"] .mineral-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  overflow: hidden;
  background: #1f1f1f;
}

body[data-theme="dark"] .mineral-table th,
body[data-theme="dark"] .mineral-table td {
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="dark"] .mineral-table th {
  background: linear-gradient(180deg, #2b2f34 0%, #24282d 100%);
  color: #eef3f7;
  font-weight: 700;
}

body[data-theme="dark"] .mineral-table td {
  background: #1b1b1b;
  color: #f5f7fa;
}

.page-crystal {
  max-width: 1380px;
  margin: 0 auto;
}

.crystal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 30px;
  margin: 8px auto 34px;
  padding: 30px;
  border-radius: 30px;
  background: #f7f4ee;
  border: 1px solid rgba(58, 76, 96, 0.08);
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.08);
  align-items: center;
}

.crystal-hero-kicker {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(31, 70, 110, 0.1);
  color: #1e456d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.crystal-hero-copy h2 {
  margin: 16px 0 14px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.crystal-hero-copy p {
  margin: 0;
  line-height: 1.8;
  color: #495766;
}

.crystal-hero-richtext {
  color: #495766;
  line-height: 1.85;
}

.crystal-hero-richtext p {
  margin: 0 0 18px;
}

.crystal-hero-richtext p:last-child {
  margin-bottom: 0;
}

.crystal-hero-image-frame {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}


.crystal-hero-image-frame img {
  width: min(100%, 340px);
  display: block;
  border-radius: 18px;
  background: #f7f4ee;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  object-fit: contain;
}

body[data-theme="dark"] .crystal-hero {
  background:
    radial-gradient(circle at top left, rgba(74, 96, 122, 0.24), transparent 32%),
    linear-gradient(135deg, #232527 0%, #17191b 100%);
  border-color: #353535;
  box-shadow: none;
}

body[data-theme="dark"] .crystal-hero-copy h2 {
  color: #f7fbff;
}

body[data-theme="dark"] .crystal-hero-copy p,
body[data-theme="dark"] .crystal-hero-richtext,
body[data-theme="dark"] .crystal-hero-richtext p,
body[data-theme="dark"] .crystal-footnote {
  color: #d7e1eb;
}

body[data-theme="dark"] .crystal-hero-image-frame img,
body[data-theme="dark"] .crystal-model-frame,
body[data-theme="dark"] .crystal-canvas,
body[data-theme="dark"] .crystal-formula {
  background: #111214;
}

body[data-theme="dark"] .crystal-formula {
  color: #eef4fb;
}

.crystal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 28px;
}

.crystal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid rgba(49, 61, 75, 0.08);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

body[data-theme="dark"] .crystal-card {
  background: linear-gradient(180deg, #232527 0%, #1b1d1f 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

body[data-theme="dark"] .crystal-card::before {
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 30%);
}

body[data-theme="dark"] .crystal-card-head h2 {
  color: #f4f6f8;
}

.crystal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.68), transparent 28%);
  pointer-events: none;
}

.crystal-card > * {
  position: relative;
  z-index: 1;
}

.crystal-card--filterable {
  cursor: pointer;
}

.crystal-card--filterable:focus-visible {
  outline: 3px solid rgba(36, 94, 150, 0.28);
  outline-offset: 4px;
}

.crystal-card-head h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.crystal-model-shell {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.crystal-model-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 0;
  border-radius: 0;
  background: #fff;
  border: 0;
  box-shadow: none;
}

.crystal-canvas {
  width: min(100%, 320px);
  height: auto;
  display: block;
  background: #fff;
}

.crystal-card-body {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.crystal-formula {
  text-align: center;
  font-size: 18px;
  line-height: 1.7;
  color: #26384b;
  font-weight: 700;
  background: #fff;
}

.crystal-footnote {
  margin: 0 0 20px;
  color: #5c6773;
}

:root {
  --mineralbestimmung-copy-size: clamp(16px, 1.05vw, 17px);
  --mineralbestimmung-copy-line-height: 1.75;
  --tool-page-balanced-width: 1400px;
  --tool-page-balanced-width-wide: 1480px;
}

.page-mohs,
.page-uv,
.page-acid,
.page-bruch,
.page-crystal,
.page-lager-overview,
.page-werkzeug-story,
.page-spaltbarkeit,
.page-strichfarbe,
.page-glanz-ladder {
  width: min(100%, var(--tool-page-balanced-width));
  max-width: var(--tool-page-balanced-width);
  margin-left: auto;
  margin-right: auto;
}

.page-uv .uv-hero-copy p,
.page-acid .uv-hero-copy p,
.page-mohs .mohs-hero-copy p,
.page-spaltbarkeit .spalt-overview-copy p,
.page-bruch .bruch-hero-copy p,
.page-crystal .crystal-hero-copy p,
.page-crystal .crystal-hero-richtext,
.page-crystal .crystal-hero-richtext p,
.page-strichfarbe .strich-hero-richtext,
.page-strichfarbe .strich-hero-richtext p,
.page-werkzeug-story .story-hero-copy p,
.page-werkzeug-story .story-panel p,
.page-werkzeug-story .story-list-panel p,
.page-werkzeug-story .story-richtext,
.page-werkzeug-story .story-richtext p,
.page-werkzeug-story .story-form-copy,
.page-werkzeug-story .story-form-copy p,
.glanz-hero-copy p,
.glanz-hero-richtext p {
  font-size: var(--mineralbestimmung-copy-size) !important;
  line-height: var(--mineralbestimmung-copy-line-height) !important;
}

@media (min-width: 1600px) {
  .page-mohs,
  .page-uv,
  .page-acid,
  .page-bruch,
  .page-crystal,
  .page-werkzeug-story,
  .page-spaltbarkeit,
  .page-strichfarbe,
  .page-glanz-ladder {
    width: min(100%, var(--tool-page-balanced-width-wide));
    max-width: var(--tool-page-balanced-width-wide);
  }
}

.crystal-tone-cubic { border-top: 6px solid #245e96; }
.crystal-tone-tetragonal { border-top: 6px solid #4f86bc; }
.crystal-tone-hexagonal { border-top: 6px solid #5e8a5f; }
.crystal-tone-trigonal { border-top: 6px solid #8a5d8f; }
.crystal-tone-orthorhombic { border-top: 6px solid #b07a3f; }
.crystal-tone-monoclinic { border-top: 6px solid #8d6b57; }
.crystal-tone-triclinic { border-top: 6px solid #6a7888; }

@media (max-width: 920px) {
  .crystal-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  .content {
    padding: 44px 20px 36px;
  }

  .page-mohs,
  .page-uv,
  .page-acid,
  .page-bruch,
  .page-crystal,
  .page-werkzeug-story,
  .page-spaltbarkeit,
  .page-strichfarbe {
    max-width: 1180px;
  }

  .spalt-overview-card,
  .strich-hero,
  .uv-hero,
  .page-acid .acid-hero,
  .story-hero {
    gap: 22px;
    padding: 24px;
  }

  .spalt-overview-copy h2,
  .story-hero-copy h2,
  .uv-hero-copy h2,
  .strich-hero h2 {
    font-size: clamp(30px, 3.2vw, 44px);
  }

  .strich-hero-richtext,
  .story-richtext,
  .uv-hero-copy p,
  .spalt-overview-copy p {
    font-size: 17px;
    line-height: 1.75;
  }
}

@media (max-width: 1024px) {
  .content {
    padding: 36px 18px 32px;
  }

  .spalt-overview-card,
  .strich-hero,
  .story-hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
  }

  .uv-hero,
  .page-acid .acid-hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  }

  .mohs-scale-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .acid-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .strich-grid,
  .glanz-levels,
  .spalt-levels {
    gap: 20px;
  }

  .story-weathering-table {
    min-width: 560px;
  }
}

@media (min-width: 981px) and (max-width: 1400px) {
  .page {
    grid-template-columns: clamp(280px, 20vw, 340px) 1fr;
  }

  .content {
    padding: 44px 20px 36px;
  }

  .content > #view {
    width: 100%;
    margin: 0 auto;
  }

  .topbar .menu > .menu-item > a,
  .topbar .menu > .menu-item > button,
  .menu-item a,
  .dropbtn,
  .submenu-title,
  .dropdown-panel a {
    font-size: 18px;
  }

  .home-hero {
    width: min(80%, 1200px);
    margin: 0 auto;
    gap: 32px;
    padding: 28px 0 18px;
  }

  .home-hero-copy h1 {
    font-size: clamp(48px, 4.3vw, 66px);
  }

  .home-intro {
    font-size: clamp(22px, 1.6vw, 25px);
    line-height: 1.72;
  }

  .home-highlights span {
    font-size: 14px;
  }

  .filter-title {
    font-size: 24px;
  }

  .field label,
  .filter-chip,
  .search input,
  .btn-filter-glanz {
    font-size: 15px;
  }

  .site-footer {
    padding: 28px 20px 34px;
  }

  .site-footer::before {
    display: none;
  }

  .footer-inner {
    max-width: 980px;
    margin: 0 auto;
  }

  .footer-top,
  .footer-version,
  .footer-contacts {
    text-align: left;
  }

  .provider,
  .footer-version,
  .footer-contacts,
  .footer-top h3 {
    color: var(--text-muted);
  }

  .footer-logos {
    width: min(100%, 900px);
    margin: 18px auto 22px;
    padding: 18px;
  }

  .footer-logos img {
    width: min(100%, 720px);
    max-height: 130px;
    object-fit: contain;
  }
}

@media (min-width: 1281px) and (max-width: 1400px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 0 14px;
  }

  .menu {
    justify-content: flex-start;
    gap: clamp(18px, 2vw, 34px);
    max-width: none;
    min-width: 0;
    margin: 0;
  }

  .menu-item,
  .menu-link-row {
    min-width: 0;
  }

  .menu-item a,
  .menu-link-main,
  .dropbtn {
    padding-left: 6px;
    padding-right: 6px;
  }

  .topbar-actions {
    min-width: 0;
    width: auto;
    gap: 10px;
    justify-content: flex-end;
  }

  .lang-switch {
    flex: 0 0 auto;
  }

  .navbar-logo-right img {
    height: 42px;
    width: auto;
    max-width: none;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    padding: 0 12px;
  }

  .menu {
    justify-content: flex-start;
    gap: clamp(12px, 1.45vw, 22px);
    min-width: 0;
    margin: 0;
  }

  .menu-item,
  .menu-link-row {
    min-width: 0;
  }

  .topbar .menu > .menu-item > a,
  .topbar .menu > .menu-item > button,
  .menu-item a,
  .dropbtn,
  .submenu-title,
  .dropdown-panel a {
    font-size: clamp(13px, 1.05vw, 16px);
  }

  .menu-item a,
  .menu-link-main,
  .dropbtn {
    padding-left: 5px;
    padding-right: 5px;
  }

  .menu-caret-btn {
    padding-left: 3px;
    padding-right: 3px;
  }

  .topbar-actions {
    min-width: 0;
    width: auto;
    gap: 8px;
    justify-content: flex-end;
  }

  .lang-switch {
    flex: 0 0 auto;
    padding: 4px;
    gap: 3px;
  }

  .lang-btn {
    padding: 6px 8px;
    font-size: 0.72rem;
  }

  .navbar-logo-right img {
    display: block;
    height: clamp(34px, 3vw, 44px);
    width: auto;
    max-width: none;
  }
}

@media (min-width: 981px) and (max-width: 1120px) {
  .menu {
    gap: 10px;
  }

  .topbar .menu > .menu-item > a,
  .topbar .menu > .menu-item > button,
  .menu-item a,
  .dropbtn,
  .submenu-title,
  .dropdown-panel a {
    font-size: 12px;
  }

  .navbar-logo-right img {
    height: 36px;
  }
}

/* Final footer alignment: keep the left sidebar visually continuous to the bottom */
.site-footer {
  display: block;
  background:
    linear-gradient(90deg, #333333 0, #2d2d2d 340px, var(--surface) 340px, var(--surface) 100%);
  padding: 32px 24px 40px 0;
}

.site-footer::before {
  content: none;
  display: none;
}

.footer-inner {
  width: auto;
  max-width: 1100px;
  margin: 0 24px 0 calc(340px + 24px);
}

@media (min-width: 981px) and (max-width: 1400px) {
  .site-footer {
    background:
      linear-gradient(90deg, #333333 0, #2d2d2d clamp(280px, 20vw, 340px), var(--surface) clamp(280px, 20vw, 340px), var(--surface) 100%);
    padding: 28px 20px 34px 0;
  }

  .footer-inner {
    margin: 0 20px 0 calc(clamp(280px, 20vw, 340px) + 20px);
  }
}

@media (max-width: 980px) {
  .site-footer {
    background: var(--surface);
    padding: 28px 16px;
  }

  .footer-inner {
    margin: 0;
    max-width: 100%;
  }
}

body.sidebar-collapsed .site-footer {
  background: var(--surface);
  padding-left: 24px;
}

body.sidebar-collapsed .site-footer::before {
  display: none;
}

body.sidebar-collapsed .footer-inner {
  margin-left: 0;
}

@media (min-width: 981px) and (max-width: 1280px) {
  .topbar {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0 14px;
  }

  .menu {
    width: auto;
    justify-content: center;
    gap: clamp(12px, 1.6vw, 24px);
    min-width: 0;
    flex: 1 1 auto;
  }

  .menu-item,
  .menu-link-row {
    min-width: 0;
  }

  .topbar-actions {
    width: auto;
    min-width: 0;
    gap: 8px;
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  .topbar .menu > .menu-item > a,
  .topbar .menu > .menu-item > button,
  .menu-item a,
  .dropbtn,
  .submenu-title,
  .dropdown-panel a {
    font-size: clamp(12px, 1.15vw, 14px);
  }

  .menu-item a,
  .menu-link-main,
  .dropbtn {
    padding-left: 6px;
    padding-right: 6px;
  }

  .menu-caret-btn {
    padding-left: 4px;
    padding-right: 4px;
  }

  .lang-switch {
    padding: 4px;
    gap: 3px;
  }

  .lang-btn {
    padding: 6px 8px;
    font-size: 0.72rem;
  }

  .navbar-logo-right img {
    height: 46px;
    width: auto;
    margin-top: 0;
  }

}

@media (min-width: 981px) and (max-width: 1120px) {
  .topbar {
    gap: 8px;
    padding: 0 10px;
  }

  .menu {
    gap: 10px;
  }

  .topbar .menu > .menu-item > a,
  .topbar .menu > .menu-item > button,
  .menu-item a,
  .dropbtn,
  .submenu-title,
  .dropdown-panel a {
    font-size: 12px;
  }

  .menu-item a,
  .menu-link-main,
  .dropbtn {
    padding-left: 4px;
    padding-right: 4px;
  }

  .menu-caret-btn {
    padding-left: 2px;
    padding-right: 2px;
  }

  .lang-btn {
    padding: 5px 7px;
    font-size: 0.68rem;
  }

  .navbar-logo-right img {
    height: 40px;
  }

}

@media (min-width: 981px) and (max-width: 1160px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
  }

  .menu {
    justify-content: flex-start;
    gap: 8px;
    overflow: hidden;
  }

  .topbar .menu > .menu-item > a,
  .topbar .menu > .menu-item > button,
  .menu-item a,
  .menu-link-main,
  .dropbtn,
  .submenu-title {
    font-size: 11px !important;
    padding: 10px 3px;
  }

  .menu-caret-btn {
    padding: 10px 2px;
  }

  .caret,
  .arrow {
    font-size: 10px;
  }

  .topbar-actions {
    gap: 6px;
    transform: scale(0.92);
    transform-origin: right center;
  }

  .lang-switch {
    padding: 3px;
    gap: 2px;
  }

  .lang-btn {
    padding: 4px 6px;
    font-size: 0.64rem;
  }

  .navbar-logo-right img {
    height: 34px;
  }

}

.mineral-overview-grid .mineral-overview-card--secondary-entry {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(129, 193, 255, 0.32), transparent 34%),
    radial-gradient(circle at bottom left, rgba(91, 164, 238, 0.22), transparent 28%),
    linear-gradient(180deg, #edf7ff 0%, #f7fbff 100%);
  border: 1px solid rgba(56, 120, 191, 0.14);
}

.mineral-overview-grid .mineral-overview-card--secondary-entry::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(90, 156, 225, 0.08);
  pointer-events: none;
}

.mineral-overview-kicker {
  display: inline-flex;
  align-self: flex-start;
  margin: 2px 0 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(29, 96, 168, 0.1);
  color: #1f5b95;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-secondary-minerals {
  max-width: 1440px;
  margin: 0 auto;
}

.secondary-minerals-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  margin: 10px 0 26px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(50, 93, 144, 0.12);
  box-shadow: 0 24px 46px rgba(28, 57, 89, 0.08);

  /* ✅ Correction couleur uniforme */
  background:
    radial-gradient(circle at top left, rgba(136,199,255,0.26), transparent 32%),
    radial-gradient(circle at bottom right, rgba(66,135,214,0.16), transparent 30%),
    linear-gradient(145deg, #f5fbff 0%, #edf6ff 55%, #eaf3fc 100%);
}

.secondary-minerals-copy {
  padding: 34px 34px 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent; /* ✅ supprimé différence */
}

.secondary-minerals-feature {
  padding: 22px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  text-decoration: none;
  background: transparent; /* ✅ supprimé différence */
}

.secondary-minerals-copy,
.secondary-minerals-feature {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.secondary-minerals-kicker {
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(32, 96, 169, 0.12);
  color: #225b93;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-secondary-minerals .page-title {
  margin: 18px 0 16px;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 0.98;
}

.secondary-minerals-lede {
  max-width: 760px;
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
  color: #36516d;
}

.secondary-minerals-meta {
  margin-top: auto;
  display: flex;
  justify-content: flex-start;
}

.secondary-minerals-meta span {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: white;
  border: 1px solid rgba(42, 90, 143, 0.12);
  color: #1f4f82;
  font-size: 14px;
  font-weight: 700;
}

.secondary-minerals-feature-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(42, 90, 143, 0.08);
}

.secondary-minerals-feature-frame img {
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
  display: block;
}

.secondary-minerals-feature-copy {
  display: grid;
  gap: 6px;
  padding: 18px 6px 2px;
  color: #173f67;
}

.secondary-minerals-feature-copy strong {
  font-size: 26px;
  line-height: 1.08;
}

.secondary-minerals-feature-copy span {
  font-size: 14px;
  line-height: 1.65;
}

.secondary-minerals-feature-formula {
  font-weight: 700;
  color: #205a90;
}

.secondary-minerals-grid-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.secondary-minerals-grid-head h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

.secondary-minerals-grid-head p {
  margin: 0;
  max-width: 760px;
  line-height: 1.75;
  color: #4a6684;
}

.secondary-minerals-source {
  display: inline-flex;
  align-items: center;
  padding: 11px 16px;
  border-radius: 999px;
  background: #1f63a0;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.secondary-minerals-source:hover {
  filter: brightness(1.04);
}

.secondary-minerals-group-stack {
  display: grid;
  gap: 24px;
}

.secondary-minerals-category {
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
  border: 1px solid rgba(50, 93, 144, 0.12);
  border-top: 5px solid #6eabc2;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.secondary-minerals-category-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  margin-bottom: 14px;
}

.secondary-minerals-category-head h3 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #143b61;
}

.secondary-minerals-category-head span {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(42, 90, 143, 0.1);
  color: #215b95;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.secondary-minerals-category-media {
  display: none;
}

.secondary-minerals-category-body {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.page-secondary-minerals .mineral-grid--minerals {
  margin-top: 0;
}

.secondary-minerals-category .mineral-grid--minerals {
  margin: 0;
}

.secondary-minerals-category .mineral-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 16px 30px rgba(28, 57, 89, 0.08);
}

@media (max-width: 920px) {
  .secondary-minerals-hero {
    grid-template-columns: 1fr;
  }

  .secondary-minerals-grid-head {
    flex-direction: column;
  }

  .secondary-minerals-source {
    align-self: flex-start;
  }
}

.page-secondary-minerals .page-title {
  max-width: 1100px;
  margin: 18px 0 16px;
  line-height: 1.08;
  font-size: clamp(28px, 3.2vw, 48px);
  text-align: left;
}

.page-admin {
  width: min(100%, 1540px);
  max-width: 1540px;
  margin: 0 auto;
  display: grid;
  gap: 26px;
}

.admin-hero {
  display: grid;
  gap: 22px;
  padding: 30px 34px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(27, 74, 110, 0.14), transparent 28%),
    radial-gradient(circle at bottom left, rgba(233, 140, 76, 0.14), transparent 24%),
    linear-gradient(180deg, #f8fbfd 0%, #fef7f2 100%);
  border: 1px solid rgba(24, 57, 75, 0.08);
  box-shadow: 0 18px 36px rgba(24, 57, 75, 0.08);
}

.admin-kicker {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 49, 66, 0.08);
  color: #0f3142;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-hero p {
  max-width: 78ch;
  margin: 10px 0 0;
  color: #415465;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.admin-stat-card {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(24, 57, 75, 0.08);
}

.admin-stat-card strong {
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1;
  color: #102d46;
}

.admin-stat-card span {
  color: #5d6a73;
  font-weight: 700;
}

.admin-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.admin-nav {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
}

.admin-nav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(24, 57, 75, 0.08);
  border-radius: 18px;
  background: #fff;
  color: #19394b;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.admin-nav-btn:hover,
.admin-nav-btn.is-active {
  transform: translateY(-1px);
  border-color: rgba(200, 100, 45, 0.26);
  box-shadow: 0 12px 28px rgba(24, 57, 75, 0.08);
}

.admin-nav-btn span {
  font-weight: 700;
}

.admin-nav-btn strong {
  color: #8f4c28;
}

.admin-main {
  display: grid;
  gap: 20px;
}

.admin-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.8fr);
  gap: 22px;
  align-items: start;
}

.admin-workbench--full {
  grid-template-columns: minmax(0, 1fr);
}

.admin-table-panel,
.admin-editor-panel {
  background: #fff;
  border: 1px solid rgba(24, 57, 75, 0.08);
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(24, 57, 75, 0.07);
}

.admin-table-panel--full {
  width: 100%;
}

.admin-editor-panel {
  position: sticky;
  top: 18px;
  padding: 24px;
}

.admin-editor-panel--modal {
  position: static;
  top: auto;
}

.admin-editor-panel--placeholder {
  color: #5d6a73;
}

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 28, 39, 0.5);
  backdrop-filter: blur(6px);
}

.admin-modal-dialog {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border-radius: 28px;
}

.admin-modal .admin-editor-panel {
  box-shadow: 0 28px 56px rgba(15, 28, 39, 0.2);
}

.admin-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 0;
}

.admin-panel-head h2 {
  margin: 0;
  color: #102d46;
  font-size: clamp(24px, 2.4vw, 30px);
}

.admin-panel-head p {
  margin: 8px 0 0;
  color: #64727c;
}

.admin-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(143, 76, 40, 0.1);
  color: #8f4c28;
  font-weight: 800;
}

.admin-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
}

.admin-search {
  display: grid;
  gap: 8px;
  flex: 1 1 320px;
}

.admin-page-size {
  display: grid;
  gap: 8px;
  min-width: 110px;
}

.admin-search span,
.admin-page-size span,
.admin-field span {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5a6670;
}

.admin-search input,
.admin-page-size select,
.admin-field input,
.admin-field textarea {
  width: 100%;
  border: 1px solid rgba(24, 57, 75, 0.14);
  border-radius: 16px;
  background: #fbfcfd;
  color: #163446;
  font: inherit;
  padding: 13px 14px;
}

.admin-field textarea {
  resize: vertical;
  min-height: 110px;
}

.admin-toolbar-actions,
.admin-row-actions,
.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-btn {
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 11px 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.admin-btn:hover {
  transform: translateY(-1px);
}

.admin-btn--primary {
  background: #8f4c28;
  border-color: #8f4c28;
  color: #fff;
  box-shadow: 0 10px 20px rgba(143, 76, 40, 0.18);
}

.admin-btn--ghost {
  background: #fff;
  border-color: rgba(24, 57, 75, 0.12);
  color: #153749;
}

.admin-btn--danger {
  background: #fff4f2;
  border-color: rgba(187, 52, 38, 0.16);
  color: #b33426;
}

.admin-btn--tiny {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
}

.admin-btn--icon {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}

.admin-table-wrap {
  padding: 0 24px 24px;
  overflow: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1160px;
  table-layout: fixed;
}

.admin-table--minerals .admin-col-name {
  width: 180px;
}

.admin-table--minerals .admin-col-category {
  width: 170px;
}

.admin-table--minerals .admin-col-formula {
  width: 220px;
}

.admin-table--minerals .admin-col-origin {
  width: 200px;
}

.admin-table--minerals .admin-col-description {
  width: auto;
}

.admin-table--minerals .admin-col-actions {
  width: 240px;
}

.admin-table th,
.admin-table td {
  text-align: left;
  vertical-align: top;
  padding: 15px 14px;
  border-bottom: 1px solid rgba(24, 57, 75, 0.08);
}

.admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  color: #5b6973;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-name-cell {
  display: grid;
  gap: 4px;
}

.admin-name-cell strong {
  color: #102d46;
}

.admin-name-cell span {
  color: #8b98a1;
  font-size: 13px;
}

.admin-cell-wrap,
.admin-description-cell {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.45;
}

.admin-cell-formula {
  font-family: "Segoe UI", Arial, sans-serif;
}

.admin-description-cell {
  color: #465761;
}

.admin-actions-col {
  position: sticky;
  right: 0;
  z-index: 2;
  min-width: 240px;
  background: #fff;
  box-shadow: -10px 0 18px rgba(24, 57, 75, 0.05);
}

.admin-table td.admin-actions-col {
  vertical-align: middle;
}

.admin-row-actions {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.admin-row-actions .admin-btn {
  min-width: 0;
  flex: 1 1 0;
  justify-content: center;
}

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px 24px;
}

.admin-pagination-info,
.admin-pagination-status {
  color: #5d6a73;
  font-weight: 600;
}

.admin-pagination-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.admin-form {
  margin-top: 16px;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-field {
  display: grid;
  gap: 8px;
}

.admin-field--full {
  grid-column: 1 / -1;
}

.admin-form-actions {
  margin-top: 18px;
}

@media (max-width: 1180px) {
  .admin-shell,
  .admin-workbench {
    grid-template-columns: 1fr;
  }

  .admin-nav,
  .admin-editor-panel {
    position: static;
  }
}

@media (max-width: 900px) {
  .admin-stats,
  .admin-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-pagination-actions {
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  .page-admin {
    gap: 18px;
  }

  .admin-hero {
    padding: 22px 18px;
  }

  .admin-editor-panel {
    padding: 18px;
  }

  .admin-panel-head,
  .admin-toolbar,
  .admin-table-wrap {
    padding-left: 18px;
    padding-right: 18px;
  }

  .admin-stats,
  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-modal {
    padding: 12px;
  }

  .admin-modal-dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
  }

  .admin-table {
    min-width: 620px;
  }
}

body.admin-standalone {
  background:
    radial-gradient(circle at top left, rgba(24, 57, 75, 0.08), transparent 24%),
    radial-gradient(circle at top right, rgba(143, 76, 40, 0.12), transparent 22%),
    linear-gradient(180deg, #eef3f6 0%, #f7f3ef 100%);
  color: #152f40;
}

body.admin-standalone .left,
body.admin-standalone .topbar,
body.admin-standalone .site-footer,
body.admin-standalone .theme-toggle,
body.admin-standalone .sidebar-show-btn,
body.admin-standalone .scroll-top-btn {
  display: none !important;
}

body.admin-standalone .page,
body.admin-standalone.sidebar-collapsed .page {
  grid-template-columns: 1fr;
}

body.admin-standalone .right {
  background: transparent;
}

body.admin-standalone .content {
  min-height: 100vh;
  padding: 32px 28px 40px;
  background: transparent;
}

body.admin-standalone .page-admin {
  width: min(100%, 1780px);
  max-width: 1780px;
  gap: 30px;
}

body.admin-standalone .admin-hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  align-items: start;
  padding: 36px 40px;
  border-radius: 34px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(237, 171, 125, 0.18), transparent 26%),
    linear-gradient(135deg, #143247 0%, #1e455e 52%, #7a4324 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 64px rgba(20, 50, 71, 0.22);
}

body.admin-standalone .admin-kicker {
  background: rgba(255, 255, 255, 0.14);
  color: #eef7fb;
}

body.admin-standalone .admin-hero > div:first-child {
  align-self: start;
}

body.admin-standalone .admin-hero .page-title,
body.admin-standalone .admin-hero p {
  color: #f7fbfd;
}

body.admin-standalone .admin-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.admin-standalone .admin-stat-card {
  padding: 20px 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

body.admin-standalone .admin-stat-card strong,
body.admin-standalone .admin-stat-card span {
  color: #f6fbfd;
}

body.admin-standalone .admin-shell {
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
}

body.admin-standalone .admin-nav {
  gap: 14px;
}

body.admin-standalone .admin-nav-btn {
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(20, 50, 71, 0.08);
  box-shadow: 0 14px 30px rgba(20, 50, 71, 0.08);
  backdrop-filter: blur(8px);
}

body.admin-standalone .admin-nav-btn:hover,
body.admin-standalone .admin-nav-btn.is-active {
  background: #143247;
  border-color: #143247;
  box-shadow: 0 18px 34px rgba(20, 50, 71, 0.16);
}

body.admin-standalone .admin-nav-btn:hover span,
body.admin-standalone .admin-nav-btn:hover strong,
body.admin-standalone .admin-nav-btn.is-active span,
body.admin-standalone .admin-nav-btn.is-active strong {
  color: #f7fbfd;
}

body.admin-standalone .admin-table-panel,
body.admin-standalone .admin-editor-panel {
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(20, 50, 71, 0.08);
  box-shadow: 0 22px 48px rgba(20, 50, 71, 0.10);
  backdrop-filter: blur(10px);
}

body.admin-standalone .admin-panel-head {
  padding-top: 26px;
}

body.admin-standalone .admin-count-pill {
  background: rgba(20, 50, 71, 0.08);
  color: #143247;
}

body.admin-standalone .admin-search input,
body.admin-standalone .admin-field input,
body.admin-standalone .admin-field textarea {
  background: rgba(248, 251, 253, 0.92);
  border-color: rgba(20, 50, 71, 0.10);
  border-radius: 18px;
}

body.admin-standalone .admin-btn {
  border-radius: 16px;
}

body.admin-standalone .admin-btn--primary {
  background: linear-gradient(135deg, #7a4324 0%, #9d5630 100%);
  border-color: #8f4c28;
}

body.admin-standalone .admin-btn--ghost {
  background: rgba(255, 255, 255, 0.88);
}

body.admin-standalone .admin-table th {
  background: rgba(255, 255, 255, 0.95);
}

body.admin-standalone .admin-actions-col {
  background: rgba(255, 255, 255, 0.96);
}

@media (max-width: 1180px) {
  body.admin-standalone .admin-hero,
  body.admin-standalone .admin-shell,
  body.admin-standalone .admin-workbench {
    grid-template-columns: 1fr;
  }

  body.admin-standalone .admin-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.admin-standalone .content {
    padding: 20px 16px 28px;
  }

  body.admin-standalone .admin-hero {
    padding: 26px 22px;
  }

  body.admin-standalone .admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.admin-standalone .admin-stats {
    grid-template-columns: 1fr;
  }
}

/* ── 3D Viewer Popup Modal ── */
.viewer3d-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.viewer3d-modal[aria-hidden="true"] { display: none; }
.viewer3d-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  cursor: pointer;
}
.viewer3d-modal-box {
  position: relative;
  z-index: 1;
  background: var(--card-bg, #fff);
  border-radius: 18px;
  padding: 52px 28px 20px;
  width: min(96vw, 960px);
  max-height: 94vh;
  box-shadow: 0 28px 70px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
body[data-theme="dark"] .viewer3d-modal-box { background: #1e1e1e; }
.viewer3d-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  background: rgba(0,0,0,0.1);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.viewer3d-modal-close:hover { background: rgba(0,0,0,0.2); }
body[data-theme="dark"] .viewer3d-modal-close { color: #ccc; background: rgba(255,255,255,0.12); }
body[data-theme="dark"] .viewer3d-modal-close:hover { background: rgba(255,255,255,0.2); }
.viewer3d-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #156082;
  margin: 0;
  align-self: flex-start;
  padding-left: 2px;
}
.viewer3d-modal-canvas-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}
.viewer3d-modal-canvas-wrap .mineral-3d-viewer-canvas {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 480px;
}
.viewer3d-modal-canvas-wrap .mineral-3d-viewer-canvas canvas {
  width: 100% !important;
  height: auto !important;
}
.viewer3d-modal-hint {
  font-size: 11px;
  color: #888;
  margin: 0;
}

/* Expand button overlay on viewer wrapper */
.mineral-3d-viewer-wrapper { position: relative; }
.viewer3d-expand-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: none;
  background: rgba(255,255,255,0.88);
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 5px rgba(0,0,0,0.2);
  color: #444;
  z-index: 5;
  transition: background 0.15s, box-shadow 0.15s;
}
.viewer3d-expand-btn:hover { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.28); }
body[data-theme="dark"] .viewer3d-expand-btn { background: rgba(40,40,40,0.88); color: #ccc; }
body[data-theme="dark"] .viewer3d-expand-btn:hover { background: #333; }

/* ── 3D Mineral Viewer ── */
.mineral-3d-viewer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0 4px;
}

.mineral-3d-viewer-wrapper--autorotate {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

body[data-theme="dark"] .mineral-3d-viewer-wrapper--autorotate {
  border-top-color: rgba(255,255,255,0.08);
}

.mineral-3d-viewer-canvas {
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  cursor: grab;
  background: transparent;
}

.mineral-3d-viewer-canvas:active {
  cursor: grabbing;
}

.mineral-3d-viewer-canvas canvas {
  display: block;
}

.mineral-3d-viewer-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--lager-subtitle-color, #156082);
  text-align: center;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.viewer360-inline-fundort {
  display: block;
  margin: 6px 0 0;
  text-align: center;
  font-size: 12px;
  opacity: 0.62;
  color: #4b5563;
}

.mineral-3d-viewer-hint {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.55;
  color: inherit;
}

body[data-theme="dark"] .mineral-3d-viewer-label {
  color: #7ac4df;
}

body[data-theme="dark"] .viewer360-inline-fundort {
  color: rgba(226, 232, 240, 0.82);
}

/* ── 3D rotation controls ── */
.mineral-3d-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.m3d-btn-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.m3d-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(21, 96, 130, 0.30);
  background: rgba(21, 96, 130, 0.08);
  color: #156082;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  user-select: none;
  line-height: 1;
}

.m3d-btn:hover {
  background: rgba(21, 96, 130, 0.18);
}

.m3d-btn:active {
  background: rgba(21, 96, 130, 0.28);
  transform: scale(0.93);
}

.m3d-btn--reset {
  width: 34px;
  height: 34px;
  font-size: 15px;
  border-color: rgba(21, 96, 130, 0.18);
  background: transparent;
  opacity: 0.65;
}

.m3d-btn--reset:hover { opacity: 1; }

body[data-theme="dark"] .m3d-btn {
  border-color: rgba(122, 196, 223, 0.30);
  background: rgba(122, 196, 223, 0.08);
  color: #7ac4df;
}

body[data-theme="dark"] .m3d-btn:hover {
  background: rgba(122, 196, 223, 0.18);
}

/* ── Dark mode: missing overrides ── */

/* Info-modal (Hinweis popup) */
body[data-theme="dark"] .app-modal-box {
  background: linear-gradient(180deg, #1d1d1d 0%, #161616 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
body[data-theme="dark"] .app-modal-box h3 { color: #f5f7fa; }
body[data-theme="dark"] .app-modal-text { color: #d5dbe3; }
body[data-theme="dark"] .app-modal-badge {
  color: #e0b898;
  background: rgba(180, 120, 60, 0.2);
}

/* Sedimentary lager list page — headings and kicker */
body[data-theme="dark"] .page-lager-sedimentary-grid-head h2 { color: #f0d0b5; }
body[data-theme="dark"] .page-lager-sedimentary-grid-head p  { color: #c8a890; }
body[data-theme="dark"] .page-lager-sedimentary-kicker {
  color: #f0bb90;
  background: rgba(233, 113, 50, 0.22);
}

/* Lager stage intro paragraph text (all lager pages) */
body[data-theme="dark"] .lager-hydro-stage-intro p { color: #d5dbe3; }


/* Inline mineral cards with white !important background */
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-inline-mineral-card {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
body[data-theme="dark"] .page-lager-metamorphic-intro .lager-metamorphic-mineral-cards .lager-inline-mineral-card {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Inline example label ("Eindampfungsfolge"-style labels) */
body[data-theme="dark"] .lager-inline-example-label { color: #d4915a; }

/* Sequence arrows (Evaporite sequence) */
body[data-theme="dark"] .lager-sequence-arrow-text { color: #f0bb90; }
body[data-theme="dark"] .lager-sequence-arrow-line {
  background: #d4915a;
  box-shadow: none;
}
body[data-theme="dark"] .lager-sequence-arrow-head {
  border-color: #d4915a;
}

/* Filter card dropdown toggles and panels */
body[data-theme="dark"] .filter-card .glanz-toggle,
body[data-theme="dark"] .filter-card .kristall-toggle,
body[data-theme="dark"] .filter-card .spalt-toggle,
body[data-theme="dark"] .filter-card .bruch-toggle {
  background: var(--surface);
  color: var(--text-color);
  border-color: var(--field-border);
}
body[data-theme="dark"] .filter-card .glanz-panel,
body[data-theme="dark"] .filter-card .kristall-panel,
body[data-theme="dark"] .filter-card .spalt-panel,
body[data-theme="dark"] .filter-card .bruch-panel,
body[data-theme="dark"] .filter-card #f_kristall_group,
body[data-theme="dark"] .filter-card #f_spalt_group,
body[data-theme="dark"] .filter-card #f_bruch_group {
  background: var(--surface-soft);
  border-color: var(--field-border);
  box-shadow: none;
}

/* CSS variables for JS-rendered coal card inline styles */
body[data-theme="dark"] {
  --kohle-label: #d4b898;
  --kohle-arrow: #d4915a;
  --kohle-row-border: rgba(255, 255, 255, 0.08);
}

/* Clastic text cards (Fluviale / Marine / Äolische Seifen) */
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-hydro-stage-clastic-text-card {
  background: linear-gradient(180deg, rgba(35, 28, 22, 0.96), rgba(25, 20, 16, 0.98));
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-hydro-stage-clastic-text-card h3 {
  color: #D4A840;
}
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-hydro-stage-clastic-text-card p {
  color: #d5dbe3;
}

/* Clastic example-grid note cards (transparent bg on dark parent) */
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-grid .lager-hydro-stage-note-card h4 {
  color: #d4915a;
}
body[data-theme="dark"] .page-lager-sedimentary-intro .lager-hydro-stage-clastic-example-grid .lager-hydro-stage-note-card p {
  color: #d5dbe3;
}

/* mineral-card dark mode: override the !important background from base rule */
body[data-theme="dark"] .mineral-card {
  background: linear-gradient(180deg, #232527 0%, #1c1e20 100%) !important;
  color: #f2f5f8 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body[data-theme="dark"] .mineral-card .mineral-title,
body[data-theme="dark"] .mineral-card h3,
body[data-theme="dark"] .mineral-card h4,
body[data-theme="dark"] .mineral-card h5 {
  color: #f5f7fa !important;
}
body[data-theme="dark"] .mineral-card .thumb {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
}

/* Search icon refresh */
.search button {
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 12px;
  background: linear-gradient(180deg, #4b5563 0%, #374151 100%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
}

.search button::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  box-sizing: border-box;
  border: 2.2px solid currentColor;
  border-radius: 50%;
  transform: translate(-2px, -2px);
}

.search button::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2.2px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(6px, 6px) rotate(45deg);
  transform-origin: center;
}

.search button:hover {
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.28);
}