:root {
  --green: #264137;
  --sage: #628276;
  --cream: #faf8f2;
  --terra: #c16c46;
  --ink: #29332f;
  --line: #e4ded3;
  --white: #fff;
  color: var(--ink);
  background: var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-wrap: anywhere; text-wrap: pretty; }
a { color: #315e4d; text-underline-offset: .18em; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 14px clamp(1rem, 5vw, 4rem);
  gap: 2rem;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 248, 242, .96);
  backdrop-filter: blur(10px);
}

.brand { flex: 0 0 auto; color: var(--green); font: 800 1.5rem Georgia, serif; text-decoration: none; white-space: nowrap; }
.site-header nav { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(.55rem, 1.3vw, 1.15rem); }
.site-header nav a { flex: 0 0 auto; font-size: .94rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-header nav a[aria-current="page"] { color: var(--terra); text-decoration: underline; }
.nav-toggle { display: none; min-height: 44px; padding: .55rem .85rem; border: 1px solid var(--green); border-radius: 999px; color: var(--green); background: transparent; font-weight: 750; }

main { min-height: 60vh; }
.article { max-width: 900px; margin: auto; padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem); }
.article > .breadcrumb, .article > h1 { max-width: 760px; margin-left: auto; margin-right: auto; }
.article > h1 { font-size: clamp(2rem, 3.5vw, 3rem); }
.sk-article-content { max-width: 760px; margin-inline: auto; scroll-margin-top: 96px; }
h1, h2, h3 { color: var(--green); font-family: Georgia, "Times New Roman", serif; line-height: 1.15; }
h1 { margin: .25em 0 .55em; font-size: clamp(2.2rem, 6vw, 4rem); }
h2 { margin-top: 1.8em; font-size: clamp(1.65rem, 3.5vw, 2.35rem); }
h3 { font-size: 1.35rem; }
.breadcrumb { color: #65706b; font-size: .88rem; }

.sk-hero { display: flex; align-items: center; min-height: clamp(520px, 62vw, 690px); padding: 4rem clamp(1rem, 5vw, 4rem); background: linear-gradient(90deg, rgba(250,248,242,.98) 0%, rgba(250,248,242,.92) 39%, rgba(250,248,242,.18) 68%), url("smartkatze-hero.jpg") center right / cover no-repeat; }
.sk-hero > div { width: min(1180px, 100%); margin: auto; }
.sk-hero h1, .sk-hero p, .sk-hero .wp-block-buttons { max-width: 660px; }
.sk-eyebrow { color: #9b5a39; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.alignwide { max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.wp-block-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 1.25rem 0; }
.sk-card { height: 100%; padding: 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 12px 34px rgba(38,65,55,.08); }

.sk-top-picks { padding-block: clamp(3rem, 7vw, 5.5rem); }
.sk-top-picks > h2 { margin: .2em 0; }
.sk-affiliate-note { padding: .85rem 1rem; border-left: 4px solid var(--terra); border-radius: 0 12px 12px 0; background: #fbf0e9; font-size: .92rem; }
.sk-pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.sk-pick { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: var(--white); box-shadow: 0 14px 36px rgba(38,65,55,.1); transition: transform .2s ease, box-shadow .2s ease; }
.sk-pick:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(38,65,55,.16); }
.sk-pick-product { display: block; color: inherit; text-decoration: none; }
.sk-pick-product:focus-visible { outline: 4px solid var(--terra); outline-offset: -4px; }
.sk-pick-body { display: flex; flex: 1; flex-direction: column; }
.sk-pick h3, .sk-pick p, .sk-pick-badge { margin-left: 1.25rem; margin-right: 1.25rem; }
.sk-pick h3 { margin-top: .55rem; margin-bottom: .2rem; }
.sk-pick p { margin-top: .2rem; }
.sk-pick-badge { align-self: flex-start; margin-top: 1.1rem; padding: .25rem .65rem; border-radius: 999px; color: #713d27; background: #f4e4da; font-size: .75rem; font-weight: 800; }
.sk-pick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: auto 1.25rem 1.25rem; }
.sk-pick-actions .button { padding: .65rem .9rem; font-size: .88rem; text-align: center; }
.sk-compare { font-size: .9rem; font-weight: 800; }

.sk-pick-image { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background-image: url("smartkatze-produkte-grid.jpg"); background-repeat: no-repeat; background-size: 300% 200%; }
.sk-pick-image-1 { background-position: 0 0; }
.sk-pick-image-2 { background-image: url("smartkatze-katzenklappe-v2.jpg"); background-position: center; background-size: cover; }
.sk-pick-image-3 { background-position: 100% 0; }
.sk-pick-image-4 { background-position: 0 100%; }
.sk-pick-image-5 { background-position: 50% 100%; }
.sk-pick-image-6 { background-position: 100% 100%; }
.sk-pick-image-camera { background-image: url("smartkatze-katzenkamera.jpg"); background-position: center; background-size: cover; }
.sk-pick-image-collar { background-image: url("smartkatze-halsbandkamera.jpg"); background-position: center; background-size: cover; }
.sk-pick-image-puffy { background-image: url("smartkatze-puffy-v2.jpg"); background-position: center; background-size: cover; }
.sk-visual-img { position: absolute; max-width: none; width: 300%; height: 200%; left: 0; top: 0; object-fit: fill; }
.sk-visual-img.sk-amazon-img { width: 100%; height: 100%; left: 0; top: 0; padding: .65rem; object-fit: contain; background: #fff; }
.sk-pick-image-2 > .sk-visual-img,
.sk-pick-image-camera > .sk-visual-img,
.sk-pick-image-collar > .sk-visual-img,
.sk-pick-image-puffy > .sk-visual-img,
.sk-product-media > .sk-visual-img { width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; }
.sk-pick-image-3 > .sk-visual-img { left: -200%; }
.sk-pick-image-4 > .sk-visual-img { top: -100%; }
.sk-pick-image-5 > .sk-visual-img { left: -100%; top: -100%; }
.sk-pick-image-6 > .sk-visual-img { left: -200%; top: -100%; }

/* Amazon-Bilder haben unterschiedliche Seitenverhaeltnisse. Diese Regel muss
   nach den alten Kachel-Ausschnitten stehen, damit kein Produkt beschnitten wird. */
.sk-pick-image > .sk-visual-img.sk-amazon-img,
.sk-product-media > .sk-visual-img.sk-amazon-img {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  padding: clamp(.75rem, 3vw, 1.35rem);
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.sk-page-visual { position: relative; display: block; width: min(100%, 620px); aspect-ratio: 4 / 3; margin: 1.5rem auto 2.25rem; overflow: hidden; scroll-margin-top: 90px; border: 1px solid var(--line); border-radius: 22px; background-repeat: no-repeat; background-size: 300% 200%; box-shadow: 0 16px 42px rgba(38,65,55,.13); text-decoration: none; }
.sk-page-visual.sk-pick-image-camera { aspect-ratio: 16 / 10; background-position: center; background-size: cover; }
.sk-page-visual.sk-pick-image-2 { background-position: center; background-size: cover; }
.sk-page-visual:hover, .sk-page-visual:focus-visible { box-shadow: 0 19px 46px rgba(38,65,55,.2); }
.sk-page-visual span { position: absolute; right: 1rem; bottom: 1rem; padding: .55rem .9rem; border-radius: 999px; color: #fff; background: rgba(38,65,55,.93); font-weight: 800; }
.sk-page-visual-hero { background: linear-gradient(90deg, rgba(38,65,55,.08), rgba(38,65,55,.01)), url("smartkatze-hero.jpg") center / cover no-repeat; }

.sk-visual-note { color: #65706b; font-size: .84rem; }
.sk-note, .sk-warning { margin: 1.5rem 0; padding: 1rem 1.2rem; border-radius: 0 12px 12px 0; }
.sk-note { border-left: 4px solid var(--sage); background: #eef4f1; }
.sk-warning { border-left: 4px solid var(--terra); background: #fbf0e9; }
.sk-table { width: 100%; margin: 1.5rem 0; overflow: hidden; border-collapse: collapse; border-radius: 14px; background: var(--white); }
.sk-table th, .sk-table td { padding: .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.sk-table th { color: var(--green); background: #edf3f0; }
.sk-table td:first-child a { font-weight: 800; text-decoration-thickness: 2px; }
.sk-product { margin: 1.25rem 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.sk-product h3 { margin-top: 0; }
.sk-product a { display: inline-block; padding-block: .35rem; }
.sk-product:has(.sk-product-media) { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 1.25rem; }
.sk-product:has(.sk-product-media) > :not(.sk-product-media) { grid-column: 2; }
.sk-product-media { position: relative; grid-column: 1; grid-row: 1 / span 6; width: 180px; aspect-ratio: 1 / 1; padding: 0 !important; overflow: hidden; border-radius: 14px; background-image: url("smartkatze-produkte-grid.jpg"); background-repeat: no-repeat; background-size: 300% 200%; box-shadow: 0 8px 24px rgba(38,65,55,.12); }
.sk-product-media.sk-pick-image-2 { background-image: url("smartkatze-katzenklappe-v2.jpg"); background-position: center; background-size: cover; }
.sk-product-media.sk-pick-image-camera { background-image: url("smartkatze-katzenkamera.jpg"); background-position: center; background-size: cover; }
.sk-product-media.sk-pick-image-collar { background-image: url("smartkatze-halsbandkamera.jpg"); background-position: center; background-size: cover; }
.sk-product-weenect { background-image: url("product-weenect.jpg"); }
.sk-product-furbo { background-image: url("product-furbo.jpg"); }
.sk-product-petcube { background-image: url("product-petcube.jpg"); }
.sk-product-catit-vision { background-image: url("product-catit-vision.jpg"); }
.sk-product-catit-feeder { background-image: url("product-catit-feeder.jpg"); }
.sk-product-catit-fountain { background-image: url("product-catit-fountain.jpg"); }
.sk-product-petkit-fountain, .sk-product-futterpaket { background: #fff; }
.sk-product-trixie-laser { background-image: url("product-trixie-laser.jpg"); }
.sk-product-gardner { background-image: url("product-gardner-toy.jpg"); }
.sk-product-vinmooog { background-image: url("product-vinmooog-laser.jpg"); }
.sk-product-catnip { background-image: url("product-catnip.jpg"); }
.sk-product-matatabi { background-image: url("product-matatabi.jpg"); }
.sk-product-baldrian { background-image: url("product-baldrian.jpg"); }
.sk-product-ssscat { background-image: url("product-ssscat.jpg"); }
.sk-product-collar-light { background-image: url("product-collar-light.jpg"); }
.sk-product-collar-pendant { background-image: url("product-collar-pendant.jpg"); }
.sk-product-zeromouse { background-image: url("product-zeromouse.jpg"); }
.sk-product-weenect, .sk-product-furbo, .sk-product-petcube, .sk-product-catit-vision,
.sk-product-catit-feeder, .sk-product-catit-fountain, .sk-product-trixie-laser,
.sk-product-gardner, .sk-product-vinmooog, .sk-product-catnip, .sk-product-matatabi,
.sk-product-baldrian, .sk-product-ssscat, .sk-product-collar-light,
.sk-product-collar-pendant, .sk-product-zeromouse { background-position: center; background-size: cover; }
.sk-product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.sk-product-actions .button { padding: .65rem 1rem; }
.sk-price { display: inline-block; padding: .2rem .6rem; border-radius: 999px; color: #713d27; background: #f4e4da; font-weight: 750; }
.sk-disclosure { color: #58645f; font-size: .9rem; }
.wp-block-button__link, .button { display: inline-block; min-height: 44px; padding: .8rem 1.35rem; border-radius: 999px; color: var(--white); background: var(--green); font-weight: 750; text-decoration: none; }
.wp-block-button__link:hover, .button:hover { background: var(--terra); }

footer { margin-top: 5rem; padding: 3rem clamp(1.5rem, 5vw, 4rem); color: var(--white); background: var(--green); }
footer a { color: var(--white); }
footer > div, footer > nav, footer > p { max-width: 1180px; margin-left: auto; margin-right: auto; }
footer nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-block: 1rem; }
footer h2 { color: var(--white); }
footer .sk-disclosure { color: var(--white); }
.sk-footer-affiliate { padding: 1rem 1.15rem; border-left: 5px solid var(--terra); border-radius: 0 14px 14px 0; color: var(--ink); background: #fff4ed; }

@media (max-width: 980px) {
  .sk-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
  .site-header { min-height: 68px; }
  .nav-toggle { display: block; }
  .site-header nav { position: absolute; top: 68px; right: 0; left: 0; display: none; flex-direction: column; align-items: flex-start; padding: 1rem 1.25rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--cream); box-shadow: 0 12px 24px rgba(38,65,55,.12); }
  .site-header nav.open { display: flex; }
  .site-header nav a { display: block; width: 100%; min-height: 44px; padding: .45rem 0; }
}

@media (max-width: 760px) {
  .sk-hero { align-items: flex-start; min-height: 610px; padding-top: 2.5rem; background: linear-gradient(180deg, rgba(250,248,242,.99) 0%, rgba(250,248,242,.92) 49%, rgba(250,248,242,.08) 78%), url("smartkatze-hero.jpg") 69% center / cover no-repeat; }
  .article { padding-top: 2rem; }
  .article h1 { font-size: clamp(1.85rem, 8vw, 2.35rem); }
  .wp-block-columns, .sk-pick-grid { grid-template-columns: 1fr; }
  .sk-table, .sk-table tbody, .sk-table tr, .sk-table td { display: block; width: 100%; }
  .sk-table { background: transparent; }
  .sk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sk-table tr { margin-bottom: 1rem; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
  .sk-table td { display: grid; grid-template-columns: minmax(7.5rem, 35%) 1fr; gap: .75rem; border-bottom: 1px solid var(--line); }
  .sk-table td::before { content: attr(data-label); color: var(--green); font-weight: 800; }
  .sk-table td:last-child { border-bottom: 0; }
  .sk-page-visual { margin: 1.1rem auto 1.8rem; }
  .sk-page-visual span { right: .75rem; bottom: .75rem; font-size: .82rem; }
  .sk-pick-actions, .sk-product-actions { flex-direction: column; align-items: stretch; }
  .sk-pick-actions .button, .sk-pick-actions .sk-compare, .sk-product-actions .button { text-align: center; }
  .sk-product { padding: 1rem; }
  .sk-product:has(.sk-product-media) { grid-template-columns: 1fr; }
  .sk-product:has(.sk-product-media) > :not(.sk-product-media), .sk-product-media { grid-column: 1; }
  .sk-product-media { grid-row: auto; width: 100%; margin-bottom: 1rem; }
  footer { margin-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sk-pick { transition: none; }
}