/*
Theme Name: Mouno Child
Theme URI: https://www.futury.eu
Description: Child theme for Mouno. All customisations for futury.eu belong here so that updates to the parent theme never overwrite them.
Author: Digital Leap
Author URI: https://digital-leap.de
Template: mouno
Version: 1.0.0
Requires PHP: 7.4
Text Domain: mouno-child
*/

/* Custom styles go below this line. */

/* =========================================================================
   IP-Toolbox (page “ip-toolbox”)
   Scoped to the section anchors set on the page, so the rules stay tied to
   this layout without depending on a post ID.
   ========================================================================= */

/* Band transitions (dark sections fading into the band below) are NOT here —
   they are Elementor gradients on the sections themselves, the same construct
   the frontpage uses (.elementor-element-42d8a1d). Background → Gradient, with
   a responsive colour stop per breakpoint so the fade always lands inside the
   section's bottom padding. Editable in the editor; nothing to override here. */

/* --- IP-Wiktionary -------------------------------------------------------
   TablePress table 1. Reproduces the scroll-box + sticky header of the source
   design: fixed term column, scrollable body, header pinned to the top. */

#wiktionary .elementor-shortcode {
	max-height: 500px;
	overflow: auto;
	border-radius: 12px;
}

#wiktionary .tablepress {
	width: 100%;
	min-width: 700px;
	margin: 0;
	border-collapse: separate;
	border-spacing: 4px;
	background: none;
}

#wiktionary .tablepress thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: #001A31;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: 600;
	text-align: left;
	padding: .8rem .9rem;
	border: 0;
}

/* Solid, not tinted. The section runs a #001A31 -> #C6DEF4 gradient behind the
   table, so a translucent cell would sit on dark at the top of the scroll box
   and on light at the bottom — unreadable at one end whichever colour is picked. */
#wiktionary .tablepress tbody td {
	background-color: #FFFFFF;
	color: #001A31;
	padding: .8rem .9rem;
	border: 0;
	vertical-align: top;
}

#wiktionary .tablepress tbody tr:hover td {
	background-color: #C6DEF4;
}

/* term column — fixed, like the 300px grid column in the source */
#wiktionary .tablepress th:first-child,
#wiktionary .tablepress td:first-child {
	width: 300px;
	font-weight: 600;
}

/* --- download cards ------------------------------------------------------
   A download tile is a container, not a pxl_link_box: title on top, one or two
   download buttons (DE / EN) pinned to the bottom. The widget can't be used
   here — it renders a single overlay <a class="pxl-item-link"> across the whole
   card, which would swallow the clicks on both buttons.

   Colour, radius, padding and shadow are set per card in Elementor; only the
   things Elementor has no control for live here. */

/* Card titles run long ("Checklist for the initial meeting between the founding
   team and…") and the tiles are narrow. Let long words break rather than push
   the card wider than its grid cell. */
.ip-download-card .pxl-heading-title {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
	margin: 0;
}

/* The theme gives every .btn `white-space: nowrap` and `width: fit-content`.
   That's right for the pills, but the wrapper around them is a block, so two
   buttons would each sit on their own line — shrink the wrapper to the pill. */
.ip-download-card .elementor-widget-pxl_button,
.ip-download-card .pxl-button-wrapper {
	width: auto;
}

/* --- section intros -------------------------------------------------------
   Every section opens with a headline and (usually) an intro paragraph before
   the card grid / table / logo wall. Give that block room to breathe. */

#praktisch > .e-con-inner > .elementor-widget-pxl_heading,
#prozesse > .e-con-inner > .elementor-widget-pxl_heading,
#anwendungsfaelle > .e-con-inner > .elementor-widget-pxl_heading,
#scorecard > .e-con-inner > .elementor-widget-pxl_heading,
#leitlinien > .e-con-inner > .elementor-widget-pxl_heading,
#checklisten > .e-con-inner > .elementor-widget-pxl_heading,
#wiktionary > .e-con-inner > .elementor-widget-pxl_heading,
#ip-support > .e-con-inner > .elementor-widget-pxl_heading,
#unis > .e-con-inner > .elementor-widget-pxl_heading {
	margin-bottom: 1.5rem;
}

#praktisch > .e-con-inner > .elementor-widget-pxl_text_editor,
#prozesse > .e-con-inner > .elementor-widget-pxl_text_editor,
#anwendungsfaelle > .e-con-inner > .elementor-widget-pxl_text_editor,
#scorecard > .e-con-inner > .elementor-widget-pxl_text_editor,
#leitlinien > .e-con-inner > .elementor-widget-pxl_text_editor,
#checklisten > .e-con-inner > .elementor-widget-pxl_text_editor,
#wiktionary > .e-con-inner > .elementor-widget-pxl_text_editor,
#ip-support > .e-con-inner > .elementor-widget-pxl_text_editor,
#unis > .e-con-inner > .elementor-widget-pxl_text_editor {
	margin-bottom: 1.5rem;
}

/* --- Personal Support -----------------------------------------------------
   Navy section with plain text links (booking, mail addresses). The theme
   colours every <a> with --link-color, which is navy here — invisible on the
   section's own background. */

#ip-support .elementor-widget-pxl_text_editor a {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#ip-support .elementor-widget-pxl_text_editor a:hover {
	color: #C6DEF4;
}

#ip-support .elementor-widget-pxl_heading {
	margin-bottom: 1rem;
}

/* IP-Scorecard is the one section that continues below its card grid (the
   step-by-step instructions and the disclaimer), so the grid needs a bottom
   margin of its own. */

#scorecard > .e-con-inner > .e-grid {
	margin-bottom: 1.5rem;
}

/* --- university logos ----------------------------------------------------- */

#unis .elementor-widget-image img {
	max-height: 90px;
	width: 100%;
	object-fit: contain;
}

/* --- contact form --------------------------------------------------------
   The widget uses the theme's own `form-style4` — the same class the footer
   newsletter uses (Footer 1 / Footer Main / _Footer mit FOR YOU), which gives
   the pill fields on a dark background. Three things form-style4 does not
   cover, added here:
     1. <select> — the theme styles input and textarea only.
     2. the submit button — unstyled in the theme.
     3. paired fields (the two dropdowns, PLZ + Ort) sitting on one row. */

/* 1. dropdowns, matched to the form-style4 input.

   The theme's JS (mouno/assets/js/theme.js, "Select Theme Style") replaces
   every .wpcf7-select with its own widget:

       <div class="pxl-select">
         <select class="wpcf7-select pxl-select-hidden">   <- visibility:hidden
         <div class="pxl-select-higthlight">Label</div>    <- the visible field
         <ul class="pxl-select-options"><li rel="…">…</li> <- the dropdown
       </div>

   so the field the user sees is the div, not the select. Both are styled: the
   div for the live page, the native select as the fallback for the moment
   before the JS runs (and if it never does). */

/* 1a. the visible field */
#kontakt .wpcf7 form.form-style4 .pxl-select .pxl-select-higthlight {
	height: 57px;
	padding: 18px 52px 18px 28px;
	border-radius: 100px;
	border: 1px solid #4b4b4b;
	background-color: rgba(255, 255, 255, .12);
	color: #fff;
	font-family: "Plus Jakarta Sans";
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
}

/* the theme's caret is a Caseicon pseudo-element in grey — too dark on the
   dark form, and sitting too close to the pill's edge */
#kontakt .wpcf7 form.form-style4 .pxl-select .pxl-select-higthlight:before,
#kontakt .wpcf7 form.form-style4 .pxl-select .pxl-select-higthlight.active:before {
	right: 16px;
	color: #fff;
}

/* the theme squares off the bottom corners while the list is open, which reads
   as a glitch on a pill — keep it round (theme uses !important) */
#kontakt .wpcf7 form.form-style4 .pxl-select .pxl-select-higthlight.active {
	border-bottom-left-radius: 100px !important;
	border-bottom-right-radius: 100px !important;
}

/* 1b. the dropdown panel — white card, matching the option colours below */
#kontakt .wpcf7 form.form-style4 .pxl-select .pxl-select-options {
	overflow-y: auto;
	padding: 10px;
	border-radius: 20px;
	color: #001A31;
}

#kontakt .wpcf7 form.form-style4 .pxl-select .pxl-select-options li {
	padding: 10px 18px;
	border-radius: 100px;
}

/* small gap between the pill and the open panel (0 in the theme) */
#kontakt .wpcf7 form.form-style4 .pxl-select .pxl-select-higthlight.active + .pxl-select-options {
	margin-top: 8px;
}

/* 1c. native select — pre-JS fallback */
#kontakt .wpcf7 form.form-style4 select {
	width: 100%;
	height: 57px;
	padding: 18px 28px;
	border-radius: 100px;
	border: 1px solid #4b4b4b;
	background-color: rgba(255, 255, 255, .12);
	color: #fff;
	font-family: "Plus Jakarta Sans";
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 22px center;
	background-size: 18px;
	padding-right: 52px;
}

#kontakt .wpcf7 form.form-style4 select option {
	color: #001A31;
	background-color: #fff;
}

/* 2. the submit button is not styled here at all — the form's own submit is
      hidden with .cf7-hidden-submit and a pxl_button widget
      (btn_action: pxl-atc-submit, submit_to_id: form-ip-toolbox) drives it,
      exactly as the footer newsletter does. Nothing to override. */

/* 3. rows — fields stack by default, paired fields share a row */
#kontakt .wpcf7 form.form-style4 p {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 16px;
}

/* CF7 separates the fields inside a <p> with <br>, and in a flex container
   every <br> becomes a flex item of its own — so the space between two fields
   ends up gap + <br> + gap, i.e. double. Drop them; the gap alone spaces the
   fields, and calc(50% - 8px) + 16px gap then adds up to exactly one row. */
#kontakt .wpcf7 form.form-style4 p br {
	display: none;
}

/* The theme spaces fields with a gutter system of its own: 15px padding-inline
   on every wrap (--pxl-spacing-inline), cancelled at the form edges by a
   negative margin-inline on the <p>. The margin reset above drops that
   negative margin, and the padding then stacks with the flex gap — 15 + 16 +
   15 between two fields in a row, and a 15px inset at the outer edges. Drop
   the padding and let the gap do the spacing on its own. */
#kontakt .wpcf7 form.form-style4 p .wpcf7-form-control-wrap {
	flex: 1 1 100%;
	max-width: 100%;
	margin: 0;
	padding-inline: 0;
}

#kontakt .wpcf7 form.form-style4 .cf7-row p .wpcf7-form-control-wrap {
	flex: 1 1 calc(50% - 8px);
	max-width: calc(50% - 8px);
}

@media screen and (max-width: 575px) {
	#kontakt .wpcf7 form.form-style4 .cf7-row p .wpcf7-form-control-wrap {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* =========================================================================
   Offer Directory (Elementor widget "offer_directory")
   Static-data UI spike for the Airtable "Offer Gallery" sync described in
   AIRTABLE-SYNC-PLAN.md — see class-offer-directory-widget.php for the
   sample data. No filter bar yet (client's call, revisit in 2-3 weeks).
   ========================================================================= */

.offer-directory-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

.offer-directory-filter-select {
	appearance: none;
	padding: 10px 40px 10px 20px;
	border-radius: 100px;
	border: 1px solid rgba(0, 26, 49, .25);
	background-color: #FFFFFF;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001A31' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px;
	color: #001A31;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

.offer-directory {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}

.offer-card {
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	overflow: hidden;
}

/* Featured image — real <img> when the offer has one (via "Vorschaubild"
   in Airtable), otherwise the placeholder box/icon below. */
.offer-card-image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, #C6DEF4, #FFFFFF);
	color: #001A31;
	overflow: hidden;
}

/* Two fits, picked per image in get_offer_image() rather than set once here.
   `cover` fills the card edge to edge and is right for the ~3:2 photos, which
   lose about 6% off the sides. It is wrong for the square Instagram graphics
   (37% of the height gone) and for the 3.3:1 banners (52% of the width gone) —
   on those the headline is the image, and cover crops it away. Those get
   `contain` and sit whole on the card's own pale-blue field. */
.offer-card-image img {
	width: 100%;
	height: 100%;
}

.offer-card-image--cover img {
	object-fit: cover;
}

.offer-card-image--contain img {
	object-fit: contain;
	/* Nothing is cropped, so the letterbox bars are visible; a flat CI tint
	   reads as a deliberate frame where the placeholder gradient would read as
	   a rendering fault. */
	padding: 12px;
}

.offer-card-image--contain {
	background: #EDF5FC;
}

.offer-directory-empty {
	font-family: Roboto, sans-serif;
	font-size: 16px;
	color: rgba(0, 26, 49, .6);
}

.offer-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 24px 24px;
}

.offer-card-eyebrow {
	margin: 0 0 8px;
	font-family: Poppins, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #001A31;
}

/* Event date — dd.mm.yyyy, single day or range. Sits between the eyebrow and
   the title so the "when" is readable before the "what". */
.offer-card-date {
	margin: 0 0 6px;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #35A4DD;
}

.offer-card-title {
	margin: 0 0 8px;
	font-family: Poppins, sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: #001A31;
}

.offer-card-description {
	margin: 0 0 16px;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(0, 26, 49, .8);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Revealed by assets/js/offer-card.js only on cards whose text is really being
   cut off — see the comment there. */
.offer-card-more {
	align-self: flex-start;
	margin: -8px 0 16px;
	padding: 0;
	border: 0;
	background: none;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #35A4DD;
	text-decoration: underline;
	cursor: pointer;
}

.offer-card-more:hover,
.offer-card-more:focus-visible {
	color: #001A31;
}

/* Format / Type and Benefits are two different Airtable vocabularies that
   overlap on several words ("Mentoring", "Networking"/"Network", "Ideation"),
   so they cannot look alike. Filled vs outlined rather than two fills: the
   distinction then survives greyscale and colour-vision deficiency, and the
   group caption carries it for anyone who reads rather than looks. */
.offer-card-tags {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.offer-card-tag-label {
	display: block;
	margin-bottom: 6px;
	font-family: Poppins, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(0, 26, 49, .5);
}

.offer-card-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.offer-card-pill {
	padding: 6px 14px;
	border: 1px solid transparent;
	border-radius: 100px;
	color: #001A31;
	font-family: Poppins, sans-serif;
	font-size: 12px;
	font-weight: 400;
}

/* Primary classification — the filled treatment the card already had. */
.offer-card-pill--type {
	background-color: #C6DEF4;
	border-color: #C6DEF4;
}

/* Secondary — outlined in the CI light blue. */
.offer-card-pill--benefit {
	background-color: transparent;
	border-color: #35A4DD;
}

/* Rendered only when it has content — see render_offer_card(). Without that
   guard the border-top drew a rule across the bottom of cards whose offer has
   neither a restriction nor a link. */
.offer-card-footer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid rgba(0, 26, 49, .1);
}

.offer-card-restriction {
	font-family: Roboto, sans-serif;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.4;
	color: rgba(0, 26, 49, .6);
}

/* One per line. Two of these on one line ("Open for all, Selection Process")
   need more width than the card has, which forced the footer wider than the
   card it sits in. Blocks rather than a <br> so the values stay separate
   elements and the line spacing is set here rather than by the markup. */
.offer-card-restriction-item {
	display: block;
}

.offer-card-link {
	/* Right-aligned on its own, so the footer needs no empty spacer element
	   when the restriction is missing. */
	margin-left: auto;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #001A31;
	text-decoration: underline;
	text-align: right;
}

.offer-directory-load-more {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.offer-directory-load-more-btn {
	padding: 14px 32px;
	border: 0;
	border-radius: 100px;
	background-color: #001A31;
	color: #FFFFFF;
	font-family: Poppins, sans-serif;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

/* Offer Teaser — the next N events plus a button through to the full directory.
   Reuses .offer-directory for the grid so the tiles stay identical to the
   directory's, per the client's "analog zum aktuellen Stand".

   The one override: the directory uses auto-fill so a short result set still
   lines up on the grid the rest of the page sits on, but the teaser has a fixed,
   small number of cards, where auto-fill leaves a dead empty column. auto-fit
   collapses those tracks so the 3 tiles share the full width instead. */
.offer-directory--teaser {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Styled as one of the front page's own section headings rather than as a
   module heading of its own: same face, same weights, same size ramp, same
   negative tracking as `.pxl-heading-title.heading-title-default`. Restated
   here instead of borrowing the theme's classes so the colour can be flipped
   for a navy section without fighting the theme's specificity.

   The bold half comes from the [highlight] shortcode in the headline field —
   "[highlight text="Upcoming"] events" — exactly as the neighbouring headings
   on the front page write theirs. */
.offer-teaser-headline {
	margin: 0 0 40px;
	font-family: var(--secondary-font), sans-serif;
	font-size: 48px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -1.44px;
	text-align: center;
	color: #001A31;
}

.offer-teaser-headline .pxl-text-highlight {
	font-weight: 700;
}

@media (max-width: 1399px) {
	.offer-teaser-headline {
		font-size: 46px;
	}
}

@media (max-width: 1199px) {
	.offer-teaser-headline {
		font-size: 44px;
	}
}

@media (max-width: 991px) {
	.offer-teaser-headline {
		font-size: 42px;
	}
}

@media (max-width: 767px) {
	.offer-teaser-headline {
		font-size: 40px;
	}
}

.offer-teaser-action {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.offer-teaser-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 100px;
	background-color: #001A31;
	color: #FFFFFF;
	font-family: Poppins, sans-serif;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.offer-teaser-btn:hover,
.offer-teaser-btn:focus {
	background-color: #35A4DD;
	color: #FFFFFF;
}

/* "Read more" overlay — a native <dialog>, so the backdrop, focus trap and Esc
   key are the browser's job rather than ours. */
.offer-dialog {
	width: min(560px, calc(100vw - 40px));
	max-height: calc(100vh - 80px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background-color: #FFFFFF;
	color: #001A31;
	overflow: auto;
}

.offer-dialog::backdrop {
	background-color: rgba(0, 26, 49, .55);
}

.offer-dialog-inner {
	position: relative;
	padding: 32px;
}

.offer-dialog-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background-color: rgba(0, 26, 49, .06);
	color: #001A31;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.offer-dialog-close:hover,
.offer-dialog-close:focus-visible {
	background-color: #C6DEF4;
}

.offer-dialog-title {
	margin: 0 0 16px;
	padding-right: 40px;
	font-family: Poppins, sans-serif;
	font-size: 24px;
	font-weight: 500;
	color: #001A31;
}

/* No clamp here — the whole point of the overlay is the text the card cut off. */
.offer-dialog-description {
	margin-bottom: 20px;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(0, 26, 49, .8);
}

.offer-dialog-description p {
	margin: 0 0 12px;
}

.offer-dialog-description p:last-child {
	margin-bottom: 0;
}

.offer-dialog-link {
	display: inline-block;
	margin-top: 4px;
	padding: 12px 28px;
	border-radius: 100px;
	background-color: #001A31;
	color: #FFFFFF;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.offer-dialog-link:hover,
.offer-dialog-link:focus {
	background-color: #35A4DD;
	color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
   The directory on the site's navy section background.

   The events page wraps the teaser and the directory in one Elementor
   container carrying `offer-section-dark` — #001A31 with the geometric
   artwork as a low-opacity overlay, the same treatment the front page gives
   its sections. The cards themselves need nothing: they are white boxes and
   read better on navy than on white. What needs flipping is everything drawn
   straight onto the section.

   Scoped to the class rather than the page, so the same section can be built
   anywhere without a second set of rules.
   --------------------------------------------------------------------------- */
.offer-section-dark .offer-teaser-headline {
	color: #FFFFFF;
}

.offer-section-dark .offer-directory-empty {
	color: rgba(255, 255, 255, .7);
}

/* The button is navy on navy otherwise — invisible. The light blue is the same
   CI accent that carries the active nav item and the card's date line. */
.offer-section-dark .offer-teaser-btn {
	background-color: #35A4DD;
}

.offer-section-dark .offer-teaser-btn:hover,
.offer-section-dark .offer-teaser-btn:focus {
	background-color: #FFFFFF;
	color: #001A31;
}

/* A drop shadow does nothing against navy. The cards keep their lift from a
   hairline instead, so they don't read as flat cut-outs. */
.offer-section-dark .offer-card {
	box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------------------
   Page subheadline — the line under the H1 in the blue title band.

   Printed by inc/page-subtitle.php on any page carrying a `page_subtitle_custom`
   value. It replaces a text widget that had two hand-set font sizes (20px, and
   17px on mobile); a clamp() covers every viewport in between instead, which is
   what the client meant by "fügt sich noch nicht an das Device an".

   The upper bound stays at 20px on purpose: the headline above it runs to 81px,
   and a subheadline that keeps growing with the viewport stops reading as one.
   --------------------------------------------------------------------------- */
.pxl-post-subtitle {
	max-width: 760px;
	margin: 22px auto 0;
	color: rgba(255, 255, 255, .88);
	font-size: clamp(16px, 1.6vw + 9px, 20px);
	line-height: 1.6;
	font-weight: 300;
}

/* ==========================================================================
   Futury Sommerfest (Seite "futury-sommerfest")
   Greift nur über die Body-Klasse dieser einen Seite. Deckt vier Dinge ab,
   für die Elementor/das Theme keine passende Kontrolle mitbringt:
   Bilder, die ihren Rahmen füllen sollen, gleich hoch abschließende
   Programmkarten, ein Chip, der nur so breit wie sein Text ist, und die
   Speaker-Liste ohne Aufzählungs-Icon.
   ========================================================================== */

/* .pxl-image-item hat im Theme width:fit-content — dadurch füllt ein Bild
   seinen Container nie. Für die Karten- und Abendbilder wollen wir das Gegenteil. */
/* Die Alumni-Summit-Seite (Body-Klasse `alumni-summit`) ist aus denselben
   Bausteinen gebaut wie Sommerfest- und Mentorenseite und teilt deshalb deren
   Regeln: Logowand (.sf-logo-row), Timeline (.mlp-tl-item) und Team-Karten auf
   Navy (.mlp-theme). Die Regeln greifen nur, wo die jeweilige Klasse gesetzt
   ist — die drei Seiten teilen sich also die Regel, nicht das Markup. */

:is(.futury-sommerfest, .alumni-summit) .sf-media .pxl-image-wrapper,
:is(.futury-sommerfest, .alumni-summit) .sf-media .pxl-image-item {
	width: 100%;
}
:is(.futury-sommerfest, .alumni-summit) .sf-media .pxl-image-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
:is(.futury-sommerfest, .alumni-summit) .sf-media-round .pxl-image-item {
	border-radius: 14px;
}
/* Das Financial-Times-Logo ist eine Grafik, kein Foto — nicht beschneiden. */
:is(.futury-sommerfest, .alumni-summit) .sf-media-contain .pxl-image-item {
	height: auto;
	border-radius: 16px;
}
:is(.futury-sommerfest, .alumni-summit) .sf-media-contain .pxl-image-item img {
	height: auto;
	object-fit: contain;
}

/* Programmkarten: Ersatz für die JS-Höhenangleichung der HTML-Vorlage.
   Der Karteninhalt streckt sich über die volle Kartenhöhe, der Anmelde-Button
   wird ans untere Ende geschoben — dadurch schließen alle vier Karten bündig
   ab, unabhängig davon, ob eine Karte eine Speaker-Liste, ein Partner-Logo
   oder gar nichts trägt. */
:is(.futury-sommerfest, .alumni-summit) .sf-card-body {
	/* Elementor setzt auf .e-con.e-flex die flex-Kurzschreibweise aus
	   --flex-grow/--flex-shrink/--flex-basis; ein einfaches flex-grow würde
	   davon überschrieben. */
	--flex-grow: 1;
}
:is(.futury-sommerfest, .alumni-summit) .sf-card-cta {
	margin-top: auto;
}

/* Chip "From 6:00 PM": nur so breit wie der Text — und nur so hoch.
   Elementor legt den Aussenabstand eines Widgets auf .elementor-widget-container
   und gibt derselben Box height:100%. Der Container traegt hier aber auch
   Hintergrund und Radius, also wuchs die Pille um die 20 px Abstand mit und
   der Text klebte oben. height:auto trennt beides: Pille 43 px, darunter 20 px
   Abstand. */
:is(.futury-sommerfest, .alumni-summit) .sf-chip {
	width: fit-content;
}
:is(.futury-sommerfest, .alumni-summit) .sf-chip .elementor-widget-container {
	height: auto;
}

/* Speaker-Liste: das pxl_list-Standard-Icon ist abgeschaltet, damit entfällt
   auch die dafür vorgesehene Lücke. */
:is(.futury-sommerfest, .alumni-summit) .sf-speakers .pxl-list-item {
	align-items: flex-start;
	gap: 0;
}
:is(.futury-sommerfest, .alumni-summit) .sf-speakers .pxl-list-item + .pxl-list-item {
	margin-top: 8px;
}

/* Startup-Fair-Logowand: 55 Logos aus 5 Dateiformaten mit sehr
   unterschiedlichen Seitenverhältnissen. Ohne feste Box wirken breite
   Wortmarken riesig und quadratische Logos winzig — deshalb bekommt jedes
   Logo denselben Platz und wird darin proportional eingepasst. Die weiße
   Kachel fängt zusätzlich die zehn JPG-Logos ab, die einen weißen
   Hintergrund eingebrannt haben und sonst als weiße Kästen auf dem
   hellblauen Grund stünden. */
/* Das Marquee des Themes ist fuer eine Handvoll Bilder gebaut: die beiden
   Kopien sind Flex-Kinder mit min-width:100%, werden also nur so breit wie der
   Viewport. Bei 27–28 Kacheln laeuft der Inhalt aus dieser Box heraus und die
   zweite Kopie liegt ueber der ersten — sichtbar als Ueberlappung. Mit
   width:max-content ist jede Kopie so breit wie ihr Inhalt, und der Versatz
   von translateX(100%) stimmt wieder. */
:is(.futury-sommerfest, .alumni-summit) .sf-logo-row .pxl-image-marquee-item {
	flex: 0 0 auto;
	width: max-content;
	min-width: 100%;
}

:is(.futury-sommerfest, .alumni-summit) .sf-logo-row .pxl-image-marquee-item img {
	/* Ohne flex-shrink:0 quetscht die Flex-Reihe die 55 Kacheln zusammen —
	   sie sind in Summe weit breiter als der Viewport. */
	flex: 0 0 auto;
	width: 150px;
	height: 64px;
	object-fit: contain;
	background: #fff;
	border-radius: 12px;
	padding: 10px 16px;
	box-sizing: content-box;
}

/* Support-Abschnitt: Zwischenüberschriften brauchen Luft nach oben, sonst
   kleben sie am Absatz davor. */
:is(.futury-sommerfest, .alumni-summit) .sf-support .pxl-text-editor-wrapper h4 {
	margin-top: 26px;
	margin-bottom: 6px;
}
:is(.futury-sommerfest, .alumni-summit) .sf-support .pxl-text-editor-wrapper p + p {
	margin-top: 14px;
}

/* Zwei der 55 Logos sind als reine Hell-Variante geliefert und auf der weißen
   Kachel praktisch unsichtbar: zeitcore ist reines Weiß, SaferSim nutzt
   #F5FBFC mit Neongrün. Sie bekommen deshalb eine dunkle Kachel — so bleiben
   die Markenfarben exakt wie geliefert, statt sie per Filter zu verfälschen.
   Sobald der Kunde dunkle Logo-Varianten liefert, kann dieser Block ersatzlos
   entfallen.

   Seit die Logowand selbst auf Navy liegt (Kundenwunsch 28.08.), ist die
   Kachel etwas heller als der Sektionsgrund und bekommt eine Kontur — sonst
   verschwindet die Kachelform in der Fläche und die beiden Logos schweben
   ohne Rahmen zwischen 53 gerahmten. */
:is(.futury-sommerfest, .alumni-summit) .sf-logo-row .pxl-image-marquee-item img[src*="zeitcore"],
:is(.futury-sommerfest, .alumni-summit) .sf-logo-row .pxl-image-marquee-item img[src*="SaferSim"] {
	background: #0E2A44;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

/* Das Theme-Widget kennt kein Pause-on-Hover — die Animation ist aber reines
   CSS, also genuegt animation-play-state. focus-within nimmt Tastaturnutzer mit.
   Beide Kopien einer Reihe muessen pausieren, sonst laufen sie auseinander. */
:is(.futury-sommerfest, .alumni-summit) .sf-logo-row:hover .pxl-image-marquee-item,
:is(.futury-sommerfest, .alumni-summit) .sf-logo-row:focus-within .pxl-image-marquee-item {
	animation-play-state: paused;
}

/* Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt die
   Logowand still. Die HTML-Vorlage hat das ebenso gehalten; das Theme-Marquee
   selbst beruecksichtigt es nicht. Bei angehaltener Animation wuerde die
   ltr-Reihe wegen justify-content:end ihr Ende zeigen — deshalb hier auf
   Anfang stellen. */
@media (prefers-reduced-motion: reduce) {
	:is(.futury-sommerfest, .alumni-summit) .sf-logo-row .pxl-image-marquee-item {
		animation: none;
	}
	:is(.futury-sommerfest, .alumni-summit) .sf-logo-row .pxl-image-marquee-wrapper.ltr {
		justify-content: flex-start;
	}
}

/* Sekundaerlink in der Programmkarte ("See the programme"). pxl_links hat im
   Content-Tab keine Farbkontrolle, der Theme-Default ist orange — hier auf die
   CI-Farbe gesetzt. Der Pfeil kommt per CSS, damit er nicht Teil des
   uebersetzbaren Strings ist. */
:is(.futury-sommerfest, .alumni-summit) .sf-card-more .pxl-links-item a {
	color: #001A31;
	font-size: 15px;
	font-weight: 600;
}
:is(.futury-sommerfest, .alumni-summit) .sf-card-more .pxl-links-item a:hover {
	color: #24395C;
}
:is(.futury-sommerfest, .alumni-summit) .sf-card-more .pxl-links-item a::after {
	content: " \2192";
	display: inline-block;
	transition: transform .2s ease;
}
:is(.futury-sommerfest, .alumni-summit) .sf-card-more .pxl-links-item a:hover::after {
	transform: translateX(4px);
}

/* ==========================================================================
   Mentor:innen Get-Together (Seite "mentors-meetup")
   Wie bei der Sommerfest-Seite nur ueber die Body-Klasse dieser einen Seite.
   ========================================================================== */

/* Badge "For Mentors" / "For Startups": nur so breit wie sein Text. */
:is(.mentors-get-together, .alumni-summit, .startup-support) .mlp-badge {
	width: fit-content;
}

/* Timeline: Schiene und Punkte. Das Theme bringt dafuer nichts mit, und das
   vorhandene timeline-widget-addon ist ein Drittanbieter-Plugin, das ohnehin
   abgeloest werden soll — deshalb Container plus diese paar Zeilen. */
:is(.mentors-get-together, .alumni-summit, .startup-support) .mlp-tl-item {
	position: relative;
}
:is(.mentors-get-together, .alumni-summit, .startup-support) .mlp-tl-item::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 10px;
	bottom: -10px;
	width: 2px;
	background: #001A311F;
}
:is(.mentors-get-together, .alumni-summit, .startup-support) .mlp-tl-item:last-child::before {
	display: none;
}
:is(.mentors-get-together, .alumni-summit, .startup-support) .mlp-tl-item::after {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #001A31;
}
:is(.mentors-get-together, .alumni-summit, .startup-support) .mlp-tl-item:first-child::after,
:is(.mentors-get-together, .alumni-summit, .startup-support) .mlp-tl-item:last-child::after {
	background: #001A31;
}

/* Sprungliste zu den Themeninseln — Ersatz fuer das <select> der Vorlage.
   pxl_links stapelt standardmaessig; hier als umbrechende Pill-Reihe. */
:is(.mentors-get-together, .alumni-summit, .startup-support) .mlp-jump .pxl-links-wrapper {
	/* pxl_links rendert ein schlichtes <ul> — die direction-Kontrolle des Widgets
	   wird im Template gar nicht ausgegeben. Also hier selbst zur Flex-Reihe machen. */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
/* Das <li> wuerde sonst die volle Zeilenbreite einnehmen — dann steht trotz
   Flex-Reihe jede Pille allein auf einer Zeile. */
:is(.mentors-get-together, .alumni-summit, .startup-support) .mlp-jump .pxl-links-item {
	flex: 0 0 auto;
	width: auto;
}
:is(.mentors-get-together, .alumni-summit, .startup-support) .mlp-jump .pxl-links-item a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid #001A3126;
	border-radius: 100px;
	color: #001A31;
	font-size: 15px;
	background: rgba(255, 255, 255, .55);
	transition: background .2s ease, border-color .2s ease;
}
:is(.mentors-get-together, .alumni-summit, .startup-support) .mlp-jump .pxl-links-item a:hover {
	background: #fff;
	border-color: #001A31;
	color: #001A31;
}

/* Anker sollen nicht unter dem klebrigen Header verschwinden. */
:is(.mentors-get-together, .alumni-summit, .startup-support) .mlp-theme,
:is(.mentors-get-together, .alumni-summit, .startup-support) [id="agenda"],
:is(.mentors-get-together, .alumni-summit, .startup-support) [id="topics"],
.startup-support [id="get-in-touch"],
.startup-support [id="fit"],
.company-builder [id="what-to-expect"] {
	scroll-margin-top: 110px;
}

/* Ein Mentor (Frank Vietze) hat kein Foto geliefert bekommen. pxl_team rendert
   den Bildbereich dann leer, wodurch die Karte aus der Reihe faellt. Neutrale
   Platzhalterflaeche, damit das Raster ausgerichtet bleibt — entfaellt von
   selbst, sobald ein Bild hinterlegt ist. */
:is(.mentors-get-together, .alumni-summit) .pxl-post-featured:not(:has(img)) {
	aspect-ratio: 1 / 1;
	background: linear-gradient(160deg, #C6DEF4 0%, #E6EFF9 100%);
	border-radius: 14px;
}

/* ---- Mentor-Karten: einheitliches, quadratisches Portraet ---- */
:is(.mentors-get-together, .alumni-summit) .pxl-post-featured,
:is(.mentors-get-together, .alumni-summit) .pxl-post-featured .pxl-featured-link {
	display: block;
	width: 100%;
}
:is(.mentors-get-together, .alumni-summit) .pxl-post-featured .pxl-featured-image {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	border-radius: 14px;
	display: block;
}

/* ---- Themeninsel-Abschnitt liegt jetzt auf Navy ---- */
:is(.mentors-get-together, .alumni-summit) .mlp-theme .pxl-post-title,
:is(.mentors-get-together, .alumni-summit) .mlp-theme .pxl-post-title .pxl-title-text {
	color: #fff;
}
:is(.mentors-get-together, .alumni-summit) .mlp-theme .pxl-post-position {
	color: rgba(255, 255, 255, .72);
}
/* Das LinkedIn-Icon sitzt beim Hover auf einer weissen Kreisflaeche, nicht auf
   dem dunklen Sektionshintergrund — es muss also dunkel bleiben. Vorher stand
   hier faelschlich color:#fff, wodurch weisses Icon auf weissem Kreis lag. */
:is(.mentors-get-together, .alumni-summit) .mlp-theme .pxl-post-socials .pxl-social-link {
	background-color: #fff;
	color: #001A31;
	transition: background-color .2s ease, color .2s ease;
}
:is(.mentors-get-together, .alumni-summit) .mlp-theme .pxl-post-socials .pxl-social-link:hover {
	background-color: #001A31;
	color: #fff;
}
:is(.mentors-get-together, .alumni-summit) .mlp-theme .pxl-post-socials .pxl-social-link svg {
	fill: currentColor;
}
/* Platzhalter fuer die Karte ohne Foto — auf dunklem Grund gedaempft. */
:is(.mentors-get-together, .alumni-summit) .pxl-post-featured:not(:has(img)) {
	aspect-ratio: 1 / 1;
	background: rgba(198, 222, 244, .16);
	border: 1px solid rgba(198, 222, 244, .28);
	border-radius: 14px;
}
/* Sprungliste auf dunklem Grund */
:is(.mentors-get-together, .alumni-summit) .mlp-jump .pxl-links-item a {
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .28);
}
:is(.mentors-get-together, .alumni-summit) .mlp-jump .pxl-links-item a:hover {
	background: #fff;
	border-color: #fff;
	color: #001A31;
}

/* =========================================================================
   Startup Fair (Seite "futury-startup-fair", Widget "startup_directory")
   Kartenform folgt der Programmkarte der Sommerfestseite: weiße Karte auf
   hellblauem Grund, Bild oben, Text und CTA darunter. Read-more und <dialog>
   sind dieselbe Mechanik wie beim Offer Directory (/events/) — nur die
   Klassenpräfixe unterscheiden sich, weil beide Karten unabhängig voneinander
   weiterentwickelt werden.
   ========================================================================= */

/* Filter als Pillenreihe, nicht als <select>. Die Optik ist die der
   Sprungliste auf der Mentorenseite (.mlp-jump) — dort steht dasselbe Muster
   für dieselbe Aufgabe, und sechs Themen auf einen Blick schlagen ein
   Aufklappmenü, das sie erst versteckt.

   Zwei der Clusternamen sind über 40 Zeichen lang; die Reihe bricht deshalb um
   und ist linksbündig statt zentriert, damit die zweite Zeile nicht unter der
   Mitte der ersten hängt. */
.startup-filter {
	margin-bottom: 40px;
}

.startup-filter-label {
	margin: 0 0 12px;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #001A31;
}

.startup-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.startup-filter-pill {
	flex: 0 0 auto;
	padding: 8px 16px;
	border: 1px solid #001A3126;
	border-radius: 100px;
	background: rgba(255, 255, 255, .55);
	color: #001A31;
	font-family: Poppins, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.startup-filter-pill:hover {
	background: #FFFFFF;
	border-color: #001A31;
}

/* Gedrückt: gefüllt statt nur umrandet. Der Unterschied trägt auch in
   Graustufen und bei Farbfehlsichtigkeit — aria-pressed trägt ihn für alle,
   die die Seite hören statt sehen. */
.startup-filter-pill.is-active {
	background: #001A31;
	border-color: #001A31;
	color: #FFFFFF;
}

.startup-cluster + .startup-cluster {
	margin-top: 56px;
}

/* Überschrift und Anzahl in einer Grundlinie. Die Zahl ist die einzige
   Information, die zwischen zwei Logoreihen wirklich neu ist — ein Eyebrow
   „FOCUS TOPICS" darüber würde nur wiederholen, was das Filterfeld schon sagt. */
.startup-cluster-head {
	margin-bottom: 24px;
}

/* Anzahl als Eyebrow über der Überschrift, in der Form, die das Theme für
   pxl_heading-Subtitles verwendet: versal, 1,6 px Laufweite, die Marke „//"
   vorangestellt. Neben der Überschrift war die Zahl zu unscheinbar — darüber
   ist sie die Zeile, mit der der Cluster anfängt. */
.startup-cluster-count {
	margin: 0 0 10px;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.6px;
	line-height: 1;
	text-transform: uppercase;
	color: rgba(0, 26, 49, .55);
}

.startup-cluster-mark {
	margin-right: 4px;
	color: #001A31;
}

.startup-cluster-title {
	margin: 0;
	font-family: Poppins, sans-serif;
	font-size: 28px;
	font-weight: 500;
	color: #001A31;
}

.startup-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	align-items: stretch;
}

.startup-card {
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	overflow: hidden;
}

/* Feste Kachelhöhe statt Seitenverhältnis pro Bild: die 68 Logos reichen von
   3,3:1-Bannern bis zu Quadraten, und nur ein gemeinsames Feld lässt die
   Reihe als Reihe lesen. Dieselbe Entscheidung wie bei der Logowand auf der
   Sommerfestseite, dort 150 × 64. */
.startup-card-logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	padding: 20px 24px;
	background: #FFFFFF;
	overflow: hidden;
}

/* Die Trennlinie als Auflage statt als Rahmen: die skalierten Logoleinwände
   dürfen über die Kachel hinausragen (siehe unten), und ein Rahmen läge dann
   unter dem weißen Rand des Bildes. */
.startup-card-logo::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: rgba(0, 26, 49, .08);
}

.startup-card-logo--placeholder::after {
	display: none;
}

.startup-card-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Gleich große Logos — die Bitte des Kunden vom 03.09.2026.
 *
 * Die Kachel war schon immer gleich groß; die Logos darin waren es nie. Zwei
 * Gründe, und beide muss man messen, statt sie zu schätzen:
 *
 * 1. Das Seitenverhältnis reicht von 0,67 : 1 (DION, hochkant) bis 8,67 : 1
 *    (BANKABLE, Balken). Wer alle gleich hoch macht, macht BANKABLE 486 px
 *    breit; die Karte kappt das auf 232 und der Balken steht wieder flacher
 *    als alles andere.
 * 2. Die Dateien tragen sehr unterschiedlich viel Rand. FlashX belegt 7,8 %
 *    seiner Leinwand, wtec 12 %, Lumos 21 % — 20 andere Dateien 100 %. Wer die
 *    Datei einpasst, passt bei diesen den Rand ein, nicht die Marke.
 *
 * Deshalb wird nicht die Datei ausgerichtet, sondern die Tinte:
 * tools/measure-startup-logo-ink.py vermisst je Logo das Rechteck, in dem etwas
 * zu sehen ist (Anleitung im README), das Widget skaliert
 * die Leinwand so, dass alle Marken dieselbe Fläche einnehmen (4096 px², also
 * 64 × 64 bei einem Quadrat), und verschiebt sie so, dass der Tintenmittelpunkt
 * in der Kachelmitte sitzt.
 *
 * Dass dabei bei elf Logos die Leinwand über die Kachel hinausragt, ist ohne
 * Folgen: ihre Ränder sind gemessen reines Weiß, und die Kachel ist weiß. */
.startup-card-logo--measured img {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: none;
	max-height: none;
	transform: translate(calc(-1 * var(--ink-x, 50%)), calc(-1 * var(--ink-y, 50%)));
}

/* Ohne Beitragsbild: Navy-Kachel mit dem Namen, wie in der Quelle. Sichtbar
   genug, dass ein fehlendes Logo auffällt, ohne die Reihe zu zerreißen. */
.startup-card-logo--placeholder {
	background: #001A31;
}

.startup-card-logo--placeholder span {
	font-family: Poppins, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	color: #FFFFFF;
}

.startup-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 24px 24px;
}

.startup-card-name {
	margin: 0 0 8px;
	font-family: Poppins, sans-serif;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.3;
	color: #001A31;
}

/* Ungekappt. Die 68 Beschreibungen sind 87–170 Zeichen lang — je ein Satz.
   Eine Klemme auf drei Zeilen hätte je nach Kartenbreite bei bis zur Hälfte um
   ein, zwei Wörter geschnitten und ein „Read more" nötig gemacht, das eine
   halbe Zeile nachreicht. Das Grid gleicht die Kartenhöhen je Reihe ohnehin an,
   also kostet der volle Text nichts ausser ein paar Pixeln Zeilenhöhe. */
.startup-card-description {
	margin: 0 0 16px;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(0, 26, 49, .8);
}


/* margin-top:auto zieht den Fuß nach unten, damit Badge und Button in einer
   Reihe gleicher Karten auf einer Linie stehen — auch wenn die Beschreibungen
   unterschiedlich lang sind. */
.startup-card-footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: auto;
}

.startup-card-location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: Roboto, sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: rgba(0, 26, 49, .65);
}

/* Navy statt des Akzentblaus, das die Offer-Karte benutzt: #35A4DD steht nicht
   in der Palette aus docs/PAGE-DESIGN-RULES.md, und ein sechster Blauton nur
   für ein 15-px-Icon lohnt die Ausnahme nicht. */
.startup-card-pin {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: rgba(0, 26, 49, .5);
}

.startup-card-link {
	display: inline-block;
	padding: 10px 24px;
	border-radius: 100px;
	background-color: #001A31;
	color: #FFFFFF;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

/* Aufhellung des Navy statt eines fremden Blautons — dasselbe #24395C, das die
   Mentorenseite für ihre Button-Hover benutzt. */
.startup-card-link:hover,
.startup-card-link:focus-visible {
	background-color: #24395C;
	color: #FFFFFF;
}

.startup-card-no-link {
	font-family: Roboto, sans-serif;
	font-size: 13px;
	font-style: italic;
	color: rgba(0, 26, 49, .45);
}

.startup-directory-empty {
	font-family: Roboto, sans-serif;
	font-size: 16px;
	color: rgba(0, 26, 49, .6);
}

/* Dieselben zwei Hell-Logos wie auf der Logowand — auf der weißen Kachel
   praktisch unsichtbar, deshalb dunkel hinterlegt. Entfällt, sobald der Kunde
   dunkle Varianten liefert. Der Selektor greift über den Dateinamen, weil das
   Logo aus dem Beitragsbild kommt und keine eigene Klasse trägt.

   Die dunkle Fläche liegt als box-shadow um das Bild statt als padding darin:
   die Breite und Höhe stehen jetzt am Bild fest (gleiche Tintenfläche für
   alle), und ein padding würde davon abgehen — die beiden Logos stünden
   kleiner als die anderen 66. */
.startup-card-logo img[src*="zeitcore"],
.startup-card-logo img[src*="SaferSim"] {
	background: #0E2A44;
	border-radius: 8px;
	box-shadow: 0 0 0 10px #0E2A44;
}

@media (max-width: 767px) {
	.startup-cluster-title {
		font-size: 22px;
	}

	/* Auf dem Handy eine wischbare Zeile statt eines Stapels. Umgebrochen
	   standen die Pillen fast einzeln untereinander — beim Co-Founder
	   Matching Day 480 px Filter vor der ersten Karte, bei der Startup Fair
	   284 px —, weil die Themen- und Skillnamen zu lang sind, um sich eine
	   Zeile zu teilen. Am Desktop bleibt die umbrechende Reihe, dort sieht man
	   alle Optionen auf einen Blick.

	   Die Zeile läuft bis an den Bildschirmrand: die letzte sichtbare Pille
	   ist angeschnitten und zeigt damit, dass es seitlich weitergeht. Die
	   15 px sind das Seitenpadding der umgebenden Elementor-Container auf
	   beiden Seiten. */
	.startup-filter-pills {
		flex-wrap: nowrap;
		margin-right: -15px;
		margin-left: -15px;
		padding: 2px 15px 6px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.startup-filter-pills::-webkit-scrollbar {
		display: none;
	}

	/* Jede Pille einzeilig, auch wenn sie dann breiter als der Bildschirm
	   ist: der längste Fair-Name („Green-Tech & Sustainability, Manufacturing
	   & Industry 4.0") steht 466 px breit. Mit einer Breitengrenze brachen
	   die langen Namen zweizeilig um und die kurzen nicht, und die Reihe
	   bekam zwei Pillenhöhen. In einer wischbaren Zeile ist die Überbreite
	   harmlos. white-space ausdrücklich, weil das Theme es auf <button> sonst
	   selbst bestimmt. */
	.startup-filter-pill {
		white-space: nowrap;
	}

	.startup-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   Co-Founder Matching Day (Seite "co-founder-matching-day",
   Widget "cofounder_directory")

   Die Karte ist die der Startup Fair — das Widget setzt die Klassen
   .startup-card, .startup-grid, .startup-filter-pill mit. Hier steht nur, was
   dazukommt: Porträt statt Logokachel, Gründerzeile, Chips, Skills, Download.
   Keine neuen Farben: Navy, Weiß und Navy-Abstufungen über Deckkraft.
   ========================================================================= */

/* .startup-card ist display:flex und schlägt damit das hidden-Attribut des
   Browsers — ohne diese Regel filtert der Filter nichts. */
.cofounder-card[hidden] {
	display: none;
}

.cofounder-grid {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.cofounder-filter-count {
	display: inline-block;
	min-width: 22px;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 100px;
	background: rgba(0, 26, 49, .08);
	font-size: 12px;
	text-align: center;
}

.startup-filter-pill.is-active .cofounder-filter-count {
	background: rgba(255, 255, 255, .2);
}

.cofounder-result-count {
	margin: 16px 0 0;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	color: rgba(0, 26, 49, .6);
}

/* Porträt über die volle Kartenbreite. 4:3 statt quadratisch: bei ~380 px
   Kartenbreite wäre das Quadrat allein so hoch wie der Text darunter. Die
   gelieferten Fotos sind Kopfbilder, der Ausschnitt sitzt deshalb im oberen
   Drittel, damit kein Scheitel abgeschnitten wird. */
.cofounder-card-photo {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #001A31;
	overflow: hidden;
}

.cofounder-card-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

/* Ohne Foto: Initialen auf Navy mit dem Netz — dieselbe Idee wie die
   Namenskachel der Startup Fair, aber als Fläche so groß wie ein Porträt. */
.cofounder-card-photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #001A31 url("/wp-content/uploads/2026/05/HG-Geometric_trans10-01-scaled.png") center / cover no-repeat;
}

.cofounder-card-photo--placeholder span {
	font-family: Poppins, sans-serif;
	font-size: 64px;
	font-weight: 500;
	letter-spacing: 2px;
	color: #FFFFFF;
}

.cofounder-card .startup-card-name {
	margin-bottom: 4px;
	font-size: 22px;
}

.cofounder-card-founder {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-family: Poppins, sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: rgba(0, 26, 49, .75);
}

.cofounder-card-linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #001A31;
	color: #FFFFFF;
	transition: background-color .2s ease;
}

.cofounder-card-linkedin svg {
	width: 13px;
	height: 13px;
}

.cofounder-card-linkedin:hover,
.cofounder-card-linkedin:focus-visible {
	background: #24395C;
	color: #FFFFFF;
}

.cofounder-card-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.cofounder-chip {
	padding: 3px 10px;
	border-radius: 100px;
	background: #D7E7F7;
	font-family: Roboto, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: #001A31;
}

.cofounder-card-icon {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.cofounder-card-commitment {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0 0 16px;
	font-family: Roboto, sans-serif;
	font-size: 13px;
	line-height: 1.45;
	color: rgba(0, 26, 49, .7);
}

.cofounder-card-commitment .cofounder-card-icon {
	margin-top: 1px;
	color: rgba(0, 26, 49, .5);
}

.cofounder-card-skills {
	margin-bottom: 20px;
	padding-top: 14px;
	border-top: 1px solid rgba(0, 26, 49, .08);
}

/* Dieselbe Eyebrow-Form wie die Clusterzahl der Startup Fair. */
.cofounder-card-skills-label {
	margin: 0 0 8px;
	font-family: Poppins, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: rgba(0, 26, 49, .55);
}

.cofounder-card-skills ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cofounder-card-skills li {
	margin: 0;
	padding: 4px 10px;
	border: 1px solid rgba(0, 26, 49, .2);
	border-radius: 100px;
	font-family: Roboto, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: #001A31;
}

/* Beim Filtern hebt die Karte den Skill hervor, nach dem gefiltert wurde. */
.cofounder-card-skills li.is-match {
	border-color: #001A31;
	background: #001A31;
	color: #FFFFFF;
}

.cofounder-card-download {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cofounder-card-download-meta {
	font-weight: 400;
	opacity: .7;
}

@media (max-width: 767px) {
	.cofounder-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Personal Startup Support (Seite "startup-support")
   Gebaut aus der Mentorenseite: Timeline, Pillen und Anker teilt sie oben per
   :is(). Hier steht nur, was die Fit-Karten zusätzlich brauchen.
   ========================================================================== */

/* Listen in den Fit-Karten: Theme-Listen haben weder Abstand noch Marker, die
   zur Karte passen. Eigene Punkte in Navy, Zeilen mit Luft. Nur die Textlisten —
   die Fokusfeld-Pillen sind ebenfalls ein <ul> (pxl_links). */
.startup-support .ssp-fit-card .pxl-text-editor-wrapper ul {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.startup-support .ssp-fit-card .pxl-text-editor-wrapper li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 12px;
	line-height: 1.5;
}
.startup-support .ssp-fit-card .pxl-text-editor-wrapper li:last-child {
	margin-bottom: 0;
}
.startup-support .ssp-fit-card .pxl-text-editor-wrapper li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .6em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #001A31;
}
.startup-support .ssp-fit-card .pxl-text-editor-wrapper li strong {
	font-weight: 600;
}
/* Der Verweis, wer stattdessen hilft — leiser als der Punkt selbst. */
.startup-support .ssp-redirect {
	display: block;
	margin-top: 4px;
	font-size: .9em;
	color: #001A31B3;
}

/* Fokusfeld-Pillen stehen auf der weißen Karte: linksbündig und mit
   Hellblau statt Weiß, sonst verschwinden sie im Grund. */
.startup-support .ssp-chips .pxl-links-wrapper {
	justify-content: flex-start;
}
.startup-support .ssp-chips .pxl-links-item a {
	background: #D7E7F7;
	border-color: transparent;
}
.startup-support .ssp-chips .pxl-links-item a[href]:hover {
	background: #fff;
	border-color: #001A31;
}
/* „Other innovative fields" hat kein Ziel — kein Hover, keine Hand. */
.startup-support .ssp-chips .pxl-links-item a:not([href]) {
	background: transparent;
	border: 1px dashed #001A3140;
	cursor: default;
}

/* „Get in touch": Schritte links, Typeform rechts in einer Karte. Das
   Formular ist das Kernstück der Seite und bekommt den größeren Teil. Unter
   1025 px untereinander, Schritte zuerst — Step 01 verweist auf das Formular. */
.startup-support .ssp-embed-row.e-con {
	display: grid;
	grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
	gap: 56px;
	align-items: start;
	width: 100%;
}
.startup-support .ssp-embed-row .mlp-timeline {
	padding-top: 12px;
}
.startup-support .ssp-form-card {
	overflow: hidden;
	scroll-margin-top: 120px;
}
/* Typeform rendert in ein Iframe mit 100 % Höhe des Containers — die Höhe
   kommt von hier. Inhalt und Farben steuert das Typeform-Theme. */
.startup-support .ssp-typeform {
	width: 100%;
	height: 640px;
}
.startup-support .ssp-typeform iframe {
	display: block;
	border: 0;
}
@media (max-width: 1024px) {
	.startup-support .ssp-embed-row.e-con {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}
@media (max-width: 767px) {
	.startup-support .ssp-typeform {
		height: 560px;
	}
}

.startup-support .ssp-fallback a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Fotoband: Die Person im FUTURY-Hoodie steht links im Bild. Mittig
   beschnitten zeigt das Hochformat nur Wand und Gegenüber — auf schmalen
   Viewports den Ausschnitt nach links ziehen. */
@media (max-width: 1024px) {
	.startup-support .e-con-background-parallax {
		background-position: 28% center;
	}
}

/* ==========================================================================
   Company Builder (Seite "company-builder")
   Gebaut aus Personal Startup Support; den Anker-Abstand teilt sie oben.
   Hier stehen Intro, Karten und Kontakt.
   ========================================================================== */

/* Absätze im Intro mit Luft; das Theme setzt sie direkt aneinander. */
.company-builder .cb-intro p + p {
	margin-top: 1em;
}

/* Kennzahl als Kartentitel: Icon, Zahl und Text oben bündig, auch wenn die
   Texte unterschiedlich lang sind. */
.company-builder .cb-card {
	justify-content: flex-start;
}
.company-builder .cb-card .pxl-text-editor-wrapper p {
	line-height: 1.5;
}

/* Ansprechpartner: eine einzelne pxl_team-Karte, sonst zieht das Raster sie
   auf volle Containerbreite. Elementor setzt max-width:100% mit
   „.e-con.e-con > .e-con-inner > .elementor-widget“ — daher die lange Kette. */
.company-builder .e-con.e-con > .e-con-inner > .cb-contact-card {
	width: 100%;
	max-width: 320px;
}
/* Die Sektionen enden auf halben Pixeln (Texthöhen), an der Kante blitzt dann
   eine helle Haarlinie durch. Ein Pixel Schatten in der Anschlussfarbe deckt
   sie, ohne das Layout zu verschieben. */
.company-builder [id="contact"] {
	box-shadow: 0 -1px 0 #C6DEF4;
}
.company-builder .e-con:has(> [id="contact"]) + .futury-band-fade {
	box-shadow: 0 -1px 0 #D7E7F7;
}

/* ==========================================================================
   Pressemitteilungen (single.php für `post`, inc/press.php)
   Bandfolge: Navy+Netz (Kopf) → Verlaufsband → #C6DEF4→#D7E7F7 (Text, weiße
   Karte; Kontakt als Navy-Karte mit Netz) → #D7E7F7→#C6DEF4 (Weitere
   Meldungen, weiße Karten) → Verlaufsband → Navy (globaler LET'S TALK-Block).
   ========================================================================== */

:is(.press-single, .press-archive, .press-area) {
	--press-navy: #001A31;
	--press-light: #C6DEF4;
	--press-lighter: #D7E7F7;
	--press-text: #001A31;
	--press-muted: rgba(0, 26, 49, .7);
	color: var(--press-text);
}
.press-single {
	background: var(--press-light);
}
/* Link-Hover: das Rot des Themes (a:hover → --link-color-hover) gilt auch
   hier — Entscheidung 2026-10-08, es ist auf der ganzen Site so gewollt.
   Knöpfe und Pillen behalten ihre eigenen, spezifischeren Hover-Regeln. */

.press-wrap {
	max-width: 1288px; /* 1240 px Inhalt + 2 × 24 px */
	margin: 0 auto;
	padding: 0 24px;
}

/* Das Theme gibt #pxl-main auf Einzelseiten 173 px Innenabstand oben und unten —
   auf weißem body-Grund: oben ein weißer Streifen hinter dem Header, unten eine
   weiße Kante vor dem LET'S TALK-Block. Die Seite bringt ihre Flächen selbst mit. */
#pxl-main:has(> .press-single) {
	padding-top: 0;
	padding-bottom: 0;
}

/* --- Kopf: Navy mit Netz, darüber liegt der transparente Header ---------- */
/* Der Übergang nach Hellblau steckt im Kopf selbst (Regel 3a): die letzten
   --press-fade Pixel laufen von Navy nach #C6DEF4, das Netz blendet mit aus.
   Ein eigenes 220-px-Band (3b) ist für Elementor-Sektionen gedacht, deren
   Farbstopps nur in Prozent gehen — hier stand es als ~300 px Leerraum
   zwischen Titel und Text. */
.press-hero {
	--press-fade: 120px;
	position: relative;
	isolation: isolate;
	padding: 190px 0 calc(var(--press-fade) + 24px);
	background: linear-gradient(180deg, var(--press-navy) 0, var(--press-navy) calc(100% - var(--press-fade)), var(--press-light) 100%);
	color: #FFFFFF;
}
.press-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("/wp-content/uploads/2026/05/HG-Geometric_trans10-01-scaled.png") center / cover no-repeat;
	opacity: .22;
	-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--press-fade)), transparent 100%);
	mask-image: linear-gradient(180deg, #000 calc(100% - var(--press-fade)), transparent 100%);
}
/* Kopf bündig mit der Textkarte darunter; der Titel bleibt so breit wie sie
   (Layout: 1240 − 280 Spalte − 48 Abstand = 912 px). */
.press-hero .press-title {
	max-width: 912px;
}

.press-back {
	display: inline-flex;
	gap: 6px;
	margin-bottom: 28px;
	font-family: var(--primary-font);
	font-size: 15px;
	color: var(--press-light);
	text-decoration: none;
}
.press-back:hover,
.press-back:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.press-meta {
	margin: 0 0 16px;
	font-family: var(--primary-font);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--press-light);
}
.press-meta span {
	margin: 0 6px;
}

.press-title {
	margin: 0;
	font-family: var(--secondary-font);
	font-size: clamp(30px, 3.6vw, 50px);
	font-weight: 400;
	line-height: 1.18;
	color: #FFFFFF;
	overflow-wrap: break-word;
}

/* --- Verlaufsbänder (Regel 3b: 220 / 170 / 130 px) ------------------------ */
.press-band {
	height: 220px;
}
.press-band--to-navy {
	background: linear-gradient(180deg, var(--press-light) 0%, var(--press-navy) 100%);
}
@media (max-width: 1024px) {
	.press-band { height: 170px; }
}
@media (max-width: 767px) {
	.press-band { height: 130px; }
}

/* --- Text + Kontakt ------------------------------------------------------- */
.press-body {
	padding: 40px 0 72px;
	background: linear-gradient(180deg, var(--press-light) 0%, var(--press-lighter) 100%);
}
.press-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 48px;
	align-items: start;
}

.press-article {
	min-width: 0;
	padding: 48px 64px;
	background: #FFFFFF;
	border-radius: 20px;
}

.press-figure {
	margin: 0 0 36px;
}
.press-figure-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}
.press-figure figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--press-muted);
}

/* Fließtext. 18 px auf ~780 px Spalte: um 85 Zeichen je Zeile. */
.press-content {
	font-family: var(--primary-font);
	font-size: 18px;
	line-height: 1.7;
	color: var(--press-text);
	overflow-wrap: break-word;
}
.press-content p,
.press-content li {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.press-content p {
	margin: 0 0 1.1em;
}
.press-content h2,
.press-content h3,
.press-content h4 {
	margin: 1.6em 0 .5em;
	font-family: var(--secondary-font);
	font-weight: 600;
	line-height: 1.3;
	color: var(--press-text);
}
.press-content h2 { font-size: 25px; }
.press-content h3,
.press-content h4 { font-size: 20px; }
.press-content > :first-child,
.press-content .e-con-inner > :first-child {
	margin-top: 0;
}
.press-content ul,
.press-content ol {
	margin: 0 0 1.1em;
	padding-left: 1.4em;
}
.press-content li {
	margin-bottom: .35em;
}
.press-content a {
	color: var(--press-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.press-content a:is(:hover, :focus-visible) {
	color: var(--link-color-hover);
}
.press-content blockquote {
	margin: 1.5em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--press-navy);
	font-style: italic;
}
.press-content hr {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid rgba(0, 26, 49, .15);
}
.press-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Altmeldungen (Elementor-Modus): Abstände der Container/Widgets neutralisieren,
   leere Überschriften-Widgets ausblenden, Farben/Größen der Widgets überstimmen.
   Entfällt pro Meldung, sobald sie in Blöcke überführt ist. */
.press-content .elementor,
.press-content .e-con,
.press-content .e-con-inner {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--gap: 0;
	--row-gap: 0;
	--column-gap: 0;
	--widgets-spacing: 0;
	--container-max-width: none;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	gap: 0 !important;
}
.press-content .elementor-widget,
.press-content .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}
.press-content .elementor-widget-pxl_heading:not(:has(.pxl-heading-title)) {
	display: none;
}
/* Akzentstrich des Themes (orange/blau) gehört nicht zur Palette. */
.press-content .pxl-heading-title::before,
.press-content .pxl-heading-title::after {
	display: none !important;
}
.press-content .pxl-heading-title {
	margin: 1.6em 0 .5em !important;
	font-family: var(--secondary-font) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--press-text) !important;
}
.press-content .pxl-heading-wrapper,
.press-content .pxl-text-editor,
.press-content .pxl-text-editor-wrapper {
	max-width: none !important;
	text-align: left !important;
}
.press-content .pxl-text-editor-wrapper,
.press-content .pxl-text-editor-wrapper * {
	font-family: var(--primary-font) !important;
	font-size: 17px !important;
	line-height: 1.7 !important;
	color: var(--press-text) !important;
}
.press-content .pxl-text-editor-wrapper :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--secondary-font) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}
.press-content .pxl-text-editor-wrapper :is(h1, h2, h3, h4, h5, h6):empty,
.press-content .pxl-text-editor-wrapper p:empty {
	display: none;
}
.press-content .pxl-text-editor-wrapper :is(strong, b) {
	font-weight: 700 !important;
}
.press-content .pxl-text-editor-wrapper :is(em, i) {
	font-style: italic !important;
}
.press-content .pxl-text-editor-wrapper a {
	text-decoration: underline !important;
}

/* --- Teilen + Drucken: weiße Karte in der Seitenspalte, unter dem Kontakt -- */
.press-tools {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
	padding: 24px;
	border-radius: 20px;
	background: #FFFFFF;
}
.press-share {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.press-share-btn {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	text-align: left;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1px solid var(--press-navy);
	border-radius: 999px;
	background: transparent;
	font-family: var(--primary-font);
	font-size: 15px;
	line-height: 1.2;
	color: var(--press-navy);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.press-share-btn:hover,
.press-share-btn:focus-visible {
	background: var(--press-navy);
	color: #FFFFFF;
}
.press-share-status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* --- Pressekontakt: Navy-Karte mit Netz (Regel 4, eingelegte Karte) ------ */
.press-aside {
	position: sticky;
	top: 120px;
}
.press-contact-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 32px 28px;
	border-radius: 20px;
	background: var(--press-navy);
	color: #FFFFFF;
}
.press-contact-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("/wp-content/uploads/2026/05/HG-Geometric_trans10-03-scaled.png") top center / contain repeat;
	opacity: .45;
	mix-blend-mode: screen;
}
.press-aside-title {
	margin: 0 0 22px;
	font-family: var(--primary-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--press-light);
}
.press-contact {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}
.press-contact--extra {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid rgba(198, 222, 244, .25);
}
/* .press-contact davor: auf Elementor-Seiten (/press/) gewinnt sonst
   „.elementor img { border-radius: 0; height: auto }“. */
.press-contact .press-contact-photo {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
}
.press-contact-photo--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--press-light);
	font-family: var(--secondary-font);
	font-size: 24px;
	color: var(--press-navy);
}
.press-contact-name,
.press-contact-role,
.press-contact-org {
	margin: 0;
	color: #FFFFFF;
}
.press-contact-name {
	font-family: var(--secondary-font);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}
.press-contact-role,
.press-contact-org {
	font-family: var(--primary-font);
	font-size: 15px;
	line-height: 1.4;
	color: var(--press-light);
}
.press-contact-links {
	margin: 0;
	padding: 0;
	list-style: none;
}
.press-contact-links li {
	margin: 6px 0 0;
	font-family: var(--primary-font);
	font-size: 15px;
	overflow-wrap: anywhere;
}
.press-contact-links a {
	color: #FFFFFF;
	text-decoration: underline;
	text-decoration-color: rgba(198, 222, 244, .5);
	text-underline-offset: 4px;
}
.press-contact-links a:hover,
.press-contact-links a:focus-visible {
	text-decoration-color: #FFFFFF;
}

.press-aside-title--dark {
	margin-bottom: 4px;
	color: var(--press-muted);
}

/* In der schmalen Spalte (280 px) kleineres Foto, damit Name und Funktion
   nicht umbrechen. */
.press-aside .press-contact-photo {
	flex-basis: 56px;
	width: 56px;
	height: 56px;
}
.press-aside .press-contact-photo--initials {
	font-size: 20px;
}
.press-aside .press-contact-card {
	padding: 28px 24px;
}
.press-aside .press-contact-name {
	font-size: 17px;
}

/* --- Vorherige / Nächste Meldung (Ende der Textkarte) -------------------- */
.press-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid rgba(0, 26, 49, .12);
}
.press-pager-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--press-text);
	text-decoration: none;
}
.press-pager-link--newer {
	grid-column: 2;
	text-align: right;
}
.press-pager-label {
	font-family: var(--primary-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.press-pager-date {
	font-family: var(--primary-font);
	font-size: 14px;
	color: var(--press-muted);
}
.press-pager-title {
	font-family: var(--secondary-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}
.press-pager-link:is(:hover, :focus-visible) .press-pager-title {
	color: var(--link-color-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Weitere Pressemitteilungen ----------------------------------------- */
.press-more {
	padding: 24px 0 64px;
	background: linear-gradient(180deg, var(--press-lighter) 0%, var(--press-light) 100%);
}
.press-more-title {
	margin: 0 0 28px;
	font-family: var(--secondary-font);
	font-size: clamp(26px, 2.6vw, 36px);
	font-weight: 400;
	color: var(--press-text);
}
.press-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.press-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 16px;
	background: #FFFFFF;
	color: var(--press-text);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.press-card-link:hover,
.press-card-link:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 26, 49, .12);
}
.press-card-link:hover .press-card-title,
.press-card-link:focus-visible .press-card-title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.press-card-media {
	position: relative;
	display: block;
	flex: none;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--press-navy);
}
.press-card-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.press-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 24px;
}
.press-card-date {
	font-family: var(--primary-font);
	font-size: 14px;
	color: var(--press-muted);
}
.press-card-title {
	font-family: var(--secondary-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}
.press-more-cta {
	margin: 36px 0 0;
	text-align: center;
}
.press-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	background: var(--press-navy);
	font-family: var(--primary-font);
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
	text-decoration: none;
	transition: background-color .2s ease;
}
.press-btn:hover,
.press-btn:focus-visible {
	background: #0A2E4F;
	color: #FFFFFF;
}

/* --- Tablet / Mobil ------------------------------------------------------ */
/* Unter 1200 px zeigt das Theme den Mobil-Header: weiß und statisch, nicht
   transparent über dem Kopf — der braucht dann keinen Platz mehr dafür. */
@media (max-width: 1199px) {
	.press-hero {
		padding: 56px 0 calc(var(--press-fade) + 24px);
	}
}
@media (max-width: 1024px) {
	.press-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.press-body {
		padding-top: 32px;
	}
	.press-aside {
		position: static;
	}
	/* Spalte steht jetzt unter dem Text, volle Breite: Knöpfe nebeneinander. */
	.press-tools,
	.press-share {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	.press-share-btn {
		width: auto;
	}
	.press-aside-title--dark {
		flex-basis: 100%;
	}
	.press-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.press-wrap {
		padding: 0 16px;
	}
	.press-hero {
		padding: 40px 0 calc(var(--press-fade) + 16px);
	}
	/* Lange Komposita sprengen sonst die Zeile; am Desktop nie trennen. */
	.press-title {
		hyphens: auto;
	}
	.press-hero {
		--press-fade: 90px;
	}
	.press-body {
		padding-top: 24px;
	}
	.press-article {
		padding: 24px 20px;
		border-radius: 16px;
	}
	.press-pager {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
	.press-pager-link--newer {
		grid-column: auto;
		text-align: left;
	}
	.press-pager-empty {
		display: none;
	}
	.press-content,
	.press-content .pxl-text-editor-wrapper,
	.press-content .pxl-text-editor-wrapper * {
		font-size: 16px !important;
	}
	.press-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (prefers-reduced-motion: reduce) {
	.press-list-item:hover .press-list-thumb img,
	.press-card-link,
	.press-card-link:hover {
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   Pressemitteilungen — Übersicht /press-releases/ (Widget press_archive)
   Liegt im hellen Container der Seite; Karten wie „Weitere
   Pressemitteilungen“ (.press-card), darunter die Liste aller Meldungen als
   weiße Karte, nach Jahr gruppiert.
   ========================================================================== */

.press-archive {
	font-family: var(--primary-font);
}
.press-archive-latest {
	margin-bottom: 64px;
}
.press-archive-title {
	margin: 0 0 24px;
	font-family: var(--secondary-font);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 400;
	line-height: 1.25;
	color: var(--press-text);
}
.press-archive-count {
	font-size: .6em;
	color: var(--press-muted);
	vertical-align: middle;
}

.press-card-teaser {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--primary-font);
	font-size: 15px;
	line-height: 1.55;
	color: var(--press-muted);
}

/* --- Liste aller Meldungen: weiße Karte ---------------------------------- */
.press-archive-all {
	padding: 40px 48px 48px;
	border-radius: 20px;
	background: #FFFFFF;
	scroll-margin-top: 120px;
}
.press-archive-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
	margin-bottom: 24px;
}
.press-archive-head .press-archive-title {
	margin: 0;
}

.press-search {
	flex: 0 1 420px;
}
.press-search-label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--press-text);
}
.press-search-row {
	display: flex;
	gap: 8px;
}
.press-archive .press-search .press-search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid rgba(0, 26, 49, .25);
	border-radius: 999px;
	background: var(--press-lighter);
	font-family: var(--primary-font);
	font-size: 16px;
	color: var(--press-text);
}
.press-archive .press-search .press-search-input:focus {
	outline: 2px solid var(--press-navy);
	outline-offset: 2px;
	border-color: var(--press-navy);
}
.press-search-button {
	flex: none;
	height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: var(--press-navy);
	font-family: var(--primary-font);
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
	cursor: pointer;
}
.press-search-button:hover,
.press-search-button:focus-visible {
	background: #0A2E4F;
}

.press-search-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--press-text);
}
.press-search-reset {
	font-weight: 400;
	color: var(--press-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Sprungmarken je Jahr — Pillen wie auf den Directory-Seiten. */
.press-years {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}
.press-years-link {
	display: inline-flex;
	gap: 6px;
	padding: 7px 16px;
	border: 1px solid var(--press-navy);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	color: var(--press-navy);
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.press-years-link span {
	color: var(--press-muted);
}
.press-years-link:hover,
.press-years-link:focus-visible {
	background: var(--press-navy);
	color: #FFFFFF;
}
.press-years-link:hover span,
.press-years-link:focus-visible span {
	color: var(--press-light);
}

.press-year {
	scroll-margin-top: 120px;
}
.press-year-title {
	margin: 32px 0 4px;
	font-family: var(--secondary-font);
	font-size: 22px;
	font-weight: 600;
	color: var(--press-text);
}

.press-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.press-list-item {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid rgba(0, 26, 49, .12);
}
.press-list-item:last-child {
	border-bottom: 0;
}
/* Kleines Bild: Wiedererkennen beim Überfliegen („die mit dem Wasserturm“). */
.press-list-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 8px;
	background: var(--press-lighter);
}
.press-list-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.press-list-item:hover .press-list-thumb img {
	transform: scale(1.04);
}
.press-list-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.press-list-date {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--press-muted);
}
.press-list-title {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--press-text);
	text-decoration: none;
	overflow-wrap: break-word;
}
.press-list-item:hover .press-list-title,
.press-list-title:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.press-list-snippet {
	font-size: 15px;
	line-height: 1.55;
	color: var(--press-muted);
}
.press-list-snippet mark {
	padding: 0 2px;
	border-radius: 3px;
	background: var(--press-light);
	color: var(--press-text);
}

/* Suche aktiv: Treffer statt Jahresliste. */
.press-archive-all.is-searching .press-archive-years {
	display: none;
}
.press-archive-all.is-loading .press-search-results,
.press-archive-all.is-loading .press-archive-years {
	opacity: .5;
	transition: opacity .15s ease;
}

@media (max-width: 1024px) {
	:is(.press-archive, .press-area) .press-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.press-search {
		flex-basis: 100%;
	}
}
@media (max-width: 767px) {
	.press-archive-latest {
		margin-bottom: 40px;
	}
	:is(.press-archive, .press-area) .press-cards {
		grid-template-columns: minmax(0, 1fr);
	}
	.press-archive-all {
		padding: 24px 20px 28px;
		border-radius: 16px;
	}
	.press-list-item {
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 14px;
	}
	.press-list-title {
		font-size: 16px;
	}
	.press-search-button {
		padding: 0 18px;
	}
}

/* ==========================================================================
   Pressemitteilungen — Pressebereich /press/ (Widget press_area)
   Liegt wie die Übersicht im hellen Container der Seite. Kontakte als
   Navy-Karten mit Netz (.press-contact-card, wie neben jeder Meldung), neueste
   Meldungen als .press-card, Downloads und „Über FUTURY“ als weiße Karten.
   ========================================================================== */

.press-area {
	display: flex;
	flex-direction: column;
	gap: 64px;
	font-family: var(--primary-font);
}
.press-area-contacts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.press-area-contacts .press-contact-card {
	margin: 0;
}
.press-area .press-more-cta {
	margin-top: 32px;
}

.press-area-info {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.press-area-info.has-both {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.press-area-card {
	padding: 40px 48px 44px;
	border-radius: 20px;
	background: #FFFFFF;
}
.press-area-about {
	font-size: 17px;
	line-height: 1.7;
	color: var(--press-text);
}
.press-area-about p {
	margin: 0 0 1em;
}
.press-area-about > :last-child {
	margin-bottom: 0;
}
.press-area-about a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Downloads ----------------------------------------------------------- */
.press-downloads-group + .press-downloads-group {
	margin-top: 28px;
}
.press-downloads-title {
	margin: 0 0 10px;
	font-family: var(--primary-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--press-muted);
}
.press-downloads {
	margin: 0;
	padding: 0;
	list-style: none;
}
.press-download {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(0, 26, 49, .12);
	color: var(--press-text);
	text-decoration: none;
}
.press-downloads li:first-child .press-download {
	border-top: 1px solid rgba(0, 26, 49, .12);
}
.press-download-label {
	font-size: 16px;
	font-weight: 500;
}
.press-download-label::before {
	content: "↓";
	margin-right: 10px;
	color: var(--press-muted);
}
.press-download-meta {
	flex: none;
	font-size: 14px;
	color: var(--press-muted);
}
.press-download:hover .press-download-label,
.press-download:focus-visible .press-download-label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 1024px) {
	.press-area-info.has-both {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 767px) {
	.press-area {
		gap: 40px;
	}
	.press-area-contacts {
		grid-template-columns: minmax(0, 1fr);
	}
	.press-area-card {
		padding: 24px 20px 28px;
		border-radius: 16px;
	}
	.press-area-about {
		font-size: 16px;
	}
}

/* Briefkopf und Quellenzeile gibt es nur im Druck. */
.press-print-logo,
.press-print-source {
	display: none;
}

/* ==========================================================================
   Pressemitteilung drucken / als PDF („Drucken / als PDF“ in der Seitenspalte)
   Nur Titel, Datum, Bild, Text und Pressekontakt, schwarz auf weiß. Header,
   Footer, Panels, Teilen, Blättern und „Weitere Pressemitteilungen“ entfallen.
   ========================================================================== */
@media print {
	@page {
		margin: 18mm 16mm;
	}
	.single-post :is(#pxl-header-elementor, #pxl-footer-elementor, #preloader, .back-to-top-button,
		.pxl-hidden-panel-wrapper, .pxl-popup-wrapper, .trp-language-switcher, [id^="cookiescript"],
		.press-back, .press-tools, .press-pager, .press-more, .press-band) {
		display: none !important;
	}
	.single-post,
	.single-post #pxl-main,
	.press-single,
	.press-hero,
	.press-body,
	.press-article {
		background: none !important;
		box-shadow: none !important;
	}
	.press-hero {
		padding: 0 0 6mm !important;
	}
	.press-hero::before,
	.press-hero::after,
	.press-contact-card::before {
		display: none !important;
	}
	.press-wrap {
		max-width: none;
		padding: 0;
	}
	.press-meta,
	.press-title,
	.press-content,
	.press-content * {
		color: #000 !important;
	}
	.press-title {
		font-size: 24pt;
	}
	.press-layout {
		display: block;
	}
	.press-article {
		padding: 0 !important;
	}
	.press-content {
		font-size: 11pt;
		line-height: 1.5;
	}
	.press-content a {
		text-decoration: underline;
	}
	.press-content :is(h2, h3) {
		break-after: avoid;
	}
	.press-figure-img,
	.press-content img {
		max-height: 110mm;
		width: auto;
		max-width: 100%;
		border-radius: 0;
		break-inside: avoid;
	}
	/* Kontakt am Ende, als Kasten mit Rahmen statt Navy-Karte. */
	.press-aside {
		position: static;
		margin-top: 8mm;
		break-inside: avoid;
	}
	.press-contact-card {
		padding: 4mm 5mm;
		border: 1px solid #000;
		border-radius: 0;
		background: none !important;
	}
	.press-contact-card :is(.press-aside-title, .press-contact-name, .press-contact-role, .press-contact-org, .press-contact-links a) {
		color: #000 !important;
	}
	.press-contact-photo {
		display: none;
	}
	.press-print-logo {
		display: block;
		width: 46mm;
		height: auto;
		margin: 0 0 8mm;
	}
	.press-print-source {
		display: block;
		margin: 8mm 0 0;
		padding-top: 3mm;
		border-top: 1px solid #000;
		font-family: var(--primary-font);
		font-size: 9pt;
		color: #000;
		overflow-wrap: anywhere;
	}
}