<div id="tabs-94109-20482" class="tabs">
<ul class="tabs__tabs u-hide-scrollbar" role="tablist">
<li class="tabs__tab" role="presentation">
<a href="#tabs-94109-20482-tab-panel-1" id="tabs-94109-20482-tab-1" class="tabs__tab-link u-underline" role="tab" aria-selected="true">Wirtschaftswissenschaften</a>
</li>
<li class="tabs__tab" role="presentation">
<a href="#tabs-94109-20482-tab-panel-2" id="tabs-94109-20482-tab-2" class="tabs__tab-link u-underline" role="tab">Jura</a>
</li>
<li class="tabs__tab" role="presentation">
<a href="#tabs-94109-20482-tab-panel-3" id="tabs-94109-20482-tab-3" class="tabs__tab-link u-underline" role="tab">Informatik, Ingenieurswesen, Mathematik, Physik</a>
</li>
<li class="tabs__tab" role="presentation">
<a href="#tabs-94109-20482-tab-panel-4" id="tabs-94109-20482-tab-4" class="tabs__tab-link u-underline" role="tab">Medizin & Life Sciences</a>
</li>
<li class="tabs__tab" role="presentation">
<a href="#tabs-94109-20482-tab-panel-5" id="tabs-94109-20482-tab-5" class="tabs__tab-link u-underline" role="tab">Geistes- und Sozialwissenschaften</a>
</li>
</ul>
<div class="tabs__panels">
<div id="tabs-94109-20482-tab-panel-1" class="tabs__panel" role="tabpanel" aria-hidden="false" data-tab-id="tabs-94109-20482-tab-1">
<div id="card-slider-63545-75530" class="card-slider">
<div class="card-slider__cards u-hide-scrollbar" id="card-slider-63545-75530-cards">
<div class="card-slider__card">
<article class="card has-overlay-link" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="card-slider__card">
<article class="card has-overlay-link" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
<img class="image__img" src="https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++" width="555" height="555" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="card-slider__card">
<article class="card has-overlay-link" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
<dl class="card__details">
<div class="card__detail">
<dt class="card__detail-label"><span class="card__detail-label-icon"><svg class="icon icon--calendar-alt" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#calendar-alt"></use>
</svg></span><span class="card__detail-label-text u-hidden-visually">Datum</span></dt>
<dd class="card__detail-text">So, 8. Sep 2024</dd>
</div>
</dl>
</div>
</div>
</article>
</div>
<div class="card-slider__card">
<article class="card has-overlay-link" data-card-color="purple" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__badge">
<span class="card__badge-icon">
<svg class="icon icon--bell" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#bell"></use>
</svg> </span>
<span class="card__badge-text u-line-clamp">Tipp aus der Redaktion</span>
</div>
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="card-slider__card card-slider__card--more-card">
<article class="card has-overlay-link" data-card-color="orange" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-more.7884338daa.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__text u-underline">Mehr erfahren</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="card-slider__navigation">
<div class="card-slider__scroll-bar" aria-hidden="true" data-scroll-bar-target="card-slider-63545-75530-cards">
<div class="card-slider__scroll-bar-backdrop"></div>
<div class="card-slider__scroll-bar-thumb"></div>
</div>
<div class="card-slider__buttons">
<button class="navigation-button card-slider__navigation-button card-slider__navigation-button--left" type="button" title="Nach links scrollen" disabled tabindex="-1">
<svg class="icon icon--caret-left" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-left"></use>
</svg></button>
<button class="navigation-button card-slider__navigation-button card-slider__navigation-button--right" type="button" title="Nach rechts scrollen" disabled tabindex="-1">
<svg class="icon icon--caret-right" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-right"></use>
</svg></button>
</div>
</div>
</div>
</div>
<div id="tabs-94109-20482-tab-panel-2" class="tabs__panel" role="tabpanel" aria-hidden="true" data-tab-id="tabs-94109-20482-tab-2">
<div class="card-grid">
<div class="card-grid__card">
<article class="card has-overlay-link" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="card-grid__card">
<article class="card has-overlay-link" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
<img class="image__img" src="https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++" width="555" height="555" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="card-grid__card">
<article class="card has-overlay-link" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
<dl class="card__details">
<div class="card__detail">
<dt class="card__detail-label"><span class="card__detail-label-icon"><svg class="icon icon--calendar-alt" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#calendar-alt"></use>
</svg></span><span class="card__detail-label-text u-hidden-visually">Datum</span></dt>
<dd class="card__detail-text">So, 8. Sep 2024</dd>
</div>
</dl>
</div>
</div>
</article>
</div>
<div class="card-grid__card">
<article class="card has-overlay-link" data-card-color="purple" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__badge">
<span class="card__badge-icon">
<svg class="icon icon--bell" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#bell"></use>
</svg> </span>
<span class="card__badge-text u-line-clamp">Tipp aus der Redaktion</span>
</div>
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="card-grid__card card-grid__card--more-card">
<article class="card has-overlay-link" data-card-color="orange" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-more.7884338daa.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__text u-underline">Mehr erfahren</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<div id="tabs-94109-20482-tab-panel-3" class="tabs__panel" role="tabpanel" aria-hidden="true" data-tab-id="tabs-94109-20482-tab-3">
<div id="card-slider-60723-29551" class="card-slider">
<div class="card-slider__cards u-hide-scrollbar" id="card-slider-60723-29551-cards">
<div class="card-slider__card">
<article class="card has-overlay-link" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="card-slider__card">
<article class="card has-overlay-link" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
<img class="image__img" src="https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++" width="555" height="555" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="card-slider__card">
<article class="card has-overlay-link" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
<dl class="card__details">
<div class="card__detail">
<dt class="card__detail-label"><span class="card__detail-label-icon"><svg class="icon icon--calendar-alt" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#calendar-alt"></use>
</svg></span><span class="card__detail-label-text u-hidden-visually">Datum</span></dt>
<dd class="card__detail-text">So, 8. Sep 2024</dd>
</div>
</dl>
</div>
</div>
</article>
</div>
<div class="card-slider__card">
<article class="card has-overlay-link" data-card-color="purple" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__badge">
<span class="card__badge-icon">
<svg class="icon icon--bell" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#bell"></use>
</svg> </span>
<span class="card__badge-text u-line-clamp">Tipp aus der Redaktion</span>
</div>
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="card-slider__card card-slider__card--more-card">
<article class="card has-overlay-link" data-card-color="orange" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-more.7884338daa.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__text u-underline">Mehr erfahren</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="card-slider__navigation">
<div class="card-slider__scroll-bar" aria-hidden="true" data-scroll-bar-target="card-slider-60723-29551-cards">
<div class="card-slider__scroll-bar-backdrop"></div>
<div class="card-slider__scroll-bar-thumb"></div>
</div>
<div class="card-slider__buttons">
<button class="navigation-button card-slider__navigation-button card-slider__navigation-button--left" type="button" title="Nach links scrollen" disabled tabindex="-1">
<svg class="icon icon--caret-left" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-left"></use>
</svg></button>
<button class="navigation-button card-slider__navigation-button card-slider__navigation-button--right" type="button" title="Nach rechts scrollen" disabled tabindex="-1">
<svg class="icon icon--caret-right" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-right"></use>
</svg></button>
</div>
</div>
</div>
</div>
<div id="tabs-94109-20482-tab-panel-4" class="tabs__panel" role="tabpanel" aria-hidden="true" data-tab-id="tabs-94109-20482-tab-4">
<div class="card-grid">
<div class="card-grid__card">
<article class="card has-overlay-link" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="card-grid__card">
<article class="card has-overlay-link" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
<img class="image__img" src="https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++" width="555" height="555" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="card-grid__card">
<article class="card has-overlay-link" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
<dl class="card__details">
<div class="card__detail">
<dt class="card__detail-label"><span class="card__detail-label-icon"><svg class="icon icon--calendar-alt" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#calendar-alt"></use>
</svg></span><span class="card__detail-label-text u-hidden-visually">Datum</span></dt>
<dd class="card__detail-text">So, 8. Sep 2024</dd>
</div>
</dl>
</div>
</div>
</article>
</div>
<div class="card-grid__card">
<article class="card has-overlay-link" data-card-color="purple" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__badge">
<span class="card__badge-icon">
<svg class="icon icon--bell" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#bell"></use>
</svg> </span>
<span class="card__badge-text u-line-clamp">Tipp aus der Redaktion</span>
</div>
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="card-grid__card card-grid__card--more-card">
<article class="card has-overlay-link" data-card-color="orange" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-more.7884338daa.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__text u-underline">Mehr erfahren</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<div id="tabs-94109-20482-tab-panel-5" class="tabs__panel" role="tabpanel" aria-hidden="true" data-tab-id="tabs-94109-20482-tab-5">
<div id="card-slider-20158-61264" class="card-slider">
<div class="card-slider__cards u-hide-scrollbar" id="card-slider-20158-61264-cards">
<div class="card-slider__card">
<article class="card has-overlay-link" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
<img class="image__img" src="https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++" width="555" height="555" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="card-slider__card">
<article class="card has-overlay-link" data-card-type="stacked">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
<dl class="card__details">
<div class="card__detail">
<dt class="card__detail-label"><span class="card__detail-label-icon"><svg class="icon icon--calendar-alt" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#calendar-alt"></use>
</svg></span><span class="card__detail-label-text u-hidden-visually">Datum</span></dt>
<dd class="card__detail-text">So, 8. Sep 2024</dd>
</div>
</dl>
</div>
</div>
</article>
</div>
</div>
<div class="card-slider__navigation">
<div class="card-slider__scroll-bar" aria-hidden="true" data-scroll-bar-target="card-slider-20158-61264-cards">
<div class="card-slider__scroll-bar-backdrop"></div>
<div class="card-slider__scroll-bar-thumb"></div>
</div>
<div class="card-slider__buttons">
<button class="navigation-button card-slider__navigation-button card-slider__navigation-button--left" type="button" title="Nach links scrollen" disabled tabindex="-1">
<svg class="icon icon--caret-left" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-left"></use>
</svg></button>
<button class="navigation-button card-slider__navigation-button card-slider__navigation-button--right" type="button" title="Nach rechts scrollen" disabled tabindex="-1">
<svg class="icon icon--caret-right" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-right"></use>
</svg></button>
</div>
</div>
</div>
</div>
</div>
</div>
{% set id = id ??? html_id('tabs') -%}
<div {{ html_attributes({
id: id,
class: 'tabs',
}, attrs ?? {}) }}>
<ul class="tabs__tabs u-hide-scrollbar" role="tablist">
{% for tab in tabs %}
<li class="tabs__tab" role="presentation">
<a {{ html_attributes({
href: '#' ~ ("tab-panel-#{loop.index}" | namespaceInputId(id)),
id: "tab-#{loop.index}" | namespaceInputId(id),
class: 'tabs__tab-link u-underline',
role: 'tab',
'aria-selected': loop.index == 1 ? 'true',
}) }}>
{{- tab.title -}}
</a>
</li>
{% endfor %}
</ul>
<div class="tabs__panels">
{% for tab in tabs %}
<div {{ html_attributes({
id: "tab-panel-#{loop.index}" | namespaceInputId(id),
class: 'tabs__panel',
role: 'tabpanel',
'aria-hidden': loop.index == 1 ? 'false' : 'true',
'data-tab-id': "tab-#{loop.index}" | namespaceInputId(id),
}) }}>
{% if tab.content is iterable %}
{% include tab.content.use with tab.content.configuration only %}
{% else %}
{{ tab.content }}
{% endif %}
</div>
{% endfor %}
</div>
</div>
{
"tabs": [
{
"title": "Wirtschaftswissenschaften",
"content": {
"use": "@card-slider",
"configuration": {
"cards": [
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#"
},
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"image": {
"src": "https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++",
"width": 555,
"height": 555,
"cover": true,
"alt": "Das ist ein Platzhalter-Bild",
"placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC"
}
},
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"hintBox": {
"value": "2024-09-08T00:00:00.000Z"
}
},
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"color": "purple",
"useFallbackImage": false,
"badge": {
"icon": "bell",
"text": "Tipp aus der Redaktion"
}
}
],
"moreCard": {
"text": "Mehr erfahren",
"link": "#"
}
}
}
},
{
"title": "Jura",
"content": {
"use": "@card-grid",
"configuration": {
"cards": [
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#"
},
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"image": {
"src": "https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++",
"width": 555,
"height": 555,
"cover": true,
"alt": "Das ist ein Platzhalter-Bild",
"placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC"
}
},
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"hintBox": {
"value": "2024-09-08T00:00:00.000Z"
}
},
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"color": "purple",
"useFallbackImage": false,
"badge": {
"icon": "bell",
"text": "Tipp aus der Redaktion"
}
}
],
"moreCard": {
"text": "Mehr erfahren",
"link": "#"
}
}
}
},
{
"title": "Informatik, Ingenieurswesen, Mathematik, Physik",
"content": {
"use": "@card-slider",
"configuration": {
"cards": [
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#"
},
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"image": {
"src": "https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++",
"width": 555,
"height": 555,
"cover": true,
"alt": "Das ist ein Platzhalter-Bild",
"placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC"
}
},
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"hintBox": {
"value": "2024-09-08T00:00:00.000Z"
}
},
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"color": "purple",
"useFallbackImage": false,
"badge": {
"icon": "bell",
"text": "Tipp aus der Redaktion"
}
}
],
"moreCard": {
"text": "Mehr erfahren",
"link": "#"
}
}
}
},
{
"title": "Medizin & Life Sciences",
"content": {
"use": "@card-grid",
"configuration": {
"cards": [
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#"
},
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"image": {
"src": "https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++",
"width": 555,
"height": 555,
"cover": true,
"alt": "Das ist ein Platzhalter-Bild",
"placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC"
}
},
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"hintBox": {
"value": "2024-09-08T00:00:00.000Z"
}
},
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"color": "purple",
"useFallbackImage": false,
"badge": {
"icon": "bell",
"text": "Tipp aus der Redaktion"
}
}
],
"moreCard": {
"text": "Mehr erfahren",
"link": "#"
}
}
}
},
{
"title": "Geistes- und Sozialwissenschaften",
"content": {
"use": "@card-slider",
"configuration": {
"cards": [
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"image": {
"src": "https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++",
"width": 555,
"height": 555,
"cover": true,
"alt": "Das ist ein Platzhalter-Bild",
"placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC"
}
},
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"hintBox": {
"value": "2024-09-08T00:00:00.000Z"
}
}
]
}
}
}
]
}
:root {
@include use-responsive-sizing(--tabs-font-size, (xs: 1.8rem, xl: 2.2rem));
@include use-responsive-sizing(--tabs-gap, (xs: 2.4rem, xl: 4rem));
}
.tabs__tabs {
display: flex;
gap: var(--tabs-gap);
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
@include use-responsive-sizing(margin-block-end, (xs: 2rem, xl: 4rem));
}
.tabs__tab {
color: var(--tabs-color, var(--color-midnight));
display: block;
font-size: var(--tabs-font-size);
scroll-snap-align: start;
white-space: nowrap;
}
.tabs__tab-link {
--underline-height: var(--tabs-underline-height, 0.1em);
--underline-offset: var(--tabs-underline-offset, 0.5em);
--underline-color: var(--tabs-underline-color, currentColor);
--underline-focus-color: transparent;
display: block;
line-height: 1;
padding-block-end: calc(var(--underline-height) + var(--underline-offset));
user-select: none;
&:is([aria-selected]) {
--underline-color: var(--tabs-color);
--underline-color--enter: transparent;
font-weight: var(--font-weight-bold);
pointer-events: none;
}
}
.tabs__panel {
&[aria-hidden='true'] {
display: none;
}
}
import { on } from 'delegated-events';
import invisibleFocus from '../../../javascripts/utils/invisibleFocus';
const switchTab = ($oldTab: HTMLAnchorElement, $newTab: HTMLAnchorElement) => {
// Focus to new tab
invisibleFocus($newTab);
// Set the selected state
$newTab.setAttribute('aria-selected', 'true');
$oldTab.removeAttribute('aria-selected');
// Hide old panel
const $oldPanel = document.getElementById($oldTab.hash.slice(1));
$oldPanel?.setAttribute('aria-hidden', 'true');
$oldPanel?.dispatchEvent(new Event('tabs:hidden'));
// Show old panel
const $newPanel = document.getElementById($newTab.hash.slice(1));
$newPanel?.setAttribute('aria-hidden', 'false');
$newPanel?.dispatchEvent(new Event('tabs:visible'));
};
on('click', 'a.tabs__tab-link', (event) => {
const { currentTarget: $tab } = event;
event.preventDefault();
const $currentTab = $tab
.closest('.tabs__tabs')
?.querySelector<HTMLAnchorElement>('[aria-selected]');
if ($currentTab && $tab !== $currentTab) {
switchTab($currentTab, $tab);
}
});
No notes defined.