/*
 * Kanzlei Falbo-Özkul · Rechnungen & Briefe
 * Farben und Schriften nach www.kanzlei-falbo.de (warmes Weiß, Anthrazit, Kanzleirot, Lora + Inter).
 * Keine externen Schriften (Datenschutz): Lora/Inter, wenn installiert, sonst Georgia/Segoe UI.
 */
:root {
    --grund: #fffdfa;
    --flaeche: #ffffff;
    --sand: #f6f3ed;
    --linie: #e7e1d7;
    --tinte: #202426;
    --leise: #676b6c;
    --rot: #d80828;
    --rot-dunkel: #b20620;
    --rot-hauch: #fdecef;
    --gut: #047857; --gut-hauch: #e7f6ef;
    --warn: #b45309; --warn-hauch: #fdf3e2;
    --info: #1d4ed8; --info-hauch: #eaf0fd;
    --serif: Lora, Georgia, "Times New Roman", serif;
    --sans: Inter, "Segoe UI", system-ui, Arial, sans-serif;
    --radius: 10px;
    --schatten: 0 1px 2px rgba(32,36,38,.06), 0 4px 16px rgba(32,36,38,.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--grund); color: var(--tinte); font: 16px/1.5 var(--sans); }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; line-height: 1.2; }
h1 { font-size: 30px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
[x-cloak] { display: none !important; }
.leise { color: var(--leise); }
.klein { font-size: 14px; }
.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechts { text-align: right; }

/* Kopfleiste */
.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 30; }
.kopf-innen { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 20px; min-height: 64px; flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marke-logo { height: 46px; width: auto; display: block; }
.marke-zeichen { width: 34px; height: 34px; border: 2px solid var(--rot); color: var(--rot); display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 15px; border-radius: 4px; }
.marke-name { font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; }
.marke-name small { display: block; font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--leise); }
.menue { display: flex; gap: 2px; flex: 1; }
.menue a { text-decoration: none; padding: 8px 11px; border-radius: 8px; color: var(--leise); font-weight: 500; white-space: nowrap; }
.menue a:hover { color: var(--tinte); background: var(--sand); }
.menue a.aktiv { color: var(--rot); background: var(--rot-hauch); }
.kopf-rechts { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--leise); }

/* Seiten */
.seite { max-width: 1240px; margin: 0 auto; padding: 28px 24px 64px; }
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.seitenkopf p { margin: 6px 0 0; color: var(--leise); }
.aktionen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); padding: 10px 16px; border-radius: 8px; font: 500 15px var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap; }
.knopf:hover { border-color: #cfc6b8; background: var(--sand); }
.knopf.haupt { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf.haupt:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.knopf.dunkel { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.knopf.gefahr { color: var(--rot); }
.knopf.klein { padding: 6px 11px; font-size: 14px; }
.knopf.leer { border-color: transparent; background: transparent; }
.knopf.leer:hover { background: var(--sand); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }

/* Karten, Kacheln */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.karte-innen { padding: 20px 22px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kachel { padding: 18px 20px; display: grid; gap: 4px; text-decoration: none; }
.kachel .wert { font-family: var(--serif); font-size: 28px; font-weight: 600; }
.kachel .titel { font-size: 14px; color: var(--leise); }
.kachel.warn .wert { color: var(--warn); }
.raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; }

/* Reiter */
.reiter { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--linie); margin-bottom: 16px; }
.reiter button, .reiter a { border: 0; background: none; padding: 10px 14px; font: 500 15px var(--sans); color: var(--leise); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.reiter .aktiv { color: var(--rot); border-bottom-color: var(--rot); }
.reiter .anzahl { font-size: 12px; background: var(--sand); border-radius: 99px; padding: 1px 7px; margin-left: 4px; color: var(--leise); }

/* Tabellen */
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th { text-align: left; font-size: 13px; font-weight: 600; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; border-bottom: 1px solid var(--linie); background: var(--sand); }
.tabelle td { padding: 12px 14px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr.klickbar { cursor: pointer; }
.tabelle tbody tr.klickbar:hover td { background: #fbf8f3; }
.tabelle tfoot td { font-weight: 600; background: var(--sand); }
.tabellen-rahmen { overflow-x: auto; }

.chip { display: inline-block; font-size: 13px; font-weight: 500; padding: 2px 10px; border-radius: 99px; white-space: nowrap; }
.chip.grau { background: var(--sand); color: var(--leise); }
.chip.gut { background: var(--gut-hauch); color: var(--gut); }
.chip.warn { background: var(--warn-hauch); color: var(--warn); }
.chip.info { background: var(--info-hauch); color: var(--info); }
.chip.rot { background: var(--rot-hauch); color: var(--rot); }

/* Formulare */
.feld { display: grid; gap: 6px; }
.feld label, .feldname { font-size: 14px; font-weight: 500; color: var(--leise); }
.eingabe, select.eingabe, textarea.eingabe { width: 100%; border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; font: 15px var(--sans); background: var(--flaeche); color: var(--tinte); }
textarea.eingabe { resize: vertical; min-height: 90px; line-height: 1.5; }
.eingabe:focus { border-color: var(--rot); outline: none; box-shadow: 0 0 0 3px var(--rot-hauch); }
.formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.formular .breit { grid-column: 1 / -1; }
.suche { position: relative; max-width: 360px; flex: 1; }
.suche input { padding-left: 38px; }
.suche svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--leise); }
.umschalter { display: inline-flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.umschalter button { border: 0; background: var(--flaeche); padding: 9px 16px; font: 500 15px var(--sans); cursor: pointer; color: var(--leise); }
.umschalter button.aktiv { background: var(--tinte); color: #fff; }
.fehler { color: var(--rot); font-size: 14px; }

/* Hinweise */
.hinweis { padding: 12px 16px; border-radius: 8px; border: 1px solid var(--linie); background: var(--sand); font-size: 15px; }
.hinweis.gut { background: var(--gut-hauch); border-color: #b7e3cf; color: #065f46; }
.hinweis.warn { background: var(--warn-hauch); border-color: #f2d3a3; color: #7c3a06; }
.hinweis.rot { background: var(--rot-hauch); border-color: #f5b8c3; color: var(--rot-dunkel); }
.leer-zustand { text-align: center; padding: 48px 20px; color: var(--leise); }
.leer-zustand h3 { color: var(--tinte); margin-bottom: 8px; }

/* Dialog */
.dialog-grund { position: fixed; inset: 0; background: rgba(32,36,38,.45); z-index: 60; display: grid; place-items: center; padding: 16px; }
.dialog { background: var(--flaeche); border-radius: 14px; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dialog.gross { width: min(980px, 100%); height: calc(100vh - 32px); display: flex; flex-direction: column; }
.dialog-kopf { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--linie); }
.dialog-inhalt { padding: 20px 22px; }
.dialog-fuss { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--linie); background: var(--sand); border-radius: 0 0 14px 14px; }
.dialog iframe { border: 0; width: 100%; flex: 1; background: #525659; }

/* ───────────── Schreibtisch: das Blatt wie in Word ───────────── */
.schreibtisch { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.blatt-rahmen { background: #ece8e1; border-radius: var(--radius); padding: 28px; overflow-x: auto; }
.blatt { position: relative; width: 794px; min-height: 1123px; margin: 0 auto; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); color: #000; font: 14px/1.4 Arial, Helvetica, sans-serif; padding: 0 205px 60px 76px; }
.blatt .b-kopf { position: absolute; top: 68px; left: 0; right: 0; text-align: center; font-family: "Times New Roman", Times, serif; font-weight: bold; }
.blatt .b-kopf .n { font-size: 25px; }
.blatt .b-kopf .z { font-size: 17px; }
.blatt .b-absender { position: absolute; top: 223px; left: 76px; font-size: 9px; font-weight: bold; text-decoration: underline; }
.blatt .b-spalte { position: absolute; top: 248px; left: 605px; width: 170px; font-family: "Times New Roman", Times, serif; font-size: 11px; line-height: 1.22; color: #222; }
.blatt .b-spalte b { display: block; }
.blatt .b-spalte .name { text-align: center; font-size: 13px; }
.blatt .b-spalte .titel { text-align: center; font-size: 10px; margin-bottom: 18px; }
.blatt .b-spalte .ue { margin-top: 12px; font-weight: bold; }
.blatt .b-datum { position: absolute; top: 344px; left: 348px; font-size: 12px; }
.blatt .b-zeichen { position: absolute; top: 365px; left: 348px; width: 212px; border: 1px solid #000; padding: 3px 6px; font-size: 12px; display: flex; gap: 4px; align-items: center; }
.blatt .b-hinweis { position: absolute; top: 393px; left: 367px; font-size: 10px; }
.blatt .b-platz { height: 482px; }

/* Bereiche, in die man klicken und schreiben kann */
.bereich { position: relative; border-radius: 4px; outline: 1px dashed transparent; transition: outline-color .15s, background .15s; }
.bereich:hover { outline-color: #d8cfc0; background: #fffdf8; }
.bereich:focus-within { outline: 1px solid var(--rot); background: #fffdfa; }
.bereich .etikett { position: absolute; top: -17px; left: 0; font: 600 11px var(--sans); color: var(--rot); text-transform: uppercase; letter-spacing: .05em; opacity: 0; pointer-events: none; transition: opacity .15s; white-space: nowrap; }
.bereich:hover .etikett, .bereich:focus-within .etikett { opacity: 1; }
.blatt input.frei, .blatt textarea.frei { border: 0; background: transparent; font: inherit; color: inherit; width: 100%; padding: 2px 3px; resize: none; outline: none; }
.blatt textarea.frei { overflow: hidden; line-height: inherit; display: block; }
.blatt .b-anschrift { position: absolute; top: 236px; left: 72px; width: 300px; font-size: 15px; line-height: 1.28; }
.blatt .b-anschrift textarea { min-height: 90px; }
.blatt .platzhalter-knopf { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 92px; border: 1.5px dashed #d9cfbf; border-radius: 6px; background: #fffdf8; color: var(--leise); font: 500 14px var(--sans); cursor: pointer; }
.blatt .platzhalter-knopf:hover { border-color: var(--rot); color: var(--rot); }
.blatt .klappliste { position: absolute; left: 0; top: calc(100% + 4px); width: 360px; z-index: 20; background: #fff; border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.16); font: 14px var(--sans); color: var(--tinte); overflow: hidden; }
.klappliste .such { padding: 10px; border-bottom: 1px solid var(--linie); }
.klappliste ul { list-style: none; margin: 0; padding: 4px 0; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.klappliste li button { all: unset; display: grid; grid-template-columns: 1fr auto; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 12px; cursor: pointer; }
.klappliste li button:hover, .klappliste li button.markiert { background: var(--rot-hauch); }
.klappliste li .unter { font-size: 12px; color: var(--leise); }
.klappliste .gruppe { padding: 8px 12px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); }
.klappliste .neu { border-top: 1px solid var(--linie); }
.klappliste .neu button { all: unset; display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; color: var(--rot); font-weight: 600; cursor: pointer; }
.klappliste .neu button:hover { background: var(--rot-hauch); }

/* Positionstabelle auf dem Blatt */
.b-positionen { width: 100%; border-collapse: collapse; margin-top: 4px; }
.b-positionen td { padding: 3px 2px; vertical-align: top; font-size: 14px; }
.b-positionen td.betrag { text-align: right; width: 100px; white-space: nowrap; padding-top: 6px; }
.b-positionen tr.linie td { border-bottom: 1px solid #000; }
.b-positionen tr.summe td { font-weight: bold; padding-top: 6px; }
.pos-neu { display: flex; gap: 8px; margin: 10px 0 2px; font-family: var(--sans); }
.pos-neu button { all: unset; cursor: pointer; font: 500 13px var(--sans); color: var(--rot); padding: 5px 10px; border: 1px dashed #e7b9c1; border-radius: 6px; }
.pos-neu button:hover { background: var(--rot-hauch); }

/* Seitenleiste neben dem Blatt */
.leiste { position: sticky; top: 84px; display: grid; gap: 16px; }
.leiste .karte-innen { display: grid; gap: 14px; }
.speicherstand { font-size: 13px; color: var(--leise); display: flex; align-items: center; gap: 6px; }
.speicherstand .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--gut); }

/* Brief-Editor */
.werkzeugleiste { display: flex; gap: 2px; flex-wrap: wrap; padding: 6px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; margin-bottom: 14px; position: sticky; top: 74px; z-index: 10; }
.werkzeugleiste button { all: unset; cursor: pointer; min-width: 34px; height: 34px; padding: 0 8px; box-sizing: border-box; display: grid; place-items: center; border-radius: 6px; font: 600 14px var(--sans); color: var(--tinte); }
.werkzeugleiste button:hover { background: var(--sand); }
.werkzeugleiste .trenner { width: 1px; background: var(--linie); margin: 4px 6px; }
.brieftext { min-height: 420px; outline: none; text-align: justify; font-size: 14px; line-height: 1.5; }
.brieftext:empty::before { content: attr(data-platzhalter); color: #9a9a9a; }
.brieftext p { margin: 0 0 10px; }
.brieftext h2 { font: bold 17px Arial, sans-serif; text-align: center; letter-spacing: 3px; margin: 6px 0 14px; }
.brieftext h3 { font: bold 15px Arial, sans-serif; margin: 8px 0 6px; }

/* Anmeldung */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg, var(--grund), var(--sand)); }
.anmeldung .karte { width: min(420px, 100%); }

.menue-knopf, .menue .nur-schmal { display: none; }
@media (max-width: 1180px) {
    .kopf-innen { gap: 12px; }
    .menue-knopf { display: inline-flex; margin-left: auto; }
    .menue { display: none; order: 5; flex-basis: 100%; flex-direction: column; padding-bottom: 12px; }
    .menue.offen { display: flex; }
    .menue .nur-schmal { display: block; }
    .marke-name small { display: none; }
    .kopf-rechts a { display: none; }
}
@media (max-width: 1100px) {
    .schreibtisch { grid-template-columns: 1fr; }
    .leiste { position: static; }
}
@media (max-width: 640px) {
    .kopf-innen, .seite { padding-left: 16px; padding-right: 16px; }
    .blatt-rahmen { padding: 12px; }
    h1 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.bereich .etikett.rand { top: 4px; left: auto; right: calc(100% + 10px); text-align: right; width: 64px; white-space: normal; line-height: 1.15; }
.blatt .b-zeichen { white-space: nowrap; }
.blatt .b-zeichen input.frei { flex: 1; min-width: 0; }

/* ── Logo, Symbolknöpfe, Hinweise beim Darüberfahren ── */
.symbolknopf { all: unset; box-sizing: border-box; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--leise); cursor: pointer; }
.symbolknopf:hover, .symbolknopf.aktiv { background: var(--sand); color: var(--tinte); }
.symbolknopf:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
[data-tipp] { position: relative; }
[data-tipp]::after { content: attr(data-tipp); position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); background: var(--tinte); color: #fff; font: 500 12px/1.3 var(--sans); padding: 6px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s .3s, transform .15s .3s; z-index: 80; }
[data-tipp]:hover::after, [data-tipp]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ── Blatt: Logo rechts, Empfänger mit schwebender Leiste ── */
.blatt .b-logo { display: block; width: 168px; height: auto; margin: -6px 0 16px; }
.blatt .b-anschrift .schwebeleiste { position: absolute; top: -34px; left: 0; display: flex; gap: 6px; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none; font-family: var(--sans); }
.blatt .b-anschrift:hover .schwebeleiste, .blatt .b-anschrift:focus-within .schwebeleiste { opacity: 1; transform: none; pointer-events: auto; }
.schwebeleiste button, .schwebeleiste a { all: unset; cursor: pointer; font: 500 12px var(--sans); background: var(--tinte); color: #fff; padding: 5px 10px; border-radius: 99px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.schwebeleiste button:hover, .schwebeleiste a:hover { background: var(--rot); }
.blatt .b-datum { display: flex; align-items: center; gap: 4px; }

/* ── Leistungszeilen: ruhig im Lesen, Details erst beim Bearbeiten ── */
.b-positionen .pos-werkzeug { position: absolute; left: -76px; top: 3px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.b-positionen tr.pos-zeile:hover .pos-werkzeug, .b-positionen tr.pos-zeile:focus-within .pos-werkzeug { opacity: 1; }
.b-positionen .pos-werkzeug button { all: unset; cursor: pointer; width: 22px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--leise); font: 500 13px var(--sans); }
.b-positionen .pos-werkzeug button:hover { background: var(--sand); color: var(--tinte); }
.b-positionen .pos-werkzeug button.weg:hover { background: var(--rot-hauch); color: var(--rot); }
.b-positionen .pos-werkzeug button:disabled { opacity: .3; cursor: default; background: none; }
.b-positionen .pos-info { all: unset; cursor: pointer; display: block; font: 11px var(--sans); color: #9a9389; padding: 0 3px 3px; }
.b-positionen .pos-info:hover { color: var(--rot); }
.b-positionen .pos-zusatz { display: none; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 2px 0 6px; padding: 8px 10px; background: #faf7f2; border: 1px solid var(--linie); border-radius: 10px; font: 11px var(--sans); color: var(--leise); }
.b-positionen tr.pos-zeile.offen .pos-zusatz { display: flex; }
.b-positionen tr.pos-zeile.offen .pos-info { display: none; }
.b-positionen .pos-zusatz label { display: grid; gap: 2px; }
.b-positionen .pos-zusatz input, .b-positionen .pos-zusatz select { font: 13px var(--sans); border: 1px solid var(--linie); background: #fff; border-radius: 6px; padding: 4px 6px; color: var(--tinte); }
.b-positionen .pos-zusatz input:focus, .b-positionen .pos-zusatz select:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px var(--rot-hauch); }
.b-positionen .pos-zusatz .pos-text { all: unset; cursor: pointer; font: 500 12px var(--sans); color: var(--rot); padding: 5px 6px; border-radius: 6px; }
.b-positionen .pos-zusatz .pos-text:hover { background: var(--rot-hauch); }

/* ── E-Mail-Dialog ── */
.dialog.breit { width: min(780px, 100%); }
.mail-zeile { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; }
.mail-zeile label { font-size: 14px; color: var(--leise); font-weight: 500; }
.anhaenge { display: flex; gap: 8px; flex-wrap: wrap; }
.anhang { display: inline-flex; align-items: center; gap: 6px; background: var(--sand); border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.versendet { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gut); }
.mahnzeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ── Sortierbare Spalten ── */
.sortknopf { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.sortknopf .pfeil { opacity: .35; font-size: 12px; }
.sortknopf:hover { color: var(--tinte); }
.sortknopf:hover .pfeil, .sortknopf.aktiv .pfeil { opacity: 1; }
.sortknopf.aktiv { color: var(--rot); }
th.rechts .sortknopf { flex-direction: row-reverse; }

/* ── Testbereich ── */
.testband { background: var(--warn-hauch); color: #7c3a06; border-bottom: 1px solid #f2d3a3; text-align: center; font-size: 14px; padding: 7px 16px; }
.testband a { font-weight: 600; }