in a `.box-inner.h-110` — the
label-only contour box. The `h-195` boxes pair a caption with a figure and
keep their own sizes.
Follow-up: on the desktop 32px next to the huge plate read too big, so there
the label is 24/28; the phone keeps the „Measurable impact" size (16/20),
which is what Andre asked to match. Every big-box label carries this one ramp,
so they are all the same size as each other. */
.track-sec .box-1 > .box-inner.h-110 > p,
.box-wrapper .box-1 > .box-inner.h-110 > p {
font-size: 24px;
line-height: 28px;
letter-spacing: normal;
}
/* the zoomed range: scale with the viewport, capped at the desktop 24 */
@media (min-width: 992px) and (max-width: 1364px) {
.track-sec .box-1 > .box-inner.h-110 > p,
.box-wrapper .box-1 > .box-inner.h-110 > p {
font-size: clamp(18px, 1.9vw, 24px);
line-height: 1.3;
}
}
@media (max-width: 991px) {
.track-sec .box-1 > .box-inner.h-110 > p,
.box-wrapper .box-1 > .box-inner.h-110 > p {
font-size: 18px;
line-height: 24px;
}
}
@media (max-width: 479px) {
.track-sec .box-1 > .box-inner.h-110 > p,
.box-wrapper .box-1 > .box-inner.h-110 > p {
font-size: 16px;
line-height: 20px;
}
}
/* --------------------------------------------------------------------------
34. RESPONSIVE — cheaper glass on the phone
The sticky header and the pill bars are drawn with `backdrop-filter:
blur(100px)`. A blur that wide over a bar that stays on screen has to be
recomposited on every frame of every scroll, which is one of the few reliable
ways to make a mobile browser stutter. At 390px wide, 28px of blur is visually
the same wash; it is only the desktop that ever shows enough backdrop for the
difference to be legible.
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
.navbar_wrapper,
.tab-box {
-webkit-backdrop-filter: blur(28px);
backdrop-filter: blur(28px);
}
}
/* --------------------------------------------------------------------------
35. FIX — the header visual is a full-screen background on every size
It was a 16/9 band: 1080px tall at 1920 but only 259px on the phone, where the
label sat on a strip rather than on a picture. It fills one viewport at every
width now, with the photo covering it and the label block staying where it is,
100px off the bottom edge. The band values are the `zoom` compensation §2
explains — `100svh` inside a scaled subtree paints at `svh × zoom`.
-------------------------------------------------------------------------- */
#video-sec.section_about {
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: flex-end;
}
@media (min-width: 1365px) and (max-width: 1850px) { #video-sec.section_about { min-height: 125vh; min-height: 125svh; } }
@media (min-width: 992px) and (max-width: 1365px) { #video-sec.section_about { min-height: 142.857vh; min-height: 142.857svh; } }
#video-sec .img-holder {
position: absolute;
inset: 0;
z-index: 0;
}
#video-sec .img-holder picture,
#video-sec .img-holder img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* The wash on the header band is the one the heroes carry, and it is flush with
the bottom edge. `inset: 0` was wrong twice: the authored rule anchors the
overlay at the bottom (`inset: auto 0 0`) and caps it at 200px, so overriding
the inset while leaving the cap in place pinned a 200px orange fade to the
*top* of the band — under the header, with the white copy standing on the
bright picture below it. It is the §32 ramp now: clear at the top so the
picture reads, brand at the foot where the label and the copy sit. */
#video-sec .focus_card-overlay {
position: absolute;
inset: auto 0 0;
width: 100%;
height: 100%;
max-height: none;
opacity: 1;
z-index: 1;
/* the same quieter ramp as the subpage heroes (§32) */
background-image: linear-gradient(180deg,
rgba(33, 33, 33, 0) 0%,
rgba(33, 33, 33, .22) 44%,
rgba(251, 143, 95, .38) 82%,
rgba(254, 80, 0, .62) 100%);
}
#video-sec > .container.absolute { position: relative; z-index: 2; width: 100%; }
/* --------------------------------------------------------------------------
36. The footer is the export's own — section flex column with space-between,
the swoosh drawn by the export's .absolute2 rules (desktop: the `.hidden`
copy, absolute bottom-left; phone: the `.block` copy in flow). Nothing of
ours on top.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
37. Accessibility and polish
-------------------------------------------------------------------------- */
/* the normalize layer declares `section { display: block }`, which overrides the
UA rule for [hidden] — so `hidden` silently did nothing on a section */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.navbar_wrapper.is-on-dark :focus-visible { outline-color: #fff; }
a, button { -webkit-tap-highlight-color: transparent; }
img, picture > img { max-width: 100%; }
/* every slider clips its own track, or the slides run past the right edge */
.swiper, [class*="myswiper"] { overflow: hidden; }
.focus_card-overlay, .code-embed-5 { max-width: 100%; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.box-2.js-grow, .box-1.js-grow { transform: none !important; }
.box-2.js-grow > *, .box-1.js-grow > * { opacity: 1 !important; }
.menu-item .list-item, .menu-item .langswitch--menu { opacity: 1 !important; transform: none !important; }
.wave-canvas, .progress-line { animation: none !important; }
}
/* --------------------------------------------------------------------------
38. FIX — the sticky bar disappeared while the menu was open
The panel is an opaque #212121 sheet over the page, so the sticky header —
which sits below it — went with it. Its own top row already mirrors the
header's geometry (§8 measures height, wordmark size and the close button's
position), it just had no surface: the wordmark and the X floated on the
sheet. The row now carries the header's own glass, so the bar reads as the
same bar, only with an X where the burger was.
-------------------------------------------------------------------------- */
.menu-item .menu-item_bar {
background-color: rgba(217, 217, 217, .1);
-webkit-backdrop-filter: blur(28px);
backdrop-filter: blur(28px);
}
/* --------------------------------------------------------------------------
39. The six subpage heroes carry their own photograph
They all shared one generic header picture (`sektion-01-header`) with the
wash baked into the pixels. Each page has its own frame from the shoot now,
and because those are un-washed, they take §32's wash — the same ramp the
case studies use, so every hero on the site is built the same way.
Three width bands, each with a 1x and a 2x candidate: a phone never loads a
2560px file and a 5K display never gets a soft one.
The `?v=` on every address below is not decoration. `/assets/media/` is served
`immutable, max-age=1 year`, and build.py stamps the content hash only onto
media paths **in the markup** — these live in the stylesheet, so a file swap
alone would never reach a reader who has been here before. Whoever re-exports
the photographs with `tools/fotos.py` raises this number in the same commit.
v2 = 5 August 2026, re-encoded at WebP quality 90 (was 78).
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
:where(html.page-private-equity) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-private-equity-768.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-private-equity-768.webp?v=2") 1x, url("/assets/media/bc-hero-private-equity-1280.webp?v=2") 2x);
}
}
@media (max-width: 767px) {
:where(html.page-for-lenders) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-for-lenders-768.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-for-lenders-768.webp?v=2") 1x, url("/assets/media/bc-hero-for-lenders-1280.webp?v=2") 2x);
}
}
@media (max-width: 767px) {
:where(html.page-for-companies) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-for-companies-768.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-for-companies-768.webp?v=2") 1x, url("/assets/media/bc-hero-for-companies-1280.webp?v=2") 2x);
}
}
@media (max-width: 767px) {
:where(html.page-expertise) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-expertise-768.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-expertise-768.webp?v=2") 1x, url("/assets/media/bc-hero-expertise-1280.webp?v=2") 2x);
}
}
@media (max-width: 767px) {
:where(html.page-team) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-team-768.jpg?v=3");
background-image: image-set(url("/assets/media/bc-hero-team-768.webp?v=3") 1x, url("/assets/media/bc-hero-team-1280.webp?v=3") 2x);
}
}
@media (max-width: 767px) {
:where(html.page-approach) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-approach-768.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-approach-768.webp?v=2") 1x, url("/assets/media/bc-hero-approach-1280.webp?v=2") 2x);
}
}
@media (min-width: 768px) and (max-width: 1279px) {
:where(html.page-private-equity) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-private-equity-1280.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-private-equity-1280.webp?v=2") 1x, url("/assets/media/bc-hero-private-equity-2560.webp?v=2") 2x);
}
}
@media (min-width: 768px) and (max-width: 1279px) {
:where(html.page-for-lenders) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-for-lenders-1280.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-for-lenders-1280.webp?v=2") 1x, url("/assets/media/bc-hero-for-lenders-2560.webp?v=2") 2x);
}
}
@media (min-width: 768px) and (max-width: 1279px) {
:where(html.page-for-companies) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-for-companies-1280.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-for-companies-1280.webp?v=2") 1x, url("/assets/media/bc-hero-for-companies-2560.webp?v=2") 2x);
}
}
@media (min-width: 768px) and (max-width: 1279px) {
:where(html.page-expertise) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-expertise-1280.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-expertise-1280.webp?v=2") 1x, url("/assets/media/bc-hero-expertise-2560.webp?v=2") 2x);
}
}
@media (min-width: 768px) and (max-width: 1279px) {
:where(html.page-team) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-team-1280.jpg?v=3");
background-image: image-set(url("/assets/media/bc-hero-team-1280.webp?v=3") 1x, url("/assets/media/bc-hero-team-2560.webp?v=3") 2x);
}
}
@media (min-width: 768px) and (max-width: 1279px) {
:where(html.page-approach) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-approach-1280.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-approach-1280.webp?v=2") 1x, url("/assets/media/bc-hero-approach-2560.webp?v=2") 2x);
}
}
@media (min-width: 1280px) {
:where(html.page-private-equity) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-private-equity-1920.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-private-equity-1920.webp?v=2") 1x, url("/assets/media/bc-hero-private-equity-2560.webp?v=2") 2x);
}
}
@media (min-width: 1280px) {
:where(html.page-for-lenders) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-for-lenders-1920.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-for-lenders-1920.webp?v=2") 1x, url("/assets/media/bc-hero-for-lenders-2560.webp?v=2") 2x);
}
}
@media (min-width: 1280px) {
:where(html.page-for-companies) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-for-companies-1920.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-for-companies-1920.webp?v=2") 1x, url("/assets/media/bc-hero-for-companies-2560.webp?v=2") 2x);
}
}
@media (min-width: 1280px) {
:where(html.page-expertise) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-expertise-1920.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-expertise-1920.webp?v=2") 1x, url("/assets/media/bc-hero-expertise-2560.webp?v=2") 2x);
}
}
@media (min-width: 1280px) {
:where(html.page-team) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-team-1920.jpg?v=3");
background-image: image-set(url("/assets/media/bc-hero-team-1920.webp?v=3") 1x, url("/assets/media/bc-hero-team-2560.webp?v=3") 2x);
}
}
@media (min-width: 1280px) {
:where(html.page-approach) .hero-sec2.py-100 {
background-image: url("/assets/media/bc-hero-approach-1920.jpg?v=2");
background-image: image-set(url("/assets/media/bc-hero-approach-1920.webp?v=2") 1x, url("/assets/media/bc-hero-approach-2560.webp?v=2") 2x);
}
}
/* --------------------------------------------------------------------------
40. The phone: four things that were sized for the desktop
-------------------------------------------------------------------------- */
/* (a) The figures in the Impact bands („> 40 ppts") were 16px on the phone
against 40px on the desktop — the smallest type in a box that exists to show
one number. They are twice that now, and the caption above them comes up from
10px, which no longer reads as a caption to a 32px figure. Same rule for every
band built this way — the /for pages and the case studies. */
@media (max-width: 767px) {
.box-1 > .box-inner.h-195 > h2.text-size-xlarge,
.box-1 > .box-inner.h-195 > .text-size-xlarge {
font-size: 32px !important;
line-height: 34px !important;
}
/* the same slot written in words rather than digits — it takes two or three
lines, so it lands between caption and figure */
.box-1 > .box-inner.h-195 > .heading-010 {
font-size: 22px !important;
line-height: 24px !important;
}
.box-1 > .box-inner.h-195 > h6.heading-6 {
font-size: 14px !important;
line-height: 16px !important;
}
}
/* (b) Clients: the logo tiles keep a 131px floor from the desktop layout, so a
40px logo sat in the middle of a tall empty tile, and the slider bar hung 60px
under the track while every other slider on the site puts its bar row half
that far away. */
@media (max-width: 767px) {
#client .tab-content2 .box-inner.flex-col.bg-gray2 { min-height: 84px !important; }
#client .tab-content2 .swiper-pagination { margin-top: 28px !important; }
#client .executives_header,
#client .client-header { margin-bottom: 20px !important; }
}
/* (c) The hero subtitle was capped at 220px inside a 310px column, which broke
„C-level execution: High-speed transformation with accountability for results."
into three lines where two fit. It uses the column it is in. */
@media (max-width: 767px) {
.hero_subtitle-wrapper .hero_subtitle,
.hero_subtitle-wrapper .hero_subtitle._w-400 { max-width: none !important; }
/* the cap was not the whole story: the hero block carries a 20px inset inside
the container's own 20px gutter, so the line box was 310px of a 390px screen
— 20px short of holding „…High-speed transformation" on the first line. The
inset goes on the phone; the block is centred, so it only gets wider. */
.section_hero .hero_content.px-40 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.hero_subtitle-wrapper._w-1105 { max-width: none !important; }
}
/* (d) Andre: the pictures in the Approach sections run edge to edge on the
phone. They sat inside the 20px container gutter, which on a 390px screen is
10% of the width given to a margin either side of a photograph. */
@media (max-width: 767px) {
.approch-sec .div-block-22 {
margin-left: -20px !important;
margin-right: -20px !important;
width: auto !important;
max-width: none !important;
}
.approch-sec .div-block-22 > picture,
.approch-sec .div-block-22 > picture > img {
width: 100% !important;
max-width: none !important;
}
}
/* --------------------------------------------------------------------------
41. The header band plays the film
It was a still (`header-video.jpg`) with the wash and the wave over it. The
still stays exactly where it was and keeps doing its job — it is what shows
while the file loads, on a metered connection, and under
`prefers-reduced-motion`. The video lies over it inside the same holder, so
§35's full-screen geometry covers both, and it fades in on its first frame
rather than flashing black over the picture.
-------------------------------------------------------------------------- */
#video-sec .img-holder video.bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
z-index: 1;
opacity: 0;
transition: opacity .8s ease;
pointer-events: none;
}
#video-sec .img-holder video.bg-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
#video-sec .img-holder video.bg-video { display: none; }
}
/* --------------------------------------------------------------------------
42. Where each hero photograph is cropped
`background-size: cover` on a 390×844 hero takes a narrow vertical slice out
of a 3:2 landscape frame, and the default `50% 50%` put that slice on a wall
on several of them. Each page names the part of its own picture that has to
stay in frame; the value is the point the crop keeps, so it reads as
„hold this spot" rather than „shift by this much".
-------------------------------------------------------------------------- */
:where(html.page-private-equity) .hero-sec2.py-100 { background-position: 45% 42% !important; }
:where(html.page-for-lenders) .hero-sec2.py-100 { background-position: 62% 10% !important; }
:where(html.page-for-companies) .hero-sec2.py-100 { background-position: 58% 18% !important; }
:where(html.page-expertise) .hero-sec2.py-100 { background-position: 52% 40% !important; }
:where(html.page-team) .hero-sec2.py-100 { background-position: 45% 20% !important; }
:where(html.page-approach) .hero-sec2.py-100 { background-position: 45% 52% !important; }
/* and on the phone the wash may not swallow the picture it sits on: the top
stop comes down, the bottom keeps the brand ramp the copy needs */
@media (max-width: 767px) {
:where(html.page-lenzing, html.page-kuka, html.page-treofan, html.page-idt-biologika,
html.page-private-equity, html.page-for-lenders, html.page-for-companies,
html.page-expertise, html.page-team, html.page-approach,
html.page-about-us, html.page-contact)
.hero-sec2.py-100::before {
background-image: linear-gradient(180deg,
rgba(33, 33, 33, .18) 0%,
rgba(33, 33, 33, .34) 38%,
rgba(251, 143, 95, .56) 74%,
rgba(254, 80, 0, .84) 100%) !important;
}
}
/* --------------------------------------------------------------------------
43. Section labels are one size — including the ones on the dark band
„Team", „Projects", „Clients", „Focus" are `.text-size-xlarge`; „Track Record"
and „Impact" sit in the dark track-sec and used `.heading-style-h5`, a size
smaller. They are `.text-size-xlarge` now too. Above 992 that already matches;
below it the `.text-color-primary.my-0` variant drops to 26/26 while the white
variant fell through to the 24/22 base, so the dark-band label is pinned to
the same 26/26 the light labels use. */
@media (max-width: 991px) {
.track-sec .about_label-text .text-size-xlarge.text-color-white {
font-size: 26px;
line-height: 26px;
}
}
/* --------------------------------------------------------------------------
44. The menu language switcher is the same size as the burger/close button
The pill was 60px tall against the round button's 40 (48 on desktop). The
height and the stroke width are mirrored from the button in JS (§8's
mirrorHeader), so here the vertical padding is dropped and the box sized from
that height — the pill keeps its width for „EN" and the dot, but its height
and border now match the circle at every breakpoint.
-------------------------------------------------------------------------- */
.langswitch--menu .navbar_lang-button {
padding-top: 0;
padding-bottom: 0;
box-sizing: border-box;
}
/* --------------------------------------------------------------------------
45. The KPI caption over each figure was the smallest type on the band
„Average adj. EBITDA margin uplift", „Average reduction of net leverage
ratio" and the rest sat at 16/18 (14/16 on the phone) over a 40px figure.
Andre asked for them a touch bigger and, above all, consistent — so every
caption in the top row of KPI boxes takes one ramp: 20/24 on the desktop,
18/22 in the zoomed band, 16/18 on the phone.
-------------------------------------------------------------------------- */
.track-sec .box-1 > .box-inner.h-195 > h6.heading-6,
.box-wrapper .box-1 > .box-inner.h-195 > h6.heading-6 {
font-size: 20px;
line-height: 24px;
}
@media (min-width: 992px) and (max-width: 1364px) {
.track-sec .box-1 > .box-inner.h-195 > h6.heading-6,
.box-wrapper .box-1 > .box-inner.h-195 > h6.heading-6 {
font-size: 18px;
line-height: 22px;
}
}
@media (max-width: 991px) {
.track-sec .box-1 > .box-inner.h-195 > h6.heading-6,
.box-wrapper .box-1 > .box-inner.h-195 > h6.heading-6 {
font-size: 16px;
line-height: 18px;
}
}
/* --------------------------------------------------------------------------
46. Round seventeen — the phone pass and the card headers
-------------------------------------------------------------------------- */
/* The client logos on the project-card photos are dark marks on a dark
photograph. One filter turns any of them pure white — the same treatment on
every card, no per-logo files. */
.logo-header2 .div-block-29 img { filter: brightness(0) invert(1); }
/* every logo slider carries the same tile: the profile experience sliders kept
the 131px desktop floor on the phone while #client was already at 84 */
@media (max-width: 767px) {
.swiper .box-inner.flex-col.bg-gray { min-height: 84px !important; }
}
/* the two subpage hero photographs that were still the generic header */
@media (max-width: 767px) {
:where(html.page-about-us) .hero-sec2.py-100 { background-image: url("/assets/media/bc-hero-about-768.jpg?v=4"); background-image: image-set(url("/assets/media/bc-hero-about-768.webp?v=4") 1x, url("/assets/media/bc-hero-about-1280.webp?v=4") 2x); }
:where(html.page-contact) .hero-sec2.py-100 { background-image: url("/assets/media/bc-hero-contact-768.jpg?v=2"); background-image: image-set(url("/assets/media/bc-hero-contact-768.webp?v=2") 1x, url("/assets/media/bc-hero-contact-1280.webp?v=2") 2x); }
}
@media (min-width: 768px) and (max-width: 1279px) {
:where(html.page-about-us) .hero-sec2.py-100 { background-image: url("/assets/media/bc-hero-about-1280.jpg?v=4"); background-image: image-set(url("/assets/media/bc-hero-about-1280.webp?v=4") 1x, url("/assets/media/bc-hero-about-2560.webp?v=4") 2x); }
:where(html.page-contact) .hero-sec2.py-100 { background-image: url("/assets/media/bc-hero-contact-1280.jpg?v=2"); background-image: image-set(url("/assets/media/bc-hero-contact-1280.webp?v=2") 1x, url("/assets/media/bc-hero-contact-2560.webp?v=2") 2x); }
}
@media (min-width: 1280px) {
:where(html.page-about-us) .hero-sec2.py-100 { background-image: url("/assets/media/bc-hero-about-1920.jpg?v=4"); background-image: image-set(url("/assets/media/bc-hero-about-1920.webp?v=4") 1x, url("/assets/media/bc-hero-about-2560.webp?v=4") 2x); }
:where(html.page-contact) .hero-sec2.py-100 { background-image: url("/assets/media/bc-hero-contact-1920.jpg?v=2"); background-image: image-set(url("/assets/media/bc-hero-contact-1920.webp?v=2") 1x, url("/assets/media/bc-hero-contact-2560.webp?v=2") 2x); }
}
:where(html.page-about-us) .hero-sec2.py-100 { background-position: 55% 35% !important; }
:where(html.page-contact) .hero-sec2.py-100 { background-position: 40% 0% !important; } /* S27: Kopf nicht anschneiden — die Kante hält die Bildoberkante, das Bild steht maximal unten */
/* the hero "Learn more" pill spanned the whole container on the phone */
@media (max-width: 767px) {
.hero-sec2 .tab-btn._w-full.block,
.profile-learnmore { width: auto !important; min-width: 220px; }
.hero-sec2 .tab-box { display: inline-flex !important; width: auto !important; }
}
/* Clients pills and the Learn-more row: one line of three on the phone */
@media (max-width: 767px) {
#client .tab-box,
.contact-sec .tab-box {
display: flex !important;
flex-wrap: nowrap !important;
gap: 6px;
}
#client .tab-box .tab-btn2,
.contact-sec .tab-box .tab-btn3 { flex: 1 1 0; min-width: 0; width: auto !important; }
#client .tab-box .tab-inner-btn,
.contact-sec .tab-box .tab-inner-btn { padding: 10px 8px !important; justify-content: center; gap: 5px; }
#client .tab-box .text-block,
.contact-sec .tab-box .text-block { font-size: 11px; line-height: 13px; white-space: nowrap; }
#client .tab-box .circle-orange,
.contact-sec .tab-box .circle-orange { width: 9px; height: 9px; flex: 0 0 auto; }
}
/* the figures at the foot of the project cards were the smallest type there */
@media (max-width: 767px) {
.project-box .heading-010 { font-size: 19px !important; line-height: 22px !important; }
.project-box .box-heading { font-size: 12px !important; line-height: 14px !important; }
}
/* the case-study Approach copy boxes end on the same edges as every other box
on the page — only the photograph runs edge to edge */
@media (max-width: 767px) {
.complex-sec .box-3,
.complex-sec [class*="box-3"] { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
}
/* Profile hero on the phone: a second brand wash over the lower half — behind
the copy, in front of the portrait — instead of effects on the text, and the
same single Learn-more pill the other subpage heroes carry. */
.profile-learnmore { display: none; }
@media (max-width: 1199px) {
.profile-hero_inner::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 40%;
background: linear-gradient(180deg, rgba(254, 80, 0, 0) 0%, rgba(251, 143, 95, .40) 45%, rgba(254, 80, 0, .72) 100%);
z-index: 1;
pointer-events: none;
}
.profile-hero_content { position: relative; z-index: 2; }
.profile-hero_name, .profile-hero_role { text-shadow: none !important; }
}
/* the profile hero carries the same single Learn-more pill as every other
subpage hero — at every size; the tab row is gone */
@media (max-width: 1199px) {
.profile-hero_tabs { display: none !important; }
.profile-learnmore { display: inline-block !important; margin-top: 24px; }
}
@media (min-width: 1200px) {
.profile-learnmore { display: none !important; }
}
/* the brand wordmark link is only as wide as the wordmark — an absolute block
without a width stretched its hit area toward the burger */
.navbar_brand { width: max-content; }
/* the arrow disc sits on the content's own inset — flush with the text block's
bottom edge at every width. The export had four different anchors (40/20/30/24)
while the copy's padding walked its own ramp. §19 measures the real padding. */
.section_focus .link-block-2 {
bottom: var(--card-arrow-inset, 40px) !important;
right: var(--card-arrow-inset, 40px) !important;
}
/* the third card's headline broke mid-word („…Unternehme / n") inside its
210px cap, and the arrow — sized to the headline — grew with the extra line.
The heading gets its width back; the explicit
alone sets the two lines. */
.heading-style-h5.text-color-white.focus_card-heading._w-100,
.heading-style-h5.text-color-white.focus_card-heading._w-100:lang(de-de) {
max-width: none;
overflow-wrap: normal;
word-break: normal;
hyphens: manual;
}
/* --------------------------------------------------------------------------
47. Round eighteen — the band from the screenshots
-------------------------------------------------------------------------- */
/* (a) The contour label box: the text overflowed the fixed 110px frame upward
on the German homepage. The frame follows its text — 110px stays the floor,
the plate below still absorbs the leftover column height, so the flush bottom
edge holds. And no more per-word breaks inside these boxes. */
.track-sec .box-1 > .box-inner.h-110,
.box-wrapper .box-1 > .box-inner.h-110 {
height: auto !important;
min-height: 110px;
}
.track-sec .box-1 .box-inner > *,
.box-wrapper .box-1 .box-inner > * {
overflow-wrap: normal;
word-break: normal;
hyphens: manual;
}
/* (b) one stroke weight for every contour box — the project-card tiles carried
the export's own 1px border on top of ours, which painted as 2px */
.project-box .box-1,
.project-box .box-1 > .box-inner { border-width: 0 !important; }
.project-box .box-1 { border: 1px solid transparent !important; }
/* (c) the figures in the KPI boxes step up a size — desktop too */
.track-sec .box-1 > .box-inner.h-195 > h2.text-size-xlarge,
.box-wrapper .box-1 > .box-inner.h-195 > .text-size-xlarge { font-size: 48px; line-height: 52px; }
.track-sec .box-1 > .box-inner.h-195 > .heading-010,
.box-wrapper .box-1 > .box-inner.h-195 > .heading-010 { font-size: 30px; line-height: 36px; }
@media (min-width: 992px) and (max-width: 1364px) {
.track-sec .box-1 > .box-inner.h-195 > h2.text-size-xlarge,
.box-wrapper .box-1 > .box-inner.h-195 > .text-size-xlarge { font-size: clamp(30px, 3vw, 48px); line-height: 1.1; }
}
/* (d) the value-lever cards clip their copy when it outgrows the 4:3 frame:
the content was absolute, so the card never learned its height. It is in
flow now; 4:3 stays the preferred ratio and the card grows past it. */
.scope-sec .focus_card .focus_card-content {
position: relative !important;
top: auto !important;
min-height: 0;
}
.scope-sec .focus_card,
.scope-sec .focus_card.aspect-ratio2 {
height: auto !important;
/* the frame may grow past 4:3 but never clip: max-content wins against the
ratio when the copy is the taller of the two — important, because
custom.css pins these cards to min-height:0 !important */
min-height: max-content !important;
}
.scope-sec .swiper-slide { height: auto !important; }
/* (e) the footer bands must not paint over the swoosh — the section owns the
background, the rows sit on it glass-clear */
.section-2 > .footer-bottom,
.section-2 > .section_footer-cta { background: transparent !important; }
.section-2 > .footer-bottom::after,
.section-2 > .section_footer-cta::after { content: none !important; }
/* (f) the three focus-card headlines take the section's own leading, not the
heading default — and the arrow, sized to the headline, comes down with it.
(Der Wert steht ab §65 einmal für alle Kartenüberschriften.) */
/* (g) dark photo heroes start with the inverted bar */
html.page-for-companies .hero-sec2.py-100,
html.page-for-lenders .hero-sec2.py-100 { --hero-dark: 1; }
/* --------------------------------------------------------------------------
48. Round nineteen — iPad pass, focus cards, preloader, KPI plates
-------------------------------------------------------------------------- */
/* the wordmark is centred on the phone too — below 992 the brand link fell out
of the absolute centring */
@media (max-width: 991px) {
.navbar_brand {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: max-content;
}
}
/* preloader wordmark a size smaller on the phone — the wordmark only, never
the lines animation behind it */
@media (max-width: 767px) {
#scene .logo-wrap { width: min(220px, 62vw) !important; }
}
/* the claim takes two lines on the tablet, as designed.
Das Band endete bei 1199 und traf damit das iPad-QUERFORMAT (1194) mit —
dort deckelte `18ch` den Claim auf 829px, obwohl er 1206px braucht und im
gezoomten Layout 1506px Platz hat. Ergebnis: zwei Zeilen, und die
Swoosh-Zeichnung schnitt durch die zweite. Genau die Falle aus dem Handoff:
ab 992px ist die Seite ein gezoomter Desktop, Tablet-Regeln enden bei 991.
Das 12.9" quer (1366) lag ohnehin außerhalb und war deshalb schon einzeilig. */
@media (min-width: 768px) and (max-width: 991px) {
.section_hero .hero_heading,
.section_hero .heading-style-h2.hero_heading {
max-width: 18ch !important;
/* §14 pins the claim to one line on the desktop — on the tablet it breaks
after „drive", as designed; flush left like every other block */
white-space: normal !important;
}
}
/* menu wordmark near-double on the tablet */
@media (min-width: 768px) and (max-width: 1199px) {
.menu-item .menu-item_brand { font-size: 34px !important; }
}
/* the nav language pill is exactly as tall as the burger circle — the burger is
40px within 992, 48 above; the pill loses its vertical padding and takes the
circle's height */
.navbar_lang-button { padding-top: 0; padding-bottom: 0; height: 48px; box-sizing: border-box; }
@media (max-width: 991px) { .navbar_lang-button { height: 40px; } }
/* Focus cards: the three-up band clips its copy from tablet widths down, so the
stacked full-width variant takes over below 1200 instead of 768. The arrow
sits bottom-left on the content inset, never over the copy, and is capped. */
/* bottom-right on the content inset — bottom-left put the disc behind the
copy on the phone */
.section_focus .link-block-2 {
right: var(--card-arrow-inset, 40px) !important;
left: auto !important;
}
.focus_card { --card-arrow-cap: 69px; }
/* below 1200 the swiper runs one card per view (main.js §6) — the in-flow
mobile card layout applies there too */
/* the pop-in no longer flickers: the blur backdrop composited a new layer the
moment the text faded in — the wash alone reads the same and stays cheap */
.section_focus .focus_card.is-open .focus_card-content.translate-45 {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* the orange plate is a band, not a monolith: on the phone it stops at 2:1 */
@media (max-width: 767px) {
.box-wrapper .box-2 {
aspect-ratio: 2 / 1;
height: auto !important;
min-height: 0 !important;
flex: 0 0 auto !important;
}
}
/* Walter's wide logo marks (Syntegon, Lenzing, Treofan) rendered tiny at the
tile's uniform cap — wide marks get their height back.
NACHTRAG (Andre 02.08., S8): nur auf den PROFILEN. Die Regel griff auch in die
Kundenreihen der Startseite (die Sektion trägt dieselbe Klasse) und machte
Lenzing und Syntegon dort auf 58 % — also kleiner als alle anderen, genau die
Rückmeldung „Logos von Lenzing und Syntegon sind sehr klein". */
:where(html[class*="page-teams-"]) .client-sec .box-inner img[src*="treofan-logo"],
:where(html[class*="page-teams-"]) .client-sec .box-inner img[src*="syntegon"],
:where(html[class*="page-teams-"]) .client-sec .box-inner img[src*="images203"],
:where(html[class*="page-teams-"]) .client-sec .box-inner img[src*="6-lenzing"] {
width: 58% !important;
height: auto !important;
max-height: none !important;
object-fit: contain;
}
/* --------------------------------------------------------------------------
49. Round twenty — the slash system, flush KPI columns, footer space
-------------------------------------------------------------------------- */
/* One rule for every slash-over-headline pair on the site: the slash is the
same size as its headline and sits over it like a first line at line-height
1.0 — no extra gap, anywhere. */
.about_label, .focus_label, .focus_card-label {
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
.about_label .about_slash,
.focus_label .about_slash,
.focus_label .focus_slash,
.focus_card-label .focus_slash {
font-size: 40px;
line-height: 1 !important;
display: inline-block;
}
.about_label-text, .focus_label-text { margin-top: 0 !important; }
.about_label-text > h2, .about_label-text > h3,
.focus_label-text > h2, .focus_label-text > h3 { margin-top: 0 !important; }
@media (max-width: 991px) {
.about_label .about_slash,
.focus_label .about_slash,
.focus_label .focus_slash,
.focus_card-label .focus_slash { font-size: 26px; }
}
/* KPI band: the three columns end flush top and bottom — each column is a
flex stack and its plate absorbs the leftover, nothing carries a fixed
ratio on the desktop */
.box-wrapper { align-items: stretch !important; }
/* only the label+plate pairs become flex stacks — the 2x2 tile grids of the
subpage bands keep the export's own layout */
@media (min-width: 768px) {
.box-wrapper > div:has(> .box-2) { display: flex; flex-direction: column; min-height: 0; }
/* neither the label cell nor the plate may be squeezed by the stretch —
a shrunken label cell was exactly the offset the row showed */
.box-wrapper > div:has(> .box-2) > .box-1 { flex: 0 0 auto; }
.box-wrapper > div:has(> .box-2) > .box-1 > .box-inner { flex-shrink: 0; }
.box-wrapper > div:has(> .box-2) > .box-2 { flex-shrink: 0; }
}
/* the plates keep their strict ratio — the columns end flush because main.js
levels the label cells above them to one height per row (§ equalKpiLabels) */
/* the orange plates: 4:3 on the desktop, the flatter 4:2 in the tablet band */
@media (min-width: 1200px) {
.box-wrapper .box-2,
.track-sec .box-2 { height: auto !important; } /* Verhältnis: §95 als Boden */
}
@media (min-width: 768px) and (max-width: 1199px) {
.box-wrapper .box-2,
.track-sec .box-2 { height: auto !important; } /* Verhältnis: §72 als Boden */
}
/* one size for every figure in the KPI boxes — sitewide, wherever it sits in
the box, and no orphaned words („… & / CAGRs"); one weight too — the
heading-010 figures came out bolder than the text-size-xlarge ones */
.box-inner.h-195 .text-size-xlarge,
.box-inner.h-195 .heading-010 {
font-size: 48px !important;
line-height: 52px !important;
font-weight: 500 !important;
text-wrap: balance;
}
@media (min-width: 992px) and (max-width: 1364px) {
.box-inner.h-195 .text-size-xlarge,
.box-inner.h-195 .heading-010 { font-size: clamp(28px, 2.9vw, 48px) !important; line-height: 1.1 !important; }
}
@media (max-width: 991px) {
.box-inner.h-195 .text-size-xlarge,
.box-inner.h-195 .heading-010 { font-size: 32px !important; line-height: 36px !important; }
}
/* project-card tiles: the value is one size in all four tiles — the size
„Machinery" runs at */
.project-box .box-inner .heading-010,
.project-box .box-inner .text-size-xlarge,
.project-box .box-inner .text-block-2 {
font-size: 24px !important;
line-height: 28px !important;
text-wrap: balance;
}
@media (max-width: 767px) {
.project-box .box-inner .heading-010,
.project-box .box-inner .text-size-xlarge,
.project-box .box-inner .text-block-2 { font-size: 20px !important; line-height: 24px !important; }
}
/* …and the contour is the same 1px everywhere, whatever the export layered */
.project-box .box-1, .project-box .box-1 > .box-inner { box-shadow: none !important; }
/* footer: the swoosh spans exactly the lower-left quarter again — tail in the
screen corner, tip on the centre of the footer, the geometry that was signed
off. The copy block sits closer to the legal row. */
.section-2 > .code-embed.lottie.absolute2 {
width: 50% !important;
height: 50% !important;
aspect-ratio: auto !important;
}
.footer-bottom .mb-94 { margin-bottom: 40px !important; }
/* team and expertise start on dark photos too */
html.page-team .hero-sec2.py-100,
html.page-expertise .hero-sec2.py-100 { --hero-dark: 1; }
/* The wordmark is centred by the scene itself (flex, both axes) — the earlier
rule here aimed at the wrong element and shoved the lines animation off
screen instead. The lines layer keeps its own authored position. */
/* the team picture ends on its own edge. Two hairline sources, both closed:
the inline gap under the img (display block), and the sub-pixel strip the
zoom rounding leaves between the picture and the dark band that follows —
the wrapper carries that band's colour and tucks 1px under it, so any
rounding seam is dark on dark. */
/* height:auto, or the width/height attributes (there for the pre-load layout
height) pin the rendered height and distort the composite */
.executives_photos img.image-2 { display: block; width: 100%; height: auto; }
.executives_photos { line-height: 0; }
/* the sub-pixel seam the zoom rounding leaves between the picture and the dark
band: a 2px strip in the band's colour closes it — dark on dark, invisible;
the wrapper itself stays transparent, the PNG keeps the section's white
behind its transparency */
/* the composite's own bottom edge carries resampling artefacts (a light
hairline row): the wrapper clips the last 2px of the picture away — no
strips, no borders, nothing added */
.executives_photos { overflow: hidden; }
.executives_photos img.image-2 { margin-top: -2px; margin-bottom: -2px; }
/* case studies: the white Approach copy boxes run as wide as the photograph
below them on the phone — edge to edge */
@media (max-width: 767px) {
.complex-sec .box-3 {
margin-left: -20px !important;
margin-right: -20px !important;
width: auto !important;
max-width: none !important;
}
}
/* accordions: paragraphs read as paragraphs */
.accordion-body p { line-height: 1.5 !important; margin-bottom: 14px; }
.accordion-body p:last-child { margin-bottom: 0; }
/* case studies: one distance between a section head and what follows it */
.complex-sec .focus_left,
.feedback-sec2 .focus_left,
.setup-sec .px-40 .focus_left { margin-bottom: 40px !important; }
/* client feedback card: same width, same insets, copy left-aligned — like
every other box on the page */
@media (max-width: 767px) {
.feedback-sec2 .feedback-row { width: 100% !important; margin: 0 !important; display: block; }
.feedback-sec2 ._w-34, .feedback-sec2 ._w-66 { width: 100% !important; }
.feedback-sec2 .team-body2, .feedback-sec2 .team-body2 * ,
.feedback-sec2 .feedback-row p { text-align: left !important; }
}
/* the wash is the heroes' own ramp over the whole picture — no blur; the
blurred panel arrives with the hover */
.section_focus .focus_card > .focus_card-overlay {
inset: 0 !important;
height: auto !important;
max-height: none !important;
opacity: 1 !important;
/* the same quieter ramp as the heroes (§32) */
background-image: linear-gradient(180deg,
rgba(33, 33, 33, .10) 0%,
rgba(33, 33, 33, .22) 44%,
rgba(251, 143, 95, .38) 82%,
rgba(254, 80, 0, .62) 100%) !important;
}
@media (min-width: 1200px) {
.section_focus .focus_card:hover .focus_card-content.translate-45 {
-webkit-backdrop-filter: blur(50px);
backdrop-filter: blur(50px);
}
}
/* on the phone the card holds at least a square — cards with shorter copy get
the taller picture instead of a flat band; longer copy still grows past it */
@media (max-width: 767px) {
.section_focus .focus_card,
.section_focus .focus_card.aspect-ratio {
aspect-ratio: 1 / 1 !important;
height: auto !important;
}
}
/* expertise: the two filter pills share one row on the phone */
@media (max-width: 767px) {
html.page-expertise .tab-box {
display: flex !important;
flex-wrap: nowrap !important;
gap: 6px;
}
html.page-expertise .tab-box > a { flex: 1 1 0; min-width: 0; width: auto !important; }
html.page-expertise .tab-box .tab-inner-btn { padding: 10px 8px !important; justify-content: center; gap: 5px; }
html.page-expertise .tab-box .text-block { font-size: 11px; line-height: 13px; white-space: nowrap; }
}
/* people without a finished profile do not link out and do not light up —
their cards carry no href at all */
a.team-card:not([href]) {
pointer-events: none;
cursor: default;
}
a.team-card:not([href]) .team-card_overlay,
a.team-card:not([href]) [class*="overlay"],
a.team-card:not([href]):hover .team-card_overlay,
a.team-card:not([href]):hover [class*="overlay"] {
opacity: 0 !important;
height: 0 !important;
}
/* the homepage project cards are exhibits, not links */
html.page-index .projects-sec a.project-box,
html.page-index .projects-sec .project-box { pointer-events: none; cursor: default; }
/* project-card values a size up on the desktop */
@media (min-width: 1200px) {
.project-box .box-inner .heading-010,
.project-box .box-inner .text-size-xlarge,
.project-box .box-inner .text-block-2 { font-size: 30px !important; line-height: 34px !important; }
}
/* --------------------------------------------------------------------------
50. iPad pass
-------------------------------------------------------------------------- */
/* focus cards in the tablet band: one card per view at the desktop's 4:3, and
the slider controls that the export only drew on the phone come along */
@media (min-width: 768px) and (max-width: 1199px) {
.section_focus .focus_card.aspect-ratio,
.section_focus .focus_card {
aspect-ratio: 4 / 3 !important;
height: auto !important;
}
.section_focus .swiper-pagination { display: block !important; }
.section_focus .swiper-button-prev,
.section_focus .swiper-button-next { display: flex !important; }
}
/* the white explainer box carries one inset on all sides */
.box-wrapper .box-3 { padding: 40px !important; }
@media (max-width: 991px) { .box-wrapper .box-3 { padding: 25px !important; } }
/* fullscreen menu: larger entries on the tablet */
@media (min-width: 768px) and (max-width: 1199px) {
.menu-item .list-item .navbar-link,
.menu-item .navbar-link { font-size: 44px !important; line-height: 1.35 !important; }
}
/* while the menu is open nothing composites over it: the pill bars and the
sticky header carry backdrop-filters that otherwise paint above the sheet —
the sheet's own bar mirrors the header, so nothing is lost.
Der Vorhang braucht 0,6s (§12). SOFORT versteckt wirkte das wie ein Schaden:
Text, Rahmen und Glas der Hero-Pillen verschwanden, bevor der Vorhang sie
erreicht hatte, und die orangen Punkte hingen mit ihrer eigenen transition
sichtbar nach (Kundenfilm 5.8., 21:19, /team). Jetzt fällt nur der Filter
sofort (der Compositing-Grund), versteckt wird erst, wenn der Vorhang das
Element überdeckt hat: Leiste nach 0,1s, Pillenreihe nach 0,45s (überdeckt
bei ~390ms, im Band gemessen). Beim Schließen gilt der Grundzustand ohne
Verzögerung — alles steht wieder, bevor der Vorhang den Blick freigibt. */
html.menu-open .navbar_wrapper,
html.menu-open .tab-box { visibility: hidden !important; }
html.menu-open .navbar_wrapper, html.menu-open .navbar_wrapper *,
html.menu-open .tab-box, html.menu-open .tab-box * {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
html.menu-open .navbar_wrapper { transition: visibility 0s .1s; }
html.menu-open .tab-box { transition: visibility 0s .45s; }
/* expertise cards are square, at every size */
.experience-card { aspect-ratio: 1 / 1 !important; height: auto !important; }
/* secondary industry tags feed the filter only, they never render on the card */
.experience-card .industry-tag.hidden { display: none !important; }
/* the photo always covers the whole square — with the card's own aspect the
image's natural ratio otherwise leaves bands above and below */
.experience-card > picture.image-34,
.experience-card > .image-34 {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
}
.experience-card picture.image-34 > img.image-34 {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
object-fit: cover;
}
/* iPad: the portrait keeps to the right edge, the hero pill stays content-wide,
and the big plate figures double up */
@media (min-width: 768px) and (max-width: 1199px) {
.profile-hero_media { width: 70%; right: 0; justify-content: flex-end; }
.hero-sec2 .tab-btn._w-full.block,
.profile-learnmore { width: auto !important; min-width: 220px; }
.hero-sec2 .tab-box { display: inline-flex !important; width: auto !important; }
.box-2 .text-block-2 { font-size: 64px !important; line-height: 1.05 !important; }
}
/* the white Webasto mark vanished on the white expertise card — it reads in
ink there like every other mark */
.experience-card img[src*="webasto-logo-white"] { filter: brightness(0); }
/* Tablet band 768–991: the type order holds — section headlines above their
sub-lines, never inverted. The KPI figures keep their own later rules. */
@media (min-width: 768px) and (max-width: 991px) {
.text-size-xlarge { font-size: 34px; line-height: 1.2; }
.heading-style-h5 { font-size: 22px; line-height: 1.35; }
}
/* --------------------------------------------------------------------------
52. KPI label cells: the label starts on the top inset, the cell hugs its
copy with the same inset on every side, and the two label boxes of a row
read from one top line (the row itself is levelled by equalKpiLabels).
-------------------------------------------------------------------------- */
.box-wrapper .box-1 > .box-inner.h-110,
.track-sec .box-1 > .box-inner.h-110 {
height: auto !important;
min-height: 0 !important;
align-items: flex-start !important;
justify-content: flex-start !important;
}
/* the label wraps on the cell's own width — the export capped it at 200px,
which forced a third line */
.box-wrapper .box-1 > .box-inner.h-110 > p,
.track-sec .box-1 > .box-inner.h-110 > p { max-width: none !important; width: auto !important; }
/* „Over an average of 3 years" runs the same ramp as the label above it —
here and in every KPI band on the subpages */
.box-wrapper .box-2 > .heading-6,
.track-sec .box-2 > .heading-6 {
font-size: 24px !important;
line-height: 28px !important;
}
@media (min-width: 992px) and (max-width: 1364px) {
.box-wrapper .box-2 > .heading-6,
.track-sec .box-2 > .heading-6 { font-size: clamp(18px, 1.9vw, 24px) !important; line-height: 1.3 !important; }
}
@media (max-width: 991px) {
.box-wrapper .box-2 > .heading-6,
.track-sec .box-2 > .heading-6 { font-size: 18px !important; line-height: 24px !important; }
}
/* on the Impact bands the plate's label and its „Over an average …" line match
the small boxes' caption ramp (20/18/16) and read from the same top line —
only rows that actually pair the plate with caption boxes.
Größen only — die Zeilenhöhe kommt aus §65, sonst gälten für dieselbe
Beschriftung je nach Nachbarkasten zwei verschiedene Werte. */
.box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner.h-110 > p,
.box-wrapper:has(.box-inner.h-195) .box-2 > .heading-6 {
font-size: 20px !important;
}
@media (min-width: 992px) and (max-width: 1364px) {
.box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner.h-110 > p,
.box-wrapper:has(.box-inner.h-195) .box-2 > .heading-6 { font-size: 18px !important; }
}
@media (max-width: 991px) {
.box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner.h-110 > p,
.box-wrapper:has(.box-inner.h-195) .box-2 > .heading-6 { font-size: 16px !important; }
}
/* team headline → photo: half the old air, homepage only */
html.page-index .executives_photos.mt-60 { margin-top: 30px !important; }
/* --------------------------------------------------------------------------
51. Short windows: the stacked 4:3 plate outgrew screens like 705×600 —
on low viewports (split screen, landscape phones) the plates run 4:2.
Height-gated, so portrait phones and full-height screens keep their ratio.
-------------------------------------------------------------------------- */
@media (max-width: 767px) and (max-height: 750px) {
.box-wrapper .box-2,
.track-sec .box-2 { aspect-ratio: 4 / 2 !important; }
}
/* --------------------------------------------------------------------------
37. Landscape phones (short viewports): one screen is not enough.
The hero stacks — copy on the first screen, the swoosh drawing below it,
the scroll indicator at the very end; subpage heroes get room too.
-------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 550px) and (max-width: 991px) {
.section_hero,
.section_hero.d-flex {
/* 11.8.: von 170vh auf 110vh — der Keil schließt jetzt bündig mit der
Hero-Unterkante ab (Kundenwunsch „unten bündig"), der zweite Schirm
ist nur noch der Rest des Keils. */
min-height: 110vh !important;
align-items: flex-start !important;
}
.section_hero > .container { margin-top: 0; }
/* the claim at desktop size does not fit a 430px-tall screen above the
drawing — a size down keeps copy and swoosh apart */
.section_hero .hero_heading,
.section_hero .heading-style-h2.hero_heading { font-size: 44px !important; line-height: 1.15 !important; }
/* NEU 11.8., dritte Fassung (Kundenwünsche iPhone quer: „nicht linksbündig,
riesiger weißer Abstand" → „unten bündig"): die Telefon-Zeichnung ist ein
1080×1920-HOCHFORMAT-SVG — mit `meet` stand sie quer als 242px schmaler
Streifen mittig, und jeder `slice`-Ausschnitt ließ Leerraum unter dem
Keil (der YMid-Ausschnitt kann nie unter die Bildmitte). Deshalb jetzt
GEOMETRISCH: die Zeichnung läuft in ihrem ECHTEN Seitenverhältnis
(100vw × 177,78vw — dann gibt es keinerlei Einpass-Verschiebung mehr,
preserveAspectRatio ist wirkungslos) und wird so verankert, dass die
KEIL-UNTERKANTE exakt auf der Hero-Unterkante liegt: die Tinte endet
89,6vw über dem unteren Bildrand (am stehenden Endbild vermessen).
Das 21vw hohe Band umschließt den ganzen Keil samt Spitze und schneidet
den Rest der (transparenten bzw. beim Laden matten) Fläche ab.
Anker: die Positionierungs-Box des Wrappers ist 100vh hoch, der Hero
80px Kopfleiste + 110vh — daher calc(-10vh − 80px). Nachgemessen bei
932×430, 844×390, 812×375: Bandunterkante == Oberkante section_about,
auf den Pixel. main.js §16 (slice) bleibt — bei exaktem Verhältnis ohne
Wirkung, schadet nicht. */
html.page-index .animation-wrapper.z-11 {
top: auto !important; bottom: calc(-10vh - 80px) !important;
height: 21vw !important; overflow: hidden !important;
}
html.page-index .animation-wrapper .code-embed-13 .lottie-animation_2 {
width: 100vw !important; height: 177.78vw !important;
left: 0 !important; top: auto !important; bottom: -89.6vw !important;
position: absolute !important; transform: none !important;
}
/* a landscape phone is 768+ wide, so the export switches to the DESKTOP
swoosh — the matte version with the dark ground. Lying down it must stay
the transparent phone drawing, whatever the width says */
.animation-wrapper .code-embed-12 { display: none !important; }
.animation-wrapper .code-embed-13 { display: block !important; }
/* photo heroes on the subpages: 100vh is too flat lying down */
.hero-sec2, .hero-sec2.py-100,
.profile-hero_inner,
.team-hero, .team-hero-inner {
min-height: 150vh !important;
}
/* NEU 11.8. (Kundenbefunde iPhone quer): „Wir treiben Transformationen."
lief beidseitig über den Schirmrand, ohne Randabstand. Zwei Ursachen:
(a) die Sektion trägt flex-shrink:0 und nimmt sich die Breite ihrer
EINZEILIGEN Überschrift (1052px bei 932px Fenster — min-width:auto der
Flex-Kette), (b) die Überschrift selbst steht auf white-space:nowrap
und kann gar nicht umbrechen. Beides nur in diesem Fenster gelöst:
Breitenkette geklemmt und Umbruch erlaubt — der deutsche Satz läuft
zweizeilig („Wir treiben / Transformationen."), der englische passt
einzeilig. Vorher/nachher bei 932×430 gemessen: DE 2 Zeilen 40..892,
EN 1 Zeile 47..885, kein Überlauf. */
/* 11.8. spät: diese drei Regeln sind zu §203 ans Dateiende gewandert —
GLOBAL statt nur im Querformat-Fenster. Der Kunde traf den Überlauf auch
in einem hohen ~780px-Fenster („der text läuft immer noch über den
bildschirm raus"). */
/* the drawing sits between the subline and the Contact button (main.js
moves the node there); the desktop corner copy stays off */
.section-2 .code-embed.lottie.absolute2.hidden { display: none !important; }
.section-2 .div-block-2 > .code-embed.lottie.absolute2.block {
display: block;
position: static;
/* 11.8.: von 50 % auf 78 % — „lottie viel zu klein" (Kunde); nachts
zurück auf LINKSBÜNDIG statt mittig (Kundenfoto: „im footer ist die
lottie nicht mehr linksbündig"). */
width: 78% !important;
height: auto !important;
margin: 24px 0 !important;
padding-top: 0 !important;
}
.section-2 .div-block-2 > .code-embed.lottie.absolute2.block > svg {
display: block;
width: 100% !important;
height: auto !important;
}
/* ZURÜCKGENOMMEN (Rückmeldung 3. August): hier stand `transform: scale(1.35)`
auf den Referenzlogos. Ein Transform vergrößert das Bild, ohne dass die
Kachel davon weiß — breite Wortmarken liefen deshalb über ihren Rahmen und
wurden von `overflow: hidden` beschnitten (FRESHFIELDS auf Boris' Profil,
sichtbar in Firefox und Safari ab 1365px). Die Logos laufen jetzt in ihrer
eigenen Größe, so wie die Ausgangsdateien es vorgeben. */
}
/* --------------------------------------------------------------------------
38. Round 31 — consistency pass from the phone review
-------------------------------------------------------------------------- */
/* "Client feedback" sat 110px above its row on tablet widths while every
other section runs ~40 — the export's 70px desktop padding stops at 992 */
@media (max-width: 991px) {
.feedback-row { padding-top: 20px !important; }
}
/* case studies, phone: the white Approach boxes span the same width as the
photograph used to (the 20px inset), and the photograph itself now runs
edge to edge */
@media (max-width: 767px) {
.complex-sec .div-block-23 { padding-right: 0 !important; }
.complex-sec .div-block-22 {
margin-left: -20px !important;
margin-right: -20px !important;
width: calc(100% + 40px) !important;
max-width: none !important;
}
.complex-sec .div-block-22 .image-29 { width: 100% !important; }
}
/* the interview banner keeps the same clearance to the section above as to
the screen edges (the page inset), on the phone that is 20px */
@media (max-width: 767px) {
.video-banner-sec { padding-top: 20px !important; }
}
/* the photograph that opens the section right under a subpage hero sits
flush against the hero on the phone — no white gap between the two */
@media (max-width: 767px) {
.hero-sec2 + .approch-sec { padding-top: 0 !important; }
}
/* subpage heroes: the translucent plate behind the Learn-more button is part
of the design at every size — phones and lying-down phones included */
@media (max-width: 991px) {
.hero-sec2 .tab-btn-wrapper .tab-box {
background-color: rgba(217, 217, 217, .5);
border-radius: 16px;
padding: 10px;
}
}
/* profile heroes, phone: the orange ground ran to full brand and swallowed
the photo — it stays a wash like the other page overlays (never deeper
than the mid tone), on every profile alike */
@media (max-width: 767px) {
.profile-hero_inner {
background-image: linear-gradient(180deg,
#fafafa 0%, #fafafa 40%, #fde3d6 72%, #fb8f5f 100%) !important;
}
}
/* accordion copy: the intro paragraph breathes a bit less, the slash list a
lot more — the two ran on the same leading and read wrong both ways */
.accordion-body h3.fs-24 { line-height: 1.4 !important; }
.accordion-body h3.fs-24.leading-26 { line-height: 1.9 !important; }
/* any flat landscape viewport — a phone lying down or a squat desktop
window — cannot hold the footer copy in one screen height: the footer
grows with its content instead (main.js skips the 100svh clamp under the
same query), and the claim moves up so the copy leads the plate */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 991px) {
.section-2 {
height: auto !important;
max-height: none !important;
min-height: 100vh !important;
}
.section-2 > .overflow-hidden.section_footer-cta { padding-top: 120px !important; }
}
/* footer on tablets: the claim reads at desktop presence (the zoom bands
shrank the vw size to a whisper), the subline wraps instead of cropping,
and the wordmark keeps its own proportions, centred — it was stretched
to the container width in the bands */
@media (min-width: 992px) and (max-width: 1364px) {
.footer-cta_headline { font-size: min(130px, 9vw) !important; }
}
@media (min-width: 1365px) and (max-width: 1849px) {
.footer-cta_headline { font-size: min(110px, 6.5vw) !important; }
}
@media (max-width: 1849px) {
.footer-cta_description .bold-text-24,
.footer-cta_description .bold-text-25 { white-space: normal !important; }
}
@media (min-width: 768px) {
.footer-bottom img.mb-94 {
display: block;
width: auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
}
/* reference logos on tablets: the page zoom shrank the tuned intrinsic sizes
by 20-30% — a uniform counter-scale restores them without touching their
relative weights (no per-logo widths, no distortion) */
/* ZURÜCKGENOMMEN (3. August): scale(1.43) im Tablet-Band — siehe §37. */
/* ZURÜCKGENOMMEN (3. August): scale(1.25) im 0,8-Band — siehe §37. Genau diese
Stufe schnitt FRESHFIELDS auf Boris' Profil an beiden Seiten ab. */
/* team grid on the tablet: a vw rule shrank the names under their role
labels (21px vs 24px caps) — the name always leads */
@media (min-width: 992px) and (max-width: 1199px) {
html.page-team h2.heading-style-h5.text-color-primary {
font-size: 28px !important;
line-height: 1.25 !important;
}
}
/* the full-width focus card on the tablet: a roomier inset, and the copy
starts on the same left edge as the body text outside the card.
NACHTRAG: die 56px oben/unten stammen aus der Zeit, in der hier EINE Karte über
die ganze Breite lief. Seit §107 stehen es drei, und der Abstand unter der
Überschrift las damit 56px gegen 40px links — bei 1440 waren beide schon 40.
Rundum 40, also überall unten wie links. */
@media (min-width: 992px) and (max-width: 1199px) {
.section_focus .focus_card > .focus_card-content,
.section_focus .focus_card > .focus_card-content.translate-45 {
padding: 40px !important;
}
.section_focus .link-block-2 { bottom: 40px !important; right: 40px !important; }
}
/* KPI plates on the tablet: the export pins their height (100% - 113px), so
the big figure ran out of the plate — the plate grows with its figure, and
the figure itself takes one size down in the band */
@media (min-width: 992px) and (max-width: 1199px) {
.box-wrapper .box-2,
.track-sec .box-2 {
height: auto !important;
min-height: 240px;
}
.box-wrapper .box-2 .text-block-2.fs-60,
.track-sec .box-2 .text-block-2.fs-60 {
font-size: 48px !important;
line-height: 1.15 !important;
}
}
/* the card contour paints ~1px at every size: in the 0.7 band the old
1px border + 1.3px padding ring stacked to 2.3px CSS and read fat on the
iPad — one 1.5px border stroke survives the zoom rounding instead */
@media (min-width: 992px) and (max-width: 1365px) {
.box-1 { padding: 0 !important; border-width: 1.5px !important; }
}
/* typography in the 0.7/0.8 bands (tablets): the slash labels ran a size
larger than the headline they belong to — they are always 1:1 with it; and
the body copy kept desktop pixel line-heights against vw-shrunk faces,
which squeezed the lines — a relative leading breathes at every width */
@media (min-width: 992px) and (max-width: 1365px) {
/* Keine eigene Größe für den Slash mehr: main.js misst ihn aus der echten
Headline daneben. Solange hier zusätzlich 2.1vw stand, galt bei jedem
resize (auf dem iPad reicht das Ein- und Ausfahren der Adressleiste) erst
der CSS-Wert und danach der gemessene — der Slash sprang sichtbar hin und
her. Eine Quelle, kein Springen. */
.text-color-brand.about_slash,
.text-color-brand.focus_slash,
.text-color-brand.complex-slash,
.text-color-brand.complex-slash.fs-40 {
line-height: 1 !important;
}
.paragraph-5, .paragraph-3, .paragrapgh,
.approch-sec p, .scope-sec p,
p.text-size-large {
line-height: 1.45 !important;
}
}
/* profile hero on tablets: name/role/button take exactly the subpage-hero
scale (h2 2.5vw / h3 2.1vw / pill 1.5vw + 16px inset) instead of their
fixed desktop pixels */
@media (min-width: 992px) and (max-width: 1365px) {
.profile-hero_name { font-size: 2.49vw !important; line-height: 1.2 !important; }
.profile-hero_role { font-size: 2.1vw !important; line-height: 1.2 !important; }
.profile-hero_tab,
.profile-hero_tab .text-block,
.profile-hero_tab div { font-size: 1.5vw !important; }
.profile-hero_tab { padding: 16px !important; }
}
/* --------------------------------------------------------------------------
39. Re-check round: the 768-991 band (iPad portrait) missed the tablet
fixes, and the experience tiles had a hidden third clipper.
-------------------------------------------------------------------------- */
/* THE text clipper in the experience tiles: the role text sits in a
70px-capped scroll container (.custom-scrollbar) — long roles scrolled
behind an invisible bar instead of showing. It grows with its text now,
the tile equal-height machinery above does the rest. */
.client-sec .div-block-31.custom-scrollbar {
max-height: none !important;
height: auto !important;
overflow: visible !important;
flex-shrink: 0;
}
/* the dyn-built grid nests one level deeper than the export grid — the
equal-height chain runs through .div-block-25, not the cell itself */
.client-sec .client-box-wrapper .div-block-25 {
height: 100%;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.client-sec .client-box-wrapper .div-block-25 > .box-1.mt-1 {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.client-sec .client-box-wrapper .div-block-25 > .box-1.mt-1 > .box-inner {
flex: 1 1 auto;
height: auto !important;
overflow: visible !important;
}
/* iPad portrait is 768-991 wide — the tablet type fixes apply here too */
@media (min-width: 768px) and (max-width: 991px) {
.footer-cta_headline { font-size: min(96px, 7.5vw) !important; }
html.page-team h2.heading-style-h5.text-color-primary {
font-size: 24px !important;
line-height: 1.25 !important;
}
}
/* --------------------------------------------------------------------------
40. Tablet pass II. One root cause up front: inside the zoom bands Safari
and Chrome disagree on vw (Safari does not scale it by the zoom factor),
so band-scoped type is sized in px from here on — px scales with zoom
identically in every engine.
-------------------------------------------------------------------------- */
/* footer claim: fixed px per band, never wider than the screen */
@media (min-width: 992px) and (max-width: 1364px) {
.footer-cta_headline { font-size: 100px !important; }
}
@media (min-width: 1365px) and (max-width: 1849px) {
.footer-cta_headline { font-size: 84px !important; }
}
/* project-grid tags: both chips a size down on tablets so "BY BICKEL &
COMPANY" and "Case Study" never meet in the middle of a card */
@media (min-width: 768px) and (max-width: 1365px) {
.tag { font-size: 12px; padding: 6px 8px; line-height: 12px; }
}
/* accordion titles sat at desktop size inside the tablet boxes */
@media (min-width: 992px) and (max-width: 1365px) {
.accordion-btn, .accordion-btn div { font-size: 26px !important; line-height: 30px !important; }
}
/* KPI plates: the label in the contour box starts on the same left edge as
the figure in the filled plate below — the export gave them different
insets in the bands; and the labels take one size down */
@media (min-width: 992px) and (max-width: 1849px) {
.box-wrapper .box-1 > .box-inner,
.track-sec .box-1 > .box-inner { padding-left: 32px !important; }
.box-wrapper .box-2,
.track-sec .box-2 { padding-left: 32px !important; padding-right: 32px !important; }
.box-wrapper .box-1 > .box-inner .paragraph,
.track-sec .box-1 > .box-inner .paragraph,
.box-wrapper .box-1 > .box-inner p,
.track-sec .box-1 > .box-inner p { font-size: 24px !important; line-height: 1.35 !important; }
}
/* experience tiles: the role line is centred under its slash, with real
clearance to the bottom edge — KUKA's wrapped role touched the border */
.client-sec .box-1.mt-1 .box-inner {
text-align: center !important;
padding-bottom: 24px !important;
}
.client-sec .box-1.mt-1 .box-inner .text-block-10,
.client-sec .box-1.mt-1 .box-inner .text-block-10.left,
.client-sec .box-1.mt-1 .box-inner .div-block-31 {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* team grid: the role labels stay one line and clearly under the name —
they outgrew the names in the bands (and wrapped into the next line) */
@media (min-width: 768px) and (max-width: 1365px) {
html.page-team .focus_label .text-color-brand.fs-24 {
font-size: 17px !important;
line-height: 1.2 !important;
white-space: nowrap;
}
html.page-team h2.heading-style-h5.text-color-primary {
font-size: 28px !important;
line-height: 1.25 !important;
}
}
/* profile heroes: the portrait pins to the right screen edge on tablets —
the person sits left of centre inside the source frame, so the frame
shifts right until the figure reads right-bound */
@media (min-width: 768px) and (max-width: 1365px) {
.profile-hero_media { right: 0 !important; justify-content: flex-end !important; overflow: hidden !important; }
.profile-hero_media img {
object-position: 100% 100%;
transform: translateX(28%) scale(1.38) !important;
transform-origin: 100% 0%;
}
}
/* project cards: the KPI grid can never outgrow its card — plain 1fr tracks
keep a min-content floor and Safari let long labels push the columns out
over the neighbouring slide; minmax(0,1fr) removes the floor */
.project-box-wrapper2 {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
max-width: 100%;
}
.project-box-wrapper2 .box-1 { min-width: 0; }
/* --------------------------------------------------------------------------
41. Phone pass (portrait + landscape) from the device review.
-------------------------------------------------------------------------- */
/* the footer drawing takes the hero's presence on the phone: full width in
its band (the raised claim leaves it the room) */
@media (max-width: 767px) {
.section-2 > .code-embed.lottie.absolute2.block { width: 100% !important; }
/* focus card: the heading sits as close to its copy as the slash headings
in the sections below do */
.section_focus .focus_card > .focus_card-content > *:last-child { padding-top: 12px !important; }
/* KPI plates: the contour-box label reads at the same size as the labels
in the small plates (heading-6), not a size up */
.box-wrapper .box-1 > .box-inner p,
.track-sec .box-1 > .box-inner p { font-size: 18px !important; line-height: 24px !important; }
}
/* project cards: the four KPI tiles share one size (the tallest of the row)
and keep the reference's flat proportions — never squares */
.project-box .project-box-wrapper2 { grid-auto-rows: 1fr; }
.project-box .project-box-wrapper2 .box-1 { min-width: 0; height: 100%; }
.project-box .project-box-wrapper2 .box-1 > .box-inner {
aspect-ratio: auto !important;
height: 100% !important;
min-height: 0 !important;
}
/* die Kachel selbst trägt das Verhältnis — quer, nie quadratisch. Es muss auf
dem Grid-Element sitzen: auf der Innenplatte gewann das `height: 100%` des
Exports immer, dann kam die Höhe aus dem Text. */
@media (min-width: 768px) {
.project-box .project-box-wrapper2 { grid-auto-rows: auto !important; }
.project-box .project-box-wrapper2 .box-1 {
aspect-ratio: 2.6 / 1;
height: auto !important;
}
}
/* profile hero: the Learn-more pill is the hero tab button, plate included —
it had drifted into its own look */
@media (max-width: 991px) {
.profile-hero_tabs {
display: inline-flex;
background-color: rgba(217, 217, 217, .5);
border-radius: 16px;
padding: 10px;
}
.profile-hero_tab,
.profile-hero_tab .text-block,
.profile-hero_tab div { font-size: 18px !important; }
.profile-hero_tab { padding: 14px 18px !important; border-radius: 8px; }
}
/* lying-down phones */
@media (orientation: landscape) and (max-height: 550px) and (max-width: 991px) {
/* the preloader's line animation was hidden by the 768-991 export rules */
/* the hero band drawing sits on the left half of the screen */
html.page-index .animation-wrapper.z-11 [data-animation-type="lottie"] {
top: 0 !important;
left: 0 !important;
transform: none !important;
min-width: 0 !important;
min-height: 0 !important;
width: 50vw !important;
height: 100% !important;
}
/* the footer drawing too: left-bound to the SCREEN edge, half the screen
wide — it escapes its centred column like the hero band does */
.section-2 .div-block-2 > .code-embed.lottie.absolute2.block {
width: 50vw !important;
margin: 32px 0;
align-self: flex-start;
/* the column is a fixed 500px, centred — this pulls the drawing's left
edge onto the screen edge at any landscape width */
margin-left: calc((500px - 100vw) / 2);
}
/* and the Contact button keeps clear air above the wordmark */
.section-2 > .overflow-hidden.section_footer-cta { padding-bottom: 48px; }
/* the background video runs 16:9 instead of a viewport crop */
.section_about .image-26.h-vh,
.section_about video.image-26 {
height: auto !important;
aspect-ratio: 16 / 9;
}
.section_about .img-holder { height: auto !important; }
}
/* project-card KPI tiles on the phone: the reference geometry — flat 2:1
tiles (min 70px), 12px inset, 12/17px type, 20px gap — instead of the
padded squares they had grown into */
@media (max-width: 767px) {
.project-box .project-box-wrapper2 { gap: 20px !important; }
.project-box .project-box-wrapper2 .box-1 > .box-inner {
padding: 12px !important;
min-height: 70px !important;
}
.project-box .project-box-wrapper2 .box-heading { font-size: 12px !important; line-height: 1.2 !important; }
.project-box .project-box-wrapper2 .box-inner p,
.project-box .project-box-wrapper2 .box-inner .heading-010,
.project-box .project-box-wrapper2 .box-inner .text-size-xlarge,
.project-box .project-box-wrapper2 .box-inner .text-block-2 {
font-size: 17px !important;
line-height: 17px !important;
}
}
/* KPI contour-box labels: one weight everywhere — the plates over the orange
figure ran semibold (.paragraph is 600) while the small plates' heading-6
runs 400 */
.box-wrapper .box-1 > .box-inner .paragraph,
.track-sec .box-1 > .box-inner .paragraph,
.box-wrapper .box-1 > .box-inner p,
.track-sec .box-1 > .box-inner p { font-weight: 400 !important; }
/* experience-tile logos: every file now lives on the same 560x494 canvas —
one render rule makes every tile identical (plain img and picture-wrapped
alike): the canvas fills the tile, the scale lifts the artwork to its
presence; canvas margins are transparent, so the overflow is invisible */
.client-sec .div-block-25 .box-1 .box-inner img.image-7,
.client-sec .div-block-25 .box-1 .box-inner picture.image-7,
.client-sec .div-block-25 .box-1 .box-inner picture.image-7 img {
width: 100% !important;
height: auto !important;
max-height: none !important;
}
.client-sec .div-block-25 .box-1 .box-inner img.image-7,
.client-sec .div-block-25 .box-1 .box-inner picture.image-7 {
display: block;
}
/* ZURÜCKGENOMMEN (Rückmeldung 3. August): hier stand `transform: scale(1.55)`.
Die Annahme darüber — „die Ränder der Zeichenfläche sind durchsichtig, der
Überstand fällt also nicht auf" — gilt nur für Logos, deren Tinte klein gegen
die 560×494-Fläche ist. FRESHFIELDS füllt die Fläche fast ganz aus: gemessen
bei 1600px 274px Logo in einer 209px-Kachel, 65px Überstand, den
`overflow: hidden` abschneidet. In Firefox und Safari war das Wortzeichen
dadurch an beiden Seiten ab. Die Logos laufen jetzt in der Größe, die ihre
Dateien vorgeben. */
.client-sec .div-block-25 .box-1 .box-inner picture.image-7 img { transform: none; }
/* --------------------------------------------------------------------------
42. Round 33 — self-review pass
-------------------------------------------------------------------------- */
/* section headings all carry the same weight: the reference left „How we do
it" and „Impact" at 500 while every other one runs 600, which read as a
smaller headline (and made its slash look oversized beside it) */
h2.text-size-xlarge,
h2.text-size-xlarge strong { font-weight: 600 !important; }
/* the footer claim never fades in — it is part of the plate, not a reveal */
.footer-inner, .footer-cta_headline, .footer-cta_headline-wrapper {
opacity: 1 !important;
transform: none !important;
}
/* THE cap on the experience role tiles: the export pins `.box-inner.h-auto`
to `max-height: 76px`. A wrapping role needs ~78px, so it spilled past the
tile edge — no padding could fix that, the ceiling had to go. The tile now
grows with its text and keeps a real 20px floor; the row's equal-height
chain lifts every sibling to the same height. */
.client-sec .box-1 .box-inner.h-auto,
.client-sec .box-1 .box-inner.h-auto.center {
max-height: none !important;
min-height: 76px !important;
height: auto !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
}
/* Section headings are one size per band. The export staffs `.text-size-xlarge`
by whatever utility classes a heading happens to carry — below 992 the same
section-heading role rendered at 20px (`.text-color-primary`), 26px (`+.my-0`)
or 32px, which is why „Impact" read much smaller than „Specialized Bickel &
Company team" right next to it. Hero titles keep their own scale. */
@media (min-width: 768px) and (max-width: 991px) {
h2.text-size-xlarge:not(.text-color-white),
.focus_label-text h2.text-size-xlarge,
.about_label-text h2.text-size-xlarge { font-size: 26px !important; }
}
@media (max-width: 767px) {
h2.text-size-xlarge:not(.text-color-white),
.focus_label-text h2.text-size-xlarge,
.about_label-text h2.text-size-xlarge { font-size: 24px !important; }
}
/* --------------------------------------------------------------------------
47. The interview video. It takes the exact box the portrait had — the page's
own image class still carries width, ratio and cover — and adds only what a
player needs: a black ground while it buffers, and the decorative layers of
the block stepping aside during playback so the native control bar is
reachable and the picture is not veiled.
-------------------------------------------------------------------------- */
video.bc-interview {
display: block;
width: 100%;
object-fit: cover;
background-color: #000;
}
/* `visibility`, nicht nur `opacity`: eine laufende opacity-Transition steht in
der Kaskade über jeder !important-Angabe — bleibt sie hängen (gedrosselte
Tabs), hielte sie die Deckschicht sichtbar über dem Film. */
.video-banner.is-playing .focus_card-overlay,
.video-banner.is-playing .video-text,
.video-banner.is-playing .video-btn,
.div-block-22.is-playing .link-block-4 {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* the play affordance is a button, not a link target — the click starts the
film, it never navigates */
.video-banner .video-btn,
.div-block-22 .link-block-4 { cursor: pointer; }
/* --------------------------------------------------------------------------
48. „Wer wir sind" liest im Schriftschnitt des Ansatz-Fließtextes (400 statt
500). Nur der Schnitt — Größe und Zeilenhöhe des Blocks bleiben.
-------------------------------------------------------------------------- */
html.page-about-us .heading-style-h5.text-color-primary.fs-medium.text-start {
/* identisch zum Ansatz-Fließtext (.paragraph-5), gemessen 24px/400/28px —
„Wer wir sind" lief auf 32px/500/36px */
font-size: 24px !important;
line-height: 28px !important;
font-weight: 400 !important;
}
@media (min-width: 992px) and (max-width: 1365px) {
/* im Zoom-Band führt .paragraph-5 eine relative Zeilenhöhe (1.45) */
html.page-about-us .heading-style-h5.text-color-primary.fs-medium.text-start {
line-height: 1.45 !important;
}
}
@media (max-width: 767px) {
html.page-about-us .heading-style-h5.text-color-primary.fs-medium.text-start {
font-size: 16px !important;
line-height: 20px !important;
}
}
/* --------------------------------------------------------------------------
49. Rein technische Korrekturen aus den zurückgedrehten Runden. Jede behebt
ein defektes Verhalten, keine ändert Typo, Abstände, Größen oder Raster.
-------------------------------------------------------------------------- */
/* (a) Die Pfeile der Selected Experiences gehören zum Slider — und der lebt nur
unter 780px (ab dort übernimmt das Grid, gemessen). Vorher entschied JS aus
einer Messung, die zu früh lief und deren Urteil hängen blieb: die Pfeile
standen unter einem Grid ohne Slider. */
@media (min-width: 780px) {
.arrow-wrapper.exp-arrows { display: none !important; }
}
/* (b) Der Preloader deckt jeden Bildschirm voll ab. Der Export macht die Szene
unter 992px transparent (weißer Balken) und schaltet die Linien-Animation
dort ganz ab; und die Regeln, die die Hero-Zeichnung je Band verschieben,
trafen über den geteilten Klassennamen auch die Preloader-Ebene. */
/* Die Fläche des Preloaders bleibt DURCHSICHTIG, das Schwarz liegt darunter.
Sie stand auf `background-color: #000` bei z-index 10000 — und deckte damit die
Swoosh-Zeichnung ab, die bei z-index 11 dahinter läuft. Auf dem Telefon ist das
die einzige Animation des Ladeschirms: `code-embed-14` (die Linien des Desktops)
ist unter 480px ausgeblendet, `code-embed-13` (der mobile Swoosh) läuft.
Am eingefrorenen ersten Rebuild bei 390px nachgemessen: dort war die Fläche
`rgba(0,0,0,0)` und der Swoosh 1500×844 sichtbar — genau der Stand, den es
„schon mal" gab. Das Schwarz kommt jetzt von `html`, also unter der Zeichnung;
die Wortmarke sitzt im Scene und bleibt darüber. Die Seite selbst ist ohnehin
nicht zu sehen: `.page-wrapper` steht während des Ladens auf
`visibility: hidden` — dafür brauchte es die deckende Fläche nie. */
html.is-preloading,
html.is-preloading body { background-color: #000 !important; }
.preloader.scene,
#scene.preloader.scene { background-color: transparent !important; }
/* Die Linien-Animation läuft auf jedem Schirm — der Export schaltet sie unter
992px ab. Auf dem Handy aber nicht in der Desktop-Komposition: die Ebene ist
dort auf „cover" gerechnet (177vh breit), vom X-Muster wäre nur ein schmaler
Streifen der Mitte zu sehen. Unter 992px passt die Zeichnung deshalb
vollständig ins Bild. */
#scene .animation-wrapper {
top: 0 !important;
left: 0 !important;
height: 100% !important;
}
/* (c) Ein flaches Desktop-Fenster ist kein liegendes Handy: die Landschafts-
Regeln greifen nur noch bis 991px Breite. Bei 1100x500 wurde sonst der
Handy-Sonderfall aktiv (Hero 170vh, Zeichnung um 90vh verschoben). */
/* (d) Jede Marke füllt genau ihre Slide. Die Gegen-Skalierung, die vorher in den
Zoom-Bändern lag, schob die Grafik 25px darüber hinaus — die Platte der
Nachbar-Slide malte darüber, was als „Logos abgeschnitten" ankam. */
.myswiper3 .swiper-slide img,
.myswiper5 .swiper-slide img,
.myswiper6 .swiper-slide img {
transform: none !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain;
}
/* --------------------------------------------------------------------------
50. KPI-Boxen: Höhe der beiden Kontur-Boxen auf den Case-Seiten.
(Die Typografie-Vereinheitlichung, die hier stand — Label auf Sublinen-Maß,
Werte 64px, halbierte Wortwerte — ist zurückgenommen: sie hat das iPad-Raster
auseinandergezogen. Die Größen kommen wieder vollständig aus dem Export.)
-------------------------------------------------------------------------- */
/* (c) Höhe: der Export pinnt eine dieser Boxen auf 440px, die Nachbarbox zieht
per height:100% mit — und weil der Block als Grid-Zeile neben der hohen
orangenen Platte steht, streckte er sich auf 486px. `align-self: start`
nimmt die Streckung heraus, die Box kommt aus ihrem Inhalt (~250px, wie auf
den anderen Case-Seiten) und ist damit knapp halb so hoch. */
.box-inner-wrapper .box-1.h-440,
.box-inner-wrapper .box-1.h-full {
height: auto !important;
align-self: start;
}
.box-inner-wrapper .box-1.h-440 > .box-inner,
.box-inner-wrapper .box-1.h-full > .box-inner { height: auto !important; }
/* --------------------------------------------------------------------------
51. Aus der Änderungsliste: Nr. 9 — Abstand Sektions-Headline zum Inhalt
beim Client-Feedback auf das Maß der übrigen Sektionen (40 statt 70px).
-------------------------------------------------------------------------- */
.feedback-row { padding-top: 40px !important; }
@media (max-width: 991px) { .feedback-row { padding-top: 20px !important; } }
/* --------------------------------------------------------------------------
52. Footer wie im abgenommenen Stand: der Claim bleibt einzeilig und passt
in die Breite, Subline und Button sitzen höher, und der Inhalt passt in
einen Screen (main.js §2 nimmt zuerst die Oberkante, dann skaliert es).
Die Bandgrößen stehen in px: Safari skaliert vw im Zoom-Wrapper nicht, dort
malte `4.3vw` den Claim rund 1.4x zu groß — daher lief er zu breit.
-------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1365px) { /* zoom .7 */
.footer-cta_headline { font-size: 66px !important; white-space: nowrap !important; }
.section-2 .div-block-2 { padding-top: 24px !important; }
}
@media (min-width: 1365px) and (max-width: 1850px) { /* zoom .8 */
.footer-cta_headline { font-size: 76px !important; white-space: nowrap !important; }
.section-2 .div-block-2 { padding-top: 28px !important; }
}
@media (min-width: 1851px) {
.footer-cta_headline { font-size: 86px !important; white-space: nowrap !important; }
}
/* --------------------------------------------------------------------------
56. KPI-SEKTIONEN = EXPORT (Webflow-Referenz).
Über viele Runden sind hier 135 eigene Regelzeilen für die KPI-Boxen
entstanden. Statt sie einzeln zu entfernen (und dabei eine zu übersehen),
werden die Boxen an dieser Stelle geschlossen auf die Werte des Exports
gesetzt — site.css IST das CSS der Referenz, die Werte stammen daraus.
Gemessen an der Referenz bei 1194px, Startseite Track Record:
Label 16px/600/18px, Label-Box 110px mit 32/40-Inset, Platte 40px-Inset,
Figur 72px/600/72px, weiße Box 40px, Zellen 482/482/482.
-------------------------------------------------------------------------- */
/* NACHTRAG: rundum 40px statt `32px 40px`. Der Text stand oben 32px vom Rahmen,
links 40 — die weiße Box daneben führt 40 auf allen Seiten, und genau dieser
Unterschied war sichtbar. Die Kästen werden dadurch 16px höher; die Reihe
gleicht sich über das Raster aus. */
.box-wrapper .box-1 > .box-inner,
.track-sec .box-1 > .box-inner { padding: 40px !important; }
.box-wrapper .box-1 > .box-inner.h-110,
.track-sec .box-1 > .box-inner.h-110 { height: 110px !important; }
.box-wrapper .box-1 > .box-inner.h-195,
.track-sec .box-1 > .box-inner.h-195 { height: 195px !important; }
.box-wrapper .box-1 > .box-inner .paragraph,
.track-sec .box-1 > .box-inner .paragraph {
font-size: 16px !important;
line-height: 18px !important;
font-weight: 600 !important;
}
.box-wrapper .box-1 > .box-inner h6.heading-6,
.track-sec .box-1 > .box-inner h6.heading-6,
.box-wrapper .box-2 > h6.heading-6,
.track-sec .box-2 > h6.heading-6 {
font-size: 16px !important;
line-height: normal !important;
font-weight: 400 !important;
}
.box-wrapper .box-1 > .box-inner h6.heading-6.fs-semibold,
.track-sec .box-1 > .box-inner h6.heading-6.fs-semibold { font-weight: 600 !important; }
.box-wrapper .box-1 > .box-inner .text-size-xlarge,
.track-sec .box-1 > .box-inner .text-size-xlarge {
font-size: 48px !important;
line-height: 52px !important;
font-weight: 500 !important;
}
.track-sec .box-1 > .box-inner .heading-010 {
font-size: 26px !important;
line-height: 26px !important;
font-weight: 600 !important;
}
.box-wrapper .box-2,
.track-sec .box-2 { padding: 40px !important; }
.box-wrapper .box-2 .text-block-2,
.track-sec .box-2 .text-block-2,
.box-wrapper .box-2 .text-block-2.fs-60,
.track-sec .box-2 .text-block-2.fs-60 {
font-size: 72px !important;
line-height: 72px !important;
font-weight: 600 !important;
}
.box-wrapper .box-3 { padding: 40px !important; }
/* die Bänder des Exports */
@media (max-width: 991px) {
.box-wrapper .box-2, .track-sec .box-2 { padding-left: 20px !important; padding-right: 20px !important; }
.box-wrapper .box-3 { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 767px) {
.box-wrapper .box-2 .text-block-2.fs-60._w-400,
.track-sec .box-2 .text-block-2.fs-60._w-400 { font-size: 48px !important; line-height: 48px !important; }
.box-wrapper .box-1 > .box-inner .heading-010,
.track-sec .box-1 > .box-inner .heading-010 { font-size: 26px !important; line-height: 26px !important; }
.box-wrapper .box-3 { padding-left: 24px !important; padding-right: 20px !important; }
}
@media (max-width: 479px) {
.box-wrapper .box-1 > .box-inner,
.track-sec .box-1 > .box-inner { padding: 20px !important; }
.box-wrapper .box-2, .track-sec .box-2 { padding: 20px !important; }
.box-wrapper .box-3 { padding: 20px !important; }
.box-wrapper .box-1 > .box-inner .paragraph,
.track-sec .box-1 > .box-inner .paragraph { font-size: 13px !important; line-height: 13px !important; }
.box-wrapper .box-2 .text-block-2,
.track-sec .box-2 .text-block-2 { font-size: 44px !important; }
.box-wrapper .box-2 .text-block-2.fs-60,
.track-sec .box-2 .text-block-2.fs-60 { font-size: 40px !important; line-height: 56px !important; }
.box-wrapper .box-1 > .box-inner .heading-010,
.track-sec .box-1 > .box-inner .heading-010 { font-size: 17px !important; line-height: 17px !important; }
}
/* --------------------------------------------------------------------------
57. ZWEI GETRENNTE ZUSTÄNDIGKEITEN.
Die KPI-Boxen und die Projektkarten teilen sich im Export dieselben Klassen
(.box-1, .box-inner, .heading-010, .text-size-xlarge). Über die Runden haben
sich deshalb Regeln gegenseitig getroffen. Ab hier gilt: alles, was die KPI
betrifft, hängt an `.box-wrapper` / `.track-sec` — alles, was die Karten
betrifft, an `.project-box`. Keine Regel spricht beide an.
-------------------------------------------------------------------------- */
/* (a) KPI: eine Beschriftung für beide Kastentypen.
Gemessen vorher auf for-lenders: „Bankability secured" 18px/600/22px in der
h-110-Box gegen „Average adj. EBITDA margin uplift" 16px/600 in der h-195-Box. */
.box-wrapper .box-1 > .box-inner .paragraph,
.box-wrapper .box-1 > .box-inner > h6.heading-6,
.box-wrapper .box-1 > .box-inner.h-110 > p,
.track-sec .box-1 > .box-inner .paragraph,
.track-sec .box-1 > .box-inner > h6.heading-6,
.track-sec .box-1 > .box-inner.h-110 > p {
font-size: 16px !important;
line-height: 18px !important;
font-weight: 600 !important;
}
/* (b) Die Kästen tragen die Höhe des Exports als MINDESTmaß, nicht als festes.
So bleibt die Referenzhöhe, aber ein längeres deutsches Label läuft nicht
über den Rahmen — es macht den Kasten auf. */
.box-wrapper .box-1 > .box-inner.h-110,
.track-sec .box-1 > .box-inner.h-110 { height: auto !important; min-height: 110px !important; }
.box-wrapper .box-1 > .box-inner.h-195,
.track-sec .box-1 > .box-inner.h-195 { height: auto !important; min-height: 195px !important; }
/* (c) Zellen einer Reihe enden bündig — und die Platte füllt dabei ihren
Rahmen vollständig aus. Genau das verhindert die Farbbalken: sichtbar wird
der Verlauf nur dort, wo die Innenfläche kürzer ist als ihr Rahmen. */
.box-wrapper > *:has(> .box-2),
.track-sec .box-wrapper > *:has(> .box-2) { display: flex; flex-direction: column; }
.box-wrapper > *:has(> .box-2) > .box-2,
.track-sec .box-wrapper > *:has(> .box-2) > .box-2 {
flex: 1 1 auto;
height: auto !important;
min-height: 0 !important;
}
.box-wrapper .box-1,
.track-sec .box-1 { display: flex; }
.box-wrapper .box-1 > .box-inner,
.track-sec .box-1 > .box-inner { flex: 1 1 auto; width: 100%; }
/* (d) Die Zeile über dem Wert bleibt lesbar — der Export setzt sie unter 480px
auf 10px/10px. */
@media (max-width: 479px) {
.box-wrapper .box-2 > h6.heading-6,
.track-sec .box-2 > h6.heading-6 { font-size: 16px !important; line-height: 20px !important; }
}
/* (e) Projektkarten: eigener Bereich. Die KPI-Regeln oben greifen hier nicht
(sie hängen an .box-wrapper / .track-sec), und die Kartenregeln greifen
nicht in die KPI. */
.project-box .project-box-wrapper2 .box-1 > .box-inner .box-heading { font-size: 16px !important; line-height: 20px !important; }
/* …und die eine ältere Regel mit `:has()`, die durch ihre höhere Spezifität
noch 18px erzwang (deshalb las „Bankability secured" größer als die Label
der Nachbarkästen) */
/* Nur die Größe, nicht die Zeilenhöhe: durch das `:has()` hatte diese Regel die
höchste Spezifität im Feld und erzwang 18px Zeilenhöhe, während dieselben
Label ohne h-195-Nachbarn bei §62 landeten. Daher las das Label über der
orangenen Platte anders als die Label der Kästen daneben. Die Zeilenhöhe hat
ab §65 genau eine Quelle. */
.box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner.h-110 > p,
.box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner .paragraph,
.track-sec:has(.box-inner.h-195) .box-1 > .box-inner .paragraph {
font-size: 16px !important;
font-weight: 600 !important;
}
/* --------------------------------------------------------------------------
58. Kontaktbox: flacher. 4:2 ist das Ziel; wird der Text darin länger,
wächst die Box (min-height 0, height auto) statt ihn abzuschneiden.
-------------------------------------------------------------------------- */
.contact-box {
aspect-ratio: 4 / 2;
height: auto !important;
min-height: 0 !important;
justify-content: space-between;
}
@media (max-width: 991px) { .contact-box { aspect-ratio: 4 / 3; } }
/* --------------------------------------------------------------------------
59. Fließtexte auf Ansatz und Über uns: ein Schnitt, eine Größe, ein
Zeilenabstand — über alle Geräte. Light (300), auf dem iPad eine Spur
kleiner als zuvor (24 -> 22px) und überall 1.6 Zeilenhöhe für die
Lesbarkeit; vorher liefen sie auf 400 mit 28px festem Zeilenabstand.
-------------------------------------------------------------------------- */
.paragraph-5,
html.page-about-us .heading-style-h5.text-color-primary.fs-medium.text-start {
font-size: 24px !important;
line-height: 1.6 !important;
font-weight: 300 !important;
}
@media (min-width: 992px) and (max-width: 1365px) {
.paragraph-5,
html.page-about-us .heading-style-h5.text-color-primary.fs-medium.text-start {
font-size: 22px !important;
line-height: 1.6 !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.paragraph-5,
html.page-about-us .heading-style-h5.text-color-primary.fs-medium.text-start {
font-size: 20px !important;
line-height: 1.6 !important;
}
}
@media (max-width: 767px) {
.paragraph-5,
html.page-about-us .heading-style-h5.text-color-primary.fs-medium.text-start {
font-size: 16px !important;
line-height: 1.6 !important;
}
}
/* --------------------------------------------------------------------------
61. Profilseiten: kein Learn-more-Button mehr — die Pillenreihe darüber
führt bereits in jede Sektion. Der Text rückt dafür nach unten auf, und der
Hero ist auf Smartphones rund 40% flacher (weniger Luft über den Köpfen).
-------------------------------------------------------------------------- */
.profile-hero .profile-learnmore { display: none !important; }
@media (max-width: 767px) {
.profile-hero,
.profile-hero_inner { min-height: 60vh !important; min-height: 60svh !important; }
.profile-hero_content { padding-bottom: 24px !important; }
}
/* --------------------------------------------------------------------------
62. KPI-Boxen und Projektkarten: ein System für alle Zahlen und Schlagworte.
(1) Zahlenwerte sind immer größer als Kategorien und Schlagworte.
(2) Lange Wörter brechen um und weiten die Spalte nie — das Raster bleibt.
(3) Beschriftungen laufen eng (1.1), mehr Zeilenhöhe brauchen sie nicht.
-------------------------------------------------------------------------- */
.box-wrapper .box-1 > .box-inner .paragraph,
.box-wrapper .box-1 > .box-inner > h6.heading-6,
.box-wrapper .box-2 > h6.heading-6,
.track-sec .box-1 > .box-inner .paragraph,
.track-sec .box-1 > .box-inner > h6.heading-6,
.track-sec .box-2 > h6.heading-6 { line-height: 1.1 !important; }
/* kein langes Wort weitet je eine Spalte */
.box-wrapper, .track-sec .box-wrapper, .box-inner-wrapper,
.project-box .project-box-wrapper2 { min-width: 0; }
.box-wrapper > *, .box-inner-wrapper > *,
.project-box .project-box-wrapper2 > * { min-width: 0; }
.box-wrapper .box-1 > .box-inner *,
.track-sec .box-1 > .box-inner *,
.project-box .project-box-wrapper2 .box-inner * {
min-width: 0;
/* `anywhere` ist das Einzige, was auch die *Mindestbreite* senkt: mit
`break-word` ragte „Prozesstechnologie" bei 390px 4,2px aus der Kachel.
Und die Silbentrennung bleibt an — im Deutschen trägt sie: ohne sie brechen
„Gesundheitswese|n", „Kapitalerhöhun|gen", „Wiederkehrende|r" und ein
Dutzend weitere Komposita hart um. Wo sie falsch gesetzt hat, steht sie
gezielt ab (§101), nicht pauschal. */
overflow-wrap: anywhere;
hyphens: auto;
}
/* Projektkarten: die Kategorie ist ein Schlagwort, kein Wert — sie liest
kleiner als die Zahl daneben (30px), und die Karte wird dichter. */
.project-box .project-box-wrapper2 .box-inner p.heading-010 {
font-size: 17px !important;
line-height: 1.0 !important;
}
.project-box .project-box-wrapper2 { gap: 12px !important; }
.project-box.p-0 { padding-bottom: 12px !important; }
@media (min-width: 992px) and (max-width: 1365px) {
.project-box .project-box-wrapper2 .box-inner p.heading-010 { font-size: 15px !important; }
}
@media (max-width: 991px) {
.project-box .project-box-wrapper2 .box-inner p.heading-010 { font-size: 14px !important; }
.project-box .project-box-wrapper2 { gap: 10px !important; }
}
/* --------------------------------------------------------------------------
63. Nach dem Wachstum kein Transform mehr auf der Platte.
Die Platte wächst per `scaleY()`. Solange ein Transform auf dem Element
liegt, rastert der Browser den Inhalt in einem eigenen, vertikal skalierten
Layer — große Buchstabenstriche überstehen das, ein Dezimalpunkt von drei
Pixeln nicht. Genau das ist die verschluckte „3.5x"-Kommastelle bei IDT.
Ist das Wachstum durch, fällt das Transform weg und der Text wird wieder
normal gerastert.
-------------------------------------------------------------------------- */
.box-2.js-grow.is-grown,
.box-1.js-grow.is-grown {
transform: none !important;
will-change: auto !important;
}
/* --------------------------------------------------------------------------
64. iPad-Hochformat: der Text in den KPI-Boxen steht auf derselben linken
Kante wie die Sektionsüberschrift darüber. Gemessen lag er dort 21px weiter
rechts (Raster bei 40, Innenabstand 40, Überschrift bei 60) — in allen
anderen Bändern stimmte es bereits auf 1px genau.
-------------------------------------------------------------------------- */
/* NACHTRAG: nur im HOCHformat. iPhone-Querformat (844×390) fällt nach Breite
in dasselbe Band, hat aber keine Sektionsüberschrift auf dieser Kante — dort
las der linke Innenabstand 19px gegen 32px oben, und der Text stand sichtbar
dichter am Rand als am Deckel. Querformat behält die symmetrischen 40px. */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
/* …und wo links 19 steht, steht oben auch 19: der Abstand zum Rahmen ist auf
beiden Seiten derselbe, wie in der weißen Box. */
.box-wrapper .box-1 > .box-inner,
.track-sec .box-1 > .box-inner { padding-left: 19px !important; padding-top: 19px !important; padding-bottom: 19px !important; }
.box-wrapper .box-2,
.track-sec .box-2 { padding-left: 19px !important; }
.box-wrapper .box-3 { padding-left: 19px !important; }
}
/* --------------------------------------------------------------------------
65. ZEILENHÖHE, WO TEXT NUR AUS PLATZMANGEL UMBRICHT.
Aeonik braucht gemessen 1.108 × Schriftgröße, damit sich zwei Zeilen nicht
berühren — actualBoundingBox (Ascent + Descent) über Text mit Ober- und
Unterlängen; die volle Fontbox liegt bei 1.167. Genau daran lief
`line-height: 1.0`, der Wert des Exports auf Werten und Schlagworten, in sich
hinein: 0.108 em Überschneidung, bei 72px knapp 8px. „> 3x Entry EBITDA",
„Über Markt und historischen CAGRs", „Vorsitzender des Aufsichtsrats …" waren
alle derselbe Fehler, nicht drei.
Die Untergrenze ist 1.0. 1.108 ist der Worst Case — zwei Zeilen, die beide
Ober- UND Unterlängen tragen. Die Zeilen in diesen Kästen tun das fast nie:
„EBITDA margin" endet auf „n", „(at entry)" beginnt mit einer Klammer.
Deshalb wird hier nicht die Regel geprüft, sondern jedes real gesetzte
Zeilenpaar — Tinte gegen Tinte, an der Stelle, an der es steht. Wer den Wert
anfasst, misst neu; die Sonde steht im Handoff.
Sie gilt NUR in Kästen — dort bricht Text, weil der Kasten schmal ist, nicht
weil der Satz es will. Fließtext behält seine eigene Ramp (§59 läuft auf 1.6).
Ab hier hat die Zeilenhöhe in diesen Kästen genau EINE Quelle: §52, §56 und
§57 setzen nur noch Größen. Zwei Quellen für eine Größe waren in diesem
Projekt schon einmal die Ursache (siehe Handoff §2).
-------------------------------------------------------------------------- */
/* (a) Beschriftungen — bisher 1.1 (§62) bzw. 18px (§57e), je nach Nachbarkasten */
.box-wrapper .box-1 > .box-inner .paragraph,
.box-wrapper .box-1 > .box-inner > h6.heading-6,
.box-wrapper .box-1 > .box-inner.h-110 > p,
.box-wrapper .box-1 > .box-inner .box-heading,
.box-wrapper .box-2 > h6.heading-6,
.box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner.h-110 > p,
.box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner .paragraph,
.box-wrapper:has(.box-inner.h-195) .box-2 > .heading-6,
.track-sec .box-1 > .box-inner .paragraph,
.track-sec .box-1 > .box-inner > h6.heading-6,
.track-sec .box-1 > .box-inner.h-110 > p,
.track-sec .box-2 > h6.heading-6,
.track-sec:has(.box-inner.h-195) .box-1 > .box-inner .paragraph,
.project-box .project-box-wrapper2 .box-inner .box-heading {
line-height: 1.0 !important;
}
/* (b) Werte — Zahlen wie Schlagworte. Als Verhältnis, damit die Größen der
Bänder (§56 setzt auf dem Telefon 48/44/40px) unangetastet bleiben und
trotzdem überall dieselbe Untergrenze gilt. */
.box-wrapper .box-1 > .box-inner .heading-010,
.box-wrapper .box-1 > .box-inner .text-size-xlarge,
.box-wrapper .box-1 > .box-inner.h-195 > .text-size-xlarge,
.box-wrapper .box-2 .text-block-2,
.box-wrapper .box-2 .text-block-2.fs-60,
.box-wrapper .box-2 .text-block-2.fs-60._w-400,
.track-sec .box-1 > .box-inner .text-size-xlarge,
.track-sec .box-2 .text-block-2,
.track-sec .box-2 .text-block-2.fs-60,
.track-sec .box-2 .text-block-2.fs-60._w-400,
.project-box .project-box-wrapper2 .box-inner .text-size-xlarge,
.project-box .box-inner .text-block-2 {
line-height: 1.0 !important;
}
/* (c) Der Setup-Streifen ist ein umbrechendes Flexband: seine Zeilen stießen mit
`row-gap: 0` aneinander, die Zeilenhöhe der Einzelposten half dort nichts.
(Die weiße Erklärbox stand hier einmal auf 1.4. Das war zu viel: sie ist die
höchste Spalte der KPI-Reihe, die anderen Spalten strecken sich auf ihr Maß,
und die Platten schoben die gewonnene Höhe als Lücke zwischen Untertitel und
Wert. Ihr Text liegt im Band ohnehin auf 1.3 und damit klar über der
Kollisionsgrenze von 1.108 — er braucht hier keine eigene Regel.) */
.setup-box .setup-strip {
row-gap: 10px;
line-height: 1.4;
}
.setup-box .setup-item { line-height: 1.4; }
/* (d) Kundenfeedback: die Rolle unter dem Namen. `.bold-text-14` ist 24px
(20px auf dem Telefon) und erbte die 20px Zeilenhöhe seines
— Verhältnis 0.83, der schlechteste Wert der ganzen Seite. Deshalb lief „Vorsitzender des Aufsichtsrats der KUKA AG" ineinander. */ .feedback-row .team-body2 p, .feedback-row .team-body2 p .bold-text-14, .feedback-sec2 .team-body2 p, .feedback-sec2 .team-body2 p .bold-text-14 { line-height: 1.15 !important; } /* (e) Profilseiten: die Rollenkachel unter dem Erfahrungslogo lief auf 1.05 */ .client-sec .box-1 .box-inner .text-block-10, .client-sec .box-1 .box-inner .text-block-10.left { line-height: 1.0 !important; } /* -------------------------------------------------------------------------- 66. Kein Wert läuft mehr aus seinem Kasten. §62 gibt jedem Wert in einer Kontur-Box `overflow-wrap: anywhere` — die orange Platte war nie dabei, weil die Regel an `.box-1 > .box-inner *` hängt. „Aktienkurs" und „übertroffen" konnten darum nicht brechen und standen über dem rechten Rand. Die Platte bekommt dieselbe Behandlung. -------------------------------------------------------------------------- */ .box-wrapper .box-2, .track-sec .box-2 { min-width: 0; } .box-wrapper .box-2 *, .track-sec .box-2 * { min-width: 0; /* `anywhere` ist das Einzige, was auch die *Mindestbreite* senkt: mit `break-word` ragte „Prozesstechnologie" bei 390px 4,2px aus der Kachel. Und die Silbentrennung bleibt an — im Deutschen trägt sie: ohne sie brechen „Gesundheitswese|n", „Kapitalerhöhun|gen", „Wiederkehrende|r" und ein Dutzend weitere Komposita hart um. Wo sie falsch gesetzt hat, steht sie gezielt ab (§101), nicht pauschal. */ overflow-wrap: anywhere; hyphens: auto; } /* -------------------------------------------------------------------------- 67. Die Kästen einer Reihe enden auf einer Linie. Der Export pinnt `.box-1.h-440` auf `min-height: 440px` (site.css). §50 nahm nur die Streckung heraus (`height: auto`), das Mindestmaß blieb — auf Lenzing stand deshalb eine 440px-Zelle neben einer 198px-Zelle in derselben Reihe. Das Mindestmaß fällt; die Höhe kommt aus dem Inhalt, und die Reihe gleicht sich über das Raster aus. -------------------------------------------------------------------------- */ /* Das Mindestmaß des INNEREN Kastens (`.h-195`, §57b) bleibt — sonst kommt die Zelle allein aus ihrem Text und liest kleiner als ihre Nachbarin. Die 440px des Exports waren der Versuch, „so hoch wie die Platte daneben" in einer festen Zahl auszudrücken. Die Zahl stimmt aber nur für eine Plattengröße: auf Lenzing steht die Reihe aus zwei Kästen neben einer 367px-Platte, und die Reihe hat dort nur eine belegte Rasterzeile von zwei. Ergebnis war ein 84px leeres Feld unter den Kästen — sie endeten hoch, die Platte tief. Statt einer Zahl also die Beziehung: eine Zeile, und die Kästen füllen sie. */ .box-inner-wrapper:has(> .box-1.h-440) { grid-template-rows: 1fr !important; grid-auto-rows: 1fr; } .box-inner-wrapper > .box-1.h-440, .box-inner-wrapper > .box-1.h-full { min-height: 0 !important; height: auto !important; align-self: stretch !important; } .box-inner-wrapper > .box-1.h-440 > .box-inner, .box-inner-wrapper > .box-1.h-full > .box-inner { height: auto !important; } /* -------------------------------------------------------------------------- 68. Projektkarten: der Rahmen wächst mit seinem Inhalt. §57(c) gibt das den KPI-Boxen, hängt aber an `.box-wrapper`/`.track-sec` und erreicht die Karten nie. Im iPad-Hochformat war der Rahmen 50px hoch, während Label und Wert 108px brauchten — Label und Wert hingen unter dem Rahmen, die Rahmenlinie lief mitten durch die Schrift. Dieselbe Mechanik wie bei den KPI: die Zelle ist ein Flexcontainer, ihr Inneres füllt sie. -------------------------------------------------------------------------- */ .project-box .project-box-wrapper2 .box-1 { display: flex; } .project-box .project-box-wrapper2 .box-1 > .box-inner { flex: 1 1 auto; width: 100%; height: auto !important; } /* Der Überhang darf nur dort sichtbar werden, wo die Kachel auch wachsen kann: unter 992px. Ab 992 deckelt `aspect-ratio: 2.6 / 1` (§40) die Höhe hart — bei 224px Spaltenbreite auf 86px — und das Verhältnis gewinnt gegen jedes `min-height` (die Höhe ist damit definit). Dort bleibt es beim Beschnitt des Exports, damit die Kartenproportion auf dem Desktop unangetastet bleibt. Der Beschnitt ist ein eigener, älterer Befund: bei 1440 braucht ein zweizeiliges Label plus 30px-Wert 114px in einer 86px-Kachel. Steht als offener Punkt im Handoff. */ @media (max-width: 991px) { .project-box .project-box-wrapper2 .box-1 > .box-inner { overflow: visible; } } /* Der Abstand unter dem Button ist derselbe wie links und rechts (30px aus dem Innenabstand des Rasters). Die 12px extra aus §62 kamen oben drauf. */ .project-box.p-0 { padding-bottom: 0 !important; } /* -------------------------------------------------------------------------- 69. Startseite: „/ Bickel & Company" ist eine Sektionsüberschrift wie „/ Fokus" — kein eigener Rang. Im Band 768–991 las der Block eine Stufe größer: Überschrift 34/40.8 gegen 26/26, Text darunter 26/26 gegen 18/24. Ursache: die Überschrift trägt `.text-color-white` und steht nicht in `.focus_label-text`, also griff keine der Bandregeln aus §46; und der Export gibt `.text-base` nur einen Wert für ≤767 und einen ab 992 — die Tabletlücke war nie gefüllt. -------------------------------------------------------------------------- */ /* Größe UND Zeilenhöhe müssen zusammen angeglichen werden: die Nachbarn liefen auf 26/26 (Verhältnis 1.0), die Ausnahme auf 34/40.8. Beides auf 26 und dieselbe Zeilenhöhe wie in den Kästen — damit sitzen Slash, Überschrift und Text darunter in allen sechs Sektionen im gleichen Rhythmus. Nebeneffekt, der zum selben Befund gehört: der dreizeilige Claim „Volle Kapazität. / Volle Fokussierung. / Keine Parallelmandate." stand hier ebenfalls auf 1.0 und berührte sich zwischen „Fokussierung" und „Keine". */ @media (min-width: 768px) and (max-width: 991px) { /* :is(h1, h2), seit die Hero-Überschrift eine h1 ist (11.8.): die Regel hing am Tag und fiel beim Umstufen aus — der Titel sprang am Telefon von 24 auf 26px. Das Aussehen trägt die Klasse, nicht das Tag. */ .focus_label + :is(h1, h2).text-size-xlarge, h2.text-size-xlarge:not(.text-color-white), .focus_label-text h2.text-size-xlarge, .about_label-text h2.text-size-xlarge { font-size: 26px !important; line-height: 1.15 !important; } .heading-style-h5.text-base { font-size: 18px !important; line-height: 24px !important; } } @media (max-width: 767px) { .focus_label + :is(h1, h2).text-size-xlarge, h2.text-size-xlarge:not(.text-color-white), .focus_label-text h2.text-size-xlarge, .about_label-text h2.text-size-xlarge { font-size: 24px !important; line-height: 1.15 !important; } } /* -------------------------------------------------------------------------- 70. Case Studies: die numerierten Sektionsüberschriften sind so groß wie jede andere Slash-Überschrift ihrer Seite. Nur die Zahl darüber ist groß. Gemessen auf KUKA bei 1194: „Wirkung" (h3.heading-style-h5) 40/40 gegen „Kundenfeedback" und „Unternehmensinformationen" (h2.text-size-xlarge) 29.85/35.82 — ein Drittel größer. Die Ramp ist die von `.text-size-xlarge` (§21/§46), damit beide in jedem Band zusammen laufen. Erkannt wird die numerierte Variante an der Zahl daneben, nicht an einer Seitenklasse. -------------------------------------------------------------------------- */ .focus_left:has(.number-text) > h3.heading-style-h5 { font-size: 40px !important; line-height: 1.2 !important; } @media (min-width: 768px) and (max-width: 1364px) { .focus_left:has(.number-text) > h3.heading-style-h5 { font-size: clamp(22px, 2.5vw, 40px) !important; } } @media (min-width: 768px) and (max-width: 991px) { .focus_left:has(.number-text) > h3.heading-style-h5 { font-size: 26px !important; } } @media (max-width: 767px) { .focus_left:has(.number-text) > h3.heading-style-h5 { font-size: 24px !important; } } /* -------------------------------------------------------------------------- 71. Dieselbe Untergrenze für die übrigen Kästen, die der Scan gefunden hat. Der Durchlauf über alle Seiten in 390/834/1194/1440 („bricht um UND Zeilenhöhe unter 1.11") war nach §65 nur noch hier fündig: - Wertsteigerungs-Hebel („Target Operating Model", „Liquiditätsmanagement", „Verhandlungen mit Arbeitnehmervertretern"): Kartenüberschriften auf 32/32 bzw. 20/20. Die Karten der Startseite hatten über §46(f) längst 1.125 — die Hebel auf den /für-Seiten liegen in einer anderen Sektion und fielen durch. Ab hier tragen alle Kartenüberschriften denselben Wert. - Die Bildunterschrift über dem Interview („Dr. Walter Bickel – Founder speaking") auf 20/20. -------------------------------------------------------------------------- */ .focus_card-heading { line-height: 1.15 !important; } .banner-text .bold-text-2, .banner-text { line-height: 1.15 !important; } /* -------------------------------------------------------------------------- 72. Die Platte: 2:1 ist eine UNTERGRENZE, kein Deckel. Auf Lenzing endet die Wirkungs-Reihe genau auf der Höhe, die das Verhältnis der Platte hergibt — sie streckt sich dort also nicht, und ihr Inhalt braucht mehr: 277px in einer 254px-Platte. „Ziele übertroffen" stand deshalb 22px tiefer als sein Innenabstand, also sichtbar aus der Platte heraus. `aspect-ratio` erzeugt eine DEFINITE Höhe; kein `min-height` — auch nicht `auto`, `min-content` oder `max-content` — holt sie auf (dieselbe Falle wie bei den Kartenkacheln, siehe Handoff). Das Verhältnis wandert deshalb in ein `min-height` in Container-Einheiten: `50cqw` ist die halbe Breite der Zelle und damit exakt 2:1 — aber als Boden, den der Inhalt überschreiten darf. -------------------------------------------------------------------------- */ .box-wrapper > *:has(> .box-2), .track-sec .box-wrapper > *:has(> .box-2) { container-type: inline-size; } .box-wrapper .box-2, .track-sec .box-2 { aspect-ratio: auto !important; min-height: 50cqw !important; } /* der Kurzwindow-Fall aus §51 bleibt: dort läuft die Platte 4:2 statt 4:3 */ @media (max-width: 767px) and (max-height: 750px) { .box-wrapper .box-2, .track-sec .box-2 { min-height: 50cqw; } } /* -------------------------------------------------------------------------- 73. Der Wert der Platte sitzt auf derselben Grundlinie wie die Werte der Kästen daneben. Die Spalten enden seit §67 bündig; nur die Innenabstände liefen auseinander — die Platte 40px, die Kontur-Kästen 32px plus 1px Rahmen. Gemessen bei 1366: Plattenwert 8px höher als die Werte der Nachbarreihe. -------------------------------------------------------------------------- */ /* NACHTRAG (Desktop-Runde): der Abstand unter dem Wert soll in jeder Box so groß sein wie der Abstand nach links — dieselbe Regel wie bei den Kontur-Boxen. Die 33px hatten die Grundlinie mit den Nachbarfiguren geteilt, waren aber sichtbar knapper als der linke Innenabstand. Der Boden kommt jetzt aus dem symmetrischen `padding` des Bandes; hier bleibt nur die Klammer stehen. */ /* -------------------------------------------------------------------------- 74. Focus-Karten: 4:3 bis an das Ende des Tablet-Zooms. §50 endete bei 1199, das iPad Pro 12.9 quer misst aber 1366 — dort fielen die Karten auf das Quadrat des Desktops zurück. Gemessen: 1194 -> 4:3, ab 1200 -> 1:1. -------------------------------------------------------------------------- */ @media (min-width: 1200px) and (max-width: 1366px) { .section_focus .focus_card.aspect-ratio, .section_focus .focus_card { aspect-ratio: 4 / 3 !important; height: auto !important; } } /* -------------------------------------------------------------------------- 75. Sektionstexte unter den Slash-Überschriften: eine Zeilenhöhe. Fünf Sublinen, drei Werte — „Bickel & Company setzt …" lief auf 25/36, „In komplexen …" auf 25/32.6, weil der Export sie über verschiedene Utility-Klassen (`text-base`, `fs-medium`, `leading-30`) staffelt. Maßgabe ist „In komplexen …", also 1.3. NACHTRAG 11.8.: die drei Selektoren hingen am Tag. Seit die Hero-Unterzeile eine h2 ist (h1-Umbau, 71a86ad), fiel die Regel dort aus und der Zeilenabstand sprang auf 15 Seiten in beiden Sprachen — bei 1024 von 27,96 auf 36px. Dass in derselben Regel schon `h2.heading-style-h5.fs-medium` stand, zeigt: beide Tags waren immer gemeint. Gemessen gegen den Stand davor: 20 von 20 Stichproben wieder exakt auf dem alten Wert. -------------------------------------------------------------------------- */ :is(h2, h3).heading-style-h5.text-base, :is(h2, h3).heading-style-h5.fs-medium, :is(h2, h3).heading-style-h5.leading-30 { line-height: 1.3 !important; } /* -------------------------------------------------------------------------- 76. Ein Button, eine Höhe. `.btn-case` („Ansatz", „Case Study ansehen") lief 56px hoch, `.button.is-secondary` („Team ansehen", „Kontakt") 58px — bei gleicher Schriftgröße, nur mit 10px statt 16px vertikalem Innenabstand. Die Höhe steht dort als feste Zahl (`height: 56px`), gegen die ein Innenabstand nichts ausrichtet — `.button` kommt auf 58px aus 16px Abstand, 18px/1.33 Schrift und dem 1px-Rahmen von `.is-secondary`. Also dieselbe Zahl. -------------------------------------------------------------------------- */ .btn-case { height: 58px !important; } /* -------------------------------------------------------------------------- 76b. Die weiße Erklärbox: oben derselbe Innenabstand wie links. Der Export gibt ihr rundum 40px, §64 zieht den linken im iPad-Hochformat auf 19px (Textkante = Kante der Sektionsüberschrift) — oben blieben 40. Dazu kam der Ausgleich aus main.js, der ihn im gestapelten Raster auf 0 gezogen hat: der Text klebte an der Oberkante. Der Ausgleich läuft jetzt nur noch, wo die Box wirklich neben den Label-Kästen steht, und hier kommen die beiden Innenabstände je Band auf dieselbe Zahl. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 991px) { .box-wrapper .box-3 { padding-top: 19px !important; } } @media (min-width: 480px) and (max-width: 767px) { .box-wrapper .box-3 { padding-top: 24px !important; } } /* -------------------------------------------------------------------------- 77. Projektkarten auf dem Tablet: eine Karte füllt die Ansicht, die Spalten sind rund 350px breit — die Zahlen standen dort mit 24px so klein wie in der Dreier-Ansicht des Desktops. Sie laufen jetzt eine halbe Stufe größer; die Kategorie im ersten Kasten bleibt das Schlagwort, das sie ist. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 991px) { .project-box .project-box-wrapper2 .box-inner .text-size-xlarge, .project-box .project-box-wrapper2 .box-inner .text-block-2 { font-size: 36px !important; } } /* -------------------------------------------------------------------------- 78. Die Größe muss den Knoten erreichen, der WIRKLICH malt. §70 hat die numerierten Sektionsüberschriften auf das Maß der übrigen Slash-Überschriften gesetzt — aber auf dem `h3`. Der Text steckt dort in `…`, und `.text-span-28` trägt eigene 40px (site.css). Gemalt wurden also weiter 40px, während der Block 29.9px meldete: „/ Herausforderung" las auf allen vier Case Studies ein Drittel größer als „/ Unternehmensinformationen" daneben — bei 390, 834, 1194 und 1366. Das ist auch die Ursache der springenden Slashes: `slashSync` (main.js §…) misst korrekt den malenden Knoten. Es bekam für diese eine Überschrift 40px und für alle anderen 29.9px, also 32px Slash gegen 23.9px — beim Scrollen wurden die Slashes größer und kleiner. Inline-Kinder dieser Überschriften erben ab hier ihre Größe. Damit kann keine Utility-Klasse im Inneren die Bandgröße mehr aushebeln — und die Prüfung muss den gemalten Knoten messen, nicht den Block. (Meine erste Prüfung hat den Block gemessen und deshalb „alle gleich" gemeldet.) -------------------------------------------------------------------------- */ .focus_left:has(.number-text) > h3.heading-style-h5 * { font-size: inherit !important; line-height: inherit !important; } /* ========================================================================== TELEFON-RUNDE Alles hier ist auf ≤767px begrenzt, außer §86 (ein echter Fehler in jeder Größe) und §87/§88 (Preloader und Herobild). iPad und Desktop bleiben, wie sie in den Runden davor abgenommen wurden. ========================================================================== */ /* -------------------------------------------------------------------------- 79. Die Kontur-Kästen umschließen auf dem Telefon ihren Inhalt. Sie tragen die Mindesthöhen des Exports (110 / 195px). Auf dem Telefon ist der Inhalt aber kurz und `justify-content: space-between` schiebt die Differenz als Loch in die Mitte. Gemessen auf der Startseite und IDT: „Bankability gesichert" Kasten 110, Inhalt 18 → 72px Luft „Eigentümer / Familie" Kasten 195, Inhalt 38 → 117px Luft „Vollständige Refinanzierung" Kasten 326, Inhalt 57 → 230px Luft Ohne Mindesthöhe kommt die Höhe aus dem Inhalt: der Abstand unter dem Text ist damit derselbe wie über ihm und links — 20px auf allen Seiten. Die Zellen einer Reihe bleiben über das Raster gleich hoch. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .box-wrapper .box-1 > .box-inner.h-110, .box-wrapper .box-1 > .box-inner.h-195, .track-sec .box-1 > .box-inner.h-110, .track-sec .box-1 > .box-inner.h-195, .box-inner-wrapper .box-1 > .box-inner.h-110, .box-inner-wrapper .box-1 > .box-inner.h-195 { min-height: 0 !important; } } /* -------------------------------------------------------------------------- 80. Beschriftung und Wert auf dem Telefon: weniger Zeilen. §41 hatte die Beschriftung auf 18px gehoben — größer als die 16px des Desktops. „Durchschnittliche Verbesserung der Cash Conversion (% des adj. EBITDA)" braucht damit vier Zeilen in einer 125px breiten Zelle. 15px ist die Stufe, die zwei bis drei Zeilen daraus macht, ohne kleiner zu lesen als die Kartenbeschriftung daneben. Und die langen Zahlenausdrücke: „Von -3 % auf +8 %" stand auf 48px und lief über VIER Zeilen (4 × 55,2px = 221px Wert in einem 326px-Kasten). Die Infoboxen derselben Seite zeigen ihre Zahlen längst auf 32px — das gilt jetzt für alle Werte der Kontur-Kästen, damit dieselbe Regel überall greift. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .box-wrapper .box-1 > .box-inner p.paragraph, .box-wrapper .box-1 > .box-inner > p, .box-wrapper .box-1 > .box-inner > h6.heading-6, .track-sec .box-1 > .box-inner p.paragraph, .track-sec .box-1 > .box-inner > p, .track-sec .box-1 > .box-inner > h6.heading-6, .box-inner-wrapper .box-1 > .box-inner > h6.heading-6 { font-size: 15px !important; } .box-wrapper .box-1 > .box-inner .text-size-xlarge, .box-wrapper .box-1 > .box-inner.h-195 > .text-size-xlarge, .track-sec .box-1 > .box-inner .text-size-xlarge, .track-sec .box-1 > .box-inner.h-195 > .text-size-xlarge, .box-inner-wrapper .box-1 > .box-inner .text-size-xlarge, .box-inner-wrapper .box-1 > .box-inner.h-195 > .text-size-xlarge { font-size: 32px !important; } } /* -------------------------------------------------------------------------- 81. Projektkarten auf dem Telefon: die Zahl liest deutlich größer als ihre Beschriftung — dasselbe Verhältnis wie im iPad-Hochformat (§77). Beschriftung 16px, Wert vorher 17px: praktisch gleich groß. 24px ist die größte Stufe, die jede Zahl einzeilig hält — gemessen an der schmalsten Zelle (124px Textbreite): „500 Mio. €" braucht dort 118px, bei 26px wären es 128px und die Zeile bräche. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .project-box .project-box-wrapper2 .box-inner .text-size-xlarge, .project-box .project-box-wrapper2 .box-inner .text-block-2 { font-size: 24px !important; } } /* -------------------------------------------------------------------------- 82. Expertise-Filter: alle drei in eine Reihe. Das Raster hatte zwei Spalten à 160px, die dritte Pille rutschte in eine zweite Zeile. Drei Spalten auf der Breite der Learn-more-Pillen (103px) passen genau: 3 × 103 + 2 × 10 Abstand = 329px in 330px Innenmaß. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .filter-box { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } .filter-box .dropdown-2 { min-width: 0; } .filter-box .dropdown-toggle { padding-left: 10px !important; padding-right: 10px !important; } .filter-box .dropdown-toggle > div { font-size: 13px !important; white-space: nowrap; } } /* -------------------------------------------------------------------------- 83. Die Learn-more-Pille im Hero ist überall dieselbe. Auf Expertise las sie 35px hoch und 270px breit, auf Team und Über uns 46px und 220px. Ursache: die Regel, die auf der Expertise-Seite die Filterpillen in eine Reihe zwingt, hängt an `html.page-expertise .tab-box` und trifft damit auch die Pille im Hero. Der Hero bekommt seine Geometrie zurück. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .hero-sec2 .tab-box { display: inline-flex !important; flex-wrap: nowrap !important; gap: 0 !important; } .hero-sec2 .tab-box .tab-btn { flex: 0 0 auto !important; width: auto !important; } .hero-sec2 .tab-box .tab-inner-btn { padding: 12px !important; gap: 10px; } .hero-sec2 .tab-box .text-block { font-size: 16px !important; line-height: 1.4 !important; } .hero-sec2 .tab-box .circle-orange { width: 14px; height: 14px; } } /* -------------------------------------------------------------------------- 84. Kontaktbox auf dem Telefon: so hoch wie ihr Inhalt. §58 gibt ihr unter 992px das Verhältnis 4:3. Bei 350px Breite sind das 263px für 126px Inhalt — 137px Luft. `aspect-ratio` erzeugt eine definite Höhe, gegen die kein `min-height` ankommt (siehe Handoff), also fällt hier das Verhältnis. (768–991 bleibt unangetastet: dort ist der Wert abgenommen.) -------------------------------------------------------------------------- */ @media (max-width: 767px) { .contact-box { aspect-ratio: auto !important; min-height: 0 !important; height: auto !important; } } /* -------------------------------------------------------------------------- 85. Die Kundenfeedback-Box liegt auf denselben Kanten wie jede andere Box. Das Markup schachtelt die Feedback-Reihe IN den Überschriftenblock (`.focus_left.pl-40`), und der trägt seinen Innenabstand ein zweites Mal: gemessen bei 390px stand die Box bei x=40 mit 310px Breite, während jede andere Box der Seite bei x=20 mit 350px liegt. Die Überschriften bleiben, wo sie sind (x=40 ist dort das Maß aller Slash-Überschriften). -------------------------------------------------------------------------- */ @media (max-width: 767px) { .feedback-sec2 .focus_left > .feedback-row, .feedback-sec .focus_left > .feedback-row { margin-left: -20px; margin-right: -20px; } } /* -------------------------------------------------------------------------- 86. Die Rollenkachel auf den Profilen ist wirklich zentriert. `.text-block-10.left` trägt aus dem Export `padding-right: 15px` — ein Rest der linksbündigen Variante. Wir haben die Kachel auf zentriert umgestellt (§39), den Innenabstand aber stehen gelassen: der Kasten ist zentriert, der Text darin sitzt 7,5px links davon. Gemessen auf jeder Kachel und in jeder Breite genau -7px, unabhängig von der Textlänge — deshalb fiel es auf. Gilt in allen Größen, es ist kein Telefon-Thema. -------------------------------------------------------------------------- */ .client-sec .text-block-10.left, .client-sec .div-block-31 .text-block-10 { padding-right: 0 !important; } /* -------------------------------------------------------------------------- 87. ZURÜCKGENOMMEN — der Preloader auf dem Telefon bleibt, wie er war. Hier stand eine Regel, die `.code-embed-14` (die Linienzeichnung des Desktops) unter 480px sichtbar geschaltet hat, weil auf dem schwarzen Schirm „die Linienanimation fehlte". Das war die falsche Diagnose. Die Ausblendung unter 480px steht seit dem ersten Rebuild in `custom.css` und ist so gewollt: die Animation auf dem schwarzen Schirm ist der WORTMARKEN-WIPE (`#logoWipe`, clip-path über 2s, main.js §…), nicht die Linienzeichnung. Sichtbar geschaltet lief auf dem Telefon also die Zeichnung des Desktops — die falsche Animation. Nichts zu tun: der Export hat hier recht. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 88. Die Herofotos auf Über uns und Kontakt sind auf dem Telefon scharf. Sie liegen als Hintergrund mit `cover` auf einem hochformatigen Kasten: bei 390pt Breite und rund 500pt Höhe deckt das Bild 1170 × 1500 Gerätepixel ab. Die 768er-Variante (1x) und die 1280er (2x) müssen dafür hochskaliert werden, quer über ein Motiv, das selbst Landschaft ist — daher der Unschärfe-Eindruck. Eine Stufe höher: 1280 als 1x, 2560 als 2x. -------------------------------------------------------------------------- */ @media (max-width: 767px) { :where(html.page-about-us) .hero-sec2.py-100 { background-image: url("/assets/media/bc-hero-about-1280.jpg?v=4"); background-image: image-set(url("/assets/media/bc-hero-about-1280.webp?v=4") 1x, url("/assets/media/bc-hero-about-2560.webp?v=4") 2x); } :where(html.page-contact) .hero-sec2.py-100 { background-image: url("/assets/media/bc-hero-contact-1280.jpg?v=2"); background-image: image-set(url("/assets/media/bc-hero-contact-1280.webp?v=2") 1x, url("/assets/media/bc-hero-contact-2560.webp?v=2") 2x); } } /* -------------------------------------------------------------------------- 89. Drei Nachzieher aus der Messung von §80/§83/§85. (a) Die Beschriftung im h-110-Kasten ist auf einigen Seiten ein `p.heading-6` statt `p.paragraph` und lag deshalb weiter auf 16px — jetzt greift die Regel über die Klasse, nicht über die Position. (b) Die Learn-more-Pille auf Expertise blieb bei 44px: die Seitenregel `html.page-expertise .tab-box .tab-inner-btn` trägt durch das `html`-Element eine Spezifität höher als `.hero-sec2 .tab-box …`. Mit demselben Element davor gewinnt die spätere Regel. (c) Die Feedback-Reihe braucht ihre negativen Außenkanten mit Nachdruck — ein `margin: 0` aus dem Export stand davor. -------------------------------------------------------------------------- */ @media (max-width: 767px) { .box-wrapper .box-1 > .box-inner .heading-6, .box-wrapper .box-1 > .box-inner .paragraph, .track-sec .box-1 > .box-inner .heading-6, .track-sec .box-1 > .box-inner .paragraph, .box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner .paragraph, .box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner.h-110 > p, .track-sec:has(.box-inner.h-195) .box-1 > .box-inner .paragraph { font-size: 15px !important; } html .hero-sec2 .tab-box .tab-inner-btn { padding: 12px !important; gap: 10px !important; } html .hero-sec2 .tab-box .text-block { font-size: 16px !important; line-height: 1.4 !important; } .feedback-sec2 .focus_left > .feedback-row, .feedback-sec .focus_left > .feedback-row { margin-left: -20px !important; margin-right: -20px !important; /* Auf Treofan ist der Überschriftenblock ein Flexcontainer: die negativen Kanten verschieben die Reihe dort, dehnen sie aber nicht — sie behielt ihre 310px Flex-Basis. Mit `flex: 1 1 auto` füllt sie die Breite. */ flex: 1 1 auto !important; width: auto !important; } } /* -------------------------------------------------------------------------- 90. Telefon-Nachlese. (a) Kartenbeschriftung 16 -> 14px. „Adj. EBITDA-Marge bei Einstieg" brauchte drei Zeilen in einer 124px-Zelle; mit 14px und dem geschützten Leerzeichen in „Adj. EBITDA-Marge" sind es zwei, und der Umbruch fällt vor „bei Einstieg" (im Englischen vor „(at entry)"). (b) Das Zitat im Kundenfeedback klebte an der weißen Box: Boxunterkante und Zitatoberkante lagen bei 390px auf demselben Pixel. Es bekommt denselben Abstand, den die Seite überall als Rhythmus nutzt. (c) Die Glasplatte hinter der Learn-more-Pille war 290px breit bei einer 220px-Pille — sie stand also 35px je Seite über. Sie umschließt die Pille jetzt: Breite aus dem Inhalt, nicht aus der Spalte. (d) Die Filterleiste hatte eine leere zweite Rasterzeile (die verborgenen Auswahllisten): `grid-template-rows: 52px 0px` plus 10px Zeilenabstand ergaben unten 20px gegen 10px an den Seiten. Ohne Zeilenabstand sind alle vier Kanten 10px. (e) Im Profil-Hero steht die Berufsbezeichnung 24px über der Unterkante, ihr linker Abstand ist 40px. Beides auf 40. (f) Die Kontaktbox: 263px waren zu viel, 166px zu wenig. Die Mitte, und als Verhältnis zur Breite statt als feste Zahl — bei 350px sind das 210px. -------------------------------------------------------------------------- */ @media (max-width: 767px) { /* §57(e) setzt die Beschriftung über `.box-1 > .box-inner .box-heading` auf 16px — eine Klasse mehr als hier, also mit derselben Kette dagegen. */ .project-box .project-box-wrapper2 .box-1 > .box-inner .box-heading { font-size: 14px !important; } .feedback-row ._w-66 > .paragraph-3, .feedback-row .paragraph-3 { margin-top: 20px !important; } html .hero-sec2 .tab-box { width: -moz-fit-content !important; width: fit-content !important; align-self: flex-start !important; flex: 0 0 auto !important; } .filter-box { row-gap: 0 !important; column-gap: 10px !important; } .profile-hero .profile-hero_content { padding-bottom: 40px !important; } /* 263px waren zu viel, 166px zu wenig — die Mitte. Als flache Zahl, nicht als Verhältnis: der Kasten ist auf dem Telefon immer rund 350px breit, und eine Container-Einheit hätte hier nur eine zweite Quelle für dieselbe Höhe. */ .contact-box { min-height: 215px !important; } } /* -------------------------------------------------------------------------- 91. Die großen Zahlenwerte laufen enger: 1.05 statt 1.15. §65 hat 1.15 als Untergrenze gesetzt, weil Aeonik im WORST CASE 1.108 × Schriftgröße belegt — gemessen an Text mit voller Oberlänge UND Unterlänge („Ä" über „gjq"). Für die Werte in den Platten stimmt dieser Worst Case nicht: sie sind Zahlen und kurze Wortpaare, und ihre tatsächliche Ink-Summe je Zeilenpaar liegt bei rund 0.93 em. Pro Zeilenpaar gemessen (72px, Zeilenhöhe 82.8px = 1.15): „> 3x" / „Entry EBITDA" 32.0px Luft ← „> 3x" hat keine Unterlänge „Ziele" / „übertroffen" 30.5px „3,5x" / „Entry EBITDA" 22.1px „6,0x" / „Aktienkurs" 20.7px „Entry EBITDA" / „Entry EBITDA" 18.0px ← engstes echtes Paar („y" über „E") Bei 1.05 fällt jedes dieser Paare um 7.2px: das engste behält 10.8px Luft. Sichtbar dichter, ohne dass sich etwas berührt. Die Beschriftungen bleiben auf 1.15. Sie sind Lesetext, dort ist die Enge kein Gewinn — und sie tragen Umlaute und Unterlängen in beliebiger Kombination, also gilt für sie weiter der Worst Case. -------------------------------------------------------------------------- */ .box-wrapper .box-2 .text-block-2, .box-wrapper .box-2 .text-block-2.fs-60, .box-wrapper .box-2 .text-block-2.fs-60._w-400, .track-sec .box-2 .text-block-2, .track-sec .box-2 .text-block-2.fs-60, .track-sec .box-2 .text-block-2.fs-60._w-400, .box-wrapper .box-1 > .box-inner .text-size-xlarge, .box-wrapper .box-1 > .box-inner.h-195 > .text-size-xlarge, .box-wrapper .box-1 > .box-inner .heading-010, .track-sec .box-1 > .box-inner .text-size-xlarge, .track-sec .box-1 > .box-inner.h-195 > .text-size-xlarge, .track-sec .box-1 > .box-inner .heading-010, .box-inner-wrapper .box-1 > .box-inner .text-size-xlarge, .box-inner-wrapper .box-1 > .box-inner.h-195 > .text-size-xlarge, .project-box .project-box-wrapper2 .box-inner .text-size-xlarge, .project-box .project-box-wrapper2 .box-inner p.heading-010, .project-box .box-inner .text-block-2 { line-height: 1.0 !important; } /* Nachtrag zu §91, zweite Fassung: die Wortklasse geht mit auf 1.0. Sie stand hier eine Runde lang auf 1.15, weil die engsten echten Zeilenpaare Schlagworte auf 17px waren („3 Kapitalerh/öhungen") — dort bricht der Satz mitten im Wort und Unterlänge trifft Oberlänge. Der Kunde will eine Stufe für alles in den Kästen, und nachgemessen hält sie: über 1107 echte Zeilenpaare (18 Seiten × 10 Breiten) keine Kollision, engstes Paar 1,0px. Wer das anfasst, misst neu — die Sonde steht im Handoff. */ .box-wrapper .box-1 > .box-inner .heading-010, .track-sec .box-1 > .box-inner .heading-010, .box-inner-wrapper .box-1 > .box-inner .heading-010, .project-box .project-box-wrapper2 .box-inner p.heading-010 { line-height: 1.0 !important; } /* -------------------------------------------------------------------------- 92. Das Interview liegt auf der Breite des Organigramms. Gemessen (CSS-px, Zoom herausgerechnet): das Organigramm auf der Ansatz-Seite ist 75 % seines Elternelements und zentriert — 1260 von 1680 bei 1440px, 1485 von 1980 bei 1680px, 1350 von 1800 bei 1920px. Das Interview lief auf 100 %. Die 75 % stehen im Export auf `.image-38.infographic`; hier dieselbe Zahl auf der Bühne des Interviews, damit alles darin — Video, Verlauf, Bildunterschrift, Play-Taste — zusammen wandert. Ab 1200px, also auf echten Desktop-Fenstern. Das Organigramm ist zwar schon ab 992px auf 75 %, aber das iPad-Querformat (1194) ist abgenommen und bleibt, wie es ist — wenn es dort mitziehen soll, ist es diese eine Zahl. -------------------------------------------------------------------------- */ @media (min-width: 1200px) { .video-banner-sec .video-banner { width: 75%; margin-left: auto; margin-right: auto; } } /* -------------------------------------------------------------------------- 93. Projektkarten: die Kachel füllt ihre Rasterzeile. Gemessen bei 1440: die Zeilenspur ist 137px hoch (§31), die Kachel durch `aspect-ratio: 2.6/1` bei 224px Spaltenbreite aber nur 85px. Unter jeder Kachel standen also 52px Totraum — und weil `align-content: start` die Reihe oben andockt, las sich der Zwischenraum zwischen den beiden Kachelreihen als 64px, während zwischen den Spalten 12px stehen. Derselbe Totraum machte den Abstand zur unteren Kartenkante zu 82px statt der 30px an den Seiten. Und derselbe Deckel schnitt Text ab: „Adj. EBITDA margin (at entry) / 5 %" braucht 110px in einer 85px-Kachel, `overflow: hidden` nahm den Rest unsichtbar weg (1366: 31px, 1440: 25px, 1920: 18px). Die Kachel streckt sich jetzt auf ihre Spur. Die Karte wird dadurch nirgends höher — die Spur war ja schon 137px — der Totraum wandert nur nach innen: Reihenabstand 12px = Spaltenabstand, unterer Rand 30px = seitlicher Rand, und 137px sind mehr als die 110px, die der Inhalt braucht. -------------------------------------------------------------------------- */ .project-box .project-box-wrapper2 .box-1 { aspect-ratio: auto !important; align-self: stretch; height: auto; } /* Der Wert schließt unten bündig ab. `.box-inner` verteilt Label und Wert mit `space-between`; ein Außenabstand am letzten Kind verschob den Wert um 6px gegen den Nachbarn — „Machinery" stand tiefer als „6.0 k". */ .project-box .project-box-wrapper2 .box-1 > .box-inner > *:last-child { margin-bottom: 0 !important; } /* -------------------------------------------------------------------------- 94. Desktop: die Label in den KPI-Boxen lesen eine Stufe größer. 16px waren gegen die 48–72px-Figuren daneben zu leise. 18px, und zwar an allen drei Stellen, die dasselbe Label sind: im Kontur-Kasten oben („Average project exit vs. entry adj. EBITDA", „Bankability secured"), im Info-Kasten der Case Studies („Owned by", „Revenue (at entry)") und auf der Platte („Over an average of 3 years"). Erst ab 1200px — das Telefon hat seine eigene, bewusst kleinere Stufe, und iPad-Querformat (1194) bleibt, wie abgenommen. -------------------------------------------------------------------------- */ @media (min-width: 1200px) { .box-wrapper .box-1 > .box-inner.h-110 > p, .track-sec .box-1 > .box-inner.h-110 > p, .box-wrapper .box-1 > .box-inner.h-195 > h6.heading-6, .track-sec .box-1 > .box-inner.h-195 > h6.heading-6, .box-wrapper .box-2 > .heading-6, .track-sec .box-2 > .heading-6 { font-size: 18px !important; /* Zeilenhöhe: siehe §141 — Beschriftungen laufen überall auf 1.0 */ line-height: 1.0 !important; } } /* -------------------------------------------------------------------------- 95. Desktop: die orangene Platte läuft 4:3 statt 2:1. Als Untergrenze in Container-Einheiten, nicht als `aspect-ratio` — der erzeugt eine definite Höhe, die kein Inhalt mehr aufmachen kann (§72). 75cqw sind drei Viertel der Zellbreite und damit genau 4:3. Die Selektorform ist nicht zufällig: §45(c) hält die Platte mit `.box-wrapper > *:has(> .box-2) > .box-2 { min-height: 0 !important }` klein, damit sie ihren Rahmen per `flex: 1 1 auto` vollständig ausfüllt. `:has()` zählt in die Spezifität — ein `.box-wrapper .box-2` verliert dagegen, auch mit `!important`. Deshalb hier dieselbe Kette. (Das erklärt auch, warum die Platte vorher *gar kein* Verhältnis mehr hatte: ihre Höhe kam allein aus der Streckung in der Spalte, gemessen 1.51:1 bei 1194 und 2.22:1 bei 1920.) */ @media (min-width: 1200px) { .box-wrapper > *:has(> .box-2) > .box-2, .track-sec .box-wrapper > *:has(> .box-2) > .box-2 { min-height: 75cqw !important; } } /* -------------------------------------------------------------------------- 96. Desktop: die Werte in den Case-Study-Kästen sind so groß wie die Figuren, für die sie stehen. „€ 130 m" und „€ 280 m" liefen auf 48px gegen die 72px der Platte daneben — eine halbe Stufe zu klein für dieselbe Aussage. 60px, einheitlich für jeden Wert in diesen Kästen, damit „€ 2.6 bn", „8.0 k", „< 10%" und „2024 – 2025" dieselbe Stimme behalten. -------------------------------------------------------------------------- */ @media (min-width: 1200px) { .box-wrapper .box-1 > .box-inner .text-size-xlarge, .track-sec .box-1 > .box-inner .text-size-xlarge { font-size: 60px !important; line-height: 1.05 !important; } } /* -------------------------------------------------------------------------- 97. Der Footer endet unten so weit vom Text wie links. Gemessen: der linke Innenabstand des Copyright-Zeile ist 60px, der Abstand von ihrer Unterkante zur Footer-Kante 70px — die 60px `padding-bottom` plus der Rest der Zeilenbox unter den Glyphen. Der Innenabstand geht auf 50px, damit die *sichtbare* Luft auf beiden Seiten 60px misst. -------------------------------------------------------------------------- */ /* (Der Wert steht oben bei der Regel, die ihn schon immer besaß.) */ /* -------------------------------------------------------------------------- 98. Die Reiter im Profil-Hero sind dieselben wie in den anderen Heroes. Gemessen bei 1440: `/private-equity` führt 53px hohe Reiter mit 16px Innenabstand, die Profile 47px mit 13px/18px. Gleiche Geometrie, gleicher Rhythmus — die Schriftgröße war schon identisch (18px). -------------------------------------------------------------------------- */ .profile-hero .profile-hero_tab { padding: 16px !important; min-height: 53px; display: inline-flex; align-items: center; } /* -------------------------------------------------------------------------- 99. Das Interview läuft 16:9. Der Export gibt dem Video nur `width: 100%` und `object-fit: cover`; die Höhe kam aus `min-height: 400px` plus dem, was der Kasten hergab — gemessen 1260×924, also 1.36:1. Der Film selbst ist 16:9; alles andere beschneidet ihn. -------------------------------------------------------------------------- */ .video-banner video.bc-interview, video.bc-interview { aspect-ratio: 16 / 9; height: auto !important; min-height: 0 !important; } /* -------------------------------------------------------------------------- 100. Die Play-Taste antwortet auf den Zeiger — im Ton der übrigen Flächen: das Bild zieht leicht an, die Taste selbst wächst mit. -------------------------------------------------------------------------- */ /* (ersetzt durch §100 weiter unten) */ /* -------------------------------------------------------------------------- 101. Zwei Stellen, an denen die Silbentrennung falsch lag — und nur diese. Sie bleibt sonst überall an (§62/§66), weil sie im Deutschen die langen Komposita rettet. Aber: (a) Das Label der Projektkarten trennte „EBITDA margin (at en-/try)". Die Klammer ist eine Einheit; sie steht im Markup mit geschütztem Leerzeichen zusammen, und ohne Trennung fällt der Umbruch an die Leerstelle davor. (b) Der Wert der Platte trennte „Targets exceed-/ed", obwohl beide Wörter einzeln in die Zeile passen. Ein Wert wird nicht getrennt — er bricht am Wortende oder gar nicht. -------------------------------------------------------------------------- */ .project-box .project-box-wrapper2 .box-1 > .box-inner .box-heading, .project-box .project-box-wrapper2 .box-1 > .box-inner .box-heading * { hyphens: manual !important; } .box-wrapper .box-2 .text-block-2, .box-wrapper .box-2 .text-block-2 *, .track-sec .box-2 .text-block-2, .track-sec .box-2 .text-block-2 * { hyphens: manual !important; } /* -------------------------------------------------------------------------- 100. Die Play-Taste und ihre Bewegung nach der Vorlage (21st.dev, „Video Thumbnail Player" von Ravi Katiyar). Aus der laufenden Vorschau ausgelesen, nicht geschätzt: Taste rounded-full bg-white/20 backdrop-blur-sm transition-all duration-300 group-hover:scale-110 group-hover:bg-white/30 Bild transition-transform duration-300 group-hover:scale-105 Icon lucide „play" — Polygon 6 3 / 20 12 / 6 21, weiß gefüllt, halb so groß wie die Taste (32 in 64) Tailwinds Voreinstellungen dahinter: `duration-300` = 300ms, `backdrop-blur-sm` = 4px, Zeitkurve `cubic-bezier(.4, 0, .2, 1)`. Ausgelöst wird alles vom *Rahmen* (`group-hover`), nicht von der Taste — wer irgendwo über den Film fährt, sieht beides. Die Größe bleibt bei 120px (60 auf dem Telefon). Die Vorlage führt 64px in einem 640px breiten Rahmen, also 10 % der Breite — unser Rahmen ist 1260px breit, 120px sind dort dasselbe Verhältnis. Übernommen ist der Entwurf, nicht die absolute Zahl aus einer schmaleren Bühne. Es gibt zwei Bauarten derselben Taste im Export: `.video-btn` auf about-us und Walters Profil, `.link-block-4` auf den übrigen neun Interviews. Beide tragen jetzt dieselbe Taste und dasselbe Verhalten. -------------------------------------------------------------------------- */ .video-banner, .div-block-22 { overflow: hidden; } .video-banner .video-btn, .div-block-22 .link-block-4 { display: flex; align-items: center; justify-content: center; border-radius: 9999px; background-color: rgba(255, 255, 255, .2) !important; -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important; transition: transform .3s cubic-bezier(.4, 0, .2, 1), background-color .3s cubic-bezier(.4, 0, .2, 1); } /* `.link-block-4` trug im Export nur eine Position — Maß und Fläche kommen von hier, damit beide Bauarten deckungsgleich sind */ .div-block-22 .link-block-4 { width: 120px; height: 120px; } .video-banner .play-btn, .div-block-22 .play-btn { width: 50%; height: 50%; fill: #fff; stroke: #fff; display: block; } /* Walters Profil liefert denselben Knopf über `.code-embed-9` aus (alle anderen Seiten: `.code-embed-7`). Ohne diese Klasse fehlte dort die zentrierende Fläche, und das Dreieck saß 18,3px links der Kreismitte — gemessen in WebKit, während es auf /about-us/ mit identischem SVG bei 0,0 lag. Beide Bauarten tragen jetzt dieselbe Regel. */ .video-banner .code-embed-7, .video-banner .code-embed-9, .div-block-22 .code-embed-7, .div-block-22 .code-embed-9 { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .video-banner video.bc-interview, .div-block-22 video.bc-interview { transition: transform .3s cubic-bezier(.4, 0, .2, 1); } .video-banner:hover video.bc-interview, .div-block-22:hover video.bc-interview { transform: scale(1.05); } .video-banner:hover .video-btn, .div-block-22:hover .link-block-4 { transform: scale(1.1); background-color: rgba(255, 255, 255, .3) !important; } /* `.link-block-4` steht im Export mittig per `translate(-50%, -50%)` — die Skalierung muss diese Verschiebung mitführen, sonst springt die Taste */ .div-block-22 .link-block-4 { transform: translate(-50%, -50%); } .div-block-22:hover .link-block-4 { transform: translate(-50%, -50%) scale(1.1); } /* während der Film läuft, bewegt sich nichts mehr */ .video-banner.is-playing video.bc-interview, .video-banner.is-playing:hover video.bc-interview, .div-block-22.is-playing video.bc-interview, .div-block-22.is-playing:hover video.bc-interview { transform: none; } @media (max-width: 767px) { .div-block-22 .link-block-4 { width: 60px; height: 60px; } } /* -------------------------------------------------------------------------- 102. Die Wellen-Grafik über dem Interview passt in ihren Rahmen. Sie ist 240px hoch und an der Unterkante verankert. Seit der Rahmen 16:9 läuft (§99), ist er auf dem Telefon nur noch 197px hoch — mit dem `overflow: hidden`, das die Zoom-Bewegung braucht, wären der Welle oben 43px abgeschnitten worden. Sie skaliert stattdessen mit. -------------------------------------------------------------------------- */ .video-banner .wave-canvas, .div-block-22 .wave-canvas { max-height: 100%; } /* -------------------------------------------------------------------------- 102. Die Wellen-Grafik über dem Interview passt in ihren Rahmen. Sie ist 240px hoch und an der Unterkante verankert. Seit der Rahmen 16:9 läuft (§99), ist er auf dem Telefon nur noch 197px hoch — mit dem `overflow: hidden`, das die Zoom-Bewegung braucht, wären der Welle oben 43px abgeschnitten worden. Sie skaliert stattdessen mit. -------------------------------------------------------------------------- */ .video-banner .wave-canvas, .div-block-22 .wave-canvas { max-height: 100%; } /* -------------------------------------------------------------------------- 103. Der scrollbare Rest UNTER dem Footer — die eigentliche Ursache. Der Footer war die ganze Zeit korrekt einen Screen hoch; das Dokument war es nicht. Im echten Fenster gemessen (1200×650, Zoom .7, ans Scroll-Ende gefahren): Sektionsunterkante bei 563, Fensterkante bei 650 — 87px, in denen das Dunkelgrau von `html` steht. Auf schwarzem Grund liest sich das als Innenabstand, der nicht existiert: die Luft unter der Legal-Zeile las 127px, wo links 42px stehen. Verursacher ist die Swoosh-Grafik des Footers. Ihr Container liegt absolut, die Lottie darin ist 464px hoch und ragt 87px unter den Body — absoluter Überlauf macht das Elternelement nicht höher, erweitert aber den scrollbaren Bereich des Dokuments. Deshalb griff auch die Korrektur in `footerViewportHeight()` nicht: sie zieht den Überhang per negativer Außenkante ab (gemessen -123.75px) und kam gegen einen Überlauf, der sich davon nicht verkleinern lässt, nicht an. Die Sektion beschneidet ihn jetzt. Sichtbar ändert das nichts — abgeschnitten wird nur, was unter der Seite lag. Nachgemessen: Dokument 5496 → 5409, Rest nach dem Footer 0, Sektionsunterkante genau auf der Fensterkante, Luft unter dem Copyright 41 gegen 42 links. Die negative Außenkante wird damit von selbst 0 — der Zweig im JS bleibt als Rückfall stehen, greift aber nicht. -------------------------------------------------------------------------- */ .section-2 { overflow: hidden; } /* -------------------------------------------------------------------------- 104. Die Play-Taste bleibt beim Überfahren mittig. Der Export zentriert sie mit `left/top: 50%` plus `translate(-50%, -50%)` (gemessen `matrix(1,0,0,1,-60,-60)` bei 120px). Mein `transform: scale(1.1)` aus §100 hat diese Verschiebung ERSETZT — die Taste sprang um ihre halbe Breite nach rechts unten. Beide Anteile stehen jetzt in einer Angabe. -------------------------------------------------------------------------- */ .video-banner .video-btn, .div-block-22 .link-block-4 { transform: translate(-50%, -50%); } .video-banner:hover .video-btn, .div-block-22:hover .link-block-4 { transform: translate(-50%, -50%) scale(1.1); } /* -------------------------------------------------------------------------- 105. Die Erfahrungskachel wird beim Antippen ganz gedeckt. `.layer2` trägt `top: 140px; bottom: 0`; der Hover-Zustand des Exports setzt nur `height: 100%`. Mit gesetztem `top` gewinnt die Höhe gegen `bottom`, die Fläche startet also weiter unter der Oberkante — gemessen bei 390px: 332 von 350px, die obersten 18px blieben offen, auf dem Telefon sichtbar als abgeschnittener Verlauf über dem Foto. Die Fläche liegt jetzt auf allen vier Kanten. -------------------------------------------------------------------------- */ html.page-expertise .experience-card:hover .layer2, html.page-expertise .experience-card:hover .layer2.bg-white { /* `inset: 0` UND `height: auto`: die 100 % des Exports lösten sich gegen einen 332px hohen Bezugsrahmen auf, nicht gegen die 350px der Kachel — mit gesetzter Höhe blieb also auch bei `top: 0` ein Rest offen. Ohne Höhenangabe spannt sich die Fläche zwischen alle vier Kanten und deckt sicher. */ inset: 0 !important; height: auto !important; } /* -------------------------------------------------------------------------- 106. iPhone-Querformat: der Text steht links so weit vom Rand wie oben. Der Export führt in diesem Band `32px 40px` — oben 32, links 40. §64 zog links früher auf 19px, weil im iPad-HOCHformat die Sektionsüberschrift auf dieser Kante sitzt; im Querformat gibt es diese Kante nicht, und seit §64 nur noch hochkant greift, stand hier 40 gegen 32. Beides ist jetzt 32. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 991px) and (orientation: landscape) { .box-wrapper .box-1 > .box-inner, .track-sec .box-1 > .box-inner, .box-inner-wrapper .box-1 > .box-inner { /* rundum 32 — sonst stünde nach dem Nachtrag oben 40 gegen links 32 */ padding: 32px !important; } .box-wrapper .box-2, .track-sec .box-2 { padding-left: 32px !important; padding-right: 32px !important; /* und der Wert steht unten so weit vom Rand wie links — dieselbe Regel wie in den übrigen Bändern; hier waren es 40 unten gegen 32 links */ padding-top: 32px !important; padding-bottom: 32px !important; } .box-wrapper .box-3 { padding-left: 32px !important; padding-right: 32px !important; } } /* -------------------------------------------------------------------------- 107. Projektkarten: Wert und Schlagwort richten sich nach der Kachelbreite. Bisher entschieden sechs Stufen über sechs Bänder, und die passten nicht mehr zur Kachel, seit sie ihre Rasterzeile füllt (§93). Gemessen war das Schlagwort an drei Stellen KLEINER als sein eigenes Label — 15 gegen 16 bei 1100, 14 gegen 16 bei 834 und 844 — und der Wert lag bei 1100 auf 24px, obwohl in derselben Kachel 48px Platz haben. Statt Stufen eine Regel: die Kachel wird zum Container, die Größe kommt aus ihrer Inhaltsbreite. `container-type: inline-size` bezieht `cqw` auf die INNENfläche, der Innenabstand ist also schon abgezogen — das ist wichtig, weil er zwischen den Bändern wechselt (40px auf dem Desktop, 24px auf dem Telefon). Die Teiler kommen aus der Messung mit der echten Schrift, jeweils an der längsten Zeichenfolge, die real vorkommt: Schlagwort „Prozesstechnologie" = 9,19 × Schriftgröße breit → Teiler 10 Zahl „500 Mio. €" = 4,94 × Schriftgröße breit → Teiler 5,1 Der Teiler liegt jeweils über dem gemessenen Faktor, damit auch die zweit- längste Zeichenfolge Reserve hat. Daraus ergibt sich (Inhaltsbreite → Schlagwort / Zahl): 1100, 2 Karten 277px → 26 / 48 (vorher 15 / 24) 1200, 3 Karten 170px → 17 / 33 (vorher 15 / 30) 1440, 3 Karten 184px → 18 / 36 (vorher 17 / 30) 1920, 3 Karten 204px → 20 / 40 (vorher 17 / 30) 834/844, 1 Karte 302px → 26 / 48 (vorher 14 / 36) 390, 1 Karte 126px → 14 / 24 (unverändert) NACHTRAG: die Obergrenzen waren zu hoch (26 / 48). Auf einer breiten Kachel — iPad quer mit zwei Karten — schöpfte die Regel sie aus, und der Wert stand dreimal so groß wie sein Label. Die Grenzen liegen jetzt bei 22 / 36: 36px war die größte Zahl, die vorher irgendwo stand (iPad hochkant), also wird nichts größer als etwas, das schon abgenommen war — die kleinen Fälle holen nur auf. Neu: 1100/1194 → 22/36 (vorher 15/24), 1200 → 17/33, 1440 → 18/36, 1920 → 20/36, 834/844 → 22/36, 390 → 14/24 (unverändert). Untergrenze des Schlagworts war 14px — die Labelgröße des Telefons. Dort war „Prozesstechnologie" breiter als die Kachel und brach im Wort; eine höhere Untergrenze hätte das verschlimmert. NACHTRAG 11.8. (Kundenwunsch: „die Werte sollen mindestens so groß sein wie Industrials & other manufacturing"): gemessen war das Schlagwort im Band 992–1199 wieder kleiner als sein eigenes Label — 14 gegen 16 bei 992, 15 gegen 16 bei 1100. Möglich wurde die Anhebung erst durch eine Fuge: von den fünf Werten trugen vier längst eine (`Maschinen·bau`, `Prozess·technologie`, `Gesund·heitswesen`), ausgerechnet `Automobilindustrie` nicht — und genau der begrenzte alles. Mit `Automobil·industrie` ist das längste unteilbare Stück nicht mehr das ganze Wort, sondern „technologie": statt des 9,19-fachen nur noch das 5,5-fache der Schriftgröße. Nachgemessen: bei 992 und 390 passten vorher 14px, jetzt 22,4px. Daraus die neuen Werte: Untergrenze 16px (die Labelgröße), Teiler 8 statt 10 (Reserve über den gemessenen 5,5), Obergrenze bleibt 22px. Höhe ist nirgends knapp: die Kachel ist 137px hoch (72px auf dem Telefon), Label und Wert belegen darin zusammen höchstens 68px plus Innenabstand. -------------------------------------------------------------------------- */ .project-box .project-box-wrapper2 .box-1 > .box-inner { container-type: inline-size; } .project-box .project-box-wrapper2 .box-1 > .box-inner p.heading-010, .project-box .project-box-wrapper2 .box-1 > .box-inner .heading-010 { font-size: clamp(16px, calc(100cqw / 8), 22px) !important; } .project-box .project-box-wrapper2 .box-1 > .box-inner .text-size-xlarge, .project-box .project-box-wrapper2 .box-1 > .box-inner .text-block-2 { font-size: clamp(24px, calc(100cqw / 5.1), 36px) !important; } /* -------------------------------------------------------------------------- 108. Der Abstand zwischen dem Team-Button und dem Gruppenbild schrumpft. Gemessen von der Unterkante des Textblocks zur Oberkante des Bildes: 160px auf dem Desktop, 140px auf dem Telefon. Er setzt sich aus zwei Außenkanten zusammen — 60px unter dem Textblock (40 auf dem Telefon) und 30px über dem Bild. Dazu kommt der transparente Rand, den das Bild oberhalb der Köpfe mitbringt; der Eindruck ist also größer als das Maß. Beide Kanten gehen zurück: 20px unter dem Text, 0 über dem Bild — gemessen 90px statt 160. -------------------------------------------------------------------------- */ html.page-index .executives_photos.mt-60, .executives_photos.mt-60 { margin-top: 0 !important; } html.page-index .text-align-center:has(+ * .executives_photos), .section_about .text-align-center.executives-text, .executives-text.text-align-center { margin-bottom: 20px !important; } /* -------------------------------------------------------------------------- 109. Oben wie links — auch in den beiden Bändern, die eigene Werte führen. §64 zieht im iPad-Hochformat den linken Innenabstand auf 19px, damit der Text auf der Kante der Sektionsüberschrift sitzt. Die Platte behielt dabei ihre 40px oben (gemessen 40/19), und die weiße Box führte im iPhone-Querformat 19px oben gegen 32px links. Beide ziehen jetzt nach. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) { .box-wrapper .box-2, .track-sec .box-2 { padding-top: 19px !important; } } @media (min-width: 768px) and (max-width: 991px) and (orientation: landscape) { .box-wrapper .box-3 { padding-top: 32px !important; } } /* -------------------------------------------------------------------------- 110. Die Kontur-Box ist so hoch, wie ihr Inhalt sie braucht. Der Export pinnt `.box-inner.h-110` auf `height: 110px`. Bei 40px Innenabstand und einer 20px-Zeile bleiben darin 54px unter dem Text gegen 40px darüber und links — sichtbar als Totraum, und die Box läuft höher als nötig. Höhe kommt jetzt aus dem Inhalt: oben, unten und links dieselben 40px, und ein zweizeiliges Label macht die Box auf statt überzulaufen. Die Reihe gleicht sich über die Platte aus, die den Rest der Spalte füllt (§45c). -------------------------------------------------------------------------- */ .box-wrapper .box-1 > .box-inner.h-110, .track-sec .box-1 > .box-inner.h-110 { height: auto !important; min-height: 0 !important; } /* -------------------------------------------------------------------------- 111. EIN Maß für alle KPI-Beschriftungen — in jeder Breite. Gemessen bei 1440 vorher: dieselbe Sorte Text las drei Größen. Beschriftung im Kontur-Kasten 18px auf der Startseite, aber 16px auf /private-equity und den Case Studies; Überschrift der kleinen Kästen („Average revenue CAGR") 18px; die Zeile auf der Platte („Over an average of 3 years") 16px auf der Startseite und 20px auf den Unterseiten. Ursache ist nicht die Reihenfolge, sondern die Spezifität: §94 setzt die 18px über kurze Selektoren, §57e/§62 setzen 16px über `:has(.box-inner.h-195)` bzw. `h6.heading-6` — beide tragen mehr Klassen und gewinnen deshalb trotz früherer Stelle. Darum steht dieselbe Selektorenliste hier noch einmal, mit `html` davor: ab hier hat die Größe dieser Label genau eine Quelle. Ein Maß je Band: 18px ab 1200, 16px von 768 bis 1199 (iPad wie abgenommen), 15px auf dem Telefon. -------------------------------------------------------------------------- */ html .box-wrapper .box-1 > .box-inner.h-110 > p, html .box-wrapper .box-1 > .box-inner .paragraph, html .box-wrapper .box-1 > .box-inner > h6.heading-6:not(.mt-5), html .box-wrapper .box-2 > h6.heading-6, html .box-wrapper .box-2 > .heading-6, html .box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner.h-110 > p, html .box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner .paragraph, html .box-wrapper:has(.box-inner.h-195) .box-2 > .heading-6, html .track-sec .box-1 > .box-inner.h-110 > p, html .track-sec .box-1 > .box-inner .paragraph, html .track-sec .box-1 > .box-inner > h6.heading-6:not(.mt-5), html .track-sec .box-2 > h6.heading-6, html .track-sec .box-2 > .heading-6, html .track-sec:has(.box-inner.h-195) .box-1 > .box-inner .paragraph, html .track-sec:has(.box-inner.h-195) .box-1 > .box-inner.h-110 > p { font-size: 15px !important; } @media (min-width: 768px) { html .box-wrapper .box-1 > .box-inner.h-110 > p, html .box-wrapper .box-1 > .box-inner .paragraph, html .box-wrapper .box-1 > .box-inner > h6.heading-6:not(.mt-5), html .box-wrapper .box-2 > h6.heading-6, html .box-wrapper .box-2 > .heading-6, html .box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner.h-110 > p, html .box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner .paragraph, html .box-wrapper:has(.box-inner.h-195) .box-2 > .heading-6, html .track-sec .box-1 > .box-inner.h-110 > p, html .track-sec .box-1 > .box-inner .paragraph, html .track-sec .box-1 > .box-inner > h6.heading-6:not(.mt-5), html .track-sec .box-2 > h6.heading-6, html .track-sec .box-2 > .heading-6, html .track-sec:has(.box-inner.h-195) .box-1 > .box-inner .paragraph, html .track-sec:has(.box-inner.h-195) .box-1 > .box-inner.h-110 > p { font-size: 16px !important; } } /* ab 1200 eine Stufe größer — und dieselbe Zeilenhöhe, sonst lesen zweizeilige Label je nach Nachbarkasten unterschiedlich weit auseinander (§94 wollte das, verlor aber gegen §58a) */ @media (min-width: 1200px) { html .box-wrapper .box-1 > .box-inner.h-110 > p, html .box-wrapper .box-1 > .box-inner .paragraph, html .box-wrapper .box-1 > .box-inner > h6.heading-6:not(.mt-5), html .box-wrapper .box-2 > h6.heading-6, html .box-wrapper .box-2 > .heading-6, html .box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner.h-110 > p, html .box-wrapper:has(.box-inner.h-195) .box-1 > .box-inner .paragraph, html .box-wrapper:has(.box-inner.h-195) .box-2 > .heading-6, html .track-sec .box-1 > .box-inner.h-110 > p, html .track-sec .box-1 > .box-inner .paragraph, html .track-sec .box-1 > .box-inner > h6.heading-6:not(.mt-5), html .track-sec .box-2 > h6.heading-6, html .track-sec .box-2 > .heading-6, html .track-sec:has(.box-inner.h-195) .box-1 > .box-inner .paragraph, html .track-sec:has(.box-inner.h-195) .box-1 > .box-inner.h-110 > p { font-size: 18px !important; /* Zeilenhöhe: siehe §141 — Beschriftungen laufen überall auf 1.0 */ line-height: 1.0 !important; } } /* -------------------------------------------------------------------------- 112. Die drei Kontaktangaben auf den Profilen sind Links. E-Mail und Telefonnummer standen als reiner Text in `