/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

@font-face {
    font-family: "ReplicaLLWeb-Regular";
    src: url("fonts/ReplicaLLWeb-Regular.woff") format("woff");
}

@font-face {
    font-family: "ReplicaLLWeb-Regular";
    src: url("fonts/ReplicaLLWeb-Regular.woff2") format("woff2");
}

/* subset */

@font-face {
    font-family: "ReplicaLLSub-RegularSubset";
    src: url("fonts/ReplicaLLSub-RegularSubset.woff2") format("woff2");
}

@font-face {
    font-family: "ReplicaLLSub-RegularSubset";
    src: url("fonts/ReplicaLLSub-RegularSubset.woff") format("woff");
}

/* ----------------------------------------------------------------
	Brand colors
-----------------------------------------------------------------*/

:root {
    /* Existing theme color, mirrors $theme-color in sass/_variables.scss */
    --staminea-blue: #6a79ab;
    /* Headings, navigation and body copy on light backgrounds */
    --staminea-blue-dark: #2d3e86;
    /* Accent */
    --staminea-coral: #e08175;
    /* Alternating section band (hero CTA, job rows, position card) */
    --staminea-gray: #f5f5f5;
    /* Slightly lighter band used by the value columns, matches the
       "Grau" option of the references brick */
    --staminea-gray-light: #f9f9f9;
    /* Near-black used for value headings and team first names */
    --staminea-ink: #262625;
    /* Muted body copy inside the value columns */
    --staminea-body: #4d4d4d;
    /* Hero caption box */
    --staminea-hero-caption: rgba(69, 64, 57, 1);
}

h2 {
    color: var(--staminea-blue);
    text-transform: uppercase;
}

/* ----------------------------------------------------------------
	Primary navigation — blue by default, coral on hover/active
-----------------------------------------------------------------*/

.primary-menu .menu-link {
    color: var(--staminea-blue-dark);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.primary-menu .menu-item:hover>.menu-link,
.primary-menu .menu-item.current>.menu-link {
    color: var(--staminea-coral);
}

/* Dropdown (sub menu) entries follow the same scheme */
.primary-menu .sub-menu-container .menu-item>.menu-link {
    color: var(--staminea-blue-dark);
    transition: color 0.3s ease;
}

.primary-menu .sub-menu-container .menu-item:hover>.menu-link,
.primary-menu .sub-menu-container .menu-item.current>.menu-link {
    color: var(--staminea-coral);
}

/* ----------------------------------------------------------------
	Header layout — menu left, logo right (desktop)
-----------------------------------------------------------------*/

.header-logo {
    position: relative;
    display: flex;
    align-items: center;
    max-height: 100%;
    /* Below 992px the menu collapses, so keep the logo left and
       push #primary-menu-trigger to the right, as before. */
    margin-right: auto;
    padding-right: 1.5rem;
}

@media (min-width: 992px) {
    #header .header-row>.primary-menu {
        order: 1;
    }

    #header .header-row>.header-logo {
        order: 2;
        margin-right: 0;
        margin-left: auto;
        padding-right: 0;
        padding-left: 1.5rem;
    }
}

/* ================================================================
	Website relaunch 2025 — components from var/design/*.pdf

	Shared building blocks first, then one block per areabrick in the
	order the mock-up pages introduce them.
   ================================================================ */

/* ----------------------------------------------------------------
	Shared section rhythm & typography
-----------------------------------------------------------------*/

.staminea-section {
    padding: 80px 0;
}

.staminea-section--tight {
    padding: 3rem 0;
}

.staminea-section--gray {
    background-color: var(--staminea-gray-light);
}

/* Full-bleed sections break out of .container to sit edge to edge */
.staminea-section--bleed {
    padding-left: 0;
    padding-right: 0;
}

/* Section eyebrow, e.g. "TEAM", "SOCIAL WALL", "PROJEKTE: NEUBAU" */
.staminea-eyebrow {
    color: var(--staminea-blue-dark);
    text-transform: uppercase;
    margin-bottom: 2rem;
}

/* Oversized page heading, e.g. "LEISTUNGEN & PROJEKTE" */
.staminea-page-title {
    color: var(--staminea-blue-dark);
    text-transform: uppercase;
    margin-bottom: 0;
}

/* Underlined text link with a trailing chevron, e.g. "PROJEKTE >" */
.staminea-link {
    color: var(--staminea-blue);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.staminea-link:hover,
.staminea-link:focus {
    color: var(--staminea-coral);
    text-decoration: underline;
}

.staminea-link--dark {
    color: var(--staminea-blue-dark);
}

/* Circular badge, e.g. "OFFENE STELLEN" */
.staminea-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 148px;
    height: 148px;
    padding: 12px;
    border-radius: 50%;
    background-color: var(--staminea-coral);
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.staminea-badge:hover,
.staminea-badge:focus {
    background-color: var(--staminea-blue);
    color: #fff;
    transform: scale(1.04);
}

.staminea-badge--blue {
    background-color: var(--staminea-blue);
}

.staminea-badge--blue:hover,
.staminea-badge--blue:focus {
    background-color: var(--staminea-coral);
}

/* Small square chevron button used on the project tiles */
.staminea-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    background-color: var(--staminea-blue);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    transition: background-color 0.3s ease;
}

.staminea-arrow:hover,
.staminea-arrow:focus {
    color: #fff;
}

/* Heading with the brand-blue rule underneath (value columns, team names) */
.staminea-ruled-heading {
    color: var(--staminea-ink);
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--staminea-blue);
}

/* ----------------------------------------------------------------
	Hero slider (HeroSlider) — the Canvas swiper slider from templates/includes/
	slider.html.twig, restyled with a caption box and the overlapping "offene
	Stellen" badge. `.area-hero-slider` sits on the .slider-wrapper, not the
	<section>, because the badge is a sibling of the section (see the partial).
-----------------------------------------------------------------*/

.area-hero-slider {
    position: relative;
}

/* The Canvas theme paints .slider-caption dark unless the caption itself carries
   .dark; the hero sits on a photo, so the light scheme is forced back on. These
   selectors tie with the theme's on specificity and win because custom.css is
   linked after style.css. */
.area-hero-slider .slider-caption,
.area-hero-slider .slider-caption h1,
.area-hero-slider .slider-caption h2 {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* The first slide's title is an <h1 class="h2"> so the page keeps a single h1, every later
   one an <h2>. Both are listed here so they render identically — the Canvas theme and
   Bootstrap only agree on `h2`, which is what left the first slide unstyled. `margin-bottom`
   is spelled out because the theme sets it on `.slider-caption h2` alone. A `>` selector is
   not usable: in editmode `_block.blockStart()` wraps the slide in .pimcore_block_entry. */
.area-hero-slider .slider-caption h1,
.area-hero-slider .slider-caption h2 {
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: 0;
    padding: 0;
}

/* The caption box under the title. The colour sits on the whole WYSIWYG block, so several
   paragraphs read as one box instead of one box per <p>. The block is only rendered when it
   has content (see slider.html.twig), which is what used to be `p:empty { display: none }`. */
.area-hero-slider .slider-caption .d-block {
    max-width: 560px;
    margin-top: 28px;
    padding: 22px 28px;
    background-color: var(--staminea-hero-caption);
    text-align: left;
    text-shadow: none;
}

.area-hero-slider .slider-caption .d-block> :last-child {
    margin-bottom: 0;
}

/* Badge hangs over the bottom edge of the hero */
.area-hero-slider .hero-badge {
    position: absolute;
    right: 14%;
    bottom: -56px;
    z-index: 10;
}

.area-hero-slider .slider-arrow-left,
.area-hero-slider .slider-arrow-right {
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Editmode only. Quill mounts its toolbar as a sibling above the editor inside the Pimcore
   editable wrapper, i.e. inside .d-block, so it sits on the dark caption colour — give the
   controls a light plate so they stay readable. These selectors never match in the frontend,
   where no Quill is loaded, so they can live in the normal stylesheet. */
.area-hero-slider .slider-caption .ql-toolbar.ql-snow {
    background-color: #fff;
    border-radius: 3px;
}

.area-hero-slider .slider-caption .ql-container.ql-snow {
    border-color: rgba(255, 255, 255, 0.35);
}

.area-hero-slider .slider-caption .ql-editor.ql-blank::before {
    color: rgba(255, 255, 255, 0.55);
}

/* style.css:29445 pins .slider-logo to a hard 146x146 with no object-fit, which
   was fine while the `icon` thumbnail framed everything square. It is scale-only
   now (so SVG logos stay vector), so a non-square logo would stretch. */
.slider-wrapper .slider-logo {
    object-fit: contain;
}

/* ----------------------------------------------------------------
	Slider in editmode (Slider, HeroSlider)

	templates/includes/slider.html.twig drops every hook the Canvas theme keys on
	(#slider, .slider-element, .swiper_wrapper, .swiper-slide) while editing, so
	Swiper never initialises and cannot hijack the mouse inside the WYSIWYG. That
	leaves the slides to lay themselves out: stack them and keep them all visible.
	No overflow: hidden here — Quill's header dropdown must not be clipped.
-----------------------------------------------------------------*/

.slider-editmode-element {
    position: relative;
    width: 100%;
}

.slider-editmode-slide {
    position: relative;
    padding: 48px 0;
    margin-bottom: 12px;
    background-color: #3a3a3a;
}

/* ----------------------------------------------------------------
	Contact CTA band (ContactCta)
-----------------------------------------------------------------*/

.area-contact-cta {
    background-color: var(--staminea-gray);
    padding: 44px 0;
}

.area-contact-cta .cta-questions {
    color: var(--staminea-blue);
    margin-bottom: 0;
}

/* Keep the questions clear of the hero badge that overlaps this band */
.area-contact-cta--badge-offset {
    padding-top: 64px;
}

/* ----------------------------------------------------------------
	Service list (ServiceList) — "Leistungen & Projekte" overview
-----------------------------------------------------------------*/

.area-service-list .service-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
    padding: 44px 0;
    border-bottom: 2px solid var(--staminea-blue);
}

.area-service-list .service-row:first-child {
    border-top: 2px solid var(--staminea-blue);
}

.area-service-list .service-icons {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
    width: 250px;
}

.area-service-list .service-icons img {
    width: 76px;
    height: 76px;
    object-fit: contain;
}

.area-service-list .service-body {
    flex: 1 1 320px;
}

.area-service-list .service-title {
    color: var(--staminea-blue-dark);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.area-service-list .service-text {
    color: var(--staminea-blue-dark);
    margin-bottom: 0;
}

.area-service-list .service-link {
    flex: 0 0 auto;
    margin-left: auto;
    align-self: flex-end;
}

/* ----------------------------------------------------------------
	Icon row (IconRow) — three oversized illustrations
-----------------------------------------------------------------*/

.area-icon-row .icon-row-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 40px;
}

.area-icon-row .icon-row-item img {
    width: 100%;
    max-width: 210px;
    /* The `icon` thumbnail is scale-only so uploaded SVGs stay vector (any other
       transformation makes Pimcore rasterize them), which means it no longer pads
       to a square. CSS holds the box instead, so rows stay evenly tall. */
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* ----------------------------------------------------------------
	Icon teaser row (IconTeaserRow) — a repeatable row of uploaded icons,
	each optionally linked. Same visual language as the icon row above; the
	count is editor-driven, so the grid has to survive any number of items.
-----------------------------------------------------------------*/

.area-icon-teaser-row .icon-teaser-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 40px;
}

.area-icon-teaser-row .icon-teaser-item img {
    width: 100%;
    max-width: 210px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* ----------------------------------------------------------------
	Value columns (ValueColumns) — "Mehrwert" / company values
-----------------------------------------------------------------*/

.area-value-columns .value-heading {
    color: var(--staminea-ink);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--staminea-blue);
}

.area-value-columns .value-text,
.area-value-columns .value-text p {
    color: var(--staminea-body);
}

.area-value-columns .value-text p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------
	Project tiles (ProjectTiles) and the references listing — image
	with a caption and a chevron button underneath
-----------------------------------------------------------------*/

.staminea-tile {
    display: block;
    margin-bottom: 44px;
}

.staminea-tile-image {
    display: block;
    overflow: hidden;
}

.staminea-tile-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.staminea-tile:hover .staminea-tile-image img {
    transform: scale(1.03);
}

.staminea-tile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
}

.staminea-tile-caption {
    color: var(--staminea-blue-dark);
    transition: color 0.3s ease;
}

.staminea-tile:hover .staminea-tile-caption {
    color: var(--staminea-coral);
}

.staminea-tile:hover .staminea-arrow {
    background-color: var(--staminea-coral);
}

/* ----------------------------------------------------------------
	News cards (News areabrick, templates/includes/news-card.html.twig)

	The card is a .staminea-tile with two extra lines, so the image
	hover and the chevron come from the block above. Bootstrap's
	col-lg-4 / col-md-6 carries the 3/2/1-up responsiveness; only the
	typography lives here.
-----------------------------------------------------------------*/

.staminea-news-date {
    display: block;
    padding-top: 14px;
    color: var(--staminea-blue);
    text-transform: uppercase;
}

/* The date already supplies the gap under the image on a news card. */
.staminea-news-card .staminea-news-date+.staminea-tile-footer {
    padding-top: 4px;
}

.staminea-news-teaser {
    display: block;
    padding-top: 10px;
    color: var(--staminea-body);
}

/* ----------------------------------------------------------------
	News detail page (templates/news/detail.html.twig)

	The hero slider sits flush above the section, so the back bar
	carries the top spacing rather than stacking with it.
-----------------------------------------------------------------*/

.news-detail .news-back-bar {
    padding-top: 8px;
}

.news-detail .news-lead {
    color: var(--staminea-blue-dark);
    margin-bottom: 28px;
}

.news-detail .news-body {
    max-width: 820px;
    color: var(--staminea-body);
    line-height: 1.75;
}

.news-detail .news-body h2,
.news-detail .news-body h3 {
    color: var(--staminea-blue-dark);
}

.news-detail .news-body img {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------------------------------
	Team (TeamCarousel, TeamGrid)
-----------------------------------------------------------------*/

/* Name line: first name near-black, surname brand blue, blue rule */
.staminea-team-name {
    display: block;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 5px solid var(--staminea-blue);
}

.staminea-team-name .name-first {
    color: var(--staminea-ink);
}

.staminea-team-name .name-last {
    color: var(--staminea-blue);
}

.staminea-team-meta,
.staminea-team-meta p {
    color: var(--staminea-body);
}

.staminea-team-photo {
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--staminea-gray);
}

/* Portrait cross-fade: TeamMember.imageHover stacks on the base photo and fades
   in on hover. Both come through the same teamPortrait 600x750 cover crop, so
   they register exactly; only the base image is in flow, so it still sets the
   wrapper's height. Restores the effect the retired #team brick had
   (style.scss:159) — those rules are scoped under an id only that brick emits. */
.staminea-team-photo-wrap {
    position: relative;
}

/* The carousel links the face; an inline <a> around block images would add a
   baseline gap under the portrait. */
.staminea-team-photo-link {
    display: block;
}

/* Only this one animates. Fading the base out at the same time — as the legacy
   rules did — leaves both at ~50% mid-transition and the page washes through;
   the hover crop is opaque and covers the base exactly, so fading it in alone
   gives a clean dissolve. */
.staminea-team-photo--hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Only where hovering is real: on touch :hover sticks after a tap, and the
   carousel's linked portraits would stay swapped after being pressed. */
@media (hover: hover) {
    .staminea-team-photo-wrap:hover .staminea-team-photo--hover {
        opacity: 1;
    }
}

/* Spelled out rather than Bootstrap's .pt-3, so the grid below can override it
   — the utility class carries !important and would always win. */
.staminea-team-body {
    display: block;
    padding-top: 16px;
}

/* An open position mirrors a member card but is entirely coral */
.staminea-team-position {
    display: flex;
    flex-direction: column;
}

/* Same 4:5 box as the teamPortrait thumbnail (600x750), so a position slide is
   exactly as tall as the member slides it sits between — with or without an
   avatar, since the silhouette is centred in the same box. */
.staminea-team-position .position-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--staminea-gray);
    aspect-ratio: 600 / 750;
    overflow: hidden;
    text-align: center;
}

.staminea-team-position .position-silhouette {
    width: 100%;
    height: auto;
    color: var(--staminea-coral);
}

.staminea-team-position .staminea-team-name,
.staminea-team-position .position-meta,
.staminea-team-position .position-link {
    color: var(--staminea-coral);
}

.staminea-team-position .position-meta {}

.staminea-team-position .position-lead {
    color: var(--staminea-body);
    margin-top: 0.5rem;
}

.staminea-team-position .position-link {}

/* Swiper carousel used on the home page. Slide widths come from the
   breakpoints in public/static/js/main.js, so nothing here sets one. */
.area-team-carousel .swiper-container {
    /* Swiper clips to this box; the arrows sit inside it. */
    padding-bottom: 0.5rem;
}

.area-team-carousel .swiper-slide {
    /* Cards are of unequal height. Without this Swiper stretches every slide to
       the tallest one and the coral position card grows a gap under its text. */
    height: auto;
}

/* swiper.css draws the arrows from its own icon font and sizes them off
   --swiper-navigation-size. Swiper clips to .swiper-container, so they cannot be
   moved outside the cards — hence the plate, which keeps them readable over any
   portrait. Overriding the box means re-stating margin-top, which swiper.css
   derives from the icon size to centre them. */
.area-team-carousel .swiper-button-next,
.area-team-carousel .swiper-button-prev {
    --swiper-navigation-size: 20px;
    --swiper-navigation-color: var(--staminea-blue-dark);
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.area-team-carousel .swiper-button-prev {
    left: 8px;
}

.area-team-carousel .swiper-button-next {
    right: 8px;
}

/* Editmode preview: no Swiper in the editor, just columns of cards. */
.area-team-carousel .team-editmode-track>[class^="col"] {
    margin-bottom: 24px;
}

/* Two-column grid used on the "Wir & Du" page. Both card types lay out the same
   way here — figure left, body right — so an opening blended into the roster
   keeps the rhythm of the member rows around it. (In the carousel both stay
   stacked; that is the base rule.) */
.area-team-grid .staminea-team-member,
.area-team-grid .staminea-team-position {
    display: flex;
    flex-direction: row;
    gap: 0;
    margin-bottom: 3rem;
}

.area-team-grid .staminea-team-photo-wrap {
    flex: 0 0 50%;
    max-width: 50%;
}

/* Same column as a member's photo, keeping the 4:5 box of the base rule.
   flex-start stops the coral box being stretched to the body's height — the
   image in a member card is not stretched either. */
.area-team-grid .staminea-team-position .position-figure {
    flex: 0 0 50%;
    max-width: 50%;
    align-self: flex-start;
}

/* Direct children only: .staminea-team-body is also the class the carousel
   cards use, and there it keeps the base padding. */
.area-team-grid .staminea-team-member>.staminea-team-body,
.area-team-grid .staminea-team-position>.staminea-team-body {
    flex: 1 1 auto;
    padding-top: 4px;
}

/* ----------------------------------------------------------------
	Social wall (SocialWall) — the three latest Instagram posts
-----------------------------------------------------------------*/

.area-social-wall .social-intro {
    color: var(--staminea-blue-dark);
    margin-bottom: 2rem;
}

.area-social-wall .social-intro a {
    color: var(--staminea-coral);
}

.area-social-wall .social-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    border: 1px solid #ededed;
}

.area-social-wall .social-post-image {
    width: 100%;
    height: auto;
    display: block;
}

.area-social-wall .social-post-body {
    padding: 18px;
}

.area-social-wall .social-post-text {
    color: var(--staminea-body);
    margin-bottom: 1rem;
}

.area-social-wall .social-post-account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--staminea-ink);
}

.area-social-wall .social-post-account .account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #d7d7d7;
    color: var(--staminea-ink);
}

.area-social-wall .social-post-account small {
    color: var(--staminea-body);
}

/* ----------------------------------------------------------------
	Job list (JobList) — open positions, coral on hover
-----------------------------------------------------------------*/

.area-job-list .job-intro {
    color: var(--staminea-blue-dark);
}

.area-job-list .job-row {
    display: block;
    background-color: var(--staminea-gray);
    padding: 44px 0;
    transition: background-color 0.3s ease;
}

.area-job-list .job-row+.job-row {
    border-top: 1px solid #fff;
}

.area-job-list .job-row:hover,
.area-job-list .job-row:focus {
    background-color: var(--staminea-coral);
}

.area-job-list .job-label {
    color: var(--staminea-blue-dark);
    margin-bottom: 10px;
}

.area-job-list .job-title {
    color: var(--staminea-blue-dark);
    text-transform: uppercase;
    margin-bottom: 2.5rem;
}

/* The OpenPosition body, rendered inline because no detail page reads these
   objects yet — see the JobDetail brick, which is still hand-typed. */
.area-job-list .job-description,
.area-job-list .job-description p {
    color: var(--staminea-blue-dark);
}

.area-job-list .job-description {
    margin-bottom: 2.5rem;
}

.area-job-list .job-description> :last-child {
    margin-bottom: 0;
}

.area-job-list .job-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.area-job-list .job-tagline {
    color: var(--staminea-blue-dark);
    margin-bottom: 0;
}

/* ----------------------------------------------------------------
	Job detail (JobDetail) — single job description
-----------------------------------------------------------------*/

.area-job-detail .job-detail-title {
    color: var(--staminea-blue-dark);
    text-transform: uppercase;
    margin-bottom: 2.75rem;
}

.area-job-detail .job-detail-start {
    color: var(--staminea-blue-dark);
    margin-bottom: 20px;
}

.area-job-detail .job-detail-role {
    color: var(--staminea-coral);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.area-job-detail .job-detail-scope {
    color: var(--staminea-blue-dark);
    margin-bottom: 2rem;
}

.area-job-detail .job-detail-body,
.area-job-detail .job-detail-body p,
.area-job-detail .job-detail-body li {
    color: var(--staminea-blue-dark);
}

.area-job-detail .job-detail-body ul {
    padding-left: 20px;
    margin-bottom: 28px;
}

.area-job-detail .job-detail-body li {
    margin-bottom: 8px;
}

.area-job-detail .job-detail-apply {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
}

.area-job-detail .job-detail-apply .staminea-link {
    color: var(--staminea-coral);
}

.area-job-detail .job-detail-apply .staminea-link:hover {
    color: var(--staminea-blue-dark);
}

/* ----------------------------------------------------------------
	Reference detail page (templates/reference/detail.html.twig)
-----------------------------------------------------------------*/

.reference-detail .reference-back,
.position-detail .reference-back,
.news-detail .reference-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 36px;
    background-color: var(--staminea-blue);
    color: #fff;
    transition: background-color 0.3s ease;
}

.reference-detail .reference-back:hover,
.reference-detail .reference-back:focus,
.position-detail .reference-back:hover,
.position-detail .reference-back:focus,
.news-detail .reference-back:hover,
.news-detail .reference-back:focus {
    background-color: var(--staminea-coral);
    color: #fff;
}

/* ----------------------------------------------------------------
	Open position detail page (templates/team/position-detail.html.twig)

	The page is the shared .area-job-detail section with a back button
	above it, so the section's own top padding moves onto that bar
	rather than stacking with it.
-----------------------------------------------------------------*/

.position-detail .position-back-bar {
    padding-top: 80px;
}

.position-detail .area-job-detail {
    padding-top: 0;
}

.reference-detail .reference-title {
    color: var(--staminea-blue-dark);
    text-transform: uppercase;
    margin-bottom: 40px;
}

.reference-detail .reference-description,
.reference-detail .reference-description p,
.reference-detail .reference-description li {
    color: var(--staminea-blue-dark);
}

.reference-detail .reference-description ul {
    padding-left: 20px;
}

.reference-detail .reference-meta {
    color: var(--staminea-blue-dark);
    margin-bottom: 44px;
}

.reference-detail .reference-photos img {
    width: 100%;
    height: auto;
    display: block;
}

/* ----------------------------------------------------------------
	Contact page (templates/includes/contact.html.twig)
-----------------------------------------------------------------*/

.staminea-contact .contact-form-title {
    color: var(--staminea-ink);
    margin-bottom: 2rem;
}

.staminea-contact label {
    color: var(--staminea-ink);
    text-transform: uppercase;
}

.staminea-contact label small {
    color: var(--staminea-coral);
}

.staminea-contact .sm-form-control {
    border-radius: 0;
    border-color: #d5d5d5;
}

.staminea-contact .sm-form-control:focus {
    border-color: var(--staminea-blue);
    box-shadow: none;
}

/* The Canvas theme puts a text shadow on every .button and re-asserts it on
   .button:hover, so it has to be cleared in both states — the hover rule ties
   with this one on specificity and would otherwise decide it on source order. */
.staminea-contact .button {
    border-radius: 0;
    background-color: var(--staminea-blue);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: none;
    transition: background-color 0.3s ease;
}

.staminea-contact .button:hover {
    background-color: var(--staminea-coral);
    text-shadow: none;
}

.staminea-contact .contact-address {
    color: var(--staminea-ink);
}

.staminea-contact .contact-address a {
    color: var(--staminea-blue);
}

.staminea-contact .contact-address a:hover {
    color: var(--staminea-coral);
}

/* ----------------------------------------------------------------
	Footer — three columns on the brand blue
-----------------------------------------------------------------*/

#footer.staminea-footer {
    background-color: var(--staminea-blue);
    border-top: 0;
    color: #fff;
}

#footer.staminea-footer a {
    color: #fff;
}

#footer.staminea-footer a:hover,
#footer.staminea-footer a:focus {
    color: var(--staminea-coral);
}

#footer.staminea-footer .footer-widgets-wrap {
    padding: 72px 0 64px;
}

#footer.staminea-footer .footer-logo {
    display: block;
    width: 170px;
    max-width: 60%;
    height: auto;
    margin-bottom: 26px;
}

#footer.staminea-footer .footer-tagline,
#footer.staminea-footer .footer-tagline p {
    color: #fff;
    margin-bottom: 0;
}

#footer.staminea-footer .footer-address,
#footer.staminea-footer .footer-address p {
    color: #fff;
    margin-bottom: 0;
}

#footer.staminea-footer .footer-col-title {
    color: #fff;
    margin-bottom: 30px;
}

/* "Weiter Infos" link list — a white rule under every entry */
#footer.staminea-footer .footer-links a {
    display: block;
    padding: 12px 0;
    border-bottom: 2px solid #fff;
}

#footer.staminea-footer .footer-social {
    margin-top: 40px;
}

/* The Canvas theme fights every one of these with !important:
   .si-borderless kills the border (style.css:20525), #footer.dark dims the
   glyph to 50% white (style.css:28495) and .social-icon pins the line-height
   to 38px (style.css:20458). */
#footer.staminea-footer .footer-social .social-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 10px 0 0;
    border-radius: 0;
    color: #fff !important;
    font-size: 2.5rem;
    line-height: 3rem !important;
}

/* Beats the per-network brand colours (.si-facebook:hover & co, style.css:20592 ff.) */
#footer.staminea-footer .footer-social .social-icon:hover {
    background-color: #fff !important;
}

/* Beats .social-icon i:last-child { color: #FFF !important } (style.css:20484) */
#footer.staminea-footer .footer-social .social-icon:hover i {
    color: var(--staminea-blue) !important;
}

/* The theme's two-icon slide-up hover travels a hard-coded 38px
   (style.css:20487); it has to match the new box height. */
#footer.staminea-footer .footer-social .social-icon:hover i:first-child {
    margin-top: -3rem;
}

#footer.staminea-footer .footer-legal {
    margin-top: 56px;
}

#footer.staminea-footer .footer-legal a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wysiwyg-wrapper p {
    margin-bottom: 0;
    min-height: calc(1em * 1.2);
}

.wysiwyg-wrapper ul {
    padding-inline-start: 40px;
}

/* "Heading 3 - striking": the extra entry in the WYSIWYG's heading dropdown,
   registered in public/static/js/admin/quill-striking-heading.js. Unscoped on
   purpose — editmode renders the real page, so the editor previews it too. */
h3.striking {
    display: block;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 5px solid var(--staminea-blue);
}

/* Category index: the service description reads as a pair of text columns on
   wide screens. App\Controller\ReferenceController::categoryAction.

   Prose must be free to break across the gap. Forbidding break-inside on the
   paragraphs is what silently collapses this back to one column: a description
   written as a single <p> cannot be split, so it fills the first column and
   leaves the second one empty. Only the elements that genuinely must not be
   sliced are pinned, below. */
.category-description {
    margin-top: 56px;
    column-count: 2;
    column-gap: 48px;
    orphans: 2;
    widows: 2;
}

.category-description>*:first-child {
    margin-top: 0;
}

/* A heading may not be the last thing in a column, and these should not be cut
   in half — but a paragraph may split anywhere. */
.category-description h2,
.category-description h3,
.category-description h4,
.category-description h5,
.category-description h6 {
    break-after: avoid;
}

.category-description img,
.category-description figure,
.category-description table,
.category-description li {
    break-inside: avoid;
}

.category-description img {
    max-width: 100%;
    height: auto;
}

.category-index .category-empty {
    color: #888;
    margin-bottom: 40px;
}

/* ----------------------------------------------------------------
	Responsive adjustments
-----------------------------------------------------------------*/

@media (max-width: 991px) {
    .staminea-section {
        padding: 56px 0;
    }

    .category-description {
        column-count: 1;
        margin-top: 40px;
    }

    .area-hero-slider .hero-badge {
        right: 24px;
        bottom: -40px;
    }

    .staminea-badge {
        width: 112px;
        height: 112px;
    }

    .area-service-list .service-row {
        gap: 20px;
        padding: 32px 0;
    }

    .area-service-list .service-icons {
        width: auto;
    }

    .area-service-list .service-icons img {
        width: 58px;
        height: 58px;
    }

    .area-service-list .service-link {
        width: 100%;
        margin-left: 0;
        text-align: right;
    }

    .area-team-grid .staminea-team-member,
    .area-team-grid .staminea-team-position {
        flex-direction: column;
    }

    .area-team-grid .staminea-team-photo-wrap {
        flex-basis: auto;
        max-width: 100%;
    }

    /* align-self now governs the width, so flex-start would shrink the figure
       to its silhouette instead of filling the stacked card. */
    .area-team-grid .staminea-team-position .position-figure {
        flex-basis: auto;
        max-width: 100%;
        align-self: stretch;
    }

    #footer.staminea-footer .footer-widgets-wrap {
        padding: 48px 0 40px;
    }

    #footer.staminea-footer .footer-legal {
        margin-top: 32px;
    }
}

@media (max-width: 575px) {
    .area-job-list .job-title {
        margin-bottom: 24px;
    }

    .area-icon-row .icon-row-grid {
        gap: 24px;
    }

    .area-icon-row .icon-row-item img {
        max-width: 120px;
    }

    .area-icon-teaser-row .icon-teaser-grid {
        gap: 24px;
    }

    .area-icon-teaser-row .icon-teaser-item img {
        max-width: 120px;
    }
}