/* BEES-Pflege – Aufbau wie die RWW-Pflege, Farben und Schrift vom BEES */
@font-face { font-family: "Sawton"; src: url(fonts/SawtonCircular-Light.otf); font-weight: 300; }
@font-face { font-family: "Sawton"; src: url(fonts/SawtonCircular-Regular.otf); font-weight: 400; }
@font-face { font-family: "Sawton"; src: url(fonts/SawtonCircular-Medium.otf); font-weight: 500; }
@font-face { font-family: "Briar"; src: url(fonts/briar.woff) format("woff"); }
:root { --lazur: #003f64; --creme: #fef4e2; --marone: #d8a87d; --marone-dunkel: #a8774c; --dark: #1a2733; --grau: #8a949c;
  --grund: #f4f1ea; --linie: #ddd8cd; --text: #1a2733; --text-2: #55606a; --warn: #b3261e; color-scheme: light; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--grund); color: var(--text); font: 400 16px/1.4 "Sawton", system-ui, sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: #fff; border: 1px solid var(--linie); border-radius: 5px; padding: 7px 12px; }
button:hover { border-color: var(--grau); }
button.haupt { background: var(--lazur); color: #fff; border-color: var(--lazur); font-weight: 500; }
button.haupt:disabled { background: #8c949b; border-color: #8c949b; cursor: default; }
button.gefahr { color: var(--warn); }
button:disabled { opacity: .55; cursor: not-allowed; }
input, select, textarea { width: 100%; border: 1px solid #cfcac0; border-radius: 5px; padding: 7px 9px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--lazur); outline-offset: 0; border-color: transparent; }
textarea { resize: vertical; line-height: 1.45; }
label { display: block; font-size: 13px; color: var(--text-2); font-weight: 500; letter-spacing: .02em; }
label > input, label > select, label > textarea { margin-top: 3px; font-size: 16px; color: var(--text); font-weight: 400; letter-spacing: 0; }

/* Anmeldung */
.anmeldung { min-height: 100vh; display: grid; place-items: center; background: var(--lazur); padding: 16px; }
.anmeldung form { background: var(--creme); border-radius: 10px; padding: 30px 28px; width: min(360px, 100%); text-align: center; display: grid; gap: 12px; }
.anmeldung img { height: 46px; margin: 0 auto; }
.anmeldung p { margin: 0; color: var(--text-2); }
.anmeldung label { text-align: left; }
.fehler { color: var(--warn) !important; min-height: 1.2em; }

/* Leiste */
.leiste { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; background: var(--lazur); color: #fff; padding: 8px 16px; }
.leiste button:not(.haupt) { color: var(--text); }
.leiste .logo { height: 24px; filter: brightness(0) invert(1); }
.status { font-size: 14px; color: #c5d3dc; }
.status.ungespeichert { color: #ffd38a; }
.rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; position: relative; }
.leiste .haupt { background: var(--marone); border-color: var(--marone); color: var(--dark); }
.leiste .haupt:disabled { background: #5d7d93; border-color: #5d7d93; color: #c5d3dc; }
.menue { position: relative; }
.menue-liste { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; color: var(--text); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.25); min-width: 280px; padding: 6px; display: grid; z-index: 30; }
.menue-liste a, .menue-liste button { display: block; text-align: left; padding: 9px 12px; border: 0; border-radius: 5px; color: var(--text); text-decoration: none; background: none; }
.menue-liste a:hover, .menue-liste button:hover { background: var(--grund); }
.menue-liste .trenn { border-top: 1px solid var(--linie); margin: 4px 0; }
.reiter { display: flex; gap: 4px; flex-wrap: wrap; }
.reiter button { background: transparent; color: #d4e0e8 !important; border: 1px solid transparent; padding: 6px 12px; font-weight: 500; }
.reiter button:hover { border-color: #3d6987; }
.reiter button[aria-pressed="true"] { background: var(--creme); color: var(--lazur) !important; }

/* Raster */
.raster { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100vh - 50px); }
.seitenleiste { background: #fff; border-right: 1px solid var(--linie); display: flex; flex-direction: column; max-height: calc(100vh - 50px); position: sticky; top: 50px; }
.liste-links { overflow-y: auto; flex: 1; }
.liste-links .kopfzeile { padding: 10px 14px 4px; font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--grau); position: sticky; top: 0; background: #fff; }
.eintrag-links { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; border-radius: 0; padding: 8px 14px; border-bottom: 1px solid #f1eee8; background: none; }
.eintrag-links:hover { background: var(--grund); }
.eintrag-links.aktiv { background: #e8eff4; box-shadow: inset 4px 0 0 var(--lazur); }
.eintrag-links .name { flex: 1; min-width: 0; }
.eintrag-links .zahl { font-size: 13px; color: var(--grau); }
.seitenleiste .neu { margin: 10px 12px 12px; }

/* Bearbeiten */
.bearbeiten { padding: 20px 24px 80px; max-width: 1000px; }
.kasten { background: #fff; border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; display: grid; gap: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.kasten h2 { margin: 0; color: var(--lazur); font-weight: 500; }
.kasten .knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.kasten ul.klein { padding-left: 18px; display: grid; gap: 4px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; }
.klein { font-size: 13px; color: var(--text-2); margin: 0; }
.breit { grid-column: 1 / -1; }
.haken { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--text); font-weight: 400; cursor: pointer; }
.haken input { width: 18px; height: 18px; margin: 0; accent-color: var(--lazur); }
.leer-hinweis { background: #fff; border-radius: 10px; padding: 22px 26px; color: var(--text-2); }
.leer-hinweis h2 { margin-top: 0; color: var(--lazur); }

/* Rubrik mit Einträgen */
.rk { background: #fff; border-radius: 10px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.rk-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px 6px; }
.rk-kopf b { font-size: 21px; color: var(--lazur); font-weight: 500; }
.rk-kopf > span:not(.knoepfchen) { color: var(--grau); font-size: 14px; }
.rk-kopf .knoepfchen { margin-left: auto; }
.rk-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 4px 16px 12px; }
.ek-liste { border-top: 1px solid var(--linie); }
.ek { padding: 10px 16px; border-bottom: 1px solid #f1eee8; display: grid; gap: 6px; }
.ek.aus { opacity: .5; }
.ek.gruppe { border-left: 4px solid var(--marone); }
.ek-kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ek-name { flex: 1; min-width: 220px; display: grid; }
.ek-name input { font-weight: 500; }
.knoepfchen { display: inline-flex; gap: 4px; }
.knoepfchen button { padding: 3px 9px; font-size: 14px; }
.ek-zeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ek-zeile input.preis { width: 100px; }
.ek-zeile input.menge { width: 90px; }
.neuer { width: calc(100% - 32px); margin: 10px 16px 14px; padding: 11px; border-style: dashed; }

/* Menü-Zugehörigkeit (Biene / Wabe / Stock) */
.menues { display: inline-flex; gap: 4px; align-items: center; }
.menues label { position: relative; display: inline-flex; cursor: pointer; }
.menues input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.menues span { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 7px; border: 1px solid #cfcac0; border-radius: 999px; font-size: 14px; color: var(--text-2); background: #fff; }
.menues span img { height: 18px; opacity: .45; }
.menues input:checked + span { background: var(--lazur); border-color: var(--lazur); color: #fff; }
.menues input:checked + span img { opacity: 1; filter: brightness(0) invert(1); }
.menues input:focus-visible + span { outline: 2px solid var(--marone); outline-offset: 1px; }
.symbol-wahl select { width: auto; }

/* Allergene */
.ek-allergene { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.ek-allergene label { display: inline-flex; cursor: pointer; position: relative; }
.ek-allergene input[type="checkbox"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ek-allergene span { display: inline-flex; align-items: center; gap: 4px; height: 27px; padding: 0 8px; border: 1px solid #cfcac0; border-radius: 999px; font-size: 13.5px; color: #6b747c; background: #fff; }
.ek-allergene span b { font-weight: 500; }
.ek-allergene .titel { border: 0; padding: 0; background: none; height: auto; font-size: 13px; color: var(--text-2); font-weight: 500; margin-right: 4px; }
.ek-allergene input:checked + span { background: var(--marone-dunkel); border-color: var(--marone-dunkel); color: #fff; }
.ek-allergene input:focus-visible + span { outline: 2px solid var(--lazur); outline-offset: 1px; }
.ek-allergene input.hinweis { width: 230px; margin-left: 4px; font-size: 14px; padding: 4px 7px; }
.ek-vorschlag:not(:empty) { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; background: #fff7e6; border: 1px solid #efd9a8; border-radius: 6px; padding: 5px 10px; }
.ek-vorschlag i { color: var(--text-2); }
.ek-vorschlag button { padding: 3px 12px; font-size: 14px; border-color: var(--marone-dunkel); color: var(--marone-dunkel); font-weight: 500; }

/* Weinkarte */
.wz { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 16px; border-bottom: 1px solid #f1eee8; }
.wz.wein { grid-template-columns: 110px minmax(0, 1fr) 84px 92px auto auto; }
.wz select { font-size: 13px; padding: 4px 5px; }
.wz .wz-name { display: grid; gap: 3px; }
.wz .wz-name input:first-child { font-weight: 500; }
.wz .wz-name input + input { font-size: 14px; font-style: italic; color: var(--text-2); }
.wz.art-land input { font-weight: 500; letter-spacing: .12em; }
.wz.art-region input { text-transform: uppercase; letter-spacing: .14em; font-size: 14px; }
.wz.art-weingut input { font-weight: 500; text-decoration: underline; text-decoration-color: var(--linie); }
.wz.art-text input { font-style: italic; color: var(--text-2); }
.wz.aus { opacity: .5; }
.wz.rot .wz-name input:first-child { color: #9c1c1c; }
.wz .haken { font-size: 13px; white-space: nowrap; }

/* Sprache */
.sprach-umschalter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: #fff; border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; font-size: 14px; }
.sprach-umschalter.en { background: #e9f0f6; }
.sprach-umschalter button { padding: 5px 14px; border-radius: 999px; }
.sprach-umschalter button[aria-pressed="true"] { background: var(--lazur); color: #fff; border-color: var(--lazur); }
.de-ref { display: block; font-size: 12.5px; color: var(--grau); margin-top: 2px; font-weight: 400; letter-spacing: 0; }
.auto-uebersetzen { font-size: 13px; padding: 4px 10px; border-color: var(--lazur); color: var(--lazur); font-weight: 500; }

dialog { border: 0; border-radius: 10px; padding: 0; width: min(560px, calc(100vw - 24px)); }
dialog::backdrop { background: rgba(0, 25, 40, .55); }
dialog form { padding: 20px 22px; display: grid; gap: 12px; }
dialog h2 { margin: 0; color: var(--lazur); font-weight: 500; }
dialog .knoepfe { display: flex; flex-direction: row-reverse; gap: 8px; justify-content: flex-start; }
dialog .liste { max-height: 50vh; overflow: auto; border: 1px solid var(--linie); border-radius: 6px; }
dialog .liste label { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid #f1eee8; font-size: 15px; color: var(--text); font-weight: 400; }
dialog .liste input { width: auto; margin: 0; }
dialog:has(.hilfe) { width: min(640px, calc(100vw - 24px)); }
.hilfe { display: grid; gap: 4px; font-size: 15px; line-height: 1.45; }
.hilfe ol, .hilfe ul { margin: 2px 0 8px; padding-left: 20px; display: grid; gap: 4px; }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--lazur); color: #fff; padding: 10px 18px; border-radius: 6px; z-index: 50; box-shadow: 0 4px 14px rgba(0,0,0,.3); }

@media (max-width: 760px) {
  .raster { grid-template-columns: minmax(0, 1fr); }
  .seitenleiste { position: static; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--linie); }
  .bearbeiten { padding: 14px 12px 80px; }
  .leiste { flex-wrap: wrap; }
  .reiter { order: 5; width: 100%; }
  .zwei, .drei, .rk-felder { grid-template-columns: 1fr; }
  .wz, .wz.wein { grid-template-columns: 1fr 1fr; }
  .wz .wz-name { grid-column: 1 / -1; }
}

/* Weinkarte: kompakte Tabelle über die volle Breite, eine Zeile pro Wein */
.bearbeiten.voll { max-width: none; padding: 14px 18px 80px; }
.voll .rk-felder { grid-template-columns: 1fr 1fr auto; align-items: end; }
.voll .rk-felder .breit { grid-column: auto; padding-bottom: 8px; }
.wz { display: grid; grid-template-columns: 14px 16px 84px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 2px 12px; border-bottom: 1px solid #f1eee8; min-height: 34px; }
.wz.wein { grid-template-columns: 14px 16px 84px minmax(220px, 1.5fr) minmax(140px, 1fr) 64px 76px 36px 30px 76px; }
.wz-kopf { grid-template-columns: 14px 16px 84px minmax(220px, 1.5fr) minmax(140px, 1fr) 64px 76px 36px 30px 76px; position: sticky; top: 94px; z-index: 4; background: #fff; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); min-height: 26px; border-bottom: 1px solid var(--linie); }
.wz input:not([type="checkbox"]), .wz select { padding: 4px 7px; font-size: 14.5px; border-color: transparent; background: transparent; border-radius: 4px; }
.wz input:not([type="checkbox"]):hover, .wz select:hover { border-color: #ddd8cd; background: #fff; }
.wz input:not([type="checkbox"]):focus { background: #fff; }
.wz select.art { font-size: 12px; color: var(--text-2); padding: 3px 2px; }
.wz .w-zusatz { font-style: italic; color: var(--text-2); font-size: 13.5px !important; }
.wz .w-menge { font-size: 13.5px !important; color: var(--text-2); text-align: right; }
.wz .w-preis { text-align: right; font-variant-numeric: tabular-nums; }
.wz .mini { display: flex; justify-content: center; }
.wz .mini input { width: 16px; height: 16px; margin: 0; accent-color: var(--lazur); }
.wz .rot-haken input { accent-color: #b3141e; }
.wz.wein .w-name { font-weight: 500; }
.wz.rot .w-name { color: #9c1c1c; }
.wz.aus .w-name, .wz.aus .w-zusatz { text-decoration: line-through; opacity: .55; }
.wz.art-land { background: #faf8f3; }
.wz.art-land .w-text { font-weight: 500; letter-spacing: .14em; text-align: center; font-size: 15px; }
.wz.art-region .w-text { text-transform: uppercase; letter-spacing: .16em; text-align: center; font-size: 13px; color: var(--text-2); }
.wz.art-weingut { border-bottom-color: #c9c3b6; }
.wz.art-weingut .w-text { font-weight: 500; text-decoration: underline; text-decoration-color: #c9c3b6; text-underline-offset: 3px; }
.wz.art-text .w-text { font-style: italic; color: var(--text-2); text-align: center; }
.wz .knoepfchen button { padding: 2px 7px; font-size: 13px; }
.wz .knoepfchen { opacity: .35; width: 76px; justify-content: flex-end; }
.wz:hover .knoepfchen, .wz:focus-within .knoepfchen { opacity: 1; }
.wz-griff { cursor: grab; color: var(--grau); font-size: 16px; line-height: 1; user-select: none; text-align: center; }
.wz .mark { width: 15px; height: 15px; margin: 0; accent-color: var(--lazur); }
.wz.markiert { background: #e3edf4; }
.wz.zieht { opacity: .4; }
.wz.drop-oben { box-shadow: inset 0 3px 0 var(--marone); }
.wz.drop-unten { box-shadow: inset 0 -3px 0 var(--marone); }
.eintrag-links.drop-kap { background: #fbe9d6; box-shadow: inset 4px 0 0 var(--marone); }
.wz.blink { animation: blink 1.6s ease 2; }
@keyframes blink { 50% { background: #fbe9d6; } }
select.plus { width: 38px; padding: 2px; font-size: 13px; text-align: center; cursor: pointer; }
.markleiste { position: sticky; top: 50px; z-index: 5; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 7px 12px; min-height: 44px; background: #faf8f3; border-top: 1px solid var(--linie); }
.markleiste.an { background: #e3edf4; }
.markleiste button { padding: 4px 10px; font-size: 14px; }
.neuer-reihe { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px 14px; }
.neuer-reihe button { border-style: dashed; }
.seitenleiste .suche { padding: 10px 12px; border-bottom: 1px solid var(--linie); }
@media (max-width: 1100px) {
  .wz.wein, .wz-kopf { grid-template-columns: 14px 16px 84px minmax(0, 1fr) 64px 76px 30px 30px auto; }
  .wz.wein .w-zusatz { grid-column: 4 / -1; grid-row: 2; }
  .wz-kopf span:nth-child(5) { display: none; }
}
.wz .w-zusatz:not(:focus)::placeholder { color: transparent; }

/* Weinkarte nach Weingütern */
.liste-links .unterkopf { padding: 8px 14px 3px; font-size: 12.5px; font-weight: 500; color: var(--lazur); background: #f7f5f0; border-bottom: 1px solid #f1eee8; }
.eintrag-links small { display: block; font-size: 12px; color: var(--grau); }
.gut-kasten .gross input { font-size: 20px; font-weight: 500; }
.wein-ek { gap: 5px; }
.wein-ek .w-name { font-weight: 500; font-size: 16px; }
.wein-ek .w-zusatz { font-style: italic; font-size: 14px; color: var(--text-2); }
.wein-ek.rot .w-name { color: #9c1c1c; }
.wein-ek .ek-zeile label { display: grid; gap: 2px; }
.wein-ek .ek-zeile label.haken { display: inline-flex; }
.wein-ek .ek-zeile select { width: auto; min-width: 170px; }
.wein-ek .ek-zeile input.menge { width: 90px; }
.wein-ek .ek-zeile input.preis { width: 100px; }
.klein-knopf { font-size: 13px; padding: 4px 9px; color: var(--text-2); }
.neu-wein-kasten { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.neu-wein-kasten select { width: auto; }
.einst-zeile { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(120px, 1fr) 150px auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid #f1eee8; }
.einst-zeile.kurz { grid-template-columns: minmax(150px, 360px) auto; }
.einst-zeile:has(.einst-haken:only-of-type) { }
.einst-zeile input.gross { font-weight: 500; }
.einst-haken { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.kasten .unterkopf { font-weight: 500; color: var(--lazur); margin-top: 6px; }
@media (max-width: 900px) { .einst-zeile { grid-template-columns: 1fr 1fr; } }
.wein-ek .w-zusatz:not(:focus):placeholder-shown { border-color: transparent; background: transparent; }
.wein-ek .w-zusatz:not(:focus)::placeholder { color: #c3bdb1; }

/* Weinkarte: Weine als Karten über die volle Breite (2–3 nebeneinander) */
.weinkarte-ansicht { max-width: none; }
.weinkarte-ansicht > .kasten { max-width: 1100px; }
.wein-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); gap: 12px; padding: 12px 16px 4px; border-top: 0; background: #f8f6f1; }
.wein-raster .wein-ek { background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; }
.wein-raster .wein-ek.aus { background: #faf9f6; }
.weinkarte-ansicht .rk .neuer { width: auto; margin: 8px 16px 14px; padding: 9px 18px; }
.auch { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; border-top: 1px dashed var(--linie); padding-top: 6px; margin-top: 2px; }
.auch-zeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #fbf6ee; border-radius: 6px; padding: 4px 8px; }
.auch-zeile.aus { opacity: .55; }
.auch-titel { font-size: 12.5px; color: var(--marone-dunkel); font-weight: 500; }
.auch-zeile select { width: auto; font-size: 14px; padding: 4px 6px; }
.auch-zeile input { font-size: 14px; padding: 4px 6px; }
.auch-zeile input.menge { width: 80px; } .auch-zeile input.preis { width: 85px; } .auch-zeile .auch-gruppe { width: 150px; }
.wein-ek.verknuepft { border-left: 4px solid var(--marone) !important; }
.w-name-fest { font-size: 16px; }
.wein-ek.verknuepft .ek-name .klein { display: block; }

/* Weinkarte: Übersicht wie die Karte */
.ue-kapitel .ue-inhalt { padding: 4px 16px 14px; }
.ue-land { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; font-size: 15px; color: var(--lazur); }
.ue-region { display: grid; grid-template-columns: 210px 1fr; gap: 8px; align-items: start; padding: 5px 0 5px 14px; border-top: 1px solid #f1eee8; }
.ue-region-name { display: flex; align-items: center; gap: 4px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); padding-top: 5px; }
.ue-unten { margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.gut-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 14px; background: #f4f1ea; border-color: #e4ded2; }
.gut-chip span { font-size: 12px; color: var(--grau); }
.gut-chip:hover { background: #e3edf4; border-color: var(--lazur); }
.neu-chip { background: #fff; border-style: dashed; color: var(--lazur); }
.gruppe-chip { display: inline-flex; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 14px; background: #f4f1ea; }
.gruppe-chip span { color: var(--grau); font-size: 12px; }
.stift { border: 0; background: none; padding: 0 4px; color: var(--grau); font-size: 14px; }
.stift:hover { color: var(--lazur); }
.klein-pf button { padding: 0 6px; font-size: 12px; }
.w-jahr { width: 70px !important; flex: none; font-weight: 500; text-align: center; }
.wein-ek.rot .w-jahr { color: #9c1c1c; }
.zurueck-zeile { margin-bottom: 2px; }
.neu-wein { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.neu-wein select { width: auto; }
@media (max-width: 760px) { .ue-region { grid-template-columns: 1fr; } }

/* Alle Weingüter */
.gk-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gk-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gk-filter select, .gk-filter input { width: auto; min-width: 220px; }
.umschalter { display: inline-flex; gap: 4px; }
.umschalter button { padding: 6px 14px; border-radius: 999px; }
.umschalter button[aria-pressed="true"] { background: var(--lazur); color: #fff; border-color: var(--lazur); }
.gk-land { margin: 18px 0 6px; color: var(--lazur); font-weight: 500; font-size: 18px; }
.gk-region { margin: 8px 0 6px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.gut-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.gut-karte { display: grid; gap: 3px; text-align: left; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--linie); background: #fff; }
.gut-karte:hover { border-color: var(--lazur); background: #f5f9fb; }
.gut-karte b { font-weight: 500; font-size: 15.5px; color: var(--dark); }
.gut-karte .herkunft { font-size: 13px; color: var(--marone-dunkel); }
.gut-karte .kapitel-zahlen { font-size: 13px; color: var(--text-2); }
.gut-karte .aus-zahl { font-size: 12px; color: var(--grau); }
.gut-karte.leer { opacity: .6; border-style: dashed; }
.eintrag-links.ohne .name { text-decoration: line-through; color: var(--grau); }
/* Auf die Website bringen */
.website-knopf { margin-left: auto; }
dialog .code-feld { font-size: 22px; letter-spacing: .3em; width: 9em; font-variant-numeric: tabular-nums; }
.warnhinweis { background: #fbeee0; border-left: 3px solid var(--warn); padding: 6px 10px; font-size: 14px; }
.art-feld { display: inline-grid; gap: 2px; } .art-feld input { width: 190px; font-size: 14px; padding: 4px 7px; }