/*!
 * ibo Experience Lab – Content- und Wissenskomponenten (Run 02)
 * Baut auf ibo-tokens.css / ibo-base.css / ibo-components.css auf und verwendet
 * ausschließlich deren Tokens. Jede Komponente ist ein eigenständiger ibo-*-Block
 * und als TYPO3-Content-Element übertragbar (siehe docs/content-mapping-run-02.md).
 *
 *   ibo-khead      Redaktioneller Sektionskopf      ibo-subnav    Themen-/Wissensnavigation (sticky)
 *   ibo-format     Format-Badge mit Icon            ibo-hubintro  Hub-Einstieg mit Suche
 *   ibo-prodnav    Produkt-Schnelleinstieg          ibo-finder    Problemfinder (Tabs)
 *   ibo-fstory     Featured Story (4 Varianten)     ibo-tour      Interaktiver Screenshot-Guide
 *   ibo-howto      Schritt-für-Schritt-Anleitung    ibo-path      Lernpfad
 *   ibo-bento      Redaktionelle Feature-Karten     ibo-tasks     Aufgaben-Sammlung
 *   ibo-numlist    Nummerierte Tipps                ibo-mcard     Tutorial-/Video-Karte
 *   ibo-media      Mediathek mit Formatfilter       ibo-kb        Wissenscenter (Suche, Filter, Akkordeon)
 *   ibo-related    Verwandte Inhalte                ibo-player    Click-to-Load-Videodialog
 *   ibo-next       Abschluss / nächste Schritte     ibo-keycaps   Tastenkürzel-Referenz
 */

:root {
  --ibo-sticky-top: var(--ibo-header-h);
  --ibo-subnav-h: 0px;
  --ibo-anchor-offset: calc(var(--ibo-sticky-top) + var(--ibo-subnav-h) + 1rem);
  --ibo-card-hover-y: -3px;
}
@media (prefers-reduced-motion: reduce) { :root { --ibo-card-hover-y: 0px; } }

/* Sprungziele landen unterhalb von Header und Unternavigation */
.ibo-lab :where([id]) { scroll-margin-top: var(--ibo-anchor-offset); }

/* ---------- Redaktioneller Sektionskopf ---------- */
.ibo-khead { display: grid; gap: .75rem 3rem; margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }
@media (min-width: 992px) {
  .ibo-khead--split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; }
}
.ibo-khead h2 { margin: 0; }
.ibo-khead__lead { margin: 0; font: var(--ibo-weight-light) 1.0625rem/1.55 var(--ibo-font-light); color: var(--ibo-text-muted); }
.ibo-khead__lead strong { font-weight: var(--ibo-weight-medium); color: var(--ibo-text); }
.ibo-khead--center { max-width: 820px; margin-inline: auto; text-align: center; }
.ibo-khead--on-dark h2, .ibo-khead--on-dark .ibo-khead__lead { color: #fff; }
.ibo-eyebrow--line { display: inline-flex; align-items: center; gap: .6rem; }
.ibo-eyebrow--line::before { content: ""; width: 1.75rem; height: 3px; background: var(--ibo-red); }
.ibo-on-dark .ibo-eyebrow, .ibo-khead--on-dark .ibo-eyebrow { color: rgba(255, 255, 255, .78); }
.ibo-on-dark .ibo-eyebrow--line::before { background: #fff; }

.ibo-section--soft { background: var(--ibo-light-2); }
.ibo-section--petrol { color: #fff; background: var(--ibo-petrol); }
.ibo-section--petrol a:not(.ibo-btn) { color: #fff; }

/* ---------- Format-Badge (Inhaltsformat mit Icon) ---------- */
.ibo-format {
  --_c: var(--ibo-petrol);
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font: 700 .6875rem/1.3 var(--ibo-font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--_c);
  white-space: nowrap;
}
.ibo-format::before {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--_icon) center / contain no-repeat;
  mask: var(--_icon) center / contain no-repeat;
}
.ibo-format--tipp     { --_c: var(--ibo-red);    --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.3A7 7 0 0 0 12 2Zm-3 18h6v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-1Z'/%3E%3C/svg%3E"); }
.ibo-format--faq      { --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 16h-2v-2h2v2Zm2.1-7.7-.9.9c-.7.7-1.2 1.3-1.2 2.8h-2v-.5c0-1.1.5-2.1 1.2-2.8l1.2-1.3a1.9 1.9 0 0 0 .6-1.4 2 2 0 0 0-4 0H8a4 4 0 0 1 8 0c0 .9-.4 1.7-.9 2.3Z'/%3E%3C/svg%3E"); }
.ibo-format--tutorial { --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h3v3H3V4Zm5 .5h13v2H8v-2ZM3 10.5h3v3H3v-3Zm5 .5h13v2H8v-2ZM3 17h3v3H3v-3Zm5 .5h13v2H8v-2Z'/%3E%3C/svg%3E"); }
.ibo-format--video    { --_c: var(--ibo-violet); --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-2 14.5v-9l7 4.5-7 4.5Z'/%3E%3C/svg%3E"); }
.ibo-format--artikel  { --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l6 6v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Zm7 1.5V9h5.5L13 3.5ZM8 12v2h8v-2H8Zm0 4v2h8v-2H8Z'/%3E%3C/svg%3E"); }
.ibo-format--demo     { --_c: var(--ibo-petrol); --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l13 7-5.6 1.6L16 18.5l-2.2 1.2-3.6-6.9L6 17V3Z'/%3E%3C/svg%3E"); }
.ibo-format--entdeckt { --_c: var(--ibo-violet); --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 2.6 6.4L21 9l-5 4.4 1.5 6.6L12 16.6 6.5 20 8 13.4 3 9l6.4-.6L12 2Z'/%3E%3C/svg%3E"); }
.ibo-on-dark .ibo-format, .ibo-format--light { --_c: #fff; }

.ibo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; font-size: .8125rem; color: var(--ibo-text-muted); }
.ibo-meta > * + *::before { content: "·"; margin-right: .9rem; color: #a9b8c1; }
.ibo-meta--plain > * + *::before { content: none; }
.ibo-product-label { font-size: .75rem; font-weight: 600; color: var(--ibo-text-muted); }

/* ---------- Unternavigation (Hub-Themen / Product Knowledge Navigation) ---------- */
.ibo-subnav {
  position: sticky;
  top: var(--ibo-sticky-top);
  z-index: 900;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--ibo-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
@supports (backdrop-filter: blur(6px)) { .ibo-subnav { background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(8px); } }
.ibo-subnav__inner { display: flex; align-items: center; gap: 1rem; min-height: 52px; }
.ibo-subnav__label { flex: none; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ibo-text-muted); }
@media (max-width: 767.98px) { .ibo-subnav__label { display: none; } }
.ibo-subnav__list {
  display: flex;
  gap: .25rem;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.ibo-subnav__list::-webkit-scrollbar { display: none; }
.ibo-subnav__list li { flex: none; scroll-snap-align: start; }
.ibo-subnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: 0 .8rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ibo-petrol) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color var(--ibo-dur-1) var(--ibo-ease);
}
.ibo-subnav__link::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: 0;
  height: 3px;
  background: var(--ibo-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ibo-dur-3) var(--ibo-ease-out);
}
.ibo-subnav__link:hover { color: var(--ibo-red) !important; }
.ibo-subnav__link:hover::after { transform: scaleX(.35); }
.ibo-subnav__link[aria-current="true"] { color: var(--ibo-red) !important; }
.ibo-subnav__link[aria-current="true"]::after { transform: none; }
.ibo-subnav__count { font-size: .75rem; font-weight: 500; color: var(--ibo-text-muted); }
.ibo-subnav__link:focus-visible { outline-offset: -3px; }

/* ---------- Hub-Einstieg ---------- */
.ibo-hubintro { display: grid; gap: 2.5rem; padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(2rem, 1.5rem + 2vw, 3.25rem); }
@media (min-width: 992px) { .ibo-hubintro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: start; } }
.ibo-hubintro h1 { margin: .25rem 0 1rem; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.08; letter-spacing: -.01em; }
.ibo-hubintro h1 span { display: block; color: var(--ibo-violet); }
.ibo-hubintro__lead { max-width: 40rem; margin-bottom: 1.75rem; font: var(--ibo-weight-light) 1.125rem/1.55 var(--ibo-font-light); color: var(--ibo-text-muted); }

.ibo-hubsearch { position: relative; display: flex; max-width: 40rem; background: #fff; border: 2px solid var(--ibo-petrol); transition: border-color var(--ibo-dur-1), box-shadow var(--ibo-dur-2); }
.ibo-hubsearch:focus-within { border-color: var(--ibo-red); box-shadow: 0 0 0 4px var(--ibo-red-soft); }
.ibo-hubsearch__icon { position: absolute; left: 1rem; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--ibo-text-muted); pointer-events: none; }
.ibo-hubsearch input {
  flex: 1;
  min-width: 0;
  min-height: 3.25rem;
  padding: .5rem 1rem .5rem 2.9rem;
  font: 400 1.0625rem/1.3 var(--ibo-font-sans);
  color: var(--ibo-petrol);
  background: transparent;
  border: 0;
  outline: none;
}
.ibo-hubsearch input::placeholder { color: #7f939d; }
.ibo-hubsearch button { flex: none; padding: 0 1.25rem; font-weight: 600; font-size: .9375rem; color: #fff; background: var(--ibo-red); border: 0; cursor: pointer; transition: background-color var(--ibo-dur-1); }
.ibo-hubsearch button:hover { background: var(--ibo-red-hover); }
.ibo-hubsearch button:focus-visible { outline-offset: -5px; outline-color: #fff; }
@media (max-width: 419.98px) { .ibo-hubsearch button { padding: 0 .85rem; } .ibo-hubsearch input { font-size: 1rem; } }

.ibo-topics { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1rem 0 0 !important; padding: 0 !important; list-style: none; }
.ibo-topics__label { margin-right: .25rem; font-size: .8125rem; color: var(--ibo-text-muted); }
.ibo-topic {
  padding: .3rem .7rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ibo-petrol);
  background: var(--ibo-light);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--ibo-dur-1), border-color var(--ibo-dur-1), color var(--ibo-dur-1);
}
.ibo-topic:hover { color: var(--ibo-red); background: #fff; border-color: var(--ibo-red); }

/* „Was Sie hier finden“ – Formate mit live gezählten Mengen */
.ibo-formats { display: grid; gap: 1px; margin: 0 !important; padding: 0 !important; list-style: none; background: var(--ibo-line); border: 1px solid var(--ibo-line); }
@media (min-width: 576px) { .ibo-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ibo-formats a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .1rem .85rem;
  height: 100%;
  padding: 1.1rem 1.15rem;
  color: var(--ibo-petrol) !important;
  text-decoration: none !important;
  background: #fff;
  transition: background-color var(--ibo-dur-2) var(--ibo-ease);
}
.ibo-formats a:hover { background: var(--ibo-light-2); }
.ibo-formats__num { grid-row: span 2; font: var(--ibo-weight-light) 2.25rem/1 var(--ibo-font-light); color: var(--ibo-red); font-variant-numeric: tabular-nums; min-width: 2ch; }
.ibo-formats__label { font-weight: 600; font-size: .9375rem; }
.ibo-formats__text { font-size: .8125rem; line-height: 1.4; color: var(--ibo-text-muted); }
.ibo-formats__caption { margin: .6rem 0 0; font-size: .75rem; color: var(--ibo-text-muted); }

/* ---------- Produkt-Schnelleinstieg ---------- */
.ibo-prodnav { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0 !important; padding: 0 !important; list-style: none; }
.ibo-prodnav__card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--ibo-line); border-top: 4px solid var(--_accent, var(--ibo-red)); transition: box-shadow var(--ibo-dur-2) var(--ibo-ease), transform var(--ibo-dur-2) var(--ibo-ease); }
.ibo-prodnav__card:hover { box-shadow: var(--ibo-shadow-2); transform: translateY(var(--ibo-card-hover-y)); }
.ibo-prodnav__card--am { --_accent: var(--ibo-red); }
.ibo-prodnav__card--qsr { --_accent: var(--ibo-petrol); }
.ibo-prodnav__card--np { --_accent: var(--ibo-orange); }
.ibo-prodnav__card--pm { --_accent: var(--ibo-violet); }
.ibo-prodnav__img { aspect-ratio: 16 / 8; overflow: hidden; background: var(--ibo-light); }
.ibo-prodnav__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ibo-ease-out); }
.ibo-prodnav__card:hover .ibo-prodnav__img img { transform: scale(1.04); }
.ibo-prodnav__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.15rem 1.15rem; }
.ibo-prodnav__kicker { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ibo-text-muted); }
.ibo-prodnav__title { margin: .15rem 0 .4rem !important; font: var(--ibo-weight-light) 1.5rem/1.2 var(--ibo-font-light) !important; }
.ibo-prodnav__title a { color: var(--ibo-red); }
.ibo-prodnav__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.ibo-prodnav__text { font-size: .9375rem; margin-bottom: .9rem; }
.ibo-prodnav__links { position: relative; z-index: 1; display: grid; gap: 0; margin: auto 0 0 !important; padding: 0 !important; list-style: none; border-top: 1px solid var(--ibo-light); }
.ibo-prodnav__links a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 0; font-size: .875rem; font-weight: 600; color: var(--ibo-petrol); border-bottom: 1px solid var(--ibo-light); text-decoration: none !important; }
.ibo-prodnav__links a:hover { color: var(--ibo-red); }
.ibo-prodnav__links a::after { content: ""; width: .45em; height: .45em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--ibo-dur-2) var(--ibo-ease); }
.ibo-prodnav__links a:hover::after { transform: translateX(3px) rotate(45deg); }
.ibo-prodnav__links small { margin-left: auto; font-weight: 500; color: var(--ibo-text-muted); }

/* ---------- Problemfinder ---------- */
.ibo-finder { display: grid; gap: 1.25rem; }
@media (min-width: 992px) { .ibo-finder { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0; align-items: stretch; } }
.ibo-finder__tabs { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .ibo-finder__tabs { grid-template-columns: none; align-content: start; gap: 0; } }
.ibo-finder__tab {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .1rem .85rem;
  align-items: start;
  width: 100%;
  padding: .9rem 1rem;
  text-align: left;
  color: var(--ibo-petrol);
  background: #fff;
  border: 1px solid var(--ibo-line);
  cursor: pointer;
  transition: background-color var(--ibo-dur-2) var(--ibo-ease), color var(--ibo-dur-2) var(--ibo-ease), border-color var(--ibo-dur-2);
}
@media (min-width: 992px) {
  .ibo-finder__tab { padding: 1.2rem 1.5rem 1.2rem 1.25rem; border-width: 0 0 1px; border-left: 4px solid transparent; background: transparent; }
  .ibo-finder__tab:first-child { border-top: 1px solid var(--ibo-line); }
}
.ibo-finder__tab:hover { background: var(--ibo-light-2); }
.ibo-finder__num { grid-row: span 2; font: var(--ibo-weight-light) 1.6rem/1 var(--ibo-font-light); color: var(--ibo-red); font-variant-numeric: tabular-nums; }
.ibo-finder__title { font: var(--ibo-weight-regular) 1.0625rem/1.25 var(--ibo-font-sans); }
.ibo-finder__sub { font-size: .8125rem; color: var(--ibo-text-muted); }
@media (max-width: 575.98px) { .ibo-finder__sub { display: none; } .ibo-finder__title { font-size: .9375rem; } .ibo-finder__num { font-size: 1.25rem; } }
.ibo-finder__tab[aria-selected="true"] { color: #fff; background: var(--ibo-petrol); border-color: var(--ibo-petrol); }
.ibo-finder__tab[aria-selected="true"] .ibo-finder__num { color: #fff; opacity: .7; }
.ibo-finder__tab[aria-selected="true"] .ibo-finder__sub { color: rgba(255, 255, 255, .8); }
@media (min-width: 992px) {
  .ibo-finder__tab[aria-selected="true"] { border-left-color: var(--ibo-red); }
  .ibo-finder__tab[aria-selected="true"]::after { content: ""; position: absolute; right: -12px; top: 50%; z-index: 1; border: 12px solid transparent; border-left-color: var(--ibo-petrol); border-right: 0; transform: translateY(-50%); }
}
.ibo-finder__tab:focus-visible { outline-offset: -3px; }
.ibo-finder__panel { display: grid; gap: 1.5rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); background: var(--ibo-light); }
.ibo-finder__panel[hidden] { display: none; }
@media (min-width: 768px) { .ibo-finder__panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
@media (min-width: 992px) { .ibo-finder__panel { padding-left: clamp(1.75rem, 1rem + 2vw, 3rem); } }
.ibo-js .ibo-finder__panel:not([hidden]) { animation: ibo-fade-in var(--ibo-dur-3) var(--ibo-ease) both; }
.ibo-finder__panel h3 { margin-bottom: .5rem; font-size: var(--ibo-fs-h4); }
.ibo-finder__panel > div > p { color: var(--ibo-text-muted); }
.ibo-finder__media { margin: 0; }
.ibo-finder__media img { width: 100%; background: #fff; border: 1px solid var(--ibo-line); }
.ibo-finder__media figcaption { margin-top: .4rem; font-size: .75rem; color: var(--ibo-text-muted); }
.ibo-usecases { display: grid; gap: .5rem; margin: 1.1rem 0 1.25rem !important; padding: 0 !important; list-style: none; }
.ibo-usecases a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .2rem 1rem;
  align-items: center;
  padding: .75rem .9rem;
  color: var(--ibo-petrol) !important;
  text-decoration: none !important;
  background: #fff;
  border: 1px solid var(--ibo-line);
  border-left: 3px solid var(--ibo-line);
  transition: border-color var(--ibo-dur-2) var(--ibo-ease), box-shadow var(--ibo-dur-2) var(--ibo-ease), transform var(--ibo-dur-2) var(--ibo-ease);
}
.ibo-usecases a:hover { border-left-color: var(--ibo-red); box-shadow: var(--ibo-shadow-1); transform: translateX(2px); }
.ibo-usecases strong { font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.ibo-usecases .ibo-format { grid-row: 1; grid-column: 2; }
.ibo-usecases span:not(.ibo-format) { grid-column: 1 / -1; font-size: .8125rem; color: var(--ibo-text-muted); }
@media (max-width: 419.98px) { .ibo-usecases a { grid-template-columns: 1fr; } .ibo-usecases .ibo-format { grid-row: auto; grid-column: 1; } }
.ibo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; }

/* ---------- Featured Story – gemeinsamer Kopf + vier Kompositionen ---------- */
.ibo-fstory { scroll-margin-top: var(--ibo-anchor-offset); }
.ibo-fstory__head { display: grid; gap: .25rem 2rem; margin-bottom: 1.5rem; }
@media (min-width: 992px) { .ibo-fstory__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.ibo-fstory__head h2 { margin: 0; }
.ibo-fstory__sub { margin: .1rem 0 0 !important; font: var(--ibo-weight-light) 1.375rem/1.3 var(--ibo-font-light) !important; color: var(--ibo-petrol) !important; }
.ibo-fstory__label { display: block; margin-bottom: .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ibo-text-muted); }
.ibo-fstory__quote { margin: 0; padding: .9rem 1.1rem; font-size: .9375rem; background: #fff; border-left: 4px solid var(--ibo-red); }
.ibo-fstory__quote .ibo-badge { margin-bottom: .45rem; }
.ibo-fstory__quote p { margin: 0; }
.ibo-fstory__dyk { display: grid; gap: .75rem 1.5rem; align-items: center; padding: 1.25rem 1.5rem; color: #fff; background: var(--ibo-violet); }
@media (min-width: 768px) { .ibo-fstory__dyk { grid-template-columns: minmax(0, 1fr) auto; } }
.ibo-fstory__dyk p { margin: 0; font: var(--ibo-weight-light) 1.25rem/1.35 var(--ibo-font-light); }
.ibo-fstory__dyk small { display: block; margin-bottom: .2rem; font: 700 .6875rem/1.3 var(--ibo-font-sans); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.ibo-fstory__dyk .ibo-actions { gap: .5rem; }
.ibo-fstory__dyk a:not(.ibo-btn) { color: #fff; font-weight: 700; }
.ibo-btn--white { --_bg: #fff; --_bg-hover: var(--ibo-light); --_fg: var(--ibo-violet); }

.ibo-ministeps { display: grid; gap: .5rem; margin: 1.25rem 0 !important; padding: 0 !important; list-style: none; counter-reset: ibo-ms; }
.ibo-ministeps li { position: relative; padding-left: 2.4rem; font-size: .9375rem; counter-increment: ibo-ms; }
.ibo-ministeps li::before { content: counter(ibo-ms); position: absolute; left: 0; top: -.05rem; display: grid; place-items: center; width: 1.65rem; height: 1.65rem; font-weight: 700; font-size: .8125rem; color: #fff; background: var(--ibo-petrol); border-radius: 50%; }
.ibo-ministeps strong { display: block; font-weight: 600; }

.ibo-fstory__brief { display: grid; gap: 6px; margin-bottom: 6px; }
@media (min-width: 992px) { .ibo-fstory__brief { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.ibo-fstory__brief > div { padding: 1.25rem 1.4rem; background: var(--ibo-light-2); }
.ibo-fstory__brief > div p { margin: 0; font-size: .9375rem; }
.ibo-fstory__brief .ibo-fstory__quote { height: 100%; padding: 1.25rem 1.4rem; background: var(--ibo-light-2); }
.ibo-fstory__dyk--stack { grid-template-columns: minmax(0, 1fr) !important; align-content: center; padding: 1.75rem; }

/* Abgrenzung der Inhaltsarten im Wissenscenter */
.ibo-typelegend { display: grid; gap: 1px; margin: 0 0 1.5rem; background: var(--ibo-line); border: 1px solid var(--ibo-line); }
@media (min-width: 768px) { .ibo-typelegend { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ibo-typelegend > div { padding: .85rem 1rem; font-size: .8125rem; line-height: 1.45; background: #fff; }
.ibo-typelegend dt { margin-bottom: .25rem; }
.ibo-typelegend dd { margin: 0; color: var(--ibo-text-muted); }

/* „Wussten Sie schon“-Band mit Einleitung */
.ibo-dykband__inner { display: grid; gap: .5rem 2.5rem; align-items: center; }
@media (min-width: 992px) { .ibo-dykband__inner { grid-template-columns: auto minmax(0, 1fr); } }
.ibo-dykband__inner p { margin: 0; max-width: 46rem; color: var(--ibo-text-muted); }

/* (a) Bild-Text-Strecke */
.ibo-fstory--spread .ibo-fstory__grid { display: grid; gap: 6px; }
@media (min-width: 992px) { .ibo-fstory--spread .ibo-fstory__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ibo-fstory__stage { position: relative; display: grid; place-items: center; min-height: 280px; padding: clamp(1rem, .5rem + 2vw, 2.5rem); overflow: hidden; background: var(--ibo-light); }
.ibo-fstory__stage img { width: 100%; max-width: 640px; transition: transform 1200ms var(--ibo-ease-out); }
.ibo-fstory--spread:hover .ibo-fstory__stage img { transform: scale(1.02); }
.ibo-fstory__stage figcaption { position: absolute; left: 1rem; bottom: .75rem; font-size: .75rem; color: var(--ibo-text-muted); }
.ibo-fstory__text { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); background: var(--ibo-light-2); }
.ibo-fstory__text > p { font-size: .9375rem; }
.ibo-fstory--spread .ibo-fstory__dyk { margin-top: 6px; }

/* (b) Mini-Tour */
.ibo-fstory--tour .ibo-fstory__frame { padding: clamp(1rem, .75rem + 1.25vw, 2rem); background: var(--ibo-light); }
.ibo-fstory--tour .ibo-fstory__dyk { margin-top: 6px; }

/* (c) Feature-Schwerpunkt Tastatur (Petrol) */
.ibo-fstory--keys .ibo-fstory__panel { display: grid; gap: 2rem; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); color: #fff; background: var(--ibo-petrol); }
@media (min-width: 992px) { .ibo-fstory--keys .ibo-fstory__panel { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; } }
.ibo-fstory--keys .ibo-fstory__panel h3 { color: #fff; font-size: var(--ibo-fs-h4); }
.ibo-fstory--keys .ibo-fstory__panel p { color: rgba(255, 255, 255, .88); }
.ibo-fstory--keys .ibo-fstory__label { color: rgba(255, 255, 255, .7); }
.ibo-compare { display: grid; gap: 1px; margin: 1.5rem 0; background: rgba(255, 255, 255, .18); }
@media (min-width: 576px) { .ibo-compare { grid-template-columns: 1fr 1fr; } }
.ibo-compare > div { padding: 1rem 1.1rem; background: var(--ibo-petrol-hover); }
.ibo-compare h4 { margin: 0 0 .5rem !important; font: 700 .75rem/1.3 var(--ibo-font-sans) !important; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .75) !important; }
.ibo-compare ol { margin: 0 !important; padding-left: 1.1rem !important; font-size: .9rem; color: rgba(255, 255, 255, .92); }
.ibo-compare li + li { margin-top: .25rem; }
.ibo-compare > div:last-child { background: #fff; color: var(--ibo-petrol); }
.ibo-compare > div:last-child h4 { color: var(--ibo-red) !important; }
.ibo-compare > div:last-child ol { color: var(--ibo-petrol); }
.ibo-fstory--keys .ibo-fstory__foot { display: grid; gap: 6px; margin-top: 6px; }
@media (min-width: 992px) { .ibo-fstory--keys .ibo-fstory__foot { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* Tastenkürzel-Visual und -Referenz */
.ibo-keycaps { display: grid; gap: .9rem; margin: 0 !important; padding: 0 !important; list-style: none; }
.ibo-keycaps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.ibo-keycaps__keys { display: flex; align-items: center; gap: .4rem; }
.ibo-keycaps__keys i { font-style: normal; opacity: .6; }
.ibo-keycaps kbd {
  display: inline-grid;
  place-items: center;
  min-width: 3rem;
  height: 3rem;
  padding: 0 .7rem;
  font: 600 1.05rem/1 var(--ibo-font-sans);
  color: var(--ibo-petrol);
  background: #fff;
  border: 1px solid #b9c6ce;
  border-bottom-width: 4px;
  border-radius: 5px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
  transition: transform var(--ibo-dur-1) var(--ibo-ease), border-bottom-width var(--ibo-dur-1);
}
.ibo-keycaps li:hover kbd, .ibo-keycaps li.is-pressed kbd { transform: translateY(2px); border-bottom-width: 2px; }
.ibo-keycaps__what strong { display: block; font-weight: 600; }
.ibo-keycaps__what span { font-size: .875rem; opacity: .8; }
.ibo-keycaps--sm kbd { min-width: 2.3rem; height: 2.3rem; font-size: .9rem; border-bottom-width: 3px; box-shadow: none; }
.ibo-on-dark .ibo-keycaps__what { color: #fff; }

/* (d) Prozess-Journey */
.ibo-journey { display: grid; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: ibo-j; }
@media (min-width: 768px) { .ibo-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ibo-journey { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ibo-journey li { position: relative; display: flex; flex-direction: column; padding: 1.25rem 1.15rem 1.15rem; background: var(--ibo-light); counter-increment: ibo-j; }
.ibo-journey li::before { content: "0" counter(ibo-j); display: block; margin-bottom: .6rem; font: var(--ibo-weight-light) 2rem/1 var(--ibo-font-light); color: var(--ibo-violet); }
@media (min-width: 1200px) {
  .ibo-journey li:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 1.6rem; z-index: 1; width: 12px; height: 12px; background: var(--ibo-violet); transform: rotate(45deg); box-shadow: 0 0 0 3px #fff; }
}
.ibo-journey h3 { margin-bottom: .4rem; font-size: 1.15rem !important; color: var(--ibo-petrol) !important; font-family: var(--ibo-font-sans) !important; font-weight: 600 !important; }
.ibo-journey p { font-size: .875rem; }
.ibo-journey a { margin-top: auto; font-size: .8125rem; }
.ibo-journey li.is-highlight { color: #fff; background: var(--ibo-violet); }
.ibo-journey li.is-highlight::before, .ibo-journey li.is-highlight h3, .ibo-journey li.is-highlight a { color: #fff !important; }
.ibo-fstory--journey .ibo-fstory__foot { display: grid; gap: 6px; margin-top: 6px; }
@media (min-width: 992px) { .ibo-fstory--journey .ibo-fstory__foot { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ibo-fstory__shot { margin: 0; padding: 1rem; background: var(--ibo-light-2); }
.ibo-fstory__shot img { width: 100%; border: 1px solid var(--ibo-line); }
.ibo-fstory__shot figcaption { margin-top: .5rem; font-size: .75rem; color: var(--ibo-text-muted); }
.ibo-fstory__cta { display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: var(--ibo-light-2); }
.ibo-fstory__cta h3 { margin: 0; font-size: 1.25rem; }
.ibo-fstory__cta p { font-size: .9375rem; }
.ibo-fstory__links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: 1rem; font-size: .875rem; }
.ibo-fstory__links > span { color: var(--ibo-text-muted); }

/* ---------- Interaktiver Screenshot-Guide (Storylane-Prinzip) ---------- */
.ibo-tour { display: grid; gap: 1.25rem; }
@media (min-width: 992px) { .ibo-tour { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; gap: 1.5rem; } }
.ibo-tour__stage { position: relative; margin: 0; background: #fff; border: 1px solid var(--ibo-line); box-shadow: var(--ibo-shadow-1); }
.ibo-tour__canvas { position: relative; }
.ibo-tour__img { width: 100%; transition: opacity var(--ibo-dur-2) var(--ibo-ease); }
.ibo-tour__img.is-swapping { opacity: .25; }
.ibo-tour__stage figcaption { padding: .5rem .8rem; font-size: .75rem; color: var(--ibo-text-muted); border-top: 1px solid var(--ibo-line); }
.ibo-tour__spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  padding: 0;
  font: 700 .8125rem/1 var(--ibo-font-sans);
  color: #fff;
  background: var(--ibo-petrol);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  cursor: pointer;
  opacity: .82;
  transition: transform var(--ibo-dur-2) var(--ibo-ease), background-color var(--ibo-dur-2), opacity var(--ibo-dur-2);
}
.ibo-tour__spot:hover { opacity: 1; transform: scale(1.1); }
.ibo-tour__spot[hidden] { display: none; }
.ibo-tour__spot.is-active { z-index: 2; background: var(--ibo-red); opacity: 1; transform: scale(1.15); }
.ibo-tour__spot.is-active::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid var(--ibo-red);
  border-radius: 50%;
  animation: ibo-tour-pulse 1.8s var(--ibo-ease) infinite;
}
@keyframes ibo-tour-pulse { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.5); } }
.ibo-tour__ring { position: absolute; left: var(--x); top: var(--y); width: var(--w, 0); height: var(--h, 0); border: 2px solid var(--ibo-red); box-shadow: 0 0 0 9999px rgba(33, 33, 33, .18); pointer-events: none; transition: all var(--ibo-dur-3) var(--ibo-ease); }
.ibo-tour__ring[hidden] { display: none; }
.ibo-tour__panel { display: flex; flex-direction: column; gap: 1rem; }
.ibo-tour__progress { display: flex; align-items: center; gap: .75rem; font-size: .8125rem; color: var(--ibo-text-muted); }
.ibo-tour__bar { flex: 1; height: 4px; background: var(--ibo-line); }
.ibo-tour__bar i { display: block; height: 100%; width: 0; background: var(--ibo-red); transition: width var(--ibo-dur-3) var(--ibo-ease); }
.ibo-tour__steps { display: grid; gap: .4rem; margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: ibo-ts; }
.ibo-tour__step { counter-increment: ibo-ts; background: #fff; border: 1px solid var(--ibo-line); transition: border-color var(--ibo-dur-2), box-shadow var(--ibo-dur-2); }
.ibo-tour__step h4 { margin: 0 !important; font: 600 .9375rem/1.35 var(--ibo-font-sans) !important; color: var(--ibo-petrol) !important; }
.ibo-tour__step > div { padding: 0 1rem 1rem 3.1rem; font-size: .875rem; }
.ibo-tour__step > div p { margin-bottom: .5rem; }
.ibo-tour__steptitle { position: relative; display: block; width: 100%; padding: .75rem 1rem .75rem 3.1rem; text-align: left; background: transparent; border: 0; cursor: pointer; }
.ibo-tour__steptitle::before, .ibo-tour__step > h4:first-child::before { content: counter(ibo-ts); position: absolute; left: 1rem; top: .7rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; font: 700 .75rem/1 var(--ibo-font-sans); color: var(--ibo-petrol); background: var(--ibo-light); border-radius: 50%; }
.ibo-tour__step > h4:first-child { position: relative; padding: .75rem 1rem .5rem 3.1rem; }
.ibo-tour__step.is-active { border-color: var(--ibo-petrol); box-shadow: inset 3px 0 0 var(--ibo-red), var(--ibo-shadow-1); }
.ibo-tour__step.is-active .ibo-tour__steptitle::before { color: #fff; background: var(--ibo-red); }
.ibo-tour__step.is-done .ibo-tour__steptitle::before { content: "✓"; color: #fff; background: var(--ibo-status-ok); }
.ibo-tour.is-ready .ibo-tour__step > h4:first-child { padding: 0; }
.ibo-tour.is-ready .ibo-tour__step > h4:first-child::before { content: none; }
.ibo-js .ibo-tour.is-ready .ibo-tour__step:not(.is-active) > div { display: none; }
.ibo-tour__step > div .ibo-arrowlink { font-size: .8125rem; }
.ibo-tour__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.ibo-tour__note { font-size: .75rem; color: var(--ibo-text-muted); }
.ibo-tour__thumbs { display: none; }
.ibo-js .ibo-tour__thumbs { display: flex; gap: .4rem; }

/* ---------- Schritt-für-Schritt-Anleitung ---------- */
.ibo-howto { display: grid; gap: 1.5rem; scroll-margin-top: var(--ibo-anchor-offset); }
@media (min-width: 992px) { .ibo-howto { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2.5rem; align-items: start; } }
.ibo-howto__intro { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 992px) { .ibo-howto__intro { position: sticky; top: calc(var(--ibo-anchor-offset) + .5rem); } }
.ibo-howto__intro h3 { margin: 0; font-size: var(--ibo-fs-h4); }
.ibo-howto__facts { display: grid; gap: 0; margin: 0; font-size: .875rem; border-top: 1px solid var(--ibo-line); }
.ibo-howto__facts div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--ibo-line); }
.ibo-howto__facts dt { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ibo-text-muted); }
.ibo-howto__facts dd { margin: 0; }
.ibo-howto__facts ul { margin: 0 !important; padding-left: 1rem !important; }
.ibo-howto__steps { display: grid; gap: 0; margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: ibo-hs; }
.ibo-howto__step { position: relative; display: grid; gap: .4rem; padding: 0 0 1.75rem 3.5rem; counter-increment: ibo-hs; }
.ibo-howto__step::before { content: counter(ibo-hs); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; font: var(--ibo-weight-light) 1.25rem/1 var(--ibo-font-light); color: #fff; background: var(--ibo-red); border-radius: 50%; }
.ibo-howto__step:not(:last-child)::after { content: ""; position: absolute; left: calc(1.125rem - 1px); top: 2.6rem; bottom: .35rem; width: 2px; background: var(--ibo-line); }
.ibo-howto__step h4 { margin: .35rem 0 .1rem !important; font: 600 1.0625rem/1.35 var(--ibo-font-sans) !important; color: var(--ibo-petrol) !important; }
.ibo-howto__step p { margin: 0; font-size: .9375rem; }
.ibo-howto__step ul, .ibo-howto__step ol { margin: .25rem 0 0 !important; font-size: .9375rem; }
.ibo-howto__step figure { margin: .6rem 0 0; }
.ibo-howto__step figure img { width: auto; max-width: 100%; border: 1px solid var(--ibo-line); box-shadow: var(--ibo-shadow-1); }
.ibo-howto__step figcaption { margin-top: .35rem; font-size: .75rem; color: var(--ibo-text-muted); }
.ibo-howto__path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem .35rem; font-size: .8125rem; font-weight: 600; }
.ibo-howto__path span { padding: .05rem .4rem; background: var(--ibo-light); border: 1px solid var(--ibo-line); }
.ibo-howto__path i { font-style: normal; color: var(--ibo-text-muted); }
.ibo-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; margin-top: .6rem; padding: .7rem .9rem; font-size: .875rem; background: var(--ibo-light-2); border-left: 3px solid var(--ibo-petrol); }
.ibo-callout::before { content: "i"; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; font: 700 .8125rem/1 var(--ibo-font-sans); color: #fff; background: var(--ibo-petrol); border-radius: 50%; }
.ibo-callout--warn { background: #fff8e5; border-left-color: var(--ibo-status-warn); }
.ibo-callout--warn::before { content: "!"; color: var(--ibo-petrol); background: var(--ibo-status-warn); }
.ibo-callout--tip { background: var(--ibo-red-soft); border-left-color: var(--ibo-red); }
.ibo-callout--tip::before { content: "★"; font-size: .7rem; background: var(--ibo-red); }
.ibo-callout p { margin: 0; }
.ibo-result { display: grid; gap: .3rem; padding: 1rem 1.15rem; background: #ebf6e7; border: 1px solid #b8dcaa; }
.ibo-result strong { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: #2f6e1d; }
.ibo-result p { margin: 0; font-size: .9375rem; }
.ibo-howto__source { font-size: .8125rem; color: var(--ibo-text-muted); }
.ibo-trylink { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; padding: .2rem .55rem; font-size: .8125rem; font-weight: 600; color: var(--ibo-petrol); background: #fff; border: 1px dashed #9fb0ba; cursor: pointer; transition: border-color var(--ibo-dur-1), color var(--ibo-dur-1); justify-self: start; }
.ibo-trylink::before { content: ""; width: .9em; height: .9em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l13 7-5.6 1.6L16 18.5l-2.2 1.2-3.6-6.9L6 17V3Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l13 7-5.6 1.6L16 18.5l-2.2 1.2-3.6-6.9L6 17V3Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ibo-trylink:hover { color: var(--ibo-red); border-color: var(--ibo-red); text-decoration: none !important; }
.ibo-is-pointed { animation: ibo-point 1.8s var(--ibo-ease); }
@keyframes ibo-point { 0%, 35% { box-shadow: 0 0 0 4px var(--ibo-status-warn); } 100% { box-shadow: 0 0 0 0 rgba(245, 180, 0, 0); } }

/* Kleine Anleitungen nebeneinander */
.ibo-miniguides { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.ibo-miniguide { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ibo-line); scroll-margin-top: var(--ibo-anchor-offset); }
.ibo-miniguide__img { display: grid; place-items: center; min-height: 170px; padding: 1rem; background: var(--ibo-light); }
.ibo-miniguide__img img { max-height: 190px; width: auto; border: 1px solid var(--ibo-line); }
.ibo-miniguide__body { display: flex; flex-direction: column; flex: 1; gap: .5rem; padding: 1.1rem 1.2rem 1.25rem; }
.ibo-miniguide__body h4 { margin: .2rem 0 0 !important; font: 600 1.0625rem/1.35 var(--ibo-font-sans) !important; color: var(--ibo-petrol) !important; }
.ibo-miniguide__body ol { margin: .25rem 0 0 !important; padding-left: 1.2rem !important; font-size: .9rem; }
.ibo-miniguide__body li + li { margin-top: .2rem; }
.ibo-miniguide__body > :last-child { margin-top: auto; padding-top: .5rem; }

/* ---------- Lernpfad ---------- */
.ibo-paths { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ibo-path { display: flex; flex-direction: column; padding: 1.35rem 1.35rem 1.25rem; background: #fff; border: 1px solid var(--ibo-line); }
.ibo-path__head { margin-bottom: 1rem; }
.ibo-path__head h3 { margin: .2rem 0 .3rem; font-size: 1.375rem; }
.ibo-path__head p { margin: 0; font-size: .875rem; color: var(--ibo-text-muted); }
.ibo-path__steps { position: relative; display: grid; gap: .25rem; margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: ibo-p; }
.ibo-path__steps::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: repeating-linear-gradient(var(--ibo-line) 0 4px, transparent 4px 8px); }
.ibo-path__steps li { position: relative; counter-increment: ibo-p; }
.ibo-path__steps a {
  position: relative;
  display: grid;
  gap: .1rem;
  padding: .55rem .6rem .6rem 2.6rem;
  color: var(--ibo-petrol) !important;
  text-decoration: none !important;
  transition: background-color var(--ibo-dur-1);
}
.ibo-path__steps a::before { content: counter(ibo-p); position: absolute; left: 0; top: .55rem; display: grid; place-items: center; width: 28px; height: 28px; font: 700 .8125rem/1 var(--ibo-font-sans); color: var(--ibo-petrol); background: #fff; border: 2px solid var(--ibo-petrol); border-radius: 50%; transition: background-color var(--ibo-dur-2), color var(--ibo-dur-2), border-color var(--ibo-dur-2); }
.ibo-path__steps a:hover { background: var(--ibo-light-2); }
.ibo-path__steps a:hover::before { color: #fff; background: var(--ibo-red); border-color: var(--ibo-red); }
.ibo-path__steps strong { font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.ibo-path__steps .ibo-meta { font-size: .75rem; }
.ibo-path__foot { margin-top: auto; padding-top: 1rem; }
.ibo-path--wide { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); background: var(--ibo-light); border: 0; }
@media (min-width: 992px) {
  .ibo-path--wide { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2.5rem; align-items: center; }
  .ibo-path--wide .ibo-path__head { margin: 0; }
  .ibo-path--wide .ibo-path__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ibo-path--wide .ibo-path__steps::before { left: 0; right: 0; top: 27px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, #b9c6ce 0 4px, transparent 4px 8px); }
  .ibo-path--wide .ibo-path__steps a { height: 100%; padding: 3.35rem 1rem 1rem; background: #fff; }
  .ibo-path--wide .ibo-path__steps a::before { left: 1rem; top: 1rem; }
  .ibo-path--wide .ibo-path__steps a:hover { background: #fff; box-shadow: var(--ibo-shadow-2); }
}

/* ---------- Redaktionelle Feature-Karten („Schon entdeckt?“) ---------- */
.ibo-bento { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin: 0 !important; padding: 0 !important; list-style: none; }
@media (min-width: 768px) { .ibo-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ibo-bento > li { grid-column: span 3; } }
@media (min-width: 1200px) {
  .ibo-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; }
  .ibo-bento > li { grid-column: span 4; }
  .ibo-bento > .is-lg { grid-column: span 7; grid-row: span 2; }
  .ibo-bento > .is-md { grid-column: span 5; }
}
@media (min-width: 768px) and (max-width: 1199.98px) { .ibo-bento > .is-lg { grid-column: span 6; } }
.ibo-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: var(--ibo-petrol);
  background: #fff;
  border: 1px solid var(--ibo-line);
  transition: box-shadow var(--ibo-dur-2) var(--ibo-ease), transform var(--ibo-dur-2) var(--ibo-ease);
}
.ibo-feature:hover { box-shadow: var(--ibo-shadow-2); transform: translateY(var(--ibo-card-hover-y)); }
.ibo-feature__img { position: relative; overflow: hidden; background: var(--ibo-light); }
.ibo-feature__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1000ms var(--ibo-ease-out); }
.ibo-feature:hover .ibo-feature__img img { transform: scale(1.03); }
.ibo-feature__img--contain { display: grid; place-items: center; padding: 1.25rem; }
.ibo-feature__img--contain img { width: auto; max-width: 100%; height: auto; max-height: 220px; object-fit: contain; border: 1px solid var(--ibo-line); box-shadow: var(--ibo-shadow-1); }
.ibo-feature__body { display: flex; flex-direction: column; flex: 1; gap: .45rem; padding: 1.15rem 1.25rem 1.25rem; }
.ibo-feature__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem; }
.ibo-feature h3 { margin: .15rem 0 .1rem; font-size: 1.375rem; line-height: 1.25; }
.ibo-feature h3 a { color: inherit; text-decoration: none !important; }
.ibo-feature h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ibo-feature p { margin: 0; font-size: .9375rem; }
.ibo-feature__more { margin-top: auto; padding-top: .5rem; font-weight: 600; font-size: .875rem; color: var(--ibo-red); }
.ibo-feature__more::after { content: " →"; transition: margin var(--ibo-dur-2); }
.ibo-feature:hover .ibo-feature__more::after { margin-left: .2rem; }
.ibo-feature h3 a:focus-visible { outline: none; }
.ibo-feature:has(h3 a:focus-visible) { outline: 3px solid var(--ibo-focus); outline-offset: 2px; }
.ibo-feature--lg .ibo-feature__img { flex: 1; min-height: 240px; }
.ibo-feature--lg h3 { font-size: var(--ibo-fs-h3); }
.ibo-feature--violet { color: #fff; background: var(--ibo-violet); border-color: var(--ibo-violet); }
.ibo-feature--violet h3, .ibo-feature--violet .ibo-feature__more, .ibo-feature--violet .ibo-product-label { color: #fff; }
.ibo-feature--violet .ibo-format { --_c: #fff; }
.ibo-feature--petrol { color: #fff; background: var(--ibo-petrol); border-color: var(--ibo-petrol); }
.ibo-feature--petrol h3, .ibo-feature--petrol .ibo-feature__more, .ibo-feature--petrol .ibo-product-label { color: #fff; }
.ibo-feature--petrol .ibo-format { --_c: #fff; }
.ibo-feature--light { background: var(--ibo-light); border-color: var(--ibo-light); }
.ibo-feature .ibo-keycaps { margin-top: .5rem !important; }
.ibo-feature--petrol .ibo-keycaps__what span { opacity: .85; }

/* Aufgaben-Sammlung (Produktseite Aufbau-Manager) */
.ibo-tasks { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 0 !important; padding: 0 !important; list-style: none; }
@media (min-width: 992px) { .ibo-tasks { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ibo-tasks > .is-lg { grid-column: span 2; grid-row: span 2; } }
.ibo-task { position: relative; display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: 1.15rem 1.2rem 1.2rem; background: #fff; border: 1px solid var(--ibo-line); transition: border-color var(--ibo-dur-2), box-shadow var(--ibo-dur-2), transform var(--ibo-dur-2); }
.ibo-task:hover { border-color: #b9c6ce; box-shadow: var(--ibo-shadow-2); transform: translateY(var(--ibo-card-hover-y)); }
.ibo-task__verb { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ibo-text-muted); }
.ibo-task h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.ibo-task h3 a { color: var(--ibo-red); text-decoration: none !important; }
.ibo-task h3 a::after { content: ""; position: absolute; inset: 0; }
.ibo-task p { margin: 0; font-size: .9rem; }
.ibo-task__formats { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--ibo-light); }
.ibo-task img { margin: .5rem 0; border: 1px solid var(--ibo-line); }
.ibo-task--lg { padding: 1.5rem; background: var(--ibo-light); border-color: var(--ibo-light); }
.ibo-task--lg h3 { font-size: var(--ibo-fs-h4); }
.ibo-task--lg img { box-shadow: var(--ibo-shadow-1); }

/* Nummerierte Tipps (Produktseite QSR) */
.ibo-numlist { display: grid; gap: 0 3rem; margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: ibo-n; }
@media (min-width: 768px) { .ibo-numlist { grid-template-columns: 1fr 1fr; } }
.ibo-numlist li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .25rem 1rem; padding: 1.35rem 0; border-top: 1px solid var(--ibo-line); counter-increment: ibo-n; }
.ibo-numlist li::before { content: counter(ibo-n, decimal-leading-zero); grid-row: span 3; font: var(--ibo-weight-light) 2.75rem/1 var(--ibo-font-light); color: var(--ibo-red); }
.ibo-numlist h3 { margin: 0; font-size: 1.25rem; color: var(--ibo-petrol); font-family: var(--ibo-font-sans); font-weight: 600; }
.ibo-numlist p { margin: 0; font-size: .9375rem; }
.ibo-numlist .ibo-arrowlink { font-size: .875rem; }

/* Wissenskarten (Produktseite Prometheus) */
.ibo-knowcards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ibo-knowcard { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; background: #fff; border: 1px solid var(--ibo-line); }
.ibo-knowcard h3 { margin: 0; font-size: 1.25rem; }
.ibo-knowcard p { margin: 0; font-size: .9rem; }
.ibo-knowcard > :last-child { margin-top: auto; }
.ibo-legend { display: grid; gap: .35rem; margin: 0 !important; padding: 0 !important; list-style: none; font-size: .875rem; }
.ibo-legend li { display: flex; align-items: center; gap: .55rem; }
.ibo-legend i { flex: none; width: 14px; height: 14px; border-radius: 2px; }
.ibo-legend b { font-weight: 600; }
.ibo-legend span { color: var(--ibo-text-muted); }
.ibo-phases { display: grid; gap: 6px; margin: 0 0 1.5rem !important; padding: 0 !important; list-style: none; counter-reset: ibo-ph; }
@media (min-width: 768px) { .ibo-phases { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ibo-phases li { position: relative; padding: 1rem .9rem 1rem; font-size: .8125rem; color: #fff; background: var(--ibo-violet); counter-increment: ibo-ph; }
.ibo-phases li:nth-child(2) { background: #8f2c8e; } .ibo-phases li:nth-child(3) { background: #9c3a9b; } .ibo-phases li:nth-child(4) { background: #a748a6; } .ibo-phases li:nth-child(5) { background: var(--ibo-red); }
.ibo-phases strong { display: block; margin-bottom: .3rem; font: var(--ibo-weight-regular) 1rem/1.25 var(--ibo-font-sans); }
.ibo-phases a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }

/* ---------- Tutorial- & Video-Karten ---------- */
.ibo-mgrid { display: grid; gap: 1.25rem 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin: 0 !important; padding: 0 !important; list-style: none; }
.ibo-mcard { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--ibo-line); transition: box-shadow var(--ibo-dur-2) var(--ibo-ease), transform var(--ibo-dur-2) var(--ibo-ease); }
.ibo-mcard:hover { box-shadow: var(--ibo-shadow-2); transform: translateY(var(--ibo-card-hover-y)); }
.ibo-mcard__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ibo-light); }
.ibo-mcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ibo-ease-out); }
.ibo-mcard:hover .ibo-mcard__thumb img { transform: scale(1.04); }
.ibo-mcard__thumb--screen { display: grid; place-items: center; padding: .75rem; }
.ibo-mcard__thumb--screen img { width: auto; height: auto; max-height: 100%; object-fit: contain; }
.ibo-mcard__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 54px; height: 38px; background: var(--ibo-red); border-radius: 9px; transform: translate(-50%, -50%); transition: transform var(--ibo-dur-2) var(--ibo-ease); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.ibo-mcard__play::after { content: ""; margin-left: 3px; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.ibo-mcard:hover .ibo-mcard__play { transform: translate(-50%, -50%) scale(1.08); }
.ibo-mcard__pill { position: absolute; right: .5rem; bottom: .5rem; padding: .1rem .45rem; font: 600 .75rem/1.5 var(--ibo-font-sans); color: #fff; background: rgba(33, 33, 33, .82); font-variant-numeric: tabular-nums; }
.ibo-mcard__pill--left { left: .5rem; right: auto; background: var(--ibo-petrol); }
.ibo-mcard__body { display: flex; flex-direction: column; flex: 1; gap: .4rem; padding: 1rem 1.1rem 1.1rem; }
.ibo-mcard__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .75rem; }
.ibo-mcard__title { margin: .1rem 0 0 !important; font: 600 1rem/1.35 var(--ibo-font-sans) !important; color: var(--ibo-petrol) !important; }
.ibo-mcard__title a, .ibo-mcard__title button { padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; text-decoration: none !important; }
.ibo-mcard__title a::after, .ibo-mcard__title button::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ibo-mcard__title a:focus-visible, .ibo-mcard__title button:focus-visible { outline: none; }
.ibo-mcard:has(.ibo-mcard__title :focus-visible) { outline: 3px solid var(--ibo-focus); outline-offset: 2px; }
.ibo-mcard__text { margin: 0; font-size: .875rem; color: var(--ibo-text-muted); }
.ibo-mcard__foot { margin-top: auto; padding-top: .55rem; }
.ibo-mcard__cta { font-size: .8125rem; font-weight: 600; color: var(--ibo-red); }
.ibo-mcard--feature { display: grid; }
@media (min-width: 768px) { .ibo-mcard--feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .ibo-mcard--feature .ibo-mcard__thumb { aspect-ratio: auto; min-height: 100%; } }
.ibo-mcard--feature .ibo-mcard__body { justify-content: center; gap: .6rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); background: var(--ibo-petrol); color: #fff; }
.ibo-mcard--feature .ibo-mcard__title { font: var(--ibo-weight-light) var(--ibo-fs-h4)/1.2 var(--ibo-font-light) !important; color: #fff !important; }
.ibo-mcard--feature .ibo-mcard__text, .ibo-mcard--feature .ibo-meta, .ibo-mcard--feature .ibo-product-label { color: rgba(255, 255, 255, .82); }
.ibo-mcard--feature .ibo-format { --_c: #fff; }
.ibo-mcard--feature .ibo-mcard__cta { color: #fff; }
.ibo-mcard--feature .ibo-meta > * + *::before { color: rgba(255, 255, 255, .5); }
.ibo-mcard--feature .ibo-mcard__play { width: 72px; height: 50px; border-radius: 12px; }

.ibo-media__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.5rem; }
.ibo-seg2 { display: inline-flex; flex-wrap: wrap; gap: 0; margin: 0 !important; padding: 0 !important; list-style: none; border: 1px solid #b9c6ce; }
.ibo-seg2 button { min-height: 2.5rem; padding: .35rem .9rem; font-size: .875rem; font-weight: 600; color: var(--ibo-petrol); background: #fff; border: 0; cursor: pointer; transition: background-color var(--ibo-dur-1), color var(--ibo-dur-1); }
.ibo-seg2 li + li button { border-left: 1px solid #b9c6ce; }
.ibo-seg2 button:hover { background: var(--ibo-light-2); }
.ibo-seg2 button[aria-pressed="true"] { color: #fff; background: var(--ibo-petrol); }
.ibo-seg2 button:focus-visible { outline-offset: -3px; }
.ibo-seg2 small { margin-left: .3rem; font-weight: 400; opacity: .75; }
@media (max-width: 575.98px) { .ibo-seg2 { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .ibo-seg2 li + li button { border-left: 0; } .ibo-seg2 li button { width: 100%; border-top: 1px solid #b9c6ce !important; } .ibo-seg2 li:nth-child(-n+2) button { border-top: 0 !important; } .ibo-seg2 li:nth-child(even) button { border-left: 1px solid #b9c6ce !important; } }
.ibo-media__status { font-size: .875rem; color: var(--ibo-text-muted); }
.ibo-media__more { margin-top: 1.5rem; text-align: center; }
.ibo-media__note { margin-top: 1rem; font-size: .75rem; color: var(--ibo-text-muted); }

/* ---------- Wissenscenter ---------- */
.ibo-kb { scroll-margin-top: var(--ibo-anchor-offset); }
.ibo-kb__bar { display: grid; gap: 1rem; padding: 1.25rem; background: var(--ibo-light); }
.ibo-kb--compact .ibo-kb__bar { padding: 1rem; }
.ibo-kb__search { position: relative; display: flex; align-items: center; background: #fff; border: 1px solid #a9b8c1; transition: border-color var(--ibo-dur-1), box-shadow var(--ibo-dur-2); }
.ibo-kb__search:focus-within { border-color: var(--ibo-petrol); box-shadow: 0 0 0 3px rgba(26, 115, 201, .25); }
.ibo-kb__search svg { position: absolute; left: .85rem; width: 18px; height: 18px; color: var(--ibo-text-muted); pointer-events: none; }
.ibo-kb__search input { flex: 1; min-width: 0; min-height: 2.9rem; padding: .4rem .75rem .4rem 2.5rem; font: 400 1rem/1.3 var(--ibo-font-sans); color: var(--ibo-petrol); background: transparent; border: 0; outline: none; }
.ibo-kb__search input::-webkit-search-cancel-button { display: none; }
.ibo-kb__clear { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-right: .15rem; color: var(--ibo-text-muted); background: transparent; border: 0; cursor: pointer; }
.ibo-kb__clear:hover { color: var(--ibo-red); }
.ibo-kb__clear[hidden] { display: none; }
.ibo-kb__filters { display: grid; gap: .65rem; }
.ibo-kb__group { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.ibo-kb__group legend, .ibo-kb__glabel { float: left; margin-right: .35rem; padding: 0; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ibo-text-muted); min-width: 4.6rem; }
@media (max-width: 575.98px) { .ibo-kb__group legend, .ibo-kb__glabel { float: none; width: 100%; } }
.ibo-kb__group .ibo-chip { padding: .3rem .75rem; font-size: .8125rem; }
.ibo-kb__group .ibo-chip[aria-pressed="true"] { background: var(--ibo-petrol); border-color: var(--ibo-petrol); }
.ibo-kb__group .ibo-chip--featured[aria-pressed="true"] { background: var(--ibo-violet); border-color: var(--ibo-violet); }
.ibo-kb__select { width: auto; min-height: 2.1rem; padding: .25rem 2rem .25rem .7rem; font-size: .8125rem; font-weight: 600; color: var(--ibo-petrol); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23375460' stroke-width='1.6'/%3E%3C/svg%3E") right .7rem center / 10px no-repeat; border: 1px solid #b9c6ce; border-radius: 999px; -webkit-appearance: none; appearance: none; cursor: pointer; max-width: 100%; }
.ibo-kb__select:focus-visible { outline: 3px solid var(--ibo-focus); outline-offset: 2px; }
.ibo-kb__statusbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .85rem 0 .6rem; font-size: .875rem; color: var(--ibo-text-muted); }
.ibo-kb__statusbar strong { color: var(--ibo-petrol); }
.ibo-kb__reset { padding: 0; font-size: .875rem; font-weight: 600; color: var(--ibo-red); background: none; border: 0; cursor: pointer; }
.ibo-kb__reset:hover { text-decoration: underline; }
.ibo-kb__reset[hidden] { display: none; }
.ibo-kb__list { margin: 0 !important; padding: 0 !important; list-style: none; border-top: 2px solid var(--ibo-petrol); }
.ibo-kb__item { border-bottom: 1px solid var(--ibo-line); background: #fff; }
.ibo-kb__item[hidden] { display: none; }
.ibo-kb__heading { margin: 0 !important; font: inherit !important; color: inherit !important; }
.ibo-kb__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .2rem 1rem;
  width: 100%;
  padding: 1rem .9rem 1rem 1rem;
  text-align: left;
  color: var(--ibo-petrol);
  background: #fff;
  border: 0;
  cursor: pointer;
  transition: background-color var(--ibo-dur-1) var(--ibo-ease);
}
.ibo-kb__toggle:hover { background: var(--ibo-light-2); }
.ibo-kb__toggle:focus-visible { outline-offset: -3px; }
.ibo-kb__metaline { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; }
.ibo-kb__title { grid-column: 1; font: 500 1.0625rem/1.35 var(--ibo-font-sans); color: var(--ibo-petrol); }
.ibo-kb__summary { grid-column: 1; font-size: .875rem; color: var(--ibo-text-muted); }
.ibo-kb__chev { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 2rem; height: 2rem; border: 1px solid var(--ibo-line); border-radius: 50%; position: relative; transition: background-color var(--ibo-dur-2), border-color var(--ibo-dur-2); }
.ibo-kb__chev::after { content: ""; position: absolute; left: 50%; top: 50%; width: .5rem; height: .5rem; margin: -.35rem 0 0 -.25rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--ibo-dur-2) var(--ibo-ease); }
.ibo-kb__toggle[aria-expanded="true"] { background: var(--ibo-light-2); }
.ibo-kb__toggle[aria-expanded="true"] .ibo-kb__title { color: var(--ibo-red); }
.ibo-kb__toggle[aria-expanded="true"] .ibo-kb__chev { color: #fff; background: var(--ibo-red); border-color: var(--ibo-red); }
.ibo-kb__toggle[aria-expanded="true"] .ibo-kb__chev::after { margin-top: -.1rem; transform: rotate(-135deg); }
.ibo-kb mark { padding: 0 .1em; color: inherit; background: #ffe7a3; }
.ibo-kb__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ibo-dur-3) var(--ibo-ease); }
.ibo-kb__panel.is-open { grid-template-rows: 1fr; }
.ibo-kb__panel > div { overflow: hidden; }
.ibo-kb__panel:not(.is-open) > div { visibility: hidden; transition: visibility 0s linear var(--ibo-dur-3); }
.ibo-kb__content { display: grid; gap: 1rem 2rem; padding: .25rem 1rem 1.4rem; font-size: .9375rem; background: var(--ibo-light-2); }
@media (min-width: 992px) { .ibo-kb__content.has-media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .ibo-kb--compact .ibo-kb__content.has-media { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.ibo-kb__content ol, .ibo-kb__content ul { padding-left: 1.25rem; }
.ibo-kb__dyk { margin: 0 0 .75rem; padding-left: .75rem; font: italic var(--ibo-weight-light) .9375rem/1.45 var(--ibo-font-light); color: var(--ibo-text-muted); border-left: 2px solid var(--ibo-red); }
.ibo-kb__dyk span { display: block; font-style: normal; font: 700 .6875rem/1.4 var(--ibo-font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ibo-red); }
.ibo-kb__fig { margin: 0; }
.ibo-kb__fig img { width: auto; max-width: 100%; max-height: 320px; background: #fff; border: 1px solid var(--ibo-line); }
.ibo-kb__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: 1rem; }
.ibo-kb__source { margin-top: .9rem; font-size: .75rem; color: var(--ibo-text-muted); }
.ibo-kb__source a { color: var(--ibo-text-muted); text-decoration: underline; text-underline-offset: .15em; }
.ibo-kb__related { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--ibo-line); }
.ibo-kb__related > span { display: block; margin-bottom: .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ibo-text-muted); }
.ibo-kb__related ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 !important; padding: 0 !important; list-style: none; }
.ibo-kb__related a { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .65rem; font-size: .8125rem; font-weight: 500; color: var(--ibo-petrol); background: #fff; border: 1px solid var(--ibo-line); text-decoration: none !important; transition: border-color var(--ibo-dur-1), color var(--ibo-dur-1); }
.ibo-kb__related a:hover { color: var(--ibo-red); border-color: var(--ibo-red); }
.ibo-kb__related .ibo-format { font-size: .625rem; }
.ibo-kb__related .ibo-format::before { width: 1.2em; height: 1.2em; }
.ibo-kb__empty { display: grid; justify-items: center; gap: .75rem; padding: 2.5rem 1.25rem; text-align: center; background: var(--ibo-light-2); border-bottom: 1px solid var(--ibo-line); }
.ibo-kb__empty[hidden] { display: none; }
.ibo-kb__empty svg { width: 46px; height: 46px; color: #9fb0ba; }
.ibo-kb__empty h3 { margin: 0; font-size: 1.375rem; }
.ibo-kb__empty p { max-width: 520px; margin: 0; font-size: .9375rem; color: var(--ibo-text-muted); }
.ibo-kb__empty .ibo-topics { justify-content: center; margin-top: .25rem !important; }
.ibo-kb__more { margin-top: 1.25rem; text-align: center; }
.ibo-kb__more[hidden] { display: none; }
.ibo-kb__noscript { padding: 1rem; font-size: .9375rem; background: var(--ibo-light-2); border: 1px solid var(--ibo-line); }

/* Zwei Spalten: Einleitung/Kontakt + Wissenscenter */
.ibo-qa { display: grid; gap: 2rem; }
@media (min-width: 992px) { .ibo-qa { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2.5rem; align-items: start; } .ibo-qa__aside { position: sticky; top: calc(var(--ibo-anchor-offset) + .5rem); } }
.ibo-qa__aside { display: grid; gap: 1rem; }
.ibo-helpcard { padding: 1.25rem; color: #fff; background: var(--ibo-violet); }
.ibo-helpcard h3 { margin: 0 0 .5rem; color: #fff; font-size: 1.25rem; }
.ibo-helpcard p { font-size: .9rem; }
.ibo-helpcard a:not(.ibo-btn) { color: #fff; font-weight: 700; }
.ibo-helpcard .ibo-actions { margin-top: .75rem; gap: .5rem; }

/* ---------- Verwandte Inhalte ---------- */
.ibo-related { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 0 !important; padding: 0 !important; list-style: none; }
.ibo-related__card { position: relative; display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1.1rem 1.15rem 1.15rem; background: #fff; border: 1px solid var(--ibo-line); border-top: 3px solid var(--_c, var(--ibo-line)); transition: box-shadow var(--ibo-dur-2) var(--ibo-ease), transform var(--ibo-dur-2) var(--ibo-ease); }
.ibo-related__card:hover { box-shadow: var(--ibo-shadow-2); transform: translateY(var(--ibo-card-hover-y)); }
.ibo-related__card[data-product="am"] { --_c: var(--ibo-red); }
.ibo-related__card[data-product="qsr"] { --_c: var(--ibo-petrol); }
.ibo-related__card[data-product="np"] { --_c: var(--ibo-orange); }
.ibo-related__card[data-product="pm"] { --_c: var(--ibo-violet); }
.ibo-related__card h3 { margin: .1rem 0 0; font: 600 1rem/1.35 var(--ibo-font-sans); color: var(--ibo-petrol); }
.ibo-related__card h3 a { color: inherit; text-decoration: none !important; }
.ibo-related__card h3 a::after { content: ""; position: absolute; inset: 0; }
.ibo-related__card p { margin: 0; font-size: .875rem; color: var(--ibo-text-muted); }
.ibo-related__card:has(a:focus-visible) { outline: 3px solid var(--ibo-focus); outline-offset: 2px; }
.ibo-related__card a:focus-visible { outline: none; }

/* ---------- Click-to-Load-Videodialog ---------- */
.ibo-player { width: min(960px, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem); padding: 0; color: #fff; background: #111; border: 0; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.ibo-player::backdrop { background: rgba(20, 30, 36, .78); }
.ibo-player[open] { animation: ibo-fade-in var(--ibo-dur-3) var(--ibo-ease) both; }
.ibo-player__head { display: flex; align-items: center; gap: 1rem; padding: .7rem .7rem .7rem 1.1rem; background: var(--ibo-petrol); }
.ibo-player__head h2 { flex: 1; margin: 0; font: 600 1rem/1.35 var(--ibo-font-sans); color: #fff; }
.ibo-player__close { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .4); cursor: pointer; }
.ibo-player__close:hover { background: rgba(255, 255, 255, .12); }
.ibo-player__stage { position: relative; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; }
.ibo-player__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ibo-player__consent { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 1.5rem; text-align: center; background: rgba(17, 17, 17, .78); }
.ibo-player__consent p { max-width: 34rem; margin: 0; font-size: .9375rem; color: rgba(255, 255, 255, .9); }
.ibo-player__consent small { font-size: .75rem; color: rgba(255, 255, 255, .7); }
.ibo-player__consent .ibo-actions { justify-content: center; }
.ibo-player__consent a:not(.ibo-btn) { color: #fff; text-decoration: underline; }
@media (max-width: 575.98px) { .ibo-player__consent { position: static; } .ibo-player__stage { aspect-ratio: auto; min-height: 56vw; } .ibo-player__stage.is-playing { aspect-ratio: 16 / 9; } }

/* ---------- Abschluss / nächste Schritte ---------- */
.ibo-next { display: grid; gap: 6px; }
@media (min-width: 992px) { .ibo-next { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ibo-next__col { display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: var(--ibo-light); }
.ibo-next__col h3 { margin: 0; font-size: 1.5rem; }
.ibo-next__col p { margin: 0; font-size: .9375rem; }
.ibo-next__col ul { display: grid; gap: 0; margin: .25rem 0 0 !important; padding: 0 !important; list-style: none; border-top: 1px solid var(--ibo-line); }
.ibo-next__col li a { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .6rem 0; font-weight: 600; font-size: .9375rem; border-bottom: 1px solid var(--ibo-line); text-decoration: none !important; }
.ibo-next__col li a small { font-weight: 500; font-size: .75rem; color: var(--ibo-text-muted); text-align: right; }
.ibo-next__col li a:hover { color: var(--ibo-red-active); }
.ibo-next__col--violet { color: #fff; background: var(--ibo-violet); }
.ibo-next__col--violet h3, .ibo-next__col--violet a { color: #fff !important; }
.ibo-next__col--violet ul, .ibo-next__col--violet li a { border-color: rgba(255, 255, 255, .25); }
.ibo-next__col--violet li a small { color: rgba(255, 255, 255, .75); }
.ibo-next__big { font: var(--ibo-weight-light) 1.75rem/1.2 var(--ibo-font-light); }

/* ---------- Zusammenspiel: erklärender Kontext zur Verbindungskarte ---------- */
.ibo-explain { display: grid; gap: 1.5rem 2.5rem; margin-bottom: 2rem; }
@media (min-width: 992px) { .ibo-explain { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.ibo-explain__lede { margin: 0; font: var(--ibo-weight-light) 1.375rem/1.45 var(--ibo-font-light); color: var(--ibo-petrol); }
.ibo-explain__cols { display: grid; gap: 1rem 1.75rem; font-size: .9375rem; }
@media (min-width: 768px) { .ibo-explain__cols { grid-template-columns: 1fr 1fr; } }
.ibo-explain__cols h3 { margin: 0 0 .3rem; font: 600 1rem/1.35 var(--ibo-font-sans); color: var(--ibo-petrol); }
.ibo-explain__cols p { margin: 0; }
.ibo-link-item .ibo-link-item__video { display: inline-flex; margin-top: .5rem; font-size: .8125rem; font-weight: 600; color: var(--ibo-red); }

/* ---------- Product Knowledge Center (Produktseiten) ---------- */
.ibo-knowledge { position: relative; background: #fff; }
.ibo-knowledge__intro { padding-block: var(--ibo-section-y) 1.5rem; }
.ibo-knowledge .ibo-subnav { margin-bottom: 0; }
.ibo-kmod { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.ibo-kmod + .ibo-kmod { border-top: 1px solid var(--ibo-line); }
.ibo-kmod--soft { background: var(--ibo-light-2); border-top: 0 !important; }
.ibo-kmod--soft + .ibo-kmod { border-top: 0; }
.ibo-kmod__head { display: grid; gap: .35rem 2.5rem; margin-bottom: 1.75rem; }
@media (min-width: 992px) { .ibo-kmod__head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; } }
.ibo-kmod__head h2, .ibo-kmod__head h3 { margin: 0; font-size: var(--ibo-fs-h3); }
.ibo-kmod__head p { margin: 0; color: var(--ibo-text-muted); }
.ibo-kmod__sub { margin: 2.5rem 0 1.25rem; padding-top: 2rem; border-top: 1px dashed #c9d3da; }
.ibo-kmod__sub h3 { margin: 0; font-size: var(--ibo-fs-h4); }
.ibo-praxis .ibo-prelude { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1rem 0 0 !important; padding: 0 !important; list-style: none; counter-reset: ibo-pre; font-size: .875rem; }
.ibo-praxis .ibo-prelude li { display: flex; align-items: center; gap: .5rem; counter-increment: ibo-pre; }
.ibo-praxis .ibo-prelude li::before { content: counter(ibo-pre); display: grid; place-items: center; width: 1.4rem; height: 1.4rem; font-weight: 700; font-size: .75rem; color: #fff; background: var(--ibo-petrol); border-radius: 50%; }
.ibo-knowledge .ibo-praxis { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); border-top: 1px solid var(--ibo-line); }
.ibo-quicklinks .is-highlight span { opacity: .95; }

@media (prefers-reduced-motion: reduce) {
  .ibo-tour__spot.is-active::after { animation: none; opacity: .6; }
  .ibo-is-pointed { animation: none; box-shadow: 0 0 0 4px var(--ibo-status-warn); }
}

@media print {
  .ibo-subnav, .ibo-kb__bar, .ibo-media__bar, .ibo-tour__controls { display: none !important; }
  .ibo-kb__panel { grid-template-rows: 1fr !important; }
  .ibo-kb__panel > div { visibility: visible !important; }
}

/* ---------- Ergänzungen: Varianten und Kontraste ---------- */
@media (min-width: 992px) { .ibo-tasks > .is-wide { grid-column: span 2; } }
.ibo-praxis .ibo-prelude li.ibo-prelude__link::before { content: none; }
.ibo-praxis .ibo-prelude kbd { font-size: .75rem; }
.ibo-fstory--keys .ibo-fstory__panel a:not(.ibo-btn) { color: #fff; }
.ibo-on-dark .ibo-keycaps__what span { color: rgba(255, 255, 255, .82); }
.ibo-feature--petrol .ibo-keycaps kbd { box-shadow: none; }
.ibo-feature--petrol .ibo-keycaps { gap: .6rem; }
.ibo-feature--petrol .ibo-keycaps kbd { min-width: 2.5rem; height: 2.5rem; font-size: .95rem; border-bottom-width: 3px; }
.ibo-feature .ibo-compare > div { padding: .7rem .8rem; }
.ibo-feature .ibo-compare h4 { margin-bottom: .3rem !important; }
.ibo-feature .ibo-compare ol { font-size: .8125rem; }
.ibo-mb-0 { margin-bottom: 0 !important; }
.ibo-feature--lg .ibo-feature__body { flex: none; }
.ibo-feature--lg .ibo-feature__img img { position: absolute; inset: 0; }
.ibo-fstory__dyk .ibo-fstory__links { font: 400 .875rem/1.45 var(--ibo-font-sans); }
.ibo-fstory__dyk .ibo-fstory__links a { font-weight: 600; }
.ibo-next__col .ibo-next__big { font: var(--ibo-weight-light) 1.75rem/1.2 var(--ibo-font-light); }
.ibo-mcard--feature .ibo-mcard__thumb { aspect-ratio: 16 / 9; min-height: 0; }
.ibo-mcard--feature { align-items: stretch; }
.ibo-finder__title { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .ibo-tour__spot { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: .75rem; }
  .ibo-tour__spot:not(.is-active) { visibility: hidden; }
}
.ibo-feature--lg:not(:has(.ibo-feature__img)) .ibo-feature__body { flex: 1; justify-content: center; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.ibo-feature--lg .ibo-keycaps kbd { min-width: 3rem; height: 3rem; font-size: 1.05rem; border-bottom-width: 4px; }
.ibo-feature--lg .ibo-keycaps { gap: .9rem; margin-block: 1rem !important; }
.ibo-howto__intro > .ibo-btn { justify-self: start; }

/* Vierer-Raster ohne Waisen: 1 → 2 → 4 Spalten */
.ibo-prodnav, .ibo-paths, .ibo-knowcards, .ibo-related { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .ibo-prodnav, .ibo-paths, .ibo-knowcards, .ibo-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ibo-prodnav, .ibo-paths, .ibo-knowcards, .ibo-related { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1199.98px) { .ibo-bento > li:last-child:nth-child(even) { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .ibo-bento > li:nth-child(7):nth-last-child(2), .ibo-bento > li:nth-child(8):last-child { grid-column: span 6; } }