/*!
 * ibo Experience Lab – Basis: Typografie, Container, Buttons, Header, Footer
 * Alle Elementregeln sind unter .ibo-lab gekapselt; Komponenten tragen das Präfix ibo-.
 */

/* ---------- Gekapselte Basis ----------
   Elementregeln über :where(.ibo-lab) mit Spezifität 0,0,1 – jede Komponentenklasse
   überschreibt sie, und sie greifen nur innerhalb des .ibo-lab-Wrappers. */
.ibo-lab {
  margin: 0;
  font-family: var(--ibo-font-sans);
  font-size: var(--ibo-fs-base);
  font-weight: var(--ibo-weight-regular);
  line-height: var(--ibo-lh-base);
  color: var(--ibo-text);
  background: var(--ibo-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
:where(.ibo-lab) *, :where(.ibo-lab) *::before, :where(.ibo-lab) *::after { box-sizing: border-box; }
:where(.ibo-lab) img, :where(.ibo-lab) svg { max-width: 100%; height: auto; }
:where(.ibo-lab) img { display: block; }
:where(.ibo-lab) h1, :where(.ibo-lab) h2, :where(.ibo-lab) h3, :where(.ibo-lab) h4, :where(.ibo-lab) h5, :where(.ibo-lab) h6 {
  margin: 0 0 .5rem;
  font-family: var(--ibo-font-light);
  font-weight: var(--ibo-weight-light);
  line-height: 1.2;
  color: var(--ibo-heading);
}
:where(.ibo-lab) h1 { font-size: var(--ibo-fs-h1); }
:where(.ibo-lab) h2 { font-size: var(--ibo-fs-h2); }
:where(.ibo-lab) h3 { font-size: var(--ibo-fs-h3); }
:where(.ibo-lab) h4 { font-size: var(--ibo-fs-h4); }
:where(.ibo-lab) h5 { font-size: var(--ibo-fs-h5); }
:where(.ibo-lab) p { margin: 0 0 1rem; }
:where(.ibo-lab) p:last-child { margin-bottom: 0; }
:where(.ibo-lab) ul, :where(.ibo-lab) ol { margin: 0 0 1rem; padding-left: 1.25rem; }
:where(.ibo-lab) a { color: var(--ibo-link); text-decoration: none; transition: color var(--ibo-dur-1) var(--ibo-ease); }
:where(.ibo-lab) a:hover { color: var(--ibo-link-hover); text-decoration: underline; text-underline-offset: .18em; }
:where(.ibo-lab) strong, :where(.ibo-lab) b { font-weight: var(--ibo-weight-bold); }
:where(.ibo-lab) kbd {
  display: inline-block;
  min-width: 1.8em;
  padding: .1em .45em;
  font: 600 .8125rem/1.4 var(--ibo-font-sans);
  color: var(--ibo-petrol);
  text-align: center;
  background: var(--ibo-white);
  border: 1px solid #b9c6ce;
  border-bottom-width: 2px;
  border-radius: 3px;
}
:where(.ibo-lab) button { font: inherit; color: inherit; }
:where(.ibo-lab) ::selection { background: var(--ibo-red); color: #fff; }

/* Sichtbare Fokuszustände (WCAG 2.4.7) */
:where(.ibo-lab) :focus { outline: none; }
:where(.ibo-lab) :focus-visible {
  outline: 3px solid var(--ibo-focus);
  outline-offset: 2px;
  border-radius: 1px;
}
.ibo-lab .ibo-on-dark :focus-visible,
.ibo-lab .ibo-on-dark:focus-visible { outline-color: #fff; }

.ibo-visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.ibo-skip {
  position: absolute; left: 1rem; top: -100px; z-index: 2000;
  padding: .75rem 1.25rem; background: var(--ibo-petrol); color: #fff !important;
  font-weight: 600; transition: top var(--ibo-dur-2) var(--ibo-ease);
}
.ibo-skip:focus { top: 1rem; }

/* ---------- Container (Bootstrap-kompatible Breiten) ---------- */
.ibo-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: calc(var(--ibo-gutter) / 2);
}
@media (min-width: 576px)  { .ibo-container { max-width: var(--ibo-container-sm); } }
@media (min-width: 768px)  { .ibo-container { max-width: var(--ibo-container-md); } }
@media (min-width: 992px)  { .ibo-container { max-width: var(--ibo-container-lg); } }
@media (min-width: 1200px) { .ibo-container { max-width: var(--ibo-container-xl); } }
@media (min-width: 1400px) { .ibo-container { max-width: var(--ibo-container-xxl); } }
@media (max-width: 575.98px) { .ibo-container { padding-inline: 16px; } }
.ibo-container--narrow { max-width: 870px !important; } /* --frame-width-medium */

/* ---------- Buttons (ibo.de: .btn-ibo-rot / .btn-ibo-violett …) ---------- */
.ibo-btn {
  --_bg: var(--ibo-red);
  --_bg-hover: var(--ibo-red-hover);
  --_fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 2.25rem;
  padding: .375rem .85rem;
  font: 600 .875rem/1.3 var(--ibo-font-sans);
  color: var(--_fg) !important;
  text-align: center;
  text-decoration: none !important;
  white-space: normal;
  background: var(--_bg);
  border: 1px solid var(--_bg);
  border-radius: var(--ibo-radius-sm);
  cursor: pointer;
  transition: background-color var(--ibo-dur-1) var(--ibo-ease), border-color var(--ibo-dur-1) var(--ibo-ease), transform var(--ibo-dur-1) var(--ibo-ease);
}
.ibo-btn:hover { background: var(--_bg-hover); border-color: var(--_bg-hover); }
.ibo-btn:active { transform: translateY(1px); }
.ibo-btn[disabled], .ibo-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ibo-btn--violet { --_bg: var(--ibo-violet); --_bg-hover: var(--ibo-violet-hover); }
.ibo-btn--petrol { --_bg: var(--ibo-petrol); --_bg-hover: var(--ibo-petrol-hover); }
.ibo-btn--ghost {
  --_fg: var(--ibo-petrol);
  background: transparent; border-color: #b9c6ce;
}
.ibo-btn--ghost:hover { background: var(--ibo-light); border-color: var(--ibo-petrol); }
.ibo-btn--ghost-light { --_fg: #fff; background: transparent; border: 2px solid #fff; }
.ibo-btn--ghost-light:hover { --_fg: var(--ibo-petrol); background: #fff; border-color: #fff; }
.ibo-btn--sm { min-height: 1.9rem; padding: .25rem .65rem; font-size: .8125rem; }
.ibo-btn--lg { min-height: 2.75rem; padding: .6rem 1.25rem; font-size: 1rem; }
.ibo-btn__icon { width: 1em; height: 1em; flex: none; }

/* Textlink mit Pfeil */
.ibo-arrowlink {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 600; color: var(--ibo-red);
}
.ibo-arrowlink::after {
  content: ""; width: .5em; height: .5em;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--ibo-dur-2) var(--ibo-ease);
}
.ibo-arrowlink:hover { text-decoration: none !important; }
.ibo-arrowlink:hover::after { transform: translateX(3px) rotate(45deg); }

/* ---------- Header ---------- */
.ibo-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: #fff;
  transition: box-shadow var(--ibo-dur-2) var(--ibo-ease);
}
.ibo-header.is-scrolled { box-shadow: 0 2px 14px rgba(55, 84, 96, .12); }
.ibo-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--ibo-header-h);
  transition: height var(--ibo-dur-2) var(--ibo-ease);
}
@media (min-width: 1200px) {
  .ibo-header.is-scrolled .ibo-header__inner { height: 88px; }
}
.ibo-header__brand {
  flex: none;
  display: block;
  height: 65%;
  max-height: 85px;
}
.ibo-header__brand img { height: 100%; width: auto; }

.ibo-nav { display: flex; align-items: center; flex: 1 1 auto; height: 100%; }
.ibo-nav__list {
  display: flex;
  align-items: stretch;
  gap: 1px .75em;
  height: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none;
}
.ibo-nav__item { display: flex; }
.ibo-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  padding: .5rem .5em;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .005em;
  color: var(--ibo-red) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
/* Unterstreichung: Original 4px Balken in #ea5a0b mit 50 % Deckkraft,
   ergänzt um eine sanfte seitliche Einblendbewegung. */
.ibo-nav__link::before {
  content: "";
  position: absolute;
  left: .5em;
  right: .5em;
  bottom: calc(50% - 1.15rem);
  height: 4px;
  background: var(--ibo-nav-highlight);
  opacity: 0;
  transform: translateX(-10px) scaleX(.55);
  transform-origin: left center;
  transition: opacity var(--ibo-dur-2) var(--ibo-ease), transform var(--ibo-dur-3) var(--ibo-ease-out);
}
.ibo-nav__link:hover::before,
.ibo-nav__link:focus-visible::before { opacity: .5; transform: none; }
.ibo-nav__link.is-active::before,
.ibo-nav__link[aria-current="page"]::before { opacity: .5; transform: none; }
.ibo-nav__link[aria-current="page"] { color: var(--ibo-red) !important; }

.ibo-nav__icons {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.ibo-nav__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  transition: background-color var(--ibo-dur-1) var(--ibo-ease);
}
.ibo-nav__icon:hover { background: var(--ibo-light); }
.ibo-nav__icon img { width: 26px; height: 26px; object-fit: contain; }

.ibo-header__toggle {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ibo-header__toggle-bars,
.ibo-header__toggle-bars::before,
.ibo-header__toggle-bars::after {
  display: block;
  width: 26px;
  height: 2px;
  margin-inline: auto;
  background: var(--ibo-red);
  transition: transform var(--ibo-dur-2) var(--ibo-ease), opacity var(--ibo-dur-1) linear;
}
.ibo-header__toggle-bars { position: relative; }
.ibo-header__toggle-bars::before, .ibo-header__toggle-bars::after { content: ""; position: absolute; left: 0; }
.ibo-header__toggle-bars::before { top: -8px; }
.ibo-header__toggle-bars::after { top: 8px; }
.ibo-header__toggle[aria-expanded="true"] .ibo-header__toggle-bars { background: transparent; }
.ibo-header__toggle[aria-expanded="true"] .ibo-header__toggle-bars::before { transform: translateY(8px) rotate(45deg); }
.ibo-header__toggle[aria-expanded="true"] .ibo-header__toggle-bars::after { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 991.98px) {
  .ibo-header__toggle { display: block; }
  .ibo-header__brand { height: 52px; }
  .ibo-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: .5rem 0 1.25rem;
    background: #fff;
    border-top: 1px solid var(--ibo-light);
    box-shadow: 0 14px 24px rgba(55, 84, 96, .14);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--ibo-dur-2) var(--ibo-ease), transform var(--ibo-dur-2) var(--ibo-ease), visibility 0s linear var(--ibo-dur-2);
  }
  .ibo-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--ibo-dur-2) var(--ibo-ease), transform var(--ibo-dur-2) var(--ibo-ease);
  }
  .ibo-nav__list {
    flex-direction: column;
    height: auto;
    margin: 0 !important;
    gap: 0;
  }
  .ibo-nav__item { display: block; }
  .ibo-nav__link {
    padding: .85rem 1.5rem;
    font-size: 1.0625rem;
    border-left: 4px solid transparent;
  }
  .ibo-nav__link::before {
    left: 0; right: auto; top: 50%; bottom: auto;
    width: 4px; height: 60%;
    transform: translateY(-50%) translateX(-6px);
  }
  .ibo-nav__link:hover::before, .ibo-nav__link:focus-visible::before,
  .ibo-nav__link[aria-current="page"]::before { transform: translateY(-50%); }
  .ibo-nav__link[aria-current="page"] { background: var(--ibo-light-2); }
  .ibo-nav__icons { padding: .75rem 1.25rem 0 !important; border-top: 1px solid var(--ibo-light); margin-top: .5rem !important; }
}

/* Seitlicher Kontakt-Reiter (wie ibo.de) */
.ibo-contacttab {
  position: fixed;
  right: 0;
  top: 32vh;
  z-index: 1010;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: .45rem .4rem .35rem;
  font: 700 .6875rem/1 var(--ibo-font-sans);
  color: var(--ibo-red) !important;
  text-decoration: none !important;
  background: #fff;
  border: 2px solid var(--ibo-red);
  border-right: 0;
  box-shadow: var(--ibo-shadow-1);
  transition: transform var(--ibo-dur-2) var(--ibo-ease), padding var(--ibo-dur-2) var(--ibo-ease);
}
.ibo-contacttab img { width: 34px; height: auto; }
.ibo-contacttab:hover { padding-right: .7rem; }
@media (max-width: 575.98px) { .ibo-contacttab { top: auto; bottom: 1rem; } }

/* ---------- Footer ---------- */
.ibo-footer { color: #fff; background: var(--ibo-petrol); }
.ibo-footer a { color: #fff; }
.ibo-footer a:hover { color: #fff; }
.ibo-footer__main {
  display: grid;
  gap: 2.5rem;
  padding-block: 3rem 2.75rem;
}
@media (min-width: 768px) { .ibo-footer__main { grid-template-columns: 1fr 1fr; } }
.ibo-footer__logo { width: 150px; margin-bottom: 1.75rem; }
.ibo-footer__menu { margin: 0 0 0 1rem !important; padding: 0 !important; list-style: none; font-size: .9375rem; line-height: 1.55; }
.ibo-footer__menu a { font-weight: 500; }
.ibo-footer__menu li:last-child a {
  display: inline-block;
  margin-top: .6rem;
  padding: 0 1rem;
  border: 2px solid #fff;
  transition: background-color var(--ibo-dur-1) var(--ibo-ease), color var(--ibo-dur-1) var(--ibo-ease);
}
.ibo-footer__menu li:last-child a:hover { color: var(--ibo-petrol); background: #fff; text-decoration: none; }
.ibo-footer__social { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem !important; padding: 0 !important; list-style: none; }
.ibo-footer__social a {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  opacity: .8; background: rgba(255, 255, 255, .05);
  transition: opacity var(--ibo-dur-2) var(--ibo-ease), background-color var(--ibo-dur-2) var(--ibo-ease);
}
.ibo-footer__social a:hover { opacity: 1; background: rgba(255, 255, 255, .15); }
.ibo-footer__social img { width: 30px; height: 30px; }
.ibo-footer__addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; font-size: .875rem; line-height: 1.5; font-style: normal; }
.ibo-footer__addresses strong { display: block; font-weight: 600; }
.ibo-footer__meta { padding-block: .85rem; font-size: .8125rem; color: #cfd8dd; background: var(--ibo-meta); }
.ibo-footer__meta p { margin: 0; }
.ibo-footer__meta .ibo-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }