/* Lützow Tierlexikon. Mobile-first, alles unter .lxk gescoped. */
.lxk {
	--g: #345247;
	--g2: #283f37;
	--g3: #e6eeea;
	--soft: #f3f7f5;
	--ink: #1d2925;
	--txt: #3f4744;
	--mute: #6b7571;
	--line: #dfe7e3;
	--r: 12px;
	--head: 'Lato', system-ui, sans-serif;
	--body: 'Roboto', system-ui, sans-serif;
	font-family: var(--body);
	color: var(--txt);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
.lxk *, .lxk *::before, .lxk *::after { box-sizing: border-box; }
.lxk h1, .lxk h2, .lxk h3, .lxk h4 { font-family: var(--head); color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.lxk a { color: var(--g); }
.lxk img { max-width: 100%; height: auto; }
.lxk [id] { scroll-margin-top: 110px; }

.lxk-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.lxk-wrap--narrow { max-width: 860px; }
.lxk-section { padding: 56px 0; }
.lxk-section--soft { background: var(--soft); }
.lxk-section--tiers { padding-bottom: 40px; }

.lxk-eyebrow { display: inline-block; font: 700 12.5px/1.2 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--g); margin-bottom: 10px; }
.lxk-eyebrow--light { color: #cfe1d8; }
.lxk-lead { font-size: 17px; line-height: 1.65; max-width: 760px; margin: 0; }
.lxk-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.lxk-sechead--stack { display: block; }
.lxk-sechead h2 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; }
.lxk-link { font: 700 15px var(--head); color: var(--g); text-decoration: none; white-space: nowrap; }
.lxk-link::after { content: " \2192"; }
.lxk-link:hover { text-decoration: underline; }

/* Buttons */
.lxk-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.lxk-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 6px; font: 700 14px/1.2 var(--head); letter-spacing: .05em; text-transform: uppercase; text-decoration: none !important; border: 2px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.lxk-btn--white { background: #fff; color: var(--g) !important; }
.lxk-btn--white:hover { background: var(--g3); }
.lxk-btn--green { background: var(--g); color: #fff !important; }
.lxk-btn--green:hover { background: var(--g2); }
.lxk-btn--outline-white { border-color: rgba(255,255,255,.85); color: #fff !important; }
.lxk-btn--outline-white:hover { background: #fff; color: var(--g) !important; }
.lxk-btn--outline { border-color: var(--g); color: var(--g) !important; }
.lxk-btn--block { width: 100%; }

/* Pills */
.lxk-pill { display: inline-block; background: var(--g3); color: var(--g); font: 700 12px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; padding: 7px 11px; border-radius: 40px; text-decoration: none !important; }
.lxk-pill--link:hover { background: var(--g); color: #fff; }

/* Breadcrumb */
.lxk-crumb ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; font-size: 14px; color: var(--mute); }
.lxk-crumb li:not(:last-child)::after { content: "\203A"; margin: 0 8px; opacity: .7; }
.lxk-crumb a { color: inherit; text-decoration: none; }
.lxk-crumb a:hover { text-decoration: underline; }
.lxk-crumb--light ol { color: #cfe1d8; }
.lxk-crumb--light a { color: #fff; }

/* Hero (Hub + Tierart) */
.lxk-hero { background: var(--g); color: #fff; padding: 44px 0 48px; overflow: hidden; }
.lxk-hero__inner { display: flex; align-items: center; gap: 48px; }
.lxk-hero__txt { flex: 1 1 auto; max-width: 720px; }
.lxk-hero h1 { color: #fff; font-size: 31px; line-height: 1.15; margin: 0 0 16px; }
.lxk-hero p { color: #e6efea; font-size: 17px; line-height: 1.65; margin: 0 0 26px; }
.lxk-hero__icon { display: none; flex: 0 0 240px; }
.lxk-hero__icon img { width: 240px; opacity: .95; }

.lxk-search { position: relative; max-width: 560px; margin: 0; }
.lxk-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--g); pointer-events: none; }
.lxk-search input { width: 100%; height: 56px; border: 0; border-radius: 40px; padding: 0 20px 0 50px; font: 16px var(--body); color: var(--ink); background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.15); -webkit-appearance: none; appearance: none; }
.lxk-search input:focus { outline: 3px solid #a9c7ba; outline-offset: 2px; }

/* Tierart-Kacheln */
.lxk-tiers { display: grid; grid-template-columns: 1fr; gap: 16px; }
.lxk-tier { display: flex; align-items: center; gap: 18px; background: var(--soft); border: 1px solid transparent; border-radius: var(--r); padding: 18px 20px; text-decoration: none !important; color: var(--txt); transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.lxk-tier:hover { background: #fff; border-color: var(--line); box-shadow: 0 10px 28px rgba(29,41,37,.1); transform: translateY(-3px); }
.lxk-tier img { width: 64px; height: 64px; flex: 0 0 64px; }
.lxk-tier__body { display: flex; flex-direction: column; gap: 4px; }
.lxk-tier__name { font: 700 20px/1.25 var(--head); color: var(--ink); }
.lxk-tier__text { font-size: 15px; line-height: 1.5; }
.lxk-tier__count { font: 700 14px var(--head); color: var(--g); margin-top: 4px; }
.lxk-tier__count::after { content: " \2192"; }
.lxk-section--tiers .lxk-tier { background: #fff; border-color: var(--line); }

/* Karten */
.lxk-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.lxk-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.lxk-card:hover { box-shadow: 0 12px 30px rgba(29,41,37,.12); transform: translateY(-3px); }
.lxk-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--g3); }
.lxk-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.lxk-card:hover .lxk-card__img { transform: scale(1.04); }
.lxk-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.lxk-card__title { font-size: 20px !important; line-height: 1.3 !important; margin: 0 !important; }
.lxk-card__title a { color: var(--ink); text-decoration: none; }
.lxk-card__title a::after { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */
.lxk-card__text { font-size: 15px; line-height: 1.6; margin: 0; flex: 1; }
.lxk-card__more { font: 700 15px var(--head); color: var(--g); }
.lxk-card__more::after { content: " \2192"; }

/* A–Z */
.lxk-azjump { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.lxk-azjump a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--soft); color: var(--g); font: 700 16px var(--head); text-decoration: none; }
.lxk-azjump a:hover { background: var(--g); color: #fff; }
.lxk-az { display: grid; grid-template-columns: 1fr; gap: 8px 40px; }
.lxk-az__group { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.lxk-az__letter { font: 700 26px/1.2 var(--head); color: var(--g); }
.lxk-az ul { list-style: none; margin: 0; padding: 0; }
.lxk-az li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 5px 0; }
.lxk-az li a { font: 700 17px/1.4 var(--head); color: var(--ink); text-decoration: none; }
.lxk-az li a:hover { color: var(--g); text-decoration: underline; }
.lxk-az__tag { font-size: 12.5px; color: var(--mute); border: 1px solid var(--line); border-radius: 30px; padding: 1px 9px; }
.lxk-az__none { padding: 20px 0; }

/* Hilfe */
.lxk-help { display: grid; grid-template-columns: 1fr; gap: 28px; }
.lxk-help img { width: 60px; height: 60px; }
.lxk-help h3 { font-size: 20px; margin: 10px 0 6px; }
.lxk-help p { font-size: 15.5px; margin: 0; }

/* Notfall-Liste */
.lxk-signs { display: grid; grid-template-columns: 1fr; gap: 20px 48px; align-items: start; }
.lxk-signs h2 { font-size: 26px; line-height: 1.25; margin: 0 0 10px; }
.lxk-signs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lxk-signs__list li { position: relative; background: #fff; border: 1px solid var(--line); border-left: 4px solid #b5473a; border-radius: 8px; padding: 12px 16px; font-size: 15.5px; line-height: 1.5; }

/* FAQ */
.lxk-faq { padding: 56px 0; }
.lxk-faq h2 { font-size: 28px; margin: 0 0 16px; }
.lxk-faq details { border-bottom: 1px solid var(--line); }
.lxk-faq summary { cursor: pointer; list-style: none; position: relative; padding: 18px 44px 18px 0; font: 700 17.5px/1.4 var(--head); color: var(--ink); }
.lxk-faq summary::-webkit-details-marker { display: none; }
.lxk-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 28px/1 var(--head); color: var(--g); transition: transform .2s; }
.lxk-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.lxk-faq__a p { margin: 0 0 20px; font-size: 16px; }

/* CTA */
.lxk-cta { background: var(--g); color: #fff; text-align: center; padding: 56px 0; }
.lxk-cta h2 { color: #fff; font-size: 28px; margin: 0 0 10px; }
.lxk-cta p { color: #e6efea; max-width: 640px; margin: 0 auto 24px; }
.lxk-cta .lxk-btns { justify-content: center; }

/* ---------- Artikel ---------- */
.lxk-ahead { padding: 32px 0 20px; }
.lxk-ahead .lxk-pill { margin-bottom: 14px; }
.lxk-ahead__title { font-size: 30px; line-height: 1.18; margin: 0 0 14px; max-width: 900px; }
.lxk-ahead__lead { font-size: 18px; line-height: 1.6; color: var(--txt); margin: 0 0 20px; max-width: 820px; }
.lxk-byline { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 1.45; }
.lxk-byline__img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 48px; }
.lxk-byline__txt { display: flex; flex-direction: column; }
.lxk-byline__txt a { font-weight: 700; color: var(--ink); text-decoration: none; }
.lxk-byline__meta { color: var(--mute); }
.lxk-hero-img { margin: 8px 0 28px; border-radius: var(--r); overflow: hidden; background: var(--g3); max-width: 760px; }
.lxk-hero-img img { width: 100%; height: auto; display: block; }

.lxk-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 56px; }
.lxk-side { display: none; }

.lxk-toc ol { margin: 0; padding: 0 0 0 20px; }
.lxk-toc li { margin: 6px 0; font-size: 15px; line-height: 1.45; }
.lxk-toc a { color: var(--txt); text-decoration: none; }
.lxk-toc a:hover, .lxk-toc a.is-active { color: var(--g); text-decoration: underline; }
.lxk-toc--mobile { background: var(--soft); border-radius: var(--r); padding: 4px 18px; margin-bottom: 24px; }
.lxk-toc--mobile summary { cursor: pointer; padding: 12px 0; font: 700 16px var(--head); color: var(--ink); }
.lxk-toc--mobile ol { padding-bottom: 14px; }

.lxk-summary { background: var(--g3); border-left: 5px solid var(--g); border-radius: 0 var(--r) var(--r) 0; padding: 20px 22px; margin: 0 0 32px; }
.lxk-summary__title { font-size: 19px !important; margin: 0 0 10px !important; }
.lxk-summary ul { margin: 0; padding-left: 20px; }
.lxk-summary li { margin: 6px 0; font-size: 16px; line-height: 1.55; }

/* Fließtext aus Gutenberg */
.lxk-content { font-size: 17.5px; line-height: 1.75; color: var(--txt); }
.lxk-content > * { max-width: 100%; }
.lxk-content h2 { font-size: 26px; line-height: 1.25; margin: 44px 0 14px; }
.lxk-content h3 { font-size: 21px; line-height: 1.3; margin: 30px 0 10px; }
.lxk-content h4 { font-size: 18px; line-height: 1.35; margin: 24px 0 8px; }
.lxk-content p { margin: 0 0 18px; }
.lxk-content ul, .lxk-content ol { margin: 0 0 20px; padding-left: 22px; }
.lxk-content li { margin: 6px 0; }
.lxk-content strong { color: var(--ink); }
.lxk-content a { color: var(--g); text-decoration: underline; text-underline-offset: 2px; }
.lxk-content img { border-radius: 10px; }
.lxk-content figure { margin: 24px 0; }
.lxk-content table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15.5px; display: block; overflow-x: auto; }
.lxk-content th, .lxk-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.lxk-content th { background: var(--soft); color: var(--ink); }
.lxk-content blockquote { margin: 24px 0; padding: 14px 20px; border-left: 4px solid var(--g); background: var(--soft); border-radius: 0 8px 8px 0; }
.lxk-content .wp-block-spacer { height: 20px !important; }
.lxk-content hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

.lxk-note { margin: 36px 0 28px; padding: 16px 20px; background: #fbf6ec; border: 1px solid #efe1c2; border-radius: 10px; font-size: 15px; line-height: 1.6; }
.lxk-authorbox { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.lxk-authorbox__img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.lxk-authorbox__name { font-size: 22px !important; margin: 0 0 8px !important; }
.lxk-authorbox p { font-size: 15.5px; margin: 0 0 10px; }

.lxk-sidecta { background: var(--g); color: #e6efea; border-radius: var(--r); padding: 22px; margin-top: 22px; }
.lxk-sidecta img { width: 44px; height: 44px; display: block; margin-bottom: 10px; }
.lxk-sidecta strong { display: block; color: #fff; font: 700 19px/1.3 var(--head); margin-bottom: 6px; }
.lxk-sidecta p { font-size: 15px; line-height: 1.5; margin: 0 0 16px; }
.lxk-sidecta__tel { display: block; text-align: center; margin-top: 12px; color: #fff !important; font-weight: 700; text-decoration: none; }
.lxk-toc--side { border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; max-height: calc(100vh - 360px); overflow: auto; }
.lxk-toc__title { display: block; font: 700 13px var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--g); margin-bottom: 8px; }

.lxk-related { padding: 56px 0; background: var(--soft); }

/* Schwebender Termin-Button der Seite nicht über Inhalte legen */
.lxk-page .petla-float { bottom: 14px; }

/* Mobil: kompakte Querkarten */
@media (max-width: 639px) {
	.lxk-grid { gap: 14px; }
	.lxk-card { display: grid; grid-template-columns: 112px 1fr; }
	.lxk-card__media { aspect-ratio: auto; position: relative; min-height: 120px; }
	.lxk-card__img { position: absolute; inset: 0; }
	.lxk-card__body { padding: 14px 16px; gap: 6px; }
	.lxk-card__title { font-size: 17px !important; }
	.lxk-card__text { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.lxk-card .lxk-pill { font-size: 11px; padding: 5px 9px; }
	.lxk-card__more { display: none; }
}

.lxk-tierart .lxk-grid .lxk-pill { display: none; }

/* ---------- ab Tablet ---------- */
@media (min-width: 640px) {
	.lxk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lxk-help { grid-template-columns: repeat(3, 1fr); }
	.lxk-authorbox { grid-template-columns: 96px 1fr; }
	.lxk-az { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.lxk-section, .lxk-faq, .lxk-related { padding: 80px 0; }
	.lxk-cta { padding: 72px 0; }
	.lxk-hero { padding: 72px 0 80px; }
	.lxk-hero h1 { font-size: 46px; }
	.lxk-hero p { font-size: 18.5px; }
	.lxk-hero__icon { display: block; }
	.lxk-sechead h2, .lxk-faq h2, .lxk-cta h2 { font-size: 34px; }
	.lxk-tiers { grid-template-columns: repeat(3, 1fr); gap: 20px; }
	.lxk-tier--big { flex-direction: column; align-items: flex-start; padding: 30px 28px; }
	.lxk-tier--big img { width: 88px; height: 88px; flex-basis: auto; margin-bottom: 6px; }
	.lxk-tier--big .lxk-tier__name { font-size: 24px; }
	.lxk-signs { grid-template-columns: 1fr 1fr; }
	.lxk-signs h2 { font-size: 32px; }

	.lxk-ahead { padding: 48px 0 24px; }
	.lxk-ahead__title { font-size: 42px; }
	.lxk-ahead__lead { font-size: 19px; }
}

@media (min-width: 1025px) {
	.lxk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
	.lxk-az { grid-template-columns: repeat(3, 1fr); }
	.lxk-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
	.lxk-side { display: block; }
	.lxk-side__sticky { position: sticky; top: 120px; }
	.lxk-toc--mobile { display: none; }
	.lxk-main { max-width: 760px; }
}
