/* ==========================================================================
   omaneo.css — Erscheinungsbild der Börse trade.omaneo.de
   Von Hand geschrieben. Die FARBEN stehen in omaneo-farben.css und werden
   maschinell aus dem Thema erzeugt (tools/07_ci_farben.py) — hier steht
   alles andere: Schriften, Typografie, Logo, Verkäuferkennzeichnung, Icons.

   Grundlage: global/ci.md. Bronze #9B7A4A · Schwarz #1A1A1A · Surface #F8F6F3
   Playfair Display für Überschriften, Inter für Fließtext und Bedienung.

   ⚠ Die Verkäuferkennzeichnung (.omaneo-verkaeufer) ist KEINE Gestaltung,
     sondern die Haftungsgrenze nach Art. 6 Abs. 3 DSA und die Kennzeichnung
     nach § 5b Abs. 1 Nr. 6 UWG. Siehe second-hand/RECHTSFRAGE-EIGENE-ANZEIGEN.md.
   ========================================================================== */

/* -------------------------------------------------- 1 · Schriften, lokal.
   Kein Aufruf bei Google — die Dateien liegen im Plugin. Das Thema lädt
   Google Fonts und Font Awesome von fremden Servern; beides nimmt das
   Plugin per osc_remove_style() wieder heraus.                            */

@font-face {
  font-family: 'PlayfairOmaneo';
  src: url('../schriften/PlayfairDisplay-latin.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'PlayfairOmaneo';
  src: url('../schriften/PlayfairDisplay-latin-ext.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
}
@font-face {
  font-family: 'InterOmaneo';
  src: url('../schriften/Inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'InterOmaneo';
  src: url('../schriften/Inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
}

:root {
  --om-bronze: #9B7A4A;
  --om-bronze-dunkel: #7D6038;
  --om-schwarz: #1A1A1A;
  --om-weiss: #FFFFFF;
  --om-flaeche: #F8F6F3;
  --om-flaeche-2: #F0EDE8;
  --om-gedaempft: #6B6560;
  --om-linie: #E4DFD7;
  --om-serif: 'PlayfairOmaneo', Georgia, 'Times New Roman', serif;
  --om-sans: 'InterOmaneo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------- 2 · Typografie */

body, input, select, textarea, button, .btn {
  font-family: var(--om-sans);
}
body {
  color: var(--om-schwarz);
  background: var(--om-flaeche);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4,
.home-search h1, #home-cats h2, #home-regs h2,
#item-content h1, .listing-card .title {
  font-family: var(--om-serif);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--om-schwarz);
}
h1 { font-size: 2.1rem; line-height: 1.25; }
h2 { font-size: 1.5rem; line-height: 1.3; }
h3 { font-size: 1.2rem; }

/* Eyebrow/Label nach CI: Inter SemiBold, Versalien, weit gesperrt, Bronze */
.omaneo-eyebrow {
  font-family: var(--om-sans); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--om-bronze);
}

/* -------------------------------------------------- 3 · Kopf und Logo */

header { background: var(--om-weiss); border-bottom: 1px solid var(--om-linie); }
#logo img, #logo .logo-img {
  height: 44px; width: auto; max-width: 100%; display: block;
  /* CI-Schutzraum: rundum mindestens die Höhe des „o" aus omaneo */
  margin: 14px 0;
}
#logo a { text-decoration: none; }
header .nav a {
  font-family: var(--om-sans); font-weight: 500; color: var(--om-schwarz);
}
header .nav a:hover { color: var(--om-bronze); text-decoration: none; }
header .nav a.publish, .btn.btn-primary, button.btn-primary {
  background: var(--om-bronze); border-color: var(--om-bronze); color: var(--om-weiss);
  font-weight: 600; letter-spacing: 0.01em; border-radius: 3px;
}
header .nav a.publish:hover, .btn.btn-primary:hover, button.btn-primary:hover {
  background: var(--om-bronze-dunkel); border-color: var(--om-bronze-dunkel); color: var(--om-weiss);
}
.btn, button { border-radius: 3px; }

/* Die Goldlinie aus dem CI — als feiner Abschluss unter dem Kopf */
header::after {
  content: ""; display: block; height: 3px; width: 170px;
  background: var(--om-bronze); margin: 0 auto -1px auto; position: relative;
}

/* -------------------------------------------------- 4 · Suchfläche */

.home-search {
  background: var(--om-flaeche-2);
  border-bottom: 1px solid var(--om-linie);
  padding: 34px 0 30px;
}
.home-search h1 { margin-bottom: 18px; }
.main-search input[type="text"], .main-search select, input[type="text"], select, textarea {
  border: 1px solid var(--om-linie); border-radius: 3px; background: var(--om-weiss);
  font-family: var(--om-sans);
}
input:focus, select:focus, textarea:focus { border-color: var(--om-bronze); outline: none; }

/* -------------------------------------------------- 5 · Kacheln und Anzeige */

.listing-card {
  background: var(--om-weiss); border: 1px solid var(--om-linie);
  border-radius: 4px; transition: border-color .15s ease;
}
.listing-card:hover { border-color: var(--om-bronze); }
.listing-card .title { font-size: 1.12rem; color: var(--om-schwarz); }
.listing-card .title:hover { color: var(--om-bronze); text-decoration: none; }
.listing-card .currency-value, .price, #item-content .price {
  font-family: var(--om-serif); color: var(--om-bronze-dunkel); font-weight: 700;
}
.listing-details span, .listing-card .desc { color: var(--om-gedaempft); }
#item-content { background: var(--om-weiss); border: 1px solid var(--om-linie); border-radius: 4px; }

/* -------------------------------------------------- 6 · Verkäuferkennzeichnung
   ⚠ Rechtlich tragendes Bauteil, kein Schmuck.                            */

.omaneo-verkaeufer {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--om-sans); font-size: 0.74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 3px 9px; border-radius: 2px; border: 1px solid;
  margin: 6px 8px 6px 0; white-space: nowrap; vertical-align: middle;
}
.omaneo-verkaeufer--haus {
  color: var(--om-weiss); background: var(--om-bronze); border-color: var(--om-bronze);
}
.omaneo-verkaeufer--gewerblich {
  color: var(--om-bronze-dunkel); background: var(--om-weiss); border-color: var(--om-bronze);
}
.omaneo-verkaeufer--privat {
  color: var(--om-gedaempft); background: var(--om-flaeche); border-color: var(--om-linie);
}
.omaneo-verkaeufer--unbekannt {
  color: var(--om-gedaempft); background: var(--om-flaeche); border-color: var(--om-linie);
}

/* Der erklärende Satz unter dem Abzeichen — nur auf der Anzeigenseite */
.omaneo-verkaeufer-hinweis {
  font-size: 0.86rem; line-height: 1.55; color: var(--om-gedaempft);
  background: var(--om-flaeche); border-left: 3px solid var(--om-bronze);
  padding: 10px 14px; margin: 4px 0 16px 0; border-radius: 0 3px 3px 0;
}
.omaneo-verkaeufer-hinweis strong { color: var(--om-schwarz); font-weight: 600; }

/* -------------------------------------------------- 7 · Fußzeile */

footer { background: var(--om-schwarz); color: var(--om-flaeche); }
footer a { color: var(--om-flaeche); }
footer a:hover { color: var(--om-bronze); text-decoration: underline; }
.omaneo-rechtsverweise {
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center;
  padding: 14px 0 4px; font-size: 0.86rem;
}
.omaneo-rechtsverweise .omaneo-melden { color: var(--om-bronze); font-weight: 600; }
footer .copy, footer .copy a { color: #A9A29B; font-size: 0.82rem; }
.omaneo-motto {
  font-family: var(--om-serif); font-style: italic; color: var(--om-bronze);
  font-size: 0.95rem; padding-top: 6px;
}

/* -------------------------------------------------- 8 · Icons ohne Fremdserver
   Das Thema lädt Font Awesome von cdnjs. Es benutzt davon zehn Zeichen.
   Die zehn sind hier als eigene SVG-Masken hinterlegt — kein fremder Aufruf,
   und die Farbe folgt dem Text (currentColor).                             */

.fa, .fas, .far, .fab {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  font-style: normal;
}
.fa::before, .fas::before, .far::before, .fab::before { content: none !important; }

.fa-search {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.5' y1='15.5' x2='21' y2='21'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.5' y1='15.5' x2='21' y2='21'/></svg>");
}
.fa-angle-down {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='5,9 12,16 19,9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='5,9 12,16 19,9'/></svg>");
}
.fa-caret-right {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='9,5 18,12 9,19' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='9,5 18,12 9,19' fill='black'/></svg>");
}
.fa-star {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12,2.5 15,9.2 22.3,10 16.8,14.9 18.4,22 12,18.3 5.6,22 7.2,14.9 1.7,10 9,9.2' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12,2.5 15,9.2 22.3,10 16.8,14.9 18.4,22 12,18.3 5.6,22 7.2,14.9 1.7,10 9,9.2' fill='black'/></svg>");
}
.fa-share-square {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12v7h16v-7'/><polyline points='8,7 12,3 16,7'/><line x1='12' y1='3' x2='12' y2='15'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12v7h16v-7'/><polyline points='8,7 12,3 16,7'/><line x1='12' y1='3' x2='12' y2='15'/></svg>");
}
.fa-bars {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.2' stroke-linecap='round'><line x1='4' y1='7' x2='20' y2='7'/><line x1='4' y1='12' x2='20' y2='12'/><line x1='4' y1='17' x2='20' y2='17'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.2' stroke-linecap='round'><line x1='4' y1='7' x2='20' y2='7'/><line x1='4' y1='12' x2='20' y2='12'/><line x1='4' y1='17' x2='20' y2='17'/></svg>");
}
.fa-border-all {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3.5' y='3.5' width='17' height='17' rx='1.5'/><line x1='12' y1='3.5' x2='12' y2='20.5'/><line x1='3.5' y1='12' x2='20.5' y2='12'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3.5' y='3.5' width='17' height='17' rx='1.5'/><line x1='12' y1='3.5' x2='12' y2='20.5'/><line x1='3.5' y1='12' x2='20.5' y2='12'/></svg>");
}
.fa-location-arrow {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='21,3 3,10.5 11,13 13.5,21' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='21,3 3,10.5 11,13 13.5,21' fill='black'/></svg>");
}
.fa-sign-out-alt {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8'/><polyline points='16,8 20,12 16,16'/><line x1='20' y1='12' x2='10' y2='12'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8'/><polyline points='16,8 20,12 16,16'/><line x1='20' y1='12' x2='10' y2='12'/></svg>");
}
.fa-times {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.3' stroke-linecap='round'><line x1='6' y1='6' x2='18' y2='18'/><line x1='18' y1='6' x2='6' y2='18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.3' stroke-linecap='round'><line x1='6' y1='6' x2='18' y2='18'/><line x1='18' y1='6' x2='6' y2='18'/></svg>");
}

/* -------------------------------------------------- 9 · Am Telefon (Hausregel: R-129)
   Ab 820 px verliert jeder eingebettete Rahmen sein Höhenbudget.          */

@media (max-width: 820px) {
  h1 { font-size: 1.6rem; }
  #logo img, #logo .logo-img { height: 34px; margin: 10px 0; }
  .home-search { padding: 22px 0 20px; }
  .omaneo-verkaeufer { font-size: 0.68rem; padding: 2px 7px; letter-spacing: 0.08em; }
  .omaneo-rechtsverweise { gap: 4px 14px; font-size: 0.8rem; }
}

/* -------------------------------------------------- 10 · Feinschliff der Startseite
   Nachgetragen am 22.08.2026, nachdem die Seite zum ersten Mal betrachtet wurde.
   Ein Prüflauf über Farbwerte hätte nichts davon gefunden.                  */

/* Die Goldlinie gehört UNTER den Kopf, nicht darüber. */
header { position: relative; }
header::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  height: 3px; width: 170px; background: var(--om-bronze); margin: 0; display: block;
}

/* Kategorienamen dürfen nicht mitten im Wort brechen. */
#home-cats .wrap a strong,
#home-cats strong, #home-regs strong,
.listing-card .title, .category, h1, h2, h3 {
  overflow-wrap: break-word; word-break: normal; hyphens: auto;
}
#home-cats .wrap a { align-items: center; }
#home-cats .wrap a strong { line-height: 1.35; }

/* Die Zeichen der Kategorien tragen Bronze, nicht das geerbte Grau. */
#home-cats .icon i, #home-regs .icon i { color: var(--om-bronze); font-size: 26px; }
#home-cats .icon, #home-regs .icon { color: var(--om-bronze); }

/* -------------------------------------------------- 11 · Ein Zeichen je Kategorie
   Osclass gibt allen Kategorien dasselbe Standardzeichen („Teilen"). Neun
   Kategorien, neun Zeichen — gewählt über die Kategorie-Nummer in der Adresse.
   Die Nummern stammen aus tools/05_kategorien.py und stehen in der Datenbank.  */

#home-cats a[href$="sCategory=1"] .icon i {   /* Espressomaschinen */
  -webkit-mask-image: var(--om-i-maschine); mask-image: var(--om-i-maschine);
}
#home-cats a[href$="sCategory=7"] .icon i {   /* Kaffeemühlen */
  -webkit-mask-image: var(--om-i-muehle); mask-image: var(--om-i-muehle);
}
#home-cats a[href$="sCategory=12"] .icon i {  /* Barista-Zubehör */
  -webkit-mask-image: var(--om-i-tamper); mask-image: var(--om-i-tamper);
}
#home-cats a[href$="sCategory=20"] .icon i {  /* Handaufbereitung und Filter */
  -webkit-mask-image: var(--om-i-filter); mask-image: var(--om-i-filter);
}
#home-cats a[href$="sCategory=27"] .icon i {  /* Kaffee und Röstung */
  -webkit-mask-image: var(--om-i-bohne); mask-image: var(--om-i-bohne);
}
#home-cats a[href$="sCategory=32"] .icon i {  /* Geschirr und Einrichtung */
  -webkit-mask-image: var(--om-i-tasse); mask-image: var(--om-i-tasse);
}
#home-cats a[href$="sCategory=36"] .icon i {  /* Ersatzteile und Reparatur */
  -webkit-mask-image: var(--om-i-werkzeug); mask-image: var(--om-i-werkzeug);
}
#home-cats a[href$="sCategory=42"] .icon i {  /* Gastronomie */
  -webkit-mask-image: var(--om-i-theke); mask-image: var(--om-i-theke);
}
#home-cats a[href$="sCategory=46"] .icon i {  /* Wissen und Sammlung */
  -webkit-mask-image: var(--om-i-buch); mask-image: var(--om-i-buch);
}

:root {
  --om-i-maschine: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2'/><rect x='7' y='6' width='10' height='4' rx='1'/><path d='M9 13h6'/><path d='M12 13v3'/><path d='M8.5 19h7'/></svg>");
  --om-i-muehle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3h10l-1.2 7H8.2z'/><path d='M8.2 10h7.6l1 11H7.2z'/><circle cx='12' cy='6.2' r='1.4'/></svg>");
  --om-i-tamper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M10 3h4v6h-4z'/><path d='M6 15c0-2.2 2.7-4 6-4s6 1.8 6 4v1H6z'/><path d='M5 19h14'/></svg>");
  --om-i-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16l-6 8v6l-4 2v-8z'/></svg>");
  --om-i-bohne: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'><ellipse cx='12' cy='12' rx='6.5' ry='9' transform='rotate(35 12 12)'/><path d='M8 16.5C10 13 14 11 16.5 7.5'/></svg>");
  --om-i-tasse: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8h13v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z'/><path d='M17 9.5h1.8a2.5 2.5 0 0 1 0 5H17'/><path d='M3 21h16'/></svg>");
  --om-i-werkzeug: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M15.5 3.5a5 5 0 0 0-6 6.4L3.6 15.8a2 2 0 0 0 2.8 2.8l5.9-5.9a5 5 0 0 0 6.4-6.1l-2.9 2.9-2.5-2.5z'/></svg>");
  --om-i-theke: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10h18l-1 3H4z'/><path d='M5 13v8'/><path d='M19 13v8'/><path d='M4 21h16'/><path d='M8 10V6a4 4 0 0 1 8 0v4'/></svg>");
  --om-i-buch: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h6a3 3 0 0 1 2 1 3 3 0 0 1 2-1h6v14h-6a3 3 0 0 0-2 1 3 3 0 0 0-2-1H4z'/><path d='M12 5v14'/></svg>");
}

/* -------------------------------------------------- 12 · Passwort sichtbar machen
   Dieter, 23.08.2026: „passwort optional sichtbar machen lassen."
   Das Feld bleibt unverändert; daneben sitzt ein Knopf, der umschaltet.   */

.omaneo-pw-huelle { position: relative; display: block; }
.omaneo-pw-huelle > input[type="password"],
.omaneo-pw-huelle > input[type="text"] { padding-right: 44px !important; width: 100%; }
.omaneo-pw-auge {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; margin: 0; float: none;
  color: var(--om-gedaempft); cursor: pointer; border-radius: 3px;
}
.omaneo-pw-auge:hover { color: var(--om-bronze); background: var(--om-flaeche); }
.omaneo-pw-auge:focus-visible { outline: 2px solid var(--om-bronze); outline-offset: 1px; }

/* -------------------------------------------------- 13 · Gleich hohe Kacheln
   Dieter, 23.08.2026: „angebotskacheln könnten eine vorgegebene größe bekommen,
   statt alle unterschiedlich auszusehen."
   Osclass gibt jeder Kachel die Höhe ihres Inhalts — bei sieben verschieden
   langen Titeln sieht das aus wie ein umgefallenes Regal.                  */

#listing-card-list.listing-grid,
ul.listing-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  list-style: none; margin: 0; padding: 0;
}
ul.listing-card-list > li.listing-card {
  display: flex; flex-direction: column;
  width: auto !important; margin: 0 !important; float: none !important;
  overflow: hidden;
}

/* Das Bild bekommt ein festes Fenster — die Maschine wird eingepasst,
   nicht beschnitten: ein abgeschnittener Siebträger verkauft nichts. */
.listing-card .listing-thumb {
  display: block; width: 100%; height: 190px;
  background: var(--om-weiss);
  border-bottom: 1px solid var(--om-linie);
  overflow: hidden;
}
.listing-card .listing-thumb img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  padding: 10px; box-sizing: border-box;
}

.listing-card .listing-detail { flex: 1 1 auto; display: flex; }
.listing-card .listing-cell { flex: 1 1 auto; display: flex; }
/* ⚠ 20 px seitlich, nicht 14: Dieters Hinweis vom 23.08.2026 galt der Detailseite, aber sein
   „(und wer weiß wo noch)" traf auch hier. Gemessen standen Titel und Beschreibung nur
   15–19 px von einer Linie entfernt, die über die volle Kachelhöhe (bis 512 px) läuft —
   dieselbe Enge wie in der Anzeige, nur unauffälliger, weil jede Kachel für sich klein wirkt.
   Der Prüfer `tools/36_striche_pruefen.mjs` hält den Wert fest. */
.listing-card .listing-data { flex: 1 1 auto; display: flex; flex-direction: column; padding: 12px 20px 14px; }

/* Der Titel wird VOLLSTÄNDIG gezeigt und bricht um, so oft er muss.
   Dieter am 23.08.2026: „in der übersichtskachel sollte die zeile der bezeichnung
   nicht abgeschnitten werden, sondern wenn nötig einen zeilenumbruch machen."
   Vorher stand hier -webkit-line-clamp: 2 — zwei Zeilen, dann Auslassungspunkte.
   Bei Gebrauchtware ist gerade das Ende des Titels die Auskunft, auf die es ankommt
   („geprüftes Einzelstück", „neu und ungeöffnet"); die Modellbezeichnung steht
   ohnehin vorn. Die Mindesthöhe bleibt, damit kurze Titel die Kachelreihe nicht
   verspringen lassen.

   ⛔ Die Auswahl ist hier ABSICHTLICH lang. Das Thema setzt für die Kachelansicht
   `.listing-grid .listing-basicinfo a { white-space:nowrap; overflow:hidden;
   text-overflow:ellipsis; }` — das sind drei Merkmale (0,2,1) und schlägt ein
   schlichtes `.listing-card .title` (0,2,0). Eine erste Fassung dieser Regel hat
   deshalb gar nichts bewirkt: Im ausgelieferten CSS stand alles richtig, im
   Browser stand `white-space: nowrap`. Gemessen am 23.08.2026. */
.listing-card .title,
.listing-grid .listing-basicinfo a.title,
.listing-card-list.listing-grid .listing-basicinfo a.title {
  display: block; overflow: visible; white-space: normal;
  text-overflow: clip; width: auto;
  min-height: 2.6em; line-height: 1.3; margin: 0 0 6px;
  overflow-wrap: break-word;   /* Typenbezeichnungen wie ECAM 610.75.MB brechen sauber */
}
/* Die Beschreibung drei Zeilen. */
.listing-card .desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .86rem; margin: 6px 0 0;
}
/* Der Preis steht immer unten am selben Ort. */
.listing-card .listing-attributes { margin-top: auto; padding-top: 10px; }
.listing-card .currency-value { font-size: 1.28rem; }
.listing-card .listing-details { font-size: .78rem; margin-top: 4px; }
.listing-card .omaneo-verkaeufer { margin: 0 0 8px 0; }

/* -------------------------------------------------- 14 · Luft in der Anzeige
   Dieter: „die textformatierung in der detailansicht sollte etwas abstand zum
   rand haben." Osclass setzt den Text direkt an die Kante des Kastens.      */

#item-content { padding: 26px 30px 30px; }
#item-content h1 { margin: 0 0 6px; line-height: 1.25; }
#item-content .item-header { margin: 10px 0 18px; font-size: .88rem; color: var(--om-gedaempft); }
#item-content #description { margin-top: 4px; }
#item-content #description .desc {
  white-space: pre-line;      /* die Absätze des Anzeigentextes bleiben erhalten */
  line-height: 1.7; max-width: 70ch;
}
#item-content .item-photos { margin: 6px 0 22px; }
#item-content .item-photos .main-photo img { max-height: 420px; width: auto; object-fit: contain; }
/* ⛔ Das Thema setzt die Beschreibung auf `float:left`. Alles, was danach kommt, rutscht
   deshalb NEBEN den Text statt darunter — bei Blöcken mit Rahmen sieht man es sofort
   (Dieter, 23.08.2026: eine 1.209 px lange Linie rund um fremden Text), bei rahmenlosen
   Blöcken bleibt es unbemerkt und verschiebt trotzdem die Reihenfolge. Deshalb wird der
   Float hier EINMAL für alle Folgeblöcke freigestellt, statt Fall für Fall. */
#item-content #description::after { content: ""; display: block; clear: both; }
#item-content #description > *:not(.desc) { clear: both; }
#item-content #custom_fields, #item-content .item-hook { margin-top: 18px; clear: both; }
#item-content .contact_button { margin-top: 24px; }

@media (max-width: 820px) {
  /* ⛔ Hier standen 16 px seitlich, und genau das hat Dieter am 23.08.2026 erneut
     beanstandet: „auf der produkt detailseite wird ein senkrechter strich verwendet, der
     direkt am text hängt — entweder nicht verwenden oder abstand zwischen strich und text
     schaffen." Der „Strich" ist der linke Rand des Kastens. Er ist nur 1 px stark, läuft aber
     über die volle Höhe des Anzeigentextes — bei einer langen Beschreibung sind das mehrere
     hundert Pixel Linie, an der jede Zeile anschlägt. Was am Schreibtisch als Abstand durchgeht,
     wirkt am Telefon wie ein Anschlag. 22 px sind gemessen der Punkt, an dem die Linie den Text
     nicht mehr berührt, ohne dass die Zeilen zu kurz werden. */
  #item-content { padding: 18px 22px 22px; }
  .listing-card .listing-thumb { height: 160px; }
  ul.listing-card-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
}

/* -------------------------------------------------- 15 · Der Standort in der Kachel
   Dieter: „einer der pflichtangaben und dargestellt schon in der übersichtskachel
   ist der standort=stadt des angebots."

   ⛔ Das Thema „sigma" blendet Ort, Kategorie und Datum in der Kachelansicht
   ausdrücklich aus (style.css: `.listing-grid .date, .listing-grid .category,
   .listing-grid .location {display:none}`). Der Ort wird hier gezielt
   zurückgeholt — Kategorie und Datum bleiben aus, sie stehen in der Kachel
   ohnehin doppelt oder sagen nichts über die Ware.

   Warum der Ort bei Gebrauchtware kein Beiwerk ist: Eine Siebträgermaschine
   wiegt zwanzig Kilo und wird abgeholt. Ohne Ort kann ein Leser gar nicht
   entscheiden, ob ihn das Angebot angeht. */

.listing-card-list.listing-grid .listing-details .location,
.listing-card .listing-details .location {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--om-gedaempft); font-size: .82rem; line-height: 1.3;
  margin-top: 2px; max-width: 100%;
}

/* Die Ortsmarke ist gezeichnet, nicht getippt — ein Zeichensatz-Symbol säße je
   nach Gerät anders auf der Grundlinie und käme in fremder Farbe. */
.listing-card .listing-details .location::before {
  content: ""; flex: 0 0 auto; width: 11px; height: 13px;
  background: no-repeat center/contain
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M5.5.6C3.2.6 1.3 2.5 1.3 4.8c0 3 4.2 7.6 4.2 7.6s4.2-4.6 4.2-7.6C9.7 2.5 7.8.6 5.5.6zm0 5.7a1.6 1.6 0 1 1 0-3.2 1.6 1.6 0 0 1 0 3.2z' fill='%239B7A4A'/%3E%3C/svg%3E");
}

/* Steht kein Ort da, soll auch keine leere Marke dastehen. */
.listing-card .listing-details .location:empty { display: none; }

/* Das Sternchen an der Pflichtangabe im Einstellformular (Plugin omaneo-pflichtfelder). */
.omaneo-pflicht { color: var(--om-bronze); font-weight: 600; }