/* ————————————————————————————————
   FragranceMaterial — Ingredient Library
   ———————————————————————————————— */

/* Mona Sans Condensed (selbst gehostet, OFL — github/mona-sans).
   Variabler Font: Gewicht 200–900. Siehe MonaSans-LICENSE.txt */
@font-face {
  font-family: "Mona Sans Condensed";
  src: url("MonaSans-Condensed.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg:        #F2F0EA;
  --bg-header: #FAF9F6;
  --surface:   #FBFAF7;
  --ink:       #1E3A47;   /* deep petrol/navy   */
  --ink-soft:  #4D5C64;
  --muted:     #8E8C85;
  --accent:    #D2294B;   /* crimson            */
  --line:      #DEDBD3;
  --line-soft: #E8E5DE;
  --pill:      #EAE7E0;
  --thead:     #E5E2DB;
  --pyr-off:   #D8D6CF;
  --on-ink:    #FFFFFF;   /* text on ink-coloured surfaces */
  --ink-hover: #16303C;
  --field-bg:  #FFFFFF;   /* search, notes box, inputs     */
  --field-bg2: #FDFCFA;
  --hover:     rgba(30,58,71,.07);
  --row-hover: rgba(30,58,71,.027);
  --row-open:  rgba(30,58,71,.035);
  --chip-bg:   #E4E1DA;
  --pill-text: #43423D;
  --th-text:   #3F4C53;
  --text-soft: #4B4A45;
  --icon-idle: #B9B7B0;
  --btn-border:#5A6B74;
  --bar-na:    #E4E2DB;
  --mark:      rgba(210,41,75,.16);
  --shadow:    rgba(30,58,71,.14);
  --petrol:      #1E3A47;                 /* Markenfarbe Petrol (Formeln/Pyramide) */
  --petrol-tint: rgba(30,58,71,.10);      /* dezente Petrol-Hinterlegung           */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "DM Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cond:  "Mona Sans Condensed", "DM Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ——— Dark mode (follows the browser default, toggle in the header) ——— */
@property --bg-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes spin-gradient {
  to { --bg-angle: 360deg; }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #14191D;
  --bg-header: #1A2127;
  --surface:   #1B2227;
  --ink:       #E8E4D9;   /* warm parchment for text     */
  --ink-soft:  #A2ADB4;
  --muted:     #9CA6AD;
  --accent:    #E25571;   /* lifted crimson for contrast */
  --line:      #2D353C;
  --line-soft: #252D33;
  --pill:      #2B333A;
  --thead:     #21282E;
  --pyr-off:   #3B444C;
  --on-ink:    #15191C;
  --ink-hover: #F6F2E7;
  --field-bg:  #20272D;
  --field-bg2: #1E252B;
  --hover:     rgba(232,228,218,.08);
  --row-hover: rgba(232,228,218,.03);
  --row-open:  rgba(232,228,218,.05);
  --chip-bg:   #343D45;
  --pill-text: #CCC8BF;
  --th-text:   #BAC3C9;
  --text-soft: #C5C1B8;
  --icon-idle: #7A858E;
  --btn-border:#8D989F;
  --bar-na:    #2C343B;
  --mark:      rgba(226,85,113,.3);
  --shadow:    rgba(0,0,0,.55);
  --petrol:      #86B2C2;                 /* helle Petrol-Variante für Dark Mode */
  --petrol-tint: rgba(134,178,194,.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ——— Top bar ——— */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 64px;
  padding: 0 36px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 21px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .2px;
  white-space: nowrap;
}

.mainnav {
  display: flex;
  gap: 36px;
  margin: 0 auto;
}

.nav-link {
  position: relative;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 6px 0;
  transition: color .15s;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--accent); }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--accent);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.iconbtn:hover { background: var(--hover); }
.iconbtn.on { color: var(--accent); }
.iconbtn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.iconbtn.on svg { fill: currentColor; }

.searchbox {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 264px;
  height: 36px;
  padding: 0 8px 0 14px;
  margin-right: 4px;
  border-radius: 999px;
  background: var(--field-bg);
  border: 1px solid var(--line);
  transition: border-color .2s, box-shadow .2s, width .25s ease;
}
.searchbox:focus-within {
  border-color: transparent;
  background-image: linear-gradient(var(--field-bg), var(--field-bg)), conic-gradient(from var(--bg-angle), var(--accent) 0%, var(--ink) 50%, var(--accent) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 4px 15px var(--mark);
  outline: none !important;
  animation: spin-gradient 4s linear infinite;
}
.search-ico {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.searchbox:focus-within .search-ico { stroke: var(--ink); }
.searchbox input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}
.searchbox input::placeholder { color: var(--muted); }
.searchbox input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-kbd {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--muted);
  background: var(--bg-header);
}
.searchbox:focus-within .search-kbd,
.searchbox.has-text .search-kbd { display: none; }

.search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--ink-soft);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .15s, color .15s;
}
.search-clear:hover { background: var(--ink); color: var(--on-ink); }
.search-clear svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.searchbox.has-text .search-clear { display: inline-flex; }

/* ——— Account ——— */

.account-wrap { position: relative; }

.iconbtn.avatar {
  background: var(--ink);
  color: var(--on-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  width: 32px;
  height: 32px;
  margin: 2px;
}
.iconbtn.avatar:hover { background: var(--ink-hover); }

.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 264px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 14px 36px var(--shadow);
  padding: 18px 18px 16px;
  z-index: 80;
}
.account-menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 14px;
  width: 8px;
  height: 8px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}

.account-menu .menu-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.account-menu .menu-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 12px;
}

.profile-list { list-style: none; margin: 0 0 4px; }

.profile-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: 3px;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.profile-item:hover { background: var(--hover); }
.profile-item .p-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  flex: 0 0 auto;
}
.profile-item.current .p-avatar { background: var(--ink); color: var(--on-ink); }
.profile-item .p-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.profile-item .p-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-item .p-stats {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 400;
}
.profile-item .p-check {
  margin-left: auto;
  color: var(--accent);
  font-size: 13px;
}

.menu-new {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.menu-new input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field-bg);
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink);
  outline: none;
}
.menu-new input:focus { border-color: var(--ink-soft); }
.menu-new button {
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.menu-new button:hover { background: var(--ink-hover); }

.menu-signout {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 7px 0;
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.menu-signout:hover { background: var(--ink); color: var(--on-ink); }

/* ——— Layout ——— */

.layout {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
}

/* ——— Sidebar ——— */

.sidebar {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  border-right: 1px solid var(--line);
  padding: 30px 0 40px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.sidebar-head { padding: 0 26px 14px; }

.rule-accent {
  display: block;
  width: 30px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 14px;
}
.rule-accent.wide { width: 42px; }

.sidebar-head h2 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
}

.sidebar-head p {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
/* Quellenangabe der Familienliste. Stand vorher als "*Source: …" in derselben
   Zeile wie die Anleitung; der Stern gehörte dort zu den Descriptor-Spalten der
   Tabelle und erklärte sich nicht. */
.sidebar-head .sidebar-source {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  opacity: .8;
}

.family-list { list-style: none; }

.family-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 26px;
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.family-item:hover { background: var(--hover); }
.family-item.active {
  color: var(--accent);
  font-weight: 700;
  border-left-color: var(--accent);
}

.family-item svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
}

.family-item .count {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  opacity: .55;
  transition: opacity .12s;
}
.family-item:hover .count,
.family-item.active .count { opacity: 1; }

/* ——— Content ——— */

.content {
  padding: 38px 48px 90px;
  min-width: 0;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 26px;
}

.page-head h1 {
  flex: 0 0 100%;
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .2px;
}

.page-head .rule-accent.wide { margin: 14px 0 0; }

.result-count {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ——— Filter bar ——— */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -10px 0 16px;
}
.filterbar .fb-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.fb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.fb-chip[class*="fam-"] {
  border-color: transparent;
}
.fb-chip[class*="fam-"] .x {
  background: rgba(0, 0, 0, 0.08);
  color: currentColor;
}
:root[data-theme="dark"] .fb-chip[class*="fam-"] .x {
  background: rgba(255, 255, 255, 0.15);
}
.fb-chip:hover { border-color: var(--ink-soft); }
.fb-chip[class*="fam-"]:hover { border-color: transparent; }
.fb-chip .x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  transition: background .15s, color .15s;
}
.fb-chip:hover .x { background: var(--accent); color: var(--on-ink); }
.fb-clear-all {
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fb-clear-all:hover { color: var(--accent); }

/* ——— Pagination ——— */

/* Fussnote unter der Stoffliste: erklärt den Stern an den Descriptor-Spalten
   und die Herkunft der Begriffe. */
.table-note {
  max-width: 82ch;
  margin: 16px 2px 0;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted);
}
.table-note-mark {
  font-weight: 700;
  color: var(--ink-soft);
  margin-right: 3px;
}
.table-note strong { color: var(--ink-soft); font-weight: 600; }
/* Beispiel-Pille im Fliesstext — sieht aus wie die echte, ist aber kein Knopf. */
.pill-static {
  cursor: default;
  vertical-align: 1px;
  padding: 2px 9px;
  font-size: 10px;
}
.pill-static:hover { background: var(--pill); color: var(--pill-text); }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
}
.pager-btn {
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  background: transparent;
  padding: 8px 16px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pager-btn:hover:not([disabled]) { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.pager-btn[disabled] { opacity: .38; cursor: default; }
.pager-info {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .3px;
  color: var(--muted);
  white-space: nowrap;
}

/* ——— Table ——— */

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow-x: auto;        /* breite Tabelle scrollt INNERHALB der Karte,
                              statt über den rechten Rand zu laufen */
}

table.materials {
  width: 100%;
  min-width: 980px;        /* unter dieser Breite wird horizontal gescrollt */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.materials thead th {
  background: var(--thead);
  padding: 13px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--th-text);
  text-align: left;
  white-space: nowrap;
  user-select: none;
  box-shadow: 0 1px 0 var(--line);
}
.materials thead th.sortable { cursor: pointer; }
.materials thead th.sortable:hover { color: var(--ink); }
.materials thead th.sortable::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: 7px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0;
  transition: opacity .12s;
}
.materials thead th.sorted-asc::after  { border-bottom: 5px solid currentColor; opacity: .75; }
.materials thead th.sorted-desc::after { border-top: 5px solid currentColor; opacity: .75; }

.th-star {
  width: 15px; height: 15px;
  fill: none;
  stroke: var(--th-text);
  stroke-width: 1.6;
  stroke-linejoin: round;
  vertical-align: middle;
}

.col-fav    { width: 52px; text-align: center !important; }
.col-name   { width: auto; }
.col-note   { width: 110px; }
.col-int    { width: 126px; }
.col-d1, .col-d2, .col-d3 { width: 130px; }
.col-stock  { width: 100px; text-align: right; padding-right: 14px !important; }
td.cell-stock { text-align: right; padding-right: 14px; }
.stock-badge {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.materials tbody td {
  padding: 15px 14px;
  border-top: 1px solid var(--line-soft);
  vertical-align: middle;
}
.materials tbody tr.mat-row:first-child td { border-top: none; }
.materials tbody tr.mat-row { cursor: pointer; transition: background .12s; scroll-margin-top: 130px; }
.materials tbody tr.mat-row:hover { background: var(--row-hover); }
.materials tbody tr.mat-row.open { background: var(--row-open); }

/* fav */
td.cell-fav { text-align: center; }
.fav-btn {
  display: inline-flex;
  border: none;
  background: none;
  padding: 4px;
  cursor: pointer;
  color: var(--icon-idle);
  transition: color .15s, transform .15s;
}
.fav-btn:hover { color: var(--accent); transform: scale(1.1); }
.fav-btn svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.fav-btn.faved { color: var(--accent); }
.fav-btn.faved svg { fill: currentColor; }

/* name — Mona Sans Condensed */
.mat-name {
  font-family: var(--cond);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--ink);
  line-height: 1.2;
}
.mat-category {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}
.mat-synonyms {
  margin-top: 2px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}
/* Synonyme bleiben in der Trefferliste IMMER einzeilig — auch bei geöffneter
   Zeile. Vollständig stehen sie im Detailbereich unter „Synonyms"; sie oben
   aufzuklappen schob bei Stoffen mit vielen Namen die eigentliche Zeile um
   ein Vielfaches auseinander. */
.mat-name mark, .mat-category mark, .mat-synonyms mark {
  background: var(--mark);
  color: inherit;
  border-radius: 2px;
}

/* pyramid */
.pyr { width: 34px; height: 30px; display: block; }
.pyr polygon { fill: var(--pyr-off); transition: fill .15s; }
.pyr polygon.on { fill: var(--ink); }

/* intensity */
.int { width: 32px; height: 17px; display: block; }
.int rect { fill: var(--pyr-off); }
.int rect.on { fill: var(--ink); }
.int.na rect { fill: var(--bar-na); }

/* pills — clickable: filters the catalog by this descriptor */
.pill {
  display: inline-block;
  white-space: nowrap;
  padding: 5px 13px;
  border: none;
  border-radius: 999px;
  background: var(--pill);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--pill-text);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pill:hover { background: var(--ink); color: var(--on-ink); }
.pill:empty { display: none; }
/* aktiver Filter: Ring in der eigenen Familienfarbe */
.pill.is-active { box-shadow: inset 0 0 0 1.6px currentColor; }

/* Deskriptor AUSSERHALB des IFRA Fragrance Glossary 2020: gepunktete Unterlinie.
   Die Fussnote unter der Tabelle nennt das Glossar als Quelle der Deskriptoren —
   das darf nicht auch für Begriffe gelten, die aus einem Nachschlagewerk oder
   aus einem eigenen Eintrag stammen. Bewusst zurückhaltend: es ist ein
   Herkunftshinweis, keine Warnung. */
.pill-ext {
  text-decoration: underline dotted currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
}

/* Eigener Eintrag eines Nutzers — in Trefferzeile und Detailbereich */
.own-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border: 1px dashed var(--line-strong, var(--line));
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: 2px;
  white-space: nowrap;
}
.own-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--field-bg);
  border: 1px dashed var(--line);
  border-radius: 6px;
}
.own-note strong { color: var(--ink); }

/* Hinweis im Editor für eigene Stoffe (Herkunft der Deskriptoren) */
.cm-hint {
  grid-column: 1 / -1;
  margin: 2px 0 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
.cm-hint strong { color: var(--ink-soft); }

/* ——— Farbkonzept der Descriptor-Pills (26 Olfaktorik-Familien) ———
   Hell: heller Farbton + dunkle Schrift gleicher Tönung.
   Dunkel: gedämpfter Farbton + helle Schrift. Beides kontraststark. */
.fam-acidic        { background: hsl(64,58%,87%);  color: hsl(64,60%,25%); }
.fam-aldehydic     { background: hsl(196,32%,88%); color: hsl(199,40%,28%); }
.fam-amber         { background: hsl(36,78%,86%);  color: hsl(30,70%,28%); }
.fam-animal-like   { background: hsl(8,42%,86%);   color: hsl(8,48%,30%); }
.fam-anisic        { background: hsl(256,42%,90%); color: hsl(256,42%,40%); }
.fam-aromatic      { background: hsl(174,36%,85%); color: hsl(176,46%,25%); }
.fam-balsamic      { background: hsl(16,52%,86%);  color: hsl(14,52%,30%); }
.fam-camphoraceous { background: hsl(186,44%,86%); color: hsl(188,52%,26%); }
.fam-citrus        { background: hsl(50,85%,84%);  color: hsl(44,75%,27%); }
.fam-earthy        { background: hsl(74,28%,84%);  color: hsl(74,32%,27%); }
.fam-floral        { background: hsl(332,62%,90%); color: hsl(332,52%,38%); }
.fam-food-like     { background: hsl(40,48%,86%);  color: hsl(38,42%,30%); }
.fam-fruity        { background: hsl(348,68%,90%); color: hsl(348,58%,38%); }
.fam-gourmand      { background: hsl(24,55%,85%);  color: hsl(22,48%,30%); }
.fam-green         { background: hsl(122,40%,85%); color: hsl(126,42%,26%); }
.fam-herbal        { background: hsl(94,38%,85%);  color: hsl(98,40%,26%); }
.fam-honey         { background: hsl(45,78%,84%);  color: hsl(40,68%,28%); }
.fam-marine        { background: hsl(212,58%,89%); color: hsl(212,55%,36%); }
.fam-minty         { background: hsl(160,46%,85%); color: hsl(164,48%,25%); }
.fam-musk-like     { background: hsl(312,26%,89%); color: hsl(312,28%,38%); }
.fam-ozonic        { background: hsl(200,60%,89%); color: hsl(202,58%,34%); }
.fam-powdery       { background: hsl(286,34%,90%); color: hsl(286,32%,40%); }
.fam-smoky         { background: hsl(222,12%,86%); color: hsl(222,14%,32%); }
.fam-spicy         { background: hsl(8,70%,89%);   color: hsl(6,62%,38%); }
.fam-sulfurous     { background: hsl(60,65%,85%);  color: hsl(60,70%,22%); }
.fam-tobacco-like  { background: hsl(30,40%,84%);  color: hsl(28,40%,30%); }
.fam-woody         { background: hsl(26,42%,84%);  color: hsl(26,40%,29%); }

:root[data-theme="dark"] .fam-acidic        { background: hsl(64,30%,22%);  color: hsl(64,55%,78%); }
:root[data-theme="dark"] .fam-aldehydic     { background: hsl(198,26%,24%); color: hsl(196,42%,80%); }
:root[data-theme="dark"] .fam-amber         { background: hsl(32,42%,24%);  color: hsl(36,72%,76%); }
:root[data-theme="dark"] .fam-animal-like   { background: hsl(8,32%,25%);   color: hsl(8,52%,80%); }
:root[data-theme="dark"] .fam-anisic        { background: hsl(256,32%,28%); color: hsl(256,52%,84%); }
:root[data-theme="dark"] .fam-aromatic      { background: hsl(176,32%,21%); color: hsl(174,46%,76%); }
:root[data-theme="dark"] .fam-balsamic      { background: hsl(14,38%,24%);  color: hsl(16,56%,78%); }
:root[data-theme="dark"] .fam-camphoraceous { background: hsl(188,38%,21%); color: hsl(186,54%,78%); }
:root[data-theme="dark"] .fam-citrus        { background: hsl(46,40%,23%);  color: hsl(50,82%,76%); }
:root[data-theme="dark"] .fam-earthy        { background: hsl(74,24%,22%);  color: hsl(74,38%,76%); }
:root[data-theme="dark"] .fam-floral        { background: hsl(332,32%,27%); color: hsl(332,60%,84%); }
:root[data-theme="dark"] .fam-food-like     { background: hsl(38,30%,23%);  color: hsl(40,48%,78%); }
:root[data-theme="dark"] .fam-fruity        { background: hsl(348,36%,27%); color: hsl(348,66%,84%); }
:root[data-theme="dark"] .fam-gourmand      { background: hsl(22,36%,24%);  color: hsl(24,52%,78%); }
:root[data-theme="dark"] .fam-green         { background: hsl(126,28%,21%); color: hsl(122,44%,78%); }
:root[data-theme="dark"] .fam-herbal        { background: hsl(98,26%,21%);  color: hsl(94,42%,78%); }
:root[data-theme="dark"] .fam-honey         { background: hsl(42,42%,23%);  color: hsl(45,76%,76%); }
:root[data-theme="dark"] .fam-marine        { background: hsl(212,40%,26%); color: hsl(212,62%,82%); }
:root[data-theme="dark"] .fam-minty         { background: hsl(164,34%,20%); color: hsl(160,50%,78%); }
:root[data-theme="dark"] .fam-musk-like     { background: hsl(312,22%,27%); color: hsl(312,34%,82%); }
:root[data-theme="dark"] .fam-ozonic        { background: hsl(202,42%,25%); color: hsl(200,62%,82%); }
:root[data-theme="dark"] .fam-powdery       { background: hsl(286,26%,28%); color: hsl(286,40%,84%); }
:root[data-theme="dark"] .fam-smoky         { background: hsl(222,12%,28%); color: hsl(222,18%,80%); }
:root[data-theme="dark"] .fam-spicy         { background: hsl(6,40%,27%);   color: hsl(8,66%,82%); }
:root[data-theme="dark"] .fam-sulfurous     { background: hsl(60,35%,22%);  color: hsl(60,60%,78%); }
:root[data-theme="dark"] .fam-tobacco-like  { background: hsl(28,32%,23%);  color: hsl(30,46%,78%); }
:root[data-theme="dark"] .fam-woody         { background: hsl(26,34%,23%);  color: hsl(26,46%,78%); }

/* details button */
.detail-btn {
  display: inline-block;
  padding: 7px 17px;
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.detail-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.detail-btn.close { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.detail-btn.close:hover { background: var(--ink-hover); }

/* ——— Detail panel ——— */

tr.detail-row > td {
  padding: 0;
  border-top: none;
  background: var(--bg);
}

.detail-clip {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.detail-clip.expanded { grid-template-rows: 1fr; }
.detail-inner { overflow: hidden; }

.detail-grid {
  display: grid;
  /* 50% Allgemeines · 50% (3 Aufklapp-Sektionen: Technical / Restricted / IFRA) */
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  padding: 30px 38px 36px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* rechte Spalte: aufklappbare Sektionen */
.detail-right { border-left: 1px solid var(--line); padding-left: 48px; }
.detail-acc { border-bottom: 1px solid var(--line-soft); }
.detail-acc:first-child { border-top: 1px solid var(--line-soft); }
.detail-acc > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 2px; font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--ink);
}
.detail-acc > summary::-webkit-details-marker { display: none; }
.detail-acc > summary:hover { color: var(--accent); }
.detail-acc .acc-chev { color: var(--muted); font-size: 12px; transition: transform .18s ease; }
.detail-acc[open] > summary .acc-chev { transform: rotate(90deg); }
.acc-body { padding: 0 2px 20px; }
.tech-table thead th {
  text-align: left; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding: 0 0 6px; border-bottom: 1px solid var(--line);
}
.ifra-derived {
  display: inline-block; font-size: 8.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 3px; padding: 0 3px; margin-left: 5px; vertical-align: middle;
}
.detail-footer { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.detail-footer .detail-disclaimer { font-size: 11px; font-style: italic; color: var(--muted); }
.menu-tier { font-weight: 700; color: var(--ink); }
.admin-level-select {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--field-bg); color: var(--ink); font-size: 12px; cursor: pointer;
}

.detail-left .label,
.detail-left .label-2 {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.detail-left .label-2 { margin-top: 24px; }
/* zweites Label (Notes) folgt direkt auf die Odor-Description */
.detail-left .detail-editables + .label, .detail-left .detail-desc-wrap + .label { margin-top: 26px; }

/* Odor Description — redaktioneller Text, OHNE Kästchen, serifenlos */
.odor-box { padding: 0; }
.odor-box p {
  font-family: var(--sans);
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
}

.notes-box {
  position: relative;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 26px 52px 26px 28px;
}
.notes-box p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
}
/* lange Notizen: scrollen statt abschneiden */
.notes-box .note-text {
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  padding-right: 6px;
}
.notes-box.empty { padding-top: 22px; padding-bottom: 22px; }
.note-placeholder { color: var(--muted) !important; }

.note-flag {
  display: inline-block;
  margin-top: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
}

.detail-desc-wrap { margin-bottom: 26px; }
.detail-editables {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 24px;
  align-items: stretch;
}
.detail-note-col > div,
.detail-stock-col > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.detail-note-col .editing textarea {
  flex: 1;
}
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; gap: 30px; }
  .detail-right { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 30px; }
}
@media (max-width: 600px) {
  .detail-editables { grid-template-columns: 1fr; gap: 16px; }
}

.editable-box {
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.editable-box:hover {
  border-color: var(--ink-soft);
  background: var(--field-bg2);
}

.edit-hint {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--icon-idle);
  transition: color .15s;
}
.editable-box:hover .edit-hint { color: var(--ink); }
.edit-hint svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.note-edit {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--icon-idle);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.note-edit:hover { background: var(--hover); color: var(--ink); }
.note-edit svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notes-box.editing { padding: 18px 18px 16px; }
.notes-box textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  max-height: 320px;
  overflow-y: auto;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--field-bg2);
  padding: 12px 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  outline: none;
}
.notes-box textarea:focus {
  border-color: transparent;
  background-image: linear-gradient(var(--field-bg), var(--field-bg)), conic-gradient(from var(--bg-angle), var(--accent) 0%, var(--ink) 50%, var(--accent) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 4px 15px var(--mark);
  outline: none !important;
  animation: spin-gradient 4s linear infinite;
}

.note-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.detail-btn.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.detail-btn.primary:hover { background: var(--ink-hover); }
.note-reset {
  margin-left: auto;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.note-reset:hover { color: var(--accent); }

/* „Fehler melden“-Link in der Detailansicht */
.report-link {
  display: inline-block;
  margin-top: 22px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .15s;
}
.report-link:hover { color: var(--accent); }

.empty-clear { margin-top: 18px; }

.syn-text {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.ifra-table .k { white-space: normal; }
.tech-table.ifra-table .v { word-break: normal; overflow-wrap: break-word; hyphens: manual; }
.ifra-cat-hint {
  display: block;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: none;
  color: var(--muted);
  margin-top: 2px;
}
.ifra-table .v.nr { color: var(--muted); font-weight: 500; }
.ifra-table .v.proh { color: var(--accent); }
.ifra-none {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}
.ifra-spec {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Verarbeitungsvarianten: der farbige Balken links zeigt auf einen Blick, in
   welche Richtung sich die regulierten Bestandteile gegenüber dem Grundstoff
   verschieben. Angereichert (terpenlos, gefaltet) ist der Fall, in dem zu
   niedrige Zahlen gefährlich wären — deshalb die Akzentfarbe. */
.variant-note {
  margin-bottom: 12px;
  padding: 9px 12px;
  border-left: 3px solid var(--muted);
  border-radius: 0 4px 4px 0;
  background: var(--surface-2, rgba(128, 128, 128, 0.06));
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.variant-note.variant-enriched { border-left-color: var(--accent); }
.variant-note.variant-depleted,
.variant-note.variant-reacted { border-left-color: var(--ink-soft); }
.variant-ref { opacity: 0.85; }

.detail-right h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}

.tech-table { width: 100%; border-collapse: collapse; }
.tech-table td {
  padding: 9px 0 !important;
  border-top: none !important;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  font-size: 12px;
  vertical-align: middle;
}
.tech-table tr:last-child td { border-bottom: none; }
.tech-table .k {
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  padding-right: 18px !important;
  white-space: nowrap;
}
.tech-table .v {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  /* an Wortgrenzen umbrechen; nur echte Endlos-Strings (InChIKey, IUPAC) hart trennen */
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.tech-table .k sup {
  font-size: 8.5px;
  color: var(--muted);
  margin-left: 1px;
}

/* ——— Datentabellen: Bestandteile, Allergene, Referenztabelle ———
   `.tech-table` ist für Label/Wert-Paare gebaut: linke Spalte in Versalien,
   gesperrt, `white-space: nowrap`. Für Stoffnamen ist beides falsch.
   „CITRUS AURANTIUM BERGAMIA FRUIT OIL“ liest sich schlecht und verliert die
   bedeutungstragende Schreibweise (cis-3-Hexenol); und weil die Zelle nicht
   umbrechen darf, drückt sie die Prozentspalte so schmal, dass „28.63 %“ auf
   zwei Zeilen bricht. Hier daher eigene Regeln. */
.restricted-table .k {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  font-weight: 500;
  white-space: normal;
  width: 100%;
  padding-right: 16px !important;
}
/* Prozentspalte: so schmal wie ihr Inhalt, nie umbrechen — „28.63 %“ auf zwei
   Zeilen war der auffälligste Fehler der alten Darstellung. */
.restricted-table .v,
.restricted-table thead th + th {
  text-align: right;
  white-space: nowrap;
  overflow-wrap: normal;
  width: 1%;
  padding-left: 16px !important;
}
/* Statusspalte darf umbrechen. Mit nowrap beanspruchte „IFRA restricted
   (Cat. 4: 0.40 %)“ 171 px und drückte die Stoffnamen auf 142 px. */
.restricted-table .rc-status {
  text-align: right;
  white-space: normal;
  width: 1%;
  min-width: 96px;
  padding-left: 16px !important;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.4px;
  color: var(--muted);
  font-weight: 500;
}
/* Tabellenkopf saß direkt auf der ersten Zeile — etwas Luft darunter. */
.restricted-table thead th { padding-bottom: 8px; }
.restricted-table tbody tr:first-child td { padding-top: 10px !important; }
.restricted-table .fx-muted { font-weight: 400; }
.tech-source {
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: .4px;
  color: var(--muted);
}
.tech-source sup { font-size: 8px; }
/* Schätz-Marker „e": geschätzter Wert aus einem verwandten Isomer */
sup.est-mark {
  font-style: italic; font-weight: 700; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 3px;
  padding: 0 2px; font-size: 8px; margin-left: 2px;
}
.tech-source sup.est-mark { font-size: 8px; }

/* ——— Empty state / toast ——— */

.empty-state { padding: 70px 30px; text-align: center; }
.empty-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.empty-sub { margin-top: 8px; font-size: 13px; color: var(--muted); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  background: var(--ink);
  color: var(--on-ink);
  font-size: 12.5px;
  letter-spacing: .4px;
  padding: 11px 22px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 90;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ——— Views ——— */

.view[hidden] { display: none; }


/* ——— Site footer (legal) ——— */

.site-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 22px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg-header);
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
}
.site-footer a {
  color: var(--muted);
  text-decoration: none;
  letter-spacing: .3px;
  transition: color .15s;
}
.site-footer a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer .sep { opacity: .5; }

/* ——— Dilution calculator ——— */

.calc {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 24px 70px;
}

.calc-head { margin-bottom: 26px; }
.calc-head h1 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .2px;
}
.calc-head .rule-accent.wide { margin: 14px 0 0; }
.calc-sub {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 560px;
}

/* accordion */
.calc-instructions {
  margin-bottom: 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--surface);
  overflow: hidden;
}
.calc-instr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink);
}
.calc-instr-head:hover { background: var(--hover); }
.calc-instr-icon { color: var(--muted); transition: transform .25s, color .25s; }
.calc-instr-head.open .calc-instr-icon { transform: rotate(180deg); color: var(--accent); }
.calc-instr-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.calc-instr-body.open { grid-template-rows: 1fr; }
.calc-instr-clip { overflow: hidden; }
.calc-instr-inner { padding: 0 20px 18px; }
.calc-instr-inner p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.calc-instr-inner strong { color: var(--ink); }
.calc-example {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* card */
.calc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 32px;
}

.calc-counter {
  margin-bottom: 22px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}
.calc-counter.ready {
  border-color: var(--ink-soft);
  background: var(--field-bg2);
  color: var(--ink);
}
.calc-counter strong { color: var(--accent); font-size: 16px; }
.calc-counter-need { color: var(--muted); }

.calc-field { margin-bottom: 18px; }
.calc-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .2px;
}

.calc-input { position: relative; display: flex; align-items: center; }
.calc-input input {
  flex: 1;
  width: 100%;
  padding: 13px 88px 13px 14px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none;
  appearance: none;
}
.calc-input input::-webkit-inner-spin-button,
.calc-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc-input input[type="number"] { -moz-appearance: textfield; }
.calc-input input::placeholder { color: var(--muted); }
.calc-input input:focus {
  border-color: transparent;
  background-image: linear-gradient(var(--field-bg), var(--field-bg)), conic-gradient(from var(--bg-angle), var(--accent) 0%, var(--ink) 50%, var(--accent) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 4px 15px var(--mark);
  outline: none !important;
  animation: spin-gradient 4s linear infinite;
}
.calc-input input.filled { border-color: var(--ink-soft); background: var(--field-bg2); }
.calc-input input.calculated { border-color: var(--accent); background: var(--field-bg2); font-weight: 700; }

.calc-unit {
  position: absolute;
  right: 46px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}
.calc-clear {
  position: absolute;
  right: 10px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.calc-clear:hover { background: var(--accent); color: var(--on-ink); }

.calc-units { display: flex; gap: 8px; margin-top: 8px; }
.calc-unit-btn {
  padding: 6px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.calc-unit-btn:hover { border-color: var(--ink-soft); }
.calc-unit-btn.active { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

.calc-error {
  display: none;
  margin-top: 16px;
  padding: 13px 15px;
  background: var(--mark);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
}
.calc-error.show { display: block; }

.calc-actions { display: flex; gap: 12px; margin-top: 26px; }
.calc-btn {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.calc-btn-primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.calc-btn-primary:hover:not(:disabled) { background: var(--ink-hover); }
.calc-btn-primary:disabled {
  background: var(--chip-bg);
  color: var(--muted);
  border-color: var(--chip-bg);
  cursor: not-allowed;
}
.calc-btn-ghost { background: transparent; color: var(--ink); border-color: var(--btn-border); }
.calc-btn-ghost:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* ——— Accessibility ——— */

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.searchbox input:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ——— Responsive ——— */

@media (max-width: 1180px) {
  /* Odor Impact stays visible */
  .searchbox { width: 200px; }
  .searchbox:focus-within { width: 264px; }
}
@media (max-width: 1020px) {
  /* Note Tier stays visible */
  .content { padding: 30px 26px 70px; }
  .mainnav { gap: 22px; }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 14px 0 6px;
  }
  .sidebar-head {
    padding: 0 16px 6px;
  }
  .sidebar-head .rule-accent {
    margin-bottom: 8px;
  }
  .sidebar-head p {
    margin-top: 4px;
    font-size: 11.5px;
  }

  .family-list {
    display: flex;
    overflow-x: auto;
    padding: 0 16px 10px;
    gap: 4px;
  }
  .family-item {
    flex: 0 0 auto;
    border-left: none;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
  }
  .family-item.active { background: rgba(210,41,75,.09); }
  .family-item .count { display: none; }
  /* topbar wraps: row 1 = brand + nav tabs, row 2 = search + actions */
  .topbar {
    flex-wrap: wrap;
    height: auto;
    gap: 8px;
    padding: 8px 12px 6px;
    row-gap: 0;
  }
  .brand {
    order: 1;
    font-size: 15.5px;
    margin-right: auto;
  }
  .mainnav {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin: 0;
    border-top: none;
  }
  .nav-link {
    padding: 8px 0;
    font-size: 13px;
  }
  .nav-link.active::after {
    bottom: 0;
  }
  .topbar-actions {
    order: 3;
    flex: 1 0 100%;
    min-width: 0;
    gap: 6px;
    margin-top: 4px;
    display: flex;
    align-items: center;
  }
  .searchbox {
    flex: 1 1 auto;
    width: auto;
    min-width: 120px;
    height: 36px;
    padding-left: 12px;
  }
  .searchbox:focus-within { width: auto; }
  /* iOS zoomt bei <16px hinein; explizite Farbe, damit der Text sichtbar ist */
  .searchbox input { font-size: 16px; color: var(--ink); -webkit-text-fill-color: var(--ink); }
  .search-kbd { display: none; }
  .iconbtn {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
  }
  .iconbtn svg {
    width: 17px;
    height: 17px;
  }
  /* content space compression */
  .content { padding: 18px 14px 60px; }
  .page-head { margin-bottom: 14px; }
  .page-head .rule-accent.wide { margin-bottom: 8px; }
  .page-head h1 { font-size: 24px; }
  .result-count { font-size: 11px; }

  /* detail-grid moves to single column below 860px to use full width */
  .detail-grid { grid-template-columns: 1fr; gap: 28px 0; padding: 24px 20px 30px; }
  .detail-right { border-left: none; padding-left: 0; }
  .detail-editables { grid-template-columns: 1fr; gap: 16px; }
  /* make expanded detail card fit to viewport and not scroll horizontally */
  .detail-inner {
    position: sticky;
    left: 0;
    width: 100%;
    max-width: calc(100vw - 30px); /* viewport width minus content paddings and table-wrap borders */
    box-sizing: border-box;
  }
  /* Alle Spalten bleiben sichtbar; .table-wrap scrollt horizontal bei Bedarf */
  table.materials { min-width: 720px; }
  .col-fav, td.cell-fav { width: 30px; }
  .col-name { width: auto; }
  .col-note { width: 80px; }
  .col-int { width: 90px; }
  .col-d1, .col-d2, .col-d3 { width: 105px; }
  .col-stock { width: 70px; }
  .materials tbody td { padding: 13px 7px; }
  .materials thead th { padding: 12px 7px; font-size: 10.5px; letter-spacing: 0; }
  .pill { font-size: 10.5px; padding: 4px 9px; letter-spacing: .2px; }
  .calc { padding: 26px 16px 50px; }
  .calc-head h1 { font-size: 27px; }
  .calc-card { padding: 22px 16px; }
  .calc-input input { font-size: 16px; } /* prevents iOS zoom */
  .calc-actions { flex-direction: column; }
}

/* ——— Auth-Seiten (Login, Registrierung, Reset, Setup) ——— */

.auth-body { min-height: 100vh; display: flex; flex-direction: column; }
.auth-topbar { justify-content: center; }

.auth-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 20px 32px;
}

.auth-card {
  width: 100%;
  max-width: 460px;
}

.setup-card { max-width: 560px; }

.auth-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
}

.auth-sub {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 22px;
}

.auth-hint { font-weight: 400; color: var(--muted); }

.auth-notice {
  margin-bottom: 16px;
  padding: 13px 15px;
  border-left: 3px solid var(--ink-soft);
  border-radius: 4px;
  background: var(--bg);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
}
.auth-notice a { color: var(--accent); }

.auth-card .calc-error { margin: 0 0 16px; }
.auth-card .calc-input input { padding: 13px 14px; }

.auth-langs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px 10px;
  margin-bottom: 10px;
}

.auth-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-soft);
  cursor: pointer;
  padding: 4px 2px;
}
.auth-lang input { accent-color: var(--accent); width: 15px; height: 15px; }

.auth-other input { padding: 11px 14px; font-size: 13.5px; }

.auth-privacy {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft);
  cursor: pointer;
}
.auth-privacy input { margin-top: 2px; accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.auth-privacy a { color: var(--accent); }

.auth-links {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}
.auth-links a { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-links a:hover { text-decoration: underline; }
.auth-links .sep { margin: 0 8px; opacity: .5; }

.auth-footer { margin-top: 28px; }

.auth-btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Setup-Checkliste */
.setup-list { list-style: none; margin: 0 0 20px; }
.setup-list li {
  padding: 8px 0 8px 26px;
  position: relative;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-soft);
  border-bottom: 1px solid var(--line-soft);
}
.setup-list li::before {
  position: absolute;
  left: 2px;
  font-weight: 700;
}
.setup-ok::before   { content: "✓"; color: #2e7d4f; }
.setup-fail::before { content: "✕"; color: var(--accent); }
.setup-h2 {
  font-family: var(--serif);
  font-size: 18px;
  margin: 6px 0 14px;
}

/* Lade-Hinweis (Datenabruf) */
.data-loading {
  padding: 48px 20px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}

/* Account-Menü: Server-Edition */
.menu-admin {
  display: block;
  margin: 10px 0 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  transition: background .15s, color .15s, border-color .15s;
}
.menu-admin:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.account-menu form { margin-top: 10px; }
.account-menu .menu-signout { width: 100%; }

/* Admin-Bereich */
.admin-wrap { max-width: 1280px; margin: 0 auto; padding: 34px 36px 60px; }
.admin-wrap .page-head { margin-bottom: 22px; }
.admin-export { color: var(--accent); font-weight: 600; }
.admin-table th, .admin-table td { font-size: 13px; padding: 10px 12px; }
.admin-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.admin-del:hover { background: var(--accent); border-color: var(--accent); }
.admin-del-form { display: inline; }
.admin-logout-form { display: inline; }

@media (max-width: 760px) {
  .admin-wrap { padding: 24px 16px 48px; }
  .auth-wrap { padding: 28px 14px 24px; }
  .auth-card { padding: 22px; }
}

/* ——— Gate-/Report-Modal ——— */

.gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--shadow);
  backdrop-filter: blur(2px);
}

.gate-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 30px 28px 26px;
  box-shadow: 0 18px 50px var(--shadow);
}

.gate-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.gate-close:hover { background: var(--hover); color: var(--ink); }
.gate-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.gate-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  padding-right: 28px;
}

.gate-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.gate-text strong { color: var(--ink); }

.gate-actions { margin-top: 4px; }
.gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
}

.report-text {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.report-text:focus {
  border-color: transparent;
  background-image: linear-gradient(var(--field-bg), var(--field-bg)), conic-gradient(from var(--bg-angle), var(--accent) 0%, var(--ink) 50%, var(--accent) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 4px 15px var(--mark);
  outline: none !important;
  animation: spin-gradient 4s linear infinite;
}
.report-text::placeholder { color: var(--muted); }

/* Admin: Fehlermeldungen */
.admin-reports-head { margin-top: 44px; }
.admin-report-msg { max-width: 420px; line-height: 1.5; }
.admin-mail { color: var(--muted); font-size: 11.5px; }
.admin-empty { color: var(--ink-soft); font-size: 13.5px; padding: 8px 2px 40px; }

/* ——— Static text pages (Legal Notice / Privacy Policy) ——— */
.static-card {
  width: 100%;
  max-width: 720px;
}
.static-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 24px;
}
.static-content h2 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 28px 0 10px;
}
.static-content h2:first-of-type {
  margin-top: 0;
}
.static-content h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 20px 0 8px;
}
.static-content p {
  margin: 0 0 16px;
}
.static-content p:last-child {
  margin-bottom: 0;
}
.static-content ul, .static-content ol {
  margin: 0 0 16px;
  padding-left: 20px;
}
.static-content li {
  margin-bottom: 6px;
}
.static-content a {
  color: var(--accent);
  text-decoration: none;
}
.static-content a:hover {
  text-decoration: underline;
}

/* ——— Sidebar Spendenbutton ——— */
.sidebar-donate {
  margin-top: 40px;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
@media (max-width: 860px) {
  .sidebar-donate {
    display: none;
  }
}

/* ——— Admin: Duftstoff-Verwaltung ——— */
/* Hinweis bei aktivem Schreibschutz (INGREDIENTS_WRITE_LOCKED). Bewusst ruhig
   gehalten — es ist kein Fehler, sondern der gewollte Zustand. */
.ing-locked-note {
  margin: 0 0 18px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.ing-locked-note strong { color: var(--ink); }
.ing-locked-note .ing-locked-how {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.ing-locked-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  padding: 1px 4px;
  background: var(--mark);
  border-radius: 3px;
  white-space: nowrap;
}

.ing-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 18px;
}
.ing-search {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ing-search:focus {
  border-color: transparent;
  background-image: linear-gradient(var(--field-bg), var(--field-bg)), conic-gradient(from var(--bg-angle), var(--accent) 0%, var(--ink) 50%, var(--accent) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 4px 15px var(--mark);
  outline: none !important;
  animation: spin-gradient 4s linear infinite;
}
.ing-search::placeholder { color: var(--muted); }

.admin-table td.ing-actions { white-space: nowrap; }
.ing-actions .detail-btn { margin-right: 6px; }

/* Editor-Modal */
.gate-modal.ing-modal { max-width: 660px; }
.ing-idline {
  font-size: 12px;
  color: var(--muted);
  margin: -2px 0 16px;
}
.ing-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 18px;
  margin-bottom: 4px;
}
.ing-field { margin-bottom: 14px; }
.ing-field.full { grid-column: 1 / -1; }
.ing-field .calc-input input,
.ing-field textarea.report-text { width: 100%; box-sizing: border-box; }
.ing-check label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.ing-check input { margin-top: 2px; }

.ing-danger { background: var(--accent); border-color: var(--accent); color: #fff; }
.ing-danger:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); filter: brightness(.92); }

@media (max-width: 620px) {
  .ing-toolbar { flex-direction: column; align-items: stretch; }
  .ing-form-grid { grid-template-columns: 1fr; }
}

/* ——— Admin: Plus-Stufe ——— */
.plus-badge { background: var(--accent); color: #fff; }
.admin-plus-form { display: inline; margin-right: 6px; }

/* ——— Lagerbestand (Plus-Feature, Detail-Panel) ——— */
.inventory-box {
  position: relative;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 22px 52px 22px 28px;
}
.inventory-box p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
}
.inventory-box.empty { padding-top: 18px; padding-bottom: 18px; }
.inventory-box.editing { padding: 18px 18px 16px; }
.inventory-inputs {
  display: flex;
  gap: 10px;
  align-items: center;
}
.inventory-inputs input {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.inventory-inputs select {
  padding: 11px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.inventory-inputs input:focus,
.inventory-inputs select:focus {
  border-color: transparent;
  background-image: linear-gradient(var(--field-bg), var(--field-bg)), conic-gradient(from var(--bg-angle), var(--accent) 0%, var(--ink) 50%, var(--accent) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 4px 15px var(--mark);
  outline: none !important;
  animation: spin-gradient 4s linear infinite;
}

/* Hide number input arrows */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* ——— Formulas (Plus-/Admin-Funktion) ——— */

/* Übersicht: identisches Grid wie der Ingredients-Bereich (.layout) */
.formulas-wrap {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
}
/* Sidebar erbt .sidebar (sticky, Abstände, Border); Formeln-Zähler unterdrücken das
   count-Ausblenden nicht — sie sollen sichtbar bleiben wie in Ingredients. */

.fx-main { padding: 38px 48px 90px; min-width: 0; }
.fx-toolbar { display: flex; gap: 10px; margin: 0 0 20px; flex-wrap: wrap; }
.fx-intro h1 { font-family: var(--serif); font-size: 30px; margin-bottom: 10px; }
.fx-intro p { max-width: 560px; font-size: 14px; line-height: 1.65; color: var(--ink-soft); margin-top: 16px; }

.fx-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.fx-name {
  flex: 1; min-width: 220px; font-family: var(--serif); font-size: 24px; font-weight: 700;
  color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--line);
  padding: 6px 2px;
}
.fx-name:focus { outline: none; border-bottom-color: var(--accent); }
.fx-accord-toggle { font-size: 12.5px; color: var(--ink-soft); display: flex; gap: 6px; align-items: center; }
.fx-actions { display: flex; gap: 8px; }

.fx-params { display: flex; gap: 26px; margin-bottom: 22px; flex-wrap: wrap; }
.fx-param label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.fx-param .calc-input { max-width: 170px; }
.fx-param select {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--field-bg); color: var(--ink); font-size: 13px; max-width: 320px;
}

.fx-grid { display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: start; }
.fx-tablewrap { min-width: 0; overflow-x: auto; }
table.materials.fx-table { min-width: 0; }   /* 980px-Minimum der Hauptliste gilt hier nicht */
.fx-table th { white-space: nowrap; padding: 10px 7px; font-size: 10px; }
.fx-table td { vertical-align: middle; padding: 8px 7px; font-size: 12.5px; }
.fx-table .fx-num { text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-matname { font-weight: 600; }
.fx-subname { padding-left: 34px !important; font-weight: 400; }
.fx-subrow td { background: var(--field-bg); font-size: 12px; }
.fx-missing { color: var(--accent); font-style: italic; }
.fx-muted { color: var(--muted); }
.fx-in {
  width: 62px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--field-bg); color: var(--ink); font-size: 12.5px; text-align: left;
}
.fx-in:focus { outline: none; border-color: var(--accent); }
.fx-del {
  border: none; background: none; color: var(--muted); font-size: 16px;
  cursor: pointer; padding: 4px 8px; line-height: 1;
}
.fx-del:hover { color: var(--accent); }

.fx-expand { border: none; background: none; cursor: pointer; color: var(--ink); font-size: inherit; font-weight: 600; padding: 0; text-align: left; }
.fx-chev { display: inline-block; transition: transform .18s ease; color: var(--muted); }
.fx-chev.open { transform: rotate(90deg); }
.fx-accord-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 9.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted);
}
.fx-tier { font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; }
.fx-tier-top { color: #7a8f4d; }
.fx-tier-heart { color: #b5764a; }
.fx-tier-base { color: #7d5f8a; }
.fx-imp { text-align: center; font-variant-numeric: tabular-nums; }

.fx-addwrap { position: relative; margin-top: 14px; max-width: 420px; }
.fx-addwrap input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--field-bg); color: var(--ink); font-size: 13px;
}
.fx-addwrap input:focus { outline: none; border-color: var(--accent); }
.fx-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--line); border-top: none;
  max-height: 300px; overflow-y: auto; box-shadow: 0 8px 22px var(--shadow);
}
/* nach oben aufgeklappt, wenn unter dem Suchfeld kein Platz mehr ist */
.fx-suggest.fx-suggest-up {
  top: auto; bottom: 100%;
  border-top: 1px solid var(--line); border-bottom: none;
  box-shadow: 0 -8px 22px var(--shadow);
}

/* Verdünnungs-Menü in der Spalte „Conc. %“ */
.fx-concwrap { position: relative; display: inline-flex; align-items: center; }
.fx-concwrap .fx-in-conc { padding-right: 20px; }
.fx-conc-btn {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; padding: 0 2px;
  font-size: 10px; line-height: 1; color: var(--muted);
}
.fx-conc-btn:hover, .fx-conc-btn.open { color: var(--accent); }
/* position:fixed, weil .fx-tablewrap mit overflow-x:auto ein absolut
   positioniertes Menü abschneiden würde (gleiche Falle wie beim Suchfeld).
   Die Koordinaten setzt placeConcMenu() in formulas.js. */
.fx-conc-menu {
  position: fixed; z-index: 31; min-width: 92px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 8px 22px var(--shadow);
}
.fx-conc-opt {
  display: block; width: 100%; text-align: left; padding: 7px 12px;
  border: none; background: none; cursor: pointer;
  font-size: 12px; color: var(--ink); white-space: nowrap;
}
.fx-conc-opt:hover, .fx-conc-opt:focus { background: var(--hover); outline: none; }
.fx-conc-opt.active { font-weight: 700; color: var(--accent); }
.fx-sug {
  display: block; width: 100%; text-align: left; padding: 9px 14px; border: none;
  background: none; cursor: pointer; font-size: 13px; color: var(--ink);
}
.fx-sug:hover, .fx-sug:focus { background: var(--hover); outline: none; }

.fx-viol-row td { background: var(--petrol-tint) !important; }
.fx-viol-row .fx-matname { color: var(--petrol); }
.fx-empty-hint td {
  padding: 26px 12px !important; text-align: center;
  color: var(--muted); font-size: 13px; font-style: italic;
}

.fx-summary { border-left: 1px solid var(--line); padding-left: 30px; }
.fx-summary h3 { font-family: var(--serif); font-size: 17px; font-weight: 700; margin: 22px 0 10px; }
.fx-summary h3:first-child { margin-top: 0; }
.fx-verdict { font-weight: 700; font-size: 13.5px; }
.fx-verdict.ok { color: #4d7a55; }
.fx-verdict.bad { color: var(--accent); }
.fx-viol { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; }
.fx-viol li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); line-height: 1.5; }
.fx-maxnote { margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
.fx-pyr-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.fx-pyr-label { width: 42px; font-size: 11px; color: var(--muted); }
.fx-pyr-bar { flex: 1; height: 7px; background: var(--field-bg); border-radius: 4px; overflow: hidden; }
.fx-pyr-bar span { display: block; height: 100%; background: var(--petrol); border-radius: 4px; }
.fx-pyr-val { width: 40px; text-align: right; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .fx-grid { grid-template-columns: 1fr; }
  .fx-summary { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 26px; }
}
@media (max-width: 860px) {
  .formulas-wrap { grid-template-columns: 1fr; }
  .fx-side { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ——— Eigene Stoffe (Professional) — Editor-Formular im Modal ——— */
.gate-modal { max-height: 88vh; overflow-y: auto; }
.cm-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  text-align: left;
  margin: 6px 0 4px;
}
.cm-group-title {
  grid-column: 1 / -1;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted); margin-top: 12px; padding-bottom: 4px; border-bottom: 1px solid var(--line-soft);
}
.cm-field { display: flex; flex-direction: column; gap: 4px; }
.cm-field span { font-size: 11px; color: var(--ink-soft); }
.cm-field input, .cm-field textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--field-bg); color: var(--ink); font-size: 13px; font-family: var(--sans); width: 100%;
}
.cm-field input:focus, .cm-field textarea:focus { outline: none; border-color: var(--accent); }
.cm-field textarea { resize: vertical; }
.cm-action { margin-left: 4px; }
@media (max-width: 620px) { .cm-form { grid-template-columns: 1fr; } }

/* ——— Formulas Usability: Autosave-Status, reiche Kontextsuche, Material-Links ——— */
.fx-status {
  font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); margin-right: 10px; white-space: nowrap;
}
.fx-status.ok  { color: #4d7a55; }
.fx-status.err { color: var(--accent); }

.fx-sug { display: block; width: 100%; text-align: left; padding: 8px 14px; border: none; background: none; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.fx-sug:last-child { border-bottom: none; }
.fx-sug.active, .fx-sug:hover, .fx-sug:focus { background: var(--hover); outline: none; }
.fx-sug-main { display: block; font-size: 13px; color: var(--ink); }
.fx-sug-main strong { font-weight: 600; }
.fx-sug-imp {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px;
  background: var(--pill); color: var(--pill-text); font-size: 10px; font-weight: 700;
}
.fx-sug-meta { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); }
.fx-sug-none { padding: 12px 14px; font-size: 12.5px; color: var(--muted); font-style: italic; }
.fx-suggest { max-height: 380px; }

.fx-matlink {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; font-weight: 600; text-align: left;
  border-bottom: 1px dotted transparent;
}
.fx-matlink:hover { color: var(--petrol); border-bottom-color: var(--petrol); }

.fx-modal-input {
  width: 100%; margin: 6px 0 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--field-bg); color: var(--ink);
  font-family: var(--serif); font-size: 17px;
}
.fx-modal-input:focus { outline: none; border-color: var(--accent); }

/* ——— Formulas v3: Übersicht (wie Ingredients) + Editor-Seite ——— */

/* Editor als eigene Seite, volle Breite */
.fx-editor-page { max-width: 1500px; margin: 0 auto; padding: 26px 38px 60px; }
.fx-editor-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.fx-back {
  border: none; background: none; cursor: pointer; padding: 6px 0;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted);
}
.fx-back:hover { color: var(--accent); }
.fx-head { margin-bottom: 2px; }
.fx-subline {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0 22px; font-size: 11px; color: var(--muted);
}
.fx-type-tag {
  font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-soft);
}
.fx-subsep { color: var(--line); }
.fx-folder-in {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--field-bg); color: var(--ink); font-size: 13px; max-width: 200px; width: 100%;
}
.fx-folder-in:focus { outline: none; border-color: var(--accent); }
#fx-type { min-width: 120px; }

/* Editor-Tabelle: Material breit, Tier/Impact kompakt, alles linksbündig */
.fx-table th, .fx-table td { text-align: left; }
.fx-table th:nth-child(1) { width: 30%; }
.fx-table th:nth-child(2), .fx-table td:nth-child(2) { width: 64px; padding-right: 2px; }
.fx-table th:nth-child(3), .fx-table td:nth-child(3) { width: 56px; }
.fx-imp { text-align: left; }

/* Formel-Übersicht */
.fx-list-search { margin: 0 0 16px; max-width: 420px; }
.fx-list-search input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--field-bg); color: var(--ink); font-size: 13.5px;
}
.fx-list-search input:focus { outline: none; border-color: var(--accent); }
.fx-list-table { min-width: 0; }
.fx-list-row { cursor: pointer; transition: background .12s; }
.fx-list-row:hover td { background: var(--row-hover); }
.fx-list-row .fx-matname { font-weight: 600; }
.fx-list-table th:nth-child(1) { width: 34%; }
.fx-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle;
}
.fx-dot.ok  { background: #4d7a55; }
.fx-dot.bad { background: var(--accent); }
/* Editor-Modus: volle Breite statt Ordner-Grid */
.formulas-wrap.editor-mode { display: block; }
.fx-editcol { min-width: 0; }

/* ————————————————————————————————————————————————
   Beta-Kennzeichnung am Markennamen
   ———————————————————————————————————————————————— */
.brand-beta {
  font-family: var(--cond);
  font-style: normal;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: 4px;
}

/* ————————————————————————————————————————————————
   Statisch ausgelieferte Seiten (material.php, materials.php)
   Eigene Seiten ohne App-Logik: sie müssen ohne JavaScript lesbar sein, weil
   Suchmaschinen und aus der Suche kommende Leser genau das sehen.
   ———————————————————————————————————————————————— */
.seo-page { background: var(--bg); }

.seo-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 38px 28px 90px;
}

.seo-crumbs {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.seo-crumbs a { color: var(--ink-soft); text-decoration: none; }
.seo-crumbs a:hover { color: var(--accent); }
.seo-crumbs span[aria-hidden] { margin: 0 7px; opacity: .6; }

.seo-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; }
.seo-chip {
  background: var(--chip-bg);
  color: var(--pill-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}

.seo-lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 68ch;
  margin: 0 0 22px;
}

.seo-actions { margin: 0 0 34px; }

.seo-section { margin: 0 0 38px; }
.seo-section h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.seo-section h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 26px 0 10px;
}
.seo-section p { font-size: 14px; line-height: 1.7; color: var(--text-soft); max-width: 68ch; }
.seo-section table { margin-top: 6px; }

.seo-synonyms {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-soft);
  word-break: break-word;
}

.seo-disclaimer {
  font-size: 12px;
  font-style: italic;
  line-height: 1.7;
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding-left: 14px;
  max-width: 68ch;
  margin: 0 0 38px;
}

/* Listen: Stoffe, Familien, verwandte Stoffe */
.seo-list, .seo-related, .seo-families {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  columns: 2;
  column-gap: 40px;
}
.seo-list li, .seo-related li, .seo-families li {
  break-inside: avoid;
  padding: 5px 0;
  font-size: 13.5px;
  line-height: 1.45;
}
.seo-list a, .seo-related a, .seo-families a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.seo-list a:hover, .seo-related a:hover, .seo-families a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.seo-related-note {
  display: block;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .3px;
}

/* Alphabet-Leiste */
.seo-letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 34px; }
.seo-letter {
  min-width: 30px;
  text-align: center;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.seo-letter:hover { border-color: var(--ink); color: var(--ink); }
.seo-letter.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* ——— Beschreibungstext unter der Trefferliste der App ——— */
.home-about {
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  max-width: 72ch;
}
.home-about h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
}
.home-about h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 24px 0 8px;
}
.home-about p { font-size: 13.5px; line-height: 1.75; color: var(--text-soft); margin: 0 0 10px; }
.home-about a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.home-about a:hover { color: var(--accent); }

@media (max-width: 760px) {
  .seo-wrap { padding: 24px 16px 70px; }
  .seo-list, .seo-related, .seo-families { columns: 1; }
  .seo-lead { font-size: 15px; }
}