/* Diskuszucht Heppner – Wissensbereich 2026-09-20 */

/* Ruhigere Typografie auf allen Unterseiten. */
.page-hero h1,
.article-hero h1,
.knowledge-hero h1 {
  font-size: clamp(2.15rem, 3.55vw, 3.35rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.032em !important;
}

.page-hero ~ .section h2,
.article-layout h2,
.knowledge-dashboard h2,
.knowledge-library h2 {
  font-size: clamp(1.45rem, 2.25vw, 2.05rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -.022em !important;
}

.knowledge-hero {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  padding: 0;
  background: #d8f0f1 url("/public/images/wissen/diskuswissen-hero-v2.webp") center / cover no-repeat;
  color: #082f35;
}

.knowledge-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(225,246,247,.91) 0%, rgba(221,244,245,.8) 29%, rgba(218,242,244,.5) 44%, rgba(218,242,244,.08) 62%);
}

.knowledge-hero__inner {
  position: relative;
  z-index: 1;
  width: min(1280px, calc(100% - 40px));
  min-height: 440px;
  margin: auto;
  padding: 30px 0 26px;
}

.knowledge-hero__copy {
  width: min(720px, 58%);
}

.knowledge-hero .eyebrow {
  margin: 0 0 6px;
  color: #087f8c;
}

.knowledge-hero h1 {
  max-width: 690px;
  margin: 0 0 10px;
  color: #082f35;
}

.knowledge-hero__copy > p:not(.eyebrow) {
  max-width: 610px;
  margin: 0;
  color: #3e5d61;
  font-size: 1rem;
  line-height: 1.55;
}

.knowledge-searchbox {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) 126px;
  align-items: center;
  gap: 10px;
  margin: 18px 0 12px;
  padding: 6px 7px 6px 18px;
  border: 1px solid rgba(8,127,140,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 12px 32px rgba(8,47,53,.1);
  backdrop-filter: blur(12px);
}

.knowledge-searchbox > span {
  display: grid;
  color: #0b5962;
}

.knowledge-searchbox > span svg {
  width: 21px;
  height: 21px;
}

.knowledge-searchbox input {
  width: 100%;
  min-height: 43px;
  padding: 7px 2px;
  border: 0;
  background: transparent;
  color: #113f44;
  font: inherit;
  font-size: 1rem;
  box-shadow: none;
}

.knowledge-searchbox input:focus {
  outline: 0;
}

.knowledge-searchbox > button[type="submit"] {
  min-height: 43px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #087f8c;
  color: #fff;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.knowledge-searchbox > button[type="submit"]:hover {
  background: #066c76;
}

.knowledge-search-reset {
  position: absolute;
  right: 142px;
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #edf6f5;
  color: #43676a;
  font-size: 1.2rem;
  cursor: pointer;
}

.knowledge-searchbox.has-query .knowledge-search-reset {
  display: grid;
  place-items: center;
}

.knowledge-searchbox.has-query input {
  padding-right: 38px;
}

.knowledge-categories {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 8px;
}

.knowledge-category {
  display: grid;
  min-height: 78px;
  align-content: center;
  justify-items: center;
  padding: 9px 7px;
  border: 1px solid rgba(8,127,140,.14);
  border-radius: 13px;
  background: rgba(255,255,255,.9);
  color: #123f44;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 7px 20px rgba(8,47,53,.06);
  transition: .2s ease;
}

.knowledge-category:hover,
.knowledge-category.is-active {
  border-color: #087f8c;
  background: #fff;
  color: #056b76;
  transform: translateY(-2px);
}

.knowledge-category__icon {
  display: grid;
  place-items: center;
  color: #078692;
}

.knowledge-category__icon svg {
  width: 23px;
  height: 23px;
}

.knowledge-category strong,
.knowledge-category small {
  display: block;
}

.knowledge-category strong {
  margin-top: 4px;
  font-size: .76rem;
  line-height: 1.18;
}

.knowledge-category small {
  display: none;
}

.knowledge-dashboard {
  padding-top: 24px;
  padding-bottom: 54px;
  background: #fff;
}

.knowledge-section-head,
.knowledge-block-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.knowledge-section-head {
  margin-bottom: 10px;
}

.knowledge-section-head .eyebrow {
  margin-bottom: 3px;
}

.knowledge-section-head h2,
.knowledge-block-head h2 {
  margin: 0;
  color: #0c3940;
}

.knowledge-section-head > p,
.knowledge-block-head p {
  margin: 0;
  color: #668083;
  font-size: .84rem;
}

.knowledge-way-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}

.knowledge-way {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0,1fr) 34px;
  align-items: center;
  gap: 14px;
  min-height: 104px;
  overflow: hidden;
  padding: 15px 16px;
  border: 1px solid #d1e6e4;
  border-radius: 16px;
  background: linear-gradient(135deg,#f0fbfa,#e4f4f2);
  color: #123f44;
  text-decoration: none;
}

.knowledge-way:nth-child(2) {
  background: linear-gradient(135deg,#eff9fc,#e5f3f9);
}

.knowledge-way:nth-child(3) {
  background: linear-gradient(135deg,#f3f4ff,#e9eafa);
}

.knowledge-way:hover {
  border-color: #78babd;
  transform: translateY(-2px);
}

.knowledge-way__icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  color: #087f8c;
}

.knowledge-way__icon svg {
  width: 29px;
  height: 29px;
}

.knowledge-way strong,
.knowledge-way small {
  display: block;
}

.knowledge-way strong {
  font-size: 1rem;
}

.knowledge-way small {
  margin-top: 4px;
  color: #547174;
  font-size: .79rem;
  line-height: 1.4;
}

.knowledge-way em {
  position: absolute;
  top: 3px;
  right: 44px;
  color: rgba(8,127,140,.09);
  font-size: 3.35rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.knowledge-way > b,
.popular-topic > b,
.knowledge-helper-list > * > b,
.knowledge-path > b {
  position: relative;
  z-index: 1;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 50%;
  background: #087f8c;
  color: #fff;
  font-size: 1.35rem;
}

.knowledge-content-grid {
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(300px,.9fr);
  gap: 28px;
  margin-top: 22px;
}

.knowledge-block-head {
  margin-bottom: 10px;
}

.knowledge-block-head h2 {
  font-size: 1.4rem !important;
}

.knowledge-block-head a {
  color: #087f8c;
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.popular-topic-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
}

.popular-topic {
  display: grid;
  grid-template-rows: 106px 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d6e6e4;
  border-radius: 14px;
  background: #fff;
  color: #123f44;
  text-decoration: none;
  box-shadow: 0 5px 16px rgba(8,47,53,.04);
}

.popular-topic__visual {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#cfecef,#82c5ca);
  color: #087f8c;
}

.popular-topic__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

.popular-topic:hover .popular-topic__visual img {
  transform: scale(1.035);
}

.topic-food .popular-topic__visual {
  background: linear-gradient(145deg,#f6e3c8,#d79a4f);
  color: #8a4e13;
}

.topic-health .popular-topic__visual {
  background: linear-gradient(145deg,#ffe7e2,#e99a88);
  color: #9b3d34;
}

.topic-social .popular-topic__visual {
  background: linear-gradient(145deg,#e6f2ee,#72aea2);
  color: #17695f;
}

.topic-breeding .popular-topic__visual {
  background: linear-gradient(145deg,#eee9ff,#aba2df);
  color: #514a92;
}

.popular-topic__visual svg {
  width: 39px;
  height: 39px;
}

.popular-topic > span:nth-child(2) {
  display: block;
  min-width: 0;
  padding: 10px 11px 12px;
}

.popular-topic strong,
.popular-topic small {
  display: block;
}

.popular-topic em {
  display: block;
  margin-top: 7px;
  color: #087f8c;
  font-size: .69rem;
  font-style: normal;
  font-weight: 850;
}

.popular-topic strong {
  overflow: hidden;
  font-size: .84rem;
  line-height: 1.24;
  text-overflow: ellipsis;
}

.popular-topic small {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: #70878a;
  font-size: .69rem;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.popular-topic > b {
  display: none;
}

.knowledge-helper {
  padding-left: 26px;
  border-left: 1px solid #d8e5e4;
}

.knowledge-helper-list {
  display: grid;
  gap: 7px;
}

.knowledge-helper-list > a,
.knowledge-helper-list > button {
  display: grid;
  grid-template-columns: 43px minmax(0,1fr) 24px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 66px;
  padding: 8px 9px;
  border: 1px solid #d7e6e5;
  border-radius: 13px;
  background: #fff;
  color: #123f44;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.knowledge-helper-list > * > span:first-child {
  display: grid;
  width: 41px;
  height: 41px;
  place-items: center;
  border-radius: 50%;
  background: #e4f4f2;
  color: #087f8c;
}

.knowledge-helper-list svg {
  width: 22px;
  height: 22px;
}

.knowledge-helper-list strong,
.knowledge-helper-list small {
  display: block;
}

.knowledge-helper-list strong {
  font-size: .86rem;
}

.knowledge-helper-list small {
  margin-top: 2px;
  color: #6c8386;
  font-size: .69rem;
  line-height: 1.34;
}

.knowledge-helper-list > * > b {
  width: 25px;
  height: 25px;
  background: #eef7f6;
  color: #087f8c;
  font-size: 1.1rem;
}

.knowledge-paths {
  margin-top: 21px;
}

.knowledge-block-head--inline {
  margin-bottom: 9px;
}

.knowledge-path-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}

.knowledge-path {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 130px 34px;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  overflow: hidden;
  padding: 8px 14px 8px 16px;
  border: 1px solid #d1e6e4;
  border-radius: 15px;
  background: linear-gradient(90deg,#effaf9 0%,#e1f4f1 65%,#b9e0dc 100%);
  color: #123f44;
  text-decoration: none;
}

.knowledge-path--advanced {
  border-color: #eadccf;
  background: linear-gradient(90deg,#fff8ee 0%,#fdebd4 65%,#efc896 100%);
}

.knowledge-path > span:first-child {
  color: #087f8c;
}

.knowledge-path > span:first-child svg {
  width: 34px;
  height: 34px;
}

.knowledge-path strong,
.knowledge-path small {
  display: block;
}

.knowledge-path strong {
  font-size: .98rem;
}

.knowledge-path small {
  margin-top: 3px;
  color: #5e797c;
  font-size: .72rem;
  line-height: 1.35;
}

.knowledge-path img {
  align-self: end;
  width: 130px;
  max-height: 82px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 9px 12px rgba(8,47,53,.15));
}

.knowledge-path > b {
  width: 29px;
  height: 29px;
  background: rgba(255,255,255,.9);
  color: #087f8c;
}

.knowledge-library {
  scroll-margin-top: 100px;
}

.knowledge-library__head {
  align-items: center;
}

.knowledge-article-card {
  content-visibility: auto;
  contain-intrinsic-size: 260px;
}

.article-meta {
  margin-top: 18px;
  color: #729093 !important;
  font-size: .82rem !important;
}

.article-shell {
  display: grid;
  grid-template-columns: 230px minmax(0,780px);
  align-items: start;
  justify-content: center;
  gap: 48px;
}

.article-shell > article {
  min-width: 0;
}

.article-toc {
  position: sticky;
  top: 118px;
  padding: 18px;
  border: 1px solid #d4e4e2;
  border-radius: 16px;
  background: #f7fbfa;
}

.article-toc > strong {
  color: #123f44;
  font-size: .88rem;
}

.article-toc nav {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.article-toc a {
  color: #527074;
  font-size: .78rem;
  line-height: 1.35;
  text-decoration: none;
}

.article-toc a:hover {
  color: #087f8c;
}

.short-answer button {
  margin-top: 12px;
  padding: 9px 13px;
  border: 0;
  border-radius: 10px;
  background: #087f8c;
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}

.assistant-source-links {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.assistant-source-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #e9f5f4;
  color: #08717b;
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 1100px) {
  .knowledge-hero__copy { width: min(720px,66%); }
  .knowledge-categories { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .knowledge-content-grid { grid-template-columns: 1fr; }
  .knowledge-helper { padding-left: 0; border-left: 0; }
  .knowledge-helper-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .popular-topic-grid { grid-template-columns: repeat(5,minmax(150px,1fr)); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
  .popular-topic { scroll-snap-align: start; }
}

@media (max-width: 760px) {
  .page-hero h1,
  .article-hero h1,
  .knowledge-hero h1 {
    font-size: clamp(1.9rem, 8.6vw, 2.55rem) !important;
  }

  .page-hero ~ .section h2,
  .article-layout h2,
  .knowledge-dashboard h2,
  .knowledge-library h2 {
    font-size: clamp(1.35rem, 6vw, 1.8rem) !important;
  }

  .knowledge-hero {
    min-height: 0;
    background-position: 68% center;
  }

  .knowledge-hero__shade {
    background: linear-gradient(90deg,rgba(227,246,247,.95) 0%,rgba(222,244,245,.9) 68%,rgba(218,242,244,.6) 100%);
  }

  .knowledge-hero__inner {
    width: calc(100% - 28px);
    min-height: 0;
    padding: 31px 0 24px;
  }

  .knowledge-hero__copy {
    width: 100%;
  }

  .knowledge-hero__copy > p:not(.eyebrow) {
    max-width: 92%;
    font-size: .92rem;
  }

  .knowledge-searchbox {
    grid-template-columns: 22px minmax(0,1fr) 76px;
    margin-top: 16px;
    padding-left: 13px;
  }

  .knowledge-searchbox > button[type="submit"] {
    padding: 0 13px;
    font-size: .8rem;
  }

  .knowledge-search-reset {
    right: 88px;
  }

  .knowledge-categories {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 7px;
    scroll-snap-type: x mandatory;
  }

  .knowledge-category {
    min-width: 118px;
    min-height: 72px;
    scroll-snap-align: start;
  }

  .knowledge-dashboard {
    padding-top: 25px;
  }

  .knowledge-section-head,
  .knowledge-block-head {
    display: block;
  }

  .knowledge-section-head > p {
    margin-top: 4px;
  }

  .knowledge-way-grid,
  .knowledge-path-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-way {
    min-height: 92px;
  }

  .knowledge-content-grid {
    gap: 24px;
  }

  .knowledge-block-head > a {
    display: inline-flex;
    margin-top: 7px;
  }

  .popular-topic-grid {
    grid-template-columns: repeat(5,minmax(230px,78vw));
  }

  .knowledge-helper-list {
    grid-template-columns: 1fr;
  }

  .knowledge-path {
    grid-template-columns: 42px minmax(0,1fr) 74px 29px;
    padding-left: 12px;
  }

  .knowledge-path img {
    width: 85px;
  }

  .article-shell {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .article-toc {
    position: static;
  }
}

/* Keine Wissenskomponente darf die mobile Dokumentbreite vergrößern. */
.knowledge-hero,
.knowledge-dashboard,
.knowledge-library,
.knowledge-content-grid,
.knowledge-popular,
.knowledge-paths,
.knowledge-article-grid {
  min-width: 0;
  max-width: 100%;
}

.knowledge-dashboard,
.knowledge-library {
  overflow: clip;
}

.knowledge-categories,
.popular-topic-grid {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

@media (max-width: 760px) {
  .knowledge-searchbox {
    width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
  }

  .knowledge-searchbox input {
    min-width: 0;
  }

  .knowledge-categories,
  .popular-topic-grid {
    width: 100%;
    box-sizing: border-box;
  }

.knowledge-category:last-child,
  .popular-topic:last-child {
    margin-right: 2px;
  }
}

.knowledge-card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #087f8c;
}

.knowledge-card-meta svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.knowledge-card-meta small {
  color: inherit;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
  .knowledge-category,
  .knowledge-way {
    transition: none;
  }
}