<section class="section" id="section-49558-49835">
<div class="section__headline">
<h2 class="headline headline--2"><span class="headline__text">Eine Sektion</span></h2>
</div>
<div class="section__text">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="section__content">
<div id="section-49558-49835-content" class="tabs">
<ul class="tabs__tabs u-hide-scrollbar" role="tablist">
<li class="tabs__tab" role="presentation">
<a href="#section-49558-49835-content-tab-panel-1" id="section-49558-49835-content-tab-1" class="tabs__tab-link u-underline" role="tab" aria-selected="true">Wirtschaftswissenschaften</a>
</li>
<li class="tabs__tab" role="presentation">
<a href="#section-49558-49835-content-tab-panel-2" id="section-49558-49835-content-tab-2" class="tabs__tab-link u-underline" role="tab">Jura</a>
</li>
<li class="tabs__tab" role="presentation">
<a href="#section-49558-49835-content-tab-panel-3" id="section-49558-49835-content-tab-3" class="tabs__tab-link u-underline" role="tab">Informatik, Ingenieurswesen, Mathematik, Physik</a>
</li>
<li class="tabs__tab" role="presentation">
<a href="#section-49558-49835-content-tab-panel-4" id="section-49558-49835-content-tab-4" class="tabs__tab-link u-underline" role="tab">Medizin & Life Sciences</a>
</li>
<li class="tabs__tab" role="presentation">
<a href="#section-49558-49835-content-tab-panel-5" id="section-49558-49835-content-tab-5" class="tabs__tab-link u-underline" role="tab">Geistes- und Sozialwissenschaften</a>
</li>
</ul>
<div class="tabs__panels">
<div id="section-49558-49835-content-tab-panel-1" class="tabs__panel" role="tabpanel" aria-hidden="false" data-tab-id="section-49558-49835-content-tab-1">
<div id="card-slider-55649-57731" class="card-slider">
<div class="card-slider__cards u-hide-scrollbar" id="card-slider-55649-57731-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-55649-57731-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="section-49558-49835-content-tab-panel-2" class="tabs__panel" role="tabpanel" aria-hidden="true" data-tab-id="section-49558-49835-content-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="section-49558-49835-content-tab-panel-3" class="tabs__panel" role="tabpanel" aria-hidden="true" data-tab-id="section-49558-49835-content-tab-3">
<div id="card-slider-13064-93403" class="card-slider">
<div class="card-slider__cards u-hide-scrollbar" id="card-slider-13064-93403-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-13064-93403-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="section-49558-49835-content-tab-panel-4" class="tabs__panel" role="tabpanel" aria-hidden="true" data-tab-id="section-49558-49835-content-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="section-49558-49835-content-tab-panel-5" class="tabs__panel" role="tabpanel" aria-hidden="true" data-tab-id="section-49558-49835-content-tab-5">
<div id="card-slider-79148-19001" class="card-slider">
<div class="card-slider__cards u-hide-scrollbar" id="card-slider-79148-19001-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-79148-19001-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>
</div>
<div class="section__button">
<a class="button u-underline" href="#">Button</a>
</div>
</section>
{% set level = level ??? 2 %}
{% set id = id ??? html_id('section') -%}
<section {{ html_attributes({
class: 'section',
id: id,
}, attrs ?? {}) }}>
{% if headline|default %}
<div class="section__headline">
{% include '@headline' with {
level: level,
size: 2,
} | merge(headline) only %}
</div>
{% endif %}
{% if introText|default %}
<div class="section__text">
{{ introText | componentize }}
</div>
{% endif %}
<div class="section__content">
{% if text|default %}
{{ text | componentize }}
{% elseif content is iterable %}
{% include content.use with content.configuration | merge({
id: 'content' | namespaceInputId(id),
level: headline|default ? level + 1 : level,
}) only %}
{% else %}
{{ content }}
{% endif %}
</div>
{% if outroText|default %}
<div class="section__text">
{{ outroText | componentize }}
</div>
{% endif %}
{% if button|default %}
<div class="section__button">
{% include '@button' with button only %}
</div>
{% endif %}
</section>
{
"headline": {
"text": "Eine Sektion"
},
"introText": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>\n",
"content": {
"use": "@tabs",
"configuration": {
"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"
}
}
]
}
}
}
]
}
},
"button": {
"link": "#",
"text": "Button"
},
"footerText": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>\n"
}
.section {
align-items: stretch;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.section__text {
line-height: var(--line-height-body);
> * + * {
margin-block-start: 1.5rem;
}
}
.section__content {
> * + * {
margin-block-start: 2rem;
}
}
.section__content:not(:first-child) {
margin-block-start: 2.5rem;
}
.section__content:not(:last-child) {
margin-block-end: 1.5rem;
}
.section__button:not(:first-child) {
margin-block-start: 1.5rem;
}
No notes defined.