/* Haustier-Welt – Ergänzungen zum PV Theme (Vorlage „Haustier“). Farben aus den --pv-* Variablen. */

/* ---------- Kopf ---------- */
.hwt-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 26px; letter-spacing: -.01em; }
.hwt-brand b { color: var(--pv-accent); font-weight: inherit; }
.hwt-pfote { flex: none; border-radius: 10px; box-shadow: 0 4px 12px color-mix(in srgb, var(--pv-accent) 35%, transparent); }
.pv-style-haustier .pv-menu > li > a { border-radius: 999px; padding: 9px 14px; margin: 5px 0; }
.pv-style-haustier .pv-menu > li > a:hover { background: color-mix(in srgb, var(--pv-accent) 12%, transparent); }

/* ---------- Hero ---------- */
.hwt-hero { position: relative; overflow: hidden; margin-bottom: 8px; padding: 56px 0 64px; color: #fff;
	background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--pv-accent-2) 70%, transparent) 0, transparent 45%),
		linear-gradient(135deg, var(--pv-accent) 0%, color-mix(in srgb, var(--pv-accent) 70%, #e86a3a) 100%); }
.hwt-hero::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 380px; height: 380px; border-radius: 46% 54% 60% 40% / 50% 40% 60% 50%; background: rgba(255,255,255,.14); }
.hwt-hero .pv-container { position: relative; z-index: 1; }
.hwt-hero__kicker { display: inline-block; margin: 0 0 14px; padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hwt-hero h1 { color: #fff; max-width: 760px; font-size: clamp(30px, 4.6vw, 50px); margin-bottom: .35em; }
.hwt-hero h1 span { white-space: nowrap; text-decoration: underline wavy color-mix(in srgb, var(--pv-accent-2) 80%, #fff); text-underline-offset: 10px; text-decoration-thickness: 3px; }
.hwt-hero__lead { max-width: 640px; font-size: 18px; opacity: .95; margin-bottom: 26px; }
.hwt-hero__search { display: flex; max-width: 640px; background: #fff; border-radius: 999px; padding: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.18); }
.hwt-hero__search input { flex: 1; min-width: 0; border: 0; padding: 12px 18px; background: transparent; color: var(--pv-text); outline: none; font-size: 16px; }
.hwt-hero__search button { border: 0; border-radius: 999px; padding: 12px 26px; background: var(--pv-accent-2); color: #fff; font-weight: 700; cursor: pointer; }
.hwt-hero__search button:hover { filter: brightness(1.05); }

/* ---------- Abschnitte ---------- */
.hwt-section { margin: 46px 0 0; }
.hwt-h2 { margin: 0 0 18px; font-size: clamp(22px, 2.6vw, 28px); }
.hwt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hwt-head a { font-weight: 700; }

/* Tierwelten */
.hwt-tiere { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.hwt-tiere li { background: var(--hwt-farbe, var(--pv-surface)); border-radius: var(--pv-radius); padding: 18px 14px 14px; text-align: center; transition: transform .15s ease, box-shadow .15s ease; }
.hwt-tiere li:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(242,153,74,.18); }
.hwt-tier { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--pv-text); }
.hwt-tier:hover { text-decoration: none; }
.hwt-tier__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; background: #fff; font-size: 34px; line-height: 1; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.hwt-tier strong { font-size: 18px; }
.hwt-tier small { color: var(--pv-muted); }
.hwt-tier__sub { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--pv-muted); }
.hwt-tier__sub a { color: var(--pv-text); }

/* Beliebte Kategorien */
.hwt-kats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.hwt-kats a { display: flex; flex-direction: column; padding: 14px 16px; background: var(--pv-surface); border-radius: var(--pv-radius); box-shadow: 0 6px 20px rgba(242,153,74,.10); color: var(--pv-text); height: 100%; }
.hwt-kats a:hover { text-decoration: none; box-shadow: 0 12px 28px rgba(242,153,74,.2); }
.hwt-kats span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pv-accent-2); }
.hwt-kats strong { font-size: 16px; }
.hwt-kats small { color: var(--pv-muted); }

/* Shops */
.hwt-shops { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hwt-shops a { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--pv-surface); border: 2px solid var(--pv-line); color: var(--pv-text); font-weight: 700; }
.hwt-shops a:hover { border-color: var(--pv-accent); color: var(--pv-accent); text-decoration: none; }

/* Ratgeber */
.hwt-ratgeber { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.hwt-ratgeber a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; border-radius: var(--pv-radius); background: var(--pv-surface); border-left: 5px solid var(--pv-accent-2); color: var(--pv-text); box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.hwt-ratgeber a:hover { text-decoration: none; border-left-color: var(--pv-accent); }
.hwt-ratgeber span { color: var(--pv-muted); font-size: 14px; }

/* Redaktioneller Starttext */
.hwt-text { max-width: 860px; padding: 28px 30px; background: var(--pv-surface); border-radius: var(--pv-radius); }

/* ---------- Kategorieseiten: Unterkategorien als Kacheln ---------- */
.pv-style-haustier .pv-chips a { border: 0; background: var(--pv-surface); box-shadow: 0 4px 14px rgba(242,153,74,.12); }
.pv-style-haustier .pv-chips a:hover { background: var(--pv-accent); color: #fff; text-decoration: none; }
.pv-style-haustier .pv-chips a:hover span { color: rgba(255,255,255,.85); }

/* ---------- Fuß ---------- */
.pv-style-haustier .pv-footer { border-top: 6px solid var(--pv-accent-2); }

@media (max-width: 720px) {
	.hwt-hero { padding: 36px 0 44px; }
	.hwt-hero h1 span { white-space: normal; }
	.hwt-hero__search { flex-direction: column; border-radius: 20px; }
	.hwt-hero__search button { width: 100%; }
	.hwt-tiere { grid-template-columns: repeat(2, 1fr); }
	.hwt-text { padding: 20px; }
	.hwt-brand { font-size: 21px; }
}