/* Wissensbereich design tokens + scoped base. */
:root {
  --wissen-blue: #095494;
  --wissen-orange: #E56100;
  --wissen-text: #4E5455;
  --wissen-bg-blue: #EDF7FF;
  --wissen-bg-cream: #FFF0D9;
  --wissen-radius: 10px;
  --wissen-gap: 1.5rem;
}
.wissen-content { color: var(--wissen-text); }
.wissen-content h2, .wissen-content h3 { color: var(--wissen-text); }
.wissen-cta { display: inline-block; background: var(--wissen-blue); color: #fff; padding: .7em 1.4em; border-radius: 999px; text-decoration: none; font-weight: 600; }
.wissen-cta--orange { background: var(--wissen-orange); }

/* Layout — wissen single (sticky meta+ToC sidebar + content) */
.wissen-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; align-items: start; max-width: 1550px; margin: 2rem auto; padding: 0 1rem; }
/* The left column always carries the post meta (dates) + back-link, so it stays a sidebar even when a post has no H2/ToC. */
.wissen-sidebar { position: sticky; top: 100px; font-size: .9em; }
/* Meta — Blogbeitrag/Aktualisiert dates above the ToC */
.wissen-meta { margin-bottom: 1.5rem; }
.wissen-meta__dates { margin: 0; line-height: 1.5; color: var(--wissen-text); }
.wissen-meta__dates strong { display: block; }
.wissen-meta__dates em { display: block; font-size: .9em; }
/* "Zur Übersicht Beiträge" back-link below the ToC */
.wissen-back { display: inline-block; margin-top: 1.5rem; color: var(--wissen-blue); font-weight: 600; text-decoration: none; }
.wissen-back:hover { text-decoration: underline; }
/* Breadcrumb above the title */
.wissen-breadcrumb { font-size: .85em; color: var(--wissen-text); margin: 0 0 1rem; }
.wissen-toc__title { font-weight: 600; color: var(--wissen-blue); margin: 0 0 .75rem; }
.wissen-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: wissen-toc; }
.wissen-toc__item { counter-increment: wissen-toc; margin: .15rem 0; }
.wissen-toc__item a { color: var(--wissen-text); text-decoration: none; display: block; padding: .3rem .5rem; border-left: 2px solid transparent; }
.wissen-toc__item a::before { content: counter(wissen-toc) ". "; color: var(--wissen-blue); }
.wissen-toc__item.is-active a { color: var(--wissen-blue); border-left-color: var(--wissen-blue); font-weight: 600; }
.wissen-toc__toggle { display: none; }
/* Sidebar author — linked Ansprechpartner (photo + name + position) */
.wissen-sidebar-author { margin-bottom: 1.5rem; }
.wissen-sidebar-author__label { font-weight: 600; color: var(--wissen-blue); margin: 0 0 .5rem; }
.wissen-sidebar-author__row { display: flex; align-items: center; gap: .75rem; }
/* Clip the wrapper to a circle so the photo stays round even during lazy-load (placeholder SVG). */
.wissen-sidebar-author__photo { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; }
.wissen-sidebar-author__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wissen-sidebar-author__info { display: flex; flex-direction: column; line-height: 1.3; }
.wissen-sidebar-author__name { font-weight: 600; }
.wissen-sidebar-author__position { font-size: .9em; }
/* Foot — full-width area below the article: Ansprechpartner section + share + prev/next */
.wissen-foot { max-width: 1550px; margin: 2.5rem auto 0; padding: 0 1rem; }
/* Ansprechpartner section (no background; large portrait photo left, text + contact CTA right) */
.wissen-ansprechpartner { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: start; margin: 0 0 2.5rem; padding-top: 2rem; border-top: 1px solid #e6e6e6; }
.wissen-ansprechpartner__photo img { width: 100%; height: auto; border-radius: var(--wissen-radius); display: block; }
.wissen-ansprechpartner__heading { font-weight: 600; font-size: 1.4em; color: var(--wissen-text); margin: 0 0 .25rem; }
.wissen-ansprechpartner__meta { font-size: .9em; color: var(--wissen-text); margin: 0 0 1rem; }
.wissen-ansprechpartner__text { margin-bottom: 1.25rem; }
.wissen-ansprechpartner__text > :last-child { margin-bottom: 0; }
.wissen-ansprechpartner__cta { margin: 0; }
@media (max-width: 48em) {
  .wissen-ansprechpartner { grid-template-columns: 1fr; gap: 1.25rem; }
  .wissen-ansprechpartner__photo img { max-width: 200px; }
}
@media (max-width: 64em) {
  .wissen-layout { grid-template-columns: 1fr; gap: 1.25rem; }
  .wissen-sidebar { position: static; }
  .wissen-toc__toggle { display: inline-block; background: var(--wissen-bg-blue); border: 0; border-radius: var(--wissen-radius); padding: .6em 1em; font-weight: 600; color: var(--wissen-blue); cursor: pointer; }
  .wissen-toc:not(.is-open) .wissen-toc__nav { display: none; }
}
/* Template 3 — Infobox */
.wissen-infobox { position: relative; padding: 1.25rem 1.5rem; padding-right: 3rem; border-radius: var(--wissen-radius); margin: 2rem 0 1.5rem; background: var(--wissen-bg-blue); }
.wissen-infobox--orange { background: var(--wissen-bg-cream); }
/* Miro info icon, floating ~50% above the top-right edge; tinted per variant via mask */
.wissen-infobox__icon { position: absolute; top: -1.7rem; right: 1.25rem; width: 3.4rem; height: 3.4rem; background-color: var(--wissen-blue); -webkit-mask: url(../img/info-icon.png) center / contain no-repeat; mask: url(../img/info-icon.png) center / contain no-repeat; }
.wissen-infobox--orange .wissen-infobox__icon { background-color: var(--wissen-orange); }
.wissen-infobox__title { font-weight: 600; margin: 0 0 .35em; color: var(--wissen-blue); }
.wissen-infobox--orange .wissen-infobox__title { color: var(--wissen-orange); }
.wissen-infobox__body > :last-child { margin-bottom: 0; }
/* Template 4 — Zitat */
.wissen-quote { margin: 2rem 0; padding: .25rem 0 .25rem 1.5rem; border-left: 4px solid var(--wissen-blue); }
.wissen-quote__label { font-weight: 600; color: var(--wissen-blue); margin: 0 0 .5rem; }
.wissen-quote__text { font-size: 1.1em; line-height: 1.6; font-style: normal; margin: 0 0 .75rem; border-left: 0; padding-left: 0; }
.wissen-quote__text > :last-child { margin-bottom: 0; }
.wissen-quote__cite { font-style: italic; color: var(--wissen-text); }
/* Template 1 — Gegenüberstellung */
.wissen-compare { display: flex; gap: var(--wissen-gap); margin: 1.5rem 0; flex-wrap: wrap; }
.wissen-compare__col { flex: 1 1 0; min-width: 220px; background: var(--wissen-bg-blue); border-radius: var(--wissen-radius); padding: 1.25rem 1.5rem; }
.wissen-compare__heading { font-weight: 600; color: var(--wissen-blue); margin: 0 0 .75rem; }
.wissen-checklist { list-style: none; margin: 0; padding: 0; }
.wissen-checklist li { position: relative; padding-left: 2em; margin: .5em 0; }
.wissen-checklist li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1.2em; height: 1.2em; background: url(../img/haken.svg) center / contain no-repeat; }
/* Template 5 — Bild-Text — light-blue card (Miro: blue background, blue heading + link) */
/* overflow:hidden clips the full-bleed image to the card's rounded corners. */
.wissen-bildtext { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin: 2rem 0; background: var(--wissen-bg-blue); border-radius: var(--wissen-radius); overflow: hidden; }
.wissen-bildtext--right .wissen-bildtext__media { order: 2; }
/* Image fills the full section height (no blue strip above/below); text stays vertically centered. */
.wissen-bildtext__media { align-self: stretch; }
.wissen-bildtext__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wissen-bildtext__text { padding: 1.5rem; }
/* Scoped via parent class so it beats `.wissen-content h3` (0,0,1,1) and still works in the UX Builder preview. */
.wissen-bildtext .wissen-bildtext__heading { color: var(--wissen-blue); margin: 0 0 .5rem; }
/* "Mehr erfahren" links — trailing chevron (inline SVG, centered with the text) */
.wissen-bildtext .wissen-bildtext__link, .wissen-card .wissen-card__link { display: inline-flex; align-items: center; color: var(--wissen-blue); font-weight: 600; text-decoration: none; }
.wissen-bildtext__link { margin-top: .75rem; }
.wissen-link__arrow { flex: none; width: auto; height: .7em; margin-left: .4em; }
@media (max-width: 48em) {
  .wissen-bildtext { grid-template-columns: 1fr; }
  .wissen-bildtext--right .wissen-bildtext__media { order: 0; }
  .wissen-bildtext__img { height: auto; }
}
/* Template 2 — Boxed Grid */
.wissen-grid { display: grid; gap: var(--wissen-gap); margin: 1.5rem 0; grid-template-columns: repeat(3, 1fr); }
.wissen-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wissen-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wissen-grid--4 { grid-template-columns: repeat(4, 1fr); }
.wissen-card { background: var(--wissen-bg-blue); border-radius: var(--wissen-radius); padding: 1.5rem; display: flex; flex-direction: column; }
.wissen-card__heading { font-weight: 600; color: var(--wissen-blue); margin: 0 0 .5rem; }
.wissen-card__body > :last-child { margin-bottom: 0; }
.wissen-card__link { margin-top: auto; color: var(--wissen-blue); font-weight: 600; padding-top: .75rem; }
@media (max-width: 64em) { .wissen-grid, .wissen-grid--3, .wissen-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40em) { .wissen-grid, .wissen-grid--2, .wissen-grid--3, .wissen-grid--4 { grid-template-columns: 1fr; } }
.wissen-title { color: var(--wissen-text); margin: 0 0 1rem; }
/* Kontakt — CTA section (blue card, optional image + heading/text + button) */
/* overflow:hidden clips the full-bleed image to the card's rounded corners. */
.wissen-kontakt { display: grid; grid-template-columns: 5fr 7fr; align-items: center; margin: 2rem 0; background: var(--wissen-bg-blue); border-radius: var(--wissen-radius); overflow: hidden; }
/* Image right: keep the image at 5/12 (text 7/12) and swap visual order. */
.wissen-kontakt--right { grid-template-columns: 7fr 5fr; }
.wissen-kontakt--right .wissen-kontakt__media { order: 2; }
.wissen-kontakt--no-media { grid-template-columns: 1fr; }
/* Image fills the full section height (no blue strip above/below); text stays vertically centered. */
.wissen-kontakt__media { align-self: stretch; }
.wissen-kontakt__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wissen-kontakt__text { padding: 1.5rem; }
/* Scoped via parent so it beats `.wissen-content h3` (0,0,1,1). */
.wissen-kontakt .wissen-kontakt__heading { color: var(--wissen-blue); margin: 0 0 .5rem; }
.wissen-kontakt__text > :last-child { margin-bottom: 0; }
.wissen-kontakt__text .button { margin: 1rem 0 0; }
@media (max-width: 48em) {
  .wissen-kontakt, .wissen-kontakt--right { grid-template-columns: 1fr; }
  .wissen-kontakt--right .wissen-kontakt__media { order: 0; }
  .wissen-kontakt__img { height: auto; }
}