/* Klitty Crew · Cat Vets. Layout: one reading column, listings as a ranked list, partner slot above the list */
:root{
  --bg:#fbf8fc; --surface:#ffffff; --fg:#1d1724; --muted:#655c70; --line:#e7e0ec;
  --accent:#c2187a; --accent-soft:#fbe4f1; --ink:#2b1f38;
  --t1:#16754a; --t1-bg:#ddf3e7; --t2:#2a5ea8; --t2-bg:#e3ecf8; --t3:#8a6400; --t3-bg:#fbf0cc; --t4:#5b5266; --t4-bg:#efebf3;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#130f18; --surface:#1c1723; --fg:#efeaf3; --muted:#a79db3; --line:#2f2839;
  --accent:#ff6fb5; --accent-soft:#3d1830; --ink:#0c0910;
  --t1:#7fd8a8; --t1-bg:#163626; --t2:#8fb7f0; --t2-bg:#18294a; --t3:#e6c75c; --t3-bg:#3a3111; --t4:#c9c0d3; --t4-bg:#2a2433;
  color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 var(--body)}
a{color:inherit}
a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:960px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.site{background:var(--ink);color:#fff}
.site .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding-block:14px}
.logo{font:800 22px/1 var(--display);text-decoration:none;letter-spacing:-.01em}
.menu{display:flex;gap:4px 16px;overflow-x:auto;scrollbar-width:none;font-size:14px;min-width:0;flex:1}
.menu a{text-decoration:none;white-space:nowrap;opacity:.8;padding-block:4px}
.menu a:hover,.menu a[aria-current]{opacity:1}
.menu a[aria-current]{box-shadow:inset 0 -2px 0 #ff6fb5}

.crumbs{font:500 16px/1.4 var(--body);color:var(--muted);padding-block:20px 0;display:flex;flex-wrap:wrap;gap:8px}
.crumbs a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}.crumbs a:hover{text-decoration-color:var(--accent)}

.intro{padding-block:20px 8px}
.eyebrow{font:600 15px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0}
h1{font:800 clamp(32px,6vw,52px)/1.05 var(--display);letter-spacing:-.02em;margin:10px 0 12px;text-wrap:balance}
.lead{color:var(--muted);max-width:62ch;margin:0;font-size:17px}
.sec{font:700 22px/1.2 var(--display);margin:40px 0 12px}

.search{margin-top:22px;max-width:560px}
.search input{width:100%;font:inherit;font-size:17px;color:var(--fg);background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:13px 16px}
.search input:focus{border-color:var(--accent)}
.results{margin-top:12px}
.results .more{color:var(--muted);font-size:14px;padding:12px 16px}

.partner{display:grid;grid-template-columns:1fr auto;gap:12px 24px;align-items:end;margin-top:24px;padding:20px;border:2px dashed var(--accent);border-radius:14px;background:var(--accent-soft)}
.partner h2{font:700 20px/1.2 var(--display);margin:6px 0}
.partner p{margin:0;max-width:56ch}
.partner-mail{font:500 14px var(--mono);user-select:all;white-space:nowrap}
@media (max-width:640px){.partner{grid-template-columns:1fr}}

.vets{list-style:none;margin:16px 0 0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.vet{display:grid;grid-template-columns:1fr auto;gap:6px 20px;padding:16px 18px;border-top:1px solid var(--line)}
.vet:first-child{border-top:0}
.vet.r1{box-shadow:inset 4px 0 0 var(--t1)}
.vet h3{font:600 17px/1.3 var(--body);margin:0}
.vet h3 a{text-decoration:none}.vet h3 a:hover{text-decoration:underline}
.vet-main{min-width:0}
.addr{margin:2px 0 0;color:var(--muted);font-size:14.5px;overflow-wrap:anywhere}
.vet-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font:500 13px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.stars{color:var(--accent)}.rev{color:var(--muted)}
.vet-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.vet-links a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;overflow-wrap:anywhere}
.vet-links a:hover{text-decoration-color:var(--accent)}
.tel{font:500 13.5px var(--mono);user-select:all}
@media (max-width:520px){.vet{grid-template-columns:1fr}.vet-side{flex-direction:row;align-items:center;flex-wrap:wrap}}

.tag{display:inline-block;font:600 11.5px/1 var(--body);padding:5px 9px;border-radius:999px}
.t1{color:var(--t1);background:var(--t1-bg)}.t2{color:var(--t2);background:var(--t2-bg)}.t3{color:var(--t3);background:var(--t3-bg)}.t4{color:var(--t4);background:var(--t4-bg)}

.cities{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 16px}
.cities li{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.cities a{text-decoration:none;font-weight:500}.cities a:hover{color:var(--accent)}
.cities span{font:500 13px var(--mono);color:var(--muted)}

.legend{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13.5px;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:8px}
.back{margin:28px 0 0;font-size:15px}
.foot{margin-top:56px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.foot .wrap{padding-block:24px 40px}
.foot p{margin:0 0 8px;max-width:70ch}
.mail{font-family:var(--mono);user-select:all}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (min-width:760px){.menu{flex-wrap:wrap;overflow:visible;gap:4px 14px}}
.about{grid-column:1/-1;margin:2px 0 0;font-size:15px;line-height:1.55;color:var(--fg);max-width:75ch}

/* KC Vorschau-Screenshots (2026-10-26) */
.vet.mit-bild{grid-template-columns:208px minmax(0,1fr) auto;column-gap:20px}
.vet.mit-bild .vorschau{grid-column:1;grid-row:1/span 3;align-self:start}
.vet.mit-bild .about,.vet.mit-bild .vet-links{grid-column:2/-1}
.vorschau{display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.vorschau img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .3s}
.vet:hover .vorschau img{transform:scale(1.04)}
.vorschau.kc{position:relative;display:flex;align-items:flex-end;justify-content:center;text-decoration:none;border-color:transparent;
background:radial-gradient(circle at 50% 115%,#ffc2e2 0,var(--accent-soft) 62%)}
.vorschau.kc img{width:auto;height:86%;object-fit:contain;object-position:bottom;transition:transform .25s}
.vet:hover .vorschau.kc img{transform:translateY(-4px) rotate(-2deg)}
.kc-hinweis{position:absolute;top:8px;left:10px;font:600 12px/1 var(--body);color:var(--accent)}
.stand{font-size:12.5px;color:var(--muted)}
@media (max-width:640px){.vet.mit-bild{grid-template-columns:minmax(0,1fr) auto}
.vet.mit-bild .vorschau{grid-column:1/-1;grid-row:auto}.vet.mit-bild .about,.vet.mit-bild .vet-links{grid-column:1/-1}}
@media (max-width:520px){.vet.mit-bild{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.vorschau img{transition:none}}