.browser { position: relative; }
.browser .topbar { margin-bottom: 0; }
.search .x-btn { flex: none; }
.round-btn.is-on { background: var(--dark); color: #fff; }
.cats--small { gap: 8px; margin-top: 12px; }
.cats--small .cat { width: auto; grid-auto-flow: column; align-items: center; gap: 6px; padding: 0 12px 0 6px; height: 40px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-s); font-size: 13px; }
.cats--small .cat__icon { width: 28px; height: 28px; border-radius: 10px; font-size: 16px; box-shadow: none; background: transparent; }
.cats--small .cat.is-active { background: var(--dark); color: #fff; }
.cats--small .cat.is-active .cat__icon { background: transparent; box-shadow: none; }
.quick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.quick__chip { height: 36px; padding: 0 12px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-s); font-weight: 800; font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.quick__chip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.quick__chip.is-on { background: var(--dark); color: #fff; }
.quick__chip.is-on b { color: #ffb48f; }
.quick__chip[disabled] { opacity: .45; cursor: default; }
.quick__group { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; color: var(--ink-2); }
.quick__group select { height: 36px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); padding: 0 10px; font-weight: 800; }
.segmented--icons { padding: 3px; }
.segmented--icons button { width: 40px; height: 34px; min-height: 0; flex: none; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #d8cbc0; flex: none; }
.dot--yellow { background: var(--yellow); }
.dot--accent { background: var(--accent); }
.dot--green { background: var(--green); }
.dot--blue { background: var(--blue); }
.jumps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -2px -18px 12px; padding: 2px 18px 6px; }
.jumps::-webkit-scrollbar { display: none; }
.jump { flex: none; height: 32px; padding: 0 11px; border-radius: 11px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 13px; font-weight: 800; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.jump b { color: var(--accent-ink); }
.jump.is-closed { opacity: .7; }
.pgroup + .pgroup { margin-top: 12px; }
.pgroup__head { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; margin-bottom: 10px; border-radius: 16px; background: #efe5dc; position: sticky; top: 0; z-index: 4; }
.pgroup__head b { display: block; font-weight: 800; font-size: 15px; }
.pgroup__head small { display: block; color: var(--ink-2); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgroup__chev { color: var(--ink-3); transition: transform .2s; flex: none; }
.pgroup__head.is-closed { margin-bottom: 0; }
.pgroup__head.is-closed .pgroup__chev { transform: rotate(-90deg); }
.pet-row.is-picked, .pline.is-picked, .ptile.is-picked { background: #fff3ec; outline: 2px solid var(--accent); }
.pet-row.is-current, .pline.is-current { outline: 3px solid var(--accent); } .plist--kompakt { background: var(--card); border-radius: 18px; box-shadow: var(--shadow-s); overflow: hidden; }
.pline { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; text-align: left; border-top: 1px solid var(--line); }
.pline:first-child { border-top: 0; }
.pline:hover { background: var(--bg-soft); }
.pline__photo { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex: none; background: var(--accent-soft); }
.pline__body { flex: 1; min-width: 0; }
.pline__body b { font-weight: 800; }
.pline__body small { display: block; color: var(--ink-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pline.is-current { outline-offset: -3px; background: #fff7f2; } .plist--kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.ptile { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--accent-soft); aspect-ratio: 1; box-shadow: var(--shadow-s); text-align: left; }
.ptile__photo { width: 100%; height: 100%; object-fit: cover; }
.ptile__stripe { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: #d8cbc0; }
.ptile__stripe.tone-accent { background: var(--accent); }
.ptile__stripe.tone-yellow { background: var(--yellow); }
.ptile__stripe.tone-blue { background: var(--blue); }
.ptile__stripe.tone-green { background: var(--green); }
.ptile__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; color: #fff; font-weight: 800; font-size: 13px; background: linear-gradient(transparent, rgba(30, 20, 16, .75)); display: flex; gap: 4px; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ptile__check { position: absolute; top: 10px; right: 8px; background: var(--card); }
.ptile .photo-fallback { width: 100%; height: 100%; }
@media (min-width: 1024px) { .plist--kacheln { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } } .pet-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border-radius: 18px; box-shadow: var(--shadow-s); overflow: hidden; font-size: 14px; }
.pet-table th { text-align: left; font-size: 12px; font-weight: 800; color: var(--ink-3); padding: 10px 10px; background: var(--bg-soft); border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap; position: sticky; top: 0; z-index: 2; user-select: none; }
.pet-table th.is-sorted { color: var(--accent-ink); }
.pet-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pet-table tbody tr { cursor: pointer; }
.pet-table tbody tr:hover { background: var(--bg-soft); }
.pet-table tbody tr:last-child td { border-bottom: 0; }
.pet-table tr.is-picked { background: #fff3ec; }
.pet-table__photo { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; display: block; }
.pet-table .photo-fallback { width: 36px; height: 36px; border-radius: 10px; }
.mono { font-variant-numeric: tabular-nums; font-size: 13px; } .select-bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar) + var(--safe-bottom) + 12px); z-index: 40; background: var(--dark); color: #fff; border-radius: 22px; padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow); animation: fade .2s; flex-wrap: wrap; }
.select-bar b { flex: 1; font-weight: 800; white-space: nowrap; }
.select-bar button { min-height: 40px; padding: 0 12px; border-radius: 13px; background: var(--dark-2); color: #fff; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.select-bar button.is-main { background: var(--accent); }
.select-bar button[disabled] { opacity: .4; }
.screen--hunde { padding-bottom: calc(var(--tabbar) + var(--safe-bottom) + 96px); }
@media (min-width: 1024px) {
.select-bar { left: calc(var(--side) + 36px); right: auto; bottom: 20px; min-width: 520px; }
} .split { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.split__list { overflow-y: auto; background: #efe4da; border-right: 1px solid var(--line); }
.split__list .browser { padding: 20px 16px 40px; }
.split__list .jumps { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
.split__list .pgroup__head { background: #e7dbd0; }
.split__detail { overflow-y: auto; }
.browser--narrow .cats { margin: 12px -16px 0; padding: 4px 16px 6px; } .status-btn { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-3); flex: none; }
.status-btn .pill { font-size: 13px; padding: 5px 12px; }
.fact--btn { text-align: left; min-width: 0; transition: border-color .15s; }
.fact--btn:hover:not([disabled]) { border-color: var(--accent); }
.fact--btn b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ds__row { display: flex; align-items: center; gap: 12px; }
.ds__row b { display: block; font-weight: 800; }
.ds__row small { color: var(--ink-2); font-size: 13px; font-weight: 700; }
.ring { flex: none; }
.ring text { font: 800 12px 'Nunito', system-ui, sans-serif; fill: var(--ink); }
.miss-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.miss-chips .pill { cursor: pointer; }
.action-row--4 { grid-template-columns: repeat(4, 1fr); }
.action[disabled] { opacity: .45; }
.sec-cards { margin-top: 14px; display: grid; gap: 12px; }
.sec-card { display: block; width: 100%; text-align: left; padding: 16px; break-inside: avoid; color: var(--ink); }
button.sec-card:hover:not([disabled]) { box-shadow: 0 14px 34px -14px rgba(66, 24, 18, .32), 0 2px 6px rgba(66, 24, 18, .06); }
button.sec-card[disabled] { cursor: default; }
.sec-card__head { display: flex; align-items: center; gap: 10px; }
.sec-card__head > b { font-size: 16px; font-weight: 800; flex: 1; min-width: 0; }
.sec-card__head > b small { display: block; color: var(--ink-2); font-size: 12px; font-weight: 700; }
.sec-card__edit { color: var(--ink-3); flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 800; }
.sec-card__body { margin-top: 12px; display: grid; gap: 10px; }
.clamp { font-size: 14px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.open-note { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.kv { margin: 0; }
.history-card > summary { list-style: none; cursor: pointer; }
.history-card > summary::-webkit-details-marker { display: none; }
.history-card .chev { color: var(--ink-3); transition: transform .2s; flex: none; }
.history-card[open] .chev { transform: rotate(180deg); }
.doc { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); }
.doc:first-child { border-top: 0; padding-top: 0; }
.doc .ic { width: 38px; height: 38px; border-radius: 12px; background: #e6e8eb; color: #5d6670; display: grid; place-items: center; flex: none; }
.doc b { display: block; font-size: 14px; font-weight: 800; }
.doc small { display: block; color: var(--ink-2); font-size: 12px; } .doc__open { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.doc__open .grow { min-width: 0; }
.doc__open small { overflow-wrap: anywhere; }
.doc__edit { flex: none; box-shadow: none; background: var(--bg); }
.doc .ic--red { background: var(--red-soft); color: var(--red); }
.doc .pill { vertical-align: 1px; margin-left: 4px; }
.upload-btn { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.upload-btn.is-busy { opacity: .6; pointer-events: none; }
@media (min-width: 1024px) {
.pet-detail .hero { height: 320px; margin: 20px 28px 0; border-radius: 28px; }
.pet-detail .hero__count { bottom: 58px; right: 20px; }
.pet-detail .detail { margin-top: -46px; padding: 0 44px 48px; max-width: 1100px; } .pet-detail__split { max-width: 1100px; }
.pet-detail .hero--gallery { margin: 20px 44px 0; }
.pet-detail .hero--gallery:not(.hero--empty) { height: auto; background: none; overflow: visible; border-radius: 0; }
.hero__main { position: relative; display: block; height: 400px; border-radius: 28px; overflow: hidden; background: var(--accent-soft); line-height: 0; }
.hero__blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(1.1); transform: scale(1.15); opacity: .55; }
.hero__photo { position: relative; width: 100%; height: 100%; object-fit: contain; }
.hero__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: thin; padding: 3px; }
.hero__thumbs button { flex: none; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; opacity: .65; transition: opacity .15s; }
.hero__thumbs button:hover, .hero__thumbs button.is-active { opacity: 1; }
.hero__thumbs button.is-active { box-shadow: 0 0 0 3px var(--accent); }
.hero__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pet-detail .hero--gallery:not(.hero--empty) .hero__count { top: 14px; left: 14px; bottom: auto; right: auto; }
.pet-detail__split .detail { margin-top: 16px; }
.sec-cards { display: block; columns: 2 320px; column-gap: 14px; }
.sec-cards > * { margin-bottom: 14px; }
}
.hero__count { position: absolute; bottom: 52px; right: 18px; background: rgba(30, 20, 16, .55); color: #fff; font-size: 12px; font-weight: 800; padding: 6px 11px; border-radius: 11px; display: inline-flex; gap: 6px; align-items: center; }
.hero--empty .hero__count { bottom: 52px; } .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photo-grid--small { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 1024px) { .sheet--wide .photo-grid { grid-template-columns: repeat(5, 1fr); } .sheet--wide .photo-grid--small { grid-template-columns: repeat(7, 1fr); } }
.ph { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--accent-soft); cursor: grab; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph.is-hidden img { opacity: .4; filter: grayscale(1); }
.ph.is-drag { outline: 3px dashed var(--accent); opacity: .7; }
.ph__badge { position: absolute; top: 6px; left: 6px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 8px; }
.ph__tools { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; justify-content: space-between; gap: 2px; }
.ph__tools button { width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, .92); display: grid; place-items: center; color: var(--ink); font-size: 12px; font-weight: 800; }
.ph__tools button[disabled] { opacity: .35; }
.ph--add { display: grid; place-content: center; justify-items: center; gap: 6px; border: 2px dashed #e0c3b3; color: var(--accent-ink); font-weight: 800; font-size: 13px; cursor: pointer; text-align: center; padding: 6px; background: var(--bg-soft); }
.ph--add.is-busy { opacity: .7; pointer-events: none; }
.mini-head { font-size: 14px; font-weight: 800; color: var(--ink-2); margin: 18px 0 10px; } .wizard .steps { margin: 4px 0 6px; }
.wiz-title { font-size: 26px; margin: 14px 0 4px; }
.wizard .lead { color: var(--ink-2); margin: 0 0 14px; }
.done { text-align: center; padding: 22px 6px 6px; }
.done__ic { width: 76px; height: 76px; border-radius: 26px; background: var(--green); color: #fff; display: grid; place-items: center; margin: 0 auto 12px; box-shadow: 0 16px 30px -14px rgba(76, 139, 92, .9); } .tools-row { margin-top: 12px; }
.tools-row .cats { margin-top: 0; }
.cats--small { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 6px; }
.cats--small .cat { height: 34px; font-size: 13px; padding: 0 10px 0 4px; border-radius: 12px; }
.cats--small .cat__icon { width: 24px; height: 24px; font-size: 15px; }
.quick { margin-top: 8px; }
.quick__count { font-weight: 800; color: var(--ink-2); font-size: 14px; }
.browser__list { margin-top: 10px; }
.pline__photo { width: 46px; height: 46px; }
@media (min-width: 1024px) {
.tools-row { display: flex; align-items: center; gap: 12px; }
.tools-row .cats { flex: 1; min-width: 0; }
.tools-row__end { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.jumps { flex-wrap: wrap; overflow: visible; margin: 0 0 10px; padding: 0; }
.split__list .jumps { margin: 0 0 10px; padding: 0; }
.pgroup + .pgroup { margin-top: 10px; }
.pgroup__head { padding: 7px 12px; margin-bottom: 8px; border-radius: 13px; }
.pgroup__head b { font-size: 14px; } .browser:not(.browser--narrow) .plist--kompakt { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.browser:not(.browser--narrow) .pline { border-top: 0; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-s); }
.browser:not(.browser--narrow) .plist--karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.browser:not(.browser--narrow) .plist--karten .pet-row + .pet-row { margin-top: 0; }
} .focus-box { margin-top: 14px; }
.focus-edit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; background: var(--card); border-radius: 18px; padding: 14px; box-shadow: var(--shadow-s); }
.focus-edit__img { position: relative; justify-self: center; line-height: 0; }
.focus-edit__img img { max-height: 46vh; width: auto; max-width: 100%; border-radius: 12px; cursor: crosshair; }
.focus-edit__dot { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--accent), 0 2px 8px rgba(0, 0, 0, .4); pointer-events: none; }
.focus-edit__side { display: grid; gap: 8px; align-content: start; }
.focus-edit__side p { margin: 0; }
.focus-edit__prev { display: flex; align-items: center; gap: 12px; }
.focus-prev { background: var(--accent-soft); }
.focus-prev--s { width: 46px; height: 46px; border-radius: 12px; }
.focus-prev--m { width: 72px; height: 72px; border-radius: 18px; }
.focus-edit input[type=range] { width: 100%; accent-color: var(--accent); }
@media (min-width: 1024px) { .sheet--wide .focus-edit { grid-template-columns: minmax(0, 1fr) 260px; } }
.browser--narrow .cats--small .cat__icon { display: none; }
.browser--narrow .cats--small .cat { padding: 0 10px; height: 32px; }
.browser--narrow .quick__chip { height: 32px; padding: 0 10px; } .cat__icon { position: relative; }
.cat__count { position: absolute; top: -6px; right: -8px; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--dark); color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.cat__flag { display: block; width: 38px; }
.cats--small .cat__flag { width: 20px; }
.jump--all { color: var(--ink); background: var(--card); } .srow { position: relative; }
.srow__btn { position: absolute; top: 0; bottom: 0; right: -18px; width: 56px; display: flex; align-items: center; justify-content: flex-end; z-index: 3;
background: linear-gradient(to right, rgba(245, 237, 230, 0), var(--bg) 55%); }
.srow__btn--left { right: auto; left: -18px; justify-content: flex-start; background: linear-gradient(to left, rgba(245, 237, 230, 0), var(--bg) 55%); }
.srow__arrow { margin: 0 6px; width: 30px; height: 30px; border-radius: 50%; background: var(--card); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow-s); }
@media (min-width: 1024px) {
.tools-row > .srow { flex: 1; min-width: 0; }
}
@media (max-width: 1023px) {
.browser .search { height: 44px; border-radius: 15px; padding: 0 14px; }
.browser .topbar { min-height: 44px; gap: 8px; }
.browser .topbar .round-btn { width: 44px; height: 44px; border-radius: 15px; }
.browser .tools-row { margin-top: 10px; }
.browser .quick { margin: 4px -18px 0; padding: 2px 18px 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.browser .quick::-webkit-scrollbar { display: none; }
.browser .quick__chip { flex: none; height: 32px; padding: 0 10px; }
.browser__list { margin-top: 8px; }
.browser .jumps { margin-bottom: 8px; }
} .hero__slides img { object-position: 50% 28%; }