<div id="home-stage-31857-72933" class="home-stage">
<div class="home-stage__stage">
<div class="home-stage__stage-inner">
<div class="home-stage__stage-content">
<div class="home-stage__stage-headline">
<h1 class="headline headline--1"><span class="headline__kicker">Hier treffen sich<br>die klügsten Köpfe<span class="u-hidden-visually">: </span></span><span class="headline__text">Hole das Beste aus Studium und Berufseinstieg raus</span></h1>
</div>
<div class="home-stage__stage-call-to-action">
<form id="home-stage-31857-72933-call-to-action" class="inline-form" method="get">
<div class="inline-form__dropdown">
<div id="home-stage-31857-72933-call-to-action-dropdown" class="dropdown dropdown--frameless has-overlay-link">
<fieldset class="dropdown__fieldset">
<legend class="dropdown__label" id="home-stage-31857-72933-call-to-action-dropdown-label">Du bist gerade</legend>
<button type="button" class="dropdown__toggle u-overlay-link" aria-labelledby="home-stage-31857-72933-call-to-action-dropdown-legend" tabindex="-1">
<div class="dropdown__toggle-inner">
<span class="dropdown__toggle-text u-underline">Auswählen</span>
<svg class="icon icon--caret-down dropdown__toggle-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down"></use>
</svg>
</div>
</button>
<ul id="home-stage-31857-72933-call-to-action-dropdown-options" class="dropdown__options" hidden aria-labelledby="home-stage-31857-72933-call-to-action-dropdown-legend">
<li class="dropdown__option has-underline" role="presentation">
<input type="radio" id="home-stage-31857-72933-call-to-action-dropdown-1" class="dropdown__option-radio" name="targetGroup" value="1" tabindex="-1">
<label for="home-stage-31857-72933-call-to-action-dropdown-1" class="dropdown__option-label u-underline" role="option">Vor dem Studium</label>
</li>
<li class="dropdown__option has-underline" role="presentation">
<input type="radio" id="home-stage-31857-72933-call-to-action-dropdown-2" class="dropdown__option-radio" name="targetGroup" value="2" tabindex="-1">
<label for="home-stage-31857-72933-call-to-action-dropdown-2" class="dropdown__option-label u-underline" role="option">Im Studium</label>
</li>
<li class="dropdown__option has-underline" role="presentation">
<input type="radio" id="home-stage-31857-72933-call-to-action-dropdown-3" class="dropdown__option-radio" name="targetGroup" value="3" checked tabindex="-1">
<label for="home-stage-31857-72933-call-to-action-dropdown-3" class="dropdown__option-label dropdown__option-label--selected u-underline" role="option" aria-selected="true">Kurz vor Berufseinstieg</label>
</li>
<li class="dropdown__option has-underline" role="presentation">
<input type="radio" id="home-stage-31857-72933-call-to-action-dropdown-4" class="dropdown__option-radio" name="targetGroup" value="4" tabindex="-1">
<label for="home-stage-31857-72933-call-to-action-dropdown-4" class="dropdown__option-label u-underline" role="option">Im Berufsleben</label>
</li>
</ul>
</fieldset>
</div>
</div>
<div class="inline-form__submit">
<button class="icon-button" type="submit" title="Absenden">
<span class="icon-button__icon">
<svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#arrow-right"></use>
</svg> </span>
</button>
</div>
</form>
</div>
<div class="home-stage__stage-text">Schon dabei? <a class="link link--internal" href="#"><span class="link__text u-underline">Jetzt einloggen</span></a></div>
</div>
<div class="home-stage__stage-image-container">
<picture class="image home-stage__stage-image">
<source srcset="/assets/images/home-stage/home-stage@2x.4c98a938da.png 2x, /assets/images/home-stage/home-stage.5a327502b2.png 1x" type="image/png">
<source srcset="/assets/images/home-stage/home-stage@2x.c72406228b.webp 2x, /assets/images/home-stage/home-stage.c4dc12063a.webp 1x" type="image/webp">
<img class="image__img" src="/assets/images/home-stage/home-stage.5a327502b2.png" srcset="/assets/images/home-stage/home-stage@2x.4c98a938da.png 2x" width="598" height="709" alt="" loading="lazy" role="presentation" />
</picture>
</div>
</div>
</div>
<div class="home-stage__benefits">
<div class="home-stage__benefits-inner">
<div class="home-stage__checklist">
<ul class="bullet-list bullet-list--checked" role="list">
<li class="bullet-list__item">Komm in Kontakt mit führenden Unternehmen und Top-Hochschulen</li>
<li class="bullet-list__item">Alle Jobs und Karriere-Events per Mail und in der App</li>
<li class="bullet-list__item">Uni-Kick: Recherche-Datenbanken, Stipendien, Fachliteratur</li>
</ul>
</div>
<div class="home-stage__call-to-action">
<svg class="icon icon--plus-alt home-stage__call-to-action-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#plus-alt"></use>
</svg>
<div class="home-stage__call-to-action-headline">
<h2 class="headline headline--2"><span class="headline__text">Exklusive Vorteile im Wert von 1.000 € für die besten 10% ihres Jahrgangs</span></h2>
</div>
<div class="home-stage__call-to-action-button">
<a class="icon-button" href="#">
<span class="icon-button__icon">
<svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#arrow-right"></use>
</svg> </span>
<span class="icon-button__text u-underline">Gehörst du dazu?</span>
</a>
</div>
</div>
<div class="home-stage__offers">
<svg class="icon icon--whirl home-stage__offers-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#whirl"></use>
</svg>
<div class="home-stage__offers-headline">
<h2 class="headline headline--2"><span class="headline__text">Erkunde die Angebote für deinen Weg ins Berufsleben</span></h2>
</div>
<ul class="home-stage__offers-grid">
<li class="home-stage__offers-grid-cell">
<div class="home-stage__offer">
<span class="home-stage__offer-text">3.000+</span>
<span class="home-stage__offer-label u-underline">Aktuelle Jobs und Praktika</span>
</div>
</li>
<li class="home-stage__offers-grid-cell">
<div class="home-stage__offer">
<span class="home-stage__offer-text">1.097</span>
<span class="home-stage__offer-label u-underline">Stipendien im Überblick</span>
</div>
</li>
<li class="home-stage__offers-grid-cell">
<a href="#" class="home-stage__offer">
<span class="home-stage__offer-text">27</span>
<span class="home-stage__offer-label u-underline">Partner-Unternehmen</span>
</a>
</li>
<li class="home-stage__offers-grid-cell">
<div class="home-stage__offer">
<span class="home-stage__offer-text">210</span>
<span class="home-stage__offer-label u-underline">Exklusive Events</span>
</div>
</li>
</dl>
</div>
</div>
</div>
</div>
{% set level = level ??? 1 %}
{% set id = id ??? html_id('home-stage') -%}
<div {{ html_attributes({
id: id,
class: 'home-stage',
}, attrs ?? {}) }}>
<div class="home-stage__stage">
<div class="home-stage__stage-inner">
<div class="home-stage__stage-content">
<div class="home-stage__stage-headline">
{% include '@headline' with headline | merge({
level: level,
size: 1,
}) only %}
</div>
{% if callToAction|default %}
<div class="home-stage__stage-call-to-action">
{% include callToAction.use with callToAction.configuration | merge({
id: 'call-to-action' | namespaceInputId(id),
frameless: true,
}) only %}
</div>
{% endif %}
{% if text|default %}
<div class="home-stage__stage-text">
{{- text | componentize -}}
</div>
{% endif %}
</div>
<div class="home-stage__stage-image-container">
{% include '@image' with {
src: asset('images/home-stage/home-stage.png'),
width: 598,
height: 709,
decorative: true,
src2x: asset('images/home-stage/home-stage@2x.png'),
sources: [
{
srcset: asset('images/home-stage/home-stage.png'),
srcset2x: asset('images/home-stage/home-stage@2x.png'),
type: 'image/png',
},
{
srcset: asset('images/home-stage/home-stage.webp'),
srcset2x: asset('images/home-stage/home-stage@2x.webp'),
type: 'image/webp',
},
],
attrs: {
class: 'home-stage__stage-image',
},
} only %}
</div>
</div>
</div>
{% if benefits|default %}
<div class="home-stage__benefits">
<div class="home-stage__benefits-inner">
{% if benefits.checklist|default %}
<div class="home-stage__checklist">
{% include '@bullet-list' with benefits.checklist | merge({
checked: true,
}) only %}
</div>
{% endif %}
{% if benefits.callToAction|default %}
<div class="home-stage__call-to-action">
{% include '@icon' with {
icon: 'plus-alt',
class: 'home-stage__call-to-action-icon',
} only %}
<div class="home-stage__call-to-action-headline">
{% include '@headline' with benefits.callToAction.headline | merge({
level: level + 1,
size: 2,
}) only %}
</div>
<div class="home-stage__call-to-action-button">
{% include '@icon-button' with benefits.callToAction.button only %}
</div>
</div>
{% endif %}
{% if benefits.offers|default %}
<div class="home-stage__offers">
{% include '@icon' with {
icon: 'whirl',
class: 'home-stage__offers-icon',
} only %}
<div class="home-stage__offers-headline">
{% include '@headline' with benefits.offers.headline | merge({
level: level + 1,
size: 2,
}) only %}
</div>
<ul class="home-stage__offers-grid">
{% for item in benefits.offers.items %}
<li class="home-stage__offers-grid-cell">
{% set link = item.link ?? false %}
{% set tag = link ? 'a' : 'div' %}
<{{ tag }} {{ html_attributes({
href: link,
class: 'home-stage__offer',
}, link_attributes(link), item.attrs ?? {}) }}>
<span class="home-stage__offer-text">
{{- item.text -}}
</span>
<span class="home-stage__offer-label u-underline">
{{- item.label -}}
</span>
</{{ tag }}>
</li>
{% endfor %}
</dl>
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
{
"headline": {
"kicker": "Hier treffen sich||die klügsten Köpfe",
"text": "Hole das Beste aus Studium und Berufseinstieg raus"
},
"text": "Schon dabei? <a href=\"#\">Jetzt einloggen</a>",
"callToAction": {
"use": "@inline-form",
"configuration": {
"dropdown": {
"label": "Du bist gerade",
"selectText": "Auswählen",
"name": "targetGroup",
"options": [
{
"value": "1",
"label": "Vor dem Studium",
"checked": false
},
{
"value": "2",
"label": "Im Studium",
"checked": false
},
{
"value": "3",
"label": "Kurz vor Berufseinstieg",
"checked": true
},
{
"value": "4",
"label": "Im Berufsleben",
"checked": false
}
]
}
}
},
"benefits": {
"checklist": {
"items": [
{
"text": "Komm in Kontakt mit führenden Unternehmen und Top-Hochschulen"
},
{
"text": "Alle Jobs und Karriere-Events per Mail und in der App"
},
{
"text": "Uni-Kick: Recherche-Datenbanken, Stipendien, Fachliteratur"
}
]
},
"callToAction": {
"headline": {
"text": "Exklusive Vorteile im Wert von 1.000 € für die besten 10% ihres Jahrgangs"
},
"button": {
"link": "#",
"text": "Gehörst du dazu?"
}
},
"offers": {
"headline": {
"text": "Erkunde die Angebote für deinen Weg ins Berufsleben"
},
"items": [
{
"label": "Aktuelle Jobs und Praktika",
"text": "3.000+"
},
{
"label": "Stipendien im Überblick",
"text": "1.097"
},
{
"label": "Partner-Unternehmen",
"text": "27",
"link": "#"
},
{
"label": "Exklusive Events",
"text": "210"
}
]
}
}
}
.home-stage {
overflow: hidden;
}
.home-stage__stage {
background-color: var(--color-cyan-light);
padding-block-start: calc(var(--header-height) + 5rem);
position: relative;
}
.home-stage__stage-inner {
display: flex;
justify-content: space-between;
@include use-container();
@include use-responsive-sizing(column-gap, $gaps);
@include use-responsive-sizing(flex-direction, (xs: column, m: row));
@include use-responsive-sizing(align-items, (xs: center, m: stretch));
}
.home-stage__stage-content {
display: flex;
flex-direction: column;
gap: 3rem;
@include use-responsive-sizing(text-align, (xs: center, m: left));
@include use-responsive-sizing(width, (
m: column-width(m, 8),
l: column-width(l, 6),
xl: column-width(xl, 6),
));
}
.home-stage__stage-headline {
--headline-font-weight: var(--font-weight-light);
--headline-kicker-font-weight: var(--font-weight-semibold);
--headline-kicker-letter-spacing: -0.04em;
--headline-kicker-spacing: 1rem;
--headline-letter-spacing: -0.02em;
margin-inline: auto;
max-inline-size: 90%;
@include use-responsive-sizing(--headline-kicker-font-size, responsive-map(xs 3.6rem, xl 5.2rem));
@include use-responsive-sizing(margin-block-start, responsive-map(m 2rem, xl 3rem));
@include mq($from: m) {
margin-inline: 0;
max-inline-size: 55rem;
}
@include mq($from: xl) {
max-inline-size: 80rem;
}
}
.home-stage__stage-call-to-action {
inline-size: 100%;
margin-inline: auto;
max-inline-size: 50rem;
@include mq($from: m) {
margin-block-start: 2rem;
margin-inline: 0;
}
}
.home-stage__stage-text {
--link-color: var(--color-orange);
--line-underline-color: var(--color-orange);
font-size: 1.6rem;
line-height: var(--line-height-body);
opacity: 0.4;
transition-property: opacity;
&:hover {
opacity: 1;
}
@include mq($from: m) {
margin-block-end: 3rem;
}
}
.home-stage__stage-image-container {
@include use-responsive-sizing(width, (
m: column-width(m, 6),
l: column-width(l, 6),
xl: column-width(xl, 6),
));
@include mq($from: m) {
align-self: flex-end;
}
}
.home-stage__stage-image {
margin-block-start: 4rem;
margin-inline: auto;
max-inline-size: 80%;
@include mq($from: m) {
inline-size: calc(140% + (var(--inner-container-padding) * 2));
margin-block-start: -6rem;
margin-inline-end: calc(var(--inner-container-padding) * -2);
max-inline-size: 60rem;
}
@include mq($from: l) {
inline-size: calc(105% + (var(--inner-container-padding) * 2));
}
@include mq($from: xl) {
inline-size: 100%;
}
}
.home-stage__benefits {
position: relative;
@include use-responsive-sizing(--home-stage-benefits-column-gap, $gaps);
@include use-responsive-sizing(--home-stage-benefits-inner-gap, responsive-map(xs 3rem, xl 5rem));
@include use-responsive-sizing(--home-stage-benefits-space, (m: 4rem, l: 6rem, xl: 8rem));
@include use-responsive-sizing(--home-stage-benefits-row-gap, (xs: 6rem, l: 8rem, xl: 10rem));
}
.home-stage__benefits-inner {
--home-stage-benefits-padding-inline: calc((var(--home-stage-benefits-column-gap) / 2) + var(--home-stage-benefits-space));
display: grid;
grid-template-areas: 'checklist' 'call-to-action' 'offers';
grid-template-rows: auto auto auto;
@include use-container($start-breakpoint: m);
@include mq($from: m) {
grid-template-areas:
'checklist checklist call-to-action call-to-action'
'offers offers offers _';
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto;
}
}
.home-stage__checklist {
--bullet-list-spacing: calc(var(--home-stage-benefits-inner-gap) / 2);
font-weight: var(--font-weight-semibold);
grid-area: checklist;
padding-block: var(--home-stage-benefits-row-gap);
padding-inline: var(--inner-container-padding);
@include use-responsive-sizing(font-size, responsive-map(xs 2rem, xl 2.2rem));
@include mq($from: m) {
padding-block-end: calc(var(--home-stage-benefits-row-gap) * 2);
padding-inline-end: var(--home-stage-benefits-padding-inline);
padding-inline-start: 0;
}
}
.home-stage__call-to-action {
align-items: center;
background-color: var(--color-orange-light);
display: flex;
flex-direction: column;
gap: var(--home-stage-benefits-inner-gap);
grid-area: call-to-action;
justify-content: center;
padding-block: var(--home-stage-benefits-row-gap);
padding-inline: var(--inner-container-padding);
position: relative;
text-align: center;
&::after {
background-color: var(--color-orange-light);
content: '';
inline-size: 100vw;
inset-block: 0;
inset-inline-start: 100%;
position: absolute;
}
@include mq($from: m) {
align-items: flex-start;
padding-block-end: calc(var(--home-stage-benefits-row-gap) * 2);
padding-inline-end: 0;
padding-inline-start: var(--home-stage-benefits-padding-inline);
text-align: start;
}
}
.home-stage__call-to-action-icon {
color: var(--color-orange);
inset-block-start: 0;
inset-inline: 50%;
position: absolute;
transform: translate(-50%, -50%);
@include use-responsive-sizing(font-size, responsive-map(xs 6rem, xl 8rem));
@include mq($from: m) {
inset-block-start: 50%;
inset-inline-end: auto;
inset-inline-start: 0;
transform: translate(-50%, calc(-50% - (var(--home-stage-benefits-row-gap) / 2)));
}
}
.home-stage__offers {
background-color: var(--color-cyan-light);
display: flex;
flex-direction: column;
gap: var(--home-stage-benefits-inner-gap);
grid-area: offers;
padding-block: var(--home-stage-benefits-row-gap);
padding-inline: var(--inner-container-padding);
position: relative;
text-align: center;
&::before {
background-color: var(--color-cyan-light);
content: '';
inline-size: 100vw;
inset-block: 0;
inset-inline-end: 100%;
position: absolute;
}
@include mq($from: m) {
margin-block-start: calc(var(--home-stage-benefits-row-gap) * -1);
padding-inline-end: var(--home-stage-benefits-padding-inline);
padding-inline-start: 0;
}
}
.home-stage__offers-icon {
color: var(--color-orange);
inset-block-start: 0;
inset-inline: 50%;
position: absolute;
transform: translate(-50%, -50%) rotate(-45deg);
@include use-responsive-sizing(font-size, responsive-map(xs 8rem, xl 12rem));
@include mq($from: m) {
inset-inline-end: 0;
inset-inline-start: auto;
transform: translate(50%, -25%) rotate(0);
}
}
.home-stage__offers-headline {
margin-inline: auto;
max-inline-size: 60rem;
}
.home-stage__offers-grid {
display: grid;
row-gap: 3rem;
@include use-responsive-sizing(column-gap, $gaps);
@include mq($from: 500px) {
grid-template-columns: 1fr 1fr;
row-gap: 4rem;
}
}
.home-stage__offers-grid-cell {
display: flex;
flex-direction: column-reverse;
}
.home-stage__offer {
--home-stage-offer-color: var(--color-orange);
display: block;
&:any-link:is(:hover:not([disabled]), :focus:not(.has-invisible-focus)) {
--home-stage-offer-color: var(--color-midnight);
}
}
.home-stage__offer-text {
color: var(--home-stage-offer-color);
display: block;
font-family: var(--font-family-indie-flower);
font-size: 10rem;
transition-property: color;
}
.home-stage__offer-label {
display: block;
font-size: 1.6rem;
margin-block-start: 1rem;
}
No notes defined.