/* ShaveIndex – öffentliche Seiten (ab v4.06). Gestaltung nach dem GUI-Prototyp v12, Farbwerte aus docs/frontend.md 03.
   Hell und dunkel über Tokens: ohne Wahl folgt die Seite dem System, eine Wahl steht als data-theme am <html>. */

@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/assets/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/assets/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Caslon Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/libre-caslon-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Caslon Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/libre-caslon-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --umgebung: #d8d8d8; --flaeche: #fdfdfd; --text: #222931; --text2: #59616b; --linie: #dce0e4;
  --filter: #f3f3f3; --hervor: #f1f2f3; --care: #076b65; --gear: #315cac; --auswahl: #e4b65f; --auswahl-text: #302411; --listen-linie: color-mix(in srgb, var(--gear) 55%, transparent);
  --care-flaeche: #e7f2f0; --care-dunkel: #075b56; --gear-flaeche: #edf2fc; --gear-dunkel: #234c95;
  --kopf: #222931; --kopf-text: #fdfdfd; --kopf-akzent: #e4b65f; --kopf-aktiv: #e5c894;
  --gold: #c2a269; --gold-text: #896a2e; --punkt: #b87a10; --fuss: #eceeef;
  --fokus: #896a2e; --schatten: 0 3px 15px #2229310a;
  --warnung: #8a5a00; --fehler: #a4262c; --erfolg: #1d6b3a;
  --t-soap: #8a5a12; --t-cream: #a03a6b; --t-preshave: #5c6a14; --t-splash: #0b6788; --t-balm: #2c7638; --t-fragrance: #6b46a8;
  --t-razor: #315cac; --t-brush: #8a4b2a; --t-blade: #4b5563; --t-acc: #6b5b2e; --t-set: #7a2e4a; --t-other: #59616b;
  --schrift: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --zier: 'Libre Caslon Display', Georgia, serif;
  --breite: 1600px; --rand: 48px; --verzeichnis: 1120px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --umgebung: #0d131d; --flaeche: #151e2b; --text: #edf2fa; --text2: #a9b7ca; --linie: #303e52;
  --filter: #172232; --hervor: #1e2a3b; --care: #6edbce; --gear: #9bb9ff; --auswahl: #304d75; --auswahl-text: #eff5ff; --care-flaeche: #1c3938; --listen-linie: color-mix(in srgb, var(--care) 55%, transparent); --care-dunkel: #9ef2e7; --gear-flaeche: #24375a; --gear-dunkel: #d0dfff;
  --kopf: #101722; --kopf-text: #edf2fa; --kopf-akzent: #e4b65f; --kopf-aktiv: #ecd29f;
  --gold: #d6b36f; --gold-text: #e2c27f; --punkt: #e4b65f; --fuss: #101722;
  --fokus: #b5aaff; --schatten: 0 8px 28px #00000025;
  --warnung: #f2c14e; --fehler: #ff8a8a; --erfolg: #7ddc9b; --t-soap: #f0c070; --t-cream: #f3a3c8; --t-preshave: #c9d77a; --t-splash: #7fd0ee; --t-balm: #8fdc9c; --t-fragrance: #c8b0f5; --t-razor: #9bb9ff; --t-brush: #e6aa86; --t-blade: #c3cad3; --t-acc: #d9c58e; --t-set: #ec9cba; --t-other: #a9b7ca;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --umgebung: #0d131d; --flaeche: #151e2b; --text: #edf2fa; --text2: #a9b7ca; --linie: #303e52;
    --filter: #172232; --hervor: #1e2a3b; --care: #6edbce; --gear: #9bb9ff; --auswahl: #304d75; --auswahl-text: #eff5ff; --care-flaeche: #1c3938; --listen-linie: color-mix(in srgb, var(--care) 55%, transparent); --care-dunkel: #9ef2e7; --gear-flaeche: #24375a; --gear-dunkel: #d0dfff;
    --kopf: #101722; --kopf-text: #edf2fa; --kopf-akzent: #e4b65f; --kopf-aktiv: #ecd29f;
    --gold: #d6b36f; --gold-text: #e2c27f; --punkt: #e4b65f; --fuss: #101722;
    --fokus: #b5aaff; --schatten: 0 8px 28px #00000025;
    --warnung: #f2c14e; --fehler: #ff8a8a; --erfolg: #7ddc9b; --t-soap: #f0c070; --t-cream: #f3a3c8; --t-preshave: #c9d77a; --t-splash: #7fd0ee; --t-balm: #8fdc9c; --t-fragrance: #c8b0f5; --t-razor: #9bb9ff; --t-brush: #e6aa86; --t-blade: #c3cad3; --t-acc: #d9c58e; --t-set: #ec9cba; --t-other: #a9b7ca;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--umgebung); color: var(--text); font: 1rem/1.6 var(--schrift); }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--care); }
button, input, select { font: inherit; color: inherit; }
input, select { font-size: 16px; }
button { cursor: pointer; min-height: 44px; padding: 9px 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 5px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.primary, .button.primary { display: inline-block; background: var(--text); border: 1px solid var(--text); color: var(--flaeche); border-radius: 5px; padding: 10px 20px; }
.primary:hover { filter: brightness(1.08); color: var(--flaeche); }
.textlink { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; font-size: .875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--flaeche); padding: 8px 14px; }
.skip-link:focus { left: 8px; top: 8px; }
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
main.wrap { background: var(--flaeche); display: flow-root; min-height: 70vh; padding-bottom: 32px; }

.previewbar { background: var(--hervor); color: var(--text2); border-bottom: 1px solid var(--linie); text-align: center; font-size: .8125rem; padding: 5px 12px; }
.previewbar a { text-decoration: underline; text-underline-offset: 3px; }

/* Kopf: dunkler Balken, Wortmarke SHAVE + farblich abgesetztes INDEX ohne Kasten (frontend.md 03). */
.masthead { background: var(--kopf); color: var(--kopf-text); border-bottom: 1px solid var(--linie); }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding-top: 18px; padding-bottom: 0; }
/* Wort-Bild-Marke (ab v5.81): Logo, Schriftzug SHAVE + INDEX, darunter der Satz – wie das Vorschaubild für geteilte Links. Die Kachel trägt einen
   feinen Rand, sonst verschwindet sie im gleichfarbigen Kopf; der Satz fällt unter 900 px weg. */
.logo { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; color: var(--kopf-text); }
.logo:hover { color: var(--kopf-text); }
.logo-zeichen { width: 48px; height: 48px; flex: none; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.logo-text { display: flex; flex-direction: column; gap: 5px; }
.logo-wort { font: 900 30px/1 var(--schrift); letter-spacing: -1.6px; }
.logo-wort > span { color: var(--kopf-akzent); }
.logo-claim { font: 400 12.5px/1.2 var(--schrift); letter-spacing: .2px; color: rgba(237, 242, 250, .66); }
.top-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.lang-link { font-size: .8125rem; font-weight: 600; letter-spacing: 1px; padding: 10px 8px; border-radius: 4px; color: var(--kopf-text); }
.lang-link:hover { color: var(--kopf-aktiv); }
.theme-button { font-size: 22px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--kopf-text); }
.nav { order: 3; width: 100%; display: flex; flex-wrap: wrap; gap: 4px 26px; padding: 10px 0 0; }
.nav > a { padding: 8px 0 10px; border-bottom: 2px solid transparent; white-space: nowrap; font-size: .9375rem; color: var(--kopf-text); }
.nav > a:hover, .nav > a[aria-current="page"] { color: var(--kopf-aktiv); border-bottom-color: var(--gold); }

/* Startseite */
.home-intro { max-width: 1020px; margin: 0 auto 28px; padding-top: 36px; text-align: center; }
.eyebrow { display: block; color: var(--gold-text); font-size: .75rem; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; }
.gold-rule { display: inline-flex; align-items: center; gap: 22px; }
.gold-rule::before, .gold-rule::after { content: ''; width: 37px; height: 1px; background: var(--gold); }
.home-intro h1 { font: 850 clamp(38px, 5.3vw, 68px)/1.05 var(--schrift); letter-spacing: -2.4px; max-width: 850px; margin: 20px auto; }
.gold-dot { color: var(--punkt); }
.home-intro .lead { color: var(--text2); max-width: 820px; margin: 0 auto; }

.search-domain-switch { display: flex; gap: 3px; margin: 24px 0 0; padding: 4px; border: 1px solid var(--linie); border-radius: 8px 8px 0 0; background: var(--filter); }
.search-domain-switch label { flex: 1; min-width: 0; cursor: pointer; }
.search-domain-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.search-domain-switch span { display: block; height: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: 6px; text-align: left; font-weight: 700; font-size: .875rem; }
.search-domain-switch small { display: block; font-weight: 400; font-size: .75rem; color: var(--text2); }
.search-domain-switch input:checked + span { background: var(--care); border-color: var(--care); color: var(--flaeche); box-shadow: inset 0 -3px var(--auswahl); }
.search-domain-switch .domain-gear input:checked + span { background: var(--gear); border-color: var(--gear); }
.search-domain-switch input:checked + span small { color: inherit; opacity: .85; }
.search-domain-switch input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: 2px; }
.searchbox { display: flex; gap: 14px; align-items: center; background: var(--flaeche); border: 2px solid var(--linie); border-radius: 0 0 32px 32px; padding: 7px 8px 7px 22px; box-shadow: var(--schatten); }
.searchbox:focus-within { border-color: var(--care); }
.searchbox input { width: 100%; border: 0; background: transparent; padding: 10px 0; }
.searchbox input:focus-visible { outline: 0; }
.searchbox .search-icon { width: 20px; height: 20px; flex: none; color: var(--text2); }
.searchbox button { border-radius: 24px; padding: 10px 23px; background: var(--auswahl); border-color: var(--auswahl); color: var(--auswahl-text); font-weight: 700; }
.home-examples { margin: 12px 0; color: var(--text2); font-size: .875rem; }
.home-examples a { margin-left: 10px; text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 3px; }

.directory-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 960px; margin: 29px auto 24px; }
.directory-shortcuts a { padding: 0 20px; border-right: 1px solid var(--linie); }
.directory-shortcuts a:last-child { border: 0; }
.directory-shortcuts strong { display: block; font: 23px var(--zier); margin-bottom: 7px; }
.directory-shortcuts small { font-size: .875rem; color: var(--text2); }
.database-stats { display: flex; justify-content: center; flex-wrap: wrap; margin: 32px 0 12px; }
.database-stats span { padding: 0 12px; border-right: 1px solid var(--gold); font-size: .75rem; text-transform: uppercase; letter-spacing: 1.5px; }
.database-stats span:last-child { border: 0; }
.database-stats b { font-weight: 700; }

.category-section { max-width: 1180px; margin: 34px auto 25px; padding-top: 24px; border-top: 1px solid var(--linie); }
.sectionhead { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.sectionhead h2 { font: 30px/1.2 var(--zier); }
.category-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.category-links a { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: .875rem; padding: 10px 7px; text-align: center;
  background: var(--hervor); border: 1px solid var(--linie); border-left: 3px solid var(--care); border-radius: 6px; }
.category-links a.gear { border-left-color: var(--gear); }
.category-links a:hover { border-color: var(--gold); color: var(--text); }

/* Meldungsseiten (404, Wartung) */
.message-page { max-width: 720px; margin: 0 auto; padding: 64px 0 32px; text-align: center; }
.message-page h1 { font: 40px/1.15 var(--zier); margin-bottom: 16px; }
.message-page .lead { color: var(--text2); margin-bottom: 24px; }

/* Allgemeine Bausteine (ab v4.07) */
[hidden] { display: none !important; }
/* Falle gegen das Kopieren des Katalogs (ab v5.05): ein Link, den nur ein Programm findet */
.ix { display: none !important; }
html:not(.js) .nur-mit-js, .js .nur-ohne-js { display: none !important; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 5px; }
.chip { display: inline-block; font-size: .8125rem; border: 1px solid var(--linie); border-radius: 16px; padding: 3px 10px; background: var(--flaeche); }
.chip.soft { background: var(--hervor); border-color: transparent; color: var(--gold-text); font-weight: 600; }
/* Ausführungen (ab v5.27): je Achse eine Zeile mit Chips; was in keiner Variante lieferbar ist, blass und durchgestrichen. */
.ausfuehrungen { display: grid; gap: 10px; margin: 0; }
.ausfuehrungen > div { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: 8px 14px; align-items: baseline; }
.ausfuehrungen dt { font-weight: 600; font-size: .875rem; }
.ausfuehrungen dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* Was der Hersteller nicht mehr führt (ab v5.29): eine ruhige Liste unter den heutigen Ausführungen. */
.ausfuehrungen-frueher-titel { font-size: .9375rem; margin: 18px 0 8px; }
.ausfuehrungen-frueher { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ausfuehrungen-frueher li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ausfuehrungen-frueher .chip { opacity: .75; }
.ausfuehrungen-frueher small { color: var(--text2); }
/* Lange Achsen klappen auf (ab v5.43): die Zusammenfassung steht als Chip in der Reihe, geöffnet folgen die übrigen Werte in eigener Zeile */
.ausfuehrungen-mehr { display: block; margin-top: 6px; }
.ausfuehrungen-mehr > ul { margin-top: 6px; }
.ausfuehrungen dd .ausfuehrungen-mehr { display: contents; }
.ausfuehrungen-mehr > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 30px; padding: 2px 12px; border: 1px dashed var(--linie); border-radius: 999px; color: var(--gold-text); font-weight: 600; font-size: .8125rem; }
.ausfuehrungen-mehr > summary::-webkit-details-marker { display: none; }
.ausfuehrungen-mehr > summary:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.ausfuehrungen-mehr[open] > summary { display: none; }
@media (max-width: 560px) { .ausfuehrungen > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.breadcrumb { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 16px; font-size: .8125rem; color: var(--text2); }
.breadcrumb a:hover { text-decoration: underline; }
.data-note, .list-note { font-size: .8125rem; color: var(--text2); line-height: 1.5; margin-top: 14px; }

/* Düfte & Pflege: Kopf, Bereichsreiter, Schnellwahl, Suchleiste */
.discovery-surface { --domain: var(--care); --domain-flaeche: var(--care-flaeche); --domain-dunkel: var(--care-dunkel); padding-bottom: 28px; }
.domain-gear { --domain: var(--gear); --domain-flaeche: var(--gear-flaeche); --domain-dunkel: var(--gear-dunkel); }
.discovery-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0 22px; }
.discovery-heading .eyebrow { color: var(--domain); }
.discovery-heading h1 { font: 850 clamp(29px, 3.4vw, 46px)/1.12 var(--schrift); letter-spacing: -1.5px; margin: 8px 0 10px; }
.discovery-heading p { color: var(--text2); }
.domain-tabs { display: flex; margin-bottom: 16px; border-bottom: 2px solid var(--linie); }
.domain-tabs > a { padding: 13px 22px; margin-bottom: -2px; font-weight: 700; border-bottom: 3px solid transparent; }
.domain-tabs > a[aria-current] { background: var(--domain-flaeche); color: var(--domain-dunkel); border-color: var(--domain); }
.domain-tabs span { font-size: .8125rem; font-weight: 400; color: var(--text2); margin-left: 8px; }
.scent-starters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.scent-starters a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 10px 8px; border: 1px solid var(--linie); border-radius: 8px; font-size: .875rem; font-weight: 650; background: var(--flaeche); }
.scent-starters a:hover { border-color: var(--domain); color: var(--text); }
.scent-starters a[aria-current] { background: var(--auswahl); color: var(--auswahl-text); border-color: var(--auswahl-text); box-shadow: inset 0 -2px var(--auswahl-text); }
.scent-starters img, .facet-option img, .card-notes img, .compact-note img { image-rendering: pixelated; object-fit: contain; flex-shrink: 0; }
.finder-search-strip { display: flex; gap: 12px; margin: 20px 0; align-items: center; }
.finder-search-strip input { width: 100%; border: 2px solid var(--linie); border-radius: 7px; min-height: 50px; padding: 12px 18px; background: var(--flaeche); }
.finder-search-strip input:focus { border-color: var(--domain); outline: 2px solid transparent; }
.finder-search-strip .primary { min-height: 50px; }
/* Ab v4.51 hervorgehoben (Wunsch des Betreibers: „geht total unter“): Rahmen in der Bereichsfarbe, leicht getönte Fläche, weicher Schein; beim Fokus kräftiger */
.finder-search-strip input, .directory-search input[type="search"] { border: 2px solid color-mix(in srgb, var(--domain, var(--care)) 70%, transparent);
  background: color-mix(in srgb, var(--domain, var(--care)) 7%, var(--flaeche)); box-shadow: 0 2px 10px color-mix(in srgb, var(--domain, var(--care)) 18%, transparent); font-size: 1.0625rem; }
.finder-search-strip input::placeholder, .directory-search input[type="search"]::placeholder { color: color-mix(in srgb, var(--text) 62%, transparent); }
.finder-search-strip input:focus, .directory-search input[type="search"]:focus { border-color: var(--domain, var(--care)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--domain, var(--care)) 22%, transparent); }
.finder-mobile-toggle { display: none; }

/* Filterleiste: ein Formular, jede Facette ein aufklappbarer Block */
.finder-layout { display: grid; grid-template-columns: 285px minmax(0, 1fr); gap: 26px; align-items: start; }
.discovery-filters { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.filter-panel-heading { display: flex; justify-content: space-between; align-items: center; background: var(--kopf); color: var(--kopf-text); padding: 16px; }
.filter-panel-heading h2 { font: 750 18px var(--schrift); }
.filter-panel-heading a { color: var(--kopf-akzent); text-decoration: underline; text-underline-offset: 3px; font-size: .8125rem; }
.facet-block { border-bottom: 1px solid var(--linie); padding: 0 16px; }
.facet-block > summary { cursor: pointer; padding: 15px 0; font-weight: 700; font-size: .875rem; }
.facet-selected-count { float: right; min-width: 20px; text-align: center; background: var(--auswahl); color: var(--auswahl-text); border-radius: 20px; font-size: .75rem; }
.facet-selected-count:empty { display: none; }
.facet-options { max-height: 215px; overflow: auto; overscroll-behavior: contain; padding: 0 2px 12px; scrollbar-width: thin; }
.facet-option { display: flex; align-items: center; gap: 9px; padding: 6px 2px; font-size: .875rem; line-height: 1.35; cursor: pointer; }
.facet-option input { width: 17px; height: 17px; flex: 0 0 17px; margin: 0; accent-color: var(--domain); }
.facet-option span { flex: 1; overflow-wrap: anywhere; }
.facet-option small { font-size: .75rem; color: var(--text2); font-variant-numeric: tabular-nums; }
.facet-option:has(input:checked) { font-weight: 650; }
.facet-option:has(input:disabled) { opacity: .45; cursor: default; }
.facet-option:hover:not(:has(input:disabled)) { background: var(--hervor); }
.facet-search { width: 100%; margin: 0 0 10px; font-size: .8125rem; border: 1px solid var(--linie); border-radius: 4px; padding: 7px 9px; background: var(--flaeche); }
.facet-hint, .facet-search-empty { font-size: .75rem; color: var(--text2); margin: 0 0 10px; line-height: 1.5; }
.ingredients-panel label { display: block; font-size: .8125rem; font-weight: 600; margin: 4px 0 4px; }
.ingredients-panel input[type="text"] { width: 100%; border: 1px solid var(--linie); border-radius: 4px; padding: 8px 10px; background: var(--flaeche); font-size: .875rem; }
.zutat-modus { border: 0; padding: 6px 0 8px; margin: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.zutat-modus label { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.ingredients-panel button { width: 100%; margin: 12px 0 8px; }
.filter-help { font-size: .75rem; line-height: 1.5; color: var(--text2); margin-bottom: 14px; }
.range-inputs { display: flex; gap: 10px; }
.range-inputs label { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: .75rem; color: var(--text2); }
.range-inputs input { width: 100%; border: 1px solid var(--linie); border-radius: 4px; padding: 7px 8px; background: var(--flaeche); font-size: .875rem; color: var(--text); }
.range-panel button { width: 100%; margin: 12px 0 14px; }
.kat-hint { padding: 14px 16px; margin: 0; }
.kat-starters { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gear-card-specs { margin: auto 0 18px; color: var(--text2); font-size: .8125rem; overflow-wrap: anywhere; min-height: 1.2em; }
.set-parts { margin: 0; padding-left: 20px; }
.set-parts li { padding: 4px 0; }
.set-parts small { color: var(--text2); margin-left: 6px; }
.filter-apply { padding: 14px 16px; }
.filter-apply button { width: 100%; }

/* Ergebnisse */
.discovery-result-bar { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 0 0 14px; border-bottom: 2px solid var(--domain); }
.discovery-result-bar strong { display: block; font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: -.5px; }
.discovery-result-bar small { font-size: .75rem; color: var(--text2); }
.finder-view-tools { display: flex; gap: 10px; align-items: center; }
.finder-view-tools select { font-size: .8125rem; min-height: 40px; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 5px; background: var(--flaeche); }
.finder-applied { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; min-height: 55px; padding: 13px 0; }
.filter-chip { font-size: .75rem; font-weight: 600; border-radius: 5px; padding: 6px 9px; background: var(--auswahl); border: 1px solid transparent; color: var(--auswahl-text); display: inline-flex; gap: 9px; align-items: center; }
.filter-chip span { font-size: 18px; line-height: 1; }
.filter-chip:hover { border-color: var(--auswahl-text); color: var(--auswahl-text); }
/* Ab v4.42 je Art des Filters eine Farbe (dieselben Tokens wie die Typ-Badges, hell und dunkel); die Suche bleibt in der Auswahlfarbe */
.filter-chip[class*="chip-"]:not(.chip-suche) { color: var(--chipf); background: color-mix(in srgb, var(--chipf) 15%, var(--flaeche)); border-color: color-mix(in srgb, var(--chipf) 45%, transparent); }
.filter-chip[class*="chip-"]:not(.chip-suche):hover { border-color: var(--chipf); color: var(--chipf); }
.chip-typ { --chipf: var(--t-razor); } .chip-familie { --chipf: var(--t-fragrance); } .chip-note { --chipf: var(--t-balm); }
.chip-marke { --chipf: var(--t-blade); } .chip-rezeptur { --chipf: var(--t-soap); } .chip-zutat { --chipf: var(--t-brush); } .chip-merkmal { --chipf: var(--t-splash); }
/* „Neu hinzugefügt“ (ab v4.52): Filter als Chips, gewählter Chip in der Akzentfarbe, Datum nur in der ersten Zeile eines Tages */
.neu-filter { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 6px 0 18px; }
.neu-gruppe { display: flex; flex-wrap: wrap; gap: 6px; }
.neu-filter .filter-chip { background: var(--flaeche); border-color: var(--linie); color: var(--text); }
.neu-filter .filter-chip.aktiv { background: var(--auswahl); border-color: var(--auswahl); color: var(--auswahl-text); }
/* Ab v5.17 Karten je Tag wie in den Ergebnislisten; ohne Seitenleiste ist Platz für vier Spalten */
.neu-tag + .neu-tag { margin-top: 28px; }
.neu-tag-titel { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); font-size: 1.125rem; }
.neu-tag-titel span { color: var(--text2); font-size: .875rem; font-weight: 600; }
/* Zwei Klassen: Die Umbrüche von .discovery-grid gelten für Ergebnisse neben der Filterleiste und stehen weiter unten – sie schlugen sonst diese */
.discovery-grid.neu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .discovery-grid.neu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 850px) { .discovery-grid.neu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .discovery-grid.neu-grid { grid-template-columns: minmax(0, 1fr); } }
.facet-trenner { border: 0; border-top: 1px dashed var(--linie); margin: 6px 0; }
.clear-filter-link { text-decoration: underline; font-size: .8125rem; padding: 5px; color: var(--text2); }
.filter-start-hint { font-size: .8125rem; color: var(--text2); }
.discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.discovery-card { display: flex; flex-direction: column; border: 1px solid var(--linie); border-top: 3px solid var(--domain); border-radius: 8px; background: var(--flaeche); padding: 16px; min-width: 0; transition: box-shadow .15s, border-color .15s; }
.discovery-card:hover { box-shadow: 0 5px 18px #22293112; border-color: var(--domain); }
.discovery-card:focus-within { outline: 2px solid var(--domain); outline-offset: 2px; }
.discovery-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; margin-bottom: 16px; color: var(--domain); font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .45px; }
.status-badge { color: var(--gold-text); }
/* ⊕ und Haus bleiben zusammen rechts oben (ab v5.19); wird es eng, rutscht ein Status wie „Limitiert“ in die nächste Zeile, nie ein Knopf */
.karten-knoepfe { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; flex: none; }
.karten-knoepfe .merk-knopf { margin-left: 0; }
.discovery-card-top .status-badge { order: 3; flex-basis: 100%; }
.card-maker { font-size: .75rem; color: var(--text2); margin-bottom: 5px; }
.discovery-card h2 { font: 750 20px/1.22 var(--schrift); letter-spacing: -.4px; overflow-wrap: anywhere; margin: 0 0 10px; }
.discovery-card h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; color: inherit; }
.card-meta { font-size: .75rem; color: var(--text2); margin-bottom: 14px; min-height: 19px; }
.card-notes { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 18px; padding-top: 5px; }
.card-notes span { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; background: var(--hervor); border-radius: 5px; padding: 3px 6px; max-width: 100%; }
.card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--linie); padding-top: 12px; font-size: .75rem; color: var(--text2); }
.card-bottom a { font-size: .8125rem; font-weight: 700; color: var(--domain); }
/* Was die Suche verstanden hat (ab v5.25): Korrektur, Vorschlag, Art, anderer Bereich, Marke – eine ruhige Leiste über den Ergebnissen */
.such-hilfe { display: grid; gap: 4px; margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--hervor); border-radius: 0 6px 6px 0; }
.such-hilfe p { margin: 0; font-size: 14px; color: var(--text2); overflow-wrap: anywhere; }
.such-hilfe a { color: var(--text); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.such-hilfe .such-hilfe-korrektur, .such-hilfe .such-hilfe-vorschlag { color: var(--text); }
.such-hilfe-einreichen a { font-weight: 650; }
.discovery-empty { padding: 40px 25px; background: var(--hervor); border-radius: 8px; margin-top: 8px; }
.discovery-empty h2 { font: 750 25px var(--schrift); }
.discovery-empty p { margin: 12px 0 20px; max-width: 520px; }
.finder-pagination { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 24px 0 8px; font-size: .875rem; color: var(--text2); }
.finder-results.laedt { opacity: .55; transition: opacity .15s; }

/* Produktseite */
.compact-product { max-width: 1200px; margin: 0 0 40px; }
.compact-title { display: flex; justify-content: space-between; gap: 24px; padding: 8px 0 22px; border-bottom: 2px solid var(--gold); }
.compact-title .eyebrow { color: var(--domain, var(--care)); }
.compact-title h1 { font: 850 clamp(30px, 4vw, 48px)/1.08 var(--schrift); letter-spacing: -1.7px; margin: 9px 0 13px; max-width: 840px; overflow-wrap: anywhere; }
.compact-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.compact-actions { align-self: start; }
.compact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 28px; padding-top: 22px; }
.compact-product h2 { font: 750 20px/1.25 var(--schrift); margin-bottom: 12px; letter-spacing: -.3px; }
.compact-product h2 small { font: 400 14px var(--schrift); color: var(--text2); margin-left: 8px; }
.compact-copy > p { line-height: 1.6; max-width: 740px; }
.other-sizes { margin-top: 12px; font-size: .875rem; color: var(--text2); }
.compact-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linie); }
.compact-note-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--linie); align-items: start; gap: 12px; }
.compact-note-row h3 { font-size: .8125rem; font-weight: 500; color: var(--text2); padding-top: 8px; }
.compact-note-row > div { display: flex; flex-wrap: wrap; gap: 7px 14px; }
.compact-note { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; min-height: 36px; }
.compact-facts-card { padding: 20px; background: var(--filter); border: 1px solid var(--linie); border-radius: 7px; align-self: start; }
.compact-facts-card > h2 { background: var(--kopf); color: var(--kopf-text); margin: -20px -20px 10px; padding: 14px 20px; border-radius: 6px 6px 0 0; }
.spec-grid { display: grid; margin: 0 0 14px; }
.spec-grid > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: .875rem; }
.spec-grid dt { color: var(--text2); overflow-wrap: break-word; hyphens: auto; }
/* Eigenschaften (Zubehör) mit breiterer Beschriftung – zwei Klassen, sonst schlug die 110-px-Spalte von .spec-grid die 180 px (bis v5.20: deutsche Wörter wie
   „Knotendurchmesser“ liefen in die Werte). Sehr lange Wörter trennt der Browser (hyphens, die Seite trägt lang). */
.spec-grid.spec-wide > div { grid-template-columns: 180px minmax(0, 1fr); }
.spec-grid dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }
.compact-inci { margin-top: 15px; font-size: .875rem; }
.compact-inci summary { cursor: pointer; font-weight: 600; }
.compact-inci p { margin: 12px 0; overflow-wrap: anywhere; }
.compact-inci small { color: var(--text2); }
.compact-related { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linie); }
.related-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; }
.related-list li { padding: 8px 0; border-bottom: 1px solid var(--linie); }
.related-list a { font-weight: 600; }
.related-list small { display: block; font-size: .75rem; color: var(--text2); }

/* Verzeichnisse (ab v4.10): kompakte Tabellen in begrenzter Breite (frontend.md 06: rund 1.120 px), Suche direkt an der Liste */
.card-maker { display: block; }
.card-maker:hover { text-decoration: underline; text-underline-offset: 3px; }
.compact-directory, .compact-scent-page, .brand-page, .note-page { max-width: var(--verzeichnis); margin: 0 auto; padding: 26px 0 34px; }
.compact-scent-page, .brand-page, .note-page { padding-top: 4px; }
.directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.directory-heading .eyebrow, .compact-scent-heading .eyebrow, .note-heading .eyebrow { color: var(--care); }
.directory-heading h1 { font: 800 32px/1.12 var(--schrift); letter-spacing: -.9px; margin: 6px 0; }
.directory-heading p { font-size: .875rem; color: var(--text2); }
.directory-total { white-space: nowrap; font-size: .75rem; color: var(--text2); padding: 5px 9px; border: 1px solid var(--linie); border-radius: 5px; }
.compact-directory-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: var(--filter); padding: 14px; border: 1px solid var(--linie); border-top: 3px solid var(--care); border-radius: 7px; }
.compact-directory-toolbar label { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 160px; }
.compact-directory-toolbar label > span { font-size: .75rem; font-weight: 650; color: var(--text2); }
.compact-directory-toolbar .directory-search { flex: 3 1 240px; }
.compact-directory-toolbar input, .compact-directory-toolbar select { width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--linie); border-radius: 5px; background: var(--flaeche); }
.compact-directory-toolbar input:focus { border-color: var(--care); }
.directory-crosslink { font-size: .875rem; font-weight: 600; align-self: center; padding: 6px 8px; color: var(--care); white-space: nowrap; }
.directory-list-count { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; font-size: .8125rem; color: var(--text2); padding: 12px 2px 10px; font-variant-numeric: tabular-nums; }
.letter-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.letter-nav a { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--linie); border-radius: 4px; font-size: .8125rem; font-weight: 650; }
.letter-nav a:hover { border-color: var(--care); }
.compact-directory-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .875rem; }
.compact-directory-table th { text-align: left; font-size: .75rem; font-weight: 650; color: var(--text2); padding: 9px 12px; border-bottom: 1px solid var(--linie); background: var(--filter); }
.compact-directory-table td { padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: middle; overflow-wrap: anywhere; line-height: 1.35; }
.compact-directory-table tbody tr:not(.dir-letter):hover { background: var(--hervor); }
.compact-directory-table td:first-child { border-left: 3px solid transparent; }
.compact-directory-table tbody tr:hover td:first-child { border-left-color: var(--care); }
.compact-directory-table a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--care); }
.compact-directory-table .dir-numeric { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.compact-directory-table .dir-numeric a { display: inline-flex; justify-content: center; min-width: 30px; padding: 3px 7px; background: var(--hervor); border-radius: 4px; font-size: .8125rem; font-weight: 650; }
.dir-letter th { background: var(--flaeche); color: var(--care); font-size: .875rem; padding-top: 16px; scroll-margin-top: 12px; }
.brands-directory-table th:first-child { width: 46%; }
.brands-directory-table th:nth-child(2) { width: 20%; }
.dir-secondary { color: var(--text2); font-size: .8125rem; }
.directory-brand-link { display: flex; align-items: center; gap: 11px; font-weight: 650; font-size: .9375rem; min-height: 32px; }
.brand-monogram { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 5px; background: var(--hervor); color: var(--care); font-size: .6875rem; font-weight: 750; letter-spacing: .3px; }
.scents-directory-table th:first-child { width: 33%; }
.scents-directory-table th:nth-child(2) { width: 20%; }
.scents-directory-table .dir-notes-column { width: 35%; }
.directory-scent-link { display: block; font-size: .9375rem; font-weight: 650; line-height: 1.3; }
.directory-maker-subline { display: block; margin-top: 3px; font-size: .75rem; color: var(--text2); }
.dir-status { display: inline-block; margin-top: 4px; font-size: .6875rem; font-weight: 650; color: var(--gold-text); text-transform: uppercase; letter-spacing: .4px; }
.directory-family { font-size: .8125rem; color: var(--care); }
.directory-empty { border: 1px solid var(--linie); border-radius: 6px; padding: 25px; background: var(--hervor); text-align: center; }
.directory-empty h2 { font: 700 22px var(--schrift); }
.directory-empty p { font-size: .875rem; color: var(--text2); margin: 8px 0 14px; }

/* Duft-, Marken- und Notenseite (ab v4.10) */
.compact-scent-heading { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; padding-bottom: 20px; border-bottom: 2px solid var(--care); }
.compact-scent-heading h1, .note-heading h1 { font: 800 clamp(30px, 3.5vw, 42px)/1.1 var(--schrift); letter-spacing: -1px; margin: 7px 0 10px; overflow-wrap: anywhere; }
.compact-scent-heading p, .note-heading p { font-size: .9375rem; line-height: 1.55; color: var(--text2); max-width: 760px; }
.compact-scent-heading a.eyebrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.scent-profile-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; align-self: center; font-size: .75rem; color: var(--text2); }
.scent-family-pill { display: inline-block; background: var(--hervor); color: var(--care); font-size: .8125rem; font-weight: 650; border: 1px solid var(--linie); border-radius: 5px; padding: 6px 10px; }
.compact-scent-notes { margin-top: 20px; border: 1px solid var(--linie); border-radius: 8px; padding: 16px 18px; background: var(--flaeche); }
.compact-scent-sectionhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.compact-scent-sectionhead h2, .note-relations h2 { font: 750 20px/1.25 var(--schrift); letter-spacing: -.3px; }
.compact-scent-sectionhead > span { font-size: .75rem; color: var(--text2); }
.scent-phase-row { grid-template-columns: 95px minmax(0, 1fr); }
.scent-note-pill { padding: 4px 9px 4px 5px; border: 1px solid var(--linie); border-radius: 6px; background: var(--hervor); min-height: 44px; gap: 7px; }
a.scent-note-pill:hover, a.compact-note:hover { border-color: var(--care); color: var(--text); }
.scent-note-pill small { display: block; font-size: .6875rem; color: var(--text2); }
.scent-character-line { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 12px; padding: 10px 0 0; border-top: 1px solid var(--linie); }
.scent-character-line h3 { font-size: .8125rem; color: var(--text2); font-weight: 500; padding-top: 4px; }
.scent-character-line .chip, .compact-tags a.chip { margin: 0 5px 5px 0; }
a.chip:hover { border-color: var(--care); color: var(--text); }
.scent-no-notes { color: var(--text2); }
.scent-format-section, .brand-section { margin-top: 24px; scroll-margin-top: 16px; }
.scent-format-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .875rem; }
.scent-format-table th { background: var(--filter); color: var(--text2); font-weight: 600; font-size: .75rem; text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--linie); }
.scent-format-table td { padding: 10px 11px; border-bottom: 1px solid var(--linie); vertical-align: middle; overflow-wrap: anywhere; }
.scent-format-table th:first-child { width: 50%; }
.scent-format-table td > a { font-weight: 650; }
.scent-format-table td > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.scent-format-table td > small { display: block; color: var(--text2); font-size: .75rem; margin-top: 3px; }
/* v4.14: Name groß, Art als farbiges Badge rechts; Größen untereinander, je Größe der Link zum Hersteller */
.format-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.format-name { font-weight: 650; font-size: 1rem; }
.format-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.typ-badge { --typ: var(--t-other); flex: none; font-size: .6875rem; font-weight: 650; letter-spacing: .3px; line-height: 1.2; padding: 3px 8px; border-radius: 10px; color: var(--typ); background: color-mix(in srgb, var(--typ) 13%, var(--flaeche)); border: 1px solid color-mix(in srgb, var(--typ) 35%, transparent); white-space: nowrap; }
.typ-badge[data-typ="soap"] { --typ: var(--t-soap); } .typ-badge[data-typ="cream"] { --typ: var(--t-cream); } .typ-badge[data-typ="preshave"] { --typ: var(--t-preshave); }
.typ-badge[data-typ="splash"] { --typ: var(--t-splash); } .typ-badge[data-typ="balm"] { --typ: var(--t-balm); } .typ-badge[data-typ="fragrance"] { --typ: var(--t-fragrance); }
.typ-badge[data-typ="razor"] { --typ: var(--t-razor); } .typ-badge[data-typ="brush"] { --typ: var(--t-brush); } .typ-badge[data-typ="blade"] { --typ: var(--t-blade); }
.typ-badge[data-typ="acc"] { --typ: var(--t-acc); } .typ-badge[data-typ="set"] { --typ: var(--t-set); }
.size-list { list-style: none; margin: 0; padding: 0; }
.size-list li + li { margin-top: 3px; }
.size-extern { margin-left: 4px; color: var(--gold-text); text-decoration: none; font-weight: 650; }
.size-extern:hover, .size-extern:focus-visible { color: var(--text); }
@media (max-width: 640px) { .format-cell { flex-direction: column; align-items: flex-start; gap: 4px; } }
/* v4.19: Basenfinder, Basisseite, Vergleich */
.base-table th:first-child { width: 46%; }
.base-table th:last-child, .base-table td:last-child { width: 56px; text-align: center; }
.base-table td > small { display: block; color: var(--text2); font-size: .75rem; margin-top: 3px; }
.base-table .format-cell small { display: block; color: var(--text2); font-size: .75rem; margin-top: 2px; }
.beleg-partial, .beleg-none { color: var(--warnung) !important; }
.compare-pick { display: inline-flex; padding: 6px; cursor: pointer; }
.compare-pick input { width: 18px; height: 18px; accent-color: var(--care); }
.base-ingredients { line-height: 1.7; overflow-wrap: anywhere; }
/* position: relative macht den Rahmen zum Bezug der .sr-only-Texte in den Zellen – sonst schneidet overflow sie nicht ab, und am Handy wurde die Seite
   so breit wie die Tabelle (484 statt 375 px, v5.38) */
.compare-wrap { overflow-x: auto; margin-top: 12px; position: relative; }
.compare-table { min-width: 520px; }
.compare-table th:first-child { width: 34%; }
.compare-table thead th small { display: block; font-weight: 400; color: var(--text2); }
.compare-table tbody th { font-weight: 500; text-align: left; overflow-wrap: anywhere; }
.compare-table td { text-align: center; }
.compare-section th { background: var(--filter); color: var(--text2); font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .4px; }
.compare-shared { background: var(--care-flaeche); }
.compare-shared td { color: var(--care-dunkel); font-weight: 650; }
.compact-more { margin-top: 18px; }
/* Markenseite ab v5.06: KI-Text aus Fakten und belegte Fakten */
.brand-intro { max-width: 78ch; margin-top: 18px; }
.brand-text { line-height: 1.6; }
.scent-text { line-height: 1.6; max-width: 72ch; }
.product-text, .base-text { line-height: 1.6; max-width: 72ch; }
.base-text { margin-bottom: 1.2rem; }
.ki-hinweis { font-size: .8rem; color: var(--text2); margin-top: 4px; }
.brand-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin-top: 12px; font-size: .9rem; }
.brand-facts dt { color: var(--text2); font-weight: 650; }
.brand-facts dd { margin: 0; }
@media (max-width: 560px) { .brand-facts { grid-template-columns: minmax(0, 1fr); gap: 0; } .brand-facts dd { margin-bottom: 8px; } }
.brand-ranges { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; }
.brand-range { border: 1px solid var(--linie); border-top: 3px solid var(--care); border-radius: 7px; padding: 12px 14px; }
.brand-range.domain-gear { border-top-color: var(--gear); }
.brand-range h3 { font-size: .875rem; font-weight: 750; margin-bottom: 6px; }
.brand-range ul { list-style: none; margin: 0; padding: 0; }
.brand-range a { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--linie); font-size: .875rem; }
.brand-range li:last-child a { border-bottom: 0; }
.brand-range small { font-variant-numeric: tabular-nums; color: var(--text2); }
.brand-range a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.base-name { font-weight: 600; }
.note-heading { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding-bottom: 20px; border-bottom: 2px solid var(--care); }
.note-art { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: var(--hervor); border: 1px solid var(--linie); border-radius: 8px; }
.note-art img { image-rendering: pixelated; }
.note-art.ohne-bild span { font: 800 38px var(--schrift); color: var(--care); }
.note-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.note-relations { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 28px; margin-top: 20px; }
.note-relations section { min-width: 0; }
.note-relations h2 { font-size: 17px; margin-bottom: 8px; }
.note-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.note-pills .scent-note-pill small { display: inline; margin-left: 6px; }

@media (max-width: 1250px) {
  .discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scent-starters a { flex-direction: column; gap: 4px; }
}
@media (max-width: 850px) {
  .finder-layout { grid-template-columns: 245px minmax(0, 1fr); gap: 18px; }
  .discovery-result-bar { flex-wrap: wrap; }
  .discovery-grid { grid-template-columns: minmax(0, 1fr); }
  .compact-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
  .finder-layout { grid-template-columns: minmax(0, 1fr); }
  .discovery-heading { padding: 24px 0 16px; }
  .scent-starters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .scent-starters a { flex-direction: row; font-size: .8125rem; padding: 8px 5px; }
  .js .finder-mobile-toggle { display: inline-flex; }
  .js .discovery-filters:not(.offen) > :not(.filter-panel-heading) { display: none; }
  .compact-title { flex-direction: column; gap: 14px; }
  .compact-note-row, .spec-grid > div { grid-template-columns: 90px minmax(0, 1fr); }
  .spec-grid.spec-wide > div { grid-template-columns: 130px minmax(0, 1fr); }
  .directory-heading { align-items: flex-start; }
  .directory-heading h1 { font-size: 28px; }
  .directory-crosslink { margin-left: auto; }
  .compact-directory-table th, .compact-directory-table td { padding-left: 6px; padding-right: 6px; }
  .compact-directory-table .dir-numeric { width: 62px; }
  .scents-directory-table .dir-notes-column { display: none; }
  .scents-directory-table th:first-child { width: 55%; }
  .scents-directory-table th:nth-child(2) { width: 30%; }
  .brands-directory-table th:first-child { width: 40%; }
  .brands-directory-table th:nth-child(2) { width: 22%; }
  .brand-monogram { display: none; }
  .compact-scent-heading { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .scent-profile-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .compact-scent-notes { padding: 13px; }
  .scent-phase-row, .scent-character-line { grid-template-columns: 70px minmax(0, 1fr); gap: 8px; }
  /* Nicht in Vergleichen (ab v5.37): dort ist die dritte Spalte die zweite Basis bzw. der zweite Duft, die Tabelle schiebt sich im Kasten */
  .scent-format-table:not(.compare-table) th:nth-child(3), .scent-format-table:not(.compare-table) td:nth-child(3) { display: none; }
  .note-heading { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .note-art { width: 72px; height: 72px; }
}

.footer { background: var(--fuss); border-top: 1px solid var(--linie); color: var(--text2); font-size: .875rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 32px; padding-top: 32px; padding-bottom: 40px; }
.footer-brand { font: 900 20px var(--schrift); letter-spacing: -1px; color: var(--text); margin-bottom: 6px; }
.footer-brand span { color: var(--gold-text); }
.footer nav { display: flex; flex-direction: column; gap: 6px; }
.footer nav a { text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 3px; }

@media (max-width: 900px) {
  :root { --rand: 16px; }
  .directory-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .directory-shortcuts a:nth-child(2) { border: 0; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nav { gap: 2px 18px; overflow-x: auto; flex-wrap: nowrap; }
}
@media (max-width: 560px) {
  .search-domain-switch small { display: none; }
  .searchbox { padding-left: 14px; gap: 8px; }
  .searchbox button { padding: 10px 14px; }
  .database-stats span { padding: 4px 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Mitglieder (ab v4.22): Anmelden, Mitgliederbereich, Kollektion, Nachrichten, Rechtstexte – dieselben Farbwerte wie der Katalog */
.konto-link { color: var(--kopf-text); font-size: .875rem; font-weight: 600; padding: 8px 10px; white-space: nowrap; }
.konto-link:hover { color: var(--kopf-aktiv); }
.konto-badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--kopf-akzent); color: var(--kopf); font-size: .75rem; text-align: center; }
.konto-karte { max-width: 520px; margin: 48px auto 32px; padding: 32px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; box-shadow: var(--schatten); }
.konto-karte h1, .konto-kopf h1 { font: 34px/1.2 var(--zier); margin: 6px 0 12px; }
.konto-karte .lead, .konto-kopf p { color: var(--text2); }
.konto-form { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.konto-form label { font-weight: 600; font-size: .9375rem; }
.konto-form input[type="email"], .konto-form input[type="text"], .konto-form textarea, .sammlung-filter input, .sammlung-filter select, .konto-zeile select {
  width: 100%; border: 1px solid var(--linie); border-radius: 5px; padding: 10px 12px; background: var(--flaeche); color: var(--text); font: inherit; }
.konto-form textarea { resize: vertical; }
.konto-form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.konto-form .check input { margin-top: 5px; }
.konto-form button { align-self: flex-start; }
.code-feld { font-size: 1.5rem !important; letter-spacing: 6px; max-width: 220px; font-variant-numeric: tabular-nums; }
.klein { font-size: .8125rem; color: var(--text2); }
.konto-nebenwege { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.hinweis { border: 1px solid var(--linie); border-left: 4px solid var(--gold); background: var(--hervor); padding: 10px 14px; border-radius: 5px; margin: 12px 0; }
.hinweis.ok { border-left-color: var(--erfolg); }
.hinweis.fehler { border-left-color: var(--fehler); }
button.gefahr { border-color: var(--fehler); color: var(--fehler); }
.konto-seite { max-width: var(--verzeichnis); margin: 0 auto; padding: 24px 0 40px; }
.konto-kopf { margin-bottom: 12px; }
.konto-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; border-bottom: 1px solid var(--linie); margin: 8px 0 20px; }
.konto-nav > a { padding: 10px 0; border-bottom: 2px solid transparent; font-weight: 600; font-size: .9375rem; color: var(--text2); }
.konto-nav > a[aria-current="page"], .konto-nav > a:hover { color: var(--text); border-bottom-color: var(--gold); }
.konto-abmelden { margin-left: auto; }
.konto-abmelden button { min-height: 36px; padding: 6px 12px; font-size: .875rem; }
.attention-box { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; border: 1px solid var(--gold); background: var(--hervor); border-radius: 8px; padding: 14px 16px; margin: 12px 0; }
.attention-box p { margin: 6px 0; color: var(--text2); }
.attention-box button { min-height: 36px; width: 36px; padding: 0; font-size: 1.25rem; }
.konto-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.konto-kacheln a { border: 1px solid var(--linie); background: var(--flaeche); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; }
.konto-kacheln strong { font: 30px/1.1 var(--zier); }
.konto-kacheln span { color: var(--text2); font-size: .875rem; }
.konto-aktionen { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.konto-liste { list-style: none; padding: 0; margin: 8px 0 16px; }
.konto-liste li { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.konto-liste small { color: var(--text2); }
.konto-liste form { margin-left: auto; }
.konto-daten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; }
.konto-daten dt { color: var(--text2); }
.konto-daten dd { margin: 0; }
.konto-zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.konto-zeile select { width: auto; }
.sammlung-filter { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.sammlung-filter label { flex: 1 1 180px; }
.sammlung-liste { list-style: none; padding: 0; margin: 0; }
.sammlung-liste > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
/* Ab v4.50 Trennlinien der Listen im Mitgliederbereich in Akzentfarbe: hell das Blau, dunkel das Mint (Wunsch des Betreibers) */
.sammlung-liste > li, .konto-liste li, .beitrag-tabelle th, .beitrag-tabelle td { border-bottom-color: var(--listen-linie, var(--linie)); }
.sammlung-name { display: flex; flex-direction: column; }
.sammlung-name a, .sammlung-name > span { font-weight: 700; }
.sammlung-name small { color: var(--text2); }
.sammlung-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sammlung-knoepfe button { min-height: 38px; padding: 6px 12px; font-size: .875rem; }
.sammlung-knoepfe button[aria-pressed="true"] { background: var(--auswahl); border-color: var(--auswahl); color: var(--auswahl-text); font-weight: 700; }
.sammlung-knoepfe select { min-height: 38px; border: 1px solid var(--linie); border-radius: 5px; background: var(--flaeche); color: var(--text); }
.produkt-sammlung { margin: 12px 0 4px; }
.postfach { list-style: none; padding: 0; margin: 12px 0; }
.postfach li a { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.postfach li.neu strong { font-weight: 800; }
.postfach-art { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gold-text); min-width: 110px; }
.postfach time, .postfach small { color: var(--text2); font-size: .8125rem; }
.postfach time { margin-left: auto; }
.nachricht h1 { font: 30px/1.2 var(--zier); margin: 6px 0 14px; }
.nachricht-text, .verlauf div { white-space: normal; overflow-wrap: anywhere; }
.verlauf { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.verlauf li { border: 1px solid var(--linie); border-radius: 8px; padding: 12px 14px; background: var(--flaeche); max-width: 760px; }
.verlauf li.vom-team { border-left: 4px solid var(--gold); }
.verlauf li.von-mir { margin-left: auto; background: var(--hervor); }
.verlauf-kopf { display: block; font-size: .8125rem; color: var(--text2); margin-bottom: 4px; }
.rechtstext { max-width: 820px; margin: 0 auto; padding: 32px 0 48px; }
.rechtstext h1 { font: 38px/1.2 var(--zier); margin-bottom: 18px; }
.rechtstext-inhalt h2 { font-size: 1.25rem; margin: 28px 0 8px; }
.rechtstext-inhalt h3 { font-size: 1.0625rem; margin: 20px 0 6px; }
.rechtstext-inhalt a { text-decoration: underline; text-decoration-color: var(--gold); }
/* Über ShaveIndex (ab v5.44): dieselbe Spalte wie die Rechtstexte, Abstände wie dort im Inhaltsblock */
@media (max-width: 760px) {
  .konto-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sammlung-liste > li { grid-template-columns: minmax(0, 1fr); }
  .konto-karte { margin: 24px 0; padding: 20px 16px; }
  .postfach time { margin-left: 0; }
  .konto-abmelden { margin-left: 0; }
}
/* Mitgliederfunktionen (ab v4.25): Bewertungen, Beiträge, SOTD, Newsletter */
.standard-knopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zuviel { color: var(--fehler); font-weight: 600; }
.skala { border: 1px solid var(--linie); border-radius: 8px; padding: 10px 14px 12px; margin: 6px 0; }
.skala legend { font-weight: 600; padding: 0 4px; }
.skala-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.skala-wahl label { position: relative; }
.skala-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.skala-wahl span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 8px; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); cursor: pointer; font-weight: 600; }
.skala-wahl input:checked + span { background: var(--text); color: var(--flaeche); border-color: var(--text); }
.skala-wahl input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.skala-wahl .skala-leer span { font-weight: 400; color: var(--text2); }
.skala-enden { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; color: var(--text2); margin-top: 6px; }
.assoc-felder { border: 0; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.assoc-felder legend { font-weight: 600; font-size: .9375rem; }
.assoc-felder input, .beitrag-zeile select, .beitrag-zeile textarea, .konto-form select, .konto-form input[type="url"], .sotd-editor input[type="text"], .sotd-editor input[type="date"], .sotd-editor select {
  width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 5px; background: var(--flaeche); color: var(--text); font: inherit; }
.beitrag-zeile { border: 1px solid var(--linie); border-radius: 8px; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.beitrag-zeile legend { font-weight: 600; padding: 0 4px; }
.beitrag-heute { margin: 12px 0; }
.beitrag-heute summary { cursor: pointer; font-weight: 600; }
.beitrag-tabelle { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .9375rem; }
.beitrag-tabelle th, .beitrag-tabelle td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--linie); overflow-wrap: anywhere; }
.punkte-stand { border: 1px solid var(--linie); border-radius: 8px; padding: 12px 16px; margin: 12px 0 20px; background: var(--flaeche); }
.punkte-stand p { margin: 4px 0; }
.konto-stand .chip { margin-left: 6px; }
.bewertungen { margin-top: 28px; }
.bewertung-werte { display: grid; gap: 8px; margin: 10px 0; }
.bewertung-werte > div { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 12px; align-items: center; }
.bewertung-werte dd { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bewertung-werte meter { width: min(240px, 100%); height: 12px; }
.statements { list-style: none; padding: 0; margin: 12px 0; }
.statements li { border-bottom: 1px solid var(--linie); padding: 10px 0; }
.statements li p { margin: 4px 0; }
.statements small { color: var(--text2); }
.aenderungen { margin-top: 24px; }
.aenderungen summary { cursor: pointer; }
.aenderungen summary h2 { display: inline; font-size: 1.125rem; }
/* SOTD-Editor (ab v4.76, nach der Empfehlung des Betreibers): links das Setup in einer Fläche mit feinen Zeilentrennungen, rechts die Vorschau des
   echten Exportbilds mit den Optionen – ab 1000 px nebeneinander, die Vorschau bleibt beim Scrollen stehen, wenn sie unter den Kopf passt. */
.sotd-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 1000px) {
  .sotd-spalten { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 28px; }
  .sotd-seite { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow: auto; }
  .sotd-vorschau > summary { display: none; }
}
.sotd-eingabe { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sotd-kopf { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 12px; }
.sotd-kopf label { font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
.sotd-setup { border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); }
.sotd-setup-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--linie); }
.sotd-setup-kopf h2 { font-size: 1.0625rem; margin: 0; }
.sotd-kategorie { padding: 12px 18px 14px; border-bottom: 1px solid var(--linie); display: flex; flex-direction: column; gap: 8px; }
.sotd-kategorie[hidden] { display: none !important; }
.sotd-kategorie-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sotd-kategorie-name { font-weight: 600; font-size: .9375rem; }
.sotd-mehr { min-height: 32px; padding: 4px 6px; border: 0; background: none; color: var(--gold-text); font-size: .8125rem; font-weight: 600; cursor: pointer; }
.sotd-mehr:hover, .sotd-mehr:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.sotd-zeilen { display: flex; flex-direction: column; gap: 8px; }
.sotd-zeile { display: flex; gap: 8px; align-items: center; }
.sotd-zeile > * { min-width: 0; }
.sotd-suche { position: relative; flex: 1; min-width: 0; }
.sotd-suche input[type="text"] { padding-right: 92px; }
.sotd-quelle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text2); pointer-events: none; }
.sotd-quelle[data-sotd-quelle="katalog"] { color: var(--care); }
.sotd-quelle[data-sotd-quelle=""] { display: none; }
.sotd-nutzung-feld { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--text2); flex: none; }
.sotd-nutzung-feld .sotd-nutzung { width: 64px !important; text-align: center; }
.sotd-weg { flex: none; width: 40px; height: 40px; border: 0; background: none; color: var(--text2); font-size: 1.25rem; line-height: 1; cursor: pointer; border-radius: 6px; }
.sotd-weg:hover, .sotd-weg:focus-visible { background: var(--hervor); color: var(--text); }
.sotd-zusatz-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 14px; }
.sotd-zusatz-knoepfe .chip { cursor: pointer; min-height: 32px; color: var(--text); }
.sotd-zusatz-knoepfe .chip:hover { border-color: var(--gold); }
/* Ab v5.40: Würfeln mit Behalten, Verlauf je Zeile, „+1“ für die Klinge, Ergebnis der Rasur als Wahlknöpfe */
.sotd-wuerfel-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 18px; border-bottom: 1px solid var(--linie); }
.sotd-wuerfel { min-height: 40px; padding: 6px 14px; border: 1px solid var(--gold); border-radius: 999px; background: var(--flaeche); color: var(--text); font-weight: 700; cursor: pointer; }
.sotd-wuerfel:hover, .sotd-wuerfel:focus-visible { background: var(--hervor); }
.sotd-behalten { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: .8125rem; color: var(--text2); cursor: pointer; }
.sotd-behalten input { width: 16px; height: 16px; margin: 0; }
.sotd-behalten input:checked + span { color: var(--text); font-weight: 600; }
.sotd-kategorie-kopf .sotd-behalten + .sotd-mehr { margin-left: 4px; }
.sotd-zeile { flex-wrap: wrap; }
.sotd-verlauf { flex: 0 0 100%; color: var(--text2); font-size: .8125rem; margin-top: -2px; }
.sotd-verlauf[hidden], .sotd-plus[hidden] { display: none !important; }
.sotd-plus { flex: none; min-width: 44px; height: 40px; padding: 0 8px; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); color: var(--text); font-weight: 700; cursor: pointer; }
.sotd-plus:hover, .sotd-plus:focus-visible { border-color: var(--gold); }
.sotd-ergebnis { border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); padding: 12px 18px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sotd-ergebnis legend { font-weight: 600; padding: 0 4px; }
.sotd-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.sotd-wahl label { position: relative; }
.sotd-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sotd-wahl span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); cursor: pointer; font-weight: 600; font-size: .875rem; }
.sotd-wahl input:checked + span { background: var(--text); color: var(--flaeche); border-color: var(--text); }
.sotd-wahl input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.sotd-wahl-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sotd-wahl-name { font-weight: 600; font-size: .875rem; }
.sotd-wurf p { margin: 0; }
.sotd-wurf p + p { margin-top: 4px; }
.sotd-guete { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--hervor); font-size: .75rem; font-weight: 700; }
.sotd-vorlage { display: inline-block; margin-top: 2px; font-size: .8125rem; }
/* SOTW (ab v5.41): Woche mit sieben Tagen, Plan und Rückblick */
.sotw-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 16px 0 10px; }
.sotw-zeitraum { font-size: 1.125rem; margin: 0; flex: 1; text-align: center; min-width: 0; }
.sotw-jetzt { flex-basis: 100%; text-align: center; }
.sotw-tage { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); }
.sotw-tag { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 10px 16px; padding: 12px 18px; border-bottom: 1px solid var(--linie); }
.sotw-tag:last-child { border-bottom: 0; }
.sotw-heute { background: var(--hervor); }
.sotw-tag-kopf { display: flex; flex-direction: column; gap: 2px; }
.sotw-tag-kopf span { color: var(--text2); font-size: .8125rem; }
.sotw-tag-kopf .sotw-heute-marke { color: var(--gold-text); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .6875rem; }
.sotw-tag-inhalt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sotw-rasur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sotw-rasur > a { min-width: 0; flex: 1 1 260px; }
.sotw-beste-form { margin: 0; }
.sotw-beste { min-width: 40px; min-height: 40px; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--gold-text); font-size: 1.125rem; cursor: pointer; }
.sotw-beste[aria-pressed="true"] { border-color: var(--gold); background: var(--hervor); }
.sotw-plan { color: var(--text2); }
.sotw-plan-marke { display: inline-block; margin-right: 6px; padding: 1px 8px; border: 1px dashed var(--gold); border-radius: 999px; color: var(--gold-text); font-size: .75rem; font-weight: 700; }
.sotw-tag-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.sotw-tag-aktionen .button, .sotw-tag-aktionen button { min-height: 40px; }
.sotw-leer { margin: 0; color: var(--text2); font-size: .875rem; }
.sotw-planen, .sotw-rueckblick { margin-top: 24px; }
.sotw-planen form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sotw-gleich { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 14px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sotw-gleich legend { font-weight: 600; padding: 0 4px; }
/* v5.47: Wochenbeginn, Wochensetup, im Voraus eingetragen, Güte nach der Rasur */
.sotw-kw { color: var(--text2); font-size: .8125rem; font-weight: 600; }
.sotw-start { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; font-size: .875rem; }
.sotw-start select { margin-left: 6px; }
.sotw-start.mit-skript [data-sofort-knopf] { display: none; }
.sotw-setup { border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); padding: 14px 18px; margin: 0 0 16px; }
.sotw-setup.hat-setup { border-color: var(--gold); }
.sotw-setup-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sotw-setup-kopf h2 { margin: 0; font-size: 1.125rem; }
.sotw-gesperrt { color: var(--gold-text); font-size: .8125rem; font-weight: 700; }
.sotw-setup-titel { margin: 10px 0 0; }
.sotw-setup-liste { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sotw-setup-kat { display: inline-block; min-width: 9em; color: var(--text2); font-size: .8125rem; }
.sotw-setup-notiz { margin: 6px 0 10px; color: var(--text2); }
.sotw-setup-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 4px; }
.sotw-setup-aktionen .button, .sotw-setup-aktionen button { min-height: 40px; }
.sotw-setup-export { margin-top: 10px; }
.sotw-setup-export summary { cursor: pointer; font-weight: 600; }
.sotw-setup-marke { border-style: solid; }
.sotw-link { text-decoration: none; font-size: .875rem; margin-left: 2px; }
.sotw-setup:not(.links-an) .sotw-link { display: none; }
.sotw-auto { margin: 8px 0 4px; }
.sotw-auto-tag { margin: 4px 0 0; color: var(--text2); }
.sotd-setup-feld { border: 0; padding: 0; margin: 0; min-width: 0; }
.sotd-setup-feld:disabled { opacity: .7; }
.sotd-letztes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 10px; }
.sotw-weg-frage { margin: 6px 0 0; }
.sotw-weg-frage summary { display: inline-block; cursor: pointer; }
.sotw-weg-frage form { margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px; }
.sotw-weg-frage p { margin: 0 0 8px; }
.sotd-gesperrt-hinweis { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--linie); border-radius: 8px; background: var(--hervor); font-size: .875rem; }
.sotw-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 8px; font-size: .875rem; }
.sotw-links.mit-skript [data-sofort-knopf] { display: none; }
.sotw-voraus { display: inline-block; padding: 1px 8px; border: 1px dashed var(--linie); border-radius: 999px; color: var(--text2); font-size: .75rem; font-weight: 700; }
.sotw-guete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; flex-basis: 100%; margin: 0; }
.sotw-guete-frage { color: var(--text2); font-size: .8125rem; }
.sotw-guete button { min-height: 36px; min-width: 52px; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--text); font-weight: 700; font-size: .8125rem; cursor: pointer; }
.sotw-guete button[aria-pressed="true"] { border-color: var(--gold); background: var(--hervor); }
@media (max-width: 560px) { .sotw-tag { grid-template-columns: minmax(0, 1fr); gap: 6px; } .sotw-tag-kopf { flex-direction: row; align-items: baseline; gap: 8px; } .sotw-setup-kat { display: block; min-width: 0; } }
/* SOTD-Statistik (ab v5.42): Kacheln, Kalender, Balken – Maße der SVG als Attribut, Farben hier */
.stat-zeitraum { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.stat-zeitraum .chip { min-height: 36px; display: inline-flex; align-items: center; padding: 4px 14px; color: var(--text); text-decoration: none; font-weight: 600; }
.stat-zeitraum .chip[aria-current="page"] { background: var(--text); color: var(--flaeche); border-color: var(--text); }
.stat-kacheln { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 10px; }
.stat-kacheln li { border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-kacheln strong { font-size: 1.625rem; line-height: 1.1; }
.stat-kacheln span { color: var(--text2); font-size: .8125rem; }
.stat-block { margin-top: 26px; }
.stat-kalender-rahmen { overflow-x: auto; position: relative; padding-bottom: 4px; }
.stat-kalender { display: block; max-width: none; }
.stat-kalender-tag { font: 600 12px "DM Sans", sans-serif; fill: var(--text2); }
/* Ab v5.57 jede Güte in eigener Farbe (Wunsch des Betreibers) – feste Farben, die hell und dunkel gleich gut unterscheidbar sind */
.stat-k.k0, .stat-l.k0 { fill: var(--linie); background: var(--linie); }
.stat-k.k1, .stat-l.k1 { fill: #c9a96a; background: #c9a96a; }
.stat-k.k-bbs, .stat-l.k-bbs { fill: #2f9e5b; background: #2f9e5b; }
.stat-k.k-dfs, .stat-l.k-dfs { fill: #3b78d8; background: #3b78d8; }
.stat-k.k-ccs, .stat-l.k-ccs { fill: #e07b2b; background: #e07b2b; }
.stat-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--text2); font-size: .8125rem; margin: 8px 0 0; }
.stat-l { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; }
.stat-legende > span { display: inline-flex; align-items: center; gap: 6px; }
/* Ab v5.58 die Rasuren eines Tags neben dem Kalender – unter 900 px darunter */
.stat-kalender-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 24px; align-items: start; }
@media (min-width: 900px) { .stat-kalender-spalten { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); } .stat-tag { position: sticky; top: 90px; } }
.stat-kalender-links { min-width: 0; }
.stat-tag { border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); padding: 14px 16px; min-width: 0; }
.stat-tag h3 { margin: 0 0 8px; font-size: 1rem; }
.stat-tag h4 { margin: 0 0 6px; font-size: .9375rem; }
.stat-tag p { margin: 0; }
.stat-tag-rasur + .stat-tag-rasur { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.stat-tag .konto-daten { margin: 0 0 8px; font-size: .875rem; }
.stat-tag-notiz { margin: 0 0 8px; }
.stat-tag-links { font-size: .875rem; }
.stat-k-link { cursor: pointer; }
.stat-k-link:hover .stat-k, .stat-k-link:focus-visible .stat-k { stroke: var(--text); stroke-width: 1.5; }
.stat-k.gewaehlt { stroke: var(--text); stroke-width: 2.5; }
.stat-k-link:focus-visible { outline: none; }
.stat-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 28px; }
@media (min-width: 760px) { .stat-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.stat-spalten h3, .stat-feld h3 { font-size: .9375rem; margin: 14px 0 8px; }
.stat-balken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.stat-balken li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 3rem); align-items: center; gap: 10px; }
.stat-balken.stat-ohne-zahl li { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
.stat-balken.stat-ohne-zahl .stat-zahl { display: none; }
.stat-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
.stat-bar { width: 100%; height: 10px; display: block; }
.stat-bar-grund { fill: var(--hervor); }
.stat-bar-wert { fill: var(--gold); }
.stat-zahl { text-align: right; font-weight: 700; font-size: .875rem; }
.stat-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.stat-feld { border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); padding: 4px 14px 12px; min-width: 0; }
.stat-feld ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; font-size: .875rem; }
.stat-feld li { overflow-wrap: anywhere; }
.stat-feld li strong { color: var(--gold-text); }
@media (max-width: 560px) { .stat-balken li { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) minmax(0, 2.5rem); } .stat-balken.stat-ohne-zahl li { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); } }
.sotd-setup > .sotd-kategorie:last-of-type { border-bottom: 0; }
.sotd-panel { top: calc(100% + 4px); }
.sotd-panel .vorschlag-option { min-height: 44px; cursor: pointer; }
.sotd-panel .vorschlag-option[aria-disabled="true"] { opacity: .55; cursor: default; }
.sotd-panel .sotd-eigen strong { font-style: italic; }
.sotd-notiz summary { cursor: pointer; font-weight: 600; }
.sotd-notiz-voll { font-weight: 400; color: var(--text2); }
.sotd-notiz textarea { margin-top: 8px; }
.sotd-seite { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sotd-vorschau > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.sotd-vorschau-bild .sotd-leinwand { width: 100%; max-width: 100%; margin: 6px 0 0; box-shadow: var(--schatten); }
.sotd-optionen { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 14px 12px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sotd-optionen legend { font-weight: 600; padding: 0 4px; }
.sotd-optionen-reihe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sotd-optionen-reihe label { font-weight: 600; display: flex; flex-direction: column; gap: 4px; font-size: .875rem; }
.sotd-optionen .check { flex-direction: row; font-weight: 400; }
.sotd-aktionen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sotd-aktionen button { min-height: 46px; }
.sotd-export { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.sotd-export label { font-weight: 600; }
.sotd-export textarea { width: 100%; font: .875rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; padding: 10px; border: 1px solid var(--linie); border-radius: 5px; background: var(--flaeche); color: var(--text); resize: vertical; }
.sotd-export button { align-self: flex-start; }
/* Ansicht einer SOTD (ab v4.80): Bild links, Bedienung rechts in Gruppen wie im Editor; darunter abgesetzt das Löschen */
.sotd-bild { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; margin: 12px 0 0; }
@media (min-width: 900px) { .sotd-bild { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; } }
.sotd-bild-steuerung { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sotd-bild-steuerung[hidden] { display: none !important; }
.sotd-bild select { width: 100%; min-height: 40px; }
.sotd-foto-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.sotd-foto-wahl { cursor: pointer; }
.sotd-foto-wahl:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.sotd-foto-name { margin: 0; font-size: .875rem; color: var(--text2); overflow-wrap: anywhere; }
.sotd-laden { width: 100%; min-height: 48px; }
.sotd-leinwand { display: block; max-width: min(100%, 540px); height: auto; border: 1px solid var(--linie); border-radius: 6px; margin: 0; }
.sotd-bild .sotd-leinwand { max-width: 100%; box-shadow: var(--schatten); }
.sotd-gefahr { margin: 36px 0 0; padding: 16px 18px; border: 1px solid var(--linie); border-radius: 12px; }
.sotd-gefahr h2 { font-size: 1.0625rem; margin: 0 0 4px; }
.sotd-gefahr p { margin: 0; }
.sotd-gefahr form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 12px; }
.sotd-gefahr .check { display: flex; align-items: center; gap: 8px; }
.sotd-liste small { flex-basis: 100%; }
@media (max-width: 760px) {
  .sotd-kopf, .sotd-aktionen, .sotd-optionen-reihe { grid-template-columns: minmax(0, 1fr); }
  .sotd-zeile { flex-wrap: wrap; } .sotd-suche { flex-basis: calc(100% - 48px); } .sotd-nutzung-feld { order: 3; }
  /* Ab v5.40: „+1“ steht in der zweiten Zeile neben „Rasur Nr.“, der Verlauf darunter; im Kopf bleiben „Behalten“ und „+ Weitere …“ je ganz */
  .sotd-plus { order: 3; } .sotd-verlauf { order: 4; }
  .sotd-kategorie-kopf { flex-wrap: wrap; row-gap: 2px; } .sotd-behalten, .sotd-mehr { white-space: nowrap; } .sotd-kategorie-kopf .sotd-mehr, .sotd-kategorie-kopf .sotd-behalten + .sotd-mehr { margin-left: auto; }
  .sotd-kategorie, .sotd-setup-kopf, .sotd-zusatz-knoepfe { padding-left: 12px; padding-right: 12px; }
  .bewertung-werte > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .beitrag-tabelle thead { display: none; }
  .beitrag-tabelle tr { display: block; border-bottom: 1px solid var(--linie); padding: 6px 0; }
  .beitrag-tabelle td { display: block; border: 0; padding: 2px 0; }
}

/* Mitgliederbereich, neu gestaltet (ab v4.26, Wunsch des Betreibers: „optisch und farblich aufpeppen … der User verbringt dort sehr viel Zeit“).
   Eigene Tokens für hell und dunkel; Breiten von Balken stehen als SVG-Attribut, nie als style= (CSP). */
:root {
  --m-held-a: #f3e6c8; --m-held-b: #e2eef1; --m-held-text: #222931; --m-karte: #ffffff; --m-rand: #e3e6ea;
  --m-gold: #c79a3a; --m-gold-hell: #f1cf7a; --m-gruen: #1d8a5a; --m-blau: #3567c2; --m-lila: #7a52b8; --m-rot: #c0423f;
  --m-balken-grund: #e9ebee; --m-balken-a: #e0a63a; --m-balken-b: #e9576b; --m-tip: #222931; --m-tip-text: #fdfdfd;
  --m-avatar-0: #d9822b; --m-avatar-1: #3c8dbc; --m-avatar-2: #5b9a4a; --m-avatar-3: #9b59b6; --m-avatar-4: #c0423f; --m-avatar-5: #1f8a8a;
}
:root[data-theme="dark"] {
  --m-held-a: #2a2414; --m-held-b: #13283a; --m-held-text: #edf2fa; --m-karte: #18222f; --m-rand: #2c3a4d;
  --m-gold: #e6be62; --m-gold-hell: #f6dc98; --m-gruen: #5fd39a; --m-blau: #8fb2ff; --m-lila: #c3a6f2; --m-rot: #ff8a8a;
  --m-balken-grund: #26344a; --m-balken-a: #f2c14e; --m-balken-b: #ff7a8f; --m-tip: #edf2fa; --m-tip-text: #151e2b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-held-a: #2a2414; --m-held-b: #13283a; --m-held-text: #edf2fa; --m-karte: #18222f; --m-rand: #2c3a4d;
    --m-gold: #e6be62; --m-gold-hell: #f6dc98; --m-gruen: #5fd39a; --m-blau: #8fb2ff; --m-lila: #c3a6f2; --m-rot: #ff8a8a;
    --m-balken-grund: #26344a; --m-balken-a: #f2c14e; --m-balken-b: #ff7a8f; --m-tip: #edf2fa; --m-tip-text: #151e2b;
  }
}
.konto-form input[type="password"] { width: 100%; border: 1px solid var(--linie); border-radius: 5px; padding: 10px 12px; background: var(--flaeche); color: var(--text); font: inherit; }

/* Kopfkarte der Übersicht */
.konto-held { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin: 4px 0 14px; padding: 26px 28px;
  border-radius: 14px; color: var(--m-held-text); background: linear-gradient(120deg, var(--m-held-a), var(--m-held-b)); border: 1px solid var(--m-rand); }
.konto-held h1, .konto-held .held-titel { font: 38px/1.15 var(--zier); margin: 6px 0 6px; overflow-wrap: anywhere; }
.konto-held p { margin: 0; color: var(--text2); max-width: 60ch; }
.held-abzeichen { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; }
.held-abzeichen img { image-rendering: pixelated; display: block; filter: drop-shadow(0 3px 4px #00000030); }
/* Die Abzeichen stehen am rechten Rand: Erklärung rechtsbündig darunter, sonst schneidet .konto-seite sie ab (ab v4.38) */
.held-abzeichen .abzeichen[data-tip]::after { left: auto; right: 0; transform: none; bottom: auto; top: calc(100% + 8px); }
.held-punkte { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* Freundlich statt hart (ab v4.45): ein heller Grünton in hell, ein gedämpfter in dunkel – aus der Erfolgsfarbe gemischt */
.held-punkte li { font-size: .8rem; padding: 3px 10px; border-radius: 999px; color: var(--text); background: color-mix(in srgb, var(--erfolg) 22%, var(--flaeche)); border: 1px solid color-mix(in srgb, var(--erfolg) 45%, transparent); }
.held-punkte li strong { color: color-mix(in srgb, var(--erfolg) 70%, var(--text)); }
.held-punkte li.minus { opacity: .75; }

/* Navigationsband: Kennung, Reiter mit Symbol und Zähler, Abmelden */
.konto-band { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin: 6px 0 22px; padding: 8px 10px; border: 1px solid var(--m-rand);
  border-radius: 12px; background: var(--m-karte); box-shadow: var(--schatten); }
.konto-ich { display: flex; align-items: center; gap: 10px; color: var(--text); padding-right: 6px; min-width: 0; }
.konto-ich-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.konto-ich-text strong { overflow-wrap: anywhere; }
.konto-ich-text small { color: var(--text2); font-size: .75rem; }
.konto-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--m-avatar-0); }
.konto-avatar[data-farbe="1"] { background: var(--m-avatar-1); } .konto-avatar[data-farbe="2"] { background: var(--m-avatar-2); }
.konto-avatar[data-farbe="3"] { background: var(--m-avatar-3); } .konto-avatar[data-farbe="4"] { background: var(--m-avatar-4); }
.konto-avatar[data-farbe="5"] { background: var(--m-avatar-5); }
.konto-band .konto-nav { display: flex; flex-wrap: wrap; gap: 4px; border: 0; margin: 0; flex: 1 1 auto; }
.konto-band .konto-nav > a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 0; border-radius: 999px; font-weight: 600; font-size: .875rem;
  color: var(--text2); white-space: nowrap; }
.konto-band .konto-nav > a svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.konto-band .konto-nav > a:hover { background: var(--hervor); color: var(--text); }
.konto-band .konto-nav > a[aria-current="page"] { background: var(--text); color: var(--flaeche); }
.konto-nav-zahl { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--m-rot); color: #fff; font-size: .75rem; font-weight: 700;
  display: inline-grid; place-items: center; }
.konto-band .konto-abmelden { margin-left: auto; }

/* Raster: Inhalt links, Punkte rechts */
.konto-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 22px; align-items: start; }
.konto-haupt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.konto-karte-block { border: 1px solid var(--m-rand); background: var(--m-karte); border-radius: 12px; padding: 16px 20px; margin: 8px 0; }
.konto-karte-block h2 { font-size: 1.125rem; margin: 0 0 6px; }
/* Übersicht (ab v4.82, Entwurf des Betreibers): ruhige Karten mit Kopfzeile, feinen Trennlinien und Platz statt Kacheln */
.uebersicht-karte { padding: 20px 22px; margin: 0 0 18px; }
.karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--linie); }
.karte-kopf h2 { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.karte-zahl { font-weight: 400; font-size: .8125rem; color: var(--text2); }
.karte-kopf .button.primary { min-height: 40px; padding: 8px 16px; }
.karte-kopf .textlink { font-size: .875rem; }
.rasur-titel { font: 26px/1.2 var(--zier); margin: 6px 0 10px; }
.rasur-titel a { color: inherit; text-decoration: none; }
.rasur-titel a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rasur-teile { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; color: var(--text2); font-size: .9375rem; }
.karte-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; font-size: .9375rem; }
.kollektion-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--linie); }
.kollektion-zahlen a { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; border-radius: 8px; padding: 4px 6px; margin: -4px -6px; }
.kollektion-zahlen a:hover { background: var(--hervor); }
.kollektion-zahlen strong { font: 32px/1.1 var(--zier); }
.kollektion-zahlen span { font-size: .8125rem; color: var(--text2); overflow-wrap: anywhere; }
.kollektion-zuletzt p { margin: 6px 0 0; display: flex; flex-direction: column; gap: 2px; }
.kollektion-zuletzt small { color: var(--text2); }
.punkte-kompakt h2 { font-size: 1.125rem; margin: 0 0 16px; }
.punkte-level { display: flex; align-items: center; gap: 14px; }
.punkte-level img { image-rendering: pixelated; flex: none; }
.punkte-level span { display: flex; flex-direction: column; gap: 2px; }
.punkte-level small { font-size: .6875rem; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .6px; }
.punkte-level strong { font-size: 1.0625rem; }
.punkte-kompakt .punkte-zahl { margin: 16px 0 6px; }
.punkte-kompakt .punkte-zahl strong { font-size: 34px; }
.punkte-max { margin: 0 0 4px; color: var(--gold-text); font-weight: 600; font-size: .9375rem; }
.punkte-zwischen { font-size: .75rem !important; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .6px; margin: 20px 0 10px !important; }
.abzeichen-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.abzeichen-chips .abzeichen { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 8px; font-size: .8125rem; font-weight: 600;
  background: color-mix(in srgb, var(--m-gold) 16%, var(--m-karte)); border: 1px solid color-mix(in srgb, var(--m-gold) 30%, transparent); }
.abzeichen-chips .abzeichen { flex-direction: row; text-align: left; width: auto; min-width: 0; }
.abzeichen-gross { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.abzeichen-gross img { image-rendering: pixelated; filter: drop-shadow(0 3px 4px #00000030); }
.abzeichen-gross li:first-child .abzeichen[data-tip]::after { left: 0; transform: none; }
/* Unterseiten des Mitgliederbereichs (ab v4.83, Layoutempfehlung des Betreibers): kompakter Kopf mit höchstens einer Aktion rechts, Reiter,
   Werkzeugleiste, ruhige Listen; Menüs als <details>, die ohne Skript funktionieren */
.konto-seitenkopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; margin: 8px 0 18px; }
.konto-seitenkopf h1 { font: 38px/1.15 var(--zier); margin: 0 0 6px; }
.konto-seitenkopf p { margin: 0; color: var(--text2); }
.konto-seitenkopf .button { white-space: nowrap; }
.konto-tabs { flex-wrap: wrap; gap: 4px; border-bottom-width: 1px; margin-bottom: 18px; }
.konto-tabs > a { padding: 10px 14px; border-radius: 8px 8px 0 0; border-bottom-width: 2px; font-size: .9375rem; }
.konto-werkzeuge { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.konto-werkzeuge label { flex: 1 1 200px; max-width: 280px; min-width: 0; }
.konto-werkzeuge .konto-werkzeuge-suche { flex: 3 1 260px; max-width: none; }
.konto-werkzeuge input, .konto-werkzeuge select { width: 100%; min-height: 44px; border: 1px solid var(--linie); border-radius: 8px; padding: 8px 12px; background: var(--flaeche); color: var(--text); }
.konto-werkzeuge.mit-skript [data-sofort-knopf] { display: none; }
.sammlung-liste { border: 1px solid var(--m-rand); border-radius: 12px; background: var(--m-karte); padding: 0 20px; }
.sammlung-liste > li { padding: 16px 0; }
.sammlung-liste > li:last-child { border-bottom: 0; }
.sammlung-name a, .sammlung-name > span { font-size: 1.0625rem; overflow-wrap: anywhere; }
.sammlung-rechts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sammlung-zustaende { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sammlung-herz button { width: 40px; height: 40px; min-height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.sammlung-herz svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.sammlung-herz button[aria-pressed="true"] { color: var(--m-rot); border-color: color-mix(in srgb, var(--m-rot) 40%, var(--linie)); }
.sammlung-herz button[aria-pressed="true"] svg { fill: currentColor; }
.aktionen-menue { position: relative; }
.aktionen-menue > summary { list-style: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--linie);
  border-radius: 8px; background: var(--flaeche); cursor: pointer; font-size: 1.25rem; line-height: 1; }
.aktionen-menue > summary::-webkit-details-marker { display: none; }
.aktionen-menue[open] > summary { background: var(--hervor); }
.aktionen-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: max-content; min-width: 230px; max-width: min(300px, 86vw); padding: 6px;
  border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 2px; }
.aktionen-liste form { display: flex; flex-direction: column; gap: 2px; }
.aktionen-liste button, .aktionen-archiv > summary { min-height: 40px; padding: 8px 12px; border: 0; border-radius: 6px; background: none; text-align: left; font-size: .9375rem; cursor: pointer; }
.aktionen-liste button:hover, .aktionen-archiv > summary:hover { background: var(--hervor); }
.aktionen-archiv { border-top: 1px solid var(--linie); margin-top: 4px; padding-top: 4px; }
.aktionen-archiv > summary { display: block; list-style: none; }
.aktionen-archiv > summary::-webkit-details-marker { display: none; }
.aktionen-archiv form { padding: 6px 4px 4px; gap: 8px; }
.aktionen-archiv select { width: 100%; min-height: 40px; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); color: var(--text); }
.aktionen-archiv button { border: 1px solid var(--linie); text-align: center; }
/* Kollektion ab v5.17: Abschnitte je Produktart, Symbol vor dem Namen, Notiz hinter dem Stift */
.sammlung-art + .sammlung-art { margin-top: 22px; }
.sammlung-art-titel { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font-size: 1.125rem; }
.sammlung-art-titel span { color: var(--text2); font-size: .875rem; font-weight: 600; }
/* SOTD aus der Kollektion (ab v5.18): Kopf mit Anleitung, je Eintrag ein Umschalter, unten eine Leiste, die beim Blättern sichtbar bleibt */
.sotd-wahl-kopf { margin: 6px 0 16px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--linie)); border-radius: 12px; background: var(--hervor); }
.sotd-wahl-kopf h2 { margin: 0 0 4px; font-size: 1.0625rem; }
.sotd-wahl-kopf p { margin: 0; color: var(--text2); font-size: .9rem; }
.sotd-wahl-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche); cursor: pointer; font-weight: 600; font-size: .875rem; }
.sotd-wahl-knopf input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold-text); }
.sotd-wahl-knopf:has(input:checked) { background: var(--text); color: var(--flaeche); border-color: var(--text); }
.sotd-wahl-knopf:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.sotd-wahl-leiste { position: sticky; bottom: 0; z-index: 20; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 18px; padding: 12px 0;
  background: var(--umgebung); border-top: 1px solid var(--linie); }
.sotd-notiz-titel { margin: 18px 0 6px; font-size: 1rem; }
/* „Neu hinzugefügt“: der Umschalter Liste/Galerie rechts neben den Filtern */
.neu-filter .ansicht-wahl { margin-left: auto; align-self: center; }
.sammlung-kopf { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.sammlung-kopf > img.sym { margin-top: 2px; }
.sammlung-familie .mit-sym { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.sammlung-notiz-menue > summary svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.sammlung-notiz-menue.hat-notiz > summary { color: var(--gold-text); border-color: color-mix(in srgb, var(--gold) 55%, var(--linie)); }
/* Meine Düfte (ab v5.38): eine Zeile je Duft – Name und Marke, Familie, prägnanteste Noten, Zahlen –, aufgeklappt Pyramide und Produkte ohne Symbole.
   Die ganze Zeile ist der Schalter; der Name bleibt ein Link. Am Telefon zwei Zeilen. */
.duft-liste > li.duft-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 10px; padding: 6px 0; }
.duft-zeile-klappe > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, 1.5fr) auto;
  align-items: center; gap: 12px; min-height: 44px; padding: 4px 4px 4px 22px; position: relative; border-radius: 6px; }
.duft-zeile-klappe > summary::-webkit-details-marker { display: none; }
.duft-zeile-klappe > summary::before { content: '›'; position: absolute; left: 6px; top: 50%; transform: translateY(-55%); color: var(--text2); font-size: 1.1rem; transition: transform .15s; }
.duft-zeile-klappe[open] > summary::before { transform: translateY(-45%) rotate(90deg); }
.duft-zeile-klappe > summary:hover { background: var(--hervor); }
.dz-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-name > a:first-child, .dz-name > span:first-child { font-weight: 700; }
.dz-marke { margin-left: 8px; color: var(--text2); font-size: .85rem; }
a.dz-marke { text-decoration: none; } a.dz-marke:hover { text-decoration: underline; }
.dz-familie { min-width: 0; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-familie .mit-sym { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dz-familie .mit-sym img { flex: none; }
.dz-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-noten { min-width: 0; color: var(--text2); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-zahl { color: var(--text2); font-size: .8rem; white-space: nowrap; }
.dz-inhalt { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px 24px; padding: 8px 4px 12px 22px; }
.dz-inhalt h3 { margin: 0 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; color: var(--text2); }
.dz-weg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 44px; padding: 10px 4px 4px 22px; }
.dz-weg small { color: var(--text2); }
.dz-aktion { display: flex; align-items: center; min-height: 44px; }
@media (max-width: 640px) {
  /* Zweite Zeile: die Familie so breit, wie sie braucht, die Zahlen nehmen den Rest und kürzen sich */
  .duft-zeile-klappe > summary { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); grid-template-areas: 'name name' 'familie zahl'; gap: 2px 12px; padding-top: 6px; padding-bottom: 6px; }
  .dz-name { grid-area: name; } .dz-familie { grid-area: familie; } .dz-zahl { grid-area: zahl; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .dz-noten { display: none; }
  .duft-zeile-klappe > summary::before { top: 14px; transform: none; } .duft-zeile-klappe[open] > summary::before { transform: rotate(90deg); }
  .dz-inhalt { grid-template-columns: minmax(0, 1fr); padding-left: 8px; }
}
.duft-ebenen { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: .9rem; }
.duft-ebenen dt { color: var(--text2); font-weight: 600; }
.duft-ebenen dd { margin: 0; grid-column: 2; overflow-wrap: anywhere; }
.duft-ebenen dt + dd { grid-column: 2; }
.duft-ebenen > dd:first-child { grid-column: 1 / -1; }
.duft-produkte { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.duft-produkte small { color: var(--text2); }
.duft-entfernen button { width: 40px; height: 40px; min-height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 1.25rem; line-height: 1; }
/* Duftanalyse (ab v5.38): Kasten „Dein Duftprofil“ bzw. „Auf einen Blick“ – das Urteil zuerst und kräftiger, der Rest aufklappbar; Nähe je Paar als
   Skala aus fünf Feldern (Breiten nie als style=, CSP); Empfehlungen als Karten mit Begründung und Speichern-Knopf. */
.duft-analyse { margin: 4px 0 18px; padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--care) 35%, var(--linie)); border-left: 4px solid var(--care);
  border-radius: 12px; background: var(--care-flaeche); }
.duft-analyse h2 { margin: 0 0 8px; font-size: 1.0625rem; }
.duft-analyse h3 { margin: 14px 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; color: var(--text2); }
.analyse-blick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.analyse-blick li { position: relative; padding-left: 18px; line-height: 1.45; }
.analyse-blick li::before { content: ''; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--care); }
.analyse-blick li:first-child { font-weight: 650; }
.analyse-mehr { margin-top: 10px; }
.analyse-mehr > summary { cursor: pointer; font-weight: 600; font-size: .9rem; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; }
.analyse-mehr > summary span { color: var(--text2); font-weight: 500; }
.analyse-mehr ul { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: .925rem; }
.duft-analyse .data-note { margin: 12px 0 0; }
.analyse-paare { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.analyse-paare li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 9rem); align-items: center; gap: 12px; }
.paar-namen { min-width: 0; overflow-wrap: anywhere; }
.paar-stufe { color: var(--text2); }
/* Eigener Name (ab v5.39): v5.38 nannte die Nähe-Skala „.skala“ wie das Bewertungsformular (fieldset.skala) – beide Regeln griffen auf beide */
.naehe { display: inline-flex; gap: 3px; }
.naehe > span { width: 14px; height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--care) 18%, var(--flaeche)); }
.naehe-1 > span:nth-child(-n+1), .naehe-2 > span:nth-child(-n+2), .naehe-3 > span:nth-child(-n+3), .naehe-4 > span:nth-child(-n+4),
.naehe-5 > span { background: var(--care); }
.duft-empfehlungen { margin-top: 26px; }
.duft-empfehlungen h2 { margin: 0 0 4px; font-size: 1.125rem; }
.empf-lead { margin: 0 0 12px; color: var(--text2); font-size: .9rem; }
.empf-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.empf-karte { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--m-rand, var(--linie)); border-radius: 12px; background: var(--m-karte, var(--flaeche)); }
.empf-karte.empf-bruecke, .empf-karte.empf-neu { border-style: dashed; }
.empf-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.empf-kopf a { font-weight: 700; }
.empf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .85rem; }
.empf-meta .mit-sym { display: inline-flex; align-items: center; gap: 6px; }
.empf-meta .dz-marke { margin-left: 0; }
.empf-grund { margin: 2px 0 0; font-size: .9rem; line-height: 1.45; }
.empf-typen { margin: 0; color: var(--text2); font-size: .8rem; }
/* Ähnliche Düfte auf der Duftseite (ab v5.39): dieselben Karten wie die Empfehlungen, dazu die Nähe als Skala mit Wort */
.duft-aehnlich { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linie); }
.duft-aehnlich .data-note { margin: 0 0 12px; }
.aehnlich-stufe { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text2); }
.empf-merken { margin-top: auto; padding-top: 6px; }
.empf-merken button { min-height: 40px; padding: 6px 14px; border-radius: 999px; font-weight: 600; }
@media (max-width: 640px) {
  .duft-analyse { padding: 14px; }
  .analyse-paare li { grid-template-columns: minmax(0, 1fr) auto; }
  .paar-stufe { grid-column: 1 / -1; margin-top: -4px; font-size: .85rem; }
}
.duft-vergleich td small { display: block; color: var(--text2); font-size: .8rem; font-weight: 400; }
.duft-vergleich td .mit-sym { display: inline-flex; align-items: center; gap: 6px; }
.sammlung-notiz-menue.hat-notiz > summary svg path:first-child { fill: color-mix(in srgb, var(--gold) 35%, transparent); }
.sammlung-notiz-menue .aktionen-liste { width: min(340px, 86vw); padding: 12px; }
.sammlung-notiz-menue form { gap: 10px; }
.sammlung-notiz-label { display: flex; flex-direction: column; gap: 6px; font-size: .875rem; font-weight: 600; }
.sammlung-notiz-label textarea { width: 100%; min-height: 96px; border: 1px solid var(--linie); border-radius: 6px; padding: 8px; background: var(--flaeche); color: var(--text); font: inherit; font-weight: 400; resize: vertical; }
.aktionen-liste .sammlung-notiz-speichern { border: 1px solid var(--linie); text-align: center; }
.chip.status-gut { background: color-mix(in srgb, var(--erfolg) 18%, var(--flaeche)); border-color: transparent; color: color-mix(in srgb, var(--erfolg) 75%, var(--text)); font-weight: 600; }
.chip.status-schlecht { background: color-mix(in srgb, var(--fehler) 14%, var(--flaeche)); border-color: transparent; color: color-mix(in srgb, var(--fehler) 80%, var(--text)); font-weight: 600; }
.chip.status-offen { background: var(--hervor); border-color: transparent; color: var(--gold-text); font-weight: 600; }
.chip.status-neutral { background: var(--hervor); border-color: transparent; color: var(--text2); font-weight: 600; }
.beitrag-liste { list-style: none; padding: 0 20px; margin: 0; border: 1px solid var(--m-rand); border-radius: 12px; background: var(--m-karte); }
.beitrag-liste > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 16px 0; border-bottom: 1px solid var(--listen-linie, var(--linie)); }
.beitrag-liste > li:last-child { border-bottom: 0; }
/* Neu entschieden (ab v5.53): einmal hervorgehoben, ohne die Zeile zu verschieben */
.beitrag-liste > li.ist-neu { background: var(--hervor); box-shadow: -10px 0 0 var(--hervor), 10px 0 0 var(--hervor); border-radius: 4px; }
.beitrag-kopf { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.beitrag-name { font-size: 1.0625rem; overflow-wrap: anywhere; }
.beitrag-kopf small { color: var(--text2); }
.beitrag-stand { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.beitrag-stand time { font-size: .8125rem; color: var(--text2); }
.beitrag-details { grid-column: 1 / -1; font-size: .9375rem; }
.beitrag-details summary { cursor: pointer; color: var(--text2); font-size: .875rem; }
.beitrag-felder { list-style: none; padding: 0; margin: 10px 0 6px; display: flex; flex-direction: column; gap: 4px; }
.beitrag-felder span { font-weight: 600; }
.postfach { border: 1px solid var(--m-rand); border-radius: 12px; background: var(--m-karte); padding: 6px; margin: 0 0 12px; }
.postfach li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border: 0; border-radius: 8px; color: inherit; text-decoration: none; }
.postfach li a:hover { background: var(--hervor); }
.postfach li + li { border-top: 1px solid var(--listen-linie, var(--linie)); }
.postfach-art { min-width: 0; text-transform: none; letter-spacing: 0; font-size: .8125rem; color: var(--text2); }
.postfach time { margin-left: 0; justify-self: end; }
.postfach strong { grid-column: 1 / -1; font-size: 1.0625rem; overflow-wrap: anywhere; }
.postfach-zeichen { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.postfach-zeichen:empty { display: none; }
.nachricht-karte { border: 1px solid var(--m-rand); border-radius: 12px; background: var(--m-karte); padding: 20px 22px; margin: 0 0 12px; }
.nachricht-karte h2 { font-size: 1.375rem; margin: 6px 0 10px; }
.nachricht-karte > p:first-child { margin: 0 0 14px; }
.konto-bereich { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.karte-mehr { border-top: 1px solid var(--linie); margin-top: 14px; padding-top: 12px; }
.karte-mehr > summary { cursor: pointer; font-weight: 600; }
.karte-mehr[open] > summary { margin-bottom: 10px; }
.einstellungen-gruppe { border: 0; padding: 0; margin: 4px 0; display: flex; flex-direction: column; gap: 4px; }
.einstellungen-gruppe legend { font-weight: 600; margin-bottom: 4px; }
.geraete-liste { list-style: none; padding: 0; margin: 0; }
.geraete-liste li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--listen-linie, var(--linie)); }
.geraete-liste li div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.geraete-liste small { color: var(--text2); }
.textknopf { min-height: 36px; padding: 4px 0; border: 0; background: none; color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }
.karte-fuss { margin-top: 14px; }
.loeschen-bereich { border-top: 1px solid var(--linie); padding-top: 12px; }
.loeschen-bereich > summary { cursor: pointer; font-weight: 600; color: var(--fehler); margin-bottom: 12px; }
@media (max-width: 640px) {
  .konto-seitenkopf h1 { font-size: 30px; }
  .sammlung-liste, .beitrag-liste { padding: 0 14px; }
  .sammlung-liste > li, .beitrag-liste > li { grid-template-columns: minmax(0, 1fr); }
  .konto-werkzeuge label { max-width: none; }
  .beitrag-stand { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .aktionen-liste { right: 0; }
}
.abzeichen-chips img { image-rendering: pixelated; }
.punkte-mehr { border-top: 1px solid var(--linie); margin-top: 18px; padding-top: 12px; }
.punkte-mehr + .punkte-mehr { margin-top: 12px; }
.punkte-mehr summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--text2); }
.punkte-mehr summary:hover { color: var(--text); }
.punkte-mehr[open] summary { margin-bottom: 12px; }
@media (max-width: 560px) { .kollektion-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.letzte-rasur { margin: 4px 0; font-size: 1.0625rem; }
.konto-rueckfrage { border-left-color: var(--m-rot); }

/* Kacheln mit Akzentfarbe */
.konto-raster .konto-kacheln { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 4px 0 12px; }
.konto-kacheln a { --akzent: var(--m-gold); position: relative; overflow: hidden; border: 1px solid var(--m-rand); background: var(--m-karte); border-radius: 12px;
  padding: 16px 16px 14px; transition: transform .15s ease, box-shadow .15s ease; min-width: 0; }
.konto-kacheln a::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--akzent); }
.konto-kacheln a:hover { transform: translateY(-2px); box-shadow: var(--schatten); }
.konto-kacheln strong { color: var(--akzent); }
.konto-kacheln span { overflow-wrap: anywhere; hyphens: auto; }
.konto-kacheln a[data-akzent="care"] { --akzent: var(--care); } .konto-kacheln a[data-akzent="gear"] { --akzent: var(--gear); }
.konto-kacheln a[data-akzent="lila"] { --akzent: var(--m-lila); } .konto-kacheln a[data-akzent="rot"] { --akzent: var(--m-rot); }
.konto-kacheln a[data-akzent="grau"] { --akzent: var(--text2); }

/* Punkte, Stufe, Abzeichen */
.punkte-karte { border: 1px solid var(--m-rand); border-radius: 14px; padding: 18px 20px 20px; background: var(--m-karte); position: sticky; top: 16px;
  box-shadow: var(--schatten); }
.punkte-karte h3 { font-size: .9375rem; margin: 18px 0 8px; }
.punkte-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.punkte-zahl { margin: 2px 0 0; }
.punkte-zahl strong { font: 46px/1 var(--zier); background: linear-gradient(90deg, var(--m-balken-a), var(--m-balken-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.punkte-zahl span { color: var(--text2); font-weight: 600; }
.stufe-plakette { display: inline-flex; flex-direction: column; align-items: flex-end; padding: 6px 12px; border-radius: 10px; font-weight: 700; font-size: .875rem;
  background: color-mix(in srgb, var(--m-gold) 18%, var(--m-karte)); color: var(--text); border: 1px solid color-mix(in srgb, var(--m-gold) 45%, transparent); text-align: right; }
.stufe-plakette small { font-size: .6875rem; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .6px; }
.punkte-balken { display: block; width: 100%; height: 18px; margin: 14px 0 6px; }
.balken-grund { fill: var(--m-balken-grund); }
.verlauf-a { stop-color: var(--m-balken-a); } .verlauf-b { stop-color: var(--m-balken-b); }
.balken-fuellung { transform-origin: 0 50%; animation: balken-wachsen 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.mini-balken .balken-fuellung { fill: var(--m-gruen); }
/* Ab v4.47 ohne laufenden Glanz – er lenkte ab (Wunsch des Betreibers) */
.balken-glanz { display: none; }
@keyframes balken-wachsen { from { transform: scaleX(0); } }
@keyframes balken-glanz { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(130px); } }
.punkte-noch { margin: 4px 0 12px; font-size: .9375rem; }
.punkte-noch strong { color: var(--m-rot); }
.stufen-weg { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.stufen-weg li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; font-size: .6875rem; color: var(--text2); min-width: 0; }
.stufen-punkt { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8125rem; border: 2px solid var(--m-rand);
  background: var(--m-karte); color: var(--text2); }
.stufen-weg li.erreicht .stufen-punkt { background: var(--m-gruen); border-color: var(--m-gruen); color: #fff; }
.stufen-weg li.jetzt .stufen-punkt { background: var(--m-gold); border-color: var(--m-gold-hell); color: #1c1c1c; box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-gold) 30%, transparent);
  animation: stufe-puls 2.4s ease-in-out infinite; }
.stufen-weg li.jetzt { color: var(--text); font-weight: 700; }
.stufen-name { overflow-wrap: anywhere; hyphens: auto; line-height: 1.2; }
@keyframes stufe-puls { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--m-gold) 12%, transparent); } }
.abzeichen-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.abzeichen { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; cursor: help; outline-offset: 3px; }
.abzeichen img { image-rendering: pixelated; display: block; transition: transform .15s ease; }
.abzeichen:hover img, .abzeichen:focus-visible img { transform: translateY(-3px) scale(1.06); }
.abzeichen-name { font-size: .75rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.abzeichen.gesperrt img { filter: grayscale(1) opacity(.45); }
/* Erklärung beim Darüberfahren und beim Fokus (Tastatur) – aus data-tip, ohne Skript */
.abzeichen[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 220px;
  padding: 7px 10px; border-radius: 6px; background: var(--m-tip); color: var(--m-tip-text); font-size: .75rem; font-weight: 600; line-height: 1.35; text-align: center;
  display: none; pointer-events: none; z-index: 5; box-shadow: var(--schatten); }
.abzeichen[data-tip]:hover::after, .abzeichen[data-tip]:focus-visible::after { display: block; }
/* Mit Skript schwebt die Erklärung über der Seite und bleibt im Fenster (si.js, ab v4.93) – das ::after wurde am Rand einer Spalte abgeschnitten */
.js .abzeichen[data-tip]::after { display: none !important; }
.tip-schwebend { position: fixed; left: 0; top: 0; z-index: 1000; width: max-content; max-width: min(260px, calc(100vw - 16px)); padding: 7px 10px; border-radius: 6px;
  background: var(--m-tip); color: var(--m-tip-text); font-size: .75rem; font-weight: 600; line-height: 1.35; text-align: center; pointer-events: none; box-shadow: var(--schatten); }
/* Eine Erklärung am Rand darf die Seite nicht breiter machen (clip ist kein Scrollbereich – sticky bleibt). */
.konto-seite { overflow-x: clip; }
/* Der Bereich schneidet seitlich ab – ein Fokusrahmen außerhalb eines vollbreiten Felds fiel links und rechts weg (v4.84). Deshalb liegt er
   bei Feldern im Mitgliederbereich innen; Textfelder bekommen denselben Rahmen wie Eingabefelder. */
.konto-seite :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.abzeichen-ziele { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.abzeichen-ziele li { display: flex; gap: 12px; align-items: center; }
.ziel-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: .8125rem; }
.ziel-text small { color: var(--text2); }
.mini-balken { width: 100%; height: 6px; display: block; margin-top: 3px; }
.punkte-regeln { list-style: none; padding: 0; margin: 0; }
.punkte-regeln li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--m-rand); font-size: .875rem; }
.punkte-regeln strong { color: var(--m-gruen); }
.chip.neu { background: var(--m-rot); border-color: var(--m-rot); color: #fff; font-weight: 700; }

/* Einstellungen als Karten */
/* Ab v4.45 Spalten statt Raster: Karten verschiedener Höhe füllen die Lücken, statt jede Zeile auf die höchste Karte zu strecken */
.einstellungen-raster { columns: 3 300px; column-gap: 16px; }
.einstellungen-raster > .karte { break-inside: avoid; display: block; margin: 0 0 16px; }
.karte { border: 1px solid var(--m-rand); background: var(--m-karte); border-radius: 12px; padding: 16px 20px; min-width: 0; }
.karte h2 { font-size: 1.125rem; margin: 0 0 8px; }
.karte .konto-form { margin: 8px 0 0; }
.konto-raster .karte-breit, .grid-raster .karte-breit { grid-column: 1 / -1; }
.karte-gefahr { border-color: color-mix(in srgb, var(--fehler) 45%, var(--m-rand)); }
.karte-gefahr h2 { color: var(--fehler); }
.konto-daten dd { overflow-wrap: anywhere; }
.thema-wahl { border: 0; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.thema-wahl legend { font-weight: 600; font-size: .9375rem; margin-bottom: 6px; }
.thema-option { position: relative; display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 10px 6px; border: 1px solid var(--m-rand); border-radius: 10px;
  cursor: pointer; font-weight: 600; font-size: .8125rem; text-align: center; }
.thema-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.thema-option:has(input:checked) { border-color: var(--m-gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-gold) 40%, transparent); }
.thema-option:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 2px; }
.thema-vorschau { width: 100%; max-width: 72px; height: 40px; border-radius: 6px; border: 1px solid #00000022; background: linear-gradient(135deg, #fdfdfd 50%, #151e2b 50%); }
.thema-option[data-thema="light"] .thema-vorschau { background: linear-gradient(#e4b65f 0 30%, #fdfdfd 30%); }
.thema-option[data-thema="dark"] .thema-vorschau { background: linear-gradient(#e4b65f 0 30%, #151e2b 30%); }
.passwort-weg, .konto-passwort { margin-top: 12px; }
.passwort-weg summary, .konto-passwort summary { cursor: pointer; font-weight: 600; color: var(--text2); }

/* Gespräch an einem Beitrag */
.beitrag-gespraech { margin-top: 24px; border-top: 1px solid var(--m-rand); padding-top: 12px; }

@media (max-width: 960px) {
  .konto-raster { grid-template-columns: minmax(0, 1fr); }
  .punkte-karte { position: static; }
}
@media (max-width: 640px) {
  .konto-held { padding: 18px 16px; }
  .konto-held h1, .konto-held .held-titel { font-size: 30px; }
  .konto-band { padding: 8px; }
  .konto-band .konto-nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .konto-band .konto-abmelden { margin-left: 0; }
  .einstellungen-raster { columns: 1; }
}
/* Ab v4.26: Auswahllisten und lange deutsche Wörter dürfen eine Rasterspalte nicht aufsprengen – ein <select> ist sonst so breit wie sein längster
   Eintrag (SOTD-Zeile mit Produkten aus der Kollektion), ein langes Wort so breit wie es selbst. */
.sotd-editor select, .beitrag-zeile select, .konto-form select { min-width: 0; max-width: 100%; }
.sotd-zeile > *, .konto-daten > *, .bewertung-werte > div > * { min-width: 0; }

/* Kennung im Seitenkopf (ab v4.27): Anfangsbuchstabe, Name und „Mein Bereich“ statt eines bloßen Namens. */
.konto-kopf-link { display: inline-flex; align-items: center; gap: 9px; padding: 4px 12px 4px 4px; border-radius: 999px; color: var(--kopf-text);
  border: 1px solid color-mix(in srgb, var(--kopf-text) 22%, transparent); background: color-mix(in srgb, var(--kopf-text) 7%, transparent); transition: border-color .15s ease, background .15s ease; }
.konto-kopf-link:hover, .konto-kopf-link:focus-visible { border-color: var(--kopf-akzent); background: color-mix(in srgb, var(--kopf-akzent) 14%, transparent); color: var(--kopf-text); }
.konto-kopf-link .konto-avatar { width: 32px; height: 32px; font-size: .875rem; }
.konto-kopf-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.konto-kopf-text strong { font-size: .875rem; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-kopf-text small { font-size: .6875rem; font-weight: 600; color: var(--kopf-akzent); white-space: nowrap; }
@media (max-width: 560px) { .konto-kopf-text small { display: none; } .konto-kopf-link { padding-right: 8px; } }

/* Suchvorschläge (ab v4.27): Aufklappmenü unter jedem Suchfeld mit data-vorschlag, nach Bereichen gruppiert (Vorbild: GUI-Prototyp). */
.vorschlag-huelle { position: relative; }
.vorschlag-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche);
  box-shadow: 0 14px 40px #172b2430; overflow: hidden; color: var(--text); text-align: left; }
.vorschlag-panel[hidden] { display: none !important; }
.vorschlag-kontext { padding: 11px 16px 9px; color: var(--text2); font-size: .8125rem; border-bottom: 1px solid var(--linie); }
.vorschlag-liste { max-height: min(430px, 52dvh); overflow-y: auto; overscroll-behavior: contain; }
.vorschlag-gruppe { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px 6px; font-size: .75rem; font-weight: 700;
  letter-spacing: .65px; text-transform: uppercase; color: var(--care); }
.vorschlag-gruppe > span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text2); }
.vorschlag-option { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 16px; border-left: 3px solid transparent; color: var(--text); text-decoration: none; }
.vorschlag-option:hover { background: var(--hervor); color: var(--text); }
.vorschlag-option[aria-selected="true"] { background: var(--care-flaeche); border-left-color: var(--care); }
.vorschlag-option img { image-rendering: pixelated; flex: none; }
.vorschlag-text { min-width: 0; flex: 1; }
.vorschlag-text strong { display: block; font-size: 1rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.vorschlag-text > span { display: block; font-size: .8125rem; line-height: 1.45; color: var(--text2); margin-top: 2px; overflow-wrap: anywhere; }
.vorschlag-text mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.vorschlag-enter { visibility: hidden; color: var(--care); font-size: .875rem; }
.vorschlag-option[aria-selected="true"] .vorschlag-enter { visibility: visible; }
.vorschlag-fuss { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 7px 12px; padding: 11px 16px; border-top: 1px solid var(--linie);
  background: var(--hervor); font-size: .875rem; color: var(--text2); }
.vorschlag-fuss button { padding: 0; min-height: 0; border: 0; background: none; font-size: .875rem; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vorschlag-fuss small { font-size: .75rem; }
.vorschlag-fuss p { margin: 0; color: var(--text); width: 100%; overflow-wrap: anywhere; }
@media (max-width: 560px) { .vorschlag-fuss small, .vorschlag-enter { display: none; } .vorschlag-option { padding: 8px 11px; } }

/* Gesuchte Noten (ab v4.28): auf Karten und in Duftlisten immer dabei, vorn und hervorgehoben. */
.card-notes span.gewaehlt { background: var(--care-flaeche); color: var(--care-dunkel); font-weight: 700; box-shadow: inset 0 0 0 1px var(--care); }
strong.gewaehlt { color: var(--care-dunkel); font-weight: 700; }

/* ⊕ Merkliste auf den Karten (ab v4.29): rechts oben, gemerkt gefüllt mit Haken */
.merk-knopf { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text2); cursor: pointer; flex: none; }
.merk-knopf svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.merk-knopf .merk-haken { display: none; }
.merk-knopf:hover, .merk-knopf:focus-visible { color: var(--domain, var(--care)); }
.merk-knopf:focus-visible { outline: 2px solid var(--domain, var(--care)); outline-offset: 1px; }
.merk-knopf[aria-pressed="true"] { color: var(--domain, var(--care)); }
.merk-knopf[aria-pressed="true"] circle { fill: currentColor; }
.merk-knopf[aria-pressed="true"] .merk-plus { display: none; }
.merk-knopf[aria-pressed="true"] .merk-haken { display: inline; stroke: var(--flaeche); stroke-width: 2.4; }
.merk-knopf:disabled { opacity: .6; cursor: progress; }
/* Haus „Besitze ich“ (ab v5.19, bis v5.19 ein Regal) direkt neben dem ⊕; gewählt: Kreis gefüllt, Haus in der Flächenfarbe – wie der Haken des ⊕ */
.merk-knopf + .merk-knopf { margin-left: 2px; }
.besitz-knopf[aria-pressed="true"] .besitz-haus { stroke: var(--flaeche); stroke-width: 2; }
.tabelle-merk { white-space: nowrap; }

/* Galerie oder Liste (ab v4.32) */
.ansicht-wahl { display: inline-flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.ansicht-wahl button { border: 0; border-radius: 0; background: var(--flaeche); color: var(--text2); padding: 7px 12px; font: inherit; font-size: .85rem; cursor: pointer; }
.ansicht-wahl button + button { border-left: 1px solid var(--linie); }
.ansicht-wahl button[aria-pressed="true"] { background: var(--domain, var(--care)); color: var(--flaeche); font-weight: 650; }
.discovery-table-wrap { overflow-x: auto; margin-top: 12px; }
.discovery-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.discovery-table th, .discovery-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.discovery-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; color: var(--text2); font-weight: 650; }
.discovery-table tbody th { font-weight: 650; min-width: 180px; }
.discovery-table .tabelle-noten { min-width: 200px; color: var(--text2); }
.discovery-table .tabelle-noten strong.gewaehlt { color: var(--domain, var(--care)); }
.discovery-table .tabelle-merk { width: 44px; }
.discovery-table .nowrap { white-space: nowrap; }

/* Symbole bei Filtern und Arten (ab v4.64, Paket des Betreibers) – Pixelgrafik in 32 px, nie geglättet; Mitglieder können sie abschalten. */
img.sym { width: 32px; height: 32px; image-rendering: pixelated; flex: none; vertical-align: middle; }
.mit-sym { display: inline-flex; align-items: center; gap: 6px; }
/* Symbol und Badge der Art bleiben nebeneinander, auch in schmalen Tabellenspalten. */
.typ-mit-sym { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; }
.chip.mit-sym { padding-left: 4px; }
.category-links a img.sym { margin-right: 6px; }
.related-list a img.sym { margin-right: 6px; }

/* Elf Level mit Badges (ab v4.65): Plakette mit 64-px-Badge, der Weg bricht um statt elf schmale Spalten zu quetschen; noch nicht erreichte
   Level stehen blass da – sichtbar, was kommt, ohne es zu verwechseln. */
.level-plakette { flex-direction: row; align-items: center; gap: 10px; }
.level-plakette > span { display: flex; flex-direction: column; align-items: flex-end; }
.level-plakette img, .level-weg img { image-rendering: pixelated; flex: none; }
.level-weg { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px 6px; }
.level-weg li.offen img { filter: grayscale(1); opacity: .45; }
.level-weg li.jetzt img { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--m-gold) 70%, transparent)); }
.abzeichen-liste .abzeichen img { image-rendering: pixelated; }
/* Level und Contributor-Abzeichen auf der Seite „Beiträge“ so groß wie die erreichten Abzeichen (ab v4.90), nicht erreichte grau */
.abzeichen-raster { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px 6px; }
.abzeichen-raster li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; font-size: .6875rem; color: var(--text2); min-width: 0; }
.abzeichen-raster img { image-rendering: pixelated; filter: drop-shadow(0 3px 4px #00000030); }
.abzeichen-raster .stufen-name { overflow-wrap: anywhere; line-height: 1.2; }
.abzeichen-raster li.offen img { filter: grayscale(1); opacity: .45; }
.abzeichen-raster li.jetzt { color: var(--text); font-weight: 700; }
.abzeichen-raster li.jetzt img { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--m-gold) 70%, transparent)); }
/* Contributor-Punkte im Blau von Rasurzubehör (ab v4.92) – hebt sich vom Rot der Level-Punkte ab */
.beitrag-bereich { margin-top: 18px; padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--gear) 30%, transparent); }
.beitrag-zahl strong { background: linear-gradient(90deg, var(--gear-dunkel), var(--gear)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.verlauf-blau-a { stop-color: var(--gear-dunkel); } .verlauf-blau-b { stop-color: var(--gear); }
.beitrag-balken { margin-top: 6px; }
.beitrag-noch { color: var(--gear); font-weight: 600; }
.beitrag-bereich .punkte-regeln strong { color: var(--gear); }

/* Avatar der Mitglieder (ab v4.66): im Kreis statt des Anfangsbuchstabens, groß und bewegt in der Begrüßung, Studio. Herunterskaliert wird geglättet,
   hochskaliert pixelgenau; das feine Rasiermesser (640 px) immer geglättet. */
.konto-avatar.avatar-bild { background: var(--m-karte); border: 1px solid var(--m-rand); padding: 2px; object-fit: contain; }
.konto-kopf-link .konto-avatar.avatar-kopf { width: 44px; height: 44px; }
.konto-avatar.avatar-band { width: 56px; height: 56px; }
.konto-avatar.avatar-kopf.avatar-ersatz { font-size: 1rem; }
.avatar-studio { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start; }
.avatar-vorschau { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; border-radius: 14px; border: 1px solid var(--m-rand);
  background: linear-gradient(160deg, var(--m-held-a), var(--m-held-b)); color: var(--m-held-text); }
.avatar-speichern button { font-weight: 700; }
.avatar-figuren { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 10px 0 20px; }
.avatar-figur { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px; border-radius: 10px;
  border: 1px solid var(--m-rand); background: var(--m-karte); color: var(--text); cursor: pointer; font-size: .75rem; }
.avatar-figur canvas, .avatar-figur img { width: 64px; height: 64px; image-rendering: pixelated; }
.avatar-figur[aria-pressed="true"] { border-color: var(--care); box-shadow: 0 0 0 1px var(--care); }
.avatar-figur.gesperrt { cursor: default; color: var(--text2); }
.avatar-figur.gesperrt img { image-rendering: auto; opacity: .9; }
.avatar-studio[data-silhouette="mittel"] .avatar-figur.gesperrt img { opacity: .6; }
.avatar-studio[data-silhouette="zart"] .avatar-figur.gesperrt img { opacity: .35; }
.avatar-schloss { font-size: .6875rem; font-weight: 700; }
.avatar-schloss::before { content: "🔒︎ "; }
.avatar-merkmal { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.avatar-merkmal legend { font-weight: 700; font-size: .8125rem; margin-bottom: 6px; }
.avatar-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.avatar-wahl button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--m-rand); background: var(--m-karte); color: var(--text); font-size: .75rem; cursor: pointer; }
.avatar-wahl button[aria-pressed="true"] { border-color: var(--care); box-shadow: inset 0 0 0 1px var(--care); font-weight: 700; }
.avatar-farbe { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #0003; flex: none; }
.avatar-farbe-original { background: conic-gradient(#c9a86a, #8d6b3d, #c9a86a); }

/* Begrüßung (ab v4.67, Entwurf des Betreibers): Avatar links mit Stift, Text und Level rechts; die Box bleibt niedrig (≈170 px). */
.konto-held { justify-content: flex-start; flex-wrap: nowrap; gap: 24px; padding: 16px 28px; min-height: 160px; }
.held-text { min-width: 0; }
.held-avatar { position: relative; flex: none; display: block; line-height: 0; border-radius: 12px; }
.held-stift:focus-visible { outline: 2px solid var(--care); outline-offset: 2px; }
canvas.avatar-held { width: 136px; height: 136px; image-rendering: auto; display: block; }
span.avatar-held { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font: 800 2.6rem/1 var(--zier); background: var(--m-avatar-0); color: #fff; }
.held-stift { position: absolute; right: 2px; bottom: 6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--m-karte);
  border: 1px solid var(--m-rand); box-shadow: 0 2px 6px #0000002a; color: var(--text); }
.held-stift svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.held-stift:hover { border-color: var(--care); color: var(--care); }
.held-level { display: flex; align-items: center; gap: 6px; margin-top: 8px !important; font-size: .8125rem; font-weight: 700; color: color-mix(in srgb, var(--m-gold) 75%, var(--m-held-text)) !important; }
.held-level img { width: 24px; height: 24px; image-rendering: auto; }
.konto-held .held-titel, .konto-held h1 { margin: 4px 0; }
.punkte-karte .held-punkte { margin: 0 0 12px; }
.avatar-buehne { width: 320px; height: 320px; max-width: 100%; image-rendering: pixelated; }
.avatar-buehne.avatar-fein { image-rendering: auto; }
@media (max-width: 760px) { .avatar-studio { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .konto-held { gap: 14px; padding: 14px 16px; min-height: 0; } canvas.avatar-held { width: 80px; height: 80px; } span.avatar-held { width: 72px; height: 72px; font-size: 1.8rem; }
  .held-stift { width: 24px; height: 24px; right: -2px; bottom: 0; } .held-stift svg { width: 13px; height: 13px; } .konto-held .held-titel, .konto-held h1 { font-size: 26px; } }

/* Hintergrund im Profilbild-Kreis (ab v4.69) – dieselbe Palette wie Avatar::HINTERGRUENDE; avatar466test prüft, dass jede Farbe hier steht. */
.avatar-bild[data-bg="mint"] { background: #d6e3d7; }
.avatar-bild[data-bg="cream"] { background: #f1eadd; }
.avatar-bild[data-bg="pink"] { background: #ee82b5; }
.avatar-bild[data-bg="night"] { background: #202b29; }
.avatar-bild[data-bg="sand"] { background: #e3cfa8; }
.avatar-bild[data-bg="sky"] { background: #c9dff0; }
.avatar-bild[data-bg="rose"] { background: #f0d0d5; }
.avatar-bild[data-bg="lavender"] { background: #d9d0ee; }
.avatar-bild[data-bg="sage"] { background: #b7cbb5; }
.avatar-bild[data-bg="slate"] { background: #3b4a5a; }
.avatar-bild[data-bg="navy"] { background: #1f3352; }
.avatar-bild[data-bg="gold"] { background: #e5c25e; }
.avatar-kreisvorschau { display: flex; align-items: center; gap: 10px; }
.avatar-kreisvorschau .konto-avatar { width: 56px; height: 56px; }
.avatar-farbe-keine { background: repeating-conic-gradient(#d3d7d1 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
/* Aufstiegsfenster (ab v4.70): über der ganzen Seite, Feuerwerk dahinter auf einem eigenen Canvas; ohne Skript ein gewöhnliches Formular. */
.aufstieg { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: #0b111aa6; backdrop-filter: blur(3px); }
.aufstieg-feuerwerk { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.aufstieg-karte { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; text-align: center; padding: 26px 24px 22px;
  border-radius: 18px; background: linear-gradient(160deg, var(--m-held-a), var(--m-held-b)); color: var(--m-held-text); box-shadow: 0 24px 60px #00000055;
  border: 1px solid var(--m-rand); animation: aufstieg-auf .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.aufstieg-karte h2 { font: 30px/1.15 var(--zier); margin: 6px 0 4px; overflow-wrap: anywhere; }
.aufstieg-badge { display: block; width: min(240px, 62vw); height: auto; margin: 6px auto 4px; image-rendering: pixelated; filter: drop-shadow(0 8px 14px #00000040);
  animation: aufstieg-badge 1.1s ease-out .15s both; }
.aufstieg-level { margin: 4px 0 12px; font-size: 1.05rem; }
.aufstieg-neu { margin: 6px 0 6px; font-weight: 600; }
.aufstieg-figuren { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.aufstieg-figuren li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .85rem; }
.aufstieg-figur { width: 96px; height: 96px; image-rendering: pixelated; border-radius: 14px; background: var(--m-karte); border: 1px solid var(--m-rand); }
.aufstieg-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.aufstieg-knoepfe button { min-height: 44px; }
html.aufstieg-offen { overflow: hidden; }
@media (max-width: 520px) { .aufstieg-karte { padding: 20px 16px 16px; } .aufstieg-karte h2 { font-size: 24px; } .aufstieg-badge { width: min(170px, 48vw); }
  .aufstieg-figuren { gap: 8px; } .aufstieg-figur { width: 64px; height: 64px; border-radius: 10px; } .aufstieg-figuren li { font-size: .75rem; } }
@keyframes aufstieg-auf { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes aufstieg-badge { 0% { transform: scale(.4) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.08) rotate(2deg); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .aufstieg-karte, .aufstieg-badge { animation: none; } }
/* Gutschrift des Teams in der Liste der letzten Punkte (ab v4.70): die Notiz klein dahinter. */
.held-punkte .punkte-notiz { color: var(--text2); font-style: italic; }

/* Köderfeld gegen Bots (ab v4.97, Formschutz): für Menschen unsichtbar, nicht per display:none – manche Bots überspringen versteckte Felder. */
.feld-falle { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Kontaktformular (ab v4.97) */
.kontakt-form { max-width: 640px; }
.kontakt-form select { min-height: 44px; }
/* Rückfrage vor dem Löschen des Kontos (ab v4.97): liegt über der Seite, ohne Skript. */
.loesch-frage { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--umgebung) 70%, #000 30%); }
.loesch-frage-box { max-width: 560px; width: 100%; max-height: calc(100vh - 32px); overflow: auto; background: var(--flaeche); border: 2px solid var(--fehler); border-radius: 10px; padding: 22px 24px; box-shadow: var(--schatten); }
.loesch-frage-box h2 { margin-top: 0; color: var(--fehler); }
.loesch-frage-box ul { margin: 8px 0 12px; padding-left: 20px; }
.loesch-frage-warnung { color: var(--fehler); }
.loesch-frage-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 16px; }
.loesch-frage-knoepfe button.gefahr { background: var(--fehler); color: #fff; font-weight: 700; min-height: 44px; padding: 9px 18px; border-radius: 5px; }

/* Pillen in einer Reihe (ab v4.98, Wunsch des Betreibers): Kopf der Produktseite und Charakter von Produkt und Duft – alle gleich hoch, der Text mittig,
   die Grafik im Pixelmaß (32 px) und ohne die Pille zu strecken. Bis v4.97 streckte die Zeile jede Pille auf die höchste (die mit Grafik). */
.kopf-pillen, .charakter-zeile { align-items: center; }
.chip.chip-zeile { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 34px; padding: 0 12px; line-height: 1; white-space: nowrap; border-radius: 17px; }
.chip.chip-zeile.mit-sym, .chip.chip-zeile.mit-bild { padding-left: 2px; }
.chip.chip-zeile img { width: 32px; height: 32px; margin: -1px 0; image-rendering: pixelated; flex: none; }
.kopf-pillen .typ-badge { display: inline-flex; align-items: center; box-sizing: border-box; height: 34px; padding: 0 12px; font-size: .8125rem; border-radius: 17px; line-height: 1; }
.charakter-zeile { display: flex; flex-wrap: wrap; gap: 5px; }
.charakter-zeile a.chip { margin: 0; }

/* Mobile Ansicht (ab v5.00, Wunsch des Betreibers: „responsive Header mit Dropdown“). Bis 900 px: ein Kopf in einer Zeile, der beim Scrollen oben bleibt,
   die Leiste .nav weicht dem Menü ☰ (details.nav-mobil, ohne Skript bedienbar). Tippziele mindestens 44 px. Darüber bleibt alles, wie es war. */
.nav-mobil { display: none; }
@media (max-width: 900px) {
  .masthead { position: sticky; top: 0; z-index: 60; }
  .topbar { flex-wrap: nowrap; gap: 4px; padding-top: 8px; padding-bottom: 8px; min-height: 60px; }
  .logo { gap: 9px; }
  .logo-zeichen { width: 34px; height: 34px; border-radius: 8px; }
  .logo-wort { font-size: 23px; letter-spacing: -1.2px; }
  .logo-claim { display: none; }
  .topbar > .nav { display: none; }
  .top-actions { gap: 2px; }
  .konto-kopf-text { display: none; }
  .konto-kopf-link { padding: 2px; border-color: transparent; }
  .konto-kopf-link .konto-avatar.avatar-kopf { width: 40px; height: 40px; }
  .lang-link { min-width: 40px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
  .konto-link { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-mobil { display: block; }
  .nav-mobil > summary { list-style: none; }
  .nav-mobil > summary::-webkit-details-marker { display: none; }
  .nav-mobil-knopf { width: 46px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; color: var(--kopf-text); }
  .nav-mobil-knopf:focus-visible { outline: 2px solid var(--kopf-akzent); outline-offset: 2px; }
  .nav-mobil[open] > .nav-mobil-knopf { background: color-mix(in srgb, var(--kopf-text) 12%, transparent); }
  .burger { position: relative; width: 22px; height: 16px; display: block; }
  .burger > span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s, top .2s; }
  .burger > span:nth-child(1) { top: 0; } .burger > span:nth-child(2) { top: 7px; } .burger > span:nth-child(3) { top: 14px; }
  .nav-mobil[open] .burger > span:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .nav-mobil[open] .burger > span:nth-child(2) { opacity: 0; }
  .nav-mobil[open] .burger > span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
  .nav-mobil-liste { position: absolute; left: 0; right: 0; top: 100%; z-index: 61; display: flex; flex-direction: column; background: var(--kopf);
    border-top: 1px solid color-mix(in srgb, var(--kopf-text) 14%, transparent); border-bottom: 2px solid var(--gold); box-shadow: 0 14px 28px rgba(0, 0, 0, .28);
    max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; padding: 6px 0 10px; }
  .nav-mobil-liste a { display: flex; align-items: center; min-height: 50px; padding: 0 var(--rand); color: var(--kopf-text); font-size: 1.0625rem; font-weight: 600;
    border-left: 3px solid transparent; }
  .nav-mobil-liste a:hover, .nav-mobil-liste a:focus-visible { background: color-mix(in srgb, var(--kopf-text) 8%, transparent); color: var(--kopf-aktiv); }
  .nav-mobil-liste a[aria-current="page"] { color: var(--kopf-aktiv); border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
  .nav-mobil-liste .nav-mobil-konto { margin-top: 6px; border-top: 1px solid color-mix(in srgb, var(--kopf-text) 14%, transparent); font-weight: 700; color: var(--kopf-akzent); }
  .previewbar { font-size: .75rem; padding: 3px 10px; }
}
@media (max-width: 380px) { .logo-wort { font-size: 20px; } .logo-zeichen { width: 30px; height: 30px; } .logo { gap: 7px; } .konto-link { padding: 8px 6px; font-size: .8125rem; } }
/* Suchzeile der Listen: das Feld bekommt die ganze Breite, Suchen und Filter teilen sich die Zeile darunter (ab v5.00). */
@media (max-width: 560px) {
  .finder-search-strip { flex-wrap: wrap; gap: 8px; }
  .finder-search-strip input { flex: 1 1 100%; }
  .finder-search-strip > button { flex: 1 1 0; min-height: 48px; }
  input, select, textarea { font-size: 16px; }
}
/* Listenansicht am Telefon (ab v5.00): keine Tabelle zum Querschieben, sondern je Ware ein Block – Name, Merken, dann Marke, Art, Größe, Noten. */
@media (max-width: 640px) {
  .discovery-table-wrap { overflow-x: visible; }
  .discovery-table, .discovery-table tbody { display: block; width: 100%; }
  .discovery-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .discovery-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .discovery-table th, .discovery-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .discovery-table tbody th { flex: 1 1 calc(100% - 60px); min-width: 0; font-size: 1rem; order: 0; }
  .discovery-table .tabelle-merk { order: 1; width: auto; margin-left: auto; }
  .discovery-table td { order: 2; font-size: .875rem; }
  .discovery-table td:nth-child(2) { flex: 1 1 100%; color: var(--text2); }
  .discovery-table .tabelle-noten { flex: 1 1 100%; min-width: 0; }
  .discovery-table tr:hover td, .discovery-table tr:hover th { background: none; }
}
/* Feinschliff am Telefon (ab v5.00): Notenknöpfe ohne abgeschnittenen Namen, „Filter“ mittig, die Reiter des Mitgliederbereichs als Kacheln statt
   einer Leiste zum Querschieben – alle sechs sind auf einen Blick da. */
@media (max-width: 560px) {
  .js .finder-mobile-toggle { justify-content: center; align-items: center; }
  .scent-starters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scent-starters a { justify-content: flex-start; padding: 8px 10px; }
}
@media (max-width: 640px) {
  .konto-band .konto-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  .konto-band .konto-nav > a { flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; border-radius: 12px; font-size: .75rem;
    text-align: center; line-height: 1.2; background: var(--hervor); white-space: normal; overflow-wrap: anywhere; }
  .konto-band .konto-abmelden { width: 100%; text-align: center; }
}
/* Produktseite (ab v5.01): links Text und Noten, darunter Bewertungen und andere Formen; rechts die Produktdaten über die ganze Höhe. Die zweite Zeile nimmt
   den Rest der Höhe, damit zwischen Noten und Bewertungen keine Lücke entsteht, wenn die Produktdaten länger sind. Schmal wieder eine Spalte in Quelltextfolge. */
.produkt-raster { grid-template-rows: auto 1fr; }
.produkt-raster > .compact-copy { grid-column: 1; grid-row: 1; }
.produkt-raster > .compact-facts-card { grid-column: 2; grid-row: 1 / span 2; }
.produkt-raster > .compact-unten { grid-column: 1; grid-row: 2; align-self: start; min-width: 0; }
.compact-unten > :first-child { margin-top: 0; }
@media (max-width: 850px) {
  .produkt-raster { grid-template-rows: none; }
  .produkt-raster > .compact-copy, .produkt-raster > .compact-facts-card, .produkt-raster > .compact-unten { grid-column: 1; grid-row: auto; }
}

/* Neu einreichen (ab v5.49): Schritte links, eine Liste dessen, was noch fehlt, rechts; Textfelder mit Platz für ganze Herstellertexte */
.einreichen-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 24px; align-items: start; }
.einreichen-form { max-width: none; }
.einreichen-schritt { border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); padding: 14px 18px 18px; margin: 0 0 16px; min-width: 0; }
.einreichen-schritt[hidden] { display: none !important; }
/* Wie .konto-form: Beschriftung über dem Feld, Felder in voller Breite */
.einreichen-schritt, .einreichen-zwei > div { display: flex; flex-direction: column; gap: 8px; }
.einreichen-schritt legend { font-weight: 700; font-size: 1.0625rem; padding: 0 6px; display: flex; align-items: center; gap: 8px; }
.schritt-nr { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--flaeche); font-size: .875rem; font-weight: 700; }
.einreichen-schritt textarea { width: 100%; box-sizing: border-box; min-height: 8em; line-height: 1.5; resize: vertical; }
.einreichen-schritt textarea#noten, .einreichen-schritt textarea#technik { min-height: 11em; }
.einreichen-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.einreichen-zwei > [hidden] { display: none !important; }
.einreichen-tipp { background: var(--hervor); border-radius: 10px; padding: 10px 14px; margin: 4px 0 10px; font-size: .9375rem; }
.einreichen-tipp p { margin: 0 0 6px; }
/* Das Beispiel ist keine Kopiervorlage (ab v5.52): nicht markierbar – landet es trotzdem im Feld, warnt die Seite und der Server weist es ab */
.einreichen-beispiel { -webkit-user-select: none; user-select: none; cursor: default; }
.einreichen-warnung[hidden] { display: none !important; }
.einreichen-tipp pre { margin: 0 0 6px; padding: 8px 10px; background: var(--flaeche); border: 1px dashed var(--linie); border-radius: 8px; white-space: pre-wrap; font: inherit; font-size: .875rem; }
.einreichen-haken, .einreichen-trotzdem { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 6px 0 4px; }
.einreichen-vorschau { border-left: 3px solid var(--care); padding: 6px 12px; margin: 8px 0 12px; }
.einreichen-vorschau[hidden] { display: none !important; }
.noten-ebene { margin: 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.noten-ebene > .klein { min-width: 6em; }
.noten-chip.noten-character { border-style: dashed; }
.einreichen-aehnlich { border: 1px solid var(--gold); border-radius: 10px; padding: 10px 14px; margin: 8px 0 4px; background: var(--hervor); }
.einreichen-aehnlich[hidden] { display: none !important; }
.einreichen-aehnlich p { margin: 0 0 4px; }
.einreichen-aehnlich ul { margin: 4px 0 6px; padding-left: 18px; }
.einreichen-bilder { background: var(--hervor); border-radius: 10px; padding: 8px 12px; font-size: .875rem; }
.einreichen-knoepfe { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.einreichen-knoepfe button { min-height: 44px; }
.einreichen-entwurf { font-size: .875rem; background: var(--hervor); border-radius: 8px; padding: 6px 10px; }
.einreichen-entwurf[hidden] { display: none !important; }
/* Prüfbericht nach „Angaben prüfen“ (ab v5.51): oben, mit Abstand zum festen Kopf, offen = es fehlt noch etwas */
.einreichen-bericht { scroll-margin-top: 90px; border: 1px solid var(--care); border-left-width: 4px; border-radius: 10px; background: var(--flaeche); padding: 12px 16px; margin: 0 0 16px; }
.einreichen-bericht.offen { border-color: var(--gold); }
.einreichen-bericht h2 { margin: 0 0 6px; font-size: 1.0625rem; }
.einreichen-bericht p { margin: 0 0 6px; }
.einreichen-fehlt, .einreichen-gefunden { margin: 2px 0 8px; padding-left: 20px; }
.einreichen-pruefen-hinweis { margin-top: 6px; max-width: 60ch; }
.einreichen-hilfe { position: sticky; top: 90px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); padding: 14px 16px; }
.einreichen-hilfe h2 { margin: 0 0 8px; font-size: 1rem; }
.einreichen-liste { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.einreichen-liste li { display: flex; align-items: center; gap: 8px; color: var(--text2); }
.check-zeichen { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linie); flex: 0 0 auto; display: inline-grid; place-items: center; font-size: .75rem; }
.einreichen-liste li.erledigt { color: var(--text); }
.einreichen-liste li.erledigt .check-zeichen { background: var(--care); border-color: var(--care); color: var(--flaeche); }
.einreichen-liste li.erledigt .check-zeichen::after { content: "✓"; }
@media (max-width: 900px) {
  .einreichen-raster { grid-template-columns: minmax(0, 1fr); }
  .einreichen-hilfe { position: static; order: -1; }
}
@media (max-width: 560px) { .einreichen-zwei { grid-template-columns: minmax(0, 1fr); } .einreichen-schritt { padding: 12px; } }

/* Bereichsfarben (ab v5.77, Wunsch des Betreibers: „die Bereiche farblich voneinander trennen … elegant, aber stylisch“): je Produktart ihre Farbe aus den
   Tokens --t-* (hell und dunkel, dieselben wie die Art-Abzeichen) – als feine Linie, Etikett und Hauch, nie als Fläche. Kollektion und SOTD-Editor. */
.farbe-soap { --c: var(--t-soap); } .farbe-cream { --c: var(--t-cream); } .farbe-preshave { --c: var(--t-preshave); } .farbe-splash { --c: var(--t-splash); }
.farbe-balm { --c: var(--t-balm); } .farbe-fragrance { --c: var(--t-fragrance); } .farbe-razor { --c: var(--t-razor); } .farbe-brush { --c: var(--t-brush); }
.farbe-blade { --c: var(--t-blade); } .farbe-acc { --c: var(--t-acc); } .farbe-set { --c: var(--t-set); } .farbe-other { --c: var(--t-other); }
.bereich-farbe .sammlung-art-titel { font: 400 1.375rem/1.2 var(--zier); letter-spacing: .2px; gap: 12px; margin: 26px 0 12px; }
.bereich-farbe .sammlung-art-titel .sym-typ { width: 40px; height: 40px; padding: 5px; box-sizing: border-box; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, var(--m-karte)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }
.bereich-farbe .sammlung-art-titel span { font: 700 .6875rem/1 var(--schrift); letter-spacing: 1.4px; color: var(--c); padding: 5px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); background: color-mix(in srgb, var(--c) 6%, transparent); }
.bereich-farbe .sammlung-liste { border-color: color-mix(in srgb, var(--c) 20%, var(--m-rand)); border-top: 2px solid var(--c);
  background: color-mix(in srgb, var(--c) 2.5%, var(--m-karte)); }
.bereich-farbe .sammlung-liste > li { border-bottom-color: color-mix(in srgb, var(--c) 14%, var(--m-rand)); }
.bereich-farbe .sammlung-liste > li:has(.sotd-wahl-knopf input:checked) { margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--c) 8%, transparent); box-shadow: inset 2px 0 0 var(--c); }
.bereich-farbe .sotd-wahl-knopf { border-color: color-mix(in srgb, var(--c) 35%, var(--linie)); }
.bereich-farbe .sotd-wahl-knopf input { accent-color: var(--c); }
.bereich-farbe .sotd-wahl-knopf:has(input:checked) { background: var(--c); border-color: var(--c); color: var(--m-karte); }
.sotd-wahl-woche { display: inline-flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.sotd-wahl-woche select { min-height: 44px; border: 1px solid var(--linie); border-radius: 5px; padding: 8px 10px; background: var(--flaeche); color: var(--text); }
.sotd-wahl-leiste { align-items: center; }
.sotd-wahl-leiste .textlink { margin-left: 6px; }
.bereich-feld { box-shadow: inset 2px 0 0 var(--c); background: color-mix(in srgb, var(--c) 3%, var(--flaeche)); }
.bereich-feld .sotd-kategorie-name { display: inline-flex; align-items: center; gap: 10px; font: 400 1.125rem/1.2 var(--zier); letter-spacing: .2px; }
.bereich-feld .sym-feld { width: 34px; height: 34px; padding: 4px; box-sizing: border-box; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 13%, var(--flaeche)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent); }
.bereich-feld .sotd-mehr { color: var(--c); }
.bereich-feld .sotd-behalten input { accent-color: var(--c); }
.bereich-feld input[type="text"], .bereich-feld input[type="number"] { border-color: color-mix(in srgb, var(--c) 22%, var(--linie)); }
.bereich-feld input[type="text"]:focus, .bereich-feld input[type="number"]:focus { border-color: var(--c); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent); }
/* Auswahlkopf und Leiste ohne Grau: Karte mit goldener Haarlinie, Überschrift in der Zierschrift, Leiste halbtransparent über der Liste */
.sotd-wahl-kopf { background: var(--m-karte); border-color: color-mix(in srgb, var(--gold) 45%, var(--m-rand)); box-shadow: inset 0 2px 0 var(--gold); }
.sotd-wahl-kopf h2 { font: 400 1.375rem/1.2 var(--zier); margin-bottom: 6px; }
.sotd-wahl-leiste { background: color-mix(in srgb, var(--flaeche) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid color-mix(in srgb, var(--gold) 45%, var(--linie)); padding: 12px 14px; margin-left: -14px; margin-right: -14px; }
@media (max-width: 640px) {
  .sotd-wahl-leiste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .sotd-wahl-woche { display: contents; }
  .sotd-wahl-woche label { order: 1; grid-column: 1 / -1; min-width: 0; }
  .sotd-wahl-woche select { width: 100%; }
  .sotd-wahl-leiste > .primary { order: 2; padding-left: 8px; padding-right: 8px; }
  .sotd-wahl-woche button { order: 3; padding-left: 8px; padding-right: 8px; }
  .sotd-wahl-leiste .textlink { order: 4; grid-column: 1 / -1; justify-self: end; margin: 0; }
}

/* Eigene Nachricht eine Stunde lang ändern oder löschen (ab v5.79): „⋯“ oben rechts in der Box, Bearbeiten in der Box selbst */
.verlauf li.mit-menue { position: relative; padding-right: 52px; }
.nachricht-menue { position: absolute; top: 8px; right: 8px; }
.nachricht-menue > summary { width: 32px; height: 32px; font-size: 1.1rem; border-color: transparent; background: transparent; color: var(--text2); }
.nachricht-menue > summary:hover, .nachricht-menue[open] > summary { border-color: var(--linie); background: var(--flaeche); color: var(--text); }
.nachricht-menue .aktionen-liste { min-width: 240px; }
.aktionen-link { display: block; min-height: 40px; padding: 10px 12px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: .9375rem; }
.aktionen-link:hover, .aktionen-link:focus-visible { background: var(--hervor); }
.nachricht-menue .aktionen-archiv form { gap: 8px; }
.nachricht-menue .aktionen-archiv p { margin: 0; }
.nachricht-menue button.gefahr { background: var(--fehler); color: #fff; font-weight: 700; text-align: center; }
.nachricht-menue button.gefahr:hover { background: var(--fehler); filter: brightness(.92); }
.aktionen-hinweis { margin: 4px 0 0; padding: 6px 12px 2px; border-top: 1px solid var(--linie); font-size: .8125rem; color: var(--text2); }
.verlauf .nachricht-geloescht { color: var(--text2); font-style: italic; }
.nachricht-bearbeitet { display: block; margin-top: 6px; font-size: .75rem; color: var(--text2); text-align: right; }
.nachricht-edit { margin: 4px 0 0; }
.nachricht-edit textarea { width: 100%; }
.nachricht-edit-knoepfe { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.verlauf li:has(.nachricht-edit) { padding-right: 14px; width: 100%; }

/* Bestandteile einer Rasur als Liste (ab v5.85): je Produkt eine Zeile mit Symbol und Farbe seines Felds, Marke klein, Name kräftig – statt einer
   langen Textzeile. `.konto-liste li` gilt sonst auch für die inneren Zeilen (Rand, Abstand), darum hier ausdrücklich zurück. */
.sotd-teile { list-style: none; margin: 4px 0 2px; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px 12px; }
.konto-liste .sotd-teile > li, .sotd-teile > li { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; padding: 6px 10px 6px 6px; border: 0;
  border-radius: 8px; background: color-mix(in srgb, var(--c) 5%, var(--flaeche)); box-shadow: inset 2px 0 0 var(--c); }
.sym-teil { width: 30px; height: 30px; padding: 3px; flex: none; box-sizing: border-box; border-radius: 50%; background: color-mix(in srgb, var(--c) 15%, var(--flaeche)); }
.sotd-teil-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sotd-teil-text small { font-size: .75rem; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sotd-teil-name { font-size: .875rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sotd-teil-nutzung { font-weight: 400; color: var(--text2); }
.sotd-teile-link { display: block; width: 100%; color: inherit; text-decoration: none; }
.sotd-teile-link:hover .sotd-teil-name, .sotd-teile-link:focus-visible .sotd-teil-name { text-decoration: underline; text-underline-offset: 3px; }
.sotd-liste .sotd-teile, .sotw-rasur .sotd-teile-link { flex: 1 1 100%; }
.sotw-plan .sotd-teile { margin-top: 8px; }
@media (max-width: 560px) {
  .sotd-teile { grid-template-columns: 1fr; gap: 4px; }
  .konto-liste .sotd-teile > li, .sotd-teile > li { gap: 8px; padding: 4px 8px 4px 4px; }
  .sym-teil { width: 26px; height: 26px; padding: 2px; }
  .sotd-teil-text { line-height: 1.2; }
  .sotd-teil-name { white-space: normal; }
}