/* Abverkauf-Katalog innerhalb der Hauptseite – aus "Abverkauf Webseite/assets/css/style.css" erzeugt (tools/abverkauf-portieren.py), alles unter .abv eingegrenzt */
.abv{--lime:        #b0cb1f;
  --lime-dunkel: #93aa16;
  --lime-text:   #6b8410;   
  --grau:        #505050;
  --tinte:       #2f2f2f;
  --gedimmt:     #7a7a7a;
  --grund:       #f5f6f2;
  --flaeche:     #eff0ea;
  --linie:       #e1e2dc;
  --linie-fest:  #d6d8cf;
  --weiss:       #ffffff;
  --kante:       2px;
  --titel:       'Lato', system-ui, sans-serif;
  --text:        'Lato', system-ui, sans-serif;}
.abv, .abv *{box-sizing: border-box;}
.abv, .abv{min-height: 100%;}
.abv{margin: 0;
  background: var(--grund);
  color: var(--grau);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  }
.abv main{flex: 1;}
.abv img{max-width: 100%; display: block;}
.abv a{color: var(--lime-text); text-decoration: none;}
.abv a:hover{color: var(--tinte); text-decoration: underline;}
.abv h1, .abv h2, .abv h3{font-family: var(--titel); color: var(--tinte);}
.abv .wrap{max-width: 1180px; margin: 0 auto; padding: 0 24px;}
.abv .topzeile{background: var(--grau); color: #e8e9e3; font-size: 13px;}
.abv .topzeile .wrap{display: flex; flex-wrap: wrap; gap: 8px 28px;
  align-items: center; justify-content: space-between; padding: 9px 24px;}
.abv .topzeile a{color: #c8dd6e;}
.abv .topzeile a:hover{color: #fff;}
.abv .punkt{display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); margin-right: 9px; vertical-align: middle;}
.abv .kopf{background: var(--weiss); border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 20;}
.abv .kopf .wrap{display: flex; flex-wrap: wrap; gap: 14px 20px;
  align-items: center; justify-content: space-between; padding: 14px 24px;}
.abv .kopf-links{display: flex; align-items: center; gap: 14px;}
.abv .kopf-logo img{height: 40px; width: auto;}
.abv .kopf-label{font-family: var(--titel); font-weight: 600; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gedimmt);
  border-left: 1px solid var(--linie); padding-left: 14px;}
.abv .kopf-rechts{display: flex; align-items: center; gap: 16px;}
.abv .kopf-rechts .hauptseite{font-size: 15px; color: var(--gedimmt);}
.abv .kopf-rechts .hauptseite:hover{color: var(--tinte);}
.abv .knopf{display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--titel); font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: var(--kante); min-height: 44px;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  text-decoration: none; transition: background .15s, border-color .15s, color .15s;}
.abv .knopf:hover{text-decoration: none;}
.abv .knopf-lime{background: var(--lime); border-color: var(--lime); color: var(--tinte);}
.abv .knopf-lime:hover{background: var(--lime-dunkel); border-color: var(--lime-dunkel); color: var(--tinte);}
.abv .knopf-rand{background: var(--weiss); border-color: var(--linie-fest); color: var(--tinte);}
.abv .knopf-rand:hover{border-color: var(--lime); color: var(--lime-text);}
.abv .knopf-klein{font-size: 14px; padding: 10px 16px; min-height: 40px;}
.abv .knopf[disabled]{opacity: .45; cursor: not-allowed;}
.abv .knopf .zahl{font-variant-numeric: tabular-nums;}
.abv .hero{background: var(--weiss); border-bottom: 1px solid var(--linie);}
.abv .hero .wrap{padding: 52px 24px 42px;}
.abv .hero-kopf{margin-bottom: 26px;}
.abv .hero-zeile{display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px 48px; align-items: end;}
.abv .hero-label{font-family: var(--titel); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lime-text); margin-bottom: 14px;}
.abv .hero h1{font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -.02em;
  margin: 0; text-wrap: balance;}
.abv .hero p{margin: 0; font-size: 18px; line-height: 1.55; max-width: 54ch;}
.abv .kennzahlen{margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px; background: var(--linie); border: 1px solid var(--linie);}
.abv .kennzahlen > div{background: var(--weiss); padding: 18px 16px;}
.abv .kennzahlen dt{font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gedimmt); margin-bottom: 6px;}
.abv .kennzahlen dd{margin: 0; font-family: var(--titel); font-weight: 700; font-size: 26px; color: var(--tinte);}
.abv .filterzeile{background: var(--weiss); border-bottom: 1px solid var(--linie);
  position: sticky; top: 69px; z-index: 15;}
.abv .filterzeile .wrap{padding: 12px 24px; display: flex; flex-wrap: nowrap; gap: 12px 20px;
  align-items: center; justify-content: space-between;}
.abv .chips{display: flex; gap: 8px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px;}
.abv .chips::-webkit-scrollbar{height: 6px;}
.abv .chips::-webkit-scrollbar-thumb{background: var(--linie-fest); border-radius: 3px;}
.abv .chip{font-family: var(--titel); font-weight: 600; font-size: 14px;
  padding: 9px 15px; border: 1px solid var(--linie-fest); border-radius: var(--kante);
  background: var(--weiss); color: var(--tinte); cursor: pointer; white-space: nowrap;
  text-decoration: none; transition: border-color .15s, background .15s, color .15s;}
.abv .chip:hover{border-color: var(--lime); color: var(--lime-text); text-decoration: none;}
.abv .chip.aktiv{background: var(--tinte); border-color: var(--tinte); color: var(--weiss);}
.abv .chip .zahl{font-weight: 500; opacity: .65; margin-left: 5px;}
.abv .chip-klein{font-size: 13px; padding: 7px 13px;}
.abv .werkzeuge{display: flex; flex-wrap: nowrap; align-items: center; gap: 10px;
  font-size: 15px; color: var(--gedimmt); flex: 0 0 auto;}
.abv .werkzeuge select, .abv .suchfeld input{font-family: var(--text); font-size: 15px; padding: 9px 12px;
  border: 1px solid var(--linie-fest); border-radius: var(--kante);
  background: var(--weiss); color: var(--tinte); min-height: 40px;}
.abv .suchfeld input{min-width: 150px; width: 170px;}
.abv .sort-label{display: none;}
@media (min-width: 1250px){.abv .sort-label{display: inline;}
 }
.abv .werkzeuge select:focus, .abv .suchfeld input:focus{outline: 2px solid var(--lime); outline-offset: 1px;}
.abv .unterzeile{background: var(--flaeche); border-bottom: 1px solid var(--linie);}
.abv .unterzeile .wrap{padding: 10px 24px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;}
.abv .unterzeile-label{font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gedimmt); margin-right: 4px;}
.abv .raster{display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 20px; padding: 32px 0 24px;}
.abv .posten{background: var(--weiss); border: 1px solid var(--linie);
  display: flex; flex-direction: column;}
.abv .posten-bild{position: relative; aspect-ratio: 4 / 3; background: var(--flaeche);
  border-bottom: 1px solid var(--linie); display: block;}
.abv .posten-bild img{width: 100%; height: 100%; object-fit: cover;}
.abv .posten-bild .leer{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #b8b8b4; font-size: 14px;}
.abv .posten-bild .fahne{position: absolute; top: 10px; left: 10px; background: var(--tinte); color: var(--weiss);
  font-family: var(--titel); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 9px; border-radius: var(--kante);}
.abv .posten-text{padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1;}
.abv .posten-kopf{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; align-items: baseline;}
.abv .posten-nr{font-family: var(--titel); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; color: var(--gedimmt);}
.abv .zustand{font-size: 12px; color: var(--grau); background: var(--flaeche);
  padding: 3px 8px; border-radius: var(--kante);}
.abv .posten h2{font-weight: 600; font-size: 18px; line-height: 1.25; margin: 0; text-wrap: pretty;}
.abv .posten h2 a{color: var(--tinte);}
.abv .posten h2 a:hover{color: var(--lime-text); text-decoration: none;}
.abv .posten-marke{font-family: var(--titel); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--lime-text);}
.abv .posten-daten{margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 14px; font-size: 15px;}
.abv .posten-daten dt{color: var(--gedimmt);}
.abv .posten-daten dd{margin: 0; color: var(--tinte);}
.abv .posten-daten dd.stark{font-weight: 600;}
.abv .posten-fuss{margin-top: auto; padding-top: 12px; border-top: 1px solid var(--flaeche);
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px;}
.abv .preis-label{font-size: 12px; color: var(--gedimmt);}
.abv .preis{font-family: var(--titel); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--tinte);}
.abv .posten-knoepfe{display: flex; gap: 8px;}
.abv .hinweisblock{margin: 16px 0 56px; background: var(--weiss); border: 1px solid var(--linie);
  padding: 28px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px 40px; align-items: center;}
.abv .hinweisblock h2{font-weight: 700; font-size: 22px; margin: 0 0 8px;}
.abv .hinweisblock p{margin: 0; font-size: 16px;}
.abv .leerhinweis{background: var(--weiss); border: 1px solid var(--linie); padding: 56px 24px;
  text-align: center; color: var(--gedimmt); margin: 32px 0 56px;}
.abv .zurueck{display: inline-block; margin: 26px 0 18px; font-size: 15px;}
.abv .detail{display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px; align-items: start; padding-bottom: 56px;}
.abv .galerie-gross{position: relative; aspect-ratio: 4 / 3; background: var(--flaeche);
  border: 1px solid var(--linie); cursor: zoom-in;}
.abv .galerie-gross img{width: 100%; height: 100%; object-fit: cover;}
.abv .galerie-gross .leer{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #b8b8b4;}
.abv .lupe{position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px;
  border-radius: 50%; background: rgba(47,47,47,.82); color: #fff;
  display: flex; align-items: center; justify-content: center; pointer-events: none;}
.abv .galerie-gross:hover .lupe{background: var(--lime); color: var(--tinte);}
.abv .lupe svg{width: 21px; height: 21px;}
.abv .galerie-klein{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px;}
.abv .galerie-klein button{padding: 0; border: 1px solid var(--linie); background: var(--flaeche);
  cursor: pointer; aspect-ratio: 1 / 1; overflow: hidden;}
.abv .galerie-klein button.aktiv{border-color: var(--lime); border-width: 2px;}
.abv .galerie-klein img{width: 100%; height: 100%; object-fit: cover;}
.abv .meta-zeile{display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 12px;}
.abv .meta-kat{font-size: 12px; color: var(--lime-text); letter-spacing: .06em; text-transform: uppercase;}
.abv .detail h1{font-weight: 700; font-size: 32px; line-height: 1.15; letter-spacing: -.015em;
  margin: 0 0 18px; text-wrap: balance;}
.abv .tafel{background: var(--weiss); border: 1px solid var(--linie); padding: 22px 24px;}
.abv .tafel + .tafel{margin-top: 20px;}
.abv .tafel h2{font-weight: 700; font-size: 20px; margin: 0 0 14px;}
.abv .eckdaten{display: flex; flex-wrap: wrap; align-items: end; gap: 18px 32px;
  padding-bottom: 18px; border-bottom: 1px solid var(--flaeche);}
.abv .eckdaten .beschriftung{font-size: 12px; color: var(--gedimmt); letter-spacing: .04em;}
.abv .eckdaten .gross{font-family: var(--titel); font-weight: 700; font-size: 34px; line-height: 1.15; color: var(--tinte);}
.abv .eckdaten .mittel{font-family: var(--titel); font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--tinte);}
.abv .datenliste{margin: 0; padding-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 9px 24px; font-size: 16px;}
.abv .datenliste dt{color: var(--gedimmt);}
.abv .datenliste dd{margin: 0; color: var(--tinte);}
.abv .beschreibung{margin: 18px 0 0; font-size: 16px; line-height: 1.6; white-space: pre-wrap; text-wrap: pretty;}
.abv .tafel-knoepfe{display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px;}
.abv .kleingedrucktes{margin: 16px 0 0; font-size: 14px; color: var(--gedimmt);}
.abv .feld{margin-bottom: 14px;}
.abv .feld label{display: block; font-size: 14px; font-weight: 600; color: var(--tinte); margin-bottom: 5px;}
.abv .feld input, .abv .feld textarea, .abv .feld select{width: 100%; font-family: var(--text); font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--linie-fest); border-radius: var(--kante); background: var(--weiss); color: var(--tinte);}
.abv .feld input:focus, .abv .feld textarea:focus, .abv .feld select:focus{outline: 2px solid var(--lime); outline-offset: 1px; border-color: var(--lime);}
.abv .feld textarea{resize: vertical; min-height: 110px;}
.abv .feld-paar{display: grid; gap: 12px; grid-template-columns: 1fr 1fr;}
@media (max-width: 520px){.abv .feld-paar{grid-template-columns: 1fr;}
 }
.abv .honig{position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;}
.abv .hinweis{font-size: 13px; color: var(--gedimmt); margin-top: 12px;}
.abv .wahl{display: flex; gap: 10px; flex-wrap: wrap;}
.abv .wahl-feld{flex: 1 1 150px; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--linie-fest); border-radius: var(--kante); padding: 11px 14px;
  cursor: pointer; background: var(--weiss);}
.abv .wahl-feld:hover{border-color: var(--lime);}
.abv .wahl-feld:has(input:checked), .abv .wahl-feld.gewaehlt{border-color: var(--lime); background: #f8faec;}
.abv .wahl-feld input{accent-color: var(--lime-dunkel); width: 17px; height: 17px; flex-shrink: 0;}
.abv .wahl-feld span{display: flex; flex-direction: column; line-height: 1.3;}
.abv .wahl-feld b{font-weight: 600; color: var(--tinte);}
.abv .wahl-feld small{color: var(--gedimmt); font-size: 13px;}
.abv .wahl-feld.aus{opacity: .5; cursor: not-allowed;}
.abv .wahl-block[hidden]{display: none;}
.abv .wahl-info{font-size: 14px; color: var(--gedimmt); margin: 10px 0 12px;}
.abv .bestaetigung{display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5;
  background: var(--grund); border: 1px solid var(--linie); padding: 14px 16px; margin: 4px 0 16px;}
.abv .bestaetigung input{margin-top: 3px; width: 18px; height: 18px; accent-color: var(--lime-dunkel); flex-shrink: 0;}
.abv .versandkasten{background: var(--grund); border: 1px solid var(--linie); padding: 12px 16px; margin-bottom: 12px;}
.abv .versand-zeile{display: flex; justify-content: space-between; gap: 14px; font-size: 15px; padding: 3px 0;}
.abv .versand-zeile.gesamt{border-top: 1px solid var(--linie); margin-top: 6px; padding-top: 8px; font-size: 17px;}
.abv .versand-zeile.gesamt b{font-family: var(--titel); color: var(--tinte);}
.abv .versand-zeile.klein{font-size: 13px; color: var(--gedimmt); padding-top: 0;}
.abv .meldung{border-radius: var(--kante); padding: 13px 16px; margin-bottom: 18px; font-size: 15px;}
.abv .meldung.ok{background: #f3f8dd; border: 1px solid var(--lime); color: #445206;}
.abv .meldung.err{background: #fdeced; border: 1px solid #e6a3a8; color: #7c2129;}
.abv .merkseite{display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px; align-items: start; padding-bottom: 56px;}
.abv .merkseite .tafel + .tafel, .abv .detail .tafel + .tafel{margin-top: 0;}
.abv .merktabelle{width: 100%; border-collapse: collapse; font-size: 15px;}
.abv .merktabelle th{text-align: left; font-family: var(--titel); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gedimmt);
  border-bottom: 1px solid var(--linie); padding: 0 10px 8px 0;}
.abv .merktabelle td{border-bottom: 1px solid var(--flaeche); padding: 12px 10px 12px 0; vertical-align: top;}
.abv .merktabelle td:last-child, .abv .merktabelle th:last-child{padding-right: 0; text-align: right;}
.abv .merktabelle .titel{color: var(--tinte); font-weight: 600;}
.abv .merktabelle .nr{font-size: 12px; color: var(--gedimmt); letter-spacing: .06em;}
.abv .merktabelle input[type=number]{width: 96px; font-family: var(--text); font-size: 15px; padding: 7px 10px;
  border: 1px solid var(--linie-fest); border-radius: var(--kante); text-align: right;}
.abv .entfernen{background: none; border: 0; color: var(--lime-text); cursor: pointer; font-family: var(--text); font-size: 14px; padding: 0;}
.abv .entfernen:hover{color: var(--tinte); text-decoration: underline;}
.abv .summe{display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; font-size: 16px;}
.abv .summe b{font-family: var(--titel); font-size: 20px; color: var(--tinte);}
.abv .lightbox{position: fixed; inset: 0; z-index: 100; background: rgba(28,28,28,.94);
  display: flex; align-items: center; justify-content: center; padding: 56px 20px;}
.abv .lightbox[hidden]{display: none;}
.abv .lightbox img{max-width: 100%; max-height: 100%; object-fit: contain;}
.abv .lb-knopf{position: absolute; background: rgba(255,255,255,.13); color: #fff; border: none;
  cursor: pointer; border-radius: 50%; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1;}
.abv .lb-knopf:hover{background: var(--lime); color: var(--tinte);}
.abv .lb-zu{top: 18px; right: 18px;}
.abv .lb-vor{right: 18px; top: 50%; transform: translateY(-50%);}
.abv .lb-back{left: 18px; top: 50%; transform: translateY(-50%);}
.abv .lb-zaehler{position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #ddd; font-size: 14px; background: rgba(255,255,255,.12); padding: 4px 14px; border-radius: 999px;}
.abv .fuss{background: var(--grau); color: #c9cbc2; font-size: 14px; margin-top: auto;}
.abv .fuss .wrap{padding: 26px 24px; display: flex; flex-wrap: wrap; gap: 12px 28px;
  justify-content: space-between; align-items: center;}
.abv .fuss a{color: #e8e9e3;}
.abv .fuss a:hover{color: var(--lime);}
.abv .fuss-links{display: flex; flex-wrap: wrap; gap: 20px;}
@media (max-width: 860px){.abv .filterzeile .wrap{flex-wrap: wrap;}
.abv .werkzeuge{flex: 1 1 100%; justify-content: space-between;}
.abv .suchfeld{flex: 1 1 auto;}
.abv .suchfeld input{width: 100%; min-width: 0;}

}
@media (max-width: 700px){.abv .hero .wrap{padding: 34px 24px 30px;}
.abv .hero h1{font-size: 32px;}
.abv .hero p{font-size: 17px;}
.abv .detail h1{font-size: 26px;}
.abv .filterzeile{position: static;}

}
.abv .feld-hinweis{font-size: 13.5px; color: var(--gedimmt); margin: 0 0 14px;}
.abv .feld-zusatz{font-weight: 400; color: var(--gedimmt);}
.abv .feld-plzort{display: grid; grid-template-columns: 90px 1fr; gap: 12px;}
.abv .feld-plzort label{display: block; font-size: 14px; font-weight: 600; color: var(--tinte); margin-bottom: 5px;}



/* Zeile unter dem Seitenkopf der Hauptseite: B2B-Hinweis und Merkliste */
.abv-leiste{background:#505050;color:#e8e9e3;font-size:13px}
.abv-leiste .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;padding-top:7px;padding-bottom:7px}
.abv-leiste .knopf{padding:6px 16px;font-size:13px}
.abv-leiste .bi{color:#b0cb1f;margin-right:4px}
.abv{background:#f5f6f2;color:#505050;font-size:16px;font-weight:400}
.abv a{text-decoration:none}
.abv h1,.abv h2,.abv h3{font-weight:700}