/* ============================================================
   CellRepair Wissens-Blog · blog.css
   Statisch · DSGVO-sauber · kein Framework
   Fluid-Type: Utopia Major-Third 1.25 (320->1240)
   Spacing: Fluid 8-step system
   ============================================================ */

/* --- 01 · TOKENS ------------------------------------------ */
:root {
  /* Farben · Elevation durch Farbkontrast, nicht Schatten */
  --forest: #2D4A3E;
  --forest-dark: #1a2e25;
  --cream: #FDF8F0;
  --cream-2: #F6EEDF;
  --cream-3: #EDE5D5;
  --terra: #C67D4B;
  --terra-dark: #8a4f2a; /* Kontrast-fix: 5.5:1 auf cream (war #a8643a = 4.37:1) */
  --terra-btn: #a8643a;  /* Original fuer Buttons (weiss-auf-terra ist OK) */
  --ink: #2d4a3e;
  --ink-soft: #33473f;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --serif: 'DM Serif Display', Georgia, serif;
  --maxw: 1160px;

  /* Fluid Type · Utopia Scale · Major Third (1.25) · 320->1240 */
  --step--2: clamp(0.64rem, 0.59rem + 0.24vw, 0.80rem);
  --step--1: clamp(0.80rem, 0.74rem + 0.30vw, 1.00rem);
  --step-0:  clamp(1.00rem, 0.91rem + 0.43vw, 1.25rem);
  --step-1:  clamp(1.25rem, 1.12rem + 0.65vw, 1.56rem);
  --step-2:  clamp(1.56rem, 1.37rem + 0.98vw, 1.95rem);
  --step-3:  clamp(1.95rem, 1.66rem + 1.48vw, 2.44rem);
  --step-4:  clamp(2.44rem, 2.01rem + 2.17vw, 3.05rem);
  --step-5:  clamp(3.05rem, 2.42rem + 3.16vw, 3.82rem);

  /* Fluid Space · 8-step system */
  --space-1: clamp(0.25rem, 0.23rem + 0.11vw, 0.31rem);  /* 4->5 */
  --space-2: clamp(0.50rem, 0.46rem + 0.22vw, 0.63rem);  /* 8->10 */
  --space-3: clamp(0.75rem, 0.68rem + 0.33vw, 0.94rem);  /* 12->15 */
  --space-4: clamp(1.00rem, 0.91rem + 0.43vw, 1.25rem);  /* 16->20 */
  --space-5: clamp(1.50rem, 1.37rem + 0.65vw, 1.88rem);  /* 24->30 */
  --space-6: clamp(2.00rem, 1.83rem + 0.87vw, 2.50rem);  /* 32->40 */
  --space-7: clamp(3.00rem, 2.74rem + 1.30vw, 3.75rem);  /* 48->60 */
  --space-8: clamp(4.00rem, 3.65rem + 1.74vw, 5.00rem);  /* 64->80 */

  --measure: 62ch;
}

/* --- Dark Mode -------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --forest: #c8d6cf;
    --forest-dark: #0f1a14;
    --cream: #1a1f1c;
    --cream-2: #222a25;
    --cream-3: #2a332d;
    --terra: #d4915f;
    --terra-dark: #d4915f;
    --terra-btn: #c67d4b;
    --ink: #dde5df;
    --ink-soft: #b8c5bc;
  }
  .nav { background: #0f1a14; }
  .hero, .bhero { background: #0f1a14; }
  .card, .sidecard, .kurz, .author, .more-grid a { background: #222a25; border-color: #ffffff14; }
  .feat-card { background: #222a25; border-color: #ffffff14; }
  .qres { background: #222a25; box-shadow: 0 12px 40px #00000060; }
  .qres a { border-bottom-color: #ffffff12; }
  .qres a:hover { background: #2a332d; }
  .search input { background: #2a332d; color: var(--ink); }
  .nform input { background: #2a332d; color: var(--ink); }
  .footer { background: #0f1a14; }
  .fb { background: #0f1a14; }
  .tarzt { background: var(--cream-2); border-color: #ffffff1a; }
  .zq { background: #ffffff0a; }
  .faq-item { border-bottom-color: #ffffff1a; }
  .faq-wrap { border-top-color: #ffffff1a; }
  .toc nav a { border-left-color: #ffffff1a; }
  .bodycontent .pullquote { background: var(--cream-2); border-left-color: var(--terra-dark); }
  .bodycontent .praxis-note { background: var(--cream-2); border-color: #ffffff14; }
  .side-cta { background: #0f1a14; }
  .side-begl { background: var(--cream-2); border-color: #d4915f3d; }
  .side-begl p { color: var(--ink-soft); }
  .cta { background: var(--cream-2); border-top-color: #ffffff0a; }
  .news { background: #0f1a14; }
  .bodycontent a { color: var(--terra); border-bottom-color: #d4915f66; }
  img { opacity: 0.92; }
}

/* --- 02 · RESET + BASE ------------------------------------ */
@view-transition { navigation: auto; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 2px; }

/* --- A11y ------------------------------------------------- */
.skip { position: absolute; left: -999px; top: var(--space-2); background: var(--forest); color: var(--cream); padding: var(--space-3) var(--space-4); border-radius: 8px; z-index: 200; }
.skip:focus { left: var(--space-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* --- 03 · KICKER (reusable) ------------------------------- */
.kicker {
  color: var(--terra-dark);
  font-size: var(--step--2);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

/* --- 04 · NAV --------------------------------------------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--terra); z-index: 100; }
.nav {
  background: var(--forest-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) clamp(20px, 5vw, 60px);
  position: relative;
}
.nav-logo { display: flex; align-items: center; gap: var(--space-3); }
.dot { width: 28px; height: 28px; border-radius: 50%; background: var(--terra); display: inline-block; }
.lg { font-family: var(--serif); font-size: var(--step-1); color: var(--cream); }
.nav-links { display: flex; align-items: center; gap: var(--space-5); }
.nav-links a { color: var(--cream); font-size: var(--step--1); opacity: .88; }
.nav-links a.on { opacity: 1; color: var(--terra); }
.nav-cta {
  background: var(--terra-btn);
  color: var(--cream) !important;
  padding: var(--space-3) var(--space-5);
  border-radius: 30px;
  font-weight: 500;
  opacity: 1 !important;
}
.burger { display: none; background: none; border: none; color: var(--cream); font-size: 26px; cursor: pointer; line-height: 1; }

/* --- 05 · HERO (article) ---------------------------------- */
.hero {
  background: var(--forest);
  color: var(--cream);
  padding: var(--space-7) clamp(20px, 5vw, 60px) var(--space-6);
}
.crumb { font-size: var(--step--2); color: #ffffffcc; margin-bottom: var(--space-4); }
.crumb a { color: #ffffffcc; border-bottom: 1px solid #ffffff33; }
.hero h1 {
  font-family: var(--serif);
  font-size: var(--step-4);
  line-height: 1.08;
  max-width: 15ch;
  margin-bottom: var(--space-4);
}
.hero .meta { font-size: var(--step--1); color: #ffffffb0; }

/* --- 06 · ARTICLE LAYOUT ---------------------------------- */
.wrap { background: var(--cream); padding: var(--space-7) clamp(20px, 5vw, 60px); }
.layout {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--space-7);
  align-items: start;
}
.ueber-layout {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--space-7);
  align-items: start;
}
.col { min-width: 0; counter-reset: sec; }

/* --- 07 · KURZ-BOX --------------------------------------- */
.kurz {
  background: #fff;
  border-left: 5px solid var(--terra);
  border-radius: 0 12px 12px 0;
  padding: var(--space-5) var(--space-5);
  margin-bottom: var(--space-5);
}
@media (prefers-color-scheme: dark) { .kurz { background: var(--cream-2); } }
.kurz .lbl { font-family: var(--serif); color: var(--terra-dark); font-size: var(--step-1); margin-bottom: var(--space-2); }
.kurz p { font-size: var(--step-0); line-height: 1.65; max-width: var(--measure); }

/* --- 08 · TIERARZT-BOX (role=note, kein h3) --------------- */
.tarzt {
  background: var(--cream-2);
  border: 1px solid #2d4a3e2b;
  border-radius: 12px;
  padding: var(--space-5) var(--space-5);
  margin-bottom: var(--space-6);
}
.tarzt-title { font-family: var(--serif); font-size: var(--step-1); color: var(--forest); margin-bottom: var(--space-3); }
.tarzt ul { list-style: none; margin-bottom: var(--space-3); }
.tarzt li {
  padding-left: var(--space-5);
  position: relative;
  margin-bottom: var(--space-2);
  font-size: var(--step-0);
  color: var(--ink-soft);
  line-height: 1.55;
}
.tarzt li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--forest);
}
.tarzt > p:last-child { font-size: var(--step--2); color: #5c6f66; }

/* --- 09 · LEAD + BODYCONTENT ------------------------------ */
.lead {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink);
  max-width: var(--measure);
  margin-bottom: var(--space-5);
}
.lead::first-letter {
  font-family: var(--serif);
  color: var(--terra-dark);
  float: left;
  font-size: var(--step-5);
  line-height: .66;
  padding: 9px 14px 2px 0;
}
.bodycontent h2 {
  font-family: var(--serif);
  color: var(--forest);
  font-size: var(--step-2);
  line-height: 1.16;
  margin: var(--space-7) 0 var(--space-4);
  scroll-margin-top: var(--space-5);
}
.bodycontent h2::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  display: block;
  font-family: var(--serif);
  font-size: var(--step--1);
  letter-spacing: 1px;
  color: var(--terra);
  margin-bottom: var(--space-2);
}
.bodycontent h3 {
  font-family: var(--serif);
  color: var(--forest);
  font-size: var(--step-1);
  margin: var(--space-5) 0 var(--space-3);
}
.bodycontent p, .bodycontent li {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.bodycontent p { margin-bottom: var(--space-4); }
.bodycontent ul, .bodycontent ol { margin: 0 0 var(--space-4) 2px; }
.bodycontent ul { list-style: none; }
.bodycontent ul li {
  padding-left: var(--space-5);
  position: relative;
  margin-bottom: var(--space-3);
}
.bodycontent ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terra);
}
.bodycontent ol { padding-left: var(--space-5); }
.bodycontent ol li { margin-bottom: var(--space-3); }
.bodycontent strong { color: var(--forest); font-weight: 600; }
.bodycontent a { color: var(--terra-dark); border-bottom: 1px solid #c67d4b66; }

/* --- 10 · PULL-QUOTE (Serifen, Magazin-Rhythmus) ---------- */
.bodycontent .pullquote {
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--forest);
  background: var(--cream-3);
  border-left: 4px solid var(--terra);
  border-radius: 0 8px 8px 0;
  padding: var(--space-5) var(--space-6);
  margin: var(--space-7) 0;
  max-width: var(--measure);
}
.bodycontent .pullquote p {
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--forest);
  max-width: none;
  margin: 0;
}

/* --- 11 · PRAXIS-NOTE (Tufte-Randnotiz) ------------------- */
.bodycontent .praxis-note {
  background: var(--cream-3);
  border: 1px solid #2d4a3e22;
  border-radius: 10px;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  max-width: var(--measure);
  position: relative;
}
.bodycontent .praxis-note .pn-label {
  font-family: var(--serif);
  font-size: var(--step--1);
  color: var(--terra-dark);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  font-weight: 400;
}
.bodycontent .praxis-note > p:last-child {
  font-family: var(--sans);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
  max-width: none;
}
/* Desktop: Tufte overhang into margin */
@media (min-width: 1200px) {
  .bodycontent .praxis-note {
    float: right;
    width: 260px;
    margin: 0 calc(-280px - var(--space-5)) var(--space-5) var(--space-5);
    clear: right;
  }
}

/* --- 12 · CARD FIGURE ------------------------------------- */
.cardfig {
  margin: var(--space-6) 0;
  text-align: center;
}
.cardfig img, .cardfig picture { width: 440px; height: auto; margin: 0 auto; border-radius: 14px; }
.cardfig picture img { width: 100%; border-radius: 14px; }
.cardfig figcaption {
  font-size: var(--step--2);
  color: #5c6f66;
  margin-top: var(--space-3);
  font-style: italic;
}

/* --- 13 · ZETTEL ------------------------------------------ */
.zettel {
  background: var(--forest);
  color: var(--cream);
  border-radius: 16px;
  padding: var(--space-6);
  margin: var(--space-7) 0;
}
.zettel .kicker { color: #e6b989; }
.zettel h2 { font-family: var(--serif); color: var(--cream); font-size: var(--step-2); margin-bottom: var(--space-3); }
.zettel .zsub { font-size: var(--step--1); color: #ffffffc9; line-height: 1.6; margin-bottom: var(--space-5); max-width: var(--measure); }
.zq {
  border: none;
  background: #ffffff14;
  border-radius: 10px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.zq legend { font-size: var(--step-0); padding: 0 0 var(--space-2); color: #fff; }
.zq .opts { display: flex; gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
.zq label { font-size: var(--step--2); color: #ffffffd6; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; min-height: 44px; }
.zettel .btn { margin-top: var(--space-4); }

/* --- 14 · FAQ --------------------------------------------- */
.faq-wrap { margin-top: var(--space-7); border-top: 2px solid #2d4a3e1f; padding-top: var(--space-2); }
.faq-h { font-family: var(--serif); font-size: var(--step-2); color: var(--forest); margin: var(--space-4) 0 var(--space-1); }
.faq-item { border-bottom: 1px solid #2d4a3e1f; padding: var(--space-5) 0; }
.faq-q { font-family: var(--serif); font-size: var(--step-1); color: var(--forest); margin-bottom: var(--space-2); font-weight: 400; }
.faq-a { font-size: var(--step-0); line-height: 1.65; color: var(--ink-soft); }

/* --- 15 · AUTHOR ------------------------------------------ */
.author {
  display: flex;
  gap: var(--space-4);
  background: #fff;
  border: 1px solid #2d4a3e1f;
  border-radius: 14px;
  padding: var(--space-5) var(--space-5);
  margin-top: var(--space-7);
}
@media (prefers-color-scheme: dark) { .author { background: var(--cream-2); } }
.author .av {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--terra-btn);
  color: var(--cream);
  font-family: var(--serif);
  font-size: var(--step-1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.author .nm { font-family: var(--serif); font-size: var(--step-1); margin-bottom: var(--space-1); }
.author p { font-size: var(--step--1); line-height: 1.6; color: #4a5d54; }
@media (prefers-color-scheme: dark) { .author p { color: var(--ink-soft); } }

/* --- 16 · MORE ARTICLES ----------------------------------- */
.more { margin-top: var(--space-7); }
.more h3 { font-family: var(--serif); font-size: var(--step-1); margin-bottom: var(--space-4); }
.more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.more-grid a {
  background: #fff;
  border: 1px solid #2d4a3e1f;
  border-radius: 12px;
  padding: var(--space-4) var(--space-4);
  font-family: var(--serif);
  font-size: var(--step-0);
  color: var(--forest);
  transition: border-color .15s;
}
.more-grid a:hover { border-color: var(--terra); }
.more-grid a span {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--2);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--terra-dark);
  margin-bottom: var(--space-1);
}

/* --- 17 · SIDEBAR ----------------------------------------- */
.side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: var(--space-4); }
.sidecard {
  background: #fff;
  border: 1px solid #2d4a3e1a;
  border-radius: 14px;
  padding: var(--space-5) var(--space-5);
}
.sidecard h4 { font-family: var(--serif); font-size: var(--step-0); margin-bottom: var(--space-3); }
.toc nav { display: flex; flex-direction: column; }
.toc nav a {
  font-size: var(--step--1);
  color: #3a4f47;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 2px solid #2d4a3e1a;
  line-height: 1.4;
}
@media (prefers-color-scheme: dark) { .toc nav a { color: var(--ink-soft); } }
.toc nav a.active { color: var(--terra-dark); border-left-color: var(--terra); }
.side-cta { background: var(--forest); color: var(--cream); }
.side-cta h4 { color: var(--cream); }
.side-cta p { font-size: var(--step--2); color: #ffffffc4; margin-bottom: var(--space-3); line-height: 1.5; }
.side-cta .ph { display: block; font-family: var(--serif); font-size: var(--step-2); color: #e6b989; margin-bottom: var(--space-3); }
.side-cta .b, .side-begl .b {
  display: block;
  text-align: center;
  background: var(--terra-btn);
  color: var(--cream);
  padding: var(--space-3);
  border-radius: 26px;
  font-weight: 500;
  min-height: 44px;
  line-height: 1.4;
}
.side-begl { background: var(--cream-2); border-color: #c67d4b3d; }
.side-begl h4 { color: var(--terra-dark); }
.side-begl p { font-size: var(--step--2); color: #5b4636; margin-bottom: var(--space-3); line-height: 1.5; }

/* --- 18 · CTA SECTION ------------------------------------ */
.cta {
  background: var(--cream-2);
  color: var(--forest);
  text-align: center;
  padding: var(--space-8) var(--space-5);
  border-top: 1px solid #2d4a3e14;
}
.cta .kicker { color: var(--terra-dark); }
.cta h2 { font-family: var(--serif); color: var(--forest); font-size: var(--step-3); margin-bottom: var(--space-3); }
.cta .sub { font-size: var(--step-0); color: var(--ink-soft); max-width: 640px; margin: 0 auto var(--space-5); line-height: 1.6; }
.cta .phone { display: block; font-family: var(--serif); font-size: var(--step-2); color: var(--terra-dark); margin-bottom: var(--space-5); }
.btns { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.btn {
  padding: var(--space-3) var(--space-5);
  border-radius: 30px;
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--cream);
  cursor: pointer;
  border: none;
  font-family: var(--sans);
  transition: transform .12s;
  min-height: 44px;
}
.btn:active { transform: scale(.98); }
.btn.terra { background: var(--terra-btn); }
.btn.wa { background: #1e9c53; }

/* --- 19 · FOOTER ------------------------------------------ */
.footer {
  background: var(--forest-dark);
  color: var(--cream);
  padding: var(--space-7) clamp(20px, 5vw, 60px) var(--space-5);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-6);
}
.footer p, .footer a { font-size: var(--step--2); color: #ffffffab; line-height: 1.85; }
.footer a { border-bottom: 1px solid #ffffff2e; }
.footer h4 { font-family: var(--serif); font-size: var(--step-0); margin-bottom: var(--space-2); }
.footer .nav-logo { margin-bottom: var(--space-3); }
.fb { background: var(--forest-dark); color: #ffffff9c; font-size: var(--step--2); padding: 0 clamp(20px, 5vw, 60px) var(--space-5); }

/* --- 20 · LANDING: HERO ----------------------------------- */
.bhero {
  background: var(--forest);
  color: var(--cream);
  padding: var(--space-7) clamp(20px, 5vw, 60px);
  text-align: center;
}
.bhero h1 {
  font-family: var(--serif);
  font-size: var(--step-4);
  margin-bottom: var(--space-3);
  max-width: 20ch;
  margin-inline: auto;
  line-height: 1.1;
}
.bhero > p {
  font-size: var(--step-0);
  color: #ffffffbe;
  max-width: 60ch;
  margin: 0 auto var(--space-5);
  line-height: 1.6;
}

/* --- 21 · SEARCH ------------------------------------------ */
.search { max-width: 520px; margin: 0 auto; position: relative; }
.search input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border-radius: 30px;
  border: none;
  font-size: var(--step-0);
  font-family: var(--sans);
}
.qres {
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px #1a2e2530;
  overflow: hidden;
  text-align: left;
  z-index: 20;
}
.qres:empty { display: none; }
.qres a { display: block; padding: var(--space-3) var(--space-4); color: var(--forest); border-bottom: 1px solid #2d4a3e12; font-size: var(--step--1); }
.qres a:hover { background: var(--cream); }
.qres a small { color: var(--terra-dark); display: block; font-size: var(--step--2); text-transform: uppercase; letter-spacing: 1px; }

/* --- 22 · FEATURED CARD ----------------------------------- */
.feat { padding: var(--space-6) clamp(20px, 5vw, 60px) var(--space-2); }
.feat-card {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #fff;
  border: 1px solid #2d4a3e18;
  border-radius: 18px;
  overflow: hidden;
}
.feat-card .im { min-height: 420px; overflow: hidden; }
.feat-card .im img { width: 100%; height: 100%; object-fit: cover; view-transition-name: feat; }
.feat-card .im picture { width: 100%; height: 100%; }
.feat-card .im picture img { width: 100%; height: 100%; object-fit: cover; }
.feat-card .tx { padding: var(--space-6); display: flex; flex-direction: column; justify-content: center; }
.tag {
  align-self: flex-start;
  background: var(--cream-2);
  color: var(--terra-dark);
  font-size: var(--step--2);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-radius: 20px;
  margin-bottom: var(--space-4);
}
.feat-card h2 { font-family: var(--serif); font-size: var(--step-2); line-height: 1.12; margin-bottom: var(--space-3); }
.feat-card p { font-size: var(--step-0); line-height: 1.6; color: #4a5d54; margin-bottom: var(--space-5); }
@media (prefers-color-scheme: dark) { .feat-card p { color: var(--ink-soft); } }
.feat-card .rd { align-self: flex-start; background: var(--terra-btn); color: var(--cream); padding: var(--space-3) var(--space-5); border-radius: 30px; font-weight: 500; }

/* --- 23 · FILTER + CHIPS ---------------------------------- */
.filter {
  max-width: var(--maxw);
  margin: var(--space-7) auto var(--space-5);
  padding: 0 clamp(20px, 5vw, 60px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.filter h2 { font-family: var(--serif); font-size: var(--step-2); }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip {
  border: 1px solid #2d4a3e33;
  background: none;
  padding: var(--space-2) var(--space-4);
  border-radius: 22px;
  font-size: var(--step--2);
  color: #3a4f47;
  cursor: pointer;
  font-family: var(--sans);
  transition: .15s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
@media (prefers-color-scheme: dark) { .chip { color: var(--ink-soft); border-color: #ffffff33; } }
.chip:hover { border-color: var(--terra); }
.chip.on { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.chip[disabled] { opacity: .5; cursor: default; }

/* --- 24 · CARD GRID (fixed: same maxw as feat) ------------ */
.grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.card {
  background: #fff;
  border: 1px solid #2d4a3e18;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s, border-color .15s;
}
.card:hover { transform: translateY(-3px); border-color: #2d4a3e33; }
.card .th { height: 210px; background: var(--forest); overflow: hidden; }
.card .th img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card .th picture { width: 100%; height: 100%; }
.card .th picture img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card .bd { padding: var(--space-5) var(--space-5) var(--space-5); display: flex; flex-direction: column; flex: 1; }
.card .ct { font-size: var(--step--2); letter-spacing: 2px; text-transform: uppercase; color: var(--terra-dark); font-weight: 600; margin-bottom: var(--space-2); }
.card h3 { font-family: var(--serif); font-size: var(--step-1); line-height: 1.16; margin-bottom: var(--space-3); }
.card p { font-size: var(--step--1); line-height: 1.55; color: #4a5d54; margin-bottom: var(--space-3); flex: 1; }
@media (prefers-color-scheme: dark) { .card p { color: var(--ink-soft); } }
.card .rd { color: var(--terra-dark); font-size: var(--step--1); font-weight: 500; }
.card.hide { display: none; }

/* --- 25 · NEWSLETTER -------------------------------------- */
.news {
  background: var(--forest);
  color: var(--cream);
  padding: var(--space-8) var(--space-5);
  text-align: center;
}
.news h2 { font-family: var(--serif); color: var(--cream); font-size: var(--step-2); margin-bottom: var(--space-3); }
.news > p { font-size: var(--step-0); color: #ffffffbe; max-width: 56ch; margin: 0 auto var(--space-5); line-height: 1.6; }
.news .kicker { color: #e6b989; }
.nform { display: flex; gap: var(--space-3); justify-content: center; max-width: 500px; margin: 0 auto; flex-wrap: wrap; }
.nform input { flex: 1; min-width: 220px; padding: var(--space-3) var(--space-4); border-radius: 30px; border: none; font-size: var(--step--1); font-family: var(--sans); }
.nform button { background: var(--terra-btn); color: var(--cream); border: none; padding: var(--space-3) var(--space-5); border-radius: 30px; font-weight: 500; cursor: pointer; font-family: var(--sans); min-height: 44px; }

/* --- 26 · PRINT ------------------------------------------- */
#zettel-print { display: none; }
@media print {
  body > * { display: none !important; }
  #zettel-print { display: block !important; padding: var(--space-5); font-family: var(--sans); color: #111; }
  #zettel-print h2 { font-family: var(--serif); margin-bottom: var(--space-2); }
  #zettel-print .zmeta { font-size: 13px; color: #555; margin-bottom: var(--space-3); }
  #zettel-print .zline { padding: var(--space-2) 0; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; gap: 20px; }
  #zettel-print .za { font-weight: 600; }
  #zettel-print .zfoot { margin-top: var(--space-4); font-size: 12px; color: #555; }
}

/* --- 27 · ORCHESTRATED PAGE-LOAD (staggered fade-in) ------ */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
/* Stagger delays for cards */
.reveal[data-delay="1"] { transition-delay: 0.06s; }
.reveal[data-delay="2"] { transition-delay: 0.12s; }
.reveal[data-delay="3"] { transition-delay: 0.18s; }
.reveal[data-delay="4"] { transition-delay: 0.24s; }

/* --- 28 · RESPONSIVE -------------------------------------- */
@media (max-width: 900px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--forest-dark);
    flex-direction: column;
    padding: var(--space-3) var(--space-5) var(--space-5);
    gap: var(--space-3);
    z-index: 90;
  }
  .nav-links.open { display: flex; }
  .burger { display: block; }
  .layout, .ueber-layout { grid-template-columns: 1fr; }
  .side { position: static; }
  .feat-card { grid-template-columns: 1fr; }
  .feat-card .im { min-height: 240px; }
  .grid { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr 1fr; }
  .praxis-note { float: none; width: auto; margin: var(--space-6) 0; }
}
@media (max-width: 560px) {
  .more-grid { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; }
  .lead::first-letter { font-size: var(--step-4); }
}

/* --- 29 · REDUCED MOTION ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --- Audit-Fixes (Hover/Fokus/Kontrast/Hero) --- */
.btn.terra:hover,.nav-cta:hover,.side-cta .b:hover,.side-begl .b:hover,.nform button:hover,.feat-card .rd:hover{background:#b5713f}
.btn.wa:hover{background:#178a49}
.card:focus-within,.feat-card:focus-within{outline:2px solid var(--terra);outline-offset:2px}
.tarzt p{color:#4a5d54}
@media(min-width:900px){.hero h1{max-width:20ch}}

/* --- Tierart-Filter (Pferd/Hund) --- */
.chip-tier{font-weight:600}
.chip-sep{display:inline-block;width:1px;height:20px;background:#2d4a3e2e;margin:0 3px;align-self:center}
@media(prefers-color-scheme:dark){.chip-sep{background:#ffffff26}}

/* --- Echtes Oliver-Foto: Autoren-Avatar + Ueber-Seite-Figur --- */
.author img.av{object-fit:cover;object-position:50% 30%;background:none}
.ueber-figure{margin:0 0 var(--space-6);max-width:440px}
.ueber-figure img{width:100%;height:auto;border-radius:16px;display:block;box-shadow:0 10px 30px -12px #1a2e2540}
.ueber-figure figcaption{font-size:var(--step--1);color:#6a7b72;margin-top:.6rem;line-height:1.5}
@media(prefers-color-scheme:dark){.ueber-figure figcaption{color:var(--ink-soft)}}

/* --- Ueber-Seite: zwei Fotos (Pferd + Hund) --- */
.ueber-figures{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;margin:0 0 var(--space-6)}
.ueber-figures img{width:100%;height:auto;border-radius:14px;display:block;box-shadow:0 10px 30px -14px #1a2e2540}
.ueber-figures figcaption{grid-column:1 / -1;font-size:var(--step--1);color:#6a7b72;line-height:1.5;margin-top:.2rem}
@media(prefers-color-scheme:dark){.ueber-figures figcaption{color:var(--ink-soft)}}

/* --- Doppel-Feature Startseite (Pferd + Hund, echtes Foto) --- */
.featwrap{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.fcard{display:flex;flex-direction:column;background:#fff;border:1px solid #2d4a3e18;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.fcard:hover{transform:translateY(-3px);box-shadow:0 16px 40px -18px #1a2e2559}
.fcard .im{aspect-ratio:16 / 10;overflow:hidden}
.fcard .im img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;view-transition-name:none}
.fcard .tx{padding:var(--space-5);display:flex;flex-direction:column;gap:5px;flex:1}
.fcard h2{font-family:var(--serif);font-weight:400;font-size:var(--step-1);line-height:1.14;margin:3px 0 3px}
.fcard p{font-size:var(--step--1);line-height:1.55;color:#4a5d54;flex:1}
.fcard .tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--terra-dark);background:#c67d4b1f;padding:4px 11px;border-radius:999px}
.fcard .rd{color:var(--terra-dark);font-weight:600;font-size:var(--step--1);margin-top:8px}
.fcard:focus-within{outline:2px solid var(--terra);outline-offset:2px}
@media(prefers-color-scheme:dark){.fcard{background:#222a25;border-color:#ffffff14}.fcard p{color:var(--ink-soft)}}
@media(max-width:760px){.featwrap{grid-template-columns:1fr}}